refactor: update setFiles prop type to accept File[] and simplify file handling

components/chat-example-panel.tsx

@@ -3,13 +3,8 @@ export default function ExamplePanel({
     setFiles,
 }: {
     setInput: (input: string) => void;
-    setFiles: (files: FileList | undefined) => void;
+    setFiles: (files: File[]) => void;
 }) {
-    const createFileList = (file: File): FileList => {
-        const dt = new DataTransfer();
-        dt.items.add(file);
-        return dt.files;
-    };
     // New handler for the "Replicate this flowchart" button
     const handleReplicateFlowchart = async () => {
         setInput("Replicate this flowchart.");
@@ -21,7 +16,7 @@ export default function ExamplePanel({
             const file = new File([blob], "example.png", { type: "image/png" });
 
             // Set the file to the files state
-            setFiles(createFileList(file));
+            setFiles([file]);
         } catch (error) {
             console.error("Error loading example image:", error);
         }

components/chat-input.tsx

@@ -13,8 +13,7 @@ import {
     History,
 } from "lucide-react";
 import { ButtonWithTooltip } from "@/components/button-with-tooltip";
-import Image from "next/image";
-
+import { FilePreviewList } from "./file-preview-list";
 import { useDiagram } from "@/contexts/diagram-context";
 import { HistoryDialog } from "@/components/history-dialog";
 
@@ -24,8 +23,8 @@ interface ChatInputProps {
     onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
     onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     onClearChat: () => void;
-    files?: FileList;
-    onFileChange?: (files: FileList | undefined) => void;
+    files?: File[];
+    onFileChange?: (files: File[]) => void;
     showHistory?: boolean;
     onToggleHistory?: (show: boolean) => void;
 }
@@ -36,8 +35,8 @@ export function ChatInput({
     onSubmit,
     onChange,
     onClearChat,
-    files,
-    onFileChange,
+    files = [],
+    onFileChange = () => {},
     showHistory = false,
     onToggleHistory = () => {},
 }: ChatInputProps) {
@@ -73,19 +72,24 @@ export function ChatInput({
 
     // Handle file changes
     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (onFileChange) {
-            onFileChange(e.target.files || undefined);
+        const newFiles = Array.from(e.target.files || []);
+        onFileChange([...files, ...newFiles]);
+    };
+
+    // Remove individual file
+    const handleRemoveFile = (fileToRemove: File) => {
+        onFileChange(files.filter((file) => file !== fileToRemove));
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
         }
     };
 
-    // Clear file selection
+    // Clear all files
     const clearFiles = () => {
         if (fileInputRef.current) {
             fileInputRef.current.value = "";
         }
-        if (onFileChange) {
-            onFileChange(undefined);
-        }
+        onFileChange([]);
     };
 
     // Trigger file input click
@@ -116,17 +120,12 @@ export function ChatInput({
         const droppedFiles = e.dataTransfer.files;
 
         // Only process image files
-        if (droppedFiles.length > 0) {
-            const imageFiles = Array.from(droppedFiles).filter((file) =>
-                file.type.startsWith("image/")
-            );
+        const imageFiles = Array.from(droppedFiles).filter((file) =>
+            file.type.startsWith("image/")
+        );
 
-            if (imageFiles.length > 0 && onFileChange) {
-                // Create a new FileList-like object with only image files
-                const dt = new DataTransfer();
-                imageFiles.forEach((file) => dt.items.add(file));
-                onFileChange(dt.files);
-            }
+        if (imageFiles.length > 0) {
+            onFileChange([...files, ...imageFiles]);
         }
     };
 
@@ -156,38 +155,7 @@ export function ChatInput({
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
         >
-            {/* File preview area */}
-            {files && files.length > 0 && (
-                <div className="flex flex-wrap gap-2 mt-2 p-2 bg-muted/50 rounded-md">
-                    {Array.from(files).map((file, index) => (
-                        <div key={index} className="relative group">
-                            <div className="w-20 h-20 border rounded-md overflow-hidden bg-muted">
-                                {file.type.startsWith("image/") ? (
-                                    <Image
-                                        src={URL.createObjectURL(file)}
-                                        alt={file.name}
-                                        width={80}
-                                        height={80}
-                                        className="object-cover w-full h-full"
-                                    />
-                                ) : (
-                                    <div className="flex items-center justify-center h-full text-xs text-center p-1">
-                                        {file.name}
-                                    </div>
-                                )}
-                            </div>
-                            <button
-                                type="button"
-                                onClick={clearFiles}
-                                className="absolute -top-2 -right-2 bg-destructive rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                                aria-label="Remove file"
-                            >
-                                <X className="h-3 w-3" />
-                            </button>
-                        </div>
-                    ))}
-                </div>
-            )}
+            <FilePreviewList files={files} onRemoveFile={handleRemoveFile} />
 
             <Textarea
                 ref={textareaRef}

components/chat-message-display.tsx

@@ -14,7 +14,7 @@ interface ChatMessageDisplayProps {
     messages: Message[];
     error?: Error | null;
     setInput: (input: string) => void;
-    setFiles: (files: FileList | undefined) => void;
+    setFiles: (files: File[]) => void;
 }
 
 export function ChatMessageDisplay({

components/chat-panel.tsx

@@ -33,10 +33,17 @@ export default function ChatPanel() {
     // Add a step counter to track updates
 
     // Add state for file attachments
-    const [files, setFiles] = useState<FileList | undefined>(undefined);
+    const [files, setFiles] = useState<File[]>([]);
     // Add state for showing the history dialog
     const [showHistory, setShowHistory] = useState(false);
 
+    // Convert File[] to FileList for experimental_attachments
+    const createFileList = (files: File[]): FileList => {
+        const dt = new DataTransfer();
+        files.forEach((file) => dt.items.add(file));
+        return dt.files;
+    };
+
     // Remove the currentXmlRef and related useEffect
     const {
         messages,
@@ -79,11 +86,12 @@ export default function ChatPanel() {
                     data: {
                         xml: chartXml,
                     },
-                    experimental_attachments: files,
+                    experimental_attachments:
+                        files.length > 0 ? createFileList(files) : undefined,
                 });
 
                 // Clear files after submission
-                setFiles(undefined);
+                setFiles([]);
             } catch (error) {
                 console.error("Error fetching chart data:", error);
             }
@@ -91,10 +99,9 @@ export default function ChatPanel() {
     };
 
     // Helper function to handle file changes
-    const handleFileChange = (newFiles: FileList | undefined) => {
+    const handleFileChange = (newFiles: File[]) => {
         setFiles(newFiles);
     };
-    // Helper function to handle file input change
 
     return (
         <Card className="h-full flex flex-col rounded-none py-0 gap-0">

components/file-preview-list.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import React, { useEffect } from "react";
+import Image from "next/image";
+import { X } from "lucide-react";
+
+interface FilePreviewListProps {
+    files: File[];
+    onRemoveFile: (fileToRemove: File) => void;
+}
+
+export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
+    // Cleanup object URLs on unmount
+    useEffect(() => {
+        const objectUrls = files
+            .filter((file) => file.type.startsWith("image/"))
+            .map((file) => URL.createObjectURL(file));
+
+        return () => {
+            objectUrls.forEach(URL.revokeObjectURL);
+        };
+    }, [files]);
+
+    if (files.length === 0) return null;
+
+    return (
+        <div className="flex flex-wrap gap-2 mt-2 p-2 bg-muted/50 rounded-md">
+            {files.map((file, index) => (
+                <div key={file.name + index} className="relative group">
+                    <div className="w-20 h-20 border rounded-md overflow-hidden bg-muted">
+                        {file.type.startsWith("image/") ? (
+                            <Image
+                                src={URL.createObjectURL(file)}
+                                alt={file.name}
+                                width={80}
+                                height={80}
+                                className="object-cover w-full h-full"
+                            />
+                        ) : (
+                            <div className="flex items-center justify-center h-full text-xs text-center p-1">
+                                {file.name}
+                            </div>
+                        )}
+                    </div>
+                    <button
+                        type="button"
+                        onClick={() => onRemoveFile(file)}
+                        className="absolute -top-2 -right-2 bg-destructive rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
+                        aria-label="Remove file"
+                    >
+                        <X className="h-3 w-3" />
+                    </button>
+                </div>
+            ))}
+        </div>
+    );
+}