@ethora/chat-component-rn 26.5.5 → 26.5.10

package/src/helpers/keyboardLayout.ts

@@ -0,0 +1,18 @@
+type KeyboardLayoutArgs = {
+  platform: string;
+  configuredOffset?: number;
+  bottomInset?: number;
+};
+
+export const getKeyboardVerticalOffset = ({
+  platform,
+  configuredOffset = 0,
+  bottomInset = 0,
+}: KeyboardLayoutArgs): number =>
+  configuredOffset + (platform === 'ios' ? bottomInset : 0);
+
+export const getInputDockPaddingBottom = ({
+  platform,
+  bottomInset = 0,
+}: Omit<KeyboardLayoutArgs, 'configuredOffset'>): number =>
+  platform === 'ios' ? bottomInset : 0;

package/src/helpers/mediaDimensions.ts

@@ -0,0 +1,47 @@
+import { Dimensions } from 'react-native';
+
+// Shared sizing for inline media bubbles (images + video posters).
+// Goal: show the media UNCROPPED, just scaled, preserving aspect ratio —
+// portrait stays portrait, landscape stays landscape.
+const screenW = Dimensions.get('window').width;
+
+// Box the media must fit inside. Width adapts to the screen so it never
+// blows past the bubble's max-width on small phones, but caps on tablets.
+export const MEDIA_MAX_W = Math.min(260, Math.round(screenW * 0.64));
+export const MEDIA_MAX_H = 320;
+// Keep thumbnails from collapsing into a sliver (very wide/tall media).
+const MEDIA_MIN_W = 140;
+const MEDIA_MIN_H = 120;
+
+export interface MediaDims {
+  width: number;
+  height: number;
+}
+
+// Neutral 4:3 placeholder used before the natural size is known.
+export const defaultMediaDims = (): MediaDims => ({
+  width: MEDIA_MAX_W,
+  height: Math.round(MEDIA_MAX_W * 0.75),
+});
+
+// Fit (natW × natH) inside the box, preserving aspect ratio. Never
+// upscales beyond the source resolution (avoids blur), but bumps very
+// small media up to a sensible minimum so it stays tappable.
+export const fitMediaDimensions = (natW: number, natH: number): MediaDims => {
+  if (!natW || !natH) {
+    return defaultMediaDims();
+  }
+  let scale = Math.min(MEDIA_MAX_W / natW, MEDIA_MAX_H / natH);
+  if (scale > 1) {
+    scale = 1;
+  }
+  let width = Math.round(natW * scale);
+  let height = Math.round(natH * scale);
+
+  if (width < MEDIA_MIN_W || height < MEDIA_MIN_H) {
+    const up = Math.max(MEDIA_MIN_W / width, MEDIA_MIN_H / height);
+    width = Math.min(MEDIA_MAX_W, Math.round(width * up));
+    height = Math.min(MEDIA_MAX_H, Math.round(height * up));
+  }
+  return { width, height };
+};

package/src/helpers/mimeToExtension.ts

