Fixed websockets chat message limit bug

package-lock.json

@@ -70,6 +70,7 @@
         "@typescript-eslint/eslint-plugin": "^7.1.1",
         "@typescript-eslint/parser": "^7.1.1",
         "@vitejs/plugin-react": "^4.2.1",
+        "esbuild-plugin-react-virtualized": "^1.0.4",
         "eslint": "^8.57.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.5",
@@ -4235,6 +4236,15 @@
         "@esbuild/win32-x64": "0.19.12"
       }
     },
+    "node_modules/esbuild-plugin-react-virtualized": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/esbuild-plugin-react-virtualized/-/esbuild-plugin-react-virtualized-1.0.4.tgz",
+      "integrity": "sha512-/Y+82TBduHox0/uhJlTgUqi3ZWN+qZPF0xy9crkHQE2AOOdm76l6VY2F0Mdfvue9hqXz2FOlKHlHUVXNalHLzA==",
+      "dev": true,
+      "peerDependencies": {
+        "esbuild": "*"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",

package.json

@@ -74,6 +74,7 @@
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",
+    "esbuild-plugin-react-virtualized": "^1.0.4",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",

src/components/Chat/ChatGroup.tsx

@@ -10,7 +10,7 @@ import Tiptap from './TipTap'
 import { CustomButton } from '../../App-styles'
 import CircularProgress from '@mui/material/CircularProgress';
 import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar'
-import { getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from '../../App'
+import { getBaseApiReact, getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from '../../App'
 import { CustomizedSnackbars } from '../Snackbar/Snackbar'
 import { PUBLIC_NOTIFICATION_CODE_FIRST_SECRET_KEY } from '../../constants/codes'
 import { useMessageQueue } from '../../MessageQueueContext'
@@ -22,13 +22,8 @@ import { ExitIcon } from '../../assets/Icons/ExitIcon'
 import { RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS } from '../../constants/resourceTypes'
 import { isExtMsg } from '../../background'
 
-
 const uid = new ShortUniqueId({ length: 5 });
 
-
-
-
-
 export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey, myAddress, handleNewEncryptionNotification, hide, handleSecretKeyCreationInProgress, triedToFetchSecretKey, myName, balance}) => {
   const [messages, setMessages] = useState([])
   const [chatReferences, setChatReferences] = useState({})
@@ -101,8 +96,28 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
     })
    }
 
+   const middletierFunc = async (data: any, groupId: string) => {
+      try {
+        if (hasInitialized.current) {
+          decryptMessages(data, true);
+          return;
+        }
+        hasInitialized.current = true;
+        const url = `${getBaseApiReact()}/chat/messages?txGroupId=${groupId}&encoding=BASE64&limit=0&reverse=false`;
+        const response = await fetch(url, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const responseData = await response.json();
+        decryptMessages(responseData, false);
+      } catch (error) {
+        console.error(error);
+      }
+   }
 
-    const decryptMessages = (encryptedMessages: any[])=> {
+    const decryptMessages = ( encryptedMessages: any[], isInitiated: boolean )=> {
       try {
         if(!secretKeyRef.current){
           checkForFirstSecretKeyNotification(encryptedMessages)
@@ -125,7 +140,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
                 }
               }), selectedGroup)
               res(combineUIAndExtensionMsgs)
-              if(hasInitialized.current){
+              if(isInitiated){
                
                 const formatted = combineUIAndExtensionMsgs.filter((rawItem)=> !rawItem?.chatReference).map((item: any)=> {
                   return {
@@ -216,7 +231,6 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
                   }
                 } )
                 setMessages(formatted)
-                hasInitialized.current = true
                 setChatReferences((prev) => {
                   let organizedChatReferences = { ...prev };
                 
@@ -336,7 +350,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
             clearTimeout(timeoutIdRef.current);
             groupSocketTimeoutRef.current = setTimeout(pingGroupSocket, 45000); // Ping every 45 seconds
           } else {
-          decryptMessages(JSON.parse(e.data))
+            middletierFunc(JSON.parse(e.data), selectedGroup)
           setIsLoading(false)
           }
         } catch (error) {
@@ -601,7 +615,6 @@ const clearEditorContent = () => {
     }
   }, [])
   
-  
   return (
     <div style={{
       height: isMobile ? '100%' : '100%',

src/components/Chat/ChatList.tsx

@@ -4,6 +4,7 @@ import { MessageItem } from './MessageItem';
 import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 
 export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onReply, handleReaction, chatReferences, tempChatReferences }) => {
+
   const virtuosoRef = useRef();
   const [messages, setMessages] = useState(initialMessages);
   const [showScrollButton, setShowScrollButton] = useState(false);

vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 // Import path module for resolving file paths
 import { resolve } from 'path';
+import fixReactVirtualized from 'esbuild-plugin-react-virtualized'
 
 export default defineConfig({
   test: {
@@ -25,5 +26,10 @@ export default defineConfig({
         assetFileNames: `[name].[ext]`
       }
     }
-  }
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      plugins: [fixReactVirtualized],
+    },
+  },
 });