@ethora/chat-component-rn 26.5.16 → 26.5.18

package/src/hooks/useChatFonts.ts

@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import { Text, TextInput } from 'react-native';
+import type { TypographyConfig } from '../types/types';
+
+/**
+ * Loads and applies the host-provided font configuration for the chat UI.
+ *
+ * React Native has no web-style runtime `@font-face`, so a custom font must be
+ * registered with `expo-font` before it can be used. This hook:
+ *   1. loads every entry in `typography.fonts` via `expo-font` (remote URL or
+ *      bundled `require(...)`), then
+ *   2. sets the resolved `fontFamily` as the default for all `<Text>` and
+ *      `<TextInput>` rendered by the chat — mirroring how the web SDK sets a
+ *      CSS variable. Individual components can still override per-style.
+ *
+ * `expo-font` is an optional peer dependency: if the host hasn't installed it,
+ * the hook degrades gracefully (font simply isn't loaded) instead of throwing.
+ *
+ * No-op when `typography` is undefined — the system font is kept, so existing
+ * integrations are unaffected.
+ *
+ * @returns `true` once fonts are ready (or when there's nothing to load), so
+ *          callers can gate first paint to avoid a font "flash" if desired.
+ */
+export function useChatFonts(typography?: TypographyConfig): boolean {
+  const [ready, setReady] = useState(!typography?.fonts?.length);
+
+  applyDefaultFont(typography);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      // Apply the default family immediately so already-available fonts
+      // (system, or host-loaded) take effect without waiting on a download.
+      applyDefaultFont(typography);
+
+      if (!typography?.fonts?.length) {
+        setReady(true);
+        return;
+      }
+
+      try {
+        // Optional dependency — resolve lazily so apps that don't use custom
+        // fonts don't need expo-font installed.
+        const ExpoFont = await import('expo-font').catch(() => null);
+        if (!ExpoFont) {
+          if (!cancelled) setReady(true);
+          return;
+        }
+        const map: Record<string, string | number> = {};
+        for (const f of typography.fonts) map[f.family] = f.source as never;
+        await ExpoFont.loadAsync(map);
+        if (!cancelled) {
+          applyDefaultFont(typography);
+          setReady(true);
+        }
+      } catch {
+        // Loading failed (e.g. bad URL) — keep the fallback font, don't block UI.
+        if (!cancelled) setReady(true);
+      }
+    }
+
+    load();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    typography?.fontFamily,
+    JSON.stringify(typography?.fonts ?? []),
+    JSON.stringify(typography?.weightFamilies ?? {}),
+  ]);
+
+  return ready;
+}
+
+/**
+ * The family currently applied as the chat-wide default. Read at render time
+ * by the patched components below, so updating it (then triggering a re-render)
+ * restyles the whole tree.
+ */
+let activeFamily: string | undefined;
+
+
+function wrapFactory(orig: any): any {
+  if (typeof orig !== 'function') return orig;
+  if (orig.__ethoraFontWrapped) return orig;
+  const wrapped = function (this: any, type: any, props: any, ...rest: any[]) {
+    if (
+      activeFamily &&
+      props &&
+      (type === Text || type === TextInput)
+    ) {
+      props = { ...props, style: [{ fontFamily: activeFamily }, props.style] };
+    }
+    return orig.call(this, type, props, ...rest);
+  };
+  wrapped.__ethoraFontWrapped = true;
+  return wrapped;
+}
+
+let factoriesPatched = false;
+
+function ensurePatched(): void {
+  if (factoriesPatched) return;
+
+  let any = false;
+
+  const patchMod = (mod: any): void => {
+    if (!mod) return;
+    for (const fn of ['jsx', 'jsxs', 'jsxDEV']) {
+      if (typeof mod[fn] === 'function' && !mod[fn].__ethoraFontWrapped) {
+        mod[fn] = wrapFactory(mod[fn]);
+        any = true;
+      }
+    }
+  };
+
+  try {
+    patchMod(require('react/jsx-runtime'));
+  } catch {
+    /* ignore */
+  }
+  try {
+    patchMod(require('react/jsx-dev-runtime'));
+  } catch {
+    /* ignore */
+  }
+
+  try {
+    const React = require('react');
+    if (
+      typeof React.createElement === 'function' &&
+      !React.createElement.__ethoraFontWrapped
+    ) {
+      React.createElement = wrapFactory(React.createElement);
+      any = true;
+    }
+  } catch {
+    /* ignore */
+  }
+
+  if (any) factoriesPatched = true;
+}
+
+/**
+ * Set (or clear) the chat-wide default font family.
+ */
+function applyDefaultFont(typography?: TypographyConfig): void {
+  activeFamily = typography?.fontFamily;
+  if (activeFamily) ensurePatched();
+}

