fix: flash problem

app/api/chat/route.ts

@@ -75,7 +75,16 @@ ${lastMessage.content}
     tools: {
       // Client-side tool that will be executed on the client
       display_diagram: {
-        description: "Display a diagram on draw.io",
+        description: `Display a diagram on draw.io. You only need to pass the nodes inside the <root> tag (including the <root> tag itself) in the XML string.
+        For example:
+        <root>
+          <mxCell id="0"/>
+          <mxCell id="1" parent="0"/>
+          <mxGeometry x="20" y="20" width="100" height="100" as="geometry"/>
+          <mxCell id="2" value="Hello, World!" style="shape=rectangle" parent="1">
+            <mxGeometry x="20" y="20" width="100" height="100" as="geometry"/>
+          </mxCell>
+        </root>`,
         parameters: z.object({
           xml: z.string().describe("XML string to be displayed on draw.io")
         })

app/page.tsx

@@ -2,7 +2,6 @@
 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/chat-panel";
 
@@ -28,6 +27,7 @@ export default function Home() {
 
     const loadDiagram = (chart: string) => {
         if (drawioRef.current) {
+            console.log("xml before load", chart);
             drawioRef.current.load({
                 xml: chart,
             });
@@ -65,6 +65,7 @@ export default function Home() {
             </div>
             <div className="w-1/3 p-1 border-gray-300">
                 <ChatPanel
+                    chartXML={chartXML}
                     onDisplayChart={(xml) => loadDiagram(xml)}
                     onFetchChart={() => {
                         return new Promise<string>((resolve) => {