@ethora/chat-component-rn 26.5.7 → 26.5.11

package/src/components/ContextMenu/ContextMenuComponents.tsx

@@ -71,10 +71,15 @@ export const Overlay = styled.Pressable`
   background: transparent;
 `;
 
+// Horizontal hairline divider. Was `border: 1px solid …` — a border on
+// ALL FOUR sides of an auto-sized View. iOS collapsed it to ~nothing, but
+// Android rendered the side borders too, so the menu showed ugly little
+// boxes / uneven gaps between items. A single full-width 1px line renders
+// identically on both platforms.
 export const Delimeter = styled.View`
-  border: 1px solid #0052cd0d;
+  height: 1px;
+  align-self: stretch;
+  background-color: #0052cd1f;
+  margin-top: 4px;
+  margin-bottom: 4px;
 `;
-
-// export const Delimeter = styled.View`
-//   border: 1px solid var(--colors-background-bg-prymary-5, #0052cd0d);
-// `;

package/src/components/MainComponents/ChatHeader.tsx

@@ -65,6 +65,14 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
     config?.headerChatMenu && config?.headerChatMenu();
   };
 
+  // Shared open-chat-info handler used by BOTH the outer touchable row
+  // and the avatar's own press (the avatar otherwise absorbs taps without
+  // bubbling — see the comment on ProfileImagePlaceholder below).
+  const openChatInfo = useCallback(
+    () => dispatch(setActiveModal(MODAL_TYPES.CHAT_PROFILE)),
+    [dispatch]
+  );
+
   return (
     <>
       <ChatContainerHeader>
@@ -85,11 +93,14 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
               onPress={handleHeaderChatMenu}
             />
           </View>
-        ) : (
-          // Reserve the slot so the title stays centered relative to
-          // the right-hand actions even when the icon is hidden.
-          <View style={styles.leftContainer} />
-        )}
+        ) : null
+        /* Don't reserve the 15%-wide leftContainer when both the back
+         * button is absent AND the burger icon is hidden — the empty
+         * slot used to steal width from the title row, clipping the chat
+         * name. Customer-reported #15. The right action area still fills
+         * its own slot, so the title now starts at the left edge as
+         * intended by `disableChatHeaderBurgerMenuIcon`. */
+        }
         <CenterContainer
           rightSpace={config?.disableRoomConfig}
           leftSpace={!!config?.headerChatMenu}
@@ -102,17 +113,37 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
             />
           )}
           <ChatContainerHeaderBoxInfo
-            onPress={() => dispatch(setActiveModal(MODAL_TYPES.CHAT_PROFILE))}
-            disabled={config?.disableProfilesInteractions}
+            onPress={openChatInfo}
+            // Gates the entry to the CHAT-INFO modal (room name, members,
+            // settings) via the dedicated `disableChatInfo.disableChatHeaderMenu`
+            // flag. Previously wired to `disableProfilesInteractions`, which
+            // is for USER-profile popups (the in-bubble avatar tap, see
+            // Message.tsx) — wrong semantic gate, and it meant a consumer
+            // who wanted to hide user profiles also lost their entry to
+            // the chat info screen.
+            disabled={config?.disableChatInfo?.disableChatHeaderMenu}
           >
-            <View>
-              <ProfileImagePlaceholder
-                name={currentRoom?.title || currentRoom?.name}
-                size={40}
-                icon={currentRoom?.icon}
-                active={!config?.disableProfilesInteractions || true}
-              />
-            </View>
+            {/* No wrapping <View> here: ProfileImagePlaceholder renders
+              * its avatar as a TouchableOpacity (AvatarCircle) that
+              * INTERCEPTS taps even when its own onPress is undefined —
+              * so without forwarding a press handler, tapping the chat
+              * avatar did nothing (clicks on the name worked because
+              * those bubble up to the outer TouchableOpacity). Pass
+              * `click` so the avatar fires the same openChatInfo
+              * dispatch; the surrounding text + the gap between avatar
+              * and text continue to be handled by the outer
+              * ChatContainerHeaderBoxInfo. */}
+            <ProfileImagePlaceholder
+              name={currentRoom?.title || currentRoom?.name}
+              size={40}
+              icon={currentRoom?.icon}
+              active={!config?.disableChatInfo?.disableChatHeaderMenu}
+              click={
+                config?.disableChatInfo?.disableChatHeaderMenu
+                  ? undefined
+                  : { isClick: true, onPress: openChatInfo }
+              }
+            />
             <ChatContainerHeaderInfo>
               <ChatContainerHeaderLabel numberOfLines={1} ellipsizeMode="tail">
                 {currentRoom?.title || currentRoom?.name}