package/src/hooks/useSendMessage.tsx

@@ -20,11 +20,25 @@ import type { IConfig, IMessage } from '../types/types';
 // long after the optimistic dispatch, mark it failed so the bubble
 // flips out of the "sending..." state. Covers the silent-failure
 // case (e.g. device offline before the message ever made it to the
-// XMPP socket) — bug #18. Tuned generously so a brief network blip
-// followed by reconnect within 30s still resolves naturally via the
-// server echo.
+// XMPP socket) — bug #18.
+//
+// 5s window: a brief network blip that reconnects inside this window
+// still resolves on its own — the offline send is buffered in the
+// outbound queue (OUTBOUND_QUEUE_TTL_MS, kept in lockstep) and replayed
+// the moment the stream comes back, so the server echo flips the bubble
+// to delivered. Only a drop that outlasts 5s flips it to "Failed → tap
+// to retry". If a slow send completes just after the window, the
+// delivery clears the failed flag (see newMessageMidlleware) so it
+// doesn't get stuck showing "Failed".
 const PENDING_WATCHDOG_MS = 30_000;
 
+// Media gets a longer window than text: the optimistic bubble appears before
+// the file upload even starts, and a large file (up to the 50MB cap) over a
+// slow link can legitimately take far longer than 5s to upload + send. Failing
+// it at 5s mid-upload would flash a wrong "Failed" and let the user kick off a
+// duplicate upload. The text watchdog stays at 5s per product spec.
+const MEDIA_PENDING_WATCHDOG_MS = 30_000;
+
 // Monotonic counter for stanza ids. Bumped on each send within a single
 // process. Two rapid sends in the same millisecond used to collide on
 // `send-text-message-${Date.now()}`; that collision made
