Merge pull request #19 from BeRecursive22/enh/chat-ui

Enh/chat UI

Author: BeRecursive22

src/api/chat-event-stream.ts

@@ -26,11 +26,14 @@ export function createStreamManager(options: StreamManagerOptions) {
     try {
       const parsedData = JSON.parse(event.data);
       console.log("Parsed Data: ", parsedData);
-      if(parsedData.type === "presentation_content"){
-        onStorymapMessage?.(parsedData.data);
-      } else if(parsedData.type === "status" || parsedData.type === "complete"){
+      if(parsedData.type === "placestory"){
+        console.log("Placestory: ", parsedData.payload);
+        onStorymapMessage?.(parsedData.payload);
+      } else if(parsedData.type === "status"){
         console.log("Status: ", parsedData);
         onJobStatus?.(parsedData);
+      } else if(parsedData.type === "message"){
+        onStreaming?.(parsedData.payload);
       } else {
         onStreaming?.(parsedData);
         console.log("Streaming: ", parsedData);

src/api/create-chat-stream.ts

@@ -12,10 +12,11 @@ export const createChatStream = async (props: ChatProps) => {
     try {
         const result = await ky.post(`${BASE_URL}/v1/storymap/chat/${sessionId}`,
             {
+                timeout: 30000,
                 json: {
                     user_message: prompt
-                }
-            }
+                },
+            },
         ).json<ChatStreamResponse>()
         console.log("Result:", result);
         return result

src/config.ts

@@ -16,4 +16,4 @@ export const LOCAL_API_URL = "http://localhost:8000"
 //     }
 // }
 
-export const BASE_URL = API_URL
+export const BASE_URL = LOCAL_API_URL

src/features/chat.tsx

@@ -23,9 +23,9 @@ import remarkGfm from "remark-gfm";
 import { v4 as uuidv4 } from "uuid";
 
 const queries = [
-  "Build me an interactive presentation for 1 S Main St, Bel Air, MD 21014 for use as a Restaurant",
-  "Build me an interactive presentation for 123 Market Street, San Francisco, CA 94105 for use as a Retail",
-  "Build me an interactive presentation for 555 Madison Avenue, New York, NY 10022 for use as an Office",
+  "Plan a placestory highlighting the redevelopment of 1 S Main St, Bel Air, MD 21014 into a farm-to-table dining destination.",
+  "Design a placestory showcasing 123 Market Street, San Francisco, CA 94105 as an innovative retail hub for emerging brands.",
+  "Craft a placestory that positions 555 Madison Avenue, New York, NY 10022 as a premium corporate headquarters for finance firms.",
 ];
 
 export const Chat = () => {
@@ -225,7 +225,7 @@ const ChatMessages = ({
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [showCopiedMessage, setShowCopiedMessage] = useState(false);
-  const { streamId, jobStatus } = useUserStore();
+  const { jobStatus, isProcessingMessage } = useUserStore();
 
   console.log("Job status: ", jobStatus);
 
@@ -307,7 +307,7 @@ const ChatMessages = ({
                     <div className="flex items-center justify-start gap-2 mt-3">
                       <span className="w-2 h-2 rounded-full bg-orange-600"></span>
                       <span className="text-xs text-border font-light">
-                        IP Agent
+                        Placestory
                       </span>
                     </div>
                   )}
@@ -483,7 +483,7 @@ const ChatMessages = ({
                   </ReactMarkdown>
 
                   {/* Copy button for assistant messages only */}
-                  {message.type === "assistant" && !streamId && (
+                  {message.type === "assistant" && !isProcessingMessage && (
                     <div className="flex items-center justify-end gap-2">
                       <Tooltip>
                         <TooltipTrigger>

src/features/storymap-preview.tsx

@@ -63,12 +63,12 @@ export const StorymapPreview = () => {
   return (
     <div className="w-full h-full">
       <div className="w-full h-12 bg-neutral-200 flex items-center justify-between p-2 px-6 shadow-md">
-        <span className="text-sm font-medium">{storymapContent?.presentation_title || "Presentation Title here..."}</span>
+        <span className="text-sm font-medium">{storymapContent?.placestory_title || "Presentation Title here..."}</span>
         <Button onClick={() => exportContentAsMarkdown()} variant="outline">Export</Button>
       </div>
       <div className="w-full h-[calc(100%-48px)] overflow-y-auto">
         {storymapContent && (
-          <RenderBlocks blocks={storymapContent.presentation_blocks} />
+          <RenderBlocks blocks={storymapContent.placestory_blocks} />
         )}
       </div>
     </div>

src/lib/utils.ts

@@ -96,13 +96,13 @@ export const mdForBlock = (presentationBlock: StorymapBlocks, level = 2): string
 export const storymapToMarkdown = (t: StorymapTemplate): string => {
   const frontmatter = [
     "---",
-    `Title: ${t.presentation_title}`,
+    `Title: ${t.placestory_title}`,
     "Exported: true",
     "---",
     "",
   ].join("\n");
-  const title = `# ${t.presentation_title}\n\n`;
-  const body = t.presentation_blocks.map(b => mdForBlock(b, 2)).join("\n");
+  const title = `# ${t.placestory_title}\n\n`;
+  const body = t.placestory_blocks.map(b => mdForBlock(b, 2)).join("\n");
   return frontmatter + title + body;
 }
 

src/tests/dummy-templates.ts

@@ -3,8 +3,8 @@ import type { StorymapTemplate } from "@/types/storymap.types";
 const dummyImageUrl = "https://res.cloudinary.com/truva-production/image/upload/t_large_image/t_invisible_watermark/f_auto/oykm1v47ofwvz737xz27"
 
 export const DummyTemplate: StorymapTemplate = {
-  presentation_title: "A Premier Culinary Destination: 555 Madison Avenue",
-  presentation_blocks: [
+  placestory_title: "A Premier Culinary Destination: 555 Madison Avenue",
+  placestory_blocks: [
     {
       id: "cover_block_01",
       type: "cover" as const,

src/types/storymap.types.ts

@@ -103,6 +103,6 @@ export type StorymapBlocks = CoverBlockType | TextBlockType | ImageBlockType | M
 
 
 export interface StorymapTemplate {
-    presentation_title: string;
-    presentation_blocks: StorymapBlocks[];
+    placestory_title: string;
+    placestory_blocks: StorymapBlocks[];
 }