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

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>
     );