Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -1,11 +1,26 @@
+// 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 { Send, ArrowDown, AlertCircle, Trash2, Share2, Upload, X, File, FileText, Presentation, Image as ImageIcon, Bookmark, Plus, Download, Copy } from 'lucide-react';
+import {
+  Send,
+  ArrowDown,
+  Trash2,
+  Share2,
+  Upload,
+  X,
+  File,
+  FileText,
+  Presentation,
+  Image as ImageIcon,
+  Bookmark,
+  Plus,
+  Download,
+  Copy
+} from 'lucide-react';
 import { Message } from './Message';
-import { Alert, AlertDescription } from './ui/alert';
 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';
@@ -17,7 +32,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from './ui/dropdown-menu';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogOverlay } from './ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
 import { Checkbox } from './ui/checkbox';
 import {
   AlertDialog,
@@ -110,7 +125,6 @@ export function ChatArea({
   showReviewBanner = false,
 }: ChatAreaProps) {
   const [input, setInput] = useState('');
-  const [isTyping, setIsTyping] = useState(false);
   const [showScrollButton, setShowScrollButton] = useState(false);
   const [showTopBorder, setShowTopBorder] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
@@ -118,7 +132,7 @@ export function ChatArea({
   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 [selectedFile, setSelectedFile] = useState<{ file: File; index: number } | null>(null);
   const [showFileViewer, setShowFileViewer] = useState(false);
   const [showDownloadDialog, setShowDownloadDialog] = useState(false);
   const [downloadPreview, setDownloadPreview] = useState('');
@@ -135,6 +149,7 @@ export function ChatArea({
     { 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);
@@ -185,22 +200,26 @@ export function ChatArea({
     }
   }, [messages]);
 
-  // Use native event listeners to prevent scroll propagation to left panel
+  // ✅ Prevent scroll chaining to left panel / outer containers
   useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
+    const el = scrollContainerRef.current;
+    if (!el) return;
 
-    const handleWheel = (e: WheelEvent) => {
-      // Always stop propagation to prevent scrolling left panel
+    const onWheel = (e: WheelEvent) => {
+      // Always stop bubbling so left panel won't react
       e.stopPropagation();
-      e.stopImmediatePropagation();
-    };
 
-    container.addEventListener('wheel', handleWheel, { passive: false, capture: true });
-    
-    return () => {
-      container.removeEventListener('wheel', handleWheel, { capture: true });
+      // Only preventDefault at boundaries to stop scroll chaining
+      const atTop = el.scrollTop <= 0;
+      const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+
+      if ((atTop && e.deltaY < 0) || (atBottom && e.deltaY > 0)) {
+        e.preventDefault();
+      }
     };
+
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
   }, []);
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -209,7 +228,6 @@ export function ChatArea({
 
     onSendMessage(input);
     setInput('');
-    // All modes now use isAppTyping from App.tsx, so we don't set local isTyping
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -230,41 +248,32 @@ export function ChatArea({
 
   // Handle review topic button click
   const handleReviewTopic = (item: { title: string; previousQuestion: string; memoryRetention: number; schedule: string; status: string; weight: number; lastReviewed: string }) => {
-    // Send a user message with review request and data
-    // Format: User-friendly message + hidden data for parsing
     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}`;
-    // Store review data temporarily to pass to App.tsx
     (window as any).__lastReviewData = reviewData;
     onSendMessage(userMessage);
   };
 
   // Handle review all button click
   const handleReviewAll = () => {
-    // Send a user message requesting review all
     (window as any).__lastReviewData = 'REVIEW_ALL';
     onSendMessage('Please help me review all topics that need attention.');
   };
 
   const handleClearClick = () => {
-    // Check if current chat is a saved/previewed chat
     const isSavedChat = isCurrentChatSaved();
-    
-    // If viewing a saved chat, clear directly without dialog
+
     if (isSavedChat) {
-      // Directly clear without showing dialog
       onConfirmClear(false);
       return;
     }
-    
-    // Check if there are user messages (not just welcome message)
+
     const hasUserMessages = messages.some(msg => msg.role === 'user');
     if (!hasUserMessages) {
-      // No user messages, just clear without showing dialog
       onClearConversation();
       return;
     }
-    // User messages exist, show dialog to save or discard
+
     onClearConversation();
   };
 
@@ -277,23 +286,21 @@ export function ChatArea({
 
   const buildSummaryContent = () => {
     if (!messages.length) return 'No messages to summarize.';
-    
-    // Simple summary: count messages and list main topics
+
     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`;
     summary += `- User Messages: ${userMessages.length}\n`;
     summary += `- Assistant Responses: ${assistantMessages.length}\n\n`;
-    
+
     summary += `Key Points:\n`;
-    // Extract first 3 user messages as key points
     userMessages.slice(0, 3).forEach((msg, idx) => {
       const preview = msg.content.substring(0, 80);
       summary += `${idx + 1}. ${preview}${msg.content.length > 80 ? '...' : ''}\n`;
     });
-    
+
     return summary;
   };
 
@@ -316,49 +323,42 @@ export function ChatArea({
   const handleDownloadFile = async () => {
     try {
       let contentToPdf = '';
-      
-      // Build content based on selected options
+
       if (downloadOptions.chat) {
         contentToPdf += buildPreviewContent();
       }
-      
+
       if (downloadOptions.summary) {
         if (downloadOptions.chat) {
           contentToPdf += '\n\n================\n\n';
         }
         contentToPdf += buildSummaryContent();
       }
-      
+
       if (!contentToPdf.trim()) {
         toast.error('Please select at least one option');
         return;
       }
-      
-      // Create PDF
+
       const pdf = new jsPDF({
         orientation: 'portrait',
         unit: 'mm',
         format: 'a4'
       });
-      
-      // Set font
+
       pdf.setFontSize(11);
-      
-      // Add title
       pdf.setFontSize(14);
       pdf.text('Chat Export', 10, 10);
       pdf.setFontSize(11);
-      
-      // Split content into lines and add to PDF
+
       const pageHeight = pdf.internal.pageSize.getHeight();
       const margin = 10;
-      const maxWidth = 190; // A4 width minus margins
+      const maxWidth = 190;
       const lineHeight = 5;
       let yPosition = 20;
-      
-      // Split text into lines that fit in the page
+
       const lines = pdf.splitTextToSize(contentToPdf, maxWidth);
-      
+
       lines.forEach((line: string) => {
         if (yPosition > pageHeight - margin) {
           pdf.addPage();
@@ -367,8 +367,7 @@ export function ChatArea({
         pdf.text(line, margin, yPosition);
         yPosition += lineHeight;
       });
-      
-      // Save PDF
+
       pdf.save('chat-export.pdf');
       setShowDownloadDialog(false);
       toast.success('PDF downloaded successfully');
@@ -381,13 +380,11 @@ export function ChatArea({
   // Check if current chat is already saved
   const isCurrentChatSaved = (): boolean => {
     if (messages.length <= 1) return false;
-    
-    // Find a saved chat that matches the current messages and chatMode
+
     return savedChats.some(chat => {
       if (chat.chatMode !== chatMode) return false;
       if (chat.messages.length !== messages.length) return false;
-      
-      // Check if all messages match
+
       return chat.messages.every((savedMsg, index) => {
         const currentMsg = messages[index];
         return (
@@ -404,7 +401,7 @@ export function ChatArea({
       toast.info('No conversation to save');
       return;
     }
-    
+
     onSaveChat();
   };
 
@@ -413,12 +410,10 @@ export function ChatArea({
       toast.info('No conversation to share');
       return;
     }
-    // Create a temporary share link for this session
     const conversationText = buildPreviewContent();
     const blob = new Blob([conversationText], { type: 'text/plain' });
     const url = URL.createObjectURL(blob);
     setShareLink(url);
-    // Default to current workspace
     setTargetWorkspaceId(currentWorkspaceId);
     setShowShareDialog(true);
   };
@@ -469,7 +464,7 @@ 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((allowedExt) => 
+      return ['.pdf', '.docx', '.pptx', '.jpg', '.jpeg', '.png', '.gif', '.webp', '.doc', '.ppt'].some((allowedExt) =>
         ext.endsWith(allowedExt)
       );
     });
@@ -487,7 +482,7 @@ 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) => 
+        return ['.pdf', '.docx', '.pptx', '.jpg', '.jpeg', '.png', '.gif', '.webp', '.doc', '.ppt'].some((allowedExt) =>
           ext.endsWith(allowedExt)
         );
       });
@@ -503,7 +498,6 @@ export function ChatArea({
 
   const handleConfirmUpload = () => {
     onFileUpload(pendingFiles.map(pf => pf.file));
-    // Update the parent's file types
     const startIndex = uploadedFiles.length;
     pendingFiles.forEach((pf, idx) => {
       setTimeout(() => {
@@ -521,9 +515,7 @@ export function ChatArea({
   };
 
   const handlePendingFileTypeChange = (index: number, type: FileType) => {
-    setPendingFiles(prev => prev.map((pf, i) => 
-      i === index ? { ...pf, type } : pf
-    ));
+    setPendingFiles(prev => prev.map((pf, i) => (i === index ? { ...pf, type } : pf)));
   };
 
   const getFileIcon = (filename: string) => {
@@ -537,18 +529,10 @@ export function ChatArea({
 
   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' };
-    }
+    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' };
   };
 
@@ -558,25 +542,24 @@ export function ChatArea({
     return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
   };
 
-  // File Thumbnail Component - ChatGPT style
-  const FileThumbnail = ({ 
-    file, 
-    Icon, 
-    fileInfo, 
-    isImage, 
-    onPreview, 
-    onRemove 
-  }: { 
-    file: File; 
-    Icon: React.ComponentType<{ className?: string }>; 
-    fileInfo: { bgColor: string; type: string }; 
-    isImage: boolean; 
-    onPreview: () => void; 
+  const FileThumbnail = ({
+    file,
+    Icon,
+    fileInfo,
+    isImage,
+    onPreview,
+    onRemove
+  }: {
+    file: File;
+    Icon: React.ComponentType<{ className?: string }>;
+    fileInfo: { bgColor: string; type: string };
+    isImage: boolean;
+    onPreview: () => void;
     onRemove: (e: React.MouseEvent) => void;
   }) => {
     const [imagePreview, setImagePreview] = useState<string | null>(null);
     const [imageLoading, setImageLoading] = useState(true);
-    
+
     useEffect(() => {
       if (isImage) {
         setImageLoading(true);
@@ -594,9 +577,7 @@ export function ChatArea({
         setImageLoading(false);
       }
     }, [file, isImage]);
-    
-    // All files have consistent height: h-16 (64px)
-    // Image files: square card (w-16 h-16), no filename
+
     if (isImage) {
       return (
         <div
@@ -604,7 +585,6 @@ export function ChatArea({
           onClick={onPreview}
           style={{ width: '64px', height: '64px', flexShrink: 0 }}
         >
-          {/* Square image thumbnail card - ChatGPT style, same height as other files */}
           <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 ? (
@@ -612,8 +592,8 @@ export function ChatArea({
                   <Icon className="h-5 w-5 text-muted-foreground animate-pulse" />
                 </div>
               ) : imagePreview ? (
-                <img 
-                  src={imagePreview} 
+                <img
+                  src={imagePreview}
                   alt={file.name}
                   className="w-full h-full object-cover"
                   onError={(e) => {
@@ -627,7 +607,6 @@ export function ChatArea({
                 </div>
               )}
             </div>
-            {/* Remove button - top right corner inside card, always visible - ChatGPT style */}
             <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"
@@ -637,9 +616,9 @@ export function ChatArea({
               }}
               style={{ zIndex: 100, position: 'absolute', top: '4px', right: '4px' }}
             >
-              <X 
-                className="h-2.5 w-2.5" 
-                style={{ 
+              <X
+                className="h-2.5 w-2.5"
+                style={{
                   color: 'rgb(0, 0, 0)',
                   strokeWidth: 2
                 }}
@@ -649,23 +628,18 @@ export function ChatArea({
         </div>
       );
     }
-    
-    // Other files: horizontal rectangle with icon, filename and type (same height as images, fixed width)
+
     return (
       <div
         className="relative cursor-pointer"
         onClick={onPreview}
         style={{ width: '240px', flexShrink: 0 }}
       >
-        {/* Horizontal file card - ChatGPT style, same height as images, fixed width */}
         <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">
-          {/* File icon with colored background */}
           <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>
-          {/* Spacing between icon and filename - one character width */}
           <div className="w-2 shrink-0" />
-          {/* File name and type */}
           <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}
@@ -674,7 +648,6 @@ export function ChatArea({
               {fileInfo.type}
             </p>
           </div>
-          {/* Remove button - top right corner inside card, always visible - ChatGPT style */}
           <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"
@@ -684,9 +657,9 @@ export function ChatArea({
             }}
             style={{ position: 'absolute', top: '4px', right: '4px', zIndex: 10 }}
           >
-            <X 
-              className="h-2.5 w-2.5" 
-              style={{ 
+            <X
+              className="h-2.5 w-2.5"
+              style={{
                 color: 'rgb(0, 0, 0)',
                 strokeWidth: 2
               }}
@@ -697,7 +670,6 @@ export function ChatArea({
     );
   };
 
-  // File Viewer Content Component
   const FileViewerContent = ({ file }: { file: File }) => {
     const [content, setContent] = useState<string>('');
     const [loading, setLoading] = useState(true);
@@ -708,11 +680,10 @@ export function ChatArea({
         try {
           setLoading(true);
           setError(null);
-          
+
           const ext = file.name.toLowerCase();
-          
+
           if (['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(e => ext.endsWith(e))) {
-            // Image file
             const reader = new FileReader();
             reader.onload = (e) => {
               setContent(e.target?.result as string);
@@ -724,11 +695,9 @@ export function ChatArea({
             };
             reader.readAsDataURL(file);
           } else if (ext.endsWith('.pdf')) {
-            // PDF file - show info
             setContent('PDF files cannot be previewed directly. Please download the file to view it.');
             setLoading(false);
           } else {
-            // Text-based files
             const reader = new FileReader();
             reader.onload = (e) => {
               setContent(e.target?.result as string);
@@ -749,13 +718,8 @@ export function ChatArea({
       loadFile();
     }, [file]);
 
-    if (loading) {
-      return <div className="text-center py-8">Loading...</div>;
-    }
-
-    if (error) {
-      return <div className="text-center py-8 text-destructive">{error}</div>;
-    }
+    if (loading) return <div className="text-center py-8">Loading...</div>;
+    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));
@@ -775,237 +739,205 @@ export function ChatArea({
     );
   };
 
-  const getFileTypeLabel = (type: FileType) => {
-    const labels: Record<FileType, string> = {
-      'syllabus': 'Syllabus',
-      'lecture-slides': 'Lecture Slides / PPT',
-      'literature-review': 'Literature Review / Paper',
-      'other': 'Other Course Document',
-    };
-    return labels[type];
-  };
-
   return (
     <div className="flex flex-col h-full min-h-0 overflow-hidden" style={{ overscrollBehavior: 'none' }}>
-      {/* Chat Area with Floating Input */}
       <div className="flex-1 relative min-h-0 flex flex-col overflow-hidden" style={{ overscrollBehavior: 'none' }}>
-        {/* Messages Area */}
-        <div 
+        {/* ✅ Messages Area is the ONLY scroll container */}
+        <div
           ref={scrollContainerRef}
-          className="flex-1 overflow-y-auto"
-          style={{ 
-            overscrollBehavior: 'none',
+          className="flex-1 min-h-0 overflow-y-auto"
+          style={{
+            overscrollBehavior: 'contain',
           }}
         >
-          {/* Top Bar - Course Selector, Chat Mode Tabs, and Action Buttons - Sticky at top */}
-          <div 
-            className={`sticky top-0 flex items-center justify-between px-4 z-20 bg-card ${
-              showTopBorder ? 'border-b border-border' : ''
-            }`}
-            style={{ 
+          {/* 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',
             }}
           >
-          {/* 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) {
-                  // Show fixed course label, not selectable
-                  return (
-                    <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">
-                      {current.courseName}
-                    </div>
-                  );
+            {/* 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) {
+                    return (
+                      <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">
+                        {current.courseName}
+                      </div>
+                    );
+                  }
+                  return null;
                 }
-                // Personal interest: hide selector
-                return null;
-              }
-              // Individual workspace: show selectable courses
-              return (
-                <Select value={currentCourseId || 'course1'} onValueChange={(val) => onCourseChange && onCourseChange(val)}>
-                  <SelectTrigger className="w-[200px] h-9 font-semibold">
-                    <SelectValue placeholder="Select course" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {courses.map((course) => (
-                      <SelectItem key={course.id} value={course.id}>
-                        {course.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              );
-            })()}
-          </div>
+                return (
+                  <Select value={currentCourseId || 'course1'} onValueChange={(val) => onCourseChange && onCourseChange(val)}>
+                    <SelectTrigger className="w-[200px] h-9 font-semibold">
+                      <SelectValue placeholder="Select course" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {courses.map((course) => (
+                        <SelectItem key={course.id} value={course.id}>
+                          {course.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                );
+              })()}
+            </div>
 
-          {/* Chat Mode Tabs - Center (aligned with panel toggle button) */}
-          <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">
-                <TabsTrigger value="ask" className="w-[140px] px-3 text-sm">Ask</TabsTrigger>
-                <TabsTrigger value="review" className="w-[140px] px-3 text-sm relative">
-                  Review
-                  {/* Red dot badge in top-right corner */}
-                  <span 
-                    className="absolute top-0 right-0 bg-red-500 rounded-full border-2"
-                    style={{ 
-                      width: '10px',
-                      height: '10px',
-                      transform: 'translate(25%, -25%)',
-                      zIndex: 10,
-                      borderColor: 'var(--muted)'
-                    }}
-                  />
-                </TabsTrigger>
-                <TabsTrigger value="quiz" className="w-[140px] px-3 text-sm">Quiz</TabsTrigger>
-              </TabsList>
-            </Tabs>
-          </div>
+            {/* 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"
+              >
+                <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="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%)',
+                        zIndex: 10,
+                        borderColor: 'var(--muted)'
+                      }}
+                    />
+                  </TabsTrigger>
+                  <TabsTrigger value="quiz" className="w-[140px] px-3 text-sm">Quiz</TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </div>
 
-          {/* Action Buttons - Right */}
-          <div className="flex items-center gap-2 flex-shrink-0">
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={handleSaveClick}
-              disabled={!isLoggedIn}
-              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' : ''}`}
-              />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={handleOpenDownloadDialog}
-              disabled={!isLoggedIn}
-              className="h-8 w-8 rounded-md hover:bg-muted/50"
-              title="Download"
-            >
-              <Download className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={handleShareClick}
-              disabled={!isLoggedIn}
-              className="h-8 w-8 rounded-md hover:bg-muted/50"
-              title="Share"
-            >
-              <Share2 className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="outline"
-              onClick={handleClearClick}
-              disabled={!isLoggedIn}
-              className="h-8 px-3 gap-2 rounded-md border border-border disabled:opacity-60 !bg-[var(--card)] !text-[var(--card-foreground)] hover:!opacity-90 [&_svg]:!text-[var(--card-foreground)] [&_span]:!text-[var(--card-foreground)]"
-              title="New Chat"
-            >
-              <Plus className="h-4 w-4" />
-              <span className="text-sm font-medium">New chat</span>
-            </Button>
+            {/* Action Buttons - Right */}
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleSaveClick}
+                disabled={!isLoggedIn}
+                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' : ''}`} />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleOpenDownloadDialog}
+                disabled={!isLoggedIn}
+                className="h-8 w-8 rounded-md hover:bg-muted/50"
+                title="Download"
+              >
+                <Download className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleShareClick}
+                disabled={!isLoggedIn}
+                className="h-8 w-8 rounded-md hover:bg-muted/50"
+                title="Share"
+              >
+                <Share2 className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                onClick={handleClearClick}
+                disabled={!isLoggedIn}
+                className="h-8 px-3 gap-2 rounded-md border border-border disabled:opacity-60 !bg-[var(--card)] !text-[var(--card-foreground)] hover:!opacity-90 [&_svg]:!text-[var(--card-foreground)] [&_span]:!text-[var(--card-foreground)]"
+                title="New Chat"
+              >
+                <Plus className="h-4 w-4" />
+                <span className="text-sm font-medium">New chat</span>
+              </Button>
+            </div>
           </div>
-        </div>
 
           {/* Messages Content */}
-          <div 
+          <div
             className="py-6"
-            style={{ 
-              paddingBottom: '12rem' // Ensure enough space for input box and action buttons
+            style={{
+              paddingBottom: '12rem'
             }}
           >
-          <div className="w-full space-y-6 max-w-4xl mx-auto">
-            {messages.map((message, index) => (
-              <React.Fragment key={message.id}>
-                <Message 
-                  message={message} 
-                  showSenderInfo={spaceType === 'group'}
-                  isFirstGreeting={
-                    (message.id === '1' || message.id === 'review-1' || message.id === 'quiz-1') && 
-                    message.role === 'assistant'
-                  }
-                  showNextButton={message.showNextButton && !isAppTyping}
-                  onNextQuestion={onNextQuestion}
-                  chatMode={chatMode}
-                />
-                {/* Smart Review - Show below welcome message in Review mode */}
-                {chatMode === 'review' && 
-                 message.id === 'review-1' &&
-                 message.role === 'assistant' && (
-                  <div className="flex gap-2 justify-start px-4">
-                    {/* Avatar placeholder to align with message bubble */}
-                    <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>
-                  </div>
-                )}
-                {/* Quiz Mode Start Button - Below welcome message */}
-                {chatMode === 'quiz' && 
-                 message.id === 'quiz-1' &&
-                 message.role === 'assistant' &&
-                 quizState.currentQuestion === 0 && 
-                 !quizState.waitingForAnswer && 
-                 !isAppTyping && (
-                  <div className="flex justify-center py-4">
-                    <Button 
-                      onClick={onStartQuiz}
-                      className="bg-red-500 hover:bg-red-600 text-white"
-                    >
-                      Start Quiz
-                    </Button>
+            <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'}
+                    isFirstGreeting={
+                      (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>
+                      </div>
+                    )}
+
+                  {chatMode === 'quiz' &&
+                    message.id === 'quiz-1' &&
+                    message.role === 'assistant' &&
+                    quizState.currentQuestion === 0 &&
+                    !quizState.waitingForAnswer &&
+                    !isAppTyping && (
+                      <div className="flex justify-center py-4">
+                        <Button onClick={onStartQuiz} className="bg-red-500 hover:bg-red-600 text-white">
+                          Start Quiz
+                        </Button>
+                      </div>
+                    )}
+                </React.Fragment>
+              ))}
+
+              {isAppTyping && (
+                <div className="flex gap-2 justify-start px-4">
+                  <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
+                    <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                   </div>
-                )}
-              </React.Fragment>
-            ))}
-            
-            {/* Show typing indicator - use isAppTyping for all modes to ensure consistent display */}
-            {isAppTyping && (
-              <div className="flex gap-2 justify-start px-4">
-                <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
-                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
-                </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="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>
                   </div>
                 </div>
-              </div>
-            )}
-            
-            <div ref={messagesEndRef} />
+              )}
+
+              <div ref={messagesEndRef} />
+            </div>
           </div>
         </div>
-      </div>
 
-        {/* Scroll to Bottom Button - Above input box */}
+        {/* Scroll to Bottom Button */}
         {showScrollButton && (
-          <div 
+          <div
             className="fixed z-30 flex justify-center pointer-events-none"
-            style={{ 
-              bottom: '120px', // Position 20px above input box (input box height ~100px)
+            style={{
+              bottom: '120px',
               left: leftPanelVisible ? '320px' : '0px',
               right: '0px'
             }}
@@ -1022,25 +954,24 @@ export function ChatArea({
           </div>
         )}
 
-        {/* Floating Input Area - Fixed at viewport bottom, horizontally centered in chat area */}
-        <div 
+        {/* Floating Input Area */}
+        <div
           className="fixed bottom-0 bg-background/95 backdrop-blur-sm z-10"
-          style={{ 
+          style={{
             left: leftPanelVisible ? '320px' : '0px',
             right: '0px'
           }}
         >
           <div className="max-w-4xl mx-auto px-4 py-4">
-            {/* Uploaded Files Display */}
             {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 => 
+                  const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp'].some(ext =>
                     uploadedFile.file.name.toLowerCase().endsWith(`.${ext}`)
                   );
-                  
+
                   return (
                     <div key={index}>
                       <FileThumbnail
@@ -1064,7 +995,7 @@ export function ChatArea({
               </div>
             )}
 
-            <form 
+            <form
               onSubmit={handleSubmit}
               onDragOver={handleDragOver}
               onDragLeave={handleDragLeave}
@@ -1072,9 +1003,8 @@ export function ChatArea({
               className={isDragging ? 'opacity-75' : ''}
             >
               <div className="relative">
-                {/* Mode Selector and Upload Button - ChatGPT style at bottom left */}
+                {/* Mode Selector and Upload Button */}
                 <div className="absolute bottom-3 left-2 flex items-center gap-1 z-10">
-                  {/* Only show mode selector in ask mode */}
                   {chatMode === 'ask' && (
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
@@ -1086,92 +1016,52 @@ export function ChatArea({
                           type="button"
                         >
                           <span>{modeLabels[learningMode]}</span>
-                          <svg
-                            className="h-3 w-3 opacity-50"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M19 9l-7 7-7-7"
-                            />
+                          <svg className="h-3 w-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                           </svg>
                         </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>
+                            <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>
+                            <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>
+                            <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>
+                            <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>
+                            <span className="text-xs text-muted-foreground">Get concise summaries</span>
                           </div>
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
                   )}
-                  {/* Upload Button - Right of mode selector */}
+
                   <Button
                     type="button"
                     size="icon"
@@ -1184,6 +1074,7 @@ export function ChatArea({
                     <Upload className="h-4 w-4" />
                   </Button>
                 </div>
+
                 <Textarea
                   value={input}
                   onChange={(e) => setInput(e.target.value)}
@@ -1192,22 +1083,21 @@ export function ChatArea({
                     !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..."
+                        ? 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'
-                  }`}
+                  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"
@@ -1218,6 +1108,7 @@ export function ChatArea({
                     <Send className="h-4 w-4" />
                   </Button>
                 </div>
+
                 <input
                   ref={fileInputRef}
                   type="file"
@@ -1241,7 +1132,6 @@ export function ChatArea({
             <AlertDialogDescription>
               Would you like to save the current chat before starting a new conversation?
             </AlertDialogDescription>
-            {/* Close button in top-right corner */}
             <Button
               variant="ghost"
               size="icon"
@@ -1253,11 +1143,7 @@ export function ChatArea({
             </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]"
-            >
+            <Button variant="outline" onClick={() => onConfirmClear(false)} className="sm:flex-1 sm:max-w-[200px]">
               Start New (Don't Save)
             </Button>
             <AlertDialogAction onClick={() => onConfirmClear(true)} className="sm:flex-1 sm:max-w-[200px]">
@@ -1274,35 +1160,27 @@ export function ChatArea({
             <DialogTitle>Download this chat</DialogTitle>
             <DialogDescription>Preview and copy before downloading.</DialogDescription>
           </DialogHeader>
-          
-          {/* Tab Selection */}
-          <Tabs value={downloadTab} onValueChange={(value) => {
-            setDownloadTab(value as 'chat' | 'summary');
-            setDownloadPreview(value === 'chat' ? buildPreviewContent() : buildSummaryContent());
-            // Auto-check options based on selected tab
-            if (value === 'summary') {
-              setDownloadOptions({ chat: false, summary: true });
-            } else {
-              setDownloadOptions({ chat: true, summary: false });
-            }
-          }} className="w-full">
+
+          <Tabs
+            value={downloadTab}
+            onValueChange={(value) => {
+              setDownloadTab(value as 'chat' | 'summary');
+              setDownloadPreview(value === 'chat' ? buildPreviewContent() : buildSummaryContent());
+              if (value === 'summary') setDownloadOptions({ chat: false, summary: true });
+              else setDownloadOptions({ chat: true, summary: false });
+            }}
+            className="w-full"
+          >
             <TabsList className="grid w-full grid-cols-2">
               <TabsTrigger value="chat">Download chat</TabsTrigger>
               <TabsTrigger value="summary">Summary of the chat</TabsTrigger>
             </TabsList>
           </Tabs>
-          
-          {/* Preview Section */}
+
           <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>
@@ -1311,35 +1189,26 @@ export function ChatArea({
               <div className="whitespace-pre-wrap">{downloadPreview}</div>
             </div>
           </div>
-          
-          {/* Download Options Checkboxes */}
+
           <div className="space-y-3">
             <div className="flex items-center space-x-2">
               <Checkbox
                 id="download-chat"
                 checked={downloadOptions.chat}
-                onCheckedChange={(checked) => {
-                  setDownloadOptions({ ...downloadOptions, chat: checked === true });
-                }}
+                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
                 id="download-summary"
                 checked={downloadOptions.summary}
-                onCheckedChange={(checked) => {
-                  setDownloadOptions({ ...downloadOptions, summary: checked === true });
-                }}
+                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 onClick={handleDownloadFile}>Download</Button>
@@ -1412,9 +1281,9 @@ export function ChatArea({
       <Dialog open={showFileViewer} onOpenChange={setShowFileViewer}>
         <DialogContent className="max-w-4xl max-h-[85vh] flex flex-col overflow-hidden">
           <DialogHeader className="min-w-0 flex-shrink-0">
-            <DialogTitle 
+            <DialogTitle
               className="pr-8 break-words break-all overflow-wrap-anywhere leading-relaxed"
-              style={{ 
+              style={{
                 wordBreak: 'break-all',
                 overflowWrap: 'anywhere',
                 maxWidth: '100%',
@@ -1428,57 +1297,41 @@ export function ChatArea({
             </DialogDescription>
           </DialogHeader>
           <div className="flex-1 min-h-0 overflow-y-auto mt-4">
-            {selectedFile && (
-              <FileViewerContent file={selectedFile.file} />
-            )}
+            {selectedFile && <FileViewerContent file={selectedFile.file} />}
           </div>
         </DialogContent>
       </Dialog>
 
-      {/* File Type Selection Dialog - Highest z-index */}
+      {/* File Type Selection Dialog */}
       {showTypeDialog && (
         <Dialog open={showTypeDialog} onOpenChange={setShowTypeDialog}>
-          <DialogContent 
-            className="sm:max-w-[425px]" 
-            overlayClassName="!z-[99998]"
-            style={{ zIndex: 99999 }}
-          >
+          <DialogContent className="sm:max-w-[425px]" style={{ zIndex: 99999 }}>
             <DialogHeader>
               <DialogTitle>Select File Types</DialogTitle>
-              <DialogDescription>
-                Please select the type for each file you are uploading.
-              </DialogDescription>
+              <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);
                 return (
-                  <div
-                    key={index}
-                    className="p-3 bg-muted rounded-md space-y-2"
-                  >
+                  <div key={index} className="p-3 bg-muted rounded-md space-y-2">
                     <div className="flex items-center gap-2 group">
                       <Icon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                       <div className="flex-1 min-w-0">
                         <p className="text-sm truncate">{pendingFile.file.name}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {formatFileSize(pendingFile.file.size)}
-                        </p>
+                        <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 
-                        value={pendingFile.type} 
+                      <Select
+                        value={pendingFile.type}
                         onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
                       >
                         <SelectTrigger className="h-8 text-xs">
                           <SelectValue />
                         </SelectTrigger>
-                        <SelectContent 
-                          className="!z-[100000] !bg-background !text-foreground" 
-                          style={{ zIndex: 100000 }}
-                        >
+                        <SelectContent className="!z-[100000] !bg-background !text-foreground" style={{ zIndex: 100000 }}>
                           <SelectItem value="syllabus">Syllabus</SelectItem>
                           <SelectItem value="lecture-slides">Lecture Slides / PPT</SelectItem>
                           <SelectItem value="literature-review">Literature Review / Paper</SelectItem>
@@ -1491,21 +1344,12 @@ export function ChatArea({
               })}
             </div>
             <DialogFooter>
-              <Button
-                variant="outline"
-                onClick={handleCancelUpload}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={handleConfirmUpload}
-              >
-                Upload
-              </Button>
+              <Button variant="outline" onClick={handleCancelUpload}>Cancel</Button>
+              <Button onClick={handleConfirmUpload}>Upload</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>
       )}
     </div>
   );
-}
+}