stream-chat-react-native-core 9.0.0-beta.8 → 9.0.0

package/src/components/Message/MessageItemView/MessageItemView.tsx

@@ -3,6 +3,7 @@ import { Dimensions, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { SwipableMessageWrapper } from './MessageBubble';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   Alignment,
   MessageContextValue,
@@ -17,6 +18,7 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../../hooks/useStableCallback';
 
 import { primitives } from '../../../theme';
+import { FileTypes } from '../../../types/types';
 import { checkMessageEquality, checkQuotedMessageEquality } from '../../../utils/utils';
 import { useMessageData } from '../hooks/useMessageData';
 
@@ -97,10 +99,12 @@ const useStyles = ({
           ...bubbleReactionListTopContainer,
         },
         bubbleWrapper: {
+          zIndex: 1,
           ...bubbleWrapper,
         },
         repliesContainer: {
           marginTop: -primitives.spacingXxs, // Reducing the margin to account the gap added in the content container
+          zIndex: 0,
           ...repliesContainer,
         },
         leftAlignItems: {
@@ -199,6 +203,7 @@ export type MessageItemViewPropsWithContext = Pick<
   | 'alignment'
   | 'channel'
   | 'groupStyles'
+  | 'hasAttachmentActions'
   | 'isMyMessage'
   | 'message'
   | 'onlyEmojis'
@@ -214,20 +219,9 @@ export type MessageItemViewPropsWithContext = Pick<
     | 'enableMessageGroupingByUser'
     | 'enableSwipeToReply'
     | 'myMessageTheme'
-    | 'MessageAuthor'
-    | 'MessageContent'
-    | 'MessageDeleted'
-    | 'MessageError'
-    | 'MessageFooter'
-    | 'MessageHeader'
-    | 'MessageReplies'
-    | 'MessageSpacer'
-    | 'MessageSwipeContent'
     | 'messageSwipeToReplyHitSlop'
-    | 'ReactionListBottom'
     | 'reactionListPosition'
     | 'reactionListType'
-    | 'ReactionListTop'
   >;
 
 const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
@@ -240,8 +234,17 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     enableMessageGroupingByUser,
     enableSwipeToReply,
     groupStyles,
+    hasAttachmentActions,
     isMyMessage,
     message,
+    messageSwipeToReplyHitSlop = { left: width, right: width },
+    onlyEmojis,
+    otherAttachments,
+    reactionListPosition,
+    reactionListType,
+    setQuotedMessage,
+  } = props;
+  const {
     MessageAuthor,
     MessageContent,
     MessageDeleted,
@@ -250,16 +253,9 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     MessageHeader,
     MessageReplies,
     MessageSpacer,
-    MessageSwipeContent,
-    messageSwipeToReplyHitSlop = { left: width, right: width },
-    onlyEmojis,
-    otherAttachments,
     ReactionListBottom,
-    reactionListPosition,
-    reactionListType,
     ReactionListTop,
-    setQuotedMessage,
-  } = props;
+  } = useComponentsContext();
 
   const {
     theme: {
@@ -293,10 +289,15 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   });
 
   const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+  const hasVisibleQuotedReply = !!message.quoted_message && !hasAttachmentActions;
+  const hasStandaloneGiphyOrImgur =
+    !hasVisibleQuotedReply &&
+    otherAttachments.length > 0 &&
+    (otherAttachments[0].type === FileTypes.Giphy || otherAttachments[0].type === FileTypes.Imgur);
 
-  let noBorder = onlyEmojis && !message.quoted_message;
+  let noBorder = onlyEmojis && !hasVisibleQuotedReply;
   if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy' && !isMyMessage) {
+    if (hasStandaloneGiphyOrImgur && !isMyMessage) {
       noBorder = false;
     } else {
       noBorder = true;
@@ -304,12 +305,10 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   }
 
   let backgroundColor = semantics.chatBgOutgoing;
-  if (onlyEmojis && !message.quoted_message) {
+  if (onlyEmojis && !hasVisibleQuotedReply) {
+    backgroundColor = 'transparent';
+  } else if (hasStandaloneGiphyOrImgur) {
     backgroundColor = 'transparent';
-  } else if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy') {
-      backgroundColor = 'transparent';
-    }
   } else if (isMessageReceivedOrErrorType) {
     backgroundColor = semantics.chatBgIncoming;
   }
