@ethora/chat-component-rn 26.5.12 → 26.5.14

package/src/roomStore/index.ts

@@ -15,34 +15,45 @@ const rootReducer = combineReducers({
   roomHeapSlice: roomHeapSlice.reducer,
 });
 
-export const store = configureStore({
-  reducer: rootReducer,
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware({
-      serializableCheck: {
-        // Slice names: chatSlice→'chat', roomsStore→'roomMessages'.
-        ignoredActions: [
-          'chat/addMessage',
-          'chat/setStoreClient',
-          'chat/setConfig',
-          'roomMessages/addRoom',
-        ],
-        ignoredActionPaths: ['payload.client', 'payload.config'],
-        ignoredPaths: [
-          'chat.messages.timestamp',
-          'chatSettingStore.client',
-          'chatSettingStore.config',
-        ],
-      },
-    })
-      .concat(unreadMiddleware)
-      .concat(newMessageMidlleware)
-      .concat(reactionsMiddleware)
-      .concat(logoutMiddleware)
-      .concat(persistenceMiddleware),
-});
-
 export type RootState = ReturnType<typeof rootReducer>;
+
+const createChatStore = () =>
+  configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({
+        serializableCheck: {
+          // Slice names: chatSlice→'chat', roomsStore→'roomMessages'.
+          ignoredActions: [
+            'chat/addMessage',
+            'chat/setStoreClient',
+            'chat/setConfig',
+            'roomMessages/addRoom',
+          ],
+          ignoredActionPaths: ['payload.client', 'payload.config'],
+          ignoredPaths: [
+            'chat.messages.timestamp',
+            'chatSettingStore.client',
+            'chatSettingStore.config',
+          ],
+        },
+      })
+        .concat(unreadMiddleware)
+        .concat(newMessageMidlleware)
+        .concat(reactionsMiddleware)
+        .concat(logoutMiddleware)
+        .concat(persistenceMiddleware),
+  });
+
+const globalScope = globalThis as typeof globalThis & {
+  __CHAT_STORE__?: ReturnType<typeof createChatStore>;
+  __CHAT_PERSISTOR_READY__?: Promise<void>;
+};
+
+export const store =
+  globalScope.__CHAT_STORE__ ||
+  (globalScope.__CHAT_STORE__ = createChatStore());
+
 export type AppDispatch = typeof store.dispatch;
 
 export const getActiveRoom = (state: RootState): IRoom | null => {
@@ -53,16 +64,17 @@ export const getActiveRoom = (state: RootState): IRoom | null => {
 };
 
 // Async rehydrate — read persisted slices and replay them as standard
-// actions. Idempotent: only rehydrates when a slice has data.
-export const persistorReady = (async () => {
-  const { chat, rooms } = await readPersistedState();
-  if (chat?.user && chat.user.walletAddress) {
-    store.dispatch(setUser(chat.user));
-  }
-  if (rooms?.rooms) {
-    for (const [jid, room] of Object.entries(rooms.rooms)) {
-      if (!jid || !room) {continue;}
-      store.dispatch(addRoom({ roomData: room as IRoom }));
+export const persistorReady =
+  globalScope.__CHAT_PERSISTOR_READY__ ||
+  (globalScope.__CHAT_PERSISTOR_READY__ = (async () => {
+    const { chat, rooms } = await readPersistedState();
+    if (chat?.user && chat.user.walletAddress) {
+      store.dispatch(setUser(chat.user));
+    }
+    if (rooms?.rooms) {
+      for (const [jid, room] of Object.entries(rooms.rooms)) {
+        if (!jid || !room) {continue;}
+        store.dispatch(addRoom({ roomData: room as IRoom }));
+      }
     }
-  }
-})();
+  })());

package/src/roomStore/roomsSlice.ts

@@ -98,6 +98,12 @@ export interface RoomMessagesState {
   loadingText?: string;
   usersSet?: Record<string, any>;
   pendingNotificationJid?: string | null;
+  // Server-side read markers fetched from the XMPP private store
+  // (`{ roomJID: lastViewedMs }`). Kept here so a room that loads AFTER
+  // the markers were fetched still inherits its baseline via `addRoom`
+  // — see `applyPrivateStoreMarkers`. Re-fetched every init/reconnect,
+  // so it is intentionally NOT persisted.
+  privateStoreMarkers: Record<string, number>;
 }
 
 const initialState: RoomMessagesState = {
@@ -112,6 +118,7 @@ const initialState: RoomMessagesState = {
     text: '',
   },
   pendingNotificationJid: null,
+  privateStoreMarkers: {},
 };
 
 const isValidRoomJid = (jid: unknown): jid is string => {
@@ -160,11 +167,19 @@ const reducers = {
       // the previous session, so cold-start showed no unread badge for
       // messages received while the app was closed (bug #19/#20). A real
       // (non-zero) explicit value still wins; otherwise keep the existing
-      // value; otherwise anchor to the newest message in the payload.
+      // value; otherwise fall back to the server-side read marker fetched
+      // from the private store (so a room the user has NEVER opened this
+      // session still gets a real baseline — without it the unread
+      // middleware's `lastViewedTimestamp > 0` gate skipped the room
+      // forever and the badge never lit up); otherwise anchor to the
+      // newest message in the payload.
+      const serverMarker = state.privateStoreMarkers?.[roomData.jid] || 0;
       if (roomData.lastViewedTimestamp != null && roomData.lastViewedTimestamp !== 0) {
         lastViewed = roomData.lastViewedTimestamp;
-      } else if (existing?.lastViewedTimestamp != null) {
+      } else if (existing?.lastViewedTimestamp != null && existing.lastViewedTimestamp > 0) {
         lastViewed = existing.lastViewedTimestamp;
+      } else if (serverMarker > 0) {
+        lastViewed = serverMarker;
       } else {
         const msgs = roomData.messages || [];
         let newest = 0;
@@ -346,6 +361,7 @@ const reducers = {
     deleteAllRooms(state: WritableDraft<RoomMessagesState>) {
       state.rooms = {};
       state.visibleRoomJID = null;
+      state.privateStoreMarkers = {};
     },
     setComposing(
       state: WritableDraft<RoomMessagesState>,
@@ -392,6 +408,45 @@ const reducers = {
         }
       }
     },
+    /**
+     * Apply server-side read markers fetched from the XMPP private store
+     * (`{ roomJID: lastViewedMs }`) to redux. This is the hydration that
+     * was missing: `getChatsPrivateStoreRequest` fetched the markers on
+     * every init/reconnect and every caller then DISCARDED the result, so
+     * rooms kept `lastViewedTimestamp: 0` and the unread middleware's
+     * `> 0` gate skipped them forever — `useUnread()` stayed at 0 for any
+     * room the user hadn't locally opened+left this session. Centralised
+     * here (and consulted by `addRoom`) so BOTH already-loaded rooms and
+     * rooms that load later pick up the baseline.
+     *
+     * Monotonic: a marker only ever moves a baseline FORWARD, so a stale
+     * server value can't resurrect already-read messages and a more-recent
+     * local read (tab blur stamping Date.now()) always wins.
+     */
+    applyPrivateStoreMarkers: (
+      state: WritableDraft<RoomMessagesState>,
+      action: PayloadAction<Record<string, number>>
+    ) => {
+      const markers = action.payload;
+      if (!markers || typeof markers !== 'object') {return;}
+      if (!state.privateStoreMarkers) {state.privateStoreMarkers = {};}
+      for (const jid of Object.keys(markers)) {
+        const ts = Number(markers[jid]);
+        if (!jid || !Number.isFinite(ts) || ts <= 0) {continue;}
+        // Remember the marker so rooms that load LATER (via addRoom)
+        // inherit it even though they don't exist in the store yet.
+        if (ts > (state.privateStoreMarkers[jid] || 0)) {
+          state.privateStoreMarkers[jid] = ts;
+        }
+        // Upgrade an already-loaded room's baseline + recompute its badge.
+        // Only ever forward, so a later local read isn't clobbered.
+        const room = state.rooms[jid];
+        if (room && ts > (room.lastViewedTimestamp || 0)) {
+          room.lastViewedTimestamp = ts;
+          room.unreadMessages = countNewerMessages(room.messages, ts);
+        }
+      }
+    },
     setRoomRole: (
       state: WritableDraft<RoomMessagesState>,
       action: PayloadAction<{ chatJID: string; role: string }>
@@ -483,6 +538,7 @@ const reducers = {
       state.activeRoomJID = null;
       state.visibleRoomJID = null;
       state.isLoading = false;
+      state.privateStoreMarkers = {};
     },
     setActiveMessage: (
       state: WritableDraft<RoomMessagesState>,
@@ -674,6 +730,7 @@ export const {
   setComposing,
   setIsLoading,
   setLastViewedTimestamp,
+  applyPrivateStoreMarkers,
   setRoomNoMessages,
   setCurrentRoom,
   setVisibleRoom,

package/src/types/types.ts

@@ -348,6 +348,7 @@ export interface IConfig {
     disableMembers?: boolean;
     hideMembers?: boolean;
     disableChatHeaderMenu?: boolean;
+    disableRoomMenu?: boolean;
     /**
      * Disables uploading / removing the chat icon from the chat-info
      * modal. The avatar stays rendered (initials / current icon) but
@@ -372,6 +373,25 @@ export interface IConfig {
   chatRoomStyles?: ViewStyle;
 
   keyboardVerticalOffset?: number;
+  // Opt OUT of the built-in keyboard handling. By default <Chat> mounts
+  // its own react-native-keyboard-controller KeyboardProvider +
+  // KeyboardAvoidingView (behavior="padding"). If the HOST app already
+  // wraps <Chat> in its own KeyboardProvider / KeyboardAvoidingView, the
+  // built-in one becomes a SECOND avoider over the same tree — two of them
+  // animating padding on keyboard open is the Android flicker in bug #6.
+  // Set this so the component renders a plain View instead and drops its
+  // KeyboardProvider, leaving the host to own keyboard handling outright.
+  disableKeyboardAvoidingView?: boolean;
+  // Built-in keyboard strategy: instead of the default KeyboardAvoidingView
+  // (which adds bottom padding to the WHOLE chat tree — the message list
+  // reflows on keyboard open, the Android "messages jump/flash" in bug #6),
+  // wrap ONLY the input dock in a react-native-keyboard-controller
+  // KeyboardStickyView so just the input tracks the keyboard and the list
+  // is never resized. Best for edge-to-edge Android hosts (where the OS
+  // doesn't also resize the window). Ignored when
+  // `disableKeyboardAvoidingView` is set. Needs on-device tuning of any
+  // `keyboardVerticalOffset`.
+  keyboardStickyInput?: boolean;
 
   // ----- interactions / messages -----
   disableInteractions?: boolean;

package/src/utils/clientRegistry.ts

@@ -1,9 +1,23 @@
 import XmppClient from '../networking/xmppClient';
 import { xmppSettingsInterface } from '../types/types';
 
-let currentClient: XmppClient | null = null;
-let currentClientKey = '';
-const initLocks = new Map<string, Promise<XmppClient>>();
+interface XmppRegistryState {
+  currentClient: XmppClient | null;
+  currentClientKey: string;
+  initLocks: Map<string, Promise<XmppClient>>;
+}
+
+const globalScope = globalThis as typeof globalThis & {
+  __XMPP_REGISTRY__?: XmppRegistryState;
+};
+
+const registry: XmppRegistryState =
+  globalScope.__XMPP_REGISTRY__ ||
+  (globalScope.__XMPP_REGISTRY__ = {
+    currentClient: null,
+    currentClientKey: '',
+    initLocks: new Map<string, Promise<XmppClient>>(),
+  });
 
 const DEFAULT_DEV_SERVER = 'xmpp.chat.ethora.com';
 
@@ -26,46 +40,48 @@ export function setGlobalXmppClient(
   client: XmppClient | null,
   key?: string
 ): void {
-  currentClient = client;
-  currentClientKey = client ? key || currentClientKey || '' : '';
+  registry.currentClient = client;
+  registry.currentClientKey = client
+    ? key || registry.currentClientKey || ''
+    : '';
 }
 
 export function getGlobalXmppClient(): XmppClient | null {
-  return currentClient;
+  return registry.currentClient;
 }
 
 export function getGlobalXmppClientKey(): string {
-  return currentClientKey;
+  return registry.currentClientKey;
 }
 
 export function getReusableXmppClientByKey(key: string): XmppClient | null {
-  if (!key || key !== currentClientKey) {return null;}
-  if (!isXmppClientReusable(currentClient)) {return null;}
-  return currentClient;
+  if (!key || key !== registry.currentClientKey) {return null;}
+  if (!isXmppClientReusable(registry.currentClient)) {return null;}
+  return registry.currentClient;
 }
 
 export async function withXmppClientInitLock(
   key: string,
   init: () => Promise<XmppClient>
 ): Promise<XmppClient> {
-  const existing = initLocks.get(key);
+  const existing = registry.initLocks.get(key);
   if (existing) {return existing;}
 
   const createdPromise = init().finally(() => {
-    if (initLocks.get(key) === createdPromise) {
-      initLocks.delete(key);
+    if (registry.initLocks.get(key) === createdPromise) {
+      registry.initLocks.delete(key);
     }
   });
 
-  initLocks.set(key, createdPromise);
+  registry.initLocks.set(key, createdPromise);
   return createdPromise;
 }
 
 export function requireXmppClient(): XmppClient {
-  if (!currentClient) {
+  if (!registry.currentClient) {
     throw new Error('XMPP client is not initialized');
   }
-  return currentClient;
+  return registry.currentClient;
 }
 
 export default {