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

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.1";
+        const version = "13.0.0";
         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/{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/TextareaComposer/SuggestionList/CommandItem.d.ts

@@ -1,13 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
+import type { CommandResponse } from 'stream-chat';
 export type CommandItemProps = {
-    entity: {
-        /** Arguments of command */
-        args?: string;
-        /** Description of command */
-        description?: string;
-        /** Name of the command */
-        name?: string;
-    };
+    entity: CommandResponse;
 };
 export declare const CommandItem: (props: PropsWithChildren<CommandItemProps>) => React.JSX.Element;

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

@@ -1,16 +1,14 @@
 import React from 'react';
-import type { SuggestionItemProps } from './SuggestionListItem';
+import type { SuggestionListItemComponentProps } from './SuggestionListItem';
+type SuggestionTrigger = '/' | ':' | '@' | string;
 export type SuggestionListProps = Partial<{
-    SuggestionItem: React.ComponentType<SuggestionItemProps>;
+    suggestionItemComponents: Record<SuggestionTrigger, React.ComponentType<SuggestionListItemComponentProps>>;
     className?: string;
     closeOnClickOutside?: boolean;
     containerClassName?: string;
     focusedItemIndex: number;
     setFocusedItemIndex: (index: number) => void;
 }>;
-export declare const defaultComponents: {
-    '/': (props: React.PropsWithChildren<import("./CommandItem").CommandItemProps>) => React.JSX.Element;
-    ':': (props: import("./EmoticonItem").EmoticonItemProps) => React.JSX.Element | null;
-    '@': ({ Avatar, entity }: import("./UserItem").UserItemProps) => React.JSX.Element | null;
-};
-export declare const SuggestionList: ({ className, closeOnClickOutside, containerClassName, focusedItemIndex, setFocusedItemIndex, }: SuggestionListProps) => React.JSX.Element | null;
+export declare const defaultComponents: Record<SuggestionTrigger, React.ComponentType<SuggestionListItemComponentProps>>;
+export declare const SuggestionList: ({ className, closeOnClickOutside, containerClassName, focusedItemIndex, setFocusedItemIndex, suggestionItemComponents, }: SuggestionListProps) => React.JSX.Element | null;
+export {};

package/dist/components/TextareaComposer/SuggestionList/SuggestionList.js

@@ -15,19 +15,20 @@ const searchSourceStateSelector = (nextValue) => ({
     items: nextValue.items ?? [],
 });
 export const defaultComponents = {
-    '/': CommandItem,
-    ':': EmoticonItem,
-    '@': UserItem,
+    '/': (props) => (React.createElement(CommandItem, { entity: props.entity })),
+    ':': (props) => (React.createElement(EmoticonItem, { entity: props.entity })),
+    '@': (props) => (React.createElement(UserItem, { entity: props.entity })),
 };
-export const SuggestionList = ({ className, closeOnClickOutside = true, containerClassName, focusedItemIndex, setFocusedItemIndex, }) => {
+export const SuggestionList = ({ className, closeOnClickOutside = true, containerClassName, focusedItemIndex, setFocusedItemIndex, suggestionItemComponents = defaultComponents, }) => {
     const { AutocompleteSuggestionItem = DefaultSuggestionListItem } = useComponentContext();
     const messageComposer = useMessageComposer();
     const { textComposer } = messageComposer;
     const { suggestions } = useStateStore(textComposer.state, textComposerStateSelector);
     const { items } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
     const [container, setContainer] = useState(null);
-    // @ts-expect-error component type mismatch
-    const component = suggestions?.trigger && defaultComponents[suggestions?.trigger];
+    const component = suggestions?.trigger
+        ? suggestionItemComponents[suggestions?.trigger]
+        : undefined;
     useEffect(() => {
         if (!closeOnClickOutside || !suggestions || !container)
             return;

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import type { CommandResponse, TextComposerSuggestion, UserResponse } from 'stream-chat';
-import type { EmojiSearchIndexResult } from '../../MessageInput';
-export type SuggestionCommand = CommandResponse;
-export type SuggestionUser = UserResponse;
-export type SuggestionEmoji = EmojiSearchIndexResult;
-export type SuggestionItem = SuggestionUser | SuggestionCommand | SuggestionEmoji;
+import type { TextComposerSuggestion } from 'stream-chat';
+import type { UserItemProps } from './UserItem';
+import type { CommandItemProps } from './CommandItem';
+import type { EmoticonItemProps } from './EmoticonItem';
+export type DefaultSuggestionListItemEntity = UserItemProps['entity'] | CommandItemProps['entity'] | EmoticonItemProps['entity'];
+export type SuggestionListItemComponentProps = {
+    entity: DefaultSuggestionListItemEntity | unknown;
+    focused: boolean;
+};
 export type SuggestionItemProps = {
-    component: React.ComponentType<{
-        entity: SuggestionItem;
-        focused: boolean;
-    }>;
+    component: React.ComponentType<SuggestionListItemComponentProps>;
     item: TextComposerSuggestion;
     focused: boolean;
     className?: string;

package/dist/components/TextareaComposer/SuggestionList/SuggestionListItem.js

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import { useLayoutEffect } from 'react';
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
 import { useMessageComposer } from '../../MessageInput';
 export const SuggestionListItem = React.forwardRef(function SuggestionListItem({ className, component: Component, focused, item, onMouseEnter }, innerRef) {
     const { textComposer } = useMessageComposer();

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 = 1, 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 { additionalTextareaProps, cooldownRemaining, handleSubmit, maxRows: maxRowsContext, minRows: minRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef, } = useMessageInputContext();
     const maxRows = maxRowsProp ?? maxRowsContext;
+    const minRows = minRowsProp ?? minRowsContext;
     const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
     const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
     const messageComposer = useMessageComposer();
@@ -130,6 +128,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 +153,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) */