refactor: Relocate handleClear Logic: Move the chat and diagram clearing logic to ChatPanel (or a Server Action) and have ChatInput call the onClearChat prop. Introduce a clearDiagram method in DiagramContext.

components/chat-input.tsx

@@ -40,7 +40,7 @@ export function ChatInput({
     showHistory = false,
     onToggleHistory = () => {},
 }: ChatInputProps) {
-    const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram();
+    const { diagramHistory } = useDiagram();
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [isDragging, setIsDragging] = useState(false);
@@ -132,14 +132,6 @@ export function ChatInput({
     // Handle clearing conversation and diagram
     const handleClear = () => {
         onClearChat();
-        onDisplayChart(`<mxfile host="embed.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36" version="26.1.1">
-            <diagram name="Page-1" id="NsivuNt5aJDXaP8udwGv">
-                <mxGraphModel dx="394" dy="700" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
-                    <root>
-                    </root>
-                </mxGraphModel>
-            </diagram>
-        </mxfile>`);
         setShowClearDialog(false);
     };
 

components/chat-panel.tsx

@@ -20,6 +20,7 @@ export default function ChatPanel() {
         loadDiagram: onDisplayChart,
         handleExport: onExport,
         resolverRef,
+        clearDiagram,
     } = useDiagram();
 
     const onFetchChart = () => {
@@ -123,7 +124,10 @@ export default function ChatPanel() {
                     status={status}
                     onSubmit={onFormSubmit}
                     onChange={handleInputChange}
-                    onClearChat={() => setMessages([])}
+                    onClearChat={() => {
+                        setMessages([]);
+                        clearDiagram();
+                    }}
                     files={files}
                     onFileChange={handleFileChange}
                     showHistory={showHistory}

contexts/diagram-context.tsx

@@ -13,6 +13,7 @@ interface DiagramContextType {
     resolverRef: React.Ref<((value: string) => void) | null>;
     drawioRef: React.Ref<DrawIoEmbedRef | null>;
     handleDiagramExport: (data: any) => void;
+    clearDiagram: () => void;
 }
 
 const DiagramContext = createContext<DiagramContextType | undefined>(undefined);
@@ -59,6 +60,14 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         }
     };
 
+    const clearDiagram = () => {
+        const emptyDiagram = `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`;
+        loadDiagram(emptyDiagram);
+        setChartXML(emptyDiagram);
+        setLatestSvg("");
+        setDiagramHistory([]);
+    };
+
     return (
         <DiagramContext.Provider
             value={{
@@ -70,6 +79,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 resolverRef,
                 drawioRef,
                 handleDiagramExport,
+                clearDiagram,
             }}
         >
             {children}