@ethora/chat-component-rn 26.5.5 → 26.5.10

package/src/roomStore/roomHeapSlice.ts

@@ -2,18 +2,43 @@ import { createSlice, PayloadAction, type Slice } from '@reduxjs/toolkit';
 import type { WritableDraft } from 'immer';
 import { IMessage } from '../types/types';
 
+// Saved alongside a failed-message id so the retry button can resend
+// without the bubble needing to remember the original draft itself.
+// `kind === 'text'` carries the plain body; `kind === 'media'` carries
+// the upload payload so we don't have to make the user re-pick the file.
+export type FailedMessagePayload =
+  | {
+      kind: 'text';
+      id: string;
+      roomJID: string;
+      body: string;
+      isReply?: boolean;
+      isChecked?: boolean;
+      mainMessage?: string;
+    }
+  | {
+      kind: 'media';
+      id: string;
+      roomJID: string;
+      data: any;
+      type: string;
+      isReply?: boolean;
+      isChecked?: boolean;
+      mainMessage?: string;
+    };
+
 export interface roomHeapSliceState {
   messageHeap: IMessage[];
+  // Keyed by message id so the bubble's `isFailed = failedMessages[id]`
+  // check is O(1). Carries enough payload data to actually retry.
+  failedMessages: Record<string, FailedMessagePayload>;
 }
 
 const initialState: roomHeapSliceState = {
   messageHeap: [],
+  failedMessages: {},
 };
 
-// Reducers extracted as a named const so we can give the slice an
-// explicit Slice<State, typeof reducers, Name> type. Without that, tsc's
-// declaration emission inlines immer's internal WritableNonArrayDraft
-// type and fails with TS4023.
 const reducers = {
   addMessageToHeap: (state: WritableDraft<roomHeapSliceState>, action: PayloadAction<IMessage>) => {
     state.messageHeap.push(action.payload);
@@ -26,6 +51,22 @@ const reducers = {
   },
   clearHeap: (state: WritableDraft<roomHeapSliceState>) => {
     state.messageHeap = [];
+    state.failedMessages = {};
+  },
+  markMessageFailed: (
+    state: WritableDraft<roomHeapSliceState>,
+    action: PayloadAction<FailedMessagePayload>
+  ) => {
+    state.failedMessages[action.payload.id] = action.payload;
+    // Drop from the pending heap — the bubble looks at both, and
+    // showing "sending..." alongside a failure indicator is confusing.
+    const index = state.messageHeap.findIndex((m) => m.id === action.payload.id);
+    if (index !== -1) {
+      state.messageHeap.splice(index, 1);
+    }
+  },
+  clearMessageFailure: (state: WritableDraft<roomHeapSliceState>, action: PayloadAction<string>) => {
+    delete state.failedMessages[action.payload];
   },
 };
 
@@ -39,6 +80,8 @@ export const {
   addMessageToHeap,
   clearHeap,
   removeMessageFromHeapById,
+  markMessageFailed,
+  clearMessageFailure,
 } = roomHeapSlice.actions;
 
 export default roomHeapSlice.reducer;

package/src/roomStore/roomsSlice.ts

@@ -23,6 +23,64 @@ const enforceMessageCap = (messages: IMessage[]): void => {
   }
 };
 