@@ -0,0 +1,135 @@
+// MIME → file extension table for download/preview filename fallbacks.
+// Centralized so FilePreviewModal, MediaMessage, and any future media
+// surface share one source of truth. Keep additions sorted by category.
+
+const MIME_TO_EXT: Record<string, string> = {
+  // images
+  'image/jpeg': '.jpg',
+  'image/jpg': '.jpg',
+  'image/png': '.png',
+  'image/gif': '.gif',
+  'image/webp': '.webp',
+  'image/heic': '.heic',
+  'image/heif': '.heif',
+  'image/bmp': '.bmp',
+  'image/svg+xml': '.svg',
+  'image/tiff': '.tiff',
+
+  // video
+  'video/mp4': '.mp4',
+  'video/quicktime': '.mov',
+  'video/x-m4v': '.m4v',
+  'video/webm': '.webm',
+  'video/3gpp': '.3gp',
+  'video/x-matroska': '.mkv',
+  'video/mpeg': '.mpeg',
+
+  // audio
+  'audio/mpeg': '.mp3',
+  'audio/mp3': '.mp3',
+  'audio/mp4': '.m4a',
+  'audio/x-m4a': '.m4a',
+  'audio/wav': '.wav',
+  'audio/x-wav': '.wav',
+  'audio/aac': '.aac',
+  'audio/ogg': '.ogg',
+  'audio/flac': '.flac',
+  'audio/webm': '.weba',
+
+  // documents
+  'application/pdf': '.pdf',
+  'application/msword': '.doc',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+    '.docx',
+  'application/vnd.ms-excel': '.xls',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': '.xlsx',
+  'application/vnd.ms-powerpoint': '.ppt',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+    '.pptx',
+  'text/plain': '.txt',
+  'text/csv': '.csv',
+  'text/html': '.html',
+  'application/json': '.json',
+  'application/xml': '.xml',
+  'text/xml': '.xml',
+  'application/rtf': '.rtf',
+
+  // archives
+  'application/zip': '.zip',
+  'application/x-rar-compressed': '.rar',
+  'application/x-7z-compressed': '.7z',
+  'application/gzip': '.gz',
+  'application/x-tar': '.tar',
+};
+
+const VALID_EXT_RE = /\.[a-z0-9]{1,8}$/i;
+
+/**
+ * Returns the conventional extension (including the leading dot) for a
+ * MIME type, or `.bin` as a last-resort fallback so callers never end up
+ * with an extension-less filename.
+ */
+export function getExtensionForMime(mime: string | undefined | null): string {
+  if (!mime) {return '.bin';}
+  const normalized = mime.toLowerCase().split(';')[0]!.trim();
+  return MIME_TO_EXT[normalized] || '.bin';
+}
+
+/**
+ * Parses a URL or file path and returns the last segment, URL-decoded,
+ * stripped of query/hash. Returns `''` when nothing usable is present.
+ */
+export function filenameFromUrl(url: string | undefined | null): string {
+  if (!url) {return '';}
+  try {
+    // Strip query + hash without depending on a real URL parser (some RN
+    // URLs from CDNs do not parse cleanly).
+    const noQuery = url.split('?')[0]!.split('#')[0]!;
+    const last = noQuery.split('/').pop() || '';
+    return decodeURIComponent(last);
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * Ensures `fileName` ends with a valid extension. Strategy:
+ *   1. If the input already has an extension, return it unchanged.
+ *   2. Otherwise, derive the extension from `mime` and append it.
+ *   3. If `mime` is unknown, append `.bin`.
+ *
+ * Empty/falsy filenames get a `media_<timestamp>` base before the
+ * extension is appended so callers always get a usable filename.
+ */
+export function ensureFilenameHasExtension(
+  fileName: string | undefined | null,
+  mime: string | undefined | null
+): string {
+  const base =
+    (fileName && fileName.trim()) || `media_${Date.now()}`;
+  if (VALID_EXT_RE.test(base)) {return base;}
+  return `${base}${getExtensionForMime(mime)}`;
+}
+
+/**
+ * Best-effort filename derivation for a message bubble:
+ *   - server-provided `fileName`
+ *   - server-provided `originalName`
+ *   - URL pathname
+ *   - generic `media_<timestamp>` so we never render an empty label
+ *
+ * Always returns a string with a valid extension.
+ */
+export function deriveDisplayFilename(opts: {
+  fileName?: string | null;
+  originalName?: string | null;
+  url?: string | null;
+  mime?: string | null;
+}): string {
+  const candidate =
+    (opts.fileName && opts.fileName.trim()) ||
+    (opts.originalName && opts.originalName.trim()) ||
+    filenameFromUrl(opts.url) ||
+    '';
+  return ensureFilenameHasExtension(candidate, opts.mime);
+}

package/src/helpers/normalizeRoomJid.ts

@@ -0,0 +1,6 @@
+export const normalizeRoomJid = (roomJID: string, conference?: string) => {
+  if (!roomJID) {return roomJID;}
+  if (roomJID.includes('@')) {return roomJID;}
+  if (!conference) {return roomJID;}
+  return `${roomJID}@${conference}`;
+};

package/src/helpers/resolveInitBeforeLoadUser.ts

@@ -237,4 +237,83 @@ export const applyResolvedUserToStore = (user?: User | null) => {
   store.dispatch(setUser(user));
 };
 
+/**
+ * Re-mints a User with a fresh xmppPassword for the XMPP credentials-
+ * provider path (bug #17). Unlike `resolveInitBeforeLoadUser` this
+ * ALWAYS hydrates via the chosen auth path even if the cached user
+ * already had xmppCredentials — that's the whole point, the old ones
+ * are stale.
+ *
+ * Selection order:
+ *   1. `jwtLogin` — re-exchange the JWT via `/users/client`.
+ *   2. Anything else (`userLogin` / `customLogin` / store / persisted)
+ *      — `tryHydrateViaMy` on the current user, which calls
+ *      `/users/my` and, on 401, refreshes the access token via
+ *      `/users/login/refresh` and retries.
+ *
+ * Returns `null` only when nothing usable is available — the caller
+ * (xmppProvider) falls back to the cached creds in that case.
+ */
+export const refreshUserCredentialsForXmpp = async (
+  config?: IConfig,
+  signal?: AbortSignal
+): Promise<User | null> => {
+  if (signal?.aborted) {return null;}
+
+  // Priority 1: jwtLogin — same path as `resolveInitBeforeLoadUser`
+  // priority 3. We always re-exchange because the original JWT may
+  // itself have expired (and the consumer is expected to swap
+  // `config.jwtLogin.token` for a fresh one before then).
+  if (config?.jwtLogin?.enabled && config?.jwtLogin?.token) {
+    try {
+      const fresh = await loginViaJwt(config.jwtLogin.token);
+      const normalized = normalizeUserForXmpp(fresh);
+      if (normalized && hasXmppCredentials(normalized)) {return normalized;}
+    } catch (error) {
+      if (signal?.aborted || isAbortError(error)) {return null;}
+      // fall through to /users/my path
+    }
+  }
+
+  const myEndpoint = config?.initBeforeLoadAuth?.myEndpoint || '/users/my';
+
+  // Priority 2: redux store user (covers userLogin + customLogin +
+  // anything previously persisted into chatSettingStore.user). The
+  // user must have at least a refreshToken for the refresh chain to
+  // produce something useful.
+  const currentUser = store.getState().chatSettingStore.user;
+  if (currentUser?.token || currentUser?.refreshToken) {
+    const hydrated = await tryHydrateViaMy(
+      currentUser as User,
+      myEndpoint,
+      signal
+    ).catch(() => null);
+    if (hydrated && hasXmppCredentials(hydrated)) {return hydrated;}
+  }
+
+  // Priority 3: persisted user in AsyncStorage — defensive; the store
+  // should already mirror this, but if the redux state got cleared
+  // mid-session (logout race) this gives us one last shot.
+  try {
+    const storedUser = await asyncLocalStorage<User>(
+      localStorageConstants.ETHORA_USER
+    ).get();
+    if (
+      storedUser &&
+      (storedUser.token || storedUser.refreshToken || storedUser.xmppPassword)
+    ) {
+      const hydrated = await tryHydrateViaMy(
+        storedUser,
+        myEndpoint,
+        signal
+      ).catch(() => null);
+      if (hydrated && hasXmppCredentials(hydrated)) {return hydrated;}
+    }
+  } catch {
+    // ignore storage errors
+  }
+
+  return null;
+};
+
 export default resolveInitBeforeLoadUser;

package/src/hooks/useChatRoomFocus.ts

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  clearVisibleRoom,
+  setCurrentRoom,
+  setLastViewedTimestamp,
+  setVisibleRoom,
+} from '../roomStore/roomsSlice';
+import { store } from '../roomStore';
+
+interface UseChatRoomFocusOptions {
+  /** The room JID that the consumer's tab/screen is currently showing. */
+  roomJID: string | null | undefined;
+  /**
+   * Whether the chat tab/screen is currently focused. In tab-based
+   * navigators where `<ChatRoom>` never unmounts, the SDK can't tell
+   * "user is looking at this tab" from "user is on a different tab"
+   * — pass this from `useFocusEffect` (React Navigation) or a similar
+   * focus signal so the unread counter clears on focus and starts
+   * counting again on blur.
+   */
+  isFocused: boolean;
+}
+
+/**
+ * Public hook for consumers embedding `<ChatRoom>` inside a tab-based
+ * navigator. Mirrors the mount/unmount unread-tracking that ChatRoom
+ * does internally — but driven by an explicit focus signal so the
+ * unread counter behaves correctly when the chat tab is not focused
+ * but the component is still mounted.
+ *
+ * Without this hook, `useUnread()` will always return 0 for the chat
+ * room because the SDK assumes "mounted == active". With this hook,
+ * focus marks the room visible (clearing the badge) and blur stamps
+ * `lastViewedTimestamp = Date.now()` so future messages count as unread.
+ *
+ * Usage with React Navigation:
+ *
+ * ```tsx
+ * import { useIsFocused } from '@react-navigation/native';
+ *
+ * function ChatTab() {
+ *   const isFocused = useIsFocused();
+ *   useChatRoomFocus({ roomJID: 'general@conference.host', isFocused });
+ *   return <Chat config={...} />;
+ * }
+ * ```
+ *
+ * Bug #18-adjacent / unread-tracking bug from sdk-bug-tracker.md.
+ */
+export const useChatRoomFocus = ({
+  roomJID,
+  isFocused,
+}: UseChatRoomFocusOptions) => {
+  const dispatch = useDispatch();
+  const prevRef = useRef<{ roomJID: string | null; isFocused: boolean }>({
+    roomJID: null,
+    isFocused: false,
+  });
+
+  const leaveRoom = (jid: string) => {
+    const timestamp = Date.now();
+    dispatch(setLastViewedTimestamp({ chatJID: jid, timestamp }));
+    dispatch(clearVisibleRoom());
+    const rooms = store.getState().rooms?.rooms;
+    (store.getState().chatSettingStore as any)?.client
+      ?.flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID: jid })
+      .catch(() => {});
+  };
+
+  useEffect(() => {
+    const prev = prevRef.current;
+    if (prev.isFocused && prev.roomJID && (prev.roomJID !== roomJID || !isFocused)) {
+      leaveRoom(prev.roomJID);
+    }
+
+    if (roomJID && isFocused) {
+      dispatch(setCurrentRoom({ roomJID }));
+      dispatch(setVisibleRoom({ roomJID }));
+    }
+
+    prevRef.current = { roomJID: roomJID || null, isFocused };
+  }, [roomJID, isFocused, dispatch]);
+
+  useEffect(() => {
+    return () => {
+      const prev = prevRef.current;
+      if (prev.isFocused && prev.roomJID) {
+        leaveRoom(prev.roomJID);
+      }
+    };
+  }, []);
+};
+
+export default useChatRoomFocus;

