Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -932,20 +932,40 @@ export function ChatArea({
               {uploadedFiles.map((uf, i) => {
                 const key = `${uf.file.name}::${uf.file.size}::${uf.file.lastModified}`;
               
+                const ext = uf.file.name.toLowerCase();
+                const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e));
+                const thumbUrl = isImage ? getOrCreate(uf.file) : null;
+              
                 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}
+                    {/* ✅ Thumbnail (only for images) */}
+                    {isImage ? (
+                      <div className="h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
+                        {thumbUrl ? (
+                          <img
+                            src={thumbUrl}
+                            alt={uf.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 className="min-w-0 flex-1">
+                      <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 现在兼容了）
+                      onClick={() => onRemoveFile(i)}
                       title="Remove"
                     >
                       <Trash2 className="h-4 w-4" />