stream-chat-react-native-core 4.5.1-beta.1 → 4.6.0-beta.1

package/src/components/MessageInput/MessageInput.tsx

@@ -30,8 +30,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import type { Asset } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
 import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 
@@ -115,7 +114,9 @@ type MessageInputPropsWithContext<
     | 'setGiphyActive'
     | 'showMoreOptions'
     | 'ShowThreadMessageInChannelButton'
+    | 'removeFile'
     | 'removeImage'
+    | 'uploadNewFile'
     | 'uploadNewImage'
   > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'Reply'> &
@@ -164,6 +165,7 @@ const MessageInputWithContext = <
     mentionedUsers,
     numberOfUploads,
     quotedMessage,
+    removeFile,
     removeImage,
     Reply,
     resetInput,
@@ -175,6 +177,7 @@ const MessageInputWithContext = <
     thread,
     threadList,
     triggerType,
+    uploadNewFile,
     uploadNewImage,
     watchers,
   } = props;
@@ -202,9 +205,11 @@ const MessageInputWithContext = <
     attachmentPickerBottomSheetHeight,
     attachmentSelectionBarHeight,
     bottomInset,
+    selectedFiles,
     selectedImages,
     selectedPicker,
     setMaxNumberOfFiles,
+    setSelectedFiles,
     setSelectedImages,
   } = useAttachmentPickerContext();
 
@@ -224,8 +229,11 @@ const MessageInputWithContext = <
   }, []);
 
   const [hasResetImages, setHasResetImages] = useState(false);
+  const [hasResetFiles, setHasResetFiles] = useState(false);
   const selectedImagesLength = hasResetImages ? selectedImages.length : 0;
   const imageUploadsLength = hasResetImages ? imageUploads.length : 0;
+  const selectedFilesLength = hasResetFiles ? selectedFiles.length : 0;
+  const fileUploadsLength = hasResetFiles ? fileUploads.length : 0;
   const imagesForInput = (!!thread && !!threadList) || (!thread && !threadList);
 
   useEffect(() => {
@@ -236,44 +244,90 @@ const MessageInputWithContext = <
     return () => setSelectedImages([]);
   }, []);
 
+  useEffect(() => {
+    setSelectedFiles([]);
+    if (fileUploads.length) {
+      fileUploads.forEach((file) => removeFile(file.id));
+    }
+    return () => setSelectedFiles([]);
+  }, []);
+
   useEffect(() => {
     if (hasResetImages === false && imageUploadsLength === 0 && selectedImagesLength === 0) {
       setHasResetImages(true);
     }
   }, [imageUploadsLength, selectedImagesLength]);
 
+  useEffect(() => {
+    if (hasResetFiles === false && fileUploadsLength === 0 && selectedFilesLength === 0) {
+      setHasResetFiles(true);
+    }
+  }, [fileUploadsLength, selectedFilesLength]);
+
   useEffect(() => {
     if (imagesForInput === false && imageUploads.length) {
       imageUploads.forEach((image) => removeImage(image.id));
     }
   }, [imagesForInput]);
 
+  const uploadImagesHandler = () => {
+    const imagesToUpload = selectedImages.filter((selectedImage) => {
+      const uploadedImage = imageUploads.find(
+        (imageUpload) =>
+          imageUpload.file.uri === selectedImage.uri || imageUpload.url === selectedImage.uri,
+      );
+      return !uploadedImage;
+    });
+    imagesToUpload.forEach((image) => uploadNewImage(image));
+  };
+
+  const removeImagesHandler = () => {
+    const imagesToRemove = imageUploads.filter(
+      (imageUpload) =>
+        !selectedImages.find(
+          (selectedImage) =>
+            selectedImage.uri === imageUpload.file.uri || selectedImage.uri === imageUpload.url,
+        ),
+    );
+    imagesToRemove.forEach((image) => removeImage(image.id));
+  };
+
   useEffect(() => {
     if (imagesForInput) {
       if (selectedImagesLength > imageUploadsLength) {
         /** User selected an image in bottom sheet attachment picker */
-        const imagesToUpload = selectedImages.filter((selectedImage) => {
-          const uploadedImage = imageUploads.find(
-            (imageUpload) =>
-              imageUpload.file.uri === selectedImage.uri || imageUpload.url === selectedImage.uri,
-          );
-          return !uploadedImage;
-        });
-        imagesToUpload.forEach((image) => uploadNewImage(image));
-      } else if (selectedImagesLength < imageUploadsLength) {
+        uploadImagesHandler();
+      } else {
         /** User de-selected an image in bottom sheet attachment picker */
-        const imagesToRemove = imageUploads.filter(
-          (imageUpload) =>
-            !selectedImages.find(
-              (selectedImage) =>
-                selectedImage.uri === imageUpload.file.uri || selectedImage.uri === imageUpload.url,
-            ),
-        );
-        imagesToRemove.forEach((image) => removeImage(image.id));
+        removeImagesHandler();
       }
     }
   }, [selectedImagesLength]);
 
