Fixed websockets chat message limit bug

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 decryptMessages = (encryptedMessages: any[])=> {
+   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[], 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);