stream-chat-react-native-core 9.0.0-beta.1 → 9.0.0-beta.11

package/src/components/Message/{MessageSimple/MessageSimple.tsx → 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,
@@ -41,8 +41,12 @@ const useStyles = ({
 }) => {
   const {
     theme: {
-      messageSimple: {
+      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,
@@ -157,7 +194,7 @@ const useStyles = ({
   };
 };
 
-export type MessageSimplePropsWithContext = Pick<
+export type MessageItemViewPropsWithContext = Pick<
   MessageContextValue,
   | 'alignment'
   | 'channel'
@@ -168,6 +205,7 @@ export type MessageSimplePropsWithContext = Pick<
   | 'otherAttachments'
   | 'setQuotedMessage'
   | 'lastGroupMessage'
+  | 'contextMenuAnchorRef'
   | 'members'
 > &
   Pick<
@@ -176,49 +214,42 @@ export type MessageSimplePropsWithContext = Pick<
     | 'enableMessageGroupingByUser'
     | 'enableSwipeToReply'
     | 'myMessageTheme'
-    | 'MessageAvatar'
+    | 'MessageAuthor'
     | 'MessageContent'
     | 'MessageDeleted'
     | 'MessageError'
     | 'MessageFooter'
     | 'MessageHeader'
     | 'MessageReplies'
+    | 'MessageSpacer'
     | 'MessageSwipeContent'
     | 'messageSwipeToReplyHitSlop'
     | 'ReactionListBottom'
     | '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 MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>((props, ref) => {
-  const [messageContentWidth, setMessageContentWidth] = useState(0);
+const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   const { width } = Dimensions.get('screen');
   const {
     alignment,
     channel,
+    contextMenuAnchorRef,
     customMessageSwipeAction,
     enableMessageGroupingByUser,
     enableSwipeToReply,
     groupStyles,
     isMyMessage,
     message,
-    MessageAvatar,
+    MessageAuthor,
     MessageContent,
     MessageDeleted,
     MessageError,
     MessageFooter,
     MessageHeader,
     MessageReplies,
+    MessageSpacer,
     MessageSwipeContent,
     messageSwipeToReplyHitSlop = { left: width, right: width },
     onlyEmojis,
@@ -227,14 +258,13 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
     reactionListPosition,
     reactionListType,
     ReactionListTop,
-    shouldRenderSwipeableWrapper,
     setQuotedMessage,
   } = props;
 
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         content: { errorContainer },
       },
     },
@@ -292,78 +322,72 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
     setQuotedMessage(message);
   });
 
-  return (
-    <View ref={ref}>
-      <View pointerEvents='box-none' style={styles.container} testID='message-simple-wrapper'>
-        {alignment === 'left' ? <MessageAvatar /> : 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}
+  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>
+            ) : null}
+            <View ref={contextMenuAnchorRef} style={styles.bubbleContentContainer}>
+              <MessageContent
                 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 />
+              {isMessageErrorType ? (
+                <View style={styles.bubbleErrorContainer}>
+                  <MessageError />
+                </View>
+              ) : null}
             </View>
+          </View>
 
-            {reactionListPosition === 'bottom' && ReactionListBottom ? (
-              <ReactionListBottom type={reactionListType} />
-            ) : null}
-            <MessageFooter date={message.created_at} />
+          <View style={styles.repliesContainer}>
+            <MessageReplies />
           </View>
-        )}
-      </View>
+
+          {reactionListPosition === 'bottom' && ReactionListBottom ? (
+            <ReactionListBottom type={reactionListType} />
+          ) : null}
+          <MessageFooter date={message.created_at} />
+        </View>
+      )}
+      {MessageSpacer ? <MessageSpacer /> : null}
     </View>
   );
-});
+
+  return enableSwipeToReply && !isMessageTypeDeleted ? (
+    <SwipableMessageWrapper
+      MessageSwipeContent={MessageSwipeContent}
+      messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
+      onSwipe={onSwipeActionHandler}
+    >
+      {itemViewContent}
+    </SwipableMessageWrapper>
+  ) : (
+    itemViewContent
+  );
+};
 
 const areEqual = (
-  prevProps: MessageSimplePropsWithContext,
-  nextProps: MessageSimplePropsWithContext,
+  prevProps: MessageItemViewPropsWithContext,
+  nextProps: MessageItemViewPropsWithContext,
 ) => {
   const {
     channel: prevChannel,
@@ -479,27 +503,27 @@ const areEqual = (
   return true;
 };
 
-const MemoizedMessageSimple = React.memo(
-  MessageSimpleWithContext,
+const MemoizedMessageItemView = React.memo(
+  MessageItemViewWithContext,
   areEqual,
-) as typeof MessageSimpleWithContext;
+) as typeof MessageItemViewWithContext;
 
-export type MessageSimpleProps = Partial<MessageSimplePropsWithContext>;
+export type MessageItemViewProps = Partial<MessageItemViewPropsWithContext>;
 
 /**
  *
  * Message UI component
  */
-export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) => {
+export const MessageItemView = (props: MessageItemViewProps) => {
   const {
     alignment,
     channel,
     groupStyles,
     isMyMessage,
     message,
+    contextMenuAnchorRef,
     onlyEmojis,
     otherAttachments,
-    isMessageAIGenerated,
     setQuotedMessage,
     lastGroupMessage,
     members,
@@ -509,13 +533,14 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
     customMessageSwipeAction,
     enableMessageGroupingByUser,
     enableSwipeToReply,
-    MessageAvatar,
+    MessageAuthor,
     MessageContent,
     MessageDeleted,
     MessageError,
     MessageFooter,
     MessageHeader,
     MessageReplies,
+    MessageSpacer,
     MessageSwipeContent,
     messageSwipeToReplyHitSlop,
     myMessageTheme,
@@ -524,30 +549,27 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
     reactionListType,
     ReactionListTop,
   } = useMessagesContext();
-  const isAIGenerated = useMemo(
-    () => isMessageAIGenerated(message),
-    [message, isMessageAIGenerated],
-  );
-  const shouldRenderSwipeableWrapper = (message?.attachments || []).length > 0 || isAIGenerated;
 
   return (
-    <MemoizedMessageSimple
+    <MemoizedMessageItemView
       {...{
         alignment,
         channel,
+        contextMenuAnchorRef,
         customMessageSwipeAction,
         enableMessageGroupingByUser,
         enableSwipeToReply,
         groupStyles,
         isMyMessage,
         message,
-        MessageAvatar,
+        MessageAuthor,
         MessageContent,
         MessageDeleted,
         MessageError,
         MessageFooter,
         MessageHeader,
         MessageReplies,
+        MessageSpacer,
         MessageSwipeContent,
         messageSwipeToReplyHitSlop,
         myMessageTheme,
@@ -558,14 +580,12 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
         reactionListType,
         ReactionListTop,
         setQuotedMessage,
-        shouldRenderSwipeableWrapper,
         lastGroupMessage,
         members,
       }}
-      ref={ref}
       {...props}
     />
   );
-});
+};
 
