@ethora/chat-component-rn 26.4.1 → 26.4.2

package/src/components/styled/SendInput.tsx

@@ -1,6 +1,6 @@
 /** @format */
 
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import {
   MessageInputContainer,
   InputContainer,
@@ -10,11 +10,37 @@ import { IConfig, MediaFile } from '../../types/types';
 import Button from './Button';
 import { SendIcon, AttachIcon } from '../../assets/icons';
 import { KeyboardAvoidingView, Platform, View, TouchableOpacity, Alert, ActionSheetIOS, Linking } from 'react-native';
-import { ModalSelectMedia } from '../Modals/ModalSelectMedia/ModalSelectMedia.tsx';
+import AttachSheet from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
-import DocumentPicker from 'react-native-document-picker';
-import ImagePicker from 'react-native-image-crop-picker';
-import { check, request, PERMISSIONS, RESULTS, Permission } from 'react-native-permissions';
+import * as ImagePicker from 'expo-image-picker';
+import * as DocumentPicker from 'expo-document-picker';
+import * as ImageManipulator from 'expo-image-manipulator';
+
+// iOS photos default to HEIC; many web backends (incl. ours) 500 on
+// HEIC uploads because they can't decode it. Convert to JPEG before
+// upload — JPEG is universally supported. JPEGs pass through.
+const normalizeImageAsset = async (asset: ImagePicker.ImagePickerAsset) => {
+  const mime = (asset.mimeType || '').toLowerCase();
+  const looksLikeHeic =
+    mime.includes('heic') ||
+    mime.includes('heif') ||
+    asset.uri.toLowerCase().endsWith('.heic') ||
+    asset.uri.toLowerCase().endsWith('.heif');
+  if (!looksLikeHeic) {
+    return {
+      uri: asset.uri,
+      mime: asset.mimeType || 'image/jpeg',
+      name: asset.fileName || asset.uri.split('/').pop() || `image_${Date.now()}.jpg`,
+    };
+  }
+  const result = await ImageManipulator.manipulateAsync(asset.uri, [], {
+    compress: 0.9,
+    format: ImageManipulator.SaveFormat.JPEG,
+  });
+  const baseName = (asset.fileName || asset.uri.split('/').pop() || `image_${Date.now()}`)
+    .replace(/\.(heic|heif)$/i, '.jpg');
+  return { uri: result.uri, mime: 'image/jpeg', name: baseName };
+};
 
 interface SendInputProps {
   sendMessage: (message: string) => void;
@@ -49,111 +75,118 @@ const SendInput: React.FC<SendInputProps> = ({
   const [inputHeight, setInputHeight] = useState(40);
   const [showMediaMenu, setShowMediaMenu] = useState(false);
 
+  // Refs shadow `message` and `filePreviews` so handleSendClick can:
+  //   (a) read the LATEST typed value even when React state hasn't
+  //       flushed yet (rapid tap-burst race),
+  //   (b) clear the ref SYNCHRONOUSLY before any await — so a follow-up
+  //       tap on send that happens before the next render reads `''`
+  //       and bails out (instead of re-sending the same content).
+  // Without these, fast spam-typing+sending used to collapse 10 user
+  // sends into 1 server message with all 10 contents stacked.
+  const messageRef = useRef(message);
+  const filePreviewsRef = useRef<MediaFile[]>(filePreviews);
+  // Guard flag so a 2nd tap during the first send's await is a no-op
+  // (versus duplicating the send with stale closure state).
+  const sendingRef = useRef(false);
+
   const handleFileSelect = (files: MediaFile[]) => {
-    console.log('🔵 [SendInput] Files selected:', files);
+    filePreviewsRef.current = files;
     setFilePreviews([...files]);
   };
 
-  const checkPermission = async (permission: Permission) => {
-    const status = await check(permission);
-    if (status === RESULTS.GRANTED) {
-      return status;
-    } else if (status === RESULTS.DENIED) {
-      const requestStatus = await request(permission);
-      return requestStatus;
-    }
-    return status;
+  // Both pickers use expo-image-picker / expo-document-picker. They
+  // own permission prompts internally and surface a `canceled` flag in
+  // the result — no need for a separate permissions library or hand-
+  // rolled check/request flow.
+
+  const promptOpenSettings = (message: string) => {
+    Alert.alert('Permission required', message, [
+      { text: 'Cancel', style: 'cancel' },
+      { text: 'Open Settings', onPress: () => Linking.openSettings() },
+    ]);
   };
 
   const handleCameraSelection = async () => {
-    const permission = Platform.OS === 'ios' ? PERMISSIONS.IOS.CAMERA : PERMISSIONS.ANDROID.CAMERA;
-    const permissionStatus = await checkPermission(permission);
-
-    if (permissionStatus !== RESULTS.GRANTED) {
-      Alert.alert('Permission required', 'Camera permission is needed to take photos.', [
-        { text: 'Cancel', style: 'cancel' },
-        { text: 'Open Settings', onPress: () => Linking.openSettings() },
-      ]);
+    const perm = await ImagePicker.requestCameraPermissionsAsync();
+    if (!perm.granted) {
+      promptOpenSettings('Camera permission is needed to take photos.');
       return;
     }
 
     try {
-      const image = await ImagePicker.openCamera({
-        width: 300,
-        height: 400,
-        cropping: true,
+      const result = await ImagePicker.launchCameraAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        quality: 0.9,
       });
-      const file = {
-        uri: image.path,
-        type: image.mime,
-        name: image.path.split('/').pop() || `camera_${Date.now()}.jpg`,
-      };
-      handleFileSelect([file]);
-    } catch (error: any) {
-      if (error?.code !== 'E_PICKER_CANCELLED') {
-        console.error('Camera error:', error);
-      }
+      if (result.canceled || !result.assets?.[0]) {return;}
+      const asset = result.assets[0];
+      const normalized = await normalizeImageAsset(asset);
+      handleFileSelect([
+        { uri: normalized.uri, type: normalized.mime, name: normalized.name },
+      ]);
+    } catch (error) {
+      console.error('Camera error:', error);
     }
   };
 
   const handleGallerySelection = async () => {
-    try {
-      let permission: Permission;
-      if (Platform.OS === 'ios') {
-        permission = PERMISSIONS.IOS.PHOTO_LIBRARY;
-      } else if (Number(Platform.Version) >= 33) {
-        permission = PERMISSIONS.ANDROID.READ_MEDIA_IMAGES;
-      } else {
-        permission = PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE;
-      }
+    const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (!perm.granted) {
+      promptOpenSettings('Gallery permission is needed to select photos.');
+      return;
+    }
 
-      const permissionStatus = await checkPermission(permission);
-      if (permissionStatus !== RESULTS.GRANTED) {
-        Alert.alert('Permission required', 'Gallery permission is needed to select photos.', [
-          { text: 'Cancel', style: 'cancel' },
-          { text: 'Open Settings', onPress: () => Linking.openSettings() },
+    try {
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.All,
+        allowsEditing: false,
+        quality: 0.9,
+      });
+      if (result.canceled || !result.assets?.[0]) {return;}
+      const asset = result.assets[0];
+      // Videos pass through unchanged; only images get the HEIC→JPEG
+      // normalization (manipulator is image-only).
+      if (asset.type === 'video') {
+        handleFileSelect([
+          {
+            uri: asset.uri,
+            type: asset.mimeType || 'video/mp4',
+            name: asset.fileName || asset.uri.split('/').pop() || `gallery_${Date.now()}.mp4`,
+          },
         ]);
         return;
       }
-
-      const image = await ImagePicker.openPicker({
-        multiple: false,
-        mediaType: 'any',
-      });
-      const file = {
-        uri: image.path,
-        type: image.mime,
-        name: image.path.split('/').pop() || `gallery_${Date.now()}.jpg`,
-      };
-      handleFileSelect([file]);
-    } catch (error: any) {
-      if (error?.code !== 'E_PICKER_CANCELLED') {
-        console.error('Gallery error:', error);
-      }
+      const normalized = await normalizeImageAsset(asset);
+      handleFileSelect([
+        { uri: normalized.uri, type: normalized.mime, name: normalized.name },
+      ]);
+    } catch (error) {
+      console.error('Gallery error:', error);
     }
   };
 
   const handleFileSelection = async () => {
     try {
-      const result = await DocumentPicker.pick({
-        type: [DocumentPicker.types.allFiles],
-        allowMultiSelection: false,
+      const result = await DocumentPicker.getDocumentAsync({
+        type: '*/*',
+        multiple: false,
+        copyToCacheDirectory: true,
       });
-      const files = result.map((file) => ({
-        uri: file.uri,
-        type: file.type || 'unknown',
-        name: file.name || `file_${Date.now()}`,
-      }));
-      handleFileSelect(files);
-    } catch (err: any) {
-      if (!DocumentPicker.isCancel(err)) {
-        console.error('DocumentPicker Error:', err);
-      }
+      if (result.canceled || !result.assets?.[0]) {return;}
+      const asset = result.assets[0];
+      handleFileSelect([
+        {
+          uri: asset.uri,
+          type: asset.mimeType || 'application/octet-stream',
+          name: asset.name || `file_${Date.now()}`,
+        },
+      ]);
+    } catch (err) {
+      console.error('DocumentPicker error:', err);
     }
   };
 
   const handleAttachPress = () => {
-    console.log('🔵 [SendInput] Attach button pressed');
     if (Platform.OS === 'ios') {
       ActionSheetIOS.showActionSheetWithOptions(
         {
@@ -167,42 +200,67 @@ const SendInput: React.FC<SendInputProps> = ({
         }
       );
     } else {
-      Alert.alert('Select Media', 'Choose an option', [
-        { text: 'Cancel', style: 'cancel' },
-        { text: 'Camera', onPress: handleCameraSelection },
-        { text: 'Photo Library', onPress: handleGallerySelection },
-        { text: 'Document', onPress: handleFileSelection },
-      ]);
+      setShowMediaMenu(true);
     }
   };
 
   const handleRemoveImage = (index: number) => {
-    setFilePreviews((prev) => prev.filter((_, i) => i !== index));
+    const next = filePreviewsRef.current.filter((_, i) => i !== index);
+    filePreviewsRef.current = next;
+    setFilePreviews(next);
   };
 
-  const handleSendClick = useCallback(() => {
-    console.log('🔵 [SendInput] handleSendClick', {
-      hasMessage: !!message,
-      msgLen: message?.length || 0,
-      files: filePreviews.length,
-    });
-    // Send media first (so it lands above the caption), then the text
-    // — previously it was either-or, so the user could never attach a
-    // file AND type a caption in the same tap.
-    if (filePreviews.length > 0) {
-      filePreviews.forEach((file) => {
-        sendMedia(file, file.type);
-      });
-    }
-    if (message) {
-      sendMessage(message);
-    }
+  const handleSendClick = useCallback(async () => {
+    // Snapshot LATEST values from refs, not from the React-state
+    // closure. The closure is captured at render-time and may be
+    // stale by the time a fast-fingered user spams the send button.
+    const messageToSend = messageRef.current;
+    const filesToSend = filePreviewsRef.current;
+
+    // Nothing to send → bail. Critical for the spam case: after the
+    // first tap clears refs, subsequent taps queued by RN's native
+    // gesture system see empty refs and exit without re-sending.
+    if (!messageToSend && filesToSend.length === 0) {return;}
+
+    // Re-entrancy guard. If a previous send is still awaiting upload
+    // / xmpp.send, a second tap should NOT slip through with the
+    // same snapshotted content.
+    if (sendingRef.current) {return;}
+    sendingRef.current = true;
+
+    // CLEAR EVERYTHING SYNCHRONOUSLY — refs first (so the early-bail
+    // above catches the next rapid tap immediately), then dispatch
+    // state updates so the UI catches up on the next render.
+    messageRef.current = '';
+    filePreviewsRef.current = [];
     setMessage('');
     setFilePreviews([]);
-  }, [filePreviews, message, sendMessage, sendMedia]);
+
+    try {
+      for (const file of filesToSend) {
+        try {
+          await sendMedia(file, file.type);
+        } catch (err) {
+          console.error(err);
+          return;
+        }
+      }
+      if (messageToSend) {
+        sendMessage(messageToSend);
+      }
+    } finally {
+      sendingRef.current = false;
+    }
+    // Deps intentionally exclude `message` / `filePreviews` — we read
+    // from refs, so closure freshness is irrelevant and re-creating
+    // the handler on every keystroke would just thrash GC + risk the
+    // (still-async) `disabled` button race.
+  }, [sendMessage, sendMedia]);
 
   useEffect(() => {
-    setMessage(editMessage || '');
+    const next = editMessage || '';
+    messageRef.current = next;
+    setMessage(next);
   }, [editMessage]);
 
   return (
@@ -233,12 +291,28 @@ const SendInput: React.FC<SendInputProps> = ({
                 </TouchableOpacity>
               )}
               <MessageInput
+                // Stable testIDs so Maestro / Detox / Appium can drive
+                // the chat-send flow reliably. accessibilityLabel
+                // mirrors the testID so iOS accessibility-id lookups
+                // also work. (TextInput in src/components/InputComponents
+                // also carries the same testIDs as a fallback, but
+                // SendInput is the input that actually ships in
+                // <ChatRoom> / <Thread> so this is the one e2e drivers
+                // hit in practice.)
+                testID="chat-message-input"
+                accessibilityLabel="chat-message-input"
                 isFocused={isFocused}
                 color={config?.colors?.primary}
                 placeholder="Type message"
                 placeholderTextColor="#999"
                 value={message}
-                onChangeText={setMessage}
+                onChangeText={(text) => {
+                  // Mirror into the ref synchronously so handleSendClick
+                  // reads the latest value even before the React state
+                  // commit lands (the source of the spam-merge bug).
+                  messageRef.current = text;
+                  setMessage(text);
+                }}
                 onFocus={() => {
                   onFocus?.();
                   setIsFocused(true);
@@ -267,6 +341,8 @@ const SendInput: React.FC<SendInputProps> = ({
           )}
           {/* Always show send button - it's needed for sending messages and media */}
           <Button
+            testID="chat-send-button"
+            accessibilityLabel="chat-send-button"
             onPress={handleSendClick}
             disabled={!message && filePreviews.length === 0}
             EndIcon={
@@ -290,6 +366,14 @@ const SendInput: React.FC<SendInputProps> = ({
             }}
           />
         </MessageInputContainer>
+        <AttachSheet
+          visible={showMediaMenu}
+          onClose={() => setShowMediaMenu(false)}
+          onCamera={handleCameraSelection}
+          onGallery={handleGallerySelection}
+          onDocument={handleFileSelection}
+          primaryColor={config?.colors?.primary}
+        />
       </InputContainer>
   );
 };

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

@@ -13,7 +13,7 @@ const colors = {
 
 export const InputContainer = styled.View<{ isText?: boolean }>`
   flex-direction: column;
-  padding: 12px 16px;
+  padding: 8px 16px 4px 16px;
   background-color: ${colors.white};
   z-index: 100;
   width: 100%;

package/src/context/xmppProvider.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { DeviceEventEmitter } from 'react-native';
+import { AppState, DeviceEventEmitter } from 'react-native';
 import XmppClient from '../networking/xmppClient';
 import {
   IConfig,
@@ -28,6 +28,7 @@ import {
 } from '../helpers/resolveInitBeforeLoadUser';
 import { ensureScopedChatCache } from '../helpers/ensureScopedChatCache';
 import { getRooms as prefetchRoomsViaRest } from '../networking/api-requests/rooms.api';
+import { allRoomPresences } from '../networking/xmpp/allRoomPresences.xmpp';
 import { store } from '../roomStore';
 import { logout, setStoreClient } from '../roomStore/chatSettingsSlice';
 import { setLogoutState } from '../roomStore/roomsSlice';
@@ -194,7 +195,12 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
         devPushLog('rn', `initBeforeLoad: user resolved (${resolved.xmppUsername})`);
         applyResolvedUserToStore(resolved);
 
-        prefetchRoomsViaRest().catch(() => undefined);
+        // Kick off REST /chats/my; allRoomPresences below needs the
+        // room list to be in redux, otherwise it joins 0 MUCs and the
+        // user receives zero realtime messages until they manually tap
+        // into each room. Track the promise so we can await it before
+        // joining presences.
+        const restRoomsPromise = prefetchRoomsViaRest().catch(() => undefined);
 
         const c = await initializeClient(
           resolved.xmppUsername!,
@@ -220,6 +226,20 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
         } catch (e) {
           devPushLog('warn', 'initBeforeLoad: privateStore failed', e);
         }
+        // Wait for REST /chats/my to populate the room list before
+        // joining MUC presences. Race-skipping this step left the user
+        // subscribed to 0 rooms and no realtime delivery.
+        try {
+          await restRoomsPromise;
+        } catch {}
+        try {
+          const roomCount = Object.keys(store.getState().rooms.rooms || {}).length;
+          devPushLog('xmpp', `initBeforeLoad: joining ${roomCount} rooms via presence…`);
+          await allRoomPresences((c as any).client);
+          devPushLog('xmpp', 'initBeforeLoad: allRoomPresences ok');
+        } catch (e) {
+          devPushLog('warn', 'initBeforeLoad: allRoomPresences failed', e);
+        }
 
         store.dispatch(setStoreClient(c));
         completedBootstrapKeyRef.current = key;
@@ -312,6 +332,35 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
     }
   }, [client, client?.status, reconnectAttempts, initializeClient]);
 
+  // -----------------------------------------------------------
+  // AppState → background: flush lastViewedTimestamp into the
+  // server's private store so the next session shows the correct
+  // unread state. Without this, leaving the app open in chat and
+  // killing it (or just switching apps) never persists "I read up to
+  // here" — the next launch reads the stale marker and over-counts
+  // unread.
+  //
+  // Cheap to run on every transition out of `active`: a no-op when
+  // there is no client, when nothing has moved past the existing
+  // entry, or when this build has `disableLastRead`.
+  // -----------------------------------------------------------
+  useEffect(() => {
+    const sub = AppState.addEventListener('change', (next) => {
+      if (next === 'active') {return;}
+      const c = client;
+      if (!c) {return;}
+      const state = store.getState();
+      const rooms = state.rooms?.rooms;
+      const activeRoomJID = state.rooms?.activeRoomJID || null;
+      // Fire-and-forget — we're going to the background and don't
+      // care about the resolution path.
+      c.flushLastViewedToPrivateStoreStanza(rooms, { activeRoomJID }).catch(
+        () => {}
+      );
+    });
+    return () => sub.remove();
+  }, [client]);
+
   // -----------------------------------------------------------
   // Logout event listener (RN equivalent of window event)
   // -----------------------------------------------------------

package/src/helpers/constants/MODAL_COMPONENTS.tsx

@@ -0,0 +1,35 @@
+// Modal-id → component registry. Split out from MODAL_TYPES.ts to
+// break the require cycle between the type constants and the modal
+// components that reference them. The only caller is Modal/Modal.tsx
+// — every other consumer just needs MODAL_TYPES.
+
+import React from 'react';
+import { MODAL_TYPES } from './MODAL_TYPES';
+import ChatProfileModal from '../../components/Modals/ChatProfileModal/ChatProfileModal';
+import FilePreviewModal from '../../components/Modals/FilePreviewModal/FilePreviewModal';
+import NewChatModal from '../../components/Modals/NewChatModal/NewChatModal';
+import BlockedUsersModal from '../../components/Modals/SettingsModals/BlockedUsers/BlockedUsersModal';
+import DocumentSharesModal from '../../components/Modals/SettingsModals/DocumentShares/DocumentSharesModal';
+import ManageDataModal from '../../components/Modals/SettingsModals/ManageDataModal/ManageDataModal';
+import ProfileSharesModal from '../../components/Modals/SettingsModals/ProfileShares/ProfileShares';
+import ReferralsModal from '../../components/Modals/SettingsModals/Referrals/Referrals';
+import VisibilityModal from '../../components/Modals/SettingsModals/Visibility/VisibilityModal';
+import UserProfileModal from '../../components/Modals/UserProfileModal/UserProfileModal';
+import UserSettingsModal from '../../components/Modals/UserSettingsModal/UserSettingsModal';
+
+export const MODAL_COMPONENTS: Record<
+  string,
+  React.FC<{ handleCloseModal: () => void }>
+> = {
+  [MODAL_TYPES.SETTINGS]: UserSettingsModal,
+  [MODAL_TYPES.NEW_CHAT]: NewChatModal,
+  [MODAL_TYPES.PROFILE]: UserProfileModal,
+  [MODAL_TYPES.CHAT_PROFILE]: ChatProfileModal,
+  [MODAL_TYPES.MANAGE_DATA]: ManageDataModal,
+  [MODAL_TYPES.VISIBILITY]: VisibilityModal,
+  [MODAL_TYPES.REFERRALS]: ReferralsModal,
+  [MODAL_TYPES.DOCUMENT_SHARES]: DocumentSharesModal,
+  [MODAL_TYPES.PROFILE_SHARES]: ProfileSharesModal,
+  [MODAL_TYPES.BLOCKED_USERS]: BlockedUsersModal,
+  [MODAL_TYPES.FILE_PREVIEW]: FilePreviewModal,
+};

package/src/helpers/constants/MODAL_TYPES.ts

@@ -1,14 +1,13 @@
-import ChatProfileModal from '../../components/Modals/ChatProfileModal/ChatProfileModal';
-import FilePreviewModal from '../../components/Modals/FilePreviewModal/FilePreviewModal';
-import NewChatModal from '../../components/Modals/NewChatModal/NewChatModal';
-import BlockedUsersModal from '../../components/Modals/SettingsModals/BlockedUsers/BlockedUsersModal';
-import DocumentSharesModal from '../../components/Modals/SettingsModals/DocumentShares/DocumentSharesModal';
-import ManageDataModal from '../../components/Modals/SettingsModals/ManageDataModal/ManageDataModal';
-import ProfileSharesModal from '../../components/Modals/SettingsModals/ProfileShares/ProfileShares';
-import ReferralsModal from '../../components/Modals/SettingsModals/Referrals/Referrals';
-import VisibilityModal from '../../components/Modals/SettingsModals/Visibility/VisibilityModal';
-import UserProfileModal from '../../components/Modals/UserProfileModal/UserProfileModal';
-import UserSettingsModal from '../../components/Modals/UserSettingsModal/UserSettingsModal';
+// Modal type-id constants only — no React imports.
+//
+// Previously this file also held the `MODAL_COMPONENTS` registry,
+// which imported every modal component. Several of those components
+// (ChatProfileModal, UserSettingsModal) reference MODAL_TYPES.* to
+// dispatch sub-modals — creating a runtime require cycle that Metro
+// surfaced as "Require cycle: MODAL_TYPES.ts -> ChatProfileModal.tsx
+// -> MODAL_TYPES.ts" on app boot. Splitting the registry out into
+// its own module (MODAL_COMPONENTS.tsx) means the modal components
+// only depend on these constants, dissolving the cycle.
 
 export const MODAL_TYPES = {
   SETTINGS: 'settings',
@@ -26,32 +25,4 @@ export const MODAL_TYPES = {
   FILE_PREVIEW: 'file_preview',
 
   NEW_CHAT: 'new_chat',
-
-  // SETTINGS: 'Settings',
-  // PROFILE: 'Profile',
-  // CHAT_PROFILE: 'Chat Profile',
-
-  // MANAGE_DATA: 'Manage Data',
-  // VISIBILITY: 'Visiblility',
-  // PROFILE_SHARES: 'Profile Shares',
-  // DOCUMENT_SHARES: 'Document Shares',
-  // BLOCKED_USERS: 'Blocked Users',
-  // REFERRALS: 'Referrals',
-};
-
-export const MODAL_COMPONENTS: Record<
-  string,
-  React.FC<{ handleCloseModal: () => void }>
-> = {
-  [MODAL_TYPES.SETTINGS]: UserSettingsModal,
-  [MODAL_TYPES.NEW_CHAT]: NewChatModal,
-  [MODAL_TYPES.PROFILE]: UserProfileModal,
-  [MODAL_TYPES.CHAT_PROFILE]: ChatProfileModal,
-  [MODAL_TYPES.MANAGE_DATA]: ManageDataModal,
-  [MODAL_TYPES.VISIBILITY]: VisibilityModal,
-  [MODAL_TYPES.REFERRALS]: ReferralsModal,
-  [MODAL_TYPES.DOCUMENT_SHARES]: DocumentSharesModal,
-  [MODAL_TYPES.PROFILE_SHARES]: ProfileSharesModal,
-  [MODAL_TYPES.BLOCKED_USERS]: BlockedUsersModal,
-  [MODAL_TYPES.FILE_PREVIEW]: FilePreviewModal,
 };

package/src/helpers/historyPreloadScheduler.ts

@@ -160,6 +160,19 @@ export const runHistoryPreloadScheduler = async (
 
     const batch = readyItems.slice(0, Math.max(1, concurrency));
 
+    // Snapshot each room's historyPreloadState BEFORE marking the
+    // batch as 'loading'. Without this snapshot the per-task
+    // `currentRoom.historyPreloadState === 'done'` skip check below
+    // is dead — the dispatch immediately overwrites 'done' with
+    // 'loading', so the task never sees the original value and
+    // always re-fetches.
+    const preBatchPreloadStateByJid = new Map<string, string | undefined>(
+      batch.map((item) => [
+        item.jid,
+        store.getState().rooms.rooms[item.jid]?.historyPreloadState,
+      ])
+    );
+
     store.dispatch(
       applyRoomsPreloadBatch({
         rooms: batch.map((item) => ({
@@ -176,9 +189,10 @@ export const runHistoryPreloadScheduler = async (
 
         const task = (async () => {
           const currentRoom = store.getState().rooms.rooms[item.jid];
+          const preState = preBatchPreloadStateByJid.get(item.jid);
           if (
             !currentRoom ||
-            (!forceReload && currentRoom.historyPreloadState === 'done')
+            (!forceReload && preState === 'done')
           ) {
             store.dispatch(
               applyRoomsPreloadBatch({