stream-chat-react 12.0.0-rc.2 → 12.0.0-rc.3

package/dist/components/MessageInput/hooks/useAttachments.js

@@ -1,11 +1,22 @@
 import { useCallback } from 'react';
 import { nanoid } from 'nanoid';
-import { useImageUploads } from './useImageUploads';
-import { useFileUploads } from './useFileUploads';
 import { checkUploadPermissions } from './utils';
-import { isLocalAttachment, isLocalImageAttachment, isUploadedImage } from '../../Attachment';
+import { isLocalAttachment, isLocalImageAttachment } from '../../Attachment';
+import { createFileFromBlobs, generateFileName, isBlobButNotFile } from '../../ReactFileUtilities';
 import { useChannelActionContext, useChannelStateContext, useChatContext, useTranslationContext, } from '../../../context';
 const apiMaxNumberOfFiles = 10;
+// const isAudioFile = (file: FileLike) => file.type.includes('audio/');
+const isImageFile = (file) => file.type.startsWith('image/') && !file.type.endsWith('.photoshop'); // photoshop files begin with 'image/'
+// const isVideoFile = (file: FileLike) => file.type.includes('video/');
+const getAttachmentTypeFromMime = (mimeType) => {
+    if (mimeType.startsWith('image/') && !mimeType.endsWith('.photoshop'))
+        return 'image';
+    if (mimeType.includes('video/'))
+        return 'video';
+    if (mimeType.includes('audio/'))
+        return 'audio';
+    return 'file';
+};
 const ensureIsLocalAttachment = (attachment) => {
     if (isLocalAttachment(attachment)) {
         return attachment;
@@ -21,45 +32,15 @@ const ensureIsLocalAttachment = (attachment) => {
 };
 export const useAttachments = (props, state, dispatch, textareaRef) => {
     const { doFileUploadRequest, doImageUploadRequest, errorHandler, noFiles } = props;
-    const { fileUploads, imageUploads } = state;
     const { getAppSettings } = useChatContext('useAttachments');
     const { t } = useTranslationContext('useAttachments');
     const { addNotification } = useChannelActionContext('useAttachments');
     const { channel, maxNumberOfFiles, multipleUploads } = useChannelStateContext('useAttachments');
-    const { removeFile, uploadFile } = useFileUploads(props, state, dispatch);
-    const { removeImage, uploadImage } = useImageUploads(props, state, dispatch);
     // Number of files that the user can still add. Should never be more than the amount allowed by the API.
     // If multipleUploads is false, we only want to allow a single upload.
     const maxFilesAllowed = !multipleUploads ? 1 : maxNumberOfFiles || apiMaxNumberOfFiles;
-    // OG attachments should not be counted towards "numberOfImages"
-    const numberOfImages = Object.values(imageUploads).filter(({ og_scrape_url, state }) => state !== 'failed' && !og_scrape_url).length;
-    const numberOfFiles = Object.values(fileUploads).filter(({ state }) => state !== 'failed').length;
-    const numberOfUploads = numberOfImages + numberOfFiles;
+    const numberOfUploads = Object.values(state.attachments).filter(({ localMetadata }) => localMetadata.uploadState && localMetadata.uploadState !== 'failed').length;
     const maxFilesLeft = maxFilesAllowed - numberOfUploads;
-    const uploadNewFiles = useCallback((files) => {
-        Array.from(files)
-            .slice(0, maxFilesLeft)
-            .forEach((file) => {
-            const id = nanoid();
-            if (file.type.startsWith('image/') &&
-                !file.type.endsWith('.photoshop') // photoshop files begin with 'image/'
-            ) {
-                dispatch({
-                    file,
-                    id,
-                    previewUri: URL.createObjectURL?.(file),
-                    state: 'uploading',
-                    type: 'setImageUpload',
-                });
-            }
-            else if (file instanceof File && !noFiles) {
-                dispatch({ file, id, state: 'uploading', type: 'setFileUpload' });
-            }
-        });
-        textareaRef?.current?.focus();
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [maxFilesLeft, noFiles]);
     const removeAttachments = useCallback((ids) => {
         if (!ids.length)
             return;
@@ -74,12 +55,13 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
         });
     }, [dispatch]);
     const uploadAttachment = useCallback(async (att) => {
-        const { localMetadata, ...attachment } = att;
+        const { localMetadata, ...providedAttachmentData } = att;
         if (!localMetadata?.file)
             return att;
-        const isImage = isUploadedImage(attachment);
-        const id = localMetadata?.id ?? nanoid();
         const { file } = localMetadata;
+        const isImage = isImageFile(file);
+        if (noFiles && !isImage)
+            return att;
         const canUpload = await checkUploadPermissions({
             addNotification,
             file,
@@ -87,18 +69,31 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
             t,
             uploadType: isImage ? 'image' : 'file',
         });
-        if (!canUpload) {
-            const notificationText = t('Missing permissions to upload the attachment');
-            console.error(new Error(notificationText));
-            addNotification(notificationText, 'error');
+        if (!canUpload)
             return att;
+        localMetadata.id = localMetadata?.id ?? nanoid();
+        const finalAttachment = {
+            type: getAttachmentTypeFromMime(file.type),
+        };
+        if (isImage) {
+            localMetadata.previewUri = URL.createObjectURL?.(file);
+            if (file instanceof File) {
+                finalAttachment.fallback = file.name;
+            }
         }
+        else {
+            finalAttachment.file_size = file.size;
+            finalAttachment.mime_type = file.type;
+            if (file instanceof File) {
+                finalAttachment.title = file.name;
+            }
+        }
+        Object.assign(finalAttachment, providedAttachmentData);
         upsertAttachments([
             {
-                ...attachment,
+                ...finalAttachment,
                 localMetadata: {
                     ...localMetadata,
-                    id,
                     uploadState: 'uploading',
                 },
             },
@@ -124,7 +119,7 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
             console.error(finalError);
             addNotification(finalError.message, 'error');
             const failedAttachment = {
-                ...attachment,
+                ...finalAttachment,
                 localMetadata: {
                     ...localMetadata,
                     uploadState: 'failed',
@@ -132,19 +127,19 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
             };
             upsertAttachments([failedAttachment]);
             if (errorHandler) {
-                errorHandler(finalError, 'upload-attachment', file);
+                errorHandler(finalError, 'upload-attachment', { ...file, id: localMetadata.id });
             }
             return failedAttachment;
         }
         if (!response) {
-            // Copied this from useImageUpload / useFileUpload. Not sure how failure could be handled on app level.
+            // Copied this from useImageUpload / useFileUpload.
             // If doUploadRequest returns any falsy value, then don't create the upload preview.
             // This is for the case if someone wants to handle failure on app level.
-            removeAttachments([id]);
+            removeAttachments([localMetadata.id]);
             return;
         }
         const uploadedAttachment = {
-            ...attachment,
+            ...finalAttachment,
             localMetadata: {
                 ...localMetadata,
                 uploadState: 'finished',
@@ -160,6 +155,9 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
         else {
             uploadedAttachment.asset_url = response.file;
         }
+        if (response.thumb_url) {
+            uploadedAttachment.thumb_url = response.thumb_url;
+        }
         upsertAttachments([uploadedAttachment]);
         return uploadedAttachment;
     }, [
@@ -169,19 +167,34 @@ export const useAttachments = (props, state, dispatch, textareaRef) => {
         doImageUploadRequest,
         errorHandler,
         getAppSettings,
+        noFiles,
         removeAttachments,
         t,
         upsertAttachments,
     ]);
+    const uploadNewFiles = useCallback((files) => {
+        const filesToBeUploaded = noFiles ? Array.from(files).filter(isImageFile) : Array.from(files);
+        filesToBeUploaded.slice(0, maxFilesLeft).forEach((fileLike) => {
+            uploadAttachment({
+                localMetadata: {
+                    file: isBlobButNotFile(fileLike)
+                        ? createFileFromBlobs({
+                            blobsArray: [fileLike],
+                            fileName: generateFileName(fileLike.type),
+                            mimeType: fileLike.type,
+                        })
+                        : fileLike,
+                    id: nanoid(),
+                },
+            });
+        });
+        textareaRef.current?.focus();
+    }, [maxFilesLeft, noFiles, textareaRef, uploadAttachment]);
     return {
         maxFilesLeft,
         numberOfUploads,
         removeAttachments,
-        removeFile,
-        removeImage,
         uploadAttachment,
-        uploadFile,
-        uploadImage,
         uploadNewFiles,
         upsertAttachments,
     };

package/dist/components/MessageInput/hooks/useCreateMessageInputContext.js

@@ -1,15 +1,7 @@
 import { useMemo } from 'react';
 export const useCreateMessageInputContext = (value) => {
-    const { additionalTextareaProps, asyncMessagesMultiSendEnabled, attachments, audioRecordingEnabled, autocompleteTriggers, cancelURLEnrichment, clearEditingState, closeCommandsList, closeMentionsList, cooldownInterval, cooldownRemaining, disabled, disableMentions, dismissLinkPreview, doFileUploadRequest, doImageUploadRequest, emojiSearchIndex, errorHandler, fileOrder, fileUploads, findAndEnqueueURLsToEnrich, focus, grow, handleChange, handleSubmit, hideSendButton, imageOrder, imageUploads, insertText, isUploadEnabled, linkPreviews, maxFilesLeft, maxRows, mentionAllAppUsers, mentioned_users, mentionQueryParams, message, minRows, noFiles, numberOfUploads, onPaste, onSelectUser, openCommandsList, openMentionsList, overrideSubmitHandler, parent, publishTypingEvent, recordingController, removeAttachments, removeFile, removeImage, setCooldownRemaining, setText, shouldSubmit, showCommandsList, showMentionsList, text, textareaRef, uploadAttachment, uploadFile, uploadImage, uploadNewFiles, upsertAttachments, useMentionsTransliteration, } = value;
+    const { additionalTextareaProps, asyncMessagesMultiSendEnabled, attachments, audioRecordingEnabled, autocompleteTriggers, cancelURLEnrichment, clearEditingState, closeCommandsList, closeMentionsList, cooldownInterval, cooldownRemaining, disabled, disableMentions, dismissLinkPreview, doFileUploadRequest, doImageUploadRequest, emojiSearchIndex, errorHandler, findAndEnqueueURLsToEnrich, focus, grow, handleChange, handleSubmit, hideSendButton, insertText, isUploadEnabled, linkPreviews, maxFilesLeft, maxRows, mentionAllAppUsers, mentioned_users, mentionQueryParams, message, minRows, noFiles, numberOfUploads, onPaste, onSelectUser, openCommandsList, openMentionsList, overrideSubmitHandler, parent, publishTypingEvent, recordingController, removeAttachments, setCooldownRemaining, setText, shouldSubmit, showCommandsList, showMentionsList, text, textareaRef, uploadAttachment, uploadNewFiles, upsertAttachments, useMentionsTransliteration, } = value;
     const editing = message?.editing;
-    const fileUploadsValue = Object.entries(fileUploads)
-        // eslint-disable-next-line
-        .map(([_, value]) => value.state)
-        .join();
-    const imageUploadsValue = Object.entries(imageUploads)
-        // eslint-disable-next-line
-        .map(([_, value]) => value.state)
-        .join();
     const linkPreviewsValue = Array.from(linkPreviews.values()).join();
     const mentionedUsersLength = mentioned_users.length;
     const parentId = parent?.id;
@@ -32,16 +24,12 @@ export const useCreateMessageInputContext = (value) => {
         doImageUploadRequest,
         emojiSearchIndex,
         errorHandler,
-        fileOrder,
-        fileUploads,
         findAndEnqueueURLsToEnrich,
         focus,
         grow,
         handleChange,
         handleSubmit,
         hideSendButton,
-        imageOrder,
-        imageUploads,
         insertText,
         isUploadEnabled,
         linkPreviews,
@@ -63,8 +51,6 @@ export const useCreateMessageInputContext = (value) => {
         publishTypingEvent,
         recordingController,
         removeAttachments,
-        removeFile,
-        removeImage,
         setCooldownRemaining,
         setText,
         shouldSubmit,
@@ -73,8 +59,6 @@ export const useCreateMessageInputContext = (value) => {
         text,
         textareaRef,
         uploadAttachment,
-        uploadFile,
-        uploadImage,
         uploadNewFiles,
         upsertAttachments,
         useMentionsTransliteration,
@@ -82,6 +66,7 @@ export const useCreateMessageInputContext = (value) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
         asyncMessagesMultiSendEnabled,
+        attachments,
         audioRecordingEnabled,
         cancelURLEnrichment,
         cooldownInterval,
@@ -89,11 +74,9 @@ export const useCreateMessageInputContext = (value) => {
         dismissLinkPreview,
         editing,
         emojiSearchIndex,
-        fileUploadsValue,
         findAndEnqueueURLsToEnrich,
         handleSubmit,
         hideSendButton,
-        imageUploadsValue,
         isUploadEnabled,
         linkPreviewsValue,
         mentionedUsersLength,

package/dist/components/MessageInput/hooks/useMessageInputState.d.ts

@@ -1,18 +1,13 @@
 import React from 'react';
 import { EnrichURLsController } from './useLinkPreviews';
 import { RecordingController } from '../../MediaRecorder/hooks/useMediaRecorder';
+import type { LinkPreviewMap, LocalAttachment } from '../types';
 import { SetLinkPreviewMode } from '../types';
-import type { FileUpload, ImageUpload, LinkPreviewMap, LocalAttachment } from '../types';
-import type { FileLike } from '../../ReactFileUtilities';
 import type { Attachment, Message, UserResponse } from 'stream-chat';
 import type { MessageInputProps } from '../MessageInput';
 import type { CustomTrigger, DefaultStreamChatGenerics, SendMessageOptions } from '../../../types/types';
 export type MessageInputState<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     attachments: LocalAttachment<StreamChatGenerics>[];
-    fileOrder: string[];
-    fileUploads: Record<string, FileUpload>;
-    imageOrder: string[];
-    imageUploads: Record<string, ImageUpload>;
     linkPreviews: LinkPreviewMap;
     mentioned_users: UserResponse<StreamChatGenerics>[];
     setText: (text: string) => void;
@@ -33,40 +28,16 @@ type SetTextAction = {
 type ClearAction = {
     type: 'clear';
 };
-type SetImageUploadAction = {
-    id: string;
-    type: 'setImageUpload';
-    file?: File | FileLike;
-    previewUri?: string;
-    state?: string;
-    url?: string;
-};
-type SetFileUploadAction = {
-    id: string;
-    type: 'setFileUpload';
-    file?: File;
-    state?: string;
-    thumb_url?: string;
-    url?: string;
-};
 type SetLinkPreviewsAction = {
     linkPreviews: LinkPreviewMap;
     mode: SetLinkPreviewMode;
     type: 'setLinkPreviews';
 };
-type RemoveImageUploadAction = {
-    id: string;
-    type: 'removeImageUpload';
-};
-type RemoveFileUploadAction = {
-    id: string;
-    type: 'removeFileUpload';
-};
 type AddMentionedUserAction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     type: 'addMentionedUser';
     user: UserResponse<StreamChatGenerics>;
 };
-export type MessageInputReducerAction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = SetTextAction | ClearAction | SetImageUploadAction | SetFileUploadAction | SetLinkPreviewsAction | RemoveImageUploadAction | RemoveFileUploadAction | AddMentionedUserAction<StreamChatGenerics> | UpsertAttachmentsAction | RemoveAttachmentsAction;
+export type MessageInputReducerAction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = SetTextAction | ClearAction | SetLinkPreviewsAction | AddMentionedUserAction<StreamChatGenerics> | UpsertAttachmentsAction | RemoveAttachmentsAction;
 export type MessageInputHookProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = EnrichURLsController & {
     handleChange: React.ChangeEventHandler<HTMLTextAreaElement>;
     handleSubmit: (event?: React.BaseSyntheticEvent, customMessageData?: Partial<Message<StreamChatGenerics>>, options?: SendMessageOptions) => void;
@@ -78,12 +49,8 @@ export type MessageInputHookProps<StreamChatGenerics extends DefaultStreamChatGe
     onSelectUser: (item: UserResponse<StreamChatGenerics>) => void;
     recordingController: RecordingController<StreamChatGenerics>;
     removeAttachments: (ids: string[]) => void;
-    removeFile: (id: string) => void;
-    removeImage: (id: string) => void;
     textareaRef: React.MutableRefObject<HTMLTextAreaElement | null | undefined>;
     uploadAttachment: (attachment: LocalAttachment<StreamChatGenerics>) => Promise<LocalAttachment<StreamChatGenerics> | undefined>;
-    uploadFile: (id: string) => void;
-    uploadImage: (id: string) => void;
     uploadNewFiles: (files: FileList | File[]) => void;
     upsertAttachments: (attachments: (Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>)[]) => void;
 };

package/dist/components/MessageInput/hooks/useMessageInputState.js

@@ -11,10 +11,6 @@ import { LinkPreviewState, SetLinkPreviewMode } from '../types';
 import { mergeDeep } from '../../../utils/mergeDeep';
 const makeEmptyMessageInputState = () => ({
     attachments: [],
-    fileOrder: [],
-    fileUploads: {},
-    imageOrder: [],
-    imageUploads: {},
     linkPreviews: new Map(),
     mentioned_users: [],
     setText: () => null,
@@ -27,43 +23,6 @@ const initState = (message) => {
     if (!message) {
         return makeEmptyMessageInputState();
     }
-    // if message prop is defined, get image uploads, file uploads, text, etc.
-    const imageUploads = message.attachments
-        ?.filter(({ type }) => type === 'image')
-        .reduce((acc, { author_name, fallback = '', image_url, og_scrape_url, text, title, title_link }) => {
-        const id = nanoid();
-        acc[id] = {
-            author_name,
-            file: {
-                name: fallback,
-            },
-            id,
-            og_scrape_url, // fixme: why scraped content is mixed with uploaded content?
-            state: 'finished',
-            text,
-            title,
-            title_link,
-            url: image_url,
-        };
-        return acc;
-    }, {}) ?? {};
-    const fileUploads = message.attachments
-        ?.filter(({ type }) => type === 'file')
-        .reduce((acc, { asset_url, file_size, mime_type, thumb_url, title = '' }) => {
-        const id = nanoid();
-        acc[id] = {
-            file: {
-                name: title,
-                size: file_size,
-                type: mime_type,
-            },
-            id,
-            state: 'finished',
-            thumb_url,
-            url: asset_url,
-        };
-        return acc;
-    }, {}) ?? {};
     const linkPreviews = message.attachments?.reduce((acc, attachment) => {
         if (!attachment.og_scrape_url)
             return acc;
@@ -73,10 +32,8 @@ const initState = (message) => {
         });
         return acc;
     }, new Map()) ?? new Map();
-    const imageOrder = Object.keys(imageUploads);
-    const fileOrder = Object.keys(fileUploads);
     const attachments = message.attachments
-        ?.filter(({ type }) => type !== 'file' && type !== 'image')
+        ?.filter(({ og_scrape_url }) => !og_scrape_url)
         .map((att) => ({
         ...att,
         localMetadata: { id: nanoid() },
@@ -84,10 +41,6 @@ const initState = (message) => {
     const mentioned_users = message.mentioned_users || [];
     return {
         attachments,
-        fileOrder,
-        fileUploads,
-        imageOrder,
-        imageUploads,
         linkPreviews,
         mentioned_users,
         setText: () => null,
@@ -126,38 +79,6 @@ const messageInputReducer = (state, action) => {
                 attachments: state.attachments.filter((att) => !action.ids.includes(att.localMetadata?.id)),
             };
         }
-        case 'setImageUpload': {
-            const imageAlreadyExists = state.imageUploads[action.id];
-            if (!imageAlreadyExists && !action.file)
-                return state;
-            const imageOrder = imageAlreadyExists ? state.imageOrder : state.imageOrder.concat(action.id);
-            const newUploadFields = { ...action };
-            delete newUploadFields.type;
-            return {
-                ...state,
-                imageOrder,
-                imageUploads: {
-                    ...state.imageUploads,
-                    [action.id]: { ...state.imageUploads[action.id], ...newUploadFields },
-                },
-            };
-        }
-        case 'setFileUpload': {
-            const fileAlreadyExists = state.fileUploads[action.id];
-            if (!fileAlreadyExists && !action.file)
-                return state;
-            const fileOrder = fileAlreadyExists ? state.fileOrder : state.fileOrder.concat(action.id);
-            const newUploadFields = { ...action };
-            delete newUploadFields.type;
-            return {
-                ...state,
-                fileOrder,
-                fileUploads: {
-                    ...state.fileUploads,
-                    [action.id]: { ...state.fileUploads[action.id], ...newUploadFields },
-                },
-            };
-        }
         case 'setLinkPreviews': {
             const linkPreviews = new Map(state.linkPreviews);
             if (action.mode === SetLinkPreviewMode.REMOVE) {
@@ -187,28 +108,6 @@ const messageInputReducer = (state, action) => {
                 linkPreviews,
             };
         }
-        case 'removeImageUpload': {
-            if (!state.imageUploads[action.id])
-                return state; // cannot remove anything
-            const newImageUploads = { ...state.imageUploads };
-            delete newImageUploads[action.id];
-            return {
-                ...state,
-                imageOrder: state.imageOrder.filter((_id) => _id !== action.id),
-                imageUploads: newImageUploads,
-            };
-        }
-        case 'removeFileUpload': {
-            if (!state.fileUploads[action.id])
-                return state; // cannot remove anything
-            const newFileUploads = { ...state.fileUploads };
-            delete newFileUploads[action.id];
-            return {
-                ...state,
-                fileOrder: state.fileOrder.filter((_id) => _id !== action.id),
-                fileUploads: newFileUploads,
-            };
-        }
         case 'addMentionedUser':
             return {
                 ...state,
@@ -255,7 +154,7 @@ export const useMessageInputState = (props) => {
         setShowMentionsList(true);
     };
     const closeMentionsList = () => setShowMentionsList(false);
-    const { maxFilesLeft, numberOfUploads, removeAttachments, removeFile, removeImage, uploadAttachment, uploadFile, uploadImage, uploadNewFiles, upsertAttachments, } = useAttachments(props, state, dispatch, textareaRef);
+    const { maxFilesLeft, numberOfUploads, removeAttachments, uploadAttachment, uploadNewFiles, upsertAttachments, } = useAttachments(props, state, dispatch, textareaRef);
     const { handleSubmit } = useSubmitHandler(props, state, dispatch, numberOfUploads, enrichURLsController);
     const recordingController = useMediaRecorder({
         asyncMessagesMultiSendEnabled,
@@ -289,15 +188,11 @@ export const useMessageInputState = (props) => {
         openMentionsList,
         recordingController,
         removeAttachments,
-        removeFile,
-        removeImage,
         setText,
         showCommandsList,
         showMentionsList,
         textareaRef,
         uploadAttachment,
-        uploadFile,
-        uploadImage,
         uploadNewFiles,
         upsertAttachments,
     };

package/dist/components/MessageInput/hooks/usePasteHandler.js

@@ -36,8 +36,6 @@ export const usePasteHandler = (uploadNewFiles, insertText, isUploadEnabled, fin
                 findAndEnqueueURLsToEnrich?.flush();
             }
         })(clipboardEvent);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [insertText, uploadNewFiles]);
+    }, [findAndEnqueueURLsToEnrich, insertText, isUploadEnabled, uploadNewFiles]);
     return { onPaste };
 };

package/dist/components/MessageInput/hooks/useSubmitHandler.js

@@ -3,16 +3,9 @@ import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
 import { LinkPreviewState } from '../types';
-const getAttachmentTypeFromMime = (mime) => {
-    if (mime.includes('video/'))
-        return 'video';
-    if (mime.includes('audio/'))
-        return 'audio';
-    return 'file';
-};
 export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrichURLsController) => {
     const { clearEditingState, message, overrideSubmitHandler, parent, publishTypingEvent } = props;
-    const { attachments, fileOrder, fileUploads, imageOrder, imageUploads, linkPreviews, mentioned_users, text, } = state;
+    const { attachments, linkPreviews, mentioned_users, text } = state;
     const { cancelURLEnrichment, findAndEnqueueURLsToEnrich } = enrichURLsController;
     const { channel } = useChannelStateContext('useSubmitHandler');
     const { addNotification, editMessage, sendMessage } = useChannelActionContext('useSubmitHandler');
@@ -25,47 +18,6 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
         }
         textReference.current.hasChanged = text !== textReference.current.initialText;
     }, [text]);
-    const getAttachmentsFromUploads = () => {
-        const imageAttachments = imageOrder
-            .map((id) => imageUploads[id])
-            .filter((upload) => upload.state !== 'failed')
-            .filter(({ id, url }, _, self) => self.every((upload) => upload.id === id || upload.url !== url))
-            .filter((upload) => {
-            // keep the OG attachments in case the text has not changed as the BE
-            // won't re-enrich the message when only attachments have changed
-            if (!textReference.current.hasChanged)
-                return true;
-            return !upload.og_scrape_url;
-        })
-            .map(({ file: { name }, url, ...rest }) => ({
-            author_name: rest.author_name,
-            fallback: name,
-            image_url: url,
-            og_scrape_url: rest.og_scrape_url,
-            text: rest.text,
-            title: rest.title,
-            title_link: rest.title_link,
-            type: 'image',
-        }));
-        const fileAttachments = fileOrder
-            .map((id) => fileUploads[id])
-            .filter((upload) => upload.state !== 'failed')
-            .map((upload) => ({
-            asset_url: upload.url,
-            file_size: upload.file.size,
-            mime_type: upload.file.type,
-            thumb_url: upload.thumb_url,
-            title: upload.file.name,
-            type: getAttachmentTypeFromMime(upload.file.type || ''),
-        }));
-        const otherAttachments = attachments
-            .filter((att) => att.localMetadata?.uploadState !== 'failed')
-            .map((localAttachment) => {
-            const { localMetadata: _, ...attachment } = localAttachment;
-            return attachment;
-        });
-        return [...otherAttachments, ...imageAttachments, ...fileAttachments];
-    };
     const handleSubmit = async (event, customMessageData, options) => {
         event?.preventDefault();
         const trimmedMessage = text.trim();
@@ -79,31 +31,35 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
             trimmedMessage === '****';
         if (isEmptyMessage && numberOfUploads === 0 && attachments.length === 0)
             return;
-        // the channel component handles the actual sending of the message
-        const someAttachmentsUploading = Object.values(imageUploads).some((upload) => upload.state === 'uploading') ||
-            Object.values(fileUploads).some((upload) => upload.state === 'uploading') ||
-            attachments.some((att) => att.localMetadata?.uploadState === 'uploading');
+        const someAttachmentsUploading = attachments.some((att) => att.localMetadata?.uploadState === 'uploading');
         if (someAttachmentsUploading) {
             return addNotification(t('Wait until all attachments have uploaded'), 'error');
         }
-        let attachmentsFromUploads = getAttachmentsFromUploads();
+        const attachmentsFromUploads = attachments
+            .filter((att) => att.localMetadata?.uploadState !== 'failed' ||
+            (findAndEnqueueURLsToEnrich && !att.og_scrape_url))
+            .map((localAttachment) => {
+            const { localMetadata: _, ...attachment } = localAttachment;
+            return attachment;
+        });
+        const sendOptions = { ...options };
         let attachmentsFromLinkPreviews = [];
-        let someLinkPreviewsLoading;
-        let someLinkPreviewsDismissed;
         if (findAndEnqueueURLsToEnrich) {
-            // filter out all the attachments scraped before the message was edited - only if the scr
-            attachmentsFromUploads = attachmentsFromUploads.filter((attachment) => !attachment.og_scrape_url);
             // prevent showing link preview in MessageInput after the message has been sent
             cancelURLEnrichment();
-            someLinkPreviewsLoading = Array.from(linkPreviews.values()).some((linkPreview) => [LinkPreviewState.QUEUED, LinkPreviewState.LOADING].includes(linkPreview.state));
-            someLinkPreviewsDismissed = Array.from(linkPreviews.values()).some((linkPreview) => linkPreview.state === LinkPreviewState.DISMISSED);
-            if (!someLinkPreviewsLoading) {
-                attachmentsFromLinkPreviews = Array.from(linkPreviews.values())
+            const someLinkPreviewsLoading = Array.from(linkPreviews.values()).some((linkPreview) => [LinkPreviewState.QUEUED, LinkPreviewState.LOADING].includes(linkPreview.state));
+            const someLinkPreviewsDismissed = Array.from(linkPreviews.values()).some((linkPreview) => linkPreview.state === LinkPreviewState.DISMISSED);
+            attachmentsFromLinkPreviews = someLinkPreviewsLoading
+                ? []
+                : Array.from(linkPreviews.values())
                     .filter((linkPreview) => linkPreview.state === LinkPreviewState.LOADED &&
                     !attachmentsFromUploads.find((attFromUpload) => attFromUpload.og_scrape_url === linkPreview.og_scrape_url))
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     .map(({ state: linkPreviewState, ...ogAttachment }) => ogAttachment);
-            }
+            // scraped attachments are added only if all enrich queries has completed. Otherwise, the scraping has to be done server-side.
+            sendOptions.skip_enrich_url =
+                (!someLinkPreviewsLoading && attachmentsFromLinkPreviews.length > 0) ||
+                    someLinkPreviewsDismissed;
         }
         const newAttachments = [...attachmentsFromUploads, ...attachmentsFromLinkPreviews];
         // Instead of checking if a user is still mentioned every time the text changes,
@@ -115,14 +71,6 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
             mentioned_users: actualMentionedUsers,
             text,
         };
-        // scraped attachments are added only if all enrich queries has completed. Otherwise, the scraping has to be done server-side.
-        const linkPreviewsEnabled = !!findAndEnqueueURLsToEnrich;
-        const skip_enrich_url = linkPreviewsEnabled &&
-            ((!someLinkPreviewsLoading && attachmentsFromLinkPreviews.length > 0) ||
-                someLinkPreviewsDismissed);
-        const sendOptions = linkPreviewsEnabled || options
-            ? Object.assign(linkPreviewsEnabled ? { skip_enrich_url } : {}, options ?? {})
-            : undefined;
         if (message && message.type !== 'error') {
             delete message.i18n;
             try {