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

package/dist/components/Channel/Channel.d.ts

@@ -5,7 +5,7 @@ import type { OnMentionAction } from './hooks/useMentionsHandlers';
 import type { LoadingErrorIndicatorProps } from '../Loading';
 import type { ComponentContextValue } from '../../context';
 import type { ChannelUnreadUiState, GiphyVersions, ImageAttachmentSizeHandler, VideoAttachmentSizeHandler } from '../../types/types';
-type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
+type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'SendButton' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
 export type ChannelProps = ChannelPropsForwardedToComponentContext & {
     /** Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab */
     activeUnreadHandler?: (unread: number, documentTitle: string) => void;

package/dist/components/Channel/Channel.js

@@ -756,6 +756,7 @@ const ChannelInner = (props) => {
         StartRecordingAudioButton: props.StartRecordingAudioButton,
         StopAIGenerationButton: props.StopAIGenerationButton,
         StreamedMessageText: props.StreamedMessageText,
+        TextareaComposer: props.TextareaComposer,
         ThreadHead: props.ThreadHead,
         ThreadHeader: props.ThreadHeader,
         ThreadStart: props.ThreadStart,
@@ -817,6 +818,7 @@ const ChannelInner = (props) => {
         props.StartRecordingAudioButton,
         props.StopAIGenerationButton,
         props.StreamedMessageText,
+        props.TextareaComposer,
         props.ThreadHead,
         props.ThreadHeader,
         props.ThreadStart,

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.0.0-rc.2";
+        const version = "13.0.1";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/MessageInput/EditMessageForm.js

@@ -40,5 +40,5 @@ export const EditMessageModal = ({ additionalMessageInputProps, }) => {
         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 })));
+        React.createElement(MessageInput, { clearEditingState: clearEditingState, hideSendButton: true, Input: EditMessageInput, ...additionalMessageInputProps })));
 };

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

