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

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();
     });
   });
 

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,10 +1,12 @@
 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';
 
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
@@ -17,7 +19,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 +55,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 +109,47 @@ 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('exposes contextMenuAnchorRef through MessageContext for custom renderers', async () => {
+    const user = generateUser();
+    const message = generateMessage({ user });
+
+    const CustomMessageItemView = () => {
+      const { contextMenuAnchorRef } = useMessageContext();
+
+      return <Text ref={contextMenuAnchorRef}>Custom Message Item</Text>;
+    };
+
+    renderMessage({ message }, { MessageItemView: CustomMessageItemView });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Custom Message Item')).not.toBeNull();
+    });
+  });
+
+  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 +203,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 +220,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/useCreateMessageContext.ts

@@ -18,6 +18,7 @@ export const useCreateMessageContext = ({
   actionsEnabled,
   alignment,
   channel,
+  contextMenuAnchorRef,
   deliveredToCount,
   dismissOverlay,
   files,
@@ -71,6 +72,7 @@ export const useCreateMessageContext = ({
       actionsEnabled,
       alignment,
       channel,
+      contextMenuAnchorRef,
       deliveredToCount,
       dismissOverlay,
       files,

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,17 +149,17 @@ const useStyles = () => {
   }, [semantics]);
 };
 
-type MessageInputPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
+type MessageComposerPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
   Pick<ChannelContextValue, 'channel' | 'members' | 'watchers'> &
   Pick<
     MessageInputContextValue,
     | 'audioRecorderManager'
     | 'additionalTextInputProps'
+    | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
     | 'asyncMessagesLockDistance'
     | 'asyncMessagesMinimumPressDuration'
     | 'asyncMessagesSlideToCancelDistance'
-    | 'asyncMessagesMultiSendEnabled'
     | 'AttachmentUploadPreviewList'
     | 'AudioRecorder'
     | 'AudioRecordingInProgress'
@@ -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,14 +507,15 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
 };
 
 const areEqual = (
-  prevProps: MessageInputPropsWithContext,
-  nextProps: MessageInputPropsWithContext,
+  prevProps: MessageComposerPropsWithContext,
+  nextProps: MessageComposerPropsWithContext,
 ) => {
   const {
     additionalTextInputProps: prevAdditionalTextInputProps,
     asyncMessagesLockDistance: prevAsyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration: prevAsyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance: prevAsyncMessagesSlideToCancelDistance,
+    audioRecordingSendOnComplete: prevAudioRecordingSendOnComplete,
     audioRecordingEnabled: prevAsyncMessagesEnabled,
     channel: prevChannel,
     closePollCreationDialog: prevClosePollCreationDialog,
@@ -537,6 +535,7 @@ const areEqual = (
     asyncMessagesLockDistance: nextAsyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration: nextAsyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance: nextAsyncMessagesSlideToCancelDistance,
+    audioRecordingSendOnComplete: nextAudioRecordingSendOnComplete,
     audioRecordingEnabled: nextAsyncMessagesEnabled,
     channel: nextChannel,
     closePollCreationDialog: nextClosePollCreationDialog,
@@ -600,6 +599,12 @@ const areEqual = (
     return false;
   }
 
+  const audioRecordingSendOnCompleteEqual =
+    prevAudioRecordingSendOnComplete === nextAudioRecordingSendOnComplete;
+  if (!audioRecordingSendOnCompleteEqual) {
+    return false;
+  }
+
   const editingEqual = !!prevEditing === !!nextEditing;
   if (!editingEqual) {
     return false;
@@ -633,15 +638,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 +654,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();
 
@@ -658,9 +663,9 @@ export const MessageInput = (props: MessageInputProps) => {
   const {
     audioRecorderManager,
     additionalTextInputProps,
+    audioRecordingSendOnComplete,
     asyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration,
-    asyncMessagesMultiSendEnabled,
     asyncMessagesSlideToCancelDistance,
     AttachmentUploadPreviewList,
     AudioRecorder,
@@ -716,16 +721,16 @@ export const MessageInput = (props: MessageInputProps) => {
   }
 
   return (
-    <MemoizedMessageInput
+    <MemoizedMessageComposer
       {...{
         audioRecorderManager,
         isRecordingStateIdle,
         recordingStatus,
         micLocked,
         additionalTextInputProps,
+        audioRecordingSendOnComplete,
         asyncMessagesLockDistance,
         asyncMessagesMinimumPressDuration,
-        asyncMessagesMultiSendEnabled,
         asyncMessagesSlideToCancelDistance,
         AttachmentUploadPreviewList,
         AudioRecorder,
@@ -772,4 +777,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();
@@ -63,7 +63,7 @@ export const MessageInputHeaderView = () => {
           />
         </Animated.View>
       ) : null}
-      {quotedMessage ? (
+      {quotedMessage && !editing ? (
         <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)}>
           <Reply onDismiss={editing ? undefined : onDismissReply} mode='reply' />
         </Animated.View>

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}';