Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -60,7 +60,10 @@ interface ChatAreaProps {
   onSendMessage: (content: string) => void;
   uploadedFiles: UploadedFile[];
   onFileUpload: (files: File[]) => void;
-  onRemoveFile: (index: File) => void;
+
+  // ✅ FIX: remove by File (NOT by index)
+  onRemoveFile: (file: File) => void;
+
   onFileTypeChange: (index: number, type: FileType) => void;
   memoryProgress: number;
   isLoggedIn: boolean;
@@ -561,14 +564,11 @@ export function ChatArea({
 
   // ✅ useObjectUrlCache: for image thumbnails (uploaded + pending)
   const allThumbFiles = React.useMemo(() => {
-    return [
-      ...uploadedFiles.map((u) => u.file),
-      ...pendingFiles.map((p) => p.file),
-    ];
+    return [...uploadedFiles.map((u) => u.file), ...pendingFiles.map((p) => p.file)];
   }, [uploadedFiles, pendingFiles]);
   const { getOrCreate } = useObjectUrlCache(allThumbFiles);
 
- // ✅ NEW: a compact "chip" UI (the one with left X)
+  // ✅ NEW: a compact "chip" UI (the one with left X)
   const FileChip = ({
     file,
     index,
@@ -580,7 +580,7 @@ export function ChatArea({
   }) => {
     const ext = file.name.toLowerCase();
     const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e));
-  
+
     const label = ext.endsWith(".pdf")
       ? "PDF"
       : ext.endsWith(".pptx") || ext.endsWith(".ppt")
@@ -590,24 +590,25 @@ export function ChatArea({
       : isImage
       ? "Image"
       : "File";
-  
+
     const thumbUrl = isImage ? getOrCreate(file) : null;
-  
+
+    // ✅ FIX: uploaded remove by File; pending remove by File (not index)
     const handleRemove = () => {
       if (source === "uploaded") {
-        onRemoveFile(index);
+        onRemoveFile(file);
       } else {
-        setPendingFiles((prev) => prev.filter((_, i) => i !== index));
+        setPendingFiles((prev) => prev.filter((p) => p.file !== file));
       }
     };
-  
+
     const stopAll = (e: any) => {
       e.preventDefault();
       e.stopPropagation();
       // @ts-ignore
       e.nativeEvent?.stopImmediatePropagation?.();
     };
-  
+
     return (
       <div className="flex items-center gap-3 rounded-xl border border-border bg-card px-3 py-2 shadow-sm w-[340px] max-w-full">
         <button
@@ -625,14 +626,14 @@ export function ChatArea({
         >
           <X className="h-4 w-4" />
         </button>
-  
+
         <div className="min-w-0 flex-1">
           <div className="text-sm font-medium truncate" title={file.name}>
             {file.name}
           </div>
           <div className="text-xs text-muted-foreground">{label}</div>
         </div>
-  
+
         {isImage ? (
           <div className="relative h-14 w-14 flex-shrink-0 rounded-lg overflow-hidden border border-border">
             {thumbUrl ? (
@@ -732,7 +733,11 @@ export function ChatArea({
             const current = workspaces.find((w) => w.id === currentWorkspaceId);
             if (current?.type === "group") {
               if (current.category === "course" && current.courseName) {
-                return <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">{current.courseName}</div>;
+                return (
+                  <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">
+                    {current.courseName}
+                  </div>
+                );
               }
               return null;
             }
@@ -830,7 +835,11 @@ export function ChatArea({
       </div>
 
       {/* Scroll Container */}
-      <div ref={scrollContainerRef} className="flex-1 min-h-0 overflow-y-auto overscroll-contain" style={{ overscrollBehavior: "contain" }}>
+      <div
+        ref={scrollContainerRef}
+        className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
+        style={{ overscrollBehavior: "contain" }}
+      >
         <div className="py-6" style={{ paddingBottom: bottomPad }}>
           <div className="w-full space-y-6 max-w-4xl mx-auto">
             {messages.map((message) => (
@@ -909,22 +918,12 @@ export function ChatArea({
             <div className="mb-2 flex flex-wrap gap-2 max-h-32 overflow-y-auto">
               {/* uploaded */}
               {uploadedFiles.map((u, idx) => (
-                <FileChip
-                  key={`u-${u.file.name}-${u.file.size}-${u.file.lastModified}`}
-                  file={u.file}
-                  index={idx}
-                  source="uploaded"
-                />
+                <FileChip key={`u-${u.file.name}-${u.file.size}-${u.file.lastModified}`} file={u.file} index={idx} source="uploaded" />
               ))}
-          
+
               {/* pending (type dialog 之前也能显示的话) */}
               {pendingFiles.map((p, idx) => (
-                <FileChip
-                  key={`p-${p.file.name}-${p.file.size}-${p.file.lastModified}`}
-                  file={p.file}
-                  index={idx}
-                  source="pending"
-                />
+                <FileChip key={`p-${p.file.name}-${p.file.size}-${p.file.lastModified}`} file={p.file} index={idx} source="pending" />
               ))}
             </div>
           )}
@@ -1200,7 +1199,7 @@ export function ChatArea({
         </DialogContent>
       </Dialog>
 
-      {/* Delete File Confirmation Dialog (kept, but chip delete is instant now) */}
+      {/* Delete File Confirmation Dialog (kept, but if triggered, delete is correct now) */}
       <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>
@@ -1214,7 +1213,8 @@ export function ChatArea({
             <AlertDialogAction
               onClick={() => {
                 if (fileToDelete !== null) {
-                  onRemoveFile(fileToDelete);
+                  const f = uploadedFiles[fileToDelete]?.file;
+                  if (f) onRemoveFile(f);
                   setFileToDelete(null);
                 }
                 setShowDeleteDialog(false);