stream-chat-react 12.15.0 → 13.0.0-rc.2

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

@@ -1,2 +1,6 @@
+export * from './useAttachmentManagerState';
+export * from './useCanCreatePoll';
 export * from './useCooldownTimer';
-export * from './useMessageInputState';
+export * from './useMessageInputControls';
+export * from './useMessageComposer';
+export * from './useMessageComposerHasSendableData';

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

@@ -0,0 +1,10 @@
+export declare const useAttachmentManagerState: () => {
+    attachments: import("stream-chat").LocalAttachment[];
+    availableUploadSlots: number;
+    blockedUploadsCount: number;
+    failedUploadsCount: number;
+    isUploadEnabled: boolean;
+    pendingUploadsCount: number;
+    successfulUploadsCount: number;
+    uploadsInProgressCount: number;
+};

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

@@ -0,0 +1,19 @@
+import { useMessageComposer } from './useMessageComposer';
+import { useStateStore } from '../../../store';
+const stateSelector = (state) => ({
+    attachments: state.attachments,
+});
+export const useAttachmentManagerState = () => {
+    const { attachmentManager } = useMessageComposer();
+    const { attachments } = useStateStore(attachmentManager.state, stateSelector);
+    return {
+        attachments,
+        availableUploadSlots: attachmentManager.availableUploadSlots,
+        blockedUploadsCount: attachmentManager.blockedUploadsCount,
+        failedUploadsCount: attachmentManager.failedUploadsCount,
+        isUploadEnabled: attachmentManager.isUploadEnabled,
+        pendingUploadsCount: attachmentManager.pendingUploadsCount,
+        successfulUploadsCount: attachmentManager.successfulUploadsCount,
+        uploadsInProgressCount: attachmentManager.uploadsInProgressCount,
+    };
+};

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

@@ -0,0 +1 @@
+export declare const useCanCreatePoll: () => boolean;

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

@@ -0,0 +1,10 @@
+import { useMessageComposer } from './useMessageComposer';
+import { useEffect, useState } from 'react';
+export const useCanCreatePoll = () => {
+    const { pollComposer } = useMessageComposer();
+    const [canCreatePoll, setCanCreatePoll] = useState(pollComposer.canCreatePoll);
+    useEffect(() => pollComposer.state.subscribe(() => {
+        setCanCreatePoll(pollComposer.canCreatePoll);
+    }), [pollComposer]);
+    return canCreatePoll;
+};

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

@@ -1,8 +1,7 @@
-import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type React from 'react';
 export type CooldownTimerState = {
     cooldownInterval: number;
     setCooldownRemaining: React.Dispatch<React.SetStateAction<number | undefined>>;
     cooldownRemaining?: number;
 };
-export declare const useCooldownTimer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => CooldownTimerState;
+export declare const useCooldownTimer: () => CooldownTimerState;

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

@@ -1,3 +1,2 @@
 import type { MessageInputContextValue } from '../../../context/MessageInputContext';
-import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useCreateMessageInputContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(value: MessageInputContextValue<StreamChatGenerics, V>) => MessageInputContextValue<StreamChatGenerics, V>;
+export declare const useCreateMessageInputContext: (value: MessageInputContextValue) => MessageInputContextValue;

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

@@ -1,97 +1,43 @@
 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, findAndEnqueueURLsToEnrich, focus, grow, handleChange, handleSubmit, hideSendButton, insertText, isThreadInput, 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 linkPreviewsValue = Array.from(linkPreviews.values()).join();
-    const mentionedUsersLength = mentioned_users.length;
+    const { additionalTextareaProps, asyncMessagesMultiSendEnabled, audioRecordingEnabled, clearEditingState, cooldownInterval, cooldownRemaining, emojiSearchIndex, focus, grow, handleSubmit, hideSendButton, insertText, isThreadInput, maxRows, minRows, onPaste, parent, recordingController, setCooldownRemaining, shouldSubmit, textareaRef, } = value;
     const parentId = parent?.id;
     const messageInputContext = useMemo(() => ({
         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,
         isThreadInput,
-        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,
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
         asyncMessagesMultiSendEnabled,
-        attachments,
         audioRecordingEnabled,
-        cancelURLEnrichment,
         cooldownInterval,
         cooldownRemaining,
-        dismissLinkPreview,
-        editing,
         emojiSearchIndex,
-        findAndEnqueueURLsToEnrich,
         handleSubmit,
         hideSendButton,
-        isUploadEnabled,
         isThreadInput,
-        linkPreviewsValue,
-        mentionedUsersLength,
         minRows,
         parentId,
-        publishTypingEvent,
         recordingController,
-        removeAttachments,
-        showCommandsList,
-        showMentionsList,
-        text,
-        uploadAttachment,
-        upsertAttachments,
     ]);
     return messageInputContext;
 };

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

