stream-chat-react-native-core 9.0.0-beta.30 → 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/Message/MessageItemView/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap

@@ -44,6 +44,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
             "color": "#1a1b25",
             "fontSize": 17,
             "lineHeight": 20,
+            "writingDirection": "ltr",
           }
         }
       >

package/src/components/Message/MessageItemView/utils/renderText.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren, ReactNode, useCallback, useMemo } from 'react';
 import {
   GestureResponderEvent,
+  I18nManager,
   Linking,
   Platform,
   Text,
@@ -294,6 +295,7 @@ export const renderText = (params: RenderTextParams) => {
       ...defaultMarkdownStyles.text,
       color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
       ...markdownStyles?.text,
+      writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
     },
   };
 

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/__tests__/__snapshots__/SendButton.test.js.snap

@@ -122,28 +122,37 @@ exports[`SendButton should render a SendButton 1`] = `
               }
               strokeWidth={1.5}
             >
-              <RNSVGPath
-                d="M11.2498 10H6.24982M6.24982 10L3.7881 2.71328C3.74537 2.59349 3.7402 2.4635 3.7733 2.34069C3.80639 2.21788 3.87616 2.10808 3.9733 2.02597C4.07044 1.94386 4.19032 1.89335 4.31693 1.88117C4.44353 1.86899 4.57084 1.89573 4.68185 1.95781L17.8069 9.4461C17.9045 9.50015 17.986 9.57937 18.0427 9.67555C18.0994 9.77172 18.1293 9.88133 18.1293 9.99297C18.1293 10.1046 18.0994 10.2142 18.0427 10.3104C17.986 10.4066 17.9045 10.4858 17.8069 10.5398L4.68185 18.0469C4.57051 18.1096 4.4426 18.1367 4.31537 18.1245C4.18815 18.1123 4.06772 18.0614 3.97032 17.9787C3.87292 17.8959 3.80323 17.7853 3.77065 17.6617C3.73807 17.5381 3.74416 17.4075 3.7881 17.2875L6.24982 10Z"
-                fill={null}
-                propList={
-                  [
-                    "fill",
-                    "stroke",
-                    "strokeWidth",
-                    "strokeLinecap",
-                    "strokeLinejoin",
-                  ]
-                }
-                stroke={
+              <RNSVGGroup
+                fill={
                   {
-                    "payload": 4294967295,
+                    "payload": 4278190080,
                     "type": 0,
                   }
                 }
-                strokeLinecap={1}
-                strokeLinejoin={1}
-                strokeWidth={1.5}
-              />
+              >
+                <RNSVGPath
+                  d="M11.2498 10H6.24982M6.24982 10L3.7881 2.71328C3.74537 2.59349 3.7402 2.4635 3.7733 2.34069C3.80639 2.21788 3.87616 2.10808 3.9733 2.02597C4.07044 1.94386 4.19032 1.89335 4.31693 1.88117C4.44353 1.86899 4.57084 1.89573 4.68185 1.95781L17.8069 9.4461C17.9045 9.50015 17.986 9.57937 18.0427 9.67555C18.0994 9.77172 18.1293 9.88133 18.1293 9.99297C18.1293 10.1046 18.0994 10.2142 18.0427 10.3104C17.986 10.4066 17.9045 10.4858 17.8069 10.5398L4.68185 18.0469C4.57051 18.1096 4.4426 18.1367 4.31537 18.1245C4.18815 18.1123 4.06772 18.0614 3.97032 17.9787C3.87292 17.8959 3.80323 17.7853 3.77065 17.6617C3.73807 17.5381 3.74416 17.4075 3.7881 17.2875L6.24982 10Z"
+                  fill={null}
+                  propList={
+                    [
+                      "fill",
+                      "stroke",
+                      "strokeWidth",
+                      "strokeLinecap",
+                      "strokeLinejoin",
+                    ]
+                  }
+                  stroke={
+                    {
+                      "payload": 4294967295,
+                      "type": 0,
+                    }
+                  }
+                  strokeLinecap={1}
+                  strokeLinejoin={1}
+                  strokeWidth={1.5}
+                />
+              </RNSVGGroup>
             </RNSVGGroup>
           </RNSVGSvgView>
         </View>
@@ -980,28 +989,37 @@ exports[`SendButton should render a disabled SendButton 1`] = `
               }
               strokeWidth={1.5}
             >
-              <RNSVGPath
-                d="M11.2498 10H6.24982M6.24982 10L3.7881 2.71328C3.74537 2.59349 3.7402 2.4635 3.7733 2.34069C3.80639 2.21788 3.87616 2.10808 3.9733 2.02597C4.07044 1.94386 4.19032 1.89335 4.31693 1.88117C4.44353 1.86899 4.57084 1.89573 4.68185 1.95781L17.8069 9.4461C17.9045 9.50015 17.986 9.57937 18.0427 9.67555C18.0994 9.77172 18.1293 9.88133 18.1293 9.99297C18.1293 10.1046 18.0994 10.2142 18.0427 10.3104C17.986 10.4066 17.9045 10.4858 17.8069 10.5398L4.68185 18.0469C4.57051 18.1096 4.4426 18.1367 4.31537 18.1245C4.18815 18.1123 4.06772 18.0614 3.97032 17.9787C3.87292 17.8959 3.80323 17.7853 3.77065 17.6617C3.73807 17.5381 3.74416 17.4075 3.7881 17.2875L6.24982 10Z"
-                fill={null}
-                propList={
-                  [
-                    "fill",
-                    "stroke",
-                    "strokeWidth",
-                    "strokeLinecap",
-                    "strokeLinejoin",
-                  ]
-                }
-                stroke={
+              <RNSVGGroup
+                fill={
                   {
-                    "payload": 4288916666,
+                    "payload": 4278190080,
                     "type": 0,
                   }
                 }
-                strokeLinecap={1}
-                strokeLinejoin={1}
-                strokeWidth={1.5}
-              />
+              >
+                <RNSVGPath
+                  d="M11.2498 10H6.24982M6.24982 10L3.7881 2.71328C3.74537 2.59349 3.7402 2.4635 3.7733 2.34069C3.80639 2.21788 3.87616 2.10808 3.9733 2.02597C4.07044 1.94386 4.19032 1.89335 4.31693 1.88117C4.44353 1.86899 4.57084 1.89573 4.68185 1.95781L17.8069 9.4461C17.9045 9.50015 17.986 9.57937 18.0427 9.67555C18.0994 9.77172 18.1293 9.88133 18.1293 9.99297C18.1293 10.1046 18.0994 10.2142 18.0427 10.3104C17.986 10.4066 17.9045 10.4858 17.8069 10.5398L4.68185 18.0469C4.57051 18.1096 4.4426 18.1367 4.31537 18.1245C4.18815 18.1123 4.06772 18.0614 3.97032 17.9787C3.87292 17.8959 3.80323 17.7853 3.77065 17.6617C3.73807 17.5381 3.74416 17.4075 3.7881 17.2875L6.24982 10Z"
+                  fill={null}
+                  propList={
+                    [
+                      "fill",
+                      "stroke",
+                      "strokeWidth",
+                      "strokeLinecap",
+                      "strokeLinejoin",
+                    ]
+                  }
+                  stroke={
+                    {
+                      "payload": 4288916666,
+                      "type": 0,
+                    }
+                  }
+                  strokeLinecap={1}
+                  strokeLinejoin={1}
+                  strokeWidth={1.5}
+                />
+              </RNSVGGroup>
             </RNSVGGroup>
           </RNSVGSvgView>
         </View>

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,