@@ -374,7 +373,6 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
 
   return enableSwipeToReply && !isMessageTypeDeleted ? (
     <SwipableMessageWrapper
-      MessageSwipeContent={MessageSwipeContent}
       messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
       onSwipe={onSwipeActionHandler}
     >
@@ -519,6 +517,7 @@ export const MessageItemView = (props: MessageItemViewProps) => {
     alignment,
     channel,
     groupStyles,
+    hasAttachmentActions,
     isMyMessage,
     message,
     contextMenuAnchorRef,
@@ -533,21 +532,10 @@ export const MessageItemView = (props: MessageItemViewProps) => {
     customMessageSwipeAction,
     enableMessageGroupingByUser,
     enableSwipeToReply,
-    MessageAuthor,
-    MessageContent,
-    MessageDeleted,
-    MessageError,
-    MessageFooter,
-    MessageHeader,
-    MessageReplies,
-    MessageSpacer,
-    MessageSwipeContent,
     messageSwipeToReplyHitSlop,
     myMessageTheme,
-    ReactionListBottom,
     reactionListPosition,
     reactionListType,
-    ReactionListTop,
   } = useMessagesContext();
 
   return (
@@ -560,25 +548,15 @@ export const MessageItemView = (props: MessageItemViewProps) => {
         enableMessageGroupingByUser,
         enableSwipeToReply,
         groupStyles,
+        hasAttachmentActions,
         isMyMessage,
         message,
-        MessageAuthor,
-        MessageContent,
-        MessageDeleted,
-        MessageError,
-        MessageFooter,
-        MessageHeader,
-        MessageReplies,
-        MessageSpacer,
-        MessageSwipeContent,
         messageSwipeToReplyHitSlop,
         myMessageTheme,
         onlyEmojis,
         otherAttachments,
-        ReactionListBottom,
         reactionListPosition,
         reactionListType,
-        ReactionListTop,
         setQuotedMessage,
         lastGroupMessage,
         members,

package/src/components/Message/MessageItemView/MessageReplies.tsx

@@ -1,14 +1,11 @@
 import React, { useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import {
   TranslationContextValue,
@@ -22,6 +19,7 @@ import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 export type MessageRepliesPropsWithContext = Pick<
   MessageContextValue,
   | 'alignment'
+  | 'isMyMessage'
   | 'message'
   | 'onLongPress'
   | 'onPress'
@@ -30,14 +28,13 @@ export type MessageRepliesPropsWithContext = Pick<
   | 'preventPress'
   | 'threadList'
 > &
-  Pick<MessagesContextValue, 'MessageRepliesAvatars'> &
   Pick<TranslationContextValue, 't'>;
 
 const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
   const {
     alignment,
+    isMyMessage,
     message,
-    MessageRepliesAvatars,
     onLongPress,
     onOpenThread,
     onPress,
@@ -46,6 +43,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
     t,
     threadList,
   } = props;
+  const { MessageRepliesAvatars } = useComponentsContext();
 
   const {
     theme: {
@@ -57,15 +55,29 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
   } = useTheme();
   const styles = useStyles();
 
+  const physicalAlignment = I18nManager.isRTL
+    ? alignment === 'left'
+      ? 'right'
+      : 'left'
+    : alignment;
+  const connectorStroke = isMyMessage
+    ? semantics.chatThreadConnectorOutgoing
+    : semantics.chatThreadConnectorIncoming;
+
+  const connector =
+    physicalAlignment === 'left' ? (
+      <ReplyConnectorLeft height={48} width={16} stroke={connectorStroke} />
+    ) : (
+      <ReplyConnectorRight height={48} width={16} stroke={connectorStroke} />
+    );
+
   if (threadList || !message.reply_count) {
     return null;
   }
 
   return (
     <View style={[styles.container, container]}>
-      {alignment === 'left' && (
-        <ReplyConnectorLeft height={48} width={16} stroke={semantics.chatThreadConnectorIncoming} />
-      )}
+      {alignment === 'left' ? connector : null}
       <Pressable
         disabled={preventPress}
         onLongPress={(event) => {
@@ -96,7 +108,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
         }}
         style={[
           styles.content,
-          { flexDirection: alignment === 'left' ? 'row' : 'row-reverse' },
+          { flexDirection: physicalAlignment === 'left' ? 'row' : 'row-reverse' },
           content,
         ]}
         testID='message-replies'
@@ -110,13 +122,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
               })}
         </Text>
       </Pressable>
-      {alignment === 'right' && (
-        <ReplyConnectorRight
-          height={48}
-          width={16}
-          stroke={semantics.chatThreadConnectorOutgoing}
-        />
-      )}
+      {alignment === 'right' ? connector : null}
     </View>
   );
 };
@@ -171,6 +177,7 @@ export type MessageRepliesProps = Partial<MessageRepliesPropsWithContext>;
 export const MessageReplies = (props: MessageRepliesProps) => {
   const {
     alignment,
+    isMyMessage,
     message,
     onLongPress,
     onOpenThread,
@@ -179,15 +186,14 @@ export const MessageReplies = (props: MessageRepliesProps) => {
     preventPress,
     threadList,
   } = useMessageContext();
-  const { MessageRepliesAvatars } = useMessagesContext();
   const { t } = useTranslationContext();
 
   return (
     <MemoizedMessageReplies
       {...{
         alignment,
+        isMyMessage,
         message,
-        MessageRepliesAvatars,
         onLongPress,
         onOpenThread,
         onPress,
@@ -223,7 +229,7 @@ const useStyles = () => {
         gap: primitives.spacingXs,
       },
       messageRepliesText: {
-        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textLink,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,

package/src/components/Message/MessageItemView/MessageStatus.tsx

@@ -7,9 +7,9 @@ import {
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Check } from '../../../icons/Check';
-import { CheckAll } from '../../../icons/CheckAll';
-import { Time } from '../../../icons/Time';
+import { Check } from '../../../icons/checkmark';
+import { CheckAll } from '../../../icons/checks';
+import { Time } from '../../../icons/clock';
 import { primitives } from '../../../theme';
 import { MessageStatusTypes } from '../../../utils/utils';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
@@ -29,7 +29,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
       messageItemView: {
         status: { checkAllIcon, checkIcon, container, timeIcon },
       },
-      semantics,
     },
   } = useTheme();
 
@@ -54,14 +53,14 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
       {read ? (
         <CheckAll
           height={16}
-          stroke={semantics.accentPrimary}
+          stroke={styles.readCheck.color}
           width={16}
           accessibilityLabel='Read'
           {...checkAllIcon}
         />
       ) : delivered ? (
         <CheckAll
-          stroke={semantics.chatTextTimestamp}
+          stroke={styles.deliveredCheck.color}
           height={16}
           width={16}
           accessibilityLabel='Delivered'
@@ -69,7 +68,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
         />
       ) : sending ? (
         <Time
-          stroke={semantics.chatTextTimestamp}
+          stroke={styles.sendingCheck.color}
           height={16}
           width={16}
           accessibilityLabel='Sending'
@@ -77,7 +76,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
         />
       ) : sent ? (
         <Check
-          stroke={semantics.chatTextTimestamp}
+          stroke={styles.sentCheck.color}
           height={16}
           width={16}
           accessibilityLabel='Sent'
@@ -162,6 +161,18 @@ const useStyles = () => {
         flexDirection: 'row',
         gap: primitives.spacingXxs,
       },
+      readCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.accentPrimary,
+      },
+      deliveredCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp,
+      },
+      sendingCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp,
+      },
+      sentCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp,
+      },
     });
   }, [shouldUseOverlayStyles, semantics]);
 };

