fix: make uploads depend solely on allowSendBeforeAttachmentsUpload

Author: isekovanic

package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx

@@ -13,8 +13,8 @@ import {
 
 import { AudioAttachment } from '../../../../components/Attachment/Audio';
 import { useTheme } from '../../../../contexts';
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer';
+import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
 import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../../../utils/utils';
@@ -30,10 +30,10 @@ export const AudioAttachmentUploadPreview = ({
   removeAttachments,
 }: AudioAttachmentUploadPreviewProps) => {
   const styles = useStyles();
-  const { enableOfflineSupport } = useChatContext();
+  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
   const indicatorType = getIndicatorTypeForFileState(
     attachment.localMetadata.uploadState,
-    enableOfflineSupport,
+    !!allowSendBeforeAttachmentsUpload,
   );
   const messageComposer = useMessageComposer();
   const isDraft = messageComposer.draftId;

package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx

@@ -12,8 +12,8 @@ import {
 import { AttachmentRemoveControl } from './AttachmentRemoveControl';
 
 import { FilePreview } from '../../../../components/Attachment/FilePreview';
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
@@ -39,10 +39,10 @@ export const FileAttachmentUploadPreview = ({
     FileUploadRetryIndicator,
     FileUploadNotSupportedIndicator,
   } = useComponentsContext();
-  const { enableOfflineSupport } = useChatContext();
+  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
   const indicatorType = getIndicatorTypeForFileState(
     attachment.localMetadata.uploadState,
-    enableOfflineSupport,
+    !!allowSendBeforeAttachmentsUpload,
   );
 
   const {

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -6,8 +6,8 @@ import { LocalImageAttachment } from 'stream-chat';
 
 import { AttachmentRemoveControl } from './AttachmentRemoveControl';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
@@ -24,7 +24,7 @@ export const ImageAttachmentUploadPreview = ({
   removeAttachments,
 }: ImageAttachmentUploadPreviewProps) => {
   const [loading, setLoading] = useState(true);
-  const { enableOfflineSupport } = useChatContext();
+  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
   const {
     ImageLoadingIndicator,
     ImageUploadInProgressIndicator,
@@ -33,7 +33,7 @@ export const ImageAttachmentUploadPreview = ({
   } = useComponentsContext();
   const indicatorType = getIndicatorTypeForFileState(
     attachment.localMetadata.uploadState,
-    enableOfflineSupport,
+    !!allowSendBeforeAttachmentsUpload,
   );
   const previewUri = attachment.localMetadata.previewUri ?? attachment.image_url;
   const shouldShowImageLoadingIndicator =

package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx

@@ -12,6 +12,7 @@ import { Recorder } from '../../../../icons';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
 import { formatMsToMinSec, getDurationLabelFromDuration } from '../../../../utils/utils';
+import { useMessageInputContext } from '../../../../contexts';
 
 export type VideoAttachmentUploadPreviewProps<CustomLocalMetadata = Record<string, unknown>> =
   UploadAttachmentPreviewProps<LocalVideoAttachment<CustomLocalMetadata>>;
@@ -22,7 +23,9 @@ export const VideoAttachmentUploadPreview = ({
   removeAttachments,
 }: VideoAttachmentUploadPreviewProps) => {
   const previewUri = attachment.thumb_url ?? attachment.localMetadata.previewUri;
-  const shouldShowMetadataPill = attachment.localMetadata.uploadState !== 'uploading';
+  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
+  const shouldShowMetadataPill =
+    allowSendBeforeAttachmentsUpload || attachment.localMetadata.uploadState !== 'uploading';
 
   return previewUri ? (
     <>

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

@@ -5,6 +5,7 @@ import type { MessageInputContextValue } from '../MessageInputContext';
 
 export const useCreateMessageInputContext = ({
   additionalTextInputProps,
+  allowSendBeforeAttachmentsUpload,
   asyncMessagesLockDistance,
   asyncMessagesMinimumPressDuration,
   asyncMessagesSlideToCancelDistance,
@@ -47,6 +48,7 @@ export const useCreateMessageInputContext = ({
   const messageInputContext: MessageInputContextValue = useMemo(
     () => ({
       additionalTextInputProps,
+      allowSendBeforeAttachmentsUpload,
       asyncMessagesLockDistance,
       asyncMessagesMinimumPressDuration,
       asyncMessagesSlideToCancelDistance,
@@ -84,7 +86,7 @@ export const useCreateMessageInputContext = ({
       stopVoiceRecording,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [threadId, showPollCreationDialog],
+    [threadId, showPollCreationDialog, allowSendBeforeAttachmentsUpload],
   );
 
   return messageInputContext;

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

@@ -3,11 +3,15 @@ import type { EditingAuditState } from 'stream-chat';
 import { useMessageComposer } from './useMessageComposer';
 
 import { useStateStore } from '../../../hooks/useStateStore';
+import { useMessageInputContext } from '../MessageInputContext';
 
 const editingAuditStateStateSelector = (state: EditingAuditState) => state;
 
 export const useMessageComposerHasSendableData = () => {
+  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
   const messageComposer = useMessageComposer();
   useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);
-  return messageComposer.hasSendableData;
+  return allowSendBeforeAttachmentsUpload
+    ? !messageComposer.contentIsEmpty
+    : messageComposer.hasSendableData;
 };

package/src/utils/utils.ts

@@ -57,14 +57,14 @@ type IndicatorStatesMap = Record<AttachmentLoadingState, Progress | undefined>;
 
 export const getIndicatorTypeForFileState = (
   fileState: AttachmentLoadingState,
-  enableOfflineSupport: boolean,
+  allowSendBeforeAttachmentsUpload: boolean,
 ): Progress | undefined => {
   const indicatorMap: IndicatorStatesMap = {
-    [FileState.UPLOADING]: enableOfflineSupport
+    [FileState.UPLOADING]: allowSendBeforeAttachmentsUpload
       ? ProgressIndicatorTypes.INACTIVE
       : ProgressIndicatorTypes.IN_PROGRESS,
     [FileState.BLOCKED]: ProgressIndicatorTypes.NOT_SUPPORTED,
-    [FileState.FAILED]: enableOfflineSupport
+    [FileState.FAILED]: allowSendBeforeAttachmentsUpload
       ? ProgressIndicatorTypes.INACTIVE
       : ProgressIndicatorTypes.RETRY,
     [FileState.PENDING]: ProgressIndicatorTypes.PENDING,