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

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

@@ -0,0 +1,238 @@
+import React, { ReactNode, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { MessageContentProps } from './MessageContent';
+import { MessageItemViewPropsWithContext } from './MessageItemView';
+
+import { MessagesContextValue, useTheme } from '../../../contexts';
+
+import { NativeHandlers } from '../../../native';
+import { MessageStatusTypes } from '../../../utils/utils';
+
+export type MessageBubbleProps = Pick<
+  MessagesContextValue,
+  | 'reactionListPosition'
+  | 'MessageContent'
+  | 'ReactionListTop'
+  | 'MessageError'
+  | 'reactionListType'
+> &
+  Pick<
+    MessageContentProps,
+    | 'isVeryLastMessage'
+    | 'backgroundColor'
+    | 'messageGroupedSingleOrBottom'
+    | 'noBorder'
+    | 'message'
+  > &
+  Pick<MessageItemViewPropsWithContext, 'alignment'>;
+
+export const MessageBubble = React.memo(
+  ({
+    alignment,
+    reactionListPosition,
+    reactionListType,
+    MessageContent,
+    ReactionListTop,
+    backgroundColor,
+    isVeryLastMessage,
+    messageGroupedSingleOrBottom,
+    noBorder,
+    MessageError,
+    message,
+  }: MessageBubbleProps) => {
+    const styles = useStyles({ alignment });
+    const isMessageErrorType =
+      message?.type === 'error' || message?.status === MessageStatusTypes.FAILED;
+
+    return (
+      <View style={styles.wrapper}>
+        {reactionListPosition === 'top' && ReactionListTop ? (
+          <View style={styles.reactionListTopContainer}>
+            <ReactionListTop type={reactionListType} />
+          </View>
+        ) : null}
+        <View style={styles.contentContainer}>
+          <MessageContent
+            backgroundColor={backgroundColor}
+            isVeryLastMessage={isVeryLastMessage}
+            messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
+            noBorder={noBorder}
+          />
+
+          {isMessageErrorType ? (
+            <View style={styles.errorContainer}>
+              <MessageError />
+            </View>
+          ) : null}
+        </View>
+      </View>
+    );
+  },
+);
+
+const AnimatedWrapper = Animated.createAnimatedComponent(View);
+
+type SwipableMessageWrapperProps = Pick<MessagesContextValue, 'MessageSwipeContent'> &
+  Pick<MessageItemViewPropsWithContext, 'alignment' | 'messageSwipeToReplyHitSlop'> & {
+    children: ReactNode;
+    onSwipe: () => void;
+  };
+
+export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
+  const { MessageSwipeContent, children, messageSwipeToReplyHitSlop, onSwipe } = props;
+
+  const styles = useStyles({ alignment: props.alignment });
+
+  const translateX = useSharedValue(0);
+  const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
+  const isSwiping = useSharedValue<boolean>(false);
+  const [shouldRenderAnimatedWrapper, setShouldRenderAnimatedWrapper] = useState<boolean>(false);
+
+  const SWIPABLE_THRESHOLD = 25;
+  const MINIMUM_DISTANCE = 8;
+
+  const triggerHaptic = NativeHandlers.triggerHaptic;
+
+  const swipeGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .hitSlop(messageSwipeToReplyHitSlop)
+        .onBegin((event) => {
+          touchStart.value = { x: event.x, y: event.y };
+        })
+        .onTouchesMove((event, state) => {
+          if (!touchStart.value || !event.changedTouches.length) {
+            state.fail();
+            return;
+          }
+
+          const xDiff = Math.abs(event.changedTouches[0].x - touchStart.value.x);
+          const yDiff = Math.abs(event.changedTouches[0].y - touchStart.value.y);
+          const isHorizontalPanning = xDiff > yDiff;
+          const hasMinimumDistance = xDiff > MINIMUM_DISTANCE || yDiff > MINIMUM_DISTANCE;
+
+          // Only activate if there's significant horizontal movement
+          if (isHorizontalPanning && hasMinimumDistance) {
+            state.activate();
+            if (!isSwiping.value) {
+              runOnJS(setShouldRenderAnimatedWrapper)(true);
+            }
+            isSwiping.value = true;
+          } else if (hasMinimumDistance) {
+            // If there's significant movement but not horizontal, fail the gesture
+            state.fail();
+          }
+        })
+        .onStart(() => {
+          translateX.value = 0;
+        })
+        .onChange(({ translationX }) => {
+          if (translationX > 0) {
+            translateX.value = translationX;
+          }
+        })
+        .onEnd(() => {
+          if (translateX.value >= SWIPABLE_THRESHOLD) {
+            runOnJS(onSwipe)();
+            if (triggerHaptic) {
+              runOnJS(triggerHaptic)('impactMedium');
+            }
+          }
+          isSwiping.value = false;
+          translateX.value = withSpring(
+            0,
+            {
+              dampingRatio: 1,
+              duration: 500,
+              overshootClamping: true,
+              stiffness: 1,
+            },
+            () => {
+              runOnJS(setShouldRenderAnimatedWrapper)(false);
+            },
+          );
+        }),
+    [messageSwipeToReplyHitSlop, touchStart, isSwiping, translateX, onSwipe, triggerHaptic],
+  );
+
+  const swipeContentAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: interpolate(translateX.value, [0, SWIPABLE_THRESHOLD], [0, 1]),
+      width: translateX.value,
+    }),
+    [],
+  );
+
+  return (
+    <GestureDetector gesture={swipeGesture}>
+      <View hitSlop={messageSwipeToReplyHitSlop} style={styles.contentWrapper}>
+        {shouldRenderAnimatedWrapper ? (
+          <AnimatedWrapper style={[styles.swipeContentContainer, swipeContentAnimatedStyle]}>
+            {MessageSwipeContent ? <MessageSwipeContent /> : null}
+          </AnimatedWrapper>
+        ) : null}
+        {children}
+      </View>
+    </GestureDetector>
+  );
+});
+
+const useStyles = ({ alignment }: { alignment?: 'left' | 'right' }) => {
+  const {
+    theme: {
+      messageItemView: {
+        bubble: { contentContainer, errorContainer, reactionListTopContainer, wrapper },
+        contentWrapper,
+        swipeContentContainer,
+      },
+    },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      contentWrapper: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        zIndex: 1, // To hide the stick inside the message content
+        ...contentWrapper,
+      },
+      contentContainer: {
+        alignSelf: alignment === 'left' ? 'flex-start' : 'flex-end',
+        ...contentContainer,
+      },
+      swipeContentContainer: {
+        ...swipeContentContainer,
+      },
+      errorContainer: {
+        position: 'absolute',
+        top: 8,
+        right: -12,
+        ...errorContainer,
+      },
+      reactionListTopContainer: {
+        alignSelf: alignment === 'left' ? 'flex-end' : 'flex-start',
+        ...reactionListTopContainer,
+      },
+      wrapper: {
+        ...wrapper,
+      },
+    });
+  }, [
+    alignment,
+    contentContainer,
+    contentWrapper,
+    errorContainer,
+    reactionListTopContainer,
+    swipeContentContainer,
+    wrapper,
+  ]);
+};

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

@@ -56,7 +56,7 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         footer: { container, name, editedText },
       },
     },