@ethora/chat-component-rn 26.8.1 → 26.8.2

package/src/helpers/secureStoreRuntime.ts

@@ -0,0 +1,62 @@
+/**
+ * Optional-dependency bridge for `expo-secure-store` — the Keychain
+ * (iOS) / Keystore-backed EncryptedSharedPreferences (Android) API.
+ *
+ * Mirrors `components/VideoCalls/livekitRuntime.ts`: a plain top-level
+ * `import ... from 'expo-secure-store'` is not allowed anywhere in the
+ * SDK, since Metro resolves imports at bundle time and a host that
+ * hasn't added this optional peer dependency would fail to build over
+ * a feature it never opted into. Everything goes through
+ * `loadSecureStore()`, which requires the module lazily and returns
+ * null when it isn't installed — callers fall back to plain
+ * AsyncStorage rather than crash (see `secureKeyValue.ts`).
+ */
+
+export interface SecureStoreRuntime {
+  getItemAsync: (key: string) => Promise<string | null>;
+  setItemAsync: (key: string, value: string) => Promise<void>;
+  deleteItemAsync: (key: string) => Promise<void>;
+}
+
+let cached: SecureStoreRuntime | null | undefined;
+
+/**
+ * Resolve the SecureStore runtime, or null when the optional native
+ * package isn't installed in the host app. Result is memoised
+ * (including the failure) so a missing dependency doesn't re-throw on
+ * every read/write.
+ */
+export const loadSecureStore = (): SecureStoreRuntime | null => {
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('expo-secure-store');
+    if (
+      typeof mod?.getItemAsync !== 'function' ||
+      typeof mod?.setItemAsync !== 'function' ||
+      typeof mod?.deleteItemAsync !== 'function'
+    ) {
+      cached = null;
+    } else {
+      cached = {
+        getItemAsync: mod.getItemAsync,
+        setItemAsync: mod.setItemAsync,
+        deleteItemAsync: mod.deleteItemAsync,
+      };
+    }
+  } catch {
+    cached = null;
+  }
+
+  return cached;
+};
+
+export const isSecureStoreAvailable = (): boolean => loadSecureStore() !== null;
+
+/** Test seam only. */
+export const __resetSecureStoreRuntimeForTests = (): void => {
+  cached = undefined;
+};

package/src/helpers/secureUserStorage.ts

@@ -0,0 +1,80 @@
+import { User } from '../types/types';
+import { asyncLocalStorage } from '../hooks/useLocalStorage';
+import { localStorageConstants } from './constants/LOCAL_STORAGE';
+import { secureGet, secureSet, secureRemove } from './secureKeyValue';
+
+// Keychain (iOS) / Keystore-backed EncryptedSharedPreferences (Android)
+// keys for the four live bearer credentials on `User`. Deliberately one
+// key per field rather than one JSON blob: expo-secure-store historically
+// caps a single value's size on Android, and four short JWTs each stay
+// comfortably under that ceiling where one combined blob might not.
+const SECRET_KEYS = {
+  token: 'ethora_auth_token',
+  refreshToken: 'ethora_auth_refresh_token',
+  xmppPassword: 'ethora_auth_xmpp_password',
+  fileToken: 'ethora_auth_file_token',
+} as const;
+
+type SecretField = keyof typeof SECRET_KEYS;
+const SECRET_FIELDS = Object.keys(SECRET_KEYS) as SecretField[];
+
+/**
+ * Persisted-user storage, split across two backends behind the exact
+ * same `{ get, set, remove }` shape `asyncLocalStorage<User>(...)`
+ * already exposed — every existing call site swaps in by changing only
+ * the constructor call, `get()`/`set()`/`remove()` keep returning/taking
+ * a complete `User`.
+ *
+ * The four live credentials (REST access + refresh token, XMPP
+ * password, secure-media fileToken) never touch plain AsyncStorage:
+ * they go through `secureGet`/`secureSet`/`secureRemove` (platform
+ * Keychain/Keystore, falling back to namespaced AsyncStorage only when
+ * the host hasn't installed the optional `expo-secure-store` peer dep).
+ * Everything else on `User` — name, avatar, ids, xmppUsername, wallet
+ * address, none of it a bearer credential — keeps living under the
+ * existing `ETHORA_USER` AsyncStorage key, unchanged.
+ */
+export function secureUserStorage() {
+  const get = async (): Promise<User | null> => {
+    const profile = await asyncLocalStorage<User>(
+      localStorageConstants.ETHORA_USER
+    ).get();
+    if (!profile) {return null;}
+
+    const secretValues = await Promise.all(
+      SECRET_FIELDS.map((field) => secureGet(SECRET_KEYS[field]))
+    );
+
+    const merged: User = { ...profile };
+    SECRET_FIELDS.forEach((field, i) => {
+      (merged as any)[field] = secretValues[i] || '';
+    });
+    return merged;
+  };
+
+  const set = async (user: User): Promise<void> => {
+    const profile: any = { ...user };
+    for (const field of SECRET_FIELDS) {
+      profile[field] = '';
+    }
+
+    await Promise.all([
+      asyncLocalStorage<User>(localStorageConstants.ETHORA_USER).set(profile),
+      ...SECRET_FIELDS.map((field) => {
+        const value = user?.[field] as string | undefined;
+        return value
+          ? secureSet(SECRET_KEYS[field], value)
+          : secureRemove(SECRET_KEYS[field]);
+      }),
+    ]);
+  };
+
+  const remove = async (): Promise<void> => {
+    await Promise.all([
+      asyncLocalStorage(localStorageConstants.ETHORA_USER).remove(),
+      ...SECRET_FIELDS.map((field) => secureRemove(SECRET_KEYS[field])),
+    ]);
+  };
+
+  return { get, set, remove };
+}

