Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -137,7 +137,7 @@ export function ChatArea({
   workspaces,
   currentWorkspaceId,
   onSaveFile,
-  leftPanelVisible = false, // kept for props compatibility
+  leftPanelVisible = false,
   currentCourseId,
   onCourseChange,
   availableCourses = [],
@@ -176,8 +176,7 @@ export function ChatArea({
           { id: "course4", name: "Web Development" },
         ];
 
-  // IMPORTANT:
-  // messagesEndRef is used to scroll inside the scroll container
+  // Messages scroll container
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -186,16 +185,13 @@ export function ChatArea({
   const previousMessagesLength = useRef(messages.length);
 
   const scrollToBottom = () => {
-    // scrollIntoView works as long as messagesEndRef is inside scrollContainerRef
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
   };
 
-  // Only auto-scroll when new messages are added (not on initial load)
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
       previousMessagesLength.current = messages.length;
-
       // Keep at top on initial load (your old behavior)
       if (scrollContainerRef.current) {
         scrollContainerRef.current.scrollTop = 0;
@@ -209,7 +205,6 @@ export function ChatArea({
     previousMessagesLength.current = messages.length;
   }, [messages]);
 
-  // Scroll button + top border
   useEffect(() => {
     const handleScroll = () => {
       const el = scrollContainerRef.current;
@@ -253,7 +248,6 @@ export function ChatArea({
     summary: "Quick Summary",
   };
 
-  // Review topic click
   const handleReviewTopic = (item: {
     title: string;
     previousQuestion: string;
@@ -365,7 +359,6 @@ export function ChatArea({
     }
   };
 
-  // Check if current chat is already saved
   const isCurrentChatSaved = (): boolean => {
     if (messages.length <= 1) return false;
 
@@ -525,7 +518,6 @@ 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;
@@ -737,147 +729,141 @@ export function ChatArea({
     );
   };
 
-  // ==============
-  // Layout constants
-  // ==============
-  // This reserves enough space so the last message won't be hidden behind the bottom composer.
-  // If your composer grows, bump this value.
-  const MESSAGES_BOTTOM_PADDING = "13rem";
+  // now composer is fixed as sibling => no huge bottom padding needed
+  const MESSAGES_BOTTOM_PADDING = "2rem";
 
   return (
-    // IMPORTANT: This component must be a column with NO outer scroll.
+    // ✅ Three-part layout: TopBar (fixed) + Messages (scroll) + Composer (fixed)
     <div className="relative flex flex-col h-full min-h-0 overflow-hidden">
       {/* =========================
-          1) Scroll Container (ONLY this area scrolls)
+          1) TOP BAR (fixed)
          ========================= */}
       <div
-        ref={scrollContainerRef}
-        className="flex-1 min-h-0 overflow-y-auto"
-        style={{ overscrollBehavior: "contain" }}
+        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" }}
       >
-        {/* Top Bar - Sticky (stays at top inside the 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;
+        {/* 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 (
-                <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: "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>
+        {/* 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>
-          </div>
+          <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>
 
-        {/* Messages Content */}
+      {/* =========================
+          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 }}>
           <div className="w-full space-y-6 max-w-4xl mx-auto">
             {messages.map((message) => (
@@ -925,31 +911,21 @@ export function ChatArea({
                 </div>
                 <div className="bg-muted rounded-2xl px-4 py-3">
                   <div className="flex gap-1">
-                    <div
-                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
-                      style={{ animationDelay: "0ms" }}
-                    />
-                    <div
-                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
-                      style={{ animationDelay: "150ms" }}
-                    />
-                    <div
-                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
-                      style={{ animationDelay: "300ms" }}
-                    />
+                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "0ms" }} />
+                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "150ms" }} />
+                    <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "300ms" }} />
                   </div>
                 </div>
               </div>
             )}
 
-            {/* MUST be inside scroll container */}
             <div ref={messagesEndRef} />
           </div>
         </div>
       </div>
 
       {/* =========================
-          2) Scroll-to-bottom button (fixed relative to ChatArea, NOT inside scroll)
+          2.5) Scroll-to-bottom button (fixed)
          ========================= */}
       {showScrollButton && (
         <div className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none" style={{ bottom: "132px" }}>
@@ -966,10 +942,9 @@ export function ChatArea({
       )}
 
       {/* =========================
-          3) Composer (pinned to bottom of ChatArea)
-             NOTE: moved from absolute -> sticky footer container.
+          3) COMPOSER (fixed bottom, never scroll)
          ========================= */}
-      <div className="flex-shrink-0 sticky bottom-0 left-0 right-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border">
+      <div 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">
@@ -1349,9 +1324,7 @@ export function ChatArea({
             </DialogTitle>
             <DialogDescription>File size: {selectedFile ? formatFileSize(selectedFile.file.size) : ""}</DialogDescription>
           </DialogHeader>
-          <div className="flex-1 min-h-0 overflow-y-auto mt-4">
-            {selectedFile && <FileViewerContent file={selectedFile.file} />}
-          </div>
+          <div className="flex-1 min-h-0 overflow-y-auto mt-4">{selectedFile && <FileViewerContent file={selectedFile.file} />}</div>
         </DialogContent>
       </Dialog>