From d2a630929b704fe8f2e43e36625c1256752d26ae Mon Sep 17 00:00:00 2001 From: "dayuan.jiang" Date: Tue, 25 Mar 2025 02:24:12 +0000 Subject: [PATCH] refactor: chat-example-panel.tsx --- app/api/chat/route.ts | 2 +- app/page.tsx | 2 +- components/chat-example-panel.tsx | 56 +++++ components/{chatPanel.tsx => chat-panel.tsx} | 239 ++++++++----------- lib/utils.ts | 4 +- 5 files changed, 155 insertions(+), 148 deletions(-) create mode 100644 components/chat-example-panel.tsx rename components/{chatPanel.tsx => chat-panel.tsx} (50%) diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts index e5caf2c..b83e2b6 100644 --- a/app/api/chat/route.ts +++ b/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, diff --git a/app/page.tsx b/app/page.tsx index 405c0d1..bc81fba 100644 --- a/app/page.tsx +++ b/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(null); diff --git a/components/chat-example-panel.tsx b/components/chat-example-panel.tsx new file mode 100644 index 0000000..7bbf8f2 --- /dev/null +++ b/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 ( +
+

+ {" "} + Start a conversation to generate or modify diagrams. +

+

+ {" "} + You can also upload images to use as references. +

+

Try these examples:

+
+ + +
+
+ ); +} diff --git a/components/chatPanel.tsx b/components/chat-panel.tsx similarity index 50% rename from components/chatPanel.tsx rename to components/chat-panel.tsx index 7f0b82b..0b55666 100644 --- a/components/chatPanel.tsx +++ b/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; @@ -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 = ( -
-

- {" "} - Start a conversation to generate or modify diagrams. -

-

- {" "} - You can also upload images to use as references. -

-

Try these examples:

-
- - -
-
- ); - return ( @@ -235,95 +179,100 @@ export default function ChatPanel({ - {messages.length === 0 - ? examplePanel - : messages.map((message) => ( -
-
- {/* Render message content based on parts if available */} - {message.parts - ? message.parts.map((part, index) => { - switch (part.type) { - case "text": - return ( -
- {part.text} -
- ); - case "tool-invocation": - return renderToolInvocation( - part.toolInvocation - ); - default: - return null; - } - }) - : // Fallback to simple content for older format - message.content} -
- - {/* Display image attachments */} - {message?.experimental_attachments - ?.filter((attachment) => - attachment?.contentType?.startsWith( - "image/" - ) - ) - .map((attachment, index) => ( -
-
- { -
-
- ))} - - {/* Legacy support for function_call format */} - {(message as any).function_call && ( -
-
- Using tool:{" "} - { - (message as any).function_call - .name + {messages.length === 0 ? ( + + ) : ( + messages.map((message) => ( +
+
+ {/* Render message content based on parts if available */} + {message.parts + ? message.parts.map((part, index) => { + switch (part.type) { + case "text": + return ( +
+ {part.text} +
+ ); + case "tool-invocation": + return renderToolInvocation( + part.toolInvocation + ); + default: + return null; } - ... -
-
- )} -
- ))} + }) + : // Fallback to simple content for older format + message.content} +
+ + {/* Display image attachments */} + {message?.experimental_attachments + ?.filter((attachment) => + attachment?.contentType?.startsWith( + "image/" + ) + ) + .map((attachment, index) => ( +
+
+ { +
+
+ ))} + + {/* Legacy support for function_call format */} + {(message as any).function_call && ( +
+
+ Using tool:{" "} + { + (message as any).function_call + .name + } + ... +
+
+ )} +
+ )) + )} {error && (
Error: {error.message} diff --git a/lib/utils.ts b/lib/utils.ts index c848602..0af84da 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -55,4 +55,6 @@ export function convertToLegalXml(xmlString: string): string { } return result; -} \ No newline at end of file +} + +