@ethora/chat-component-rn 26.7.1 → 26.7.3

package/src/components/MainComponents/ChatRoom.tsx

@@ -31,6 +31,9 @@ import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingI
 // import {PanGestureHandler} from 'react-native-gesture-handler';
 import { FlatList } from 'react-native';
 import {
+  AppState,
+  AppStateStatus,
+  Keyboard,
   Platform,
   TouchableWithoutFeedback,
   View,
@@ -106,6 +109,45 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       configWithEventHandlers || storeConfig,
     );
 
+    // Under the sticky keyboard strategy, the input dock's position is
+    // driven by KeyboardStickyView's native-animated offset. If the app
+    // is backgrounded while the keyboard-close animation hasn't finished,
+    // the OS removes the keyboard from the app-switcher snapshot but the
+    // shared value hasn't caught up to "closed" yet, so the input appears
+    // to float in that preview.
+    //
+    // NOTE on what this does and doesn't fix: iOS actually captures that
+    // preview during the active→inactive transition, BEFORE 'background'
+    // fires — so dismissing here on 'background' lands too late to affect
+    // the snapshot already taken, and is effectively a no-op for the exact
+    // iOS symptom in bug #37. An earlier version keyed this off 'inactive'
+    // instead, which does land in time, but 'inactive' also fires for
+    // Control Center, share sheets, and permission prompts — none of which
+    // should close the user's keyboard — so that traded a rare cosmetic
+    // preview glitch for a much more common false dismissal. Kept on
+    // 'background': it still resets the offset for genuine backgrounding
+    // (home button, app switch) and for Android's recents preview (RN's
+    // AppState has no 'inactive' there), at the cost of leaving the iOS
+    // switcher-preview glitch itself unresolved. Both symptoms are cosmetic
+    // per the QA report, which explicitly accepted leaving this imperfect
+    // rather than risk destabilizing the sticky strategy. Sticky-only;
+    // doesn't touch the other keyboard strategies.
+    const stickyInputEnabled =
+      !configWithEventHandlers?.disableKeyboardAvoidingView &&
+      !!configWithEventHandlers?.keyboardStickyInput;
+    useEffect(() => {
+      if (!stickyInputEnabled) {
+        return;
+      }
+      const onAppStateChange = (nextState: AppStateStatus) => {
+        if (nextState === 'background') {
+          Keyboard.dismiss();
+        }
+      };
+      const subscription = AppState.addEventListener('change', onAppStateChange);
+      return () => subscription.remove();
+    }, [stickyInputEnabled]);
+
     const sendMessage = useCallback(
       (message: string) => {
         if (!activeRoomJID) {
@@ -170,15 +212,28 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       clientRef.current = client;
     }, [client]);
 
+    // Tracks what the user actually saw: `null` while they're at the
+    // bottom (safe to mark everything read), or the timestamp of the
+    // newest message visible when they scrolled away from it. Reported
+    // by MessageList via onReadBoundaryChange. Without this, leaving a
+    // room (or backgrounding) while scrolled up stamped `now()` as read
+    // and silently discarded genuinely-unread messages. Customer-
+    // reported #33.
+    const readBoundaryRef = useRef<number | null>(null);
+    const handleReadBoundaryChange = useCallback((boundaryTs: number | null) => {
+      readBoundaryRef.current = boundaryTs;
+    }, []);
+
     useEffect(() => {
       if (!activeRoomJID) {
         return;
       }
 
+      readBoundaryRef.current = null;
       dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
       setIsLoadingMore(false);
       return () => {
-        const timestamp = new Date().getTime();
+        const timestamp = readBoundaryRef.current ?? new Date().getTime();
         dispatch(
           setLastViewedTimestamp({
             chatJID: activeRoomJID,
@@ -191,6 +246,12 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
           liveClient
             .flushLastViewedToPrivateStoreStanza(store.getState().rooms?.rooms, {
               visibleRoomJID: activeRoomJID,
+              // Carry the same boundary to the SERVER marker. Without
+              // this the flush defaults to Date.now() for the visible
+              // room, so messages the user never scrolled down to come
+              // back as read on the next login — the local count was
+              // right but the server overrode it.
+              visibleRoomTs: readBoundaryRef.current,
             })
             .catch(() => {});
         }
@@ -404,6 +465,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                 config={configWithEventHandlers}
                 loading={isLoadingMore}
                 isReply={false}
+                onReadBoundaryChange={handleReadBoundaryChange}
               />
             )}
           </View>

package/src/components/MainComponents/ChatWrapper.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useEffect, useMemo, useState} from 'react';
+import React, {FC, useEffect, useMemo, useRef, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import ChatRoom from './ChatRoom';
 import {
@@ -34,6 +34,7 @@ import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
 import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
 import {buildSeedRoom} from '../../helpers/buildSeedRoom';
+import {shallowEqual} from '../../helpers/shallowEqual';
 import {InteractionsOverlayProvider} from '../MessageBubble/InteractionsOverlay';
 
 interface ChatWrapperProps {
@@ -161,6 +162,23 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     dispatch(addRoom({roomData: buildSeedRoom(seededRoomJID)}));
   }, [seededRoomJID, seededRoomMissing, dispatch]);
 
+  // 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. Kept separate from the init effect below so
+  // toggling a flag doesn't re-run client/token setup. Guarded with a
+  // shallow-equal check (not just the `config` reference) because hosts
+  // commonly pass an inline object literal (`<Chat config={{...}}/>`) that
+  // is a new reference on every render even when nothing in it changed —
+  // dispatching unconditionally there would re-render every config
+  // consumer (ChatRoom, modals, ...) on every host render.
+  const lastSyncedConfigRef = useRef<IConfig | undefined>(undefined);
+  useEffect(() => {
+    if (config && !shallowEqual(lastSyncedConfigRef.current, config)) {
+      lastSyncedConfigRef.current = config;
+      dispatch(setConfig(config));
+    }
+  }, [config, dispatch]);
+
   useEffect(() => {
     if (roomJID) {
       dispatch(

package/src/components/MainComponents/MessageList.tsx

@@ -53,6 +53,15 @@ interface MessageListProps<TMessage extends IMessage> {
   config?: IConfig;
   isReply: boolean;
   activeMessage?: IMessage;
+  /**
+   * Fired whenever the "read up to" boundary changes: `null` while the
+   * user is at the bottom (everything is read), or the timestamp of the
+   * newest message they'd actually seen when they scrolled away from it.
+   * Lets the host mark only what was actually viewed as read instead of
+   * stamping "now" on unmount/leave, which would wrongly clear unread
+   * messages the user scrolled up and never got back down to.
+   */
+  onReadBoundaryChange?: (boundaryTs: number | null) => void;
 }
 
 const MessageList = <TMessage extends IMessage>({
@@ -66,6 +75,7 @@ const MessageList = <TMessage extends IMessage>({
   loading,
   isReply,
   activeMessage,
+  onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
   const { composing, messages, composingList } = useRoomState(roomJID)
     .room! as IRoom;
@@ -332,6 +342,7 @@ const MessageList = <TMessage extends IMessage>({
         // counter so the badge disappears with the arrow.
         setUnreadWhileScrolledUp(0);
         newestSeenTsRef.current = null;
+        onReadBoundaryChange?.(null);
       } else {
         isUserAtBottomRef.current = false;
         if (hasUserScrolledRef.current) {
@@ -349,11 +360,12 @@ const MessageList = <TMessage extends IMessage>({
             },
             0
           );
+          onReadBoundaryChange?.(newestSeenTsRef.current);
         }
         setIsUserAtBottom(false);
       }
     },
-    [memoizedMessages]
+    [memoizedMessages, onReadBoundaryChange]
   );
 
   // Keep the badge in sync with messages that arrive while the user is
@@ -382,6 +394,7 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
+    onReadBoundaryChange?.(null);
     scrollToBottom();
   };
 
@@ -392,6 +405,8 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
+    onReadBoundaryChange?.(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [roomJID]);
 
   const BackgroundImage = useMemo(() => {
@@ -442,7 +457,9 @@ const MessageList = <TMessage extends IMessage>({
         onLayout={handleLayout}
         inverted={true}
         keyboardShouldPersistTaps="handled"
-        keyboardDismissMode="interactive"
+        keyboardDismissMode={
+          config?.keepKeyboardOpenOnScroll ? 'none' : 'interactive'
+        }
         contentContainerStyle={styles.flatListContent}
         ListFooterComponent={
           loading && memoizedMessages.length > 15 ? (

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import {
+  Alert,
   Animated,
   Text,
   TouchableOpacity,
@@ -8,10 +9,81 @@ import {
   Dimensions,
   View,
 } from 'react-native';
-import { AddNewIcon, ProfileIcon, SettingIcon } from '../../assets/icons';
+import {
+  AddNewIcon,
+  LogoutIcon,
+  ProfileIcon,
+  SettingIcon,
+} from '../../assets/icons';
 import { useDispatch } from 'react-redux';
 import { setActiveModal } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useLogout } from '../../hooks/useLogout';
+import type { IConfig } from '../../types/types';
+
+type LogoutConfig = NonNullable<IConfig['logout']>;
+
+const DEFAULT_LOGOUT_LABEL = 'Sign out';
+
+const confirmLogout = (
+  confirm: LogoutConfig['confirm'],
+  label: string
+): Promise<boolean> => {
+  if (confirm === false) {
+    return Promise.resolve(true);
+  }
+  const copy = typeof confirm === 'object' && confirm ? confirm : {};
+  return new Promise<boolean>((resolve) => {
+    Alert.alert(
+      copy.title ?? label,
+      copy.message ?? 'Are you sure you want to sign out?',
+      [
+        {
+          text: copy.cancelText ?? 'Cancel',
+          style: 'cancel',
+          onPress: () => resolve(false),
+        },
+        {
+          text: copy.confirmText ?? label,
+          style: 'destructive',
+          onPress: () => resolve(true),
+        },
+      ],
+      { cancelable: true, onDismiss: () => resolve(false) }
+    );
+  });
+};
+
+export const runLogoutFlow = async (
+  logoutConfig: LogoutConfig,
+  performLogout: () => Promise<void>
+): Promise<void> => {
+  const label = logoutConfig.label ?? DEFAULT_LOGOUT_LABEL;
+  const confirmed = await confirmLogout(logoutConfig.confirm ?? true, label);
+  if (!confirmed) {
+    return;
+  }
+  if (logoutConfig.onBeforeLogout) {
+    try {
+      const proceed = await logoutConfig.onBeforeLogout();
+      if (proceed === false) {
+        return;
+      }
+    } catch (e) {
+      console.warn('HeaderRoomListMenu: onBeforeLogout threw, logout cancelled', e);
+      return;
+    }
+  }
+  await performLogout(); // never rejects (see useLogout)
+  if (logoutConfig.onAfterLogout) {
+    try {
+      await logoutConfig.onAfterLogout();
+    } catch (e) {
+      console.warn('HeaderRoomListMenu: onAfterLogout threw', e);
+    }
+  }
+};
 
 const { width } = Dimensions.get('window');
 
@@ -29,14 +101,25 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   closeDrawer,
 }) => {
   const dispatch = useDispatch();
+  const { config } = useChatSettingState();
+  const performLogout = useLogout();
+  const logoutConfig = config?.logout?.enabled ? config.logout : undefined;
+  const primaryColor = config?.colors?.primary ?? '#0052CD';
 
   const drawerTranslateX = drawerAnimation.interpolate({
     inputRange: [0, 1],
     outputRange: [width, 0],
   });
 
-  const menuOptions = useMemo(
-    () => [
+  const menuOptions = useMemo(() => {
+    const options: {
+      label: string;
+      icon: React.ReactElement;
+      onClick: () => void;
+      styles?: { color: string };
+      /** When true the row closes the drawer itself before acting. */
+      closesDrawer?: boolean;
+    }[] = [
       {
         label: 'New Chat',
         icon: <AddNewIcon color="#8C8C8C" />,
@@ -62,13 +145,21 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
           console.log('Settings clicked');
         },
       },
-      // {
-      //   label: "Logout",
-      //   onClick: handleLogout,
-      // },
-    ],
-    []
-  );
+    ];
+    if (logoutConfig) {
+      options.push({
+        label: logoutConfig.label ?? DEFAULT_LOGOUT_LABEL,
+        icon: <LogoutIcon color={primaryColor} />,
+        styles: { color: primaryColor },
+        closesDrawer: true,
+        onClick: () => {
+          closeDrawer();
+          runLogoutFlow(logoutConfig, performLogout).catch(() => {});
+        },
+      });
+    }
+    return options;
+  }, [dispatch, logoutConfig, performLogout, primaryColor, closeDrawer]);
 
   return (
     <>
@@ -82,9 +173,12 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
           <View key={index} style={styles.menuItemWrapper}>
             <TouchableOpacity
               style={styles.menuItem}
+              testID={`header-menu-${option.label}`}
               onPress={() => {
                 option.onClick();
-                closeDrawer();
+                if (!option.closesDrawer) {
+                  closeDrawer();
+                }
               }}
             >
               <View

package/src/components/Modals/AttachSheet/AttachSheet.tsx

@@ -39,12 +39,13 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
 }) => {
   const { config } = useChatSettingState();
   const ts = config?.typography?.attachSheet;
-  // Pending handler captured on row tap — runs once the EXIT animation
-  // finishes so iOS doesn't try to present an image picker over a
-  // still-dismissing modal (was the original reason for the
-  // platform-split + Modal.onDismiss dance). The animation completion
-  // callback now drives this on both platforms.
   const pendingRef = useRef<(() => void) | null>(null);
+  const runPending = () => {
+    console.log('[timing] runPending', Date.now());
+    const fn = pendingRef.current;
+    pendingRef.current = null;
+    fn?.();
+  };
 
   // Local "modal stays mounted while animating out" state. The parent
   // controls `visible`; we mirror it but delay unmount until the exit
@@ -95,8 +96,6 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
       return () => cancelAnimationFrame(raf);
     }
     if (!mounted) {return;}
-    // Exit: fade the backdrop, slide the sheet down, then unmount and
-    // fire any pending picker handler.
     Animated.parallel([
       Animated.timing(backdropOpacity, {
         toValue: 0,
@@ -113,19 +112,19 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
     ]).start(({ finished }) => {
       if (!finished) {return;} // interrupted (rapid re-open) → leave state alone
       setMounted(false);
-      const fn = pendingRef.current;
-      pendingRef.current = null;
-      fn?.();
+      if (Platform.OS !== 'ios') {
+        runPending();
+      }
     });
     return undefined;
   }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const trigger = (handler: () => void) => () => {
-    // Capture the handler and ask parent to close. The exit-animation
-    // completion above fires `handler` AFTER the sheet has slid away,
-    // so iOS no longer tries to present a picker over a dismissing
-    // modal — and Android no longer needs the ad-hoc 150ms setTimeout.
+    console.log('[timing] row tap', Date.now());
     pendingRef.current = handler;
+    if (Platform.OS === 'ios') {
+      setMounted(false);
+    }
     onClose();
   };
 
@@ -166,11 +165,13 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
       onRequestClose={onClose}
       // Hardware-back / iOS gesture also routes through onClose, which
       // flips `visible` and triggers our exit animation above.
+      onDismiss={Platform.OS === 'ios' ? runPending : undefined}
     >
       <Animated.View
         style={[styles.backdrop, { opacity: backdropOpacity }]}
       >
         <TouchableOpacity
+          testID="attach-backdrop"
           style={StyleSheet.absoluteFill}
           activeOpacity={1}
           onPress={onClose}
@@ -187,6 +188,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
             {rows.map(({ label, hint, Icon, handler }, idx) => (
               <TouchableOpacity
                 key={label}
+                testID={`attach-row-${label}`}
                 activeOpacity={0.6}
                 style={[
                   styles.row,

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -295,6 +295,11 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
           </>
         }
       />
+      <ScrollView
+        style={{ width: '100%', flex: 1 }}
+        contentContainerStyle={{ flexGrow: 1 }}
+        showsVerticalScrollIndicator={true}
+      >
       <CenterContainer>
         <ProfileImagePlaceholder
           name={activeRoom.title || activeRoom.name}
@@ -378,11 +383,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
               Member list unavailable
             </Label>
           ) : (
-            <ScrollView
-              style={{ maxHeight: 400 }}
-              showsVerticalScrollIndicator={true}
-              nestedScrollEnabled={true}
-            >
+            <View>
               {activeRoom?.roomMembers?.map((user, index) => (
                 <View
                   key={user.xmppUsername}
@@ -477,11 +478,12 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                   {index < (activeRoom?.roomMembers?.length || 0) - 1 && <Divider />}
                 </View>
               ))}
-            </ScrollView>
+            </View>
           )}
         </BorderedContainer>
         )}
       </CenterContainer>
+      </ScrollView>
 
       <DeleteChatModal
         isModalOpen={isModalOpen}

package/src/components/styled/SendInput.tsx

@@ -265,16 +265,6 @@ const SendInput: React.FC<SendInputProps> = ({
     if (pickingDocRef.current) {return;}
     pickingDocRef.current = true;
     try {
-      // Let the attach-sheet's modal finish its NATIVE dismissal before we
-      // present the picker. The sheet fires this handler right after its
-      // slide-out animation, but the underlying RN Modal view-controller
-      // dismissal is async — presenting the document picker over a still-
-      // dismissing modal makes iOS tear it down without a cancel callback,
-      // which strands expo-document-picker's pickingContext and makes every
-      // subsequent open throw "Different document picking in progress".
-      if (Platform.OS === 'ios') {
-        await new Promise((resolve) => setTimeout(resolve, 350));
-      }
       const result = await DocumentPicker.getDocumentAsync({
         type: '*/*',
         multiple: false,

package/src/context/xmppProvider.tsx

@@ -49,6 +49,7 @@ import {
   setUnreadSyncing,
 } from '../roomStore/roomsSlice';
 import { runHistoryPreloadScheduler } from '../helpers/historyPreloadScheduler';
+import { updateMessagesTillLast } from '../helpers/updateMessagesTillLast';
 import { secureUserStorage } from '../helpers/secureUserStorage';
 import { clearPersistedState } from '../roomStore/persistence';
 import { pushLog as devPushLog } from '../utils/devLogger';
@@ -239,6 +240,19 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
           .catch((e: unknown) =>
             devPushLog('warn', 'reconnect: privateStore refresh failed', e)
           );
+        // Pull whatever landed in each room's archive while the stream was
+        // down. MUC presence re-join above only restores delivery for
+        // messages sent AFTER this reconnect — anything sent during the
+        // offline window has no live stanza to catch, and previously only
+        // came back on a full app restart (fresh useChatWrapperInit mount
+        // re-running its own one-shot boot sync). Safe on the very first
+        // connect too: rooms have no `lastMessageTimestamp` yet at that
+        // point, so this is a no-op until the bootstrap's own history load
+        // populates it. Customer-reported #32.
+        const rooms = store.getState().rooms?.rooms || {};
+        updateMessagesTillLast(rooms, created).catch((e: unknown) =>
+          devPushLog('warn', 'reconnect: offline catch-up sync failed', e)
+        );
       });
 
       setClient(created);

package/src/helpers/historyPreloadScheduler.ts

@@ -1,7 +1,11 @@
 import { AppState } from 'react-native';
 import XmppClient from '../networking/xmppClient';
 import { store } from '../roomStore';
-import { applyRoomsPreloadBatch, setUnreadSyncing } from '../roomStore/roomsSlice';
+import {
+  applyRoomsPreloadBatch,
+  setUnreadSyncing,
+  RUNTIME_MESSAGE_LIMIT,
+} from '../roomStore/roomsSlice';
 import { IMessage, IRoom } from '../types/types';
 
 interface HistoryPreloadSchedulerOptions {
@@ -30,6 +34,13 @@ const DEFAULT_CONCURRENCY = 3;
 // `mergeHistoryIntoCache` rarely has to fall back to clear-and-replace.
 const DEFAULT_PAGE_SIZE = 20;
 const DEFAULT_RETRY_LIMIT = 2;
+// When the first page is entirely unread (every fetched message is newer
+// than `lastViewedTimestamp`), the true unread count could be far bigger
+// than `pageSize` — `useUnread()` only ever sees what's been loaded. Page
+// further back, up to this many extra fetches, until we either find the
+// boundary or give up (`unreadCapped` then stays true so callers at least
+// know the count is a floor, not exact). Customer-reported #34.
+const MAX_UNREAD_CATCHUP_PAGES = 8;
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -226,9 +237,75 @@ export const runHistoryPreloadScheduler = async (
             }
 
             const nextRoom = store.getState().rooms.rooms[item.jid];
+            let combined: IMessage[] = fetchedMessages || [];
+            const lastViewed = Number(nextRoom?.lastViewedTimestamp) || 0;
+
+            // The first page was entirely unread — keep paging older until
+            // we find a message at/before `lastViewedTimestamp` (the true
+            // boundary) or run out of catch-up budget, so the count isn't
+            // silently truncated at `pageSize`.
+            if (lastViewed > 0 && computeUnreadCapped(nextRoom, combined, pageSize)) {
+              let lastPageLen = combined.length;
+              let extraPages = 0;
+              while (
+                extraPages < MAX_UNREAD_CATCHUP_PAGES &&
+                lastPageLen >= pageSize &&
+                !signal?.aborted
+              ) {
+                const oldestId = combined.reduce<number | null>((min, m) => {
+                  const idNum = Number((m as any)?.id);
+                  if (!Number.isFinite(idNum)) {return min;}
+                  return min === null || idNum < min ? idNum : min;
+                }, null);
+                if (oldestId === null) {break;}
+
+                let older: IMessage[] | undefined;
+                try {
+                  older = await client.getHistoryStanza(
+                    item.jid,
+                    pageSize,
+                    oldestId,
+                    undefined,
+                    {
+                      coalesceRoom: true,
+                      skipIfPreloaded: !forceReload,
+                      source: 'background',
+                    }
+                  );
+                } catch {
+                  break;
+                }
+                if (!older || !older.length) {break;}
+
+                combined = [...older, ...combined];
+                lastPageLen = older.length;
+                extraPages++;
+
+                const oldestTs = combined.reduce<number>((minTs, m) => {
+                  const ts = messageTimestamp(m);
+                  return ts > 0 ? Math.min(minTs, ts) : minTs;
+                }, Number.MAX_SAFE_INTEGER);
+                if (oldestTs !== Number.MAX_SAFE_INTEGER && oldestTs <= lastViewed) {
+                  break;
+                }
+              }
+            }
+
+            // `mergeHistoryIntoCache` (roomsSlice) caps whatever we dispatch
+            // here to the newest RUNTIME_MESSAGE_LIMIT messages before it
+            // ever reaches `unreadMiddleware` — so a catch-up fetch that
+            // pulled the true boundary can still have it silently dropped
+            // by that cap, leaving a falsely-confident `unreadCapped:false`
+            // (bug #34's failure mode again, just one layer downstream).
+            // Simulate that cap here so the flag reflects what will
+            // actually survive, not just what this fetch retrieved.
+            const simulatedStored =
+              combined.length > RUNTIME_MESSAGE_LIMIT
+                ? combined.slice(-RUNTIME_MESSAGE_LIMIT)
+                : combined;
             const unreadCapped = computeUnreadCapped(
               nextRoom,
-              fetchedMessages || [],
+              simulatedStored,
               pageSize
             );
 
@@ -237,7 +314,7 @@ export const runHistoryPreloadScheduler = async (
                 rooms: [
                   {
                     jid: item.jid,
-                    messages: fetchedMessages || [],
+                    messages: combined,
                     unreadCapped,
                     historyPreloadState: 'done',
                   },

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;