From c2b2ddf4d6f93529660cc720974cba7f5ee2a0ff Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 1 May 2025 14:43:13 +0200
Subject: [PATCH 1/7] fix: reflect MessageInputContext values in
 TextareaComposer

---
 .../MessageInput/EditMessageForm.tsx          |  1 -
 src/components/MessageInput/MessageInput.tsx  |  4 +---
 .../hooks/useCreateMessageInputContext.ts     |  2 --
 .../TextareaComposer/TextareaComposer.tsx     | 19 ++++++++-----------
 4 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/components/MessageInput/EditMessageForm.tsx b/src/components/MessageInput/EditMessageForm.tsx
index 072bf224a9..6e5bda7f2b 100644
--- a/src/components/MessageInput/EditMessageForm.tsx
+++ b/src/components/MessageInput/EditMessageForm.tsx
@@ -86,7 +86,6 @@ export const EditMessageModal = ({
     >
       <MessageInput
         clearEditingState={clearEditingState}
-        grow
         hideSendButton
         Input={EditMessageInput}
         {...additionalMessageInputProps}
diff --git a/src/components/MessageInput/MessageInput.tsx b/src/components/MessageInput/MessageInput.tsx
index 7631c1013e..f475b953a2 100644
--- a/src/components/MessageInput/MessageInput.tsx
+++ b/src/components/MessageInput/MessageInput.tsx
@@ -38,7 +38,7 @@ export type MessageInputProps = {
    */
   additionalTextareaProps?: Omit<
     React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    'defaultValue'
+    'defaultValue' | 'style' | 'disabled'
   >;
   /**
    * When enabled, recorded messages won’t be sent immediately.
@@ -55,8 +55,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) */
diff --git a/src/components/MessageInput/hooks/useCreateMessageInputContext.ts b/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
index c31522353c..4cb33c985e 100644
--- a/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
+++ b/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
@@ -12,7 +12,6 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
     cooldownRemaining,
     emojiSearchIndex,
     focus,
-    grow,
     handleSubmit,
     hideSendButton,
     insertText,
@@ -39,7 +38,6 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
       cooldownRemaining,
       emojiSearchIndex,
       focus,
-      grow,
       handleSubmit,
       hideSendButton,
       insertText,
diff --git a/src/components/TextareaComposer/TextareaComposer.tsx b/src/components/TextareaComposer/TextareaComposer.tsx
index 8543e10a2e..2c36637e52 100644
--- a/src/components/TextareaComposer/TextareaComposer.tsx
+++ b/src/components/TextareaComposer/TextareaComposer.tsx
@@ -46,11 +46,9 @@ export type TextComposerProps = Omit<
 > & {
   closeSuggestionsOnClickOutside?: boolean;
   containerClassName?: string;
-  dropdownClassName?: string;
-  grow?: boolean;
-  itemClassName?: string;
   listClassName?: string;
   maxRows?: number;
+  minRows?: number;
   shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
 };
 
@@ -58,34 +56,32 @@ 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,
+  minRows: minRowsProp,
   onBlur,
   onChange,
   onKeyDown,
   onScroll,
   placeholder: placeholderProp,
   shouldSubmit: shouldSubmitProp,
-  ...restProps
+  ...restTextareaProps
 }: TextComposerProps) => {
   const { t } = useTranslationContext();
   const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();
   const {
     additionalTextareaProps,
     cooldownRemaining,
-    grow: growContext,
     handleSubmit,
     maxRows: maxRowsContext,
+    minRows: minRowsContext,
     onPaste,
     shouldSubmit: shouldSubmitContext,
     textareaRef,
   } = useMessageInputContext();
 
-  const grow = growProp ?? growContext;
   const maxRows = maxRowsProp ?? maxRowsContext;
+  const minRows = minRowsProp ?? minRowsContext;
   const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
   const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
 
@@ -235,7 +231,7 @@ export const TextareaComposer = ({
       ref={containerRef}
     >
       <Textarea
-        {...restProps}
+        {...{ ...additionalTextareaProps, ...restTextareaProps }}
         aria-label={cooldownRemaining ? t('Slow Mode ON') : placeholder}
         className={clsx(
           'rta__textarea',
@@ -244,7 +240,8 @@ export const TextareaComposer = ({
         )}
         data-testid='message-input'
         disabled={!enabled || !!cooldownRemaining}
-        maxRows={grow ? maxRows : 1}
+        maxRows={maxRows}
+        minRows={minRows}
         onBlur={onBlur}
         onChange={changeHandler}
         onCompositionEnd={onCompositionEnd}

From 91cf23a9ac3107239d4022915d734abef5c8ea5b Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 2 May 2025 08:10:02 +0200
Subject: [PATCH 2/7] fix: remove insertText from MessageInputContext and
 always update TextComposer selection state

---
 .../hooks/useCreateMessageInputContext.ts     |  2 -
 .../hooks/useMessageInputControls.ts          |  8 +--
 .../MessageInput/hooks/useMessageInputText.ts | 58 -------------------
 .../MessageInput/hooks/usePasteHandler.ts     |  8 +--
 .../MessageInput/hooks/useTextareaRef.ts      | 17 ++++++
 .../TextareaComposer/TextareaComposer.tsx     | 27 ++++++++-
 src/plugins/Emojis/EmojiPicker.tsx            | 12 ++--
 7 files changed, 58 insertions(+), 74 deletions(-)
 delete mode 100644 src/components/MessageInput/hooks/useMessageInputText.ts
 create mode 100644 src/components/MessageInput/hooks/useTextareaRef.ts

diff --git a/src/components/MessageInput/hooks/useCreateMessageInputContext.ts b/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
index 4cb33c985e..e5f4e25135 100644
--- a/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
+++ b/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
@@ -14,7 +14,6 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
     focus,
     handleSubmit,
     hideSendButton,
-    insertText,
     isThreadInput,
     maxRows,
     minRows,
@@ -40,7 +39,6 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
       focus,
       handleSubmit,
       hideSendButton,
-      insertText,
       isThreadInput,
       maxRows,
       minRows,
diff --git a/src/components/MessageInput/hooks/useMessageInputControls.ts b/src/components/MessageInput/hooks/useMessageInputControls.ts
index 212af9fa7f..8f1382d99d 100644
--- a/src/components/MessageInput/hooks/useMessageInputControls.ts
+++ b/src/components/MessageInput/hooks/useMessageInputControls.ts
@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useMessageInputText } from './useMessageInputText';
+import { useTextareaRef } from './useTextareaRef';
 import { useSubmitHandler } from './useSubmitHandler';
 import { usePasteHandler } from './usePasteHandler';
 import { useMediaRecorder } from '../../MediaRecorder/hooks/useMediaRecorder';
@@ -12,7 +12,6 @@ export type MessageInputHookProps = {
     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>;
@@ -24,7 +23,7 @@ export const useMessageInputControls = (
   const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } =
     props;
 
-  const { insertText, textareaRef } = useMessageInputText(props);
+  const { textareaRef } = useTextareaRef(props);
 
   const { handleSubmit } = useSubmitHandler(props);
 
@@ -35,11 +34,10 @@ export const useMessageInputControls = (
     recordingConfig: audioRecordingConfig,
   });
 
-  const { onPaste } = usePasteHandler(insertText);
+  const { onPaste } = usePasteHandler();
 
   return {
     handleSubmit,
-    insertText,
     onPaste,
     recordingController,
     textareaRef,
diff --git a/src/components/MessageInput/hooks/useMessageInputText.ts b/src/components/MessageInput/hooks/useMessageInputText.ts
deleted file mode 100644
index 1d184d05ed..0000000000
--- a/src/components/MessageInput/hooks/useMessageInputText.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { type TextComposerState } from 'stream-chat';
-import type { MessageInputProps } from '../MessageInput';
-
-import { useMessageComposer } from './useMessageComposer';
-import { useStateStore } from '../../../store';
-
-const messageComposerStateSelector = (state: TextComposerState) => ({
-  text: state.text,
-});
-
-export const useMessageInputText = (props: MessageInputProps) => {
-  const { focus } = props;
-  const messageComposer = useMessageComposer();
-  const textareaRef = useRef<HTMLTextAreaElement>(undefined);
-  const { text } = useStateStore(
-    messageComposer.textComposer.state,
-    messageComposerStateSelector,
-  );
-  // Focus
-  useEffect(() => {
-    if (focus && textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, [focus]);
-
-  // Text + cursor position
-  const newCursorPosition = useRef<number>(undefined);
-
-  const insertText = useCallback(
-    (textToInsert: string) => {
-      const selection = textareaRef?.current && {
-        end: textareaRef.current.selectionEnd,
-        start: textareaRef.current.selectionStart,
-      };
-      messageComposer.textComposer.insertText({
-        selection,
-        text: textToInsert,
-      });
-      if (selection) newCursorPosition.current = selection.start + textToInsert.length;
-    },
-    [messageComposer, newCursorPosition, textareaRef],
-  );
-
-  useEffect(() => {
-    const textareaElement = textareaRef.current;
-    if (textareaElement && newCursorPosition.current !== undefined) {
-      textareaElement.selectionStart = newCursorPosition.current;
-      textareaElement.selectionEnd = newCursorPosition.current;
-      newCursorPosition.current = undefined;
-    }
-  }, [text, newCursorPosition]);
-
-  return {
-    insertText,
-    textareaRef,
-  };
-};
diff --git a/src/components/MessageInput/hooks/usePasteHandler.ts b/src/components/MessageInput/hooks/usePasteHandler.ts
index 7ab87bb389..b35dbd48f1 100644
--- a/src/components/MessageInput/hooks/usePasteHandler.ts
+++ b/src/components/MessageInput/hooks/usePasteHandler.ts
@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 import { useMessageComposer } from './useMessageComposer';
 import { dataTransferItemsToFiles } from '../../ReactFileUtilities';
 
-export const usePasteHandler = (insertText: (textToInsert: string) => void) => {
-  const { attachmentManager } = useMessageComposer();
+export const usePasteHandler = () => {
+  const { attachmentManager, textComposer } = useMessageComposer();
   const onPaste = useCallback(
     (clipboardEvent: React.ClipboardEvent<HTMLTextAreaElement>) => {
       (async (event) => {
@@ -29,13 +29,13 @@ export const usePasteHandler = (insertText: (textToInsert: string) => void) => {
 
         if (plainTextPromise) {
           const pastedText = await plainTextPromise;
-          insertText(pastedText);
+          textComposer.insertText({ text: pastedText });
         } else {
           attachmentManager.uploadFiles(fileLikes);
         }
       })(clipboardEvent);
     },
-    [attachmentManager, insertText],
+    [attachmentManager, textComposer],
   );
 
   return { onPaste };
diff --git a/src/components/MessageInput/hooks/useTextareaRef.ts b/src/components/MessageInput/hooks/useTextareaRef.ts
new file mode 100644
index 0000000000..dd70d7659e
--- /dev/null
+++ b/src/components/MessageInput/hooks/useTextareaRef.ts
@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import type { MessageInputProps } from '../MessageInput';
+
+export const useTextareaRef = (props: MessageInputProps) => {
+  const { focus } = props;
+  const textareaRef = useRef<HTMLTextAreaElement>(undefined);
+  // Focus
+  useEffect(() => {
+    if (focus && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [focus]);
+
+  return {
+    textareaRef,
+  };
+};
diff --git a/src/components/TextareaComposer/TextareaComposer.tsx b/src/components/TextareaComposer/TextareaComposer.tsx
index 2c36637e52..315744d726 100644
--- a/src/components/TextareaComposer/TextareaComposer.tsx
+++ b/src/components/TextareaComposer/TextareaComposer.tsx
@@ -1,5 +1,12 @@
+import debounce from 'lodash.debounce';
 import clsx from 'clsx';
-import type { ChangeEventHandler, TextareaHTMLAttributes, UIEventHandler } from 'react';
+import type {
+  ChangeEventHandler,
+  SyntheticEvent,
+  TextareaHTMLAttributes,
+  UIEventHandler,
+} from 'react';
+import { useMemo } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Textarea from 'react-textarea-autosize';
 import { useMessageComposer } from '../MessageInput';
@@ -63,6 +70,7 @@ export const TextareaComposer = ({
   onChange,
   onKeyDown,
   onScroll,
+  onSelect,
   placeholder: placeholderProp,
   shouldSubmit: shouldSubmitProp,
   ...restTextareaProps
@@ -201,6 +209,22 @@ export const TextareaComposer = ({
     [onScroll, textComposer],
   );
 
+  const setSelectionDebounced = useMemo(
+    () =>
+      debounce(
+        (e: SyntheticEvent<HTMLTextAreaElement>) => {
+          onSelect?.(e);
+          textComposer.setSelection({
+            end: (e.target as HTMLTextAreaElement).selectionEnd,
+            start: (e.target as HTMLTextAreaElement).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
@@ -249,6 +273,7 @@ export const TextareaComposer = ({
         onKeyDown={keyDownHandler}
         onPaste={onPaste}
         onScroll={scrollHandler}
+        onSelect={setSelectionDebounced}
         placeholder={placeholder || t('Type your message')}
         ref={(ref) => {
           textareaRef.current = ref;
diff --git a/src/plugins/Emojis/EmojiPicker.tsx b/src/plugins/Emojis/EmojiPicker.tsx
index 0915c39751..e0da708005 100644
--- a/src/plugins/Emojis/EmojiPicker.tsx
+++ b/src/plugins/Emojis/EmojiPicker.tsx
@@ -4,8 +4,9 @@ import Picker from '@emoji-mart/react';
 
 import type { Options } from '@popperjs/core';
 
-import { useMessageInputContext, useTranslationContext } from '../../context';
 import { EmojiPickerIcon } from './icons';
+import { useMessageInputContext, useTranslationContext } from '../../context';
+import { useMessageComposer } from '../../components';
 
 const isShadowRoot = (node: Node): node is ShadowRoot => !!(node as ShadowRoot).host;
 
@@ -35,7 +36,8 @@ const classNames: EmojiPickerProps = {
 
 export const EmojiPicker = (props: EmojiPickerProps) => {
   const { t } = useTranslationContext('EmojiPicker');
-  const { insertText, textareaRef } = useMessageInputContext('EmojiPicker');
+  const { textareaRef } = useMessageInputContext('EmojiPicker');
+  const { textComposer } = useMessageComposer();
   const [displayPicker, setDisplayPicker] = useState(false);
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(
     null,
@@ -84,8 +86,10 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
           <Picker
             data={async () => (await import('@emoji-mart/data')).default}
             onEmojiSelect={(e: { native: string }) => {
-              insertText(e.native);
-              textareaRef.current?.focus();
+              const textarea = textareaRef.current;
+              if (!textarea) return;
+              textComposer.insertText({ text: e.native });
+              textarea.focus();
               if (props.closeOnEmojiSelect) {
                 setDisplayPicker(false);
               }

From 88c73aeb8002668569c0510cf88233d974b87428 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 2 May 2025 12:44:41 +0200
Subject: [PATCH 3/7] chore: upgrade stream-chat to version 9.0.0-rc.16

---
 package.json | 4 ++--
 yarn.lock    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 6e451634ea..6990204ef4 100644
--- a/package.json
+++ b/package.json
@@ -145,7 +145,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.14.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.14.0",
-    "stream-chat": "^9.0.0-rc.15"
+    "stream-chat": "^9.0.0-rc.16"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -239,7 +239,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^24.2.3",
-    "stream-chat": "^9.0.0-rc.15",
+    "stream-chat": "^9.0.0-rc.16",
     "ts-jest": "^29.2.5",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0"
diff --git a/yarn.lock b/yarn.lock
index bede706ca5..0c2e6048b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12155,10 +12155,10 @@ statuses@2.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
-stream-chat@^9.0.0-rc.15:
-  version "9.0.0-rc.15"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.0.0-rc.15.tgz#6a35f27c38be2e021a3e62abcffa40aaef84fc0a"
-  integrity sha512-n8IftP103jp8IVOUZA4mnOvEIbyzGTVjoL3rDm42apk8DRHz2/vdvgyTYUJysDNYh+Oxu5HwWObToKv1c/Bxdw==
+stream-chat@^9.0.0-rc.16:
+  version "9.0.0-rc.16"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.0.0-rc.16.tgz#f93ba775754385ca5c297bf275d48a46cc012d5a"
+  integrity sha512-QWk9+g0Vnx94epuT7W/+eopC7hWaqDEVspMsyz79B1pMV6lWJSM2ya5aK5ttlMzd01kh3t0YZglZ1fRNtQERpg==
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"

From b7d66512ca8011aa4c6e959967cf947bfdd91f19 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Tue, 6 May 2025 11:03:56 +0200
Subject: [PATCH 4/7] feat: add TextareaComposer to ComponentContext

---
 src/components/Channel/Channel.tsx               | 3 +++
 src/components/MessageInput/MessageInputFlat.tsx | 5 +++--
 src/context/ComponentContext.tsx                 | 5 +++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
index 59287c5959..639ddaa0af 100644
--- a/src/components/Channel/Channel.tsx
+++ b/src/components/Channel/Channel.tsx
@@ -142,6 +142,7 @@ type ChannelPropsForwardedToComponentContext = Pick<
   | 'ReactionsListModal'
   | 'SendButton'
   | 'StartRecordingAudioButton'
+  | 'TextareaComposer'
   | 'ThreadHead'
   | 'ThreadHeader'
   | 'ThreadStart'
@@ -1229,6 +1230,7 @@ const ChannelInner = (
       StartRecordingAudioButton: props.StartRecordingAudioButton,
       StopAIGenerationButton: props.StopAIGenerationButton,
       StreamedMessageText: props.StreamedMessageText,
+      TextareaComposer: props.TextareaComposer,
       ThreadHead: props.ThreadHead,
       ThreadHeader: props.ThreadHeader,
       ThreadStart: props.ThreadStart,
@@ -1291,6 +1293,7 @@ const ChannelInner = (
       props.StartRecordingAudioButton,
       props.StopAIGenerationButton,
       props.StreamedMessageText,
+      props.TextareaComposer,
       props.ThreadHead,
       props.ThreadHeader,
       props.ThreadStart,
diff --git a/src/components/MessageInput/MessageInputFlat.tsx b/src/components/MessageInput/MessageInputFlat.tsx
index 93eca99282..21f9bf1541 100644
--- a/src/components/MessageInput/MessageInputFlat.tsx
+++ b/src/components/MessageInput/MessageInputFlat.tsx
@@ -19,7 +19,7 @@ import {
   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';
 
@@ -53,7 +53,8 @@ export const MessageInputFlat = () => {
     SendButton = DefaultSendButton,
     StartRecordingAudioButton = DefaultStartRecordingAudioButton,
     StopAIGenerationButton: StopAIGenerationButtonOverride,
-  } = useComponentContext('MessageInputFlat');
+    TextareaComposer = DefaultTextareaComposer,
+  } = useComponentContext();
   const { channel } = useChatContext('MessageInputFlat');
   const { aiState } = useAIState(channel);
 
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index 9e6cc1f648..9b34e728ae 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -40,6 +40,7 @@ import type {
   SendButtonProps,
   StartRecordingAudioButtonProps,
   StreamedMessageTextProps,
+  TextareaComposerProps,
   ThreadHeaderProps,
   ThreadListItemProps,
   ThreadListItemUIProps,
@@ -199,6 +200,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) */
@@ -213,8 +216,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) */

From c7a5f25357b5e136a7d66ada7cf537ec8f589a06 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Tue, 6 May 2025 11:04:33 +0200
Subject: [PATCH 5/7] fix: remove prop value from additionalTextareaProps

---
 src/components/MessageInput/MessageInput.tsx         | 2 +-
 src/components/TextareaComposer/TextareaComposer.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MessageInput/MessageInput.tsx b/src/components/MessageInput/MessageInput.tsx
index f475b953a2..cef7dae004 100644
--- a/src/components/MessageInput/MessageInput.tsx
+++ b/src/components/MessageInput/MessageInput.tsx
@@ -38,7 +38,7 @@ export type MessageInputProps = {
    */
   additionalTextareaProps?: Omit<
     React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    'defaultValue' | 'style' | 'disabled'
+    'defaultValue' | 'style' | 'disabled' | 'value'
   >;
   /**
    * When enabled, recorded messages won’t be sent immediately.
diff --git a/src/components/TextareaComposer/TextareaComposer.tsx b/src/components/TextareaComposer/TextareaComposer.tsx
index 315744d726..1d465f5a5e 100644
--- a/src/components/TextareaComposer/TextareaComposer.tsx
+++ b/src/components/TextareaComposer/TextareaComposer.tsx
@@ -47,9 +47,9 @@ const configStateSelector = (state: MessageComposerConfig) => ({
 const defaultShouldSubmit = (event: React.KeyboardEvent<HTMLTextAreaElement>) =>
   event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
 
-export type TextComposerProps = Omit<
+export type TextareaComposerProps = Omit<
   TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'style' | 'defaultValue' | 'disabled'
+  'style' | 'defaultValue' | 'disabled' | 'value'
 > & {
   closeSuggestionsOnClickOutside?: boolean;
   containerClassName?: string;
@@ -74,7 +74,7 @@ export const TextareaComposer = ({
   placeholder: placeholderProp,
   shouldSubmit: shouldSubmitProp,
   ...restTextareaProps
-}: TextComposerProps) => {
+}: TextareaComposerProps) => {
   const { t } = useTranslationContext();
   const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();
   const {

From bd88db1dca3ffc141bed3f1f256047819797205e Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Tue, 6 May 2025 11:05:43 +0200
Subject: [PATCH 6/7] refactor: adjust createTextComposerEmojiMiddleware to the
 new client typing

---
 .../middleware/textComposerEmojiMiddleware.ts | 142 +++++++++---------
 1 file changed, 70 insertions(+), 72 deletions(-)

diff --git a/src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts b/src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
index e8423192bd..baae9a4d33 100644
--- a/src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
+++ b/src/plugins/Emojis/middleware/textComposerEmojiMiddleware.ts
@@ -1,9 +1,10 @@
 import mergeWith from 'lodash.mergewith';
 import type {
+  Middleware,
   SearchSourceOptions,
   SearchSourceType,
+  TextComposerMiddlewareExecutorState,
   TextComposerMiddlewareOptions,
-  TextComposerMiddlewareParams,
   TextComposerSuggestion,
 } from 'stream-chat';
 import {
@@ -18,6 +19,9 @@ import type {
   EmojiSearchIndexResult,
 } from '../../../components/MessageInput';
 
+export type EmojiSuggestion<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> =
+  TextComposerSuggestion<T>;
+
 class EmojiSearchSource<
   T extends TextComposerSuggestion<EmojiSearchIndexResult>,
 > extends BaseSearchSource<T> {
@@ -67,6 +71,12 @@ class EmojiSearchSource<
 
 const DEFAULT_OPTIONS: TextComposerMiddlewareOptions = { minChars: 1, trigger: ':' };
 
+export type EmojiMiddleware<T extends EmojiSearchIndexResult = EmojiSearchIndexResult> =
+  Middleware<
+    TextComposerMiddlewareExecutorState<EmojiSuggestion<T>>,
+    'onChange' | 'onSuggestionItemSelect'
+  >;
+
 /**
  * TextComposer middleware for mentions
  * Usage:
@@ -84,102 +94,90 @@ const DEFAULT_OPTIONS: TextComposerMiddlewareOptions = { minChars: 1, trigger: '
  *   }} options
  * @returns
  */
-export const createTextComposerEmojiMiddleware = <
-  T extends EmojiSearchIndexResult = EmojiSearchIndexResult,
->(
+export const createTextComposerEmojiMiddleware = (
   emojiSearchIndex: EmojiSearchIndex,
   options?: Partial<TextComposerMiddlewareOptions>,
-) => {
+): EmojiMiddleware => {
   const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});
   const emojiSearchSource = new EmojiSearchSource(emojiSearchIndex);
   emojiSearchSource.activate();
 
   return {
     id: 'stream-io/emoji-middleware',
-    onChange: async ({ input, nextHandler }: TextComposerMiddlewareParams<T>) => {
-      const { state } = input;
-      if (!state.selection) return nextHandler(input);
-
-      const triggerWithToken = getTriggerCharWithToken({
-        acceptTrailingSpaces: false,
-        text: state.text.slice(0, state.selection.end),
-        trigger: finalOptions.trigger,
-      });
-
-      const triggerWasRemoved =
-        !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
-
-      if (triggerWasRemoved) {
-        const hasSuggestionsForTrigger =
-          input.state.suggestions?.trigger === finalOptions.trigger;
-        const newInput = { ...input };
-        if (hasSuggestionsForTrigger && newInput.state.suggestions) {
-          delete newInput.state.suggestions;
+    // eslint-disable-next-line sort-keys
+    handlers: {
+      onChange: async ({ complete, forward, next, state }) => {
+        if (!state.selection) return forward();
+
+        const triggerWithToken = getTriggerCharWithToken({
+          acceptTrailingSpaces: false,
+          text: state.text.slice(0, state.selection.end),
+          trigger: finalOptions.trigger,
+        });
+
+        const triggerWasRemoved =
+          !triggerWithToken || triggerWithToken.length < finalOptions.minChars;
+
+        if (triggerWasRemoved) {
+          const hasSuggestionsForTrigger =
+            state.suggestions?.trigger === finalOptions.trigger;
+          const newState = { ...state };
+          if (hasSuggestionsForTrigger && newState.suggestions) {
+            delete newState.suggestions;
+          }
+          return next(newState);
         }
-        return nextHandler(newInput);
-      }
 
-      const newSearchTriggerred =
-        triggerWithToken && triggerWithToken === finalOptions.trigger;
+        const newSearchTriggerred =
+          triggerWithToken && triggerWithToken === finalOptions.trigger;
 
-      if (newSearchTriggerred) {
-        emojiSearchSource.resetStateAndActivate();
-      }
+        if (newSearchTriggerred) {
+          emojiSearchSource.resetStateAndActivate();
+        }
 
-      const textWithReplacedWord = await replaceWordWithEntity({
-        caretPosition: state.selection.end,
-        getEntityString: async (word: string) => {
-          const { items } = await emojiSearchSource.query(word);
+        const textWithReplacedWord = await replaceWordWithEntity({
+          caretPosition: state.selection.end,
+          getEntityString: async (word: string) => {
+            const { items } = await emojiSearchSource.query(word);
 
-          const emoji = items
-            .filter(Boolean)
-            .slice(0, 10)
-            .find(({ emoticons }) => !!emoticons?.includes(word));
+            const emoji = items
+              .filter(Boolean)
+              .slice(0, 10)
+              .find(({ emoticons }) => !!emoticons?.includes(word));
 
-          if (!emoji) return null;
+            if (!emoji) return null;
 
-          const [firstSkin] = emoji.skins ?? [];
+            const [firstSkin] = emoji.skins ?? [];
 
-          return emoji.native ?? firstSkin.native;
-        },
-        text: state.text,
-      });
+            return emoji.native ?? firstSkin.native;
+          },
+          text: state.text,
+        });
 
-      if (textWithReplacedWord !== state.text) {
-        return {
-          state: {
+        if (textWithReplacedWord !== state.text) {
+          return complete({
             ...state,
             suggestions: undefined, // to prevent the TextComposerMiddlewareExecutor to run the first page query
             text: textWithReplacedWord,
-          },
-          stop: true, // Stop other middleware from processing '@' character
-        };
-      }
+          });
+        }
 
-      return {
-        state: {
+        return complete({
           ...state,
           suggestions: {
             query: triggerWithToken.slice(1),
             searchSource: emojiSearchSource,
             trigger: finalOptions.trigger,
           },
-        },
-        stop: true, // Stop other middleware from processing '@' character
-      };
-    },
-    onSuggestionItemSelect: ({
-      input,
-      nextHandler,
-      selectedSuggestion,
-    }: TextComposerMiddlewareParams<T>) => {
-      const { state } = input;
-      if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
-        return nextHandler(input);
-
-      emojiSearchSource.resetStateAndActivate();
-      return Promise.resolve({
-        state: {
+        });
+      },
+      onSuggestionItemSelect: ({ complete, forward, state }) => {
+        const { selectedSuggestion } = state.change ?? {};
+        if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
+          return forward();
+
+        emojiSearchSource.resetStateAndActivate();
+        return complete({
           ...state,
           ...insertItemWithTrigger({
             insertText: `${'native' in selectedSuggestion ? selectedSuggestion.native : ''} `,
@@ -188,8 +186,8 @@ export const createTextComposerEmojiMiddleware = <
             trigger: finalOptions.trigger,
           }),
           suggestions: undefined, // Clear suggestions after selection
-        },
-      });
+        });
+      },
     },
   };
 };

From c2aebc2d76364341031fde3ab9cf91488f098525 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Tue, 6 May 2025 15:32:36 +0200
Subject: [PATCH 7/7] test: fix flaky test

---
 src/components/Channel/__tests__/Channel.test.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Channel/__tests__/Channel.test.js b/src/components/Channel/__tests__/Channel.test.js
index fff894a092..341f51827c 100644
--- a/src/components/Channel/__tests__/Channel.test.js
+++ b/src/components/Channel/__tests__/Channel.test.js
@@ -32,6 +32,7 @@ import { Thread } from '../../Thread';
 import { MessageProvider } from '../../../context';
 import { MessageActionsBox } from '../../MessageActions';
 import { DEFAULT_THREAD_PAGE_SIZE } from '../../../constants/limits';
+import { generateMessageDraft } from '../../../mock-builders/generator/messageDraft';
 
 jest.mock('../../Loading', () => ({
   LoadingErrorIndicator: jest.fn(() => <div />),
@@ -173,6 +174,9 @@ describe('Channel', () => {
       pinnedMessages,
       user,
     }));
+    jest.spyOn(channel, 'getDraft').mockResolvedValue({
+      draft: generateMessageDraft({ channel, channel_cid: channel.cid }),
+    });
   });
 
   afterEach(() => {