@ethora/chat-component-rn 26.5.5 → 26.5.7

package/src/networking/xmppClient.ts

@@ -26,6 +26,25 @@ import { pushLog as devPushLog } from '../utils/devLogger';
 // Canonical production XMPP WSS endpoint (standard wss/443, no port suffix).
 const DEFAULT_DEV_SERVER = 'xmpp.chat.ethora.com';
 
+// @xmpp/client surfaces SASL/stream errors in a few shapes depending on
+// where it fails — XMPPError on stream:error, SASLError on SASL bind, or
+// a generic Error whose message contains "not-authorized". Match all of
+// them so we trigger the credentials refresh path consistently.
+function isNotAuthorizedError(err: any): boolean {
+  if (!err) {return false;}
+  const condition =
+    err?.condition ||
+    err?.name ||
+    err?.type ||
+    err?.error?.condition ||
+    '';
+  if (typeof condition === 'string' && condition.includes('not-authorized')) {
+    return true;
+  }
+  const message = (err?.message || err?.text || '').toString();
+  return /not-authorized|SASLError/i.test(message);
+}
+
 type HistorySource = 'active' | 'send_ack' | 'background' | 'default';
 
 interface HistoryOptions {
@@ -40,6 +59,11 @@ interface MamInFlightEntry {
   startedAt: number;
 }
 
+export type XmppCredentialsProvider = () => Promise<{
+  username: string;
+  password: string;
+}>;
+
 export class XmppClient {
   client!: Client;
   xmppSettings?: xmppSettingsInterface;
@@ -56,6 +80,13 @@ export class XmppClient {
   reconnectDelay = 2000;
   suppressReconnect = false;
 
+  // Set when SASL fails with `not-authorized` (typically a stale JWT-
+  // derived XMPP password after idle). Triggers the credentialsProvider
+  // refresh path in reconnect().
+  lastAuthError: 'not-authorized' | null = null;
+  private credentialsProvider: XmppCredentialsProvider | null = null;
+  private credentialsRefreshInFlight: Promise<void> | null = null;
+
   // ---- QoS state (mirrors web XmppClient) ----------------------------
   presencesReady = false;
   disableLastRead = false;
@@ -74,6 +105,23 @@ export class XmppClient {
     return this.client && this.client.status === 'online';
   }
 
+  /**
+   * Inject (or replace) the callback used by reconnect() to fetch fresh
+   * XMPP credentials after a `not-authorized` SASL failure. The provider
+   * is responsible for refreshing whatever upstream token is needed
+   * (REST JWT, /users/client, etc.) and returning the resulting
+   * username + password.
+   */
+  setCredentialsProvider(provider: XmppCredentialsProvider | null) {
+    this.credentialsProvider = provider;
+  }
+
+  /** Swap in fresh credentials before the next reconnect. */
+  updateCredentials(username: string, password: string) {
+    this.username = username;
+    this.password = password;
+  }
+
   constructor(
     username: string,
     password: string,
@@ -285,6 +333,9 @@ export class XmppClient {
       this.attachEventListeners();
       this.client.start().catch((error: any) => {
         console.error('Error starting xmpp client:', error);
+        if (isNotAuthorizedError(error)) {
+          this.lastAuthError = 'not-authorized';
+        }
         this.status = 'error';
       });
     } catch (error) {
@@ -320,6 +371,9 @@ export class XmppClient {
 
     this.client.on('error', (error: any) => {
       console.error('XMPP client error:', error);
+      if (isNotAuthorizedError(error)) {
+        this.lastAuthError = 'not-authorized';
+      }
       try {
         devPushLog(
           'xmpp',
@@ -385,9 +439,25 @@ export class XmppClient {
     setTimeout(() => this.reconnect(), delay);
   }
 
-  reconnect() {
+  async reconnect() {
     if (this.suppressReconnect) {return;}
     console.log('Attempting to reconnect xmpp client...');
+
+    // If the last failure was a SASL `not-authorized` (typically a stale
+    // JWT-derived XMPP password after idle), try to fetch fresh creds
+    // before retrying. Without this, reconnect retries with the same
+    // stale password forever and the user has to kill the app.
+    if (this.lastAuthError === 'not-authorized' && this.credentialsProvider) {
+      try {
+        await this.refreshCredentialsOnce();
+      } catch (err) {
+        console.warn(
+          'XMPP credential refresh failed; reconnecting with cached creds',
+          err
+        );
+      }
+    }
+
     if (this.client) {
       this.client.stop().finally(() => {
         this.initializeClient();
@@ -397,6 +467,30 @@ export class XmppClient {
     }
   }
 
+  /**
+   * Single-flight wrapper around credentialsProvider. Multiple concurrent
+   * reconnect() calls (e.g. from the provider's reconnect effect firing
+   * twice quickly) share one in-flight request and update `this.password`
+   * exactly once.
+   */
+  private refreshCredentialsOnce(): Promise<void> {
+    if (this.credentialsRefreshInFlight) {return this.credentialsRefreshInFlight;}
+    if (!this.credentialsProvider) {return Promise.resolve();}
+    const provider = this.credentialsProvider;
+    this.credentialsRefreshInFlight = (async () => {
+      try {
+        const fresh = await provider();
+        if (fresh?.username && fresh?.password) {
+          this.updateCredentials(fresh.username, fresh.password);
+          this.lastAuthError = null;
+        }
+      } finally {
+        this.credentialsRefreshInFlight = null;
+      }
+    })();
+    return this.credentialsRefreshInFlight;
+  }
+
   async disconnect(options?: { suppressReconnect?: boolean }): Promise<void> {
     if (options?.suppressReconnect) {this.suppressReconnect = true;}
     return this.close();

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/types/types.ts

@@ -249,6 +249,11 @@ 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;
   chatHeaderAdditional?: { enabled: boolean; element: any };
   headerMenu?: () => void;
   headerChatMenu?: () => void;
@@ -420,6 +425,11 @@ export interface IConfig {
       roomJID: string;
       user: any;
     }) => void;
+    onMessageRetry?: (event: {
+      messageId: string;
+      roomJID: string;
+      messageType: 'text' | 'media';
+    }) => void;
   };
 }