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

package/dist/index.browser.cjs

@@ -17666,11 +17666,11 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/Attachment/Attachment.tsx
-var import_react254 = __toESM(require("react"));
-var import_stream_chat10 = require("stream-chat");
+var import_react255 = __toESM(require("react"));
+var import_stream_chat11 = require("stream-chat");
 
 // src/components/Attachment/AttachmentContainer.tsx
-var import_react253 = __toESM(require("react"));
+var import_react254 = __toESM(require("react"));
 var import_react_player2 = __toESM(require("react-player"));
 var import_clsx65 = __toESM(require("clsx"));
 var linkify = __toESM(require("linkifyjs"));
@@ -18915,7 +18915,7 @@ var UnMemoizedAudio = (props) => {
 var Audio = import_react29.default.memo(UnMemoizedAudio);
 
 // src/components/Attachment/VoiceRecording.tsx
-var import_react249 = __toESM(require("react"));
+var import_react250 = __toESM(require("react"));
 
 // src/components/ReactFileUtilities/FileIcon/FileIcon.tsx
 var import_react31 = __toESM(require("react"));
@@ -19878,7 +19878,7 @@ var FileIcon = (props) => {
 // src/components/ReactFileUtilities/UploadButton.tsx
 var import_clsx63 = __toESM(require("clsx"));
 var import_nanoid5 = require("nanoid");
-var import_react248 = __toESM(require("react"));
+var import_react249 = __toESM(require("react"));
 
 // src/components/ReactFileUtilities/utils.ts
 var import_react32 = require("react");
@@ -39495,7 +39495,7 @@ var PollOptionWithLatestVotes = ({
 // src/components/Poll/PollActions/PollResults/PollResults.tsx
 var pollStateSelector10 = (nextValue) => ({
   name: nextValue.name,
-  options: nextValue.options,
+  options: [...nextValue.options],
   vote_counts_by_option: nextValue.vote_counts_by_option
 });
 var PollResults = ({ close }) => {
@@ -39764,9 +39764,15 @@ var MultipleAnswersField = () => {
             pollComposer.handleFieldBlur("max_votes_allowed");
           },
           onChange: (e) => {
-            pollComposer.updateFields({
-              max_votes_allowed: e.target.value
-            });
+            const nativeFieldValidation = !e.target.validity.valid ? {
+              max_votes_allowed: t("Only numbers are allowed")
+            } : void 0;
+            pollComposer.updateFields(
+              {
+                max_votes_allowed: !nativeFieldValidation ? e.target.value : pollComposer.max_votes_allowed
+              },
+              nativeFieldValidation
+            );
           },
           placeholder: t("Maximum number of votes (from 2 to 10)"),
           type: "number",
@@ -40833,6 +40839,7 @@ var de_default = {
   "Nobody will be able to vote in this poll anymore.": "Niemand kann mehr in dieser Umfrage abstimmen.",
   "Nothing yet...": "Noch nichts...",
   Ok: "Ok",
+  "Only numbers are allowed": "Nur Zahlen sind erlaubt",
   "Open emoji picker": "Emoji-Auswahl \xF6ffnen",
   "Option already exists": "Option existiert bereits",
   Options: "Optionen",
@@ -41045,6 +41052,7 @@ var en_default = {
   "Nobody will be able to vote in this poll anymore.": "Nobody will be able to vote in this poll anymore.",
   "Nothing yet...": "Nothing yet...",
   Ok: "Ok",
+  "Only numbers are allowed": "Only numbers are allowed",
   "Open emoji picker": "Open emoji picker",
   "Option already exists": "Option already exists",
   Options: "Options",
@@ -41247,6 +41255,7 @@ var es_default = {
   "Nobody will be able to vote in this poll anymore.": "Nadie podr\xE1 votar en esta encuesta.",
   "Nothing yet...": "Nada a\xFAn...",
   Ok: "Ok",
+  "Only numbers are allowed": "Solo se permiten n\xFAmeros",
   "Open emoji picker": "Abrir el selector de emojis",
   "Option already exists": "La opci\xF3n ya existe",
   Options: "Opciones",
@@ -41467,6 +41476,7 @@ var fr_default = {
   "Nobody will be able to vote in this poll anymore.": "Personne ne pourra plus voter dans ce sondage.",
   "Nothing yet...": "Rien pour l'instant...",
   Ok: "D'accord",
+  "Only numbers are allowed": "Seuls les chiffres sont autoris\xE9s",
   "Open emoji picker": "Ouvrir le s\xE9lecteur d'\xE9mojis",
   "Option already exists": "L'option existe d\xE9j\xE0",
   Options: "Options",
@@ -41688,6 +41698,7 @@ var hi_default = {
   "Nobody will be able to vote in this poll anymore.": "\u0905\u092C \u0915\u094B\u0908 \u092D\u0940 \u0907\u0938 \u092E\u0924\u0926\u093E\u0928 \u092E\u0947\u0902 \u092E\u0924\u0926\u093E\u0928 \u0928\u0939\u0940\u0902 \u0915\u0930 \u0938\u0915\u0947\u0917\u093E\u0964",
   "Nothing yet...": "\u0915\u094B\u0908 \u092E\u0948\u0938\u0947\u091C \u0928\u0939\u0940\u0902 \u0939\u0948",
   Ok: "\u0920\u0940\u0915 \u0939\u0948",
+  "Only numbers are allowed": "\u0915\u0947\u0935\u0932 \u0938\u0902\u0916\u094D\u092F\u093E\u090F\u0901 \u0905\u0928\u0941\u092E\u0924 \u0939\u0948\u0902",
   "Open emoji picker": "\u0907\u092E\u094B\u091C\u0940 \u092A\u093F\u0915\u0930 \u0916\u094B\u0932\u093F\u092F\u0947",
   "Option already exists": "\u0935\u093F\u0915\u0932\u094D\u092A \u092A\u0939\u0932\u0947 \u0938\u0947 \u092E\u094C\u091C\u0942\u0926 \u0939\u0948",
   Options: "\u0935\u093F\u0915\u0932\u094D\u092A",
@@ -41900,6 +41911,7 @@ var it_default = {
   "Nobody will be able to vote in this poll anymore.": "Nessuno potr\xE0 pi\xF9 votare in questo sondaggio.",
   "Nothing yet...": "Ancora niente...",
   Ok: "Ok",
+  "Only numbers are allowed": "Sono consentiti solo numeri",
   "Open emoji picker": "Apri il selettore di emoji",
   "Option already exists": "L'opzione esiste gi\xE0",
   Options: "Opzioni",
@@ -42120,6 +42132,7 @@ var ja_default = {
   "Nobody will be able to vote in this poll anymore.": "\u3053\u306E\u6295\u7968\u3067\u306F\u3001\u8AB0\u3082\u6295\u7968\u3067\u304D\u306A\u304F\u306A\u308A\u307E\u3059\u3002",
   "Nothing yet...": "\u307E\u3060\u4F55\u3082\u3042\u308A\u307E\u305B\u3093...",
   Ok: "OK",
+  "Only numbers are allowed": "\u6570\u5B57\u306E\u307F\u8A31\u53EF\u3055\u308C\u3066\u3044\u307E\u3059",
   "Open emoji picker": "\u7D75\u6587\u5B57\u30D4\u30C3\u30AB\u30FC\u3092\u958B\u304F",
   "Option already exists": "\u30AA\u30D7\u30B7\u30E7\u30F3\u306F\u65E2\u306B\u5B58\u5728\u3057\u307E\u3059",
   Options: "\u30AA\u30D7\u30B7\u30E7\u30F3",
@@ -42326,7 +42339,8 @@ var ko_default = {
   "Nobody will be able to vote in this poll anymore.": "\uC774 \uD22C\uD45C\uC5D0 \uB354 \uC774\uC0C1 \uC544\uBB34\uB3C4 \uD22C\uD45C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.",
   "Nothing yet...": "\uC544\uC9C1 \uC544\uBB34\uAC83\uB3C4...",
   Ok: "\uD655\uC778",
-  "Open emoji picker": "\uC774\uBAA8\uD2F0\uCF58 \uC120\uD0DD\uAE30 \uC5F4\uAE30",
+  "Only numbers are allowed": "\uC22B\uC790\uB9CC \uC785\uB825 \uAC00\uB2A5\uD569\uB2C8\uB2E4",
+  "Open emoji picker": "\uC774\uBAA8\uC9C0 \uC120\uD0DD\uAE30 \uC5F4\uAE30",
   "Option already exists": "\uC635\uC158\uC774 \uC774\uBBF8 \uC874\uC7AC\uD569\uB2C8\uB2E4",
   Options: "\uC635\uC158",
   "People matching": "\uC77C\uCE58\uD558\uB294 \uC0AC\uB78C",
@@ -42532,7 +42546,8 @@ var nl_default = {
   "Nobody will be able to vote in this poll anymore.": "Niemand kan meer stemmen in deze peiling.",
   "Nothing yet...": "Nog niets ...",
   Ok: "Ok\xE9",
-  "Open emoji picker": "Open emojipicker",
+  "Only numbers are allowed": "Alleen nummers zijn toegestaan",
+  "Open emoji picker": "Emoji-kiezer openen",
   "Option already exists": "Optie bestaat al",
   Options: "Opties",
   "People matching": "Mensen die matchen",
@@ -42744,6 +42759,7 @@ var pt_default = {
   "Nobody will be able to vote in this poll anymore.": "Ningu\xE9m mais poder\xE1 votar nesta pesquisa.",
   "Nothing yet...": "Nada ainda...",
   Ok: "Ok",
+  "Only numbers are allowed": "Apenas n\xFAmeros s\xE3o permitidos",
   "Open emoji picker": "Abrir seletor de emoji",
   "Option already exists": "Op\xE7\xE3o j\xE1 existe",
   Options: "Op\xE7\xF5es",
@@ -42964,6 +42980,7 @@ var ru_default = {
   "Nobody will be able to vote in this poll anymore.": "\u041D\u0438\u043A\u0442\u043E \u0431\u043E\u043B\u044C\u0448\u0435 \u043D\u0435 \u0441\u043C\u043E\u0436\u0435\u0442 \u0433\u043E\u043B\u043E\u0441\u043E\u0432\u0430\u0442\u044C \u0432 \u044D\u0442\u043E\u043C \u043E\u043F\u0440\u043E\u0441\u0435.",
   "Nothing yet...": "\u041F\u043E\u043A\u0430 \u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435\u0442...",
   Ok: "\u041E\u043A",
+  "Only numbers are allowed": "\u0420\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u044B \u0442\u043E\u043B\u044C\u043A\u043E \u0446\u0438\u0444\u0440\u044B",
   "Open emoji picker": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432\u044B\u0431\u043E\u0440 \u0441\u043C\u0430\u0439\u043B\u043E\u0432",
   "Option already exists": "\u0412\u0430\u0440\u0438\u0430\u043D\u0442 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442",
   Options: "\u0412\u0430\u0440\u0438\u0430\u043D\u0442\u044B",
@@ -43192,6 +43209,7 @@ var tr_default = {
   "Nobody will be able to vote in this poll anymore.": "Art\u0131k bu ankette kimse oy kullanamayacak.",
   "Nothing yet...": "\u015Eimdilik hi\xE7bir \u015Fey...",
   Ok: "Tamam",
+  "Only numbers are allowed": "Sadece say\u0131lar kullan\u0131labilir",
   "Open emoji picker": "Emoji klavyesini a\xE7",
   "Option already exists": "Se\xE7enek zaten mevcut",
   Options: "Se\xE7enekler",
@@ -46654,7 +46672,7 @@ var AttachmentSelector = ({
 
 // src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx
 var import_react228 = __toESM(require("react"));
-var import_stream_chat8 = require("stream-chat");
+var import_stream_chat9 = require("stream-chat");
 
 // src/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
 var import_react211 = __toESM(require("react"));
@@ -47796,55 +47814,40 @@ var useCooldownTimer = () => {
   };
 };
 
-// src/components/MessageInput/hooks/useMessageInputText.ts
+// src/components/MessageInput/hooks/useTextareaRef.ts
 var import_react224 = require("react");
-var messageComposerStateSelector = (state) => ({
-  text: state.text
-});
-var useMessageInputText = (props) => {
+var useTextareaRef = (props) => {
   const { focus } = props;
-  const messageComposer = useMessageComposer();
   const textareaRef = (0, import_react224.useRef)(void 0);
-  const { text: text8 } = useStateStore(
-    messageComposer.textComposer.state,
-    messageComposerStateSelector
-  );
   (0, import_react224.useEffect)(() => {
     if (focus && textareaRef.current) {
       textareaRef.current.focus();
     }
   }, [focus]);
-  const newCursorPosition = (0, import_react224.useRef)(void 0);
-  const insertText = (0, import_react224.useCallback)(
-    (textToInsert) => {
-      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]
-  );
-  (0, import_react224.useEffect)(() => {
-    const textareaElement = textareaRef.current;
-    if (textareaElement && newCursorPosition.current !== void 0) {
-      textareaElement.selectionStart = newCursorPosition.current;
-      textareaElement.selectionEnd = newCursorPosition.current;
-      newCursorPosition.current = void 0;
-    }
-  }, [text8, newCursorPosition]);
   return {
-    insertText,
     textareaRef
   };
 };
 
 // src/components/MessageInput/hooks/useSubmitHandler.ts
 var import_react225 = require("react");
+var import_stream_chat8 = require("stream-chat");
+var 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);
+  };
+};
 var useSubmitHandler = (props) => {
   const { clearEditingState, overrideSubmitHandler } = props;
   const { addNotification, editMessage, sendMessage } = useChannelActionContext("useSubmitHandler");
@@ -47864,7 +47867,17 @@ var useSubmitHandler = (props) => {
           addNotification(t("Edit message request failed"), "error");
         }
       } else {
+        const restoreComposerStateSnapshot = takeStateSnapshot(messageComposer);
         try {
+          const sentPollMessage = !!message.poll_id;
+          if (sentPollMessage) {
+            messageComposer.state.partialNext({
+              id: import_stream_chat8.MessageComposer.generateId(),
+              pollId: null
+            });
+          } else {
+            messageComposer.clear();
+          }
           if (overrideSubmitHandler) {
             await overrideSubmitHandler({
               cid: messageComposer.channel.cid,
@@ -47875,10 +47888,10 @@ var 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");
         }
       }
@@ -47898,8 +47911,8 @@ var useSubmitHandler = (props) => {
 
 // src/components/MessageInput/hooks/usePasteHandler.ts
 var import_react226 = require("react");
-var usePasteHandler = (insertText) => {
-  const { attachmentManager } = useMessageComposer();
+var usePasteHandler = () => {
+  const { attachmentManager, textComposer } = useMessageComposer();
   const onPaste = (0, import_react226.useCallback)(
     (clipboardEvent) => {
       (async (event) => {
@@ -47920,13 +47933,13 @@ var 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 };
 };
@@ -47995,7 +48008,7 @@ var useMediaRecorder = ({
 // src/components/MessageInput/hooks/useMessageInputControls.ts
 var useMessageInputControls = (props) => {
   const { asyncMessagesMultiSendEnabled, audioRecordingConfig, audioRecordingEnabled } = props;
-  const { insertText, textareaRef } = useMessageInputText(props);
+  const { textareaRef } = useTextareaRef(props);
   const { handleSubmit } = useSubmitHandler(props);
   const recordingController = useMediaRecorder({
     asyncMessagesMultiSendEnabled,
@@ -48003,10 +48016,9 @@ var useMessageInputControls = (props) => {
     handleSubmit,
     recordingConfig: audioRecordingConfig
   });
-  const { onPaste } = usePasteHandler(insertText);
+  const { onPaste } = usePasteHandler();
   return {
     handleSubmit,
-    insertText,
     onPaste,
     recordingController,
     textareaRef
@@ -48040,8 +48052,8 @@ var AttachmentPreviewList = ({
       "data-testid": "attachment-list-scroll-container"
     },
     attachments.map((attachment) => {
-      if ((0, import_stream_chat8.isScrapedContent)(attachment)) return null;
-      if ((0, import_stream_chat8.isLocalVoiceRecordingAttachment)(attachment)) {
+      if ((0, import_stream_chat9.isScrapedContent)(attachment)) return null;
+      if ((0, import_stream_chat9.isLocalVoiceRecordingAttachment)(attachment)) {
         return /* @__PURE__ */ import_react228.default.createElement(
           VoiceRecordingPreview2,
           {
@@ -48051,7 +48063,7 @@ var AttachmentPreviewList = ({
             removeAttachments: messageComposer.attachmentManager.removeAttachments
           }
         );
-      } else if ((0, import_stream_chat8.isLocalAudioAttachment)(attachment)) {
+      } else if ((0, import_stream_chat9.isLocalAudioAttachment)(attachment)) {
         return /* @__PURE__ */ import_react228.default.createElement(
           AudioAttachmentPreview,
           {
@@ -48061,7 +48073,7 @@ var AttachmentPreviewList = ({
             removeAttachments: messageComposer.attachmentManager.removeAttachments
           }
         );
-      } else if ((0, import_stream_chat8.isLocalVideoAttachment)(attachment)) {
+      } else if ((0, import_stream_chat9.isLocalVideoAttachment)(attachment)) {
         return /* @__PURE__ */ import_react228.default.createElement(
           VideoAttachmentPreview,
           {
@@ -48071,7 +48083,7 @@ var AttachmentPreviewList = ({
             removeAttachments: messageComposer.attachmentManager.removeAttachments
           }
         );
-      } else if ((0, import_stream_chat8.isLocalImageAttachment)(attachment)) {
+      } else if ((0, import_stream_chat9.isLocalImageAttachment)(attachment)) {
         return /* @__PURE__ */ import_react228.default.createElement(
           ImageAttachmentPreview2,
           {
@@ -48081,7 +48093,7 @@ var AttachmentPreviewList = ({
             removeAttachments: messageComposer.attachmentManager.removeAttachments
           }
         );
-      } else if ((0, import_stream_chat8.isLocalFileAttachment)(attachment)) {
+      } else if ((0, import_stream_chat9.isLocalFileAttachment)(attachment)) {
         return /* @__PURE__ */ import_react228.default.createElement(
           FileAttachmentPreview2,
           {
@@ -48091,7 +48103,7 @@ var AttachmentPreviewList = ({
             removeAttachments: messageComposer.attachmentManager.removeAttachments
           }
         );
-      } else if ((0, import_stream_chat8.isLocalAttachment)(attachment)) {
+      } else if ((0, import_stream_chat9.isLocalAttachment)(attachment)) {
         return /* @__PURE__ */ import_react228.default.createElement(
           UnsupportedAttachmentPreview2,
           {
@@ -48138,13 +48150,13 @@ var CooldownTimer = ({ cooldownInterval }) => {
 };
 
 // src/components/MessageInput/EditMessageForm.tsx
-var import_react247 = __toESM(require("react"));
+var import_react248 = __toESM(require("react"));
 
 // src/components/MessageInput/MessageInput.tsx
-var import_react246 = __toESM(require("react"));
+var import_react247 = __toESM(require("react"));
 
 // src/components/MessageInput/MessageInputFlat.tsx
-var import_react244 = __toESM(require("react"));
+var import_react245 = __toESM(require("react"));
 
 // src/components/MessageInput/SendButton.tsx
 var import_react231 = __toESM(require("react"));
@@ -48261,13 +48273,13 @@ var QuotedMessagePreview = ({
 // src/components/MessageInput/LinkPreviewList.tsx
 var import_clsx57 = __toESM(require("clsx"));
 var import_react234 = __toESM(require("react"));
-var import_stream_chat9 = require("stream-chat");
+var import_stream_chat10 = require("stream-chat");
 var linkPreviewsManagerStateSelector = (state) => ({
   linkPreviews: Array.from(state.previews.values()).filter(
-    (preview) => import_stream_chat9.LinkPreviewsManager.previewIsLoaded(preview) || import_stream_chat9.LinkPreviewsManager.previewIsLoading(preview)
+    (preview) => import_stream_chat10.LinkPreviewsManager.previewIsLoaded(preview) || import_stream_chat10.LinkPreviewsManager.previewIsLoading(preview)
   )
 });
-var messageComposerStateSelector2 = (state) => ({
+var messageComposerStateSelector = (state) => ({
   quotedMessage: state.quotedMessage
 });
 var LinkPreviewList = () => {
@@ -48275,7 +48287,7 @@ var LinkPreviewList = () => {
   const { linkPreviewsManager } = messageComposer;
   const { quotedMessage } = useStateStore(
     messageComposer.state,
-    messageComposerStateSelector2
+    messageComposerStateSelector
   );
   const { linkPreviews } = useStateStore(
     linkPreviewsManager.state,
@@ -48289,13 +48301,13 @@ var LinkPreviewCard = ({ linkPreview }) => {
   const { linkPreviewsManager } = useMessageComposer();
   const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
   const [referenceElement, setReferenceElement] = (0, import_react234.useState)(null);
-  if (!import_stream_chat9.LinkPreviewsManager.previewIsLoaded(linkPreview) && !import_stream_chat9.LinkPreviewsManager.previewIsLoading(linkPreview))
+  if (!import_stream_chat10.LinkPreviewsManager.previewIsLoaded(linkPreview) && !import_stream_chat10.LinkPreviewsManager.previewIsLoading(linkPreview))
     return null;
   return /* @__PURE__ */ import_react234.default.createElement(
     "div",
     {
       className: (0, import_clsx57.default)("str-chat__link-preview-card", {
-        "str-chat__link-preview-card--loading": import_stream_chat9.LinkPreviewsManager.previewIsLoading(linkPreview)
+        "str-chat__link-preview-card--loading": import_stream_chat10.LinkPreviewsManager.previewIsLoading(linkPreview)
       }),
       "data-testid": "link-preview-card"
     },
@@ -48501,8 +48513,10 @@ var SuggestionList = ({
 };
 
 // src/components/TextareaComposer/TextareaComposer.tsx
+var import_lodash19 = __toESM(require("lodash.debounce"));
 var import_clsx61 = __toESM(require("clsx"));
-var import_react240 = __toESM(require("react"));
+var import_react240 = require("react");
+var import_react241 = __toESM(require("react"));
 var import_react_textarea_autosize = __toESM(require("react-textarea-autosize"));
 var textComposerStateSelector2 = (state) => ({
   selection: state.selection,
@@ -48521,33 +48535,32 @@ var 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,
+  maxRows: maxRowsProp,
+  minRows: minRowsProp,
   onBlur,
   onChange,
   onKeyDown,
   onScroll,
+  onSelect,
   placeholder: placeholderProp,
   shouldSubmit: shouldSubmitProp,
-  ...restProps
+  ...restTextareaProps
 }) => {
   const { t } = useTranslationContext();
   const { AutocompleteSuggestionList = SuggestionList } = 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 maxRows = maxRowsProp ?? maxRowsContext ?? 1;
+  const minRows = minRowsProp ?? minRowsContext;
   const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
   const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
   const messageComposer = useMessageComposer();
@@ -48558,10 +48571,10 @@ var TextareaComposer = ({
   );
   const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
   const { isLoadingItems } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector2) ?? {};
-  const containerRef = (0, import_react240.useRef)(null);
-  const [focusedItemIndex, setFocusedItemIndex] = (0, import_react240.useState)(0);
-  const [isComposing, setIsComposing] = (0, import_react240.useState)(false);
-  const changeHandler = (0, import_react240.useCallback)(
+  const containerRef = (0, import_react241.useRef)(null);
+  const [focusedItemIndex, setFocusedItemIndex] = (0, import_react241.useState)(0);
+  const [isComposing, setIsComposing] = (0, import_react241.useState)(false);
+  const changeHandler = (0, import_react241.useCallback)(
     (e) => {
       if (onChange) {
         onChange(e);
@@ -48578,25 +48591,23 @@ var TextareaComposer = ({
     },
     [onChange, textComposer, textareaRef]
   );
-  const onCompositionEnd = (0, import_react240.useCallback)(() => {
+  const onCompositionEnd = (0, import_react241.useCallback)(() => {
     setIsComposing(false);
   }, []);
-  const onCompositionStart = (0, import_react240.useCallback)(() => {
+  const onCompositionStart = (0, import_react241.useCallback)(() => {
     setIsComposing(true);
   }, []);
-  const keyDownHandler = (0, import_react240.useCallback)(
+  const keyDownHandler = (0, import_react241.useCallback)(
     (event) => {
       if (onKeyDown) {
         onKeyDown(event);
         return;
       }
-      if (event.key === "Enter") {
-        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") {
@@ -48638,7 +48649,7 @@ var TextareaComposer = ({
       textareaRef
     ]
   );
-  const scrollHandler = (0, import_react240.useCallback)(
+  const scrollHandler = (0, import_react241.useCallback)(
     (event) => {
       if (onScroll) {
         onScroll(event);
@@ -48648,18 +48659,32 @@ var TextareaComposer = ({
     },
     [onScroll, textComposer]
   );
-  (0, import_react240.useEffect)(() => {
+  const setSelectionDebounced = (0, import_react240.useMemo)(
+    () => (0, import_lodash19.default)(
+      (e) => {
+        onSelect?.(e);
+        textComposer.setSelection({
+          end: e.target.selectionEnd,
+          start: e.target.selectionStart
+        });
+      },
+      100,
+      { leading: false, trailing: true }
+    ),
+    [onSelect, textComposer]
+  );
+  (0, import_react241.useEffect)(() => {
     if (textareaRef.current && !isComposing) {
       textareaRef.current.selectionStart = selection.start;
       textareaRef.current.selectionEnd = selection.end;
     }
   }, [text8, textareaRef, selection.start, selection.end, isComposing]);
-  (0, import_react240.useEffect)(() => {
+  (0, import_react241.useEffect)(() => {
     if (textComposer.suggestions) {
       setFocusedItemIndex(0);
     }
   }, [textComposer.suggestions]);
-  return /* @__PURE__ */ import_react240.default.createElement(
+  return /* @__PURE__ */ import_react241.default.createElement(
     "div",
     {
       className: (0, import_clsx61.default)(
@@ -48672,10 +48697,10 @@ var TextareaComposer = ({
       ),
       ref: containerRef
     },
-    /* @__PURE__ */ import_react240.default.createElement(
+    /* @__PURE__ */ import_react241.default.createElement(
       import_react_textarea_autosize.default,
       {
-        ...restProps,
+        ...{ ...additionalTextareaProps, ...restTextareaProps },
         "aria-label": cooldownRemaining ? t("Slow Mode ON") : placeholder,
         className: (0, import_clsx61.default)(
           "rta__textarea",
@@ -48684,7 +48709,8 @@ var TextareaComposer = ({
         ),
         "data-testid": "message-input",
         disabled: !enabled || !!cooldownRemaining,
-        maxRows: grow ? maxRows : 1,
+        maxRows,
+        minRows,
         onBlur,
         onChange: changeHandler,
         onCompositionEnd,
@@ -48692,6 +48718,7 @@ var TextareaComposer = ({
         onKeyDown: keyDownHandler,
         onPaste,
         onScroll: scrollHandler,
+        onSelect: setSelectionDebounced,
         placeholder: placeholder || t("Type your message"),
         ref: (ref) => {
           textareaRef.current = ref;
@@ -48699,7 +48726,7 @@ var TextareaComposer = ({
         value: text8
       }
     ),
-    !isComposing && /* @__PURE__ */ import_react240.default.createElement(
+    !isComposing && /* @__PURE__ */ import_react241.default.createElement(
       AutocompleteSuggestionList,
       {
         className: listClassName,
@@ -48712,10 +48739,10 @@ var TextareaComposer = ({
 };
 
 // src/components/AIStateIndicator/AIStateIndicator.tsx
-var import_react242 = __toESM(require("react"));
+var import_react243 = __toESM(require("react"));
 
 // src/components/AIStateIndicator/hooks/useAIState.ts
-var import_react241 = require("react");
+var import_react242 = require("react");
 var AIStates = {
   Error: "AI_STATE_ERROR",
   ExternalSources: "AI_STATE_EXTERNAL_SOURCES",
@@ -48724,8 +48751,8 @@ var AIStates = {
   Thinking: "AI_STATE_THINKING"
 };
 var useAIState = (channel) => {
-  const [aiState, setAiState] = (0, import_react241.useState)(AIStates.Idle);
-  (0, import_react241.useEffect)(() => {
+  const [aiState, setAiState] = (0, import_react242.useState)(AIStates.Idle);
+  (0, import_react242.useEffect)(() => {
     if (!channel) {
       return;
     }
@@ -48762,21 +48789,21 @@ var AIStateIndicator = ({
     [AIStates.Thinking]: t("Thinking..."),
     [AIStates.Generating]: t("Generating...")
   };
-  return aiState in allowedStates ? /* @__PURE__ */ import_react242.default.createElement("div", { className: "str-chat__ai-state-indicator-container" }, /* @__PURE__ */ import_react242.default.createElement("p", { className: "str-chat__ai-state-indicator-text" }, allowedStates[aiState])) : null;
+  return aiState in allowedStates ? /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__ai-state-indicator-container" }, /* @__PURE__ */ import_react243.default.createElement("p", { className: "str-chat__ai-state-indicator-text" }, allowedStates[aiState])) : null;
 };
 
 // src/components/MessageInput/WithDragAndDropUpload.tsx
-var import_react243 = __toESM(require("react"));
+var import_react244 = __toESM(require("react"));
 var import_react_dropzone = require("react-dropzone");
 var import_clsx62 = __toESM(require("clsx"));
-var DragAndDropUploadContext = import_react243.default.createContext({
+var DragAndDropUploadContext = import_react244.default.createContext({
   subscribeToDrop: null
 });
-var useDragAndDropUploadContext = () => (0, import_react243.useContext)(DragAndDropUploadContext);
+var useDragAndDropUploadContext = () => (0, import_react244.useContext)(DragAndDropUploadContext);
 var useRegisterDropHandlers = () => {
   const { subscribeToDrop } = useDragAndDropUploadContext();
   const messageComposer = useMessageComposer();
-  (0, import_react243.useEffect)(() => {
+  (0, import_react244.useEffect)(() => {
     const unsubscribe = subscribeToDrop?.(messageComposer.attachmentManager.uploadFiles);
     return unsubscribe;
   }, [subscribeToDrop, messageComposer]);
@@ -48791,7 +48818,7 @@ var WithDragAndDropUpload = ({
   component: Component2 = "div",
   style
 }) => {
-  const dropHandlersRef = (0, import_react243.useRef)(/* @__PURE__ */ new Set());
+  const dropHandlersRef = (0, import_react244.useRef)(/* @__PURE__ */ new Set());
   const { t } = useTranslationContext();
   const messageInputContext = useMessageInputContext();
   const dragAndDropUploadContext = useDragAndDropUploadContext();
@@ -48802,20 +48829,20 @@ var WithDragAndDropUpload = ({
     attachmentManagerConfigStateSelector
   );
   const isWithinMessageInputContext = Object.keys(messageInputContext).length > 0;
-  const accept = (0, import_react243.useMemo)(
+  const accept = (0, import_react244.useMemo)(
     () => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
       mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
       return mediaTypeMap;
     }, {}),
     [acceptedFiles]
   );
-  const subscribeToDrop = (0, import_react243.useCallback)((fn) => {
+  const subscribeToDrop = (0, import_react244.useCallback)((fn) => {
     dropHandlersRef.current.add(fn);
     return () => {
       dropHandlersRef.current.delete(fn);
     };
   }, []);
-  const handleDrop = (0, import_react243.useCallback)((files) => {
+  const handleDrop = (0, import_react244.useCallback)((files) => {
     dropHandlersRef.current.forEach((fn) => fn(files));
   }, []);
   const { getRootProps, isDragActive, isDragReject } = (0, import_react_dropzone.useDropzone)({
@@ -48828,24 +48855,24 @@ var WithDragAndDropUpload = ({
     onDrop: isWithinMessageInputContext ? messageComposer.attachmentManager.uploadFiles : handleDrop
   });
   if (dragAndDropUploadContext.subscribeToDrop !== null) {
-    return /* @__PURE__ */ import_react243.default.createElement(Component2, { className }, children);
+    return /* @__PURE__ */ import_react244.default.createElement(Component2, { className }, children);
   }
-  return /* @__PURE__ */ import_react243.default.createElement(
+  return /* @__PURE__ */ import_react244.default.createElement(
     DragAndDropUploadContext.Provider,
     {
       value: {
         subscribeToDrop
       }
     },
-    /* @__PURE__ */ import_react243.default.createElement(Component2, { ...getRootProps({ className, style }) }, isDragActive && /* @__PURE__ */ import_react243.default.createElement(
+    /* @__PURE__ */ import_react244.default.createElement(Component2, { ...getRootProps({ className, style }) }, isDragActive && /* @__PURE__ */ import_react244.default.createElement(
       "div",
       {
         className: (0, import_clsx62.default)("str-chat__dropzone-container", {
           "str-chat__dropzone-container--not-accepted": isDragReject
         })
       },
-      !isDragReject && /* @__PURE__ */ import_react243.default.createElement("p", null, t("Drag your files here")),
-      isDragReject && /* @__PURE__ */ import_react243.default.createElement("p", null, t("Some of the files will not be accepted"))
+      !isDragReject && /* @__PURE__ */ import_react244.default.createElement("p", null, t("Drag your files here")),
+      isDragReject && /* @__PURE__ */ import_react244.default.createElement("p", null, t("Some of the files will not be accepted"))
     ), children)
   );
 };
@@ -48872,37 +48899,38 @@ var MessageInputFlat = () => {
     RecordingPermissionDeniedNotification: RecordingPermissionDeniedNotification2 = RecordingPermissionDeniedNotification,
     SendButton: SendButton2 = SendButton,
     StartRecordingAudioButton: StartRecordingAudioButton2 = StartRecordingAudioButton,
-    StopAIGenerationButton: StopAIGenerationButtonOverride
-  } = useComponentContext("MessageInputFlat");
+    StopAIGenerationButton: StopAIGenerationButtonOverride,
+    TextareaComposer: TextareaComposer2 = TextareaComposer
+  } = useComponentContext();
   const { channel } = useChatContext("MessageInputFlat");
   const { aiState } = useAIState(channel);
-  const stopGenerating = (0, import_react244.useCallback)(() => channel?.stopAIResponse(), [channel]);
+  const stopGenerating = (0, import_react245.useCallback)(() => channel?.stopAIResponse(), [channel]);
   const [
     showRecordingPermissionDeniedNotification,
     setShowRecordingPermissionDeniedNotification
-  ] = (0, import_react244.useState)(false);
-  const closePermissionDeniedNotification = (0, import_react244.useCallback)(() => {
+  ] = (0, import_react245.useState)(false);
+  const closePermissionDeniedNotification = (0, import_react245.useCallback)(() => {
     setShowRecordingPermissionDeniedNotification(false);
   }, []);
   const { attachments } = useAttachmentManagerState();
-  if (recordingController.recordingState) return /* @__PURE__ */ import_react244.default.createElement(AudioRecorder2, null);
+  if (recordingController.recordingState) return /* @__PURE__ */ import_react245.default.createElement(AudioRecorder2, null);
   const recordingEnabled = !!(recordingController.recorder && navigator.mediaDevices);
   const isRecording = !!recordingController.recordingState;
   const StopAIGenerationButton2 = StopAIGenerationButtonOverride === void 0 ? StopAIGenerationButton : StopAIGenerationButtonOverride;
   const shouldDisplayStopAIGeneration = [AIStates.Thinking, AIStates.Generating].includes(aiState) && !!StopAIGenerationButton2;
-  return /* @__PURE__ */ import_react244.default.createElement(WithDragAndDropUpload, { className: "str-chat__message-input", component: "div" }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react244.default.createElement(
+  return /* @__PURE__ */ import_react245.default.createElement(WithDragAndDropUpload, { className: "str-chat__message-input", component: "div" }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react245.default.createElement(
     RecordingPermissionDeniedNotification2,
     {
       onClose: closePermissionDeniedNotification,
       permissionName: "microphone" /* MIC */
     }
-  ), /* @__PURE__ */ import_react244.default.createElement(LinkPreviewList2, null), /* @__PURE__ */ import_react244.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react244.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message-textarea-container" }, /* @__PURE__ */ import_react244.default.createElement(QuotedMessagePreview2, null), /* @__PURE__ */ import_react244.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react244.default.createElement(TextareaComposer, null), EmojiPicker && /* @__PURE__ */ import_react244.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react244.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react244.default.createElement(import_react244.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react244.default.createElement(
+  ), /* @__PURE__ */ import_react245.default.createElement(LinkPreviewList2, null), /* @__PURE__ */ import_react245.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react245.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-textarea-container" }, /* @__PURE__ */ import_react245.default.createElement(QuotedMessagePreview2, null), /* @__PURE__ */ import_react245.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react245.default.createElement(TextareaComposer2, null), EmojiPicker && /* @__PURE__ */ import_react245.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react245.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react245.default.createElement(import_react245.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react245.default.createElement(
     CooldownTimer2,
     {
       cooldownInterval: cooldownRemaining,
       setCooldownRemaining
     }
-  ) : /* @__PURE__ */ import_react244.default.createElement(import_react244.default.Fragment, null, /* @__PURE__ */ import_react244.default.createElement(SendButton2, { sendMessage: handleSubmit }), recordingEnabled && /* @__PURE__ */ import_react244.default.createElement(
+  ) : /* @__PURE__ */ import_react245.default.createElement(import_react245.default.Fragment, null, /* @__PURE__ */ import_react245.default.createElement(SendButton2, { sendMessage: handleSubmit }), recordingEnabled && /* @__PURE__ */ import_react245.default.createElement(
     StartRecordingAudioButton2,
     {
       disabled: isRecording || !asyncMessagesMultiSendEnabled && attachments.some(
@@ -48917,7 +48945,7 @@ var MessageInputFlat = () => {
 };
 
 // src/components/MessageInput/hooks/useCreateMessageInputContext.ts
-var import_react245 = require("react");
+var import_react246 = require("react");
 var useCreateMessageInputContext = (value) => {
   const {
     additionalTextareaProps,
@@ -48928,10 +48956,8 @@ var useCreateMessageInputContext = (value) => {
     cooldownRemaining,
     emojiSearchIndex,
     focus,
-    grow,
     handleSubmit,
     hideSendButton,
-    insertText,
     isThreadInput,
     maxRows,
     minRows,
@@ -48943,7 +48969,7 @@ var useCreateMessageInputContext = (value) => {
     textareaRef
   } = value;
   const parentId = parent?.id;
-  const messageInputContext = (0, import_react245.useMemo)(
+  const messageInputContext = (0, import_react246.useMemo)(
     () => ({
       additionalTextareaProps,
       asyncMessagesMultiSendEnabled,
@@ -48953,10 +48979,8 @@ var useCreateMessageInputContext = (value) => {
       cooldownRemaining,
       emojiSearchIndex,
       focus,
-      grow,
       handleSubmit,
       hideSendButton,
-      insertText,
       isThreadInput,
       maxRows,
       minRows,
@@ -48997,13 +49021,13 @@ var MessageInputProvider = (props) => {
     emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex
   });
   const messageComposer = useMessageComposer();
-  (0, import_react246.useEffect)(
+  (0, import_react247.useEffect)(
     () => () => {
       messageComposer.createDraft();
     },
     [messageComposer]
   );
-  (0, import_react246.useEffect)(() => {
+  (0, import_react247.useEffect)(() => {
     const threadId = messageComposer.threadId;
     if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty)
       return;
@@ -49014,16 +49038,16 @@ var MessageInputProvider = (props) => {
     });
   }, [messageComposer]);
   useRegisterDropHandlers();
-  return /* @__PURE__ */ import_react246.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
+  return /* @__PURE__ */ import_react247.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
 };
 var UnMemoizedMessageInput = (props) => {
   const { Input: PropInput } = props;
   const { Input: ContextInput } = useComponentContext("MessageInput");
   const Input3 = PropInput || ContextInput || MessageInputFlat;
   const dialogManagerId = props.isThreadInput ? "message-input-dialog-manager-thread" : "message-input-dialog-manager";
-  return /* @__PURE__ */ import_react246.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react246.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react246.default.createElement(Input3, null)));
+  return /* @__PURE__ */ import_react247.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react247.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react247.default.createElement(Input3, null)));
 };
-var MessageInput = import_react246.default.memo(
+var MessageInput = import_react247.default.memo(
   UnMemoizedMessageInput
 );
 
@@ -49031,7 +49055,7 @@ var MessageInput = import_react246.default.memo(
 var EditMessageFormSendButton = () => {
   const { t } = useTranslationContext();
   const hasSendableData = useMessageComposerHasSendableData();
-  return /* @__PURE__ */ import_react247.default.createElement(
+  return /* @__PURE__ */ import_react248.default.createElement(
     "button",
     {
       className: "str-chat__edit-message-send",
@@ -49046,26 +49070,26 @@ var EditMessageForm = () => {
   const { t } = useTranslationContext("EditMessageForm");
   const messageComposer = useMessageComposer();
   const { clearEditingState, handleSubmit } = useMessageInputContext("EditMessageForm");
-  const cancel = (0, import_react247.useCallback)(() => {
+  const cancel = (0, import_react248.useCallback)(() => {
     clearEditingState?.();
     messageComposer.restore();
   }, [clearEditingState, messageComposer]);
-  (0, import_react247.useEffect)(() => {
+  (0, import_react248.useEffect)(() => {
     const onKeyDown = (event) => {
       if (event.key === "Escape") cancel();
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [cancel]);
-  return /* @__PURE__ */ import_react247.default.createElement(
+  return /* @__PURE__ */ import_react248.default.createElement(
     "form",
     {
       autoComplete: "off",
       className: "str-chat__edit-message-form",
       onSubmit: handleSubmit
     },
-    /* @__PURE__ */ import_react247.default.createElement(MessageInputFlat, null),
-    /* @__PURE__ */ import_react247.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react247.default.createElement(
+    /* @__PURE__ */ import_react248.default.createElement(MessageInputFlat, null),
+    /* @__PURE__ */ import_react248.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react248.default.createElement(
       "button",
       {
         className: "str-chat__edit-message-cancel",
@@ -49073,7 +49097,7 @@ var EditMessageForm = () => {
         onClick: cancel
       },
       t("Cancel")
-    ), /* @__PURE__ */ import_react247.default.createElement(EditMessageFormSendButton, null))
+    ), /* @__PURE__ */ import_react248.default.createElement(EditMessageFormSendButton, null))
   );
 };
 var EditMessageModal = ({
@@ -49082,22 +49106,21 @@ var EditMessageModal = ({
   const { EditMessageInput = EditMessageForm } = useComponentContext();
   const { clearEditingState } = useMessageContext();
   const messageComposer = useMessageComposer();
-  const onEditModalClose = (0, import_react247.useCallback)(() => {
+  const onEditModalClose = (0, import_react248.useCallback)(() => {
     clearEditingState();
     messageComposer.restore();
   }, [clearEditingState, messageComposer]);
-  return /* @__PURE__ */ import_react247.default.createElement(
+  return /* @__PURE__ */ import_react248.default.createElement(
     Modal,
     {
       className: "str-chat__edit-message-modal",
       onClose: onEditModalClose,
       open: true
     },
-    /* @__PURE__ */ import_react247.default.createElement(
+    /* @__PURE__ */ import_react248.default.createElement(
       MessageInput,
       {
         clearEditingState,
-        grow: true,
         hideSendButton: true,
         Input: EditMessageInput,
         ...additionalMessageInputProps
@@ -49111,12 +49134,12 @@ var attachmentManagerConfigStateSelector2 = (state) => ({
   acceptedFiles: state.attachments.acceptedFiles,
   maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage
 });
-var UploadButton = (0, import_react248.forwardRef)(function UploadButton2({ onFileChange, resetOnChange = true, ...rest }, ref) {
+var UploadButton = (0, import_react249.forwardRef)(function UploadButton2({ onFileChange, resetOnChange = true, ...rest }, ref) {
   const handleInputChange = useHandleFileChangeWrapper(resetOnChange, onFileChange);
-  return /* @__PURE__ */ import_react248.default.createElement("input", { onChange: handleInputChange, ref, type: "file", ...rest });
+  return /* @__PURE__ */ import_react249.default.createElement("input", { onChange: handleInputChange, ref, type: "file", ...rest });
 });
 var FileInput = UploadButton;
-var UploadFileInput = (0, import_react248.forwardRef)(function UploadFileInput2({
+var UploadFileInput = (0, import_react249.forwardRef)(function UploadFileInput2({
   className,
   onFileChange: onFileChangeCustom,
   ...props
@@ -49130,15 +49153,15 @@ var UploadFileInput = (0, import_react248.forwardRef)(function UploadFileInput2(
     messageComposer.configState,
     attachmentManagerConfigStateSelector2
   );
-  const id = (0, import_react248.useMemo)(() => (0, import_nanoid5.nanoid)(), []);
-  const onFileChange = (0, import_react248.useCallback)(
+  const id = (0, import_react249.useMemo)(() => (0, import_nanoid5.nanoid)(), []);
+  const onFileChange = (0, import_react249.useCallback)(
     (files) => {
       attachmentManager.uploadFiles(files);
       onFileChangeCustom?.(files);
     },
     [onFileChangeCustom, attachmentManager]
   );
-  return /* @__PURE__ */ import_react248.default.createElement(
+  return /* @__PURE__ */ import_react249.default.createElement(
     FileInput,
     {
       accept: acceptedFiles?.join(","),
@@ -49185,7 +49208,7 @@ var VoiceRecordingPlayer = ({
   });
   if (!asset_url) return null;
   const displayedDuration = secondsElapsed || duration;
-  return /* @__PURE__ */ import_react249.default.createElement("div", { className: rootClassName, "data-testid": "voice-recording-widget" }, /* @__PURE__ */ import_react249.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react249.default.createElement("source", { "data-testid": "audio-source", src: asset_url, type: mime_type })), /* @__PURE__ */ import_react249.default.createElement(PlayButton, { isPlaying, onClick: togglePlay }), /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata" }, /* @__PURE__ */ import_react249.default.createElement(
+  return /* @__PURE__ */ import_react250.default.createElement("div", { className: rootClassName, "data-testid": "voice-recording-widget" }, /* @__PURE__ */ import_react250.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react250.default.createElement("source", { "data-testid": "audio-source", src: asset_url, type: mime_type })), /* @__PURE__ */ import_react250.default.createElement(PlayButton, { isPlaying, onClick: togglePlay }), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata" }, /* @__PURE__ */ import_react250.default.createElement(
     "div",
     {
       className: "str-chat__message-attachment__voice-recording-widget__title",
@@ -49193,25 +49216,25 @@ var VoiceRecordingPlayer = ({
       title
     },
     title
-  ), /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state" }, /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__timer" }, attachment.duration ? displayDuration(displayedDuration) : /* @__PURE__ */ import_react249.default.createElement(
+  ), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__timer" }, attachment.duration ? displayDuration(displayedDuration) : /* @__PURE__ */ import_react250.default.createElement(
     FileSizeIndicator,
     {
       fileSize: attachment.file_size,
       maximumFractionDigits: 0
     }
-  )), /* @__PURE__ */ import_react249.default.createElement(
+  )), /* @__PURE__ */ import_react250.default.createElement(
     WaveProgressBar,
     {
       progress,
       seek,
       waveformData: waveform_data || []
     }
-  ))), /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__right-section" }, isPlaying ? /* @__PURE__ */ import_react249.default.createElement(PlaybackRateButton, { disabled: !audioRef.current, onClick: increasePlaybackRate }, playbackRate.toFixed(1), "x") : /* @__PURE__ */ import_react249.default.createElement(FileIcon, { big: true, mimeType: mime_type, size: 40 })));
+  ))), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__right-section" }, isPlaying ? /* @__PURE__ */ import_react250.default.createElement(PlaybackRateButton, { disabled: !audioRef.current, onClick: increasePlaybackRate }, playbackRate.toFixed(1), "x") : /* @__PURE__ */ import_react250.default.createElement(FileIcon, { big: true, mimeType: mime_type, size: 40 })));
 };
 var QuotedVoiceRecording = ({ attachment }) => {
   const { t } = useTranslationContext();
   const title = attachment.title || t("Voice message");
-  return /* @__PURE__ */ import_react249.default.createElement("div", { className: rootClassName, "data-testid": "quoted-voice-recording-widget" }, /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata" }, title && /* @__PURE__ */ import_react249.default.createElement(
+  return /* @__PURE__ */ import_react250.default.createElement("div", { className: rootClassName, "data-testid": "quoted-voice-recording-widget" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__metadata" }, title && /* @__PURE__ */ import_react250.default.createElement(
     "div",
     {
       className: "str-chat__message-attachment__voice-recording-widget__title",
@@ -49219,18 +49242,18 @@ var QuotedVoiceRecording = ({ attachment }) => {
       title
     },
     title
-  ), /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state" }, /* @__PURE__ */ import_react249.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__timer" }, attachment.duration ? displayDuration(attachment.duration) : /* @__PURE__ */ import_react249.default.createElement(
+  ), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__audio-state" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment__voice-recording-widget__timer" }, attachment.duration ? displayDuration(attachment.duration) : /* @__PURE__ */ import_react250.default.createElement(
     FileSizeIndicator,
     {
       fileSize: attachment.file_size,
       maximumFractionDigits: 0
     }
-  )))), /* @__PURE__ */ import_react249.default.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34 }));
+  )))), /* @__PURE__ */ import_react250.default.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34 }));
 };
-var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */ import_react249.default.createElement(QuotedVoiceRecording, { attachment }) : /* @__PURE__ */ import_react249.default.createElement(VoiceRecordingPlayer, { attachment });
+var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */ import_react250.default.createElement(QuotedVoiceRecording, { attachment }) : /* @__PURE__ */ import_react250.default.createElement(VoiceRecordingPlayer, { attachment });
 
 // src/components/Attachment/Card.tsx
-var import_react250 = __toESM(require("react"));
+var import_react251 = __toESM(require("react"));
 var import_clsx64 = __toESM(require("clsx"));
 var import_react_player = __toESM(require("react-player"));
 var getHostFromURL = (url) => {
@@ -49242,26 +49265,26 @@ var getHostFromURL = (url) => {
 };
 var UnableToRenderCard = ({ type }) => {
   const { t } = useTranslationContext("Card");
-  return /* @__PURE__ */ import_react250.default.createElement(
+  return /* @__PURE__ */ import_react251.default.createElement(
     "div",
     {
       className: (0, import_clsx64.default)("str-chat__message-attachment-card", {
         [`str-chat__message-attachment-card--${type}`]: type
       })
     },
-    /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--content" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, t("this content could not be displayed")))
+    /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--content" }, /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, t("this content could not be displayed")))
   );
 };
 var SourceLink = ({
   author_name,
   url
-}) => /* @__PURE__ */ import_react250.default.createElement(
+}) => /* @__PURE__ */ import_react251.default.createElement(
   "div",
   {
     className: "str-chat__message-attachment-card--source-link",
     "data-testid": "card-source-link"
   },
-  /* @__PURE__ */ import_react250.default.createElement(
+  /* @__PURE__ */ import_react251.default.createElement(
     SafeAnchor,
     {
       className: "str-chat__message-attachment-card--url",
@@ -49276,7 +49299,7 @@ var CardHeader3 = (props) => {
   const { asset_url, dimensions, image: image4, image_url, thumb_url, title, type } = props;
   let visual = null;
   if (asset_url && type === "video") {
-    visual = /* @__PURE__ */ import_react250.default.createElement(
+    visual = /* @__PURE__ */ import_react251.default.createElement(
       import_react_player.default,
       {
         className: "react-player",
@@ -49287,7 +49310,7 @@ var CardHeader3 = (props) => {
       }
     );
   } else if (image4) {
-    visual = /* @__PURE__ */ import_react250.default.createElement(
+    visual = /* @__PURE__ */ import_react251.default.createElement(
       ImageComponent,
       {
         dimensions,
@@ -49297,7 +49320,7 @@ var CardHeader3 = (props) => {
       }
     );
   }
-  return visual ? /* @__PURE__ */ import_react250.default.createElement(
+  return visual ? /* @__PURE__ */ import_react251.default.createElement(
     "div",
     {
       className: "str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header",
@@ -49309,7 +49332,7 @@ var CardHeader3 = (props) => {
 var CardContent = (props) => {
   const { author_name, og_scrape_url, text: text8, title, title_link, type } = props;
   const url = title_link || og_scrape_url;
-  return /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--content" }, type === "audio" ? /* @__PURE__ */ import_react250.default.createElement(CardAudio, { og: props }) : /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--flex" }, url && /* @__PURE__ */ import_react250.default.createElement(SourceLink, { author_name, url }), title && /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--title" }, title), text8 && /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, text8)));
+  return /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--content" }, type === "audio" ? /* @__PURE__ */ import_react251.default.createElement(CardAudio, { og: props }) : /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--flex" }, url && /* @__PURE__ */ import_react251.default.createElement(SourceLink, { author_name, url }), title && /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--title" }, title), text8 && /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card--text" }, text8)));
 };
 var CardAudio = ({
   og: { asset_url, author_name, mime_type, og_scrape_url, text: text8, title, title_link }
@@ -49320,7 +49343,7 @@ var CardAudio = ({
   const url = title_link || og_scrape_url;
   const dataTestId = "card-audio-widget";
   const rootClassName2 = "str-chat__message-attachment-card-audio-widget";
-  return /* @__PURE__ */ import_react250.default.createElement("div", { className: rootClassName2, "data-testid": dataTestId }, asset_url && /* @__PURE__ */ import_react250.default.createElement(import_react250.default.Fragment, null, /* @__PURE__ */ import_react250.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react250.default.createElement("source", { "data-testid": "audio-source", src: asset_url, type: "audio/mp3" })), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-card-audio-widget--first-row" }, /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--play-controls" }, /* @__PURE__ */ import_react250.default.createElement(PlayButton, { isPlaying, onClick: togglePlay })), /* @__PURE__ */ import_react250.default.createElement(ProgressBar, { onClick: seek, progress }))), /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--second-row" }, url && /* @__PURE__ */ import_react250.default.createElement(SourceLink, { author_name, url }), title && /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--title" }, title), text8 && /* @__PURE__ */ import_react250.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--description" }, text8)));
+  return /* @__PURE__ */ import_react251.default.createElement("div", { className: rootClassName2, "data-testid": dataTestId }, asset_url && /* @__PURE__ */ import_react251.default.createElement(import_react251.default.Fragment, null, /* @__PURE__ */ import_react251.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react251.default.createElement("source", { "data-testid": "audio-source", src: asset_url, type: "audio/mp3" })), /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-card-audio-widget--first-row" }, /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--play-controls" }, /* @__PURE__ */ import_react251.default.createElement(PlayButton, { isPlaying, onClick: togglePlay })), /* @__PURE__ */ import_react251.default.createElement(ProgressBar, { onClick: seek, progress }))), /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--second-row" }, url && /* @__PURE__ */ import_react251.default.createElement(SourceLink, { author_name, url }), title && /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--title" }, title), text8 && /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-audio-widget--description" }, text8)));
 };
 var UnMemoizedCard = (props) => {
   const { asset_url, giphy, image_url, thumb_url, title, title_link, type } = props;
@@ -49334,45 +49357,45 @@ var UnMemoizedCard = (props) => {
     dimensions.width = giphyVersion.width;
   }
   if (!title && !title_link && !asset_url && !image4) {
-    return /* @__PURE__ */ import_react250.default.createElement(UnableToRenderCard, null);
+    return /* @__PURE__ */ import_react251.default.createElement(UnableToRenderCard, null);
   }
-  return /* @__PURE__ */ import_react250.default.createElement(
+  return /* @__PURE__ */ import_react251.default.createElement(
     "div",
     {
       className: `str-chat__message-attachment-card str-chat__message-attachment-card--${type}`
     },
-    /* @__PURE__ */ import_react250.default.createElement(CardHeader3, { ...props, dimensions, image: image4 }),
-    /* @__PURE__ */ import_react250.default.createElement(CardContent, { ...props })
+    /* @__PURE__ */ import_react251.default.createElement(CardHeader3, { ...props, dimensions, image: image4 }),
+    /* @__PURE__ */ import_react251.default.createElement(CardContent, { ...props })
   );
 };
-var Card3 = import_react250.default.memo(UnMemoizedCard);
+var Card3 = import_react251.default.memo(UnMemoizedCard);
 
 // src/components/Attachment/FileAttachment.tsx
-var import_react251 = __toESM(require("react"));
-var UnMemoizedFileAttachment = ({ attachment }) => /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-file--item", "data-testid": "attachment-file" }, /* @__PURE__ */ import_react251.default.createElement(FileIcon, { className: "str-chat__file-icon", mimeType: attachment.mime_type }), /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-file--item-text" }, /* @__PURE__ */ import_react251.default.createElement("div", { className: "str-chat__message-attachment-file--item-first-row" }, /* @__PURE__ */ import_react251.default.createElement(
+var import_react252 = __toESM(require("react"));
+var UnMemoizedFileAttachment = ({ attachment }) => /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__message-attachment-file--item", "data-testid": "attachment-file" }, /* @__PURE__ */ import_react252.default.createElement(FileIcon, { className: "str-chat__file-icon", mimeType: attachment.mime_type }), /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__message-attachment-file--item-text" }, /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__message-attachment-file--item-first-row" }, /* @__PURE__ */ import_react252.default.createElement(
   "div",
   {
     className: "str-chat__message-attachment-file--item-name",
     "data-testid": "file-title"
   },
   attachment.title
-), /* @__PURE__ */ import_react251.default.createElement(DownloadButton, { assetUrl: attachment.asset_url })), /* @__PURE__ */ import_react251.default.createElement(FileSizeIndicator, { fileSize: attachment.file_size })));
-var FileAttachment = import_react251.default.memo(
+), /* @__PURE__ */ import_react252.default.createElement(DownloadButton, { assetUrl: attachment.asset_url })), /* @__PURE__ */ import_react252.default.createElement(FileSizeIndicator, { fileSize: attachment.file_size })));
+var FileAttachment = import_react252.default.memo(
   UnMemoizedFileAttachment
 );
 
 // src/components/Attachment/UnsupportedAttachment.tsx
-var import_react252 = __toESM(require("react"));
+var import_react253 = __toESM(require("react"));
 var UnsupportedAttachment = ({ attachment }) => {
   const { t } = useTranslationContext("UnsupportedAttachment");
-  return /* @__PURE__ */ import_react252.default.createElement(
+  return /* @__PURE__ */ import_react253.default.createElement(
     "div",
     {
       className: "str-chat__message-attachment-unsupported",
       "data-testid": "attachment-unsupported"
     },
-    /* @__PURE__ */ import_react252.default.createElement(FileIcon, { className: "str-chat__file-icon" }),
-    /* @__PURE__ */ import_react252.default.createElement("div", { className: "str-chat__message-attachment-unsupported__metadata" }, /* @__PURE__ */ import_react252.default.createElement(
+    /* @__PURE__ */ import_react253.default.createElement(FileIcon, { className: "str-chat__file-icon" }),
+    /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__message-attachment-unsupported__metadata" }, /* @__PURE__ */ import_react253.default.createElement(
       "div",
       {
         className: "str-chat__message-attachment-unsupported__title",
@@ -49404,7 +49427,7 @@ var AttachmentWithinContainer = ({
       "str-chat__message-attachment-with-actions": extra === "actions"
     }
   );
-  return /* @__PURE__ */ import_react253.default.createElement("div", { className: classNames }, children);
+  return /* @__PURE__ */ import_react254.default.createElement("div", { className: classNames }, children);
 };
 var AttachmentActionsContainer = ({
   actionHandler,
@@ -49412,7 +49435,7 @@ var AttachmentActionsContainer = ({
   AttachmentActions: AttachmentActions2 = AttachmentActions
 }) => {
   if (!attachment.actions?.length) return null;
-  return /* @__PURE__ */ import_react253.default.createElement(
+  return /* @__PURE__ */ import_react254.default.createElement(
     AttachmentActions2,
     {
       ...attachment,
@@ -49443,10 +49466,10 @@ var GalleryContainer = ({
   attachment,
   Gallery: Gallery2 = Gallery
 }) => {
-  const imageElements = (0, import_react253.useRef)([]);
+  const imageElements = (0, import_react254.useRef)([]);
   const { imageAttachmentSizeHandler } = useChannelStateContext();
-  const [attachmentConfigurations, setAttachmentConfigurations] = (0, import_react253.useState)([]);
-  (0, import_react253.useLayoutEffect)(() => {
+  const [attachmentConfigurations, setAttachmentConfigurations] = (0, import_react254.useState)([]);
+  (0, import_react254.useLayoutEffect)(() => {
     if (imageElements.current && imageElements.current.every((element4) => !!element4) && imageAttachmentSizeHandler) {
       const newConfigurations = [];
       imageElements.current.forEach((element4, i) => {
@@ -49463,15 +49486,15 @@ var GalleryContainer = ({
       attachment.images[i]?.image_url || attachment.images[i]?.thumb_url || ""
     )
   }));
-  return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType: "gallery" }, /* @__PURE__ */ import_react253.default.createElement(Gallery2, { images: images || [], innerRefs: imageElements, key: "gallery" }));
+  return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType: "gallery" }, /* @__PURE__ */ import_react254.default.createElement(Gallery2, { images: images || [], innerRefs: imageElements, key: "gallery" }));
 };
 var ImageContainer = (props) => {
   const { attachment, Image: Image4 = ImageComponent } = props;
   const componentType = "image";
-  const imageElement = (0, import_react253.useRef)(null);
+  const imageElement = (0, import_react254.useRef)(null);
   const { imageAttachmentSizeHandler } = useChannelStateContext();
-  const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react253.useState)(void 0);
-  (0, import_react253.useLayoutEffect)(() => {
+  const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react254.useState)(void 0);
+  (0, import_react254.useLayoutEffect)(() => {
     if (imageElement.current && imageAttachmentSizeHandler) {
       const config = imageAttachmentSizeHandler(attachment, imageElement.current);
       setAttachmentConfiguration(config);
@@ -49483,41 +49506,41 @@ var ImageContainer = (props) => {
     style: getCssDimensionsVariables(attachment.image_url || attachment.thumb_url || "")
   };
   if (attachment.actions && attachment.actions.length) {
-    return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react253.default.createElement(Image4, { ...imageConfig, innerRef: imageElement }), /* @__PURE__ */ import_react253.default.createElement(AttachmentActionsContainer, { ...props })));
+    return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react254.default.createElement(Image4, { ...imageConfig, innerRef: imageElement }), /* @__PURE__ */ import_react254.default.createElement(AttachmentActionsContainer, { ...props })));
   }
-  return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement(Image4, { ...imageConfig, innerRef: imageElement }));
+  return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react254.default.createElement(Image4, { ...imageConfig, innerRef: imageElement }));
 };
 var CardContainer = (props) => {
   const { attachment, Card: Card4 = Card3 } = props;
   const componentType = "card";
   if (attachment.actions && attachment.actions.length) {
-    return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react253.default.createElement(Card4, { ...attachment }), /* @__PURE__ */ import_react253.default.createElement(AttachmentActionsContainer, { ...props })));
+    return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react254.default.createElement(Card4, { ...attachment }), /* @__PURE__ */ import_react254.default.createElement(AttachmentActionsContainer, { ...props })));
   }
-  return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement(Card4, { ...attachment }));
+  return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react254.default.createElement(Card4, { ...attachment }));
 };
 var FileContainer = ({
   attachment,
   File: File2 = FileAttachment
 }) => {
   if (!attachment.asset_url) return null;
-  return /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType: "file" }, /* @__PURE__ */ import_react253.default.createElement(File2, { attachment }));
+  return /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType: "file" }, /* @__PURE__ */ import_react254.default.createElement(File2, { attachment }));
 };
 var AudioContainer = ({
   attachment,
   Audio: Audio2 = Audio
-}) => /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType: "audio" }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react253.default.createElement(Audio2, { og: attachment })));
+}) => /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType: "audio" }, /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react254.default.createElement(Audio2, { og: attachment })));
 var VoiceRecordingContainer = ({
   attachment,
   isQuoted,
   VoiceRecording: VoiceRecording2 = VoiceRecording
-}) => /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType: "voiceRecording" }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react253.default.createElement(VoiceRecording2, { attachment, isQuoted })));
+}) => /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType: "voiceRecording" }, /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment" }, /* @__PURE__ */ import_react254.default.createElement(VoiceRecording2, { attachment, isQuoted })));
 var MediaContainer = (props) => {
   const { attachment, Media = import_react_player2.default } = props;
   const componentType = "media";
   const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useChannelStateContext();
-  const videoElement = (0, import_react253.useRef)(null);
-  const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react253.useState)();
-  (0, import_react253.useLayoutEffect)(() => {
+  const videoElement = (0, import_react254.useRef)(null);
+  const [attachmentConfiguration, setAttachmentConfiguration] = (0, import_react254.useState)();
+  (0, import_react254.useLayoutEffect)(() => {
     if (videoElement.current && videoAttachmentSizeHandler) {
       const config = videoAttachmentSizeHandler(
         attachment,
@@ -49527,7 +49550,7 @@ var MediaContainer = (props) => {
       setAttachmentConfiguration(config);
     }
   }, [videoElement, videoAttachmentSizeHandler, attachment]);
-  const content3 = /* @__PURE__ */ import_react253.default.createElement(
+  const content3 = /* @__PURE__ */ import_react254.default.createElement(
     "div",
     {
       className: "str-chat__player-wrapper",
@@ -49535,7 +49558,7 @@ var MediaContainer = (props) => {
       ref: videoElement,
       style: getCssDimensionsVariables(attachment.thumb_url || "")
     },
-    /* @__PURE__ */ import_react253.default.createElement(
+    /* @__PURE__ */ import_react254.default.createElement(
       Media,
       {
         className: "react-player",
@@ -49547,12 +49570,12 @@ var MediaContainer = (props) => {
       }
     )
   );
-  return attachment.actions?.length ? /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react253.default.createElement("div", { className: "str-chat__attachment" }, content3, /* @__PURE__ */ import_react253.default.createElement(AttachmentActionsContainer, { ...props }))) : /* @__PURE__ */ import_react253.default.createElement(AttachmentWithinContainer, { attachment, componentType }, content3);
+  return attachment.actions?.length ? /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment" }, content3, /* @__PURE__ */ import_react254.default.createElement(AttachmentActionsContainer, { ...props }))) : /* @__PURE__ */ import_react254.default.createElement(AttachmentWithinContainer, { attachment, componentType }, content3);
 };
 var UnsupportedAttachmentContainer = ({
   attachment,
   UnsupportedAttachment: UnsupportedAttachment2 = UnsupportedAttachment
-}) => /* @__PURE__ */ import_react253.default.createElement(import_react253.default.Fragment, null, /* @__PURE__ */ import_react253.default.createElement(UnsupportedAttachment2, { attachment }));
+}) => /* @__PURE__ */ import_react254.default.createElement(import_react254.default.Fragment, null, /* @__PURE__ */ import_react254.default.createElement(UnsupportedAttachment2, { attachment }));
 
 // src/components/Attachment/Attachment.tsx
 var CONTAINER_MAP = {
@@ -49575,12 +49598,12 @@ var ATTACHMENT_GROUPS_ORDER = [
 ];
 var Attachment = (props) => {
   const { attachments } = props;
-  const groupedAttachments = (0, import_react254.useMemo)(
+  const groupedAttachments = (0, import_react255.useMemo)(
     () => renderGroupedAttachments(props),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [attachments]
   );
-  return /* @__PURE__ */ import_react254.default.createElement("div", { className: "str-chat__attachment-list" }, ATTACHMENT_GROUPS_ORDER.reduce(
+  return /* @__PURE__ */ import_react255.default.createElement("div", { className: "str-chat__attachment-list" }, ATTACHMENT_GROUPS_ORDER.reduce(
     (acc, groupName) => [...acc, ...groupedAttachments[groupName]],
     []
   ));
@@ -49590,14 +49613,14 @@ var renderGroupedAttachments = ({
   ...rest
 }) => {
   const uploadedImages = attachments.filter(
-    (attachment) => (0, import_stream_chat10.isImageAttachment)(attachment)
+    (attachment) => (0, import_stream_chat11.isImageAttachment)(attachment)
   );
-  const containers = attachments.filter((attachment) => !(0, import_stream_chat10.isImageAttachment)(attachment)).reduce(
+  const containers = attachments.filter((attachment) => !(0, import_stream_chat11.isImageAttachment)(attachment)).reduce(
     (typeMap, attachment) => {
       const attachmentType = getAttachmentType(attachment);
       const Container = CONTAINER_MAP[attachmentType];
       typeMap[attachmentType].push(
-        /* @__PURE__ */ import_react254.default.createElement(
+        /* @__PURE__ */ import_react255.default.createElement(
           Container,
           {
             key: `${attachmentType}-${typeMap[attachmentType].length}`,
@@ -49624,7 +49647,7 @@ var renderGroupedAttachments = ({
   );
   if (uploadedImages.length > 1) {
     containers["gallery"] = [
-      /* @__PURE__ */ import_react254.default.createElement(
+      /* @__PURE__ */ import_react255.default.createElement(
         GalleryContainer,
         {
           key: "gallery-container",
@@ -49638,33 +49661,33 @@ var renderGroupedAttachments = ({
     ];
   } else if (uploadedImages.length === 1) {
     containers["image"] = [
-      /* @__PURE__ */ import_react254.default.createElement(ImageContainer, { key: "image-container", ...rest, attachment: uploadedImages[0] })
+      /* @__PURE__ */ import_react255.default.createElement(ImageContainer, { key: "image-container", ...rest, attachment: uploadedImages[0] })
     ];
   }
   return containers;
 };
 var getAttachmentType = (attachment) => {
-  if ((0, import_stream_chat10.isScrapedContent)(attachment)) {
+  if ((0, import_stream_chat11.isScrapedContent)(attachment)) {
     return "card";
-  } else if ((0, import_stream_chat10.isVideoAttachment)(attachment, SUPPORTED_VIDEO_FORMATS)) {
+  } else if ((0, import_stream_chat11.isVideoAttachment)(attachment, SUPPORTED_VIDEO_FORMATS)) {
     return "media";
-  } else if ((0, import_stream_chat10.isAudioAttachment)(attachment)) {
+  } else if ((0, import_stream_chat11.isAudioAttachment)(attachment)) {
     return "audio";
-  } else if ((0, import_stream_chat10.isVoiceRecordingAttachment)(attachment)) {
+  } else if ((0, import_stream_chat11.isVoiceRecordingAttachment)(attachment)) {
     return "voiceRecording";
-  } else if ((0, import_stream_chat10.isFileAttachment)(attachment, SUPPORTED_VIDEO_FORMATS)) {
+  } else if ((0, import_stream_chat11.isFileAttachment)(attachment, SUPPORTED_VIDEO_FORMATS)) {
     return "file";
   }
   return "unsupported";
 };
 
 // src/components/Channel/Channel.tsx
-var import_react260 = __toESM(require("react"));
+var import_react261 = __toESM(require("react"));
 var import_clsx66 = __toESM(require("clsx"));
-var import_lodash19 = __toESM(require("lodash.debounce"));
-var import_lodash20 = __toESM(require("lodash.defaultsdeep"));
-var import_lodash21 = __toESM(require("lodash.throttle"));
-var import_stream_chat11 = require("stream-chat");
+var import_lodash20 = __toESM(require("lodash.debounce"));
+var import_lodash21 = __toESM(require("lodash.defaultsdeep"));
+var import_lodash22 = __toESM(require("lodash.throttle"));
+var import_stream_chat12 = require("stream-chat");
 
 // src/components/Channel/channelState.ts
 var makeChannelReducer = () => (state, action) => {
@@ -49840,7 +49863,7 @@ var initialState = {
 };
 
 // src/components/Channel/hooks/useCreateChannelStateContext.ts
-var import_react255 = require("react");
+var import_react256 = require("react");
 var useCreateChannelStateContext = (value) => {
   const {
     channel,
@@ -49899,7 +49922,7 @@ var useCreateChannelStateContext = (value) => {
   const memoizedThreadMessageData = threadMessages.map(
     ({ deleted_at, latest_reactions, pinned, status, updated_at, user }) => `${deleted_at}${latest_reactions ? latest_reactions.map(({ type }) => type).join() : ""}${pinned}${status}${updated_at && (isDayOrMoment(updated_at) || isDate(updated_at)) ? updated_at.toISOString() : updated_at || ""}${user?.updated_at}`
   ).join();
-  const channelStateContext = (0, import_react255.useMemo)(
+  const channelStateContext = (0, import_react256.useMemo)(
     () => ({
       channel,
       channelCapabilities,
@@ -49963,11 +49986,11 @@ var useCreateChannelStateContext = (value) => {
 };
 
 // src/components/Channel/hooks/useCreateTypingContext.ts
-var import_react256 = require("react");
+var import_react257 = require("react");
 var useCreateTypingContext = (value) => {
   const { typing } = value;
   const typingValue = Object.keys(typing || {}).join();
-  const typingContext = (0, import_react256.useMemo)(
+  const typingContext = (0, import_react257.useMemo)(
     () => ({
       typing
     }),
@@ -49991,10 +50014,10 @@ var useEditMessageHandler = (doUpdateMessageRequest) => {
 };
 
 // src/components/Channel/hooks/useIsMounted.ts
-var import_react257 = require("react");
+var import_react258 = require("react");
 var useIsMounted = () => {
-  const isMounted = (0, import_react257.useRef)(false);
-  (0, import_react257.useEffect)(() => {
+  const isMounted = (0, import_react258.useRef)(false);
+  (0, import_react258.useEffect)(() => {
     isMounted.current = true;
     return () => {
       isMounted.current = false;
@@ -50004,8 +50027,8 @@ var useIsMounted = () => {
 };
 
 // src/components/Channel/hooks/useMentionsHandlers.ts
-var import_react258 = require("react");
-var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, import_react258.useCallback)(
+var import_react259 = require("react");
+var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, import_react259.useCallback)(
   (event, mentioned_users) => {
     if (!onMentionsHover && !onMentionsClick || !(event.target instanceof HTMLElement)) {
       return;
@@ -50029,11 +50052,11 @@ var useMentionsHandlers = (onMentionsHover, onMentionsClick) => (0, import_react
 );
 
 // src/components/Channel/LoadingChannel.tsx
-var import_react259 = __toESM(require("react"));
-var LoadingMessage = () => /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-avatar" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-end" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-sender" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-last-row" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-text" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-date" }))));
-var LoadingMessageInput = () => /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-input-row" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-input" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-send" }));
-var LoadingChannelHeader = () => /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-header" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-header-avatar" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-header-end" }, /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-header-name" }), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-header-info" })));
-var LoadingChannel = () => /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel" }, /* @__PURE__ */ import_react259.default.createElement(LoadingChannelHeader, null), /* @__PURE__ */ import_react259.default.createElement("div", { className: "str-chat__loading-channel-message-list" }, Array.from(Array(3)).map((_, i) => /* @__PURE__ */ import_react259.default.createElement(LoadingMessage, { key: `loading-message-${i}` }))), /* @__PURE__ */ import_react259.default.createElement(LoadingMessageInput, null));
+var import_react260 = __toESM(require("react"));
+var LoadingMessage = () => /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-avatar" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-end" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-sender" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-last-row" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-text" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-date" }))));
+var LoadingMessageInput = () => /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-input-row" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-input" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-send" }));
+var LoadingChannelHeader = () => /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-header" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-header-avatar" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-header-end" }, /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-header-name" }), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-header-info" })));
+var LoadingChannel = () => /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel" }, /* @__PURE__ */ import_react260.default.createElement(LoadingChannelHeader, null), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__loading-channel-message-list" }, Array.from(Array(3)).map((_, i) => /* @__PURE__ */ import_react260.default.createElement(LoadingMessage, { key: `loading-message-${i}` }))), /* @__PURE__ */ import_react260.default.createElement(LoadingMessageInput, null));
 
 // src/components/Channel/hooks/useChannelContainerClasses.ts
 var useImageFlagEmojisOnWindowsClass = () => {
@@ -50220,7 +50243,7 @@ var ChannelContainer = ({
     customClasses
   });
   const className = (0, import_clsx66.default)(chatClass, theme, channelClass, additionalClassName);
-  return /* @__PURE__ */ import_react260.default.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className }, children);
+  return /* @__PURE__ */ import_react261.default.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className }, children);
 };
 var UnMemoizedChannel = (props) => {
   const {
@@ -50232,15 +50255,15 @@ var UnMemoizedChannel = (props) => {
   const { channel: contextChannel, channelsQueryState } = useChatContext("Channel");
   const channel = propsChannel || contextChannel;
   if (channelsQueryState.queryInProgress === "reload" && LoadingIndicator2) {
-    return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingIndicator2, null));
+    return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react261.default.createElement(LoadingIndicator2, null));
   }
   if (channelsQueryState.error && LoadingErrorIndicator2) {
-    return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingErrorIndicator2, { error: channelsQueryState.error }));
+    return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react261.default.createElement(LoadingErrorIndicator2, { error: channelsQueryState.error }));
   }
   if (!channel?.cid) {
-    return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
+    return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
   }
-  return /* @__PURE__ */ import_react260.default.createElement(ChannelInner, { ...props, channel, key: channel.cid });
+  return /* @__PURE__ */ import_react261.default.createElement(ChannelInner, { ...props, channel, key: channel.cid });
 };
 var ChannelInner = (props) => {
   const {
@@ -50260,8 +50283,8 @@ var ChannelInner = (props) => {
     onMentionsHover,
     skipMessageDataMemoization
   } = props;
-  const channelQueryOptions = (0, import_react260.useMemo)(
-    () => (0, import_lodash20.default)(propChannelQueryOptions, {
+  const channelQueryOptions = (0, import_react261.useMemo)(
+    () => (0, import_lodash21.default)(propChannelQueryOptions, {
       messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
     }),
     [propChannelQueryOptions]
@@ -50271,12 +50294,12 @@ var ChannelInner = (props) => {
   const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
   const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
   const thread = useThreadContext();
-  const [channelConfig, setChannelConfig] = (0, import_react260.useState)(channel.getConfig());
-  const [notifications, setNotifications] = (0, import_react260.useState)([]);
-  const notificationTimeouts = (0, import_react260.useRef)([]);
-  const [channelUnreadUiState, _setChannelUnreadUiState] = (0, import_react260.useState)();
-  const channelReducer = (0, import_react260.useMemo)(() => makeChannelReducer(), []);
-  const [state, dispatch] = (0, import_react260.useReducer)(
+  const [channelConfig, setChannelConfig] = (0, import_react261.useState)(channel.getConfig());
+  const [notifications, setNotifications] = (0, import_react261.useState)([]);
+  const notificationTimeouts = (0, import_react261.useRef)([]);
+  const [channelUnreadUiState, _setChannelUnreadUiState] = (0, import_react261.useState)();
+  const channelReducer = (0, import_react261.useMemo)(() => makeChannelReducer(), []);
+  const [state, dispatch] = (0, import_react261.useReducer)(
     channelReducer,
     // channel.initialized === false if client.channel().query() was not called, e.g. ChannelList is not used
     // => Channel will call channel.watch() in useLayoutEffect => state.loading is used to signal the watch() call state
@@ -50288,14 +50311,14 @@ var ChannelInner = (props) => {
   );
   const jumpToMessageFromSearch = useSearchFocusedMessage();
   const isMounted = useIsMounted();
-  const originalTitle = (0, import_react260.useRef)("");
-  const lastRead = (0, import_react260.useRef)(void 0);
-  const online = (0, import_react260.useRef)(true);
-  const clearHighlightedMessageTimeoutId = (0, import_react260.useRef)(
+  const originalTitle = (0, import_react261.useRef)("");
+  const lastRead = (0, import_react261.useRef)(void 0);
+  const online = (0, import_react261.useRef)(true);
+  const clearHighlightedMessageTimeoutId = (0, import_react261.useRef)(
     null
   );
   const channelCapabilitiesArray = channel.data?.own_capabilities;
-  const throttledCopyStateFromChannel = (0, import_lodash21.default)(
+  const throttledCopyStateFromChannel = (0, import_lodash22.default)(
     () => dispatch({ channel, type: "copyStateFromChannelOnEvent" }),
     500,
     {
@@ -50303,15 +50326,15 @@ var ChannelInner = (props) => {
       trailing: true
     }
   );
-  const setChannelUnreadUiState = (0, import_react260.useMemo)(
-    () => (0, import_lodash21.default)(_setChannelUnreadUiState, 200, {
+  const setChannelUnreadUiState = (0, import_react261.useMemo)(
+    () => (0, import_lodash22.default)(_setChannelUnreadUiState, 200, {
       leading: true,
       trailing: false
     }),
     []
   );
-  const markRead = (0, import_react260.useMemo)(
-    () => (0, import_lodash21.default)(
+  const markRead = (0, import_react261.useMemo)(
+    () => (0, import_lodash22.default)(
       async (options) => {
         const { updateChannelUiUnreadState = true } = options ?? {};
         if (channel.disconnected || !channelConfig?.read_events) {
@@ -50413,7 +50436,7 @@ var ChannelInner = (props) => {
     }
     throttledCopyStateFromChannel();
   };
-  (0, import_react260.useLayoutEffect)(() => {
+  (0, import_react261.useLayoutEffect)(() => {
     let errored = false;
     let done = false;
     (async () => {
@@ -50479,12 +50502,12 @@ var ChannelInner = (props) => {
     channelConfig?.read_events,
     initializeOnMount
   ]);
-  (0, import_react260.useEffect)(() => {
+  (0, import_react261.useEffect)(() => {
     if (!state.thread) return;
     const message = state.messages?.find((m) => m.id === state.thread?.id);
     if (message) dispatch({ message, type: "setThread" });
   }, [state.messages, state.thread]);
-  const handleHighlightedMessageChange = (0, import_react260.useCallback)(
+  const handleHighlightedMessageChange = (0, import_react261.useCallback)(
     ({
       highlightDuration,
       highlightedMessageId
@@ -50507,16 +50530,16 @@ var ChannelInner = (props) => {
     },
     [channel, searchController]
   );
-  (0, import_react260.useEffect)(() => {
+  (0, import_react261.useEffect)(() => {
     if (!jumpToMessageFromSearch?.id) return;
     handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
   }, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
-  const addNotification = (0, import_react260.useMemo)(
+  const addNotification = (0, import_react261.useMemo)(
     () => makeAddNotifications(setNotifications, notificationTimeouts.current),
     []
   );
-  const loadMoreFinished = (0, import_react260.useCallback)(
-    (0, import_lodash19.default)(
+  const loadMoreFinished = (0, import_react261.useCallback)(
+    (0, import_lodash20.default)(
       (hasMore, messages) => {
         if (!isMounted.current) return;
         dispatch({ hasMore, messages, type: "loadMoreFinished" });
@@ -50576,7 +50599,7 @@ var ChannelInner = (props) => {
     });
     return queryResponse.messages.length;
   };
-  const jumpToMessage = (0, import_react260.useCallback)(
+  const jumpToMessage = (0, import_react261.useCallback)(
     async (messageId, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
       dispatch({ loadingMore: true, type: "setLoadingMore" });
       await channel.state.loadMessageIntoState(messageId, void 0, messageLimit);
@@ -50588,14 +50611,14 @@ var ChannelInner = (props) => {
     },
     [channel, handleHighlightedMessageChange, loadMoreFinished]
   );
-  const jumpToLatestMessage = (0, import_react260.useCallback)(async () => {
+  const jumpToLatestMessage = (0, import_react261.useCallback)(async () => {
     await channel.state.loadMessageIntoState("latest");
     loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
     dispatch({
       type: "jumpToLatestMessage"
     });
   }, [channel, loadMoreFinished]);
-  const jumpToFirstUnreadMessage = (0, import_react260.useCallback)(
+  const jumpToFirstUnreadMessage = (0, import_react261.useCallback)(
     async (queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
       if (!channelUnreadUiState?.unread_messages) return;
       let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
@@ -50718,7 +50741,7 @@ var ChannelInner = (props) => {
       channelUnreadUiState
     ]
   );
-  const deleteMessage = (0, import_react260.useCallback)(
+  const deleteMessage = (0, import_react261.useCallback)(
     async (message) => {
       if (!message?.id) {
         throw new Error("Cannot delete a message - missing message ID.");
@@ -50817,7 +50840,7 @@ var ChannelInner = (props) => {
     });
     await doSendMessage({
       localMessage,
-      message: (0, import_stream_chat11.localMessageToNewMessagePayload)(localMessage)
+      message: (0, import_stream_chat12.localMessageToNewMessagePayload)(localMessage)
     });
   };
   const removeMessage = (message) => {
@@ -50836,8 +50859,8 @@ var ChannelInner = (props) => {
     event?.preventDefault();
     dispatch({ type: "closeThread" });
   };
-  const loadMoreThreadFinished = (0, import_react260.useCallback)(
-    (0, import_lodash19.default)(
+  const loadMoreThreadFinished = (0, import_react261.useCallback)(
+    (0, import_lodash20.default)(
       (threadHasMore, threadMessages) => {
         dispatch({
           threadHasMore,
@@ -50891,7 +50914,7 @@ var ChannelInner = (props) => {
     videoAttachmentSizeHandler: props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
     watcher_count: state.watcherCount
   });
-  const channelActionContextValue = (0, import_react260.useMemo)(
+  const channelActionContextValue = (0, import_react261.useMemo)(
     () => ({
       addNotification,
       closeThread,
@@ -50928,7 +50951,7 @@ var ChannelInner = (props) => {
       setChannelUnreadUiState
     ]
   );
-  const componentContextValue = (0, import_react260.useMemo)(
+  const componentContextValue = (0, import_react261.useMemo)(
     () => ({
       Attachment: props.Attachment,
       AttachmentPreviewList: props.AttachmentPreviewList,
@@ -50982,6 +51005,7 @@ var ChannelInner = (props) => {
       StartRecordingAudioButton: props.StartRecordingAudioButton,
       StopAIGenerationButton: props.StopAIGenerationButton,
       StreamedMessageText: props.StreamedMessageText,
+      TextareaComposer: props.TextareaComposer,
       ThreadHead: props.ThreadHead,
       ThreadHeader: props.ThreadHeader,
       ThreadStart: props.ThreadStart,
@@ -51044,6 +51068,7 @@ var ChannelInner = (props) => {
       props.StartRecordingAudioButton,
       props.StopAIGenerationButton,
       props.StreamedMessageText,
+      props.TextareaComposer,
       props.ThreadHead,
       props.ThreadHeader,
       props.ThreadStart,
@@ -51058,26 +51083,26 @@ var ChannelInner = (props) => {
     typing
   });
   if (state.error) {
-    return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingErrorIndicator2, { error: state.error }));
+    return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react261.default.createElement(LoadingErrorIndicator2, { error: state.error }));
   }
   if (state.loading) {
-    return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement(LoadingIndicator2, null));
+    return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react261.default.createElement(LoadingIndicator2, null));
   }
   if (!channel.watch) {
-    return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react260.default.createElement("div", null, t("Channel Missing")));
+    return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react261.default.createElement("div", null, t("Channel Missing")));
   }
-  return /* @__PURE__ */ import_react260.default.createElement(ChannelContainer, { className: windowsEmojiClass }, /* @__PURE__ */ import_react260.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react260.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react260.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react260.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react260.default.createElement("div", { className: (0, import_clsx66.default)(chatContainerClass) }, children))))));
+  return /* @__PURE__ */ import_react261.default.createElement(ChannelContainer, { className: windowsEmojiClass }, /* @__PURE__ */ import_react261.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react261.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react261.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react261.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react261.default.createElement("div", { className: (0, import_clsx66.default)(chatContainerClass) }, children))))));
 };
-var Channel = import_react260.default.memo(UnMemoizedChannel);
+var Channel = import_react261.default.memo(UnMemoizedChannel);
 
 // src/components/ChannelHeader/ChannelHeader.tsx
-var import_react262 = __toESM(require("react"));
+var import_react263 = __toESM(require("react"));
 
 // src/components/ChannelHeader/icons.tsx
-var import_react261 = __toESM(require("react"));
+var import_react262 = __toESM(require("react"));
 var MenuIcon2 = ({ title }) => {
   const { t } = useTranslationContext("MenuIcon");
-  return /* @__PURE__ */ import_react261.default.createElement("svg", { "data-testid": "menu-icon", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react261.default.createElement("title", null, title ?? t("Menu")), /* @__PURE__ */ import_react261.default.createElement(
+  return /* @__PURE__ */ import_react262.default.createElement("svg", { "data-testid": "menu-icon", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react262.default.createElement("title", null, title ?? t("Menu")), /* @__PURE__ */ import_react262.default.createElement(
     "path",
     {
       d: "M0 88C0 74.75 10.75 64 24 64H424C437.3 64 448 74.75 448 88C448 101.3 437.3 112 424 112H24C10.75 112 0 101.3 0 88zM0 248C0 234.7 10.75 224 24 224H424C437.3 224 448 234.7 448 248C448 261.3 437.3 272 424 272H24C10.75 272 0 261.3 0 248zM424 432H24C10.75 432 0 421.3 0 408C0 394.7 10.75 384 24 384H424C437.3 384 448 394.7 448 408C448 421.3 437.3 432 424 432z",
@@ -51104,15 +51129,15 @@ var ChannelHeader = (props) => {
     overrideTitle
   });
   const { member_count, subtitle } = channel?.data || {};
-  return /* @__PURE__ */ import_react262.default.createElement("div", { className: "str-chat__channel-header" }, /* @__PURE__ */ import_react262.default.createElement(
+  return /* @__PURE__ */ import_react263.default.createElement("div", { className: "str-chat__channel-header" }, /* @__PURE__ */ import_react263.default.createElement(
     "button",
     {
       "aria-label": t("aria/Menu"),
       className: "str-chat__header-hamburger",
       onClick: openMobileNav
     },
-    /* @__PURE__ */ import_react262.default.createElement(MenuIcon3, null)
-  ), /* @__PURE__ */ import_react262.default.createElement(
+    /* @__PURE__ */ import_react263.default.createElement(MenuIcon3, null)
+  ), /* @__PURE__ */ import_react263.default.createElement(
     Avatar2,
     {
       className: "str-chat__avatar--channel-header",
@@ -51120,36 +51145,36 @@ var ChannelHeader = (props) => {
       image: displayImage,
       name: displayTitle
     }
-  ), /* @__PURE__ */ import_react262.default.createElement("div", { className: "str-chat__channel-header-end" }, /* @__PURE__ */ import_react262.default.createElement("p", { className: "str-chat__channel-header-title" }, displayTitle, " ", live && /* @__PURE__ */ import_react262.default.createElement("span", { className: "str-chat__header-livestream-livelabel" }, t("live"))), subtitle && /* @__PURE__ */ import_react262.default.createElement("p", { className: "str-chat__channel-header-subtitle" }, subtitle), /* @__PURE__ */ import_react262.default.createElement("p", { className: "str-chat__channel-header-info" }, !live && !!member_count && member_count > 0 && /* @__PURE__ */ import_react262.default.createElement(import_react262.default.Fragment, null, t("{{ memberCount }} members", {
+  ), /* @__PURE__ */ import_react263.default.createElement("div", { className: "str-chat__channel-header-end" }, /* @__PURE__ */ import_react263.default.createElement("p", { className: "str-chat__channel-header-title" }, displayTitle, " ", live && /* @__PURE__ */ import_react263.default.createElement("span", { className: "str-chat__header-livestream-livelabel" }, t("live"))), subtitle && /* @__PURE__ */ import_react263.default.createElement("p", { className: "str-chat__channel-header-subtitle" }, subtitle), /* @__PURE__ */ import_react263.default.createElement("p", { className: "str-chat__channel-header-info" }, !live && !!member_count && member_count > 0 && /* @__PURE__ */ import_react263.default.createElement(import_react263.default.Fragment, null, t("{{ memberCount }} members", {
     memberCount: member_count
   }), ",", " "), t("{{ watcherCount }} online", { watcherCount: watcher_count }))));
 };
 
 // src/components/Chat/Chat.tsx
-var import_react266 = __toESM(require("react"));
-var import_stream_chat12 = require("stream-chat");
+var import_react267 = __toESM(require("react"));
+var import_stream_chat13 = require("stream-chat");
 
 // src/components/Chat/hooks/useChat.ts
-var import_react263 = require("react");
+var import_react264 = require("react");
 var useChat = ({
   client,
   defaultLanguage = "en",
   i18nInstance,
   initialNavOpen
 }) => {
-  const [translators, setTranslators] = (0, import_react263.useState)({
+  const [translators, setTranslators] = (0, import_react264.useState)({
     t: (key) => key,
     tDateTimeParser: defaultDateTimeParser,
     userLanguage: "en"
   });
-  const [channel, setChannel] = (0, import_react263.useState)();
-  const [mutes, setMutes] = (0, import_react263.useState)([]);
-  const [navOpen, setNavOpen] = (0, import_react263.useState)(initialNavOpen);
-  const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0, import_react263.useState)({});
+  const [channel, setChannel] = (0, import_react264.useState)();
+  const [mutes, setMutes] = (0, import_react264.useState)([]);
+  const [navOpen, setNavOpen] = (0, import_react264.useState)(initialNavOpen);
+  const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0, import_react264.useState)({});
   const clientMutes = client.user?.mutes ?? [];
   const closeMobileNav = () => setNavOpen(false);
   const openMobileNav = () => setTimeout(() => setNavOpen(true), 100);
-  const appSettings = (0, import_react263.useRef)(null);
+  const appSettings = (0, import_react264.useRef)(null);
   const getAppSettings = () => {
     if (appSettings.current) {
       return appSettings.current;
@@ -51157,9 +51182,9 @@ var useChat = ({
     appSettings.current = client.getAppSettings();
     return appSettings.current;
   };
-  (0, import_react263.useEffect)(() => {
+  (0, import_react264.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")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -51171,7 +51196,7 @@ var useChat = ({
       client.polls.unregisterSubscriptions();
     };
   }, [client]);
-  (0, import_react263.useEffect)(() => {
+  (0, import_react264.useEffect)(() => {
     setMutes(clientMutes);
     const handleEvent = (event) => {
       setMutes(event.me?.mutes || []);
@@ -51179,7 +51204,7 @@ var useChat = ({
     client.on("notification.mutes_updated", handleEvent);
     return () => client.off("notification.mutes_updated", handleEvent);
   }, [clientMutes?.length]);
-  (0, import_react263.useEffect)(() => {
+  (0, import_react264.useEffect)(() => {
     let userLanguage = client.user?.language;
     if (!userLanguage) {
       const browserLanguage = window.navigator.language.slice(0, 2);
@@ -51196,7 +51221,7 @@ var useChat = ({
       });
     });
   }, [i18nInstance]);
-  const setActiveChannel = (0, import_react263.useCallback)(
+  const setActiveChannel = (0, import_react264.useCallback)(
     async (activeChannel, watchers = {}, event) => {
       if (event && event.preventDefault) event.preventDefault();
       if (activeChannel && Object.keys(watchers).length) {
@@ -51207,7 +51232,7 @@ var useChat = ({
     },
     []
   );
-  (0, import_react263.useEffect)(() => {
+  (0, import_react264.useEffect)(() => {
     setLatestMessageDatesByChannels({});
   }, [client.user?.id]);
   return {
@@ -51224,7 +51249,7 @@ var useChat = ({
 };
 
 // src/components/Chat/hooks/useCreateChatContext.ts
-var import_react264 = require("react");
+var import_react265 = require("react");
 var useCreateChatContext = (value) => {
   const {
     channel,
@@ -51249,7 +51274,7 @@ var useCreateChatContext = (value) => {
   const clientValues = `${client.clientID}${Object.keys(client.activeChannels).length}${Object.keys(client.listeners).length}${client.mutedChannels.length}
   ${client.user?.id}`;
   const mutedUsersLength = mutes.length;
-  const chatContext = (0, import_react264.useMemo)(
+  const chatContext = (0, import_react265.useMemo)(
     () => ({
       channel,
       channelsQueryState,
@@ -51284,10 +51309,10 @@ var useCreateChatContext = (value) => {
 };
 
 // src/components/Chat/hooks/useChannelsQueryState.ts
-var import_react265 = require("react");
+var import_react266 = require("react");
 var useChannelsQueryState = () => {
-  const [error, setError] = (0, import_react265.useState)(null);
-  const [queryInProgress, setQueryInProgress] = (0, import_react265.useState)("uninitialized");
+  const [error, setError] = (0, import_react266.useState)(null);
+  const [queryInProgress, setQueryInProgress] = (0, import_react266.useState)("uninitialized");
   return {
     error,
     queryInProgress,
@@ -51322,12 +51347,12 @@ var Chat = (props) => {
     translators
   } = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });
   const channelsQueryState = useChannelsQueryState();
-  const searchController = (0, import_react266.useMemo)(
-    () => customChannelSearchController ?? new import_stream_chat12.SearchController({
+  const searchController = (0, import_react267.useMemo)(
+    () => customChannelSearchController ?? new import_stream_chat13.SearchController({
       sources: [
-        new import_stream_chat12.ChannelSearchSource(client),
-        new import_stream_chat12.UserSearchSource(client),
-        new import_stream_chat12.MessageSearchSource(client)
+        new import_stream_chat13.ChannelSearchSource(client),
+        new import_stream_chat13.UserSearchSource(client),
+        new import_stream_chat13.MessageSearchSource(client)
       ]
     }),
     [client, customChannelSearchController]
@@ -51350,26 +51375,26 @@ var Chat = (props) => {
     useImageFlagEmojisOnWindows
   });
   if (!translators.t) return null;
-  return /* @__PURE__ */ import_react266.default.createElement(ChatProvider, { value: chatContextValue }, /* @__PURE__ */ import_react266.default.createElement(TranslationProvider, { value: translators }, children));
+  return /* @__PURE__ */ import_react267.default.createElement(ChatProvider, { value: chatContextValue }, /* @__PURE__ */ import_react267.default.createElement(TranslationProvider, { value: translators }, children));
 };
 
 // src/components/Chat/hooks/useCreateChatClient.ts
-var import_react267 = require("react");
-var import_stream_chat13 = require("stream-chat");
+var import_react268 = require("react");
+var import_stream_chat14 = require("stream-chat");
 var useCreateChatClient = ({
   apiKey,
   options,
   tokenOrProvider,
   userData
 }) => {
-  const [chatClient, setChatClient] = (0, import_react267.useState)(null);
-  const [cachedUserData, setCachedUserData] = (0, import_react267.useState)(userData);
+  const [chatClient, setChatClient] = (0, import_react268.useState)(null);
+  const [cachedUserData, setCachedUserData] = (0, import_react268.useState)(userData);
   if (userData.id !== cachedUserData.id) {
     setCachedUserData(userData);
   }
-  const [cachedOptions] = (0, import_react267.useState)(options);
-  (0, import_react267.useEffect)(() => {
-    const client = new import_stream_chat13.StreamChat(apiKey, void 0, cachedOptions);
+  const [cachedOptions] = (0, import_react268.useState)(options);
+  (0, import_react268.useEffect)(() => {
+    const client = new import_stream_chat14.StreamChat(apiKey, void 0, cachedOptions);
     let didUserConnectInterrupt = false;
     const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
       if (!didUserConnectInterrupt) setChatClient(client);
@@ -51386,12 +51411,12 @@ var useCreateChatClient = ({
 };
 
 // src/components/Window/Window.tsx
-var import_react268 = __toESM(require("react"));
+var import_react269 = __toESM(require("react"));
 var import_clsx67 = __toESM(require("clsx"));
 var UnMemoizedWindow = (props) => {
   const { children, thread: propThread } = props;
   const { thread: contextThread } = useChannelStateContext("Window");
-  return /* @__PURE__ */ import_react268.default.createElement(
+  return /* @__PURE__ */ import_react269.default.createElement(
     "div",
     {
       className: (0, import_clsx67.default)("str-chat__main-panel", {
@@ -51401,7 +51426,7 @@ var UnMemoizedWindow = (props) => {
     children
   );
 };
-var Window = import_react268.default.memo(UnMemoizedWindow);
+var Window = import_react269.default.memo(UnMemoizedWindow);
 /*! Bundled license information:
 
 is-buffer/index.js: