Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -33,8 +33,20 @@ import type {
 } from "../App";
 import { toast } from "sonner";
 import { jsPDF } from "jspdf";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
 import { Checkbox } from "./ui/checkbox";
 import {
   AlertDialog,
@@ -46,10 +58,19 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "./ui/alert-dialog";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
 import { SmartReview } from "./SmartReview";
 import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
 
+// ✅ NEW: objectURL cache hook (you added this file)
+import { useObjectUrlCache } from "../lib/useObjectUrlCache";
+
 type ReviewEventType = "send_message" | "review_topic" | "review_all";
 
 interface ChatAreaProps {
@@ -82,7 +103,12 @@ interface ChatAreaProps {
   savedChats: SavedChat[];
   workspaces: Workspace[];
   currentWorkspaceId: string;
-  onSaveFile?: (content: string, type: "export" | "summary", format?: "pdf" | "text", workspaceId?: string) => void;
+  onSaveFile?: (
+    content: string,
+    type: "export" | "summary",
+    format?: "pdf" | "text",
+    workspaceId?: string
+  ) => void;
   leftPanelVisible?: boolean;
   currentCourseId?: string;
   onCourseChange?: (courseId: string) => void;
@@ -155,6 +181,9 @@ export function ChatArea({
   const [shareLink, setShareLink] = useState("");
   const [targetWorkspaceId, setTargetWorkspaceId] = useState<string>("");
 
+  // ✅ NEW: objectURL cache for image thumbnail rendering
+  const { getObjectUrl, revokeObjectUrl } = useObjectUrlCache();
+
   const courses =
     availableCourses.length > 0
       ? availableCourses
@@ -298,7 +327,9 @@ export function ChatArea({
 
   const buildPreviewContent = () => {
     if (!messages.length) return "";
-    return messages.map((msg) => `${msg.role === "user" ? "You" : "Clare"}: ${msg.content}`).join("\n\n");
+    return messages
+      .map((msg) => `${msg.role === "user" ? "You" : "Clare"}: ${msg.content}`)
+      .join("\n\n");
   };
 
   const buildSummaryContent = () => {
@@ -487,8 +518,8 @@ export function ChatArea({
 
     const validFiles = files.filter((file) => {
       const ext = file.name.toLowerCase();
-      return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some((allowed) =>
-        ext.endsWith(allowed)
+      return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some(
+        (allowed) => ext.endsWith(allowed)
       );
     });
 
@@ -505,8 +536,8 @@ export function ChatArea({
     if (files.length > 0) {
       const validFiles = files.filter((file) => {
         const ext = file.name.toLowerCase();
-        return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some((allowed) =>
-          ext.endsWith(allowed)
+        return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some(
+          (allowed) => ext.endsWith(allowed)
         );
       });
 
@@ -560,8 +591,7 @@ export function ChatArea({
     if (ext.endsWith(".pdf")) return { bgColor: "bg-red-500", type: "PDF" };
     if (ext.endsWith(".docx") || ext.endsWith(".doc")) return { bgColor: "bg-blue-500", type: "Document" };
     if (ext.endsWith(".pptx") || ext.endsWith(".ppt")) return { bgColor: "bg-orange-500", type: "Presentation" };
-    if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e)))
-      return { bgColor: "bg-green-500", type: "Image" };
+    if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e))) return { bgColor: "bg-green-500", type: "Image" };
     return { bgColor: "bg-gray-500", type: "File" };
   };
 
@@ -571,6 +601,12 @@ export function ChatArea({
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
 
+  // ✅ (display-only helper)
+  const isImageByName = (name: string) => {
+    const ext = name.toLowerCase();
+    return [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e));
+  };
+
   const FileThumbnail = ({
     file,
     Icon,
@@ -586,25 +622,8 @@ export function ChatArea({
     onPreview: () => void;
     onRemove: (e: React.MouseEvent) => void;
   }) => {
-    const [imagePreview, setImagePreview] = useState<string | null>(null);
-    const [imageLoading, setImageLoading] = useState(true);
-
-    useEffect(() => {
-      if (!isImage) {
-        setImagePreview(null);
-        setImageLoading(false);
-        return;
-      }
-
-      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]);
+    // ✅ Use cached objectURL for stable image preview
+    const src = isImage ? getObjectUrl(file) : null;
 
     if (isImage) {
       return (
@@ -615,23 +634,19 @@ export function ChatArea({
         >
           <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 ? (
+              {src ? (
                 <img
-                  src={imagePreview}
+                  src={src}
                   alt={file.name}
                   className="w-full h-full object-cover"
+                  draggable={false}
                   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" />
+                  <Icon className="h-5 w-5 text-muted-foreground animate-pulse" />
                 </div>
               )}
             </div>
@@ -644,6 +659,7 @@ export function ChatArea({
                 onRemove(e);
               }}
               style={{ zIndex: 100 }}
+              aria-label="Remove file"
             >
               <X className="h-2.5 w-2.5" style={{ color: "rgb(0, 0, 0)", strokeWidth: 2 }} />
             </button>
@@ -674,6 +690,7 @@ export function ChatArea({
               onRemove(e);
             }}
             style={{ zIndex: 10 }}
+            aria-label="Remove file"
           >
             <X className="h-2.5 w-2.5" style={{ color: "rgb(0, 0, 0)", strokeWidth: 2 }} />
           </button>
@@ -748,7 +765,11 @@ 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
@@ -781,7 +802,10 @@ export function ChatArea({
             }
 
             return (
-              <Select value={currentCourseId || "course1"} onValueChange={(val) => onCourseChange && onCourseChange(val)}>
+              <Select
+                value={currentCourseId || "course1"}
+                onValueChange={(val) => onCourseChange && onCourseChange(val)}
+              >
                 <SelectTrigger className="w-[200px] h-9 font-semibold">
                   <SelectValue placeholder="Select course" />
                 </SelectTrigger>
@@ -799,7 +823,12 @@ export function ChatArea({
 
         {/* Chat Mode 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">
+          <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">
               <TabsTrigger value="ask" className="w-[140px] px-3 text-sm">
                 Ask
@@ -875,7 +904,11 @@ export function ChatArea({
       {/* =========================
           1) Scroll Container (ONLY this scrolls)
          ========================= */}
-      <div ref={scrollContainerRef} className="flex-1 min-h-0 overflow-y-auto overscroll-contain" style={{ overscrollBehavior: "contain" }}>
+      <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">
@@ -885,7 +918,8 @@ export function ChatArea({
                   message={message}
                   showSenderInfo={spaceType === "group"}
                   isFirstGreeting={
-                    (message.id === "1" || message.id === "review-1" || message.id === "quiz-1") && message.role === "assistant"
+                    (message.id === "1" || message.id === "review-1" || message.id === "quiz-1") &&
+                    message.role === "assistant"
                   }
                   showNextButton={message.showNextButton && !isAppTyping}
                   onNextQuestion={onNextQuestion}
@@ -923,9 +957,18 @@ export function ChatArea({
                 </div>
                 <div className="bg-muted rounded-2xl px-4 py-3">
                   <div className="flex gap-1">
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "0ms" }} />
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "150ms" }} />
-                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "300ms" }} />
+                    <div
+                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
+                      style={{ animationDelay: "0ms" }}
+                    />
+                    <div
+                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
+                      style={{ animationDelay: "150ms" }}
+                    />
+                    <div
+                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
+                      style={{ animationDelay: "300ms" }}
+                    />
                   </div>
                 </div>
               </div>
@@ -961,9 +1004,7 @@ export function ChatArea({
               {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}`)
-                );
+                const isImage = isImageByName(uploadedFile.file.name);
 
                 return (
                   <div key={index}>
@@ -978,6 +1019,14 @@ export function ChatArea({
                       }}
                       onRemove={(e) => {
                         e.stopPropagation();
+                        // ✅ revoke objectURL for this image file (display-only change)
+                        if (isImage) {
+                          try {
+                            revokeObjectUrl(uploadedFile.file);
+                          } catch {
+                            // ignore
+                          }
+                        }
                         setFileToDelete(index);
                         setShowDeleteDialog(true);
                       }}
@@ -1045,7 +1094,10 @@ export function ChatArea({
                         </div>
                       </DropdownMenuItem>
 
-                      <DropdownMenuItem onClick={() => onLearningModeChange("exam")} className={learningMode === "exam" ? "bg-accent" : ""}>
+                      <DropdownMenuItem
+                        onClick={() => onLearningModeChange("exam")}
+                        className={learningMode === "exam" ? "bg-accent" : ""}
+                      >
                         <div className="flex flex-col">
                           <span className="font-medium">Exam Prep</span>
                           <span className="text-xs text-muted-foreground">Practice with quiz questions</span>
@@ -1138,7 +1190,9 @@ export function ChatArea({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>Start New Conversation</AlertDialogTitle>
-            <AlertDialogDescription>Would you like to save the current chat before starting a new conversation?</AlertDialogDescription>
+            <AlertDialogDescription>
+              Would you like to save the current chat before starting a new conversation?
+            </AlertDialogDescription>
 
             <Button
               variant="ghost"
@@ -1319,7 +1373,9 @@ export function ChatArea({
             </DialogTitle>
             <DialogDescription>File size: {selectedFile ? formatFileSize(selectedFile.file.size) : ""}</DialogDescription>
           </DialogHeader>
-          <div className="flex-1 min-h-0 overflow-y-auto mt-4">{selectedFile && <FileViewerContent file={selectedFile.file} />}</div>
+          <div className="flex-1 min-h-0 overflow-y-auto mt-4">
+            {selectedFile && <FileViewerContent file={selectedFile.file} />}
+          </div>
         </DialogContent>
       </Dialog>