Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -1,5 +1,5 @@
 // web/src/components/ChatArea.tsx
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
 import { Button } from "./ui/button";
 import { Textarea } from "./ui/textarea";
 import { Input } from "./ui/input";
@@ -33,20 +33,8 @@ import type {
 } from "../App";
 import { toast } from "sonner";
 import { jsPDF } from "jspdf";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/dialog";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog";
 import { Checkbox } from "./ui/checkbox";
 import {
   AlertDialog,
@@ -92,12 +80,7 @@ interface ChatAreaProps {
   savedChats: SavedChat[];
   workspaces: Workspace[];
   currentWorkspaceId: string;
-  onSaveFile?: (
-    content: string,
-    type: "export" | "summary",
-    format?: "pdf" | "text",
-    workspaceId?: string
-  ) => void;
+  onSaveFile?: (content: string, type: "export" | "summary", format?: "pdf" | "text", workspaceId?: string) => void;
   leftPanelVisible?: boolean;
   currentCourseId?: string;
   onCourseChange?: (courseId: string) => void;
@@ -176,23 +159,44 @@ export function ChatArea({
           { id: "course4", name: "Web Development" },
         ];
 
-  // Messages scroll container
+  // Scroll refs
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // ✅ Composer measured height (dynamic) to reserve bottom padding for messages
+  const composerRef = useRef<HTMLDivElement>(null);
+  const [composerHeight, setComposerHeight] = useState<number>(160); // safe default
+
+  useLayoutEffect(() => {
+    const el = composerRef.current;
+    if (!el) return;
+
+    const update = () => setComposerHeight(el.getBoundingClientRect().height);
+
+    update();
+
+    // ResizeObserver is ideal for textarea growth / file chips height changes
+    const ro = new ResizeObserver(() => update());
+    ro.observe(el);
+
+    return () => ro.disconnect();
+  }, []);
+
   const isInitialMount = useRef(true);
   const previousMessagesLength = useRef(messages.length);
 
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  const scrollToBottom = (behavior: ScrollBehavior = "smooth") => {
+    messagesEndRef.current?.scrollIntoView({ behavior, block: "end" });
   };
 
+  // Auto-scroll only when new messages come in (not on initial mount)
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
       previousMessagesLength.current = messages.length;
-      // Keep at top on initial load (your old behavior)
+
+      // You previously kept at top; keep that behavior
       if (scrollContainerRef.current) {
         scrollContainerRef.current.scrollTop = 0;
       }
@@ -200,31 +204,36 @@ export function ChatArea({
     }
 
     if (messages.length > previousMessagesLength.current) {
-      scrollToBottom();
+      // If user is near bottom, follow; otherwise don't steal scroll
+      const el = scrollContainerRef.current;
+      if (el) {
+        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 240;
+        if (nearBottom) scrollToBottom("smooth");
+      } else {
+        scrollToBottom("smooth");
+      }
     }
     previousMessagesLength.current = messages.length;
   }, [messages]);
 
+  // Scroll button + top border
   useEffect(() => {
-    const handleScroll = () => {
-      const el = scrollContainerRef.current;
-      if (!el) return;
+    const container = scrollContainerRef.current;
+    if (!container) return;
 
-      const { scrollTop, scrollHeight, clientHeight } = el;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
       const isAtBottom = scrollHeight - scrollTop - clientHeight < 120;
       setShowScrollButton(!isAtBottom);
       setShowTopBorder(scrollTop > 0);
     };
 
-    const container = scrollContainerRef.current;
-    if (!container) return;
-
     handleScroll();
-    container.addEventListener("scroll", handleScroll);
-    return () => container.removeEventListener("scroll", handleScroll);
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll as any);
   }, [messages]);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent | React.KeyboardEvent) => {
     e.preventDefault();
     if (!input.trim() || !isLoggedIn) return;
 
@@ -248,6 +257,7 @@ export function ChatArea({
     summary: "Quick Summary",
   };
 
+  // Review topic click
   const handleReviewTopic = (item: {
     title: string;
     previousQuestion: string;
@@ -270,9 +280,7 @@ export function ChatArea({
 
   const buildPreviewContent = () => {
     if (!messages.length) return "";
-    return messages
-      .map((msg) => `${msg.role === "user" ? "You" : "Clare"}: ${msg.content}`)
-      .join("\n\n");
+    return messages.map((msg) => `${msg.role === "user" ? "You" : "Clare"}: ${msg.content}`).join("\n\n");
   };
 
   const buildSummaryContent = () => {
@@ -359,6 +367,7 @@ export function ChatArea({
     }
   };
 
+  // Check if current chat is already saved
   const isCurrentChatSaved = (): boolean => {
     if (messages.length <= 1) return false;
 
@@ -368,11 +377,7 @@ export function ChatArea({
 
       return chat.messages.every((savedMsg, idx) => {
         const currentMsg = messages[idx];
-        return (
-          savedMsg.id === currentMsg.id &&
-          savedMsg.role === currentMsg.role &&
-          savedMsg.content === currentMsg.content
-        );
+        return savedMsg.id === currentMsg.id && savedMsg.role === currentMsg.role && savedMsg.content === currentMsg.content;
       });
     });
   };
@@ -460,8 +465,8 @@ export function ChatArea({
 
     const validFiles = files.filter((file) => {
       const ext = file.name.toLowerCase();
-      return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some(
-        (allowed) => ext.endsWith(allowed)
+      return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some((allowed) =>
+        ext.endsWith(allowed)
       );
     });
 
@@ -478,8 +483,8 @@ export function ChatArea({
     if (files.length > 0) {
       const validFiles = files.filter((file) => {
         const ext = file.name.toLowerCase();
-        return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some(
-          (allowed) => ext.endsWith(allowed)
+        return [".pdf", ".docx", ".pptx", ".jpg", ".jpeg", ".png", ".gif", ".webp", ".doc", ".ppt"].some((allowed) =>
+          ext.endsWith(allowed)
         );
       });
 
@@ -518,6 +523,7 @@ export function ChatArea({
     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;
@@ -532,8 +538,7 @@ export function ChatArea({
     if (ext.endsWith(".pdf")) return { bgColor: "bg-red-500", type: "PDF" };
     if (ext.endsWith(".docx") || ext.endsWith(".doc")) return { bgColor: "bg-blue-500", type: "Document" };
     if (ext.endsWith(".pptx") || ext.endsWith(".ppt")) return { bgColor: "bg-orange-500", type: "Presentation" };
-    if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e)))
-      return { bgColor: "bg-green-500", type: "Image" };
+    if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e))) return { bgColor: "bg-green-500", type: "Image" };
     return { bgColor: "bg-gray-500", type: "File" };
   };
 
@@ -574,19 +579,13 @@ export function ChatArea({
         setImagePreview(e.target?.result as string);
         setImageLoading(false);
       };
-      reader.onerror = () => {
-        setImageLoading(false);
-      };
+      reader.onerror = () => setImageLoading(false);
       reader.readAsDataURL(file);
     }, [file, isImage]);
 
     if (isImage) {
       return (
-        <div
-          className="relative cursor-pointer w-16 h-16 flex-shrink-0"
-          onClick={onPreview}
-          style={{ width: "64px", height: "64px", flexShrink: 0 }}
-        >
+        <div className="relative cursor-pointer w-16 h-16 flex-shrink-0" onClick={onPreview} style={{ width: 64, height: 64 }}>
           <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 ? (
@@ -617,7 +616,7 @@ export function ChatArea({
                 e.stopPropagation();
                 onRemove(e);
               }}
-              style={{ zIndex: 100, position: "absolute", top: "4px", right: "4px" }}
+              style={{ zIndex: 100 }}
             >
               <X className="h-2.5 w-2.5" style={{ color: "rgb(0, 0, 0)", strokeWidth: 2 }} />
             </button>
@@ -627,7 +626,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: 240, flexShrink: 0 }}>
         <div className="h-16 w-full relative flex items-center px-3 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors">
           <div className={`${fileInfo.bgColor} flex items-center justify-center w-10 h-10 rounded shrink-0`}>
             <Icon className="h-5 w-5 text-white" />
@@ -647,7 +646,7 @@ export function ChatArea({
               e.stopPropagation();
               onRemove(e);
             }}
-            style={{ position: "absolute", top: "4px", right: "4px", zIndex: 10 }}
+            style={{ zIndex: 10 }}
           >
             <X className="h-2.5 w-2.5" style={{ color: "rgb(0, 0, 0)", strokeWidth: 2 }} />
           </button>
@@ -729,152 +728,121 @@ export function ChatArea({
     );
   };
 
-  // now composer is fixed as sibling => no huge bottom padding needed
-  const MESSAGES_BOTTOM_PADDING = "2rem";
+  // ✅ Reserve space for composer so last message is never hidden
+  const bottomPad = Math.max(24, composerHeight + 24);
 
   return (
-    // ✅ Three-part layout: TopBar (fixed) + Messages (scroll) + Composer (fixed)
-    <div className="relative flex flex-col h-full min-h-0 overflow-hidden">
+    // ✅ This must fill parent; no outer scroll.
+    <div className="relative flex flex-col h-full min-h-0 w-full overflow-hidden">
       {/* =========================
-          1) TOP BAR (fixed)
+          1) Scroll Container (ONLY this scrolls)
          ========================= */}
-      <div
-        className={`flex-shrink-0 flex items-center justify-between px-4 bg-card ${
-          showTopBorder ? "border-b border-border" : "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) {
-                return (
-                  <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">
-                    {current.courseName}
-                  </div>
-                );
+      <div ref={scrollContainerRef} className="flex-1 min-h-0 overflow-y-auto" style={{ overscrollBehavior: "contain" }}>
+        {/* Top Bar - Sticky inside scroll container */}
+        <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) {
+                  return <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">{current.courseName}</div>;
+                }
+                return null;
               }
-              return null;
-            }
 
-            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 */}
-        <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>
+          {/* 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: 10,
+                      height: 10,
+                      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>
+          {/* 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={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="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>
+            <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>
 
-      {/* =========================
-          2) MESSAGES (ONLY this area scrolls)
-         ========================= */}
-      <div
-        ref={scrollContainerRef}
-        className="flex-1 min-h-0 overflow-y-auto"
-        style={{ overscrollBehavior: "contain" }}
-      >
-        <div className="py-6" style={{ paddingBottom: MESSAGES_BOTTOM_PADDING }}>
+        {/* Messages */}
+        <div className="py-6" style={{ paddingBottom: bottomPad }}>
           <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"
-                  }
+                  isFirstGreeting={(message.id === "1" || message.id === "review-1" || message.id === "quiz-1") && message.role === "assistant"}
                   showNextButton={message.showNextButton && !isAppTyping}
                   onNextQuestion={onNextQuestion}
                   chatMode={chatMode}
@@ -925,15 +893,15 @@ export function ChatArea({
       </div>
 
       {/* =========================
-          2.5) Scroll-to-bottom button (fixed)
+          2) Scroll-to-bottom button (fixed relative to ChatArea)
          ========================= */}
       {showScrollButton && (
-        <div className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none" style={{ bottom: "132px" }}>
+        <div className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none" style={{ bottom: composerHeight + 16 }}>
           <Button
             variant="secondary"
             size="icon"
             className="rounded-full shadow-lg hover:shadow-xl transition-shadow bg-background border border-border pointer-events-auto w-10 h-10"
-            onClick={scrollToBottom}
+            onClick={() => scrollToBottom("smooth")}
             title="Scroll to bottom"
           >
             <ArrowDown className="h-5 w-5" />
@@ -942,18 +910,16 @@ export function ChatArea({
       )}
 
       {/* =========================
-          3) COMPOSER (fixed bottom, never scroll)
+          3) Composer (NOT sticky; it is the bottom flex item, so it never moves)
          ========================= */}
-      <div className="flex-shrink-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border">
+      <div ref={composerRef} className="flex-shrink-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border">
         <div className="max-w-4xl mx-auto px-4 py-4">
           {uploadedFiles.length > 0 && (
             <div className="mb-2 flex flex-wrap gap-2 max-h-32 overflow-y-auto">
               {uploadedFiles.map((uploadedFile, index) => {
                 const Icon = getFileIcon(uploadedFile.file.name);
                 const fileInfo = getFileTypeInfo(uploadedFile.file.name);
-                const isImage = ["jpg", "jpeg", "png", "gif", "webp"].some((ext) =>
-                  uploadedFile.file.name.toLowerCase().endsWith(`.${ext}`)
-                );
+                const isImage = ["jpg", "jpeg", "png", "gif", "webp"].some((ext) => uploadedFile.file.name.toLowerCase().endsWith(`.${ext}`));
 
                 return (
                   <div key={index}>
@@ -978,26 +944,14 @@ export function ChatArea({
             </div>
           )}
 
-          <form
-            onSubmit={handleSubmit}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-            className={isDragging ? "opacity-75" : ""}
-          >
+          <form onSubmit={handleSubmit as any} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop} className={isDragging ? "opacity-75" : ""}>
             <div className="relative">
               {/* Mode Selector + Upload */}
               <div className="absolute bottom-3 left-2 flex items-center gap-1 z-10">
                 {chatMode === "ask" && (
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="gap-1.5 h-8 px-2 text-xs hover:bg-muted/50"
-                        disabled={!isLoggedIn}
-                        type="button"
-                      >
+                      <Button variant="ghost" size="sm" className="gap-1.5 h-8 px-2 text-xs hover:bg-muted/50" disabled={!isLoggedIn} 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" />
@@ -1005,62 +959,42 @@ 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>
@@ -1103,18 +1037,11 @@ export function ChatArea({
                     : "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"
-                  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>
@@ -1138,9 +1065,7 @@ export function ChatArea({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>Start New Conversation</AlertDialogTitle>
-            <AlertDialogDescription>
-              Would you like to save the current chat before starting a new conversation?
-            </AlertDialogDescription>
+            <AlertDialogDescription>Would you like to save the current chat before starting a new conversation?</AlertDialogDescription>
 
             <Button
               variant="ghost"
@@ -1192,13 +1117,7 @@ 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>
@@ -1210,21 +1129,13 @@ export function ChatArea({
 
           <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 })}
-              />
+              <Checkbox id="download-chat" checked={downloadOptions.chat} onCheckedChange={(checked) => setDownloadOptions({ ...downloadOptions, chat: checked === true })} />
               <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 })}
-              />
+              <Checkbox id="download-summary" checked={downloadOptions.summary} onCheckedChange={(checked) => setDownloadOptions({ ...downloadOptions, summary: checked === true })} />
               <label htmlFor="download-summary" className="text-sm font-medium cursor-pointer">
                 Download summary
               </label>
@@ -1273,9 +1184,7 @@ export function ChatArea({
                   ))}
                 </SelectContent>
               </Select>
-              <p className="text-xs text-muted-foreground">
-                Sends this conversation to the selected workspace&apos;s Saved Files.
-              </p>
+              <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>
@@ -1290,9 +1199,7 @@ export function ChatArea({
           <AlertDialogHeader>
             <AlertDialogTitle>Delete File</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to delete &quot;
-              {fileToDelete !== null ? uploadedFiles[fileToDelete]?.file.name : ""}
-              &quot;? This action cannot be undone.
+              Are you sure you want to delete &quot;{fileToDelete !== null ? uploadedFiles[fileToDelete]?.file.name : ""}&quot;? This action cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
@@ -1316,10 +1223,7 @@ 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
-              className="pr-8 break-words break-all overflow-wrap-anywhere leading-relaxed"
-              style={{ wordBreak: "break-all", overflowWrap: "anywhere", maxWidth: "100%", lineHeight: "1.6" }}
-            >
+            <DialogTitle className="pr-8 break-words break-all overflow-wrap-anywhere leading-relaxed" style={{ wordBreak: "break-all", overflowWrap: "anywhere", maxWidth: "100%", lineHeight: "1.6" }}>
               {selectedFile?.file.name}
             </DialogTitle>
             <DialogDescription>File size: {selectedFile ? formatFileSize(selectedFile.file.size) : ""}</DialogDescription>
@@ -1352,10 +1256,7 @@ export function ChatArea({
 
                     <div className="space-y-1">
                       <label className="text-xs text-muted-foreground">File Type</label>
-                      <Select
-                        value={pendingFile.type}
-                        onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
-                      >
+                      <Select value={pendingFile.type} onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}>
                         <SelectTrigger className="h-8 text-xs">
                           <SelectValue />
                         </SelectTrigger>