package/src/components/MainComponents/ChatRoom.tsx

@@ -6,9 +6,11 @@ import { useDispatch } from 'react-redux';
 import MessageList from './MessageList';
 import SendInput from '../styled/SendInput';
 import {
+  clearVisibleRoom,
   deleteRoomMessage,
   setEditAction,
   setLastViewedTimestamp,
+  setVisibleRoom,
 } from '../../roomStore/roomsSlice';
 import Loader from '../styled/Loader';
 import { useXmppClient } from '../../context/xmppProvider';
@@ -36,6 +38,12 @@ import {
 } from 'react-native';
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import useComposing from '../../hooks/useComposing';
+import { store } from '../../roomStore';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  getInputDockPaddingBottom,
+  getKeyboardVerticalOffset,
+} from '../../helpers/keyboardLayout';
 
 interface ChatRoomProps {
   CustomMessageComponent?: any;
@@ -59,6 +67,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
   }) => {
     const { client } = useXmppClient();
     const dispatch = useDispatch();
+    const insets = useSafeAreaInsets();
 
     const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
 
@@ -99,15 +108,9 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
         if (!activeRoomJID) {
           return;
         }
-        dispatch(
-          setLastViewedTimestamp({
-            chatJID: activeRoomJID,
-            timestamp: 0,
-          }),
-        );
         sendMs(message, activeRoomJID);
       },
-      [activeRoomJID],
+      [activeRoomJID, sendMs]
     );
 
     const sendMedia = useCallback(
@@ -151,41 +154,47 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       dispatch(setEditAction({ isEdit: false }));
     };
 
+    // Read the latest client through a ref so this effect's setup phase
+    // does NOT re-run on every `client` identity change. With `client` in
+    // the deps array, a reconnect or any provider re-render would re-fire
+    // setup → `dispatch(setVisibleRoom(...))` ~one tick after the host
+    // cleared visibility via the `isVisible` prop (XmppProvider) — racing
+    // and clobbering it, so `useUnread()` reported 0 in tab-mounted hosts.
+    // Customer-reported #19. The cleanup still needs the live client for
+    // flushLastViewedToPrivateStoreStanza, which is what the ref provides.
+    const clientRef = useRef(client);
+    useEffect(() => {
+      clientRef.current = client;
+    }, [client]);
+
     useEffect(() => {
       if (!activeRoomJID) {
         return;
       }
 
-      dispatch(
-        setLastViewedTimestamp({
-          chatJID: activeRoomJID,
-          timestamp: 0,
-        }),
-      );
+      dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
       setIsLoadingMore(false);
       return () => {
-        if (client) {
-          client.actionSetTimestampToPrivateStoreStanza(
-            activeRoomJID,
-            new Date().getTime(),
-            Object.keys(roomsList),
-          );
-        }
+        const timestamp = new Date().getTime();
         dispatch(
           setLastViewedTimestamp({
             chatJID: activeRoomJID,
-            timestamp: new Date().getTime(),
-          }),
-        );
-        dispatch(
-          deleteRoomMessage({
-            roomJID: activeRoomJID,
-            messageId: 'delimiter-new',
+            timestamp,
           }),
         );
+        dispatch(clearVisibleRoom());
+        const liveClient = clientRef.current;
+        if (liveClient) {
+          liveClient
+            .flushLastViewedToPrivateStoreStanza(store.getState().rooms?.rooms, {
+              visibleRoomJID: activeRoomJID,
+            })
+            .catch(() => {});
+        }
+        dispatch(deleteRoomMessage({ roomJID: activeRoomJID, messageId: 'delimiter-new' }));
         setIsLoadingMore(false);
       };
-    }, [activeRoomJID]);
+    }, [activeRoomJID, dispatch]);
 
     // hooks useEffects
     // useRoomUrl(activeRoomJID || "", roomsList, config);
