Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -50,6 +50,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { SmartReview } from "./SmartReview";
 import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
 
+// ✅ NEW
+import { useObjectUrlCache } from "../lib/useObjectUrlCache";
+
 type ReviewEventType = "send_message" | "review_topic" | "review_all";
 
 interface ChatAreaProps {
@@ -89,7 +92,6 @@ interface ChatAreaProps {
   availableCourses?: Array<{ id: string; name: string }>;
   showReviewBanner?: boolean;
 
-  // ✅ NEW: for Review star brightness (daily)
   onReviewActivity?: (event: ReviewEventType) => void;
 }
 
@@ -199,17 +201,14 @@ export function ChatArea({
       return;
     }
 
-    // smooth scroll without scrollIntoView (prevents scrolling the wrong ancestor)
     el.scrollTo({ top, behavior });
   };
 
-  // Auto-scroll only when new messages come in (not on initial mount)
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
       previousMessagesLength.current = messages.length;
 
-      // Keep your previous behavior: start at top
       const el = scrollContainerRef.current;
       if (el) el.scrollTop = 0;
       return;
@@ -225,7 +224,6 @@ export function ChatArea({
     previousMessagesLength.current = messages.length;
   }, [messages]);
 
-  // Scroll button + top border
   useEffect(() => {
     const container = scrollContainerRef.current;
     if (!container) return;
@@ -246,7 +244,6 @@ export function ChatArea({
     e.preventDefault();
     if (!input.trim() || !isLoggedIn) return;
 
-    // ✅ Review activity: user sent a message in Review tab
     if (chatMode === "review") onReviewActivity?.("send_message");
 
     onSendMessage(input);
@@ -269,7 +266,6 @@ export function ChatArea({
     summary: "Quick Summary",
   };
 
-  // Review topic click
   const handleReviewTopic = (item: {
     title: string;
     previousQuestion: string;
@@ -279,7 +275,6 @@ export function ChatArea({
     weight: number;
     lastReviewed: string;
   }) => {
-    // ✅ Review activity: clicked Review this topic
     onReviewActivity?.("review_topic");
 
     const userMessage = `Please help me review: ${item.title}`;
@@ -289,9 +284,7 @@ export function ChatArea({
   };
 
   const handleReviewAll = () => {
-    // ✅ Review activity: clicked Review all
     onReviewActivity?.("review_all");
-
     (window as any).__lastReviewData = "REVIEW_ALL";
     onSendMessage("Please help me review all topics that need attention.");
   };
@@ -385,7 +378,6 @@ export function ChatArea({
     }
   };
 
-  // Check if current chat is already saved
   const isCurrentChatSaved = (): boolean => {
     if (messages.length <= 1) return false;
 
@@ -441,7 +433,7 @@ export function ChatArea({
     const saved = isCurrentChatSaved();
 
     if (saved) {
-      onConfirmClear(false);
+      onConfirmClear(false as any);
       return;
     }
 
@@ -567,114 +559,87 @@ export function ChatArea({
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
 
-  // ✅ CHANGE 1: onRemove 改成无参，避免事件传递导致“点了没反应”
-  const FileThumbnail = ({
+  // ✅ useObjectUrlCache: for image thumbnails (uploaded + pending)
+  const allThumbFiles = React.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)
+  const FileChip = ({
     file,
-    Icon,
-    fileInfo,
-    isImage,
-    onPreview,
-    onRemove,
+    index,
   }: {
     file: File;
-    Icon: React.ComponentType<{ className?: string }>;
-    fileInfo: { bgColor: string; type: string };
-    isImage: boolean;
-    onPreview: () => void;
-    onRemove: () => void; // ✅ CHANGED
+    index: number;
   }) => {
-    const [imagePreview, setImagePreview] = useState<string | null>(null);
-    const [imageLoading, setImageLoading] = useState(true);
+    const ext = file.name.toLowerCase();
+    const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e));
 
-    useEffect(() => {
-      if (!isImage) {
-        setImagePreview(null);
-        setImageLoading(false);
-        return;
-      }
+    const label = ext.endsWith(".pdf")
+      ? "PDF"
+      : ext.endsWith(".pptx") || ext.endsWith(".ppt")
+      ? "Presentation"
+      : ext.endsWith(".docx") || ext.endsWith(".doc")
+      ? "Document"
+      : isImage
+      ? "Image"
+      : "File";
 
-      setImageLoading(true);
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        setImagePreview(e.target?.result as string);
-        setImageLoading(false);
-      };
-      reader.onerror = () => setImageLoading(false);
-      reader.readAsDataURL(file);
-    }, [file, isImage]);
+    const thumbUrl = isImage ? getOrCreate(file) : null;
 
-    if (isImage) {
-      return (
-        <div
-          className="relative cursor-pointer w-16 h-16 flex-shrink-0"
-          onClick={onPreview}
-          style={{ width: 64, height: 64 }}
+    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"
+          className="h-6 w-6 rounded-full border border-border bg-background flex items-center justify-center hover:bg-muted"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // If user is previewing this file, close viewer safely
+            setSelectedFile((prev) => {
+              if (!prev) return prev;
+              if (prev.index === index) return null;
+              return prev;
+            });
+            setShowFileViewer(false);
+
+            onRemoveFile(index);
+          }}
+          aria-label="Remove file"
+          title="Remove"
         >
-          <div className="w-full h-full relative bg-card border border-border rounded-lg hover:border-primary/50 transition-colors">
-            <div className="w-full h-full overflow-hidden rounded-lg absolute inset-0">
-              {imageLoading ? (
-                <div className="w-full h-full flex items-center justify-center bg-muted">
-                  <Icon className="h-5 w-5 text-muted-foreground animate-pulse" />
-                </div>
-              ) : imagePreview ? (
-                <img
-                  src={imagePreview}
-                  alt={file.name}
-                  className="w-full h-full object-cover"
-                  onError={(e) => {
-                    e.currentTarget.style.display = "none";
-                    setImageLoading(false);
-                  }}
-                />
-              ) : (
-                <div className="w-full h-full flex items-center justify-center bg-muted">
-                  <Icon className="h-5 w-5 text-muted-foreground" />
-                </div>
-              )}
-            </div>
+          <X className="h-4 w-4" />
+        </button>
 
-            <button
-              type="button"
-              className="absolute top-1 right-1 h-4 w-4 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm flex items-center justify-center cursor-pointer"
-              onClick={(e) => {
-                e.stopPropagation();
-                onRemove(); // ✅ CHANGED
-              }}
-              style={{ zIndex: 100 }}
-            >
-              <X className="h-2.5 w-2.5" style={{ color: "rgb(0, 0, 0)", strokeWidth: 2 }} />
-            </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>
-      );
-    }
 
-    return (
-      <div className="relative cursor-pointer" onClick={onPreview} style={{ width: 240, flexShrink: 0 }}>
-        <div className="h-16 w-full relative flex items-center px-3 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors">
-          <div className={`${fileInfo.bgColor} flex items-center justify-center w-10 h-10 rounded shrink-0`}>
-            <Icon className="h-5 w-5 text-white" />
-          </div>
-          <div className="w-2 shrink-0" />
-          <div className="flex-1 min-w-0 flex flex-col justify-center pr-7">
-            <p className="text-xs text-foreground truncate" title={file.name}>
-              {file.name}
-            </p>
-            <p className="text-[10px] text-muted-foreground mt-0.5 truncate">{fileInfo.type}</p>
+        {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}
+              />
+            ) : (
+              <div className="h-full w-full flex items-center justify-center bg-muted">
+                <ImageIcon className="h-5 w-5 text-muted-foreground" />
+              </div>
+            )}
           </div>
-
-          <button
-            type="button"
-            className="absolute top-1 right-1 h-4 w-4 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm flex items-center justify-center cursor-pointer z-10"
-            onClick={(e) => {
-              e.stopPropagation();
-              onRemove(); // ✅ CHANGED
-            }}
-            style={{ zIndex: 10 }}
-          >
-            <X className="h-2.5 w-2.5" style={{ color: "rgb(0, 0, 0)", strokeWidth: 2 }} />
-          </button>
-        </div>
+        ) : null}
       </div>
     );
   };
@@ -693,16 +658,9 @@ export function ChatArea({
           const ext = file.name.toLowerCase();
 
           if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e))) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-              setContent(e.target?.result as string);
-              setLoading(false);
-            };
-            reader.onerror = () => {
-              setError("Failed to load image");
-              setLoading(false);
-            };
-            reader.readAsDataURL(file);
+            // Use objectURL for viewer as well
+            setContent(getOrCreate(file));
+            setLoading(false);
             return;
           }
 
@@ -729,6 +687,7 @@ export function ChatArea({
       };
 
       loadFile();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [file]);
 
     if (loading) return <div className="text-center py-8">Loading...</div>;
@@ -745,17 +704,18 @@ export function ChatArea({
       );
     }
 
-    return <div className="whitespace-pre-wrap text-sm font-mono p-4 bg-muted rounded-lg max-h-[60vh] overflow-y-auto">{content}</div>;
+    return (
+      <div className="whitespace-pre-wrap text-sm font-mono p-4 bg-muted rounded-lg max-h-[60vh] overflow-y-auto">
+        {content}
+      </div>
+    );
   };
 
-  // ✅ Reserve space for composer so last message is never hidden
   const bottomPad = Math.max(24, composerHeight + 24);
 
   return (
     <div className="relative flex flex-col h-full min-h-0 w-full overflow-hidden">
-      {/* =========================
-          0) Top Bar (fixed in ChatArea layout; NOT inside scroll container)
-         ========================= */}
+      {/* Top Bar */}
       <div
         className={`flex-shrink-0 flex items-center justify-between px-4 bg-card z-20 ${
           showTopBorder ? "border-b border-border" : ""
@@ -768,11 +728,7 @@ export function ChatArea({
             const current = workspaces.find((w) => w.id === currentWorkspaceId);
             if (current?.type === "group") {
               if (current.category === "course" && current.courseName) {
-                return (
-                  <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">
-                    {current.courseName}
-                  </div>
-                );
+                return <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">{current.courseName}</div>;
               }
               return null;
             }
@@ -794,7 +750,7 @@ export function ChatArea({
           })()}
         </div>
 
-        {/* Chat Mode Tabs - Center */}
+        {/* Tabs - Center */}
         <div className="absolute left-1/2 -translate-x-1/2 flex-shrink-0">
           <Tabs value={chatMode} onValueChange={(value) => onChatModeChange(value as ChatMode)} className="w-auto" orientation="horizontal">
             <TabsList className="inline-flex h-8 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground">
@@ -869,11 +825,8 @@ export function ChatArea({
         </div>
       </div>
 
-      {/* =========================
-          1) Scroll Container (ONLY this scrolls)
-         ========================= */}
+      {/* Scroll Container */}
       <div ref={scrollContainerRef} className="flex-1 min-h-0 overflow-y-auto overscroll-contain" style={{ overscrollBehavior: "contain" }}>
-        {/* Messages */}
         <div className="py-6" style={{ paddingBottom: bottomPad }}>
           <div className="w-full space-y-6 max-w-4xl mx-auto">
             {messages.map((message) => (
@@ -881,9 +834,7 @@ export function ChatArea({
                 <Message
                   message={message}
                   showSenderInfo={spaceType === "group"}
-                  isFirstGreeting={
-                    (message.id === "1" || message.id === "review-1" || message.id === "quiz-1") && message.role === "assistant"
-                  }
+                  isFirstGreeting={(message.id === "1" || message.id === "review-1" || message.id === "quiz-1") && message.role === "assistant"}
                   showNextButton={message.showNextButton && !isAppTyping}
                   onNextQuestion={onNextQuestion}
                   chatMode={chatMode}
@@ -931,9 +882,7 @@ export function ChatArea({
         </div>
       </div>
 
-      {/* =========================
-          2) Scroll-to-bottom button (positioned above composer)
-         ========================= */}
+      {/* Scroll-to-bottom button */}
       {showScrollButton && (
         <div className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none" style={{ bottom: composerHeight + 16 }}>
           <Button
@@ -948,40 +897,15 @@ export function ChatArea({
         </div>
       )}
 
-      {/* =========================
-          3) Composer (bottom flex item; never scrolls)
-         ========================= */}
+      {/* 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) */}
           {uploadedFiles.length > 0 && (
             <div className="mb-2 flex flex-wrap gap-2 max-h-32 overflow-y-auto">
-              {uploadedFiles.map((uploadedFile, index) => {
-                const Icon = getFileIcon(uploadedFile.file.name);
-                const fileInfo = getFileTypeInfo(uploadedFile.file.name);
-                const isImage = ["jpg", "jpeg", "png", "gif", "webp"].some((ext) =>
-                  uploadedFile.file.name.toLowerCase().endsWith(`.${ext}`)
-                );
-
-                return (
-                  <div key={index}>
-                    <FileThumbnail
-                      file={uploadedFile.file}
-                      Icon={Icon}
-                      fileInfo={fileInfo}
-                      isImage={isImage}
-                      onPreview={() => {
-                        setSelectedFile({ file: uploadedFile.file, index });
-                        setShowFileViewer(true);
-                      }}
-                      // ✅ CHANGE 2: 直接 set state，不传事件
-                      onRemove={() => {
-                        setFileToDelete(index);
-                        setShowDeleteDialog(true);
-                      }}
-                    />
-                  </div>
-                );
-              })}
+              {uploadedFiles.map((u, index) => (
+                <FileChip key={`${u.file.name}-${u.file.size}-${u.file.lastModified}-${index}`} file={u.file} index={index} />
+              ))}
             </div>
           )}
 
@@ -1012,30 +936,21 @@ export function ChatArea({
                       </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent align="start" className="w-56">
-                      <DropdownMenuItem
-                        onClick={() => onLearningModeChange("general")}
-                        className={learningMode === "general" ? "bg-accent" : ""}
-                      >
+                      <DropdownMenuItem onClick={() => onLearningModeChange("general")} className={learningMode === "general" ? "bg-accent" : ""}>
                         <div className="flex flex-col">
                           <span className="font-medium">General</span>
                           <span className="text-xs text-muted-foreground">Answer various questions (context required)</span>
                         </div>
                       </DropdownMenuItem>
 
-                      <DropdownMenuItem
-                        onClick={() => onLearningModeChange("concept")}
-                        className={learningMode === "concept" ? "bg-accent" : ""}
-                      >
+                      <DropdownMenuItem onClick={() => onLearningModeChange("concept")} className={learningMode === "concept" ? "bg-accent" : ""}>
                         <div className="flex flex-col">
                           <span className="font-medium">Concept Explainer</span>
                           <span className="text-xs text-muted-foreground">Get detailed explanations of concepts</span>
                         </div>
                       </DropdownMenuItem>
 
-                      <DropdownMenuItem
-                        onClick={() => onLearningModeChange("socratic")}
-                        className={learningMode === "socratic" ? "bg-accent" : ""}
-                      >
+                      <DropdownMenuItem onClick={() => onLearningModeChange("socratic")} className={learningMode === "socratic" ? "bg-accent" : ""}>
                         <div className="flex flex-col">
                           <span className="font-medium">Socratic Tutor</span>
                           <span className="text-xs text-muted-foreground">Learn through guided questions</span>
@@ -1049,20 +964,14 @@ export function ChatArea({
                         </div>
                       </DropdownMenuItem>
 
-                      <DropdownMenuItem
-                        onClick={() => onLearningModeChange("assignment")}
-                        className={learningMode === "assignment" ? "bg-accent" : ""}
-                      >
+                      <DropdownMenuItem onClick={() => onLearningModeChange("assignment")} className={learningMode === "assignment" ? "bg-accent" : ""}>
                         <div className="flex flex-col">
                           <span className="font-medium">Assignment Helper</span>
                           <span className="text-xs text-muted-foreground">Get help with assignments</span>
                         </div>
                       </DropdownMenuItem>
 
-                      <DropdownMenuItem
-                        onClick={() => onLearningModeChange("summary")}
-                        className={learningMode === "summary" ? "bg-accent" : ""}
-                      >
+                      <DropdownMenuItem onClick={() => onLearningModeChange("summary")} className={learningMode === "summary" ? "bg-accent" : ""}>
                         <div className="flex flex-col">
                           <span className="font-medium">Quick Summary</span>
                           <span className="text-xs text-muted-foreground">Get concise summaries</span>
@@ -1271,15 +1180,13 @@ export function ChatArea({
         </DialogContent>
       </Dialog>
 
-      {/* Delete File Confirmation Dialog */}
+      {/* Delete File Confirmation Dialog (kept, but chip delete is instant now) */}
       <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        {/* ✅ CHANGE 3: 提高 z-index，确保弹窗不会被遮挡 */}
-        <AlertDialogContent className="z-[99999]" style={{ zIndex: 99999 }}>
+        <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>Delete File</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to delete &quot;
-              {fileToDelete !== null ? uploadedFiles[fileToDelete]?.file.name : ""}&quot;? This action cannot be undone.
+              Are you sure you want to delete &quot;{fileToDelete !== null ? uploadedFiles[fileToDelete]?.file.name : ""}&quot;? This action cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>