-MessageSimple.displayName = 'MessageSimple{messageSimple{container}}';
+MessageItemView.displayName = 'MessageItemView{messageItemView{container}}';

package/src/components/Message/{MessageSimple → MessageItemView}/MessageReplies.tsx

@@ -49,7 +49,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         replies: { container, messageRepliesText, content },
       },
       semantics,
@@ -201,7 +201,7 @@ export const MessageReplies = (props: MessageRepliesProps) => {
   );
 };
 
-MessageReplies.displayName = 'MessageReplies{messageSimple{replies}}';
+MessageReplies.displayName = 'MessageReplies{messageItemView{replies}}';
 
 const useStyles = () => {
   const {

package/src/components/Message/{MessageSimple → MessageItemView}/MessageRepliesAvatars.tsx

@@ -15,7 +15,7 @@ export const MessageRepliesAvatarsWithContext = (props: MessageRepliesAvatarsPro
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         replies: { avatarStackContainer },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/MessageStatus.tsx

@@ -6,10 +6,6 @@ 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';
@@ -21,20 +17,16 @@ 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();
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         status: { checkAllIcon, checkIcon, container, timeIcon },
       },
       semantics,
@@ -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,14 +135,13 @@ export const MessageStatus = (props: MessageStatusProps) => {
         deliveredToCount,
         message,
         readBy,
-        MessageTimestamp,
       }}
       {...props}
     />
   );
 };
 
-MessageStatus.displayName = 'MessageStatus{messageSimple{status}}';
+MessageStatus.displayName = 'MessageStatus{messageItemView{status}}';
 
 const useStyles = () => {
   const {

package/src/components/Message/{MessageSimple → MessageItemView}/MessageSwipeContent.tsx

@@ -21,7 +21,7 @@ export const MessageSwipeContent = () => {
 const useStyles = () => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         swipeLeftContent: { container },
       },
       semantics,

package/src/components/Message/{MessageSimple → MessageItemView}/MessageTextContainer.tsx

@@ -63,7 +63,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         content: {
           markdown,
           textContainer: { onlyEmojiMarkdown, ...textContainer },
@@ -208,4 +208,4 @@ export const MessageTextContainer = (props: MessageTextContainerProps) => {
   );
 };
 
-MessageTextContainer.displayName = 'MessageTextContainer{messageSimple{content}}';
+MessageTextContainer.displayName = 'MessageTextContainer{messageItemView{content}}';

package/src/components/Message/{MessageSimple → MessageItemView}/MessageTimestamp.tsx

@@ -62,7 +62,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         content: { timestampText },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/ReactionList/ReactionListBottom.tsx

@@ -161,7 +161,7 @@ const useStyles = ({
 }) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         reactionListBottom: { contentContainer, columnWrapper, rowSeparator },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/ReactionList/ReactionListClustered.tsx

@@ -59,7 +59,7 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         reactionListClustered: { icon },
       },
     },
@@ -181,7 +181,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         reactionListClustered: { contentContainer, reactionCount, iconStyle },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/ReactionList/ReactionListItem.tsx

@@ -60,7 +60,7 @@ export const ReactionListItem = (props: ReactionListItemProps) => {
   } = props;
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         reactionListItem: { icon },
       },
     },
@@ -200,7 +200,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         reactionListItem: { reactionCount },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/ReactionList/ReactionListItemWrapper.tsx

@@ -42,7 +42,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         reactionListItemWrapper: { wrapper, container },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/ReactionList/ReactionListTop.tsx

@@ -157,7 +157,7 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
 const useStyles = ({ alignment }: { alignment: 'left' | 'right' }) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         reactionListTop: { container, position, contentContainer, list },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/StreamingMessageView.tsx

@@ -25,4 +25,4 @@ export const StreamingMessageView = (props: StreamingMessageViewProps) => {
   return <MessageTextContainer message={{ ...message, text: streamedMessageText }} />;
 };
 
-StreamingMessageView.displayName = 'StreamingMessageView{messageSimple{content}}';
+StreamingMessageView.displayName = 'StreamingMessageView{messageItemView{content}}';