@@ -0,0 +1,2 @@
+import { MessageComposer } from 'stream-chat';
+export declare const useMessageComposer: () => MessageComposer;

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

@@ -0,0 +1,80 @@
+import { useEffect, useMemo } from 'react';
+import { FixedSizeQueueCache, MessageComposer } from 'stream-chat';
+import { useThreadContext } from '../../Threads';
+import { useChannelStateContext, useChatContext, useMessageContext, } from '../../../context';
+import { useLegacyThreadContext } from '../../Thread';
+const queueCache = new FixedSizeQueueCache(64);
+export const useMessageComposer = () => {
+    const { client } = useChatContext();
+    const { channel } = useChannelStateContext();
+    const { editing, message: editedMessage } = useMessageContext();
+    // legacy thread will receive new composer
+    const { legacyThread: parentMessage } = useLegacyThreadContext();
+    const threadInstance = useThreadContext();
+    const cachedEditedMessage = useMemo(() => {
+        if (!editedMessage)
+            return undefined;
+        return editedMessage;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editedMessage?.id]);
+    const cachedParentMessage = useMemo(() => {
+        if (!parentMessage)
+            return undefined;
+        return parentMessage;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [parentMessage?.id]);
+    // composer hierarchy
+    // edited message (always new) -> thread instance (own) -> thread message (always new) -> channel (own)
+    // editedMessage ?? thread ?? parentMessage ?? channel;
+    const messageComposer = useMemo(() => {
+        if (editing && cachedEditedMessage) {
+            const tag = MessageComposer.constructTag(cachedEditedMessage);
+            const cachedComposer = queueCache.get(tag);
+            if (cachedComposer)
+                return cachedComposer;
+            return new MessageComposer({
+                client,
+                composition: cachedEditedMessage,
+                compositionContext: cachedEditedMessage,
+            });
+        }
+        else if (threadInstance) {
+            return threadInstance.messageComposer;
+        }
+        else if (cachedParentMessage) {
+            const compositionContext = {
+                ...cachedParentMessage,
+                legacyThreadId: cachedParentMessage.id,
+            };
+            const tag = MessageComposer.constructTag(compositionContext);
+            const cachedComposer = queueCache.get(tag);
+            if (cachedComposer)
+                return cachedComposer;
+            return new MessageComposer({
+                client,
+                compositionContext,
+            });
+        }
+        else {
+            return channel.messageComposer;
+        }
+    }, [
+        cachedEditedMessage,
+        cachedParentMessage,
+        channel,
+        client,
+        editing,
+        threadInstance,
+    ]);
+    if (['legacy_thread', 'message'].includes(messageComposer.contextType) &&
+        !queueCache.peek(messageComposer.tag)) {
+        queueCache.add(messageComposer.tag, messageComposer);
+    }
+    useEffect(() => {
+        const unsubscribe = messageComposer.registerSubscriptions();
+        return () => {
+            unsubscribe();
+        };
+    }, [messageComposer]);
+    return messageComposer;
+};

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

@@ -0,0 +1 @@
+export declare const useMessageComposerHasSendableData: () => boolean;

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

@@ -0,0 +1,8 @@
+import { useMessageComposer } from './useMessageComposer';
+import { useStateStore } from '../../../store';
+const editingAuditStateStateSelector = (state) => state;
+export const useMessageComposerHasSendableData = () => {
+    const messageComposer = useMessageComposer();
+    useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector);
+    return messageComposer.hasSendableData;
+};

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

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { RecordingController } from '../../MediaRecorder/hooks/useMediaRecorder';
+import type { UpdatedMessage } from 'stream-chat';
+import type { MessageInputProps } from '../MessageInput';
+export type MessageInputHookProps = {
+    handleSubmit: (event?: React.BaseSyntheticEvent, customMessageData?: Omit<UpdatedMessage, 'mentioned_users'>) => void;
+    insertText: (textToInsert: string) => void;
+    onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+    recordingController: RecordingController;
+    textareaRef: React.MutableRefObject<HTMLTextAreaElement | null | undefined>;
+};
+export declare const useMessageInputControls: (props: MessageInputProps) => MessageInputHookProps;

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

