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

package/dist/components/MessageInput/EditMessageForm.js

@@ -1,20 +1,44 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { MessageInput } from './MessageInput';
 import { MessageInputFlat } from './MessageInputFlat';
-import { useMessageInputContext, useTranslationContext } from '../../context';
+import { Modal } from '../Modal';
+import { useComponentContext, useMessageContext, useMessageInputContext, useTranslationContext, } from '../../context';
+import { useMessageComposer, useMessageComposerHasSendableData } from './hooks';
+const EditMessageFormSendButton = () => {
+    const { t } = useTranslationContext();
+    const hasSendableData = useMessageComposerHasSendableData();
+    return (React.createElement("button", { className: 'str-chat__edit-message-send', "data-testid": 'send-button-edit-form', disabled: !hasSendableData, type: 'submit' }, t('Send')));
+};
 export const EditMessageForm = () => {
     const { t } = useTranslationContext('EditMessageForm');
+    const messageComposer = useMessageComposer();
     const { clearEditingState, handleSubmit } = useMessageInputContext('EditMessageForm');
+    const cancel = useCallback(() => {
+        clearEditingState?.();
+        messageComposer.restore();
+    }, [clearEditingState, messageComposer]);
     useEffect(() => {
         const onKeyDown = (event) => {
             if (event.key === 'Escape')
-                clearEditingState?.();
+                cancel();
         };
         document.addEventListener('keydown', onKeyDown);
         return () => document.removeEventListener('keydown', onKeyDown);
-    }, [clearEditingState]);
+    }, [cancel]);
     return (React.createElement("form", { autoComplete: 'off', className: 'str-chat__edit-message-form', onSubmit: handleSubmit },
         React.createElement(MessageInputFlat, null),
         React.createElement("div", { className: 'str-chat__edit-message-form-options' },
-            React.createElement("button", { className: 'str-chat__edit-message-cancel', "data-testid": 'cancel-button', onClick: clearEditingState }, t('Cancel')),
-            React.createElement("button", { className: 'str-chat__edit-message-send', "data-testid": 'send-button-edit-form', type: 'submit' }, t('Send')))));
+            React.createElement("button", { className: 'str-chat__edit-message-cancel', "data-testid": 'cancel-button', onClick: cancel }, t('Cancel')),
+            React.createElement(EditMessageFormSendButton, null))));
+};
+export const EditMessageModal = ({ additionalMessageInputProps, }) => {
+    const { EditMessageInput = EditMessageForm } = useComponentContext();
+    const { clearEditingState } = useMessageContext();
+    const messageComposer = useMessageComposer();
+    const onEditModalClose = useCallback(() => {
+        clearEditingState();
+        messageComposer.restore();
+    }, [clearEditingState, messageComposer]);
+    return (React.createElement(Modal, { className: 'str-chat__edit-message-modal', onClose: onEditModalClose, open: true },
+        React.createElement(MessageInput, { clearEditingState: clearEditingState, grow: true, hideSendButton: true, Input: EditMessageInput, ...additionalMessageInputProps })));
 };

