fix: change how message composer config is set

Author: khushal87

examples/TypeScriptMessaging/App.tsx

@@ -189,9 +189,41 @@ type AppContextType = {
 
 const AppContext = React.createContext({} as AppContextType);
 
+const StackNavigator = () => {
+  const { channel } = useContext(AppContext);
+
+  return (
+    <Stack.Navigator
+      initialRouteName='ChannelList'
+      screenOptions={{
+        headerTitleStyle: { alignSelf: 'center', fontWeight: 'bold' },
+      }}
+    >
+      <Stack.Screen
+        component={ChannelScreen}
+        name='Channel'
+        options={() => ({
+          headerBackTitle: 'Back',
+          headerRight: EmptyHeader,
+          headerTitle: channel?.data?.name,
+        })}
+      />
+      <Stack.Screen
+        component={ChannelListScreen}
+        name='ChannelList'
+        options={{ headerTitle: 'Channel List' }}
+      />
+      <Stack.Screen
+        component={ThreadScreen}
+        name='Thread'
+        options={() => ({ headerLeft: EmptyHeader })}
+      />
+    </Stack.Navigator>
+  );
+};
+
 const App = () => {
   const theme = useStreamChatTheme();
-  const { channel } = useContext(AppContext);
 
   const chatClient = useCreateChatClient({
     apiKey,
@@ -206,32 +238,7 @@ const App = () => {
   return (
     <OverlayProvider i18nInstance={streami18n} value={{ style: theme }}>
       <Chat client={chatClient} i18nInstance={streami18n} enableOfflineSupport>
-        <Stack.Navigator
-          initialRouteName='ChannelList'
-          screenOptions={{
-            headerTitleStyle: { alignSelf: 'center', fontWeight: 'bold' },
-          }}
-        >
-          <Stack.Screen
-            component={ChannelScreen}
-            name='Channel'
-            options={() => ({
-              headerBackTitle: 'Back',
-              headerRight: EmptyHeader,
-              headerTitle: channel?.data?.name,
-            })}
-          />
-          <Stack.Screen
-            component={ChannelListScreen}
-            name='ChannelList'
-            options={{ headerTitle: 'Channel List' }}
-          />
-          <Stack.Screen
-            component={ThreadScreen}
-            name='Thread'
-            options={() => ({ headerLeft: EmptyHeader })}
-          />
-        </Stack.Navigator>
+        <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'
@@ -210,7 +208,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     cooldownEndsAt,
     CooldownTimer,
     CreatePollContent,
-    doFileUploadRequest,
     editing,
     FileUploadPreview,
     ImageUploadPreview,
@@ -221,7 +218,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     CommandInput,
     InputReplyStateHeader,
     isOnline,
-    maxNumberOfFiles,
     members,
     Reply,
     SendButton,
@@ -235,7 +231,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   } = props;
 
   const messageComposer = useMessageComposer();
-  const { attachmentManager, textComposer } = messageComposer;
+  const { textComposer } = messageComposer;
   const { command, mentionedUsers, hasText } = useStateStore(
     textComposer.state,
     textComposerStateSelector,
@@ -271,15 +267,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],
+  );
 
   const editingExists = !!editing;
 
@@ -799,7 +793,6 @@ export const MessageInput = (props: MessageInputProps) => {
     CooldownTimer,
     CreatePollContent,
     CreatePollIcon,
-    doFileUploadRequest,
     FileSelectorIcon,
     FileUploadPreview,
     ImageSelectorIcon,
@@ -810,7 +803,6 @@ export const MessageInput = (props: MessageInputProps) => {
     InputEditingStateHeader,
     CommandInput,
     InputReplyStateHeader,
-    maxNumberOfFiles,
     openPollCreationDialog,
     SendButton,
     sendMessage,
@@ -872,7 +864,6 @@ export const MessageInput = (props: MessageInputProps) => {
         CooldownTimer,
         CreatePollContent,
         CreatePollIcon,
-        doFileUploadRequest,
         editing,
         FileSelectorIcon,
         FileUploadPreview,
@@ -884,7 +875,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,