stream-chat-react-native-core 8.13.7 → 9.0.0-beta.2

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -7,9 +7,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Alert, Keyboard, Linking, TextInput, TextInputProps } from 'react-native';
+import { Alert, Linking, Platform, TextInput, TextInputProps } from 'react-native';
 
-import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import { lookup as lookupMimeType } from 'mime-types';
 import {
   LocalMessage,
@@ -22,7 +21,6 @@ import {
   UserResponse,
 } from 'stream-chat';
 
-import { useAttachmentManagerState } from './hooks/useAttachmentManagerState';
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { useMessageComposer } from './hooks/useMessageComposer';
 
@@ -30,31 +28,30 @@ import {
   AutoCompleteSuggestionHeaderProps,
   AutoCompleteSuggestionItemProps,
   AutoCompleteSuggestionListProps,
+  FileUploadNotSupportedIndicatorProps,
+  FileUploadRetryIndicatorProps,
+  ImageUploadRetryIndicatorProps,
   PollContentProps,
   StopMessageStreamingButtonProps,
 } from '../../components';
-import { parseLinksFromText } from '../../components/Message/MessageSimple/utils/parseLinks';
-import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
-import { AttachmentUploadPreviewListProps } from '../../components/MessageInput/AttachmentUploadPreviewList';
-import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
-import type { AttachmentUploadProgressIndicatorProps } from '../../components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
+import type { InputViewProps } from '../../components/AutoCompleteInput/InputView';
+import { dismissKeyboard } from '../../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
+import { parseLinksFromText } from '../../components/Message/MessageItemView/utils/parseLinks';
+import { AttachmentUploadPreviewListProps } from '../../components/MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList';
 import { AudioAttachmentUploadPreviewProps } from '../../components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview';
 import { FileAttachmentUploadPreviewProps } from '../../components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview';
 import { ImageAttachmentUploadPreviewProps } from '../../components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview';
+import { VideoAttachmentUploadPreviewProps } from '../../components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview';
 import type { AudioRecorderProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecorder';
 import type { AudioRecordingButtonProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingButton';
 import type { AudioRecordingInProgressProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingInProgress';
 import type { AudioRecordingLockIndicatorProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator';
-import type { AudioRecordingPreviewProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingPreview';
 import type { AudioRecordingWaveformProps } from '../../components/MessageInput/components/AudioRecorder/AudioRecordingWaveform';
-import type { CommandInputProps } from '../../components/MessageInput/components/CommandInput';
-import type { InputEditingStateHeaderProps } from '../../components/MessageInput/components/InputEditingStateHeader';
-import type { CooldownTimerProps } from '../../components/MessageInput/CooldownTimer';
-import { useCooldown } from '../../components/MessageInput/hooks/useCooldown';
-import type { InputButtonsProps } from '../../components/MessageInput/InputButtons';
-import type { MessageInputProps } from '../../components/MessageInput/MessageInput';
-import type { MoreOptionsButtonProps } from '../../components/MessageInput/MoreOptionsButton';
-import type { SendButtonProps } from '../../components/MessageInput/SendButton';
+import type { AttachButtonProps } from '../../components/MessageInput/components/InputButtons/AttachButton';
+import type { InputButtonsProps } from '../../components/MessageInput/components/InputButtons/index';
+import type { SendButtonProps } from '../../components/MessageInput/components/OutputButtons/SendButton';
+import { useAudioRecorder } from '../../components/MessageInput/hooks/useAudioRecorder';
+import type { MessageComposerProps } from '../../components/MessageInput/MessageComposer';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import {
   createAttachmentsCompositionMiddleware,
@@ -62,12 +59,11 @@ import {
 } from '../../middlewares/attachments';
 
 import { isDocumentPickerAvailable, MediaTypes, NativeHandlers } from '../../native';
+import { AudioRecorderManager } from '../../state-store/audio-recorder-manager';
+import { MessageInputHeightStore } from '../../state-store/message-input-height-store';
 import { File } from '../../types/types';
 import { compressedImageURI } from '../../utils/compressImage';
-import {
-  AttachmentPickerIconProps,
-  useAttachmentPickerContext,
-} from '../attachmentPickerContext/AttachmentPickerContext';
+import { useAttachmentPickerContext } from '../attachmentPickerContext/AttachmentPickerContext';
 import { useChannelContext } from '../channelContext/ChannelContext';
 import { useChatContext } from '../chatContext/ChatContext';
 import { useMessageComposerAPIContext } from '../messageComposerContext/MessageComposerAPIContext';
@@ -80,9 +76,6 @@ import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type LocalMessageInputContext = {
   closeAttachmentPicker: () => void;
-  /** The time at which the active cooldown will end */
-  cooldownEndsAt: Date;
-
   inputBoxRef: React.RefObject<TextInput | null>;
   openAttachmentPicker: () => void;
   /**
@@ -90,7 +83,6 @@ export type LocalMessageInputContext = {
    */
   pickAndUploadImageFromNativePicker: () => Promise<void>;
   pickFile: () => Promise<void>;
-  selectedPicker?: 'images';
   sendMessage: () => Promise<void>;
   /**
    * Ref callback to set reference on input box
@@ -99,9 +91,15 @@ export type LocalMessageInputContext = {
   /**
    * Function for taking a photo and uploading it
    */
-  takeAndUploadImage: (mediaType?: MediaTypes) => Promise<void>;
-  toggleAttachmentPicker: () => void;
+  takeAndUploadImage: (
+    mediaType?: MediaTypes,
+  ) => Promise<{ askToOpenSettings?: boolean; canceled?: boolean } | undefined>;
   uploadNewFile: (file: File) => Promise<void>;
+  audioRecorderManager: AudioRecorderManager;
+  startVoiceRecording: () => Promise<boolean | undefined>;
+  deleteVoiceRecording: () => Promise<void>;
+  uploadVoiceRecording: (multiSendEnabled: boolean) => Promise<void>;
+  stopVoiceRecording: () => Promise<void>;
 };
 
 export type InputMessageInputContextValue = {
@@ -163,7 +161,7 @@ export type InputMessageInputContextValue = {
    * **Default**
    * [AudioRecordingPreview](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx)
    */
-  AudioRecordingPreview: React.ComponentType<AudioRecordingPreviewProps>;
+  AudioRecordingPreview: React.ComponentType;
   /**
    * Custom UI component to render audio recording waveform.
    *
@@ -175,20 +173,6 @@ export type InputMessageInputContextValue = {
   AutoCompleteSuggestionHeader: React.ComponentType<AutoCompleteSuggestionHeaderProps>;
   AutoCompleteSuggestionItem: React.ComponentType<AutoCompleteSuggestionItemProps>;
   AutoCompleteSuggestionList: React.ComponentType<AutoCompleteSuggestionListProps>;
-
-  /**
-   * Custom UI component to render [draggable handle](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) of attachmentpicker.
-   *
-   * **Default**
-   * [AttachmentPickerBottomSheetHandle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
-   */
-  AttachmentPickerBottomSheetHandle: React.FC<BottomSheetHandleProps>;
-  /**
-   * Height of the image picker bottom sheet handle.
-   * @type number
-   * @default 20
-   */
-  attachmentPickerBottomSheetHandleHeight: number;
   /**
    * Height of the image picker bottom sheet when opened.
    * @type number
@@ -206,65 +190,32 @@ export type InputMessageInputContextValue = {
    * Height of the attachment selection bar displayed on the attachment picker.
    * @type number
    * @default 52
+   * @deprecated Please remove this in scope of V9
    */
   attachmentSelectionBarHeight: number;
 
   AttachmentUploadPreviewList: React.ComponentType<AttachmentUploadPreviewListProps>;
-  /**
-   * Custom UI component for [camera selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
-   *
-   * **Default: **
-   * [CameraSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CameraSelectorIcon.tsx)
-   */
-  CameraSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
-  /**
-   * Custom UI component for the poll creation icon.
-   *
-   * **Default: **
-   * [CreatePollIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CreatePollIcon.tsx)
-   */
-  CreatePollIcon: React.ComponentType;
-  /**
-   * Custom UI component for [file selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
-   *
-   * **Default: **
-   * [FileSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/FileSelectorIcon.tsx)
-   */
-  FileSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
-  /**
-   * Custom UI component for [image selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
-   *
-   * **Default: **
-   * [ImageSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageSelectorIcon.tsx)
-   */
-  ImageSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
-  /**
-   * Custom UI component for Android's video recorder selector icon.
-   *
-   * **Default: **
-   * [VideoRecorderSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/VideoRecorderSelectorIcon.tsx)
-   */
-  VideoRecorderSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   AudioAttachmentUploadPreview: React.ComponentType<AudioAttachmentUploadPreviewProps>;
   ImageAttachmentUploadPreview: React.ComponentType<ImageAttachmentUploadPreviewProps>;
   FileAttachmentUploadPreview: React.ComponentType<FileAttachmentUploadPreviewProps>;
-  VideoAttachmentUploadPreview: React.ComponentType<FileAttachmentUploadPreviewProps>;
-  /**
-   * Custom UI component for commands button.
-   *
-   * Defaults to and accepts same props as:
-   * [CommandsButton](https://getstream.io/chat/docs/sdk/reactnative/ui-components/commands-button/)
-   */
-  CommandsButton: React.ComponentType<CommandsButtonProps>;
+  VideoAttachmentUploadPreview: React.ComponentType<VideoAttachmentUploadPreviewProps>;
+
+  FileUploadInProgressIndicator: React.ComponentType;
+  FileUploadRetryIndicator: React.ComponentType<FileUploadRetryIndicatorProps>;
+  FileUploadNotSupportedIndicator: React.ComponentType<FileUploadNotSupportedIndicatorProps>;
+  ImageUploadInProgressIndicator: React.ComponentType;
+  ImageUploadRetryIndicator: React.ComponentType<ImageUploadRetryIndicatorProps>;
+  ImageUploadNotSupportedIndicator: React.ComponentType;
+
   /**
    * Custom UI component to display the remaining cooldown a user will have to wait before
    * being allowed to send another message. This component is displayed in place of the
-   * send button for the MessageInput component.
+   * send button for the MessageComposer component.
    *
    * **default**
    * [CooldownTimer](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/CooldownTimer.tsx)
    */
-  CooldownTimer: React.ComponentType<CooldownTimerProps>;
+  CooldownTimer: React.ComponentType;
   editMessage: (params: {
     localMessage: LocalMessage;
     options?: UpdateMessageOptions;
@@ -280,17 +231,6 @@ export type InputMessageInputContextValue = {
   /** When false, ImageSelectorIcon will be hidden */
   hasImagePicker: boolean;
 
-  InputEditingStateHeader: React.ComponentType<InputEditingStateHeaderProps>;
-  CommandInput: React.ComponentType<CommandInputProps>;
-  InputReplyStateHeader: React.ComponentType;
-  /**
-   * Custom UI component for more options button.
-   *
-   * Defaults to and accepts same props as:
-   * [MoreOptionsButton](https://getstream.io/chat/docs/sdk/reactnative/ui-components/more-options-button/)
-   */
-  MoreOptionsButton: React.ComponentType<MoreOptionsButtonProps>;
-
   /**
    * Custom UI component for send button.
    *
@@ -310,6 +250,30 @@ export type InputMessageInputContextValue = {
   ShowThreadMessageInChannelButton: React.ComponentType<{
     threadList?: boolean;
   }>;
+  /**
+   * Custom UI component to override leading side of composer container.
+   */
+  MessageComposerLeadingView: React.ComponentType;
+  /**
+   * Custom UI component to override trailing side of composer container.
+   */
+  MessageComposerTrailingView: React.ComponentType;
+  /**
+   * Custom UI component to override message input header content.
+   */
+  MessageInputHeaderView: React.ComponentType;
+  /**
+   * Custom UI component to override message input footer content.
+   */
+  MessageInputFooterView: React.ComponentType;
+  /**
+   * Custom UI component to override leading side of input row.
+   */
+  MessageInputLeadingView: React.ComponentType;
+  /**
+   * Custom UI component to override trailing side of input row.
+   */
+  MessageInputTrailingView: React.ComponentType;
 
   /**
    * Custom UI component for audio recording mic button.
@@ -319,10 +283,6 @@ export type InputMessageInputContextValue = {
    */
   StartAudioRecordingButton: React.ComponentType<AudioRecordingButtonProps>;
   StopMessageStreamingButton: React.ComponentType<StopMessageStreamingButtonProps> | null;
-  /**
-   * Custom UI component to render upload progress indicator on attachment preview.
-   */
-  AttachmentUploadProgressIndicator: React.ComponentType<AttachmentUploadProgressIndicatorProps>;
   /**
    * Additional props for underlying TextInput component. These props will be forwarded as it is to TextInput component.
    *
@@ -343,6 +303,10 @@ export type InputMessageInputContextValue = {
    * Override the entire content of the CreatePoll component. The component has full access to the useCreatePollContext() hook.
    * */
   CreatePollContent?: React.ComponentType<PollContentProps>;
+  /**
+   * Vertical gap between poll options in poll creation dialog.
+   */
+  createPollOptionGap?: number;
 
   /**
    * Override file upload request
@@ -358,16 +322,29 @@ export type InputMessageInputContextValue = {
    */
   handleAttachButtonPress?: () => void;
 
+  /**
+   * Whether the message input is floating or not.
+   * @type boolean
+   * @default false
+   */
+  messageInputFloating: boolean;
+
   /**
    * Custom UI component for AutoCompleteInput.
    * Has access to all of [MessageInputContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/messageInputContext/MessageInputContext.tsx)
    */
   Input?: React.ComponentType<
-    Omit<MessageInputProps, 'Input'> &
+    Omit<MessageComposerProps, 'Input'> &
       InputButtonsProps & {
         getUsers: () => UserResponse[];
       }
   >;
+  /**
+   * Custom UI component to override the combined input body view.
+   * Defaults to
+   * [InputView](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AutoCompleteInput/InputView.tsx)
+   */
+  InputView: React.ComponentType<InputViewProps>;
   /**
    * Custom UI component to override buttons on left side of input box
    * Defaults to
@@ -382,7 +359,6 @@ export type InputMessageInputContextValue = {
    * - closeAttachmentPicker
    * - openAttachmentPicker
    * - openCommandsPicker
-   * - toggleAttachmentPicker
    */
   InputButtons?: React.ComponentType<InputButtonsProps>;
   openPollCreationDialog?: ({ sendMessage }: Pick<LocalMessageInputContext, 'sendMessage'>) => void;
@@ -396,6 +372,7 @@ export type InputMessageInputContextValue = {
    */
   setInputRef?: (ref: TextInput | null) => void;
   showPollCreationDialog?: boolean;
+  messageInputHeightStore: MessageInputHeightStore;
 };
 
 export type MessageInputContextValue = LocalMessageInputContext &
@@ -411,10 +388,11 @@ export const MessageInputProvider = ({
 }: PropsWithChildren<{
   value: InputMessageInputContextValue;
 }>) => {
-  const { closePicker, openPicker, selectedPicker, setSelectedPicker } =
+  const { closePicker, openPicker, attachmentPickerStore, disableAttachmentPicker } =
     useAttachmentPickerContext();
   const { client } = useChatContext();
   const channelCapabilities = useOwnCapabilitiesContext();
+  const [audioRecorderManager] = useState(new AudioRecorderManager());
 
   const { uploadAbortControllerRef } = useChannelContext();
   const { clearEditingState } = useMessageComposerAPIContext();
@@ -432,11 +410,8 @@ export const MessageInputProvider = ({
     allowSendBeforeAttachmentsUpload,
   } = value;
 
-  const { endsAt: cooldownEndsAt, start: startCooldown } = useCooldown();
-
   const messageComposer = useMessageComposer();
   const { attachmentManager, editedMessage } = messageComposer;
-  const { availableUploadSlots } = useAttachmentManagerState();
 
   /**
    * These are the RN SDK specific middlewares that are added to the message composer to provide the default behaviour.
@@ -468,7 +443,7 @@ export const MessageInputProvider = ({
    * Function for capturing a photo and uploading it
    */
   const takeAndUploadImage = useStableCallback(async (mediaType?: MediaTypes) => {
-    if (!availableUploadSlots) {
+    if (!attachmentManager.availableUploadSlots) {
       Alert.alert(t('Maximum number of files reached'));
       return;
     }
@@ -478,7 +453,7 @@ export const MessageInputProvider = ({
       mediaType,
     });
 
-    if (file.askToOpenSettings) {
+    if (file.askToOpenSettings && disableAttachmentPicker) {
       Alert.alert(
         t('Allow camera access in device settings'),
         t('Device camera is used to take photos or videos.'),
@@ -489,23 +464,27 @@ export const MessageInputProvider = ({
       );
     }
 
-    if (file.cancelled) {
-      return;
+    if (file.askToOpenSettings || file.cancelled) {
+      return file;
     }
 
     await uploadNewFile(file);
+
+    return file;
   });
 
   /**
    * Function for picking a photo from native image picker and uploading it
    */
   const pickAndUploadImageFromNativePicker = useStableCallback(async () => {
-    if (!availableUploadSlots) {
+    if (!attachmentManager.availableUploadSlots) {
       Alert.alert(t('Maximum number of files reached'));
       return;
     }
 
-    const result = await NativeHandlers.pickImage({ maxNumberOfFiles: availableUploadSlots });
+    const result = await NativeHandlers.pickImage({
+      maxNumberOfFiles: attachmentManager.availableUploadSlots,
+    });
     if (result.askToOpenSettings) {
       Alert.alert(
         t('Allow access to your Gallery'),
@@ -534,13 +513,13 @@ export const MessageInputProvider = ({
       return;
     }
 
-    if (!availableUploadSlots) {
+    if (!attachmentManager.availableUploadSlots) {
       Alert.alert(t('Maximum number of files reached'));
       return;
     }
 
     const result = await NativeHandlers.pickDocument({
-      maxNumberOfFiles: availableUploadSlots,
+      maxNumberOfFiles: attachmentManager.availableUploadSlots,
     });
 
     if (result.cancelled || !result.assets?.length) {
@@ -556,33 +535,30 @@ export const MessageInputProvider = ({
    * Function to open the attachment picker if the MediaLibary is installed.
    */
   const openAttachmentPicker = useCallback(() => {
-    Keyboard.dismiss();
-    setSelectedPicker('images');
-    openPicker();
-  }, [openPicker, setSelectedPicker]);
+    dismissKeyboard();
+    const run = () => {
+      attachmentPickerStore.setSelectedPicker('images');
+      openPicker();
+    };
+
+    if (Platform.OS === 'android') {
+      setTimeout(() => {
+        run();
+      }, 200);
+    } else {
+      run();
+    }
+  }, [openPicker, attachmentPickerStore]);
 
   /**
    * Function to close the attachment picker if the MediaLibrary is installed.
    */
   const closeAttachmentPicker = useCallback(() => {
-    setSelectedPicker(undefined);
+    attachmentPickerStore.setSelectedPicker(undefined);
     closePicker();
-  }, [closePicker, setSelectedPicker]);
-
-  /**
-   * Function to toggle the attachment picker if the MediaLibrary is installed.
-   */
-  const toggleAttachmentPicker = useCallback(() => {
-    if (selectedPicker) {
-      closeAttachmentPicker();
-    } else {
-      openAttachmentPicker();
-    }
-  }, [closeAttachmentPicker, openAttachmentPicker, selectedPicker]);
+  }, [closePicker, attachmentPickerStore]);
 
   const sendMessage = useStableCallback(async () => {
-    startCooldown();
-
     if (inputBoxRef.current) {
       inputBoxRef.current.clear();
     }
@@ -692,9 +668,11 @@ export const MessageInputProvider = ({
     defaultOpenPollCreationDialog();
   });
 
+  const { deleteVoiceRecording, startVoiceRecording, stopVoiceRecording, uploadVoiceRecording } =
+    useAudioRecorder({ audioRecorderManager, sendMessage });
+
   const messageInputContext = useCreateMessageInputContext({
     closeAttachmentPicker,
-    cooldownEndsAt,
     inputBoxRef,
     openAttachmentPicker,
     pickAndUploadImageFromNativePicker,
@@ -702,14 +680,17 @@ export const MessageInputProvider = ({
     setInputBoxRef,
     takeAndUploadImage,
     thread,
-    toggleAttachmentPicker,
     uploadNewFile,
     ...value,
     closePollCreationDialog,
     openPollCreationDialog,
-    selectedPicker,
     sendMessage, // overriding the originally passed in sendMessage
     showPollCreationDialog,
+    audioRecorderManager,
+    startVoiceRecording,
+    deleteVoiceRecording,
+    uploadVoiceRecording,
+    stopVoiceRecording,
   });
   return (
     <MessageInputContext.Provider

package/src/contexts/messageInputContext/__tests__/filePickers.test.tsx

@@ -9,6 +9,7 @@ import { generateFileReference } from '../../../mock-builders/attachments';
 
 import { NativeHandlers } from '../../../native';
 
+import { AttachmentPickerProvider } from '../../attachmentPickerContext/AttachmentPickerContext';
 import { ChannelContextValue, ChannelProvider } from '../../channelContext/ChannelContext';
 import { MessageComposerProvider } from '../../messageComposerContext/MessageComposerContext';
 import {
@@ -31,17 +32,19 @@ const Wrapper = ({ channel, client, props }) => {
           } as ChannelContextValue
         }
       >
-        <MessageComposerProvider value={{ channel }}>
-          <MessageInputProvider
-            value={
-              {
-                ...props,
-              } as InputMessageInputContextValue
-            }
-          >
-            {props.children}
-          </MessageInputProvider>
-        </MessageComposerProvider>
+        <AttachmentPickerProvider value={{ disableAttachmentPicker: true }}>
+          <MessageComposerProvider value={{ channel }}>
+            <MessageInputProvider
+              value={
+                {
+                  ...props,
+                } as InputMessageInputContextValue
+              }
+            >
+              {props.children}
+            </MessageInputProvider>
+          </MessageComposerProvider>
+        </AttachmentPickerProvider>
       </ChannelProvider>
     </Chat>
   );

package/src/contexts/messageInputContext/hooks/useActiveCommand.ts

@@ -0,0 +1,16 @@
+import { TextComposerState } from 'stream-chat';
+
+import { useMessageComposer } from './useMessageComposer';
+
+import { useStateStore } from '../../../hooks/useStateStore';
+
+const activeCommandSelector = (state: TextComposerState) => ({
+  command: state.command,
+});
+
+export const useActiveCommand = () => {
+  const { textComposer } = useMessageComposer();
+  const state = useStateStore(textComposer.state, activeCommandSelector);
+
+  return state.command;
+};