Update web/src/App.tsx

web/src/App.tsx

@@ -890,34 +890,40 @@ function App() {
   // =========================
   // ✅ File Upload (FIXED)
   // =========================
-  const handleFileUpload = (files: File[]) => {
+  // 1) Upload: accept File[] OR FileList OR null
+  const handleFileUpload = (input: File[] | FileList | null | undefined) => {
+    const files = Array.isArray(input) ? input : input ? Array.from(input) : [];
+    if (!files.length) return;
+  
     const newFiles: UploadedFile[] = files.map((file) => ({ file, type: "other" as FileType }));
     setUploadedFiles((prev) => [...prev, ...newFiles]);
   };
-
-  // Robust remove: supports index OR File OR UploadedFile payload
-  const handleRemoveFile = (arg: number | File | UploadedFile) => {
+  
+  // 2) Remove: accept index OR File OR UploadedFile (use any to avoid prop signature mismatch crash)
+  const handleRemoveFile = (arg: any) => {
     setUploadedFiles((prev) => {
       if (!prev.length) return prev;
   
       let idx = -1;
   
-      // Case 1: ChatArea passes index
       if (typeof arg === "number") {
         idx = arg;
       } else {
-        // Case 2: ChatArea passes File or UploadedFile
         const file =
-          (arg as UploadedFile)?.file instanceof File
+          arg?.file instanceof File
             ? (arg as UploadedFile).file
-            : (arg as File);
+            : arg instanceof File
+            ? (arg as File)
+            : null;
   
-        idx = prev.findIndex(
-          (x) =>
-            x.file.name === file.name &&
-            x.file.size === file.size &&
-            x.file.lastModified === file.lastModified
-        );
+        if (file) {
+          idx = prev.findIndex(
+            (x) =>
+              x.file.name === file.name &&
+              x.file.size === file.size &&
+              x.file.lastModified === file.lastModified
+          );
+        }
       }
   
       if (idx < 0 || idx >= prev.length) return prev;
@@ -925,7 +931,6 @@ function App() {
       const removed = prev[idx]?.file;
       const next = prev.filter((_, i) => i !== idx);
   
-      // keep fingerprint set consistent
       if (removed) {
         const fp = `${removed.name}::${removed.size}::${removed.lastModified}`;
         uploadedFingerprintsRef.current.delete(fp);
@@ -934,25 +939,22 @@ function App() {
       return next;
     });
   };
-
-  //  FIX 2: NO await inside setState updater (prevents Vite/esbuild error)
+  
+  // 3) Type Change: must be async, and must NOT leave "await" outside
   const handleFileTypeChange = async (index: number, type: FileType) => {
     if (!user) return;
-
+  
     const target = uploadedFiles[index]?.file;
     if (!target) return;
-
-    // update UI first (sync)
-    setUploadedFiles((prev) => {
-      if (index < 0 || index >= prev.length) return prev;
-      return prev.map((f, i) => (i === index ? { ...f, type } : f));
-    });
-
-    // de-dupe upload per file fingerprint
+  
+    // update UI state immediately
+    setUploadedFiles((prev) => prev.map((f, i) => (i === index ? { ...f, type } : f)));
+  
+    // dedupe upload per file fingerprint
     const fp = `${target.name}::${target.size}::${target.lastModified}`;
     if (uploadedFingerprintsRef.current.has(fp)) return;
     uploadedFingerprintsRef.current.add(fp);
-
+  
     try {
       await apiUpload({
         user_id: user.email,
@@ -961,9 +963,9 @@ function App() {
       });
       toast.success("File uploaded to backend");
     } catch (e: any) {
-      // allow retry
-      uploadedFingerprintsRef.current.delete(fp);
       toast.error(e?.message || "Upload failed");
+      // allow retry if failed
+      uploadedFingerprintsRef.current.delete(fp);
     }
   };