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

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

@@ -1,7 +1,7 @@
-import React, { forwardRef, useMemo, useState } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { Dimensions, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { MessageBubble, SwipableMessageBubble } from './MessageBubble';
+import { MessageBubble, SwipableMessageWrapper } from './MessageBubble';
 
 import {
   Alignment,
@@ -41,7 +41,7 @@ const useStyles = ({
 }) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         container,
         contentContainer,
         repliesContainer,
@@ -71,6 +71,7 @@ const useStyles = ({
           alignItems: 'flex-end',
           gap: primitives.spacingXs,
           flexDirection: alignment === 'left' ? 'row' : 'row-reverse',
+          width: '100%',
           ...container,
         },
         contentContainer: {
@@ -157,7 +158,7 @@ const useStyles = ({
   };
 };
 
-export type MessageSimplePropsWithContext = Pick<
+export type MessageItemViewPropsWithContext = Pick<
   MessageContextValue,
   | 'alignment'
   | 'channel'
@@ -176,126 +177,117 @@ 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 { width } = Dimensions.get('screen');
-  const {
-    alignment,
-    channel,
-    customMessageSwipeAction,
-    enableMessageGroupingByUser,
-    enableSwipeToReply,
-    groupStyles,
-    isMyMessage,
-    message,
-    MessageAvatar,
-    MessageContent,
-    MessageDeleted,
-    MessageError,
-    MessageFooter,
-    MessageHeader,
-    MessageReplies,
-    MessageSwipeContent,
-    messageSwipeToReplyHitSlop = { left: width, right: width },
-    onlyEmojis,
-    otherAttachments,
-    ReactionListBottom,
-    reactionListPosition,
-    reactionListType,
-    ReactionListTop,
-    shouldRenderSwipeableWrapper,
-    setQuotedMessage,
-  } = props;
-
-  const {
-    theme: {
-      semantics,
-      messageSimple: {
-        content: { errorContainer },
+  >;
+
+const MessageItemViewWithContext = forwardRef<View, MessageItemViewPropsWithContext>(
+  (props, ref) => {
+    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,
+      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) {
-    backgroundColor = 'transparent';
-  } else if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy') {
+    let backgroundColor = semantics.chatBgOutgoing;
+    if (onlyEmojis && !message.quoted_message) {
       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-simple-wrapper'>
-        {alignment === 'left' ? <MessageAvatar /> : null}
+    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} />
         ) : (
@@ -308,43 +300,19 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
             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}
-              />
-            )}
+            <MessageBubble
+              alignment={alignment}
+              backgroundColor={backgroundColor}
+              isVeryLastMessage={isVeryLastMessage}
+              MessageContent={MessageContent}
+              MessageError={MessageError}
+              messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
+              noBorder={noBorder}
+              reactionListPosition={reactionListPosition}
+              ReactionListTop={ReactionListTop}
+              reactionListType={reactionListType}
+              message={message}
+            />
 
             <View style={styles.repliesContainer}>
               <MessageReplies />
@@ -356,14 +324,32 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
             <MessageFooter date={message.created_at} />
           </View>
         )}
+        {MessageSpacer ? <MessageSpacer /> : null}
       </View>
-    </View>
-  );
-});
+    );
+
+    return (
+      <View ref={ref}>
+        {enableSwipeToReply && !isMessageTypeDeleted ? (
+          <SwipableMessageWrapper
+            alignment={alignment}
+            MessageSwipeContent={MessageSwipeContent}
+            messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
+            onSwipe={onSwipeActionHandler}
+          >
+            {itemViewContent}
+          </SwipableMessageWrapper>
+        ) : (
+          itemViewContent
+        )}
+      </View>
+    );
+  },
+);
 
 const areEqual = (
-  prevProps: MessageSimplePropsWithContext,
-  nextProps: MessageSimplePropsWithContext,
+  prevProps: MessageItemViewPropsWithContext,
+  nextProps: MessageItemViewPropsWithContext,
 ) => {
   const {
     channel: prevChannel,
@@ -479,18 +465,18 @@ 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 = forwardRef<View, MessageItemViewProps>((props, ref) => {
   const {
     alignment,
     channel,
@@ -499,7 +485,6 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
     message,
     onlyEmojis,
     otherAttachments,
-    isMessageAIGenerated,
     setQuotedMessage,
     lastGroupMessage,
     members,
@@ -509,13 +494,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,14 +510,9 @@ 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,
@@ -541,13 +522,14 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
         groupStyles,
         isMyMessage,
         message,
-        MessageAvatar,
+        MessageAuthor,
         MessageContent,
         MessageDeleted,
         MessageError,
         MessageFooter,
         MessageHeader,
         MessageReplies,
+        MessageSpacer,
         MessageSwipeContent,
         messageSwipeToReplyHitSlop,
         myMessageTheme,
@@ -558,7 +540,6 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
         reactionListType,
         ReactionListTop,
         setQuotedMessage,
-        shouldRenderSwipeableWrapper,
         lastGroupMessage,
         members,
       }}
@@ -568,4 +549,4 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
   );
 });
 
-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

@@ -34,7 +34,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         status: { checkAllIcon, checkIcon, container, timeIcon },
       },
       semantics,
@@ -174,7 +174,7 @@ export const MessageStatus = (props: MessageStatusProps) => {
   );
 };
 
-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}}';

package/src/components/Message/{MessageSimple → MessageItemView}/__tests__/Message.test.js

@@ -15,7 +15,7 @@ import { generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
-import { MessageInput } from '../../../MessageInput/MessageInput';
+import { MessageComposer } from '../../../MessageInput/MessageComposer';
 import { Message } from '../../Message';
 
 describe('Message', () => {
@@ -44,7 +44,7 @@ describe('Message', () => {
             <Chat client={chatClient}>
               <Channel channel={channel}>
                 <Message groupStyles={['bottom']} {...options} />
-                <MessageInput />
+                <MessageComposer />
               </Channel>
             </Chat>
           </OverlayProvider>
@@ -57,14 +57,14 @@ describe('Message', () => {
     cleanup();
   });
 
-  it('renders the Message and MessageSimple components', async () => {
+  it('renders the Message and MessageItemView components', async () => {
     const message = generateMessage({ user });
 
     const { getByTestId } = renderMessage({ message });
 
     await waitFor(() => {
       expect(getByTestId('message-wrapper')).toBeTruthy();
-      expect(getByTestId('message-simple-wrapper')).toBeTruthy();
+      expect(getByTestId('message-item-view-wrapper')).toBeTruthy();
     });
   });