@ethora/chat-component-rn 26.5.5 → 26.5.10

package/src/hooks/useSendMessage.tsx

@@ -1,14 +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 } from '../roomStore/roomHeapSlice';
-import { uploadFile } from '../networking/api-requests/auth.api';
-import { RootState } from '../roomStore';
+import {
+  addMessageToHeap,
+  clearMessageFailure,
+  markMessageFailed,
+} from '../roomStore/roomHeapSlice';
+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
@@ -19,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
@@ -38,8 +63,13 @@ export const useSendMessage = (_configOverride?: IConfig) => {
     handleMessageSent,
     handleMessageFailed,
     handleMessageEdited,
+    handleMessageRetry,
   } = useEventHandlers(config);
 
+  const failedMessages = useSelector(
+    (state: RootState) => state.roomHeapSlice?.failedMessages || {}
+  );
+
   const sendMessage = useCallback(
     async (
       message: string,
@@ -111,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,
@@ -140,6 +239,18 @@ export const useSendMessage = (_configOverride?: IConfig) => {
           messageType: 'text',
         });
       } catch (error) {
+        clearTimeout(watchdogTimer);
+        dispatch(
+          markMessageFailed({
+            kind: 'text',
+            id: optimisticId,
+            roomJID: activeRoomJID,
+            body: message,
+            isReply,
+            isChecked,
+            mainMessage,
+          })
+        );
         handleMessageFailed({
           message,
           roomJID: activeRoomJID,
@@ -148,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(
@@ -158,11 +269,42 @@ export const useSendMessage = (_configOverride?: IConfig) => {
       activeRoomJID: string,
       isReply: boolean = false,
       isChecked: boolean = false,
-      mainMessage: string = ''
+      mainMessage: string = '',
+      existingId?: string
     ) => {
       client?.onCriticalSend?.(activeRoomJID);
 
-      const id = `send-media-message:${uuidv4()}`;
+      // 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();
       const selfId =
@@ -171,7 +313,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         `${user?.firstName || ''} ${user?.lastName || ''}`.trim() || selfId;
       const fileSizeStr = data?.size != null ? String(data.size) : '';
 
-      if (!config?.disableSentLogic) {
+      if (!config?.disableSentLogic && !existingId) {
         dispatch(
           addRoomMessage({
             roomJID: activeRoomJID,
@@ -224,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);
+
+      // 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()}`,
+      };
 
-        const response = await uploadFile(mediaData);
+      // 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 = {
@@ -260,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({
@@ -279,17 +531,43 @@ 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({
+            kind: 'media',
+            id,
+            roomJID: activeRoomJID,
+            data,
+            type,
+            isReply,
+            isChecked,
+            mainMessage,
+          })
+        );
         handleMessageFailed({
           message: 'media',
           roomJID: activeRoomJID,
@@ -298,7 +576,44 @@ 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
+  // the heap. Clears the failure flag first so the bubble flips back to
+  // "sending..."; if the retry fails again `markMessageFailed` re-arms
+  // it. No-op when the id isn't in the failed map.
+  const retryMessage = useCallback(
+    async (failedId: string) => {
+      const payload = failedMessages[failedId];
+      if (!payload) {return;}
+      dispatch(clearMessageFailure(failedId));
+      handleMessageRetry({
+        messageId: failedId,
+        roomJID: payload.roomJID,
+        messageType: payload.kind,
+      });
+      if (payload.kind === 'text') {
+        await sendMessage(
+          payload.body,
+          payload.roomJID,
+          payload.isReply,
+          payload.isChecked,
+          payload.mainMessage
+        );
+      } else {
+        await sendMedia(
+          payload.data,
+          payload.type,
+          payload.roomJID,
+          payload.isReply,
+          payload.isChecked,
+          payload.mainMessage,
+          failedId
+        );
+      }
+    },
+    [failedMessages, dispatch, handleMessageRetry, sendMessage, sendMedia]
   );
 
   // ChatRoom/ThreadWrapper consume this as the "edit branch" of send.
@@ -355,6 +670,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
     sendMessage,
     sendMedia,
     sendEditMessage,
+    retryMessage,
     isLastMessageFromUserAndProcessing,
   };
 };

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) {
@@ -134,7 +135,64 @@ export function uploadFile(formData: FormData) {
     headers: {
       Authorization: token,
       Accept: '*/*',
-      'Content-Type': 'multipart/form-data',
+      'Content-Type': null,
     },
+    transformRequest: (data: any, headers: any) => {
+      if (headers?.delete) {headers.delete('Content-Type');}
+      return data;
+    },
+  });
+}
+
+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);