Fix Loading of Older Thread Messages in Thread Message Modal

packages/api/src/EmbeddedChatApi.ts

@@ -572,6 +572,28 @@ export default class EmbeddedChatApi {
     }
   }
 
+  async getAllThreadMessages(type?: string, text?: string, offset?:number, count?:number) {
+    try {
+      const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+      console.log("offset",offset);
+      console.log("count",count);
+      const allthreads = await fetch(
+        `${this.host}/api/v1/chat.getThreadsList?rid=${this.rid}&type=${type}&text=${text}&offset=${offset}&count=${count}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Auth-Token": authToken,
+            "X-User-Id": userId,
+          },
+          method: "GET",
+        }
+      );
+      return await allthreads.json();
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
   async getChannelRoles(isChannelPrivate = false) {
     const roomType = isChannelPrivate ? "groups" : "channels";
     try {

packages/docs/blog/EmbeddedChat-2023.md

@@ -132,6 +132,7 @@ class EmbeddedChatApi {
         field?: object | undefined;
     }): Promise<any>;
     getThreadMessages(tmid: string): Promise<any>;
+    getAllThreadMessages( type?: string, text?: string, offset?:number, count?:number): Promise<any>;
     getChannelRoles(): Promise<any>;
     sendTypingStatus(username: string, typing: boolean): Promise<void>;
     sendMessage(message: any, threadId: string): Promise<any>;

packages/react/src/hooks/useFetchChatData.js

@@ -1,4 +1,4 @@
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext,useState } from 'react';
 import RCContext from '../context/RCInstance';
 import {
   useUserStore,
@@ -17,12 +17,19 @@ const useFetchChatData = (showRoles) => {
   const setStarredMessages = useStarredMessageStore(
     (state) => state.setStarredMessages
   );
+  const [loading, setLoading] = useState(false);
   const isUserAuthenticated = useUserStore(
     (state) => state.isUserAuthenticated
   );
   const setViewUserInfoPermissions = useUserStore(
     (state) => state.setViewUserInfoPermissions
   );
+  const AllThreadMessages = useMessageStore((state) => state.allThreadMessages);
+  const setAllThreadMessages = useMessageStore(
+    (state) => state.setAllThreadMessages
+  );
+  const setOffset=useMessageStore((state)=>state.setOffset);
+  const threadOffset= useMessageStore((state)=>state.threadOffset);
 
   const getMessagesAndRoles = useCallback(
     async (anonymousMode) => {
@@ -90,6 +97,27 @@ const useFetchChatData = (showRoles) => {
     ]
   );
 
+  const getAllThreadMessages = useCallback(
+    async (anonymousMode) => {
+      if (isUserAuthenticated) {
+        try {
+          if (!isUserAuthenticated && !anonymousMode) {
+            return;
+          }
+          setLoading(true);
+          const { threads: allThreadMessages } = await RCInstance.getAllThreadMessages('', '', threadOffset, 30);
+          setAllThreadMessages(allThreadMessages,true);
+          setOffset((prevOffset) => prevOffset + 30);
+          setLoading(false);
+        } catch (e) {
+          console.log(e);
+          setLoading(false);
+        }
+      }
+    },
+    [isUserAuthenticated, RCInstance, setAllThreadMessages]
+  );
+
   const getStarredMessages = useCallback(
     async (anonymousMode) => {
       if (isUserAuthenticated) {
@@ -107,7 +135,7 @@ const useFetchChatData = (showRoles) => {
     [isUserAuthenticated, RCInstance, setStarredMessages]
   );
 
-  return { getMessagesAndRoles, getStarredMessages };
+  return { getMessagesAndRoles, getStarredMessages, getAllThreadMessages };
 };
 
 export default useFetchChatData;

packages/react/src/store/messageStore.js

@@ -6,6 +6,9 @@ const useMessageStore = create((set, get) => ({
   messages: [],
   isMessageLoaded: false,
   threadMessages: [],
+  allThreadMessages: [],
+  threadOffset:0,
+
   filtered: false,
   editMessage: {},
   quoteMessage: [],
@@ -113,6 +116,19 @@ const useMessageStore = create((set, get) => ({
   },
   setThreadMessages: (messages) => set(() => ({ threadMessages: messages })),
   setHeaderTitle: (title) => set(() => ({ headerTitle: title })),
+  setAllThreadMessages: (newMessages, append = false) =>
+    set((state) => {
+      const allMessages = append
+        ? [...state.allThreadMessages, ...newMessages]
+        : newMessages;
+      const uniqueMessages = Array.from(
+        new Map(allMessages.map((msg) => [msg._id, msg])).values()
+      );
+      return {
+        allThreadMessages: uniqueMessages,
+      };
+    }),
+  setOffset: (offset) => set(() => ({ threadOffset: offset })),
 }));
 
 export default useMessageStore;

packages/react/src/views/ChatBody/ChatBody.js

@@ -59,6 +59,12 @@ const ChatBody = ({
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
   const channelInfo = useChannelStore((state) => state.channelInfo);
   const isLoginIn = useLoginStore((state) => state.isLoginIn);
+  const setOffset = useMessageStore((state) => state.setOffset);
+  const threadOffset = useMessageStore((state) => state.threadOffset);
+  const setAllThreadMessages = useMessageStore(
+    (state) => state.setAllThreadMessages
+  );
+  const { getAllThreadMessages } = useFetchChatData();
 
   const [isThreadOpen, threadMainMessage] = useMessageStore((state) => [
     state.isThreadOpen,
@@ -80,6 +86,30 @@ const ChatBody = ({
   const username = useUserStore((state) => state.username);
 
   const { getMessagesAndRoles } = useFetchChatData(showRoles);
+  const loadMoreThreadMessages = useCallback(async (currentLength) => {
+    if (isUserAuthenticated && threadMainMessage?._id) {
+      try {
+        if (!isUserAuthenticated && !anonymousMode) {
+          return;
+        }
+        const { threads: moreThreadMessages } = await RCInstance.getAllThreadMessages(
+          '', '', threadOffset, 30
+        );
+        setThreadMessages((prevMessages) => [...prevMessages, ...moreThreadMessages]);
+        setOffset(threadOffset + 30);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, [
+    isUserAuthenticated,
+    anonymousMode,
+    RCInstance,
+    threadMainMessage?._id,
+    setThreadMessages,
+    threadOffset,
+    setOffset,
+  ]);
 
   const getThreadMessages = useCallback(async () => {
     if (isUserAuthenticated && threadMainMessage?._id) {
@@ -92,6 +122,8 @@ const ChatBody = ({
           isChannelPrivate
         );
         setThreadMessages(messages.reverse());
+
+        // getAllThreadMessages('','',10,30);
       } catch (e) {
         console.error(e);
       }
@@ -181,12 +213,15 @@ const ChatBody = ({
       setIsUserScrolledUp(false);
       setOtherUserMessage(false);
     }
+
   }, [
     messageListRef,
     setScrollPosition,
     setIsUserScrolledUp,
     setPopupVisible,
     setOtherUserMessage,
+
+
   ]);
 
   const showNewMessagesPopup = () => {

packages/react/src/views/ChatLayout/ChatLayout.js

@@ -12,6 +12,7 @@ import {
   useThreadsMessageStore,
   useMemberStore,
   useSidebarStore,
+  useMessageStore,
 } from '../../store';
 
 import RoomMembers from '../RoomMembers/RoomMember';
@@ -35,6 +36,8 @@ import useUiKitStore from '../../store/uiKitStore';
 
 const ChatLayout = () => {
   const messageListRef = useRef(null);
+  const threadListRef = useRef(null);
+  const [isFetching, setIsFetching]=useState(false);
   const { classNames, styleOverrides } = useComponentOverrides('ChatBody');
   const { RCInstance, ECOptions } = useRCContext();
   const anonymousMode = ECOptions?.anonymousMode;
@@ -45,6 +48,9 @@ const ChatLayout = () => {
   const starredMessages = useStarredMessageStore(
     (state) => state.starredMessages
   );
+  const setAllThreadMessages = useMessageStore(
+    (state) => state.setAllThreadMessages
+  );
   const showSidebar = useSidebarStore((state) => state.showSidebar);
   const showMentions = useMentionsStore((state) => state.showMentions);
   const showAllFiles = useFileStore((state) => state.showAllFiles);
@@ -97,6 +103,11 @@ const ChatLayout = () => {
   useEffect(() => {
     getStarredMessages();
   }, [showSidebar]);
+
+
+
+
+
   return (
     <Box
       css={styles.layout}
@@ -123,7 +134,7 @@ const ChatLayout = () => {
           {showMembers && <RoomMembers members={members} />}
           {showSearch && <SearchMessages />}
           {showChannelinfo && <Roominfo />}
-          {showAllThreads && <ThreadedMessages />}
+          {showAllThreads && <ThreadedMessages threadListRef={threadListRef}/>}
           {showAllFiles && <FileGallery />}
           {showMentions && <MentionedMessages />}
           {showPinned && <PinnedMessages />}

packages/react/src/views/MessageAggregators/ThreadedMessages.js

@@ -1,16 +1,14 @@
-import React, { useState, useMemo } from 'react';
-
+import React, { useState, useMemo, forwardRef } from 'react';
 import { useComponentOverrides } from '@embeddedchat/ui-elements';
 import { useMessageStore } from '../../store';
-
 import { MessageAggregator } from './common/MessageAggregator';
 
-const ThreadedMessages = () => {
+const ThreadedMessages = ({threadListRef}) => {
   const messages = useMessageStore((state) => state.messages);
   const { variantOverrides } = useComponentOverrides('ThreadedMessages');
   const viewType = variantOverrides.viewType || 'Sidebar';
   const [text, setText] = useState('');
-
+  const allThreadMessages = useMessageStore((state) => state.allThreadMessages);
   const handleInputChange = (e) => {
     setText(e.target.value);
   };
@@ -24,19 +22,23 @@ const ThreadedMessages = () => {
   );
 
   return (
-    <MessageAggregator
-      title="Threads"
-      iconName="thread"
-      noMessageInfo="No threads found"
-      searchProps={{
-        isSearch: true,
-        handleInputChange,
-        placeholder: 'Search Threads',
-      }}
-      searchFiltered={searchFiltered}
-      shouldRender={(msg) => !msg.t && msg.tcount}
-      viewType={viewType}
-    />
+
+      <MessageAggregator
+        threadListRef={threadListRef}
+        title="Threads"
+        fetchedMessageList={allThreadMessages}
+        iconName="thread"
+        noMessageInfo="No threads found"
+        searchProps={{
+          isSearch: true,
+          handleInputChange,
+          placeholder: 'Search Threads',
+        }}
+        searchFiltered={searchFiltered}
+        shouldRender={(msg) => !msg.t && msg.tcount}
+        viewType={viewType}
+      />
+
   );
 };