feat: update tool names and descriptions for diagram handling, add clear messages functionality in ChatInput

components/chat-input.tsx

@@ -3,16 +3,17 @@
 import React, { useCallback, useRef, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
-import { Loader2, Send } from "lucide-react"
+import { Loader2, Send, Trash } from "lucide-react"
 
 interface ChatInputProps {
     input: string
     status: "submitted" | "streaming" | "ready" | "error"
     onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
     onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+    setMessages: (messages: any[]) => void
 }
 
-export function ChatInput({ input, status, onSubmit, onChange }: ChatInputProps) {
+export function ChatInput({ input, status, onSubmit, onChange, setMessages }: ChatInputProps) {
     const textareaRef = useRef<HTMLTextAreaElement>(null)
 
     // Auto-resize textarea based on content
@@ -51,7 +52,17 @@ export function ChatInput({ input, status, onSubmit, onChange }: ChatInputProps)
                 aria-label="Chat input"
                 className="min-h-[80px] resize-none transition-all duration-200"
             />
-            <div className="flex justify-end">
+            <div className="flex justify-between gap-2">
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="default"
+                    onClick={() => setMessages([])}
+                    title="Clear messages"
+                >
+                    <Trash className="mr-2 h-4 w-4" />
+                    Start a new conversation
+                </Button>
                 <Button
                     type="submit"
                     disabled={status === "streaming" || !input.trim()}

components/chatPanel.tsx

@@ -5,6 +5,7 @@ import { useRef, useEffect } from "react"
 
 import { Card, CardContent, CardFooter, CardHeader, 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"
 
@@ -14,20 +15,16 @@ interface ChatPanelProps {
 }
 
 export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelProps) {
-    const { messages, input, handleInputChange, handleSubmit, status, error, addToolResult } = useChat({
+    const { messages, input, handleInputChange, handleSubmit, status, error, setInput, setMessages } = 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_flow_chart") {
+            if (toolCall.toolName === "display_diagram") {
                 const { xml } = toolCall.args as { xml: string };
                 onDisplayChart(xml);
                 return "Successfully displayed the flowchart.";
-            } else if (toolCall.toolName === "fetch_flow_chart") {
-                const currentXML = await onFetchChart();
-                console.log("Current XML:", currentXML);
-                return currentXML;
             }
         },
         onError: (error) => {
@@ -41,11 +38,24 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
         if (messagesEndRef.current) {
             messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
         }
+        console.log("Messages updated:", messages);
     }, [messages])
 
     const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault()
         if (input.trim() && status !== "streaming") {
+            setInput(
+                `
+                Current diagram XML:
+                """xml
+                ${onFetchChart()}
+                """
+                User input:
+                """md
+                ${input}
+                """
+                `
+            )
             handleSubmit(e)
         }
     }
@@ -169,6 +179,7 @@ export default function ChatPanel({ onDisplayChart, onFetchChart }: ChatPanelPro
                     status={status}
                     onSubmit={onFormSubmit}
                     onChange={handleInputChange}
+                    setMessages={setMessages}
                 />
             </CardFooter>
         </Card>