package/src/helpers/shallowEqual.ts

@@ -0,0 +1,33 @@
+/**
+ * One-level shallow equality for plain objects. Used to avoid re-dispatching
+ * config into redux on every render just because the host passed a fresh
+ * object literal with the same values (e.g. `<Chat config={{...}} />`
+ * re-created inline) — reference equality alone would fire far too often,
+ * and a deep/JSON comparison risks throwing on non-serializable fields
+ * (functions, React elements) that configs legitimately carry.
+ */
+export function shallowEqual(a: unknown, b: unknown): boolean {
+  if (a === b) {return true;}
+  if (
+    typeof a !== 'object' ||
+    typeof b !== 'object' ||
+    a === null ||
+    b === null
+  ) {
+    return false;
+  }
+  const aKeys = Object.keys(a as Record<string, unknown>);
+  const bKeys = Object.keys(b as Record<string, unknown>);
+  if (aKeys.length !== bKeys.length) {return false;}
+  for (const key of aKeys) {
+    if (
+      (a as Record<string, unknown>)[key] !==
+      (b as Record<string, unknown>)[key]
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export default shallowEqual;

package/src/helpers/sheetGestures.ts

@@ -0,0 +1,25 @@
+/** @format */
+
+/**
+ * Shared thresholds for the drag-to-dismiss gesture on bottom sheets (the
+ * attach sheet, the profile headers, the room-list menu). Kept in one
+ * place so a pull feels identical wherever the user does it — and so the
+ * numbers are unit-testable without a touch event.
+ */
+
+/** Drag past this many points and letting go dismisses the sheet. */
+export const DISMISS_DISTANCE = 90;
+/** …or flick faster than this, however short the drag. */
+export const DISMISS_VELOCITY = 0.8;
+
+/**
+ * Claim a drag only once it is clearly a downward pull, so a tap on a row
+ * still registers and a horizontal swipe stays with whatever scrolls
+ * sideways inside the sheet.
+ */
+export const shouldClaimVerticalDrag = (dy: number, dx: number) =>
+  dy > 6 && Math.abs(dy) > Math.abs(dx) * 1.5;
+
+/** Far enough / fast enough to let go of the sheet. */
+export const shouldDismissOnDrag = (dy: number, vy: number) =>
+  dy > DISMISS_DISTANCE || vy > DISMISS_VELOCITY;

package/src/hooks/useChatRoomFocus.ts

@@ -1,12 +1,17 @@
 import { useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import {
+  clearReadBoundary,
   clearVisibleRoom,
   setCurrentRoom,
   setLastViewedTimestamp,
   setVisibleRoom,
 } from '../roomStore/roomsSlice';
 import { store } from '../roomStore';
+import {
+  getFlushBoundaryTs,
+  getReadMarkerTimestamp,
+} from '../helpers/getServerReadTimestamp';
 
 interface UseChatRoomFocusOptions {
   /** The room JID that the consumer's tab/screen is currently showing. */
@@ -32,7 +37,10 @@ interface UseChatRoomFocusOptions {
  * 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.
+ * `lastViewedTimestamp` to the newest SERVER-acknowledged message so
+ * future messages count as unread. Deliberately not `Date.now()`: a
+ * device clock running ahead would write a future marker that the
+ * forward-only private-store merge could never correct again (bug #38).
  *
  * Usage with React Navigation:
  *
@@ -58,20 +66,52 @@ export const useChatRoomFocus = ({
     isFocused: false,
   });
 
-  const leaveRoom = (jid: string) => {
-    const timestamp = Date.now();
-    dispatch(setLastViewedTimestamp({ chatJID: jid, timestamp }));
+  // `clearBoundary`: pass true only when the room the user is leaving is
+  // genuinely being released (switching to a different room, or this
+  // hook unmounting) - not on a mere same-room blur. `<ChatRoom>`'s
+  // MessageList typically stays mounted across a same-room focus loss
+  // (the whole point of this hook is that the host keeps `<Chat>`
+  // mounted in a hidden tab), so its own scroll-tracking ref is still
+  // intact and the redux boundary must stay in sync with it - clearing
+  // it here would desync the two.
+  const leaveRoom = (jid: string, clearBoundary: boolean) => {
+    const state = store.getState();
+    const rooms = state.rooms?.rooms;
+    const boundaryTs = state.rooms?.readBoundaries?.[jid] ?? null;
+    // getReadMarkerTimestamp: honour the boundary (the newest message the
+    // user actually reached) when the user left this room scrolled up,
+    // otherwise fall back to the newest server-acked message. Only stamp
+    // when we actually have something to anchor to - skip rather than
+    // fall back to the device clock (bug #38). Ignoring the boundary here
+    // would stamp "everything read" regardless of scroll position (bug
+    // #42, a regression of #33 reintroduced by #38).
+    const timestamp = getReadMarkerTimestamp(rooms?.[jid], state.roomHeapSlice, boundaryTs);
+    if (timestamp > 0) {
+      dispatch(setLastViewedTimestamp({ chatJID: jid, timestamp }));
+    }
     dispatch(clearVisibleRoom());
-    const rooms = store.getState().rooms?.rooms;
-    (store.getState().chatSettingStore as any)?.client
-      ?.flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID: jid })
+    (state.chatSettingStore as any)?.client
+      ?.flushLastViewedToPrivateStoreStanza(rooms, {
+        visibleRoomJID: jid,
+        // Carry the same boundary to the SERVER marker - without it the
+        // flush defaults to "everything" for the visible room. Clamped
+        // through the same helper as the local stamp above.
+        visibleRoomTs: getFlushBoundaryTs(
+          rooms?.[jid],
+          state.roomHeapSlice,
+          boundaryTs
+        ),
+      })
       .catch(() => {});
+    if (clearBoundary) {
+      dispatch(clearReadBoundary({ jid }));
+    }
   };
 
   useEffect(() => {
     const prev = prevRef.current;
     if (prev.isFocused && prev.roomJID && (prev.roomJID !== roomJID || !isFocused)) {
-      leaveRoom(prev.roomJID);
+      leaveRoom(prev.roomJID, prev.roomJID !== roomJID);
     }
 
     if (roomJID && isFocused) {
@@ -86,7 +126,7 @@ export const useChatRoomFocus = ({
     return () => {
       const prev = prevRef.current;
       if (prev.isFocused && prev.roomJID) {
-        leaveRoom(prev.roomJID);
+        leaveRoom(prev.roomJID, true);
       }
     };
   }, []);

package/src/hooks/useChatWrapperInit.ts

@@ -9,9 +9,8 @@ import { AppDispatch, RootState } from '../roomStore';
 import { useXmppClient } from '../context/xmppProvider';
 import { chatAutoEnterer } from '../helpers/chatAutoEnterer';
 import { initRoomsPresence } from '../helpers/initRoomsPresence';
-import { updatedChatLastTimestamps } from '../helpers/updatedChatLastTimestamps';
 import { updateMessagesTillLast } from '../helpers/updateMessagesTillLast';
-import { refresh } from '../networking/apiClient';
+import { refreshAuthTokensQuietly } from '../networking/authRefresh';
 import { setLangSource, setConfig } from '../roomStore/chatSettingsSlice';
 import { setIsLoading } from '../roomStore/roomsSlice';
 import { useRoomState } from './useRoomState';
@@ -19,6 +18,7 @@ import { useChatSettingState } from './useChatSettingState';
 import { isChatIdPresentInArray } from '../helpers/isChatIdPresentInArray';
 import useGetNewArchRoom from './useGetNewArchRoom';
 import { getRoomsWithRetry } from '../helpers/getRoomsWithRetry';
+import { shallowEqual } from '../helpers/shallowEqual';
 
 interface useChatWrapperInitProps {
   roomJID: string | null | undefined;
@@ -66,6 +66,20 @@ const useChatWrapperInit = ({
     };
   }, [user.xmppPassword]);
 
+  // Presentational config flags (e.g. `disableHeader`) can change while the
+  // chat stays mounted — sync them to redux whenever `config` actually
+  // changes, not just at init. Shallow-equal guard: an inline object
+  // literal from the host is a fresh reference every render even when
+  // nothing in it changed, and dispatching unconditionally would re-render
+  // every config consumer on every host render.
+  const lastSyncedConfigRef = useRef<IConfig | undefined>(undefined);
+  useEffect(() => {
+    if (!shallowEqual(lastSyncedConfigRef.current, config)) {
+      lastSyncedConfigRef.current = config;
+      dispatch(setConfig(config));
+    }
+  }, [config, dispatch]);
+
   const getRoomsWithRertyRequest = async () => {
     setIsRetrying(true);
     const retryRooms = await getRoomsWithRetry(
@@ -159,15 +173,21 @@ const useChatWrapperInit = ({
                 }
               }
               try {
+                // getChatsPrivateStoreRequestStanza hydrates redux itself
+                // (dispatch(applyPrivateStoreMarkers(...)) internally,
+                // clamped + forward-only) - do not also apply the raw
+                // return value here. That used to double-dispatch via
+                // updatedChatLastTimestamps' unconditional
+                // setLastViewedTimestamp, which has neither the
+                // forward-only guard nor the future-marker clamp, so on
+                // every reconnect it could silently re-clobber a value
+                // the clamp had just corrected (bug #38).
                 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);
@@ -183,7 +203,7 @@ const useChatWrapperInit = ({
               }
 
               {
-                config?.refreshTokens?.enabled && refresh();
+                config?.refreshTokens?.enabled && refreshAuthTokensQuietly();
               }
             } catch (error) {
               console.error(' Error during initialization', error);
@@ -209,15 +229,15 @@ const useChatWrapperInit = ({
             setInited(true);
             console.log(' Getting chats private store for existing client');
             try {
+              // See the "new client" branch above: getChatsPrivateStoreRequestStanza
+              // already hydrates redux (clamped + forward-only); do not
+              // also apply the raw return value here.
               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'
@@ -237,7 +257,7 @@ const useChatWrapperInit = ({
               setConnectionLost(false);
             }
             {
-              config?.refreshTokens?.enabled && refresh();
+              config?.refreshTokens?.enabled && refreshAuthTokensQuietly();
             }
           }
         }

package/src/hooks/useComposing.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
 import { useXmppClient } from '../context/xmppProvider';
 import { useSelector } from 'react-redux';
 import { RootState } from '../roomStore';
@@ -9,8 +10,16 @@ const useComposing = (config?: IConfig) => {
   const { client } = useXmppClient();
   const { activeRoomJID } = useSelector((state: RootState) => state.rooms);
   const { user } = useChatSettingState();
+  // RN keeps a focused TextInput focused when the app is backgrounded or
+  // the device is locked — nothing fires `onBlur`, so without this the
+  // other participant sees "typing…" for as long as the user is away.
+  // Tracks whether the input is *currently* focused, independent of the
+  // foreground/background transition, so we know whether to resume
+  // composing on return.
+  const isFocusedRef = useRef(false);
 
   const sendStartComposing = useCallback(() => {
+    isFocusedRef.current = true;
     if (config?.disableTypingIndicator) {
       return;
     }
@@ -24,6 +33,7 @@ const useComposing = (config?: IConfig) => {
   }, [activeRoomJID, client, config?.disableTypingIndicator, user.firstName, user.lastName]);
 
   const sendEndComposing = useCallback(() => {
+    isFocusedRef.current = false;
     if (config?.disableTypingIndicator) {
       return;
     }
@@ -44,6 +54,32 @@ const useComposing = (config?: IConfig) => {
     return () => clearTimeout(timerId);
   }, [sendEndComposing]);
 
+  // Foreground/background transition only — a pause in typing must NOT
+  // clear the indicator (that would flicker for a slowly-composing user),
+  // so this deliberately does not hook keystroke/idle timing at all.
+  useEffect(() => {
+    const handleAppStateChange = (nextState: AppStateStatus) => {
+      if (nextState !== 'active') {
+        if (isFocusedRef.current && !config?.disableTypingIndicator && client) {
+          client.sendTypingRequestStanza(
+            activeRoomJID || '',
+            `${user.firstName} ${user.lastName}`,
+            false
+          );
+        }
+      } else if (isFocusedRef.current && !config?.disableTypingIndicator && client) {
+        client.sendTypingRequestStanza(
+          activeRoomJID || '',
+          `${user.firstName} ${user.lastName}`,
+          true
+        );
+      }
+    };
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange);
+    return () => subscription.remove();
+  }, [activeRoomJID, client, config?.disableTypingIndicator, user.firstName, user.lastName]);
+
   return { sendStartComposing, sendEndComposing };
 };
 

package/src/hooks/useFileToken.ts

@@ -0,0 +1,7 @@
+import { useSelector } from 'react-redux';
+import { RootState } from '../roomStore';
+
+export const useFileToken = (): string =>
+  useSelector(
+    (state: RootState) => state.chatSettingStore.user?.fileToken || ''
+  );

package/src/hooks/useLogout.tsx

@@ -9,7 +9,8 @@ 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';
+import { secureUserStorage } from '../helpers/secureUserStorage';
+import { getFlushBoundaryTs } from '../helpers/getServerReadTimestamp';
 
 // AsyncStorage keys the library writes but that aren't cleared by any
 // slice reducer. Listed here so a single logout call wipes the full
@@ -59,10 +60,23 @@ const logoutService = {
       const client = (state.chatSettingStore as any)?.client;
       const rooms = state.rooms?.rooms;
       const visibleRoomJID = state.rooms?.visibleRoomJID || null;
+      // The visible room is exempt from `onlyIfNoUnread`'s skip (it's
+      // meant to write "read up to now" for whatever's open), so if the
+      // user is logging out while scrolled up with unread messages
+      // above, the boundary must still be carried through here - same
+      // reasoning as every other "leaving a room" path (bug #42).
+      const boundaryTs = visibleRoomJID
+        ? getFlushBoundaryTs(
+            rooms?.[visibleRoomJID],
+            state.roomHeapSlice,
+            state.rooms?.readBoundaries?.[visibleRoomJID] ?? null
+          )
+        : undefined;
       if (client?.flushLastViewedToPrivateStoreStanza) {
         await Promise.race([
           client.flushLastViewedToPrivateStoreStanza(rooms, {
             visibleRoomJID,
+            visibleRoomTs: boundaryTs,
             onlyIfNoUnread: true,
           }),
           new Promise((res) => setTimeout(res, 2000)),
@@ -120,17 +134,23 @@ const logoutService = {
 
     // 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,
-      ]);
+      await AsyncStorage.multiRemove(LIBRARY_STRAY_KEYS);
     } catch (e) {
       console.warn('logoutService: stray-key clear failed', e);
     }
+
+    // 7. Belt-and-suspenders: the chat slice's `logout` reducer already
+    //    fires an async ETHORA_USER removal, but re-issue it here (via
+    //    the same secureUserStorage split the reducer uses) so BOTH the
+    //    plain-AsyncStorage profile half AND the Keychain/Keystore
+    //    secrets are provably gone before this Promise resolves — a bare
+    //    `AsyncStorage.removeItem(ETHORA_USER)` here would only clear the
+    //    profile half and leave the tokens behind.
+    try {
+      await secureUserStorage().remove();
+    } catch (e) {
+      console.warn('logoutService: secure user storage clear failed', e);
+    }
   },
 };
 

package/src/hooks/usePendingNotification.ts

@@ -4,7 +4,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import { RootState } from '../roomStore';
 import { setCurrentRoom, clearPendingNotificationJid } from '../roomStore/roomsSlice';
 
-const PENDING_NOTIFICATION_JID_KEY = 'ethora_pending_notification_jid';
+import { PENDING_NOTIFICATION_JID_KEY, readPendingJid } from '../helpers/pushPayload';
 
 export function usePendingNotification() {
   const dispatch = useDispatch();
@@ -21,21 +21,15 @@ export function usePendingNotification() {
       let jidToOpen = pendingNotificationJid;
 
       if (!jidToOpen) {
-        try {
-          const storedJid = await AsyncStorage.getItem(PENDING_NOTIFICATION_JID_KEY);
-          if (storedJid) {
-            jidToOpen = storedJid;
-            await AsyncStorage.removeItem(PENDING_NOTIFICATION_JID_KEY);
-          }
-        } catch (error) {
-          console.error('Error reading from AsyncStorage:', error);
-        }
+        jidToOpen = await readPendingJid();
       }
 
       if (jidToOpen) {
         const room = rooms[jidToOpen];
         if (room) {
-          return;
+          dispatch(clearPendingNotificationJid());
+          AsyncStorage.removeItem(PENDING_NOTIFICATION_JID_KEY).catch(() => undefined);
+          dispatch(setCurrentRoom({ roomJID: jidToOpen }));
         }
       }
     };