@@ -76,7 +90,14 @@ export const useSendMessage = (_configOverride?: IConfig) => {
       activeRoomJID: string,
       isReply?: boolean,
       isChecked?: boolean,
-      mainMessage?: string
+      mainMessage?: string,
+      // Set by retryMessage to the failed message's own id. When present we
+      // re-use that id (and its existing optimistic bubble) instead of minting
+      // a fresh one — mirroring sendMedia's `existingId`. Without this, a text
+      // retry created a second bubble while the original stayed pending
+      // forever, so a failed message that the user retried showed as two
+      // bubbles, one stuck on "sending...".
+      existingId?: string
     ) => {
       if (editAction?.isEdit) {
         try {
@@ -113,7 +134,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
       // dedupes by id and flips `pending: false` → DoubleTick renders.
       // Without this, the user taps send and sees nothing for ~200ms
       // until the echo lands, which feels broken.
-      const optimisticId = nextStanzaId('send-text-message');
+      const optimisticId = existingId || nextStanzaId('send-text-message');
       const optimisticDate = new Date().toISOString();
       const selfId =
         (user as any)?.xmppUsername || (user as any)?.walletAddress || '';
@@ -135,7 +156,11 @@ export const useSendMessage = (_configOverride?: IConfig) => {
           name: `${user?.firstName || ''} ${user?.lastName || ''}`.trim() || selfId,
         } as any,
       } as IMessage;
-      if (!config?.disableSentLogic) {
+      // On retry (`existingId`) the original optimistic bubble is still in
+      // the room (pending:true) — clearMessageFailure just flipped it back out
+      // of the "failed" state — so re-adding would duplicate it. Only push a
+      // fresh bubble for a brand-new send.
+      if (!config?.disableSentLogic && !existingId) {
         dispatch(
           addRoomMessage({ roomJID: activeRoomJID, message: optimisticMessage })
         );
@@ -177,15 +202,54 @@ export const useSendMessage = (_configOverride?: IConfig) => {
       }, PENDING_WATCHDOG_MS);
 
       try {
-  
-        const effectiveClient: any =
-          client ||
-          [
-            getGlobalXmppClient(),
-            store.getState()?.chatSettingStore?.client,
-          ].find((c: any) => c && c.status === 'online');
+        // The single send closure, used both for the immediate send and for
+        // the buffered replay. Passing the optimistic id as the stanza id
+        // means the server echoes it back with the same value, so the
+        // reducer's dedupe matches and the bubble flips pending → delivered
+        // in-place (rather than rendering a second copy).
+        const replaySend = (c: any) =>
+          c.sendMessage(
+            activeRoomJID,
+            user.firstName,
+            user.lastName,
+            '',
+            user.walletAddress,
+            message,
+            '',
+            isReply || false,
+            isChecked || false,
+            mainMessage || '',
+            optimisticId
+          );
+
+        // Always buffer a copy BEFORE attempting the live send. The WebSocket
+        // can still read `status: 'online'` for a beat after the network
+        // actually drops (the WS error lands a moment later), so a stanza sent
+        // "while online" can vanish into a dying socket and never get echoed.
+        // Buffering every send means the onOnline reconnect flush replays
+        // anything that wasn't confirmed within the window. The server echo
+        // removes the entry (see newMessageMidlleware), so a healthy online
+        // send never actually replays — only genuinely-lost ones do.
+        enqueueOutboundSend({
+          optimisticId,
+          roomJID: activeRoomJID,
+          enqueuedAt: Date.now(),
+          send: replaySend,
+        });
+
+        // Only treat a client as usable if its underlying stream is actually
+        // `online` — the instance survives a network drop with a stale
+        // 'connecting'/'offline' status, and sending through it would just
+        // lose the stanza.
+        const effectiveClient: any = [
+          client,
+          getGlobalXmppClient(),
+          store.getState()?.chatSettingStore?.client,
+        ].find((c: any) => c && c.status === 'online');
 
         if (!effectiveClient) {
+          // No live stream — kick a reconnect; the buffered copy above is
+          // replayed by the onOnline flush once the stream is back.
           const anyClient: any =
             client ||
             getGlobalXmppClient() ||
@@ -193,45 +257,13 @@ export const useSendMessage = (_configOverride?: IConfig) => {
           try {
             anyClient?.forceReconnect?.();
           } catch {}
-          enqueueOutboundSend({
-            optimisticId,
-            roomJID: activeRoomJID,
-            enqueuedAt: Date.now(),
-            send: (c) =>
-              c.sendMessage(
-                activeRoomJID,
-                user.firstName,
-                user.lastName,
-                '',
-                user.walletAddress,
-                message,
-                '',
-                isReply || false,
-                isChecked || false,
-                mainMessage || '',
-                optimisticId
-              ),
-          });
           return;
         }
-        // Pass the optimistic id as the stanza id so the server echoes
-        // it back with the same value — the reducer's dedupe lookup
-        // matches and the bubble flips from pending → delivered in-place
-        // (instead of rendering two copies, which is what happens when
-        // ids don't match).
-        effectiveClient.sendMessage(
-          activeRoomJID,
-          user.firstName,
-          user.lastName,
-          '',
-          user.walletAddress,
-          message,
-          '',
-          isReply || false,
-          isChecked || false,
-          mainMessage || '',
-          optimisticId
-        );
+
+        replaySend(effectiveClient);
+        try {
+          effectiveClient.ensureStreamAlive?.();
+        } catch {}
         await handleMessageSent({
           message,
           roomJID: activeRoomJID,
@@ -405,7 +437,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
             messageType: 'media',
           });
         }
-      }, PENDING_WATCHDOG_MS);
+      }, MEDIA_PENDING_WATCHDOG_MS);
 
       // Help RN's FormData polyfill build a proper multipart/file part
       // (instead of serialising the JS object as JSON). On iOS the
