@ethora/chat-component-rn 26.8.4 → 26.8.6

package/src/helpers/insertMessageWithDelimiter.ts

@@ -1,5 +1,4 @@
 import { IMessage } from '../types/types';
-import { isDateAfter, isDateBefore } from './dateComparison';
 import { msgSortableMs } from './msgSortableMs';
 
 // Robustly resolve a caller-supplied read marker to epoch milliseconds.
@@ -90,17 +89,29 @@ export function insertMessageWithDelimiter(
     return;
   }
 
-  const newMessageDate = message.date;
   const lastMessage = roomMessages[roomMessages.length - 1];
-  const firstMessage = roomMessages[0];
+  // Ordered by the id-encoded server timestamp (msgSortableMs), the same
+  // key the list and the unread logic use. The old `date` string compare
+  // had a hole: a message neither strictly after the last one nor
+  // strictly before the first (same second, or an unparseable date) fell
+  // through every branch and was silently DROPPED.
+  const newMs = msgSortableMs(message);
+  const lastMs = lastMessage ? msgSortableMs(lastMessage) : 0;
 
-  if (isDateAfter(newMessageDate.toString(), lastMessage?.date?.toString() ?? '')) {
+  if (!lastMessage || !newMs || newMs >= lastMs) {
     const index = roomMessages.findIndex(
       (msg) => msg.id === message.xmppId || msg.id === message.id
     );
 
     if (index !== -1) {
-      roomMessages[index] = { ...message, id: message.id, pending: false };
+      // Keep an open thread open when its parent is replaced by the echo.
+      const keepThread = (roomMessages[index] as any)?.activeMessage;
+      roomMessages[index] = {
+        ...message,
+        id: message.id,
+        pending: false,
+        ...(keepThread ? { activeMessage: true } : {}),
+      };
     } else {
       roomMessages.push(message);
     }
@@ -153,18 +164,14 @@ export function insertMessageWithDelimiter(
         });
       }
     }
-  } else if (
-    isDateBefore(newMessageDate.toString(), firstMessage?.date?.toString() ?? '')
-  ) {
-    roomMessages.unshift(message);
   } else {
-    for (let i = 0; i < roomMessages.length; i++) {
-      if (
-        isDateBefore(newMessageDate.toString(), roomMessages[i].date?.toString() ?? '')
-      ) {
-        roomMessages.splice(i, 0, message);
-        break;
-      }
+    // Before the first message strictly newer than it; equal keys keep
+    // arrival order.
+    const at = roomMessages.findIndex((msg) => msgSortableMs(msg) > newMs);
+    if (at === -1) {
+      roomMessages.push(message);
+    } else {
+      roomMessages.splice(at, 0, message);
     }
   }
 }

package/src/helpers/keyboardLayout.ts

@@ -6,6 +6,9 @@ type KeyboardLayoutArgs = {
 };
 
 export const ANDROID_INPUT_DOCK_GAP = 12;
