@ethora/chat-component-rn 26.7.5 → 26.7.7

package/src/components/Header/HeaderRoomList.tsx

@@ -1,5 +1,6 @@
 /** @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';
@@ -13,6 +14,8 @@ interface HeaderRoomListProps {
 
 export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   const { config, user, selectedUser } = useChatSettingState();
+  const insets = useSafeAreaInsets();
+  const topInset = config?.headerLayout?.safeAreaTop ? insets.top : 0;
 
   const modalUser: any = selectedUser ?? user;
 
@@ -34,15 +37,20 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   }, [config?.backgroundChat?.image]);
 
   return (
-    <View style={styles.headerContainer}>
+    <View style={[styles.headerContainer, 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()}
+            onPress={() =>
+              typeof config?.headerMenu === 'function'
+                ? config.headerMenu()
+                : setDrawerOpen()
+            }
           />
         </View>
       ) : (
@@ -59,7 +67,7 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
         <ProfileImagePlaceholder
           icon={modalUser?.profileImage ?? null}
           name={modalUser?.name ?? modalUser?.firstName}
-          size={30}
+          size={36}
           click={{
             isClick: true,
             onPress: setDrawerOpen,
@@ -76,9 +84,19 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 16,
     paddingTop: 16,
-    paddingBottom: 8,
+    paddingBottom: 12,
     minHeight: 56,
     justifyContent: 'space-between',
+    backgroundColor: '#FFFFFF',
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+    // Lifts the header off the page ground behind it.
+    shadowColor: '#101828',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 4,
+    zIndex: 2,
   },
   menuButton: {
     padding: 8,
@@ -86,7 +104,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   leftContainer: {
-    width: 40,
+    width: 44,
     alignItems: 'flex-start',
     justifyContent: 'center',
   },
@@ -98,7 +116,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   rightContainer: {
-    width: 40,
+    width: 44,
     alignItems: 'flex-end',
     justifyContent: 'center',
   },

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,
@@ -87,12 +88,14 @@ 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}>

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';
@@ -215,30 +216,25 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     // 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
-    // published by MessageList into the store. Without this, leaving a
+    // 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.
-    // MessageList publishes the boundary straight into the store, so the
-    // cleanup below reads it from there rather than keeping a second copy
-    // in a ref — the out-of-component paths (AppState background, the
-    // `isVisible` signal, useChatRoomFocus, logout) read the same field.
-    const getReadBoundary = useCallback(
-      (jid: string): number | null =>
-        store.getState().rooms?.rooms?.[jid]?.readBoundaryTs ?? null,
-      []
-    );
+    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 boundaryTs = getReadBoundary(activeRoomJID);
-        const timestamp = boundaryTs ?? new Date().getTime();
+        const timestamp = readBoundaryRef.current ?? new Date().getTime();
         dispatch(
           setLastViewedTimestamp({
             chatJID: activeRoomJID,
@@ -256,7 +252,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               // 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: boundaryTs,
+              visibleRoomTs: readBoundaryRef.current,
             })
             .catch(() => {});
         }
@@ -345,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 } }
         : {}),
@@ -354,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
@@ -397,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 />
@@ -470,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

@@ -30,6 +30,7 @@ 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';
@@ -61,6 +62,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);

package/src/components/MainComponents/MessageList.tsx

@@ -18,9 +18,8 @@ import {
   TouchableOpacity,
   ImageSourcePropType,
 } from 'react-native';
-import { useDispatch } from 'react-redux';
 import { IMessage, User, IConfig, IRoom } from '../../types/types';
-import { msgSortableMs, setReadBoundary } from '../../roomStore/roomsSlice';
+import { msgSortableMs } from '../../roomStore/roomsSlice';
 import Composing from '../styled/StyledInputComponents/Composing';
 import TreadLabel from '../styled/TreadLabel';
 import { MessageContainer } from './MessageContainer';
@@ -29,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<{
@@ -78,7 +78,6 @@ const MessageList = <TMessage extends IMessage>({
   activeMessage,
   onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
-  const dispatch = useDispatch();
   const { composing, messages, composingList } = useRoomState(roomJID)
     .room! as IRoom;
   const [isUserAtBottom, setIsUserAtBottom] = useState(true);
@@ -104,21 +103,6 @@ const MessageList = <TMessage extends IMessage>({
 
   const flatListRef = useRef<FlatList<IMessage>>(null);
 
-  // Single writer for the read boundary. Publishes to the store (so the
-  // out-of-component paths that mark a room read — AppState background,
-  // the `isVisible` signal, the visible-room auto-advance, focus hooks,
-  // logout — can stamp what the user actually saw) AND to the optional
-  // host callback. Customer-reported #33.
-  const reportReadBoundary = useCallback(
-    (boundaryTs: number | null) => {
-      if (roomJID) {
-        dispatch(setReadBoundary({ chatJID: roomJID, boundaryTs }));
-      }
-      onReadBoundaryChange?.(boundaryTs);
-    },
-    [dispatch, roomJID, onReadBoundaryChange]
-  );
-
   const addReplyMessages = useMemo(() => {
     return messages.map((message: IMessage) => {
       const newMessage = {
@@ -359,7 +343,7 @@ const MessageList = <TMessage extends IMessage>({
         // counter so the badge disappears with the arrow.
         setUnreadWhileScrolledUp(0);
         newestSeenTsRef.current = null;
-        reportReadBoundary(null);
+        onReadBoundaryChange?.(null);
       } else {
         isUserAtBottomRef.current = false;
         if (hasUserScrolledRef.current) {
@@ -377,12 +361,12 @@ const MessageList = <TMessage extends IMessage>({
             },
             0
           );
-          reportReadBoundary(newestSeenTsRef.current);
+          onReadBoundaryChange?.(newestSeenTsRef.current);
         }
         setIsUserAtBottom(false);
       }
     },
-    [memoizedMessages, reportReadBoundary]
+    [memoizedMessages, onReadBoundaryChange]
   );
 
   // Keep the badge in sync with messages that arrive while the user is
@@ -411,7 +395,7 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
-    reportReadBoundary(null);
+    onReadBoundaryChange?.(null);
     scrollToBottom();
   };
 
@@ -422,7 +406,7 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
-    reportReadBoundary(null);
+    onReadBoundaryChange?.(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [roomJID]);
 
@@ -445,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>

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()
         : '';
     }
@@ -97,16 +97,26 @@ export const ProfileImagePlaceholder: React.FC<
     return '';
   };
 
-  const getInitials = () => (!icon && name ? getTwoUppercaseLetters(name) : '');
+  const getInitials = () =>
+    !imageSource && name ? getTwoUppercaseLetters(name) : '';
+
+  const imageSource =
+    typeof icon === 'string' && icon
+      ? { uri: icon }
+      : typeof icon === 'number'
+      ? icon
+      : icon && typeof (icon as any).uri === 'string' && (icon as any).uri
+      ? (icon as any)
+      : null;
 
   return (
     <Wrapper
-      bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
+      bgColor={imageSource ? 'transparent' : backgroundColor?.backgroundColor}
       size={size}
       isClickable={active || !!upload?.active}
     >
       <AvatarCircle
-        bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
+        bgColor={imageSource ? 'transparent' : backgroundColor?.backgroundColor}
         size={size}
         isClickable={active || !!upload?.active}
         onPress={
@@ -117,11 +127,8 @@ export const ProfileImagePlaceholder: React.FC<
             : undefined
         }
       >
-        {icon ? (
-          <AvatarImage
-            source={typeof icon === 'string' ? { uri: icon } : icon as any}
-            size={size}
-          />
+        {imageSource ? (
+          <AvatarImage source={imageSource} size={size} />
         ) : placeholderIcon ? (
           placeholderIcon
         ) : (
@@ -140,7 +147,7 @@ export const ProfileImagePlaceholder: React.FC<
           </Overlay>
         )}
       </AvatarCircle>
-      {remove?.enabled && icon && role !== 'participant' && (
+      {remove?.enabled && imageSource && role !== 'participant' && (
         <RemoveButton onPress={remove.onRemoveClick}>
           <RemoveButtonText>&times;</RemoveButtonText>
         </RemoveButton>