chore: resolve conflicts from base branch

Author: khushal87

examples/TypeScriptMessaging/App.tsx

@@ -195,7 +195,7 @@ type AppContextType = {
 
 const AppContext = React.createContext({} as AppContextType);
 
-const NavigatorModule = () => {
+const StackNavigator = () => {
   const { channel } = useContext(AppContext);
 
   return (
@@ -260,7 +260,7 @@ const App = () => {
   return (
     <OverlayProvider i18nInstance={streami18n} value={{ style: theme }}>
       <Chat client={chatClient} i18nInstance={streami18n} enableOfflineSupport>
-        <NavigatorModule />
+        <StackNavigator />
       </Chat>
     </OverlayProvider>
   );

package/src/components/Channel/Channel.tsx

@@ -622,7 +622,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     loadingMoreRecent: loadingMoreRecentProp,
     markdownRules,
     markReadOnMount = true,
-    maxNumberOfFiles = 10,
     maxTimeBetweenGroupedMessages,
     Message = MessageDefault,
     MessageActionList = MessageActionListDefault,
@@ -1781,7 +1780,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     InputEditingStateHeader,
     InputReplyStateHeader,
     isCommandUIEnabled,
-    maxNumberOfFiles,
     MoreOptionsButton,
     openPollCreationDialog,
     SendButton,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -51,7 +51,6 @@ export const useCreateInputMessageInputContext = ({
   InputEditingStateHeader,
   InputReplyStateHeader,
   isCommandUIEnabled,
-  maxNumberOfFiles,
   MoreOptionsButton,
   openPollCreationDialog,
   SendButton,
@@ -119,7 +118,6 @@ export const useCreateInputMessageInputContext = ({
       InputEditingStateHeader,
       InputReplyStateHeader,
       isCommandUIEnabled,
-      maxNumberOfFiles,
       MoreOptionsButton,
       openPollCreationDialog,
       SendButton,

package/src/components/MessageInput/MessageInput.tsx

@@ -144,7 +144,6 @@ type MessageInputPropsWithContext = Partial<
     | 'CooldownTimer'
     | 'closeAttachmentPicker'
     | 'compressImageQuality'
-    | 'doFileUploadRequest'
     | 'FileUploadPreview'
     | 'ImageUploadPreview'
     | 'Input'
@@ -158,7 +157,6 @@ type MessageInputPropsWithContext = Partial<
     | 'VideoRecorderSelectorIcon'
     | 'CommandInput'
     | 'InputReplyStateHeader'
-    | 'maxNumberOfFiles'
     | 'SendButton'
     | 'ShowThreadMessageInChannelButton'
     | 'StartAudioRecordingButton'
@@ -211,7 +209,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     cooldownEndsAt,
     CooldownTimer,
     CreatePollContent,
-    doFileUploadRequest,
     editing,
     FileUploadPreview,
     ImageUploadPreview,
@@ -222,7 +219,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     CommandInput,
     InputReplyStateHeader,
     isOnline,
-    maxNumberOfFiles,
     members,
     Reply,
     SendButton,
@@ -236,7 +232,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   } = props;
 
   const messageComposer = useMessageComposer();
-  const { attachmentManager, textComposer } = messageComposer;
+  const { textComposer } = messageComposer;
   const { command, hasText } = useStateStore(textComposer.state, textComposerStateSelector);
   const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
   const { attachments } = useAttachmentManagerState();
@@ -269,15 +265,13 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
 
   const { seconds: cooldownRemainingSeconds } = useCountdown(cooldownEndsAt);
 
-  useEffect(() => {
-    attachmentManager.maxNumberOfFilesPerMessage = maxNumberOfFiles;
-    if (doFileUploadRequest) {
-      attachmentManager.setCustomUploadFn(doFileUploadRequest);
-    }
-
-    return closeAttachmentPicker;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // Close the attachment picker state when the component unmounts
+  useEffect(
+    () => () => {
+      closeAttachmentPicker();
+    },
+    [closeAttachmentPicker],
+  );
 
   useEffect(() => {
     const { editedMessage } = messageComposer;
@@ -817,7 +811,6 @@ export const MessageInput = (props: MessageInputProps) => {
     CooldownTimer,
     CreatePollContent,
     CreatePollIcon,
-    doFileUploadRequest,
     FileSelectorIcon,
     FileUploadPreview,
     ImageSelectorIcon,
@@ -828,7 +821,6 @@ export const MessageInput = (props: MessageInputProps) => {
     InputEditingStateHeader,
     CommandInput,
     InputReplyStateHeader,
-    maxNumberOfFiles,
     openPollCreationDialog,
     SendButton,
     sendMessage,
@@ -891,7 +883,6 @@ export const MessageInput = (props: MessageInputProps) => {
         CooldownTimer,
         CreatePollContent,
         CreatePollIcon,
-        doFileUploadRequest,
         editing,
         FileSelectorIcon,
         FileUploadPreview,
@@ -903,7 +894,6 @@ export const MessageInput = (props: MessageInputProps) => {
         InputEditingStateHeader,
         InputReplyStateHeader,
         isOnline,
-        maxNumberOfFiles,
         members,
         openPollCreationDialog,
         Reply,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -11,8 +11,8 @@ import { Alert, Keyboard, Linking, TextInput, TextInputProps } from 'react-nativ
 
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import {
-  createApplyCommandSettingsMiddleware,
   createCommandInjectionMiddleware,
+  createCommandStringExtractionMiddleware,
   createDraftCommandInjectionMiddleware,
   LocalMessage,
   Message,
@@ -292,8 +292,6 @@ export type InputMessageInputContextValue = {
   isCommandUIEnabled?: boolean;
   CommandInput: React.ComponentType<CommandInputProps>;
   InputReplyStateHeader: React.ComponentType;
-  /** Limit on allowed number of files to attach at a time. */
-  maxNumberOfFiles: number;
   /**
    * Custom UI component for more options button.
    *
@@ -452,33 +450,44 @@ export const MessageInputProvider = ({
     setSendThreadMessageInChannel(false);
   }, [threadId]);
 
+  /**
+   * These are the RN SDK specific middlewares that are added to the message composer to provide the default behaviour.
+   * TODO: Discuss and decide if we provide them by default in the SDK or leave it to the user to add them if they want the feature.
+   */
   useEffect(() => {
-    if (!client) {
-      return;
+    if (value.doFileUploadRequest) {
+      attachmentManager.setCustomUploadFn(value.doFileUploadRequest);
     }
 
-    client.setMessageComposerSetupFunction(({ composer }) => {
-      isCommandUIEnabled &&
-        composer.compositionMiddlewareExecutor.insert({
-          middleware: [createCommandInjectionMiddleware(composer)],
-          position: { after: 'stream-io/message-composer-middleware/attachments' },
-        });
-      enableOfflineSupport &&
-        composer.compositionMiddlewareExecutor.replace([
-          createAttachmentsCompositionMiddleware(composer),
-        ]);
-      isCommandUIEnabled &&
-        composer.draftCompositionMiddlewareExecutor.insert({
-          middleware: [createDraftCommandInjectionMiddleware(composer)],
-          position: { after: 'stream-io/message-composer-middleware/draft-attachments' },
-        });
-      isCommandUIEnabled &&
-        composer.textComposer.middlewareExecutor.insert({
-          middleware: [createApplyCommandSettingsMiddleware() as TextComposerMiddleware],
-          position: { after: 'stream-io/text-composer/commands-middleware' },
-        });
-    });
-  }, [client, isCommandUIEnabled, enableOfflineSupport]);
+    if (isCommandUIEnabled) {
+      messageComposer.compositionMiddlewareExecutor.insert({
+        middleware: [createCommandInjectionMiddleware(messageComposer)],
+        position: { after: 'stream-io/message-composer-middleware/attachments' },
+      });
+
+      messageComposer.draftCompositionMiddlewareExecutor.insert({
+        middleware: [createDraftCommandInjectionMiddleware(messageComposer)],
+        position: { after: 'stream-io/message-composer-middleware/draft-attachments' },
+      });
+
+      messageComposer.textComposer.middlewareExecutor.insert({
+        middleware: [createCommandStringExtractionMiddleware() as TextComposerMiddleware],
+        position: { after: 'stream-io/text-composer/commands-middleware' },
+      });
+    }
+
+    if (enableOfflineSupport) {
+      messageComposer.compositionMiddlewareExecutor.replace([
+        createAttachmentsCompositionMiddleware(messageComposer),
+      ]);
+    }
+  }, [
+    value.doFileUploadRequest,
+    isCommandUIEnabled,
+    enableOfflineSupport,
+    messageComposer,
+    attachmentManager,
+  ]);
 
   /**
    * Function for capturing a photo and uploading it

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

@@ -54,7 +54,6 @@ export const useCreateMessageInputContext = ({
   InputButtons,
   InputEditingStateHeader,
   InputReplyStateHeader,
-  maxNumberOfFiles,
   MoreOptionsButton,
   openAttachmentPicker,
   openFilePicker,
@@ -134,7 +133,6 @@ export const useCreateMessageInputContext = ({
       InputEditingStateHeader,
       InputReplyStateHeader,
       isCommandUIEnabled,
-      maxNumberOfFiles,
       MoreOptionsButton,
       openAttachmentPicker,
       openFilePicker,