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

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

@@ -10,35 +10,35 @@ import {
 import { generateStaticUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Chat } from '../../../Chat/Chat';
-import { MessageAvatar } from '../MessageAvatar';
+import { MessageAuthor } from '../MessageAuthor';
 
 afterEach(cleanup);
 
-describe('MessageAvatar', () => {
+describe('MessageAuthor', () => {
   let chatClient;
 
   beforeEach(async () => {
     chatClient = await getTestClientWithUser({ id: 'me' });
   });
 
-  it('should render message avatar', async () => {
+  it('should render message author', async () => {
     const staticUser = generateStaticUser(0);
     const message = generateMessage({
       user: { ...staticUser, image: undefined },
     });
     render(
       <Chat client={chatClient} style={defaultTheme}>
-        <MessageAvatar alignment='right' groupStyles={['bottom']} message={message} />
+        <MessageAuthor alignment='right' groupStyles={['bottom']} message={message} />
       </Chat>,
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-avatar')).toBeTruthy();
+      expect(screen.getByTestId('message-author')).toBeTruthy();
     });
 
     screen.rerender(
       <Chat client={chatClient} style={defaultTheme}>
-        <MessageAvatar alignment='right' groupStyles={[]} message={message} />
+        <MessageAuthor alignment='right' groupStyles={[]} message={message} />
       </Chat>,
     );
 
@@ -53,7 +53,7 @@ describe('MessageAvatar', () => {
 
     screen.rerender(
       <Chat client={chatClient} style={defaultTheme}>
-        <MessageAvatar
+        <MessageAuthor
           alignment='left'
           groupStyles={['single']}
           message={staticMessage}
@@ -63,7 +63,7 @@ describe('MessageAvatar', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-avatar')).toBeTruthy();
+      expect(screen.getByTestId('message-author')).toBeTruthy();
       expect(screen.getByTestId('user-avatar')).toBeTruthy();
       expect(screen.toJSON()).toMatchSnapshot();
     });

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
@@ -17,8 +17,6 @@ import { getTestClientWithUser } from '../../../../mock-builders/mock';
 import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
 import { Message } from '../../Message';
-import { MessageContent } from '../MessageContent';
-
 describe('MessageContent', () => {
   let channel;
   let chatClient;
@@ -149,6 +147,106 @@ describe('MessageContent', () => {
     });
   });
 
+  it('renders MessageContentTopView and MessageContentBottomView when provided', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            MessageContentBottomView={() => <View testID='message-content-bottom-view' />}
+            MessageContentTopView={() => <View testID='message-content-top-view' />}
+          >
+            <Message groupStyles={['bottom']} message={message} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-content-top-view')).toBeTruthy();
+      expect(screen.getByTestId('message-content-bottom-view')).toBeTruthy();
+    });
+  });
+
+  it('renders MessageContentLeadingView and MessageContentTrailingView when provided', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
+            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          >
+            <Message groupStyles={['bottom']} message={message} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-content-leading-view')).toBeTruthy();
+      expect(screen.getByTestId('message-content-trailing-view')).toBeTruthy();
+    });
+  });
+
+  it('orders leading and trailing content views based on alignment', async () => {
+    const otherUser = generateUser({ id: 'other-user' });
+    const leftAlignedMessage = generateMessage({ user: otherUser });
+    const rightAlignedMessage = generateMessage({ user });
+
+    const { rerender } = render(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
+            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          >
+            <Message groupStyles={['bottom']} message={leftAlignedMessage} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-leading-view')).toBeTruthy();
+      expect(screen.getByTestId('message-content-trailing-view')).toBeTruthy();
+    });
+
+    let contentRowStyle = StyleSheet.flatten(screen.getByTestId('message-content-row').props.style);
+    expect(contentRowStyle?.flexDirection).toBe('row');
+
+    rerender(
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel
+            channel={channel}
+            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
+            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          >
+            <Message groupStyles={['bottom']} message={rightAlignedMessage} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-leading-view')).toBeTruthy();
+      expect(screen.getByTestId('message-content-trailing-view')).toBeTruthy();
+    });
+
+    contentRowStyle = StyleSheet.flatten(screen.getByTestId('message-content-row').props.style);
+    expect(contentRowStyle?.flexDirection).toBe('row-reverse');
+  });
+
   it('renders a time component when MessageFooter does not exist', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
@@ -259,19 +357,10 @@ describe('MessageContent', () => {
       user,
     });
 
-    // This needs to be mocked like that cause native onLayout on MessageContent would never
-    // trigger.
-    const MessageContentWithMockedMessageContentWidth = (props) => {
-      useEffect(() => {
-        props.setMessageContentWidth(100);
-      }, [props]);
-      return <MessageContent {...props} />;
-    };
-
     render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
-          <Channel channel={channel} MessageContent={MessageContentWithMockedMessageContentWidth}>
+          <Channel channel={channel}>
             <Message groupStyles={['bottom']} message={message} reactionsEnabled />
           </Channel>
         </Chat>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Text } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
@@ -17,7 +18,7 @@ import { Channel } from '../../../Channel/Channel';
 import { Chat } from '../../../Chat/Chat';
 import { Message } from '../../Message';
 
-describe('MessageSimple', () => {
+describe('MessageItemView', () => {
   let channel;
   let chatClient;
   let renderMessage;
@@ -53,35 +54,35 @@ describe('MessageSimple', () => {
     cleanup();
   });
 
-  it('renders the MessageSimple component', async () => {
+  it('renders the MessageItemView component', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     renderMessage({ message });
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-simple-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('message-item-view-wrapper')).toBeTruthy();
     });
   });
 
-  it('renders MessageAvatar when alignment is left', async () => {
+  it('renders MessageAuthor when alignment is left', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     renderMessage({ message });
 
     await waitFor(() => {
-      expect(screen.queryByTestId('message-avatar')).toBeDefined();
+      expect(screen.queryByTestId('message-author')).toBeDefined();
     });
   });
 
-  it('do not renders MessageAvatar when alignment is right', async () => {
+  it('do not renders MessageAuthor when alignment is right', async () => {
     const user = generateUser({ id: 'id', name: 'name' });
     const message = generateMessage({ user });
     renderMessage({ message });
 
     await waitFor(() => {
-      expect(screen.queryByTestId('message-avatar')).toBeNull();
+      expect(screen.queryByTestId('message-author')).toBeNull();
     });
   });
 
@@ -107,6 +108,30 @@ describe('MessageSimple', () => {
     });
   });
 
+  it('wraps the full MessageItemView with swipe-to-reply', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      const gestureDetector = screen.UNSAFE_getByType(GestureDetector);
+
+      expect(gestureDetector.findByProps({ testID: 'message-item-view-wrapper' })).toBeTruthy();
+    });
+  });
+
+  it('renders MessageSpacer component if defined', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    renderMessage({ message }, { MessageSpacer: () => <Text>Message Spacer</Text> });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Message Spacer')).not.toBeNull();
+    });
+  });
+
   it('renders ReactionListTop when reactionListPosition is top', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
@@ -160,7 +185,7 @@ describe('MessageSimple', () => {
     renderMessage({ groupStyles: ['top'], message });
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-simple-wrapper').props.style).toMatchObject({
+      expect(screen.getByTestId('message-item-view-wrapper').props.style).toMatchObject({
         alignItems: 'flex-end',
         gap: 8,
         flexDirection: 'row',
@@ -177,7 +202,7 @@ describe('MessageSimple', () => {
     renderMessage({ message });
 
     await waitFor(() => {
-      const data = screen.getByTestId('message-simple-wrapper').props.style;
+      const data = screen.getByTestId('message-item-view-wrapper').props.style;
 
       expect(data).toMatchObject({
         alignItems: 'flex-end',

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

@@ -51,7 +51,6 @@ describe('ReactionListTop', () => {
   it('renders the ReactionListTop component', async () => {
     renderMessage({
       hasReactions: true,
-      messageContentWidth: 100,
       reactions: [{ count: 1, own: true, type: 'love' }],
     });
 
@@ -63,7 +62,6 @@ describe('ReactionListTop', () => {
   it('return null in ReactionListTop component when hasReactions false', async () => {
     renderMessage({
       hasReactions: false,
-      messageContentWidth: 100,
       reactions: [{ count: 1, own: true, type: 'love' }],
     });
 
@@ -76,7 +74,6 @@ describe('ReactionListTop', () => {
     renderMessage(
       {
         hasReactions: false,
-        messageContentWidth: 100,
         reactions: [{ count: 1, own: true, type: 'love' }],
       },
       { supportedReactions: [] },

package/src/components/Message/{MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap → MessageItemView/__tests__/__snapshots__/MessageAuthor.test.js.snap}

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`MessageAvatar should render message avatar 1`] = `
+exports[`MessageAuthor should render message author 1`] = `
 <View
   style={{}}
-  testID="message-avatar"
+  testID="message-author"
 >
   <View
     testID="user-avatar"

package/src/components/Message/hooks/useStreamingMessage.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { StreamingMessageViewProps } from '../MessageSimple/StreamingMessageView';
+import { StreamingMessageViewProps } from '../MessageItemView/StreamingMessageView';
 
 export type UseStreamingMessageProps = Pick<
   StreamingMessageViewProps,

package/src/components/MessageInput/{MessageInput.tsx → MessageComposer.tsx}

@@ -149,7 +149,7 @@ const useStyles = () => {
   }, [semantics]);
 };
 
-type MessageInputPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
+type MessageComposerPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
   Pick<ChannelContextValue, 'channel' | 'members' | 'watchers'> &
   Pick<
     MessageInputContextValue,
@@ -205,7 +205,7 @@ const messageInputHeightStoreSelector = (state: MessageInputHeightState) => ({
   height: state.height,
 });
 
-const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
+const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
   const {
     additionalTextInputProps,
     asyncMessagesLockDistance,
@@ -250,7 +250,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         container,
         floatingWrapper,
         focusedInputBoxContainer,
@@ -385,10 +385,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
         }
         layout={LinearTransition.duration(200)}
       >
-        <PortalWhileClosingView
-          portalHostName='overlay-composer'
-          portalName='message-input-composer'
-        >
+        <PortalWhileClosingView portalHostName='overlay-composer' portalName='message-composer'>
           <View
             onLayout={({
               nativeEvent: {
@@ -510,8 +507,8 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
 };
 
 const areEqual = (
-  prevProps: MessageInputPropsWithContext,
-  nextProps: MessageInputPropsWithContext,
+  prevProps: MessageComposerPropsWithContext,
+  nextProps: MessageComposerPropsWithContext,
 ) => {
   const {
     additionalTextInputProps: prevAdditionalTextInputProps,
@@ -633,15 +630,15 @@ const areEqual = (
   return true;
 };
 
-const MemoizedMessageInput = React.memo(
-  MessageInputWithContext,
+const MemoizedMessageComposer = React.memo(
+  MessageComposerWithContext,
   areEqual,
-) as typeof MessageInputWithContext;
+) as typeof MessageComposerWithContext;
 
-export type MessageInputProps = Partial<MessageInputPropsWithContext>;
+export type MessageComposerProps = Partial<MessageComposerPropsWithContext>;
 
 /**
- * UI Component for message input
+ * UI Component for message composer
  * It's a consumer of
  * [Channel Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/channel-context/),
  * [Chat Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/chat-context/),
@@ -649,7 +646,7 @@ export type MessageInputProps = Partial<MessageInputPropsWithContext>;
  * [Suggestions Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/suggestions-context/), and
  * [Translation Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/translation-context/)
  */
-export const MessageInput = (props: MessageInputProps) => {
+export const MessageComposer = (props: MessageComposerProps) => {
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
@@ -716,7 +713,7 @@ export const MessageInput = (props: MessageInputProps) => {
   }
 
   return (
-    <MemoizedMessageInput
+    <MemoizedMessageComposer
       {...{
         audioRecorderManager,
         isRecordingStateIdle,
@@ -772,4 +769,4 @@ export const MessageInput = (props: MessageInputProps) => {
   );
 };
 
-MessageInput.displayName = 'MessageInput{messageInput}';
+MessageComposer.displayName = 'MessageComposer{messageComposer}';

package/src/components/MessageInput/MessageComposerLeadingView.tsx

@@ -13,7 +13,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 export const MessageComposerLeadingView = () => {
   const {
     theme: {
-      messageInput: { inputButtonsContainer },
+      messageComposer: { inputButtonsContainer },
     },
   } = useTheme();
   const { audioRecorderManager, messageInputFloating } = useMessageInputContext();

package/src/components/MessageInput/MessageInputHeaderView.tsx

@@ -21,7 +21,7 @@ import { primitives } from '../../theme';
 export const MessageInputHeaderView = () => {
   const {
     theme: {
-      messageInput: { contentContainer },
+      messageComposer: { contentContainer },
     },
   } = useTheme();
   const messageComposer = useMessageComposer();

package/src/components/MessageInput/MessageInputTrailingView.tsx

@@ -15,7 +15,7 @@ import { primitives } from '../../theme';
 export const MessageInputTrailingView = () => {
   const {
     theme: {
-      messageInput: { outputButtonsContainer },
+      messageComposer: { outputButtonsContainer },
     },
   } = useTheme();
   const { audioRecorderManager } = useMessageInputContext();

package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx

@@ -21,7 +21,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         sendMessageDisallowedIndicator: { container, text },
       },
     },

package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx

@@ -40,7 +40,7 @@ export const ShowThreadMessageInChannelButtonWithContext = (
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         showThreadMessageInChannelButton: {
           check,
           checkBoxActive,
@@ -152,7 +152,7 @@ export const ShowThreadMessageInChannelButton = (props: ShowThreadMessageInChann
 };
 
 ShowThreadMessageInChannelButton.displayName =
-  'ShowThreadMessageInChannelButton{messageInput{showThreadMessageInChannelButton}}';
+  'ShowThreadMessageInChannelButton{messageComposer{showThreadMessageInChannelButton}}';
 
 const useStyles = () => {
   const {

package/src/components/MessageInput/StopMessageStreamingButton.tsx

@@ -15,7 +15,7 @@ export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProp
   const {
     theme: {
       semantics,
-      messageInput: { stopMessageStreamingButton, stopMessageStreamingIcon },
+      messageComposer: { stopMessageStreamingButton, stopMessageStreamingIcon },
     },
   } = useTheme();
 
@@ -31,4 +31,4 @@ export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProp
   );
 };
 
-StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageInput}';
+StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageComposer}';

package/src/components/MessageInput/__tests__/{MessageInput.test.js → MessageComposer.test.js}

@@ -14,7 +14,7 @@ import { AttachmentPickerContent } from '../../AttachmentPicker/components/Attac
 import { AttachmentPickerSelectionBar } from '../../AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
-import { MessageInput } from '../MessageInput';
+import { MessageComposer } from '../MessageComposer';
 
 jest.spyOn(Alert, 'alert');
 jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(
@@ -38,14 +38,14 @@ const renderComponent = ({ channelProps, client, props }) => {
     <OverlayProvider>
       <Chat client={client}>
         <Channel {...channelProps}>
-          <MessageInput {...props} />
+          <MessageComposer {...props} />
         </Channel>
       </Chat>
     </OverlayProvider>,
   );
 };
 
-describe('MessageInput', () => {
+describe('MessageComposer', () => {
   let client;
   let channel;
 
@@ -63,7 +63,7 @@ describe('MessageInput', () => {
     });
   });
 
-  it('should render MessageInput', async () => {
+  it('should render MessageComposer', async () => {
     const channelProps = { channel };
 
     renderComponent({

package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.js

@@ -4,7 +4,7 @@ import { Alert } from 'react-native';
 
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
-import { MessageComposer } from 'stream-chat';
+import { MessageComposer as StreamMessageComposer } from 'stream-chat';
 
 import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import * as UseMessageComposerHooks from '../../../contexts/messageInputContext/hooks/useMessageComposer';
@@ -21,7 +21,7 @@ import { AttachmentPickerContent } from '../../AttachmentPicker/components/Attac
 import { AttachmentPickerSelectionBar } from '../../AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
-import { MessageInput } from '../MessageInput';
+import { MessageComposer } from '../MessageComposer';
 
 jest.spyOn(Alert, 'alert');
 jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(
@@ -45,7 +45,7 @@ const renderComponent = ({ channelProps, client, props }) => {
     <OverlayProvider>
       <Chat client={client}>
         <Channel {...channelProps}>
-          <MessageInput {...props} />
+          <MessageComposer {...props} />
         </Channel>
       </Chat>
     </OverlayProvider>,
@@ -56,7 +56,7 @@ const editedMessageSetup = async ({ composerConfig, composition } = {}) => {
   const { client: chatClient, channels } = await initiateClientWithChannels();
   const channel = channels[0];
 
-  const messageComposer = new MessageComposer({
+  const messageComposer = new StreamMessageComposer({
     client: chatClient,
     composition,
     compositionContext: composition,

package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx

@@ -12,7 +12,7 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         dismissAttachmentUpload: { dismiss, dismissIcon, dismissIconColor },
       },
     },

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -64,7 +64,7 @@ const AttachmentPreviewCell = ({ children }: { children: React.ReactNode }) => (
 const ItemSeparatorComponent = () => {
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         attachmentUploadPreviewList: { itemSeparator },
       },
     },
@@ -110,7 +110,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         attachmentUploadPreviewList: { audioAttachmentsContainer, flatList },
       },
     },
@@ -360,4 +360,4 @@ const styles = StyleSheet.create({
 });
 
 AttachmentUploadPreviewList.displayName =
-  'AttachmentUploadPreviewList{messageInput{attachmentUploadPreviewList}}';
+  'AttachmentUploadPreviewList{messageComposer{attachmentUploadPreviewList}}';