package/src/components/Message/MessageItemView/MessageTextContainer.tsx

@@ -5,6 +5,7 @@ import { LocalMessage } from 'stream-chat';
 
 import { renderText, RenderTextParams } from './utils/renderText';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -32,10 +33,7 @@ export type MessageTextContainerPropsWithContext = Pick<
   MessageContextValue,
   'message' | 'onLongPress' | 'onlyEmojis' | 'onPress' | 'preventPress' | 'isMyMessage'
 > &
-  Pick<
-    MessagesContextValue,
-    'markdownRules' | 'MessageText' | 'myMessageTheme' | 'messageTextNumberOfLines'
-  > & {
+  Pick<MessagesContextValue, 'markdownRules' | 'myMessageTheme' | 'messageTextNumberOfLines'> & {
     markdownStyles?: MarkdownStyle;
     messageOverlay?: boolean;
     styles?: Partial<{
@@ -52,7 +50,6 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
     markdownStyles: markdownStylesProp = {},
     message,
     messageOverlay,
-    MessageText,
     messageTextNumberOfLines,
     onLongPress,
     onlyEmojis,
@@ -60,6 +57,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
     preventPress,
     styles: stylesProp = {},
   } = props;
+  const { MessageText } = useComponentsContext();
 
   const {
     theme: {
@@ -186,8 +184,7 @@ export type MessageTextContainerProps = Partial<MessageTextContainerPropsWithCon
 export const MessageTextContainer = (props: MessageTextContainerProps) => {
   const { message, onLongPress, onlyEmojis, onPress, preventPress, isMyMessage } =
     useMessageContext();
-  const { markdownRules, MessageText, messageTextNumberOfLines, myMessageTheme } =
-    useMessagesContext();
+  const { markdownRules, messageTextNumberOfLines, myMessageTheme } = useMessagesContext();
 
   return (
     <MemoizedMessageTextContainer
@@ -195,7 +192,6 @@ export const MessageTextContainer = (props: MessageTextContainerProps) => {
         markdownRules,
         message,
         isMyMessage,
-        MessageText,
         messageTextNumberOfLines,
         myMessageTheme,
         onLongPress,

package/src/components/Message/MessageItemView/MessageWrapper.tsx

@@ -8,6 +8,7 @@ import { useMessageDateSeparator } from '../../../components/MessageList/hooks/u
 import { useMessageGroupStyles } from '../../../components/MessageList/hooks/useMessageGroupStyles';
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useMessageListItemContext } from '../../../contexts/messageListItemContext/MessageListItemContext';
 import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
 import { ThemeProvider, useTheme } from '../../../contexts/themeContext/ThemeContext';
@@ -40,15 +41,9 @@ export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
     maxTimeBetweenGroupedMessages,
     threadList,
   } = useChannelContext();
-  const {
-    getMessageGroupStyle,
-    InlineDateSeparator,
-    InlineUnreadIndicator,
-    Message,
-    MessageSystem,
-    myMessageTheme,
-    shouldShowUnreadUnderlay,
-  } = useMessagesContext();
+  const { InlineDateSeparator, InlineUnreadIndicator, Message, MessageSystem } =
+    useComponentsContext();
+  const { getMessageGroupStyle, myMessageTheme, shouldShowUnreadUnderlay } = useMessagesContext();
   const { goToMessage, onThreadSelect, noGroupByUser, modifiedTheme } = useMessageListItemContext();
 
   const dateSeparatorDate = useMessageDateSeparator({

package/src/components/Message/MessageItemView/ReactionList/ReactionListBottom.tsx

@@ -3,6 +3,7 @@ import { FlatList, StyleSheet, View } from 'react-native';
 
 import { ReactionListItemProps } from './ReactionListItem';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -29,9 +30,7 @@ export type ReactionListBottomProps = Partial<
     | 'showReactionsOverlay'
   >
 > &
-  Partial<
-    Pick<MessagesContextValue, 'supportedReactions' | 'ReactionListClustered' | 'ReactionListItem'>
-  > & {
+  Partial<Pick<MessagesContextValue, 'supportedReactions'>> & {
     type?: 'clustered' | 'segmented';
     showCount?: boolean;
   };
@@ -55,8 +54,6 @@ export const ReactionListBottom = (props: ReactionListBottomProps) => {
     supportedReactions: propSupportedReactions,
     type,
     showCount = true,
-    ReactionListClustered: propReactionListClustered,
-    ReactionListItem: propReactionListItem,
   } = props;
 
   const {
@@ -71,11 +68,8 @@ export const ReactionListBottom = (props: ReactionListBottomProps) => {
     showReactionsOverlay: contextShowReactionsOverlay,
   } = useMessageContext();
 
-  const {
-    supportedReactions: contextSupportedReactions,
-    ReactionListClustered: contextReactionListClustered,
-    ReactionListItem: contextReactionListItem,
-  } = useMessagesContext();
+  const { ReactionListClustered, ReactionListItem } = useComponentsContext();
+  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
 
   const alignment = propAlignment || contextAlignment;
   const handleReaction = propHandlerReaction || contextHandleReaction;
@@ -87,8 +81,6 @@ export const ReactionListBottom = (props: ReactionListBottomProps) => {
   const reactions = propReactions || contextReactions;
   const showReactionsOverlay = propShowReactionsOverlay || contextShowReactionsOverlay;
   const supportedReactions = propSupportedReactions || contextSupportedReactions;
-  const ReactionListClustered = propReactionListClustered || contextReactionListClustered;
-  const ReactionListItem = propReactionListItem || contextReactionListItem;
 
   const renderItem = useCallback(
     ({ index, item }: { index: number; item: ReactionListItemProps }) => (

package/src/components/Message/MessageItemView/ReactionList/ReactionListTop.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -26,14 +27,7 @@ export type ReactionListTopProps = Partial<
     | 'showReactionsOverlay'
     | 'handleReaction'
   > &
-    Pick<
-      MessagesContextValue,
-      | 'supportedReactions'
-      | 'reactionListType'
-      | 'ReactionListClustered'
-      | 'ReactionListItem'
-      | 'ReactionListCountItem'
-    >
+    Pick<MessagesContextValue, 'supportedReactions' | 'reactionListType'>
 > & {
   type?: 'clustered' | 'segmented';
   showCount?: boolean;
@@ -56,9 +50,6 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
     handleReaction: propHandleReaction,
     type,
     showCount = true,
-    ReactionListClustered: propReactionListClustered,
-    ReactionListItem: propReactionListItem,
-    ReactionListCountItem: propReactionListCountItem,
   } = props;
 
   const {
@@ -73,12 +64,8 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
     handleReaction: contextHandleReaction,
   } = useMessageContext();
 
-  const {
-    supportedReactions: contextSupportedReactions,
-    ReactionListClustered: contextReactionListClustered,
-    ReactionListItem: contextReactionListItem,
-    ReactionListCountItem: contextReactionListCountItem,
-  } = useMessagesContext();
+  const { ReactionListClustered, ReactionListCountItem, ReactionListItem } = useComponentsContext();
+  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
 
   const alignment = propAlignment || contextAlignment;
   const hasReactions = propHasReactions || contextHasReactions;
@@ -90,9 +77,6 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
   const showReactionsOverlay = propShowReactionsOverlay || contextShowReactionsOverlay;
   const supportedReactions = propSupportedReactions || contextSupportedReactions;
   const handleReaction = propHandleReaction || contextHandleReaction;
-  const ReactionListClustered = propReactionListClustered || contextReactionListClustered;
-  const ReactionListItem = propReactionListItem || contextReactionListItem;
-  const ReactionListCountItem = propReactionListCountItem || contextReactionListCountItem;
 
   const styles = useStyles({ alignment });