stream-chat-react-native-core 9.0.2-beta.2 → 9.1.0

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

@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react';
-import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { LocalAttachmentUploadMetadata } from 'stream-chat';
 
+import { AttachmentFileUploadProgressIndicator } from '../../../../components/Attachment/AttachmentFileUploadProgressIndicator';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill';
@@ -10,24 +12,30 @@ import { Warning } from '../../../../icons/exclamation-triangle-fill';
 import { primitives } from '../../../../theme';
 import { RetryBadge } from '../../../ui/Badge/RetryBadge';
 
-export const FileUploadInProgressIndicator = () => {
+export type UploadInProgressIndicatorProps = {
+  localId?: string;
+  sourceUrl?: string;
+  totalBytes?: number | string | null;
+};
+
+export const FileUploadInProgressIndicator = ({
+  localId,
+  sourceUrl,
+  totalBytes,
+}: UploadInProgressIndicatorProps = {}) => {
   const {
     theme: {
-      semantics,
       messageComposer: { fileUploadInProgressIndicator },
     },
   } = useTheme();
 
   return (
-    <View
-      style={[styles.activityIndicatorContainer, fileUploadInProgressIndicator.container]}
-      testID='upload-progress-indicator'
-    >
-      <ActivityIndicator
-        color={semantics.accentPrimary}
-        style={[styles.activityIndicator, fileUploadInProgressIndicator.indicator]}
-      />
-    </View>
+    <AttachmentFileUploadProgressIndicator
+      containerStyle={[styles.activityIndicatorContainer, fileUploadInProgressIndicator.container]}
+      localId={localId}
+      sourceUrl={sourceUrl}
+      totalBytes={totalBytes}
+    />
   );
 };
 
@@ -108,24 +116,13 @@ export const FileUploadNotSupportedIndicator = ({
   );
 };
 
-export const ImageUploadInProgressIndicator = () => {
-  const {
-    theme: {
-      semantics,
-      messageComposer: { imageUploadInProgressIndicator },
-    },
-  } = useTheme();
-  const styles = useImageUploadInProgressIndicatorStyles();
-  return (
-    <View style={[styles.container, imageUploadInProgressIndicator.container]}>
-      <ActivityIndicator
-        size='small'
-        color={semantics.accentPrimary}
-        style={imageUploadInProgressIndicator.indicator}
-        testID='upload-progress-indicator'
-      />
-    </View>
-  );
+export const ImageUploadInProgressIndicator = ({
+  localId,
+  sourceUrl,
+}: UploadInProgressIndicatorProps = {}) => {
+  const { AttachmentUploadIndicator } = useComponentsContext();
+
+  return <AttachmentUploadIndicator localId={localId} sourceUrl={sourceUrl} variant='overlay' />;
 };
 
 export type ImageUploadRetryIndicatorProps = {
@@ -158,16 +155,6 @@ export const ImageUploadNotSupportedIndicator = () => {
   );
 };
 
-const useImageUploadInProgressIndicatorStyles = () => {
-  return StyleSheet.create({
-    container: {
-      position: 'absolute',
-      left: primitives.spacingXxs,
-      bottom: primitives.spacingXxs,
-    },
-  });
-};
-
 const useImageUploadNotSupportedIndicatorStyles = () => {
   const {
     theme: { semantics },
@@ -235,9 +222,8 @@ const useFileUploadNotSupportedStyles = () => {
 };
 
 const styles = StyleSheet.create({
-  activityIndicatorContainer: {},
-  activityIndicator: {
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
+  activityIndicatorContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 });

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;
@@ -63,7 +63,13 @@ export const AudioAttachmentUploadPreview = ({
 
   const renderIndicator = useMemo(() => {
     if (indicatorType === ProgressIndicatorTypes.IN_PROGRESS) {
-      return <FileUploadInProgressIndicator />;
+      return (
+        <FileUploadInProgressIndicator
+          localId={attachment.localMetadata.id}
+          sourceUrl={assetUrl}
+          totalBytes={attachment.file_size}
+        />
+      );
     }
     if (indicatorType === ProgressIndicatorTypes.RETRY) {
       return <FileUploadRetryIndicator onPress={onRetryHandler} />;
@@ -72,7 +78,7 @@ export const AudioAttachmentUploadPreview = ({
       return <FileUploadNotSupportedIndicator localMetadata={attachment.localMetadata} />;
     }
     return null;
-  }, [attachment.localMetadata, indicatorType, onRetryHandler]);
+  }, [assetUrl, attachment.file_size, attachment.localMetadata, indicatorType, onRetryHandler]);
 
   return (
     <View style={styles.wrapper} testID={'audio-attachment-upload-preview'}>

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

@@ -2,13 +2,18 @@ import React, { useCallback, useMemo } from 'react';
 
 import { StyleSheet, View } from 'react-native';
 
-import { LocalAudioAttachment, LocalFileAttachment, LocalVideoAttachment } from 'stream-chat';
+import {
+  FileReference,
+  LocalAudioAttachment,
+  LocalFileAttachment,
+  LocalVideoAttachment,
+} from 'stream-chat';
 
 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';
@@ -27,15 +32,17 @@ export const FileAttachmentUploadPreview = ({
   removeAttachments,
 }: FileAttachmentUploadPreviewProps) => {
   const styles = useStyles();
+  const sourceUrl =
+    attachment.asset_url ?? (attachment.localMetadata.file as FileReference | undefined)?.uri;
   const {
     FileUploadInProgressIndicator,
     FileUploadRetryIndicator,
     FileUploadNotSupportedIndicator,
   } = useComponentsContext();
-  const { enableOfflineSupport } = useChatContext();
+  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
   const indicatorType = getIndicatorTypeForFileState(
     attachment.localMetadata.uploadState,
-    enableOfflineSupport,
+    !!allowSendBeforeAttachmentsUpload,
   );
 
   const {
@@ -56,7 +63,13 @@ export const FileAttachmentUploadPreview = ({
 
   const renderIndicator = useMemo(() => {
     if (indicatorType === ProgressIndicatorTypes.IN_PROGRESS) {
-      return <FileUploadInProgressIndicator />;
+      return (
+        <FileUploadInProgressIndicator
+          localId={attachment.localMetadata.id}
+          sourceUrl={sourceUrl}
+          totalBytes={attachment.file_size}
+        />
+      );
     }
     if (indicatorType === ProgressIndicatorTypes.RETRY) {
       return <FileUploadRetryIndicator onPress={onRetryHandler} />;
@@ -70,8 +83,10 @@ export const FileAttachmentUploadPreview = ({
     FileUploadNotSupportedIndicator,
     FileUploadRetryIndicator,
     attachment.localMetadata,
+    attachment.file_size,
     indicatorType,
     onRetryHandler,
+    sourceUrl,
   ]);
 
   return (

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,15 +24,20 @@ export const ImageAttachmentUploadPreview = ({
   removeAttachments,
 }: ImageAttachmentUploadPreviewProps) => {
   const [loading, setLoading] = useState(true);
-  const { enableOfflineSupport } = useChatContext();
+  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
   const {
+    ImageLoadingIndicator,
     ImageUploadInProgressIndicator,
     ImageUploadRetryIndicator,
     ImageUploadNotSupportedIndicator,
   } = useComponentsContext();
-  const indicatorType = loading
-    ? ProgressIndicatorTypes.IN_PROGRESS
-    : getIndicatorTypeForFileState(attachment.localMetadata.uploadState, enableOfflineSupport);
+  const indicatorType = getIndicatorTypeForFileState(
+    attachment.localMetadata.uploadState,
+    !!allowSendBeforeAttachmentsUpload,
+  );
+  const previewUri = attachment.localMetadata.previewUri ?? attachment.image_url;
+  const shouldShowImageLoadingIndicator =
+    loading && indicatorType !== ProgressIndicatorTypes.IN_PROGRESS;
 
   const {
     theme: {
@@ -65,15 +70,21 @@ export const ImageAttachmentUploadPreview = ({
         <Image
           onError={onErrorHandler}
           onLoadEnd={onLoadEndHandler}
-          source={{ uri: attachment.localMetadata.previewUri ?? attachment.image_url }}
+          source={{ uri: previewUri }}
           style={StyleSheet.absoluteFill}
           testID={'image-attachment-upload-preview-image'}
         />
-        {indicatorType === ProgressIndicatorTypes.IN_PROGRESS && <ImageUploadInProgressIndicator />}
-        {indicatorType === ProgressIndicatorTypes.RETRY && (
+        {shouldShowImageLoadingIndicator ? <ImageLoadingIndicator /> : null}
+        {indicatorType === ProgressIndicatorTypes.IN_PROGRESS && (
+          <ImageUploadInProgressIndicator
+            localId={attachment.localMetadata.id}
+            sourceUrl={previewUri}
+          />
+        )}
+        {!loading && indicatorType === ProgressIndicatorTypes.RETRY && (
           <ImageUploadRetryIndicator onRetryHandler={onRetryHandler} />
         )}
-        {indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED && (
+        {!loading && indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED && (
           <ImageUploadNotSupportedIndicator />
         )}
       </View>

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

@@ -7,6 +7,7 @@ import { LocalImageAttachment, LocalVideoAttachment } from 'stream-chat';
 import { FileAttachmentUploadPreview } from './FileAttachmentUploadPreview';
 import { ImageAttachmentUploadPreview } from './ImageAttachmentUploadPreview';
 
+import { useMessageInputContext } from '../../../../contexts';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { Recorder } from '../../../../icons';
 import { primitives } from '../../../../theme';
@@ -22,6 +23,9 @@ export const VideoAttachmentUploadPreview = ({
   removeAttachments,
 }: VideoAttachmentUploadPreviewProps) => {
   const previewUri = attachment.thumb_url ?? attachment.localMetadata.previewUri;
+  const { allowSendBeforeAttachmentsUpload } = useMessageInputContext();
+  const shouldShowMetadataPill =
+    allowSendBeforeAttachmentsUpload || attachment.localMetadata.uploadState !== 'uploading';
 
   return previewUri ? (
     <>
@@ -38,7 +42,9 @@ export const VideoAttachmentUploadPreview = ({
         handleRetry={handleRetry}
         removeAttachments={removeAttachments}
       />
-      <VideoAttachmentMetadataPill duration={attachment.duration} format={'descriptive'} />
+      {shouldShowMetadataPill ? (
+        <VideoAttachmentMetadataPill duration={attachment.duration} format={'descriptive'} />
+      ) : null}
     </>
   ) : (
     <FileAttachmentUploadPreview

package/src/components/index.ts

@@ -6,6 +6,9 @@ export * from './Attachment/FileAttachmentGroup';
 export * from './Attachment/FileIcon';
 export * from './Attachment/Gallery';
 export * from './Attachment/Giphy';
+export * from './Attachment/CircularProgressIndicator';
+export * from './Attachment/AttachmentUploadIndicator';
+export * from './Attachment/MediaUploadProgressOverlay';
 export * from './Attachment/VideoThumbnail';
 export * from './Attachment/UrlPreview';
 export * from './Attachment/utils/buildGallery/buildGallery';

package/src/contexts/componentsContext/defaultComponents.ts

@@ -4,7 +4,9 @@ import { Image, ImageProps, TextInputProps } from 'react-native';
 import type { LocalMessage, UserResponse } from 'stream-chat';
 
 import { Attachment } from '../../components/Attachment/Attachment';
+import { AttachmentUploadIndicator } from '../../components/Attachment/AttachmentUploadIndicator';
 import { AudioAttachment } from '../../components/Attachment/Audio';
+import { CircularProgressIndicator } from '../../components/Attachment/CircularProgressIndicator';
 import { FileAttachment } from '../../components/Attachment/FileAttachment';
 import { FileAttachmentGroup } from '../../components/Attachment/FileAttachmentGroup';
 import { FileIcon } from '../../components/Attachment/FileIcon';
@@ -13,6 +15,7 @@ import { Gallery } from '../../components/Attachment/Gallery';
 import { Giphy } from '../../components/Attachment/Giphy';
 import { ImageLoadingFailedIndicator } from '../../components/Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../components/Attachment/ImageLoadingIndicator';
+import { MediaUploadProgressOverlay } from '../../components/Attachment/MediaUploadProgressOverlay';
 import { UnsupportedAttachment } from '../../components/Attachment/UnsupportedAttachment';
 import { URLPreview } from '../../components/Attachment/UrlPreview';
 import { URLPreviewCompact } from '../../components/Attachment/UrlPreview/URLPreviewCompact';
@@ -160,6 +163,7 @@ type NormalizeComponents<T> = {
 
 const components = {
   Attachment,
+  AttachmentUploadIndicator,
   AttachButton,
   AttachmentPickerContent,
   AttachmentPickerSelectionBar,
@@ -176,6 +180,7 @@ const components = {
   AutoCompleteSuggestionList,
   ChannelDetailsBottomSheet,
   CooldownTimer,
+  CircularProgressIndicator,
   DateHeader,
   EmptyStateIndicator,
   FileAttachment,
@@ -206,6 +211,7 @@ const components = {
   LoadingErrorIndicator,
   ChannelListLoadingIndicator,
   MessageListLoadingIndicator: LoadingIndicator,
+  MediaUploadProgressOverlay,
   Message,
   MessageActionList,
   MessageActionListItem,

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/contexts/themeContext/utils/theme.ts

@@ -677,6 +677,11 @@ export type Theme = {
       attachmentContainer: ViewStyle;
       container: ViewStyle;
     };
+    attachmentUploadIndicator: {
+      indicator: ViewStyle;
+      overlay: ViewStyle;
+      overlayContent: ViewStyle;
+    };
     gallery: {
       galleryContainer: ViewStyle;
       galleryItemColumn: ViewStyle;
@@ -1602,6 +1607,11 @@ export const defaultTheme: Theme = {
       attachmentContainer: {},
       container: {},
     },
+    attachmentUploadIndicator: {
+      indicator: {},
+      overlay: {},
+      overlayContent: {},
+    },
     gallery: {
       galleryContainer: {},
       galleryItemColumn: {},

package/src/hooks/__tests__/usePendingAttachmentUpload.test.tsx

@@ -0,0 +1,106 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, renderHook } from '@testing-library/react-native';
+import { StateStore } from 'stream-chat';
+
+import { ChatProvider } from '../../contexts/chatContext/ChatContext';
+import { usePendingAttachmentUpload } from '../usePendingAttachmentUpload';
+
+type UploadManagerState = {
+  uploads: Record<
+    string,
+    {
+      id: string;
+      uploadProgress?: number;
+    }
+  >;
+};
+
+const createWrapper = (state: StateStore<UploadManagerState>) => {
+  const client = {
+    uploadManager: {
+      state,
+    },
+  };
+
+  return ({ children }: PropsWithChildren) => (
+    <ChatProvider value={{ client } as never}>{children}</ChatProvider>
+  );
+};
+
+describe('usePendingAttachmentUpload', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('briefly holds completed upload progress after a ready upload record disappears', () => {
+    const state = new StateStore<UploadManagerState>({ uploads: {} });
+    const { result } = renderHook(() => usePendingAttachmentUpload('upload-id'), {
+      wrapper: createWrapper(state),
+    });
+
+    expect(result.current).toEqual({
+      isUploading: false,
+      uploadProgress: undefined,
+    });
+
+    act(() => {
+      state.partialNext({
+        uploads: {
+          'upload-id': { id: 'upload-id', uploadProgress: 90 },
+        },
+      });
+    });
+
+    expect(result.current).toEqual({
+      isUploading: true,
+      uploadProgress: 90,
+    });
+
+    act(() => {
+      state.partialNext({ uploads: {} });
+    });
+
+    expect(result.current).toEqual({
+      isUploading: true,
+      uploadProgress: 100,
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(350);
+    });
+
+    expect(result.current).toEqual({
+      isUploading: false,
+      uploadProgress: undefined,
+    });
+  });
+
+  it('does not hold completed progress when an upload record disappears before reaching the ready threshold', () => {
+    const state = new StateStore<UploadManagerState>({ uploads: {} });
+    const { result } = renderHook(() => usePendingAttachmentUpload('upload-id'), {
+      wrapper: createWrapper(state),
+    });
+
+    act(() => {
+      state.partialNext({
+        uploads: {
+          'upload-id': { id: 'upload-id', uploadProgress: 50 },
+        },
+      });
+    });
+
+    act(() => {
+      state.partialNext({ uploads: {} });
+    });
+
+    expect(result.current).toEqual({
+      isUploading: false,
+      uploadProgress: undefined,
+    });
+  });
+});

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ export * from './useStreami18n';
 export * from './useViewport';
 export * from './useScreenDimensions';
 export * from './useStateStore';
+export * from './usePendingAttachmentUpload';
 export * from './useStableCallback';
 export * from './useLoadingImage';
 export * from './useMessageReminder';