@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/Header/HeaderRoomList.tsx

@@ -1,11 +1,14 @@
 /** @format */
 
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import React, { FC, useMemo } from 'react';
 import { View, StyleSheet, Image, Text } from 'react-native';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { BurgerMenuIcon } from '../../assets/icons';
 import Button from '../styled/Button';
+import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
 
 interface HeaderRoomListProps {
   setDrawerOpen: () => void;
@@ -13,6 +16,10 @@ interface HeaderRoomListProps {
 
 export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   const { config, user, selectedUser } = useChatSettingState();
+  const theme = useTheme();
+  const t = useT();
+  const insets = useSafeAreaInsets();
+  const topInset = config?.headerLayout?.safeAreaTop ? insets.top : 0;
 
   const modalUser: any = selectedUser ?? user;
 
@@ -34,15 +41,26 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   }, [config?.backgroundChat?.image]);
 
   return (
-    <View style={styles.headerContainer}>
+    <View
+      style={[
+        styles.headerContainer,
+        { backgroundColor: theme.surface, shadowColor: theme.shadow },
+        topInset ? { paddingTop: 16 + topInset } : null,
+      ]}
+    >
       {!config?.disableRoomMenu && config?.headerMenu ? (
         <View style={styles.leftContainer}>
           <Button
+            testID="room-list-burger"
             style={styles.menuButton}
             color="black"
             unstyled
-            EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
-            onPress={() => config?.headerMenu && config?.headerMenu()}
+            EndIcon={<BurgerMenuIcon color={theme.icon} />}
+            onPress={() =>
+              typeof config?.headerMenu === 'function'
+                ? config.headerMenu()
+                : setDrawerOpen()
+            }
           />
         </View>
       ) : (
@@ -52,14 +70,16 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
         {config?.headerLogo ? (
           HeaderLogo
         ) : (
-          <Text style={{ fontWeight: 500, fontSize: 18 }}>Chats</Text>
+          <Text style={{ fontWeight: 500, fontSize: 18, color: theme.text }}>
+            {t('roomList.title')}
+          </Text>
         )}
       </View>
       <View style={styles.rightContainer}>
         <ProfileImagePlaceholder
           icon={modalUser?.profileImage ?? null}
           name={modalUser?.name ?? modalUser?.firstName}
-          size={30}
+          size={36}
           click={{
             isClick: true,
             onPress: setDrawerOpen,
@@ -76,9 +96,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 16,
     paddingTop: 16,
-    paddingBottom: 8,
+    paddingBottom: 12,
     minHeight: 56,
     justifyContent: 'space-between',
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 4,
+    zIndex: 2,
   },
   menuButton: {
     padding: 8,
@@ -86,7 +113,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   leftContainer: {
-    width: 40,
+    width: 44,
     alignItems: 'flex-start',
     justifyContent: 'center',
   },
@@ -98,7 +125,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   rightContainer: {
-    width: 40,
+    width: 44,
     alignItems: 'flex-end',
     justifyContent: 'center',
   },

package/src/components/InputComponents/Search.tsx

@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   TextInputProps,
 } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 const shouldForwardProp = (prop: string) =>
   prop !== 'animated' && prop !== 'expanded' && prop !== 'direction';
@@ -18,7 +19,7 @@ const SearchInputWrapper = styled.View.withConfig({ shouldForwardProp })<{
   position: relative;
   flex-direction: row;
   align-items: center;
-  background-color: #fff;
+  background-color: ${({ theme }) => theme.surface};
   border-radius: 16px;
   height: 44px;
   padding: 0 12px;
@@ -40,7 +41,7 @@ const SearchIcon = styled(TouchableOpacity)<{
   margin-right: 8px;
   align-items: center;
   justify-content: center;
-  color: #999;
+  color: ${({ theme }) => theme.textMuted};
 `;
 
 const StyledInput = styled(TextInput)<{
@@ -51,7 +52,7 @@ const StyledInput = styled(TextInput)<{
   border: none;
   flex: 1;
   font-size: 16px;
-  color: #000;
+  color: ${({ theme }) => theme.text};
   opacity: ${({ animated, expanded }) => (animated && !expanded ? 0 : 1)};
   display: ${({ animated, expanded }) =>
     animated && !expanded ? 'none' : 'flex'};
@@ -77,6 +78,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
   placeholder,
   ...props
 }) => {
+  const theme = useTheme();
   const [isExpanded, setIsExpanded] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
   const inputRef = useRef<TextInput | null>(null);
@@ -128,7 +130,8 @@ const SearchInput: React.FC<SearchInputProps> = ({
         expanded={isExpanded}
         onChangeText={handleInput}
         placeholder={placeholder}
-        placeholderTextColor="#999"
+        placeholderTextColor={theme.textMuted}
+        keyboardAppearance={theme.dark ? 'dark' : 'light'}
         {...props}
       />
     </SearchInputWrapper>

package/src/components/MainComponents/ChatHeader.tsx

@@ -1,6 +1,7 @@
 /** @format */
 
 import React, { useCallback } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   CenterContainer,
   ChatContainerHeader,
@@ -28,8 +29,11 @@ import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { RoomMenu } from '../MenuRoom/MenuRoom';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useFileToken } from '../../hooks/useFileToken';
+import { appendFileToken } from '../../helpers/secureFileUrl';
 import { View, StyleSheet, Text, Keyboard } from 'react-native';
 import { getIconColor } from '../../helpers/getIconColor';
+import { useTheme } from '../../hooks/useTheme';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
 import { getElementFont } from '../../helpers/getElementFont';
 import { useT } from '../../i18n/useT';
@@ -43,6 +47,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   currentRoom,
   handleBackClick,
 }) => {
+  const fileToken = useFileToken();
   const dispatch = useDispatch();
   const { client } = useXmppClient();
 
@@ -50,6 +55,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   const roomState = useRoomState(currentRoom.jid).room;
   const composing = roomState?.composing;
   const { config } = useChatSettingState();
+  const theme = useTheme();
   const t = useT();
 
   const handleChangeChat = (chat: IRoom) => {
@@ -84,17 +90,19 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   // here so `height` defines the band exactly (content centers via the
   // styled `align-items: center`); the styled 12px vertical padding would
   // otherwise add on top of it.
-  const headerHeight = resolveHeaderHeight(config?.headerLayout?.height);
+  const insets = useSafeAreaInsets();
+  const topInset = config?.headerLayout?.safeAreaTop ? insets.top : 0;
+  const headerHeight = resolveHeaderHeight(config?.headerLayout?.height) + topInset;
 
   return (
     <>
       <ChatContainerHeader
-        style={{ height: headerHeight, paddingTop: 0, paddingBottom: 0 }}
+        style={{ height: headerHeight, paddingTop: topInset, paddingBottom: 0 }}
       >
         {handleBackClick && !config?.headerChatMenu ? (
           <View style={styles.leftContainer}>
             <Button
-              EndIcon={<BackIcon />}
+              EndIcon={<BackIcon color={theme.textSecondary} />}
               onPress={() => handleBackClick(false)}
             />
           </View>
@@ -102,7 +110,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
           <View style={styles.leftContainer}>
             <Button
               style={styles.menuButton}
-              color="black"
+              color={theme.text}
               unstyled
               EndIcon={<BurgerMenuIcon color={getIconColor(config)} />}
               onPress={handleHeaderChatMenu}
@@ -152,7 +160,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
             <ProfileImagePlaceholder
               name={currentRoom?.title || currentRoom?.name}
               size={40}
-              icon={currentRoom?.icon}
+              icon={appendFileToken(currentRoom?.icon, fileToken)}
               active={!config?.disableChatInfo?.disableChatHeaderMenu}
               click={
                 config?.disableChatInfo?.disableChatHeaderMenu
@@ -174,7 +182,11 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
                   <Composing usersTyping={currentRoom?.composingList} />
                 ) : config?.disableUserCount ? undefined : (
                   <ChatContainerHeaderLabel
-                    style={[styles.subLabel, getElementFont(config, 'headerSubtitle')]}
+                    style={[
+                      styles.subLabel,
+                      { color: theme.textSecondary },
+                      getElementFont(config, 'headerSubtitle'),
+                    ]}
                   >
                     <Text>
                       {t(

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,15 @@ import { IConfig } from '../../types/models/config.model';
 import { useRoomInitialization } from '../../hooks/useRoomInitialization';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
+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 +50,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,
@@ -71,6 +83,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     const { client } = useXmppClient();
     const dispatch = useDispatch();
     const insets = useSafeAreaInsets();
+    const theme = useTheme();
 
     const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
 
@@ -106,6 +119,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 +222,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 +354,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 +405,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: theme.surface,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        shadowColor: theme.shadow,
+        shadowOffset: { width: 0, height: -4 },
+        shadowOpacity: 0.06,
+        shadowRadius: 12,
+        elevation: 8,
+      },
       ...(stickyInput
         ? { offset: { closed: 0, opened: keyboardVerticalOffset } }
         : {}),
@@ -288,11 +427,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
@@ -323,6 +466,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               >
                 <EmptyChatIllustration
                   color={getIconColor(configWithEventHandlers)}
+                  panelColor={theme.dark ? theme.surfaceSecondary : undefined}
                 />
               </View>
             ) : !roomMessages || roomMessages.length === 0 ? (
@@ -331,7 +475,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 +505,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 +552,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                 config={configWithEventHandlers}
                 loading={isLoadingMore}
                 isReply={false}
+                onReadBoundaryChange={handleReadBoundaryChange}
               />
             )}
           </View>