@ethora/chat-component-rn 26.7.10 → 26.8.1

package/src/components/MainComponents/ChatRoom.tsx

@@ -6,12 +6,10 @@ 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';
@@ -22,7 +20,6 @@ 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';
@@ -30,14 +27,10 @@ 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,
@@ -49,10 +42,6 @@ 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,
@@ -117,45 +106,6 @@ 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) {
@@ -220,103 +170,31 @@ 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 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,
+        const timestamp = new Date().getTime();
+        dispatch(
+          setLastViewedTimestamp({
+            chatJID: activeRoomJID,
+            timestamp,
+          }),
         );
-        if (timestamp > 0) {
-          dispatch(
-            setLastViewedTimestamp({
-              chatJID: activeRoomJID,
-              timestamp,
-            }),
-          );
-        }
         dispatch(clearVisibleRoom());
         const liveClient = clientRef.current;
         if (liveClient) {
           liveClient
-            .flushLastViewedToPrivateStoreStanza(rooms, {
+            .flushLastViewedToPrivateStoreStanza(store.getState().rooms?.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]);
@@ -352,8 +230,6 @@ 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
@@ -403,20 +279,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       ? KeyboardStickyView
       : View;
     const inputDockProps: any = {
-      // 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,
-      },
+      style: { paddingBottom: inputDockPaddingBottom, backgroundColor: '#fff' },
       ...(stickyInput
         ? { offset: { closed: 0, opened: keyboardVerticalOffset } }
         : {}),
@@ -425,15 +288,11 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     return (
       <KeyboardWrapper {...keyboardWrapperProps}>
         <ChatContainer
-          // 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,
-          ]}
+          style={
+            configWithEventHandlers?.chatRoomStyles
+              ? (configWithEventHandlers.chatRoomStyles as import('react-native').ViewStyle)
+              : undefined
+          }
         >
           {!configWithEventHandlers?.disableHeader && (
             <ChatHeader
@@ -472,11 +331,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   flex: 1,
                   justifyContent: 'center',
                   alignItems: 'center',
-                  // Empty rooms used to flip to white, which broke the
-                  // header's rounded corners in exactly the same way.
-                  backgroundColor: getChatBackgroundColor(
-                    configWithEventHandlers
-                  ),
+                  backgroundColor: '#ffffff',
                 }}
               >
                 <NoMessagesPlaceholder />
@@ -502,7 +357,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   CustomMessageComponent ? (
                     <CustomMessageComponent
                       message={decorated.message}
-                      isUser={isOwnMessage(decorated.message, user)}
+                      isUser={decorated.message.user.id === user.xmppUsername}
                       isReply={false}
                     />
                   ) : null
@@ -549,7 +404,6 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                 config={configWithEventHandlers}
                 loading={isLoadingMore}
                 isReply={false}
-                onReadBoundaryChange={handleReadBoundaryChange}
               />
             )}
           </View>

package/src/components/MainComponents/ChatWrapper.tsx

@@ -1,12 +1,17 @@
-import React, {FC, useEffect, useMemo, useRef, useState} from 'react';
+import React, {FC, useEffect, useMemo, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import ChatRoom from './ChatRoom';
 import {
   setActiveModal,
   setConfig,
   setDeleteModal,
+  setLangSource,
   setStoreClient,
 } from '../../roomStore/chatSettingsSlice';
+import {
+  resolveExternalReaderLocaleLangSource,
+  resolveLegacyTranslatesLangSource,
+} from '../../helpers/resolveLangSource';
 import {ChatWrapperBox} from '../styled/ChatWrapperBox';
 import {Overlay, StyledModal} from '../styled/MediaModal';
 import ConnectionBanner from './ConnectionBanner';
@@ -23,19 +28,17 @@ import {
   setIsLoading,
   setLastViewedTimestamp,
 } from '../../roomStore/roomsSlice';
-import {refreshAuthTokensQuietly} from '../../networking/authRefresh';
+import {refresh} from '../../networking/apiClient';
 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 {
@@ -62,8 +65,6 @@ 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);
@@ -116,6 +117,26 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     dispatch(setDeleteModal({isDeleteModal: false}));
   };
 
