stream-chat-react-native-core 4.3.1 → 4.4.0-beta.3

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -41,6 +41,7 @@ import {
   ACITriggerSettings,
   ACITriggerSettingsParams,
   FileState,
+  FileStateValue,
   generateRandomId,
   TriggerSettings,
   urlRegex,
@@ -61,7 +62,7 @@ export type FileUpload = {
     uri?: string;
   };
   id: string;
-  state: string;
+  state: FileStateValue;
   url?: string;
 };
 
@@ -70,7 +71,7 @@ export type ImageUpload = {
     name?: string;
   };
   id: string;
-  state: string;
+  state: FileStateValue;
   height?: number;
   url?: string;
   width?: number;
@@ -414,7 +415,31 @@ export const MessageInputProvider = <
 }>) => {
   const { closePicker, openPicker, selectedPicker, setSelectedPicker } =
     useAttachmentPickerContext();
-  const { client } = useChatContext<StreamChatGenerics>();
+  const { appSettings, client } = useChatContext<StreamChatGenerics>();
+
+  const getFileUploadConfig = () => {
+    const fileConfig = appSettings?.app?.file_upload_config;
+    if (fileConfig !== null || fileConfig !== undefined) {
+      return fileConfig;
+    } else {
+      return {};
+    }
+  };
+
+  const blockedFileExtensionTypes = getFileUploadConfig()?.blocked_file_extensions;
+  const blockedFileMimeTypes = getFileUploadConfig()?.blocked_mime_types;
+
+  const getImageUploadConfig = () => {
+    const imageConfig = appSettings?.app?.image_upload_config;
+    if (imageConfig !== null || imageConfig !== undefined) {
+      return imageConfig;
+    }
+    return {};
+  };
+
+  const blockedImageExtensionTypes = getImageUploadConfig()?.blocked_file_extensions;
+  const blockedImageMimeTypes = getImageUploadConfig()?.blocked_mime_types;
+
   const channelCapabities = useOwnCapabilitiesContext();
 
   const { channel, giphyEnabled } = useChannelContext<StreamChatGenerics>();
@@ -818,68 +843,75 @@ export const MessageInputProvider = <
     }
   };
 
