@ethora/chat-component-rn 26.7.2 → 26.7.4

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,18 +1,16 @@
-import React, { useCallback, useMemo } from 'react';
+/** @format */
 
-import {
-  ModalContainerFullScreen,
-  Viewider,
-  Label,
-  LabelData,
-  BorderedContainer,
-  CenterContainer,
-} from '../styledModalComponents';
-import ModalHeaderComponent from '../ModalHeaderComponent';
-import Button from '../../styled/Button';
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useDispatch } from 'react-redux';
+import { ModalContainerFullScreen } from '../styledModalComponents';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import { ArowDownIcon } from '../../../assets/icons';
 import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { chatTextStyle } from '../../../helpers/typography';
+import { useT } from '../../../i18n/useT';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
@@ -21,65 +19,84 @@ interface UserSettingsModalProps {
 const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   handleCloseModal,
 }) => {
+  const t = useT();
+  const dispatch = useDispatch();
+  const { config } = useChatSettingState();
+
   const options = useMemo(
     () => [
-      { value: 'Manage Data', key: MODAL_TYPES.MANAGE_DATA },
-      { value: 'Visiblility', key: MODAL_TYPES.VISIBILITY },
-      // { value: 'Profile Shares', key: MODAL_TYPES.PROFILE_SHARES },
-      // { value: 'Document Shares', key: MODAL_TYPES.DOCUMENT_SHARES },
-      // { value: 'Blocked Users', key: MODAL_TYPES.BLOCKED_USERS },
-      // { value: 'Referrals', key: MODAL_TYPES.REFERRALS },
+      { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
+      { label: t('settings.visibility.title'), key: MODAL_TYPES.VISIBILITY },
     ],
-    []
+    [t]
   );
 
-  const dispatch = useDispatch();
-
-  const handleClick = useCallback((key: string) => {
-    dispatch(setActiveModal(key as any));
-  }, []);
+  const handleClick = useCallback(
+    (key: string) => {
+      dispatch(setActiveModal(key as any));
+    },
+    [dispatch]
+  );
 
   return (
-    <ModalContainerFullScreen>
+    <ModalContainerFullScreen style={styles.screen}>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={'Settings'}
+        headerTitle={t('settings.menu.title')}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
       />
-      <CenterContainer>
-        <BorderedContainer
-          style={{
-            padding: 16,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 8,
-          }}
-        >
-          {options.map((option: { value: string; key: string }, index) => (
-            <>
-              <Button
-                variant="default"
-                style={{
-                  minHeight: 40,
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 2,
-                  width: '100%',
-                  justifyContent: 'center',
-                  borderRadius: 0,
-                  alignItems: 'flex-start',
-                }}
-                onPress={() => handleClick(option.key)}
-              >
-                <Label style={{ textAlign: 'center' }}>{option.value}</Label>
-                {[2, 3, 4].includes(index) && <LabelData>0</LabelData>}
-              </Button>
-              {index < 5 && <Viewider />}
-            </>
-          ))}
-        </BorderedContainer>
-      </CenterContainer>
+      {/* One card per entry, rather than a single bordered block with
+        * hairline dividers — the rows are separate destinations, and the
+        * design gives each its own surface. */}
+      <View style={styles.body}>
+        {options.map((option) => (
+          <TouchableOpacity
+            key={option.key}
+            testID={`settings-row-${option.key}`}
+            activeOpacity={0.7}
+            style={styles.card}
+            onPress={() => handleClick(option.key)}
+          >
+            <Text style={styles.label}>{option.label}</Text>
+            <ArowDownIcon color="#8C8C8C" width={20} height={20} style={styles.chevron} />
+          </TouchableOpacity>
+        ))}
+      </View>
     </ModalContainerFullScreen>
   );
 };
 
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#E8EDF2',
+  },
+  body: {
+    width: '100%',
+    padding: 12,
+    gap: 12,
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 22,
+    shadowColor: '#101828',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 3,
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: '500',
+    color: '#141414',
+  },
+  chevron: {
+    transform: [{ rotate: '-90deg' }],
+  },
+});
+
 export default UserSettingsModal;

package/src/components/Modals/styledModalComponents.tsx

