feat: link user feedback and diagram saves to chat traces in Langfuse

- Update log-feedback API to find existing chat trace by sessionId and attach score to it
- Update log-save API to create span on existing chat trace instead of standalone trace
- Add thumbs up/down feedback buttons on assistant messages
- Add message regeneration and edit functionality
- Add save dialog with format selection (drawio, png, svg)
- Pass sessionId through components for Langfuse linking

components/save-dialog.tsx

@@ -10,11 +10,26 @@ import {
     DialogTitle,
     DialogFooter,
 } from "@/components/ui/dialog";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+
+export type ExportFormat = "drawio" | "png" | "svg";
+
+const FORMAT_OPTIONS: { value: ExportFormat; label: string; extension: string }[] = [
+    { value: "drawio", label: "Draw.io XML", extension: ".drawio" },
+    { value: "png", label: "PNG Image", extension: ".png" },
+    { value: "svg", label: "SVG Image", extension: ".svg" },
+];
 
 interface SaveDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
-    onSave: (filename: string) => void;
+    onSave: (filename: string, format: ExportFormat) => void;
     defaultFilename: string;
 }
 
@@ -25,6 +40,7 @@ export function SaveDialog({
     defaultFilename,
 }: SaveDialogProps) {
     const [filename, setFilename] = useState(defaultFilename);
+    const [format, setFormat] = useState<ExportFormat>("drawio");
 
     useEffect(() => {
         if (open) {
@@ -34,7 +50,7 @@ export function SaveDialog({
 
     const handleSave = () => {
         const finalFilename = filename.trim() || defaultFilename;
-        onSave(finalFilename);
+        onSave(finalFilename, format);
         onOpenChange(false);
     };
 
@@ -45,27 +61,46 @@ export function SaveDialog({
         }
     };
 
+    const currentFormat = FORMAT_OPTIONS.find((f) => f.value === format);
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-md">
                 <DialogHeader>
                     <DialogTitle>Save Diagram</DialogTitle>
                 </DialogHeader>
-                <div className="space-y-2">
-                    <label className="text-sm font-medium">Filename</label>
-                    <div className="flex items-stretch">
-                        <Input
-                            value={filename}
-                            onChange={(e) => setFilename(e.target.value)}
-                            onKeyDown={handleKeyDown}
-                            placeholder="Enter filename"
-                            autoFocus
-                            onFocus={(e) => e.target.select()}
-                            className="rounded-r-none border-r-0 focus-visible:z-10"
-                        />
-                        <span className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-input bg-muted text-sm text-muted-foreground font-mono">
-                            .drawio
-                        </span>
+                <div className="space-y-4">
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium">Format</label>
+                        <Select value={format} onValueChange={(v) => setFormat(v as ExportFormat)}>
+                            <SelectTrigger>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {FORMAT_OPTIONS.map((opt) => (
+                                    <SelectItem key={opt.value} value={opt.value}>
+                                        {opt.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                    <div className="space-y-2">
+                        <label className="text-sm font-medium">Filename</label>
+                        <div className="flex items-stretch">
+                            <Input
+                                value={filename}
+                                onChange={(e) => setFilename(e.target.value)}
+                                onKeyDown={handleKeyDown}
+                                placeholder="Enter filename"
+                                autoFocus
+                                onFocus={(e) => e.target.select()}
+                                className="rounded-r-none border-r-0 focus-visible:z-10"
+                            />
+                            <span className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-input bg-muted text-sm text-muted-foreground font-mono">
+                                {currentFormat?.extension || ".drawio"}
+                            </span>
+                        </div>
                     </div>
                 </div>
                 <DialogFooter>