Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -33,20 +33,8 @@ 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,
@@ -58,17 +46,11 @@ 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)
+// ✅ NEW: object URL cache for image thumbnails
 import { useObjectUrlCache } from "../lib/useObjectUrlCache";
 
 type ReviewEventType = "send_message" | "review_topic" | "review_all";
@@ -103,12 +85,7 @@ 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;
@@ -181,9 +158,6 @@ 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
@@ -327,9 +301,7 @@ 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 = () => {
@@ -518,8 +490,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)
       );
     });
 
@@ -536,8 +508,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)
         );
       });
 
@@ -591,7 +563,8 @@ 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" };
   };
 
@@ -601,11 +574,9 @@ 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));
-  };
+  // ✅ objectURL cache for image thumbnails (display only)
+  const cacheFiles = React.useMemo(() => uploadedFiles.map((u) => u.file), [uploadedFiles]);
+  const { getOrCreate } = useObjectUrlCache(cacheFiles);
 
   const FileThumbnail = ({
     file,
@@ -622,10 +593,9 @@ export function ChatArea({
     onPreview: () => void;
     onRemove: (e: React.MouseEvent) => void;
   }) => {
-    // ✅ Use cached objectURL for stable image preview
-    const src = isImage ? getObjectUrl(file) : null;
-
     if (isImage) {
+      const src = getOrCreate(file);
+
       return (
         <div
           className="relative cursor-pointer w-16 h-16 flex-shrink-0"
@@ -659,7 +629,6 @@ 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>
@@ -690,7 +659,6 @@ 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>
@@ -765,11 +733,7 @@ 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
@@ -802,10 +766,7 @@ 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>
@@ -823,12 +784,7 @@ 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
@@ -904,11 +860,7 @@ 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">
@@ -918,8 +870,7 @@ 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}
@@ -957,18 +908,9 @@ 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>
@@ -1004,7 +946,9 @@ export function ChatArea({
               {uploadedFiles.map((uploadedFile, index) => {
                 const Icon = getFileIcon(uploadedFile.file.name);
                 const fileInfo = getFileTypeInfo(uploadedFile.file.name);
-                const isImage = isImageByName(uploadedFile.file.name);
+                const isImage = ["jpg", "jpeg", "png", "gif", "webp"].some((ext) =>
+                  uploadedFile.file.name.toLowerCase().endsWith(`.${ext}`)
+                );
 
                 return (
                   <div key={index}>
@@ -1019,14 +963,6 @@ 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);
                       }}
@@ -1094,10 +1030,7 @@ 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>
@@ -1190,9 +1123,7 @@ 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"
@@ -1373,9 +1304,7 @@ 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>