@ethora/chat-component-rn 26.7.9 → 26.7.10

package/src/hooks/useChatRoomFocus.ts

@@ -1,13 +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 { getServerReadTimestamp } from '../helpers/getServerReadTimestamp';
+import {
+  getFlushBoundaryTs,
+  getReadMarkerTimestamp,
+} from '../helpers/getServerReadTimestamp';
 
 interface UseChatRoomFocusOptions {
   /** The room JID that the consumer's tab/screen is currently showing. */
@@ -62,25 +66,52 @@ export const useChatRoomFocus = ({
     isFocused: false,
   });
 
-  const leaveRoom = (jid: string) => {
+  // `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 timestamp = getServerReadTimestamp(rooms?.[jid], state.roomHeapSlice);
-    // Only stamp when we actually have something to anchor to - skip
-    // rather than fall back to the device clock (bug #38).
+    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());
     (state.chatSettingStore as any)?.client
-      ?.flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID: jid })
+      ?.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) {
@@ -95,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/useLogout.tsx

@@ -10,6 +10,7 @@ import { pushSubscriptionService } from '../services/pushSubscriptionService';
 import { clearRoomsRestCache } from '../networking/api-requests/rooms.api';
 import { clearPersistedState } from '../roomStore/persistence';
 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)),

package/src/roomStore/roomsSlice.ts

@@ -2,6 +2,7 @@ import { createAsyncThunk, createSlice, PayloadAction, type Slice } from '@redux
 import type { WritableDraft } from 'immer';
 import { EditAction, HistoryPreloadState, IMessage, IRoom } from '../types/types';
 import { insertMessageWithDelimiter } from '../helpers/insertMessageWithDelimiter';
+import { msgSortableMs } from '../helpers/msgSortableMs';
 import type XmppClient from '../networking/xmppClient';
 
 // Per-room runtime message cap. Mirrors the persistence layer's