+  useEffect(() => {
+    if (selectedFilesLength > fileUploadsLength) {
+      /** User selected a video in bottom sheet attachment picker */
+      const filesToUpload = selectedFiles.filter((selectedFile) => {
+        const uploadedFile = fileUploads.find(
+          (fileUpload) =>
+            fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
+        );
+        return !uploadedFile;
+      });
+      filesToUpload.forEach((file) => uploadNewFile(file));
+    } else {
+      /** User de-selected a video in bottom sheet attachment picker */
+      const filesToRemove = fileUploads.filter(
+        (fileUpload) =>
+          !selectedFiles.find(
+            (selectedFile) =>
+              selectedFile.uri === fileUpload.file.uri || selectedFile.uri === fileUpload.url,
+          ),
+      );
+      filesToRemove.forEach((file) => removeFile(file.id));
+    }
+  }, [selectedFilesLength]);
+
   useEffect(() => {
     if (imagesForInput) {
       if (imageUploadsLength < selectedImagesLength) {
@@ -306,6 +360,35 @@ const MessageInputWithContext = <
     }
   }, [imageUploadsLength]);
 
+  useEffect(() => {
+    if (fileUploadsLength < selectedFilesLength) {
+      /** User removed some video from seleted files within ImageUploadPreview. */
+      const updatedSelectedFiles = selectedFiles.filter((selectedFile) => {
+        const uploadedFile = fileUploads.find(
+          (fileUpload) =>
+            fileUpload.file.uri === selectedFile.uri || fileUpload.url === selectedFile.uri,
+        );
+        return uploadedFile;
+      });
+      setSelectedFiles(updatedSelectedFiles);
+    } else if (fileUploadsLength > selectedFilesLength) {
+      /**
+       * User is editing some message which contains video attachments OR
+       * video attachment is added from custom image picker (other than the default bottomsheet image picker)
+       * using `uploadNewFile` function from `MessageInputContext`.
+       **/
+      setSelectedFiles(
+        fileUploads.map((fileUpload) => ({
+          duration: fileUpload.file.duration,
+          name: fileUpload.file.name,
+          size: fileUpload.file.size,
+          type: fileUpload.file.type,
+          uri: fileUpload.file.uri,
+        })),
+      );
+    }
+  }, [fileUploadsLength]);
+
   const editingExists = !!editing;
   useEffect(() => {
     if (editing && inputBoxRef.current) {
@@ -666,6 +749,7 @@ export const MessageInput = <
     mentionedUsers,
     numberOfUploads,
     quotedMessage,
+    removeFile,
     removeImage,
     resetInput,
     SendButton,
@@ -676,6 +760,7 @@ export const MessageInput = <
     setShowMoreOptions,
     showMoreOptions,
     ShowThreadMessageInChannelButton,
+    uploadNewFile,
     uploadNewImage,
   } = useMessageInputContext<StreamChatGenerics>();
 
@@ -730,6 +815,7 @@ export const MessageInput = <
         mentionedUsers,
         numberOfUploads,
         quotedMessage,
+        removeFile,
         removeImage,
         Reply,
         resetInput,
@@ -744,6 +830,7 @@ export const MessageInput = <
         t,
         thread,
         triggerType,
+        uploadNewFile,
         uploadNewImage,
         watchers,
       }}

package/src/components/Reply/Reply.tsx

@@ -69,6 +69,36 @@ type ReplyPropsWithContext<
     }>;
   };
 
