Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -1,13 +1,12 @@
 // web/src/components/ChatArea.tsx
-import React, { useState, useRef, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Textarea } from './ui/textarea';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
+import React, { useState, useRef, useEffect } from "react";
+import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
 import {
   Send,
   ArrowDown,
-  Trash2,
   Share2,
   Upload,
   X,
@@ -18,22 +17,37 @@ import {
   Bookmark,
   Plus,
   Download,
-  Copy
-} from 'lucide-react';
-import { Message } from './Message';
-import { Badge } from './ui/badge';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
-import type { Message as MessageType, LearningMode, UploadedFile, FileType, SpaceType, ChatMode, SavedChat, Workspace } from '../App';
-import { toast } from 'sonner';
-import { jsPDF } from 'jspdf';
+  Copy,
+} from "lucide-react";
+import { Message } from "./Message";
+import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+import type {
+  Message as MessageType,
+  LearningMode,
+  UploadedFile,
+  FileType,
+  SpaceType,
+  ChatMode,
+  SavedChat,
+  Workspace,
+} 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 { Checkbox } from './ui/checkbox';
+} from "./ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Checkbox } from "./ui/checkbox";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -43,10 +57,10 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from './ui/alert-dialog';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { SmartReview } from './SmartReview';
-import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
+} from "./ui/alert-dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { SmartReview } from "./SmartReview";
+import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
 
 interface ChatAreaProps {
   messages: MessageType[];
@@ -78,7 +92,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;
@@ -124,80 +143,88 @@ export function ChatArea({
   availableCourses = [],
   showReviewBanner = false,
 }: ChatAreaProps) {
-  const [input, setInput] = useState('');
+  const [input, setInput] = useState("");
   const [showScrollButton, setShowScrollButton] = useState(false);
   const [showTopBorder, setShowTopBorder] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
+
   const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
   const [showTypeDialog, setShowTypeDialog] = useState(false);
+
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [fileToDelete, setFileToDelete] = useState<number | null>(null);
+
   const [selectedFile, setSelectedFile] = useState<{ file: File; index: number } | null>(null);
   const [showFileViewer, setShowFileViewer] = useState(false);
+
   const [showDownloadDialog, setShowDownloadDialog] = useState(false);
-  const [downloadPreview, setDownloadPreview] = useState('');
-  const [downloadTab, setDownloadTab] = useState<'chat' | 'summary'>('chat');
+  const [downloadPreview, setDownloadPreview] = useState("");
+  const [downloadTab, setDownloadTab] = useState<"chat" | "summary">("chat");
   const [downloadOptions, setDownloadOptions] = useState({ chat: true, summary: false });
-  const [showShareDialog, setShowShareDialog] = useState(false);
-  const [shareLink, setShareLink] = useState('');
-  const [targetWorkspaceId, setTargetWorkspaceId] = useState<string>('');
 
-  // Use availableCourses if provided, otherwise fallback to default
-  const courses = availableCourses.length > 0 ? availableCourses : [
-    { id: 'course1', name: 'Introduction to AI' },
-    { id: 'course2', name: 'Machine Learning' },
-    { id: 'course3', name: 'Data Structures' },
-    { id: 'course4', name: 'Web Development' },
-  ];
+  const [showShareDialog, setShowShareDialog] = useState(false);
+  const [shareLink, setShareLink] = useState("");
+  const [targetWorkspaceId, setTargetWorkspaceId] = useState<string>("");
+
+  // Use availableCourses if provided, otherwise fallback
+  const courses =
+    availableCourses.length > 0
+      ? availableCourses
+      : [
+          { id: "course1", name: "Introduction to AI" },
+          { id: "course2", name: "Machine Learning" },
+          { id: "course3", name: "Data Structures" },
+          { id: "course4", name: "Web Development" },
+        ];
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+
   const isInitialMount = useRef(true);
   const previousMessagesLength = useRef(messages.length);
 
   const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
 
   // Only auto-scroll when new messages are added (not on initial load)
   useEffect(() => {
-    // Skip auto-scroll on initial mount
     if (isInitialMount.current) {
       isInitialMount.current = false;
       previousMessagesLength.current = messages.length;
-      // Ensure we stay at top on initial load
+
+      // stay at top on initial load
       if (scrollContainerRef.current) {
         scrollContainerRef.current.scrollTop = 0;
       }
       return;
     }
 
-    // Only scroll if new messages were added (length increased)
     if (messages.length > previousMessagesLength.current) {
       scrollToBottom();
     }
     previousMessagesLength.current = messages.length;
   }, [messages]);
 
+  // Scroll button + top border
   useEffect(() => {
     const handleScroll = () => {
-      if (scrollContainerRef.current) {
-        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
-        const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
-        setShowScrollButton(!isAtBottom);
-        // Show border when content is scrolled below the fixed bar
-        setShowTopBorder(scrollTop > 0);
-      }
+      const el = scrollContainerRef.current;
+      if (!el) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
+      setShowScrollButton(!isAtBottom);
+      setShowTopBorder(scrollTop > 0);
     };
 
     const container = scrollContainerRef.current;
-    if (container) {
-      // Check initial state
-      handleScroll();
-      container.addEventListener('scroll', handleScroll);
-      return () => container.removeEventListener('scroll', handleScroll);
-    }
+    if (!container) return;
+
+    handleScroll();
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
   }, [messages]);
 
   // ✅ Prevent scroll chaining to left panel / outer containers
@@ -206,10 +233,8 @@ export function ChatArea({
     if (!el) return;
 
     const onWheel = (e: WheelEvent) => {
-      // Always stop bubbling so left panel won't react
       e.stopPropagation();
 
-      // Only preventDefault at boundaries to stop scroll chaining
       const atTop = el.scrollTop <= 0;
       const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
 
@@ -227,68 +252,56 @@ export function ChatArea({
     if (!input.trim() || !isLoggedIn) return;
 
     onSendMessage(input);
-    setInput('');
+    setInput("");
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit(e);
     }
   };
 
   const modeLabels: Record<LearningMode, string> = {
-    general: 'General',
-    concept: 'Concept Explainer',
-    socratic: 'Socratic Tutor',
-    exam: 'Exam Prep',
-    assignment: 'Assignment Helper',
-    summary: 'Quick Summary',
+    general: "General",
+    concept: "Concept Explainer",
+    socratic: "Socratic Tutor",
+    exam: "Exam Prep",
+    assignment: "Assignment Helper",
+    summary: "Quick Summary",
   };
 
-  // Handle review topic button click
-  const handleReviewTopic = (item: { title: string; previousQuestion: string; memoryRetention: number; schedule: string; status: string; weight: number; lastReviewed: string }) => {
+  // Review topic click
+  const handleReviewTopic = (item: {
+    title: string;
+    previousQuestion: string;
+    memoryRetention: number;
+    schedule: string;
+    status: string;
+    weight: number;
+    lastReviewed: string;
+  }) => {
     const userMessage = `Please help me review: ${item.title}`;
     const reviewData = `REVIEW_TOPIC:${item.title}|${item.previousQuestion}|${item.memoryRetention}|${item.schedule}|${item.status}|${item.weight}|${item.lastReviewed}`;
     (window as any).__lastReviewData = reviewData;
     onSendMessage(userMessage);
   };
 
-  // Handle review all button click
   const handleReviewAll = () => {
-    (window as any).__lastReviewData = 'REVIEW_ALL';
-    onSendMessage('Please help me review all topics that need attention.');
-  };
-
-  const handleClearClick = () => {
-    const isSavedChat = isCurrentChatSaved();
-
-    if (isSavedChat) {
-      onConfirmClear(false);
-      return;
-    }
-
-    const hasUserMessages = messages.some(msg => msg.role === 'user');
-    if (!hasUserMessages) {
-      onClearConversation();
-      return;
-    }
-
-    onClearConversation();
+    (window as any).__lastReviewData = "REVIEW_ALL";
+    onSendMessage("Please help me review all topics that need attention.");
   };
 
   const buildPreviewContent = () => {
-    if (!messages.length) return '';
-    return messages
-      .map((msg) => `${msg.role === 'user' ? 'You' : 'Clare'}: ${msg.content}`)
-      .join('\n\n');
+    if (!messages.length) return "";
+    return messages.map((msg) => `${msg.role === "user" ? "You" : "Clare"}: ${msg.content}`).join("\n\n");
   };
 
   const buildSummaryContent = () => {
-    if (!messages.length) return 'No messages to summarize.';
+    if (!messages.length) return "No messages to summarize.";
 
-    const userMessages = messages.filter(msg => msg.role === 'user');
-    const assistantMessages = messages.filter(msg => msg.role === 'assistant');
+    const userMessages = messages.filter((msg) => msg.role === "user");
+    const assistantMessages = messages.filter((msg) => msg.role === "assistant");
 
     let summary = `Chat Summary\n================\n\n`;
     summary += `Total Messages: ${messages.length}\n`;
@@ -298,14 +311,14 @@ 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;
   };
 
   const handleOpenDownloadDialog = () => {
-    setDownloadTab('chat');
+    setDownloadTab("chat");
     setDownloadOptions({ chat: true, summary: false });
     setDownloadPreview(buildPreviewContent());
     setShowDownloadDialog(true);
@@ -314,66 +327,57 @@ export function ChatArea({
   const handleCopyPreview = async () => {
     try {
       await navigator.clipboard.writeText(downloadPreview);
-      toast.success('Copied preview');
-    } catch (e) {
-      toast.error('Copy failed');
+      toast.success("Copied preview");
+    } catch {
+      toast.error("Copy failed");
     }
   };
 
   const handleDownloadFile = async () => {
     try {
-      let contentToPdf = '';
+      let contentToPdf = "";
 
-      if (downloadOptions.chat) {
-        contentToPdf += buildPreviewContent();
-      }
+      if (downloadOptions.chat) contentToPdf += buildPreviewContent();
 
       if (downloadOptions.summary) {
-        if (downloadOptions.chat) {
-          contentToPdf += '\n\n================\n\n';
-        }
+        if (downloadOptions.chat) contentToPdf += "\n\n================\n\n";
         contentToPdf += buildSummaryContent();
       }
 
       if (!contentToPdf.trim()) {
-        toast.error('Please select at least one option');
+        toast.error("Please select at least one option");
         return;
       }
 
-      const pdf = new jsPDF({
-        orientation: 'portrait',
-        unit: 'mm',
-        format: 'a4'
-      });
+      const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: "a4" });
 
-      pdf.setFontSize(11);
       pdf.setFontSize(14);
-      pdf.text('Chat Export', 10, 10);
+      pdf.text("Chat Export", 10, 10);
       pdf.setFontSize(11);
 
       const pageHeight = pdf.internal.pageSize.getHeight();
       const margin = 10;
       const maxWidth = 190;
       const lineHeight = 5;
-      let yPosition = 20;
+      let y = 20;
 
       const lines = pdf.splitTextToSize(contentToPdf, maxWidth);
-
       lines.forEach((line: string) => {
-        if (yPosition > pageHeight - margin) {
+        if (y > pageHeight - margin) {
           pdf.addPage();
-          yPosition = margin;
+          y = margin;
         }
-        pdf.text(line, margin, yPosition);
-        yPosition += lineHeight;
+        pdf.text(line, margin, y);
+        y += lineHeight;
       });
 
-      pdf.save('chat-export.pdf');
+      pdf.save("chat-export.pdf");
       setShowDownloadDialog(false);
-      toast.success('PDF downloaded successfully');
+      toast.success("PDF downloaded successfully");
     } catch (error) {
-      console.error('PDF generation error:', error);
-      toast.error('Failed to generate PDF');
+      // eslint-disable-next-line no-console
+      console.error("PDF generation error:", error);
+      toast.error("Failed to generate PDF");
     }
   };
 
@@ -381,12 +385,12 @@ export function ChatArea({
   const isCurrentChatSaved = (): boolean => {
     if (messages.length <= 1) return false;
 
-    return savedChats.some(chat => {
+    return savedChats.some((chat) => {
       if (chat.chatMode !== chatMode) return false;
       if (chat.messages.length !== messages.length) return false;
 
-      return chat.messages.every((savedMsg, index) => {
-        const currentMsg = messages[index];
+      return chat.messages.every((savedMsg, idx) => {
+        const currentMsg = messages[idx];
         return (
           savedMsg.id === currentMsg.id &&
           savedMsg.role === currentMsg.role &&
@@ -398,20 +402,19 @@ export function ChatArea({
 
   const handleSaveClick = () => {
     if (messages.length <= 1) {
-      toast.info('No conversation to save');
+      toast.info("No conversation to save");
       return;
     }
-
     onSaveChat();
   };
 
   const handleShareClick = () => {
     if (messages.length <= 1) {
-      toast.info('No conversation to share');
+      toast.info("No conversation to share");
       return;
     }
     const conversationText = buildPreviewContent();
-    const blob = new Blob([conversationText], { type: 'text/plain' });
+    const blob = new Blob([conversationText], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
     setShareLink(url);
     setTargetWorkspaceId(currentWorkspaceId);
@@ -421,19 +424,38 @@ export function ChatArea({
   const handleCopyShareLink = async () => {
     try {
       await navigator.clipboard.writeText(shareLink);
-      toast.success('Link copied');
+      toast.success("Link copied");
     } catch {
-      toast.error('Failed to copy link');
+      toast.error("Failed to copy link");
     }
   };
 
   const handleShareSendToWorkspace = () => {
     const content = buildPreviewContent();
-    onSaveFile?.(content, 'export', 'text', targetWorkspaceId);
+    onSaveFile?.(content, "export", "text", targetWorkspaceId);
     setShowShareDialog(false);
-    toast.success('Sent to workspace Saved Files');
+    toast.success("Sent to workspace Saved Files");
+  };
+
+  const handleClearClick = () => {
+    const saved = isCurrentChatSaved();
+
+    if (saved) {
+      // current logic: if saved, don't prompt — just start new
+      onConfirmClear(false);
+      return;
+    }
+
+    const hasUserMessages = messages.some((m) => m.role === "user");
+    if (!hasUserMessages) {
+      onClearConversation();
+      return;
+    }
+
+    onClearConversation();
   };
 
+  // DnD
   const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -456,24 +478,22 @@ export function ChatArea({
     const fileList = e.dataTransfer.files;
     const files: File[] = [];
     for (let i = 0; i < fileList.length; i++) {
-      const file = fileList.item(i);
-      if (file) {
-        files.push(file);
-      }
+      const f = fileList.item(i);
+      if (f) files.push(f);
     }
 
     const validFiles = files.filter((file) => {
       const ext = file.name.toLowerCase();
-      return ['.pdf', '.docx', '.pptx', '.jpg', '.jpeg', '.png', '.gif', '.webp', '.doc', '.ppt'].some((allowedExt) =>
-        ext.endsWith(allowedExt)
+      return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some((allowed) =>
+        ext.endsWith(allowed)
       );
     });
 
     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');
+      toast.error("Please upload .pdf, .docx, .pptx, or image files");
     }
   };
 
@@ -482,31 +502,36 @@ 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((allowedExt) =>
-          ext.endsWith(allowedExt)
+        return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some((allowed) =>
+          ext.endsWith(allowed)
         );
       });
+
       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');
+        toast.error("Please upload .pdf, .docx, .pptx, or image files");
       }
     }
-    e.target.value = '';
+    e.target.value = "";
   };
 
   const handleConfirmUpload = () => {
-    onFileUpload(pendingFiles.map(pf => pf.file));
+    onFileUpload(pendingFiles.map((pf) => pf.file));
     const startIndex = uploadedFiles.length;
+
+    // After uploadedFiles state grows (in parent), we call type change on next tick
     pendingFiles.forEach((pf, idx) => {
       setTimeout(() => {
         onFileTypeChange(startIndex + idx, pf.type);
       }, 0);
     });
+
+    const count = pendingFiles.length;
     setPendingFiles([]);
     setShowTypeDialog(false);
-    toast.success(`${pendingFiles.length} file(s) uploaded successfully`);
+    toast.success(`${count} file(s) uploaded successfully`);
   };
 
   const handleCancelUpload = () => {
@@ -515,31 +540,33 @@ 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
   const getFileIcon = (filename: string) => {
     const ext = filename.toLowerCase();
-    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 (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;
     return File;
   };
 
   const getFileTypeInfo = (filename: string) => {
     const ext = filename.toLowerCase();
-    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' };
-    return { bgColor: 'bg-gray-500', type: 'File' };
+    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" };
+    return { bgColor: "bg-gray-500", type: "File" };
   };
 
   const formatFileSize = (bytes: number) => {
-    if (bytes < 1024) return bytes + ' B';
-    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
 
   const FileThumbnail = ({
@@ -548,7 +575,7 @@ export function ChatArea({
     fileInfo,
     isImage,
     onPreview,
-    onRemove
+    onRemove,
   }: {
     file: File;
     Icon: React.ComponentType<{ className?: string }>;
@@ -561,21 +588,22 @@ export function ChatArea({
     const [imageLoading, setImageLoading] = useState(true);
 
     useEffect(() => {
-      if (isImage) {
-        setImageLoading(true);
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          setImagePreview(e.target?.result as string);
-          setImageLoading(false);
-        };
-        reader.onerror = () => {
-          setImageLoading(false);
-        };
-        reader.readAsDataURL(file);
-      } else {
+      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]);
 
     if (isImage) {
@@ -583,7 +611,7 @@ export function ChatArea({
         <div
           className="relative cursor-pointer w-16 h-16 flex-shrink-0"
           onClick={onPreview}
-          style={{ width: '64px', height: '64px', flexShrink: 0 }}
+          style={{ width: "64px", height: "64px", flexShrink: 0 }}
         >
           <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">
@@ -597,7 +625,7 @@ export function ChatArea({
                   alt={file.name}
                   className="w-full h-full object-cover"
                   onError={(e) => {
-                    e.currentTarget.style.display = 'none';
+                    e.currentTarget.style.display = "none";
                     setImageLoading(false);
                   }}
                 />
@@ -607,6 +635,7 @@ export function ChatArea({
                 </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"
@@ -614,15 +643,9 @@ export function ChatArea({
                 e.stopPropagation();
                 onRemove(e);
               }}
-              style={{ zIndex: 100, position: 'absolute', top: '4px', right: '4px' }}
+              style={{ zIndex: 100, position: "absolute", top: "4px", right: "4px" }}
             >
-              <X
-                className="h-2.5 w-2.5"
-                style={{
-                  color: 'rgb(0, 0, 0)',
-                  strokeWidth: 2
-                }}
-              />
+              <X className="h-2.5 w-2.5" style={{ color: "rgb(0, 0, 0)", strokeWidth: 2 }} />
             </button>
           </div>
         </div>
@@ -630,11 +653,7 @@ export function ChatArea({
     }
 
     return (
-      <div
-        className="relative cursor-pointer"
-        onClick={onPreview}
-        style={{ width: '240px', flexShrink: 0 }}
-      >
+      <div className="relative cursor-pointer" onClick={onPreview} style={{ width: "240px", 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" />
@@ -644,10 +663,9 @@ export function ChatArea({
             <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>
+            <p className="text-[10px] text-muted-foreground mt-0.5 truncate">{fileInfo.type}</p>
           </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"
@@ -655,15 +673,9 @@ export function ChatArea({
               e.stopPropagation();
               onRemove(e);
             }}
-            style={{ position: 'absolute', top: '4px', right: '4px', zIndex: 10 }}
+            style={{ position: "absolute", top: "4px", right: "4px", zIndex: 10 }}
           >
-            <X
-              className="h-2.5 w-2.5"
-              style={{
-                color: 'rgb(0, 0, 0)',
-                strokeWidth: 2
-              }}
-            />
+            <X className="h-2.5 w-2.5" style={{ color: "rgb(0, 0, 0)", strokeWidth: 2 }} />
           </button>
         </div>
       </div>
@@ -671,7 +683,7 @@ export function ChatArea({
   };
 
   const FileViewerContent = ({ file }: { file: File }) => {
-    const [content, setContent] = useState<string>('');
+    const [content, setContent] = useState<string>("");
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
@@ -683,34 +695,38 @@ export function ChatArea({
 
           const ext = file.name.toLowerCase();
 
-          if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(e => ext.endsWith(e))) {
+          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');
+              setError("Failed to load image");
               setLoading(false);
             };
             reader.readAsDataURL(file);
-          } else if (ext.endsWith('.pdf')) {
-            setContent('PDF files cannot be previewed directly. Please download the file to view it.');
+            return;
+          }
+
+          if (ext.endsWith(".pdf")) {
+            setContent("PDF files cannot be previewed directly. Please download the file to view it.");
             setLoading(false);
-          } else {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-              setContent(e.target?.result as string);
-              setLoading(false);
-            };
-            reader.onerror = () => {
-              setError('Failed to load file');
-              setLoading(false);
-            };
-            reader.readAsText(file);
+            return;
           }
-        } catch (err) {
-          setError('Failed to load file');
+
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            setContent(String(e.target?.result ?? ""));
+            setLoading(false);
+          };
+          reader.onerror = () => {
+            setError("Failed to load file");
+            setLoading(false);
+          };
+          reader.readAsText(file);
+        } catch {
+          setError("Failed to load file");
           setLoading(false);
         }
       };
@@ -722,7 +738,7 @@ export function ChatArea({
     if (error) return <div className="text-center py-8 text-destructive">{error}</div>;
 
     const ext = file.name.toLowerCase();
-    const isImage = ['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(e => ext.endsWith(e));
+    const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e));
 
     if (isImage) {
       return (
@@ -740,32 +756,27 @@ export function ChatArea({
   };
 
   return (
-    <div className="flex flex-col h-full min-h-0 overflow-hidden" style={{ overscrollBehavior: 'none' }}>
-      <div className="flex-1 relative min-h-0 flex flex-col overflow-hidden" style={{ overscrollBehavior: 'none' }}>
+    <div className="flex flex-col h-full min-h-0 overflow-hidden" style={{ overscrollBehavior: "none" }}>
+      <div className="flex-1 relative min-h-0 flex flex-col overflow-hidden" style={{ overscrollBehavior: "none" }}>
         {/* ✅ Messages Area is the ONLY scroll container */}
         <div
           ref={scrollContainerRef}
           className="flex-1 min-h-0 overflow-y-auto"
-          style={{
-            overscrollBehavior: 'contain',
-          }}
+          style={{ overscrollBehavior: "contain" }}
         >
           {/* Top Bar - Sticky */}
           <div
-            className={`sticky top-0 flex items-center justify-between px-4 z-20 bg-card ${showTopBorder ? 'border-b border-border' : ''}`}
-            style={{
-              height: '4.5rem',
-              margin: 0,
-              padding: '1rem 1rem',
-              boxSizing: 'border-box',
-            }}
+            className={`sticky top-0 flex items-center justify-between px-4 z-20 bg-card ${
+              showTopBorder ? "border-b border-border" : ""
+            }`}
+            style={{ height: "4.5rem", margin: 0, padding: "1rem 1rem", boxSizing: "border-box" }}
           >
             {/* Course Selector - Left */}
             <div className="flex-shrink-0">
               {(() => {
-                const current = workspaces.find(w => w.id === currentWorkspaceId);
-                if (current?.type === 'group') {
-                  if (current.category === 'course' && current.courseName) {
+                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}
@@ -774,8 +785,12 @@ export function ChatArea({
                   }
                   return null;
                 }
+
                 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>
@@ -800,21 +815,25 @@ export function ChatArea({
                 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</TabsTrigger>
+                  <TabsTrigger value="ask" className="w-[140px] px-3 text-sm">
+                    Ask
+                  </TabsTrigger>
                   <TabsTrigger value="review" className="w-[140px] px-3 text-sm relative">
                     Review
                     <span
                       className="absolute top-0 right-0 bg-red-500 rounded-full border-2"
                       style={{
-                        width: '10px',
-                        height: '10px',
-                        transform: 'translate(25%, -25%)',
+                        width: "10px",
+                        height: "10px",
+                        transform: "translate(25%, -25%)",
                         zIndex: 10,
-                        borderColor: 'var(--muted)'
+                        borderColor: "var(--muted)",
                       }}
                     />
                   </TabsTrigger>
-                  <TabsTrigger value="quiz" className="w-[140px] px-3 text-sm">Quiz</TabsTrigger>
+                  <TabsTrigger value="quiz" className="w-[140px] px-3 text-sm">
+                    Quiz
+                  </TabsTrigger>
                 </TabsList>
               </Tabs>
             </div>
@@ -826,11 +845,12 @@ export function ChatArea({
                 size="icon"
                 onClick={handleSaveClick}
                 disabled={!isLoggedIn}
-                className={`h-8 w-8 rounded-md hover:bg-muted/50 ${isCurrentChatSaved() ? 'text-primary' : ''}`}
-                title={isCurrentChatSaved() ? 'Unsave' : 'Save'}
+                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
                 variant="ghost"
                 size="icon"
@@ -841,6 +861,7 @@ export function ChatArea({
               >
                 <Download className="h-4 w-4" />
               </Button>
+
               <Button
                 variant="ghost"
                 size="icon"
@@ -851,6 +872,7 @@ export function ChatArea({
               >
                 <Share2 className="h-4 w-4" />
               </Button>
+
               <Button
                 variant="outline"
                 onClick={handleClearClick}
@@ -865,41 +887,34 @@ export function ChatArea({
           </div>
 
           {/* Messages Content */}
-          <div
-            className="py-6"
-            style={{
-              paddingBottom: '12rem'
-            }}
-          >
+          <div className="py-6" style={{ paddingBottom: "12rem" }}>
             <div className="w-full space-y-6 max-w-4xl mx-auto">
               {messages.map((message) => (
                 <React.Fragment key={message.id}>
                   <Message
                     message={message}
-                    showSenderInfo={spaceType === 'group'}
+                    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}
                     chatMode={chatMode}
                   />
 
-                  {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>
-                        <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' &&
-                    message.role === 'assistant' &&
+                  {chatMode === "quiz" &&
+                    message.id === "quiz-1" &&
+                    message.role === "assistant" &&
                     quizState.currentQuestion === 0 &&
                     !quizState.waitingForAnswer &&
                     !isAppTyping && (
@@ -919,9 +934,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>
@@ -937,9 +961,9 @@ export function ChatArea({
           <div
             className="fixed z-30 flex justify-center pointer-events-none"
             style={{
-              bottom: '120px',
-              left: leftPanelVisible ? '320px' : '0px',
-              right: '0px'
+              bottom: "120px",
+              left: leftPanelVisible ? "320px" : "0px",
+              right: "0px",
             }}
           >
             <Button
@@ -958,8 +982,8 @@ export function ChatArea({
         <div
           className="fixed bottom-0 bg-background/95 backdrop-blur-sm z-10"
           style={{
-            left: leftPanelVisible ? '320px' : '0px',
-            right: '0px'
+            left: leftPanelVisible ? "320px" : "0px",
+            right: "0px",
           }}
         >
           <div className="max-w-4xl mx-auto px-4 py-4">
@@ -968,7 +992,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 =>
+                  const isImage = ["jpg", "jpeg", "png", "gif", "webp"].some((ext) =>
                     uploadedFile.file.name.toLowerCase().endsWith(`.${ext}`)
                   );
 
@@ -1000,12 +1024,12 @@ export function ChatArea({
               onDragOver={handleDragOver}
               onDragLeave={handleDragLeave}
               onDrop={handleDrop}
-              className={isDragging ? 'opacity-75' : ''}
+              className={isDragging ? "opacity-75" : ""}
             >
               <div className="relative">
-                {/* Mode Selector and Upload Button */}
+                {/* Mode Selector + Upload */}
                 <div className="absolute bottom-3 left-2 flex items-center gap-1 z-10">
-                  {chatMode === 'ask' && (
+                  {chatMode === "ask" && (
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
                         <Button
@@ -1022,37 +1046,62 @@ 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>
+                            <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>
                           </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>
                           </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>
@@ -1066,7 +1115,7 @@ export function ChatArea({
                     type="button"
                     size="icon"
                     variant="ghost"
-                    disabled={!isLoggedIn || (chatMode === 'quiz' && !quizState.waitingForAnswer)}
+                    disabled={!isLoggedIn || (chatMode === "quiz" && !quizState.waitingForAnswer)}
                     className="h-8 w-8 hover:bg-muted/50"
                     onClick={() => fileInputRef.current?.click()}
                     title="Upload files"
@@ -1082,29 +1131,26 @@ export function ChatArea({
                   placeholder={
                     !isLoggedIn
                       ? "Please log in on the right to start chatting..."
-                      : chatMode === 'quiz'
-                        ? quizState.waitingForAnswer
-                          ? "Type your answer here..."
-                          : quizState.currentQuestion > 0
-                            ? "Click 'Next Question' to continue..."
-                            : "Click 'Start Quiz' to begin..."
-                        : spaceType === 'group'
-                          ? "Type a message or drag files here... (mention @Clare to get AI assistance)"
-                          : learningMode === 'general'
-                            ? "Ask me anything! Please provide context about your question..."
-                            : "Ask Clare anything about the course or drag files here..."
+                      : chatMode === "quiz"
+                      ? quizState.waitingForAnswer
+                        ? "Type your answer here..."
+                        : quizState.currentQuestion > 0
+                        ? "Click 'Next Question' to continue..."
+                        : "Click 'Start Quiz' to begin..."
+                      : spaceType === "group"
+                      ? "Type a message or drag files here... (mention @Clare to get AI assistance)"
+                      : learningMode === "general"
+                      ? "Ask me anything! Please provide context about your question..."
+                      : "Ask Clare anything about the course or drag files here..."
                   }
-                  disabled={!isLoggedIn || (chatMode === 'quiz' && !quizState.waitingForAnswer)}
-                  className={`min-h-[80px] pl-4 pr-20 resize-none bg-background border-2 ${isDragging ? 'border-primary border-dashed' : 'border-border'}`}
+                  disabled={!isLoggedIn || (chatMode === "quiz" && !quizState.waitingForAnswer)}
+                  className={`min-h-[80px] pl-4 pr-20 resize-none bg-background border-2 ${
+                    isDragging ? "border-primary border-dashed" : "border-border"
+                  }`}
                 />
 
                 <div className="absolute bottom-2 right-2 flex gap-1">
-                  <Button
-                    type="submit"
-                    size="icon"
-                    disabled={!input.trim() || !isLoggedIn}
-                    className="h-8 w-8 rounded-full"
-                  >
+                  <Button type="submit" size="icon" disabled={!input.trim() || !isLoggedIn} className="h-8 w-8 rounded-full">
                     <Send className="h-4 w-4" />
                   </Button>
                 </div>
@@ -1132,6 +1178,7 @@ export function ChatArea({
             <AlertDialogDescription>
               Would you like to save the current chat before starting a new conversation?
             </AlertDialogDescription>
+
             <Button
               variant="ghost"
               size="icon"
@@ -1142,6 +1189,7 @@ export function ChatArea({
               <span className="sr-only">Close</span>
             </Button>
           </AlertDialogHeader>
+
           <AlertDialogFooter className="flex-col sm:flex-row gap-2 sm:justify-end">
             <Button variant="outline" onClick={() => onConfirmClear(false)} className="sm:flex-1 sm:max-w-[200px]">
               Start New (Don't Save)
@@ -1164,9 +1212,10 @@ export function ChatArea({
           <Tabs
             value={downloadTab}
             onValueChange={(value) => {
-              setDownloadTab(value as 'chat' | 'summary');
-              setDownloadPreview(value === 'chat' ? buildPreviewContent() : buildSummaryContent());
-              if (value === 'summary') setDownloadOptions({ chat: false, summary: true });
+              const v = value as "chat" | "summary";
+              setDownloadTab(v);
+              setDownloadPreview(v === "chat" ? buildPreviewContent() : buildSummaryContent());
+              if (v === "summary") setDownloadOptions({ chat: false, summary: true });
               else setDownloadOptions({ chat: true, summary: false });
             }}
             className="w-full"
@@ -1180,7 +1229,13 @@ export function ChatArea({
           <div className="border rounded-lg bg-muted/40 flex flex-col max-h-64">
             <div className="flex items-center justify-between p-4 sticky top-0 bg-muted/40 border-b z-10">
               <span className="text-sm font-medium">Preview</span>
-              <Button variant="outline" size="sm" className="h-7 px-2 text-xs gap-1.5" onClick={handleCopyPreview} title="Copy preview">
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 px-2 text-xs gap-1.5"
+                onClick={handleCopyPreview}
+                title="Copy preview"
+              >
                 <Copy className="h-3 w-3" />
                 Copy
               </Button>
@@ -1197,7 +1252,9 @@ export function ChatArea({
                 checked={downloadOptions.chat}
                 onCheckedChange={(checked) => setDownloadOptions({ ...downloadOptions, chat: checked === true })}
               />
-              <label htmlFor="download-chat" className="text-sm font-medium cursor-pointer">Download chat</label>
+              <label htmlFor="download-chat" className="text-sm font-medium cursor-pointer">
+                Download chat
+              </label>
             </div>
             <div className="flex items-center space-x-2">
               <Checkbox
@@ -1205,12 +1262,16 @@ export function ChatArea({
                 checked={downloadOptions.summary}
                 onCheckedChange={(checked) => setDownloadOptions({ ...downloadOptions, summary: checked === true })}
               />
-              <label htmlFor="download-summary" className="text-sm font-medium cursor-pointer">Download summary</label>
+              <label htmlFor="download-summary" className="text-sm font-medium cursor-pointer">
+                Download summary
+              </label>
             </div>
           </div>
 
           <DialogFooter>
-            <Button variant="outline" onClick={() => setShowDownloadDialog(false)}>Cancel</Button>
+            <Button variant="outline" onClick={() => setShowDownloadDialog(false)}>
+              Cancel
+            </Button>
             <Button onClick={handleDownloadFile}>Download</Button>
           </DialogFooter>
         </DialogContent>
@@ -1228,10 +1289,13 @@ export function ChatArea({
               <Label>Copy Link</Label>
               <div className="flex gap-2 items-center">
                 <Input value={shareLink} readOnly className="flex-1" />
-                <Button variant="secondary" onClick={handleCopyShareLink}>Copy</Button>
+                <Button variant="secondary" onClick={handleCopyShareLink}>
+                  Copy
+                </Button>
               </div>
               <p className="text-xs text-muted-foreground">Temporary link valid for this session.</p>
             </div>
+
             <div className="space-y-2">
               <Label>Send to Workspace</Label>
               <Select value={targetWorkspaceId} onValueChange={setTargetWorkspaceId}>
@@ -1239,13 +1303,19 @@ export function ChatArea({
                   <SelectValue placeholder="Choose a workspace" />
                 </SelectTrigger>
                 <SelectContent>
-                  {workspaces.map(w => (
-                    <SelectItem key={w.id} value={w.id}>{w.name}</SelectItem>
+                  {workspaces.map((w) => (
+                    <SelectItem key={w.id} value={w.id}>
+                      {w.name}
+                    </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
-              <p className="text-xs text-muted-foreground">Sends this conversation to the selected workspace's Saved Files.</p>
-              <Button onClick={handleShareSendToWorkspace} className="w-full">Send</Button>
+              <p className="text-xs text-muted-foreground">
+                Sends this conversation to the selected workspace&apos;s Saved Files.
+              </p>
+              <Button onClick={handleShareSendToWorkspace} className="w-full">
+                Send
+              </Button>
             </div>
           </div>
         </DialogContent>
@@ -1257,7 +1327,9 @@ export function ChatArea({
           <AlertDialogHeader>
             <AlertDialogTitle>Delete File</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to delete "{fileToDelete !== null ? uploadedFiles[fileToDelete]?.file.name : ''}"? 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>
@@ -1284,21 +1356,19 @@ export function ChatArea({
             <DialogTitle
               className="pr-8 break-words break-all overflow-wrap-anywhere leading-relaxed"
               style={{
-                wordBreak: 'break-all',
-                overflowWrap: 'anywhere',
-                maxWidth: '100%',
-                lineHeight: '1.6'
+                wordBreak: "break-all",
+                overflowWrap: "anywhere",
+                maxWidth: "100%",
+                lineHeight: "1.6",
               }}
             >
               {selectedFile?.file.name}
             </DialogTitle>
             <DialogDescription>
-              File size: {selectedFile ? formatFileSize(selectedFile.file.size) : ''}
+              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>
 
@@ -1310,6 +1380,7 @@ export function ChatArea({
               <DialogTitle>Select File Types</DialogTitle>
               <DialogDescription>Please select the type for each file you are uploading.</DialogDescription>
             </DialogHeader>
+
             <div className="space-y-3 max-h-64 overflow-y-auto">
               {pendingFiles.map((pendingFile, index) => {
                 const Icon = getFileIcon(pendingFile.file.name);
@@ -1322,6 +1393,7 @@ export function ChatArea({
                         <p className="text-xs text-muted-foreground">{formatFileSize(pendingFile.file.size)}</p>
                       </div>
                     </div>
+
                     <div className="space-y-1">
                       <label className="text-xs text-muted-foreground">File Type</label>
                       <Select
@@ -1343,8 +1415,11 @@ export function ChatArea({
                 );
               })}
             </div>
+
             <DialogFooter>
-              <Button variant="outline" onClick={handleCancelUpload}>Cancel</Button>
+              <Button variant="outline" onClick={handleCancelUpload}>
+                Cancel
+              </Button>
               <Button onClick={handleConfirmUpload}>Upload</Button>
             </DialogFooter>
           </DialogContent>