diff --git a/packages/react/src/lib/messageListHelpers.js b/packages/react/src/lib/messageListHelpers.js
index 9eda32ec60..63b394faf3 100644
--- a/packages/react/src/lib/messageListHelpers.js
+++ b/packages/react/src/lib/messageListHelpers.js
@@ -2,12 +2,12 @@ import cloneArray from './cloneArray';
// Caution: Not a pure function
export const insertMessage = (messages, message) => {
- const idx = messages.findIndex((m) => new Date(m.ts) < new Date(message.ts));
+ const idx = messages.findIndex((m) => new Date(m.ts) > new Date(message.ts));
if (idx === -1) {
- // all the messages are newer than the current message, insert at last
+ // all the messages are older than the current message, insert at last
messages.push(message);
} else if (idx === 0) {
- // the message is the latest one, insert at front
+ // the message is the oldest one, insert at front
messages.unshift(message);
} else {
messages.splice(idx, 0, message);
diff --git a/packages/react/src/store/messageStore.js b/packages/react/src/store/messageStore.js
index 4f84f8c1f8..2fbd6e6b3c 100644
--- a/packages/react/src/store/messageStore.js
+++ b/packages/react/src/store/messageStore.js
@@ -23,9 +23,10 @@ const useMessageStore = create((set, get) => ({
setFilter: (filter) => set(() => ({ filtered: filter })),
setMessages: (newMessages, append = false) =>
set((state) => {
+ const incomingAscending = [...newMessages].reverse();
const allMessages = append
- ? [...state.messages, ...newMessages]
- : newMessages;
+ ? [...incomingAscending, ...state.messages]
+ : incomingAscending;
const uniqueMessages = Array.from(
new Map(allMessages.map((msg) => [msg._id, msg])).values()
);
diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
index ab8c3bc2f0..0c669c75d5 100644
--- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
+++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
@@ -43,7 +43,7 @@ export const MessageAggregator = ({
const messages = useMessageStore((state) => state.messages);
const threadMessages = useMessageStore((state) => state.threadMessages) || [];
const allMessages = useMemo(
- () => [...messages, ...[...threadMessages].reverse()],
+ () => [...messages, ...threadMessages],
[messages, threadMessages]
);
diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js
index 31dd291b75..5f4249da60 100644
--- a/packages/react/src/views/MessageList/MessageList.js
+++ b/packages/react/src/views/MessageList/MessageList.js
@@ -76,37 +76,34 @@ const MessageList = ({
)}
- {filteredMessages
- .slice()
- .reverse()
- .map((msg, index, arr) => {
- const prev = arr[index - 1];
- const next = arr[index + 1];
+ {filteredMessages.slice().map((msg, index, arr) => {
+ const prev = arr[index - 1];
+ const next = arr[index + 1];
- if (!msg) return null;
- const newDay = isMessageNewDay(msg, prev);
- const sequential = isMessageSequential(msg, prev, 300);
- const lastSequential =
- sequential && isMessageLastSequential(msg, next);
- const showUnreadDivider =
- firstUnreadMessageId && msg._id === firstUnreadMessageId;
+ if (!msg) return null;
+ const newDay = isMessageNewDay(msg, prev);
+ const sequential = isMessageSequential(msg, prev, 300);
+ const lastSequential =
+ sequential && isMessageLastSequential(msg, next);
+ const showUnreadDivider =
+ firstUnreadMessageId && msg._id === firstUnreadMessageId;
- return (
-
- {showUnreadDivider && (
- Unread Messages
- )}
-
-
- );
- })}
+ return (
+
+ {showUnreadDivider && (
+ Unread Messages
+ )}
+
+
+ );
+ })}
{showReportMessage && (