chat automatically adjusts scrollbar so as to not effect the chat view when more chats are loaded

src/chat/ChatOutput.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import ChatMessage from "./ChatMessage";
 import { Box, Button, ListItemButton } from "@mui/material";
 
@@ -19,7 +19,11 @@ interface Props {
  * @returns List of chat messages
  */
 export default function ChatOutput(props: Props) {
-  const ScrollTo = () => {
+  const [disableScrollTo, setDisableScrollTo] = useState(false);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  const ScrollToBottom = () => {
     const elementRef = useRef<null | HTMLDivElement>(null);
     useEffect(() =>
       elementRef?.current?.scrollIntoView({
@@ -30,23 +34,17 @@ export default function ChatOutput(props: Props) {
     return elem;
   };
 
-  // const LoadMore = () => {
-  //   const elementRef = useRef<null | HTMLDivElement>(null);
-
-  //   let elem =
-  //     <div style={{textAlign: "center"}} ref={elementRef}>
-  //       <CircularProgress />
-  //     </div>;
-
-  //     if(CheckVisible(elementRef, "0px"))
-  //     {
-  //       props.loadMore()
-  //     }
-
-  //   return elem;
-  // }
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    container.scrollTop = container.scrollHeight - scrollOffset
+  }, [props.messages])
 
   const seeMore = () => {
+    if (!containerRef.current) return;
+    setDisableScrollTo(true)
+    const container = containerRef.current;
+    setScrollOffset(container.scrollHeight - container.scrollTop)
     props.loadMore();
   };
 
@@ -59,15 +57,13 @@ export default function ChatOutput(props: Props) {
           // attachments={props.attachmentMap?.get(curMessage.note?.settings?.key)}
           removeNoteMethod={props.removeNoteMethod}
         />
-        {/* {props.scrollPos !== 0 && index === props.scrollPos && <ScrollTo />} */}
-        <ScrollTo />
       </div>
     ));
     return display;
   };
 
   return (
-    <Box style={{
+    <Box ref={containerRef} style={{
       overflowY: "scroll",
       overflowX: "hidden",
     }}>
@@ -77,8 +73,7 @@ export default function ChatOutput(props: Props) {
         </ListItemButton>
       )}
       {displayMessages()}
-      {props.scrollPos === 0 && <ScrollTo />}
-      {/* <ScrollTo/> */}
+      {!disableScrollTo && <ScrollToBottom/>}
     </Box>
   );
 }