+const getMessageType = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  lastAttachment: Attachment<StreamChatGenerics>,
+) => {
+  let messageType;
+
+  const isLastAttachmentFile =
+    lastAttachment.type === 'file' ||
+    lastAttachment.type === 'audio' ||
+    lastAttachment.type === 'video';
+
+  const isLastAttachmentGiphy = lastAttachment.type === 'giphy' || lastAttachment.type === 'imgur';
+
+  const isLastAttachmentImageOrGiphy =
+    lastAttachment.type === 'image' && !lastAttachment.title_link && !lastAttachment.og_scrape_url;
+
+  const isLastAttachmentImage = lastAttachment.image_url || lastAttachment.thumb_url;
+
+  if (isLastAttachmentFile) {
+    messageType = 'file';
+  } else if (isLastAttachmentImageOrGiphy) {
+    if (isLastAttachmentImage) messageType = 'image';
+    else messageType = undefined;
+  } else if (isLastAttachmentGiphy) messageType = 'giphy';
+  else messageType = 'other';
+
+  return messageType;
+};
+
 const ReplyWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -105,20 +135,7 @@ const ReplyWithContext = <
   if (typeof quotedMessage === 'boolean') return null;
 
   const lastAttachment = quotedMessage.attachments?.slice(-1)[0] as Attachment<StreamChatGenerics>;
-
-  const messageType = lastAttachment
-    ? lastAttachment.type === 'file' || lastAttachment.type === 'audio'
-      ? 'file'
-      : lastAttachment.type === 'image' &&
-        !lastAttachment.title_link &&
-        !lastAttachment.og_scrape_url
-      ? lastAttachment.image_url || lastAttachment.thumb_url
-        ? 'image'
-        : undefined
-      : lastAttachment.type === 'giphy' || lastAttachment.type === 'imgur'
-      ? 'giphy'
-      : 'other'
-    : undefined;
+  const messageType = lastAttachment && getMessageType(lastAttachment);
 
   const hasImage =
     !error &&

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -369,6 +369,9 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
+                                  "borderRadius": undefined,
+                                  "borderTopLeftRadius": 16,
+                                  "borderTopRightRadius": 16,
                                 },
                                 Object {},
                                 Object {},
@@ -617,6 +620,9 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
+                                  "borderRadius": undefined,
+                                  "borderTopLeftRadius": 16,
+                                  "borderTopRightRadius": 16,
                                 },
                                 Object {},
                                 Object {},
@@ -865,6 +871,9 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
+                                  "borderRadius": undefined,
+                                  "borderTopLeftRadius": 16,
+                                  "borderTopRightRadius": 16,
                                 },
                                 Object {},
                                 Object {},
@@ -1161,6 +1170,9 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "borderBottomLeftRadius": 0,
                                     "borderBottomRightRadius": 16,
                                     "borderColor": "#ECEBEB",
