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

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 },
       },
     },
@@ -93,6 +93,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
     ImageAttachmentUploadPreview,
     VideoAttachmentUploadPreview,
   } = props;
+  const { audioRecordingSendOnComplete } = useMessageInputContext();
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
   const attachmentListRef = useRef<FlatList<LocalAttachment>>(null);
@@ -103,14 +104,17 @@ const UnMemoizedAttachmentUploadPreviewList = (
   const viewportWidthRef = useRef(0);
   const scrollOffsetXRef = useRef(0);
   const endShrinkCompensationX = useSharedValue(0);
-  const audioAttachments = attachments.filter(isAudioAttachmentPreview);
-  const nonAudioAttachments = attachments.filter(
+  const previewAttachments = attachments.filter(
+    (attachment) => !(audioRecordingSendOnComplete && isLocalVoiceRecordingAttachment(attachment)),
+  );
+  const audioAttachments = previewAttachments.filter(isAudioAttachmentPreview);
+  const nonAudioAttachments = previewAttachments.filter(
     (attachment) => !isAudioAttachmentPreview(attachment),
   );
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         attachmentUploadPreviewList: { audioAttachmentsContainer, flatList },
       },
     },
@@ -261,7 +265,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
     transform: [{ translateX: endShrinkCompensationX.value }],
   }));
 
