Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -568,17 +568,19 @@ export function ChatArea({
   }, [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,
+    source,
   }: {
     file: File;
     index: number;
+    source: "uploaded" | "pending";
   }) => {
     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")
@@ -588,61 +590,53 @@ export function ChatArea({
       : isImage
       ? "Image"
       : "File";
-
+  
     const thumbUrl = isImage ? getOrCreate(file) : null;
-
+  
+    const handleRemove = () => {
+      if (source === "uploaded") {
+        onRemoveFile(index);
+      } else {
+        setPendingFiles((prev) => prev.filter((_, i) => i !== index));
+      }
+    };
+  
+    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">
-        {/* ✅ FIX: type="button" + preventDefault/stopPropagation + direct remove */}
         <button
           type="button"
           aria-label="Remove file"
           title="Remove"
-          onMouseDown={(e) => {
-            // ✅ 关键：在 mouseDown 就拦截，防止 <label> / 外层点击先触发
-            e.preventDefault();
-            e.stopPropagation();
-            // @ts-ignore
-            e.nativeEvent?.stopImmediatePropagation?.();
-          }}
-          onPointerDown={(e) => {
-            // ✅ 兼容触控/Pointer 事件
-            e.preventDefault();
-            e.stopPropagation();
-            // @ts-ignore
-            e.nativeEvent?.stopImmediatePropagation?.();
-          }}
+          onMouseDown={stopAll}
+          onPointerDown={stopAll}
+          onTouchStart={stopAll}
           onClick={(e) => {
-            // ✅ 双保险：click 也拦截
-            e.preventDefault();
-            e.stopPropagation();
-            // @ts-ignore
-            e.nativeEvent?.stopImmediatePropagation?.();
-        
-            onRemoveFile(index);
+            stopAll(e);
+            handleRemove();
           }}
           className="h-6 w-6 rounded-full border border-border bg-background flex items-center justify-center hover:bg-muted"
         >
           <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 ? (
-              <img
-                src={thumbUrl}
-                alt={file.name}
-                className="h-full w-full object-cover"
-                draggable={false}
-              />
+              <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 bg-muted">
                 <ImageIcon className="h-5 w-5 text-muted-foreground" />