package/dist/components/MessageInput/LinkPreviewList.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
-import type { LinkPreview } from './types';
-export type LinkPreviewListProps = {
-    linkPreviews: LinkPreview[];
+import type { LinkPreview } from 'stream-chat';
+export declare const LinkPreviewList: () => React.JSX.Element | null;
+type LinkPreviewProps = {
+    linkPreview: LinkPreview;
 };
-export declare const LinkPreviewList: ({ linkPreviews }: LinkPreviewListProps) => React.JSX.Element | null;
+export declare const LinkPreviewCard: ({ linkPreview }: LinkPreviewProps) => React.JSX.Element | null;
+export {};

package/dist/components/MessageInput/LinkPreviewList.js

@@ -1,23 +1,37 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
-import { useChannelStateContext, useMessageInputContext } from '../../context';
-import { LinkPreviewState } from './types';
-import { CloseIcon, LinkIcon } from './icons';
+import { LinkPreviewsManager } from 'stream-chat';
+import { useStateStore } from '../../store';
 import { PopperTooltip } from '../Tooltip';
 import { useEnterLeaveHandlers } from '../Tooltip/hooks';
-export const LinkPreviewList = ({ linkPreviews }) => {
-    const { quotedMessage } = useChannelStateContext();
+import { useMessageComposer } from './hooks';
+import { CloseIcon, LinkIcon } from './icons';
+const linkPreviewsManagerStateSelector = (state) => ({
+    linkPreviews: Array.from(state.previews.values()).filter((preview) => LinkPreviewsManager.previewIsLoaded(preview) ||
+        LinkPreviewsManager.previewIsLoading(preview)),
+});
+const messageComposerStateSelector = (state) => ({
+    quotedMessage: state.quotedMessage,
+});
+export const LinkPreviewList = () => {
+    const messageComposer = useMessageComposer();
+    const { linkPreviewsManager } = messageComposer;
+    const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
+    const { linkPreviews } = useStateStore(linkPreviewsManager.state, linkPreviewsManagerStateSelector);
     const showLinkPreviews = linkPreviews.length > 0 && !quotedMessage;
     if (!showLinkPreviews)
         return null;
-    return (React.createElement("div", { className: 'str-chat__link-preview-list' }, Array.from(linkPreviews.values()).map((linkPreview) => linkPreview.state === LinkPreviewState.LOADED ? (React.createElement(LinkPreviewCard, { key: linkPreview.og_scrape_url, linkPreview: linkPreview })) : null)));
+    return (React.createElement("div", { className: 'str-chat__link-preview-list' }, linkPreviews.map((linkPreview) => (React.createElement(LinkPreviewCard, { key: linkPreview.og_scrape_url, linkPreview: linkPreview })))));
 };
-const LinkPreviewCard = ({ linkPreview }) => {
-    const { dismissLinkPreview } = useMessageInputContext();
+export const LinkPreviewCard = ({ linkPreview }) => {
+    const { linkPreviewsManager } = useMessageComposer();
     const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
     const [referenceElement, setReferenceElement] = useState(null);
+    if (!LinkPreviewsManager.previewIsLoaded(linkPreview) &&
+        !LinkPreviewsManager.previewIsLoading(linkPreview))
+        return null;
     return (React.createElement("div", { className: clsx('str-chat__link-preview-card', {
-            'str-chat__link-preview-card--loading': linkPreview.state === LinkPreviewState.LOADING,
+            'str-chat__link-preview-card--loading': LinkPreviewsManager.previewIsLoading(linkPreview),
         }), "data-testid": 'link-preview-card' },
         React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, linkPreview.og_scrape_url),
         React.createElement("div", { className: 'str-chat__link-preview-card__icon-container', onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
@@ -25,6 +39,6 @@ const LinkPreviewCard = ({ linkPreview }) => {
         React.createElement("div", { className: 'str-chat__link-preview-card__content' },
             React.createElement("div", { className: 'str-chat__link-preview-card__content-title' }, linkPreview.title),
             React.createElement("div", { className: 'str-chat__link-preview-card__content-description' }, linkPreview.text)),
-        React.createElement("button", { className: 'str-chat__link-preview-card__dismiss-button', "data-testid": 'link-preview-card-dismiss-btn', onClick: () => dismissLinkPreview(linkPreview) },
+        React.createElement("button", { className: 'str-chat__link-preview-card__dismiss-button', "data-testid": 'link-preview-card-dismiss-btn', onClick: () => linkPreviewsManager.dismissPreview(linkPreview.og_scrape_url), type: 'button' },
             React.createElement(CloseIcon, null))));
 };

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

@@ -1,12 +1,6 @@
 import React from 'react';
-import { StreamMessage } from '../../context/ChannelStateContext';
-import { ComponentContextValue } from '../../context/ComponentContext';
-import type { Channel, Message, SendFileAPIResponse } from 'stream-chat';
-import type { BaseLocalAttachmentMetadata, LocalAttachmentUploadMetadata } from './types';
-import type { SearchQueryParams } from '../ChannelSearch/hooks/useChannelSearch';
-import type { MessageToSend } from '../../context/ChannelActionContext';
-import type { CustomTrigger, DefaultStreamChatGenerics, SendMessageOptions, UnknownType } from '../../types/types';
-import type { URLEnrichmentConfig } from './hooks/useLinkPreviews';
+import type { ComponentContextValue } from '../../context/ComponentContext';
+import type { LocalMessage, Message, SendMessageOptions } from 'stream-chat';
 import type { CustomAudioRecordingConfig } from '../MediaRecorder';
 export type EmojiSearchIndexResult = {
     id: string;
@@ -17,12 +11,16 @@ export type EmojiSearchIndexResult = {
     emoticons?: Array<string>;
     native?: string;
 };
-export interface EmojiSearchIndex<T extends UnknownType = UnknownType> {
-    search: (query: string) => PromiseLike<Array<EmojiSearchIndexResult & T>> | Array<EmojiSearchIndexResult & T> | null;
+export interface EmojiSearchIndex {
+    search: (query: string) => PromiseLike<Array<EmojiSearchIndexResult>> | Array<EmojiSearchIndexResult> | null;
 }
-export type MessageInputProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
-    /** Additional props to be passed to the underlying `AutoCompleteTextarea` component, [available props](https://www.npmjs.com/package/react-textarea-autosize) */
-    additionalTextareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export type MessageInputProps = {
+    /**
+     * Additional props to be passed to the underlying `AutoCompleteTextarea` component.
+     * Default value is handled via MessageComposer.
+     * [Available props](https://www.npmjs.com/package/react-textarea-autosize)
+     */
+    additionalTextareaProps?: Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue'>;
     /**
      * When enabled, recorded messages won’t be sent immediately.
      * Instead, they will “stack up” with other attachments in the message composer allowing the user to send multiple attachments as part of the same message.
@@ -34,64 +32,44 @@ export type MessageInputProps<StreamChatGenerics extends DefaultStreamChatGeneri
     audioRecordingEnabled?: boolean;
     /** Function to clear the editing state while editing a message */
     clearEditingState?: () => void;
-    /** If true, disables the text input */
-    disabled?: boolean;
-    /** If true, the suggestion list will not display and autocomplete @mentions. Default: false. */
-    disableMentions?: boolean;
-    /** Function to override the default file upload request */
-    doFileUploadRequest?: (file: LocalAttachmentUploadMetadata['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
-    /** Function to override the default image upload request */
-    doImageUploadRequest?: (file: LocalAttachmentUploadMetadata['file'], channel: Channel<StreamChatGenerics>) => Promise<SendFileAPIResponse>;
     /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */
     emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
-    /** Custom error handler function to be called with a file/image upload fails */
-    errorHandler?: (error: Error, type: string, file: LocalAttachmentUploadMetadata['file'] & BaseLocalAttachmentMetadata) => void;
     /** If true, focuses the text input on component mount */
     focus?: boolean;
-    /** Generates the default value for the underlying textarea element. The function's return value takes precedence before additionalTextareaProps.defaultValue. */
-    getDefaultValue?: () => string | string[];
     /** If true, expands the text input vertically for new lines */
     grow?: boolean;
     /** Allows to hide MessageInput's send button. */
     hideSendButton?: boolean;
     /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
-    Input?: React.ComponentType<MessageInputProps<StreamChatGenerics, V>>;
+    Input?: React.ComponentType<MessageInputProps>;
     /** Signals that the MessageInput is rendered in a message thread (Thread component) */
     isThreadInput?: boolean;
     /** Max number of rows the underlying `textarea` component is allowed to grow */
     maxRows?: number;
-    /** If true, the suggestion list will search all app users for an @mention, not just current channel members/watchers. Default: false. */
-    mentionAllAppUsers?: boolean;
-    /** Object containing filters/sort/options overrides for an @mention user query */
-    mentionQueryParams?: SearchQueryParams<StreamChatGenerics>['userFilters'];
-    /** If provided, the existing message will be edited on submit */
-    message?: StreamMessage<StreamChatGenerics>;
     /** Min number of rows the underlying `textarea` will start with. The `grow` on MessageInput prop has to be enabled for `minRows` to take effect. */
     minRows?: number;
-    /** If true, disables file uploads for all attachments except for those with type 'image'. Default: false */
-    noFiles?: boolean;
-    /** Function to override the default submit handler */
-    overrideSubmitHandler?: (message: MessageToSend<StreamChatGenerics>, channelCid: string, customMessageData?: Partial<Message<StreamChatGenerics>>, options?: SendMessageOptions) => Promise<void> | void;
+    /** Function to override the default message sending process. Not message updating process. */
+    overrideSubmitHandler?: (params: {
+        cid: string;
+        localMessage: LocalMessage;
+        message: Message;
+        sendOptions: SendMessageOptions;
+    }) => Promise<void> | void;
     /** When replying in a thread, the parent message object */
-    parent?: StreamMessage<StreamChatGenerics>;
-    /** If true, triggers typing events on text input keystroke */
-    publishTypingEvent?: boolean;
+    parent?: LocalMessage;
     /** If true, will use an optional dependency to support transliteration in the input for mentions, default is false. See: https://github.com/getstream/transliterate */
     /**
      * Currently, `Enter` is the default submission key and  `Shift`+`Enter` is the default combination for the new line.
      * If specified, this function overrides the default behavior specified previously.
      *
-     * Example of default behaviour:
+     * Example of default behavior:
      * ```tsx
      * const defaultShouldSubmit = (event) => event.key === "Enter" && !event.shiftKey;
      * ```
      */
-    shouldSubmit?: (event: KeyboardEvent) => boolean;
-    /** Configuration parameters for link previews. */
-    urlEnrichmentConfig?: URLEnrichmentConfig;
-    useMentionsTransliteration?: boolean;
+    shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
 };
 /**
  * A high level component that has provides all functionality to the Input it renders.
  */
-export declare const MessageInput: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(props: MessageInputProps<StreamChatGenerics, V>) => React.JSX.Element;
+export declare const MessageInput: (props: MessageInputProps) => React.JSX.Element;

package/dist/components/MessageInput/MessageInput.js

@@ -1,44 +1,51 @@
-import React from 'react';
-import { DefaultTriggerProvider } from './DefaultTriggerProvider';
+import React, { useEffect } from 'react';
 import { MessageInputFlat } from './MessageInputFlat';
+import { useMessageComposer } from './hooks';
 import { useCooldownTimer } from './hooks/useCooldownTimer';
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
-import { useMessageInputState } from './hooks/useMessageInputState';
-import { useChannelStateContext } from '../../context/ChannelStateContext';
-import { useComponentContext, } from '../../context/ComponentContext';
+import { useMessageInputControls } from './hooks/useMessageInputControls';
+import { useComponentContext } from '../../context/ComponentContext';
 import { MessageInputContextProvider } from '../../context/MessageInputContext';
 import { DialogManagerProvider } from '../../context';
 import { useRegisterDropHandlers } from './WithDragAndDropUpload';
 const MessageInputProvider = (props) => {
     const cooldownTimerState = useCooldownTimer();
-    const messageInputState = useMessageInputState(props);
+    const messageInputUiApi = useMessageInputControls(props);
     const { emojiSearchIndex } = useComponentContext('MessageInput');
     const messageInputContextValue = useCreateMessageInputContext({
         ...cooldownTimerState,
-        ...messageInputState,
+        ...messageInputUiApi,
         ...props,
         emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex,
     });
-    // @ts-expect-error generics to be removed
-    useRegisterDropHandlers(messageInputContextValue);
+    const messageComposer = useMessageComposer();
+    useEffect(() => () => {
+        messageComposer.createDraft();
+    }, [messageComposer]);
+    useEffect(() => {
+        const threadId = messageComposer.threadId;
+        if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty)
+            return;
+        // get draft data for legacy thead composer
+        messageComposer.channel.getDraft({ parent_id: threadId }).then(({ draft }) => {
+            if (draft) {
+                messageComposer.initState({ composition: draft });
+            }
+        });
+    }, [messageComposer]);
+    useRegisterDropHandlers();
     return (React.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children));
 };
 const UnMemoizedMessageInput = (props) => {
     const { Input: PropInput } = props;
-    const { dragAndDropWindow } = useChannelStateContext();
-    const { Input: ContextInput, TriggerProvider = DefaultTriggerProvider } = useComponentContext('MessageInput');
+    const { Input: ContextInput } = useComponentContext('MessageInput');
     const Input = PropInput || ContextInput || MessageInputFlat;
     const dialogManagerId = props.isThreadInput
         ? 'message-input-dialog-manager-thread'
         : 'message-input-dialog-manager';
-    if (dragAndDropWindow)
-        return (React.createElement(DialogManagerProvider, { id: dialogManagerId },
-            React.createElement(TriggerProvider, null,
-                React.createElement(Input, null))));
     return (React.createElement(DialogManagerProvider, { id: dialogManagerId },
         React.createElement(MessageInputProvider, { ...props },
-            React.createElement(TriggerProvider, null,
-                React.createElement(Input, null)))));
+            React.createElement(Input, null))));
 };
 /**
  * A high level component that has provides all functionality to the Input it renders.

package/dist/components/MessageInput/MessageInputFlat.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare const MessageInputFlat: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;
+export declare const MessageInputFlat: () => React.JSX.Element;

package/dist/components/MessageInput/MessageInputFlat.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { AttachmentSelector as DefaultAttachmentSelector, SimpleAttachmentSelector, } from './AttachmentSelector';
 import { AttachmentPreviewList as DefaultAttachmentPreviewList } from './AttachmentPreviewList';
 import { CooldownTimer as DefaultCooldownTimer } from './CooldownTimer';
@@ -7,20 +7,19 @@ import { StopAIGenerationButton as DefaultStopAIGenerationButton } from './StopA
 import { AudioRecorder as DefaultAudioRecorder, RecordingPermissionDeniedNotification as DefaultRecordingPermissionDeniedNotification, StartRecordingAudioButton as DefaultStartRecordingAudioButton, RecordingPermission, } from '../MediaRecorder';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview, QuotedMessagePreviewHeader, } from './QuotedMessagePreview';
 import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
-import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
+import { TextareaComposer } from '../TextareaComposer';
+import { AIStates, useAIState } from '../AIStateIndicator';
 import { RecordingAttachmentType } from '../MediaRecorder/classes';
 import { useChatContext } from '../../context/ChatContext';
-import { useChannelActionContext } from '../../context/ChannelActionContext';
-import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
-import { AIStates, useAIState } from '../AIStateIndicator';
+import { useAttachmentManagerState } from './hooks/useAttachmentManagerState';
+import { useMessageContext } from '../../context';
 import { WithDragAndDropUpload } from './WithDragAndDropUpload';
 export const MessageInputFlat = () => {
-    const { asyncMessagesMultiSendEnabled, attachments, cooldownRemaining, findAndEnqueueURLsToEnrich, handleSubmit, hideSendButton, isUploadEnabled, linkPreviews, message, numberOfUploads, parent, recordingController, setCooldownRemaining, text, } = useMessageInputContext('MessageInputFlat');
+    const { message } = useMessageContext();
+    const { asyncMessagesMultiSendEnabled, cooldownRemaining, handleSubmit, hideSendButton, recordingController, setCooldownRemaining, } = useMessageInputContext('MessageInputFlat');
     const { AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, AudioRecorder = DefaultAudioRecorder, CooldownTimer = DefaultCooldownTimer, EmojiPicker, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, StopAIGenerationButton: StopAIGenerationButtonOverride, } = useComponentContext('MessageInputFlat');
-    const { quotedMessage } = useChannelStateContext('MessageInputFlat');
-    const { setQuotedMessage } = useChannelActionContext('MessageInputFlat');
     const { channel } = useChatContext('MessageInputFlat');
     const { aiState } = useAIState(channel);
     const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
@@ -28,30 +27,9 @@ export const MessageInputFlat = () => {
     const closePermissionDeniedNotification = useCallback(() => {
         setShowRecordingPermissionDeniedNotification(false);
     }, []);
-    const failedUploadsCount = useMemo(() => attachments.filter((a) => a.localMetadata?.uploadState === 'failed').length, [attachments]);
-    useEffect(() => {
-        const handleQuotedMessageUpdate = (e) => {
-            if (e.message?.id !== quotedMessage?.id)
-                return;
-            if (e.type === 'message.deleted') {
-                setQuotedMessage(undefined);
-                return;
-            }
-            setQuotedMessage(e.message);
-        };
-        channel?.on('message.deleted', handleQuotedMessageUpdate);
-        channel?.on('message.updated', handleQuotedMessageUpdate);
-        return () => {
-            channel?.off('message.deleted', handleQuotedMessageUpdate);
-            channel?.off('message.updated', handleQuotedMessageUpdate);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [channel, quotedMessage]);
+    const { attachments } = useAttachmentManagerState();
     if (recordingController.recordingState)
         return React.createElement(AudioRecorder, null);
-    // TODO: "!message" condition is a temporary fix for shared
-    // state when editing a message (fix shared state issue)
-    const displayQuotedMessage = !message && quotedMessage && quotedMessage.parent_id === parent?.id;
     const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices); // account for requirement on iOS as per this bug report: https://bugs.webkit.org/show_bug.cgi?id=252303
     const isRecording = !!recordingController.recordingState;
     /**
@@ -69,21 +47,18 @@ export const MessageInputFlat = () => {
         recordingEnabled &&
             recordingController.permissionState === 'denied' &&
             showRecordingPermissionDeniedNotification && (React.createElement(RecordingPermissionDeniedNotification, { onClose: closePermissionDeniedNotification, permissionName: RecordingPermission.MIC })),
-        findAndEnqueueURLsToEnrich && (React.createElement(LinkPreviewList, { linkPreviews: Array.from(linkPreviews.values()) })),
-        displayQuotedMessage && React.createElement(QuotedMessagePreviewHeader, null),
+        React.createElement(LinkPreviewList, null),
+        React.createElement(QuotedMessagePreviewHeader, null),
         React.createElement("div", { className: 'str-chat__message-input-inner' },
             React.createElement(AttachmentSelector, null),
             React.createElement("div", { className: 'str-chat__message-textarea-container' },
-                displayQuotedMessage && React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage }),
-                isUploadEnabled &&
-                    !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && (React.createElement(AttachmentPreviewList, null)),
+                React.createElement(QuotedMessagePreview, null),
+                React.createElement(AttachmentPreviewList, null),
                 React.createElement("div", { className: 'str-chat__message-textarea-with-emoji-picker' },
-                    React.createElement(ChatAutoComplete, null),
+                    React.createElement(TextareaComposer, null),
                     EmojiPicker && React.createElement(EmojiPicker, null))),
             shouldDisplayStopAIGeneration ? (React.createElement(StopAIGenerationButton, { onClick: stopGenerating })) : (!hideSendButton && (React.createElement(React.Fragment, null, cooldownRemaining ? (React.createElement(CooldownTimer, { cooldownInterval: cooldownRemaining, setCooldownRemaining: setCooldownRemaining })) : (React.createElement(React.Fragment, null,
-                React.createElement(SendButton, { disabled: !numberOfUploads &&
-                        !text.length &&
-                        attachments.length - failedUploadsCount === 0, sendMessage: handleSubmit }),
+                React.createElement(SendButton, { sendMessage: handleSubmit }),
                 recordingEnabled && (React.createElement(StartRecordingAudioButton, { disabled: isRecording ||
                         (!asyncMessagesMultiSendEnabled &&
                             attachments.some((a) => a.type === RecordingAttachmentType.VOICE_RECORDING)), onClick: () => {

package/dist/components/MessageInput/QuotedMessagePreview.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
-import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { MessageContextValue } from '../../context';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare const QuotedMessagePreviewHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;
-export type QuotedMessagePreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    quotedMessage: StreamMessage<StreamChatGenerics>;
-    renderText?: MessageContextValue<StreamChatGenerics>['renderText'];
+export declare const QuotedMessagePreviewHeader: () => React.JSX.Element | null;
+export type QuotedMessagePreviewProps = {
+    renderText?: MessageContextValue['renderText'];
 };
-export declare const QuotedMessagePreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ quotedMessage, renderText, }: QuotedMessagePreviewProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const QuotedMessagePreview: ({ renderText, }: QuotedMessagePreviewProps) => React.JSX.Element | null;

package/dist/components/MessageInput/QuotedMessagePreview.js

@@ -4,35 +4,41 @@ import { Attachment as DefaultAttachment } from '../Attachment';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { Poll } from '../Poll';
 import { useChatContext } from '../../context/ChatContext';
-import { useChannelActionContext } from '../../context/ChannelActionContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-import { renderText as defaultRenderText } from '../Message';
+import { useStateStore } from '../../store';
+import { useMessageComposer } from './hooks';
+import { renderText as defaultRenderText } from '../Message/renderText';
+const messageComposerStateStoreSelector = (state) => ({
+    quotedMessage: state.quotedMessage,
+});
 export const QuotedMessagePreviewHeader = () => {
-    const { setQuotedMessage } = useChannelActionContext('QuotedMessagePreview');
     const { t } = useTranslationContext('QuotedMessagePreview');
+    const messageComposer = useMessageComposer();
+    const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
+    if (!quotedMessage)
+        return null;
     return (React.createElement("div", { className: 'str-chat__quoted-message-preview-header' },
         React.createElement("div", { className: 'str-chat__quoted-message-reply-to-message' }, t('Reply to Message')),
-        React.createElement("button", { "aria-label": t('aria/Cancel Reply'), className: 'str-chat__quoted-message-remove', onClick: () => setQuotedMessage(undefined) },
+        React.createElement("button", { "aria-label": t('aria/Cancel Reply'), className: 'str-chat__quoted-message-remove', onClick: () => messageComposer.setQuotedMessage(null) },
             React.createElement(CloseIcon, null))));
 };
-export const QuotedMessagePreview = ({ quotedMessage, renderText = defaultRenderText, }) => {
+export const QuotedMessagePreview = ({ renderText = defaultRenderText, }) => {
     const { client } = useChatContext();
     const { Attachment = DefaultAttachment, Avatar = DefaultAvatar } = useComponentContext('QuotedMessagePreview');
     const { userLanguage } = useTranslationContext('QuotedMessagePreview');
-    const quotedMessageText = quotedMessage.i18n?.[`${userLanguage}_text`] ||
-        quotedMessage.text;
-    const renderedText = useMemo(() => renderText(quotedMessageText, quotedMessage.mentioned_users), [quotedMessage.mentioned_users, quotedMessageText, renderText]);
-    const quotedMessageAttachment = useMemo(() => {
-        const [attachment] = quotedMessage.attachments ?? [];
-        return attachment ? [attachment] : [];
-    }, [quotedMessage.attachments]);
-    if (!quotedMessageText && !quotedMessageAttachment)
+    const messageComposer = useMessageComposer();
+    const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateStoreSelector);
+    const quotedMessageText = useMemo(() => quotedMessage?.i18n?.[`${userLanguage}_text`] ||
+        quotedMessage?.text, [quotedMessage?.i18n, quotedMessage?.text, userLanguage]);
+    const renderedText = useMemo(() => renderText(quotedMessageText, quotedMessage?.mentioned_users), [quotedMessage, quotedMessageText, renderText]);
+    const quotedMessageAttachments = useMemo(() => quotedMessage?.attachments?.length ? quotedMessage.attachments.slice(0, 1) : [], [quotedMessage]);
+    const poll = quotedMessage?.poll_id && client.polls.fromState(quotedMessage.poll_id);
+    if (!quotedMessageText && !quotedMessageAttachments.length && !poll)
         return null;
-    const poll = quotedMessage.poll_id && client.polls.fromState(quotedMessage.poll_id);
     return (React.createElement("div", { className: 'str-chat__quoted-message-preview', "data-testid": 'quoted-message-preview' },
-        quotedMessage.user && (React.createElement(Avatar, { className: 'str-chat__avatar--quoted-message-sender', image: quotedMessage.user.image, name: quotedMessage.user.name || quotedMessage.user.id, user: quotedMessage.user })),
+        quotedMessage?.user && (React.createElement(Avatar, { className: 'str-chat__avatar--quoted-message-sender', image: quotedMessage.user.image, name: quotedMessage.user.name || quotedMessage.user.id, user: quotedMessage.user })),
         React.createElement("div", { className: 'str-chat__quoted-message-bubble' }, poll ? (React.createElement(Poll, { isQuoted: true, poll: poll })) : (React.createElement(React.Fragment, null,
-            !!quotedMessageAttachment.length && (React.createElement(Attachment, { attachments: quotedMessageAttachment, isQuoted: true })),
+            !!quotedMessageAttachments.length && (React.createElement(Attachment, { attachments: quotedMessageAttachments, isQuoted: true })),
             React.createElement("div", { className: 'str-chat__quoted-message-text', "data-testid": 'quoted-message-text' }, renderedText))))));
 };

package/dist/components/MessageInput/SendButton.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Message } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type SendButtonProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    sendMessage: (event: React.BaseSyntheticEvent, customMessageData?: Partial<Message<StreamChatGenerics>>) => void;
+import type { UpdatedMessage } from 'stream-chat';
+export type SendButtonProps = {
+    sendMessage: (event: React.BaseSyntheticEvent, customMessageData?: Omit<UpdatedMessage, 'mentioned_users'>) => void;
 } & React.ComponentProps<'button'>;
-export declare const SendButton: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ sendMessage, ...rest }: SendButtonProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const SendButton: ({ sendMessage, ...rest }: SendButtonProps) => React.JSX.Element;

package/dist/components/MessageInput/SendButton.js

@@ -1,4 +1,8 @@
 import React from 'react';
 import { SendIcon } from './icons';
-export const SendButton = ({ sendMessage, ...rest }) => (React.createElement("button", { "aria-label": 'Send', className: 'str-chat__send-button', "data-testid": 'send-button', onClick: sendMessage, type: 'button', ...rest },
-    React.createElement(SendIcon, null)));
+import { useMessageComposerHasSendableData } from './hooks';
+export const SendButton = ({ sendMessage, ...rest }) => {
+    const hasSendableData = useMessageComposerHasSendableData();
+    return (React.createElement("button", { "aria-label": 'Send', className: 'str-chat__send-button', "data-testid": 'send-button', disabled: !hasSendableData, onClick: sendMessage, type: 'button', ...rest },
+        React.createElement(SendIcon, null)));
+};

package/dist/components/MessageInput/WithDragAndDropUpload.d.ts

@@ -1,5 +1,5 @@
-import React, { CSSProperties, ElementType, PropsWithChildren } from 'react';
-import { MessageInputContextValue } from '../../context';
+import type { CSSProperties, ElementType, PropsWithChildren } from 'react';
+import React from 'react';
 export declare const useDragAndDropUploadContext: () => {
     subscribeToDrop: ((fn: (files: File[]) => void) => () => void) | null;
 };
@@ -9,7 +9,7 @@ export declare const useDragAndDropUploadContext: () => {
  * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`
  * component.
  */
-export declare const useRegisterDropHandlers: ({ uploadNewFiles }: MessageInputContextValue) => void;
+export declare const useRegisterDropHandlers: () => void;
 /**
  * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.
  *
@@ -27,6 +27,7 @@ export declare const useRegisterDropHandlers: ({ uploadNewFiles }: MessageInputC
  * ```
  */
 export declare const WithDragAndDropUpload: ({ children, className, component: Component, style, }: PropsWithChildren<{
+    acceptedFiles?: string[];
     /**
      * @description An element to render as a wrapper onto which drag & drop functionality will be applied.
      * @default 'div'

package/dist/components/MessageInput/WithDragAndDropUpload.js

@@ -1,7 +1,9 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, } from 'react';
-import { useChannelStateContext, useMessageInputContext, useTranslationContext, } from '../../context';
+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,
 });
@@ -12,13 +14,18 @@ export const useDragAndDropUploadContext = () => useContext(DragAndDropUploadCon
  * will then be notified when the drop event occurs from within the `WithDragAndDropUpload`
  * component.
  */
-export const useRegisterDropHandlers = ({ uploadNewFiles }) => {
+export const useRegisterDropHandlers = () => {
     const { subscribeToDrop } = useDragAndDropUploadContext();
+    const messageComposer = useMessageComposer();
     useEffect(() => {
-        const unsubscribe = subscribeToDrop?.(uploadNewFiles);
+        const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);
         return unsubscribe;
-    }, [subscribeToDrop, uploadNewFiles]);
+    }, [subscribeToDrop, messageComposer]);
 };
+const attachmentManagerConfigStateSelector = (state) => ({
+    acceptedFiles: state.attachments.acceptedFiles,
+    multipleUploads: state.attachments.maxNumberOfFilesPerMessage > 1,
+});
 /**
  * Wrapper to replace now deprecated `Channel.dragAndDropWindow` option.
  *
@@ -37,12 +44,14 @@ export const useRegisterDropHandlers = ({ uploadNewFiles }) => {
  */
 export const WithDragAndDropUpload = ({ children, className, component: Component = 'div', style, }) => {
     const dropHandlersRef = useRef(new Set());
-    const { acceptedFiles = [], multipleUploads } = useChannelStateContext();
     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 = typeof messageInputContext.uploadNewFiles === 'function';
+    const isWithinMessageInputContext = Object.keys(messageInputContext).length > 0;
     const accept = useMemo(() => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
         mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
         return mediaTypeMap;
@@ -61,11 +70,13 @@ export const WithDragAndDropUpload = ({ children, className, component: Componen
         // apply `disabled` rules if available, otherwise allow anything and
         // let the `uploadNewFiles` handle the limitations internally
         disabled: isWithinMessageInputContext
-            ? !messageInputContext.isUploadEnabled || messageInputContext.maxFilesLeft === 0
+            ? !isUploadEnabled || (messageInputContext.cooldownRemaining ?? 0) > 0
             : false,
         multiple: multipleUploads,
         noClick: true,
-        onDrop: isWithinMessageInputContext ? messageInputContext.uploadNewFiles : handleDrop,
+        onDrop: isWithinMessageInputContext
+            ? messageComposer.attachmentManager.uploadFiles
+            : handleDrop,
     });
     // nested WithDragAndDropUpload components render wrappers without functionality
     // (MessageInputFlat has a default WithDragAndDropUpload)

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';