+// Merge a freshly-fetched recent history page into a room's cached
+// messages instead of REPLACING them — so re-entering the app no longer
+// wipes older history (and the unread derived from it). Mirrors the web
+// SDK's incremental sync:
+//   • union + dedupe by message id (the server-authoritative,
+//     microsecond-resolution stanza id) — overlapping messages collapse
+//     and older cached history is kept;
+//   • if the fetched page shares NO id with the cache, a gap has opened
+//     (more than a page of new messages arrived while away) and stitching
+//     them would leave a hole — so we clear THIS chat's cache and keep
+//     just the fresh page;
+//   • locally-pending (optimistic) sends are always preserved;
+//   • an empty fetch leaves the cache untouched (the old replace wiped it);
+//   • the transient 'delimiter-new' marker is dropped (the realtime insert
+//     path re-derives it) so it can't mis-sort.
+// `function` (hoisted) so the reducers above can call it regardless of
+// where it sits in the file. msgSortableMs (defined below) is referenced
+// at call time, after module init.
+function mergeHistoryIntoCache(
+  existing: IMessage[] | undefined,
+  fetched: IMessage[] | undefined
+): IMessage[] {
+  const ex = Array.isArray(existing) ? existing : [];
+  const fe = Array.isArray(fetched) ? fetched : [];
+
+  const pending = ex.filter((m) => m?.pending);
+  const realExisting = ex.filter(
+    (m) => m && !m.pending && m.id !== 'delimiter-new'
+  );
+  const realFetched = fe.filter((m) => m && m.id !== 'delimiter-new');
+
+  // Nothing usable came back → keep the cache exactly as it was.
+  if (realFetched.length === 0) {return ex;}
+
+  const byMs = (a: IMessage, b: IMessage) =>
+    msgSortableMs(a) - msgSortableMs(b);
+  const capTail = (arr: IMessage[]) =>
+    arr.length > RUNTIME_MESSAGE_LIMIT
+      ? arr.slice(-RUNTIME_MESSAGE_LIMIT)
+      : arr;
+
+  const existingIds = new Set(realExisting.map((m) => String(m.id)));
+  const overlaps = realFetched.some((m) => existingIds.has(String(m.id)));
+
+  // Cold room, or a gap (no shared id) → can't merge → use the fresh page.
+  if (realExisting.length === 0 || !overlaps) {
+    return [...capTail(realFetched.slice().sort(byMs)), ...pending];
+  }
+
+  // Overlap → union + dedupe by id. Fetched wins on collision: it carries
+  // the freshest server state (reactions / edits / deletions).
+  const byId = new Map<string, IMessage>();
+  for (const m of realExisting) {byId.set(String(m.id), m);}
+  for (const m of realFetched) {byId.set(String(m.id), m);}
+  const merged = Array.from(byId.values()).sort(byMs);
+  return [...capTail(merged), ...pending];
+}
+
 export interface RoomPreloadPatch {
   jid: string;
   messages?: IMessage[];
@@ -34,6 +92,7 @@ export interface RoomPreloadPatch {
 export interface RoomMessagesState {
   rooms: { [jid: string]: IRoom };
   activeRoomJID: string | null;
+  visibleRoomJID: string | null;
   editAction?: EditAction;
   isLoading: boolean;
   loadingText?: string;
@@ -44,6 +103,7 @@ export interface RoomMessagesState {
 const initialState: RoomMessagesState = {
   rooms: {},
   activeRoomJID: null,
+  visibleRoomJID: null,
   isLoading: false,
   editAction: {
     isEdit: false,
@@ -79,22 +139,77 @@ const reducers = {
   addRoom(state: WritableDraft<RoomMessagesState>, action: PayloadAction<{ roomData: IRoom }>) {
       const { roomData } = action.payload;
       const existing = state.rooms[roomData.jid];
-      // Preserve a pre-existing lastViewedTimestamp (the private-store
-      // pull may have landed before /chats/my finished). If neither
-      // source set one, stamp `Date.now()` so initial REST history
-      // counts as "seen" — without this default, every back-history
-      // message read by the unread middleware satisfies `>0` and the
-      // badge shows the entire room population on first paint.
-      const lastViewed =
-        roomData.lastViewedTimestamp ??
-        existing?.lastViewedTimestamp ??
-        Date.now();
-      state.rooms[roomData.jid] = { ...roomData, lastViewedTimestamp: lastViewed };
+      // Default-marker resolution (cold-start unread bug):
+      //   1. Explicit value on the payload wins.
+      //   2. Existing redux value wins (preserves persisted/hydrated
+      //      markers when the privateStore pull lands before
+      //      /chats/my).
+      //   3. Otherwise, anchor to the *newest known message* in the
+      //      payload — this marks everything currently in the room
+      //      as "seen" but lets any NEWER incoming message count as
+      //      unread. Previously this fell back to `Date.now()`, which
+      //      stamped a future-leaning marker that hid genuinely-new
+      //      messages received while the app was closed.
+      //   4. If there are no messages at all yet, stamp `0` (=
+      //      "unknown — let the privateStore hydration set the real
+      //      marker before any future message arrives").
+      let lastViewed: number;
+      // Treat an incoming `0` as "unset". stanzaHandlers' addRoom passes
+      // `lastViewedTimestamp: 0` as a placeholder; the old `!= null` check
+      // let that 0 win and OVERWROTE the persisted/hydrated marker from
+      // the previous session, so cold-start showed no unread badge for
+      // messages received while the app was closed (bug #19/#20). A real
+      // (non-zero) explicit value still wins; otherwise keep the existing
+      // value; otherwise anchor to the newest message in the payload.
+      if (roomData.lastViewedTimestamp != null && roomData.lastViewedTimestamp !== 0) {
+        lastViewed = roomData.lastViewedTimestamp;
+      } else if (existing?.lastViewedTimestamp != null) {
+        lastViewed = existing.lastViewedTimestamp;
+      } else {
+        const msgs = roomData.messages || [];
+        let newest = 0;
+        for (const m of msgs) {
+          const t = (m as any)?.messageTimestampMs ||
+            (m?.date ? new Date(m.date).getTime() : 0);
+          if (t > newest) {newest = t;}
+        }
+        lastViewed = newest; // 0 if no messages → cold-start safe
+      }
+      // Preserve cached messages + unread when the incoming room carries
+      // none. The /chats/my fetch (rooms.api) builds rooms with
+      // `messages: []` and no unread; without this guard, re-entering the
+      // app replaced every cached room with an empty one — wiping history
+      // AND the unread badge before the history scheduler could re-merge
+      // (the user's "it clears cache, unread and messages" bug). New rooms
+      // (no existing) fall through to the incoming values. Mirrors
+      // addRoomFromApi's preservation.
+      const incomingMessages = Array.isArray(roomData.messages)
+        ? roomData.messages
+        : [];
+      const existingMessages = Array.isArray(existing?.messages)
+        ? existing!.messages
+        : [];
+      state.rooms[roomData.jid] = {
+        ...roomData,
+        messages:
+          existingMessages.length > 0 ? existingMessages : incomingMessages,
+        lastViewedTimestamp: lastViewed,
+        unreadMessages:
+          roomData.unreadMessages ?? existing?.unreadMessages ?? 0,
+        unreadBaselineTimestamp:
+          existing?.unreadBaselineTimestamp ??
+          existing?.lastViewedTimestamp ??
+          (roomData as any).unreadBaselineTimestamp ??
+          0,
+      };
     },
     deleteRoom(state: WritableDraft<RoomMessagesState>, action: PayloadAction<{ jid: string }>) {
       const { jid } = action.payload;
       if (state.rooms[jid]) {
         delete state.rooms[jid];
+        if (state.visibleRoomJID === jid) {
+          state.visibleRoomJID = null;
+        }
       }
     },
     updateRoom(
@@ -132,13 +247,23 @@ const reducers = {
       action: PayloadAction<{ roomJID: string; messageId: string }>
     ) {
       const { roomJID, messageId } = action.payload;
-      if (state.rooms[roomJID]) {
-        state.rooms[roomJID].messages.map((message) => {
-          if (message.id === messageId) {
-            message.isDeleted = true;
-          }
-        });
+      const room = state.rooms[roomJID];
+      if (!room?.messages) {return;}
+      // The "New messages" divider is a transient UI marker, not a real
+      // message — SPLICE it out so it can be re-inserted for the next
+      // unread batch. Marking it isDeleted (like a real message) left it in
+      // the array, where insertMessageWithDelimiter's "already present"
+      // guard then blocked every future divider (one-shot bug).
+      if (messageId === 'delimiter-new') {
+        const idx = room.messages.findIndex((m) => m.id === 'delimiter-new');
+        if (idx !== -1) {room.messages.splice(idx, 1);}
+        return;
       }
+      room.messages.map((message) => {
+        if (message.id === messageId) {
+          message.isDeleted = true;
+        }
+      });
     },
     setEditAction: (state: WritableDraft<RoomMessagesState>, action: PayloadAction<EditAction | undefined>) => {
       if (action.payload?.isEdit) {
@@ -199,9 +324,13 @@ const reducers = {
       if (roomMessages.length === 0 || start) {
         roomMessages.unshift(message);
       } else {
-        const lastViewedTimestamp = state.rooms[roomJID].lastViewedTimestamp
-          ? new Date(state.rooms[roomJID].lastViewedTimestamp)
-          : null;
+        const lastViewedValue = state.rooms[roomJID].lastViewedTimestamp;
+        const lastViewedTimestamp =
+          state.visibleRoomJID === roomJID
+            ? null
+            : lastViewedValue
+              ? new Date(lastViewedValue)
+              : null;
 
         insertMessageWithDelimiter(roomMessages, message, lastViewedTimestamp);
       }
@@ -216,6 +345,7 @@ const reducers = {
     },
     deleteAllRooms(state: WritableDraft<RoomMessagesState>) {
       state.rooms = {};
+      state.visibleRoomJID = null;
     },
     setComposing(
       state: WritableDraft<RoomMessagesState>,
@@ -247,10 +377,12 @@ const reducers = {
       const { chatJID, timestamp } = action.payload;
       if (state.rooms[chatJID]) {
         state.rooms[chatJID].lastViewedTimestamp = timestamp;
-        // timestamp === 0 means "user is currently viewing this room" —
-        // unread is cleared. Otherwise count messages received strictly
-        // after the last-viewed instant.
-        if (!timestamp) {
+        // A non-positive timestamp means "no persisted marker yet" and
+        // must not inflate unread from history that predates the first
+        // successful private-store hydration. The visible-room state is
+        // tracked separately via `visibleRoomJID`; no read/unread meaning
+        // is encoded in the timestamp itself anymore.
+        if (!(timestamp > 0)) {
           state.rooms[chatJID].unreadMessages = 0;
         } else {
           state.rooms[chatJID].unreadMessages = countNewerMessages(
@@ -286,6 +418,19 @@ const reducers = {
       // back button from chat → return to RoomList). Mirrors web.
       state.activeRoomJID = action.payload.roomJID || '';
     },
+    setVisibleRoom: (
+      state: WritableDraft<RoomMessagesState>,
+      action: PayloadAction<{ roomJID: string | null }>
+    ) => {
+      state.visibleRoomJID = action.payload.roomJID || null;
+      const jid = state.visibleRoomJID;
+      if (jid && state.rooms[jid]) {
+        state.rooms[jid].unreadMessages = 0;
+      }
+    },
+    clearVisibleRoom: (state: WritableDraft<RoomMessagesState>) => {
+      state.visibleRoomJID = null;
+    },
     /**
      * Stash a JID that a push notification asked us to open before
      * the rooms list has loaded. The Chat component clears this once
@@ -329,6 +474,7 @@ const reducers = {
     setLogoutState: (state: WritableDraft<RoomMessagesState>) => {
       state.rooms = {};
       state.activeRoomJID = null;
+      state.visibleRoomJID = null;
       state.isLoading = false;
     },
     setActiveMessage: (
@@ -425,9 +571,11 @@ const reducers = {
           room.historyComplete = patch.historyComplete;
         }
         if (Array.isArray(patch.messages)) {
-          // Merge: keep any locally-pending messages, replace the rest.
-          const pending = room.messages?.filter((m) => m?.pending) || [];
-          room.messages = [...patch.messages, ...pending];
+          // Merge the fetched page into cache by message id rather than
+          // replacing — preserves older history + unread on re-entry. Only
+          // a true gap (no overlapping id) clears this chat's cache. See
+          // mergeHistoryIntoCache.
+          room.messages = mergeHistoryIntoCache(room.messages, patch.messages);
         }
       }
     },
@@ -521,6 +669,8 @@ export const {
   setLastViewedTimestamp,
   setRoomNoMessages,
   setCurrentRoom,
+  setVisibleRoom,
+  clearVisibleRoom,
   setRoomRole,
   setLogoutState,
   setActiveMessage,

package/src/types/models/media.model.ts

@@ -2,4 +2,7 @@ export type MediaFile = {
   uri: string;
   type: string;
   name: string;
+  // Byte size when the picker can report it (images/videos/documents).
+  // Used to enforce the client-side upload cap before hitting the server.
+  size?: number;
 };

package/src/types/models/xmpp.model.ts

@@ -150,6 +150,7 @@ export interface XmppClientInterface {
     isReply?: boolean,
     showInChannel?: boolean,
     mainMessage?: string,
-    langSource?: Iso639_1Codes
+    langSource?: Iso639_1Codes,
+    customId?: string
   ): void;
 }

package/src/types/types.ts

@@ -249,6 +249,19 @@ export interface IConfig {
   disableHeader?: boolean;
   disableMedia?: boolean;
   chatHeaderBurgerMenu?: boolean;
+  // Hide the burger icon entirely (the icon that opens the chatHeader-
+  // BurgerMenu dropdown). `chatHeaderBurgerMenu` controls dropdown
+  // visibility only — set this flag when you want neither the icon nor
+  // the dropdown to render (e.g. patient-facing apps with a single room).
+  disableChatHeaderBurgerMenuIcon?: boolean;
+  // ----- granular gates inside the user-profile modal (chat info →
+  //       tap a member). Use these to keep the profile section visible
+  //       but hide individual actions that aren't appropriate for the
+  //       embedding app (e.g. patient-facing apps that don't allow
+  //       direct messaging between patients).
+  disableMemberProfileActions?: boolean; // hides the whole action block
+  hideMemberSendMessageAction?: boolean; // hides only "Message"
+  hideMemberCopyIdAction?: boolean;      // hides only "Copy User Id"
   chatHeaderAdditional?: { enabled: boolean; element: any };
   headerMenu?: () => void;
   headerChatMenu?: () => void;
@@ -341,6 +354,13 @@ export interface IConfig {
   disableUserCount?: boolean;
   disableSentLogic?: boolean;
   disableTypingIndicator?: boolean;
+  // Hide the full-screen "Connection error" overlay (the dark modal with
+  // a Retry button shown when bootstrap/connect fails). For patient-facing
+  // / kiosk apps where a full-screen error reads as a crash, set this and
+  // surface connection state your own way (or let it recover silently —
+  // reconnect + re-join now happen automatically). A subtle inline
+  // "Connection lost. Retrying…" banner is shown instead.
+  disableConnectionErrorOverlay?: boolean;
   // disableChatInfo already declared above (line ~338) — granular gates
   // (disableHeader / disableDescription / disableType / hideMembers /
   // disableMembers / disableChatHeaderMenu). Don't redeclare here.
@@ -420,6 +440,11 @@ export interface IConfig {
       roomJID: string;
       user: any;
     }) => void;
+    onMessageRetry?: (event: {
+      messageId: string;
+      roomJID: string;
+      messageType: 'text' | 'media';
+    }) => void;
   };
 }
 

package/src/utils/installPromiseRejectionTracker.ts

@@ -0,0 +1,91 @@
+/**
+ * Dev-only unhandled-promise-rejection tracker.
+ *
+ * RN's red-screen for `Uncaught (in promise, id: N)` famously hides the
+ * actual rejection's stack trace — it only shows the promise id. When a
+ * leak slips past the SDK's coverage, the integrator gets a useless
+ * red box that they can't diagnose.
+ *
+ * This installer attaches a global `unhandledrejection` listener that
+ * prints the rejection value AND a stack trace (best-effort) so the
+ * source is visible in Metro logs. It's a no-op in production builds.
+ *
+ * Installed automatically from `ReduxWrapper` on mount. Safe to call
+ * multiple times — guarded by a module-level flag.
+ *
+ * Bug #4 follow-up.
+ */
+
+declare const __DEV__: boolean | undefined;
+
+let installed = false;
+
+export function installPromiseRejectionTracker() {
+  if (typeof __DEV__ !== 'undefined' && !__DEV__) {return;}
+  if (installed) {return;}
+  installed = true;
+
+  // RN's RCTPromise polyfill emits `unhandledrejection` on the global
+  // (HermesInternal / global). It also forwards through the
+  // `process.on('unhandledRejection', ...)` shim on some builds.
+  const g: any = globalThis as any;
+
+  const onRejection = (eventOrReason: any, maybePromise?: Promise<any>) => {
+    // Two calling conventions across RN versions:
+    //   - `(event)` where event has `.reason` / `.promise`
+    //   - `(reason, promise)` (older)
+    const reason = eventOrReason?.reason ?? eventOrReason;
+    const promise = eventOrReason?.promise ?? maybePromise;
+    const stack =
+      (reason && reason.stack) ||
+      new Error('unhandledrejection (captured at handler)').stack;
+    // console.WARN (not error): RN's LogBox turns every console.error into
+    // a full-screen red overlay. With `allRejections: true` Hermes reports
+    // rejections that get handled a microtask later (false positives, e.g.
+    // a bare `undefined` rejection during connect teardown), so escalating
+    // to a red box was pure noise. warn keeps the trace in Metro/Logs.
+    // eslint-disable-next-line no-console
+    console.warn(
+      '[ethora-rn] UNHANDLED PROMISE REJECTION:',
+      typeof reason === 'object' ? JSON.stringify(reason, null, 2) : String(reason),
+      '\nstack:',
+      stack,
+      '\npromise:',
+      promise
+    );
+  };
+
+  try {
+    if (typeof g.addEventListener === 'function') {
+      g.addEventListener('unhandledrejection', onRejection);
+    }
+  } catch {}
+  try {
+    if (g.process && typeof g.process.on === 'function') {
+      g.process.on('unhandledRejection', onRejection);
+    }
+  } catch {}
+  try {
+    // Hermes-only hook — newer RN exposes this.
+    if (typeof g.HermesInternal?.enablePromiseRejectionTracker === 'function') {
+      g.HermesInternal.enablePromiseRejectionTracker({
+        allRejections: false,
+        onUnhandled: (id: number, error: any) => {
+          // warn, not error — see note above. `allRejections: true` fires
+          // this for rejections handled a tick later, so a red box here
+          // was a false alarm. Stays visible in Metro/Logs as a warning.
+          // eslint-disable-next-line no-console
+          console.warn(
+            `[ethora-rn] Hermes unhandled rejection id=${id}:`,
+            error?.message ?? error,
+            '\nstack:',
+            error?.stack
+          );
+        },
+        onHandled: () => {},
+      });
+    }
+  } catch {}
+}
+
+export default installPromiseRejectionTracker;

package/src/utils/resendMessage.ts

@@ -62,7 +62,8 @@ export async function resendMessage(
       message.isReply || false,
       message.showInChannel === 'true' || false,
       message.mainMessage || '',
-      (state.chatSettingStore.langSource as any) || 'en'
+      (state.chatSettingStore.langSource as any) || 'en',
+      id
     );
   } else {
     client.sendMessage(