Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -1,4 +1,8 @@
 // web/src/components/ChatArea.tsx
+import pdfIcon from "../assets/file-icons/pdf.png";
+import pptIcon from "../assets/file-icons/ppt.png";
+import otherIcon from "../assets/file-icons/other_format.png";
+
 import React, { useRef, useLayoutEffect } from "react";
 import React, { useEffect, useMemo, useState } from "react";
 
@@ -130,6 +134,29 @@ interface PendingFile {
   type: FileType;
 }
 
+function getExt(name: string) {
+  const i = name.lastIndexOf(".");
+  return i >= 0 ? name.slice(i + 1).toLowerCase() : "";
+}
+
+function pickAttachmentThumb(file: { name: string; type?: string; url?: string; previewUrl?: string }) {
+  // 1) 图片：保持图片缩略图（优先 previewUrl，其次 url）
+  const ext = getExt(file.name);
+  const isImageByExt = ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg"].includes(ext);
+  if (isImageByExt) {
+    return file.previewUrl || file.url || ""; // 为空就让外层走 fallback
+  }
+
+  // 2) PDF
+  if (ext === "pdf") return pdfIcon;
+
+  // 3) PPT / PPTX
+  if (ext === "ppt" || ext === "pptx") return pptIcon;
+
+  // 4) 其它
+  return otherIcon;
+}
+
 export function ChatArea({
   messages,
   onSendMessage,
@@ -971,21 +998,29 @@ 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 nameLower = uf.file.name.toLowerCase();
+                
                 const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) =>
-                  ext.endsWith(e)
+                  nameLower.endsWith(e)
                 );
+                
+                const isPdf = nameLower.endsWith(".pdf");
+                const isPpt = nameLower.endsWith(".ppt") || nameLower.endsWith(".pptx");
+                
                 const thumbUrl = isImage ? getOrCreate(uf.file) : null;
-
+                
+                // 非图片：选择对应 icon
+                const fileIcon = isPdf ? pdfIcon : isPpt ? pptIcon : otherIcon;
+                
                 return (
                   <div
                     key={key}
                     className="flex items-center justify-between gap-2 rounded-md border px-3 py-2"
                   >
-                    {/* ✅ Thumbnail (only for images) */}
-                    {isImage ? (
-                      <div className="h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
-                        {thumbUrl ? (
+                    {/* ✅ Thumbnail (image preview or file icon) */}
+                    <div className="h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
+                      {isImage ? (
+                        thumbUrl ? (
                           <img
                             src={thumbUrl}
                             alt={uf.file.name}
@@ -996,19 +1031,22 @@ export function ChatArea({
                           <div className="h-full w-full flex items-center justify-center">
                             <ImageIcon className="h-4 w-4 text-muted-foreground" />
                           </div>
-                        )}
-                      </div>
-                    ) : null}
-
+                        )
+                      ) : (
+                        <img
+                          src={fileIcon}
+                          alt={uf.file.name}
+                          className="h-full w-full object-contain p-1"
+                          draggable={false}
+                        />
+                      )}
+                    </div>
+                
                     <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 className="truncate text-sm font-medium">{uf.file.name}</div>
+                      <div className="text-xs text-muted-foreground">{uf.type}</div>
                     </div>
-
+                
                     <Button
                       variant="ghost"
                       size="icon"