@ethora/chat-component-rn 26.5.7 → 26.5.10

package/src/hooks/useHeapSender.tsx

@@ -38,7 +38,8 @@ export const useHeapSender = (client: XmppClient | null) => {
               !!msg.isReply,
               msg.showInChannel === 'true',
               msg.mainMessage || '',
-              msg.langSource
+              msg.langSource,
+              msg.id
             );
           } else {
             await client.sendMessage(

package/src/hooks/useLogout.tsx

@@ -49,7 +49,7 @@ const logoutService = {
   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
+    //    visible 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
@@ -58,11 +58,11 @@ const logoutService = {
       const state = store.getState();
       const client = (state.chatSettingStore as any)?.client;
       const rooms = state.rooms?.rooms;
-      const activeRoomJID = state.rooms?.activeRoomJID || null;
+      const visibleRoomJID = state.rooms?.visibleRoomJID || null;
       if (client?.flushLastViewedToPrivateStoreStanza) {
         await Promise.race([
           client.flushLastViewedToPrivateStoreStanza(rooms, {
-            activeRoomJID,
+            visibleRoomJID,
             onlyIfNoUnread: true,
           }),
           new Promise((res) => setTimeout(res, 2000)),

package/src/hooks/usePushNotifications.ts

@@ -51,7 +51,13 @@ export function usePushNotifications() {
   };
 
   useEffect(() => {
-    initToken();
+    // initToken is async — `initToken()` without `.catch` leaves any
+    // rejection unhandled (showed as `Uncaught (in promise, id: X)` red
+    // screen in dev). The inner try/catch covers most paths but any
+    // synchronous throw before the try-block ran would still leak.
+    initToken().catch((err) =>
+      console.warn('[usePushNotifications] initToken rejected', err)
+    );
 
     const unsubscribeForeground = onForegroundMessage((message) => {
       setNotification(message);
@@ -78,13 +84,20 @@ export function usePushNotifications() {
       handleNotificationPress(message);
     });
 
-    getInitialNotification().then((message) => {
-      if (message) {
-        console.log('[usePushNotifications] Initial notification:', JSON.stringify(message, null, 2));
-        setNotification(message);
-        handleNotificationPress(message);
-      }
-    });
+    getInitialNotification()
+      .then((message) => {
+        if (message) {
+          console.log('[usePushNotifications] Initial notification:', JSON.stringify(message, null, 2));
+          setNotification(message);
+          handleNotificationPress(message);
+        }
+      })
+      .catch((err) =>
+        console.warn(
+          '[usePushNotifications] getInitialNotification failed',
+          err
+        )
+      );
 
     return () => {
       unsubscribeForeground();

package/src/hooks/useRoomState.tsx

@@ -12,6 +12,9 @@ export const useRoomState = (roomJID?: string) => {
   const activeRoomJID = useSelector(
     (state: RootState) => state.rooms.activeRoomJID
   );
+  const visibleRoomJID = useSelector(
+    (state: RootState) => state.rooms.visibleRoomJID
+  );
   const editAction = useSelector((state: RootState) => state.rooms.editAction);
   const globalLoading = useSelector(
     (state: RootState) => state.rooms.isLoading
@@ -37,6 +40,7 @@ export const useRoomState = (roomJID?: string) => {
     room,
     roomsList,
     activeRoomJID,
+    visibleRoomJID,
     editAction,
     globalLoading,
     loadingText,

package/src/hooks/useSendMessage.tsx

@@ -1,18 +1,30 @@
 import { useCallback } from 'react';
+import { Platform } from 'react-native';
 import { v4 as uuidv4 } from 'uuid';
 import { useXmppClient } from '../context/xmppProvider';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
 import { addRoomMessage, setEditAction } from '../roomStore/roomsSlice';
 import {
   addMessageToHeap,
   clearMessageFailure,
   markMessageFailed,
 } from '../roomStore/roomHeapSlice';
-import { uploadFile } from '../networking/api-requests/auth.api';
-import { RootState } from '../roomStore';
+import { uploadFileViaFetch } from '../networking/api-requests/auth.api';
+import { enqueueOutboundSend } from '../networking/outboundQueue';
+import { RootState, store } from '../roomStore';
+import { getGlobalXmppClient } from '../utils/clientRegistry';
 import { useEventHandlers } from './useEventHandlers';
 import type { IConfig, IMessage } from '../types/types';
 
+// Watchdog: if a message stays "pending" (no server echo) for this
+// 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.
+const 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
@@ -23,9 +35,18 @@ let __sendIdSeq = 0;
 const nextStanzaId = (prefix: string): string =>
   `${prefix}-${Date.now()}-${(__sendIdSeq = (__sendIdSeq + 1) >>> 0)}`;
 
+// Hard client-side cap on a single upload. The backend rejects oversized
+// bodies with HTTP 413; SendInput blocks oversized files at pick time,
+// and this mirrors that limit on every send path (including retries).
+const MAX_MEDIA_BYTES = 50 * 1024 * 1024;
+
 export const useSendMessage = (_configOverride?: IConfig) => {
   const { client } = useXmppClient();
   const dispatch = useDispatch();
+  // useStore gives us imperative getState() access for the watchdog —
+  // peek at the message's current pending/failed state from inside a
+  // setTimeout callback without re-rendering on every redux change.
+  const reduxStore = useStore<RootState>();
 
   // Split selectors so each returns a primitive/stable reference — the
   // single-object selector above caused a "returned a different result
@@ -120,16 +141,85 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         );
       }
 
+      // Silent-failure watchdog (bug #18). If no echo lands within
+      // PENDING_WATCHDOG_MS, flip the bubble to "failed → tap to
+      // retry". We check at fire-time whether the message is still
+      // pending and not already marked failed by the catch path.
+      const watchdogTimer = setTimeout(() => {
+        const state = reduxStore.getState();
+        const roomMsgs = state.rooms?.rooms?.[activeRoomJID]?.messages || [];
+        const stillPending = roomMsgs.find(
+          (m: any) => m.id === optimisticId && m.pending
+        );
+        const alreadyFailed = state.roomHeapSlice?.failedMessages?.[optimisticId];
+        if (stillPending && !alreadyFailed) {
+          console.warn(
+            `Send watchdog fired — message ${optimisticId} stuck pending > ${PENDING_WATCHDOG_MS}ms; marking failed`
+          );
+          dispatch(
+            markMessageFailed({
+              kind: 'text',
+              id: optimisticId,
+              roomJID: activeRoomJID,
+              body: message,
+              isReply,
+              isChecked,
+              mainMessage,
+            })
+          );
+          handleMessageFailed({
+            message,
+            roomJID: activeRoomJID,
+            error: new Error('Send timed out (no server echo)'),
+            messageType: 'text',
+          });
+        }
+      }, PENDING_WATCHDOG_MS);
+
       try {
-        if (!client) {
-          throw new Error('No XMPP client');
+  
+        const effectiveClient: any =
+          client ||
+          [
+            getGlobalXmppClient(),
+            store.getState()?.chatSettingStore?.client,
+          ].find((c: any) => c && c.status === 'online');
+
+        if (!effectiveClient) {
+          const anyClient: any =
+            client ||
+            getGlobalXmppClient() ||
+            store.getState()?.chatSettingStore?.client;
+          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).
-        client.sendMessage(
+        effectiveClient.sendMessage(
           activeRoomJID,
           user.firstName,
           user.lastName,
@@ -149,6 +239,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
           messageType: 'text',
         });
       } catch (error) {
+        clearTimeout(watchdogTimer);
         dispatch(
           markMessageFailed({
             kind: 'text',
@@ -168,7 +259,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         });
       }
     },
-    [editAction, client, user, dispatch, handleMessageSent, handleMessageEdited, handleMessageFailed]
+    [editAction, client, user, dispatch, handleMessageSent, handleMessageEdited, handleMessageFailed, reduxStore]
   );
 
   const sendMedia = useCallback(
@@ -183,6 +274,36 @@ export const useSendMessage = (_configOverride?: IConfig) => {
     ) => {
       client?.onCriticalSend?.(activeRoomJID);
 
+      // Defensive 50 MB guard on every send path (SendInput blocks it at
+      // pick time, but retries replay the saved payload straight here).
+      if (typeof data?.size === 'number' && data.size > MAX_MEDIA_BYTES) {
+        console.warn('media exceeds 50MB cap — not uploading', {
+          name: data?.name,
+          size: data?.size,
+        });
+        if (existingId) {
+          dispatch(
+            markMessageFailed({
+              kind: 'media',
+              id: existingId,
+              roomJID: activeRoomJID,
+              data,
+              type,
+              isReply,
+              isChecked,
+              mainMessage,
+            })
+          );
+        }
+        handleMessageFailed({
+          message: 'media',
+          roomJID: activeRoomJID,
+          error: new Error('File exceeds the 50 MB upload limit'),
+          messageType: 'media',
+        });
+        return;
+      }
+
       const id = existingId || `send-media-message:${uuidv4()}`;
       const optimisticTimestamp = Date.now();
       const optimisticDate = new Date(optimisticTimestamp).toISOString();
@@ -245,11 +366,94 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         );
       }
 
-      try {
-        const mediaData = new FormData();
-        mediaData.append('files', data);
+      // Silent-failure watchdog for media-send (bug #18). Same shape
+      // as the text path: if the optimistic bubble never gets the echo
+      // (e.g. upload completed but XMPP send is buffered offline), flip
+      // to failed → tap to retry.
+      const mediaWatchdog = setTimeout(() => {
+        const state = reduxStore.getState();
+        const roomMsgs = state.rooms?.rooms?.[activeRoomJID]?.messages || [];
+        const stillPending = roomMsgs.find(
+          (m: any) => m.id === id && m.pending
+        );
+        const alreadyFailed = state.roomHeapSlice?.failedMessages?.[id];
+        if (stillPending && !alreadyFailed) {
+          console.warn(
+            `Media-send watchdog fired — ${id} stuck pending > ${PENDING_WATCHDOG_MS}ms; marking failed`
+          );
+          dispatch(
+            markMessageFailed({
+              kind: 'media',
+              id,
+              roomJID: activeRoomJID,
+              data,
+              type,
+              isReply,
+              isChecked,
+              mainMessage,
+            })
+          );
+          handleMessageFailed({
+            message: 'media',
+            roomJID: activeRoomJID,
+            error: new Error('Media send timed out (no server echo)'),
+            messageType: 'media',
+          });
+        }
+      }, PENDING_WATCHDOG_MS);
 
-        const response = await uploadFile(mediaData);
+      // Help RN's FormData polyfill build a proper multipart/file part
+      // (instead of serialising the JS object as JSON). On iOS the
+      // picker can return ph:// or assets-library:// URIs for some
+      // legacy library items — those can't be read as files. Coerce
+      // to a file:// scheme when possible so the body is a real blob.
+      const fileBlob = {
+        uri:
+          typeof data?.uri === 'string'
+            ? data.uri.replace(/^assets-library:\/\//, 'file://')
+            : data?.uri,
+        type:
+          data?.type ||
+          data?.mimeType ||
+          type ||
+          'application/octet-stream',
+        name: data?.name || data?.fileName || `media_${Date.now()}`,
+      };
+
+      // Mirror the web client: a single multipart POST to /files/ with
+      // the file under the plural "files" field. We send it via fetch
+      // (not axios) because RN's fetch sets the multipart boundary on the
+      // Content-Type header correctly. The previous axios fallback omitted
+      // a valid boundary, so the server mis-parsed one file as many and
+      // rejected the request with HTTP 413 "TOO_MANY_FILES". The only
+      // retry is the documented singular-"file" fallback for deployments
+      // that 500 on the plural field (bug #10).
+      const tryUpload = async () => {
+        const fd = new FormData();
+        fd.append('files', fileBlob as any);
+        try {
+          return await uploadFileViaFetch(fd);
+        } catch (err: any) {
+          if (err?.response?.status === 500) {
+            console.warn(
+              'upload "files" field returned 500 — retrying with "file" (singular)',
+              { name: fileBlob.name, type: fileBlob.type }
+            );
+            const fd2 = new FormData();
+            fd2.append('file', fileBlob as any);
+            return await uploadFileViaFetch(fd2);
+          }
+          throw err;
+        }
+      };
+
+      try {
+        const response = await tryUpload();
+        // Upload succeeded — the stanza is now in flight. If the
+        // server echo arrives within the watchdog window the bubble
+        // flips normally; if not, the watchdog still fires and marks
+        // it failed. We don't clear the timer on upload success because
+        // the XMPP send could still fail silently.
 
         for (const item of response.data.results) {
           const messagePayload = {
@@ -281,7 +485,34 @@ 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.
-          client?.sendMediaMessageStanza(activeRoomJID, messagePayload, id);
+          const effectiveMediaClient: any =
+            client ||
+            [
+              getGlobalXmppClient(),
+              store.getState()?.chatSettingStore?.client,
+            ].find((c: any) => c && c.status === 'online');
+          if (effectiveMediaClient) {
+            effectiveMediaClient.sendMediaMessageStanza(
+              activeRoomJID,
+              messagePayload,
+              id
+            );
+          } else {
+            const anyMediaClient: any =
+              client ||
+              getGlobalXmppClient() ||
+              store.getState()?.chatSettingStore?.client;
+            try {
+              anyMediaClient?.forceReconnect?.();
+            } catch {}
+            enqueueOutboundSend({
+              optimisticId: id,
+              roomJID: activeRoomJID,
+              enqueuedAt: Date.now(),
+              send: (c) =>
+                c.sendMediaMessageStanza(activeRoomJID, messagePayload, id),
+            });
+          }
         }
 
         await handleMessageSent({
@@ -300,16 +531,30 @@ export const useSendMessage = (_configOverride?: IConfig) => {
           },
         });
       } catch (error: any) {
+        // Upload (or stanza send) threw an explicit error. Clear the
+        // watchdog so it doesn't double-fire `markMessageFailed`.
+        clearTimeout(mediaWatchdog);
         // 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`).
+        const uriStr = typeof data?.uri === 'string' ? data.uri : '';
+        const uriScheme = uriStr.match(/^([a-z]+):/i)?.[1] ?? 'unknown';
         console.error('upload failed', {
           status: error?.response?.status,
           statusText: error?.response?.statusText,
           serverBody: error?.response?.data,
           requestUrl: error?.config?.url,
           axiosMessage: error?.message,
+          axiosCode: error?.code,
+          axiosCauseMessage: error?.cause?.message,
+          uri: uriStr,
+          uriScheme,
+          mime: fileBlob.type,
+          fileSizeBytes: data?.size ?? null,
+          fileName: fileBlob.name,
+          platformOS: Platform.OS,
+          platformVersion: Platform.Version,
         });
         dispatch(
           markMessageFailed({
@@ -331,7 +576,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         });
       }
     },
-    [client, config, user, dispatch, handleMessageSent, handleMessageFailed]
+    [client, config, user, dispatch, handleMessageSent, handleMessageFailed, reduxStore]
   );
 
   // Retry a previously-failed send by replaying the saved payload from

package/src/hooks/useUnreadMessagesCounter.ts

@@ -1,6 +1,6 @@
 import { useSyncExternalStore } from 'react';
 import { IRoom } from '../types/types';
-import { RootState, store } from '../roomStore';
+import { store } from '../roomStore';
 
 interface UnreadMessagesMap {
   [roomJid: string]: number;
@@ -13,21 +13,18 @@ interface UnreadMessagesStats {
 }
 
 export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
-  const subscribe = (callback: () => void) => {
-    const unsubscribe = store.subscribe(() => {
-      const state: RootState = store.getState();
-      const rooms = state.rooms?.rooms;
-
-      if (rooms) {
-        Object.entries(rooms).forEach(([roomJid, room]: [string, IRoom]) => {
-          if (room.unreadMessages !== undefined) {
-            callback();
-          }
-        });
-      }
-    });
-    return unsubscribe;
-  };
+  // Notify React on EVERY store change and let useSyncExternalStore's
+  // snapshot comparison (Object.is on the `rooms` reference) decide
+  // whether to re-render. The previous implementation only fired the
+  // callback while iterating rooms that already had `unreadMessages`
+  // defined — so when `rooms` became empty (logout, or the last room
+  // removed) the loop body never ran, the callback never fired, and the
+  // hook never re-rendered: a consumer's badge stayed stuck at its last
+  // non-zero count after logout. (It's also cheaper — one callback per
+  // change instead of one per unread room. Redux Toolkit keeps the
+  // `rooms` slice reference stable across actions that don't touch it,
+  // so non-rooms dispatches still don't trigger a re-render.)
+  const subscribe = (callback: () => void) => store.subscribe(callback);
 
   const rooms = useSyncExternalStore(
     subscribe,

package/src/main.ts

@@ -28,6 +28,7 @@ export { XmppProvider } from './context/xmppProvider';
 
 // Hooks that consumers usually need (badge counts, logout, push, etc.).
 export { useUnread } from './hooks/useUnreadMessagesCounter';
+export { useChatRoomFocus } from './hooks/useChatRoomFocus';
 export { logoutService } from './hooks/useLogout';
 export { useQRCodeChat, handleQRChatId } from './hooks/useQRCodeChatHandler';
 export { resendMessage } from './utils/resendMessage';

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

@@ -8,8 +8,9 @@ import { User } from '../../types/types';
 // } from 'firebase/auth';
 // import { app } from '../../../firebase-config';
 
-import http, { getCurrentAppToken } from '../apiClient';
+import http, { getCurrentAppToken, getCurrentBaseURL } from '../apiClient';
 import { store } from '../../roomStore';
+import { pushLog } from '../../utils/devLogger';
 
 // login functions
 export async function loginEmail(email: string, password: string) {
@@ -142,3 +143,56 @@ export function uploadFile(formData: FormData) {
     },
   });
 }
+
+export async function uploadFileViaFetch(formData: FormData): Promise<{ data: any }> {
+  const token = store.getState().chatSettingStore?.user?.token ?? '';
+  const baseUrl = getCurrentBaseURL();
+  const url = `${baseUrl.replace(/\/$/, '')}/files/`;
+
+  pushLog('http', `→ POST ${url} (fetch)`, {
+    headers: { Authorization: token ? token.slice(0, 16) + '…' : '[empty]', Accept: '*/*' },
+  });
+
+  let res: Response;
+  try {
+    res = await fetch(url, {
+      method: 'POST',
+      headers: {
+        Authorization: token,
+        Accept: '*/*',
+      },
+      body: formData as any,
+    });
+  } catch (e: any) {
+    pushLog('http', `← ERR fetch /files/`, {
+      name: e?.name,
+      message: e?.message,
+      stack: e?.stack,
+    });
+    const err: any = new Error(e?.message || 'Network request failed');
+    err.code = 'ERR_NETWORK';
+    err.cause = e;
+    err.config = { url: '/files/' };
+    throw err;
+  }
+
+  if (!res.ok) {
+    let body: any = null;
+    try {
+      body = await res.json();
+    } catch {
+      try { body = await res.text(); } catch { body = null; }
+    }
+    pushLog('http', `← ${res.status} POST /files/ (fetch)`, body);
+    const err: any = new Error(`Upload failed: ${res.status}`);
+    err.response = { status: res.status, statusText: res.statusText, data: body };
+    err.config = { url: '/files/' };
+    throw err;
+  }
+
+  const data = await res.json();
+  pushLog('http', `← ${res.status} POST /files/ (fetch)`, {
+    resultsCount: Array.isArray(data?.results) ? data.results.length : 'n/a',
+  });
+  return { data };
+}

package/src/networking/apiClient.ts

@@ -171,7 +171,8 @@ http.interceptors.response.use(
     isRefreshing = true;
     try {
       const tokens = await refresh();
-      console.log('tokens', tokens);
+      // (was: console.log('tokens', tokens) — dumped the full response
+      // incl. access/refresh/ws tokens on every refresh; removed.)
       isRefreshing = false;
       originalRequest.headers.Authorization = tokens.data.token;
       processQueue(tokens.data.token);