Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -920,13 +920,34 @@ export function ChatArea({
       {/* Composer */}
       <div ref={composerRef} className="flex-shrink-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border">
         <div className="max-w-4xl mx-auto px-4 py-4">
-          {/* ✅ Uploaded Files Preview (chip UI) */}
+          {/*  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((u, idx) => (
-                <FileChip key={`u-${u.file.name}-${u.file.size}-${u.file.lastModified}`} file={u.file} index={idx} source="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 (type dialog 之前也能显示的话) */}
               {pendingFiles.map((p, idx) => (