stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

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

@@ -1,7 +1,7 @@
-import React, { forwardRef, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Dimensions, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { MessageBubble, SwipableMessageBubble } from './MessageBubble';
+import { SwipableMessageWrapper } from './MessageBubble';
 
 import {
   Alignment,
@@ -43,6 +43,10 @@ const useStyles = ({
     theme: {
       messageItemView: {
         container,
+        bubbleContentContainer,
+        bubbleErrorContainer,
+        bubbleReactionListTopContainer,
+        bubbleWrapper,
         contentContainer,
         repliesContainer,
         leftAlignItems,
@@ -71,12 +75,30 @@ const useStyles = ({
           alignItems: 'flex-end',
           gap: primitives.spacingXs,
           flexDirection: alignment === 'left' ? 'row' : 'row-reverse',
+          width: '100%',
           ...container,
         },
         contentContainer: {
           gap: primitives.spacingXxs,
           ...contentContainer,
         },
+        bubbleContentContainer: {
+          alignSelf: alignment === 'left' ? 'flex-start' : 'flex-end',
+          ...bubbleContentContainer,
+        },
+        bubbleErrorContainer: {
+          position: 'absolute',
+          top: 8,
+          right: -12,
+          ...bubbleErrorContainer,
+        },
+        bubbleReactionListTopContainer: {
+          alignSelf: alignment === 'left' ? 'flex-end' : 'flex-start',
+          ...bubbleReactionListTopContainer,
+        },
+        bubbleWrapper: {
+          ...bubbleWrapper,
+        },
         repliesContainer: {
           marginTop: -primitives.spacingXxs, // Reducing the margin to account the gap added in the content container
           ...repliesContainer,
@@ -90,7 +112,18 @@ const useStyles = ({
           ...rightAlignItems,
         },
       }),
-    [alignment, container, contentContainer, leftAlignItems, repliesContainer, rightAlignItems],
+    [
+      alignment,
+      bubbleContentContainer,
+      bubbleErrorContainer,
+      bubbleReactionListTopContainer,
+      bubbleWrapper,
+      container,
+      contentContainer,
+      leftAlignItems,
+      repliesContainer,
+      rightAlignItems,
+    ],
   );
 
   const groupStylesMap = useMemo(() => {
@@ -150,6 +183,10 @@ const useStyles = ({
 
   return {
     container: containerStyle,
+    bubbleContentContainer: styles.bubbleContentContainer,
+    bubbleErrorContainer: styles.bubbleErrorContainer,
+    bubbleReactionListTopContainer: styles.bubbleReactionListTopContainer,
+    bubbleWrapper: styles.bubbleWrapper,
     contentContainer: styles.contentContainer,
     repliesContainer: styles.repliesContainer,
     leftAlignItems: styles.leftAlignItems,
@@ -168,6 +205,7 @@ export type MessageItemViewPropsWithContext = Pick<
   | 'otherAttachments'
   | 'setQuotedMessage'
   | 'lastGroupMessage'
+  | 'contextMenuAnchorRef'
   | 'members'
 > &
   Pick<
@@ -190,181 +228,162 @@ export type MessageItemViewPropsWithContext = Pick<
     | 'reactionListPosition'
     | 'reactionListType'
     | 'ReactionListTop'
-  > & {
-    /**
-     * Will determine whether the swipeable wrapper is always rendered for each
-     * message. If set to false, the animated wrapper will be rendered only when
-     * a swiping gesture is active and not otherwise.
-     * Since stateful components would lose their state if we remount them while
-     * an animation is happening, this should always be set to true in those instances.
-     */
-    shouldRenderSwipeableWrapper: boolean;
-  };
+  >;
 
-const MessageItemViewWithContext = forwardRef<View, MessageItemViewPropsWithContext>(
-  (props, ref) => {
-    const [messageContentWidth, setMessageContentWidth] = useState(0);
-    const { width } = Dimensions.get('screen');
-    const {
-      alignment,
-      channel,
-      customMessageSwipeAction,
-      enableMessageGroupingByUser,
-      enableSwipeToReply,
-      groupStyles,
-      isMyMessage,
-      message,
-      MessageAuthor,
-      MessageContent,
-      MessageDeleted,
-      MessageError,
-      MessageFooter,
-      MessageHeader,
-      MessageReplies,
-      MessageSpacer,
-      MessageSwipeContent,
-      messageSwipeToReplyHitSlop = { left: width, right: width },
-      onlyEmojis,
-      otherAttachments,
-      ReactionListBottom,
-      reactionListPosition,
-      reactionListType,
-      ReactionListTop,
-      shouldRenderSwipeableWrapper,
-      setQuotedMessage,
-    } = props;
-
-    const {
-      theme: {
-        semantics,
-        messageItemView: {
-          content: { errorContainer },
-        },
+const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
+  const { width } = Dimensions.get('screen');
+  const {
+    alignment,
+    channel,
+    contextMenuAnchorRef,
+    customMessageSwipeAction,
+    enableMessageGroupingByUser,
+    enableSwipeToReply,
+    groupStyles,
+    isMyMessage,
+    message,
+    MessageAuthor,
+    MessageContent,
+    MessageDeleted,
+    MessageError,
+    MessageFooter,
+    MessageHeader,
+    MessageReplies,
+    MessageSpacer,
+    MessageSwipeContent,
+    messageSwipeToReplyHitSlop = { left: width, right: width },
+    onlyEmojis,
+    otherAttachments,
+    ReactionListBottom,
+    reactionListPosition,
+    reactionListType,
+    ReactionListTop,
+    setQuotedMessage,
+  } = props;
+
+  const {
+    theme: {
+      semantics,
+      messageItemView: {
+        content: { errorContainer },
       },
-    } = useTheme();
-
-    const {
-      isMessageErrorType,
-      isMessageReceivedOrErrorType,
-      isMessageTypeDeleted,
-      isVeryLastMessage,
-      messageGroupedSingle,
-      messageGroupedBottom,
-      messageGroupedTop,
-      messageGroupedSingleOrBottom,
-      messageGroupedMiddle,
-    } = useMessageData({});
-
-    const styles = useStyles({
-      alignment,
-      isVeryLastMessage,
-      messageGroupedSingle,
-      messageGroupedBottom,
-      messageGroupedTop,
-      messageGroupedMiddle,
-      enableMessageGroupingByUser,
-    });
-
-    const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
-
-    let noBorder = onlyEmojis && !message.quoted_message;
-    if (otherAttachments.length) {
-      if (otherAttachments[0].type === 'giphy' && !isMyMessage) {
-        noBorder = false;
-      } else {
-        noBorder = true;
-      }
+    },
+  } = useTheme();
+
+  const {
+    isMessageErrorType,
+    isMessageReceivedOrErrorType,
+    isMessageTypeDeleted,
+    isVeryLastMessage,
+    messageGroupedSingle,
+    messageGroupedBottom,
+    messageGroupedTop,
+    messageGroupedSingleOrBottom,
+    messageGroupedMiddle,
+  } = useMessageData({});
+
+  const styles = useStyles({
+    alignment,
+    isVeryLastMessage,
+    messageGroupedSingle,
+    messageGroupedBottom,
+    messageGroupedTop,
+    messageGroupedMiddle,
+    enableMessageGroupingByUser,
+  });
+
+  const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+
+  let noBorder = onlyEmojis && !message.quoted_message;
+  if (otherAttachments.length) {
+    if (otherAttachments[0].type === 'giphy' && !isMyMessage) {
+      noBorder = false;
+    } else {
+      noBorder = true;
     }
+  }
 
-    let backgroundColor = semantics.chatBgOutgoing;
-    if (onlyEmojis && !message.quoted_message) {
+  let backgroundColor = semantics.chatBgOutgoing;
+  if (onlyEmojis && !message.quoted_message) {
+    backgroundColor = 'transparent';
+  } else if (otherAttachments.length) {
+    if (otherAttachments[0].type === 'giphy') {
       backgroundColor = 'transparent';
-    } else if (otherAttachments.length) {
-      if (otherAttachments[0].type === 'giphy') {
-        backgroundColor = 'transparent';
-      }
-    } else if (isMessageReceivedOrErrorType) {
-      backgroundColor = semantics.chatBgIncoming;
     }
+  } else if (isMessageReceivedOrErrorType) {
+    backgroundColor = semantics.chatBgIncoming;
+  }
 
-    const onSwipeActionHandler = useStableCallback(() => {
-      if (customMessageSwipeAction) {
-        customMessageSwipeAction({ channel, message });
-        return;
-      }
-      setQuotedMessage(message);
-    });
-
-    return (
-      <View ref={ref}>
-        <View pointerEvents='box-none' style={styles.container} testID='message-item-view-wrapper'>
-          {alignment === 'left' ? <MessageAuthor /> : null}
-          {isMessageTypeDeleted ? (
-            <MessageDeleted date={message.created_at} groupStyle={groupStyle} />
-          ) : (
-            <View
-              style={[
-                styles.contentContainer,
-                isMyMessage ? styles.rightAlignItems : styles.leftAlignItems,
-                isMessageErrorType ? errorContainer : {},
-              ]}
-              testID='message-components'
-            >
-              <MessageHeader />
-              {enableSwipeToReply ? (
-                <SwipableMessageBubble
-                  alignment={alignment}
-                  backgroundColor={backgroundColor}
-                  isVeryLastMessage={isVeryLastMessage}
-                  MessageContent={MessageContent}
-                  messageContentWidth={messageContentWidth}
-                  messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-                  MessageSwipeContent={MessageSwipeContent}
-                  MessageError={MessageError}
-                  messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
-                  noBorder={noBorder}
-                  onSwipe={onSwipeActionHandler}
-                  reactionListPosition={reactionListPosition}
-                  reactionListType={reactionListType}
-                  ReactionListTop={ReactionListTop}
-                  setMessageContentWidth={setMessageContentWidth}
-                  shouldRenderSwipeableWrapper={shouldRenderSwipeableWrapper}
-                  message={message}
-                />
-              ) : (
-                <MessageBubble
-                  alignment={alignment}
-                  backgroundColor={backgroundColor}
-                  isVeryLastMessage={isVeryLastMessage}
-                  MessageContent={MessageContent}
-                  MessageError={MessageError}
-                  messageContentWidth={messageContentWidth}
-                  messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-                  noBorder={noBorder}
-                  reactionListPosition={reactionListPosition}
-                  ReactionListTop={ReactionListTop}
-                  reactionListType={reactionListType}
-                  setMessageContentWidth={setMessageContentWidth}
-                  message={message}
-                />
-              )}
-
-              <View style={styles.repliesContainer}>
-                <MessageReplies />
+  const onSwipeActionHandler = useStableCallback(() => {
+    if (customMessageSwipeAction) {
+      customMessageSwipeAction({ channel, message });
+      return;
+    }
+    setQuotedMessage(message);
+  });
+
+  const itemViewContent = (
+    <View pointerEvents='box-none' style={styles.container} testID='message-item-view-wrapper'>
+      {alignment === 'left' ? <MessageAuthor /> : null}
+      {isMessageTypeDeleted ? (
+        <MessageDeleted date={message.created_at} groupStyle={groupStyle} />
+      ) : (
+        <View
+          style={[
+            styles.contentContainer,
+            isMyMessage ? styles.rightAlignItems : styles.leftAlignItems,
+            isMessageErrorType ? errorContainer : {},
+          ]}
+          testID='message-components'
+        >
+          <MessageHeader />
+          <View style={styles.bubbleWrapper}>
+            {reactionListPosition === 'top' && ReactionListTop ? (
+              <View style={styles.bubbleReactionListTopContainer}>
+                <ReactionListTop type={reactionListType} />
               </View>
-
-              {reactionListPosition === 'bottom' && ReactionListBottom ? (
-                <ReactionListBottom type={reactionListType} />
+            ) : null}
+            <View ref={contextMenuAnchorRef} style={styles.bubbleContentContainer}>
+              <MessageContent
+                backgroundColor={backgroundColor}
+                isVeryLastMessage={isVeryLastMessage}
+                messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
+                noBorder={noBorder}
+              />
+              {isMessageErrorType ? (
+                <View style={styles.bubbleErrorContainer}>
+                  <MessageError />
+                </View>
               ) : null}
-              <MessageFooter date={message.created_at} />
             </View>
-          )}
-          {MessageSpacer ? <MessageSpacer /> : null}
+          </View>
+
+          <View style={styles.repliesContainer}>
+            <MessageReplies />
+          </View>
+
+          {reactionListPosition === 'bottom' && ReactionListBottom ? (
+            <ReactionListBottom type={reactionListType} />
+          ) : null}
+          <MessageFooter date={message.created_at} />
         </View>
-      </View>
-    );
-  },
-);
+      )}
+      {MessageSpacer ? <MessageSpacer /> : null}
+    </View>
+  );
+
+  return enableSwipeToReply && !isMessageTypeDeleted ? (
+    <SwipableMessageWrapper
+      MessageSwipeContent={MessageSwipeContent}
+      messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
+      onSwipe={onSwipeActionHandler}
+    >
+      {itemViewContent}
+    </SwipableMessageWrapper>
+  ) : (
+    itemViewContent
+  );
+};
 
 const areEqual = (
   prevProps: MessageItemViewPropsWithContext,
@@ -495,16 +514,16 @@ export type MessageItemViewProps = Partial<MessageItemViewPropsWithContext>;
  *
  * Message UI component
  */
-export const MessageItemView = forwardRef<View, MessageItemViewProps>((props, ref) => {
+export const MessageItemView = (props: MessageItemViewProps) => {
   const {
     alignment,
     channel,
     groupStyles,
     isMyMessage,
     message,
+    contextMenuAnchorRef,
     onlyEmojis,
     otherAttachments,
-    isMessageAIGenerated,
     setQuotedMessage,
     lastGroupMessage,
     members,
@@ -530,17 +549,13 @@ export const MessageItemView = forwardRef<View, MessageItemViewProps>((props, re
     reactionListType,
     ReactionListTop,
   } = useMessagesContext();
-  const isAIGenerated = useMemo(
-    () => isMessageAIGenerated(message),
-    [message, isMessageAIGenerated],
-  );
-  const shouldRenderSwipeableWrapper = (message?.attachments || []).length > 0 || isAIGenerated;
 
   return (
     <MemoizedMessageItemView
       {...{
         alignment,
         channel,
+        contextMenuAnchorRef,
         customMessageSwipeAction,
         enableMessageGroupingByUser,
         enableSwipeToReply,
@@ -565,14 +580,12 @@ export const MessageItemView = forwardRef<View, MessageItemViewProps>((props, re
         reactionListType,
         ReactionListTop,
         setQuotedMessage,
-        shouldRenderSwipeableWrapper,
         lastGroupMessage,
         members,
       }}
-      ref={ref}
       {...props}
     />
   );
-});
+};
 
 MessageItemView.displayName = 'MessageItemView{messageItemView{container}}';

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

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import {
   MessageContextValue,
@@ -22,6 +22,7 @@ import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 export type MessageRepliesPropsWithContext = Pick<
   MessageContextValue,
   | 'alignment'
+  | 'isMyMessage'
   | 'message'
   | 'onLongPress'
   | 'onPress'
@@ -36,6 +37,7 @@ export type MessageRepliesPropsWithContext = Pick<
 const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
   const {
     alignment,
+    isMyMessage,
     message,
     MessageRepliesAvatars,
     onLongPress,
@@ -57,15 +59,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 +112,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 +126,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
               })}
         </Text>
       </Pressable>
-      {alignment === 'right' && (
-        <ReplyConnectorRight
-          height={48}
-          width={16}
-          stroke={semantics.chatThreadConnectorOutgoing}
-        />
-      )}
+      {alignment === 'right' ? connector : null}
     </View>
   );
 };
@@ -171,6 +181,7 @@ export type MessageRepliesProps = Partial<MessageRepliesPropsWithContext>;
 export const MessageReplies = (props: MessageRepliesProps) => {
   const {
     alignment,
+    isMyMessage,
     message,
     onLongPress,
     onOpenThread,
@@ -186,6 +197,7 @@ export const MessageReplies = (props: MessageRepliesProps) => {
     <MemoizedMessageReplies
       {...{
         alignment,
+        isMyMessage,
         message,
         MessageRepliesAvatars,
         onLongPress,

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

@@ -6,14 +6,10 @@ import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 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';
@@ -21,14 +17,10 @@ import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 export type MessageStatusPropsWithContext = Pick<
   MessageContextValue,
   'deliveredToCount' | 'message' | 'readBy'
-> &
-  Pick<MessagesContextValue, 'MessageTimestamp'> & {
-    formattedDate?: string | Date;
-    timestamp?: string | Date;
-  };
+>;
 
 const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
-  const { deliveredToCount, formattedDate, message, readBy, timestamp, MessageTimestamp } = props;
+  const { deliveredToCount, message, readBy } = props;
 
   const styles = useStyles();
 
@@ -92,7 +84,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
           {...checkIcon}
         />
       ) : null}
-      <MessageTimestamp formattedDate={formattedDate} timestamp={timestamp} />
     </View>
   );
 };
@@ -101,20 +92,8 @@ const areEqual = (
   prevProps: MessageStatusPropsWithContext,
   nextProps: MessageStatusPropsWithContext,
 ) => {
-  const {
-    deliveredToCount: prevDeliveredBy,
-    message: prevMessage,
-    readBy: prevReadBy,
-    formattedDate: prevFormattedDate,
-    timestamp: prevTimestamp,
-  } = prevProps;
-  const {
-    deliveredToCount: nextDeliveredBy,
-    message: nextMessage,
-    readBy: nextReadBy,
-    formattedDate: nextFormattedDate,
-    timestamp: nextTimestamp,
-  } = nextProps;
+  const { deliveredToCount: prevDeliveredBy, message: prevMessage, readBy: prevReadBy } = prevProps;
+  const { deliveredToCount: nextDeliveredBy, message: nextMessage, readBy: nextReadBy } = nextProps;
 
   const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
   if (!deliveredByEqual) {
@@ -132,16 +111,6 @@ const areEqual = (
     return false;
   }
 
-  const timestampEqual = prevTimestamp === nextTimestamp;
-  if (!timestampEqual) {
-    return false;
-  }
-
-  const formattedDateEqual = prevFormattedDate === nextFormattedDate;
-  if (!formattedDateEqual) {
-    return false;
-  }
-
   return true;
 };
 
@@ -155,7 +124,6 @@ export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
 export const MessageStatus = (props: MessageStatusProps) => {
   const { channel } = useChannelContext();
   const { deliveredToCount, message, readBy } = useMessageContext();
-  const { MessageTimestamp } = useMessagesContext();
 
   const channelMembersCount = Object.keys(channel?.state.members).length;
 
@@ -167,7 +135,6 @@ export const MessageStatus = (props: MessageStatusProps) => {
         deliveredToCount,
         message,
         readBy,
-        MessageTimestamp,
       }}
       {...props}
     />