+  // A host drives the reader's language from OUTSIDE the component through
+  // `config.translates.readerLocale` (their own switcher, or the testbed's
+  // Setup tab). Nothing was syncing it into `langSource`, so pinning it only
+  // redirected the incoming-translation lookup while the UI captions and the
+  // `<translate source>` on outgoing messages kept following the unset
+  // langSource — which is why picking a language appeared to do nothing.
+  //
+  // Its own effect, not part of init: it has to re-fire whenever the host
+  // changes the value mid-session. And it dispatches only when the value is
+  // actually set, so a host that leaves it unset never clobbers what the
+  // reader picked from the globe.
+  useEffect(() => {
+    const resolved = resolveExternalReaderLocaleLangSource(
+      config?.translates?.readerLocale
+    );
+    if (resolved) {
+      dispatch(setLangSource(resolved));
+    }
+  }, [config?.translates?.readerLocale, dispatch]);
+
   useEffect(() => {
     return () => {
       if (client && user.xmppPassword === '') {
@@ -165,23 +186,6 @@ 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(
@@ -191,20 +195,18 @@ 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.
       if (config) {dispatch(setConfig(config));}
+      // Seeds only when the host actually set the legacy single-locale
+      // field, never on mere `enabled` — see resolveLangSource.
+      const legacyLangSource = resolveLegacyTranslatesLangSource(
+        config?.translates
+      );
+      if (legacyLangSource) {
+        dispatch(setLangSource(legacyLangSource));
+      }
       try {
         const hasUser =
           !!user?.defaultWallet?.walletAddress &&
@@ -283,7 +285,14 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             devPushLog('warn', 'initializeClient failed (legacy path)', err);
           }
           setInited(true);
-          ensureFreshTokens();
+          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);
@@ -298,7 +307,11 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
           setInited(true);
-          ensureFreshTokens();
+          if (config?.refreshTokens?.enabled) {
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         } else if (client) {
           devPushLog('rn', 'ChatWrapper: reusing provider client');
           if (!activeRoomJID) {
@@ -315,7 +328,11 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             console.warn('getChatsPrivateStoreRequestStanza failed', err)
           );
           setInited(true);
-          ensureFreshTokens();
+          if (config?.refreshTokens?.enabled) {
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         }
 
         dispatch(setIsLoading({loading: false}));

package/src/components/MainComponents/LoginWrapper.tsx

@@ -36,7 +36,6 @@ 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,13 +11,10 @@ import {
   Text,
   View,
 } from 'react-native';
-import { isLikelyAudio } from '../../helpers/mimeToExtension';
-import { getDisplayFileName } from '../../helpers/getDisplayFileName';
+import { deriveDisplayFilename, isLikelyAudio } from '../../helpers/mimeToExtension';
 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;
@@ -139,26 +136,22 @@ const PendingMediaMessage: React.FC<{
 
 const MediaMessage: React.FC<MediaMessageProps> = ({
   mimeType,
-  location: rawLocation,
-  messageText: rawMessageText,
+  location,
+  messageText,
   message,
   isUser,
 }) => {
-  const fileToken = useFileToken();
-  const location = appendFileToken(rawLocation, fileToken);
-  const messageText = appendFileToken(rawMessageText, fileToken);
-
   if (mimeType) {
-    const displayName = getDisplayFileName({
-      originalName: (message as any)?.originalName,
+    const displayName = deriveDisplayFilename({
       fileName: message?.fileName,
-      location: rawLocation || rawMessageText,
-      mimetype: mimeType,
+      originalName: (message as any)?.originalName,
+      url: location || messageText,
+      mime: mimeType,
     });
     const isAudioPayload = isLikelyAudio(
       mimeType,
       displayName,
-      rawLocation,
+      location,
       {
         duration: (message as any)?.duration,
         waveForm: (message as any)?.waveForm,
@@ -181,12 +174,7 @@ 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}
           />
         );
@@ -194,13 +182,7 @@ 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,6 +1,5 @@
 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';
@@ -47,10 +46,7 @@ export const MessageContainer: FC<MessageContainerProps> = ({
   isReply,
   className,
 }) => {
-  // 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 isUser = message.user.id === walletAddress;
 
   const messageDate = new Date(message.date);
 

package/src/components/MainComponents/MessageList.tsx

@@ -28,8 +28,6 @@ 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<{
@@ -55,15 +53,6 @@ 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>({
@@ -77,7 +66,6 @@ const MessageList = <TMessage extends IMessage>({
   loading,
   isReply,
   activeMessage,
-  onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
   const { composing, messages, composingList } = useRoomState(roomJID)
     .room! as IRoom;
@@ -344,7 +332,6 @@ 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) {
@@ -362,12 +349,11 @@ const MessageList = <TMessage extends IMessage>({
             },
             0
           );
-          onReadBoundaryChange?.(newestSeenTsRef.current);
         }
         setIsUserAtBottom(false);
       }
     },
-    [memoizedMessages, onReadBoundaryChange]
+    [memoizedMessages]
   );
 
   // Keep the badge in sync with messages that arrive while the user is
@@ -396,7 +382,6 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
-    onReadBoundaryChange?.(null);
     scrollToBottom();
   };
 
@@ -407,8 +392,6 @@ 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(() => {
@@ -430,7 +413,7 @@ const MessageList = <TMessage extends IMessage>({
     <View
       style={[
         styles.container,
-        { backgroundColor: getChatBackgroundColor(config) },
+        { backgroundColor: config?.backgroundChat?.color || '#F3F6FC' },
       ]}
     >
       <View style={styles.backgroundImageContainer}>{BackgroundImage}</View>
@@ -439,7 +422,7 @@ const MessageList = <TMessage extends IMessage>({
           {CustomMessage && (
             <CustomMessage
               message={activeMessage}
-              isUser={isOwnMessage(activeMessage, user)}
+              isUser={activeMessage.user.id === user.walletAddress}
               isReply={isReply}
             />
           )}
@@ -459,9 +442,7 @@ const MessageList = <TMessage extends IMessage>({
         onLayout={handleLayout}
         inverted={true}
         keyboardShouldPersistTaps="handled"
-        keyboardDismissMode={
-          config?.keepKeyboardOpenOnScroll ? 'none' : 'interactive'
-        }
+        keyboardDismissMode="interactive"
         contentContainerStyle={styles.flatListContent}
         ListFooterComponent={
           loading && memoizedMessages.length > 15 ? (