stream-chat-react 12.13.1 → 13.0.0-rc.1

package/dist/components/MessageInput/WithDragAndDropUpload.js

@@ -0,0 +1,96 @@
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { useDropzone } from 'react-dropzone';
+import clsx from 'clsx';
+import { useMessageInputContext, useTranslationContext } from '../../context';
+import { useAttachmentManagerState, useMessageComposer } from './hooks';
+import { useStateStore } from '../../store';
+const DragAndDropUploadContext = React.createContext({
+    subscribeToDrop: null,
+});
+export const useDragAndDropUploadContext = () => useContext(DragAndDropUploadContext);
+/**
+ * @private This hook should be used only once directly in the `MessageInputProvider` to
+ * register `uploadNewFiles` functions of the rendered `MessageInputs`. Each `MessageInput`
+ * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`
+ * component.
+ */
+export const useRegisterDropHandlers = () => {
+    const { subscribeToDrop } = useDragAndDropUploadContext();
+    const messageComposer = useMessageComposer();
+    useEffect(() => {
+        const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);
+        return unsubscribe;
+    }, [subscribeToDrop, messageComposer]);
+};
+const attachmentManagerConfigStateSelector = (state) => ({
+    acceptedFiles: state.attachments.acceptedFiles,
+    multipleUploads: state.attachments.maxNumberOfFilesPerMessage > 1,
+});
+/**
+ * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.
+ *
+ * @example
+ * ```tsx
+ * <Channel>
+ *  <WithDragAndDropUpload component="section" className="message-list-dnd-wrapper">
+ *    <Window>
+ *      <MessageList />
+ *      <MessageInput />
+ *    </Window>
+ *  </WithDragAndDropUpload>
+ *  <Thread />
+ * <Channel>
+ * ```
+ */
+export const WithDragAndDropUpload = ({ children, className, component: Component = 'div', style, }) => {
+    const dropHandlersRef = useRef(new Set());
+    const { t } = useTranslationContext();
+    const messageInputContext = useMessageInputContext();
+    const dragAndDropUploadContext = useDragAndDropUploadContext();
+    const messageComposer = useMessageComposer();
+    const { isUploadEnabled } = useAttachmentManagerState();
+    const { acceptedFiles, multipleUploads } = useStateStore(messageComposer.configState, attachmentManagerConfigStateSelector);
+    // if message input context is available, there's no need to use the queue
+    const isWithinMessageInputContext = Object.keys(messageInputContext).length > 0;
+    const accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
+        mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
+        return mediaTypeMap;
+    }, {}), [acceptedFiles]);
+    const subscribeToDrop = useCallback((fn) => {
+        dropHandlersRef.current.add(fn);
+        return () => {
+            dropHandlersRef.current.delete(fn);
+        };
+    }, []);
+    const handleDrop = useCallback((files) => {
+        dropHandlersRef.current.forEach((fn) => fn(files));
+    }, []);
+    const { getRootProps, isDragActive, isDragReject } = useDropzone({
+        accept,
+        // apply `disabled` rules if available, otherwise allow anything and
+        // let the `uploadNewFiles` handle the limitations internally
+        disabled: isWithinMessageInputContext
+            ? !isUploadEnabled || (messageInputContext.cooldownRemaining ?? 0) > 0
+            : false,
+        multiple: multipleUploads,
+        noClick: true,
+        onDrop: isWithinMessageInputContext
+            ? messageComposer.attachmentManager.uploadFiles
+            : handleDrop,
+    });
+    // nested WithDragAndDropUpload components render wrappers without functionality
+    // (MessageInputFlat has a default WithDragAndDropUpload)
+    if (dragAndDropUploadContext.subscribeToDrop !== null) {
+        return React.createElement(Component, { className: className }, children);
+    }
+    return (React.createElement(DragAndDropUploadContext.Provider, { value: {
+            subscribeToDrop,
+        } },
+        React.createElement(Component, { ...getRootProps({ className, style }) },
+            isDragActive && (React.createElement("div", { className: clsx('str-chat__dropzone-container', {
+                    'str-chat__dropzone-container--not-accepted': isDragReject,
+                }) },
+                !isDragReject && React.createElement("p", null, t('Drag your files here')),
+                isDragReject && React.createElement("p", null, t('Some of the files will not be accepted')))),
+            children)));
+};

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

@@ -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/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>;
 };