stream-chat-react-native-core 9.0.0-beta.31 → 9.0.0-beta.32

package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js

@@ -6,6 +6,7 @@ import { GestureDetector } from 'react-native-gesture-handler';
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
@@ -42,13 +43,21 @@ describe('MessageItemView', () => {
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     channel = chatClient.channel('messaging', mockedChannel.id);
 
-    renderMessage = (options, channelProps) =>
+    renderMessage = (options, channelProps, componentOverrides) =>
       render(
         <ChannelsStateProvider>
           <Chat client={chatClient}>
-            <Channel channel={channel} {...channelProps}>
-              <Message groupStyles={['bottom']} {...options} />
-            </Channel>
+            {componentOverrides ? (
+              <WithComponents overrides={componentOverrides}>
+                <Channel channel={channel} {...channelProps}>
+                  <Message groupStyles={['bottom']} {...options} />
+                </Channel>
+              </WithComponents>
+            ) : (
+              <Channel channel={channel} {...channelProps}>
+                <Message groupStyles={['bottom']} {...options} />
+              </Channel>
+            )}
           </Chat>
         </ChannelsStateProvider>,
       );
@@ -136,7 +145,7 @@ describe('MessageItemView', () => {
       return <Text ref={contextMenuAnchorRef}>Custom Message Item</Text>;
     };
 
-    renderMessage({ message }, { MessageItemView: CustomMessageItemView });
+    renderMessage({ message }, {}, { MessageItemView: CustomMessageItemView });
 
     await waitFor(() => {
       expect(screen.queryByText('Custom Message Item')).not.toBeNull();
@@ -147,7 +156,7 @@ describe('MessageItemView', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    renderMessage({ message }, { MessageSpacer: () => <Text>Message Spacer</Text> });
+    renderMessage({ message }, {}, { MessageSpacer: () => <Text>Message Spacer</Text> });
 
     await waitFor(() => {
       expect(screen.queryByText('Message Spacer')).not.toBeNull();
@@ -193,7 +202,7 @@ describe('MessageItemView', () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
-    renderMessage({ message }, { MessageHeader: () => <Text>Message Header</Text> });
+    renderMessage({ message }, {}, { MessageHeader: () => <Text>Message Header</Text> });
 
     await waitFor(() => {
       expect(screen.queryByText('Message Header')).not.toBeNull();

package/src/components/Message/MessageItemView/__tests__/MessageTextContainer.test.tsx

@@ -5,6 +5,7 @@ import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { LocalMessage } from 'stream-chat';
 
+import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
 import { OverlayProvider } from '../../../../contexts/overlayContext/OverlayProvider';
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -43,10 +44,13 @@ describe('MessageTextContainer', () => {
 
     rerender(
       <ThemeProvider theme={defaultTheme}>
-        <MessageTextContainer
-          message={message as unknown as LocalMessage}
-          MessageText={({ message }) => <Text testID='message-text'>{message?.text}</Text>}
-        />
+        <WithComponents
+          overrides={{
+            MessageText: ({ message }) => <Text testID='message-text'>{message?.text}</Text>,
+          }}
+        >
+          <MessageTextContainer message={message as unknown as LocalMessage} />
+        </WithComponents>
       </ThemeProvider>,
     );
 

package/src/components/MessageInput/MessageComposer.tsx

@@ -27,6 +27,7 @@ import {
   ChannelContextValue,
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageComposerAPIContextValue,
   useMessageComposerAPIContext,
@@ -36,10 +37,6 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../contexts/messagesContext/MessagesContext';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import {
@@ -160,36 +157,18 @@ type MessageComposerPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
     | 'asyncMessagesLockDistance'
     | 'asyncMessagesMinimumPressDuration'
     | 'asyncMessagesSlideToCancelDistance'
-    | 'AttachmentUploadPreviewList'
-    | 'AudioRecorder'
-    | 'AudioRecordingInProgress'
-    | 'AudioRecordingLockIndicator'
-    | 'AudioRecordingPreview'
-    | 'AutoCompleteSuggestionList'
     | 'closeAttachmentPicker'
     | 'compressImageQuality'
-    | 'Input'
-    | 'InputView'
     | 'inputBoxRef'
-    | 'InputButtons'
-    | 'MessageComposerLeadingView'
-    | 'MessageComposerTrailingView'
     | 'messageInputFloating'
     | 'messageInputHeightStore'
-    | 'MessageInputHeaderView'
-    | 'MessageInputTrailingView'
-    | 'SendButton'
-    | 'StartAudioRecordingButton'
     | 'uploadNewFile'
     | 'openPollCreationDialog'
     | 'closePollCreationDialog'
     | 'showPollCreationDialog'
     | 'sendMessage'
-    | 'CreatePollContent'
     | 'createPollOptionGap'
-    | 'StopMessageStreamingButton'
   > &
-  Pick<MessagesContextValue, 'Reply'> &
   Pick<TranslationContextValue, 't'> &
   Pick<MessageComposerAPIContextValue, 'clearEditingState'> &
   Pick<AudioRecorderManagerState, 'micLocked'> & {
@@ -210,23 +189,11 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     additionalTextInputProps,
     asyncMessagesLockDistance,
     asyncMessagesSlideToCancelDistance,
-    AudioRecorder,
-    AudioRecordingInProgress,
-    AudioRecordingLockIndicator,
-    AudioRecordingPreview,
-    AutoCompleteSuggestionList,
     closeAttachmentPicker,
     closePollCreationDialog,
-    CreatePollContent,
     createPollOptionGap,
-    InputView,
-    MessageComposerLeadingView,
-    MessageComposerTrailingView,
     messageInputFloating,
     messageInputHeightStore,
-    MessageInputHeaderView,
-    MessageInputTrailingView,
-    Input,
     inputBoxRef,
     isKeyboardVisible,
     members,
@@ -239,6 +206,20 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     recordingStatus,
   } = props;
 
+  const {
+    AudioRecorder,
+    AudioRecordingInProgress,
+    AudioRecordingLockIndicator,
+    AudioRecordingPreview,
+    AutoCompleteSuggestionList,
+    Input,
+    InputView,
+    MessageComposerLeadingView,
+    MessageComposerTrailingView,
+    MessageInputHeaderView,
+    MessageInputTrailingView,
+  } = useComponentsContext();
+
   const styles = useStyles();
   const { selectedPicker } = useAttachmentPickerState();
   const { attachmentPickerBottomSheetHeight, bottomInset } = useAttachmentPickerContext();
@@ -486,7 +467,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               <SafeAreaViewWrapper style={styles.pollSafeArea}>
                 <CreatePoll
                   closePollCreationDialog={closePollCreationDialog}
-                  CreatePollContent={CreatePollContent}
                   createPollOptionGap={createPollOptionGap}
                   sendMessage={sendMessage}
                 />
@@ -660,42 +640,22 @@ export const MessageComposer = (props: MessageComposerProps) => {
     asyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
-    AttachmentUploadPreviewList,
-    AudioRecorder,
     audioRecordingEnabled,
-    AudioRecordingInProgress,
-    AudioRecordingLockIndicator,
-    AudioRecordingPreview,
-    AudioRecordingWaveform,
-    AutoCompleteSuggestionList,
     closeAttachmentPicker,
     closePollCreationDialog,
     compressImageQuality,
-    CreatePollContent,
-    Input,
-    InputView,
     inputBoxRef,
-    InputButtons,
-    MessageComposerLeadingView,
-    MessageComposerTrailingView,
     messageInputFloating,
     messageInputHeightStore,
-    MessageInputHeaderView,
-    MessageInputTrailingView,
     openPollCreationDialog,
-    SendButton,
     sendMessage,
-    SendMessageDisallowedIndicator,
     showPollCreationDialog,
-    StartAudioRecordingButton,
-    StopMessageStreamingButton,
     uploadNewFile,
   } = useMessageInputContext();
+  const { SendMessageDisallowedIndicator } = useComponentsContext();
   const messageComposer = useMessageComposer();
   const editing = !!messageComposer.editedMessage;
   const { clearEditingState } = useMessageComposerAPIContext();
-
-  const { Reply } = useMessagesContext();
   const isKeyboardVisible = useKeyboardVisibility();
 
   const { micLocked, isRecordingStateIdle, recordingStatus } = useStateStore(
@@ -725,43 +685,23 @@ export const MessageComposer = (props: MessageComposerProps) => {
         asyncMessagesLockDistance,
         asyncMessagesMinimumPressDuration,
         asyncMessagesSlideToCancelDistance,
-        AttachmentUploadPreviewList,
-        AudioRecorder,
         audioRecordingEnabled,
-        AudioRecordingInProgress,
-        AudioRecordingLockIndicator,
-        AudioRecordingPreview,
-        AudioRecordingWaveform,
-        AutoCompleteSuggestionList,
         channel,
         clearEditingState,
         closeAttachmentPicker,
         closePollCreationDialog,
         compressImageQuality,
-        CreatePollContent,
         // TODO: probably not needed anymore, please check
         editing,
-        Input,
-        InputView,
         inputBoxRef,
-        InputButtons,
-        MessageComposerLeadingView,
-        MessageComposerTrailingView,
         isKeyboardVisible,
         isOnline,
         members,
         messageInputFloating,
         messageInputHeightStore,
-        MessageInputHeaderView,
-        MessageInputTrailingView,
         openPollCreationDialog,
-        Reply,
-        SendButton,
         sendMessage,
-        SendMessageDisallowedIndicator,
         showPollCreationDialog,
-        StartAudioRecordingButton,
-        StopMessageStreamingButton,
         t,
         uploadNewFile,
         watchers,

package/src/components/MessageInput/MessageInputHeaderView.tsx

@@ -9,11 +9,11 @@ import { useHasLinkPreviews } from './hooks/useLinkPreviews';
 import { idleRecordingStateSelector } from './utils/audioRecorderSelectors';
 import { messageComposerStateStoreSelector } from './utils/messageComposerSelectors';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposerAPIContext } from '../../contexts/messageComposerContext/MessageComposerAPIContext';
 import { useHasAttachments } from '../../contexts/messageInputContext/hooks/useHasAttachments';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useMessageInputContext } from '../../contexts/messageInputContext/MessageInputContext';
-import { useMessagesContext } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
@@ -30,8 +30,8 @@ export const MessageInputHeaderView = () => {
   const { clearEditingState } = useMessageComposerAPIContext();
   const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
   const hasLinkPreviews = useHasLinkPreviews();
-  const { audioRecorderManager, AttachmentUploadPreviewList } = useMessageInputContext();
-  const { Reply } = useMessagesContext();
+  const { audioRecorderManager } = useMessageInputContext();
+  const { AttachmentUploadPreviewList, Reply } = useComponentsContext();
   const { isRecordingStateIdle } = useStateStore(
     audioRecorderManager.state,
     idleRecordingStateSelector,

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

@@ -31,11 +31,9 @@ import {
 } from 'stream-chat';
 
 import { useMessageComposer } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';
-import {
-  MessageInputContextValue,
-  useMessageInputContext,
-} from '../../../../contexts/messageInputContext/MessageInputContext';
+import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { isSoundPackageAvailable } from '../../../../native';
 import { primitives } from '../../../../theme';
@@ -44,13 +42,7 @@ const END_ANCHOR_THRESHOLD = 16;
 const END_SHRINK_COMPENSATION_DURATION = 200;
 const MAX_AUDIO_ATTACHMENTS_CONTAINER_WIDTH = 560;
 
-export type AttachmentUploadListPreviewPropsWithContext = Pick<
-  MessageInputContextValue,
-  | 'AudioAttachmentUploadPreview'
-  | 'FileAttachmentUploadPreview'
-  | 'ImageAttachmentUploadPreview'
-  | 'VideoAttachmentUploadPreview'
->;
+export type AttachmentUploadListPreviewPropsWithContext = Record<string, never>;
 
 const AttachmentPreviewCell = ({ children }: { children: React.ReactNode }) => (
   <Animated.View
@@ -85,15 +77,13 @@ const getIsAudioAttachmentPreview =
  * AttachmentUploadPreviewList
  * UI Component to preview the files set for upload
  */
-const UnMemoizedAttachmentUploadPreviewList = (
-  props: AttachmentUploadListPreviewPropsWithContext,
-) => {
+const UnMemoizedAttachmentUploadPreviewList = () => {
   const {
     AudioAttachmentUploadPreview,
     FileAttachmentUploadPreview,
     ImageAttachmentUploadPreview,
     VideoAttachmentUploadPreview,
-  } = props;
+  } = useComponentsContext();
   const { audioRecordingSendOnComplete } = useMessageInputContext();
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
@@ -370,7 +360,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
   );
 };
 
-export type AttachmentUploadPreviewListProps = Partial<AttachmentUploadListPreviewPropsWithContext>;
+export type AttachmentUploadPreviewListProps = Record<string, never>;
 
 const MemoizedAttachmentUploadPreviewListWithContext = React.memo(
   UnMemoizedAttachmentUploadPreviewList,
@@ -380,25 +370,7 @@ const MemoizedAttachmentUploadPreviewListWithContext = React.memo(
  * AttachmentUploadPreviewList
  * UI Component to preview the files set for upload
  */
-export const AttachmentUploadPreviewList = (props: AttachmentUploadPreviewListProps) => {
-  const {
-    AudioAttachmentUploadPreview,
-    FileAttachmentUploadPreview,
-    ImageAttachmentUploadPreview,
-    VideoAttachmentUploadPreview,
-  } = useMessageInputContext();
-  return (
-    <MemoizedAttachmentUploadPreviewListWithContext
-      {...{
-        AudioAttachmentUploadPreview,
-        FileAttachmentUploadPreview,
-        ImageAttachmentUploadPreview,
-        VideoAttachmentUploadPreview,
-      }}
-      {...props}
-    />
-  );
-};
+export const AttachmentUploadPreviewList = () => <MemoizedAttachmentUploadPreviewListWithContext />;
 
 const styles = StyleSheet.create({
   audioAttachmentsContainer: {

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

@@ -8,7 +8,7 @@ import { AttachmentRemoveControl } from './AttachmentRemoveControl';
 
 import { FilePreview } from '../../../../components/Attachment/FilePreview';
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
-import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
@@ -31,7 +31,7 @@ export const FileAttachmentUploadPreview = ({
     FileUploadInProgressIndicator,
     FileUploadRetryIndicator,
     FileUploadNotSupportedIndicator,
-  } = useMessageInputContext();
+  } = useComponentsContext();
   const { enableOfflineSupport } = useChatContext();
   const indicatorType = getIndicatorTypeForFileState(
     attachment.localMetadata.uploadState,

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

@@ -7,7 +7,7 @@ import { LocalImageAttachment } from 'stream-chat';
 import { AttachmentRemoveControl } from './AttachmentRemoveControl';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
-import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
@@ -29,7 +29,7 @@ export const ImageAttachmentUploadPreview = ({
     ImageUploadInProgressIndicator,
     ImageUploadRetryIndicator,
     ImageUploadNotSupportedIndicator,
-  } = useMessageInputContext();
+  } = useComponentsContext();
   const indicatorType = loading
     ? ProgressIndicatorTypes.IN_PROGRESS
     : getIndicatorTypeForFileState(attachment.localMetadata.uploadState, enableOfflineSupport);

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

@@ -3,6 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import dayjs from 'dayjs';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -15,7 +16,7 @@ import { primitives } from '../../../../theme';
 
 type AudioRecordingInProgressPropsWithContext = Pick<
   MessageInputContextValue,
-  'audioRecorderManager' | 'AudioRecordingWaveform'
+  'audioRecorderManager'
 > &
   Pick<AudioRecorderManagerState, 'duration' | 'waveformData'> & {
     /**
@@ -25,7 +26,8 @@ type AudioRecordingInProgressPropsWithContext = Pick<
   };
 
 const AudioRecordingInProgressWithContext = (props: AudioRecordingInProgressPropsWithContext) => {
-  const { AudioRecordingWaveform, maxDataPointsDrawn = 60, duration, waveformData } = props;
+  const { maxDataPointsDrawn = 60, duration, waveformData } = props;
+  const { AudioRecordingWaveform } = useComponentsContext();
 
   const styles = useStyles();
 
@@ -69,7 +71,7 @@ const audioRecorderSelector = (state: AudioRecorderManagerState) => ({
  * Component displayed when the audio is in the recording state.
  */
 export const AudioRecordingInProgress = (props: AudioRecordingInProgressProps) => {
-  const { audioRecorderManager, AudioRecordingWaveform } = useMessageInputContext();
+  const { audioRecorderManager } = useMessageInputContext();
 
   const { duration, waveformData } = useStateStore(
     audioRecorderManager.state,
@@ -78,7 +80,7 @@ export const AudioRecordingInProgress = (props: AudioRecordingInProgressProps) =
 
   return (
     <MemoizedAudioRecordingInProgress
-      {...{ audioRecorderManager, AudioRecordingWaveform, duration, waveformData }}
+      {...{ audioRecorderManager, duration, waveformData }}
       {...props}
     />
   );

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

@@ -10,6 +10,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { OwnCapabilitiesContextValue } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useActiveCommand } from '../../../../contexts/messageInputContext/hooks/useActiveCommand';
 import {
   MessageInputContextValue,
@@ -23,19 +24,19 @@ export type InputButtonsProps = Partial<InputButtonsWithContextProps>;
 
 export type InputButtonsWithContextProps = Pick<
   MessageInputContextValue,
-  'AttachButton' | 'hasCameraPicker' | 'hasCommands' | 'hasFilePicker' | 'hasImagePicker'
+  'hasCameraPicker' | 'hasCommands' | 'hasFilePicker' | 'hasImagePicker'
 > &
   Pick<OwnCapabilitiesContextValue, 'uploadFile'>;
 
 export const InputButtonsWithContext = (props: InputButtonsWithContextProps) => {
   const {
-    AttachButton,
     hasCameraPicker,
     hasCommands,
     hasFilePicker,
     hasImagePicker,
     uploadFile: ownCapabilitiesUploadFile,
   } = props;
+  const { AttachButton } = useComponentsContext();
   const { selectedPicker } = useAttachmentPickerState();
   const rotation = useSharedValue(0);
   const command = useActiveCommand();
@@ -107,14 +108,12 @@ const MemoizedInputButtonsWithContext = React.memo(
 ) as typeof InputButtonsWithContext;
 
 export const InputButtons = (props: InputButtonsProps) => {
-  const { AttachButton, hasCameraPicker, hasCommands, hasFilePicker, hasImagePicker } =
-    useMessageInputContext();
+  const { hasCameraPicker, hasCommands, hasFilePicker, hasImagePicker } = useMessageInputContext();
   const { uploadFile } = useOwnCapabilitiesContext();
 
   return (
     <MemoizedInputButtonsWithContext
       {...{
-        AttachButton,
         hasCameraPicker,
         hasCommands,
         hasFilePicker,

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

@@ -9,7 +9,8 @@ import { LinkPreviewsManager } from 'stream-chat';
 
 import { AttachmentRemoveControl } from './AttachmentPreview/AttachmentRemoveControl';
 
-import { useChatContext, useMessageComposer, useTheme } from '../../../contexts';
+import { useMessageComposer, useTheme } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { Link } from '../../../icons/link';
 import { components, primitives } from '../../../theme';
 import { useLinkPreviews } from '../hooks/useLinkPreviews';
@@ -38,7 +39,7 @@ type LinkPreviewProps = {
 
 export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
   const styles = useStyles();
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { linkPreviewsManager } = useMessageComposer();
   const { image_url, thumb_url, title, text, og_scrape_url } = linkPreview;
 

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

@@ -14,6 +14,7 @@ import {
   useMessageComposerHasSendableData,
   useTheme,
 } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useHasAttachments } from '../../../../contexts/messageInputContext/hooks/useHasAttachments';
 import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer';
 import {
@@ -36,10 +37,6 @@ export type OutputButtonsWithContextProps = Pick<ChatContextValue, 'isOnline'> &
     | 'asyncMessagesLockDistance'
     | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
-    | 'CooldownTimer'
-    | 'SendButton'
-    | 'StopMessageStreamingButton'
-    | 'StartAudioRecordingButton'
   > & {
     cooldownIsActive: boolean;
     hasAttachments: boolean;
@@ -51,17 +48,9 @@ const textComposerStateSelector = (state: TextComposerState) => ({
 });
 
 export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) => {
-  const {
-    audioRecordingEnabled,
-    channel,
-    CooldownTimer,
-    cooldownIsActive,
-    isOnline,
-    SendButton,
-    StopMessageStreamingButton,
-    StartAudioRecordingButton,
-    hasAttachments,
-  } = props;
+  const { audioRecordingEnabled, channel, cooldownIsActive, isOnline, hasAttachments } = props;
+  const { CooldownTimer, SendButton, StartAudioRecordingButton, StopMessageStreamingButton } =
+    useComponentsContext();
   const {
     theme: {
       messageComposer: {
@@ -180,10 +169,6 @@ export const OutputButtons = (props: OutputButtonsProps) => {
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
     audioRecordingSendOnComplete,
-    CooldownTimer,
-    SendButton,
-    StopMessageStreamingButton,
-    StartAudioRecordingButton,
   } = useMessageInputContext();
   const cooldownIsActive = useIsCooldownActive();
   const hasAttachments = useHasAttachments();
@@ -198,11 +183,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
         audioRecordingEnabled,
         channel,
         cooldownIsActive,
-        CooldownTimer,
         isOnline,
-        SendButton,
-        StartAudioRecordingButton,
-        StopMessageStreamingButton,
         hasAttachments,
       }}
       {...props}