feat: enhance chat functionality with flowchart tools integration and improved UI interactions

app/api/chat/route.ts

@@ -1,13 +1,40 @@
 import { google } from "@ai-sdk/google";
+import { Message } from "ai/react";
 import { streamText } from "ai";
-
+import { z } from "zod";
 export const maxDuration = 30;
 
+// Define tool interfaces
+interface DisplayFlowChartArgs {
+  xml: string;
+}
+
+interface ToolContext {
+  getCurrentXML: () => string;
+  displayChart: (xml: string) => void;
+}
+
 export async function POST(req: Request) {
   const { messages } = await req.json();
-  const result = streamText({
+  const response = streamText({
     model: google("gemini-2.0-flash"),
     messages,
+    tools: {
+      display_flow_chart: {
+        description: "Display a flowchart on draw.io",
+        parameters: z.object(
+          {
+            xml: z.string().describe("XML string to be displayed on draw.io"),
+          },
+        )
+      },
+      fetch_flow_chart: {
+        description: "Get the current flowchart XML from draw.io",
+        parameters: z.object({}),
+      }
+    },
+    temperature: 0,
   });
-  return result.toDataStreamResponse();
-}
+
+  return response.toDataStreamResponse();
+}

app/page.tsx

@@ -9,24 +9,23 @@ import ChatPanel from "@/components/chatPanel";
 export default function Home() {
     const drawioRef = useRef<DrawIoEmbedRef>(null);
     const [chartXML, setChartXML] = useState<string>("");
-    const [diagram, setDiagram] = useState<string>("");
-    // const handleExport = () => {};
+
     const handleExport = () => {
-        // use this function to export the diagramxml from the drawio editor
         if (drawioRef.current) {
             drawioRef.current.exportDiagram({
                 format: "xmlsvg",
             });
         }
     };
+
     const loadDiagram = (chart: string) => {
-        // use this function to display the diagramxml in the drawio editor
         if (drawioRef.current) {
             drawioRef.current.load({
                 xml: chart,
             });
         }
     };
+
     return (
         <div className="flex h-screen bg-gray-100">
             <div className="w-2/3 p-1">
@@ -34,7 +33,6 @@ export default function Home() {
                     ref={drawioRef}
                     onExport={(data) => setChartXML(extractDiagramXML(data.data))}
                     urlParameters={{
-                        // ui: "kennedy",
                         spin: true,
                         libraries: false,
                         saveAndExit: false,
@@ -42,8 +40,14 @@ export default function Home() {
                     }}
                 />
             </div>
-            <div className="w-1/3 p-1  border-gray-300 ">
-                <ChatPanel />
+            <div className="w-1/3 p-1 border-gray-300">
+                <ChatPanel
+                    onDisplayChart={(xml) => loadDiagram(xml)}
+                    onFetchChart={() => {
+                        handleExport();
+                        return chartXML;
+                    }}
+                />
             </div>
         </div>
     );