+                                    "borderRadius": undefined,
+                                    "borderTopLeftRadius": 16,
+                                    "borderTopRightRadius": 16,
                                   },
                                   Object {},
                                   Object {},

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-import type { Asset } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { Asset, DefaultStreamChatGenerics, File } from '../../types/types';
 import { getDisplayName } from '../utils/getDisplayName';
 
 export type AttachmentPickerIconProps = {
@@ -42,9 +41,11 @@ export type AttachmentPickerContextValue = {
    */
   maxNumberOfFiles: number;
   openPicker: () => void;
+  selectedFiles: File[];
   selectedImages: Asset[];
   setBottomInset: React.Dispatch<React.SetStateAction<number>>;
   setMaxNumberOfFiles: React.Dispatch<React.SetStateAction<number>>;
+  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
   setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
   setSelectedPicker: React.Dispatch<React.SetStateAction<'images' | undefined>>;
   setTopInset: React.Dispatch<React.SetStateAction<number>>;
@@ -80,6 +81,7 @@ export const AttachmentPickerProvider = ({
   const [bottomInset, setBottomInset] = useState<number>(bottomInsetValue ?? 0);
   const [maxNumberOfFiles, setMaxNumberOfFiles] = useState(10);
   const [selectedImages, setSelectedImages] = useState<Asset[]>([]);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [selectedPicker, setSelectedPicker] = useState<'images'>();
   const [topInset, setTopInset] = useState<number>(value?.topInset ?? 0);
 
@@ -93,10 +95,12 @@ export const AttachmentPickerProvider = ({
 
   const combinedValue = {
     maxNumberOfFiles,
+    selectedFiles,
     selectedImages,
     selectedPicker,
     setBottomInset,
     setMaxNumberOfFiles,
+    setSelectedFiles,
     setSelectedImages,
     setSelectedPicker,
     setTopInset,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -35,8 +35,8 @@ import type { MoreOptionsButtonProps } from '../../components/MessageInput/MoreO
 import type { SendButtonProps } from '../../components/MessageInput/SendButton';
 import type { UploadProgressIndicatorProps } from '../../components/MessageInput/UploadProgressIndicator';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
-import { Asset, compressImage, getLocalAssetUri, pickDocument } from '../../native';
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import { compressImage, getLocalAssetUri, pickDocument } from '../../native';
+import type { Asset, DefaultStreamChatGenerics, File, UnknownType } from '../../types/types';
 import {
   ACITriggerSettings,
   ACITriggerSettingsParams,
@@ -55,12 +55,7 @@ import { useTranslationContext } from '../translationContext/TranslationContext'
 import { getDisplayName } from '../utils/getDisplayName';
 
 export type FileUpload = {
-  file: {
-    name: string;
-    size?: number | string;
-    type?: string;
-    uri?: string;
-  };
+  file: File;
   id: string;
   state: FileStateValue;
   url?: string;
@@ -207,13 +202,8 @@ export type LocalMessageInputContext<
   uploadFile: ({ newFile }: { newFile: FileUpload }) => Promise<void>;
   /** Function for attempting to upload an image */
   uploadImage: ({ newImage }: { newImage: ImageUpload }) => Promise<void>;
-  uploadNewFile: (file: {
-    name: string;
-    size?: number | string;
-    type?: string;
-    uri?: string;
-  }) => Promise<void>;
-  uploadNewImage: (image: Partial<Asset>) => Promise<void>;
+  uploadNewFile: (file: File) => Promise<void>;
+  uploadNewImage: (image: Asset) => Promise<void>;
 };
 
 export type InputMessageInputContextValue<
@@ -699,6 +689,7 @@ export const MessageInputProvider = <
         } else if (file.file.type?.startsWith('video/')) {
           attachments.push({
             asset_url: file.url,
+            duration: file.file.duration,
             file_size: file.file.size,
             mime_type: file.file.type,
             title: file.file.name,
@@ -970,7 +961,10 @@ export const MessageInputProvider = <
                 return prevAsyncUploads;
               });
             } else {
-              setImageUploads(getUploadSetStateAction(id, FileState.UPLOADED, { url: res.file }));
+              const newImageUploads = getUploadSetStateAction<ImageUpload>(id, FileState.UPLOADED, {
+                url: res.file,
+              });
+              setImageUploads(newImageUploads);
             }
           });
         } else {
@@ -979,13 +973,12 @@ export const MessageInputProvider = <
       }
 
       if (Object.keys(response).length) {
-        setImageUploads(
-          getUploadSetStateAction(id, FileState.UPLOADED, {
-            height: file.height,
-            url: response.file,
-            width: file.width,
-          }),
-        );
+        const newImageUploads = getUploadSetStateAction<ImageUpload>(id, FileState.UPLOADED, {
+          height: file.height,
+          url: response.file,
+          width: file.width,
+        });
+        setImageUploads(newImageUploads);
       }
     } catch (error) {
       handleFileOrImageUploadError(error, true, id);
@@ -1029,7 +1022,7 @@ export const MessageInputProvider = <
     }
   };
 
-  const uploadNewImage = async (image: Partial<Asset>) => {
+  const uploadNewImage = async (image: Asset) => {
     const id = generateRandomId();
 
     const isBlockedImageMimeType = blockedImageMimeTypes?.some((mimeType: string) =>

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

@@ -65,11 +65,27 @@ export const useMessageDetailsForState = <
         } else if (attachment.type === 'image') {
           const id = generateRandomId();
           newImageUploads.push({
-            file: { name: attachment.fallback },
+            file: {
+              name: attachment.fallback,
+              size: attachment.file_size,
+              type: attachment.type,
+            },
             id,
             state: 'finished',
             url: attachment.image_url || attachment.asset_url || attachment.thumb_url,
           });
+        } else if (attachment.type === 'video') {
+          const id = generateRandomId();
+          newFileUploads.push({
+            file: {
+              name: attachment.title || '',
+              size: attachment.file_size,
+              type: attachment.mime_type,
+            },
+            id,
+            state: 'finished',
+            url: attachment.asset_url,
+          });
         }
       }
       if (newFileUploads.length) {

package/src/contexts/themeContext/utils/theme.ts

@@ -80,6 +80,7 @@ export type MarkdownStyle = Partial<{
 export type Theme = {
   attachmentPicker: {
     bottomSheetContentContainer: ViewStyle;
+    durationText: TextStyle;
     errorButtonText: TextStyle;
     errorContainer: ViewStyle;
     errorText: TextStyle;
@@ -530,6 +531,7 @@ export type Theme = {
 export const defaultTheme: Theme = {
   attachmentPicker: {
     bottomSheetContentContainer: {},
+    durationText: {},
     errorButtonText: {},
     errorContainer: {},
     errorText: {},

package/src/icons/Recorder.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { IconProps, RootPath, RootSvg } from './utils/base';
+
+export const Recorder: React.FC<IconProps> = (props) => (
+  <RootSvg {...props}>
+    <RootPath
+      d='M0 2C0 0.895432 0.89543 0 2 0H16C17.1046 0 18 0.895431 18 2V5.38526L22.4855 3.14251C22.7944 2.95715 23.1792 2.95229 23.4927 3.1298C23.8062 3.30731 24 3.63973 24 4V16C24 16.3603 23.8062 16.6927 23.4927 16.8702C23.1792 17.0477 22.7944 17.0429 22.4855 16.8575L18 14.6147V18C18 19.1046 17.1046 20 16 20H2C0.895431 20 0 19.1046 0 18V2ZM2 2H16V6V6.94546C16 7.67313 16.7524 8.15716 17.4146 7.85545L22 5.76619V14.2338L17.4146 12.1446C16.7524 11.8428 16 12.3269 16 13.0545V14.6147V18H2V2Z'
+      {...props}
+    />
+    <RootPath
+      d='M7 5.5C7 6.32843 6.32843 7 5.5 7C4.67157 7 4 6.32843 4 5.5C4 4.67157 4.67157 4 5.5 4C6.32843 4 7 4.67157 7 5.5Z'
+      {...props}
+    />
+  </RootSvg>
+);

package/src/icons/Video.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { IconProps, RootPath, RootSvg } from './utils/base';
+
+export const Video: React.FC<IconProps> = (props) => (
+  <RootSvg
+    height={props.height || 40}
+    viewBox={props.viewBox || '0 0 34 40'}
+    width={props.width || 34}
+    {...props}
+  >
+    <RootPath
+      d='M 17.7168 33.172 C 18.2348 33.172 18.4238 33.655 18.4238 34.18 C 18.4238 34.642 18.2978 35.195 17.7168 35.195 C 17.1708 35.195 16.9888 34.642 16.9888 34.145 C 16.9888 33.683 17.1708 33.172 17.7168 33.172 Z M 19.5718 31.002 H 18.3818 V 32.7589 H 18.3678 C 18.1228 32.43 17.7798 32.262 17.3318 32.262 C 16.3028 32.262 15.7988 33.158 15.7988 34.103 C 15.7988 35.125 16.2818 36.1049 17.4228 36.1049 C 17.8428 36.1049 18.1928 35.923 18.4238 35.58 H 18.4378 V 36 H 19.5718 V 31.002 Z M 12.7095 34.1872 C 12.7095 33.7252 12.8775 33.1722 13.4305 33.1722 C 13.9835 33.1722 14.1585 33.7252 14.1585 34.1872 C 14.1585 34.6492 13.9835 35.1952 13.4305 35.1952 C 12.8775 35.1952 12.7095 34.6492 12.7095 34.1872 Z M 11.5195 34.1872 C 11.5195 35.2792 12.3035 36.1052 13.4305 36.1052 C 14.5575 36.1052 15.3485 35.2792 15.3485 34.1872 C 15.3485 33.0952 14.5575 32.2622 13.4305 32.2622 C 12.3035 32.2622 11.5195 33.0952 11.5195 34.1872 Z M 21.839 32.3671 H 22.574 V 33.1371 H 21.839 V 34.7891 C 21.839 35.0761 22.007 35.1391 22.266 35.1391 C 22.3142 35.1391 22.364 35.1357 22.4147 35.1323 C 22.4672 35.1287 22.5206 35.1251 22.574 35.1251 V 36.0001 C 22.481 36.0031 22.388 36.0099 22.295 36.0168 C 22.171 36.0259 22.047 36.0351 21.923 36.0351 C 20.908 36.0351 20.649 35.7411 20.649 34.7541 V 33.1371 H 20.047 V 32.3671 H 20.649 V 31.2681 H 21.839 V 32.3671 Z'
+      {...props}
+    />
+    <RootPath
+      d='M 0 28 H 34 V 37 C 34 38.6569 32.6569 40 31 40 H 3 C 1.34315 40 0 38.6569 0 37 V 28 Z'
+      pathFill={'rgb(157, 39, 176)'}
+      {...props}
+    />
+    <RootPath
+      d='M 0 3 C 0 1.34315 1.34315 0 3 0 H 23 L 34 11 V 28 H 0 V 3 Z'
+      pathFill={'rgb(245, 245, 245)'}
+      {...props}
+    />
+    <RootPath
+      d='M 34 11 L 26 11 C 24.3431 11 23 9.65685 23 8 V 0 L 34 11 Z'
+      pathFill={'rgb(219, 219, 219)'}
+      {...props}
+    />
+    <RootPath
+      d='M 9 17 H 25 V 24 H 9 V 17 Z M 27 14 C 27 12.8954 26.1046 12 25 12 H 22 L 24 15 H 21 L 19 12 H 17 L 19 15 H 16 L 14 12 H 12 L 14 15 H 11 L 9 12 C 7.9 12 7.01 12.9 7.01 14 L 7 24 C 7 25.1 7.9 26 9 26 H 25 C 26.1 26 27 25.1 27 24 V 14 Z'
+      pathFill={'rgb(157, 39, 176)'}
+      {...props}
+    />
+  </RootSvg>
+);

package/src/icons/index.ts

@@ -69,11 +69,13 @@ export * from './ThumbsUpReaction';
 export * from './Time';
 export * from './TXT';
 export * from './Unknown';
+export * from './Recorder';
 export * from './Unpin';
 export * from './User';
 export * from './UserAdd';
 export * from './UserDelete';
 export * from './UserMinus';
+export * from './Video';
 export * from './Warning';
 export * from './WutReaction';
 export * from './XLS';

package/src/native.ts

@@ -2,6 +2,8 @@ import { FlatList as DefaultFlatList } from 'react-native';
 
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
 
+import type { Asset, File } from './types/types';
+
 const fail = () => {
   throw Error(
     'Native handler was not registered, you should import stream-chat-expo or stream-chat-react-native',
@@ -24,16 +26,9 @@ export let compressImage: CompressImage = fail;
 type DeleteFile = ({ uri }: { uri: string }) => Promise<boolean> | never;
 export let deleteFile: DeleteFile = fail;
 
-type GetLocalAssetUri = (uriOrAssetId: string) => Promise<string> | never;
+type GetLocalAssetUri = (uriOrAssetId: string) => never;
 export let getLocalAssetUri: GetLocalAssetUri = fail;
 
-export type Asset = {
-  height: number;
-  source: 'camera' | 'picker';
-  uri: string;
-  width: number;
-  id?: string;
-};
 type GetPhotos = ({ after, first }: { first: number; after?: string }) =>
   | Promise<{
       assets: Array<Omit<Asset, 'source'> & { source: 'picker' }>;
@@ -58,12 +53,7 @@ export let NetInfo: NetInfo = {
 type PickDocument = ({ maxNumberOfFiles }: { maxNumberOfFiles?: number }) =>
   | Promise<{
       cancelled: boolean;
-      docs?: {
-        name: string;
-        size?: number | string;
-        type?: string;
-        uri?: string;
-      }[];
+      docs?: File[];
     }>
   | never;
 export let pickDocument: PickDocument = fail;

package/src/types/types.ts

@@ -1,5 +1,32 @@
 import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
 
+export type Asset = {
+  duration: number | null;
+  filename: string;
+  fileSize: string;
+  height: number;
+  playableDuration: number | null;
+  source: 'camera' | 'picker';
+  type: string;
+  uri: string;
+  width: number;
+  id?: string;
+  size?: number | string;
+};
+
+export type File = {
+  name: string;
+  duration?: string | null;
+  size?: number | string;
+  type?: string;
+  uri?: string;
+};
+
+export type DefaultAttachmentType = UnknownType & {
+  file_size?: number | string;
+  mime_type?: string;
+};
+
 interface DefaultUserType extends UnknownType {
   image?: string;
 }

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.5.1-beta.1"
+  "version": "4.6.0-beta.1"
 }