refactor: chat-example-panel.tsx

app/api/chat/route.ts

@@ -66,9 +66,9 @@ ${lastMessage.content}
     ? [{ role: "system", content: systemMessage }, { ...lastMessage, content: formattedContent }]
     : [...messages.slice(0, -1), { ...lastMessage, content: formattedContent }];
 
-  console.log(enhancedMessages);
   const result = streamText({
     // model: google("gemini-2.0-flash"),
+    // model: openai("chatgpt-4o-latest"),
     model: openai("gpt-4o"),
     toolCallStreaming: true,
     messages: enhancedMessages,

app/page.tsx

@@ -4,7 +4,7 @@ import { DrawIoEmbed, DrawIoEmbedRef } from "react-drawio";
 import { useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { extractDiagramXML } from "./extract_xml";
-import ChatPanel from "@/components/chatPanel";
+import ChatPanel from "@/components/chat-panel";
 
 export default function Home() {
     const drawioRef = useRef<DrawIoEmbedRef>(null);

components/chat-example-panel.tsx

@@ -0,0 +1,56 @@
+export default function ExamplePanel({
+    setInput,
+    setFiles,
+}: {
+    setInput: (input: string) => void;
+    setFiles: (files: FileList | undefined) => void;
+}) {
+    const createFileList = (file: File): FileList => {
+        const dt = new DataTransfer();
+        dt.items.add(file);
+        return dt.files;
+    };
+    // New handler for the "Replicate this flowchart" button
+    const handleReplicateFlowchart = async () => {
+        setInput("Replicate this flowchart.");
+
+        try {
+            // Fetch the example image
+            const response = await fetch("/example.png");
+            const blob = await response.blob();
+            const file = new File([blob], "example.png", { type: "image/png" });
+
+            // Set the file to the files state
+            setFiles(createFileList(file));
+        } catch (error) {
+            console.error("Error loading example image:", error);
+        }
+    };
+    return (
+        <div className="px-4 py-2 border-t border-b border-gray-100">
+            <p className="text-sm text-gray-500 mb-2">
+                {" "}
+                Start a conversation to generate or modify diagrams.
+            </p>
+            <p className="text-sm text-gray-500 mb-2">
+                {" "}
+                You can also upload images to use as references.
+            </p>
+            <p className="text-sm text-gray-500 mb-2">Try these examples:</p>
+            <div className="flex flex-wrap gap-5">
+                <button
+                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
+                    onClick={handleReplicateFlowchart}
+                >
+                    Replicate this flowchart
+                </button>
+                <button
+                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
+                    onClick={() => setInput("Draw a cat for me")}
+                >
+                    Draw a cat for me
+                </button>
+            </div>
+        </div>
+    );
+}

components/chat-panel.tsx

@@ -12,10 +12,10 @@ import {
     CardTitle,
 } from "@/components/ui/card";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Button } from "@/components/ui/button";
 import { useChat } from "@ai-sdk/react";
 import { ChatInput } from "@/components/chat-input";
 import { convertToLegalXml } from "@/lib/utils";
+import ExamplePanel from "./chat-example-panel";
 interface ChatPanelProps {
     onDisplayChart: (xml: string) => void;
     onFetchChart: () => Promise<string>;
@@ -47,13 +47,9 @@ export default function ChatPanel({
         error,
         setInput,
         setMessages,
-        append,
     } = useChat({
         maxSteps: 5,
         async onToolCall({ toolCall }) {
-            console.log("Tool call:", toolCall);
-            console.log("Tool call name:", toolCall.toolName);
-            console.log("Tool call arguments:", toolCall.args);
             if (toolCall.toolName === "display_diagram") {
                 const { xml } = toolCall.args as { xml: string };
                 onDisplayChart(xml);
@@ -99,30 +95,6 @@ export default function ChatPanel({
         setFiles(newFiles);
     };
 
-    // New utility function to create a FileList from a File
-    const createFileList = (file: File): FileList => {
-        const dt = new DataTransfer();
-        dt.items.add(file);
-        return dt.files;
-    };
-
-    // New handler for the "Replicate this flowchart" button
-    const handleReplicateFlowchart = async () => {
-        setInput("Replicate this flowchart.");
-
-        try {
-            // Fetch the example image
-            const response = await fetch("/example.png");
-            const blob = await response.blob();
-            const file = new File([blob], "example.png", { type: "image/png" });
-
-            // Set the file to the files state
-            setFiles(createFileList(file));
-        } catch (error) {
-            console.error("Error loading example image:", error);
-        }
-    };
-
     // Function to handle history item selection
     const handleSelectHistoryItem = (xml: string) => {
         onDisplayChart(xml);
@@ -200,34 +172,6 @@ export default function ChatPanel({
         }
     };
 
-    const examplePanel = (
-        <div className="px-4 py-2 border-t border-b border-gray-100">
-            <p className="text-sm text-gray-500 mb-2">
-                {" "}
-                Start a conversation to generate or modify diagrams.
-            </p>
-            <p className="text-sm text-gray-500 mb-2">
-                {" "}
-                You can also upload images to use as references.
-            </p>
-            <p className="text-sm text-gray-500 mb-2">Try these examples:</p>
-            <div className="flex flex-wrap gap-5">
-                <button
-                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
-                    onClick={handleReplicateFlowchart}
-                >
-                    Replicate this flowchart
-                </button>
-                <button
-                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
-                    onClick={() => setInput("Draw a cat for me")}
-                >
-                    Draw a cat for me
-                </button>
-            </div>
-        </div>
-    );
-
     return (
         <Card className="h-full flex flex-col rounded-none py-0 gap-0">
             <CardHeader className="p-4 text-center">
@@ -235,9 +179,13 @@ export default function ChatPanel({
             </CardHeader>
             <CardContent className="flex-grow overflow-hidden px-2">
                 <ScrollArea className="h-full pr-4">
-                    {messages.length === 0
-                        ? examplePanel
-                        : messages.map((message) => (
+                    {messages.length === 0 ? (
+                        <ExamplePanel
+                            setInput={setInput}
+                            setFiles={handleFileChange}
+                        />
+                    ) : (
+                        messages.map((message) => (
                             <div
                                 key={message.id}
                                 className={`mb-4 ${
@@ -323,7 +271,8 @@ export default function ChatPanel({
                                     </div>
                                 )}
                             </div>
-                          ))}
+                        ))
+                    )}
                     {error && (
                         <div className="text-red-500 text-sm mt-2">
                             Error: {error.message}

lib/utils.ts

@@ -56,3 +56,5 @@ export function convertToLegalXml(xmlString: string): string {
 
   return result;
 }
+
+