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

src/chat/Chat.tsx

@@ -1,14 +1,12 @@
 import { Box, CircularProgress } from "@mui/material";
-import { useGlobalState, useNoteAPI, useTeamAPI } from "providers";
+import { useGlobalState, useNoteAPI } from "providers";
 import React from "react";
-import { useCallback } from "react";
 import { useEffect } from "react";
 import { useState } from "react";
 import ChatInput from "./ChatInput";
 import ChatOutput from "./ChatOutput";
 import { Note } from "models";
 import { pond } from "protobuf-ts/pond";
-import moment from "moment-timezone";
 
 interface Props {
   objectKey: string;
@@ -24,17 +22,20 @@ export default function Chat(props: Props) {
   const [totalMessages, setTotalMessages] = useState(0);
   const [scrollPos, setScrollPos] = useState(0);
   const [{ user }] = useGlobalState();
-  const [attachmentMap, setAttachmentMap] = useState<Map<string, pond.FileReference[]>>(new Map());
+  // const [attachmentMap, setAttachmentMap] = useState<Map<string, pond.FileReference[]>>(new Map());
 
 
   useEffect(() => {
-    console.log(totalMessages)
+    console.log(scrollPos)
-  }, [totalMessages])
+  }, [scrollPos])
 
   const loadChats = () => {
     setLoading(true)
     noteAPI.listChats(10, chats.length, "desc", "timestamp", objectKey).then(resp => {
+      // if (loaded) setScrollPos(chats.length-10)
+      // setScrollPos(chats.length)
       setChats(resp.data.chats ? resp.data.chats.reverse().concat(chats) : [])
+      setScrollPos(resp.data.chats.reverse().concat(chats).length)
       setTotalMessages(resp.data.total)
     }).finally(() => {
       setLoading(false)
@@ -90,7 +91,7 @@ export default function Chat(props: Props) {
           <ChatInput newNoteMethod={showNewNotes} objectKey={objectKey} type={type} />
           <ChatOutput
             totalMessages={totalMessages}
-            attachmentMap={attachmentMap}
+            // attachmentMap={attachmentMap}
             messages={chats}
             scrollPos={scrollPos}
             removeNoteMethod={removeNote}

src/chat/ChatDrawer.tsx

@@ -66,7 +66,7 @@ export function ChatDrawer(props: Props) {
           <Typography>{team.name()} Chat</Typography>
         </Box>
         <Box className={classes.chatContainer}>
-          <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
+          <Chat objectKey={team.settings.key}/>
         </Box>
       </Box>
     </Drawer>

src/chat/ChatMessage.tsx

@@ -86,7 +86,7 @@ export default function ChatMessage(props: Props) {
     }
     return perms
   }
-const permissions = generatePermissions()
+  const permissions = generatePermissions()
 
   const deleteMessage = () => {
     if (!props.chat?.note?.settings) return

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 = () => {
+  useEffect(() => {
-  //   const elementRef = useRef<null | HTMLDivElement>(null);
+    if (!containerRef.current) return;
-
+    const container = containerRef.current;
-  //   let elem =
+    container.scrollTop = container.scrollHeight - scrollOffset
-  //     <div style={{textAlign: "center"}} ref={elementRef}>
+  }, [props.messages])
-  //       <CircularProgress />
-  //     </div>;
-
-  //     if(CheckVisible(elementRef, "0px"))
-  //     {
-  //       props.loadMore()
-  //     }
-
-  //   return elem;
-  // }
 
   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 />}
+      {!disableScrollTo && <ScrollToBottom/>}
-      {/* <ScrollTo/> */}
     </Box>
   );
 }