i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-01-02 22:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: extract HistoryDialog component

Browse Source
This commit is contained in:
dayuan.jiang
2025-03-26 08:51:21 +00:00
parent 15cd66d0bf
commit 3b4072b113
3 changed files with 91 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/chat-input.tsx
View File

@@ -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 */}