From 8b4fd5129b760b556faf37c10686431668372f4f Mon Sep 17 00:00:00 2001
From: Kishal <kishal2007@gmail.com>
Date: Wed, 10 Jun 2026 13:32:26 +0530
Subject: [PATCH 1/2] Implement scroll-to-bottom button in chat when scrolled
 up

---
 frontend/src/components/chat/ChatPanel.tsx | 45 ++++++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/chat/ChatPanel.tsx b/frontend/src/components/chat/ChatPanel.tsx
index dde5d025..c58930ff 100644
--- a/frontend/src/components/chat/ChatPanel.tsx
+++ b/frontend/src/components/chat/ChatPanel.tsx
@@ -11,7 +11,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
 import MessageBubble from "./MessageBubble";
 import SourceCard from "./SourceCard";
-import { Send, Loader2, Trash2, MessageSquare, Download, Mic, MicOff, HelpCircle } from "lucide-react";
+import { Send, Loader2, Trash2, MessageSquare, Download, Mic, MicOff, HelpCircle, ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 interface ISpeechRecognitionEvent {
@@ -80,11 +80,13 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
   
   // 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);
 
@@ -109,9 +111,28 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
 
   // 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();
@@ -521,7 +542,12 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
   return (
     <div className="h-full flex flex-col relative">
       {/* ── Chat Messages ──────────────────────────── */}
-      <div className="flex-1 px-4 overflow-y-auto custom-scrollbar" aria-busy={historyLoading}>
+      <div 
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="flex-1 px-4 overflow-y-auto custom-scrollbar" 
+        aria-busy={historyLoading}
+      >
         {historyLoading ? (
           <div className="py-6 space-y-5 max-w-3xl mx-auto" aria-label="Loading chat history">
             {Array.from({ length: 4 }).map((_, index) => (
@@ -576,6 +602,19 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
         <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">

From 8c6fdaaaf0900d6b8260c0531fbfe2e476176675 Mon Sep 17 00:00:00 2001
From: Kishal <kishal2007@gmail.com>
Date: Thu, 11 Jun 2026 13:15:06 +0530
Subject: [PATCH 2/2] added missing import

---
 frontend/src/components/chat/ChatPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/chat/ChatPanel.tsx b/frontend/src/components/chat/ChatPanel.tsx
index 64251020..aa1653e3 100644
--- a/frontend/src/components/chat/ChatPanel.tsx
+++ b/frontend/src/components/chat/ChatPanel.tsx
@@ -27,7 +27,7 @@ import {
       HelpCircle,
       ChevronDown,
     } from "lucide-react";
-
+    import { cn } from "@/lib/utils";
 interface ISpeechRecognitionEvent {
   resultIndex: number;
   results: {