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 Image from "next/image";
import { useDiagram } from "@/contexts/diagram-context"; import { useDiagram } from "@/contexts/diagram-context";
import { HistoryDialog } from "@/components/history-dialog";
interface ChatInputProps { interface ChatInputProps {
input: string; input: string;
@@ -262,64 +263,10 @@ export function ChatInput({
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{/* History Dialog */} <HistoryDialog
<Dialog open={showHistory} onOpenChange={setShowHistory}> showHistory={showHistory}
<DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto"> setShowHistory={setShowHistory}
<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>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
{/* History Button */} {/* History Button */}

13
components/chat-panel.tsx
View File

@@ -17,16 +17,16 @@ import { useDiagram } from "@/contexts/diagram-context";
export default function ChatPanel() { export default function ChatPanel() {
const { const {
chartXML,
loadDiagram: onDisplayChart, loadDiagram: onDisplayChart,
handleExport: onExport, handleExport: onExport,
resolverRef, resolverRef,
diagramHistory,
} = useDiagram(); } = useDiagram();
const onFetchChart = () => { const onFetchChart = () => {
return new Promise<string>((resolve) => { 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 onExport(); // Trigger the export
}); });
}; };
@@ -94,12 +94,7 @@ export default function ChatPanel() {
const handleFileChange = (newFiles: FileList | undefined) => { const handleFileChange = (newFiles: FileList | undefined) => {
setFiles(newFiles); setFiles(newFiles);
}; };
// Helper function to handle file input change
// Function to handle history item selection
const handleSelectHistoryItem = (xml: string) => {
onDisplayChart(xml);
setShowHistory(false);
};
return ( return (
<Card className="h-full flex flex-col rounded-none py-0 gap-0"> <Card className="h-full flex flex-col rounded-none py-0 gap-0">

82
components/history-dialog.tsx Normal file
View File

@@ -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>
);
}