Bug: Message list order flips on every re-render due to in-place array mutation

[7vignesh]

Description

In MessageList.js, the filteredMessages array is reversed using .reverse() directly — which mutates the array in-place. Since the same array reference can be reused across renders, every re-render flips the message order back and forth, causing visible ordering issues in the chat UI.

File: packages/react/src/views/MessageList/MessageList.js — line 81

Steps to Reproduce

1. Open any EmbeddedChat instance with an active room that has messages
2. Start typing in the chat input box (this triggers a re-render)
3. Observe the message list — the order of messages flips with each keystroke
4. Alternatively, trigger any state update (e.g., emoji picker open/close) and observe the same flip

Expected Behavior

The message list should maintain a stable, consistent order across re-renders. Typing or any unrelated state update should not affect the order of displayed messages.

Actual Behavior

The message list reverses its order on every re-render. Messages that were newest-at-bottom appear newest-at-top on the next render, and vice versa. "New day" date dividers and sequential message groupings also break because prev/next neighbor calculations are done on the mutated array.

Environment

• Affects all environments (browser, embedded)
• Reproducible in both development and production builds
• No specific OS or browser dependency

Additional Information

Root Cause:
Array.prototype.reverse() mutates the original array in-place. When the same array reference is reused between renders (via useMemo or .filter() returning the same ref), each render toggles the order.

Buggy code:

filteredMessages
  .reverse()
  .map((msg, index, arr) => { ... })

[7vignesh]

@Spiral-Memory

the fix would be ?

[...filteredMessages]
  .reverse()
  .map((msg, index, arr) => { ... })