@@ -210,16 +219,34 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       return <ChooseChatMessage />;
     }
 
+    const keyboardVerticalOffset = getKeyboardVerticalOffset({
+      platform: Platform.OS,
+      configuredOffset: configWithEventHandlers?.keyboardVerticalOffset ?? 0,
+      bottomInset: insets.bottom,
+    });
+    const inputDockPaddingBottom = getInputDockPaddingBottom({
+      platform: Platform.OS,
+      bottomInset: insets.bottom,
+    });
+
     return (
       <KeyboardAvoidingView
         style={{ flex: 1 }}
-        // Android: rely on the manifest's `adjustResize` (default). KAV
-        // behavior="height" on top of adjustResize double-handles the
-        // resize and causes a visible message-list flicker every time
-        // the keyboard opens (bug #6). `undefined` makes KAV a no-op on
-        // Android — the system resize alone shows the input correctly.
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={configWithEventHandlers?.keyboardVerticalOffset ?? 0}
+        // Bug #6 history:
+        //  - Original code: behavior="height" on Android — caused
+        //    flicker because Android's adjustResize already shrinks
+        //    the window; KAV resizing on top of that double-resized
+        //    every keyboard open.
+        //  - 26.5.6 attempt: behavior={undefined} on Android — input
+        //    got completely blocked because some host apps disable
+        //    adjustResize via the activity's softInputMode.
+        //  - 26.5.8 fix: behavior="padding" on BOTH platforms. Padding
+        //    adds bottom-padding equal to the keyboard height without
+        //    changing the layout's height prop — no double-resize on
+        //    Android, no flicker, and the input is always lifted above
+        //    the keyboard regardless of the host's softInputMode.
+        behavior="padding"
+        keyboardVerticalOffset={keyboardVerticalOffset}
       >
         <ChatContainer
           style={
@@ -342,37 +369,39 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
           {editAction && editAction.isEdit && (
             <EditWrapper text={editAction.text || ''} onClose={onCloseEdit} />
           )}
-          {CustomInputComponent ? (
-            <CustomInputComponent
-              sendMessage={
-                editAction && editAction.isEdit ? sendEditMessage : sendMessage
-              }
-              sendMedia={sendMedia}
-              config={configWithEventHandlers}
-              isLoading={loading}
-              onFocus={sendStartComposing}
-              onBlur={sendEndComposing}
-              isMessageProcessing={isLastMessageFromUserAndProcessing(
-                activeRoomJID,
-              )}
-              editMessage={editAction && editAction.text}
-            />
-          ) : (
-            <SendInput
-              editMessage={editAction && editAction.text}
-              sendMessage={
-                editAction && editAction.isEdit ? sendEditMessage : sendMessage
-              }
-              sendMedia={sendMedia}
-              config={configWithEventHandlers}
-              isLoading={loading}
-              onFocus={sendStartComposing}
-              onBlur={sendEndComposing}
-              isMessageProcessing={isLastMessageFromUserAndProcessing(
-                activeRoomJID,
-              )}
-            />
-          )}
+          <View style={{ paddingBottom: inputDockPaddingBottom, backgroundColor: '#fff' }}>
+            {CustomInputComponent ? (
+              <CustomInputComponent
+                sendMessage={
+                  editAction && editAction.isEdit ? sendEditMessage : sendMessage
+                }
+                sendMedia={sendMedia}
+                config={configWithEventHandlers}
+                isLoading={loading}
+                onFocus={sendStartComposing}
+                onBlur={sendEndComposing}
+                isMessageProcessing={isLastMessageFromUserAndProcessing(
+                  activeRoomJID,
+                )}
+                editMessage={editAction && editAction.text}
+              />
+            ) : (
+              <SendInput
+                editMessage={editAction && editAction.text}
+                sendMessage={
+                  editAction && editAction.isEdit ? sendEditMessage : sendMessage
+                }
+                sendMedia={sendMedia}
+                config={configWithEventHandlers}
+                isLoading={loading}
+                onFocus={sendStartComposing}
+                onBlur={sendEndComposing}
+                isMessageProcessing={isLastMessageFromUserAndProcessing(
+                  activeRoomJID,
+                )}
+              />
+            )}
+          </View>
 
           {configWithEventHandlers?.customTypingIndicator?.enabled &&
             (configWithEventHandlers.customTypingIndicator.position ===

package/src/components/MainComponents/ChatWrapper.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../roomStore/chatSettingsSlice';
 import {ChatWrapperBox} from '../styled/ChatWrapperBox';
 import {Overlay, StyledModal} from '../styled/MediaModal';
+import ConnectionBanner from './ConnectionBanner';
 import {Message} from '../MessageBubble/Message';
 import {IConfig, IRoom, MessageProps, ModalType, User} from '../../types/types';
 import {useXmppClient} from '../../context/xmppProvider';
@@ -30,6 +31,8 @@ import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
 import {useChatSettingState} from '../../hooks/useChatSettingState';
 import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
+import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
+import {InteractionsOverlayProvider} from '../MessageBubble/InteractionsOverlay';
 
 interface ChatWrapperProps {
   token?: string;
@@ -126,7 +129,11 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
   useEffect(() => {
     if (roomJID) {
-      dispatch(setCurrentRoom({roomJID: roomJID}));
+      dispatch(
+        setCurrentRoom({
+          roomJID: normalizeRoomJid(roomJID, config?.xmppSettings?.conference),
+        }),
+      );
     }
 
     const initXmmpClient = async () => {
@@ -186,45 +193,79 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
         if (!client && !storedClient) {
           devPushLog('rn', 'ChatWrapper: initing xmpp client (legacy path)');
-          await initializeClient(
-            user.xmppUsername || user.defaultWallet?.walletAddress,
-            user.xmppPassword,
-            config?.xmppSettings
-          ).then(c => {
-            c.getRoomsStanza()
-              .then(() => {
-                c.getChatsPrivateStoreRequestStanza();
-                dispatch(setStoreClient(c));
-                setClient(c);
-              })
-              .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
-          });
+          // The outer `.then(c => {...})` used to lack a `.catch()` —
+          // if initializeClient rejected (network / SASL), the outer
+          // try/catch couldn't see it because the rejection happens in
+          // the .then handler, not in the awaited promise itself.
+          // Convert to await + try/catch.
+          try {
+            const c = await initializeClient(
+              user.xmppUsername || user.defaultWallet?.walletAddress,
+              user.xmppPassword,
+              config?.xmppSettings
+            );
+            try {
+              await c.getRoomsStanza();
+              c.getChatsPrivateStoreRequestStanza().catch((err: unknown) =>
+                console.warn('getChatsPrivateStoreRequestStanza failed', err)
+              );
+              dispatch(setStoreClient(c));
+              setClient(c);
+            } catch (err) {
+              console.warn('getRoomsStanza failed', err);
+            }
+          } catch (err) {
+            devPushLog('warn', 'initializeClient failed (legacy path)', err);
+          }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {refresh();}
+          if (config?.refreshTokens?.enabled) {
+            // refresh() is fire-and-forget but rejects on bad
+            // refreshToken / network — surface via .catch instead of
+            // leaving the rejection unhandled (was bug #4, id:2).
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         } else if (storedClient) {
           devPushLog('rn', 'ChatWrapper: reusing storedClient');
           setClient(storedClient);
           if (!activeRoomJID) {
             storedClient.getRoomsStanza()
               .then(() => {
-                storedClient.getChatsPrivateStoreRequestStanza();
+                storedClient.getChatsPrivateStoreRequestStanza().catch(
+                  (err: unknown) =>
+                    console.warn('getChatsPrivateStoreRequestStanza failed', err)
+                );
               })
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {refresh();}
+          if (config?.refreshTokens?.enabled) {
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         } else if (client) {
           devPushLog('rn', 'ChatWrapper: reusing provider client');
           if (!activeRoomJID) {
             client.getRoomsStanza()
               .then(() => {
-                client.getChatsPrivateStoreRequestStanza();
+                client.getChatsPrivateStoreRequestStanza().catch(
+                  (err: unknown) =>
+                    console.warn('getChatsPrivateStoreRequestStanza failed', err)
+                );
               })
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
-          client.getChatsPrivateStoreRequestStanza();
+          client.getChatsPrivateStoreRequestStanza().catch((err: unknown) =>
+            console.warn('getChatsPrivateStoreRequestStanza failed', err)
+          );
           setInited(true);
-          if (config?.refreshTokens?.enabled) {refresh();}
+          if (config?.refreshTokens?.enabled) {
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         }
 
         dispatch(setIsLoading({loading: false}));
@@ -250,6 +291,38 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     config?.initBeforeLoad,
   ]);
 
+  // Cache-first display (initBeforeLoad). The main effect above only marks
+  // the chat `inited` once the provider bootstrap reaches 'ready' — which
+  // waits on the cold XMPP connect. On re-entry that left the user staring
+  // at a loader while fully-cached rooms/messages sat in redux-persist
+  // ("pulls a new connection for 100 years"). Here we render the cached
+  // content the instant rehydration lands; the live client gets wired by
+  // the main effect when the connect completes (send/loadMore activate
+  // then). Mirrors web showing cached rooms immediately + refreshing in
+  // the background.
+  useEffect(() => {
+    if (!config?.initBeforeLoad || initMode !== 'provider') {return;}
+    if (isInited || showModal) {return;}
+    if (providerBootstrapStatus === 'failed') {return;}
+    const haveCachedRooms = !!rooms && Object.keys(rooms).length > 0;
+    const haveUser =
+      !!user?.xmppUsername || !!user?.defaultWallet?.walletAddress;
+    if (haveCachedRooms && haveUser) {
+      devPushLog('rn', 'ChatWrapper: cache-first — showing persisted rooms while provider connects');
+      setShowModal(false);
+      setInited(true);
+    }
+  }, [
+    config?.initBeforeLoad,
+    initMode,
+    isInited,
+    showModal,
+    providerBootstrapStatus,
+    rooms,
+    user?.xmppUsername,
+    user?.defaultWallet?.walletAddress,
+  ]);
+
   // Skip the legacy email/password LoginForm entirely when XmppProvider
   // is driving auth via initBeforeLoad — the bootstrap effect will
   // populate the user shortly. Showing LoginForm here causes a flicker
@@ -270,7 +343,13 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
   return (
     <>
-      {showModal && (
+      {/* Connection/bootstrap error UI. For patient-facing apps the
+          full-screen dark overlay reads as a crash, so
+          `disableConnectionErrorOverlay` swaps it for a subtle inline
+          "Connection lost. Retrying…" banner (and reconnect + re-join now
+          recover automatically). */}
+      {showModal && config?.disableConnectionErrorOverlay && <ConnectionBanner />}
+      {showModal && !config?.disableConnectionErrorOverlay && (
         <Overlay>
           <View
             style={{
@@ -320,28 +399,34 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             style={{
               ...MainComponentStyles,
             }}>
-            {showRoomList ? (
-              <RoomList
-                chats={Object.values(rooms)}
-                onRoomClick={handleChangeChat}
-              />
-            ) : (
-              <ChatWrapperBox
-                style={{
-                  ...MainComponentStyles,
-                }}>
-                <ChatRoom
-                  CustomMessageComponent={CustomMessageComponent || Message}
-                  handleBackClick={
-                    roomJID || config?.disableRooms
-                      ? undefined
-                      : () => {
-                          dispatch(setCurrentRoom({ roomJID: '' }));
-                        }
-                  }
+            {/* Host the message context menu in-tree (not a RN Modal) so
+                opening it doesn't steal focus / dismiss the keyboard on
+                Android. Wraps only the chat area — the global Modal /
+                ModalWrapper below stay above it. */}
+            <InteractionsOverlayProvider>
+              {showRoomList ? (
+                <RoomList
+                  chats={Object.values(rooms)}
+                  onRoomClick={handleChangeChat}
                 />
-              </ChatWrapperBox>
-            )}
+              ) : (
+                <ChatWrapperBox
+                  style={{
+                    ...MainComponentStyles,
+                  }}>
+                  <ChatRoom
+                    CustomMessageComponent={CustomMessageComponent || Message}
+                    handleBackClick={
+                      roomJID || config?.disableRooms
+                        ? undefined
+                        : () => {
+                            dispatch(setCurrentRoom({ roomJID: '' }));
+                          }
+                    }
+                  />
+                </ChatWrapperBox>
+              )}
+            </InteractionsOverlayProvider>
             <Modal
               modal={activeModal}
               setOpenModal={(value?: ModalType) =>

package/src/components/MainComponents/MediaMessage.tsx

@@ -5,13 +5,14 @@ import CustomMessageImage from '../styled/MessageImage';
 import CustomMessageVideo from '../styled/VideoMessage';
 import AudioMessage from '../styled/AudioMessage';
 import { Text } from 'react-native';
-import { deriveDisplayFilename } from '../../helpers/mimeToExtension';
+import { deriveDisplayFilename, isLikelyAudio } from '../../helpers/mimeToExtension';
 
 interface MediaMessageProps {
   mimeType?: string;
   message?: IMessage;
   location?: string;
   messageText?: string;
+  isUser: boolean;
 }
 
 const MediaMessage: React.FC<MediaMessageProps> = ({
@@ -19,6 +20,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
   location,
   messageText,
   message,
+  isUser,
 }) => {
   if (mimeType) {
     const displayName = deriveDisplayFilename({
@@ -48,19 +50,23 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         return <AudioMessage src={location || ''} />;
       }
       default: {
-        // Many backends tag binary payloads (PDFs, DOCX, archives) as
-        // application/octet-stream; sniff the filename extension for the
-        // legitimate audio case before falling through to FileDownload.
-        if (mimeType.includes('application/octet-stream')) {
-          if (/\.(mp3|m4a|wav|aac|ogg|flac)$/i.test(displayName)) {
-            return <AudioMessage src={location || ''} />;
-          }
+        // Some senders (notably the web app's voice-message uploader)
+        // ship audio as `application/octet-stream` with no audio file
+        // extension. `isLikelyAudio` recognises those via the URL path,
+        // filename, or voice-message naming hints (voicemail-,
+        // voice-note-, recording-, …) so we still render the AudioMessage
+        // player instead of falling through to the generic FileDownload
+        // card (where the voicemail rendered as a broken `.bin`
+        // attachment). Customer-reported #9 voicemail fix.
+        if (isLikelyAudio(mimeType, displayName, location)) {
+          return <AudioMessage src={location || ''} />;
         }
         return (
           <FileDownload
             fileURL={location ? location : ''}
             fileName={displayName}
             mimetype={mimeType}
+            isUser={isUser}
           />
         );
       }

package/src/components/MainComponents/MessageContainer.tsx

@@ -73,7 +73,7 @@ export const MessageContainer: FC<MessageContainerProps> = ({
     );
   }
 
-  if (message?.id === 'delimiter-new') {
+  if (String(message?.id || '').startsWith('delimiter-new')) {
     return CustomNewMessageLabel ? (
       <CustomNewMessageLabel color={config?.colors?.primary} />
     ) : (
@@ -85,7 +85,9 @@ export const MessageContainer: FC<MessageContainerProps> = ({
 
   return (
     <View key={message.id}>
-      {showDateLabel && !activeMessage && message.id !== 'delimiter-new' ? (
+      {showDateLabel &&
+      !activeMessage &&
+      !String(message.id || '').startsWith('delimiter-new') ? (
         CustomDaySeparator ? (
           <CustomDaySeparator
             date={messageDate}