+  const regExcondition = /File (extension \.\w{2,4}|type \S+) is not supported/;
+
+  const getUploadSetStateAction = <UploadType extends ImageUpload | FileUpload>(
+    id: string,
+    fileState: FileStateValue,
+    extraData: Partial<UploadType> = {},
+  ): React.SetStateAction<UploadType[]> => {
+    const uploads: (prevUploads: UploadType[]) => UploadType[] = (prevUploads: UploadType[]) =>
+      prevUploads.map((prevUpload) => {
+        if (prevUpload.id === id) {
+          return {
+            ...prevUpload,
+            ...extraData,
+            state: fileState,
+          };
+        }
+        return prevUpload;
+      });
+
+    return uploads;
+  };
+
+  const handleFileOrImageUploadError = (error: unknown, isImageError: boolean, id: string) => {
+    if (isImageError) {
+      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
+      if (error instanceof Error) {
+        if (regExcondition.test(error.message)) {
+          return setImageUploads(getUploadSetStateAction(id, FileState.NOT_SUPPORTED));
+        }
+
+        return setImageUploads(getUploadSetStateAction(id, FileState.UPLOAD_FAILED));
+      }
+    } else {
+      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
+
+      if (error instanceof Error) {
+        if (regExcondition.test(error.message)) {
+          return setFileUploads(getUploadSetStateAction(id, FileState.NOT_SUPPORTED));
+        }
+        return setFileUploads(getUploadSetStateAction(id, FileState.UPLOAD_FAILED));
+      }
+    }
+  };
+
   const uploadFile = async ({ newFile }: { newFile: FileUpload }) => {
     if (!newFile) {
       return;
     }
     const { file, id } = newFile;
 
-    setFileUploads((prevFileUploads) =>
-      prevFileUploads.map((fileUpload) => {
-        if (fileUpload.id === id) {
-          return {
-            ...fileUpload,
-            state: FileState.UPLOADING,
-          };
-        }
-        return fileUpload;
-      }),
-    );
+    setFileUploads(getUploadSetStateAction(id, FileState.UPLOADING));
 
-    let response = {} as SendFileAPIResponse;
+    let response: Partial<SendFileAPIResponse> = {};
     try {
       if (value.doDocUploadRequest) {
         response = await value.doDocUploadRequest(file, channel);
       } else if (channel && file.uri) {
         response = await channel.sendFile(file.uri, file.name, file.type);
       }
-    } catch (error) {
-      console.warn(error);
-      if (!newFile) {
-        setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
-      } else {
-        setFileUploads((prevFileUploads) =>
-          prevFileUploads.map((fileUpload) => {
-            if (fileUpload.id === id) {
-              return {
-                ...fileUpload,
-                state: FileState.UPLOAD_FAILED,
-              };
-            }
-            return fileUpload;
-          }),
-        );
-        setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
-      }
-      return;
+      const extraData: Partial<FileUpload> = { url: response.file };
+      setFileUploads(getUploadSetStateAction(id, FileState.UPLOADED, extraData));
+    } catch (error: unknown) {
+      handleFileOrImageUploadError(error, false, id);
     }
-
-    setFileUploads((prevFileUploads) =>
-      prevFileUploads.map((fileUpload) => {
-        if (fileUpload.id === id) {
-          return {
-            ...fileUpload,
-            state: FileState.UPLOADED,
-            url: response.file,
-          };
-        }
-        return fileUpload;
-      }),
-    );
   };
 
   const uploadImage = async ({ newImage }: { newImage: ImageUpload }) => {
     const { file, id } = newImage || {};
+
     if (!file) {
       return;
     }
@@ -938,18 +970,7 @@ export const MessageInputProvider = <
                 return prevAsyncUploads;
               });
             } else {
-              setImageUploads((prevImageUploads) =>
-                prevImageUploads.map((imageUpload) => {
-                  if (imageUpload.id === id) {
-                    return {
-                      ...imageUpload,
-                      state: FileState.UPLOADED,
-                      url: res.file,
-                    };
-                  }
-                  return imageUpload;
-                }),
-              );
+              setImageUploads(getUploadSetStateAction(id, FileState.UPLOADED, { url: res.file }));
             }
           });
         } else {
@@ -958,39 +979,16 @@ export const MessageInputProvider = <
       }
 
       if (Object.keys(response).length) {
-        setImageUploads((prevImageUploads) =>
-          prevImageUploads.map((imageUpload) => {
-            if (imageUpload.id === id) {
-              return {
-                ...imageUpload,
-                height: file.height,
-                state: FileState.UPLOADED,
-                url: response.file,
-                width: file.width,
-              };
-            }
-            return imageUpload;
+        setImageUploads(
+          getUploadSetStateAction(id, FileState.UPLOADED, {
+            height: file.height,
+            url: response.file,
+            width: file.width,
           }),
         );
       }
     } catch (error) {
-      console.warn(error);
-      if (newImage) {
-        setImageUploads((prevImageUploads) =>
-          prevImageUploads.map((imageUpload) => {
-            if (imageUpload.id === id) {
-              return {
-                ...imageUpload,
-                state: FileState.UPLOAD_FAILED,
-              };
-            }
-            return imageUpload;
-          }),
-        );
-      }
-      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
-
-      return;
+      handleFileOrImageUploadError(error, true, id);
     }
   };
 
@@ -1000,34 +998,67 @@ export const MessageInputProvider = <
     type?: string;
     uri?: string;
   }) => {
-    const id = generateRandomId();
-    const mimeType = lookup(file.name);
-    const newFile = {
+    const id: string = generateRandomId();
+    const mimeType: string | boolean = lookup(file.name);
+
+    const isBlockedFileExtension: boolean | undefined = blockedFileExtensionTypes?.some(
+      (fileExtensionType: string) => file.name?.includes(fileExtensionType),
+    );
+    const isBlockedFileMimeType: boolean | undefined = blockedFileMimeTypes?.some(
+      (mimeType: string) => file.name?.includes(mimeType),
+    );
+
+    const fileState =
+      isBlockedFileExtension || isBlockedFileMimeType
+        ? FileState.NOT_SUPPORTED
+        : FileState.UPLOADING;
+
+    const newFile: FileUpload = {
       file: { ...file, type: mimeType || file?.type },
       id,
-      state: FileState.UPLOADING,
+      state: fileState,
     };
+
     await Promise.all([
       setFileUploads((prevFileUploads) => prevFileUploads.concat([newFile])),
       setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1),
     ]);
 
-    uploadFile({ newFile });
+    if (!isBlockedFileExtension) {
+      uploadFile({ newFile });
+    }
   };
 
   const uploadNewImage = async (image: Partial<Asset>) => {
     const id = generateRandomId();
-    const newImage = {
+
+    const isBlockedImageMimeType = blockedImageMimeTypes?.some((mimeType: string) =>
+      image.uri?.includes(mimeType),
+    );
+
+    const isBlockedImageExtension = blockedImageExtensionTypes?.some((imageExtensionType: string) =>
+      image.uri?.includes(imageExtensionType),
+    );
+
+    const imageState =
+      isBlockedImageExtension || isBlockedImageMimeType
+        ? FileState.NOT_SUPPORTED
+        : FileState.UPLOADING;
+
+    const newImage: ImageUpload = {
       file: image,
       id,
-      state: FileState.UPLOADING,
+      state: imageState,
     };
+
     await Promise.all([
       setImageUploads((prevImageUploads) => prevImageUploads.concat([newImage])),
       setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1),
     ]);
 
-    uploadImage({ newImage });
+    if (!isBlockedImageExtension) {
+      uploadImage({ newImage });
+    }
   };
 
   const messageInputContext = useCreateMessageInputContext({

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

@@ -44,8 +44,8 @@ export const useMessageDetailsForState = <
   useEffect(() => {
     if (message && !isEditingBoolean<StreamChatGenerics>(message)) {
       setText(message?.text || '');
-      const newFileUploads = [];
-      const newImageUploads = [];
+      const newFileUploads: FileUpload[] = [];
+      const newImageUploads: ImageUpload[] = [];
 
       const attachments = Array.isArray(message.attachments) ? message.attachments : [];
 

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

@@ -334,6 +334,7 @@ export type Theme = {
       unreadCountNotificationContainer: ViewStyle;
       unreadCountNotificationText: TextStyle;
       wrapper: ViewStyle;
+      chevronColor?: Color;
     };
     typingIndicatorContainer: ViewStyle;
   };

package/src/i18n/en.json

@@ -19,6 +19,7 @@
   "Error loading channel list...": "Error loading channel list...",
   "Error loading messages for this channel...": "Error loading messages for this channel...",
   "Error while loading, please reload/refresh": "Error while loading, please reload/refresh",
+  "File type not supported": "File type not supported",
   "Flag": "Flag",
   "Flag Message": "Flag Message",
   "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged.",
@@ -31,6 +32,7 @@
   "Message deleted": "Message deleted",
   "Message flagged": "Message flagged",
   "Mute User": "Mute User",
+  "Not supported": "Not supported",
   "Nothing yet...": "Nothing yet...",
   "Ok": "Ok",
   "Only visible to you": "Only visible to you",

package/src/i18n/fr.json

@@ -19,6 +19,7 @@
   "Error loading channel list...": "Erreur lors du chargement de la liste de canaux...",
   "Error loading messages for this channel...": "Erreur lors du chargement des messages de ce canal...",
   "Error while loading, please reload/refresh": "Erreur lors du chargement, veuillez recharger/rafraîchir",
+  "File type not supported": "Le type de fichier n'est pas pris en charge",
   "Flag": "Signaler",
   "Flag Message": "Signaler le message",
   "Flag action failed either due to a network issue or the message is already flagged": "L'action de signalisation a échoué en raison d'un problème de réseau ou le message est déjà signalé.",
@@ -31,6 +32,7 @@
   "Message deleted": "Message supprimé",
   "Message flagged": "Message signalé",
   "Mute User": "Utilisateur muet",
+  "Not supported": "Non pris en charge",
   "Nothing yet...": "Aucun message...",
   "Ok": "Ok",
   "Only visible to you": "Seulement visible par vous",

package/src/i18n/hi.json

@@ -19,6 +19,7 @@
   "Error loading channel list...": "चैनल सूची लोड करने में त्रुटि...",
   "Error loading messages for this channel...": "इस चैनल के लिए मेसेजेस लोड करने में त्रुटि हुई...",
   "Error while loading, please reload/refresh": "एरर, रिफ्रेश करे",
+  "File type not supported": "फ़ाइल प्रकार समर्थित नहीं है",
   "Flag": "झंडा",
   "Flag Message": "झंडा संदेश",
   "Flag action failed either due to a network issue or the message is already flagged": "फ़्लैग कार्रवाई या तो नेटवर्क समस्या के कारण विफल हो गई या संदेश पहले से फ़्लैग किया गया है।",
@@ -31,6 +32,7 @@
   "Message deleted": "मैसेज हटा दिया गया",
   "Message flagged": "संदेश को ध्वजांकित किया गया",
   "Mute User": "उपयोगकर्ता को म्यूट करें",
+  "Not supported": "समर्थित नहीं",
   "Nothing yet...": "कोई मैसेज नहीं है...",
   "Ok": "ठीक",
   "Only visible to you": "केवल आपको दिखाई दे रहा है",

package/src/i18n/it.json

@@ -19,6 +19,7 @@
   "Error loading channel list...": "Errore durante il caricamento della lista dei canali...",
   "Error loading messages for this channel...": "Errore durante il caricamento dei messaggi per questo canale...",
   "Error while loading, please reload/refresh": "Errore durante il caricamento, per favore ricarica la pagina",
+  "File type not supported": "Tipo di file non supportato",
   "Flag": "Contrassegna",
   "Flag Message": "Contrassegna Messaggio",
   "Flag action failed either due to a network issue or the message is already flagged": "L'azione di segnalazione non è riuscita a causa di un problema di rete o il messaggio è già segnalato.",
@@ -31,6 +32,7 @@
   "Message deleted": "Messaggio cancellato",
   "Message flagged": "Messaggio contrassegnato",
   "Mute User": "Utente Muto",
+  "Not supported": "non supportato",
   "Nothing yet...": "Ancora niente...",
   "Ok": "Ok",
   "Only visible to you": "Visibile solo a te",

package/src/i18n/ja.json

@@ -63,5 +63,7 @@
   "Only visible to you": "あなただけに見える",
   "Reply": "返事",
   "Reply to Message": "メッセージに返信",
-  "🏙 Attachment...": "🏙 アタッチメント..."
+  "🏙 Attachment...": "🏙 アタッチメント...",
+  "Not supported": "サポートしていません",
+  "File type not supported": "サポートされていないファイルです"
 }

package/src/i18n/ko.json

@@ -63,5 +63,7 @@
   "Only visible to you": "당신만 볼 수 있습니다",
   "Reply": "답장",
   "Reply to Message": "메시지에 답장",
-  "🏙 Attachment...": "🏙 부착..."
+  "🏙 Attachment...": "🏙 부착...",
+  "File type not supported": "지원하지 않는 파일입니다.",
+  "Not supported": "지원하지 않습니다"
 }

package/src/i18n/nl.json

@@ -19,6 +19,7 @@
   "Error loading channel list...": "Probleem bij het laden van de kanalen...",
   "Error loading messages for this channel...": "Probleem bij het laden van de berichten in dit kanaal...",
   "Error while loading, please reload/refresh": "Probleem bij het laden, probeer opnieuw",
+  "File type not supported": "Bestandstype niet ondersteund",
   "Flag": "Markeer",
   "Flag Message": "Markeer bericht",
   "Flag action failed either due to a network issue or the message is already flagged": "Rapporteren mislukt door een netwerk fout of het berich is al gerapporteerd",
@@ -31,6 +32,7 @@
   "Message deleted": "Bericht verwijderd",
   "Message flagged": "Bericht gemarkeerd",
   "Mute User": "Gebruiker dempen",
+  "Not supported": "niet ondersteund",
   "Nothing yet...": "Nog niets...",
   "Ok": "Oké",
   "Only visible to you": "Alleen zichtbaar voor jou",

package/src/i18n/ru.json

@@ -19,6 +19,7 @@
   "Error loading channel list...": "Ошибка загрузки списка каналов...",
   "Error loading messages for this channel...": "Ошибка загрузки сообщений для этого канала...",
   "Error while loading, please reload/refresh": "Ошибка загрузки, пожалуйста перезагрузите или обновите",
+  "File type not supported": "Тип файла не поддерживается",
   "Flag": "Пометить",
   "Flag Message": "Пометить сообщение",
   "Flag action failed either due to a network issue or the message is already flagged": "Не удалось отправить жалобу. Возможные причины: проблема с подключением к интернету или ваша жалоба уже была принята.",
@@ -31,6 +32,7 @@
   "Message deleted": "Сообщение удалено",
   "Message flagged": "Сообщение отмечено",
   "Mute User": "Отключить пользователя",
+  "Not supported": "не поддерживается",
   "Nothing yet...": "Пока ничего нет...",
   "Ok": "Oк",
   "Only visible to you": "Видно только вам",

package/src/i18n/tr.json

@@ -19,6 +19,7 @@
   "Error loading channel list...": "Kanal listesi yüklenirken hata oluştu...",
   "Error loading messages for this channel...": "Bu kanal için mesajlar yüklenirken hata oluştu...",
   "Error while loading, please reload/refresh": "Yüklenirken hata oluştu, lütfen tekrar deneyin",
+  "File type not supported": "Dosya türü desteklenmiyor",
   "Flag": "Raporla",
   "Flag Message": "Mesajı İşaretle",
   "Flag action failed either due to a network issue or the message is already flagged": "Raporlama, mesajın raporlanmış olması veya bağlantı hatası sebebiyle başarısız oldu.",
@@ -31,6 +32,7 @@
   "Message deleted": "Mesaj silindi",
   "Message flagged": "Mesaj işaretlendi",
   "Mute User": "Kullanıcının Sesini Kapat",
+  "Not supported": "Desteklenmiyor",
   "Nothing yet...": "Şimdilik hiçbir şey...",
   "Ok": "Tamam",
   "Only visible to you": "Sadece siz görebilirsiniz",

package/src/icons/Warning.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { IconProps, RootPath, RootSvg } from './utils/base';
+
+export const Warning: React.FC<IconProps> = (props) => (
+  <RootSvg {...props}>
+    <RootPath
+      d='M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM7 11V13H9V11H7ZM7 9V3H9V9H7Z'
+      {...props}
+    />
+  </RootSvg>
+);

package/src/icons/index.ts

@@ -74,6 +74,7 @@ export * from './User';
 export * from './UserAdd';
 export * from './UserDelete';
 export * from './UserMinus';
+export * from './Warning';
 export * from './WutReaction';
 export * from './XLS';
 export * from './XLSX';

package/src/utils/utils.ts

@@ -8,6 +8,7 @@ import type {
   ChannelMemberAPIResponse,
   ChannelMemberResponse,
   CommandResponse,
+  FormatMessageResponse,
   StreamChat,
   UserResponse,
 } from 'stream-chat';
@@ -32,7 +33,7 @@ export const FileState = Object.freeze({
   // while later is set on backend side
   // TODO: Unify both of them
   FINISHED: 'finished',
-  NO_FILE: 'no_file',
+  NOT_SUPPORTED: 'not_supported',
   UPLOAD_FAILED: 'upload_failed',
   UPLOADED: 'uploaded',
   UPLOADING: 'uploading',
@@ -40,9 +41,13 @@ export const FileState = Object.freeze({
 
 export const ProgressIndicatorTypes: {
   IN_PROGRESS: 'in_progress';
+  INACTIVE: 'inactive';
+  NOT_SUPPORTED: 'not_supported';
   RETRY: 'retry';
 } = Object.freeze({
   IN_PROGRESS: 'in_progress',
+  INACTIVE: 'inactive',
+  NOT_SUPPORTED: 'not_supported',
   RETRY: 'retry',
 });
 
@@ -52,6 +57,24 @@ export const MessageStatusTypes = {
   SENDING: 'sending',
 };
 
+export type FileStateValue = typeof FileState[keyof typeof FileState];
+
+type ValueOf<T> = T[keyof T];
+type Progress = ValueOf<typeof ProgressIndicatorTypes>;
+type IndicatorStatesMap = Record<ValueOf<typeof FileState>, Progress | null>;
+
+export const getIndicatorTypeForFileState = (fileState: FileStateValue): Progress | null => {
+  const indicatorMap: IndicatorStatesMap = {
+    [FileState.UPLOADING]: ProgressIndicatorTypes.IN_PROGRESS,
+    [FileState.UPLOAD_FAILED]: ProgressIndicatorTypes.RETRY,
+    [FileState.NOT_SUPPORTED]: ProgressIndicatorTypes.NOT_SUPPORTED,
+    [FileState.UPLOADED]: ProgressIndicatorTypes.INACTIVE,
+    [FileState.FINISHED]: ProgressIndicatorTypes.INACTIVE,
+  };
+
+  return indicatorMap[fileState];
+};
+
 const defaultAutoCompleteSuggestionsLimit = 10;
 const defaultMentionAllAppUsersQuery = {
   filters: {},
@@ -512,3 +535,32 @@ export const emojiRegex =
 
 export const urlRegex =
   /(?:\s|^)((?:https?:\/\/)?(?:[a-z0-9-]+(?:\.[a-z0-9-]+)+)(?::[0-9]+)?(?:\/(?:[^\s]+)?)?)/g;
+
+/**
+ * Stringifies a message object
+ * @param {FormatMessageResponse<StreamChatGenerics>} message - the message object to be stringified
+ * @returns {string} The stringified message
+ */
+const stringifyMessage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  deleted_at,
+  latest_reactions,
+  reply_count,
+  status,
+  updated_at,
+}: FormatMessageResponse<StreamChatGenerics>): string =>
+  `${deleted_at}${
+    latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
+  }${reply_count}${status}${updated_at?.toISOString?.() || updated_at}`;
+
+/**
+ * Reduces a list of messages to strings that are used in useEffect & useMemo
+ * @param {messages} messages - the array of messages to be compared
+ * @returns {string} The mapped message string
+ */
+export const reduceMessagesToString = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  messages: FormatMessageResponse<StreamChatGenerics>[],
+): string => messages.map(stringifyMessage).join();

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.3.1"
+  "version": "4.4.0-beta.3"
 }