From 3952913ad1324651e509e7718e7815594a650f97 Mon Sep 17 00:00:00 2001
From: rohis <63966639+Nix4444@users.noreply.github.com>
Date: Mon, 9 Jun 2025 00:41:02 +0530
Subject: [PATCH 1/3] Issue #10: Add auto scroll and scroll to bottom

---
 frontend/components/Chat.tsx      | 37 ++++++++++++++++++++++++++++++-
 frontend/components/ChatInput.tsx | 22 ++++++++++++++++--
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/frontend/components/Chat.tsx b/frontend/components/Chat.tsx
index 60ae42c..a7affba 100644
--- a/frontend/components/Chat.tsx
+++ b/frontend/components/Chat.tsx
@@ -12,6 +12,7 @@ import { SidebarTrigger, useSidebar } from './ui/sidebar';
 import { Button } from './ui/button';
 import { MessageSquareMore } from 'lucide-react';
 import { useChatNavigator } from '@/frontend/hooks/useChatNavigator';
+import { useEffect, useRef, useState } from 'react';
 
 interface ChatProps {
   threadId: string;
@@ -22,7 +23,8 @@ export default function Chat({ threadId, initialMessages }: ChatProps) {
   const { getKey } = useAPIKeyStore();
   const selectedModel = useModelStore((state) => state.selectedModel);
   const modelConfig = useModelStore((state) => state.getModelConfig());
-
+  const bottomDivRef = useRef<HTMLDivElement>(null);
+  const [isAtBottom, setIsAtBottom] = useState<boolean>(true);
   const {
     isNavigatorVisible,
     handleToggleNavigator,
@@ -68,6 +70,36 @@ export default function Chat({ threadId, initialMessages }: ChatProps) {
     },
   });
 
+  const scrollToBottom = () => {
+    bottomDivRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+    if (status === 'streaming') {
+      const interval = setInterval(scrollToBottom, 100);
+      return () => clearInterval(interval);
+    }
+  }, [status]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [threadId, messages]);
+
+  useEffect(() => {
+    if (!bottomDivRef.current) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsAtBottom(entry.isIntersecting);
+      }
+    );
+
+    observer.observe(bottomDivRef.current);
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div className="relative w-full">
       <ChatSidebarTrigger />