@@ -86,8 +86,15 @@ export const HeaderContainer = styled.View`
    * button and 8px below — properly sized and properly centered. */
   padding: 8px 16px;
   background-color: #fff;
-  border-bottom-width: 1px;
-  border-bottom-color: #f0f0f0;
+  /* Same card treatment as the room-list header: rounded bottom corners
+   * and a soft drop shadow instead of a hairline rule. */
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  shadow-color: #101828;
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.06;
+  shadow-radius: 12px;
+  elevation: 4;
   z-index: 1;
   flex-direction: row;
   justify-content: space-between;

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -90,11 +90,13 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
 
   return (
     <ChatItem key={index}>
-      <ProfileImagePlaceholder
-        name={displayName}
-        icon={appendFileToken(chat?.icon, fileToken)}
-        active={false}
-      />
+      <View pointerEvents="none">
+        <ProfileImagePlaceholder
+          name={displayName}
+          icon={appendFileToken(chat?.icon, fileToken)}
+          active={false}
+        />
+      </View>
       <View
         style={{
           flexDirection: 'column',
@@ -104,7 +106,9 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           paddingVertical: 8,
           paddingRight: 8,
           borderBottomWidth: 1,
-          borderBottomColor: '#F0F0F0',
+          // Reads against the list's #E8EDF2 ground; #F0F0F0 was lighter
+          // than the ground itself, so the row separators vanished.
+          borderBottomColor: '#C6CFDA',
         }}
       >
         <View
@@ -215,8 +219,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           ) : null}
         </View>
         {isDriver && (
+          // Darker than the list's own ground (#E8EDF2), otherwise the
+          // separator disappears into it — white and the old #0052CD0D
+          // hairline both did.
           <View
-            style={{ height: 1, backgroundColor: '#0052CD0D', marginTop: 8 }}
+            style={{ height: 1, backgroundColor: '#C6CFDA', marginTop: 8 }}
           />
         )}
       </View>

package/src/components/styled/SendInput.tsx

@@ -10,14 +10,16 @@ import { IConfig, MediaFile } from '../../types/types';
 import Button from './Button';
 import { SendIcon, AttachIcon, RecordIcon } from '../../assets/icons';
 import { KeyboardAvoidingView, Platform, View, Text, TouchableOpacity, Alert, Linking } from 'react-native';
-import AttachSheet from '../Modals/AttachSheet/AttachSheet';
+import AttachSheet, { PickedMedia } from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getElementFont } from '../../helpers/getElementFont';
 import { useT } from '../../i18n/useT';
+import { getMediaLibrary } from '../../helpers/mediaLibraryRuntime';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
+import * as FileSystem from 'expo-file-system/legacy';
 // expo-audio replaces the discontinued expo-av: `useAudioRecorder` owns a
 // single reusable recorder for this input's lifetime (prepare → record →
 // stop → prepare again), and the module-level helpers cover permissions
@@ -259,6 +261,53 @@ const SendInput: React.FC<SendInputProps> = ({
     }
   };
 
+  // A tap on a thumbnail in the attach sheet's recents strip. The sheet
+  // already resolved the asset to a real on-disk uri (iOS `ph://` ids are
+  // not uploadable); here we apply the same treatment the full-blown
+  // pickers get — HEIC→JPEG for images, and a size probe so the 50 MB cap
+  // is enforced before anything hits the network.
+  const handleRecentMediaSelection = async (media: PickedMedia) => {
+    try {
+      let size: number | undefined;
+      try {
+        const info = await FileSystem.getInfoAsync(media.uri);
+        if (info.exists && typeof (info as any).size === 'number') {
+          size = (info as any).size;
+        }
+      } catch {
+        // Size is a nice-to-have; the backend still rejects oversized bodies.
+      }
+
+      if (media.isVideo) {
+        handleFileSelect([
+          {
+            uri: media.uri,
+            type: media.mimeType || 'video/mp4',
+            name: media.name,
+            size,
+          },
+        ]);
+        return;
+      }
+
+      const normalized = await normalizeImageAsset({
+        uri: media.uri,
+        mimeType: media.mimeType,
+        fileName: media.name,
+      } as ImagePicker.ImagePickerAsset);
+      handleFileSelect([
+        {
+          uri: normalized.uri,
+          type: normalized.mime,
+          name: normalized.name,
+          size,
+        },
+      ]);
+    } catch (error) {
+      console.error('Recent media error:', error);
+    }
+  };
+
   const handleFileSelection = async () => {
     // Drop overlapping invocations — a second getDocumentAsync while the
     // first is still presented throws PickingInProgressException on iOS.
@@ -287,8 +336,39 @@ const SendInput: React.FC<SendInputProps> = ({
     }
   };
 
+  // Photo-library access is requested HERE, not inside the sheet: iOS
+  // cannot present the permission alert while an RN <Modal> owns the
+  // screen (the same UIKit limitation that used to swallow the pickers),
+  // so asking from inside resolved to a silent "denied" and the recents
+  // strip stayed empty forever. Asking on the paperclip tap puts the
+  // system alert over the plain chat screen, where it can actually show.
+  // Only the first tap ever waits on it — afterwards the status is
+  // already determined and `getPermissionsAsync` returns immediately.
+  const ensureLibraryPermission = async () => {
+    const MediaLibrary = getMediaLibrary();
+    if (!MediaLibrary?.getPermissionsAsync) {return;}
+    try {
+      const perm = await MediaLibrary.getPermissionsAsync();
+      if (perm?.granted || perm?.canAskAgain === false) {return;}
+      await MediaLibrary.requestPermissionsAsync();
+    } catch (err) {
+      // Optional peer / unsupported platform: the sheet just shows the
+      // camera tile and the full-library route.
+      console.warn('Media library permission check failed:', err);
+    }
+  };
+
+  // Only the very first tap of a session goes through the permission
+  // check; afterwards the sheet opens with zero added latency.
+  const libraryPermissionCheckedRef = useRef(false);
+
   const handleAttachPress = () => {
-    setShowMediaMenu(true);
+    if (libraryPermissionCheckedRef.current) {
+      setShowMediaMenu(true);
+      return;
+    }
+    libraryPermissionCheckedRef.current = true;
+    ensureLibraryPermission().finally(() => setShowMediaMenu(true));
   };
 
   // ─── Voice recording ──────────────────────────────────────────────
@@ -692,6 +772,7 @@ const SendInput: React.FC<SendInputProps> = ({
           onCamera={handleCameraSelection}
           onGallery={handleGallerySelection}
           onDocument={handleFileSelection}
+          onPickMedia={handleRecentMediaSelection}
           primaryColor={getIconColor(config)}
         />
       </InputContainer>

package/src/components/styled/StyledComponents.ts

@@ -28,9 +28,15 @@ export const ChatContainerHeader = styled.View`
   background-color: #ffffff;
   align-items: center;
   justify-content: space-between;
-  border-bottom-width: 1px;
-  border-bottom-color: #e5e7eb;
-  border-style: solid;
+  /* Rounded bottom corners + a soft drop shadow instead of the hairline
+   * rule, so the header reads as a card over the conversation. */
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  shadow-color: #101828;
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.06;
+  shadow-radius: 12px;
+  elevation: 4;
   z-index: 1000;
 `;
 

package/src/components/styled/StyledInputComponents/StyledInputComponents.tsx

@@ -13,14 +13,21 @@ const colors = {
 
 export const InputContainer = styled.View<{ isText?: boolean }>`
   flex-direction: column;
-  padding: 8px 16px 4px 16px;
-  background-color: ${colors.white};
+  padding: 12px 16px 8px 16px;
+  /* Transparent, so the dock's white surface — and its rounded top
+   * corners — are what shows. An opaque child painted straight over those
+   * corners (a parent's border radius does not clip children without
+   * overflow:hidden, and that would clip the dock's shadow too). */
+  background-color: transparent;
   z-index: 100;
   width: 100%;
   bottom: 0;
   left: 0;
-  border-top-width: 1px;
-  border-top-color: #e5e7eb;
+  /* No radius or shadow here: the dock this sits in (ChatRoom's
+   * InputDockTag) is the composer's outer surface and carries both. Having
+   * them on this inner view too drew its shadow onto the dock's white
+   * background — the faint seam that made the strip below look like a
+   * different colour. */
 `;
 
 export const MediaContainer = styled.View`

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/getChatBackground.ts

@@ -0,0 +1,18 @@
+/** @format */
+
+import type { IConfig } from '../types/types';
+
+/** Ground behind the conversation, and behind the rounded corners of the
+ * header and the composer that sit over it. */
+export const DEFAULT_CHAT_BACKGROUND = '#F3F6FC';
+
+/**
+ * One place for the conversation's background colour.
+ *
+ * The message list has always painted it; the chat container behind it was
+ * plain white, which is what made the header's rounded bottom corners and
+ * the composer's rounded top corners invisible — the corners revealed the
+ * white parent, not the conversation.
+ */
+export const getChatBackgroundColor = (config?: IConfig): string =>
+  config?.backgroundChat?.color || DEFAULT_CHAT_BACKGROUND;

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/mediaLibraryRuntime.ts

@@ -0,0 +1,25 @@
+let cached: any | undefined;
+
+export const getMediaLibrary = (): any | null => {
+  if (cached !== undefined) {return cached;}
+  try {
+    const legacy = require('expo-media-library/legacy');
+
+    if (legacy?.getAssetsAsync) {
+      cached = legacy;
+      return cached;
+    }
+  } catch {
+  }
+
+  try {
+    cached = require('expo-media-library') ?? null;
+  } catch {
+    cached = null;
+  }
+  return cached;
+};
+
+export const __resetMediaLibraryCache = () => {
+  cached = undefined;
+};

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/useChatWrapperInit.ts

@@ -18,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;
@@ -65,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(