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

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

@@ -1,12 +1,5 @@
 import React, { useMemo } from 'react';
-import {
-  AnimatableNumericValue,
-  ColorValue,
-  LayoutChangeEvent,
-  Pressable,
-  StyleSheet,
-  View,
-} from 'react-native';
+import { AnimatableNumericValue, ColorValue, Pressable, StyleSheet, View } from 'react-native';
 
 import { MessageTextContainer } from './MessageTextContainer';
 
@@ -57,6 +50,7 @@ const useReplyStyles = () => {
 
 export type MessageContentPropsWithContext = Pick<
   MessageContextValue,
+  | 'alignment'
   | 'goToMessage'
   | 'groupStyles'
   | 'isMyMessage'
@@ -78,13 +72,16 @@ export type MessageContentPropsWithContext = Pick<
     | 'FileAttachmentGroup'
     | 'Gallery'
     | 'isAttachmentEqual'
+    | 'MessageContentBottomView'
+    | 'MessageContentLeadingView'
     | 'MessageLocation'
+    | 'MessageContentTrailingView'
+    | 'MessageContentTopView'
     | 'myMessageTheme'
     | 'Reply'
     | 'StreamingMessageView'
   > &
   Pick<TranslationContextValue, 't'> & {
-    setMessageContentWidth: React.Dispatch<React.SetStateAction<number>>;
     /**
      * Background color for the message content
      */
@@ -112,11 +109,12 @@ export type MessageContentPropsWithContext = Pick<
   };
 
 /**
- * Child of MessageSimple that displays a message's content
+ * Child of MessageItemView that displays a message's content
  */
 const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   const {
     additionalPressableProps,
+    alignment,
     Attachment,
     backgroundColor,
     enableMessageGroupingByUser,
@@ -128,8 +126,12 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     isVeryLastMessage,
     message,
     messageContentOrder,
+    MessageContentBottomView,
+    MessageContentLeadingView,
     messageGroupedSingleOrBottom = false,
     MessageLocation,
+    MessageContentTrailingView,
+    MessageContentTopView,
     noBorder,
     onLongPress,
     onPress,
@@ -137,7 +139,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     otherAttachments,
     preventPress,
     Reply,
-    setMessageContentWidth,
     StreamingMessageView,
     hidePaddingTop,
     hidePaddingHorizontal,
@@ -149,7 +150,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         content: {
           container: {
             borderBottomLeftRadius,
@@ -171,14 +172,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     },
   } = useTheme();
 
-  const onLayout: (event: LayoutChangeEvent) => void = ({
-    nativeEvent: {
-      layout: { width },
-    },
-  }) => {
-    setMessageContentWidth(width);
-  };
-
   const isAIGenerated = useMemo(
     () => isMessageAIGenerated(message),
     [message, isMessageAIGenerated],
@@ -227,6 +220,83 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   };
 
   const { setNativeScrollability } = useMessageListItemContext();
+  const hasContentSideViews = !!(MessageContentLeadingView || MessageContentTrailingView);
+
+  const contentBody = (
+    <>
+      <View
+        style={[
+          {
+            gap: primitives.spacingXs,
+            paddingTop: hidePaddingTop ? 0 : primitives.spacingXs,
+            paddingHorizontal: hidePaddingHorizontal ? 0 : primitives.spacingXs,
+            paddingBottom: hidePaddingBottom ? 0 : primitives.spacingXs,
+          },
+          contentContainer,
+        ]}
+      >
+        {messageContentOrder.map((messageContentType, messageContentOrderIndex) => {
+          switch (messageContentType) {
+            case 'quoted_reply':
+              return (
+                message.quoted_message && (
+                  <View
+                    key={`quoted_reply_${messageContentOrderIndex}`}
+                    style={[styles.replyContainer, replyContainer]}
+                  >
+                    <Reply mode='reply' styles={replyStyles} />
+                  </View>
+                )
+              );
+            case 'attachments':
+              return otherAttachments.map((attachment, attachmentIndex) => (
+                <Attachment attachment={attachment} key={`${message.id}-${attachmentIndex}`} />
+              ));
+            case 'files':
+              return (
+                <FileAttachmentGroup key={`file_attachment_group_${messageContentOrderIndex}`} />
+              );
+            case 'gallery':
+              return (
+                <View key={`gallery_${messageContentOrderIndex}`} style={styles.galleryContainer}>
+                  <Gallery />
+                </View>
+              );
+            case 'poll': {
+              const pollId = message.poll_id;
+              const poll = pollId && client.polls.fromState(pollId);
+              return pollId && poll ? (
+                <Poll
+                  key={`poll_${message.poll_id}`}
+                  message={message}
+                  poll={poll}
+                  PollContent={PollContentOverride}
+                />
+              ) : null;
+            }
+            case 'location':
+              return MessageLocation ? (
+                <MessageLocation
+                  key={`message_location_${messageContentOrderIndex}`}
+                  message={message}
+                />
+              ) : null;
+            case 'ai_text':
+              return isAIGenerated ? (
+                <StreamingMessageView
+                  key={`ai_message_text_container_${messageContentOrderIndex}`}
+                />
+              ) : null;
+            default:
+              return null;
+          }
+        })}
+      </View>
+      {(otherAttachments.length && otherAttachments[0].actions) || isAIGenerated ? null : (
+        <MessageTextContainer />
+      )}
+    </>
+  );
 
   return (
     <Pressable
@@ -265,7 +335,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
         }
       }}
     >
