From 071354be876c5f81987ab5b62c36c39d3ce8152a Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Mon, 19 Jan 2026 00:14:41 +0530
Subject: [PATCH] feat: Implement auto-scrolling to the bottom of chat messages
 and a scroll-to-bottom button that appears when scrolled up.

---
 src/app/(agent)/agent/message/page.tsx | 89 ++++++++++++++++++--------
 1 file changed, 61 insertions(+), 28 deletions(-)

diff --git a/src/app/(agent)/agent/message/page.tsx b/src/app/(agent)/agent/message/page.tsx
index 38f5674..fd35d55 100644
--- a/src/app/(agent)/agent/message/page.tsx
+++ b/src/app/(agent)/agent/message/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import Image from 'next/image';
 import { ChatHeader, MessageInput } from './component';
 
@@ -209,12 +209,36 @@ const messages = [
 export default function MessagePage() {
   const [selectedConversation, setSelectedConversation] = useState<string | null>('1');
   const [searchQuery, setSearchQuery] = useState('');
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
 
   const handleSendMessage = (message: string) => {
     console.log('Sending message:', message);
     // In production, this would send the message to the API
   };
 
+  const handleScroll = () => {
+    if (messagesContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+      // Show button if not at bottom (with 100px threshold)
+      setShowScrollButton(scrollHeight - scrollTop - clientHeight > 100);
+    }
+  };
+
+  const scrollToBottom = () => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTo({
+        top: messagesContainerRef.current.scrollHeight,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  useEffect(() => {
+    // Scroll to bottom on initial load
+    scrollToBottom();
+  }, [selectedConversation]);
+
   const filteredConversations = conversations.filter((conv) =>
     conv.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
@@ -329,39 +353,48 @@ export default function MessagePage() {
               {/* Chat header */}
               <ChatHeader {...selectedUserData} />
 
-              {/* Messages area */}
-              <div className="flex-1 overflow-y-auto py-4 relative custom-scrollbar">
-                <div className="space-y-4 px-2">
-                  {messages.map((message) => (
-                    <div
-                      key={message.id}
-                      className={`flex ${message.isOwn ? 'justify-end' : 'justify-start'}`}
-                    >
+              {/* Messages area wrapper */}
+              <div className="flex-1 relative">
+                <div
+                  ref={messagesContainerRef}
+                  onScroll={handleScroll}
+                  className="absolute inset-0 overflow-y-auto py-4 custom-scrollbar"
+                >
+                  <div className="space-y-4 px-2">
+                    {messages.map((message) => (
                       <div
-                        className={`max-w-[70%] rounded-[15px] px-4 py-3 ${
-                          message.isOwn
-                            ? 'bg-[#e58625] text-[#00293D]'
-                            : 'bg-[#00293d]/10 text-[#00293D]'
-                        }`}
+                        key={message.id}
+                        className={`flex ${message.isOwn ? 'justify-end' : 'justify-start'}`}
                       >
-                        <p className="font-serif font-normal text-[14px] leading-[19px]">
-                          {message.text}
-                        </p>
-                        <p
-                          className={`font-serif font-normal text-[12px] leading-[16px] mt-1 ${
-                            message.isOwn ? 'text-[#00293D]/70' : 'text-[#00293D]/50'
+                        <div
+                          className={`max-w-[70%] rounded-[15px] px-4 py-3 ${
+                            message.isOwn
+                              ? 'bg-[#e58625] text-[#00293D]'
+                              : 'bg-[#00293d]/10 text-[#00293D]'
                           }`}
                         >
-                          {message.timestamp}
-                        </p>
+                          <p className="font-serif font-normal text-[14px] leading-[19px]">
+                            {message.text}
+                          </p>
+                          <p
+                            className={`font-serif font-normal text-[12px] leading-[16px] mt-1 ${
+                              message.isOwn ? 'text-[#00293D]/70' : 'text-[#00293D]/50'
+                            }`}
+                          >
+                            {message.timestamp}
+                          </p>
+                        </div>
                       </div>
-                    </div>
-                  ))}
+                    ))}
+                  </div>
                 </div>
 
-                {/* Scroll to bottom button */}
-                <div className="absolute bottom-4 right-4">
-                  <button className="w-[50px] h-[50px] bg-[#00293d]/10 rounded-full flex items-center justify-center hover:bg-[#00293d]/20 transition-colors cursor-pointer">
+                {/* Scroll to bottom button - only shows when scrolled up */}
+                {showScrollButton && (
+                  <button
+                    onClick={scrollToBottom}
+                    className="absolute bottom-4 right-4 w-[50px] h-[50px] bg-[#00293d]/10 rounded-full flex items-center justify-center hover:bg-[#00293d]/20 transition-all cursor-pointer shadow-lg z-10"
+                  >
                     <Image
                       src="/assets/icons/arrow-down-icon.svg"
                       alt="Scroll to bottom"
@@ -369,7 +402,7 @@ export default function MessagePage() {
                       height={20}
                     />
                   </button>
-                </div>
+                )}
               </div>
 
               {/* Message input */}