From 31f77cf1f0dc224a806a96fd3f35517ba43018f5 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 20 Dec 2022 00:37:17 -0800
Subject: [PATCH] Tweaks to chat bottom handling for #2342

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

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 5e05d939e..1059d6d53 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -78,10 +78,8 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   showInput,
   height,
 }) => {
-  const [atBottom, setAtBottom] = useState(false);
-  // const [showButton, setShowButton] = useState(false);
+  const [atBottom, setAtBottom] = useState(true);
   const chatContainerRef = useRef(null);
-  // const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
 
   const getNameChangeViewForMessage = (message: NameChangeEvent) => {
     const { oldName, user } = message;
@@ -180,13 +178,21 @@ export const ChatContainer: FC<ChatContainerProps> = ({
           style={{ height }}
           className={styles.virtuoso}
           ref={chatContainerRef}
-          initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
+          // initialTopMostItemIndex={999999}
           data={messages}
           itemContent={(index, message) => getViewForMessage(index, message)}
-          followOutput="auto"
+          followOutput={(isAtBottom: boolean) => {
+            if (isAtBottom) {
+              return 'smooth';
+            }
+            return false;
+          }}
           alignToBottom
           atBottomThreshold={70}
-          atBottomStateChange={bottom => setAtBottom(bottom)}
+          atBottomStateChange={bottom => {
+            setAtBottom(bottom);
+          }}
+          endReached={() => setAtBottom(true)}
         />
         {!atBottom && <ScrollToBotBtn chatContainerRef={chatContainerRef} messages={messages} />}
       </>