@@ -91,7 +123,10 @@ export default function Chat({ threadId, initialMessages }: ChatProps) {
           append={append}
           setInput={setInput}
           stop={stop}
+          scrollToBottom={scrollToBottom}
+          isAtBottom={isAtBottom}
         />
+        <div ref={bottomDivRef} />
       </main>
       <ThemeToggler />
       <Button
diff --git a/frontend/components/ChatInput.tsx b/frontend/components/ChatInput.tsx
index 0630f3b..817fc41 100644
--- a/frontend/components/ChatInput.tsx
+++ b/frontend/components/ChatInput.tsx
@@ -1,4 +1,4 @@
-import { ChevronDown, Check, ArrowUpIcon } from 'lucide-react';
+import { ChevronDown, Check, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { Textarea } from '@/frontend/components/ui/textarea';
 import { cn } from '@/lib/utils';
@@ -31,6 +31,8 @@ interface ChatInputProps {
   setInput: UseChatHelpers['setInput'];
   append: UseChatHelpers['append'];
   stop: UseChatHelpers['stop'];
+  scrollToBottom: () => void;
+  isAtBottom: boolean;
 }
 
 interface StopButtonProps {
@@ -41,7 +43,9 @@ interface SendButtonProps {
   onSubmit: () => void;
   disabled: boolean;
 }
-
+interface ScrollButtonProps {
+  scrollToBottom: () => void;
+}
 const createUserMessage = (id: string, text: string): UIMessage => ({
   id,
   parts: [{ type: 'text', text }],
@@ -57,6 +61,8 @@ function PureChatInput({
   setInput,
   append,
   stop,
+  scrollToBottom,
+  isAtBottom,
 }: ChatInputProps) {
   const canChat = useAPIKeyStore((state) => state.hasRequiredKeys());
 
@@ -133,6 +139,9 @@ function PureChatInput({
 
   return (
     <div className="fixed bottom-0 w-full max-w-3xl">
+      <div className="flex justify-center pb-4">
+        {!isAtBottom && <ScrollButton scrollToBottom={scrollToBottom} />}
+      </div>
       <div className="bg-secondary rounded-t-[20px] p-2 pb-0 w-full">
         <div className="relative">
           <div className="flex flex-col">
@@ -181,6 +190,7 @@ function PureChatInput({
 const ChatInput = memo(PureChatInput, (prevProps, nextProps) => {
   if (prevProps.input !== nextProps.input) return false;
   if (prevProps.status !== nextProps.status) return false;
+  if (prevProps.isAtBottom !== nextProps.isAtBottom) return false;
   return true;
 });
 
@@ -274,6 +284,14 @@ const PureSendButton = ({ onSubmit, disabled }: SendButtonProps) => {
   );
 };
 
+const ScrollButton = ({ scrollToBottom }: ScrollButtonProps) => {
+  return (
+    <Button className="rounded-full h-8 w-8" variant="default" size="icon" onClick={scrollToBottom} aria-label="Scroll to bottom">
+      <ArrowDownIcon size={18} />
+    </Button>
+  );
+};
+
 const SendButton = memo(PureSendButton, (prevProps, nextProps) => {
   return prevProps.disabled === nextProps.disabled;
 });

From 4f28d24a2dc1d1f48f33f418bf59ec775575c0b6 Mon Sep 17 00:00:00 2001
From: rohis <63966639+Nix4444@users.noreply.github.com>
Date: Mon, 9 Jun 2025 02:08:30 +0530
Subject: [PATCH 2/3] memoized button and useCallback for function

---
 frontend/components/Chat.tsx      | 6 +++---
 frontend/components/ChatInput.tsx | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/components/Chat.tsx b/frontend/components/Chat.tsx
index a7affba..fe0be35 100644
--- a/frontend/components/Chat.tsx
+++ b/frontend/components/Chat.tsx
@@ -12,7 +12,7 @@ import { SidebarTrigger, useSidebar } from './ui/sidebar';
 import { Button } from './ui/button';
 import { MessageSquareMore } from 'lucide-react';
 import { useChatNavigator } from '@/frontend/hooks/useChatNavigator';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface ChatProps {
   threadId: string;
@@ -70,9 +70,9 @@ export default function Chat({ threadId, initialMessages }: ChatProps) {
     },
   });
 
-  const scrollToBottom = () => {
+  const scrollToBottom = useCallback(() => {
     bottomDivRef.current?.scrollIntoView({ behavior: 'smooth' });
-  };
+  }, []);
 
   useEffect(() => {
     scrollToBottom();
diff --git a/frontend/components/ChatInput.tsx b/frontend/components/ChatInput.tsx
index 817fc41..642020c 100644
--- a/frontend/components/ChatInput.tsx
+++ b/frontend/components/ChatInput.tsx
@@ -284,7 +284,7 @@ const PureSendButton = ({ onSubmit, disabled }: SendButtonProps) => {
   );
 };
 
-const ScrollButton = ({ scrollToBottom }: ScrollButtonProps) => {
+const PureScrollButton = ({ scrollToBottom }: ScrollButtonProps) => {
   return (
     <Button className="rounded-full h-8 w-8" variant="default" size="icon" onClick={scrollToBottom} aria-label="Scroll to bottom">
       <ArrowDownIcon size={18} />
@@ -292,6 +292,8 @@ const ScrollButton = ({ scrollToBottom }: ScrollButtonProps) => {
   );
 };
 
+const ScrollButton = memo(PureScrollButton);
+
 const SendButton = memo(PureSendButton, (prevProps, nextProps) => {
   return prevProps.disabled === nextProps.disabled;
 });

From f72f9805f6d50c4f9c70214d9169618889497816 Mon Sep 17 00:00:00 2001
From: rohis <63966639+Nix4444@users.noreply.github.com>
Date: Tue, 10 Jun 2025 01:50:59 +0530
Subject: [PATCH 3/3] add: push effect on new message

---
 frontend/components/Chat.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/frontend/components/Chat.tsx b/frontend/components/Chat.tsx
index fe0be35..16b1f8d 100644
--- a/frontend/components/Chat.tsx
+++ b/frontend/components/Chat.tsx
@@ -70,21 +70,27 @@ export default function Chat({ threadId, initialMessages }: ChatProps) {
     },
   });
 
-  const scrollToBottom = useCallback(() => {
-    bottomDivRef.current?.scrollIntoView({ behavior: 'smooth' });
+  const scrollToBottom = useCallback((behaior: 'auto' | 'smooth') => {
+    bottomDivRef.current?.scrollIntoView({ behavior: behaior});
   }, []);
 
   useEffect(() => {
-    scrollToBottom();
-    if (status === 'streaming') {
-      const interval = setInterval(scrollToBottom, 100);
-      return () => clearInterval(interval);
+    if (status === 'submitted') {
+      scrollToBottom('smooth');
     }
-  }, [status]);
+  }, [status, scrollToBottom]);
 
   useEffect(() => {
-    scrollToBottom();
-  }, [threadId, messages]);
+    if (!threadId) return;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        scrollToBottom('auto');
+      });
+    });
+  }, [threadId]);
+  useEffect(() => {
+    scrollToBottom('smooth');
+  }, [messages.length]);
 
   useEffect(() => {
     if (!bottomDivRef.current) return;
@@ -123,10 +129,15 @@ export default function Chat({ threadId, initialMessages }: ChatProps) {
           append={append}
           setInput={setInput}
           stop={stop}
-          scrollToBottom={scrollToBottom}
+          scrollToBottom={() => scrollToBottom('smooth')}
           isAtBottom={isAtBottom}
         />
-        <div ref={bottomDivRef} />
+        <div
+          ref={bottomDivRef}
+          className={
+            status === 'submitted' || status === 'streaming' ? 'h-[50vh]' : 'h-0'
+          }
+        />
       </main>
       <ThemeToggler />
       <Button