@ethora/chat-component-rn 26.7.2 → 26.7.4

package/src/components/MainComponents/ChatRoom.tsx

@@ -20,6 +20,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';
@@ -31,6 +32,9 @@ import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingI
 // import {PanGestureHandler} from 'react-native-gesture-handler';
 import { FlatList } from 'react-native';
 import {
+  AppState,
+  AppStateStatus,
+  Keyboard,
   Platform,
   TouchableWithoutFeedback,
   View,
@@ -106,6 +110,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,15 +213,28 @@ 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. Without this, leaving a
+    // room (or backgrounding) while scrolled up stamped `now()` as read
+    // and silently discarded genuinely-unread messages. Customer-
+    // reported #33.
+    const readBoundaryRef = useRef<number | null>(null);
+    const handleReadBoundaryChange = useCallback((boundaryTs: number | null) => {
+      readBoundaryRef.current = boundaryTs;
+    }, []);
+
     useEffect(() => {
       if (!activeRoomJID) {
         return;
       }
 
+      readBoundaryRef.current = null;
       dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
       setIsLoadingMore(false);
       return () => {
-        const timestamp = new Date().getTime();
+        const timestamp = readBoundaryRef.current ?? new Date().getTime();
         dispatch(
           setLastViewedTimestamp({
             chatJID: activeRoomJID,
@@ -191,6 +247,12 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
           liveClient
             .flushLastViewedToPrivateStoreStanza(store.getState().rooms?.rooms, {
               visibleRoomJID: activeRoomJID,
+              // Carry the same boundary to the SERVER marker. Without
+              // this the flush defaults to Date.now() 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.
+              visibleRoomTs: readBoundaryRef.current,
             })
             .catch(() => {});
         }
@@ -279,7 +341,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 +363,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 +410,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 />
@@ -404,6 +487,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 {
@@ -34,6 +34,7 @@ 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 {
@@ -161,6 +162,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(

package/src/components/MainComponents/MessageList.tsx

@@ -28,6 +28,7 @@ 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';
 
 interface MessageListProps<TMessage extends IMessage> {
   CustomMessage?: React.ComponentType<{
@@ -53,6 +54,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 +76,7 @@ const MessageList = <TMessage extends IMessage>({
   loading,
   isReply,
   activeMessage,
+  onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
   const { composing, messages, composingList } = useRoomState(roomJID)
     .room! as IRoom;
@@ -332,6 +343,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 +361,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 +395,7 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
+    onReadBoundaryChange?.(null);
     scrollToBottom();
   };
 
@@ -392,6 +406,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 +429,7 @@ const MessageList = <TMessage extends IMessage>({
     <View
       style={[
         styles.container,
-        { backgroundColor: config?.backgroundChat?.color || '#F3F6FC' },
+        { backgroundColor: getChatBackgroundColor(config) },
       ]}
     >
       <View style={styles.backgroundImageContainer}>{BackgroundImage}</View>
@@ -442,7 +458,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 ? (

package/src/components/MainComponents/ProfileImagePlaceholder.tsx

@@ -69,27 +69,27 @@ export const ProfileImagePlaceholder: React.FC<
     if (words.length === 0) {return '';}
 
     if (words.length >= 2) {
-      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0]?.[0] || '')
+      const firstLetter = /^[\p{L}\p{N}]$/u.test(words[0]?.[0] || '')
         ? words[0][0].toUpperCase()
         : '';
-      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[1]?.[0] || '')
+      const secondLetter = /^[\p{L}\p{N}]$/u.test(words[1]?.[0] || '')
         ? words[1][0].toUpperCase()
         : '';
       return firstLetter + secondLetter;
     }
 
     if (words.length === 1 && words[0].length >= 2) {
-      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
+      const firstLetter = /^[\p{L}\p{N}]$/u.test(words[0][0] || '')
         ? words[0][0].toUpperCase()
         : '';
-      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][1] || '')
+      const secondLetter = /^[\p{L}\p{N}]$/u.test(words[0][1] || '')
         ? words[0][1].toUpperCase()
         : '';
       return firstLetter + secondLetter;
     }
 
     if (words.length === 1 && words[0].length === 1) {
-      return /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
+      return /^[\p{L}\p{N}]$/u.test(words[0][0] || '')
         ? words[0][0].toUpperCase()
         : '';
     }

package/src/components/MainComponents/RoomList.tsx

@@ -35,6 +35,14 @@ interface RoomListProps {
   onRoomClick?: (chat: IRoom) => void;
 }
 
+/** Page ground behind the room list, the search field and the header's
+ * rounded bottom corners. */
+const LIST_BACKGROUND = '#E8EDF2';
+
+/** First-paint fallback until the floating search strip reports its real
+ * height; the list's top padding follows the measurement after that. */
+const SEARCH_BAR_ESTIMATE = 60;
+
 const RoomList: React.FC<RoomListProps> = ({
   chats,
   burgerMenu = false,
@@ -120,6 +128,10 @@ const RoomList: React.FC<RoomListProps> = ({
     }
   }, [burgerMenu]);
 
+  // Measured, so the list's top padding always matches the floating
+  // search strip — including when a larger font or a taller field grows it.
+  const [searchBarHeight, setSearchBarHeight] = useState(SEARCH_BAR_ESTIMATE);
+
   const toggleDrawer = () => {
     if (isDrawerOpen) {
       closeDrawer();
@@ -180,39 +192,50 @@ const RoomList: React.FC<RoomListProps> = ({
           <>
             <View style={styles.scrollContainer}>
               <HeaderRoomList setDrawerOpen={toggleDrawer} />
-              {/* Search sits ABOVE the list rather than in its
-                  ListHeaderComponent. As a list header it was simply the
-                  first scrolling row, so the moment you scrolled the rooms
-                  it slid up and disappeared behind the opaque header band.
-                  Fixed here it stays reachable, which is the entire point
-                  of a search field over a long list. */}
-              <View style={styles.searchBar}>
-                <SearchInput
-                  icon={<SearchIcon height={20} />}
-                  value={searchTerm}
-                  onChangeText={handleSearchChange}
-                  placeholder={t('search.placeholder')}
+              {/* The search field floats OVER the list rather than
+                  sitting above it in the column: its strip is transparent
+                  and the rooms scroll underneath, which is what the design
+                  shows. It is still fixed (not a ListHeaderComponent), so
+                  it stays reachable however far the list is scrolled — as a
+                  list header it scrolled away behind the opaque header. */}
+              <View style={styles.listArea}>
+                <FlatList
+                  data={filteredChats}
+                  keyExtractor={(item) => item.jid}
+                  // Clears the floating field on first paint; scrolling
+                  // then slides the rooms under it.
+                  contentContainerStyle={{ paddingTop: searchBarHeight }}
+                  renderItem={({ item }) => (
+                    <Pressable
+                      // Stable testID so e2e drivers can target a room
+                      // row by its jid local-part (e.g. Main chat under
+                      // app id `..._...759` → testID `room-...759`).
+                      testID={`room-${(item.jid || '').split('@')[0]}`}
+                      accessibilityLabel={`room-${item.title || item.name}`}
+                      onPress={() => performClick(item)}
+                      onPressIn={handlePressIn}
+                      onPressOut={handlePressOut}
+                    >
+                      <ChatRoomItem chat={item} config={config} />
+                    </Pressable>
+                  )}
+                  style={styles.chatList}
                 />
+                <View
+                  testID="room-list-search"
+                  style={styles.searchBar}
+                  onLayout={(e) =>
+                    setSearchBarHeight(e.nativeEvent.layout.height)
+                  }
+                >
+                  <SearchInput
+                    icon={<SearchIcon height={20} />}
+                    value={searchTerm}
+                    onChangeText={handleSearchChange}
+                    placeholder={t('search.placeholder')}
+                  />
+                </View>
               </View>
-              <FlatList
-                data={filteredChats}
-                keyExtractor={(item) => item.jid}
-                renderItem={({ item }) => (
-                  <Pressable
-                    // Stable testID so e2e drivers can target a room
-                    // row by its jid local-part (e.g. Main chat under
-                    // app id `..._...759` → testID `room-...759`).
-                    testID={`room-${(item.jid || '').split('@')[0]}`}
-                    accessibilityLabel={`room-${item.title || item.name}`}
-                    onPress={() => performClick(item)}
-                    onPressIn={handlePressIn}
-                    onPressOut={handlePressOut}
-                  >
-                    <ChatRoomItem chat={item} config={config} />
-                  </Pressable>
-                )}
-                style={styles.chatList}
-              />
 
               <HeaderRoomListMenu
                 closeDrawer={closeDrawer}
@@ -238,7 +261,7 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: LIST_BACKGROUND,
   },
   scrollContainer: {
     flexGrow: 1,
@@ -249,6 +272,9 @@ const styles = StyleSheet.create({
     padding: 16,
     justifyContent: 'space-between',
   },
+  listArea: {
+    flex: 1,
+  },
   searchBar: {
     // `row` matters: SearchInputWrapper is `flex: 1` plus a fixed 44px
     // height. In a column parent that flex resolves VERTICALLY against a
@@ -256,14 +282,19 @@ const styles = StyleSheet.create({
     // but its magnifier. As a row it resolves to width, which is what it
     // meant back when the field was a list-header child.
     flexDirection: 'row',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
     paddingTop: 8,
+    paddingBottom: 8,
     paddingHorizontal: 16,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: 'transparent',
   },
   chatList: {
     flex: 1,
     paddingHorizontal: 16,
-    backgroundColor: '#FAFAFA',
+    backgroundColor: LIST_BACKGROUND,
   },
 });