Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -1,5 +1,7 @@
 // web/src/components/ChatArea.tsx
-import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
+import React, { useRef, useLayoutEffect } from "react";
+import React, { useEffect, useMemo, useState } from "react";
+
 import { Button } from "./ui/button";
 import { Textarea } from "./ui/textarea";
 import { Input } from "./ui/input";
@@ -10,7 +12,7 @@ import {
   Share2,
   Upload,
   X,
-  Trash2, 
+  Trash2,
   File,
   FileText,
   Presentation,
@@ -64,7 +66,6 @@ interface ChatAreaProps {
   onFileUpload: (files: File[]) => void;
   onRemoveFile: (index: number) => void;
 
-
   onFileTypeChange: (index: number, type: FileType) => void;
   memoryProgress: number;
   isLoggedIn: boolean;
@@ -562,7 +563,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) => {
@@ -570,7 +571,6 @@ export function ChatArea({
     if (idx >= 0) onRemoveFile(idx);
   };
 
-
   // ✅ useObjectUrlCache: for image thumbnails (uploaded + pending)
   const allThumbFiles = React.useMemo(() => {
     return [...uploadedFiles.map((u) => u.file), ...pendingFiles.map((p) => p.file)];
@@ -589,7 +589,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")
@@ -599,62 +599,58 @@ export function ChatArea({
       : isImage
       ? "Image"
       : "File";
-  
+
     const thumbUrl = isImage ? getOrCreate(file) : null;
-  
+
     const handleRemove = () => {
       if (source === "uploaded") {
-        // 关键：仍然走 index 删除（或按 file 找 index）
         onRemoveFile(index);
-        // 如果你更想稳一点（不依赖 index），用下面这一行替代上面那行：
-        // removeUploadedByFile(file);
+        // 或：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">
-        {/* 叉叉：只 stopPropagation，不要一堆 stopImmediatePropagation，避免某些浏览器/事件链出问题 */}
+        {/* ✅ 缩略图：右侧小图（上传图片时显示） */}
+        {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>
+
+        {/* ✅ 删除 */}
         <button
           type="button"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            onRemoveFile?.(index); // ✅ 用 index 删（前后端状态都会删掉）
+            handleRemove();
           }}
-          className="ml-2 inline-flex h-7 w-7 items-center justify-center rounded-md border border-border bg-card hover:bg-muted"
+          className="inline-flex h-8 w-8 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>
     );
   };
@@ -926,33 +922,17 @@ 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 */}
-              {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>
-                );
-              })}
+              {/* ✅ 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"
+                />
+              ))}
 
-              {/* pending (type dialog 之前也能显示的话) */}
+              {/* pending */}
               {pendingFiles.map((p, idx) => (
                 <FileChip key={`p-${p.file.name}-${p.file.size}-${p.file.lastModified}`} file={p.file} index={idx} source="pending" />
               ))}
@@ -1064,9 +1044,7 @@ 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">