stream-chat-react-native-core 7.0.0-rc.8 → 7.0.0

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -1,7 +1,5 @@
 import { Alert } from 'react-native';
 
-import type { MessageResponse } from 'stream-chat';
-
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
@@ -62,7 +60,7 @@ export const useMessageActionHandlers = ({
         { style: 'cancel', text: t('Cancel') },
         {
           onPress: async () => {
-            await deleteMessage(message as MessageResponse);
+            await deleteMessage(message);
           },
           style: 'destructive',
           text: t('Delete'),

package/src/components/Message/hooks/useMessageActions.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { LocalMessage } from 'stream-chat';
+
 import { useMessageActionHandlers } from './useMessageActionHandlers';
 
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
@@ -27,7 +29,6 @@ import {
 import { removeReservedFields } from '../../../utils/removeReservedFields';
 import { MessageStatusTypes } from '../../../utils/utils';
 
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import type { MessageActionType } from '../../MessageMenu/MessageActionListItem';
 
 export type MessageActionsHookProps = Pick<
@@ -60,7 +61,7 @@ export type MessageActionsHookProps = Pick<
   Pick<ThreadContextValue, 'openThread'> &
   Pick<MessageContextValue, 'dismissOverlay' | 'message'> &
   Pick<TranslationContextValue, 't'> & {
-    onThreadSelect?: (message: MessageType) => void;
+    onThreadSelect?: (message: LocalMessage) => void;
   };
 
 export const useMessageActions = ({
@@ -293,7 +294,7 @@ export const useMessageActions = ({
       dismissOverlay();
       const messageWithoutReservedFields = removeReservedFields(message);
       if (handleRetry) {
-        handleRetry(messageWithoutReservedFields as MessageType);
+        handleRetry(messageWithoutReservedFields as LocalMessage);
       }
 
       await handleResendMessage();

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -17,7 +17,7 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { Close } from '../../icons/Close';
 import { Warning } from '../../icons/Warning';
 import { isSoundPackageAvailable } from '../../native';
-import type { FileUpload } from '../../types/types';
+import type { AudioUpload, FileUpload } from '../../types/types';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
 import {
   getDurationLabelFromDuration,
@@ -123,26 +123,49 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
   );
 };
 
-type FileUploadPreviewPropsWithContext = Pick<
-  MessageInputContextValue,
-  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachmentUploadPreview'
+export type FileUploadPreviewProps = Partial<
+  Pick<
+    MessageInputContextValue,
+    'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachmentUploadPreview'
+  >
 > &
-  Pick<MessagesContextValue, 'FileAttachmentIcon'> &
-  Pick<ChatContextValue, 'enableOfflineSupport'>;
+  Partial<Pick<MessagesContextValue, 'FileAttachmentIcon'>> &
+  Partial<Pick<ChatContextValue, 'enableOfflineSupport'>>;
 
-const FileUploadPreviewWithContext = (props: FileUploadPreviewPropsWithContext) => {
+/**
+ * FileUploadPreview
+ * UI Component to preview the files set for upload
+ */
+export const FileUploadPreview = (props: FileUploadPreviewProps) => {
   const {
-    AudioAttachmentUploadPreview,
-    enableOfflineSupport,
-    FileAttachmentIcon,
-    fileUploads,
-    removeFile,
-    uploadFile,
+    AudioAttachmentUploadPreview: propAudioAttachmentUploadPreview,
+    enableOfflineSupport: propEnableOfflineSupport,
+    FileAttachmentIcon: propFileAttachmentIcon,
+    fileUploads: propFileUploads,
+    removeFile: propRemoveFile,
+    uploadFile: propUploadFile,
   } = props;
 
-  const [filesToDisplay, setFilesToDisplay] = useState<FileUpload[]>([]);
+  const { enableOfflineSupport: contextEnableOfflineSupport } = useChatContext();
+  const {
+    AudioAttachmentUploadPreview: contextAudioAttachmentUploadPreview,
+    fileUploads: contextFileUploads,
+    removeFile: contextRemoveFile,
+    uploadFile: contextUploadFile,
+  } = useMessageInputContext();
+  const { FileAttachmentIcon: contextFileAttachmentIcon } = useMessagesContext();
 
-  const flatListRef = useRef<FlatList<FileUpload> | null>(null);
+  const enableOfflineSupport = propEnableOfflineSupport ?? contextEnableOfflineSupport;
+  const AudioAttachmentUploadPreview =
+    propAudioAttachmentUploadPreview ?? contextAudioAttachmentUploadPreview;
+  const fileUploads = propFileUploads ?? contextFileUploads;
+  const removeFile = propRemoveFile ?? contextRemoveFile;
+  const uploadFile = propUploadFile ?? contextUploadFile;
+  const FileAttachmentIcon = propFileAttachmentIcon ?? contextFileAttachmentIcon;
+
+  const [filesToDisplay, setFilesToDisplay] = useState<AudioUpload[]>([]);
+
+  const flatListRef = useRef<FlatList<AudioUpload> | null>(null);
   const [flatListWidth, setFlatListWidth] = useState(0);
 
   useEffect(() => {
@@ -207,9 +230,9 @@ const FileUploadPreviewWithContext = (props: FileUploadPreviewPropsWithContext)
     },
   } = useTheme();
 
-  const renderItem = ({ item }: { item: FileUpload }) => {
+  const renderItem = ({ item }: { item: AudioUpload }) => {
     const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
-    const isAudio = item.file.mimeType?.startsWith('audio/');
+    const isAudio = item.file.type?.startsWith('audio/');
 
     return (
       <>
@@ -241,7 +264,7 @@ const FileUploadPreviewWithContext = (props: FileUploadPreviewPropsWithContext)
               ]}
             >
               <View style={styles.fileIcon}>
-                <FileAttachmentIcon mimeType={item.file.mimeType} />
+                <FileAttachmentIcon mimeType={item.file.type} />
               </View>
               <View style={[styles.fileTextContainer, fileTextContainer]}>
                 <Text
@@ -317,56 +340,4 @@ const FileUploadPreviewWithContext = (props: FileUploadPreviewPropsWithContext)
   ) : null;
 };
 
-const areEqual = (
-  prevProps: FileUploadPreviewPropsWithContext,
-  nextProps: FileUploadPreviewPropsWithContext,
-) => {
-  const { fileUploads: prevFileUploads } = prevProps;
-  const { fileUploads: nextFileUploads } = nextProps;
-
-  return (
-    prevFileUploads.length === nextFileUploads.length &&
-    prevFileUploads.every(
-      (prevFileUpload, index) =>
-        prevFileUpload.state === nextFileUploads[index].state &&
-        prevFileUpload.paused === nextFileUploads[index].paused &&
-        prevFileUpload.progress === nextFileUploads[index].progress &&
-        prevFileUpload.duration === nextFileUploads[index].duration,
-    )
-  );
-};
-
-const MemoizedFileUploadPreview = React.memo(
-  FileUploadPreviewWithContext,
-  areEqual,
-) as typeof FileUploadPreviewWithContext;
-
-export type FileUploadPreviewProps = Partial<FileUploadPreviewPropsWithContext>;
-
-/**
- * FileUploadPreview
- * UI Component to preview the files set for upload
- */
-export const FileUploadPreview = (props: FileUploadPreviewProps) => {
-  const { enableOfflineSupport } = useChatContext();
-  const { AudioAttachmentUploadPreview, fileUploads, removeFile, setFileUploads, uploadFile } =
-    useMessageInputContext();
-  const { FileAttachmentIcon } = useMessagesContext();
-
-  return (
-    <MemoizedFileUploadPreview
-      {...{
-        AudioAttachmentUploadPreview,
-        FileAttachmentIcon,
-        fileUploads,
-        removeFile,
-        setFileUploads,
-        uploadFile,
-      }}
-      {...{ enableOfflineSupport }}
-      {...props}
-    />
-  );
-};
-
 FileUploadPreview.displayName = 'FileUploadPreview{messageInput{fileUploadPreview}}';

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -20,7 +20,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Close } from '../../icons/Close';
 import { Warning } from '../../icons/Warning';
-import type { ImageUpload } from '../../types/types';
+import type { FileUpload } from '../../types/types';
 import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 
 const IMAGE_PREVIEW_SIZE = 100;
@@ -81,7 +81,7 @@ type ImageUploadPreviewPropsWithContext = Pick<
 
 export type ImageUploadPreviewProps = Partial<ImageUploadPreviewPropsWithContext>;
 
-type ImageUploadPreviewItem = { index: number; item: ImageUpload };
+type ImageUploadPreviewItem = { index: number; item: FileUpload };
 
 export const UnsupportedImageTypeIndicator = ({
   indicatorType,

package/src/components/MessageInput/InputButtons.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import {
@@ -23,12 +23,12 @@ export type InputButtonsWithContextProps = Pick<
   | 'hasCommands'
   | 'hasFilePicker'
   | 'hasImagePicker'
+  | 'hasText'
   | 'MoreOptionsButton'
   | 'openCommandsPicker'
   | 'selectedPicker'
   | 'setShowMoreOptions'
   | 'showMoreOptions'
-  | 'text'
   | 'toggleAttachmentPicker'
 >;
 
@@ -41,11 +41,11 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
     hasCommands,
     hasFilePicker,
     hasImagePicker,
+    hasText,
     MoreOptionsButton,
     openCommandsPicker,
     setShowMoreOptions,
     showMoreOptions,
-    text,
   } = props;
 
   const {
@@ -54,6 +54,10 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
     },
   } = useTheme();
 
+  const handleShowMoreOptions = useCallback(() => {
+    setShowMoreOptions(true);
+  }, [setShowMoreOptions]);
+
   const ownCapabilities = useOwnCapabilitiesContext();
 
   if (giphyActive) {
@@ -61,7 +65,7 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
   }
 
   return !showMoreOptions && (hasCameraPicker || hasImagePicker || hasFilePicker) && hasCommands ? (
-    <MoreOptionsButton handleOnPress={() => setShowMoreOptions(true)} />
+    <MoreOptionsButton handleOnPress={handleShowMoreOptions} />
   ) : (
     <>
       {(hasCameraPicker || hasImagePicker || hasFilePicker) && ownCapabilities.uploadFile && (
@@ -71,7 +75,7 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
           <AttachButton />
         </View>
       )}
-      {hasCommands && !text && (
+      {hasCommands && !hasText && (
         <View style={commandsButtonContainer}>
           <CommandsButton handleOnPress={openCommandsPicker} />
         </View>
@@ -90,9 +94,9 @@ const areEqual = (
     hasCommands: prevHasCommands,
     hasFilePicker: prevHasFilePicker,
     hasImagePicker: prevHasImagePicker,
+    hasText: prevHasText,
     selectedPicker: prevSelectedPicker,
     showMoreOptions: prevShowMoreOptions,
-    text: prevText,
   } = prevProps;
 
   const {
@@ -101,9 +105,9 @@ const areEqual = (
     hasCommands: nextHasCommands,
     hasFilePicker: nextHasFilePicker,
     hasImagePicker: nextHasImagePicker,
+    hasText: nextHasText,
     selectedPicker: nextSelectedPicker,
     showMoreOptions: nextShowMoreOptions,
-    text: nextText,
   } = nextProps;
 
   if (prevHasCameraPicker !== nextHasCameraPicker) {
@@ -130,7 +134,7 @@ const areEqual = (
     return false;
   }
 
-  if ((!prevProps.text && nextText) || (prevText && !nextText)) {
+  if (prevHasText !== nextHasText) {
     return false;
   }
 
@@ -155,12 +159,12 @@ export const InputButtons = (props: InputButtonsProps) => {
     hasCommands,
     hasFilePicker,
     hasImagePicker,
+    hasText,
     MoreOptionsButton,
     openCommandsPicker,
     selectedPicker,
     setShowMoreOptions,
     showMoreOptions,
-    text,
     toggleAttachmentPicker,
   } = useMessageInputContext();
 
@@ -174,12 +178,12 @@ export const InputButtons = (props: InputButtonsProps) => {
         hasCommands,
         hasFilePicker,
         hasImagePicker,
+        hasText,
         MoreOptionsButton,
         openCommandsPicker,
         selectedPicker,
         setShowMoreOptions,
         showMoreOptions,
-        text,
         toggleAttachmentPicker,
       }}
       {...props}

package/src/components/MessageInput/MessageInput.tsx

@@ -61,7 +61,7 @@ import {
   isImageMediaLibraryAvailable,
   NativeHandlers,
 } from '../../native';
-import type { Asset } from '../../types/types';
+import { compressedImageURI } from '../../utils/compressImage';
 import { AIStates, useAIState } from '../AITypingIndicatorView';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
@@ -109,7 +109,7 @@ type MessageInputPropsWithContext = Pick<
   'AttachmentPickerSelectionBar'
 > &
   Pick<ChatContextValue, 'isOnline'> &
-  Pick<ChannelContextValue, 'members' | 'threadList' | 'watchers'> &
+  Pick<ChannelContextValue, 'channel' | 'members' | 'threadList' | 'watchers'> &
   Pick<
     MessageInputContextValue,
     | 'additionalTextInputProps'
@@ -129,6 +129,7 @@ type MessageInputPropsWithContext = Pick<
     | 'clearEditingState'
     | 'clearQuotedMessageState'
     | 'closeAttachmentPicker'
+    | 'compressImageQuality'
     | 'editing'
     | 'FileUploadPreview'
     | 'fileUploads'
@@ -195,8 +196,10 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     AudioRecordingLockIndicator,
     AudioRecordingPreview,
     AutoCompleteSuggestionList,
+    channel,
     closeAttachmentPicker,
     closePollCreationDialog,
+    compressImageQuality,
     cooldownEndsAt,
     CooldownTimer,
     CreatePollContent,
@@ -347,7 +350,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imagesForInput, imageUploadsLength]);
 
-  const uploadImagesHandler = () => {
+  const uploadImagesHandler = async () => {
     const imageToUpload = selectedImages.find((selectedImage) => {
       const uploadedImage = imageUploads.find(
         (imageUpload) =>
@@ -357,7 +360,11 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     });
 
     if (imageToUpload) {
-      uploadNewImage(imageToUpload);
+      const compressedImage = await compressedImageURI(imageToUpload, compressImageQuality);
+      uploadNewImage({
+        ...imageToUpload,
+        uri: compressedImage,
+      });
     }
   };
 
@@ -455,16 +462,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
         /**
          * User is editing some message which contains image attachments.
          **/
-        setSelectedImages(
-          imageUploads
-            .map((imageUpload) => ({
-              height: imageUpload.file.height,
-              source: imageUpload.file.source,
-              uri: imageUpload.url || imageUpload.file.uri,
-              width: imageUpload.file.width,
-            }))
-            .filter(Boolean) as Asset[],
-        );
+        setSelectedImages(imageUploads.map((imageUpload) => imageUpload.file));
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -489,15 +487,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
         /**
          * User is editing some message which contains video attachments.
          **/
-        setSelectedFiles(
-          fileUploads.map((fileUpload) => ({
-            duration: fileUpload.file.duration,
-            mimeType: fileUpload.file.mimeType,
-            name: fileUpload.file.name,
-            size: fileUpload.file.size,
-            uri: fileUpload.file.uri,
-          })),
-        );
+        setSelectedFiles(fileUploads.map((fileUpload) => fileUpload.file));
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -743,7 +733,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     })),
   };
 
-  const { channel } = useChannelContext();
   const { aiState } = useAIState(channel);
 
   const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
@@ -857,9 +846,8 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
 
               {shouldDisplayStopAIGeneration ? (
                 <StopMessageStreamingButton onPress={stopGenerating} />
-              ) : (
-                isSendingButtonVisible() &&
-                (cooldownRemainingSeconds ? (
+              ) : isSendingButtonVisible() ? (
+                cooldownRemainingSeconds ? (
                   <CooldownTimer seconds={cooldownRemainingSeconds} />
                 ) : (
                   <View style={[styles.sendButtonContainer, sendButtonContainer]}>
@@ -867,8 +855,8 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                       disabled={sending.current || !isValidMessage() || (giphyActive && !isOnline)}
                     />
                   </View>
-                ))
-              )}
+                )
+              ) : null}
               {audioRecordingEnabled && isAudioRecorderAvailable() && !micLocked && (
                 <GestureDetector gesture={panGestureMic}>
                   <Animated.View
@@ -954,6 +942,7 @@ const areEqual = (
     asyncMessagesSlideToCancelDistance: prevAsyncMessagesSlideToCancelDistance,
     asyncUploads: prevAsyncUploads,
     audioRecordingEnabled: prevAsyncMessagesEnabled,
+    channel: prevChannel,
     closePollCreationDialog: prevClosePollCreationDialog,
     editing: prevEditing,
     fileUploads: prevFileUploads,
@@ -979,6 +968,7 @@ const areEqual = (
     asyncMessagesSlideToCancelDistance: nextAsyncMessagesSlideToCancelDistance,
     asyncUploads: nextAsyncUploads,
     audioRecordingEnabled: nextAsyncMessagesEnabled,
+    channel: nextChannel,
     closePollCreationDialog: nextClosePollCreationDialog,
     editing: nextEditing,
     fileUploads: nextFileUploads,
@@ -1022,6 +1012,11 @@ const areEqual = (
     return false;
   }
 
+  const channelEqual = prevChannel.cid === nextChannel.cid;
+  if (!channelEqual) {
+    return false;
+  }
+
   const asyncMessagesLockDistanceEqual =
     prevAsyncMessagesLockDistance === nextAsyncMessagesLockDistance;
   if (!asyncMessagesLockDistanceEqual) {
@@ -1151,7 +1146,7 @@ export const MessageInput = (props: MessageInputProps) => {
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
-  const { members, threadList, watchers } = useChannelContext();
+  const { channel, members, threadList, watchers } = useChannelContext();
 
   const {
     additionalTextInputProps,
@@ -1171,6 +1166,7 @@ export const MessageInput = (props: MessageInputProps) => {
     clearQuotedMessageState,
     closeAttachmentPicker,
     closePollCreationDialog,
+    compressImageQuality,
     cooldownEndsAt,
     CooldownTimer,
     CreatePollContent,
@@ -1254,10 +1250,12 @@ export const MessageInput = (props: MessageInputProps) => {
         AutoCompleteSuggestionHeader,
         AutoCompleteSuggestionItem,
         AutoCompleteSuggestionList,
+        channel,
         clearEditingState,
         clearQuotedMessageState,
         closeAttachmentPicker,
         closePollCreationDialog,
+        compressImageQuality,
         cooldownEndsAt,
         CooldownTimer,
         CreatePollContent,

package/src/components/MessageInput/__tests__/FileUploadPreview.test.js

@@ -332,8 +332,8 @@ describe('FileUploadPreview', () => {
     const fileUploads = [
       generateFileUploadPreview({
         id: 'file-upload-id-1',
-        mimeType: 'audio/mp3',
         state: FileState.UPLOADED,
+        type: 'audio/mp3',
       }),
     ];
     const removeFile = jest.fn();

package/src/components/MessageInput/__tests__/MessageInput.test.js

@@ -129,7 +129,9 @@ describe('MessageInput', () => {
     );
 
     // Both for files and for images triggered in one test itself.
-    expect(Alert.alert).toHaveBeenCalledTimes(4);
+    await waitFor(() => {
+      expect(Alert.alert).toHaveBeenCalledTimes(4);
+    });
   });
 
   it('should start the audio recorder on long press and cleanup on unmount', async () => {

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -166,6 +166,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderRadius: 50,
     justifyContent: 'center',
+    marginLeft: 8,
   },
 });
 

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -10,7 +10,8 @@ import {
   RecordingStatus,
   SoundReturnType,
 } from '../../../native';
-import { File, FileTypes } from '../../../types/types';
+import type { File } from '../../../types/types';
+import { FileTypes } from '../../../types/types';
 import { resampleWaveformData } from '../utils/audioSampling';
 import { normalizeAudioLevel } from '../utils/normalizeAudioLevel';
 
@@ -267,18 +268,18 @@ export const useAudioController = () => {
 
     const file: File = {
       duration: durationInSeconds,
-      mimeType: 'audio/aac',
       name: `audio_recording_${date}.aac`,
-      type: FileTypes.VoiceRecording,
+      size: 0,
+      type: 'audio/aac',
       uri: typeof recording !== 'string' ? (recording?.getURI() as string) : (recording as string),
       waveform_data: resampledWaveformData,
     };
 
     if (multiSendEnabled) {
-      await uploadNewFile(file);
+      await uploadNewFile(file, FileTypes.VoiceRecording);
     } else {
       // FIXME: cannot call handleSubmit() directly as the function has stale reference to file uploads
-      await uploadNewFile(file);
+      await uploadNewFile(file, FileTypes.VoiceRecording);
       setIsScheduleForSubmit(true);
     }
     resetState();