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

package/src/components/Attachment/__tests__/Attachment.test.tsx

@@ -1,8 +1,12 @@
 import React, { ComponentProps } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { ReactTestInstance } from 'react-test-renderer';
 
 import { render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
+import { AudioPlayerProvider } from '../../../contexts/audioPlayerContext/AudioPlayerContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
@@ -21,32 +25,59 @@ import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Attachment } from '../Attachment';
 import { FilePreview as FilePreviewDefault } from '../FilePreview';
 
-jest.mock('../../../native.ts', () => ({
-  isVideoPlayerAvailable: jest.fn(() => false),
-  isSoundPackageAvailable: jest.fn(() => false),
+jest.mock('../../../native.ts', () => {
+  const { View } = require('react-native');
+
+  return {
+    NativeHandlers: {
+      SDK: 'stream-chat-react-native',
+      Sound: {
+        initializeSound: jest.fn(() => null),
+        Player: View,
+      },
+    },
+    isVideoPlayerAvailable: jest.fn(() => false),
+    isSoundPackageAvailable: jest.fn(() => false),
+  };
+});
+
+jest.mock('../../../hooks/usePendingAttachmentUpload', () => ({
+  usePendingAttachmentUpload: jest.fn(() => ({
+    isUploading: false,
+    uploadProgress: undefined,
+  })),
 }));
 
 const getAttachmentComponent = (props: ComponentProps<typeof Attachment>) => {
   const message = generateMessage();
   return (
     <ThemeProvider>
-      <MessagesProvider
-        value={
-          {
-            ImageLoadingFailedIndicator,
-            ImageLoadingIndicator,
-            FilePreview: FilePreviewDefault,
-          } as unknown as MessagesContextValue
-        }
-      >
-        <MessageProvider value={{ message } as unknown as MessageContextValue}>
-          <Attachment {...props} />
-        </MessageProvider>
-      </MessagesProvider>
+      <AudioPlayerProvider value={{ allowConcurrentAudioPlayback: false }}>
+        <MessagesProvider
+          value={
+            {
+              FilePreview: FilePreviewDefault,
+              ImageLoadingFailedIndicator,
+              ImageLoadingIndicator,
+              message,
+            } as unknown as MessagesContextValue
+          }
+        >
+          <MessageProvider value={{ message } as unknown as MessageContextValue}>
+            <Attachment {...props} />
+          </MessageProvider>
+        </MessagesProvider>
+      </AudioPlayerProvider>
     </ThemeProvider>
   );
 };
 
+const getWaveformBarCount = (root: ReactTestInstance) =>
+  root.findAllByType(View).filter((node: ReactTestInstance) => {
+    const flattenedStyle = StyleSheet.flatten(node.props.style);
+    return flattenedStyle?.width === 2 && typeof flattenedStyle?.height === 'number';
+  }).length;
+
 describe('Attachment', () => {
   it('should render File component for "audio" type attachment', async () => {
     const attachment = generateAudioAttachment();
@@ -75,6 +106,22 @@ describe('Attachment', () => {
     });
   });
 
+  it('should render waveform for playable audio attachments without an active upload', async () => {
+    const { isSoundPackageAvailable } = require('../../../native');
+    isSoundPackageAvailable.mockReturnValue(true);
+    const attachment = generateAudioAttachment({
+      duration: 10,
+      waveform_data: [0.2, 0.6, 0.4],
+    });
+    const { getByLabelText, root } = render(getAttachmentComponent({ attachment }));
+
+    await waitFor(() => {
+      expect(getByLabelText('audio-attachment-preview')).toBeTruthy();
+      expect(getWaveformBarCount(root)).toBeGreaterThan(0);
+    });
+    isSoundPackageAvailable.mockReturnValue(false);
+  });
+
   it('should render UrlPreview component if attachment has title_link or og_scrape_url', async () => {
     const attachment = generateImageAttachment({
       og_scrape_url: uuidv4(),

package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts

@@ -5,6 +5,7 @@ import type { Attachment } from 'stream-chat';
 import type { Thumbnail } from './types';
 
 import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
+import type { DefaultAttachmentData } from '../../../../types/types';
 
 import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
@@ -33,9 +34,11 @@ export function buildThumbnail({
       ? originalImageHeight + originalImageWidth > height + width
       : true;
   const imageUrl = getUrlOfImageAttachment(image) as string;
+  const localId = (image as Attachment & DefaultAttachmentData).localId;
 
   return {
     flex,
+    localId,
     resizeMode: resizeMode
       ? resizeMode
       : ((image.original_height && image.original_width ? 'contain' : 'cover') as ImageResizeMode),

package/src/components/Attachment/utils/buildGallery/types.ts

@@ -4,6 +4,8 @@ export type Thumbnail = {
   resizeMode: ImageResizeMode;
   url: string;
   id?: string;
+  /** Same as attachment `localId` for correlating with `client.uploadManager` */
+  localId?: string;
   thumb_url?: string;
   type?: string;
   flex?: number;

package/src/components/Channel/Channel.tsx

@@ -4,7 +4,6 @@ import { StyleSheet, Text, View } from 'react-native';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 
-import { lookup } from 'mime-types';
 import {
   Channel as ChannelClass,
   ChannelState,
@@ -101,7 +100,7 @@ import {
 } from '../../state-store/channel-unread-state';
 import { MessageInputHeightStore } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import { FileTypes } from '../../types/types';
+import { DefaultAttachmentData, FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
 import { compressedImageURI } from '../../utils/compressImage';
 import { patchMessageTextCommand } from '../../utils/patchMessageTextCommand';
@@ -1053,73 +1052,78 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
   const uploadPendingAttachments = useStableCallback(async (message: LocalMessage) => {
     const updatedMessage = { ...message };
-    if (updatedMessage.attachments?.length) {
-      for (let i = 0; i < updatedMessage.attachments?.length; i++) {
-        const attachment = updatedMessage.attachments[i];
-
-        // If the attachment is already uploaded, skip it.
-        if (
-          (attachment.image_url && !isLocalUrl(attachment.image_url)) ||
-          (attachment.asset_url && !isLocalUrl(attachment.asset_url))
-        ) {
-          continue;
-        }
+    if (!updatedMessage.attachments?.length || !channel?.cid) {
+      return updatedMessage;
+    }
 
-        const image = attachment.originalFile;
-        const file = attachment.originalFile;
-        if (attachment.type === FileTypes.Image && image?.uri) {
-          const filename = image.name ?? getFileNameFromPath(image.uri);
-          // if any upload is in progress, cancel it
-          const controller = uploadAbortControllerRef.current.get(filename);
-          if (controller) {
-            controller.abort();
-            uploadAbortControllerRef.current.delete(filename);
-          }
-          const compressedUri = await compressedImageURI(image, compressImageQuality);
-          const contentType = lookup(filename) || 'multipart/form-data';
+    const uploadOne = async (attachment: NonNullable<LocalMessage['attachments']>[number]) => {
+      if (
+        (attachment.image_url && !isLocalUrl(attachment.image_url)) ||
+        (attachment.asset_url && !isLocalUrl(attachment.asset_url))
+      ) {
+        return;
+      }
 
-          const uploadResponse = doFileUploadRequest
-            ? await doFileUploadRequest(image)
-            : await channel.sendImage(compressedUri, filename, contentType);
+      const originalFile = attachment.originalFile;
+      if (!originalFile?.uri) {
+        return;
+      }
 
-          attachment.image_url = uploadResponse.file;
-          delete attachment.originalFile;
+      const localId = (attachment as DefaultAttachmentData).localId;
+      if (!localId) {
+        console.warn('uploadPendingAttachments: local attachment missing localId, skipping upload');
+        return;
+      }
 
-          client.offlineDb?.executeQuerySafely(
-            (db) =>
-              db.updateMessage({
-                message: { ...updatedMessage, cid: channel.cid },
-              }),
-            { method: 'updateMessage' },
-          );
-        }
+      let fileForUpload = originalFile;
+      if (attachment.type === FileTypes.Image && !doFileUploadRequest) {
+        const filename = originalFile.name ?? getFileNameFromPath(originalFile.uri);
+        const compressedUri = await compressedImageURI(originalFile, compressImageQuality);
+        fileForUpload = { ...originalFile, name: filename, uri: compressedUri };
+      }
 
-        if (attachment.type !== FileTypes.Image && file?.uri) {
-          // if any upload is in progress, cancel it
-          const controller = uploadAbortControllerRef.current.get(file.name);
-          if (controller) {
-            controller.abort();
-            uploadAbortControllerRef.current.delete(file.name);
-          }
-          const response = doFileUploadRequest
-            ? await doFileUploadRequest(file)
-            : await channel.sendFile(file.uri, file.name, file.type);
-          attachment.asset_url = response.file;
-          if (response.thumb_url) {
-            attachment.thumb_url = response.thumb_url;
-          }
+      const response = await (
+        client as typeof client & {
+          uploadManager: {
+            upload(args: {
+              channelCid: string;
+              file: {
+                name?: string;
+                type?: string;
+                uri: string;
+              };
+              id: string;
+            }): Promise<{ file: string; thumb_url?: string }>;
+          };
+        }
+      ).uploadManager.upload({
+        channelCid: channel.cid,
+        file: fileForUpload,
+        id: localId,
+      });
 
-          delete attachment.originalFile;
-          client.offlineDb?.executeQuerySafely(
-            (db) =>
-              db.updateMessage({
-                message: { ...updatedMessage, cid: channel.cid },
-              }),
-            { method: 'updateMessage' },
-          );
+      if (attachment.type === FileTypes.Image) {
+        attachment.image_url = response.file;
+      } else {
+        attachment.asset_url = response.file;
+        if (response.thumb_url) {
+          attachment.thumb_url = response.thumb_url;
         }
       }
-    }
+
+      delete attachment.originalFile;
+      delete (attachment as DefaultAttachmentData).localId;
+
+      client.offlineDb?.executeQuerySafely(
+        (db) =>
+          db.updateMessage({
+            message: { ...updatedMessage, cid: channel.cid },
+          }),
+        { method: 'updateMessage' },
+      );
+    };
+
+    await Promise.all(updatedMessage.attachments.map((att) => uploadOne(att)));
 
     return updatedMessage;
   });

package/src/components/Chat/Chat.tsx

@@ -26,6 +26,7 @@ import { NativeHandlers } from '../../native';
 import { OfflineDB } from '../../store/OfflineDB';
 
 import type { Streami18n } from '../../utils/i18n/Streami18n';
+import { installNativeMultipartAdapter } from '../../utils/installNativeMultipartAdapter';
 import { version } from '../../version.json';
 
 init();
@@ -43,6 +44,16 @@ export type ChatProps = Pick<ChatContextValue, 'client'> &
      * Enables offline storage and loading for chat data.
      */
     enableOfflineSupport?: boolean;
+    /**
+     * When true, multipart uploads use the SDK's native upload adapter when available.
+     * When false, uploads stay on the default axios adapter.
+     *
+     * This only controls whether the native adapter gets installed by this Chat instance.
+     * It does not uninstall an adapter that was already installed on the client.
+     *
+     * @default true
+     */
+    useNativeMultipartUpload?: boolean;
     /**
      * Instance of Streami18n class should be provided to Chat component to enable internationalization.
      *
@@ -141,6 +152,7 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
     i18nInstance,
     isMessageAIGenerated,
     style,
+    useNativeMultipartUpload = false,
   } = props;
   const { ChatLoadingIndicator } = useComponentsContext();
 
@@ -241,6 +253,14 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
     };
   }, [client]);
 
+  useEffect(() => {
+    if (!useNativeMultipartUpload) {
+      return;
+    }
+
+    installNativeMultipartAdapter(client);
+  }, [client, useNativeMultipartUpload]);
+
   const initialisedDatabase = !!offlineDbInitialized && userID === offlineDbUserId;
 
   const appSettings = useAppSettings(client, isOnline, enableOfflineSupport, initialisedDatabase);

package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx

@@ -1,5 +1,9 @@
 import React, { ComponentProps } from 'react';
 
+import { ActivityIndicator } from 'react-native';
+
+import type { ReactTestInstance } from 'react-test-renderer';
+
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
 import type { Attachment, Channel as ChannelType, LocalAttachment, StreamChat } from 'stream-chat';
@@ -35,6 +39,7 @@ jest.mock('../../../native.ts', () => {
     isDocumentPickerAvailable: jest.fn(() => true),
     isImageMediaLibraryAvailable: jest.fn(() => true),
     isImagePickerAvailable: jest.fn(() => true),
+    isNativeMultipartUploadAvailable: jest.fn(() => false),
     isSoundPackageAvailable: jest.fn(() => false),
     NativeHandlers: {
       Sound: {
@@ -64,6 +69,28 @@ const renderComponent = ({
   );
 };
 
+type PendingUploadRecord = {
+  id: string;
+  uploadProgress?: number;
+};
+
+const setPendingUploads = (client: StreamChat, uploads: PendingUploadRecord[]) => {
+  act(() => {
+    client.uploadManager.state.partialNext({
+      uploads: Object.fromEntries(
+        uploads.map(({ id, uploadProgress }) => [id, { id, uploadProgress }]),
+      ),
+    });
+  });
+};
+
+const countActivityIndicators = (nodes: ReactTestInstance[]) =>
+  nodes.reduce(
+    (count: number, node: ReactTestInstance) =>
+      count + node.findAllByType(ActivityIndicator).length,
+    0,
+  );
+
 describe('AttachmentUploadPreviewList', () => {
   let client: StreamChat;
   let channel: ChannelType;
@@ -78,6 +105,7 @@ describe('AttachmentUploadPreviewList', () => {
     jest.clearAllMocks();
     cleanup();
     act(() => {
+      client?.uploadManager?.reset();
       channel.messageComposer.attachmentManager.initState();
     });
   });
@@ -121,7 +149,11 @@ describe('AttachmentUploadPreviewList', () => {
   it('should render FileAttachmentUploadPreview when the sound package is unavailable', async () => {
     const attachments = [
       generateAudioAttachment({
+        asset_url: undefined,
         localMetadata: {
+          file: {
+            uri: 'file://audio-attachment.mp3',
+          },
           id: 'audio-attachment',
           uploadState: FileState.UPLOADING,
         },
@@ -133,14 +165,15 @@ describe('AttachmentUploadPreviewList', () => {
     act(() => {
       channel.messageComposer.attachmentManager.upsertAttachments(attachments);
     });
+    setPendingUploads(client, [{ id: 'audio-attachment' }]);
 
     renderComponent({ channel, client, props });
 
-    const { queryAllByTestId } = screen;
+    const { getAllByTestId, queryAllByTestId } = screen;
 
     await waitFor(() => {
       expect(queryAllByTestId('file-attachment-upload-preview')).toHaveLength(1);
-      expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1);
+      expect(countActivityIndicators(getAllByTestId('file-attachment-upload-preview'))).toBe(1);
     });
   });
 
@@ -148,13 +181,20 @@ describe('AttachmentUploadPreviewList', () => {
     it('should render FileAttachmentUploadPreview with all uploading files', async () => {
       const attachments = [
         generateFileAttachment({
+          asset_url: undefined,
           localMetadata: {
+            file: {
+              uri: 'file://file-attachment.xls',
+            },
             id: 'file-attachment',
             uploadState: FileState.UPLOADING,
           },
         }),
         generateVideoAttachment({
           localMetadata: {
+            file: {
+              uri: 'file://video-attachment.mp4',
+            },
             id: 'video-attachment',
             uploadState: FileState.UPLOADING,
           },
@@ -165,6 +205,7 @@ describe('AttachmentUploadPreviewList', () => {
       act(() => {
         channel.messageComposer.attachmentManager.upsertAttachments(attachments);
       });
+      setPendingUploads(client, [{ id: 'file-attachment' }, { id: 'video-attachment' }]);
 
       renderComponent({ channel, client, props });
 
@@ -172,7 +213,7 @@ describe('AttachmentUploadPreviewList', () => {
 
       await waitFor(() => {
         expect(queryAllByTestId('file-attachment-upload-preview')).toHaveLength(2);
-        expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(2);
+        expect(countActivityIndicators(getAllByTestId('file-attachment-upload-preview'))).toBe(2);
       });
 
       act(() => {
@@ -303,6 +344,7 @@ describe('AttachmentUploadPreviewList', () => {
         generateImageAttachment({
           localMetadata: {
             id: 'image-attachment',
+            previewUri: 'file://image-attachment.png',
             uploadState: FileState.UPLOADING,
           },
         }),
@@ -312,6 +354,7 @@ describe('AttachmentUploadPreviewList', () => {
       await act(() => {
         channel.messageComposer.attachmentManager.upsertAttachments(attachments ?? []);
       });
+      setPendingUploads(client, [{ id: 'image-attachment' }]);
 
       renderComponent({ channel, client, props });
 
@@ -319,7 +362,7 @@ describe('AttachmentUploadPreviewList', () => {
 
       await waitFor(() => {
         expect(queryAllByTestId('image-attachment-upload-preview')).toHaveLength(1);
-        expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1);
+        expect(countActivityIndicators(getAllByTestId('image-attachment-upload-preview'))).toBe(1);
       });
 
       await act(() => {
@@ -455,6 +498,7 @@ describe('AttachmentUploadPreviewList', () => {
         generateImageAttachment({
           localMetadata: {
             id: 'image-attachment-1',
+            previewUri: 'file://image-attachment-1.png',
             uploadState: FileState.UPLOADING,
           },
         }),
@@ -482,10 +526,11 @@ describe('AttachmentUploadPreviewList', () => {
       await act(() => {
         channel.messageComposer.attachmentManager.upsertAttachments(attachments ?? []);
       });
+      setPendingUploads(client, [{ id: 'image-attachment-1' }]);
 
       renderComponent({ channel, client, props });
 
-      const { queryAllByTestId } = screen;
+      const { getAllByTestId, queryAllByTestId } = screen;
 
       await waitFor(() => {
         const imageAttachments = queryAllByTestId('image-attachment-upload-preview-image');
@@ -496,7 +541,7 @@ describe('AttachmentUploadPreviewList', () => {
 
       await waitFor(() => {
         expect(queryAllByTestId('image-attachment-upload-preview')).toHaveLength(4);
-        expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1);
+        expect(countActivityIndicators(getAllByTestId('image-attachment-upload-preview'))).toBe(1);
         expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(1);
         expect(queryAllByTestId('inline-not-supported-indicator')).toHaveLength(1);
       });

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.tsx

@@ -1,5 +1,9 @@
 import React, { ComponentProps } from 'react';
 
+import { ActivityIndicator } from 'react-native';
+
+import type { ReactTestInstance } from 'react-test-renderer';
+
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
 import type { Attachment, Channel as ChannelType, LocalAttachment, StreamChat } from 'stream-chat';
@@ -24,6 +28,7 @@ jest.mock('../../../native.ts', () => {
     isDocumentPickerAvailable: jest.fn(() => true),
     isImageMediaLibraryAvailable: jest.fn(() => true),
     isImagePickerAvailable: jest.fn(() => true),
+    isNativeMultipartUploadAvailable: jest.fn(() => false),
     isSoundPackageAvailable: jest.fn(() => true),
     NativeHandlers: {
       Sound: {
@@ -53,6 +58,28 @@ const renderComponent = ({
   );
 };
 
+type PendingUploadRecord = {
+  id: string;
+  uploadProgress?: number;
+};
+
+const setPendingUploads = (client: StreamChat, uploads: PendingUploadRecord[]) => {
+  act(() => {
+    client.uploadManager.state.partialNext({
+      uploads: Object.fromEntries(
+        uploads.map(({ id, uploadProgress }) => [id, { id, uploadProgress }]),
+      ),
+    });
+  });
+};
+
+const countActivityIndicators = (nodes: ReactTestInstance[]) =>
+  nodes.reduce(
+    (count: number, node: ReactTestInstance) =>
+      count + node.findAllByType(ActivityIndicator).length,
+    0,
+  );
+
 describe('AudioAttachmentUploadPreview render', () => {
   let client: StreamChat;
   let channel: ChannelType;
@@ -67,6 +94,7 @@ describe('AudioAttachmentUploadPreview render', () => {
     jest.clearAllMocks();
     cleanup();
     act(() => {
+      client?.uploadManager?.reset();
       channel.messageComposer.attachmentManager.initState();
     });
   });
@@ -74,6 +102,7 @@ describe('AudioAttachmentUploadPreview render', () => {
   it('should render AudioAttachmentUploadPreview with all uploading files', async () => {
     const attachments = [
       generateAudioAttachment({
+        asset_url: undefined,
         localMetadata: {
           file: {
             uri: 'file://audio-attachment.mp3',
@@ -88,6 +117,7 @@ describe('AudioAttachmentUploadPreview render', () => {
     act(() => {
       channel.messageComposer.attachmentManager.upsertAttachments(attachments);
     });
+    setPendingUploads(client, [{ id: 'audio-attachment' }]);
 
     renderComponent({ channel, client, props });
 
@@ -95,7 +125,7 @@ describe('AudioAttachmentUploadPreview render', () => {
 
     await waitFor(() => {
       expect(queryAllByTestId('audio-attachment-upload-preview')).toHaveLength(1);
-      expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1);
+      expect(countActivityIndicators(getAllByTestId('audio-attachment-upload-preview'))).toBe(1);
     });
 
     act(() => {