Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -125,7 +125,7 @@ interface ChatAreaProps {
 
   onReviewActivity?: (event: ReviewEventType) => void;
   currentUserId?: string; // backend user_id
-  docType?: string;       // backend doc_type (optional)
+  docType?: string; // backend doc_type (optional)
 }
 
 interface PendingFile {
@@ -133,16 +133,6 @@ interface PendingFile {
   type: FileType;
 }
 
-  // 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,
@@ -268,8 +258,7 @@ export function ChatArea({
     if (messages.length > previousMessagesLength.current) {
       const el = scrollContainerRef.current;
       if (el) {
-        const nearBottom =
-          el.scrollHeight - el.scrollTop - el.clientHeight < 240;
+        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 240;
         if (nearBottom) scrollToBottom("smooth");
       }
     }
@@ -344,10 +333,7 @@ export function ChatArea({
   const buildPreviewContent = () => {
     if (!messages.length) return "";
     return messages
-      .map(
-        (msg) =>
-          `${msg.role === "user" ? "You" : "Clare"}: ${msg.content}`
-      )
+      .map((msg) => `${msg.role === "user" ? "You" : "Clare"}: ${msg.content}`)
       .join("\n\n");
   };
 
@@ -365,9 +351,7 @@ export function ChatArea({
     summary += `Key Points:\n`;
     userMessages.slice(0, 3).forEach((msg, idx) => {
       const preview = msg.content.substring(0, 80);
-      summary += `${idx + 1}. ${preview}${
-        msg.content.length > 80 ? "..." : ""
-      }\n`;
+      summary += `${idx + 1}. ${preview}${msg.content.length > 80 ? "..." : ""}\n`;
     });
 
     return summary;
@@ -500,6 +484,7 @@ export function ChatArea({
     const saved = isCurrentChatSaved();
 
     if (saved) {
+      // keep behavior
       onConfirmClear(false as any);
       return;
     }
@@ -557,9 +542,7 @@ export function ChatArea({
     });
 
     if (validFiles.length > 0) {
-      setPendingFiles(
-        validFiles.map((file) => ({ file, type: "other" as FileType }))
-      );
+      setPendingFiles(validFiles.map((file) => ({ file, type: "other" as FileType })));
       setShowTypeDialog(true);
     } else {
       toast.error("Please upload .pdf, .docx, .pptx, or image files");
@@ -586,9 +569,7 @@ export function ChatArea({
       });
 
       if (validFiles.length > 0) {
-        setPendingFiles(
-          validFiles.map((file) => ({ file, type: "other" as FileType }))
-        );
+        setPendingFiles(validFiles.map((file) => ({ file, type: "other" as FileType })));
         setShowTypeDialog(true);
       } else {
         toast.error("Please upload .pdf, .docx, .pptx, or image files");
@@ -619,9 +600,7 @@ export function ChatArea({
   };
 
   const handlePendingFileTypeChange = (index: number, type: FileType) => {
-    setPendingFiles((prev) =>
-      prev.map((pf, i) => (i === index ? { ...pf, type } : pf))
-    );
+    setPendingFiles((prev) => prev.map((pf, i) => (i === index ? { ...pf, type } : pf)));
   };
 
   // File helpers
@@ -630,8 +609,7 @@ export function ChatArea({
     if (ext.endsWith(".pdf")) return FileText;
     if (ext.endsWith(".docx") || ext.endsWith(".doc")) return File;
     if (ext.endsWith(".pptx") || ext.endsWith(".ppt")) return Presentation;
-    if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e)))
-      return ImageIcon;
+    if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e))) return ImageIcon;
     return File;
   };
 
@@ -643,13 +621,14 @@ export function ChatArea({
 
   const fileKey = (f: File) => `${f.name}::${f.size}::${f.lastModified}`;
 
-  // useObjectUrlCache: for image thumbnails (uploaded + pending)
+  // ✅ useObjectUrlCache: for image thumbnails (uploaded + pending)
   const allThumbFiles = useMemo(() => {
     return [...uploadedFiles.map((u) => u.file), ...pendingFiles.map((p) => p.file)];
   }, [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,
@@ -662,9 +641,13 @@ 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")
+    const isPdf = ext.endsWith(".pdf");
+    const isPpt = ext.endsWith(".ppt") || ext.endsWith(".pptx");
+    const fileIcon = isPdf ? pdfIcon : isPpt ? pptIcon : otherIcon;
+
+    const label = isPdf
       ? "PDF"
-      : ext.endsWith(".pptx") || ext.endsWith(".ppt")
+      : isPpt
       ? "Presentation"
       : ext.endsWith(".docx") || ext.endsWith(".doc")
       ? "Document"
@@ -701,9 +684,10 @@ export function ChatArea({
           <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 ? (
+        {/* ✅ Thumbnail (image preview or file icon) */}
+        <div className="relative h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
+          {isImage ? (
+            thumbUrl ? (
               <img
                 src={thumbUrl}
                 alt={file.name}
@@ -714,9 +698,16 @@ 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={file.name}
+              className="h-full w-full object-contain p-1"
+              draggable={false}
+            />
+          )}
+        </div>
       </div>
     );
   };
@@ -811,16 +802,10 @@ export function ChatArea({
             size="icon"
             onClick={handleSaveClick}
             disabled={!isLoggedIn}
-            className={`h-8 w-8 rounded-md hover:bg-muted/50 ${
-              isCurrentChatSaved() ? "text-primary" : ""
-            }`}
+            className={`h-8 w-8 rounded-md hover:bg-muted/50 ${isCurrentChatSaved() ? "text-primary" : ""}`}
             title={isCurrentChatSaved() ? "Unsave" : "Save"}
           >
-            <Bookmark
-              className={`h-4 w-4 ${
-                isCurrentChatSaved() ? "fill-primary text-primary" : ""
-              }`}
-            />
+            <Bookmark className={`h-4 w-4 ${isCurrentChatSaved() ? "fill-primary text-primary" : ""}`} />
           </Button>
 
           <Button
@@ -872,9 +857,7 @@ export function ChatArea({
                   message={message}
                   showSenderInfo={spaceType === "group"}
                   isFirstGreeting={
-                    (message.id === "1" ||
-                      message.id === "review-1" ||
-                      message.id === "quiz-1") &&
+                    (message.id === "1" || message.id === "review-1" || message.id === "quiz-1") &&
                     message.role === "assistant"
                   }
                   showNextButton={message.showNextButton && !isAppTyping}
@@ -885,24 +868,14 @@ export function ChatArea({
                   docType={docType}
                 />
 
-                {chatMode === "review" &&
-                  message.id === "review-1" &&
-                  message.role === "assistant" && (
-                    <div className="flex gap-2 justify-start px-4">
-                      <div className="w-10 h-10 flex-shrink-0" />
-                      <div
-                        className="w-full"
-                        style={{
-                          maxWidth: "min(770px, calc(100% - 2rem))",
-                        }}
-                      >
-                        <SmartReview
-                          onReviewTopic={handleReviewTopic}
-                          onReviewAll={handleReviewAll}
-                        />
-                      </div>
+                {chatMode === "review" && message.id === "review-1" && message.role === "assistant" && (
+                  <div className="flex gap-2 justify-start px-4">
+                    <div className="w-10 h-10 flex-shrink-0" />
+                    <div className="w-full" style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}>
+                      <SmartReview onReviewTopic={handleReviewTopic} onReviewAll={handleReviewAll} />
                     </div>
-                  )}
+                  </div>
+                )}
 
                 {chatMode === "quiz" &&
                   message.id === "quiz-1" &&
@@ -911,10 +884,7 @@ export function ChatArea({
                   !quizState.waitingForAnswer &&
                   !isAppTyping && (
                     <div className="flex justify-center py-4">
-                      <Button
-                        onClick={onStartQuiz}
-                        className="bg-red-500 hover:bg-red-600 text-white"
-                      >
+                      <Button onClick={onStartQuiz} className="bg-red-500 hover:bg-red-600 text-white">
                         Start Quiz
                       </Button>
                     </div>
@@ -925,11 +895,7 @@ export function ChatArea({
             {isAppTyping && (
               <div className="flex gap-2 justify-start px-4">
                 <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
-                  <img
-                    src={clareAvatar}
-                    alt="Clare"
-                    className="w-full h-full object-cover"
-                  />
+                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                 </div>
                 <div className="bg-muted rounded-2xl px-4 py-3">
                   <div className="flex gap-1">
@@ -972,12 +938,9 @@ export function ChatArea({
       )}
 
       {/* Composer */}
-      <div
-        ref={composerRef}
-        className="flex-shrink-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border"
-      >
+      <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 */}
           {(uploadedFiles.length > 0 || pendingFiles.length > 0) && (
             <div className="mb-2 flex flex-wrap gap-2 max-h-32 overflow-y-auto">
               {/* uploaded */}
@@ -985,22 +948,18 @@ export function ChatArea({
                 const key = `${uf.file.name}::${uf.file.size}::${uf.file.lastModified}`;
 
                 const nameLower = uf.file.name.toLowerCase();
-                
                 const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) =>
                   nameLower.endsWith(e)
                 );
-                const isPdf = ext.endsWith(".pdf");
-                const isPpt = ext.endsWith(".ppt") || ext.endsWith(".pptx");                
-                const thumbUrl = isImage ? getOrCreate(uf.file) : null;
-                
-                // 非图片：选择对应 icon
+
+                const isPdf = nameLower.endsWith(".pdf");
+                const isPpt = nameLower.endsWith(".ppt") || nameLower.endsWith(".pptx");
                 const fileIcon = isPdf ? pdfIcon : isPpt ? pptIcon : otherIcon;
-                
+
+                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 key={key} className="flex items-center justify-between gap-2 rounded-md border px-3 py-2">
                     {/* ✅ 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 ? (
@@ -1025,18 +984,13 @@ export function ChatArea({
                         />
                       )}
                     </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>
-                
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onRemoveFile(i)}
-                      title="Remove"
-                    >
+
+                    <Button variant="ghost" size="icon" onClick={() => onRemoveFile(i)} title="Remove">
                       <Trash2 className="h-4 w-4" />
                     </Button>
                   </div>