From 6819a929216851c54da8ce5de554c987a8f4205b Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Sun, 23 Mar 2025 13:54:21 +0000
Subject: [PATCH] feat: implement diagram history functionality with history
 dialog in ChatInput and ChatPanel

---
 app/page.tsx              | 20 ++++++++
 components/chat-input.tsx | 96 ++++++++++++++++++++++++++++++++++++++-
 components/chatPanel.tsx  | 19 ++++++++
 3 files changed, 134 insertions(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index c422de0..fbfa4d0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,6 +11,12 @@ export default function Home() {
     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) {
@@ -28,6 +34,16 @@ export default function Home() {
         }
     };
 
+    // Add function to add current diagram to history
+    const addToHistory = () => {
+        if (latestSvg && chartXML) {
+            setDiagramHistory((prev) => [
+                ...prev,
+                { svg: latestSvg, xml: chartXML },
+            ]);
+        }
+    };
+
     return (
         <div className="flex h-screen bg-gray-100">
             <div className="w-2/3 p-1">
@@ -36,6 +52,8 @@ export default function Home() {
                     onExport={(data) => {
                         const extractedXML = extractDiagramXML(data.data);
                         setChartXML(extractedXML);
+                        // Store the latest SVG data
+                        setLatestSvg(data.data);
                         // If there's a pending resolver, resolve it with the fresh XML
                         if (resolverRef.current) {
                             resolverRef.current(extractedXML);
@@ -61,6 +79,8 @@ export default function Home() {
                             handleExport();
                         });
                     }}
+                    diagramHistory={diagramHistory}
+                    onAddToHistory={addToHistory}
                 />
             </div>
         </div>
diff --git a/components/chat-input.tsx b/components/chat-input.tsx
index 4a51c8b..facd5ce 100644
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -3,7 +3,14 @@
 import React, { useCallback, useRef, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { Loader2, Send, RotateCcw, Image as ImageIcon, X } from "lucide-react";
+import {
+    Loader2,
+    Send,
+    RotateCcw,
+    Image as ImageIcon,
+    X,
+    History,
+} from "lucide-react";
 import {
     Tooltip,
     TooltipContent,
@@ -30,6 +37,10 @@ interface ChatInputProps {
     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;
 }
 
 export function ChatInput({
@@ -41,6 +52,10 @@ export function ChatInput({
     onDisplayChart,
     files,
     onFileChange,
+    diagramHistory = [],
+    onSelectHistoryItem = () => {},
+    showHistory = false,
+    setShowHistory = () => {},
 }: ChatInputProps) {
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
@@ -250,8 +265,87 @@ export function ChatInput({
                             </DialogFooter>
                         </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>
+                                    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={() =>
+                                                onSelectHistoryItem(item.xml)
+                                            }
+                                        >
+                                            <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-cover w-full h-full"
+                                                />
+                                            </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>
                 </div>
                 <div className="flex gap-2">
+                    {/* History Button */}
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="icon"
+                                    onClick={() => setShowHistory(true)}
+                                    disabled={
+                                        status === "streaming" ||
+                                        diagramHistory.length === 0
+                                    }
+                                    title="Diagram History"
+                                >
+                                    <History className="h-4 w-4" />
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                                View diagram history
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+
                     <Button
                         type="button"
                         variant="outline"
diff --git a/components/chatPanel.tsx b/components/chatPanel.tsx
index 5aec723..a7696f1 100644
--- a/components/chatPanel.tsx
+++ b/components/chatPanel.tsx
@@ -19,17 +19,23 @@ import { convertToLegalXml } from "@/lib/utils";
 interface ChatPanelProps {
     onDisplayChart: (xml: string) => void;
     onFetchChart: () => Promise<string>;
+    diagramHistory?: { svg: string; xml: string }[];
+    onAddToHistory?: () => void;
 }
 
 export default function ChatPanel({
     onDisplayChart,
     onFetchChart,
+    diagramHistory = [],
+    onAddToHistory = () => {},
 }: ChatPanelProps) {
     // Add a step counter to track updates
     const stepCounterRef = useRef<number>(0);
     // Add state for file attachments
     const [files, setFiles] = useState<FileList | undefined>(undefined);
     // Add state to control visibility of prompt examples panel
+    // Add state for showing the history dialog
+    const [showHistory, setShowHistory] = useState(false);
 
     // Remove the currentXmlRef and related useEffect
     const {
@@ -93,6 +99,9 @@ export default function ChatPanel({
                     experimental_attachments: files,
                 });
 
+                // Add current diagram to history after submission
+                onAddToHistory();
+
                 // Clear files after submission
                 setFiles(undefined);
             } catch (error) {
@@ -130,6 +139,12 @@ export default function ChatPanel({
         }
     };
 
+    // Function to handle history item selection
+    const handleSelectHistoryItem = (xml: string) => {
+        onDisplayChart(xml);
+        setShowHistory(false);
+    };
+
     // Helper function to render tool invocations
     const renderToolInvocation = (toolInvocation: any) => {
         const callId = toolInvocation.toolCallId;
@@ -356,6 +371,10 @@ export default function ChatPanel({
                     onDisplayChart={onDisplayChart}
                     files={files}
                     onFileChange={handleFileChange}
+                    diagramHistory={diagramHistory}
+                    onSelectHistoryItem={handleSelectHistoryItem}
+                    showHistory={showHistory}
+                    setShowHistory={setShowHistory}
                 />
             </CardFooter>
         </Card>