@ethora/chat-component-rn 26.8.5 → 26.8.6

package/src/assets/icons.tsx

@@ -305,18 +305,18 @@ export const DeleteIcon = ({
   </Svg>
 );
 
-export const CopyIcon = ({ color = '#8C8C8C', ...props }) => (
+export const CopyIcon = ({ color = '#1F1F1F', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
     <Path
       d="M8 4V16C8 16.5304 8.21071 17.0391 8.58579 17.4142C8.96086 17.7893 9.46957 18 10 18H18C18.5304 18 19.0391 17.7893 19.4142 17.4142C19.7893 17.0391 20 16.5304 20 16V7.242C20 6.97556 19.9467 6.71181 19.8433 6.46624C19.7399 6.22068 19.5885 5.99824 19.398 5.812L16.083 2.57C15.7094 2.20466 15.2076 2.00007 14.685 2H10C9.46957 2 8.96086 2.21071 8.58579 2.58579C8.21071 2.96086 8 3.46957 8 4Z"
-      stroke="#1F1F1F"
+      stroke={color}
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <Path
       d="M16 18V20C16 20.5304 15.7893 21.0391 15.4142 21.4142C15.0391 21.7893 14.5304 22 14 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V9C4 8.46957 4.21071 7.96086 4.58579 7.58579C4.96086 7.21071 5.46957 7 6 7H8"
-      stroke="#1F1F1F"
+      stroke={color}
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -324,11 +324,11 @@ export const CopyIcon = ({ color = '#8C8C8C', ...props }) => (
   </Svg>
 );
 
-export const ReplyIcon = ({ color = '#8C8C8C', ...props }) => (
+export const ReplyIcon = ({ color = '#1F1F1F', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
     <Path
       d="M9.89797 7.51968C9.9311 7.5051 9.96737 7.49907 10.0034 7.50217C10.0395 7.50526 10.0742 7.51737 10.1044 7.53738C10.1346 7.55739 10.1592 7.58467 10.1761 7.6167C10.193 7.64873 10.2015 7.68448 10.201 7.72068V9.45018C10.201 9.6491 10.28 9.83986 10.4206 9.98051C10.5613 10.1212 10.7521 10.2002 10.951 10.2002C11.9515 10.2002 13.9705 10.2077 15.901 11.4332C17.377 12.3692 18.886 14.0732 19.7935 17.2472C18.2635 15.7727 16.516 14.9732 14.986 14.5487C14.0456 14.2884 13.0791 14.1345 12.1045 14.0897C11.7056 14.0709 11.3059 14.0749 10.9075 14.1017H10.888L10.8805 14.1032L10.951 14.8502L10.876 14.1032C10.6908 14.1218 10.5192 14.2085 10.3945 14.3466C10.2698 14.4846 10.2008 14.6641 10.201 14.8502V16.5797C10.201 16.7417 10.036 16.8437 9.89797 16.7807L3.92197 12.3812L3.85897 12.3392C3.82635 12.3196 3.79936 12.2919 3.78063 12.2588C3.76189 12.2256 3.75204 12.1882 3.75204 12.1502C3.75204 12.1121 3.76189 12.0747 3.78063 12.0416C3.79936 12.0085 3.82635 11.9808 3.85897 11.9612L3.92197 11.9192L9.89797 7.51968ZM11.701 15.5792C11.804 15.5792 11.9155 15.5822 12.0355 15.5882C12.6865 15.6182 13.5865 15.7172 14.5855 15.9947C16.5745 16.5467 18.9295 17.7977 20.4955 20.6147C20.5802 20.7667 20.7151 20.8846 20.8771 20.9481C21.0392 21.0116 21.2183 21.0167 21.3837 20.9626C21.5492 20.9086 21.6907 20.7986 21.7839 20.6517C21.8772 20.5047 21.9165 20.3299 21.895 20.1572C21.199 14.5922 19.066 11.6642 16.705 10.1672C14.8375 8.98218 12.9145 8.75418 11.701 8.71068V7.72068C11.7011 7.41179 11.6179 7.10858 11.46 6.84305C11.3022 6.57753 11.0756 6.35953 10.8042 6.21207C10.5327 6.06461 10.2265 5.99314 9.91788 6.00522C9.60922 6.01729 9.30954 6.11246 9.05047 6.28068L3.05947 10.6907C2.81179 10.8453 2.60753 11.0604 2.46591 11.3157C2.3243 11.571 2.25 11.8582 2.25 12.1502C2.25 12.4422 2.3243 12.7293 2.46591 12.9847C2.60753 13.24 2.81179 13.4551 3.05947 13.6097L9.05047 18.0197C9.30954 18.1879 9.60922 18.2831 9.91788 18.2951C10.2265 18.3072 10.5327 18.2358 10.8042 18.0883C11.0756 17.9408 11.3022 17.7228 11.46 17.4573C11.6179 17.1918 11.7011 16.8886 11.701 16.5797V15.5792Z"
-      fill="#1F1F1F"
+      fill={color}
     />
   </Svg>
 );

package/src/components/MainComponents/ChatHeader.tsx

@@ -16,7 +16,8 @@ import Button from '../styled/Button';
 import { BackIcon, BurgerMenuIcon } from '../../assets/icons';
 import { CallButtons } from '../VideoCalls/CallButtons';
 import { LanguageSelectorButton } from './LanguageSelectorButton';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import type { RootState } from '../../roomStore';
 import Composing from '../styled/StyledInputComponents/Composing';
 import {
   deleteRoom,
@@ -27,7 +28,6 @@ import { useXmppClient } from '../../context/xmppProvider';
 import { setActiveModal } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { RoomMenu } from '../MenuRoom/MenuRoom';
-import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useFileToken } from '../../hooks/useFileToken';
 import { appendFileToken } from '../../helpers/secureFileUrl';
@@ -51,10 +51,18 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   const dispatch = useDispatch();
   const { client } = useXmppClient();
 
-  const { roomsList, activeRoomJID } = useRoomState(currentRoom.jid);
-  const roomState = useRoomState(currentRoom.jid).room;
-  const composing = roomState?.composing;
+  const reduxStore = useStore<RootState>();
+  const activeRoomJID = useSelector(
+    (state: RootState) => state.rooms.activeRoomJID
+  );
+  const roomState = useSelector((state: RootState) =>
+    currentRoom?.jid ? state.rooms.rooms?.[currentRoom.jid] : undefined
+  );
   const { config } = useChatSettingState();
+  const roomsList = useSelector((state: RootState) =>
+    config?.chatHeaderBurgerMenu ? state.rooms.rooms : null
+  );
+  const composing = roomState?.composing;
   const theme = useTheme();
   const t = useT();
 
@@ -67,11 +75,12 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
     client?.leaveTheRoomStanza(activeRoomJID!);
     dispatch(deleteRoom({ jid: activeRoomJID! }));
 
-    const nextRoomJID = Object.keys(roomsList)[0] || null;
+    const nextRoomJID =
+      Object.keys(reduxStore.getState().rooms.rooms || {})[0] || null;
     if (nextRoomJID) {
       dispatch(setCurrentRoom({ roomJID: nextRoomJID }));
     }
-  }, [activeRoomJID, roomsList, dispatch, client]);
+  }, [activeRoomJID, reduxStore, dispatch, client]);
 
   const handleHeaderChatMenu = () => {
     Keyboard.dismiss();

package/src/components/MainComponents/ChatRoom.tsx

@@ -2,7 +2,8 @@
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { ChatContainer, NonRoomChat } from '../styled/StyledComponents';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import type { RootState } from '../../roomStore';
 import MessageList from './MessageList';
 import SendInput from '../styled/SendInput';
 import {
@@ -27,8 +28,8 @@ import { ChooseChatMessage } from './ChooseChatMessage';
 import { useRoomUrl } from '../../hooks/useRoomUrl';
 import { useSendMessage } from '../../hooks/useSendMessage';
 import { IConfig } from '../../types/models/config.model';
+import type { IMessage } from '../../types/types';
 import { useRoomInitialization } from '../../hooks/useRoomInitialization';
-import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useTheme } from '../../hooks/useTheme';
 import { isOwnMessage } from '../../helpers/isOwnMessage';
@@ -73,6 +74,8 @@ interface ChatRoomProps {
   eventHandlers?: IConfig['eventHandlers'];
 }
 
+const EMPTY_MESSAGES: IMessage[] = [];
+
 const ChatRoom: React.FC<ChatRoomProps> = React.memo(
   ({
     CustomMessageComponent,
@@ -104,14 +107,22 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       return storeConfig;
     }, [storeConfig, propsEventHandlers]);
 
-    const {
-      roomsList,
-      activeRoomJID,
-      editAction,
-      loading,
-      globalLoading,
-      roomMessages,
-    } = useRoomState();
+    const reduxStore = useStore<RootState>();
+    const activeRoomJID = useSelector(
+      (state: RootState) => state.rooms.activeRoomJID,
+    );
+    const activeRoom = useSelector((state: RootState) =>
+      activeRoomJID ? state.rooms.rooms?.[activeRoomJID] : undefined,
+    );
+    const hasRooms = useSelector(
+      (state: RootState) => Object.keys(state.rooms.rooms || {}).length > 0,
+    );
+    const editAction = useSelector((state: RootState) => state.rooms.editAction);
+    const globalLoading = useSelector(
+      (state: RootState) => state.rooms.isLoading,
+    );
+    const loading = !!activeRoom?.isLoading;
+    const roomMessages = activeRoom?.messages || EMPTY_MESSAGES;
     const {
       sendMessage: sendMs,
       sendMedia: sendMessageMedia,
@@ -183,15 +194,12 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
 
     const loadMoreMessages = useCallback(
       async (chatJID: string, max: number, idOfMessageBefore?: number) => {
-        if (isLoadingMore || roomsList?.[chatJID]?.historyComplete) {return;}
+        const room = reduxStore.getState().rooms.rooms?.[chatJID];
+        if (isLoadingMore || room?.historyComplete) {return;}
         const lastMsgId =
           typeof idOfMessageBefore !== 'string'
             ? idOfMessageBefore
-            : Number(
-                roomsList[chatJID].messages[
-                  roomsList[chatJID].messages.length - 2
-                ]?.id,
-              );
+            : Number(room?.messages?.[(room?.messages?.length || 0) - 2]?.id);
         setIsLoadingMore(true);
         try {
           // Return the promise so MessageList's `await loadMoreMessages`
@@ -205,7 +213,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
         }
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [client?.client?.jid, isLoadingMore, roomsList],
+      [client?.client?.jid, isLoadingMore, reduxStore],
     );
 
     const onCloseEdit = () => {
@@ -331,12 +339,10 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
 
     useRoomInitialization(
       activeRoomJID || '',
-      roomsList,
       (configWithEventHandlers || storeConfig || {}) as IConfig,
-      roomMessages.length,
     );
 
-    if (Object.keys(roomsList)?.length < 1 && !loading && !globalLoading) {
+    if (!hasRooms && !loading && !globalLoading) {
       return (
         <NonRoomChat>
           {/* <Text>No room. Let's create one!</Text> */}
@@ -345,7 +351,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       );
     }
 
-    if (!activeRoomJID || !roomsList?.[activeRoomJID]) {
+    if (!activeRoomJID || !activeRoom) {
       return <ChooseChatMessage />;
     }
 
@@ -465,7 +471,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
         >
           {!configWithEventHandlers?.disableHeader && (
             <ChatHeader
-              currentRoom={roomsList[activeRoomJID]}
+              currentRoom={activeRoom}
               handleBackClick={handleBackClick}
             />
           )}
@@ -482,7 +488,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               >
                 <Loader color={configWithEventHandlers?.colors?.primary} />
               </View>
-            ) : Object.keys(roomsList).length < 1 || !activeRoomJID ? (
+            ) : !hasRooms || !activeRoomJID ? (
               <View
                 style={{
                   flex: 1,
@@ -544,18 +550,18 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   resetNewMessageCounter: () => {},
                 }}
                 typingIndicator={
-                  roomsList[activeRoomJID]?.composing ? (
+                  activeRoom?.composing ? (
                     configWithEventHandlers?.customTypingIndicator
                       ?.customComponent ? (
                       <configWithEventHandlers.customTypingIndicator.customComponent
                         usersTyping={
-                          roomsList[activeRoomJID]?.composingList || []
+                          activeRoom?.composingList || []
                         }
                         text={
                           typeof configWithEventHandlers.customTypingIndicator
                             .text === 'function'
                             ? configWithEventHandlers.customTypingIndicator.text(
-                                roomsList[activeRoomJID]?.composingList || [],
+                                activeRoom?.composingList || [],
                               )
                             : configWithEventHandlers.customTypingIndicator
                                 .text || 'Typing...'
@@ -624,10 +630,10 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               'overlay' ||
               configWithEventHandlers.customTypingIndicator.position ===
                 'floating') &&
-            roomsList[activeRoomJID]?.composing && (
+            activeRoom?.composing && (
               <CustomTypingIndicator
                 usersTyping={
-                  roomsList[activeRoomJID]?.composingList || ['User']
+                  activeRoom?.composingList || ['User']
                 }
                 text={configWithEventHandlers.customTypingIndicator.text}
                 position={
@@ -637,7 +643,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                 customComponent={
                   configWithEventHandlers.customTypingIndicator.customComponent
                 }
-                isVisible={roomsList[activeRoomJID]?.composing || false}
+                isVisible={activeRoom?.composing || false}
               />
             )}
         </ChatContainer>

package/src/components/MainComponents/ChatWrapper.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useEffect, useMemo, useRef, useState} from 'react';
+import React, {FC, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import ChatRoom from './ChatRoom';
 import {RoomStack, RoomStackHandle} from './RoomStack';
@@ -72,6 +72,9 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
   usePendingNotification();
   const theme = useTheme();
   const roomStackRef = useRef<RoomStackHandle>(null);
+  // Stable, so ChatRoom's React.memo holds across this root's re-renders.
+  // (A hook: must stay above the early LoginForm return.)
+  const popRoom = useCallback(() => roomStackRef.current?.pop(), []);
 
   const [isInited, setInited] = useState(false);
   const [showModal, setShowModal] = useState(false);
@@ -94,15 +97,18 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     initMode,
   } = useXmppClient();
 
-  const {rooms, activeRoomJID} = useSelector((state: RootState) => state.rooms);
+  const rooms = useSelector((state: RootState) => state.rooms.rooms);
+  const activeRoomJID = useSelector(
+    (state: RootState) => state.rooms.activeRoomJID,
+  );
+  const activeRoomMessages = useSelector((state: RootState) =>
+    activeRoomJID ? state.rooms.rooms[activeRoomJID]?.messages : undefined,
+  );
 
-  const activeMessage = useMemo(() => {
-    if (activeRoomJID) {
-      return rooms[activeRoomJID]?.messages?.find(
-        message => message?.activeMessage,
-      );
-    }
-  }, [rooms, activeRoomJID]);
+  const activeMessage = useMemo(
+    () => activeRoomMessages?.find(message => message?.activeMessage),
+    [activeRoomMessages],
+  );
 
   const handleChangeChat = (chat: IRoom) => {
     dispatch(setCurrentRoom({roomJID: chat.jid}));
@@ -438,6 +444,16 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
   // List mode: the room is pushed over the list and can be swiped back
   // (RoomStack). With `roomJID` / `disableRooms` there is no list to return to.
   const listMode = !config?.disableRooms && !roomJID;
+
+  // The open thread, over the room (a message with `activeMessage` set).
+  const threadView = activeMessage ? (
+    <ThreadWrapper
+      key={activeMessage.id}
+      activeMessage={activeMessage}
+      user={user}
+      customMessageComponent={CustomMessageComponent || Message}
+    />
+  ) : null;
   const backToList = () => {
     dispatch(setCurrentRoom({ roomJID: '' }));
   };
@@ -529,8 +545,9 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                           CustomMessageComponent={
                             CustomMessageComponent || Message
                           }
-                          handleBackClick={() => roomStackRef.current?.pop()}
+                          handleBackClick={popRoom}
                         />
+                        {threadView}
                       </ChatWrapperBox>
                     )
                   }
@@ -543,6 +560,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                   <ChatRoom
                     CustomMessageComponent={CustomMessageComponent || Message}
                   />
+                  {threadView}
                 </ChatWrapperBox>
               )}
             </InteractionsOverlayProvider>

package/src/components/MainComponents/MessageContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Fragment, useMemo } from 'react';
+import React, { FC, Fragment, memo, useMemo } from 'react';
 import { IConfig, IMessage } from '../../types/types';
 import { isOwnMessage } from '../../helpers/isOwnMessage';
 import DateLabel from '../styled/DateLabel';
@@ -6,9 +6,6 @@ import SystemMessage from './SystemMessage';
 import NewMessageLabel from '../styled/NewMessageLabel';
 import {
   Message,
-  MessageText,
-  MessageTimestamp,
-  UserName,
 } from '../styled/StyledComponents';
 import { View } from 'react-native';
 
@@ -35,7 +32,7 @@ interface MessageContainerProps {
   className?: string;
 }
 
-export const MessageContainer: FC<MessageContainerProps> = ({
+const MessageContainerImpl: FC<MessageContainerProps> = ({
   CustomMessage,
   CustomDaySeparator,
   CustomNewMessageLabel,
@@ -101,28 +98,23 @@ export const MessageContainer: FC<MessageContainerProps> = ({
           <DateLabel date={messageDate} colors={config?.colors} />
         )
       ) : null}
+
       <MessageComponent
         message={message}
         isUser={isUser}
         isReply={isReply}
         className={className}
       >
-        {!CustomMessage ? (
-          <>
-            <MessageTimestamp>
-              {messageDate.toLocaleTimeString()}
-            </MessageTimestamp>
-            <UserName>{message.user.name}: </UserName>
-            <MessageText>{message.body}</MessageText>
-          </>
-        ) : (
+        {CustomMessage ? (
           <MessageComponent
             message={message}
             isUser={isUser}
             isReply={isReply}
           />
-        )}
+        ) : null}
       </MessageComponent>
     </View>
   );
 };
+
+export const MessageContainer = memo(MessageContainerImpl);

package/src/components/MainComponents/MessageList.tsx

@@ -23,7 +23,8 @@ import { msgSortableMs } from '../../roomStore/roomsSlice';
 import Composing from '../styled/StyledInputComponents/Composing';
 import TreadLabel from '../styled/TreadLabel';
 import { MessageContainer } from './MessageContainer';
-import { useRoomState } from '../../hooks/useRoomState';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../../roomStore';
 import Loader from '../styled/Loader';
 import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
@@ -67,6 +68,43 @@ interface MessageListProps<TMessage extends IMessage> {
   onReadBoundaryChange?: (boundaryTs: number | null) => void;
 }
 
+const mainIdCache = new WeakMap<object, string | null>();
+const mainMessageIdOf = (m: IMessage): string | null => {
+  if (!m?.mainMessage) {return null;}
+  const cached = mainIdCache.get(m);
+  if (cached !== undefined) {return cached;}
+  let id: string | null = null;
+  try {
+    const parsed = JSON.parse(m.mainMessage);
+    id = parsed?.id != null ? String(parsed.id) : null;
+  } catch {
+    id = null;
+  }
+  mainIdCache.set(m, id);
+  return id;
+};
+
+const sortKeyCache = new WeakMap<object, number>();
+const sortKeyOf = (m: IMessage): number => {
+  const cached = sortKeyCache.get(m);
+  if (cached !== undefined) {return cached;}
+  const key = new Date(m?.date as any).getTime() || 0;
+  sortKeyCache.set(m, key);
+  return key;
+};
+
+const dayKeyCache = new WeakMap<object, string>();
+const dayKeyOf = (m: IMessage): string => {
+  const cached = dayKeyCache.get(m);
+  if (cached !== undefined) {return cached;}
+  const key = new Date(m.date).toDateString();
+  dayKeyCache.set(m, key);
+  return key;
+};
+
+const keyExtractor = (item: IMessage) => String(item.id);
+const EMPTY_LIST: IMessage[] = [];
+
 const MessageList = <TMessage extends IMessage>({
   CustomMessage,
   CustomDaySeparator,
@@ -80,8 +118,12 @@ const MessageList = <TMessage extends IMessage>({
   activeMessage,
   onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
-  const { composing, messages, composingList } = useRoomState(roomJID)
-    .room! as IRoom;
+  const room = useSelector(
+    (state: RootState) => state.rooms.rooms?.[roomJID]
+  ) as IRoom | undefined;
+  const composing = room?.composing;
+  const composingList = room?.composingList;
+  const messages = room?.messages || EMPTY_LIST;
   const theme = useTheme();
   const [isUserAtBottom, setIsUserAtBottom] = useState(true);
   const [showNewMessageIndicator, setShowNewMessageIndicator] = useState(false);
@@ -107,17 +149,22 @@ const MessageList = <TMessage extends IMessage>({
   const flatListRef = useRef<FlatList<IMessage>>(null);
 
   const addReplyMessages = useMemo(() => {
+    const repliesByParent = new Map<string, IMessage[]>();
+    for (const mess of messages) {
+      if (!mess?.mainMessage || mess.isDeleted) {continue;}
+      const parentId = mainMessageIdOf(mess);
+      if (!parentId) {continue;}
+      const list = repliesByParent.get(parentId);
+      if (list) {
+        list.push(mess);
+      } else {
+        repliesByParent.set(parentId, [mess]);
+      }
+    }
+    if (repliesByParent.size === 0) {return messages;}
     return messages.map((message: IMessage) => {
-      const newMessage = {
-        ...message,
-        reply: messages.filter(
-          (mess: IMessage) =>
-            !!mess.mainMessage &&
-            JSON.parse(mess.mainMessage).id === message.id &&
-            !mess.isDeleted
-        ),
-      };
-      return newMessage;
+      const reply = repliesByParent.get(String(message.id));
+      return reply ? { ...message, reply } : message;
     });
   }, [messages]);
 
@@ -134,7 +181,7 @@ const MessageList = <TMessage extends IMessage>({
           item.isReply &&
           item.isReply === 'true' &&
           item.mainMessage &&
-          JSON.parse(item.mainMessage).id === activeMessage?.id
+          mainMessageIdOf(item) === String(activeMessage?.id)
       );
     } else {
       filtered = nonDeletedMessages.filter(
@@ -154,14 +201,21 @@ const MessageList = <TMessage extends IMessage>({
     // settles. Sorting here makes each render a stable, ordered view —
     // even mid-stream — so the user sees them appear from oldest to
     // newest with no swap animation.
-    const sorted = filtered.slice().sort((a, b) => {
-      const aNum = new Date(a?.date as any).getTime() || 0;
-      const bNum = new Date(b?.date as any).getTime() || 0;
-      return aNum - bNum;
-    });
-    const deduped = Array.from(
-      new Map(sorted.map((m) => [m.id, m])).values()
-    );
+    let sorted = filtered;
+    for (let i = 1; i < filtered.length; i++) {
+      if (sortKeyOf(filtered[i - 1]) > sortKeyOf(filtered[i])) {
+        sorted = filtered.slice().sort((a, b) => sortKeyOf(a) - sortKeyOf(b));
+        break;
+      }
+    }
+    const seen = new Set<string>();
+    const deduped: IMessage[] = [];
+    for (const m of sorted) {
+      const key = String(m.id);
+      if (seen.has(key)) {continue;}
+      seen.add(key);
+      deduped.push(m);
+    }
     return deduped;
   }, [addReplyMessages, isReply, roomJID, activeMessage]);
 
@@ -244,8 +298,21 @@ const MessageList = <TMessage extends IMessage>({
     return withDivider;
   }, [memoizedMessages, isUserAtBottom, roomJID, unreadWhileScrolledUp]);
 
+  const dateLabelIds = useMemo(() => {
+    const ids = new Set<string>();
+    let nextDay: string | null = null;
+    for (let i = dataMessages.length - 1; i >= 0; i--) {
+      const item = dataMessages[i];
+      if (String(item.id).startsWith('delimiter-new')) {continue;}
+      const day = dayKeyOf(item);
+      if (nextDay === null || day !== nextDay) {ids.add(String(item.id));}
+      nextDay = day;
+    }
+    return ids;
+  }, [dataMessages]);
+
   const renderMessage = useCallback(
-    ({ item, index }: { item: IMessage; index: number }) => {
+    ({ item }: { item: IMessage }) => {
       if (String(item.id).startsWith('delimiter-new')) {
         return (
           <MessageContainer
@@ -262,24 +329,7 @@ const MessageList = <TMessage extends IMessage>({
         );
       }
 
-      const messageDate = new Date(item.date).toDateString();
-      let showDateLabel = false;
-
-      let nextMessage = null;
-      for (let i = index + 1; i < dataMessages.length; i++) {
-        const candidate = dataMessages[i];
-        if (!String(candidate.id).startsWith('delimiter-new')) {
-          nextMessage = candidate;
-          break;
-        }
-      }
-      const nextMessageDate = nextMessage
-        ? new Date(nextMessage.date).toDateString()
-        : null;
-
-      if (!nextMessage || messageDate !== nextMessageDate) {
-        showDateLabel = true;
-      }
+      const showDateLabel = dateLabelIds.has(String(item.id));
 
       return (
         <MessageContainer
@@ -301,7 +351,7 @@ const MessageList = <TMessage extends IMessage>({
       CustomDaySeparator,
       CustomMessage,
       CustomNewMessageLabel,
-      dataMessages,
+      dateLabelIds,
       isReply,
       user.xmppUsername,
       user.walletAddress,
@@ -452,7 +502,10 @@ const MessageList = <TMessage extends IMessage>({
         ref={flatListRef}
         data={dataMessages}
         renderItem={renderMessage}
-        keyExtractor={(item) => item.id.toString()}
+        keyExtractor={keyExtractor}
+        initialNumToRender={15}
+        maxToRenderPerBatch={10}
+        windowSize={7}
         onEndReached={handleLoadMore}
         onScroll={handleScroll}
         onContentSizeChange={handleContentSizeChange}