"use client"; import { useState, useMemo } from "react"; import { useTranslations } from "next-intl"; import { GitCompare } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Label } from "@/components/ui/label"; import { DiffView } from "@/components/ui/diff-view"; import { prettifyJson } from "@/lib/format"; interface Version { id: string; version: number; content: string; changeNote: string | null; createdAt: Date; author: { name: string | null; username: string; }; } interface VersionCompareModalProps { versions: Version[]; currentContent: string; promptType?: string; structuredFormat?: string | null; } export function VersionCompareModal({ versions, currentContent, promptType, structuredFormat }: VersionCompareModalProps) { const isStructured = promptType === "STRUCTURED"; const t = useTranslations("prompts"); const [open, setOpen] = useState(false); // Add current version to the list const allVersions = useMemo(() => { const current = { id: "current", version: versions.length > 0 ? versions[0].version + 1 : 1, content: currentContent, changeNote: null, createdAt: new Date(), author: { name: "Current", username: "current" }, }; return [current, ...versions]; }, [versions, currentContent]); const [versionA, setVersionA] = useState(allVersions[1]?.id || ""); const [versionB, setVersionB] = useState(allVersions[0]?.id || "current"); const contentA = useMemo(() => { const v = allVersions.find((v) => v.id === versionA); const content = v?.content || ""; return isStructured && structuredFormat?.toLowerCase() === "json" ? prettifyJson(content) : content; }, [allVersions, versionA, isStructured, structuredFormat]); const contentB = useMemo(() => { const v = allVersions.find((v) => v.id === versionB); const content = v?.content || ""; return isStructured && structuredFormat?.toLowerCase() === "json" ? prettifyJson(content) : content; }, [allVersions, versionB, isStructured, structuredFormat]); const versionALabel = useMemo(() => { const v = allVersions.find((v) => v.id === versionA); return v?.id === "current" ? t("currentVersion") : `${t("version")} ${v?.version}`; }, [allVersions, versionA, t]); const versionBLabel = useMemo(() => { const v = allVersions.find((v) => v.id === versionB); return v?.id === "current" ? t("currentVersion") : `${t("version")} ${v?.version}`; }, [allVersions, versionB, t]); if (versions.length === 0) { return null; } return ( ); }