chore: introduce prop to enable async attachments

Author: isekovanic

package/src/components/Channel/Channel.tsx

@@ -7,7 +7,6 @@ import throttle from 'lodash/throttle';
 import { lookup } from 'mime-types';
 import {
   Channel as ChannelClass,
-  ChannelResponse,
   ChannelState,
   Channel as ChannelType,
   DeleteMessageOptions,
@@ -495,7 +494,10 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
   } & Partial<
     Pick<
       InputMessageInputContextValue,
-      'openPollCreationDialog' | 'CreatePollContent' | 'StopMessageStreamingButton'
+      | 'openPollCreationDialog'
+      | 'CreatePollContent'
+      | 'StopMessageStreamingButton'
+      | 'allowSendBeforeAttachmentsUpload'
     >
   >;
 
@@ -571,6 +573,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     EmptyStateIndicator = EmptyStateIndicatorDefault,
     enableMessageGroupingByUser = true,
     enableOfflineSupport,
+    allowSendBeforeAttachmentsUpload = enableOfflineSupport,
     enableSwipeToReply = true,
     enforceUniqueReaction = false,
     FileAttachment = FileAttachmentDefault,
@@ -1772,6 +1775,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   const inputMessageInputContext = useCreateInputMessageInputContext({
     additionalTextInputProps,
+    allowSendBeforeAttachmentsUpload,
     asyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration,
     asyncMessagesMultiSendEnabled,

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

@@ -4,6 +4,7 @@ import type { InputMessageInputContextValue } from '../../../contexts/messageInp
 
 export const useCreateInputMessageInputContext = ({
   additionalTextInputProps,
+  allowSendBeforeAttachmentsUpload,
   asyncMessagesLockDistance,
   asyncMessagesMinimumPressDuration,
   asyncMessagesMultiSendEnabled,
@@ -70,6 +71,7 @@ export const useCreateInputMessageInputContext = ({
   const inputMessageInputContext: InputMessageInputContextValue = useMemo(
     () => ({
       additionalTextInputProps,
+      allowSendBeforeAttachmentsUpload,
       asyncMessagesLockDistance,
       asyncMessagesMinimumPressDuration,
       asyncMessagesMultiSendEnabled,
@@ -128,7 +130,13 @@ export const useCreateInputMessageInputContext = ({
       VideoRecorderSelectorIcon,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [compressImageQuality, channelId, CreatePollContent, showPollCreationDialog],
+    [
+      compressImageQuality,
+      channelId,
+      CreatePollContent,
+      showPollCreationDialog,
+      allowSendBeforeAttachmentsUpload,
+    ],
   );
 
   return inputMessageInputContext;

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -328,6 +328,7 @@ export type InputMessageInputContextValue = {
    * @see See https://reactnative.dev/docs/textinput#reference
    */
   additionalTextInputProps?: TextInputProps;
+  allowSendBeforeAttachmentsUpload?: boolean;
   closePollCreationDialog?: () => void;
   /**
    * Compress image with quality (from 0 to 1, where 1 is best quality).
@@ -411,7 +412,7 @@ export const MessageInputProvider = ({
 }>) => {
   const { closePicker, openPicker, selectedPicker, setSelectedPicker } =
     useAttachmentPickerContext();
-  const { client, enableOfflineSupport } = useChatContext();
+  const { client } = useChatContext();
   const channelCapabilities = useOwnCapabilitiesContext();
 
   const { uploadAbortControllerRef } = useChannelContext();
@@ -425,7 +426,10 @@ export const MessageInputProvider = ({
   const defaultOpenPollCreationDialog = useCallback(() => setShowPollCreationDialog(true), []);
   const closePollCreationDialog = useCallback(() => setShowPollCreationDialog(false), []);
 
-  const { openPollCreationDialog: openPollCreationDialogFromContext } = value;
+  const {
+    openPollCreationDialog: openPollCreationDialogFromContext,
+    allowSendBeforeAttachmentsUpload,
+  } = value;
 
   const { endsAt: cooldownEndsAt, start: startCooldown } = useCooldown();
 
@@ -443,7 +447,7 @@ export const MessageInputProvider = ({
       attachmentManager.setCustomUploadFn(value.doFileUploadRequest);
     }
 
-    if (enableOfflineSupport) {
+    if (allowSendBeforeAttachmentsUpload) {
       messageComposer.compositionMiddlewareExecutor.replace([
         createAttachmentsCompositionMiddleware(messageComposer),
       ]);
@@ -452,7 +456,12 @@ export const MessageInputProvider = ({
         createDraftAttachmentsCompositionMiddleware(messageComposer),
       ]);
     }
-  }, [value.doFileUploadRequest, enableOfflineSupport, messageComposer, attachmentManager]);
+  }, [
+    value.doFileUploadRequest,
+    allowSendBeforeAttachmentsUpload,
+    messageComposer,
+    attachmentManager,
+  ]);
 
   /**
    * Function for capturing a photo and uploading it