-  if (!attachments.length) {
+  if (!previewAttachments.length) {
     return null;
   }
 
@@ -360,4 +364,4 @@ const styles = StyleSheet.create({
 });
 
 AttachmentUploadPreviewList.displayName =
-  'AttachmentUploadPreviewList{messageInput{attachmentUploadPreviewList}}';
+  'AttachmentUploadPreviewList{messageComposer{attachmentUploadPreviewList}}';

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

@@ -13,7 +13,7 @@ export const FileUploadInProgressIndicator = () => {
   const {
     theme: {
       semantics,
-      messageInput: { fileUploadInProgressIndicator },
+      messageComposer: { fileUploadInProgressIndicator },
     },
   } = useTheme();
 
@@ -38,7 +38,7 @@ export const FileUploadRetryIndicator = ({ onPress }: FileUploadRetryIndicatorPr
   const {
     theme: {
       semantics,
-      messageInput: { fileUploadRetryIndicator },
+      messageComposer: { fileUploadRetryIndicator },
     },
   } = useTheme();
   const styles = useFileUploadRetryStyles();
@@ -83,7 +83,7 @@ export const FileUploadNotSupportedIndicator = ({
   const {
     theme: {
       semantics,
-      messageInput: { fileUploadNotSupportedIndicator },
+      messageComposer: { fileUploadNotSupportedIndicator },
     },
   } = useTheme();
 
@@ -107,7 +107,7 @@ export const ImageUploadInProgressIndicator = () => {
   const {
     theme: {
       semantics,
-      messageInput: { imageUploadInProgressIndicator },
+      messageComposer: { imageUploadInProgressIndicator },
     },
   } = useTheme();
   const styles = useImageUploadInProgressIndicatorStyles();
@@ -140,7 +140,7 @@ export const ImageUploadNotSupportedIndicator = () => {
   const {
     theme: {
       semantics,
-      messageInput: { imageUploadNotSupportedIndicator },
+      messageComposer: { imageUploadNotSupportedIndicator },
     },
   } = useTheme();
   return (

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

@@ -40,7 +40,7 @@ export const FileAttachmentUploadPreview = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         fileAttachmentUploadPreview: { wrapper },
       },
     },

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

@@ -36,7 +36,7 @@ export const ImageAttachmentUploadPreview = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         imageAttachmentUploadPreview: { upload, wrapper },
       },
     },

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

@@ -75,7 +75,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         videoAttachmentUploadPreview: { durationContainer, durationText },
       },
     },

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -27,7 +27,7 @@ import { primitives } from '../../../../theme';
 type AudioRecorderPropsWithContext = Pick<
   MessageInputContextValue,
   | 'audioRecorderManager'
-  | 'asyncMessagesMultiSendEnabled'
+  | 'audioRecordingSendOnComplete'
   | 'stopVoiceRecording'
   | 'deleteVoiceRecording'
   | 'uploadVoiceRecording'
@@ -70,15 +70,15 @@ const StopRecording = ({
 };
 
 const UploadRecording = ({
-  asyncMessagesMultiSendEnabled,
+  audioRecordingSendOnComplete,
   uploadVoiceRecordingHandler,
 }: {
-  asyncMessagesMultiSendEnabled: boolean;
-  uploadVoiceRecordingHandler: (multiSendEnabled: boolean) => Promise<void>;
+  audioRecordingSendOnComplete: boolean;
+  uploadVoiceRecordingHandler: (sendOnComplete: boolean) => Promise<void>;
 }) => {
   const onUploadVoiceRecording = () => {
     NativeHandlers.triggerHaptic('impactMedium');
-    uploadVoiceRecordingHandler(asyncMessagesMultiSendEnabled);
+    uploadVoiceRecordingHandler(audioRecordingSendOnComplete);
   };
 
   return (
@@ -116,7 +116,7 @@ const DeleteRecording = ({
 
 const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
   const {
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     slideToCancelStyle,
     deleteVoiceRecording,
     stopVoiceRecording,
@@ -131,7 +131,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecorder: { arrowLeftIcon, micContainer, micIcon, slideToCancelContainer },
       },
     },
@@ -144,7 +144,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
         <View style={styles.container}>
           <DeleteRecording deleteVoiceRecordingHandler={deleteVoiceRecording} />
           <UploadRecording
-            asyncMessagesMultiSendEnabled={asyncMessagesMultiSendEnabled}
+            audioRecordingSendOnComplete={audioRecordingSendOnComplete}
             uploadVoiceRecordingHandler={uploadVoiceRecording}
           />
         </View>
@@ -155,7 +155,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
           <DeleteRecording deleteVoiceRecordingHandler={deleteVoiceRecording} />
           <StopRecording stopVoiceRecordingHandler={stopVoiceRecording} />
           <UploadRecording
-            asyncMessagesMultiSendEnabled={asyncMessagesMultiSendEnabled}
+            audioRecordingSendOnComplete={audioRecordingSendOnComplete}
             uploadVoiceRecordingHandler={uploadVoiceRecording}
           />
         </View>
@@ -201,7 +201,7 @@ const audioRecorderSelector = (state: AudioRecorderManagerState) => ({
 export const AudioRecorder = (props: AudioRecorderProps) => {
   const {
     audioRecorderManager,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     stopVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -216,7 +216,7 @@ export const AudioRecorder = (props: AudioRecorderProps) => {
     <MemoizedAudioRecorder
       {...{
         audioRecorderManager,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         stopVoiceRecording,
         deleteVoiceRecording,
         uploadVoiceRecording,
@@ -275,4 +275,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecorder.displayName = 'AudioRecorder{messageInput}';
+AudioRecorder.displayName = 'AudioRecorder{messageComposer}';

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -31,7 +31,7 @@ export type AudioRecordingButtonPropsWithContext = Pick<
   | 'asyncMessagesMinimumPressDuration'
   | 'asyncMessagesSlideToCancelDistance'
   | 'asyncMessagesLockDistance'
-  | 'asyncMessagesMultiSendEnabled'
+  | 'audioRecordingSendOnComplete'
   | 'audioRecorderManager'
   | 'startVoiceRecording'
   | 'deleteVoiceRecording'
@@ -67,7 +67,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     startVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -85,7 +85,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   const { t } = useTranslationContext();
   const {
     theme: {
-      messageInput: { micButtonContainer },
+      messageComposer: { micButtonContainer },
       semantics,
     },
   } = useTheme();
@@ -156,7 +156,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
       return;
     }
     if (status === 'recording') {
-      uploadVoiceRecording(asyncMessagesMultiSendEnabled);
+      uploadVoiceRecording(audioRecordingSendOnComplete);
     } else {
       resetAudioRecording();
     }
@@ -263,7 +263,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     startVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -281,7 +281,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
         asyncMessagesMinimumPressDuration,
         asyncMessagesSlideToCancelDistance,
         asyncMessagesLockDistance,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         startVoiceRecording,
         deleteVoiceRecording,
         uploadVoiceRecording,
@@ -294,7 +294,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
   );
 };
 
-AudioRecordingButton.displayName = 'AudioRecordingButton{messageInput}';
+AudioRecordingButton.displayName = 'AudioRecordingButton{messageComposer}';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx

@@ -32,7 +32,7 @@ const AudioRecordingInProgressWithContext = (props: AudioRecordingInProgressProp
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecordingInProgress: { container, durationText },
       },
     },
@@ -115,4 +115,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecordingInProgress.displayName = 'AudioRecordingInProgress{messageInput}';
+AudioRecordingInProgress.displayName = 'AudioRecordingInProgress{messageComposer}';

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx

@@ -48,7 +48,7 @@ export const AudioRecordingLockIndicator = ({
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecordingLockIndicator: { arrowUpIcon, container, lockIcon },
       },
     },

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 
 import dayjs from 'dayjs';
 
@@ -11,15 +11,25 @@ import { useStateStore } from '../../../../hooks/useStateStore';
 
 import { Pause } from '../../../../icons/Pause';
 import { Play } from '../../../../icons/Play';
-import { NativeHandlers } from '../../../../native';
 import { AudioPlayerState } from '../../../../state-store/audio-player';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
+import { StableDurationLabel } from '../../../ProgressControl/StableDurationLabel';
 import { WaveProgressBar } from '../../../ProgressControl/WaveProgressBar';
 
 const ONE_SECOND_IN_MILLISECONDS = 1000;
 const ONE_HOUR_IN_MILLISECONDS = 3600 * 1000;
 
+const getAudioDurationLabel = (durationInMilliseconds: number) => {
+  if (!durationInMilliseconds) {
+    return '00:00';
+  }
+
+  return durationInMilliseconds / ONE_HOUR_IN_MILLISECONDS >= 1
+    ? dayjs.duration(durationInMilliseconds, 'milliseconds').format('HH:mm:ss')
+    : dayjs.duration(durationInMilliseconds, 'milliseconds').format('mm:ss');
+};
+
 const audioPlayerSelector = (state: AudioPlayerState) => ({
   duration: state.duration,
   isPlaying: state.isPlaying,
@@ -52,8 +62,8 @@ export const AudioRecordingPreview = () => {
   const audioPlayer = useAudioPlayer({
     duration: recordingDuration / ONE_SECOND_IN_MILLISECONDS,
     mimeType: 'audio/aac',
-    // This is a temporary flag to manage audio player for voice recording in preview as the one in message list uses react-native-video.
-    previewVoiceRecording: !(NativeHandlers.SDK === 'stream-chat-expo'),
+    // The preview still uses the recorder-backed player until both playback paths are unified.
+    previewVoiceRecording: false,
     type: 'voiceRecording',
     uri,
   });
@@ -74,7 +84,7 @@ export const AudioRecordingPreview = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         audioRecordingPreview: {
           container,
           currentTime,
@@ -91,13 +101,10 @@ export const AudioRecordingPreview = () => {
     audioPlayer.toggle();
   };
 
+  const maxDurationLabel = useMemo(() => getAudioDurationLabel(duration), [duration]);
+
   const progressDuration = useMemo(
-    () =>
-      position
-        ? position / ONE_HOUR_IN_MILLISECONDS >= 1
-          ? dayjs.duration(position, 'milliseconds').format('HH:mm:ss')
-          : dayjs.duration(position, 'milliseconds').format('mm:ss')
-        : dayjs.duration(duration, 'milliseconds').format('mm:ss'),
+    () => getAudioDurationLabel(position || duration),
     [duration, position],
   );
 
@@ -108,7 +115,6 @@ export const AudioRecordingPreview = () => {
   const dragEnd = useStableCallback(async (currentProgress: number) => {
     const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
     await audioPlayer.seek(positionInSeconds);
-    audioPlayer.play();
   });
 
   return (
@@ -122,15 +128,15 @@ export const AudioRecordingPreview = () => {
           )}
         </Pressable>
         {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
-        <Text
-          style={[
-            styles.durationText,
-            currentTime,
-            { color: isPlaying ? semantics.accentPrimary : semantics.textPrimary },
-          ]}
-        >
-          {progressDuration}
-        </Text>
+        <StableDurationLabel
+          accessibilityLabel='Progress Duration'
+          reserveLabel={maxDurationLabel}
+          label={progressDuration}
+          style={[styles.durationText, currentTime]}
+          visibleStyle={{
+            color: isPlaying ? semantics.accentPrimary : semantics.textPrimary,
+          }}
+        />
       </View>
       <View style={[styles.progressBar, progressBar]}>
         {/* Since the progress is in range 0-1 we convert it in terms of 100% */}
@@ -160,6 +166,7 @@ const useStyles = () => {
           gap: primitives.spacingMd,
         },
         durationText: {
+          fontVariant: ['tabular-nums'],
           fontSize: primitives.typographyFontSizeMd,
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightNormal,
@@ -177,4 +184,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecordingPreview.displayName = 'AudioRecordingPreview{messageInput}';
+AudioRecordingPreview.displayName = 'AudioRecordingPreview{messageComposer}';

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingWaveform.tsx

@@ -22,7 +22,7 @@ export const AudioRecordingWaveform = (props: AudioRecordingWaveformProps) => {
   const styles = useStyles();
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         audioRecordingWaveform: { container, waveform: waveformTheme },
       },
     },
@@ -70,4 +70,4 @@ const useStyles = () => {
   );
 };
 
-AudioRecordingWaveform.displayName = 'AudioRecordingWaveform{messageInput}';
+AudioRecordingWaveform.displayName = 'AudioRecordingWaveform{messageComposer}';

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -80,7 +80,7 @@ const MemoizedAttachButton = React.memo(
 export type AttachButtonProps = Partial<AttachButtonPropsWithContext>;
 
 /**
- * UI Component for attach button in MessageInput component.
+ * UI Component for attach button in MessageComposer component.
  */
 export const AttachButton = (props: AttachButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
@@ -107,4 +107,4 @@ export const AttachButton = (props: AttachButtonProps) => {
   );
 };
 
-AttachButton.displayName = 'AttachButton{messageInput}';
+AttachButton.displayName = 'AttachButton{messageComposer}';

package/src/components/MessageInput/components/InputButtons/index.tsx

@@ -42,7 +42,7 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
 
   const {
     theme: {
-      messageInput: { attachButtonContainer },
+      messageComposer: { attachButtonContainer },
     },
   } = useTheme();
 

package/src/components/MessageInput/components/LinkPreviewList.tsx

@@ -97,7 +97,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: { linkPreviewList },
+      messageComposer: { linkPreviewList },
     },
   } = useTheme();
 

package/src/components/MessageInput/components/OutputButtons/EditButton.tsx

@@ -38,4 +38,4 @@ export const EditButton = (props: EditButtonProps) => {
   );
 };
 
-EditButton.displayName = 'EditButton{messageInput}';
+EditButton.displayName = 'EditButton{messageComposer}';

package/src/components/MessageInput/components/OutputButtons/SendButton.tsx

@@ -38,4 +38,4 @@ export const SendButton = (props: SendButtonProps) => {
   );
 };
 
-SendButton.displayName = 'SendButton{messageInput}';
+SendButton.displayName = 'SendButton{messageComposer}';

package/src/components/MessageInput/components/OutputButtons/index.tsx

@@ -33,7 +33,7 @@ export type OutputButtonsWithContextProps = Pick<ChatContextValue, 'isOnline'> &
     | 'asyncMessagesMinimumPressDuration'
     | 'asyncMessagesSlideToCancelDistance'
     | 'asyncMessagesLockDistance'
-    | 'asyncMessagesMultiSendEnabled'
+    | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
     | 'CooldownTimer'
     | 'SendButton'
@@ -63,7 +63,7 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } = props;
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         audioRecordingButtonContainer,
         cooldownButtonContainer,
         editButtonContainer,
@@ -178,7 +178,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     CooldownTimer,
     SendButton,
     StopMessageStreamingButton,
@@ -192,7 +192,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
       {...{
         asyncMessagesLockDistance,
         asyncMessagesMinimumPressDuration,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         asyncMessagesSlideToCancelDistance,
         audioRecordingEnabled,
         channel,

package/src/components/MessageInput/contexts/MicPositionContext.tsx

@@ -26,7 +26,7 @@ export const useMicPositionContext = () => {
 
   if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
     throw new Error(
-      'The useMicPositionContext hook was called outside of the MicPositionProvider. Make sure MessageInput wraps the subtree where mic positions are used.',
+      'The useMicPositionContext hook was called outside of the MicPositionProvider. Make sure MessageComposer wraps the subtree where mic positions are used.',
     );
   }