+// Bottom padding the dock keeps while the iOS keyboard is open, so the
+// composer is glued to the keyboard without touching its edge.
+export const IOS_KEYBOARD_DOCK_GAP = 4;
 
 export const getKeyboardVerticalOffset = ({
   platform,
@@ -14,6 +17,29 @@ export const getKeyboardVerticalOffset = ({
 }: KeyboardLayoutArgs): number =>
   configuredOffset + (platform === 'ios' ? bottomInset : 0);
 
+// Offset for the KeyboardAvoidingView strategy. Unlike KeyboardStickyView
+// (where a positive `opened` offset pushes the dock DOWN into the keyboard),
+// a positive value here ADDS bottom padding above the keyboard — so the
+// safe-area inset must not be added: the avoiding view already ends exactly
+// at the keyboard's top edge.
+export const getKeyboardAvoidingOffset = ({
+  configuredOffset = 0,
+}: Pick<KeyboardLayoutArgs, 'configuredOffset'>): number => configuredOffset;
+
+// Dock bottom padding while the keyboard is open (KeyboardAvoidingView
+// strategy). On iOS the safe-area padding collapses to a small gap; Android
+// keeps its fixed gap.
+export const getInputDockKeyboardPadding = ({
+  platform,
+  inputDockPaddingBottom,
+}: {
+  platform: string;
+  inputDockPaddingBottom: number;
+}): number =>
+  platform === 'ios'
+    ? Math.min(inputDockPaddingBottom, IOS_KEYBOARD_DOCK_GAP)
+    : inputDockPaddingBottom;
+
 type InputDockPaddingArgs = Omit<KeyboardLayoutArgs, 'configuredOffset'> & {
   // Explicit `inputDockPaddingBottom` config value, verbatim on both
   // platforms when provided (0 allowed). Takes priority over every other

package/src/helpers/mamReactions.ts

@@ -0,0 +1,59 @@
+import { IMessage } from '../types/models/message.model';
+import { applyReactionToMessage, compareStanzaIds } from '../roomStore/roomsSlice';
+
+export interface ExtractedReaction {
+  messageId: string;
+  from: string;
+  emoji: string[];
+  data: Record<string, string>;
+  roomJID: string;
+  /** Server stanza id (microsecond timestamp) — orders reactions. */
+  ts?: string;
+}
+
+export const extractReaction = (
+  msg: any,
+  fallbackRoomJID?: string,
+  archiveId?: string
+): ExtractedReaction | null => {
+  const reactionsEl = msg?.getChild?.('reactions');
+  if (!reactionsEl) {return null;}
+  const messageId = reactionsEl.attrs?.id;
+  const from = String(reactionsEl.attrs?.from || '');
+  if (!messageId || !from.split('@')[0]) {return null;}
+  const emoji: string[] = (reactionsEl.getChildren?.('reaction') || [])
+    .map((reaction: any) => (reaction.text ? reaction.text() : ''))
+    .filter(Boolean);
+  const data = (msg.getChild?.('data')?.attrs || {}) as Record<string, string>;
+  const stanzaId = msg.getChild?.('stanza-id');
+  const roomJID = String(
+    stanzaId?.attrs?.by || fallbackRoomJID || msg.attrs?.from || ''
+  ).split('/')[0];
+  const rawTs = String(archiveId || stanzaId?.attrs?.id || '');
+  const ts = /^\d+$/.test(rawTs) ? rawTs : undefined;
+  return { messageId, from, emoji, data, roomJID, ...(ts ? { ts } : {}) };
+};
+
+export const applyMamReactions = (
+  messages: IMessage[],
+  reactions: ExtractedReaction[]
+): ExtractedReaction[] => {
+  const byId = new Map<string, IMessage>();
+  for (const message of messages) {
+    if (message?.id) {byId.set(String(message.id), message);}
+  }
+  const deferred: ExtractedReaction[] = [];
+  // Oldest first, so the newest state of each reactor wins.
+  const ordered = reactions
+    .slice()
+    .sort((a, b) => (a.ts && b.ts ? compareStanzaIds(a.ts, b.ts) : 0));
+  for (const reaction of ordered) {
+    const target = byId.get(String(reaction.messageId));
+    if (target) {
+      applyReactionToMessage(target, reaction.from, reaction.emoji, reaction.data, reaction.ts);
+    } else {
+      deferred.push(reaction);
+    }
+  }
+  return deferred;
+};

package/src/helpers/parseMessageReference.ts

@@ -0,0 +1,38 @@
+/** The parent a reply points at, read from its `mainMessage` JSON. */
+export interface MessageReference {
+  id: string;
+  text: string;
+  roomJid: string;
+  userName?: string;
+}
+
+const cache = new WeakMap<object, MessageReference | null>();
+
+/**
+ * Safe read of `message.mainMessage` (a JSON string on the wire). Null for
+ * a missing or malformed value — a bad payload must not crash a bubble.
+ * Cached per message object.
+ */
+export const parseMessageReference = (message: {
+  mainMessage?: string;
+} | null | undefined): MessageReference | null => {
+  if (!message?.mainMessage) {return null;}
+  const cached = cache.get(message);
+  if (cached !== undefined) {return cached;}
+  let ref: MessageReference | null = null;
+  try {
+    const parsed = JSON.parse(message.mainMessage);
+    if (parsed && parsed.id != null) {
+      ref = {
+        id: String(parsed.id),
+        text: typeof parsed.text === 'string' ? parsed.text : '',
+        roomJid: typeof parsed.roomJid === 'string' ? parsed.roomJid : '',
+        userName: typeof parsed.userName === 'string' ? parsed.userName : undefined,
+      };
+    }
+  } catch {
+    ref = null;
+  }
+  cache.set(message, ref);
+  return ref;
+};

package/src/helpers/reactionsConfig.ts

@@ -0,0 +1,13 @@
+import { IConfig } from '../types/types';
+import { DEFAULT_QUICK_REACTIONS } from './emoji';
+
+export const reactionsEnabled = (config?: IConfig | null): boolean =>
+  !config?.disableReactions && config?.reactions?.enabled !== false;
+
+export const quickReactionIds = (config?: IConfig | null): string[] => {
+  const ids = config?.reactions?.quickReactions;
+  return Array.isArray(ids) && ids.length ? ids.slice(0, 8) : DEFAULT_QUICK_REACTIONS;
+};
+
+export const reactionPickerEnabled = (config?: IConfig | null): boolean =>
+  reactionsEnabled(config) && config?.reactions?.picker !== false;

package/src/helpers/updateMessagesTillLast.tsx

@@ -31,10 +31,20 @@ export const updateMessagesTillLast = async (
         processedIndex + batchSize
       );
 
+
       const lastTimestampsByJid = currentBatch.reduce(
         (acc: Record<string, number>, current: string) => {
           const room = (store.getState() as any).rooms?.rooms?.[current];
-          acc[current] = Number(room?.lastMessageTimestamp ?? 0) || 0;
+          const cached: IMessage[] = Array.isArray(room?.messages)
+            ? room.messages
+            : [];
+          let newest = 0;
+          for (const m of cached) {
+            if (!m || m.pending || m.id === 'delimiter-new') {continue;}
+            const id = Number(m.id);
+            if (Number.isFinite(id) && id > newest) {newest = id;}
+          }
+          acc[current] = newest;
           return acc;
         },
         {} as Record<string, number>
@@ -59,7 +69,9 @@ export const updateMessagesTillLast = async (
               const fetchedMessages = await client.getHistoryStanza(
                 jid,
                 messagesPerFetch,
-                Number(lastMessageId)
+                Number(lastMessageId),
+                undefined,
+                { coalesceRoom: true, source: 'background', selfApplied: true }
               );
 
               if (!fetchedMessages.length) {break;}

package/src/hooks/useHeapSender.tsx

@@ -50,8 +50,9 @@ export const useHeapSender = (client: XmppClient | null) => {
               msg.user.walletAddress || '',
               msg.body,
               '',
-              !!msg.isReply,
-              !!msg.showInChannel,
+              // Wire values are strings: '"false"' is truthy.
+              String(msg.isReply) === 'true',
+              String(msg.showInChannel) === 'true',
               msg.mainMessage,
               msg.id
             );

package/src/hooks/useMessageHeapState.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '../roomStore';
 
@@ -8,8 +9,11 @@ export const useMessageHeapState = () => {
   const failedMessages = useSelector(
     (state: RootState) => state.roomHeapSlice?.failedMessages
   );
-  const idSet = new Set(queue?.map((m) => m.id) ?? []);
-  const failedIdSet = new Set(Object.keys(failedMessages || {}));
+  const idSet = useMemo(() => new Set(queue?.map((m) => m.id) ?? []), [queue]);
+  const failedIdSet = useMemo(
+    () => new Set(Object.keys(failedMessages || {})),
+    [failedMessages]
+  );
 
   return { queue, idSet, failedMessages, failedIdSet };
 };

package/src/hooks/useRoomInitialization.tsx

@@ -2,8 +2,9 @@ import { useEffect } from 'react';
 import { setIsLoading } from '../roomStore/roomsSlice';
 import { useXmppClient } from '../context/xmppProvider';
 import { IConfig, IMessage, IRoom } from '../types/types';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
 import useGetNewArchRoom from './useGetNewArchRoom';
+import type { RootState } from '../roomStore';
 
 const countUndefinedText = (arr: IMessage[]) =>
   (Array.isArray(arr) ? arr : []).filter(
@@ -21,14 +22,32 @@ const hasLoadedRoomHistory = (room?: IRoom): boolean => {
   );
 };
 
+const defaultRoomJids = (config: IConfig): string[] =>
+  (config?.defaultRooms || []).map((room: any) =>
+    typeof room === 'string' ? room : room?.jid
+  );
+
 export const useRoomInitialization = (
   activeRoomJID: string,
-  roomsList: Record<string, IRoom>,
-  config: IConfig,
-  messageLength: number
+  config: IConfig
 ) => {
   const { client } = useXmppClient();
   const dispatch = useDispatch();
+  const reduxStore = useStore<RootState>();
+
+  const hasRooms = useSelector(
+    (state: RootState) => Object.keys(state.rooms.rooms || {}).length > 0
+  );
+  const activeRoomExists = useSelector(
+    (state: RootState) => !!activeRoomJID && !!state.rooms.rooms?.[activeRoomJID]
+  );
+  const activeHistoryLoaded = useSelector((state: RootState) =>
+    hasLoadedRoomHistory(state.rooms.rooms?.[activeRoomJID])
+  );
+  const defaultRoomsMissing = useSelector((state: RootState) => {
+    const jids = defaultRoomJids(config);
+    return jids.length > 0 && jids.some((jid) => !state.rooms.rooms?.[jid]);
+  });
 
   const syncRooms = useGetNewArchRoom();
 
@@ -59,9 +78,8 @@ export const useRoomInitialization = (
   }, [client, activeRoomJID]);
 
   useEffect(() => {
-    const activeRoom = roomsList?.[activeRoomJID];
-    const shouldLoadActiveHistory =
-      !!activeRoomJID && !hasLoadedRoomHistory(activeRoom);
+    const roomsList = reduxStore.getState().rooms.rooms || {};
+    const shouldLoadActiveHistory = !!activeRoomJID && !activeHistoryLoaded;
 
     const getDefaultHistory = async () => {
       if (!client || !activeRoomJID) {return;}
@@ -129,7 +147,7 @@ export const useRoomInitialization = (
         // real, non-pending message in the room counts as "loaded").
         dispatch(setIsLoading({ loading: true, chatJID: activeRoomJID }));
         getDefaultHistory();
-      } else {
+      } else if (roomsList?.[activeRoomJID]?.isLoading) {
         dispatch(setIsLoading({ loading: false, chatJID: activeRoomJID }));
       }
     } else if (!roomsList?.[activeRoomJID]) {
@@ -137,10 +155,7 @@ export const useRoomInitialization = (
     }
 
     if (client && config?.defaultRooms) {
-      const allExist = config?.defaultRooms.every(
-        (room) => roomsList[typeof room === 'string' ? room : room.jid] !== undefined
-      );
-      if (roomsList && !allExist) {
+      if (defaultRoomsMissing) {
         config?.defaultRooms.map(async (room) => {
           client.presenceInRoomStanza(typeof room === 'string' ? room : room.jid);
         });
@@ -151,10 +166,12 @@ export const useRoomInitialization = (
         }
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     activeRoomJID,
-    Object.keys(roomsList).length,
-    messageLength,
-    roomsList?.[activeRoomJID]?.messages?.length,
+    hasRooms,
+    activeRoomExists,
+    activeHistoryLoaded,
+    defaultRoomsMissing,
   ]);
 };

package/src/hooks/useSendMessage.tsx

@@ -79,7 +79,6 @@ export const useSendMessage = (_configOverride?: IConfig) => {
     (state: RootState) => state.chatSettingStore.langSource
   );
   const editAction = useSelector((state: RootState) => state.rooms.editAction);
-  const rooms = useSelector((state: RootState) => state.rooms.rooms);
 
   const {
     handleMessageSent,
@@ -88,10 +87,6 @@ export const useSendMessage = (_configOverride?: IConfig) => {
     handleMessageRetry,
   } = useEventHandlers(config);
 
-  const failedMessages = useSelector(
-    (state: RootState) => state.roomHeapSlice?.failedMessages || {}
-  );
-
   const sendMessage = useCallback(
     async (
       message: string,
@@ -162,6 +157,16 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         // manual-mode readers see the Translate link on it too (parity with
         // the web SDK, which stamps langSource on the optimistic message).
         langSource: (langSource as any) || 'en',
+        // Reply fields as the wire carries them (strings), so a thread reply
+        // shows in its thread — and NOT in the channel — from the first
+        // frame, not only once the server echo lands.
+        ...(isReply
+          ? {
+              isReply: 'true',
+              showInChannel: isChecked ? 'true' : 'false',
+              mainMessage,
+            }
+          : {}),
         user: {
           ...(user as any),
           id: selfId,
@@ -423,7 +428,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
               mimetype: type,
               originalName: data?.name,
               size: fileSizeStr,
-              isReply,
+              isReply: isReply ? 'true' : 'false',
               showInChannel: `${isChecked}`,
               mainMessage,
             } as any as IMessage,
@@ -673,7 +678,8 @@ export const useSendMessage = (_configOverride?: IConfig) => {
   // it. No-op when the id isn't in the failed map.
   const retryMessage = useCallback(
     async (failedId: string) => {
-      const payload = failedMessages[failedId];
+      const payload =
+        reduxStore.getState().roomHeapSlice?.failedMessages?.[failedId];
       if (!payload) {return;}
 
       // The server may have accepted the original send even though its
@@ -681,7 +687,8 @@ export const useSendMessage = (_configOverride?: IConfig) => {
       // failed, but a confirmed (non-pending) copy is already sitting in
       // the room. Resending here would deliver a genuine duplicate; just
       // clear the failure and let the existing copy stand.
-      const roomMsgs = rooms?.[payload.roomJID]?.messages || [];
+      const roomMsgs =
+        reduxStore.getState().rooms?.rooms?.[payload.roomJID]?.messages || [];
       const alreadyDelivered = roomMsgs.some(
         (m: any) =>
           !m.pending && (m.id === failedId || m.xmppId === failedId)
@@ -720,7 +727,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         );
       }
     },
-    [failedMessages, rooms, dispatch, handleMessageRetry, sendMessage, sendMedia]
+    [reduxStore, dispatch, handleMessageRetry, sendMessage, sendMedia]
   );
 
   // ChatRoom/ThreadWrapper consume this as the "edit branch" of send.
@@ -762,7 +769,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
   const isLastMessageFromUserAndProcessing = useCallback(
     (roomJID: string): boolean => {
       if (!roomJID) {return false;}
-      const msgs = rooms?.[roomJID]?.messages;
+      const msgs = reduxStore.getState().rooms?.rooms?.[roomJID]?.messages;
       if (!msgs || msgs.length === 0) {return false;}
       const last = msgs[msgs.length - 1];
       if (!last?.pending) {return false;}
@@ -770,7 +777,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
       if (!selfId) {return false;}
       return last.user?.id === selfId;
     },
-    [rooms, user?.xmppUsername, user?.walletAddress]
+    [reduxStore, user?.xmppUsername, user?.walletAddress]
   );
 
   return {

package/src/hooks/useUnreadMessagesCounter.ts

@@ -49,7 +49,7 @@ export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
       unreadByRoom[roomJid] = unreadCount;
       totalCount += unreadCount;
     }
-    if ((room as any)?.unreadCapped) {
+    if ((room as any)?.unreadCapped && unreadCount >= 10) {
       isCapped = true;
     }
   });