Fix: Disable Auto-scroll when user looks back through historical chat-Bug 9062 (#9107)

### What problem does this PR solve?

This code allows user chat to auto-scroll down when entered, but if user
scrolls up away from the generative feedback, autoscroll is disabled.
Close #9062 

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

---------

Co-authored-by: Charles Copley <ccopley@ancera.com>

web/src/pages/chat/chat-container/index.tsx

@@ -1,6 +1,7 @@
 import MessageItem from '@/components/message-item';
 import { MessageType } from '@/constants/chat';
 import { Flex, Spin } from 'antd';
+import { useRef } from 'react';
 import {
   useCreateConversationBeforeUploadDocument,
   useGetFileIcon,
@@ -15,9 +16,10 @@ import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import {
   useFetchNextConversation,
-  useGetChatSearchParams,
   useFetchNextDialog,
+  useGetChatSearchParams,
 } from '@/hooks/chat-hooks';
+import { useScrollToBottom } from '@/hooks/logic-hooks';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import { buildMessageUuidWithRole } from '@/utils/chat';
 import { memo } from 'react';
@@ -31,8 +33,8 @@ const ChatContainer = ({ controller }: IProps) => {
   const { conversationId } = useGetChatSearchParams();
   const { data: conversation } = useFetchNextConversation();
   const { data: currentDialog } = useFetchNextDialog();
-    
 
+  const messageContainerRef = useRef<HTMLDivElement>(null);
   const {
     value,
     ref,
@@ -45,6 +47,10 @@ const ChatContainer = ({ controller }: IProps) => {
     removeMessageById,
     stopOutputMessage,
   } = useSendNextMessage(controller);
+  const { scrollRef, isAtBottom, scrollToBottom } = useScrollToBottom(
+    derivedMessages,
+    messageContainerRef,
+  );
 
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
@@ -55,10 +61,20 @@ const ChatContainer = ({ controller }: IProps) => {
   const { createConversationBeforeUploadDocument } =
     useCreateConversationBeforeUploadDocument();
 
+  const handleSend = (msg) => {
+    // your send logic
+    setTimeout(scrollToBottom, 0);
+  };
+
   return (
     <>
       <Flex flex={1} className={styles.chatContainer} vertical>
-        <Flex flex={1} vertical className={styles.messageContainer}>
+        <Flex
+          flex={1}
+          vertical
+          className={styles.messageContainer}
+          ref={messageContainerRef}
+        >
           <div>
             <Spin spinning={loading}>
               {derivedMessages?.map((message, i) => {
@@ -91,7 +107,7 @@ const ChatContainer = ({ controller }: IProps) => {
               })}
             </Spin>
           </div>
-          <div ref={ref} />
+          <div ref={scrollRef} />
         </Flex>
         <MessageInput
           disabled={disabled}