@@ -236,6 +237,33 @@ export interface RoomMessagesState {
   // — see `applyPrivateStoreMarkers`. Re-fetched every init/reconnect,
   // so it is intentionally NOT persisted.
   privateStoreMarkers: Record<string, number>;
+  // The single source of truth for "read up to here, but the user
+  // hasn't reached the bottom yet" (`{ roomJID: boundaryMs }`).
+  // Set by MessageList (via ChatRoom's `onReadBoundaryChange`) the
+  // moment the user first scrolls away from the bottom, to the
+  // msgSortableMs of the newest message they'd actually seen. Every
+  // path that stamps a read marker for a room the user is leaving
+  // (ChatRoom unmount, xmppProvider's AppState background handler and
+  // `isVisible=false` handler, the live `advance()` effect, and
+  // `useChatRoomFocus`'s `leaveRoom`) must consult this instead of
+  // unconditionally stamping "the newest acked message" - otherwise
+  // leaving a room while scrolled up marks messages the user never
+  // reached as read (customer #42, a regression of #33 reintroduced by
+  // #38's server-timestamp marker). See `getReadMarkerTimestamp` in
+  // helpers/getServerReadTimestamp.ts.
+  //
+  // Cleared when the boundary no longer applies: the user scrolls back
+  // to the bottom, the visible room changes, or the room is truly left
+  // (ChatRoom unmounts, or a tab-navigator focus hook releases the
+  // room). NOT cleared merely because the app backgrounds or a host's
+  // `isVisible` flips false - MessageList typically stays mounted
+  // through those, so its own scroll-tracking ref (the only thing that
+  // could re-derive this value) is still intact and the boundary must
+  // stay in sync with it. Deliberately NOT persisted (this key isn't
+  // read by `persistence.ts`, which only ever picks `rooms` back out of
+  // this slice) - it's meaningless across a process restart, where
+  // MessageList always mounts fresh at the bottom.
+  readBoundaries: Record<string, number>;
 }
 
 const initialState: RoomMessagesState = {
@@ -252,6 +280,7 @@ const initialState: RoomMessagesState = {
   },
   pendingNotificationJid: null,
   privateStoreMarkers: {},
+  readBoundaries: {},
 };
 
 const isValidRoomJid = (jid: unknown): jid is string => {
@@ -518,7 +547,7 @@ const reducers = {
           state.visibleRoomJID === roomJID
             ? null
             : lastViewedValue
-              ? new Date(lastViewedValue)
+              ? lastViewedValue
               : null;
 
         insertMessageWithDelimiter(roomMessages, message, lastViewedTimestamp);
@@ -536,6 +565,7 @@ const reducers = {
       state.rooms = {};
       state.visibleRoomJID = null;
       state.privateStoreMarkers = {};
+      state.readBoundaries = {};
       state.isUnreadSyncing = false;
     },
     setComposing(
@@ -659,6 +689,39 @@ const reducers = {
         }
       }
     },
+    /**
+     * Set (or clear) the "read up to here, but not further" boundary for
+     * a room - see `readBoundaries` on `RoomMessagesState` for the full
+     * contract. `ts` is the msgSortableMs of the newest message the user
+     * actually reached before scrolling away from the bottom; `null`/`0`
+     * clears it (the user is at the bottom, or nothing was reached yet).
+     */
+    setReadBoundary: (
+      state: WritableDraft<RoomMessagesState>,
+      action: PayloadAction<{ jid: string; ts: number | null }>
+    ) => {
+      const { jid, ts } = action.payload;
+      if (!jid) {return;}
+      if (!state.readBoundaries) {state.readBoundaries = {};}
+      if (typeof ts === 'number' && Number.isFinite(ts) && ts > 0) {
+        state.readBoundaries[jid] = ts;
+      } else {
+        delete state.readBoundaries[jid];
+      }
+    },
+    /**
+     * Release a room's read boundary once it has been consumed by a
+     * genuine "leave" (ChatRoom unmount, or a tab-navigator focus hook
+     * switching to a different room) - see `readBoundaries` for why the
+     * background/`isVisible=false` paths deliberately do NOT call this.
+     */
+    clearReadBoundary: (
+      state: WritableDraft<RoomMessagesState>,
+      action: PayloadAction<{ jid: string }>
+    ) => {
+      const { jid } = action.payload;
+      if (jid && state.readBoundaries) {delete state.readBoundaries[jid];}
+    },
     setRoomRole: (
       state: WritableDraft<RoomMessagesState>,
       action: PayloadAction<{ chatJID: string; role: string }>
@@ -752,6 +815,7 @@ const reducers = {
       state.isLoading = false;
       state.isUnreadSyncing = false;
       state.privateStoreMarkers = {};
+      state.readBoundaries = {};
     },
     setActiveMessage: (
       state: WritableDraft<RoomMessagesState>,
@@ -873,27 +937,13 @@ export const roomsStore: Slice<RoomMessagesState, typeof reducers, 'roomMessages
   reducers,
 });
 
-// Count messages strictly newer than the given millisecond timestamp.
-// Uses `msg.id` (server-authoritative microsecond timestamp prefixed by
-// 13-digit millis — see helpers/dateComparison `getHighResolutionTimestamp`)
-// because `msg.date` can be derived client-side (createMessageFromXml
-// falls back to `Date.now()` for realtime stanzas without a `date`
-// attr), which makes the comparison drift vs what the server assigned.
-// Excludes the "delimiter-new" sentinel, pending sends, and the current
-// user's own messages (parity with unreadMiddleware's isOwnMessage
-// filter — without this, the reducer and the middleware disagree about
-// the count and we get a flicker as the badge gets written twice with
-// different values on every message).
-export const msgSortableMs = (msg: any): number => {
-  const id = String(msg?.id || '');
-  const m = /^(\d{13})/.exec(id);
-  if (m) {return Number(m[1]);}
-  if (msg?.date) {
-    const t = new Date(msg.date as any).getTime();
-    if (Number.isFinite(t)) {return t;}
-  }
-  return 0;
-};
+// Re-exported for backward compatibility - every existing call site
+// imports `msgSortableMs` from here. The implementation now lives in
+// helpers/msgSortableMs.ts (imported above), so insertMessageWithDelimiter.ts
+// (which this file itself imports) can use the SAME ordering source
+// without a roomStore <-> helpers import cycle. See that file for the
+// full rationale (server id vs. client `date`).
+export { msgSortableMs };
 
 const norm = (s: any): string => {
   if (s == null) {return '';}
@@ -980,6 +1030,8 @@ export const {
   setUnreadSyncing,
   setLastViewedTimestamp,
   applyPrivateStoreMarkers,
+  setReadBoundary,
+  clearReadBoundary,
   setRoomNoMessages,
   setCurrentRoom,
   setVisibleRoom,

package/src/types/types.ts

@@ -585,6 +585,20 @@ export interface IConfig {
   // `disableKeyboardAvoidingView` is set. Needs on-device tuning of any
   // `keyboardVerticalOffset`.
   keyboardStickyInput?: boolean;
+  // Bottom padding applied to the input dock (the composer's outer
+  // wrapper), on both iOS and Android. When a number is provided (0 is
+  // allowed) it is used verbatim on both platforms, overriding the
+  // built-in default below.
+  //
+  // Left unset, the default is:
+  //  - 0 when `disableKeyboardAvoidingView` is set, since the host owns
+  //    layout entirely and typically already places the chat above its
+  //    own chrome (e.g. a tab bar) - the built-in padding would just add
+  //    an extra gap between the composer and that chrome.
+  //  - otherwise unchanged: the iOS safe-area bottom inset, or a fixed
+  //    12dp gap on Android (`ANDROID_INPUT_DOCK_GAP`).
+  // Customer-reported #44.
+  inputDockPaddingBottom?: number;
   // The message list's FlatList uses keyboardDismissMode="interactive" by
   // default, so a drag can be used to pull the keyboard closed. Because
   // the list is `inverted`, an ordinary scroll gesture through history can