package/src/hooks/useChatWrapperInit.ts

@@ -119,10 +119,8 @@ const useChatWrapperInit = ({
                 user.xmppUsername || user?.defaultWallet?.walletAddress,
                 user?.xmppPassword,
                 config?.xmppSettings
-              ).then((client) => {
-                console.log(' Client initialized', client?.status);
-                return client;
-              });
+              );
+              console.log(' Client initialized', newClient?.status);
 
               if (roomsList && Object.keys(roomsList).length > 0) {
                 console.log(
@@ -156,27 +154,29 @@ const useChatWrapperInit = ({
                   await newClient.getRoomsStanza();
                 }
               }
-              await newClient
-                .getChatsPrivateStoreRequestStanza()
-                .then(
-                  async (
-                    roomTimestampObject: any
-                  ) => {
-                    console.log(
-                      'Got chats private store',
-                      roomTimestampObject?.length || 0
-                    );
-                    updatedChatLastTimestamps(roomTimestampObject, dispatch);
-                    if (!hasSyncedHistoryRef.current) {
-                      console.log('Updating messages till last');
-                      await updateMessagesTillLast(rooms, newClient);
-                      hasSyncedHistoryRef.current = true;
-                    }
-                    setClient(newClient);
-                    setConnectionLost(false);
-                    console.log('Initialization complete');
-                  }
+              try {
+                const roomTimestampObject: any =
+                  await newClient.getChatsPrivateStoreRequestStanza();
+                console.log(
+                  'Got chats private store',
+                  roomTimestampObject?.length || 0
                 );
+                if (roomTimestampObject) {
+                  updatedChatLastTimestamps(roomTimestampObject, dispatch);
+                }
+                if (!hasSyncedHistoryRef.current) {
+                  console.log('Updating messages till last');
+                  await updateMessagesTillLast(rooms, newClient);
+                  hasSyncedHistoryRef.current = true;
+                }
+                setClient(newClient);
+                setConnectionLost(false);
+                console.log('Initialization complete');
+              } catch (err) {
+                console.warn('privateStore/timestamps failed', err);
+                setClient(newClient);
+                setConnectionLost(false);
+              }
 
               {
                 config?.refreshTokens?.enabled && refresh();
@@ -204,29 +204,34 @@ const useChatWrapperInit = ({
             }
             setInited(true);
             console.log(' Getting chats private store for existing client');
-            await client
-              .getChatsPrivateStoreRequestStanza()
-              .then(
-                async (
-                  roomTimestampObject: any
-                ) => {
-                  console.log(
-                    'Got chats private store for existing client',
-                    roomTimestampObject?.length || 0
-                  );
-                  updatedChatLastTimestamps(roomTimestampObject, dispatch);
-                  if (!hasSyncedHistoryRef.current) {
-                    console.log(
-                      'Updating messages till last for existing client'
-                    );
-                    await updateMessagesTillLast(rooms, client);
-                    hasSyncedHistoryRef.current = true;
-                  }
-                  setClient(client);
-                  setConnectionLost(false);
-                  console.log(' Initialization complete for existing client');
-                }
+            try {
+              const roomTimestampObject: any =
+                await client.getChatsPrivateStoreRequestStanza();
+              console.log(
+                'Got chats private store for existing client',
+                roomTimestampObject?.length || 0
               );
+              if (roomTimestampObject) {
+                updatedChatLastTimestamps(roomTimestampObject, dispatch);
+              }
+              if (!hasSyncedHistoryRef.current) {
+                console.log(
+                  'Updating messages till last for existing client'
+                );
+                await updateMessagesTillLast(rooms, client);
+                hasSyncedHistoryRef.current = true;
+              }
+              setClient(client);
+              setConnectionLost(false);
+              console.log(' Initialization complete for existing client');
+            } catch (err) {
+              console.warn(
+                'privateStore/timestamps failed (existing client)',
+                err
+              );
+              setClient(client);
+              setConnectionLost(false);
+            }
             {
               config?.refreshTokens?.enabled && refresh();
             }

package/src/hooks/useEventHandlers.tsx

@@ -23,10 +23,17 @@ interface MessageEditedEvent {
   user: any;
 }
 
+interface MessageRetryEvent {
+  messageId: string;
+  roomJID: string;
+  messageType: 'text' | 'media';
+}
+
 export interface EventHandlersHook {
   handleMessageSent: (event: MessageSentEvent) => Promise<void>;
   handleMessageFailed: (event: MessageFailedEvent) => void;
   handleMessageEdited: (event: MessageEditedEvent) => void;
+  handleMessageRetry: (event: MessageRetryEvent) => void;
 }
 
 export const useEventHandlers = (config?: IConfig): EventHandlersHook => {
@@ -77,5 +84,21 @@ export const useEventHandlers = (config?: IConfig): EventHandlersHook => {
     [config]
   );
 
-  return { handleMessageSent, handleMessageFailed, handleMessageEdited };
+  const handleMessageRetry = useCallback(
+    (event: MessageRetryEvent) => {
+      try {
+        config?.eventHandlers?.onMessageRetry?.(event);
+      } catch (error) {
+        console.error('Error in message retry handler:', error);
+      }
+    },
+    [config]
+  );
+
+  return {
+    handleMessageSent,
+    handleMessageFailed,
+    handleMessageEdited,
+    handleMessageRetry,
+  };
 };

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/useMessageHeapState.tsx

@@ -3,9 +3,13 @@ import { RootState } from '../roomStore';
 
 export const useMessageHeapState = () => {
   const queue = useSelector(
-    (state: RootState) => state.roomHeapSlice.messageHeap
+    (state: RootState) => state.roomHeapSlice?.messageHeap
+  );
+  const failedMessages = useSelector(
+    (state: RootState) => state.roomHeapSlice?.failedMessages
   );
   const idSet = new Set(queue?.map((m) => m.id) ?? []);
+  const failedIdSet = new Set(Object.keys(failedMessages || {}));
 
-  return { queue, idSet };
+  return { queue, idSet, failedMessages, failedIdSet };
 };

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,