-      <View onLayout={onLayout} style={wrapper}>
+      <View style={wrapper}>
         <View
           style={[
             styles.containerInner,
@@ -284,82 +354,23 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
           ]}
           testID='message-content-wrapper'
         >
-          <View
-            style={[
-              {
-                gap: primitives.spacingXs,
-                paddingTop: hidePaddingTop ? 0 : primitives.spacingXs,
-                paddingHorizontal: hidePaddingHorizontal ? 0 : primitives.spacingXs,
-                paddingBottom: hidePaddingBottom ? 0 : primitives.spacingXs,
-              },
-              contentContainer,
-            ]}
-          >
-            {messageContentOrder.map((messageContentType, messageContentOrderIndex) => {
-              switch (messageContentType) {
-                case 'quoted_reply':
-                  return (
-                    message.quoted_message && (
-                      <View
-                        key={`quoted_reply_${messageContentOrderIndex}`}
-                        style={[styles.replyContainer, replyContainer]}
-                      >
-                        <Reply mode='reply' styles={replyStyles} />
-                      </View>
-                    )
-                  );
-                case 'attachments':
-                  return otherAttachments.map((attachment, attachmentIndex) => (
-                    <Attachment attachment={attachment} key={`${message.id}-${attachmentIndex}`} />
-                  ));
-                case 'files':
-                  return (
-                    <FileAttachmentGroup
-                      key={`file_attachment_group_${messageContentOrderIndex}`}
-                    />
-                  );
-                case 'gallery':
-                  return (
-                    <View
-                      key={`gallery_${messageContentOrderIndex}`}
-                      style={styles.galleryContainer}
-                    >
-                      <Gallery />
-                    </View>
-                  );
-                case 'poll': {
-                  const pollId = message.poll_id;
-                  const poll = pollId && client.polls.fromState(pollId);
-                  return pollId && poll ? (
-                    <Poll
-                      key={`poll_${message.poll_id}`}
-                      message={message}
-                      poll={poll}
-                      PollContent={PollContentOverride}
-                    />
-                  ) : null;
-                }
-                case 'location':
-                  return MessageLocation ? (
-                    <MessageLocation
-                      key={`message_location_${messageContentOrderIndex}`}
-                      message={message}
-                    />
-                  ) : null;
-                case 'ai_text':
-                  return isAIGenerated ? (
-                    <StreamingMessageView
-                      key={`ai_message_text_container_${messageContentOrderIndex}`}
-                    />
-                  ) : null;
-                default:
-                  return null;
-              }
-            })}
-          </View>
-          {(otherAttachments.length && otherAttachments[0].actions) || isAIGenerated ? null : (
-            <MessageTextContainer />
+          {MessageContentTopView ? <MessageContentTopView /> : null}
+          {hasContentSideViews ? (
+            <View
+              style={[
+                styles.contentRow,
+                alignment === 'right' ? styles.rightAlignContentRow : undefined,
+              ]}
+              testID='message-content-row'
+            >
+              {MessageContentLeadingView ? <MessageContentLeadingView /> : null}
+              <View style={styles.contentBody}>{contentBody}</View>
+              {MessageContentTrailingView ? <MessageContentTrailingView /> : null}
+            </View>
+          ) : (
+            contentBody
           )}
+          {MessageContentBottomView ? <MessageContentBottomView /> : null}
         </View>
       </View>
     </Pressable>
@@ -371,6 +382,7 @@ const areEqual = (
   nextProps: MessageContentPropsWithContext,
 ) => {
   const {
+    alignment: prevAlignment,
     backgroundColor: prevBackgroundColor,
     preventPress: prevPreventPress,
     goToMessage: prevGoToMessage,
@@ -383,6 +395,7 @@ const areEqual = (
     t: prevT,
   } = prevProps;
   const {
+    alignment: nextAlignment,
     backgroundColor: nextBackgroundColor,
     preventPress: nextPreventPress,
     goToMessage: nextGoToMessage,
@@ -398,6 +411,10 @@ const areEqual = (
     return false;
   }
 
+  if (prevAlignment !== nextAlignment) {
+    return false;
+  }
+
   if (prevPreventPress !== nextPreventPress) {
     return false;
   }
@@ -517,16 +534,14 @@ const MemoizedMessageContent = React.memo(
   areEqual,
 ) as typeof MessageContentWithContext;
 
-export type MessageContentProps = Partial<
-  Omit<MessageContentPropsWithContext, 'setMessageContentWidth'>
-> &
-  Pick<MessageContentPropsWithContext, 'setMessageContentWidth'>;
+export type MessageContentProps = Partial<MessageContentPropsWithContext>;
 
 /**
- * Child of MessageSimple that displays a message's content
+ * Child of MessageItemView that displays a message's content
  */
 export const MessageContent = (props: MessageContentProps) => {
   const {
+    alignment,
     goToMessage,
     groupStyles,
     isMessageAIGenerated,
@@ -550,7 +565,11 @@ export const MessageContent = (props: MessageContentProps) => {
     FileAttachmentGroup,
     Gallery,
     isAttachmentEqual,
+    MessageContentBottomView,
+    MessageContentLeadingView,
     MessageLocation,
+    MessageContentTrailingView,
+    MessageContentTopView,
     myMessageTheme,
     Reply,
     StreamingMessageView,
@@ -593,6 +612,7 @@ export const MessageContent = (props: MessageContentProps) => {
     <MemoizedMessageContent
       {...{
         additionalPressableProps,
+        alignment,
         Attachment,
         enableMessageGroupingByUser,
         FileAttachmentGroup,
@@ -604,7 +624,11 @@ export const MessageContent = (props: MessageContentProps) => {
         isMyMessage,
         message,
         messageContentOrder,
+        MessageContentBottomView,
+        MessageContentLeadingView,
         MessageLocation,
+        MessageContentTrailingView,
+        MessageContentTopView,
         myMessageTheme,
         onLongPress,
         onPress,
@@ -633,6 +657,16 @@ const styles = StyleSheet.create({
     borderTopRightRadius: components.messageBubbleRadiusGroupBottom,
     overflow: 'hidden',
   },
+  contentBody: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  contentRow: {
+    flexDirection: 'row',
+  },
+  rightAlignContentRow: {
+    flexDirection: 'row-reverse',
+  },
   leftAlignContent: {
     justifyContent: 'flex-start',
   },

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

@@ -28,7 +28,7 @@ const MessageDeletedWithContext = (props: MessageDeletedPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         deleted: { containerInner, deletedText, container },
       },
       semantics,
@@ -125,13 +125,13 @@ export const MessageDeleted = (props: MessageDeletedProps) => {
   );
 };
 
-MessageDeleted.displayName = 'MessageDeleted{messageSimple{content}}';
+MessageDeleted.displayName = 'MessageDeleted{messageItemView{content}}';
 
 const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         deleted: { containerInner, deletedText, container },
       },
     },

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

@@ -37,7 +37,7 @@ type MessageFooterPropsWithContext = Pick<
   | 'lastGroupMessage'
   | 'isMessageAIGenerated'
 > &
-  Pick<MessagesContextValue, 'MessageStatus'> &
+  Pick<MessagesContextValue, 'MessageStatus' | 'MessageTimestamp'> &
   MessageFooterComponentProps;
 
 const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
@@ -50,13 +50,14 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
     members,
     message,
     MessageStatus,
+    MessageTimestamp,
     showMessageStatus,
   } = props;
   const styles = useStyles();
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         footer: { container, name, editedText },
       },
     },
@@ -77,9 +78,12 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
   return (
     <View style={[styles.container, container]} testID='message-status-time'>
       {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
-        <Text style={[styles.name, name]}>{message.user.name}</Text>
+        <Text numberOfLines={1} ellipsizeMode='tail' style={[styles.name, name]}>
+          {message.user.name}
+        </Text>
       ) : null}
-      {showMessageStatus && <MessageStatus formattedDate={formattedDate} timestamp={date} />}
+      {showMessageStatus ? <MessageStatus /> : null}
+      <MessageTimestamp formattedDate={formattedDate} timestamp={date} />
       {isEdited ? <Text style={[styles.editedText, editedText]}>{t('Edited')}</Text> : null}
     </View>
   );
@@ -201,6 +205,7 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       container: {
+        maxWidth: '100%',
         alignItems: 'center',
         flexDirection: 'row',
         justifyContent: 'center',
@@ -208,6 +213,7 @@ const useStyles = () => {
         gap: primitives.spacingXs,
       },
       name: {
+        flexShrink: 1,
         color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextUsername,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightSemiBold,