fix chat list scroll issue

package.json

@@ -41,6 +41,7 @@
     "lodash": "^4.17.21",
     "mime": "^4.0.4",
     "moment": "^2.30.1",
+    "npm": "^10.8.3",
     "quill-image-resize-module-react": "^3.0.0",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -53,6 +54,7 @@
     "react-quill": "^2.0.0",
     "react-redux": "^9.1.2",
     "react-virtualized": "^9.22.5",
+    "react-virtuoso": "^4.10.4",
     "short-unique-id": "^5.2.0",
     "slate": "^0.103.0",
     "slate-react": "^0.109.0",

src/components/Chat/ChatDirect.tsx

@@ -484,13 +484,15 @@ const clearEditorContent = () => {
         position: isFocusedParent ? 'fixed' : 'relative',
         bottom: isFocusedParent ? '0px' : 'unset',
         top: isFocusedParent ? '0px' : 'unset',
-        zIndex: isFocusedParent ? 5 : 'unset'
+        zIndex: isFocusedParent ? 5 : 'unset',
+        flexShrink: 0
       }}>
       <div style={{
             display: 'flex',
             flexDirection: 'column',
             flexGrow: isMobile && 1,
             overflow: !isMobile &&  "auto",
+            flexShrink: 0
       }}>
       {replyMessage && (
         <Box sx={{

src/components/Chat/ChatGroup.tsx

@@ -416,13 +416,15 @@ const clearEditorContent = () => {
         position: isFocusedParent ? 'fixed' : 'relative',
         bottom: isFocusedParent ? '0px' : 'unset',
         top: isFocusedParent ? '0px' : 'unset',
-        zIndex: isFocusedParent ? 5 : 'unset'
+        zIndex: isFocusedParent ? 5 : 'unset',
+        flexShrink: 0
       }}>
       <div style={{
             display: 'flex',
             flexDirection: 'column',
             flexGrow: isMobile && 1,
             overflow: !isMobile &&  "auto",
+            flexShrink: 0
       }}>
         {replyMessage && (
         <Box sx={{

src/components/Chat/ChatList.tsx

@@ -1,26 +1,58 @@
-import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
-import { List, AutoSizer, CellMeasurerCache, CellMeasurer } from 'react-virtualized';
+import { Virtuoso } from 'react-virtuoso';
 import { MessageItem } from './MessageItem';
 import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 
-// const cache = new CellMeasurerCache({
-//   fixedWidth: true,
-//   defaultHeight: 50,
-// });
-
 export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onReply }) => {
- 
+  const virtuosoRef = useRef();
-  const hasLoadedInitialRef = useRef(false);
-  const listRef = useRef();
   const [messages, setMessages] = useState(initialMessages);
   const [showScrollButton, setShowScrollButton] = useState(false);
-  const cache = useMemo(() => new CellMeasurerCache({
+  const hasLoadedInitialRef = useRef(false);
-    fixedWidth: true,
+  const isAtBottomRef = useRef(true);  //
-    defaultHeight: 50,
+  // Update message list with unique signatures and tempMessages
-  }), [chatId]); // Recreate cache when chatId changes
   useEffect(() => {
-    cache.clearAll();
+    let uniqueInitialMessagesMap = new Map();
-  }, []);
+
+    initialMessages.forEach((message) => {
+      uniqueInitialMessagesMap.set(message.signature, message);
+    });
+
+    const uniqueInitialMessages = Array.from(uniqueInitialMessagesMap.values()).sort(
+      (a, b) => a.timestamp - b.timestamp
+    );
+    const totalMessages = [...uniqueInitialMessages, ...(tempMessages || [])];
+
+    if (totalMessages.length === 0) return;
+
+    setMessages(totalMessages);
+
+    setTimeout(() => {
+      const hasUnreadMessages = totalMessages.some((msg) => msg.unread);
+
+      if (virtuosoRef.current) {
+
+
+        if (virtuosoRef.current && !isAtBottomRef.current) {
+
+   
+    
+
+    setShowScrollButton(hasUnreadMessages);
+        } else {
+          handleMessageSeen();
+
+        }
+       
+
+      }
+      if (!hasLoadedInitialRef.current) {
+        scrollToBottom(totalMessages);
+        hasLoadedInitialRef.current = true;
+      }
+    }, 500);
+  }, [initialMessages, tempMessages]);
+
+  
 
   const handleMessageSeen = useCallback(() => {
     setMessages((prevMessages) =>
@@ -31,72 +63,50 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
     );
   }, []);
 
-  const handleScroll = ({ scrollTop, scrollHeight, clientHeight }) => {
+  const scrollToItem = useCallback((index) => {
+    if (virtuosoRef.current) {
+      virtuosoRef.current.scrollToIndex({ index, behavior: 'smooth' });
+    }
+  }, []);
+
+  const scrollToBottom = (initialMsgs) => {
+    console.log('initialMsgs', {
+      initialMsgs,
+      messages
+    })
+    const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1
+    if (virtuosoRef.current) {
+      virtuosoRef.current.scrollToIndex({ index, behavior: 'smooth' });
+    }
+  };
+
+  
+  const handleScroll = (scrollState) => {
+    const { scrollTop, scrollHeight, clientHeight } = scrollState;
     const isAtBottom = scrollTop + clientHeight >= scrollHeight - 50;
     const hasUnreadMessages = messages.some((msg) => msg.unread);
-    if(isAtBottom){
+
-      handleMessageSeen()
+    if (isAtBottom) {
+      handleMessageSeen();
     }
+
     setShowScrollButton(!isAtBottom && hasUnreadMessages);
   };
 
-  const debounce = (func, delay) => {
+  const sentNewMessageGroupFunc = useCallback(() => {
-    let timer;
+    scrollToBottom();
-    return (...args) => {
-      clearTimeout(timer);
-      timer = setTimeout(() => {
-        func(...args);
-      }, delay);
-    };
-  };
-
-  const handleScrollDebounced = debounce(handleScroll, 100);
-
-  const scrollToBottom = (initialmsgs) => {
-    if (listRef.current) {
-      const msgs = initialmsgs?.length ? initialmsgs : messages
-   
-      listRef.current?.recomputeRowHeights();
-
-      listRef.current.scrollToRow(msgs.length - 1);
-      setTimeout(() => {
-      
-        listRef.current.scrollToRow(msgs.length - 1);
-      }, 100);
-      setShowScrollButton(false);
-    }
-  };
-
-  const scrollToItem = useCallback((index) => {
-    listRef.current.scrollToRow(index); // This scrolls to the specific index
-  }, []);
-
-  const recomputeListHeights = () => {
-    if (listRef.current) {
-      listRef.current.recomputeRowHeights();
-    }
-  };
-
-  const sentNewMessageGroupFunc = ()=> {
-   
-    scrollToBottom()
-  }
-
-  useEffect(() => {
-    subscribeToEvent("sent-new-message-group", sentNewMessageGroupFunc);
-
-    return () => {
-      unsubscribeFromEvent("sent-new-message-group", sentNewMessageGroupFunc);
-    };
   }, [messages]);
 
- 
+  useEffect(() => {
+    subscribeToEvent('sent-new-message-group', sentNewMessageGroupFunc);
+    return () => {
+      unsubscribeFromEvent('sent-new-message-group', sentNewMessageGroupFunc);
+    };
+  }, [sentNewMessageGroupFunc]);
 
-  const rowRenderer = ({ index, key, parent, style }) => {
+  const rowRenderer = (index) => {
     let message = messages[index];
-    const isLargeMessage = message.text?.length > 200; // Adjust based on your message size threshold
+  
-
-    // const reply = message?.repliedTo ? messages.find((msg)=> msg?.signature === message?.repliedTo) : undefined
     let replyIndex = messages.findIndex((msg)=> msg?.signature === message?.repliedTo)
     let reply
     if(message?.repliedTo && replyIndex !== -1){
@@ -114,108 +124,45 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
         unread:  false
       }
     }
+
     return (
-      <CellMeasurer
+      <div style={{ padding: '10px 0', display: 'flex', justifyContent: 'center', width: '100%' }}>
-        key={key}
+        <MessageItem
-        cache={cache}
+          isLast={index === messages.length - 1}
-        parent={parent}
+          message={message}
-        columnIndex={0}
+          onSeen={handleMessageSeen}
-        rowIndex={index}
+          isTemp={!!message?.isTemp}
-      >
+          myAddress={myAddress}
-        {({ measure }) => (
+          onReply={onReply}
-          <div style={style}>
+          reply={reply}
-            <div
+          replyIndex={replyIndex}
-              onLoad={() => {
+          scrollToItem={scrollToItem}
-                if (isLargeMessage) {
+        />
-                  measure(); // Ensure large messages are properly measured
+      </div>
-                }
-              }}
-              style={{
-                marginBottom: '10px',
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-              }}
-            >
-              <MessageItem
-                isLast={index === messages.length - 1}
-                message={message}
-                onSeen={handleMessageSeen}
-                isTemp={!!message?.isTemp}
-                myAddress={myAddress}
-              onReply={onReply}
-              reply={reply}
-              scrollToItem={scrollToItem}
-              replyIndex={replyIndex}
-              />
-            </div>
-          </div>
-        )}
-      </CellMeasurer>
     );
   };
 
-  useEffect(() => {
+  const handleAtBottomStateChange = (atBottom) => {
-    let uniqueInitialMessagesMap = new Map();
+    isAtBottomRef.current = atBottom;
-
+  };
-// Iterate over initialMessages and add only unique messages based on signature
-initialMessages.forEach((message) => {
-    uniqueInitialMessagesMap.set(message.signature, message);
-});
-
-// Convert the map back to an array and sort by timestamp (old to new)
-let uniqueInitialMessages = Array.from(uniqueInitialMessagesMap.values()).sort((a, b) => a.timestamp - b.timestamp);
-    const totalMessages = [...uniqueInitialMessages, ...(tempMessages || [])]
-    if(totalMessages.length === 0) return
-    setMessages(totalMessages);
-    // cache.clearAll(); // Clear cache so the list can properly re-render with new messages
-    setTimeout(() => {
-      if (listRef.current) {
-        const { scrollTop, scrollHeight, clientHeight } = listRef.current.Grid._scrollingContainer;
-        handleScroll({ scrollTop, scrollHeight, clientHeight });
-        recomputeListHeights(); // Ensure heights are recomputed on message load
-        setTimeout(() => {
-          if(!hasLoadedInitialRef.current){
-            scrollToBottom(totalMessages);
-            hasLoadedInitialRef.current = true
-          }
-        }, 100);
-      }
-    }, 500);
-  }, [tempMessages, initialMessages]);
-
-  // useEffect(() => {
-  //   // Scroll to the bottom on initial load or when messages change
-  //   if (listRef.current && messages.length > 0 && !hasLoadedInitialRef.current) {
-  //     scrollToBottom();
-  //     hasLoadedInitialRef.current = true;
-  //   } else if (messages.length > 0 && messages[messages.length - 1].sender === myAddress) {
-  //     scrollToBottom();
-  //   }
-  // }, [messages, myAddress]);
 
   return (
-    <div style={{ position: 'relative', marginTop: '14px', flexGrow: 1, width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
+    <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <AutoSizer>
+      <Virtuoso
-        {({ height, width }) => (
+        ref={virtuosoRef}
-          <List
+        data={messages}
-            ref={listRef}
+        itemContent={rowRenderer}
-            width={width}
+        atBottomThreshold={50}
-            height={height}
+        followOutput="smooth"
-            rowCount={messages.length}
+        onScroll={handleScroll}
-            rowHeight={cache.rowHeight}
+        overscan={10}
-            rowRenderer={rowRenderer}
+        increaseViewportBy={300} 
-            onScroll={handleScrollDebounced}
+        atBottomStateChange={handleAtBottomStateChange}  // Detect bottom status
-            deferredMeasurementCache={cache}
+      />
-            onRowsRendered={recomputeListHeights} // Force recompute on render
+
-            overscanRowCount={10} // For performance: pre-render some rows
-          />
-        )}
-      </AutoSizer>
       {showScrollButton && (
         <button
-          onClick={scrollToBottom}
+          onClick={()=> scrollToBottom()}
           style={{
             position: 'absolute',
             bottom: 20,
@@ -230,9 +177,7 @@ let uniqueInitialMessages = Array.from(uniqueInitialMessagesMap.values()).sort((
         >
           Scroll to Unread Messages
         </button>
-        
       )}
-     
     </div>
   );
-};
+};