fix: thread message issue (#860)

* fix thread message issue * Fix aggregator issue
RocketChat · Jan 11, 2025 · dc2c2dd · dc2c2dd
1 parent 2f83344
commit dc2c2dd
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 67 deletions.
diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts
@@ -553,15 +553,23 @@ export default class EmbeddedChatApi {
   }
 
   async getThreadMessages(tmid: string, isChannelPrivate = false) {
-    return this.getMessages(
-      false,
-      {
-        query: {
-          tmid,
-        },
-      },
-      isChannelPrivate
-    );
+    try {
+      const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+      const messages = await fetch(
+        `${this.host}/api/v1/chat.getThreadMessages?roomId=${this.rid}&tmid=${tmid}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Auth-Token": authToken,
+            "X-User-Id": userId,
+          },
+          method: "GET",
+        }
+      );
+      return await messages.json();
+    } catch (err) {
+      console.log(err);
+    }
   }
 
   async getChannelRoles(isChannelPrivate = false) {

diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js
@@ -91,7 +91,7 @@ const ChatBody = ({
           threadMainMessage._id,
           isChannelPrivate
         );
-        setThreadMessages(messages);
+        setThreadMessages(messages.reverse());
       } catch (e) {
         console.error(e);
       }

diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
@@ -39,9 +39,10 @@ export const MessageAggregator = ({
   const messages = useMessageStore((state) => state.messages);
   const threadMessages = useMessageStore((state) => state.threadMessages) || [];
   const allMessages = useMemo(
-    () => [...messages, ...threadMessages],
+    () => [...messages, ...[...threadMessages].reverse()],
     [messages, threadMessages]
   );
+
   const [messageRendered, setMessageRendered] = useState(false);
   const { loading, messageList } = useSetMessageList(
     fetchedMessageList || searchFiltered || allMessages,
@@ -137,65 +138,67 @@ export const MessageAggregator = ({
             <NoMessagesIndicator iconName={iconName} message={noMessageInfo} />
           )}
 
-          {messageList.map((msg, index, arr) => {
-            const newDay = isMessageNewDay(msg, arr[index - 1]);
-            if (!messageRendered && shouldRender(msg)) {
-              setMessageRendered(true);
-            }
+          {[...new Map(messageList.map((msg) => [msg._id, msg])).values()].map(
+            (msg, index, arr) => {
+              const newDay = isMessageNewDay(msg, arr[index - 1]);
+              if (!messageRendered && shouldRender(msg)) {
+                setMessageRendered(true);
+              }
 
-            return (
-              <React.Fragment key={msg._id}>
-                {type === 'message' && newDay && (
-                  <MessageDivider>
-                    {format(new Date(msg.ts), 'MMMM d, yyyy')}
-                  </MessageDivider>
-                )}
-                {type === 'file' ? (
-                  <FileDisplay
-                    key={`${msg._id}-aggregated`}
-                    fileMessage={msg}
-                  />
-                ) : (
-                  <Box
-                    position="relative"
-                    style={{
-                      display: 'flex',
-                    }}
-                  >
-                    <Message
+              return (
+                <React.Fragment key={msg._id}>
+                  {type === 'message' && newDay && (
+                    <MessageDivider>
+                      {format(new Date(msg.ts), 'MMMM d, yyyy')}
+                    </MessageDivider>
+                  )}
+                  {type === 'file' ? (
+                    <FileDisplay
                       key={`${msg._id}-aggregated`}
-                      message={msg}
-                      newDay={false}
-                      type="default"
-                      showAvatar
-                      showToolbox={false}
-                      showRoles={showRoles}
-                      isInSidebar
-                      style={{
-                        flex: 1,
-                        padding: 0,
-                        marginLeft: '15px',
-                        minWidth: 0,
-                      }}
+                      fileMessage={msg}
                     />
-
-                    <ActionButton
-                      square
-                      ghost
-                      onClick={() => setJumpToMessage(msg)}
-                      css={{
-                        position: 'relative',
-                        zIndex: 10,
-                        marginRight: '5px',
+                  ) : (
+                    <Box
+                      position="relative"
+                      style={{
+                        display: 'flex',
                       }}
                     >
-                      <Icon name="arrow-back" size="1.25rem" />
-                    </ActionButton>
-                  </Box>
-                )}
-              </React.Fragment>
-            );
-          })}
+                      <Message
+                        key={`${msg._id}-aggregated`}
+                        message={msg}
+                        newDay={false}
+                        type="default"
+                        showAvatar
+                        showToolbox={false}
+                        showRoles={showRoles}
+                        isInSidebar
+                        style={{
+                          flex: 1,
+                          padding: 0,
+                          marginLeft: '15px',
+                          minWidth: 0,
+                        }}
+                      />
+
+                      <ActionButton
+                        square
+                        ghost
+                        onClick={() => setJumpToMessage(msg)}
+                        css={{
+                          position: 'relative',
+                          zIndex: 10,
+                          marginRight: '5px',
+                        }}
+                      >
+                        <Icon name="arrow-back" size="1.25rem" />
+                      </ActionButton>
+                    </Box>
+                  )}
+                </React.Fragment>
+              );
+            }
+          )}
         </Box>
       )}
     </ViewComponent>

diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js
@@ -17,9 +17,11 @@ const MessageList = ({ messages }) => {
   const isMessageNewDay = (current, previous) =>
     !previous || !isSameDay(new Date(current.ts), new Date(previous.ts));
 
+  const filteredMessages = messages.filter((msg) => !msg.tmid);
+
   return (
     <>
-      {messages.length === 0 ? (
+      {filteredMessages.length === 0 ? (
         <Box
           css={css`
             text-align: center;
@@ -35,7 +37,7 @@ const MessageList = ({ messages }) => {
         </Box>
       ) : (
         <>
-          {messages.map((msg, index, arr) => {
+          {filteredMessages.map((msg, index, arr) => {
             const prev = arr[index + 1];
             const next = arr[index - 1];