refactor: extract all states to diagram-context.

components/chat-input.tsx

@@ -27,17 +27,16 @@ import {
 } from "@/components/ui/dialog";
 import Image from "next/image";
 
+import { useDiagram } from "@/contexts/diagram-context";
+
 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;
-    onDisplayChart: (xml: string) => void;
     files?: FileList;
     onFileChange?: (files: FileList | undefined) => void;
-    diagramHistory?: { svg: string; xml: string }[];
-    onSelectHistoryItem?: (xml: string) => void;
     showHistory?: boolean;
     setShowHistory?: (show: boolean) => void;
 }
@@ -48,14 +47,12 @@ export function ChatInput({
     onSubmit,
     onChange,
     setMessages,
-    onDisplayChart,
     files,
     onFileChange,
-    diagramHistory = [],
-    onSelectHistoryItem = () => {},
     showHistory = false,
     setShowHistory = () => {},
 }: ChatInputProps) {
+    const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram();
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [isDragging, setIsDragging] = useState(false);
@@ -289,9 +286,10 @@ export function ChatInput({
                                         <div
                                             key={index}
                                             className="border rounded-md p-2 cursor-pointer hover:border-primary transition-colors"
-                                            onClick={() =>
-                                                onSelectHistoryItem(item.xml)
-                                            }
+                                            onClick={() => {
+                                                onDisplayChart(item.xml);
+                                                setShowHistory(false);
+                                            }}
                                         >
                                             <div className="aspect-video bg-white rounded overflow-hidden flex items-center justify-center">
                                                 <Image

components/chat-message-display.tsx

@@ -8,23 +8,22 @@ import ExamplePanel from "./chat-example-panel";
 import { Message } from "ai";
 import { convertToLegalXml, replaceNodes } from "@/lib/utils";
 
+import { useDiagram } from "@/contexts/diagram-context";
+
 interface ChatMessageDisplayProps {
-    chartXML: string;
     messages: Message[];
     error?: Error | null;
     setInput: (input: string) => void;
     setFiles: (files: FileList | undefined) => void;
-    onDisplayChart: (xml: string) => void;
 }
 
 export function ChatMessageDisplay({
-    chartXML,
     messages,
     error,
     setInput,
     setFiles,
-    onDisplayChart,
 }: ChatMessageDisplayProps) {
+    const { chartXML, loadDiagram: onDisplayChart } = useDiagram();
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const previousXML = useRef<string>("");
     useEffect(() => {

components/chat-panel.tsx

@@ -13,21 +13,23 @@ import {
 import { useChat } from "@ai-sdk/react";
 import { ChatInput } from "@/components/chat-input";
 import { ChatMessageDisplay } from "./chat-message-display";
-interface ChatPanelProps {
-    chartXML: string;
-    onDisplayChart: (xml: string) => void;
-    onFetchChart: () => Promise<string>;
-    diagramHistory?: { svg: string; xml: string }[];
-    onAddToHistory?: () => void;
-}
+import { useDiagram } from "@/contexts/diagram-context";
 
-export default function ChatPanel({
-    chartXML,
-    onDisplayChart,
-    onFetchChart,
-    diagramHistory = [],
-    onAddToHistory = () => {},
-}: ChatPanelProps) {
+export default function ChatPanel() {
+    const {
+        chartXML,
+        loadDiagram: onDisplayChart,
+        handleExport: onExport,
+        resolverRef,
+        diagramHistory,
+    } = useDiagram();
+
+    const onFetchChart = () => {
+        return new Promise<string>((resolve) => {
+            resolverRef.current = resolve; // Store the resolver
+            onExport(); // Trigger the export
+        });
+    };
     // Add a step counter to track updates
 
     // Add state for file attachments
@@ -106,12 +108,10 @@ export default function ChatPanel({
             </CardHeader>
             <CardContent className="flex-grow overflow-hidden px-2">
                 <ChatMessageDisplay
-                    chartXML={chartXML}
                     messages={messages}
                     error={error}
                     setInput={setInput}
                     setFiles={handleFileChange}
-                    onDisplayChart={onDisplayChart}
                 />
             </CardContent>
 
@@ -122,11 +122,8 @@ export default function ChatPanel({
                     onSubmit={onFormSubmit}
                     onChange={handleInputChange}
                     setMessages={setMessages}
-                    onDisplayChart={onDisplayChart}
                     files={files}
                     onFileChange={handleFileChange}
-                    diagramHistory={diagramHistory}
-                    onSelectHistoryItem={handleSelectHistoryItem}
                     showHistory={showHistory}
                     setShowHistory={setShowHistory}
                 />