From bb9b8a8123b262563ab807866ec685cf70efc34b Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 11 Jan 2023 00:53:18 -0800
Subject: [PATCH] Use own scroll to bottom function instead of built-in. Closes
 #2500

---
 .../chat/ChatContainer/ChatContainer.tsx        | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 2a7f39659..db1c05bc8 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -171,11 +171,15 @@ export const ChatContainer: FC<ChatContainerProps> = ({
     }
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const scrollChatToBottom = (ref, behavior = 'smooth') => {
-    ref.current?.scrollToIndex({
-      index: messages.length - 1,
-      behavior,
-    });
+    setTimeout(() => {
+      ref.current?.scrollToIndex({
+        index: messages.length - 1,
+        behavior,
+      });
+    }, 100);
+
     setAtBottom(true);
   };
 
@@ -192,6 +196,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
     () => (
       <>
         <Virtuoso
+          id="virtuoso"
           style={{ height }}
           className={styles.virtuoso}
           ref={chatContainerRef}
@@ -199,12 +204,12 @@ export const ChatContainer: FC<ChatContainerProps> = ({
           itemContent={(index, message) => getViewForMessage(index, message)}
           followOutput={(isAtBottom: boolean) => {
             if (isAtBottom) {
-              return 'smooth';
+              scrollChatToBottom(chatContainerRef, 'smooth');
             }
             return false;
           }}
           alignToBottom
-          atBottomThreshold={50}
+          atBottomThreshold={70}
           atBottomStateChange={bottom => {
             setAtBottom(bottom);
           }}