Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -137,7 +137,7 @@ export function ChatArea({
   workspaces,
   currentWorkspaceId,
   onSaveFile,
-  leftPanelVisible = false,
+  leftPanelVisible = false, // kept for props compatibility; not used for positioning anymore
   currentCourseId,
   onCourseChange,
   availableCourses = [],
@@ -166,7 +166,6 @@ export function ChatArea({
   const [shareLink, setShareLink] = useState("");
   const [targetWorkspaceId, setTargetWorkspaceId] = useState<string>("");
 
-  // Use availableCourses if provided, otherwise fallback
   const courses =
     availableCourses.length > 0
       ? availableCourses
@@ -194,7 +193,6 @@ export function ChatArea({
       isInitialMount.current = false;
       previousMessagesLength.current = messages.length;
 
-      // stay at top on initial load
       if (scrollContainerRef.current) {
         scrollContainerRef.current.scrollTop = 0;
       }
@@ -227,26 +225,6 @@ export function ChatArea({
     return () => container.removeEventListener("scroll", handleScroll);
   }, [messages]);
 
-  // ✅ Prevent scroll chaining to left panel / outer containers
-  useEffect(() => {
-    const el = scrollContainerRef.current;
-    if (!el) return;
-
-    const onWheel = (e: WheelEvent) => {
-      e.stopPropagation();
-
-      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) => {
     e.preventDefault();
     if (!input.trim() || !isLoggedIn) return;
@@ -294,7 +272,9 @@ 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 = () => {
@@ -441,7 +421,6 @@ export function ChatArea({
     const saved = isCurrentChatSaved();
 
     if (saved) {
-      // current logic: if saved, don't prompt — just start new
       onConfirmClear(false);
       return;
     }
@@ -484,8 +463,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)
       );
     });
 
@@ -502,8 +481,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)
         );
       });
 
@@ -521,7 +500,6 @@ export function ChatArea({
     onFileUpload(pendingFiles.map((pf) => pf.file));
     const startIndex = uploadedFiles.length;
 
-    // After uploadedFiles state grows (in parent), we call type change on next tick
     pendingFiles.forEach((pf, idx) => {
       setTimeout(() => {
         onFileTypeChange(startIndex + idx, pf.type);
@@ -756,9 +734,10 @@ export function ChatArea({
   };
 
   return (
-    <div className="flex flex-col h-full min-h-0 overflow-hidden" style={{ overscrollBehavior: "none" }}>
-      <div className="flex-1 relative min-h-0 flex flex-col overflow-hidden" style={{ overscrollBehavior: "none" }}>
-        {/* ✅ Messages Area is the ONLY scroll container */}
+    // IMPORTANT: relative enables internal absolute overlays (input + scroll button)
+    <div className="relative flex flex-col h-full min-h-0 overflow-hidden">
+      <div className="flex-1 relative min-h-0 flex flex-col overflow-hidden">
+        {/* Messages Area is the ONLY scroll container */}
         <div
           ref={scrollContainerRef}
           className="flex-1 min-h-0 overflow-y-auto"
@@ -787,10 +766,7 @@ export function ChatArea({
                 }
 
                 return (
-                  <Select
-                    value={currentCourseId || "course1"}
-                    onValueChange={(val) => onCourseChange && onCourseChange(val)}
-                  >
+                  <Select value={currentCourseId || "course1"} onValueChange={(val) => onCourseChange && onCourseChange(val)}>
                     <SelectTrigger className="w-[200px] h-9 font-semibold">
                       <SelectValue placeholder="Select course" />
                     </SelectTrigger>
@@ -934,18 +910,9 @@ export function ChatArea({
                   </div>
                   <div className="bg-muted rounded-2xl px-4 py-3">
                     <div className="flex gap-1">
-                      <div
-                        className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
-                        style={{ animationDelay: "0ms" }}
-                      />
-                      <div
-                        className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
-                        style={{ animationDelay: "150ms" }}
-                      />
-                      <div
-                        className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
-                        style={{ animationDelay: "300ms" }}
-                      />
+                      <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "0ms" }} />
+                      <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "150ms" }} />
+                      <div className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: "300ms" }} />
                     </div>
                   </div>
                 </div>
@@ -956,15 +923,11 @@ export function ChatArea({
           </div>
         </div>
 
-        {/* Scroll to Bottom Button */}
+        {/* Scroll to Bottom Button (NOW absolute inside ChatArea) */}
         {showScrollButton && (
           <div
-            className="fixed z-30 flex justify-center pointer-events-none"
-            style={{
-              bottom: "120px",
-              left: leftPanelVisible ? "320px" : "0px",
-              right: "0px",
-            }}
+            className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none"
+            style={{ bottom: "120px" }}
           >
             <Button
               variant="secondary"
@@ -978,14 +941,8 @@ export function ChatArea({
           </div>
         )}
 
-        {/* Floating Input Area */}
-        <div
-          className="fixed bottom-0 bg-background/95 backdrop-blur-sm z-10"
-          style={{
-            left: leftPanelVisible ? "320px" : "0px",
-            right: "0px",
-          }}
-        >
+        {/* Floating Input Area (NOW absolute inside ChatArea) */}
+        <div className="absolute bottom-0 left-0 right-0 bg-background/95 backdrop-blur-sm z-10">
           <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">
@@ -1052,9 +1009,7 @@ export function ChatArea({
                         >
                           <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>
 
@@ -1229,13 +1184,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>
@@ -1310,9 +1259,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>
@@ -1327,9 +1274,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>
@@ -1355,18 +1300,11 @@ export function ChatArea({
           <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",
-              }}
+              style={{ wordBreak: "break-all", overflowWrap: "anywhere", maxWidth: "100%", lineHeight: "1.6" }}
             >
               {selectedFile?.file.name}
             </DialogTitle>
-            <DialogDescription>
-              File size: {selectedFile ? formatFileSize(selectedFile.file.size) : ""}
-            </DialogDescription>
+            <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>
         </DialogContent>
@@ -1396,10 +1334,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>