refactor: extract all states to diagram-context.

app/page.tsx

@@ -1,83 +1,44 @@
 "use client";
-import { DrawIoEmbed, DrawIoEmbedRef } from "react-drawio";
-
-import { useRef, useState } from "react";
-import { extractDiagramXML } from "./extract_xml";
+import React from "react";
+import { DrawIoEmbed } from "react-drawio";
 import ChatPanel from "@/components/chat-panel";
+import { DiagramProvider, useDiagram } from "@/contexts/diagram-context";
 
-export default function Home() {
-    const drawioRef = useRef<DrawIoEmbedRef>(null);
-    const [chartXML, setChartXML] = useState<string>("");
-    // Add a ref to store the resolver function
-    const resolverRef = useRef<((value: string) => void) | null>(null);
-    // Add state for diagram history
-    const [diagramHistory, setDiagramHistory] = useState<
-        { svg: string; xml: string }[]
-    >([]);
-    // Add state for latest SVG
-    const [latestSvg, setLatestSvg] = useState<string>("");
-
-    const handleExport = () => {
-        if (drawioRef.current) {
-            drawioRef.current.exportDiagram({
-                format: "xmlsvg",
-            });
-        }
-    };
-
-    const loadDiagram = (chart: string) => {
-        if (drawioRef.current) {
-            drawioRef.current.load({
-                xml: chart,
-            });
-        }
-    };
+// Internal layout component
+function DiagramPageLayout({ children }: { children: React.ReactNode }) {
+    const { drawioRef, handleDiagramExport } = useDiagram();
 
     return (
         <div className="flex h-screen bg-gray-100">
-            <div className="w-2/3 p-1">
-                <DrawIoEmbed
-                    ref={drawioRef}
-                    onExport={(data) => {
-                        const extractedXML = extractDiagramXML(data.data);
-                        setChartXML(extractedXML);
-                        // Store the latest SVG data
-                        setLatestSvg(data.data);
-                        // Directly update diagramHistory with the new data
-                        setDiagramHistory((prev) => [
-                            ...prev,
-                            { svg: data.data, xml: extractedXML },
-                        ]);
-                        // If there's a pending resolver, resolve it with the fresh XML
-                        if (resolverRef.current) {
-                            resolverRef.current(extractedXML);
-                            resolverRef.current = null;
-                        }
-                    }}
-                    urlParameters={{
-                        spin: true,
-                        libraries: false,
-                        saveAndExit: false,
-                        noExitBtn: true,
-                    }}
-                />
-            </div>
-            <div className="w-1/3 p-1 border-gray-300">
-                <ChatPanel
-                    chartXML={chartXML}
-                    onDisplayChart={(xml) => loadDiagram(xml)}
-                    onFetchChart={() => {
-                        return new Promise<string>((resolve) => {
-                            // Store the resolver so onExport can use it
-                            resolverRef.current = resolve;
-                            // Trigger the export
-                            handleExport();
-                        });
-                    }}
-                    diagramHistory={diagramHistory}
-                    onAddToHistory={() => {}}
-                />
+            <div className="w-2/3 p-1 h-full">
+                <div className="h-full relative">
+                    <div className="absolute inset-0">
+                        <div className="w-full h-full">
+                            <DrawIoEmbed
+                                ref={drawioRef}
+                                onExport={handleDiagramExport}
+                                urlParameters={{
+                                    spin: true,
+                                    libraries: false,
+                                    saveAndExit: false,
+                                    noExitBtn: true,
+                                }}
+                            />
+                        </div>
+                    </div>
+                </div>
             </div>
+            <div className="w-1/3 h-full p-1">{children}</div>
         </div>
     );
 }
+
+export default function Home() {
+    return (
+        <DiagramProvider>
+            <DiagramPageLayout>
+                <ChatPanel />
+            </DiagramPageLayout>
+        </DiagramProvider>
+    );
+}