Implement scroll-to-bottom button in chat when scrolled up

frontend/src/components/chat/ChatPanel.tsx

@@ -17,17 +17,17 @@
 import MessageBubble from "./MessageBubble";
 import SourceCard from "./SourceCard";
 import {
-  Send,
-  Loader2,
-  Trash2,
-  MessageSquare,
-  Download,
-  Mic,
-  MicOff,
-  HelpCircle,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-
+      Send,
+      Loader2,
+      Trash2,
+      MessageSquare,
+      Download,
+      Mic,
+      MicOff,
+      HelpCircle,
+      ChevronDown,
+    } from "lucide-react";
+    import { cn } from "@/lib/utils";
 interface ISpeechRecognitionEvent {
   resultIndex: number;
   results: {
@@ -96,11 +96,13 @@
 
   // New State for Keyboard Shortcuts Help Modal
   const [showHelpModal, setShowHelpModal] = useState(false);
+  const [showScrollButton, setShowScrollButton] = useState(false);
 
   const recognitionRef = useRef<ISpeechRecognition | null>(null);
   const initialInputRef = useRef<string>("");
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const prevDocId = useRef<string | null>(null);
   const exportMenuRef = useRef<HTMLDivElement>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
@@ -125,9 +127,28 @@
 
   // Auto-scroll to bottom whenever messages change
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    if (containerRef.current) {
+      const { scrollHeight, scrollTop, clientHeight } = containerRef.current;
+      if (scrollHeight - scrollTop - clientHeight < 150) {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+      }
+    } else {
+      bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
   }, [messages]);
 
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    setShowScrollButton(scrollTop < scrollHeight - clientHeight - 100);
+  };
+
+  const scrollToBottom = () => {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({ top: containerRef.current.scrollHeight, behavior: "smooth" });
+    }
+  };
+
   useEffect(() => {
     return () => {
       resetChat();
@@ -228,7 +249,7 @@
         const connectTimeout = setTimeout(() => {
           try {
             ws.close();
           } catch (e) {
             // ignore
           }
           reject(new Error("WebSocket connection timeout"));
@@ -275,12 +296,12 @@
               ws.close();
               resolve();
             }
           } catch (err) {
             // ignore malformed messages
           }
         };
 
         ws.onerror = (ev) => {
           clearTimeout(connectTimeout);
           reject(new Error("WebSocket error"));
         };
@@ -291,7 +312,7 @@
       });
 
       await wsDone;
     } catch (err) {
       // Fallback to existing SSE stream if WebSocket fails
       try {
         const stream = api.streamPost("/api/v1/chat/ask/stream", {
@@ -593,13 +614,15 @@
     return () => {
       window.removeEventListener("keydown", handleGlobalKeyDown);
     };
   }, [input, streaming, showHelpModal, showExportMenu, messages]); // Dependencies updated to capture fresh state data
 
   return (
     <div className="h-full flex flex-col relative">
       {/* ── Chat Messages ──────────────────────────── */}
-      <div
-        className="flex-1 px-4 overflow-y-auto custom-scrollbar"
+        <div 
+            ref={containerRef}
+            onScroll={handleScroll}
+            className="flex-1 px-4 overflow-y-auto custom-scrollbar" 
         aria-busy={historyLoading}
       >
         {historyLoading ? (
@@ -674,6 +697,19 @@
         <div ref={bottomRef} className="h-4" />
       </div>
 
+      {/* Scroll to bottom button */}
+      <button
+        type="button"
+        onClick={scrollToBottom}
+        aria-label="Scroll to bottom"
+        className={cn(
+          "absolute right-4 bottom-20 z-50 rounded-full p-2 bg-primary text-primary-foreground shadow-lg transition-all duration-200",
+          showScrollButton ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2 pointer-events-none"
+        )}
+      >
+        <ChevronDown className="h-5 w-5" />
+      </button>
+
       {/* ── Input Area ─────────────────────────────── */}
       <div className="border-t border-border/50 p-4 bg-card/30 backdrop-blur-sm relative">
         <div className="max-w-3xl mx-auto relative">