@ethora/chat-component-rn 26.4.1 → 26.5.1

package/src/helpers/updateMessagesTillLast.tsx

@@ -1,13 +1,17 @@
 import XmppClient from '../networking/xmppClient';
 import { store } from '../roomStore';
-import {
-  getLastMessageTimestamp,
-  insertUsers,
-  setRoomMessages,
-} from '../roomStore/roomsSlice';
+import { setRoomMessages } from '../roomStore/roomsSlice';
 import { IMessage, IRoom } from '../types/types';
 import { checkUniqueUsers } from './checkUniqueUsers';
 
+// BUGFIX: previously this module imported `getLastMessageTimestamp`
+// + `insertUsers` from roomsSlice — neither exists in the slice, so
+// any caller (useChatWrapperInit) crashed at runtime with
+// "getLastMessageTimestamp is not a function" the first time the
+// reducer was hit. Replaced the lookup with an inline read of
+// `room.lastMessageTimestamp`; the dead `insertUsers` dispatch was
+// dropped (no action exists to receive it).
+
 export const updateMessagesTillLast = async (
   rooms: {
     [jid: string]: IRoom;
@@ -28,14 +32,12 @@ export const updateMessagesTillLast = async (
       );
 
       const lastTimestampsByJid = currentBatch.reduce(
-        (acc, current: string) => {
-          acc[current] = getLastMessageTimestamp(
-            store.getState().rooms,
-            current
-          );
+        (acc: Record<string, number>, current: string) => {
+          const room = (store.getState() as any).rooms?.rooms?.[current];
+          acc[current] = Number(room?.lastMessageTimestamp ?? 0) || 0;
           return acc;
         },
-        {}
+        {} as Record<string, number>
       );
 
       await Promise.all(
@@ -75,12 +77,13 @@ export const updateMessagesTillLast = async (
               );
 
               if (!isMessageFound && !(counter <= maxFetchAttempts - 1)) {
-                const fixedUsers = await checkUniqueUsers(
-                  currentJidNewMessages
-                );
-                if (fixedUsers && fixedUsers.length > 0) {
-                  store.dispatch(insertUsers({ newUsers: fixedUsers }));
-                }
+                // Fire-and-forget — checkUniqueUsers resolves to an
+                // updated RoomMember list, but there's no slice
+                // action wired to receive it on RN yet (the web SDK
+                // has one; the port left a TODO). Keep the call so
+                // the API request goes out (it warms the cache for
+                // later renders) but stop short of dispatching.
+                await checkUniqueUsers(currentJidNewMessages);
 
                 store.dispatch(
                   setRoomMessages({

package/src/hooks/useComposing.tsx

@@ -11,11 +11,6 @@ const useComposing = (config?: IConfig) => {
   const { user } = useChatSettingState();
 
   const sendStartComposing = useCallback(() => {
-    console.log('🟣 [useComposing] start', {
-      hasClient: !!client,
-      room: activeRoomJID,
-      disabled: !!config?.disableTypingIndicator,
-    });
     if (config?.disableTypingIndicator) {
       return;
     }
@@ -29,10 +24,6 @@ const useComposing = (config?: IConfig) => {
   }, [activeRoomJID, client, config?.disableTypingIndicator, user.firstName, user.lastName]);
 
   const sendEndComposing = useCallback(() => {
-    console.log('🟣 [useComposing] end', {
-      hasClient: !!client,
-      room: activeRoomJID,
-    });
     if (config?.disableTypingIndicator) {
       return;
     }

package/src/hooks/useLogout.tsx

@@ -1,28 +1,148 @@
 import { useDispatch } from 'react-redux';
 import { DeviceEventEmitter } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { store } from '../roomStore';
 import { logout } from '../roomStore/chatSettingsSlice';
 import { setLogoutState } from '../roomStore/roomsSlice';
 import { useCallback } from 'react';
 import { clearHeap } from '../roomStore/roomHeapSlice';
 import { pushSubscriptionService } from '../services/pushSubscriptionService';
+import { clearRoomsRestCache } from '../networking/api-requests/rooms.api';
+import { clearPersistedState } from '../roomStore/persistence';
+import { localStorageConstants } from '../helpers/constants/LOCAL_STORAGE';
+
+// AsyncStorage keys the library writes but that aren't cleared by any
+// slice reducer. Listed here so a single logout call wipes the full
+// library footprint, not just the slices it happens to think about.
+//
+// `@ethora/chat-component-scope` is intentionally NOT included — it
+// acts as a per-tenant fingerprint that `ensureScopedChatCache` reads
+// on the next bootstrap to detect appId/baseUrl changes and force a
+// re-init when needed. Wiping it would just re-stamp it on the next
+// login with the same value, no-op churn.
+const LIBRARY_STRAY_KEYS = [
+  '@ethora/chat-component-qrChatId', // pending QR join target — should not bleed across sessions
+];
 
 const logoutService = {
-  performLogout: () => {
-    // Clear any pending notifications
-    DeviceEventEmitter.emit('chat:clear-notifications');
-
-    pushSubscriptionService.reset();
-    store.dispatch(logout());
-    store.dispatch(setLogoutState());
-    store.dispatch(clearHeap());
+  /**
+   * Tear down the active chat session end-to-end:
+   *  1. Fire UI-side events (notifications, push, redux slices).
+   *  2. The redux dispatch of `chat/logout` triggers
+   *     `logoutMiddleware`, which emits `ethora-xmpp-logout` on
+   *     `DeviceEventEmitter`. `XmppProvider` listens for that event,
+   *     disconnects the XMPP transport, clears the global client
+   *     singleton, and awaits `clearPersistedState()` to wipe the
+   *     two persisted slice keys.
+   *  3. We additionally clear:
+   *     - the 60s in-memory REST `/chats/my` cache (stale rooms
+   *       leak across user-switch within the cache window otherwise),
+   *     - leftover AsyncStorage keys the slices don't touch
+   *       (pending QR join target, push subscription set),
+   *     - the persistence keys directly (belt-and-suspenders against
+   *       the persistence middleware's 200ms debounce silently losing
+   *       the post-logout write if the app is killed mid-flush).
+   *
+   * Returns a Promise so callers can sequence a navigation / restart
+   * AFTER all the disk work has actually landed.
+   */
+  performLogout: async (): Promise<void> => {
+    // 0. Flush lastViewedTimestamp to the server's private store BEFORE
+    //    we close XMPP. Only rooms with no outstanding unread (plus the
+    //    active room) get their entries updated — rooms with unread
+    //    keep their old marker so the next login still surfaces those
+    //    messages as unread. Without this, an active-room view at
+    //    logout would still appear unread on next login because we
+    //    never persisted "I read up to now".
+    try {
+      const state = store.getState();
+      const client = (state.chatSettingStore as any)?.client;
+      const rooms = state.rooms?.rooms;
+      const activeRoomJID = state.rooms?.activeRoomJID || null;
+      if (client?.flushLastViewedToPrivateStoreStanza) {
+        await Promise.race([
+          client.flushLastViewedToPrivateStoreStanza(rooms, {
+            activeRoomJID,
+            onlyIfNoUnread: true,
+          }),
+          new Promise((res) => setTimeout(res, 2000)),
+        ]);
+      }
+    } catch (e) {
+      console.warn('logoutService: private store flush failed', e);
+    }
+
+    // 1. UI: clear in-app notification toast queue.
+    try {
+      DeviceEventEmitter.emit('chat:clear-notifications');
+    } catch {
+      /* non-fatal */
+    }
+
+    // 2. Push: clear locally-subscribed-rooms cache. Doesn't talk to the
+    //    server — that's the host app's responsibility (it owns the FCM/
+    //    APNs token lifecycle).
+    try {
+      await pushSubscriptionService.reset();
+    } catch (e) {
+      console.warn('logoutService: push reset failed', e);
+    }
+
+    // 3. REST: nuke the in-memory `/chats/my` cache so the next login
+    //    doesn't read user A's rooms while user B is bootstrapping.
+    try {
+      clearRoomsRestCache();
+    } catch {
+      /* non-fatal */
+    }
+
+    // 4. Redux: dispatch the trio. Order matters — `chat/logout` is
+    //    what triggers `logoutMiddleware → ethora-xmpp-logout` (and
+    //    therefore XmppProvider's `client.disconnect()`), so fire it
+    //    AFTER the slices that don't need the xmpp client.
+    try {
+      store.dispatch(setLogoutState()); // rooms slice → {} + null
+      store.dispatch(clearHeap()); // message heap (dedup set)
+      store.dispatch(logout()); // chat slice → user wiped + removes ETHORA_USER
+    } catch (e) {
+      console.warn('logoutService: redux dispatch failed', e);
+    }
+
+    // 5. Persisted state: belt-and-suspenders. XmppProvider's logout
+    //    listener also calls clearPersistedState, but doing it here too
+    //    means the disk is clean before this Promise resolves —
+    //    regardless of how fast the event-emitter listener runs.
+    try {
+      await clearPersistedState();
+    } catch {
+      /* non-fatal */
+    }
+
+    // 6. Stray keys the slices don't touch.
+    try {
+      await AsyncStorage.multiRemove([
+        ...LIBRARY_STRAY_KEYS,
+        // Belt-and-suspenders: the chat slice's `logout` reducer
+        // schedules an async remove of ETHORA_USER fire-and-forget;
+        // re-issue it here so the disk is provably clean before this
+        // Promise resolves.
+        localStorageConstants.ETHORA_USER,
+      ]);
+    } catch (e) {
+      console.warn('logoutService: stray-key clear failed', e);
+    }
   },
 };
+
 export const useLogout = () => {
   const dispatch = useDispatch();
 
   const handleLogout = useCallback(() => {
-    logoutService.performLogout();
+    // The hook fires-and-forgets — consumers that need to await the
+    // teardown should call `logoutService.performLogout()` directly.
+    logoutService.performLogout().catch((err) => {
+      console.warn('useLogout: performLogout rejected', err);
+    });
   }, []);
 
   return handleLogout;

package/src/hooks/useSendMessage.tsx

@@ -1,12 +1,24 @@
 import { useCallback } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import { useXmppClient } from '../context/xmppProvider';
 import { useDispatch, useSelector } from 'react-redux';
 import { addRoomMessage, setEditAction } from '../roomStore/roomsSlice';
+import { addMessageToHeap } from '../roomStore/roomHeapSlice';
 import { uploadFile } from '../networking/api-requests/auth.api';
 import { RootState } from '../roomStore';
 import { useEventHandlers } from './useEventHandlers';
 import type { IConfig, IMessage } from '../types/types';
 
+// 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
+// insertMessageWithDelimiter dedup the second optimistic message into
+// the first by id, so 10 spam-taps visually collapsed into 1 bubble
+// whose body was whatever the last dispatch wrote.
+let __sendIdSeq = 0;
+const nextStanzaId = (prefix: string): string =>
+  `${prefix}-${Date.now()}-${(__sendIdSeq = (__sendIdSeq + 1) >>> 0)}`;
+
 export const useSendMessage = (_configOverride?: IConfig) => {
   const { client } = useXmppClient();
   const dispatch = useDispatch();
@@ -71,7 +83,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 = `send-text-message-${Date.now()}`;
+      const optimisticId = nextStanzaId('send-text-message');
       const optimisticDate = new Date().toISOString();
       const selfId =
         (user as any)?.xmppUsername || (user as any)?.walletAddress || '';
@@ -99,16 +111,6 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         );
       }
 
-      console.log('🔵 [useSendMessage] sending', {
-        room: activeRoomJID,
-        hasClient: !!client,
-        first: user?.firstName,
-        last: user?.lastName,
-        wallet: user?.walletAddress,
-        len: message?.length,
-        optimisticId,
-      });
-
       try {
         if (!client) {
           throw new Error('No XMPP client');
@@ -154,50 +156,82 @@ export const useSendMessage = (_configOverride?: IConfig) => {
       data: any,
       type: string,
       activeRoomJID: string,
-      isReply?: boolean,
-      isChecked?: boolean,
-      mainMessage?: string
+      isReply: boolean = false,
+      isChecked: boolean = false,
+      mainMessage: string = ''
     ) => {
-      const mediaData = new FormData();
-      mediaData.append('files', data);
-
       client?.onCriticalSend?.(activeRoomJID);
 
-      // Optimistic pending bubble — same pattern as text send. Render
-      // a placeholder with `isMediafile: true` so MessageBubble shows
-      // a media-shaped pending tile while the upload + send is in
-      // flight; replaced in-place by the server echo via xmppId dedupe.
-      const optimisticId = `send-media-message-${Date.now()}`;
-      const optimisticDate = new Date().toISOString();
+      const id = `send-media-message:${uuidv4()}`;
+      const optimisticTimestamp = Date.now();
+      const optimisticDate = new Date(optimisticTimestamp).toISOString();
       const selfId =
         (user as any)?.xmppUsername || (user as any)?.walletAddress || '';
-      const placeholderMessage: IMessage = {
-        id: optimisticId,
-        xmppId: optimisticId,
-        body: 'media',
-        roomJid: activeRoomJID,
-        date: optimisticDate,
-        pending: true,
-        isDeleted: false,
-        isMediafile: 'true',
-        mimetype: type,
-        originalName: data?.name,
-        user: {
-          ...(user as any),
-          id: selfId,
-          name: `${user?.firstName || ''} ${user?.lastName || ''}`.trim() || selfId,
-        } as any,
-      } as IMessage;
+      const displayName =
+        `${user?.firstName || ''} ${user?.lastName || ''}`.trim() || selfId;
+      const fileSizeStr = data?.size != null ? String(data.size) : '';
+
       if (!config?.disableSentLogic) {
         dispatch(
-          addRoomMessage({ roomJID: activeRoomJID, message: placeholderMessage })
+          addRoomMessage({
+            roomJID: activeRoomJID,
+            message: {
+              id: id,
+              body: 'media',
+              roomJid: activeRoomJID,
+              date: optimisticDate,
+              messageTimestampMs: optimisticTimestamp,
+              user: {
+                ...(user as any),
+                id: selfId,
+                name: displayName,
+              },
+              pending: true,
+              isDeleted: false,
+              xmppId: id,
+              xmppFrom: `${activeRoomJID}/${selfId}`,
+              isSystemMessage: 'false',
+              isMediafile: 'true',
+              fileName: data?.name,
+              location: '',
+              locationPreview: '',
+              mimetype: type,
+              originalName: data?.name,
+              size: fileSizeStr,
+              isReply,
+              showInChannel: `${isChecked}`,
+              mainMessage,
+            } as any as IMessage,
+          })
+        );
+        dispatch(
+          addMessageToHeap({
+            id: id,
+            user: {
+              ...(user as any),
+              id: selfId,
+              name: displayName,
+            },
+            date: optimisticDate,
+            messageTimestampMs: optimisticTimestamp,
+            body: 'media',
+            roomJid: activeRoomJID,
+            xmppFrom: `${activeRoomJID}/${selfId}`,
+            isReply,
+            showInChannel: `${isChecked}` as any,
+            mainMessage,
+          } as any as IMessage)
         );
       }
 
       try {
+        const mediaData = new FormData();
+        mediaData.append('files', data);
+
         const response = await uploadFile(mediaData);
-        response.data.results.forEach(async (item: any) => {
-          const payload = {
+
+        for (const item of response.data.results) {
+          const messagePayload = {
             firstName: user.firstName,
             lastName: user.lastName,
             walletAddress: user.walletAddress,
@@ -217,34 +251,54 @@ export const useSendMessage = (_configOverride?: IConfig) => {
             attachmentId: item?._id,
             wrappable: true,
             roomJid: activeRoomJID,
-            showInChannel: isChecked || false,
-            isReply: isReply || false,
-            mainMessage: mainMessage || '',
+            showInChannel: isChecked,
+            isReply,
+            mainMessage,
             isPrivate: item?.isPrivate,
             __v: item.__v,
           };
-          // Pass optimisticId as the stanza id so the echo's outer
-          // id matches our placeholder's xmppId and dedup'es in place.
-          client?.sendMediaMessageStanza(activeRoomJID, payload, optimisticId);
-          await handleMessageSent({
-            message: item.location || '',
-            roomJID: activeRoomJID,
-            user,
-            messageType: 'media',
-            metadata: payload,
-          });
+          // Stanza id == placeholder id so the MUC echo's outer
+          // <message id="..."> matches xmppId on the placeholder and
+          // insertMessageWithDelimiter merges in place + flips pending.
+          client?.sendMediaMessageStanza(activeRoomJID, messagePayload, id);
+        }
+
+        await handleMessageSent({
+          message: 'media',
+          roomJID: activeRoomJID,
+          user,
+          messageType: 'media',
+          metadata: {
+            isReply,
+            isChecked,
+            mainMessage,
+            fileData: data,
+            fileType: type,
+            messageId: id,
+            uploadResults: response.data.results,
+          },
+        });
+      } catch (error: any) {
+        // Surface the real server payload so we can see why the upload
+        // was rejected (axios collapses the message to "Request failed
+        // with status code N"; the actual reason lives in
+        // `error.response.data`).
+        console.error('upload failed', {
+          status: error?.response?.status,
+          statusText: error?.response?.statusText,
+          serverBody: error?.response?.data,
+          requestUrl: error?.config?.url,
+          axiosMessage: error?.message,
         });
-      } catch (error) {
-        console.error('Media upload failed', error);
         handleMessageFailed({
-          message: '',
+          message: 'media',
           roomJID: activeRoomJID,
           error: error as Error,
           messageType: 'media',
         });
       }
     },
-    [client, user, handleMessageSent, handleMessageFailed]
+    [client, config, user, dispatch, handleMessageSent, handleMessageFailed]
   );
 
   // ChatRoom/ThreadWrapper consume this as the "edit branch" of send.

package/src/networking/api-requests/auth.api.ts

@@ -134,7 +134,7 @@ export function uploadFile(formData: FormData) {
     headers: {
       Authorization: token,
       Accept: '*/*',
-      // "Content-Type": "multipart/form-data",
+      'Content-Type': 'multipart/form-data',
     },
   });
 }

package/src/networking/api-requests/user.api.ts

@@ -56,6 +56,7 @@ export async function updateProfile(fd: FormData): Promise<{ user: User }> {
     const response = await http.put('/users', fd, {
       headers: {
         Authorization: token,
+        'Content-Type': 'multipart/form-data',
       },
     });
     return response.data;

package/src/networking/apiClient.ts

@@ -2,13 +2,16 @@ import axios from 'axios';
 import { store } from '../roomStore';
 
 import { logout, refreshTokens } from '../roomStore/chatSettingsSlice';
-import { appToken as defaultAppToken } from '../../api.config';
 import { installAxiosCapture } from '../utils/devLogger';
 
-const DEFAULT_BASE_URL = 'https://api.chat.ethora.com/v1';
+// Per product-code-policy: no compiled-in Ethora endpoints or tokens.
+// Consumers must call `setBaseURL(baseUrl, appToken)` (or pass
+// `baseUrl` + the token-bearing user / jwt-login config via the
+// top-level `<Chat>` props) before any REST call is issued.
+const DEFAULT_BASE_URL = '';
 
 let currentBaseURL = DEFAULT_BASE_URL;
-let currentAppToken: string = defaultAppToken;
+let currentAppToken: string = '';
 
 const http = axios.create({
   baseURL: currentBaseURL,
@@ -55,13 +58,22 @@ export function refresh(): Promise<{
               refreshToken: response.data.refreshToken,
             })
           );
+          // BUGFIX: previously the `.then` only dispatched and never
+          // resolved, so every `await refresh()` callsite hung forever
+          // on the happy path. Resolve with the axios response shape so
+          // the interceptor can read `tokens.data.token` to retry.
+          resolve(response);
         })
         .catch((error) => {
           reject(error);
         });
     } catch (error) {
+      // BUGFIX: previously the outer-try catch dispatched logout but
+      // never rejected, so a synchronous throw from `http.post` (e.g.
+      // a bad URL) would hang the promise. Reject explicitly.
       console.log('errr');
       store.dispatch(logout());
+      reject(error);
     }
   });
 }
@@ -93,11 +105,30 @@ http.interceptors.response.use(
     // BUGFIX: the original condition was `if (!enabled)` — inverted, so
     // turning `refreshTokens.enabled: true` actually DISABLED the refresh
     // path on 401. Use the correct sense.
-    if (store.getState().chatSettingStore?.config?.refreshTokens?.enabled) {
-      if (
-        store.getState().chatSettingStore?.config?.refreshTokens
-          ?.refreshFunction
-      ) {
+    if (!store.getState().chatSettingStore?.config?.refreshTokens?.enabled) {
+      // BUGFIX: previously this branch fell off the end of the async
+      // function and returned `undefined`, which axios treats as a
+      // resolved-with-undefined response. Callers expecting an error
+      // got `undefined` instead, silently swallowing every failure
+      // when the refresh path isn't configured. Re-reject so the
+      // original error reaches the caller.
+      return Promise.reject(error);
+    }
+
+    const originalRequest = error.config;
+    const status = error.response?.status;
+
+    // Refresh paths only fire on 401. Anything else passes through.
+    if (!error.response || status !== 401) {
+      return Promise.reject(error);
+    }
+
+    if (
+      store.getState().chatSettingStore?.config?.refreshTokens?.refreshFunction
+    ) {
+      // Consumer-supplied refresh function. Call it, dispatch the new
+      // tokens, retry the original request.
+      try {
         const { refreshToken, accessToken } = store
           .getState()
           .chatSettingStore?.config?.refreshTokens?.refreshFunction();
@@ -107,42 +138,50 @@ http.interceptors.response.use(
             refreshToken: refreshToken,
           })
         );
-        return;
-      } else {
-        const originalRequest = error.config;
-
-        if (!error.response || error.response.status !== 401) {
-          throw error;
-        }
-        if (
-          originalRequest.url === '/users/login/refresh' ||
-          originalRequest.url === '/users/login'
-        ) {
-          return Promise.reject(error);
-        }
-
-        originalRequest._retry = true;
-
-        if (isRefreshing) {
-          const retryOriginalRequest = addRequestToQueue(originalRequest);
-
-          return retryOriginalRequest;
-        } else {
-          isRefreshing = true;
-          try {
-            const tokens = await refresh();
-            console.log('tokens', tokens);
-            isRefreshing = false;
-            originalRequest.headers.Authorization = tokens.data.token;
-            processQueue(tokens.data.token);
-            return http(originalRequest);
-          } catch (refreshErr) {
-            isRefreshing = false;
-            return refreshErr;
-          }
+        // BUGFIX: previously this branch returned `undefined` after
+        // dispatching, so the original request was never retried and
+        // the caller resolved with undefined. Stamp the new token on
+        // the original config and replay.
+        if (originalRequest?.headers) {
+          originalRequest.headers.Authorization = accessToken;
         }
+        return http(originalRequest);
+      } catch (refreshErr) {
+        return Promise.reject(refreshErr);
       }
     }
+
+    // Built-in `/users/login/refresh` path. Skip if the failing request
+    // IS the refresh / login itself — otherwise we'd loop forever.
+    if (
+      originalRequest.url === '/users/login/refresh' ||
+      originalRequest.url === '/users/login'
+    ) {
+      return Promise.reject(error);
+    }
+
+    originalRequest._retry = true;
+
+    if (isRefreshing) {
+      const retryOriginalRequest = addRequestToQueue(originalRequest);
+      return retryOriginalRequest;
+    }
+
+    isRefreshing = true;
+    try {
+      const tokens = await refresh();
+      console.log('tokens', tokens);
+      isRefreshing = false;
+      originalRequest.headers.Authorization = tokens.data.token;
+      processQueue(tokens.data.token);
+      return http(originalRequest);
+    } catch (refreshErr) {
+      isRefreshing = false;
+      // BUGFIX: previously this returned the error (resolving the
+      // promise with the error as value) instead of rejecting, so
+      // axios callers got the error as a "successful" response body.
+      return Promise.reject(refreshErr);
+    }
   }
 );