diff --git a/components/chat-input.tsx b/components/chat-input.tsx
index 01ebbf5..c03b688 100644
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -28,6 +28,7 @@ import {
 import Image from "next/image";
 
 import { useDiagram } from "@/contexts/diagram-context";
+import { HistoryDialog } from "@/components/history-dialog";
 
 interface ChatInputProps {
     input: string;
@@ -262,64 +263,10 @@ export function ChatInput({
                         </DialogContent>
                     </Dialog>
 
-                    {/* History Dialog */}
-                    <Dialog open={showHistory} onOpenChange={setShowHistory}>
-                        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
-                            <DialogHeader>
-                                <DialogTitle>Diagram History</DialogTitle>
-                                <DialogDescription>
-                                    Here saved each diagram before AI
-                                    modification.
-                                    <br />
-                                    Click on a diagram to restore it
-                                </DialogDescription>
-                            </DialogHeader>
-
-                            {diagramHistory.length === 0 ? (
-                                <div className="text-center p-4 text-gray-500">
-                                    No history available yet. Send messages to
-                                    create diagram history.
-                                </div>
-                            ) : (
-                                <div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-4">
-                                    {diagramHistory.map((item, index) => (
-                                        <div
-                                            key={index}
-                                            className="border rounded-md p-2 cursor-pointer hover:border-primary transition-colors"
-                                            onClick={() => {
-                                                onDisplayChart(item.xml);
-                                                setShowHistory(false);
-                                            }}
-                                        >
-                                            <div className="aspect-video bg-white rounded overflow-hidden flex items-center justify-center">
-                                                <Image
-                                                    src={item.svg}
-                                                    alt={`Diagram version ${
-                                                        index + 1
-                                                    }`}
-                                                    width={200}
-                                                    height={100}
-                                                    className="object-contain w-full h-full p-1"
-                                                />
-                                            </div>
-                                            <div className="text-xs text-center mt-1 text-gray-500">
-                                                Version {index + 1}
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            )}
-
-                            <DialogFooter>
-                                <Button
-                                    variant="outline"
-                                    onClick={() => setShowHistory(false)}
-                                >
-                                    Close
-                                </Button>
-                            </DialogFooter>
-                        </DialogContent>
-                    </Dialog>
+                    <HistoryDialog
+                        showHistory={showHistory}
+                        setShowHistory={setShowHistory}
+                    />
                 </div>
                 <div className="flex gap-2">
                     {/* History Button */}
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index f707632..c817909 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -17,16 +17,16 @@ import { useDiagram } from "@/contexts/diagram-context";
 
 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
+            if (resolverRef && "current" in resolverRef) {
+                resolverRef.current = resolve; // Store the resolver
+            }
             onExport(); // Trigger the export
         });
     };
@@ -94,12 +94,7 @@ export default function ChatPanel() {
     const handleFileChange = (newFiles: FileList | undefined) => {
         setFiles(newFiles);
     };
-
-    // Function to handle history item selection
-    const handleSelectHistoryItem = (xml: string) => {
-        onDisplayChart(xml);
-        setShowHistory(false);
-    };
+    // Helper function to handle file input change
 
     return (
         <Card className="h-full flex flex-col rounded-none py-0 gap-0">
diff --git a/components/history-dialog.tsx b/components/history-dialog.tsx
new file mode 100644
index 0000000..a027598
--- /dev/null
+++ b/components/history-dialog.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import { useDiagram } from "@/contexts/diagram-context";
+
+interface HistoryDialogProps {
+    showHistory: boolean;
+    setShowHistory: (show: boolean) => void;
+}
+
+export function HistoryDialog({
+    showHistory,
+    setShowHistory,
+}: HistoryDialogProps) {
+    const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram();
+
+    return (
+        <Dialog open={showHistory} onOpenChange={setShowHistory}>
+            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                    <DialogTitle>Diagram History</DialogTitle>
+                    <DialogDescription>
+                        Here saved each diagram before AI modification.
+                        <br />
+                        Click on a diagram to restore it
+                    </DialogDescription>
+                </DialogHeader>
+
+                {diagramHistory.length === 0 ? (
+                    <div className="text-center p-4 text-gray-500">
+                        No history available yet. Send messages to create
+                        diagram history.
+                    </div>
+                ) : (
+                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-4">
+                        {diagramHistory.map((item, index) => (
+                            <div
+                                key={index}
+                                className="border rounded-md p-2 cursor-pointer hover:border-primary transition-colors"
+                                onClick={() => {
+                                    onDisplayChart(item.xml);
+                                    setShowHistory(false);
+                                }}
+                            >
+                                <div className="aspect-video bg-white rounded overflow-hidden flex items-center justify-center">
+                                    <Image
+                                        src={item.svg}
+                                        alt={`Diagram version ${index + 1}`}
+                                        width={200}
+                                        height={100}
+                                        className="object-contain w-full h-full p-1"
+                                    />
+                                </div>
+                                <div className="text-xs text-center mt-1 text-gray-500">
+                                    Version {index + 1}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                <DialogFooter>
+                    <Button
+                        variant="outline"
+                        onClick={() => setShowHistory(false)}
+                    >
+                        Close
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}