@@ -0,0 +1,23 @@
+import { useMessageInputText } from './useMessageInputText';
+import { useSubmitHandler } from './useSubmitHandler';
+import { usePasteHandler } from './usePasteHandler';
+import { useMediaRecorder } from '../../MediaRecorder/hooks/useMediaRecorder';
+export const useMessageInputControls = (props) => {
+    const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } = props;
+    const { insertText, textareaRef } = useMessageInputText(props);
+    const { handleSubmit } = useSubmitHandler(props);
+    const recordingController = useMediaRecorder({
+        asyncMessagesMultiSendEnabled,
+        enabled: !!audioRecordingEnabled,
+        handleSubmit,
+        recordingConfig: audioRecordingConfig,
+    });
+    const { onPaste } = usePasteHandler(insertText);
+    return {
+        handleSubmit,
+        insertText,
+        onPaste,
+        recordingController,
+        textareaRef,
+    };
+};

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

@@ -1,10 +1,6 @@
 /// <reference types="react" />
-import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
 import type { MessageInputProps } from '../MessageInput';
-import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/types';
-import type { EnrichURLsController } from './useLinkPreviews';
-export declare const useMessageInputText: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: MessageInputProps<StreamChatGenerics, V>, state: MessageInputState<StreamChatGenerics>, dispatch: React.Dispatch<MessageInputReducerAction<StreamChatGenerics>>, findAndEnqueueURLsToEnrich?: EnrichURLsController['findAndEnqueueURLsToEnrich']) => {
-    handleChange: import("react").ChangeEventHandler<HTMLTextAreaElement>;
+export declare const useMessageInputText: (props: MessageInputProps) => {
     insertText: (textToInsert: string) => void;
     textareaRef: import("react").RefObject<HTMLTextAreaElement | undefined>;
 };

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

@@ -1,11 +1,14 @@
 import { useCallback, useEffect, useRef } from 'react';
-import { logChatPromiseExecution } from 'stream-chat';
-import { useChannelStateContext } from '../../../context/ChannelStateContext';
-export const useMessageInputText = (props, state, dispatch, findAndEnqueueURLsToEnrich) => {
-    const { channel } = useChannelStateContext('useMessageInputText');
-    const { additionalTextareaProps, focus, parent, publishTypingEvent = true } = props;
-    const { text } = state;
+import { useMessageComposer } from './useMessageComposer';
+import { useStateStore } from '../../../store';
+const messageComposerStateSelector = (state) => ({
+    text: state.text,
+});
+export const useMessageInputText = (props) => {
+    const { focus } = props;
+    const messageComposer = useMessageComposer();
     const textareaRef = useRef(undefined);
+    const { text } = useStateStore(messageComposer.textComposer.state, messageComposerStateSelector);
     // Focus
     useEffect(() => {
         if (focus && textareaRef.current) {
@@ -15,36 +18,17 @@ export const useMessageInputText = (props, state, dispatch, findAndEnqueueURLsTo
     // Text + cursor position
     const newCursorPosition = useRef(undefined);
     const insertText = useCallback((textToInsert) => {
-        const { maxLength } = additionalTextareaProps || {};
-        if (!textareaRef.current) {
-            return dispatch({
-                getNewText: (text) => {
-                    const updatedText = text + textToInsert;
-                    if (maxLength && updatedText.length > maxLength) {
-                        return updatedText.slice(0, maxLength);
-                    }
-                    return updatedText;
-                },
-                type: 'setText',
-            });
-        }
-        const { selectionEnd, selectionStart } = textareaRef.current;
-        newCursorPosition.current = selectionStart + textToInsert.length;
-        dispatch({
-            getNewText: (prevText) => {
-                const updatedText = prevText.slice(0, selectionStart) +
-                    textToInsert +
-                    prevText.slice(selectionEnd);
-                if (maxLength && updatedText.length > maxLength) {
-                    return updatedText.slice(0, maxLength);
-                }
-                return updatedText;
-            },
-            type: 'setText',
+        const selection = textareaRef?.current && {
+            end: textareaRef.current.selectionEnd,
+            start: textareaRef.current.selectionStart,
+        };
+        messageComposer.textComposer.insertText({
+            selection,
+            text: textToInsert,
         });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [additionalTextareaProps, newCursorPosition, textareaRef]);
+        if (selection)
+            newCursorPosition.current = selection.start + textToInsert.length;
+    }, [messageComposer, newCursorPosition, textareaRef]);
     useEffect(() => {
         const textareaElement = textareaRef.current;
         if (textareaElement && newCursorPosition.current !== undefined) {
@@ -53,25 +37,7 @@ export const useMessageInputText = (props, state, dispatch, findAndEnqueueURLsTo
             newCursorPosition.current = undefined;
         }
     }, [text, newCursorPosition]);
-    const handleChange = useCallback((event) => {
-        event.preventDefault();
-        if (!event || !event.target) {
-            return;
-        }
-        const newText = event.target.value;
-        dispatch({
-            getNewText: () => newText,
-            type: 'setText',
-        });
-        findAndEnqueueURLsToEnrich?.(newText);
-        if (publishTypingEvent && newText && channel) {
-            logChatPromiseExecution(channel.keystroke(parent?.id), 'start typing event');
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [channel, findAndEnqueueURLsToEnrich, parent, publishTypingEvent]);
     return {
-        handleChange,
         insertText,
         textareaRef,
     };

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

@@ -1,5 +1,3 @@
-import { FileLike } from '../../ReactFileUtilities';
-import type { EnrichURLsController } from './useLinkPreviews';
-export declare const usePasteHandler: (uploadNewFiles: (files: FileList | FileLike[] | File[]) => void, insertText: (textToInsert: string) => void, isUploadEnabled: boolean, findAndEnqueueURLsToEnrich?: EnrichURLsController['findAndEnqueueURLsToEnrich']) => {
+export declare const usePasteHandler: (insertText: (textToInsert: string) => void) => {
     onPaste: (clipboardEvent: React.ClipboardEvent<HTMLTextAreaElement>) => void;
 };

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

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
+import { useMessageComposer } from './useMessageComposer';
 import { dataTransferItemsToFiles } from '../../ReactFileUtilities';
-import { SetLinkPreviewMode } from '../types';
-export const usePasteHandler = (uploadNewFiles, insertText, isUploadEnabled, findAndEnqueueURLsToEnrich) => {
+export const usePasteHandler = (insertText) => {
+    const { attachmentManager } = useMessageComposer();
     const onPaste = useCallback((clipboardEvent) => {
         (async (event) => {
             const { items } = event.clipboardData;
@@ -25,14 +26,11 @@ export const usePasteHandler = (uploadNewFiles, insertText, isUploadEnabled, fin
             if (plainTextPromise) {
                 const pastedText = await plainTextPromise;
                 insertText(pastedText);
-                findAndEnqueueURLsToEnrich?.(pastedText, SetLinkPreviewMode.UPSERT);
-                findAndEnqueueURLsToEnrich?.flush();
             }
-            else if (fileLikes.length && isUploadEnabled) {
-                uploadNewFiles(fileLikes);
-                return;
+            else {
+                attachmentManager.uploadFiles(fileLikes);
             }
         })(clipboardEvent);
-    }, [findAndEnqueueURLsToEnrich, insertText, isUploadEnabled, uploadNewFiles]);
+    }, [attachmentManager, insertText]);
     return { onPaste };
 };

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

@@ -1,8 +1,4 @@
-import type { Message } from 'stream-chat';
-import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
 import type { MessageInputProps } from '../MessageInput';
-import type { CustomTrigger, DefaultStreamChatGenerics, SendMessageOptions } from '../../../types/types';
-import type { EnrichURLsController } from './useLinkPreviews';
-export declare const useSubmitHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: MessageInputProps<StreamChatGenerics, V>, state: MessageInputState<StreamChatGenerics>, dispatch: React.Dispatch<MessageInputReducerAction<StreamChatGenerics>>, numberOfUploads: number, enrichURLsController: EnrichURLsController) => {
-    handleSubmit: (event?: React.BaseSyntheticEvent, customMessageData?: Partial<Message<StreamChatGenerics>>, options?: SendMessageOptions) => Promise<void>;
+export declare const useSubmitHandler: (props: MessageInputProps) => {
+    handleSubmit: (event?: React.BaseSyntheticEvent) => Promise<void>;
 };

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

@@ -1,91 +1,22 @@
-import { useEffect, useRef } from 'react';
+import { useCallback } from 'react';
+import { useMessageComposer } from './useMessageComposer';
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
-import { useChannelStateContext } from '../../../context/ChannelStateContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
-import { LinkPreviewState } from '../types';
-export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrichURLsController) => {
-    const { clearEditingState, message, overrideSubmitHandler, parent, publishTypingEvent, } = props;
-    const { attachments, linkPreviews, mentioned_users, text } = state;
-    const { cancelURLEnrichment, findAndEnqueueURLsToEnrich } = enrichURLsController;
-    const { channel } = useChannelStateContext('useSubmitHandler');
+export const useSubmitHandler = (props) => {
+    const { clearEditingState, overrideSubmitHandler } = props;
     const { addNotification, editMessage, sendMessage } = useChannelActionContext('useSubmitHandler');
     const { t } = useTranslationContext('useSubmitHandler');
-    const textReference = useRef({ hasChanged: false, initialText: text });
-    useEffect(() => {
-        if (!textReference.current.initialText.length) {
-            textReference.current.initialText = text;
-            return;
-        }
-        textReference.current.hasChanged = text !== textReference.current.initialText;
-    }, [text]);
-    const handleSubmit = async (event, customMessageData, options) => {
+    const messageComposer = useMessageComposer();
+    const handleSubmit = useCallback(async (event) => {
         event?.preventDefault();
-        const trimmedMessage = text.trim();
-        const isEmptyMessage = trimmedMessage === '' ||
-            trimmedMessage === '>' ||
-            trimmedMessage === '``````' ||
-            trimmedMessage === '``' ||
-            trimmedMessage === '**' ||
-            trimmedMessage === '____' ||
-            trimmedMessage === '__' ||
-            trimmedMessage === '****';
-        if (isEmptyMessage &&
-            numberOfUploads === 0 &&
-            attachments.length === 0 &&
-            !customMessageData?.poll_id)
+        const composition = await messageComposer.compose();
+        if (!composition || !composition.message)
             return;
-        const someAttachmentsUploading = attachments.some((att) => att.localMetadata?.uploadState === 'uploading');
-        if (someAttachmentsUploading) {
-            return addNotification(t('Wait until all attachments have uploaded'), 'error');
-        }
-        const attachmentsFromUploads = attachments
-            .filter((att) => att.localMetadata?.uploadState !== 'failed' ||
-            (findAndEnqueueURLsToEnrich && !att.og_scrape_url))
-            .map((localAttachment) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { localMetadata: _, ...attachment } = localAttachment;
-            return attachment;
-        });
-        const sendOptions = { ...options };
-        let attachmentsFromLinkPreviews = [];
-        if (findAndEnqueueURLsToEnrich) {
-            // prevent showing link preview in MessageInput after the message has been sent
-            cancelURLEnrichment();
-            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))
-                    .map(
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                ({ 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,
-        // just filter out non-mentioned users before submit, which is cheaper
-        // and allows users to easily undo any accidental deletion
-        const actualMentionedUsers = Array.from(new Set(mentioned_users.filter(({ id, name }) => text.includes(`@${id}`) || text.includes(`@${name}`))));
-        const updatedMessage = {
-            attachments: newAttachments,
-            mentioned_users: actualMentionedUsers,
-            text,
-        };
-        if (message && message.type !== 'error') {
-            delete message.i18n;
+        const { localMessage, message, sendOptions } = composition;
+        if (messageComposer.editedMessage && localMessage.type !== 'error') {
             try {
-                await editMessage({
-                    ...message,
-                    ...updatedMessage,
-                    ...customMessageData,
-                }, sendOptions);
+                await editMessage(localMessage, sendOptions);
                 clearEditingState?.();
-                dispatch({ type: 'clear' });
             }
             catch (err) {
                 addNotification(t('Edit message request failed'), 'error');
@@ -93,33 +24,34 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
         }
         else {
             try {
-                dispatch({ type: 'clear' });
+                // todo: get rid of overrideSubmitHandler once MessageComposer supports submission flow
                 if (overrideSubmitHandler) {
                     await overrideSubmitHandler({
-                        ...updatedMessage,
-                        parent,
-                    }, channel.cid, customMessageData, sendOptions);
+                        cid: messageComposer.channel.cid,
+                        localMessage,
+                        message,
+                        sendOptions,
+                    });
                 }
                 else {
-                    await sendMessage({
-                        ...updatedMessage,
-                        parent,
-                    }, customMessageData, sendOptions);
+                    await sendMessage({ localMessage, message, options: sendOptions });
                 }
-                if (publishTypingEvent)
-                    await channel.stopTyping();
+                messageComposer.clear();
+                if (messageComposer.config.text.publishTypingEvents)
+                    await messageComposer.channel.stopTyping();
             }
             catch (err) {
-                dispatch({
-                    getNewText: () => text,
-                    type: 'setText',
-                });
-                actualMentionedUsers?.forEach((user) => {
-                    dispatch({ type: 'addMentionedUser', user });
-                });
                 addNotification(t('Send message request failed'), 'error');
             }
         }
-    };
+    }, [
+        addNotification,
+        clearEditingState,
+        editMessage,
+        messageComposer,
+        overrideSubmitHandler,
+        sendMessage,
+        t,
+    ]);
     return { handleSubmit };
 };