Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -12,7 +12,7 @@ import {
   Share2,
   Upload,
   X,
-  Trash2,
+  Trash2, 
   File,
   FileText,
   Presentation,
@@ -66,6 +66,7 @@ interface ChatAreaProps {
   onFileUpload: (files: File[]) => void;
   onRemoveFile: (index: number) => void;
 
+
   onFileTypeChange: (index: number, type: FileType) => void;
   memoryProgress: number;
   isLoggedIn: boolean;
@@ -563,7 +564,7 @@ export function ChatArea({
     if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
-
+  
   const fileKey = (f: File) => `${f.name}::${f.size}::${f.lastModified}`;
 
   const removeUploadedByFile = (file: File) => {
@@ -572,13 +573,13 @@ export function ChatArea({
   };
 
 
-  // useObjectUrlCache: for image thumbnails (uploaded + pending)
+  // ✅ useObjectUrlCache: for image thumbnails (uploaded + pending)
   const allThumbFiles = React.useMemo(() => {
     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,
@@ -590,7 +591,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")
@@ -600,59 +601,62 @@ export function ChatArea({
       : isImage
       ? "Image"
       : "File";
-
+  
     const thumbUrl = isImage ? getOrCreate(file) : null;
-    
+  
     const handleRemove = () => {
       if (source === "uploaded") {
-        removeUploadedByFile(file);
+        // 关键：仍然走 index 删除（或按 file 找 index）
+        onRemoveFile(index);
+        // 如果你更想稳一点（不依赖 index），用下面这一行替代上面那行：
+        // removeUploadedByFile(file);
       } else {
         setPendingFiles((prev) => prev.filter((p) => fileKey(p.file) !== fileKey(file)));
       }
     };
-
-
-
+  
     return (
       <div className="flex items-center gap-2 rounded-xl border border-border bg-card px-3 py-2 shadow-sm w-[320px] max-w-full">
-        {/* ✅ 缩略图：右侧小图（上传图片时显示） */}
-        {isImage ? (
-          <div className="relative h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
-            {thumbUrl ? (
-              <img src={thumbUrl} alt={file.name} className="h-full w-full object-cover" draggable={false} />
-            ) : (
-              <div className="h-full w-full flex items-center justify-center">
-                <ImageIcon className="h-4 w-4 text-muted-foreground" />
-              </div>
-            )}
-          </div>
-        ) : (
-          <div className="relative h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted flex items-center justify-center">
-            <File className="h-4 w-4 text-muted-foreground" />
-          </div>
-        )}
-
-        {/* 文本区 */}
-        <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>
-
-        {/* ✅ 删除按钮 */}
+        {/* 叉叉：只 stopPropagation，不要一堆 stopImmediatePropagation，避免某些浏览器/事件链出问题 */}
         <button
           type="button"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            handleRemove();
+            onRemoveFile?.(index); // ✅ 用 index 删（前后端状态都会删掉）
           }}
-          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-card hover:bg-muted"
+          className="ml-2 inline-flex h-7 w-7 items-center justify-center rounded-md border border-border bg-card hover:bg-muted"
           title="Remove"
         >
           <Trash2 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-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
+            {thumbUrl ? (
+              <img
+                src={thumbUrl}
+                alt={file.name}
+                className="h-full w-full object-cover"
+                draggable={false}
+              />
+            ) : (
+              <div className="h-full w-full flex items-center justify-center">
+                <ImageIcon className="h-4 w-4 text-muted-foreground" />
+              </div>
+            )}
+          </div>
+        ) : null}
       </div>
     );
   };
@@ -924,17 +928,33 @@ export function ChatArea({
           {/*  Uploaded Files Preview (chip UI) */}
           {(uploadedFiles.length > 0 || pendingFiles.length > 0) && (
             <div className="mb-2 flex flex-wrap gap-2 max-h-32 overflow-y-auto">
-              {/* ✅ uploaded: 改为使用 FileChip，并显示缩略图 */}
-              {uploadedFiles.map((uf, i) => (
-                <FileChip
-                  key={`u-${uf.file.name}-${uf.file.size}-${uf.file.lastModified}`}
-                  file={uf.file}
-                  index={i}
-                  source="uploaded"
-                />
-              ))}
+              {/* uploaded */}
+              {uploadedFiles.map((uf, i) => {
+                const key = `${uf.file.name}::${uf.file.size}::${uf.file.lastModified}`;
+              
+                return (
+                  <div key={key} className="flex items-center justify-between gap-2 rounded-md border px-3 py-2">
+                    <div className="min-w-0">
+                      <div className="truncate text-sm font-medium">{uf.file.name}</div>
+                      <div className="text-xs text-muted-foreground">
+                        {uf.type}
+                      </div>
+                    </div>
+              
+                    {/*  垃圾桶：直接删 props（UI + state 同步删） */}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => onRemoveFile(i)}   // 或者 onRemoveFile(uf) 也行（因为 App 现在兼容了）
+                      title="Remove"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                );
+              })}
 
-              {/* pending */}
+              {/* 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" />
               ))}
@@ -1046,7 +1066,9 @@ export function ChatArea({
                     : "Ask Clare anything about the course or drag files here..."
                 }
                 disabled={!isLoggedIn || (chatMode === "quiz" && !quizState.waitingForAnswer)}
-                className={`min-h-[80px] pl-4 pr-20 resize-none bg-background border-2 ${isDragging ? "border-primary border-dashed" : "border-border"}`}
+                className={`min-h-[80px] pl-4 pr-20 resize-none bg-background border-2 ${
+                  isDragging ? "border-primary border-dashed" : "border-border"
+                }`}
               />
 
               <div className="absolute bottom-2 right-2 flex gap-1">
@@ -1304,4 +1326,4 @@ export function ChatArea({
       )}
     </div>
   );
-}
+}