@@ -487,12 +519,14 @@ export const useSendMessage = (_configOverride?: IConfig) => {
           // Stanza id == placeholder id so the MUC echo's outer
           // <message id="..."> matches xmppId on the placeholder and
           // insertMessageWithDelimiter merges in place + flips pending.
-          const effectiveMediaClient: any =
-            client ||
-            [
-              getGlobalXmppClient(),
-              store.getState()?.chatSettingStore?.client,
-            ].find((c: any) => c && c.status === 'online');
+          // Same online-only guard as the text path: a surviving-but-offline
+          // client must NOT be used (the stanza would vanish into a dead
+          // socket) — fall through to enqueue so the reconnect flush replays.
+          const effectiveMediaClient: any = [
+            client,
+            getGlobalXmppClient(),
+            store.getState()?.chatSettingStore?.client,
+          ].find((c: any) => c && c.status === 'online');
           if (effectiveMediaClient) {
             effectiveMediaClient.setActiveRoomJid?.(activeRoomJID);
             await Promise.resolve(
@@ -503,6 +537,9 @@ export const useSendMessage = (_configOverride?: IConfig) => {
               messagePayload,
               id
             );
+            try {
+              effectiveMediaClient.ensureStreamAlive?.();
+            } catch {}
           } else {
             const anyMediaClient: any =
               client ||
@@ -515,6 +552,9 @@ export const useSendMessage = (_configOverride?: IConfig) => {
               optimisticId: id,
               roomJID: activeRoomJID,
               enqueuedAt: Date.now(),
+              // Match the media watchdog so a reconnect within the (longer)
+              // media window still auto-replays the buffered stanza.
+              ttlMs: MEDIA_PENDING_WATCHDOG_MS,
               send: (c) =>
                 c.sendMediaMessageStanza(activeRoomJID, messagePayload, id),
             });
@@ -605,7 +645,10 @@ export const useSendMessage = (_configOverride?: IConfig) => {
           payload.roomJID,
           payload.isReply,
           payload.isChecked,
-          payload.mainMessage
+          payload.mainMessage,
+          // Re-use the failed message's id so the retry resends in place
+          // instead of spawning a duplicate bubble.
+          failedId
         );
       } else {
         await sendMedia(

package/src/hooks/useUnreadMessagesCounter.ts

@@ -10,6 +10,7 @@ interface UnreadMessagesStats {
   hasUnread: boolean;
   totalCount: number;
   unreadByRoom: UnreadMessagesMap;
+  isLoading: boolean;
 }
 
 export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
@@ -26,11 +27,12 @@ export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
   // so non-rooms dispatches still don't trigger a re-render.)
   const subscribe = (callback: () => void) => store.subscribe(callback);
 
-  const rooms = useSyncExternalStore(
+  const roomsState = useSyncExternalStore(
     subscribe,
-    () => store.getState().rooms.rooms
+    () => store.getState().rooms
   );
 
+  const rooms = roomsState.rooms;
   const unreadByRoom: UnreadMessagesMap = {};
   let totalCount = 0;
 
@@ -46,6 +48,7 @@ export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
     hasUnread: totalCount > 0,
     totalCount,
     unreadByRoom,
+    isLoading: !!roomsState.isUnreadSyncing || !!roomsState.isLoading,
   };
 };
 

package/src/main.ts

@@ -32,6 +32,8 @@ export { useChatRoomFocus } from './hooks/useChatRoomFocus';
 export { logoutService } from './hooks/useLogout';
 export { useQRCodeChat, handleQRChatId } from './hooks/useQRCodeChatHandler';
 export { resendMessage } from './utils/resendMessage';
+// Font loader — exposed so hosts can also load the font outside <Chat> if needed.
+export { useChatFonts } from './hooks/useChatFonts';
 
 // Public types — needed so consumers can type their `config` prop and
 // any event handlers they pass in.
@@ -43,4 +45,6 @@ export type {
   User,
   ConfigUser,
   MessageProps,
+  TypographyConfig,
+  RNFontSource,
 } from './types/types';

package/src/networking/outboundQueue.ts

@@ -19,7 +19,7 @@
  * Each queued item carries a `send(client)` closure that captures the
  * original args (text or media), so flush is type-agnostic.
  *
- * TTL is deliberately aligned with the 30s pending-send watchdog in
+ * TTL is deliberately aligned with the pending-send watchdog in
  * useSendMessage (PENDING_WATCHDOG_MS): a queued item older than that has
  * already been — or is about to be — flipped to "Failed → tap to retry" by
  * the watchdog, so replaying it on a late reconnect would duplicate the
@@ -37,11 +37,20 @@ export interface QueuedSend {
   roomJID: string;
   /** Wall-clock ms when first queued; drives the TTL drop on flush. */
   enqueuedAt: number;
+  /**
+   * Per-item replay window. Kept in lockstep with the matching send
+   * watchdog so a reconnect inside the window replays the buffered send,
+   * while a longer drop lets the watchdog own the failure (no duplicate).
+   * Text uses 5s, media 30s (large uploads need longer). Falls back to
+   * OUTBOUND_QUEUE_TTL_MS when omitted.
+   */
+  ttlMs?: number;
   /** Replays the original send against a live, online client. */
   send: (client: OutboundQueueClient) => void;
 }
 
-// Kept in lockstep with PENDING_WATCHDOG_MS in useSendMessage.
+// Default replay window (text). Mirrors PENDING_WATCHDOG_MS in useSendMessage.
+// Media enqueues a longer per-item ttlMs (see QueuedSend.ttlMs).
 export const OUTBOUND_QUEUE_TTL_MS = 30_000;
 
 let queue: QueuedSend[] = [];
@@ -74,8 +83,8 @@ export function flushOutboundSends(
   const pending = queue;
   queue = [];
   for (const item of pending) {
-    if (now - item.enqueuedAt > OUTBOUND_QUEUE_TTL_MS) {
-      // Stale — the 30s watchdog owns the failure; don't duplicate.
+    if (now - item.enqueuedAt > (item.ttlMs ?? OUTBOUND_QUEUE_TTL_MS)) {
+      // Stale — the send watchdog owns the failure; don't duplicate.
       continue;
     }
     try {
@@ -87,6 +96,18 @@ export function flushOutboundSends(
   }
 }
 
+/**
+ * Drop a single buffered send by its optimistic/stanza id. Called when a
+ * server-confirmed copy of the message arrives (see newMessageMidlleware):
+ * the send went through, so the buffered replay is no longer needed and must
+ * not fire on a later reconnect. No-op if the id isn't queued.
+ */
+export function removeOutboundSend(optimisticId: string): void {
+  if (!optimisticId) {return;}
+  const idx = queue.findIndex((q) => q.optimisticId === optimisticId);
+  if (idx >= 0) {queue.splice(idx, 1);}
+}
+
 /** Drop everything — called on permanent teardown (logout / close). */
 export function clearOutboundSends(): void {
   queue = [];

package/src/networking/xmppClient.ts

@@ -7,6 +7,7 @@ import { getChatsPrivateStoreRequest } from './xmpp/getChatsPrivateStoreRequest.
 import { actionSetTimestampToPrivateStore } from './xmpp/actionSetTimestampToPrivateStore.xmpp';
 import { flushLastViewedToPrivateStore } from './xmpp/flushLastViewedToPrivateStore';
 import { sendTypingRequest } from './xmpp/sendTypingRequest.xmpp';
+import { sendPing } from './xmpp/sendPing.xmpp';
 import { getHistory } from './xmpp/getHistory.xmpp';
 import { sendTextMessage } from './xmpp/sendTextMessage.xmpp';
 import { deleteMessage } from './xmpp/deleteMessage.xmpp';
@@ -614,6 +615,52 @@ export class XmppClient {
     this.reconnect();
   }
 
+  private streamAliveProbe: Promise<boolean> | null = null;
+
+  verifyStreamAlive(timeoutMs: number = 4000): Promise<boolean> {
+    if (this.status !== 'online' || !this.client) {
+      return Promise.resolve(false);
+    }
+    if (this.streamAliveProbe) {return this.streamAliveProbe;}
+    const underlying: any = this.client;
+    this.streamAliveProbe = new Promise<boolean>((resolve) => {
+      let settled = false;
+      const done = (alive: boolean) => {
+        if (settled) {return;}
+        settled = true;
+        clearTimeout(timer);
+        try {
+          underlying.removeListener?.('stanza', onStanza);
+        } catch {}
+        resolve(alive);
+      };
+      const onStanza = () => done(true);
+      const timer = setTimeout(() => done(false), timeoutMs);
+      try {
+        underlying.on('stanza', onStanza);
+        sendPing(underlying, this.host, `alive-${Date.now()}`);
+      } catch {
+        // Couldn't even write the probe — treat as dead.
+        done(false);
+      }
+    }).finally(() => {
+      this.streamAliveProbe = null;
+    }) as Promise<boolean>;
+    return this.streamAliveProbe;
+  }
+
+  async ensureStreamAlive(timeoutMs: number = 4000): Promise<void> {
+    if (this.suppressReconnect || this.status !== 'online') {return;}
+    const alive = await this.verifyStreamAlive(timeoutMs);
+    // Re-check state: a reconnect may have started meanwhile.
+    if (!alive && this.status === 'online' && !this.suppressReconnect) {
+      try {
+        devPushLog('xmpp', 'stream is zombie (ping unanswered) → forceReconnect');
+      } catch {}
+      this.forceReconnect();
+    }
+  }
+
   async reconnect() {
     if (this.suppressReconnect) {return;}
     // Single-flight: ignore overlapping triggers (AppState + NetInfo +

package/src/roomStore/Middleware/newMessageMidlleware.tsx

@@ -1,5 +1,7 @@
 import { Middleware } from '@reduxjs/toolkit';
 import { updateRoom } from '../roomsSlice';
+import { clearMessageFailure } from '../roomHeapSlice';
+import { removeOutboundSend } from '../../networking/outboundQueue';
 import { IRoom } from '../../types/types';
 
 export const newMessageMidlleware: Middleware =
@@ -24,6 +26,29 @@ export const newMessageMidlleware: Middleware =
 
     const { roomJID, message } = action.payload;
 
+    // Un-fail on confirmed delivery. A server-confirmed copy (echo or MAM
+    // history, never `pending`) arriving for a message we'd flagged failed
+    // means the send actually went through — e.g. a slow send that completed
+    // just after the 5s watchdog window, or a queued auto-resend landing on
+    // reconnect. The failed flag is keyed by our optimistic/stanza id, which
+    // the echo carries back as `id`/`xmppId`, so clear it here and let the
+    // bubble flip to delivered instead of staying stuck on "Failed".
+    if (message && !message.pending) {
+      // The confirmed copy carries our optimistic/stanza id back as id/xmppId.
+      // Drop any still-buffered replay for it so a later reconnect flush can't
+      // re-send an already-delivered message.
+      removeOutboundSend(message.id);
+      removeOutboundSend(message.xmppId);
+
+      const failedMap = state.roomHeapSlice?.failedMessages || {};
+      const failedKey = [message.id, message.xmppId].find(
+        (k: string | undefined) => k && failedMap[k]
+      );
+      if (failedKey) {
+        storeAPI.dispatch(clearMessageFailure(failedKey as string));
+      }
+    }
+
     if ((rooms[roomJID]?.lastMessageTimestamp ?? 0) <= Number(message.id)) {
       storeAPI.dispatch(
         updateRoom({

package/src/roomStore/roomsSlice.ts

@@ -76,7 +76,17 @@ function mergeHistoryIntoCache(
   // 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);}
+  for (const m of realFetched) {
+    // Fetched wins on body/reactions/etc., but MAM doesn't carry our
+    // client-side "edited" flag (the archived stanza just has the corrected
+    // body). Preserve `isEdited` from the cached copy so a message edited
+    // before reload keeps its marker instead of losing it on history sync.
+    const prev = byId.get(String(m.id));
+    byId.set(
+      String(m.id),
+      prev?.isEdited && !m.isEdited ? { ...m, isEdited: true } : m
+    );
+  }
   const merged = Array.from(byId.values()).sort(byMs);
   return [...capTail(merged), ...pending];
 }
@@ -96,6 +106,7 @@ export interface RoomMessagesState {
   editAction?: EditAction;
   isLoading: boolean;
   loadingText?: string;
+  isUnreadSyncing?: boolean;
   usersSet?: Record<string, any>;
   pendingNotificationJid?: string | null;
   // Server-side read markers fetched from the XMPP private store
@@ -111,6 +122,7 @@ const initialState: RoomMessagesState = {
   activeRoomJID: null,
   visibleRoomJID: null,
   isLoading: false,
+  isUnreadSyncing: false,
   editAction: {
     isEdit: false,
     roomJid: '',
@@ -305,6 +317,10 @@ const reducers = {
         state.rooms[roomJID].messages.map((message) => {
           if (message.id === messageId) {
             message.body = text;
+            // Flag the correction so the bubble can render an "edited" marker.
+            // Covers both the author's own edit and edits from other users —
+            // every <replace> echo flows through here.
+            message.isEdited = true;
           }
         });
       }
@@ -362,6 +378,7 @@ const reducers = {
       state.rooms = {};
       state.visibleRoomJID = null;
       state.privateStoreMarkers = {};
+      state.isUnreadSyncing = false;
     },
     setComposing(
       state: WritableDraft<RoomMessagesState>,
@@ -386,6 +403,12 @@ const reducers = {
       state.isLoading = loading;
       state.loadingText = loadingText;
     },
+    setUnreadSyncing: (
+      state: WritableDraft<RoomMessagesState>,
+      action: PayloadAction<boolean>
+    ) => {
+      state.isUnreadSyncing = action.payload;
+    },
     setLastViewedTimestamp: (
       state: WritableDraft<RoomMessagesState>,
       action: PayloadAction<{ chatJID: string; timestamp: number }>
@@ -538,6 +561,7 @@ const reducers = {
       state.activeRoomJID = null;
       state.visibleRoomJID = null;
       state.isLoading = false;
+      state.isUnreadSyncing = false;
       state.privateStoreMarkers = {};
     },
     setActiveMessage: (
@@ -729,6 +753,7 @@ export const {
   editRoomMessage,
   setComposing,
   setIsLoading,
+  setUnreadSyncing,
   setLastViewedTimestamp,
   applyPrivateStoreMarkers,
   setRoomNoMessages,