@ethora/chat-component-rn 26.5.17 → 26.5.18

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/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];
 }
@@ -307,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;
           }
         });
       }

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

@@ -33,6 +33,9 @@ export interface IMessage {
   xmppId?: string;
   xmppFrom?: string;
   deleted?: boolean;
+  // Set once a message has been corrected via XEP-0308 (<replace>), so the
+  // bubble can show a small "edited" marker (Slack/WhatsApp style).
+  isEdited?: boolean;
 }
 
 export interface ReactionMessage {

package/src/types/types.ts

@@ -270,7 +270,24 @@ export interface IConfig {
   projectName?: string;
 
   // ----- theming -----
-  colors?: { primary: string; secondary: string };
+  colors?: {
+    primary: string;
+    secondary: string;
+    /** Tint for chrome icons (attach, mic/send, burger menu, edit banner,
+     * scroll-to-bottom FAB). Falls back to `primary`, then `#0052CD`. */
+    icon?: string;
+    /** Color of the sender's name above incoming message bubbles.
+     * Falls back to `primary`, then `#0052CD`. */
+    senderName?: string;
+    /** Background of initials avatars (message bubbles, chat header,
+     * profile modals). When omitted, each user keeps their per-name
+     * pastel color from the hash palette (current default). */
+    avatar?: string;
+    /** Text color of the day-separator pill ("Today", "June 8") in the
+     * message list; the pill background is a light tint of it. Falls
+     * back to `primary`, then `#0052CD`. */
+    dateLabel?: string;
+  };
   /** Configurable font family / weights for the chat UI. See TypographyConfig. */
   typography?: TypographyConfig;
   messageColor?: {