@@ -20,7 +20,7 @@ export type MessageInputProps = {
      * Default value is handled via MessageComposer.
      * [Available props](https://www.npmjs.com/package/react-textarea-autosize)
      */
-    additionalTextareaProps?: Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue'>;
+    additionalTextareaProps?: Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'style' | 'disabled' | 'value'>;
     /**
      * 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.
@@ -36,8 +36,6 @@ export type MessageInputProps = {
     emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
     /** If true, focuses the text input on component mount */
     focus?: boolean;
-    /** 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) */

package/dist/components/MessageInput/MessageInputFlat.js

@@ -7,7 +7,7 @@ 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 { TextareaComposer } from '../TextareaComposer';
+import { TextareaComposer as DefaultTextareaComposer } from '../TextareaComposer';
 import { AIStates, useAIState } from '../AIStateIndicator';
 import { RecordingAttachmentType } from '../MediaRecorder/classes';
 import { useChatContext } from '../../context/ChatContext';
@@ -19,7 +19,7 @@ import { WithDragAndDropUpload } from './WithDragAndDropUpload';
 export const 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 { AttachmentPreviewList = DefaultAttachmentPreviewList, AttachmentSelector = message ? SimpleAttachmentSelector : DefaultAttachmentSelector, AudioRecorder = DefaultAudioRecorder, CooldownTimer = DefaultCooldownTimer, EmojiPicker, LinkPreviewList = DefaultLinkPreviewList, QuotedMessagePreview = DefaultQuotedMessagePreview, RecordingPermissionDeniedNotification = DefaultRecordingPermissionDeniedNotification, SendButton = DefaultSendButton, StartRecordingAudioButton = DefaultStartRecordingAudioButton, StopAIGenerationButton: StopAIGenerationButtonOverride, TextareaComposer = DefaultTextareaComposer, } = useComponentContext();
     const { channel } = useChatContext('MessageInputFlat');
     const { aiState } = useAIState(channel);
     const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 export const useCreateMessageInputContext = (value) => {
-    const { additionalTextareaProps, asyncMessagesMultiSendEnabled, audioRecordingEnabled, clearEditingState, cooldownInterval, cooldownRemaining, emojiSearchIndex, focus, grow, handleSubmit, hideSendButton, insertText, isThreadInput, maxRows, minRows, onPaste, parent, recordingController, setCooldownRemaining, shouldSubmit, textareaRef, } = value;
+    const { additionalTextareaProps, asyncMessagesMultiSendEnabled, audioRecordingEnabled, clearEditingState, cooldownInterval, cooldownRemaining, emojiSearchIndex, focus, handleSubmit, hideSendButton, isThreadInput, maxRows, minRows, onPaste, parent, recordingController, setCooldownRemaining, shouldSubmit, textareaRef, } = value;
     const parentId = parent?.id;
     const messageInputContext = useMemo(() => ({
         additionalTextareaProps,
@@ -11,10 +11,8 @@ export const useCreateMessageInputContext = (value) => {
         cooldownRemaining,
         emojiSearchIndex,
         focus,
-        grow,
         handleSubmit,
         hideSendButton,
-        insertText,
         isThreadInput,
         maxRows,
         minRows,

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

@@ -4,7 +4,6 @@ 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>;

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

@@ -1,10 +1,10 @@
-import { useMessageInputText } from './useMessageInputText';
+import { useTextareaRef } from './useTextareaRef';
 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 { textareaRef } = useTextareaRef(props);
     const { handleSubmit } = useSubmitHandler(props);
     const recordingController = useMediaRecorder({
         asyncMessagesMultiSendEnabled,
@@ -12,10 +12,9 @@ export const useMessageInputControls = (props) => {
         handleSubmit,
         recordingConfig: audioRecordingConfig,
     });
-    const { onPaste } = usePasteHandler(insertText);
+    const { onPaste } = usePasteHandler();
     return {
         handleSubmit,
-        insertText,
         onPaste,
         recordingController,
         textareaRef,

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

@@ -1,3 +1,3 @@
-export declare const usePasteHandler: (insertText: (textToInsert: string) => void) => {
+export declare const usePasteHandler: () => {
     onPaste: (clipboardEvent: React.ClipboardEvent<HTMLTextAreaElement>) => void;
 };

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

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 import { useMessageComposer } from './useMessageComposer';
 import { dataTransferItemsToFiles } from '../../ReactFileUtilities';
-export const usePasteHandler = (insertText) => {
-    const { attachmentManager } = useMessageComposer();
+export const usePasteHandler = () => {
+    const { attachmentManager, textComposer } = useMessageComposer();
     const onPaste = useCallback((clipboardEvent) => {
         (async (event) => {
             const { items } = event.clipboardData;
@@ -25,12 +25,12 @@ export const usePasteHandler = (insertText) => {
             const fileLikes = await dataTransferItemsToFiles(Array.from(items));
             if (plainTextPromise) {
                 const pastedText = await plainTextPromise;
-                insertText(pastedText);
+                textComposer.insertText({ text: pastedText });
             }
             else {
                 attachmentManager.uploadFiles(fileLikes);
             }
         })(clipboardEvent);
-    }, [attachmentManager, insertText]);
+    }, [attachmentManager, textComposer]);
     return { onPaste };
 };

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

@@ -1,7 +1,24 @@
 import { useCallback } from 'react';
+import { MessageComposer } from 'stream-chat';
 import { useMessageComposer } from './useMessageComposer';
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
+const takeStateSnapshot = (messageComposer) => {
+    const textComposerState = messageComposer.textComposer.state.getLatestValue();
+    const attachmentManagerState = messageComposer.attachmentManager.state.getLatestValue();
+    const linkPreviewsManagerState = messageComposer.linkPreviewsManager.state.getLatestValue();
+    const pollComposerState = messageComposer.pollComposer.state.getLatestValue();
+    const customDataManagerState = messageComposer.customDataManager.state.getLatestValue();
+    const state = messageComposer.state.getLatestValue();
+    return () => {
+        messageComposer.state.next(state);
+        messageComposer.textComposer.state.next(textComposerState);
+        messageComposer.attachmentManager.state.next(attachmentManagerState);
+        messageComposer.linkPreviewsManager.state.next(linkPreviewsManagerState);
+        messageComposer.pollComposer.state.next(pollComposerState);
+        messageComposer.customDataManager.state.next(customDataManagerState);
+    };
+};
 export const useSubmitHandler = (props) => {
     const { clearEditingState, overrideSubmitHandler } = props;
     const { addNotification, editMessage, sendMessage } = useChannelActionContext('useSubmitHandler');
@@ -23,7 +40,20 @@ export const useSubmitHandler = (props) => {
             }
         }
         else {
+            const restoreComposerStateSnapshot = takeStateSnapshot(messageComposer);
             try {
+                // FIXME: once MessageComposer has sendMessage method, then the following condition should be encapsulated by it
+                // keep attachments, text, quoted message (treat them as draft) ... if sending a poll
+                const sentPollMessage = !!message.poll_id;
+                if (sentPollMessage) {
+                    messageComposer.state.partialNext({
+                        id: MessageComposer.generateId(),
+                        pollId: null,
+                    });
+                }
+                else {
+                    messageComposer.clear();
+                }
                 // todo: get rid of overrideSubmitHandler once MessageComposer supports submission flow
                 if (overrideSubmitHandler) {
                     await overrideSubmitHandler({
@@ -36,11 +66,11 @@ export const useSubmitHandler = (props) => {
                 else {
                     await sendMessage({ localMessage, message, options: sendOptions });
                 }
-                messageComposer.clear();
                 if (messageComposer.config.text.publishTypingEvents)
                     await messageComposer.channel.stopTyping();
             }
             catch (err) {
+                restoreComposerStateSnapshot();
                 addNotification(t('Send message request failed'), 'error');
             }
         }

package/dist/components/MessageInput/hooks/{useMessageInputText.d.ts → useTextareaRef.d.ts}

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { MessageInputProps } from '../MessageInput';
-export declare const useMessageInputText: (props: MessageInputProps) => {
-    insertText: (textToInsert: string) => void;
+export declare const useTextareaRef: (props: MessageInputProps) => {
     textareaRef: import("react").RefObject<HTMLTextAreaElement | undefined>;
 };

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

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+export const useTextareaRef = (props) => {
+    const { focus } = props;
+    const textareaRef = useRef(undefined);
+    // Focus
+    useEffect(() => {
+        if (focus && textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    }, [focus]);
+    return {
+        textareaRef,
+    };
+};

package/dist/components/Poll/PollActions/PollResults/PollResults.js

@@ -7,7 +7,7 @@ import { useStateStore } from '../../../../store';
 import { usePollContext, useTranslationContext } from '../../../../context';
 const pollStateSelector = (nextValue) => ({
     name: nextValue.name,
-    options: nextValue.options,
+    options: [...nextValue.options],
     vote_counts_by_option: nextValue.vote_counts_by_option,
 });
 export const PollResults = ({ close }) => {

package/dist/components/Poll/PollCreationDialog/MultipleAnswersField.js

@@ -28,8 +28,15 @@ export const MultipleAnswersField = () => {
                 React.createElement("input", { id: 'max_votes_allowed', onBlur: () => {
                         pollComposer.handleFieldBlur('max_votes_allowed');
                     }, onChange: (e) => {
+                        const nativeFieldValidation = !e.target.validity.valid
+                            ? {
+                                max_votes_allowed: t('Only numbers are allowed'),
+                            }
+                            : undefined;
                         pollComposer.updateFields({
-                            max_votes_allowed: e.target.value,
-                        });
+                            max_votes_allowed: !nativeFieldValidation
+                                ? e.target.value
+                                : pollComposer.max_votes_allowed,
+                        }, nativeFieldValidation);
                     }, placeholder: t('Maximum number of votes (from 2 to 10)'), type: 'number', value: max_votes_allowed }))))));
 };

package/dist/components/TextareaComposer/TextareaComposer.d.ts

@@ -1,13 +1,11 @@
 import type { TextareaHTMLAttributes } from 'react';
 import React from 'react';
-export type TextComposerProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style' | 'defaultValue' | 'disabled'> & {
+export type TextareaComposerProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'style' | 'defaultValue' | 'disabled' | 'value'> & {
     closeSuggestionsOnClickOutside?: boolean;
     containerClassName?: string;
-    dropdownClassName?: string;
-    grow?: boolean;
-    itemClassName?: string;
     listClassName?: string;
     maxRows?: number;
+    minRows?: number;
     shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
 };
-export declare const TextareaComposer: ({ className, closeSuggestionsOnClickOutside, containerClassName, grow: growProp, listClassName, maxRows: maxRowsProp, onBlur, onChange, onKeyDown, onScroll, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restProps }: TextComposerProps) => React.JSX.Element;
+export declare const TextareaComposer: ({ className, closeSuggestionsOnClickOutside, containerClassName, listClassName, maxRows: maxRowsProp, minRows: minRowsProp, onBlur, onChange, onKeyDown, onScroll, onSelect, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restTextareaProps }: TextareaComposerProps) => React.JSX.Element;

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -1,4 +1,6 @@
+import debounce from 'lodash.debounce';
 import clsx from 'clsx';
+import { useMemo } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Textarea from 'react-textarea-autosize';
 import { useMessageComposer } from '../MessageInput';
@@ -24,16 +26,12 @@ const configStateSelector = (state) => ({
  * In the long term, the fix should happen by handling keypress, but changing this has unknown implications.
  */
 const defaultShouldSubmit = (event) => event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
-export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, containerClassName, 
-// dropdownClassName, // todo: X find a different way to prevent prop drilling
-grow: growProp, 
-// itemClassName, // todo: X find a different way to prevent prop drilling
-listClassName, maxRows: maxRowsProp = 1, onBlur, onChange, onKeyDown, onScroll, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restProps }) => {
+export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, containerClassName, listClassName, maxRows: maxRowsProp, minRows: minRowsProp, onBlur, onChange, onKeyDown, onScroll, onSelect, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restTextareaProps }) => {
     const { t } = useTranslationContext();
     const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();
-    const { additionalTextareaProps, cooldownRemaining, grow: growContext, handleSubmit, maxRows: maxRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef, } = useMessageInputContext();
-    const grow = growProp ?? growContext;
-    const maxRows = maxRowsProp ?? maxRowsContext;
+    const { additionalTextareaProps, cooldownRemaining, handleSubmit, maxRows: maxRowsContext, minRows: minRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef, } = useMessageInputContext();
+    const maxRows = maxRowsProp ?? maxRowsContext ?? 1;
+    const minRows = minRowsProp ?? minRowsContext;
     const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
     const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
     const messageComposer = useMessageComposer();
@@ -70,16 +68,13 @@ listClassName, maxRows: maxRowsProp = 1, onBlur, onChange, onKeyDown, onScroll,
             onKeyDown(event);
             return;
         }
-        if (event.key === 'Enter') {
-            // allow next line only on Shift + Enter. Enter is reserved for submission.
-            event.preventDefault();
-        }
         if (textComposer.suggestions &&
             textComposer.suggestions.searchSource.items?.length) {
             if (event.key === 'Escape')
                 return textComposer.closeSuggestions();
             const loadedItems = textComposer.suggestions.searchSource.items;
             if (event.key === 'Enter') {
+                event.preventDefault();
                 textComposer.handleSelect(loadedItems[focusedItemIndex]);
             }
             if (event.key === 'ArrowUp') {
@@ -130,6 +125,13 @@ listClassName, maxRows: maxRowsProp = 1, onBlur, onChange, onKeyDown, onScroll,
             textComposer.closeSuggestions();
         }
     }, [onScroll, textComposer]);
+    const setSelectionDebounced = useMemo(() => debounce((e) => {
+        onSelect?.(e);
+        textComposer.setSelection({
+            end: e.target.selectionEnd,
+            start: e.target.selectionStart,
+        });
+    }, 100, { leading: false, trailing: true }), [onSelect, textComposer]);
     useEffect(() => {
         // FIXME: find the real reason for cursor being set to the end on each change
         // This is a workaround to prevent the cursor from jumping
@@ -148,7 +150,7 @@ listClassName, maxRows: maxRowsProp = 1, onBlur, onChange, onKeyDown, onScroll,
     return (React.createElement("div", { className: clsx('rta', 'str-chat__textarea str-chat__message-textarea-react-host', containerClassName, {
             ['rta--loading']: isLoadingItems,
         }), ref: containerRef },
-        React.createElement(Textarea, { ...restProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: clsx('rta__textarea', 'str-chat__textarea__textarea str-chat__message-textarea', className), "data-testid": 'message-input', disabled: !enabled || !!cooldownRemaining, maxRows: grow ? maxRows : 1, onBlur: onBlur, onChange: changeHandler, onCompositionEnd: onCompositionEnd, onCompositionStart: onCompositionStart, onKeyDown: keyDownHandler, onPaste: onPaste, onScroll: scrollHandler, placeholder: placeholder || t('Type your message'), ref: (ref) => {
+        React.createElement(Textarea, { ...additionalTextareaProps, ...restTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: clsx('rta__textarea', 'str-chat__textarea__textarea str-chat__message-textarea', className), "data-testid": 'message-input', disabled: !enabled || !!cooldownRemaining, maxRows: maxRows, minRows: minRows, onBlur: onBlur, onChange: changeHandler, onCompositionEnd: onCompositionEnd, onCompositionStart: onCompositionStart, onKeyDown: keyDownHandler, onPaste: onPaste, onScroll: scrollHandler, onSelect: setSelectionDebounced, placeholder: placeholder || t('Type your message'), ref: (ref) => {
                 textareaRef.current = ref;
             }, value: text }),
         !isComposing && (React.createElement(AutocompleteSuggestionList, { className: listClassName, closeOnClickOutside: closeSuggestionsOnClickOutside, focusedItemIndex: focusedItemIndex, setFocusedItemIndex: setFocusedItemIndex }))));

package/dist/context/ComponentContext.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
+import type { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, TextareaComposerProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
 import type { SuggestionItemProps, SuggestionListProps } from '../components/TextareaComposer';
 import type { SearchProps, SearchResultsPresearchProps, SearchSourceResultListProps } from '../experimental';
 import type { PropsWithChildrenOnly, UnknownType } from '../types/types';
@@ -141,6 +141,8 @@ export type ComponentContextValue = {
     StartRecordingAudioButton?: React.ComponentType<StartRecordingAudioButtonProps>;
     StopAIGenerationButton?: React.ComponentType<StopAIGenerationButtonProps> | null;
     StreamedMessageText?: React.ComponentType<StreamedMessageTextProps>;
+    /** Custom UI component to handle message text input, defaults to and accepts same props as [TextareaComposer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/TextareaComposer.tsx) */
+    TextareaComposer?: React.ComponentType<TextareaComposerProps>;
     /** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
     ThreadHead?: React.ComponentType<MessageProps>;
     /** Custom UI component to display the header of a `Thread`, defaults to and accepts same props as: [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
@@ -155,8 +157,6 @@ export type ComponentContextValue = {
     ThreadStart?: React.ComponentType;
     /** Custom UI component to display a date used in timestamps. It's used internally by the default `MessageTimestamp`, and to display a timestamp for edited messages. */
     Timestamp?: React.ComponentType<TimestampProps>;
-    /** Optional context provider that lets you override the default autocomplete triggers, defaults to: [DefaultTriggerProvider](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/DefaultTriggerProvider.tsx) */
-    TriggerProvider?: React.ComponentType;
     /** Custom UI component for the typing indicator, defaults to and accepts same props as: [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) */
     TypingIndicator?: React.ComponentType<TypingIndicatorProps>;
     /** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */