@ethora/chat-component-rn 26.8.1 → 26.8.2

package/src/components/MainComponents/ChatRoom.tsx

@@ -6,10 +6,12 @@ import { useDispatch } from 'react-redux';
 import MessageList from './MessageList';
 import SendInput from '../styled/SendInput';
 import {
+  clearReadBoundary,
   clearVisibleRoom,
   deleteRoomMessage,
   setEditAction,
   setLastViewedTimestamp,
+  setReadBoundary,
   setVisibleRoom,
 } from '../../roomStore/roomsSlice';
 import Loader from '../styled/Loader';
@@ -20,6 +22,7 @@ import NewChatModal from '../Modals/NewChatModal/NewChatModal';
 import { EditWrapper } from './EditWrapper';
 import { EmptyChatIllustration } from '../../assets/EmptyChatIllustration';
 import { getIconColor } from '../../helpers/getIconColor';
+import { getChatBackgroundColor } from '../../helpers/getChatBackground';
 import { ChooseChatMessage } from './ChooseChatMessage';
 import { useRoomUrl } from '../../hooks/useRoomUrl';
 import { useSendMessage } from '../../hooks/useSendMessage';
@@ -27,10 +30,14 @@ import { IConfig } from '../../types/models/config.model';
 import { useRoomInitialization } from '../../hooks/useRoomInitialization';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { isOwnMessage } from '../../helpers/isOwnMessage';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 // import {PanGestureHandler} from 'react-native-gesture-handler';
 import { FlatList } from 'react-native';
 import {
+  AppState,
+  AppStateStatus,
+  Keyboard,
   Platform,
   TouchableWithoutFeedback,
   View,
@@ -42,6 +49,10 @@ import {
 } from 'react-native-keyboard-controller';
 import useComposing from '../../hooks/useComposing';
 import { store } from '../../roomStore';
+import {
+  getFlushBoundaryTs,
+  getReadMarkerTimestamp,
+} from '../../helpers/getServerReadTimestamp';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   getInputDockPaddingBottom,
@@ -106,6 +117,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,31 +220,103 @@ 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, and mirrored into redux
+    // (`rooms.readBoundaries`) rather than kept only in a local ref - it
+    // is the single source of truth every "leaving this room" path
+    // consults (xmppProvider's AppState background handler, its
+    // `isVisible=false` handler, the live `advance()` effect, and
+    // `useChatRoomFocus`'s `leaveRoom`), not just this component's own
+    // unmount cleanup below. Without a boundary, leaving a room (or
+    // backgrounding) while scrolled up stamped `now()` (bug #33) or,
+    // after the #38 fix, the newest acked message regardless of scroll
+    // position (bug #42) - both silently discard genuinely-unread
+    // messages.
+    //
+    // MessageList reports the boundary from onScroll, which fires on
+    // every frame of a drag (the "back at the bottom" branch re-reports
+    // `null` each time). Mirror only actual CHANGES into redux: an
+    // unconditional dispatch per scroll frame would run the whole
+    // middleware chain and, worse, reset persistenceMiddleware's 200 ms
+    // debounce on every frame, starving the persisted write for as long
+    // as the user keeps scrolling.
+    const lastBoundarySentRef = useRef<number | null>(null);
+    const handleReadBoundaryChange = useCallback((boundaryTs: number | null) => {
+      if (!activeRoomJID) {
+        return;
+      }
+      const next = boundaryTs && boundaryTs > 0 ? boundaryTs : null;
+      if (lastBoundarySentRef.current === next) {
+        return;
+      }
+      lastBoundarySentRef.current = next;
+      dispatch(setReadBoundary({ jid: activeRoomJID, ts: next }));
+    }, [activeRoomJID, dispatch]);
+
     useEffect(() => {
       if (!activeRoomJID) {
         return;
       }
 
+      lastBoundarySentRef.current = null;
+      dispatch(setReadBoundary({ jid: activeRoomJID, ts: null }));
       dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
       setIsLoadingMore(false);
       return () => {
-        const timestamp = new Date().getTime();
-        dispatch(
-          setLastViewedTimestamp({
-            chatJID: activeRoomJID,
-            timestamp,
-          }),
+        const state = store.getState();
+        const rooms = state.rooms?.rooms;
+        const heapState = state.roomHeapSlice;
+        const boundaryTs = state.rooms?.readBoundaries?.[activeRoomJID] ?? null;
+        // getReadMarkerTimestamp honours the boundary (the newest message
+        // the user actually reached) when one is set, and otherwise falls
+        // back to the newest server-acked message - never the device
+        // clock: a fast device clock would write a future marker that the
+        // forward-only private-store merge could never correct (bug #38).
+        const timestamp = getReadMarkerTimestamp(
+          rooms?.[activeRoomJID],
+          heapState,
+          boundaryTs,
         );
+        if (timestamp > 0) {
+          dispatch(
+            setLastViewedTimestamp({
+              chatJID: activeRoomJID,
+              timestamp,
+            }),
+          );
+        }
         dispatch(clearVisibleRoom());
         const liveClient = clientRef.current;
         if (liveClient) {
           liveClient
-            .flushLastViewedToPrivateStoreStanza(store.getState().rooms?.rooms, {
+            .flushLastViewedToPrivateStoreStanza(rooms, {
               visibleRoomJID: activeRoomJID,
+              // Carry the same boundary to the SERVER marker. Without
+              // this the flush defaults to "everything" 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.
+              // Clamped through the same helper as the local stamp -
+              // an unclamped boundary would bypass the newest-acked
+              // ceiling on the one path where a bad value is permanent
+              // (the private-store merge is forward-only, bug #38).
+              visibleRoomTs: getFlushBoundaryTs(
+                rooms?.[activeRoomJID],
+                heapState,
+                boundaryTs,
+              ),
             })
             .catch(() => {});
         }
         dispatch(deleteRoomMessage({ roomJID: activeRoomJID, messageId: 'delimiter-new' }));
+        // The room is genuinely being left (unmount, or activeRoomJID
+        // changed to a different room) - release the boundary now that
+        // it's been consumed, so a stale value can't leak into the next
+        // time this room becomes visible.
+        dispatch(clearReadBoundary({ jid: activeRoomJID }));
+        lastBoundarySentRef.current = null;
         setIsLoadingMore(false);
       };
     }, [activeRoomJID, dispatch]);
@@ -230,6 +352,8 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     const inputDockPaddingBottom = getInputDockPaddingBottom({
       platform: Platform.OS,
       bottomInset: insets.bottom,
+      configuredPadding: configWithEventHandlers?.inputDockPaddingBottom,
+      hostOwnsLayout: !!configWithEventHandlers?.disableKeyboardAvoidingView,
     });
 
     // Keyboard avoidance is delegated to react-native-keyboard-controller's
@@ -279,7 +403,20 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       ? KeyboardStickyView
       : View;
     const inputDockProps: any = {
-      style: { paddingBottom: inputDockPaddingBottom, backgroundColor: '#fff' },
+      // The dock carries the composer's white surface all the way to the
+      // bottom edge, so it needs the same rounded top and upward shadow —
+      // a square white block behind a rounded composer just hid the corners.
+      style: {
+        paddingBottom: inputDockPaddingBottom,
+        backgroundColor: '#fff',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        shadowColor: '#101828',
+        shadowOffset: { width: 0, height: -4 },
+        shadowOpacity: 0.06,
+        shadowRadius: 12,
+        elevation: 8,
+      },
       ...(stickyInput
         ? { offset: { closed: 0, opened: keyboardVerticalOffset } }
         : {}),
@@ -288,11 +425,15 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     return (
       <KeyboardWrapper {...keyboardWrapperProps}>
         <ChatContainer
-          style={
-            configWithEventHandlers?.chatRoomStyles
-              ? (configWithEventHandlers.chatRoomStyles as import('react-native').ViewStyle)
-              : undefined
-          }
+          // The conversation's own colour, not white: the header's rounded
+          // bottom corners and the composer's rounded top corners reveal
+          // THIS view, so a white parent made both look square.
+          style={[
+            { backgroundColor: getChatBackgroundColor(configWithEventHandlers) },
+            configWithEventHandlers?.chatRoomStyles as
+              | import('react-native').ViewStyle
+              | undefined,
+          ]}
         >
           {!configWithEventHandlers?.disableHeader && (
             <ChatHeader
@@ -331,7 +472,11 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   flex: 1,
                   justifyContent: 'center',
                   alignItems: 'center',
-                  backgroundColor: '#ffffff',
+                  // Empty rooms used to flip to white, which broke the
+                  // header's rounded corners in exactly the same way.
+                  backgroundColor: getChatBackgroundColor(
+                    configWithEventHandlers
+                  ),
                 }}
               >
                 <NoMessagesPlaceholder />
@@ -357,7 +502,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   CustomMessageComponent ? (
                     <CustomMessageComponent
                       message={decorated.message}
-                      isUser={decorated.message.user.id === user.xmppUsername}
+                      isUser={isOwnMessage(decorated.message, user)}
                       isReply={false}
                     />
                   ) : null
@@ -404,6 +549,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 {
@@ -28,17 +28,19 @@ import {
   setIsLoading,
   setLastViewedTimestamp,
 } from '../../roomStore/roomsSlice';
-import {refresh} from '../../networking/apiClient';
+import {refreshAuthTokensQuietly} from '../../networking/authRefresh';
 import RoomList from './RoomList';
 import {StyledLoaderWrapper} from '../styled/StyledComponents';
 import Modal from '../Modals/Modal/Modal';
 import ThreadWrapper from '../Thread/ThreadWrapper';
 import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
 import {useChatSettingState} from '../../hooks/useChatSettingState';
+import { usePendingNotification } from '../../hooks/usePendingNotification';
 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 {
@@ -65,6 +67,8 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     client: storedClient,
   } = useChatSettingState();
 
+  usePendingNotification();
+
   const [isInited, setInited] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -186,6 +190,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(
@@ -195,6 +216,16 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
       );
     }
 
+    // Top-up rotation after the client is up. Deduped inside
+    // `refreshAuthTokensQuietly`, so it can no longer race the 401
+    // interceptor into a second, parallel rotation — which the backend
+    // would read as reuse. Never rejects, hence no `.catch` here.
+    const ensureFreshTokens = () => {
+      if (config?.refreshTokens?.enabled) {
+        refreshAuthTokensQuietly();
+      }
+    };
+
     const initXmmpClient = async () => {
       // Only sync config to redux if we have one — passing `undefined`
       // wipes whatever XmppProvider already set up.
@@ -285,14 +316,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             devPushLog('warn', 'initializeClient failed (legacy path)', err);
           }
           setInited(true);
-          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)
-            );
-          }
+          ensureFreshTokens();
         } else if (storedClient) {
           devPushLog('rn', 'ChatWrapper: reusing storedClient');
           setClient(storedClient);
@@ -307,11 +331,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {
-            refresh().catch((err) =>
-              console.warn('refresh failed', err)
-            );
-          }
+          ensureFreshTokens();
         } else if (client) {
           devPushLog('rn', 'ChatWrapper: reusing provider client');
           if (!activeRoomJID) {
@@ -328,11 +348,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             console.warn('getChatsPrivateStoreRequestStanza failed', err)
           );
           setInited(true);
-          if (config?.refreshTokens?.enabled) {
-            refresh().catch((err) =>
-              console.warn('refresh failed', err)
-            );
-          }
+          ensureFreshTokens();
         }
 
         dispatch(setIsLoading({loading: false}));

package/src/components/MainComponents/LoginWrapper.tsx

@@ -36,6 +36,7 @@ const LoginWrapper: React.FC<LoginWrapperProps> = ({...props}) => {
         ...authData.data.user,
         token: authData.data.token,
         refreshToken: authData.data.refreshToken,
+        fileToken: (authData.data as any).fileToken || '',
       };
     } catch (error) {
       console.error('Login failed:', error);

package/src/components/MainComponents/MediaMessage.tsx

@@ -11,10 +11,13 @@ import {
   Text,
   View,
 } from 'react-native';
-import { deriveDisplayFilename, isLikelyAudio } from '../../helpers/mimeToExtension';
+import { isLikelyAudio } from '../../helpers/mimeToExtension';
+import { getDisplayFileName } from '../../helpers/getDisplayFileName';
 import { FileIcon, PlayIcon } from '../../assets/icons';
 import { defaultMediaDims } from '../../helpers/mediaDimensions';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken } from '../../helpers/secureFileUrl';
 
 interface MediaMessageProps {
   mimeType?: string;
@@ -136,22 +139,26 @@ const PendingMediaMessage: React.FC<{
 
 const MediaMessage: React.FC<MediaMessageProps> = ({
   mimeType,
-  location,
-  messageText,
+  location: rawLocation,
+  messageText: rawMessageText,
   message,
   isUser,
 }) => {
+  const fileToken = useFileToken();
+  const location = appendFileToken(rawLocation, fileToken);
+  const messageText = appendFileToken(rawMessageText, fileToken);
+
   if (mimeType) {
-    const displayName = deriveDisplayFilename({
-      fileName: message?.fileName,
+    const displayName = getDisplayFileName({
       originalName: (message as any)?.originalName,
-      url: location || messageText,
-      mime: mimeType,
+      fileName: message?.fileName,
+      location: rawLocation || rawMessageText,
+      mimetype: mimeType,
     });
     const isAudioPayload = isLikelyAudio(
       mimeType,
       displayName,
-      location,
+      rawLocation,
       {
         duration: (message as any)?.duration,
         waveForm: (message as any)?.waveForm,
@@ -174,7 +181,12 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         return (
           <CustomMessageImage
             fileName={displayName}
+            originalName={(message as any)?.originalName}
+            // Full-size original: opened by the preview modal.
             fileURL={location || messageText || ''}
+            // ...and the thumbnail the bubble actually renders, which is
+            // what the web client shows too.
+            locationPreview={messageText}
             mimetype={mimeType}
           />
         );
@@ -182,7 +194,13 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         return (
           <CustomMessageVideo
             fileName={displayName}
+            originalName={(message as any)?.originalName}
             fileURL={location || ''}
+            // `messageText` is the message's locationPreview — the poster
+            // frame the backend generated for this video. Handing it over
+            // lets the bubble render as a still + play badge instead of
+            // mounting a video surface per row (see VideoMessage).
+            previewURL={messageText}
             mimetype={mimeType}
           />
         );

package/src/components/MainComponents/MessageContainer.tsx

@@ -1,5 +1,6 @@
 import React, { FC, Fragment, useMemo } from 'react';
 import { IConfig, IMessage } from '../../types/types';
+import { isOwnMessage } from '../../helpers/isOwnMessage';
 import DateLabel from '../styled/DateLabel';
 import SystemMessage from './SystemMessage';
 import NewMessageLabel from '../styled/NewMessageLabel';
@@ -46,7 +47,10 @@ export const MessageContainer: FC<MessageContainerProps> = ({
   isReply,
   className,
 }) => {
-  const isUser = message.user.id === walletAddress;
+  // Bug #41: `message.user.id === walletAddress` used to treat two
+  // empty/undefined ids as a match, briefly rendering catch-up messages
+  // from other users as our own. isOwnMessage() never does that.
+  const isUser = isOwnMessage(message, walletAddress);
 
   const messageDate = new Date(message.date);
 

package/src/components/MainComponents/MessageList.tsx

@@ -28,6 +28,8 @@ import Loader from '../styled/Loader';
 import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { getIconColor } from '../../helpers/getIconColor';
+import { getChatBackgroundColor } from '../../helpers/getChatBackground';
+import { isOwnMessage } from '../../helpers/isOwnMessage';
 
 interface MessageListProps<TMessage extends IMessage> {
   CustomMessage?: React.ComponentType<{
@@ -53,6 +55,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 +77,7 @@ const MessageList = <TMessage extends IMessage>({
   loading,
   isReply,
   activeMessage,
+  onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
   const { composing, messages, composingList } = useRoomState(roomJID)
     .room! as IRoom;
@@ -332,6 +344,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 +362,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 +396,7 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
+    onReadBoundaryChange?.(null);
     scrollToBottom();
   };
 
@@ -392,6 +407,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(() => {
@@ -413,7 +430,7 @@ const MessageList = <TMessage extends IMessage>({
     <View
       style={[
         styles.container,
-        { backgroundColor: config?.backgroundChat?.color || '#F3F6FC' },
+        { backgroundColor: getChatBackgroundColor(config) },
       ]}
     >
       <View style={styles.backgroundImageContainer}>{BackgroundImage}</View>
@@ -422,7 +439,7 @@ const MessageList = <TMessage extends IMessage>({
           {CustomMessage && (
             <CustomMessage
               message={activeMessage}
-              isUser={activeMessage.user.id === user.walletAddress}
+              isUser={isOwnMessage(activeMessage, user)}
               isReply={isReply}
             />
           )}
@@ -442,7 +459,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 ? (