stream-chat-react 12.15.1 → 12.15.3

package/dist/index.node.cjs

@@ -20940,13 +20940,14 @@ var withComponentContext = (Component2) => {
 var import_react10 = __toESM(require("react"));
 
 // src/components/Dialog/DialogManager.ts
+var import_nanoid = require("nanoid");
 var import_stream_chat = require("stream-chat");
 var DialogManager = class {
   constructor({ id } = {}) {
     this.state = new import_stream_chat.StateStore({
       dialogsById: {}
     });
-    this.id = id ?? (/* @__PURE__ */ new Date()).getTime().toString();
+    this.id = id ?? (0, import_nanoid.nanoid)();
   }
   get openDialogCount() {
     return Object.values(this.state.getLatestValue().dialogsById).reduce(
@@ -23205,7 +23206,7 @@ var ImageDropzone = ({
 
 // src/components/ReactFileUtilities/UploadButton.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var import_nanoid = require("nanoid");
+var import_nanoid2 = require("nanoid");
 var import_react34 = __toESM(require("react"));
 
 // src/components/ReactFileUtilities/utils.ts
@@ -23321,7 +23322,7 @@ var UploadFileInput = (0, import_react34.forwardRef)(function UploadFileInput2({
   const { t: t2 } = useTranslationContext("UploadFileInput");
   const { acceptedFiles = [], multipleUploads } = useChannelStateContext("UploadFileInput");
   const { isUploadEnabled, maxFilesLeft, uploadNewFiles } = useMessageInputContext("UploadFileInput");
-  const id = (0, import_react34.useMemo)(() => (0, import_nanoid.nanoid)(), []);
+  const id = (0, import_react34.useMemo)(() => (0, import_nanoid2.nanoid)(), []);
   const onFileChange = (0, import_react34.useCallback)(
     (files) => {
       uploadNewFiles(files);
@@ -40278,11 +40279,11 @@ ReactTextareaAutocomplete.propTypes = {
 };
 
 // src/components/Channel/Channel.tsx
-var import_react258 = __toESM(require("react"));
+var import_react259 = __toESM(require("react"));
 var import_lodash22 = __toESM(require("lodash.debounce"));
 var import_lodash23 = __toESM(require("lodash.defaultsdeep"));
 var import_lodash24 = __toESM(require("lodash.throttle"));
-var import_nanoid11 = require("nanoid");
+var import_nanoid12 = require("nanoid");
 var import_clsx65 = __toESM(require("clsx"));
 
 // src/components/Channel/channelState.ts
@@ -43956,11 +43957,11 @@ var useCreateMessageInputContext = (value) => {
 
 // src/components/MessageInput/hooks/useMessageInputState.ts
 var import_react77 = require("react");
-var import_nanoid4 = require("nanoid");
+var import_nanoid5 = require("nanoid");
 
 // src/components/MessageInput/hooks/useAttachments.ts
 var import_react71 = require("react");
-var import_nanoid2 = require("nanoid");
+var import_nanoid3 = require("nanoid");
 var apiMaxNumberOfFiles = 10;
 var isImageFile = (file) => file.type.startsWith("image/") && !file.type.endsWith(".photoshop");
 var getAttachmentTypeFromMime = (mimeType) => {
@@ -43977,7 +43978,7 @@ var ensureIsLocalAttachment = (attachment) => {
   return {
     localMetadata: {
       ...localMetadata ?? {},
-      id: localMetadata?.id || (0, import_nanoid2.nanoid)()
+      id: localMetadata?.id || (0, import_nanoid3.nanoid)()
     },
     ...rest
   };
@@ -44025,7 +44026,7 @@ var useAttachments = (props, state, dispatch, textareaRef) => {
         uploadType: isImage ? "image" : "file"
       });
       if (!canUpload) return att;
-      localMetadata.id = localMetadata?.id ?? (0, import_nanoid2.nanoid)();
+      localMetadata.id = localMetadata?.id ?? (0, import_nanoid3.nanoid)();
       const finalAttachment = {
         type: getAttachmentTypeFromMime(file.type)
       };
@@ -44137,7 +44138,7 @@ var useAttachments = (props, state, dispatch, textareaRef) => {
               fileName: generateFileName(fileLike.type),
               mimeType: fileLike.type
             }) : fileLike,
-            id: (0, import_nanoid2.nanoid)()
+            id: (0, import_nanoid3.nanoid)()
           }
         });
       });
@@ -44719,7 +44720,7 @@ var BrowserPermission = class {
 
 // src/components/MediaRecorder/classes/MediaRecorderController.ts
 var import_fix_webm_duration = __toESM(require("fix-webm-duration"));
-var import_nanoid3 = require("nanoid");
+var import_nanoid4 = require("nanoid");
 
 // src/utils/mergeDeep.ts
 var import_lodash6 = __toESM(require("lodash.mergewith"));
@@ -44999,7 +45000,7 @@ var MediaRecorderController = class {
         file_size: blob.size,
         localMetadata: {
           file,
-          id: (0, import_nanoid3.nanoid)()
+          id: (0, import_nanoid4.nanoid)()
         },
         mime_type: blob.type,
         title: file.name,
@@ -45266,7 +45267,7 @@ var initState = (message) => {
   const attachments = message.attachments?.filter(({ og_scrape_url }) => !og_scrape_url).map(
     (att) => ({
       ...att,
-      localMetadata: { id: (0, import_nanoid4.nanoid)() }
+      localMetadata: { id: (0, import_nanoid5.nanoid)() }
     })
   ) || [];
   const mentioned_users = message.mentioned_users || [];
@@ -45547,10 +45548,10 @@ var UnMemoizedConnectionStatus = () => {
 var ConnectionStatus = import_react80.default.memo(UnMemoizedConnectionStatus);
 
 // src/components/MessageList/GiphyPreviewMessage.tsx
-var import_react227 = __toESM(require("react"));
+var import_react228 = __toESM(require("react"));
 
 // src/components/Message/Message.tsx
-var import_react226 = __toESM(require("react"));
+var import_react227 = __toESM(require("react"));
 
 // src/components/Message/hooks/useActionHandler.ts
 var handleActionWarning = `Action handler was called, but it is missing one of its required arguments. 
@@ -49125,7 +49126,7 @@ var useMessageTextStreaming = ({
 };
 
 // src/components/Message/MessageSimple.tsx
-var import_react225 = __toESM(require("react"));
+var import_react226 = __toESM(require("react"));
 var import_clsx60 = __toESM(require("clsx"));
 
 // src/components/Message/icons.tsx
@@ -51260,12 +51261,12 @@ var Poll = ({
 
 // src/components/Poll/PollCreationDialog/PollCreationDialog.tsx
 var import_clsx48 = __toESM(require("clsx"));
-var import_nanoid6 = require("nanoid");
+var import_nanoid7 = require("nanoid");
 var import_react179 = __toESM(require("react"));
 
 // src/components/Poll/PollCreationDialog/OptionFieldSet.tsx
 var import_clsx46 = __toESM(require("clsx"));
-var import_nanoid5 = require("nanoid");
+var import_nanoid6 = require("nanoid");
 var import_react176 = __toESM(require("react"));
 
 // src/components/DragAndDrop/DragAndDropContainer.tsx
@@ -51448,7 +51449,7 @@ var OptionFieldSet = ({
               const shouldAddEmptyOption = prev.options.length < MAX_POLL_OPTIONS && (!prev.options || prev.options.slice(i + 1).length === 0 && !!e2.target.value);
               const shouldRemoveOption = prev.options && prev.options.slice(i + 1).length > 0 && !e2.target.value;
               const optionListHead = prev.options ? prev.options.slice(0, i) : [];
-              const optionListTail = shouldAddEmptyOption ? [{ id: (0, import_nanoid5.nanoid)(), text: "" }] : (prev.options || []).slice(i + 1);
+              const optionListTail = shouldAddEmptyOption ? [{ id: (0, import_nanoid6.nanoid)(), text: "" }] : (prev.options || []).slice(i + 1);
               if (errors[option.id] && !e2.target.value || VALIDATION_ERRORS[errors[option.id]] && !findOptionDuplicate({ id: e2.target.id, text: e2.target.value })) {
                 setErrors((prev2) => {
                   delete prev2[option.id];
@@ -51577,10 +51578,10 @@ var PollCreationDialog = ({ close }) => {
       allow_user_suggested_options: false,
       description: "",
       enforce_unique_vote: true,
-      id: (0, import_nanoid6.nanoid)(),
+      id: (0, import_nanoid7.nanoid)(),
       max_votes_allowed: "",
       name: "",
-      options: [{ id: (0, import_nanoid6.nanoid)(), text: "" }],
+      options: [{ id: (0, import_nanoid7.nanoid)(), text: "" }],
       user_id: client.user?.id,
       voting_visibility: "public"
     })
@@ -51680,7 +51681,7 @@ var PollCreationDialog = ({ close }) => {
           {
             id: "max_votes_allowed",
             onChange: (e2) => {
-              const isValidValue = !e2.target.value || e2.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
+              const isValidValue = e2.target.validity.valid && (!e2.target.value || e2.target.value.match(VALID_MAX_VOTES_VALUE_REGEX));
               if (!isValidValue) {
                 setMultipleAnswerCountError(
                   t2("Type a number from 2 to 10")
@@ -51904,14 +51905,13 @@ var CUSTOM_MESSAGE_TYPE = {
 };
 
 // src/components/MessageInput/AttachmentSelector.tsx
-var import_nanoid8 = require("nanoid");
-var import_react187 = __toESM(require("react"));
+var import_react188 = __toESM(require("react"));
 
 // src/components/MessageInput/icons.tsx
 var import_react184 = __toESM(require("react"));
-var import_nanoid7 = require("nanoid");
+var import_nanoid8 = require("nanoid");
 var LoadingIndicatorIcon = ({ size = 20 }) => {
-  const id = (0, import_react184.useMemo)(() => (0, import_nanoid7.nanoid)(), []);
+  const id = (0, import_react184.useMemo)(() => (0, import_nanoid8.nanoid)(), []);
   return /* @__PURE__ */ import_react184.default.createElement("div", { className: "str-chat__loading-indicator" }, /* @__PURE__ */ import_react184.default.createElement(
     "svg",
     {
@@ -52099,16 +52099,24 @@ var AttachmentSelectorContextProvider = ({
 }) => /* @__PURE__ */ import_react186.default.createElement(AttachmentSelectorContext.Provider, { value }, children);
 var useAttachmentSelectorContext = () => (0, import_react186.useContext)(AttachmentSelectorContext);
 
+// src/components/UtilityComponents/useStableId.ts
+var import_nanoid9 = require("nanoid");
+var import_react187 = require("react");
+var useStableId = (key) => {
+  const id = (0, import_react187.useMemo)(() => (0, import_nanoid9.nanoid)(), [key]);
+  return id;
+};
+
 // src/components/MessageInput/AttachmentSelector.tsx
 var SimpleAttachmentSelector = () => {
   const {
     AttachmentSelectorInitiationButtonContents,
     FileUploadIcon = UploadIcon
   } = useComponentContext();
-  const inputRef = (0, import_react187.useRef)(null);
-  const [labelElement, setLabelElement] = (0, import_react187.useState)(null);
-  const id = (0, import_react187.useMemo)(() => (0, import_nanoid8.nanoid)(), []);
-  (0, import_react187.useEffect)(() => {
+  const inputRef = (0, import_react188.useRef)(null);
+  const [labelElement, setLabelElement] = (0, import_react188.useState)(null);
+  const id = useStableId();
+  (0, import_react188.useEffect)(() => {
     if (!labelElement) return;
     const handleKeyUp = (event) => {
       if (![" ", "Enter"].includes(event.key) || !inputRef.current) return;
@@ -52120,7 +52128,7 @@ var SimpleAttachmentSelector = () => {
       labelElement.removeEventListener("keyup", handleKeyUp);
     };
   }, [labelElement]);
-  return /* @__PURE__ */ import_react187.default.createElement("div", { className: "str-chat__file-input-container", "data-testid": "file-upload-button" }, /* @__PURE__ */ import_react187.default.createElement(UploadFileInput, { id, ref: inputRef }), /* @__PURE__ */ import_react187.default.createElement(
+  return /* @__PURE__ */ import_react188.default.createElement("div", { className: "str-chat__file-input-container", "data-testid": "file-upload-button" }, /* @__PURE__ */ import_react188.default.createElement(UploadFileInput, { id, ref: inputRef }), /* @__PURE__ */ import_react188.default.createElement(
     "label",
     {
       className: "str-chat__file-input-label",
@@ -52128,24 +52136,24 @@ var SimpleAttachmentSelector = () => {
       ref: setLabelElement,
       tabIndex: 0
     },
-    AttachmentSelectorInitiationButtonContents ? /* @__PURE__ */ import_react187.default.createElement(AttachmentSelectorInitiationButtonContents, null) : /* @__PURE__ */ import_react187.default.createElement(FileUploadIcon, null)
+    AttachmentSelectorInitiationButtonContents ? /* @__PURE__ */ import_react188.default.createElement(AttachmentSelectorInitiationButtonContents, null) : /* @__PURE__ */ import_react188.default.createElement(FileUploadIcon, null)
   ));
 };
 var AttachmentSelectorMenuInitButtonIcon = () => {
   const { AttachmentSelectorInitiationButtonContents, FileUploadIcon } = useComponentContext("SimpleAttachmentSelector");
   if (AttachmentSelectorInitiationButtonContents) {
-    return /* @__PURE__ */ import_react187.default.createElement(AttachmentSelectorInitiationButtonContents, null);
+    return /* @__PURE__ */ import_react188.default.createElement(AttachmentSelectorInitiationButtonContents, null);
   }
   if (FileUploadIcon) {
-    return /* @__PURE__ */ import_react187.default.createElement(FileUploadIcon, null);
+    return /* @__PURE__ */ import_react188.default.createElement(FileUploadIcon, null);
   }
-  return /* @__PURE__ */ import_react187.default.createElement("div", { className: "str-chat__attachment-selector__menu-button__icon" });
+  return /* @__PURE__ */ import_react188.default.createElement("div", { className: "str-chat__attachment-selector__menu-button__icon" });
 };
 var DefaultAttachmentSelectorComponents = {
   File({ closeMenu }) {
     const { t: t2 } = useTranslationContext();
     const { fileInput } = useAttachmentSelectorContext();
-    return /* @__PURE__ */ import_react187.default.createElement(
+    return /* @__PURE__ */ import_react188.default.createElement(
       DialogMenuButton,
       {
         className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__upload-file-button",
@@ -52159,7 +52167,7 @@ var DefaultAttachmentSelectorComponents = {
   },
   Poll({ closeMenu, openModalForAction }) {
     const { t: t2 } = useTranslationContext();
-    return /* @__PURE__ */ import_react187.default.createElement(
+    return /* @__PURE__ */ import_react188.default.createElement(
       DialogMenuButton,
       {
         className: "str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button",
@@ -52209,8 +52217,8 @@ var AttachmentSelector = ({
   const menuDialogId = `attachment-actions-menu${isThreadInput ? "-thread" : ""}`;
   const menuDialog = useDialog({ id: menuDialogId });
   const menuDialogIsOpen = useDialogIsOpen(menuDialogId);
-  const [modalContentAction, setModalContentActionAction] = (0, import_react187.useState)();
-  const openModal = (0, import_react187.useCallback)(
+  const [modalContentAction, setModalContentActionAction] = (0, import_react188.useState)();
+  const openModal = (0, import_react188.useCallback)(
     (actionType) => {
       const action = actions.find((a2) => a2.type === actionType);
       if (!action?.ModalContent) return;
@@ -52218,19 +52226,19 @@ var AttachmentSelector = ({
     },
     [actions]
   );
-  const closeModal = (0, import_react187.useCallback)(() => setModalContentActionAction(void 0), []);
-  const [fileInput, setFileInput] = (0, import_react187.useState)(null);
-  const menuButtonRef = (0, import_react187.useRef)(null);
-  const getDefaultPortalDestination = (0, import_react187.useCallback)(
+  const closeModal = (0, import_react188.useCallback)(() => setModalContentActionAction(void 0), []);
+  const [fileInput, setFileInput] = (0, import_react188.useState)(null);
+  const menuButtonRef = (0, import_react188.useRef)(null);
+  const getDefaultPortalDestination = (0, import_react188.useCallback)(
     () => document.getElementById(CHANNEL_CONTAINER_ID),
     []
   );
   if (actions.length === 0) return null;
   if (actions.length === 1 && actions[0].type === "uploadFile")
-    return /* @__PURE__ */ import_react187.default.createElement(SimpleAttachmentSelector, null);
+    return /* @__PURE__ */ import_react188.default.createElement(SimpleAttachmentSelector, null);
   const ModalContent = modalContentAction?.ModalContent;
   const modalIsOpen = !!ModalContent;
-  return /* @__PURE__ */ import_react187.default.createElement(AttachmentSelectorContextProvider, { value: { fileInput } }, /* @__PURE__ */ import_react187.default.createElement("div", { className: "str-chat__attachment-selector" }, channelCapabilities["upload-file"] && /* @__PURE__ */ import_react187.default.createElement(UploadFileInput, { ref: setFileInput }), /* @__PURE__ */ import_react187.default.createElement(
+  return /* @__PURE__ */ import_react188.default.createElement(AttachmentSelectorContextProvider, { value: { fileInput } }, /* @__PURE__ */ import_react188.default.createElement("div", { className: "str-chat__attachment-selector" }, channelCapabilities["upload-file"] && /* @__PURE__ */ import_react188.default.createElement(UploadFileInput, { ref: setFileInput }), /* @__PURE__ */ import_react188.default.createElement(
     "button",
     {
       "aria-expanded": menuDialogIsOpen,
@@ -52241,8 +52249,8 @@ var AttachmentSelector = ({
       onClick: () => menuDialog?.toggle(),
       ref: menuButtonRef
     },
-    /* @__PURE__ */ import_react187.default.createElement(AttachmentSelectorMenuInitButtonIcon, null)
-  ), /* @__PURE__ */ import_react187.default.createElement(
+    /* @__PURE__ */ import_react188.default.createElement(AttachmentSelectorMenuInitButtonIcon, null)
+  ), /* @__PURE__ */ import_react188.default.createElement(
     DialogAnchor,
     {
       id: menuDialogId,
@@ -52250,13 +52258,13 @@ var AttachmentSelector = ({
       referenceElement: menuButtonRef.current,
       trapFocus: true
     },
-    /* @__PURE__ */ import_react187.default.createElement(
+    /* @__PURE__ */ import_react188.default.createElement(
       "div",
       {
         className: "str-chat__attachment-selector-actions-menu str-chat__dialog-menu",
         "data-testid": "attachment-selector-actions-menu"
       },
-      actions.map(({ ActionButton, type }) => /* @__PURE__ */ import_react187.default.createElement(
+      actions.map(({ ActionButton, type }) => /* @__PURE__ */ import_react188.default.createElement(
         ActionButton,
         {
           closeMenu: menuDialog.close,
@@ -52265,29 +52273,29 @@ var AttachmentSelector = ({
         }
       ))
     )
-  ), /* @__PURE__ */ import_react187.default.createElement(
+  ), /* @__PURE__ */ import_react188.default.createElement(
     Portal,
     {
       getPortalDestination: getModalPortalDestination ?? getDefaultPortalDestination,
       isOpen: modalIsOpen
     },
-    /* @__PURE__ */ import_react187.default.createElement(
+    /* @__PURE__ */ import_react188.default.createElement(
       Modal,
       {
         className: "str-chat__create-poll-modal",
         onClose: closeModal,
         open: modalIsOpen
       },
-      ModalContent && /* @__PURE__ */ import_react187.default.createElement(ModalContent, { close: closeModal })
+      ModalContent && /* @__PURE__ */ import_react188.default.createElement(ModalContent, { close: closeModal })
     )
   )));
 };
 
 // src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx
-var import_react199 = __toESM(require("react"));
+var import_react200 = __toESM(require("react"));
 
 // src/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
-var import_react188 = __toESM(require("react"));
+var import_react189 = __toESM(require("react"));
 var UnsupportedAttachmentPreview = ({
   attachment,
   handleRetry,
@@ -52295,14 +52303,14 @@ var UnsupportedAttachmentPreview = ({
 }) => {
   const { t: t2 } = useTranslationContext("UnsupportedAttachmentPreview");
   const title = attachment.title ?? t2("Unsupported attachment");
-  return /* @__PURE__ */ import_react188.default.createElement(
+  return /* @__PURE__ */ import_react189.default.createElement(
     "div",
     {
       className: "str-chat__attachment-preview-unsupported",
       "data-testid": "attachment-preview-unknown"
     },
-    /* @__PURE__ */ import_react188.default.createElement("div", { className: "str-chat__attachment-preview-file-icon" }, /* @__PURE__ */ import_react188.default.createElement(FileIcon, { filename: title, mimeType: attachment.mime_type })),
-    /* @__PURE__ */ import_react188.default.createElement(
+    /* @__PURE__ */ import_react189.default.createElement("div", { className: "str-chat__attachment-preview-file-icon" }, /* @__PURE__ */ import_react189.default.createElement(FileIcon, { filename: title, mimeType: attachment.mime_type })),
+    /* @__PURE__ */ import_react189.default.createElement(
       "button",
       {
         className: "str-chat__attachment-preview-delete",
@@ -52310,18 +52318,18 @@ var UnsupportedAttachmentPreview = ({
         disabled: attachment.localMetadata?.uploadState === "uploading",
         onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata?.id])
       },
-      /* @__PURE__ */ import_react188.default.createElement(CloseIcon, null)
+      /* @__PURE__ */ import_react189.default.createElement(CloseIcon, null)
     ),
-    attachment.localMetadata?.uploadState === "failed" && !!handleRetry && /* @__PURE__ */ import_react188.default.createElement(
+    attachment.localMetadata?.uploadState === "failed" && !!handleRetry && /* @__PURE__ */ import_react189.default.createElement(
       "button",
       {
         className: "str-chat__attachment-preview-error str-chat__attachment-preview-error-file",
         "data-testid": "file-preview-item-retry-button",
         onClick: () => handleRetry(attachment)
       },
-      /* @__PURE__ */ import_react188.default.createElement(RetryIcon, null)
+      /* @__PURE__ */ import_react189.default.createElement(RetryIcon, null)
     ),
-    /* @__PURE__ */ import_react188.default.createElement("div", { className: "str-chat__attachment-preview-metadata" }, /* @__PURE__ */ import_react188.default.createElement("div", { className: "str-chat__attachment-preview-title", title }, title), attachment.localMetadata?.uploadState === "finished" && !!attachment.asset_url && /* @__PURE__ */ import_react188.default.createElement(
+    /* @__PURE__ */ import_react189.default.createElement("div", { className: "str-chat__attachment-preview-metadata" }, /* @__PURE__ */ import_react189.default.createElement("div", { className: "str-chat__attachment-preview-title", title }, title), attachment.localMetadata?.uploadState === "finished" && !!attachment.asset_url && /* @__PURE__ */ import_react189.default.createElement(
       "a",
       {
         className: "str-chat__attachment-preview-file-download",
@@ -52330,16 +52338,16 @@ var UnsupportedAttachmentPreview = ({
         rel: "noreferrer",
         target: "_blank"
       },
-      /* @__PURE__ */ import_react188.default.createElement(DownloadIcon2, null)
-    ), attachment.localMetadata?.uploadState === "uploading" && /* @__PURE__ */ import_react188.default.createElement(LoadingIndicatorIcon, { size: 17 }))
+      /* @__PURE__ */ import_react189.default.createElement(DownloadIcon2, null)
+    ), attachment.localMetadata?.uploadState === "uploading" && /* @__PURE__ */ import_react189.default.createElement(LoadingIndicatorIcon, { size: 17 }))
   );
 };
 
 // src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx
-var import_react196 = __toESM(require("react"));
+var import_react197 = __toESM(require("react"));
 
 // src/components/MediaRecorder/RecordingPermissionDeniedNotification.tsx
-var import_react189 = __toESM(require("react"));
+var import_react190 = __toESM(require("react"));
 var RecordingPermissionDeniedNotification = ({
   onClose,
   permissionName
@@ -52355,7 +52363,7 @@ var RecordingPermissionDeniedNotification = ({
       microphone: t2("Allow access to microphone")
     }
   };
-  return /* @__PURE__ */ import_react189.default.createElement("div", { className: "str-chat__recording-permission-denied-notification" }, /* @__PURE__ */ import_react189.default.createElement("div", { className: "str-chat__recording-permission-denied-notification__heading" }, permissionTranslations.heading[permissionName]), /* @__PURE__ */ import_react189.default.createElement("p", { className: "str-chat__recording-permission-denied-notification__message" }, permissionTranslations.body[permissionName]), /* @__PURE__ */ import_react189.default.createElement("div", { className: "str-chat__recording-permission-denied-notification__dismiss-button-container" }, /* @__PURE__ */ import_react189.default.createElement(
+  return /* @__PURE__ */ import_react190.default.createElement("div", { className: "str-chat__recording-permission-denied-notification" }, /* @__PURE__ */ import_react190.default.createElement("div", { className: "str-chat__recording-permission-denied-notification__heading" }, permissionTranslations.heading[permissionName]), /* @__PURE__ */ import_react190.default.createElement("p", { className: "str-chat__recording-permission-denied-notification__message" }, permissionTranslations.body[permissionName]), /* @__PURE__ */ import_react190.default.createElement("div", { className: "str-chat__recording-permission-denied-notification__dismiss-button-container" }, /* @__PURE__ */ import_react190.default.createElement(
     "button",
     {
       className: "str-chat__recording-permission-denied-notification__dismiss-button",
@@ -52366,15 +52374,15 @@ var RecordingPermissionDeniedNotification = ({
 };
 
 // src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx
-var import_react194 = __toESM(require("react"));
+var import_react195 = __toESM(require("react"));
 
 // src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx
-var import_react191 = __toESM(require("react"));
+var import_react192 = __toESM(require("react"));
 
 // src/components/MediaRecorder/AudioRecorder/RecordingTimer.tsx
 var import_clsx52 = __toESM(require("clsx"));
-var import_react190 = __toESM(require("react"));
-var RecordingTimer = ({ durationSeconds }) => /* @__PURE__ */ import_react190.default.createElement(
+var import_react191 = __toESM(require("react"));
+var RecordingTimer = ({ durationSeconds }) => /* @__PURE__ */ import_react191.default.createElement(
   "div",
   {
     className: (0, import_clsx52.default)("str-chat__recording-timer", {
@@ -52396,15 +52404,15 @@ var AudioRecordingPreview = ({
     mimeType
   });
   const displayedDuration = secondsElapsed || durationSeconds;
-  return /* @__PURE__ */ import_react191.default.createElement(import_react191.default.Fragment, null, /* @__PURE__ */ import_react191.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react191.default.createElement("source", { src: props.src, type: mimeType })), /* @__PURE__ */ import_react191.default.createElement(
+  return /* @__PURE__ */ import_react192.default.createElement(import_react192.default.Fragment, null, /* @__PURE__ */ import_react192.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react192.default.createElement("source", { src: props.src, type: mimeType })), /* @__PURE__ */ import_react192.default.createElement(
     "button",
     {
       className: "str-chat__audio_recorder__toggle-playback-button",
       "data-testid": "audio-recording-preview-toggle-play-btn",
       onClick: togglePlay
     },
-    isPlaying ? /* @__PURE__ */ import_react191.default.createElement(PauseIcon2, null) : /* @__PURE__ */ import_react191.default.createElement(PlayIcon, null)
-  ), /* @__PURE__ */ import_react191.default.createElement(RecordingTimer, { durationSeconds: displayedDuration }), /* @__PURE__ */ import_react191.default.createElement("div", { className: "str-chat__wave-progress-bar__track-container" }, /* @__PURE__ */ import_react191.default.createElement(
+    isPlaying ? /* @__PURE__ */ import_react192.default.createElement(PauseIcon2, null) : /* @__PURE__ */ import_react192.default.createElement(PlayIcon, null)
+  ), /* @__PURE__ */ import_react192.default.createElement(RecordingTimer, { durationSeconds: displayedDuration }), /* @__PURE__ */ import_react192.default.createElement("div", { className: "str-chat__wave-progress-bar__track-container" }, /* @__PURE__ */ import_react192.default.createElement(
     WaveProgressBar,
     {
       progress,
@@ -52415,24 +52423,24 @@ var AudioRecordingPreview = ({
 };
 
 // src/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.tsx
-var import_react193 = __toESM(require("react"));
+var import_react194 = __toESM(require("react"));
 
 // src/components/MessageInput/hooks/useTimeElapsed.ts
-var import_react192 = require("react");
+var import_react193 = require("react");
 var useTimeElapsed = ({ startOnMount } = {}) => {
-  const [secondsElapsed, setSecondsElapsed] = (0, import_react192.useState)(0);
-  const updateInterval = (0, import_react192.useRef)(void 0);
-  const startCounter = (0, import_react192.useCallback)(() => {
+  const [secondsElapsed, setSecondsElapsed] = (0, import_react193.useState)(0);
+  const updateInterval = (0, import_react193.useRef)(void 0);
+  const startCounter = (0, import_react193.useCallback)(() => {
     if (updateInterval.current) return;
     updateInterval.current = setInterval(() => {
       setSecondsElapsed((prev) => prev + 1);
     }, 1e3);
   }, []);
-  const stopCounter = (0, import_react192.useCallback)(() => {
+  const stopCounter = (0, import_react193.useCallback)(() => {
     clearInterval(updateInterval.current);
     updateInterval.current = void 0;
   }, []);
-  (0, import_react192.useEffect)(() => {
+  (0, import_react193.useEffect)(() => {
     if (!startOnMount) return;
     startCounter();
     return () => {
@@ -52451,8 +52459,8 @@ var AudioRecordingWaveform = ({ maxDataPointsDrawn = 100 }) => {
   const {
     recordingController: { recorder }
   } = useMessageInputContext();
-  const [amplitudes, setAmplitudes] = (0, import_react193.useState)([]);
-  (0, import_react193.useEffect)(() => {
+  const [amplitudes, setAmplitudes] = (0, import_react194.useState)([]);
+  (0, import_react194.useEffect)(() => {
     if (!recorder?.amplitudeRecorder) return;
     const amplitudesSubscription = recorder.amplitudeRecorder.amplitudes.subscribe(setAmplitudes);
     return () => {
@@ -52460,7 +52468,7 @@ var AudioRecordingWaveform = ({ maxDataPointsDrawn = 100 }) => {
     };
   }, [recorder]);
   if (!recorder) return null;
-  return /* @__PURE__ */ import_react193.default.createElement("div", { className: "str-chat__waveform-box-container" }, /* @__PURE__ */ import_react193.default.createElement("div", { className: "str-chat__audio_recorder__waveform-box" }, amplitudes.slice(-maxDataPointsDrawn).map((amplitude, i) => /* @__PURE__ */ import_react193.default.createElement(
+  return /* @__PURE__ */ import_react194.default.createElement("div", { className: "str-chat__waveform-box-container" }, /* @__PURE__ */ import_react194.default.createElement("div", { className: "str-chat__audio_recorder__waveform-box" }, amplitudes.slice(-maxDataPointsDrawn).map((amplitude, i) => /* @__PURE__ */ import_react194.default.createElement(
     "div",
     {
       className: "str-chat__wave-progress-bar__amplitude-bar",
@@ -52476,7 +52484,7 @@ var AudioRecordingInProgress = () => {
   const {
     recordingController: { recorder }
   } = useMessageInputContext();
-  (0, import_react193.useEffect)(() => {
+  (0, import_react194.useEffect)(() => {
     if (!recorder?.mediaRecorder) return;
     const { mediaRecorder } = recorder;
     if (mediaRecorder.state === "recording") {
@@ -52493,7 +52501,7 @@ var AudioRecordingInProgress = () => {
       mediaRecorder.removeEventListener("pause", stopCounter);
     };
   }, [recorder, startCounter, stopCounter]);
-  return /* @__PURE__ */ import_react193.default.createElement(import_react193.default.Fragment, null, /* @__PURE__ */ import_react193.default.createElement(RecordingTimer, { durationSeconds: secondsElapsed }), /* @__PURE__ */ import_react193.default.createElement(AudioRecordingWaveform, null));
+  return /* @__PURE__ */ import_react194.default.createElement(import_react194.default.Fragment, null, /* @__PURE__ */ import_react194.default.createElement(RecordingTimer, { durationSeconds: secondsElapsed }), /* @__PURE__ */ import_react194.default.createElement(AudioRecordingWaveform, null));
 };
 
 // src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx
@@ -52502,7 +52510,7 @@ var AudioRecorder = () => {
     recordingController: { completeRecording, recorder, recording, recordingState }
   } = useMessageInputContext();
   const isUploadingFile = recording?.localMetadata?.uploadState === "uploading";
-  const state = (0, import_react194.useMemo)(
+  const state = (0, import_react195.useMemo)(
     () => ({
       paused: recordingState === "paused" /* PAUSED */,
       recording: recordingState === "recording" /* RECORDING */,
@@ -52511,7 +52519,7 @@ var AudioRecorder = () => {
     [recordingState]
   );
   if (!recorder) return null;
-  return /* @__PURE__ */ import_react194.default.createElement("div", { className: "str-chat__audio_recorder-container" }, /* @__PURE__ */ import_react194.default.createElement("div", { className: "str-chat__audio_recorder", "data-testid": "audio-recorder" }, /* @__PURE__ */ import_react194.default.createElement(
+  return /* @__PURE__ */ import_react195.default.createElement("div", { className: "str-chat__audio_recorder-container" }, /* @__PURE__ */ import_react195.default.createElement("div", { className: "str-chat__audio_recorder", "data-testid": "audio-recorder" }, /* @__PURE__ */ import_react195.default.createElement(
     "button",
     {
       className: "str-chat__audio_recorder__cancel-button",
@@ -52519,8 +52527,8 @@ var AudioRecorder = () => {
       disabled: isUploadingFile,
       onClick: recorder.cancel
     },
-    /* @__PURE__ */ import_react194.default.createElement(BinIcon, null)
-  ), state.stopped && recording?.asset_url ? /* @__PURE__ */ import_react194.default.createElement(
+    /* @__PURE__ */ import_react195.default.createElement(BinIcon, null)
+  ), state.stopped && recording?.asset_url ? /* @__PURE__ */ import_react195.default.createElement(
     AudioRecordingPreview,
     {
       durationSeconds: recording.duration ?? 0,
@@ -52528,22 +52536,22 @@ var AudioRecorder = () => {
       src: recording.asset_url,
       waveformData: recording.waveform_data
     }
-  ) : state.paused || state.recording ? /* @__PURE__ */ import_react194.default.createElement(AudioRecordingInProgress, null) : null, state.paused && /* @__PURE__ */ import_react194.default.createElement(
+  ) : state.paused || state.recording ? /* @__PURE__ */ import_react195.default.createElement(AudioRecordingInProgress, null) : null, state.paused && /* @__PURE__ */ import_react195.default.createElement(
     "button",
     {
       className: "str-chat__audio_recorder__resume-recording-button",
       onClick: recorder.resume
     },
-    /* @__PURE__ */ import_react194.default.createElement(MicIcon, null)
-  ), state.recording && /* @__PURE__ */ import_react194.default.createElement(
+    /* @__PURE__ */ import_react195.default.createElement(MicIcon, null)
+  ), state.recording && /* @__PURE__ */ import_react195.default.createElement(
     "button",
     {
       className: "str-chat__audio_recorder__pause-recording-button",
       "data-testid": "pause-recording-audio-button",
       onClick: recorder.pause
     },
-    /* @__PURE__ */ import_react194.default.createElement(PauseIcon2, null)
-  ), state.stopped ? /* @__PURE__ */ import_react194.default.createElement(
+    /* @__PURE__ */ import_react195.default.createElement(PauseIcon2, null)
+  ), state.stopped ? /* @__PURE__ */ import_react195.default.createElement(
     "button",
     {
       className: "str-chat__audio_recorder__complete-button",
@@ -52551,21 +52559,21 @@ var AudioRecorder = () => {
       disabled: isUploadingFile,
       onClick: completeRecording
     },
-    isUploadingFile ? /* @__PURE__ */ import_react194.default.createElement(LoadingIndicatorIcon, null) : /* @__PURE__ */ import_react194.default.createElement(SendIcon, null)
-  ) : /* @__PURE__ */ import_react194.default.createElement(
+    isUploadingFile ? /* @__PURE__ */ import_react195.default.createElement(LoadingIndicatorIcon, null) : /* @__PURE__ */ import_react195.default.createElement(SendIcon, null)
+  ) : /* @__PURE__ */ import_react195.default.createElement(
     "button",
     {
       className: "str-chat__audio_recorder__stop-button",
       "data-testid": "audio-recorder-stop-button",
       onClick: recorder.stop
     },
-    /* @__PURE__ */ import_react194.default.createElement(CheckSignIcon, null)
+    /* @__PURE__ */ import_react195.default.createElement(CheckSignIcon, null)
   )));
 };
 
 // src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx
-var import_react195 = __toESM(require("react"));
-var StartRecordingAudioButton = (props) => /* @__PURE__ */ import_react195.default.createElement(
+var import_react196 = __toESM(require("react"));
+var StartRecordingAudioButton = (props) => /* @__PURE__ */ import_react196.default.createElement(
   "button",
   {
     "aria-label": "Start recording audio",
@@ -52573,7 +52581,7 @@ var StartRecordingAudioButton = (props) => /* @__PURE__ */ import_react195.defau
     "data-testid": "start-recording-audio-button",
     ...props
   },
-  /* @__PURE__ */ import_react195.default.createElement(MicIcon, null)
+  /* @__PURE__ */ import_react196.default.createElement(MicIcon, null)
 );
 
 // src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx
@@ -52585,13 +52593,13 @@ var VoiceRecordingPreview = ({
   const { audioRef, isPlaying, secondsElapsed, togglePlay } = useAudioController({
     mimeType: attachment.mime_type
   });
-  return /* @__PURE__ */ import_react196.default.createElement(
+  return /* @__PURE__ */ import_react197.default.createElement(
     "div",
     {
       className: "str-chat__attachment-preview-voice-recording",
       "data-testid": "attachment-preview-voice-recording"
     },
-    /* @__PURE__ */ import_react196.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react196.default.createElement(
+    /* @__PURE__ */ import_react197.default.createElement("audio", { ref: audioRef }, /* @__PURE__ */ import_react197.default.createElement(
       "source",
       {
         "data-testid": "audio-source",
@@ -52599,8 +52607,8 @@ var VoiceRecordingPreview = ({
         type: attachment.mime_type
       }
     )),
-    /* @__PURE__ */ import_react196.default.createElement(PlayButton, { isPlaying, onClick: togglePlay }),
-    /* @__PURE__ */ import_react196.default.createElement(
+    /* @__PURE__ */ import_react197.default.createElement(PlayButton, { isPlaying, onClick: togglePlay }),
+    /* @__PURE__ */ import_react197.default.createElement(
       "button",
       {
         className: "str-chat__attachment-preview-delete",
@@ -52608,38 +52616,38 @@ var VoiceRecordingPreview = ({
         disabled: attachment.localMetadata?.uploadState === "uploading",
         onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata.id])
       },
-      /* @__PURE__ */ import_react196.default.createElement(CloseIcon, null)
+      /* @__PURE__ */ import_react197.default.createElement(CloseIcon, null)
     ),
-    attachment.localMetadata?.uploadState === "failed" && !!handleRetry && /* @__PURE__ */ import_react196.default.createElement(
+    attachment.localMetadata?.uploadState === "failed" && !!handleRetry && /* @__PURE__ */ import_react197.default.createElement(
       "button",
       {
         className: "str-chat__attachment-preview-error str-chat__attachment-preview-error-file",
         "data-testid": "file-preview-item-retry-button",
         onClick: () => handleRetry(attachment)
       },
-      /* @__PURE__ */ import_react196.default.createElement(RetryIcon, null)
+      /* @__PURE__ */ import_react197.default.createElement(RetryIcon, null)
     ),
-    /* @__PURE__ */ import_react196.default.createElement("div", { className: "str-chat__attachment-preview-metadata" }, /* @__PURE__ */ import_react196.default.createElement("div", { className: "str-chat__attachment-preview-file-name", title: attachment.title }, attachment.title), typeof attachment.duration !== "undefined" && /* @__PURE__ */ import_react196.default.createElement(RecordingTimer, { durationSeconds: secondsElapsed || attachment.duration }), attachment.localMetadata?.uploadState === "uploading" && /* @__PURE__ */ import_react196.default.createElement(LoadingIndicatorIcon, { size: 17 })),
-    /* @__PURE__ */ import_react196.default.createElement("div", { className: "str-chat__attachment-preview-file-icon" }, /* @__PURE__ */ import_react196.default.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type }))
+    /* @__PURE__ */ import_react197.default.createElement("div", { className: "str-chat__attachment-preview-metadata" }, /* @__PURE__ */ import_react197.default.createElement("div", { className: "str-chat__attachment-preview-file-name", title: attachment.title }, attachment.title), typeof attachment.duration !== "undefined" && /* @__PURE__ */ import_react197.default.createElement(RecordingTimer, { durationSeconds: secondsElapsed || attachment.duration }), attachment.localMetadata?.uploadState === "uploading" && /* @__PURE__ */ import_react197.default.createElement(LoadingIndicatorIcon, { size: 17 })),
+    /* @__PURE__ */ import_react197.default.createElement("div", { className: "str-chat__attachment-preview-file-icon" }, /* @__PURE__ */ import_react197.default.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type }))
   );
 };
 
 // src/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.tsx
-var import_react197 = __toESM(require("react"));
+var import_react198 = __toESM(require("react"));
 var FileAttachmentPreview = ({
   attachment,
   handleRetry,
   removeAttachments
 }) => {
   const { t: t2 } = useTranslationContext("FilePreview");
-  return /* @__PURE__ */ import_react197.default.createElement(
+  return /* @__PURE__ */ import_react198.default.createElement(
     "div",
     {
       className: "str-chat__attachment-preview-file",
       "data-testid": "attachment-preview-file"
     },
-    /* @__PURE__ */ import_react197.default.createElement("div", { className: "str-chat__attachment-preview-file-icon" }, /* @__PURE__ */ import_react197.default.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type })),
-    /* @__PURE__ */ import_react197.default.createElement(
+    /* @__PURE__ */ import_react198.default.createElement("div", { className: "str-chat__attachment-preview-file-icon" }, /* @__PURE__ */ import_react198.default.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type })),
+    /* @__PURE__ */ import_react198.default.createElement(
       "button",
       {
         "aria-label": t2("aria/Remove attachment"),
@@ -52648,18 +52656,18 @@ var FileAttachmentPreview = ({
         disabled: attachment.localMetadata?.uploadState === "uploading",
         onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata?.id])
       },
-      /* @__PURE__ */ import_react197.default.createElement(CloseIcon, null)
+      /* @__PURE__ */ import_react198.default.createElement(CloseIcon, null)
     ),
-    attachment.localMetadata?.uploadState === "failed" && !!handleRetry && /* @__PURE__ */ import_react197.default.createElement(
+    attachment.localMetadata?.uploadState === "failed" && !!handleRetry && /* @__PURE__ */ import_react198.default.createElement(
       "button",
       {
         className: "str-chat__attachment-preview-error str-chat__attachment-preview-error-file",
         "data-testid": "file-preview-item-retry-button",
         onClick: () => handleRetry(attachment)
       },
-      /* @__PURE__ */ import_react197.default.createElement(RetryIcon, null)
+      /* @__PURE__ */ import_react198.default.createElement(RetryIcon, null)
     ),
-    /* @__PURE__ */ import_react197.default.createElement("div", { className: "str-chat__attachment-preview-file-end" }, /* @__PURE__ */ import_react197.default.createElement("div", { className: "str-chat__attachment-preview-file-name", title: attachment.title }, attachment.title), attachment.localMetadata?.uploadState === "finished" && !!attachment.asset_url && /* @__PURE__ */ import_react197.default.createElement(
+    /* @__PURE__ */ import_react198.default.createElement("div", { className: "str-chat__attachment-preview-file-end" }, /* @__PURE__ */ import_react198.default.createElement("div", { className: "str-chat__attachment-preview-file-name", title: attachment.title }, attachment.title), attachment.localMetadata?.uploadState === "finished" && !!attachment.asset_url && /* @__PURE__ */ import_react198.default.createElement(
       "a",
       {
         "aria-label": t2("aria/Download attachment"),
@@ -52670,14 +52678,14 @@ var FileAttachmentPreview = ({
         target: "_blank",
         title: t2("Download attachment {{ name }}", { name: attachment.title })
       },
-      /* @__PURE__ */ import_react197.default.createElement(DownloadIcon2, null)
-    ), attachment.localMetadata?.uploadState === "uploading" && /* @__PURE__ */ import_react197.default.createElement(LoadingIndicatorIcon, { size: 17 }))
+      /* @__PURE__ */ import_react198.default.createElement(DownloadIcon2, null)
+    ), attachment.localMetadata?.uploadState === "uploading" && /* @__PURE__ */ import_react198.default.createElement(LoadingIndicatorIcon, { size: 17 }))
   );
 };
 
 // src/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.tsx
 var import_clsx53 = __toESM(require("clsx"));
-var import_react198 = __toESM(require("react"));
+var import_react199 = __toESM(require("react"));
 var ImageAttachmentPreview = ({
   attachment,
   handleRetry,
@@ -52685,11 +52693,11 @@ var ImageAttachmentPreview = ({
 }) => {
   const { t: t2 } = useTranslationContext("ImagePreviewItem");
   const { BaseImage: BaseImage3 = BaseImage } = useComponentContext("ImagePreview");
-  const [previewError, setPreviewError] = (0, import_react198.useState)(false);
+  const [previewError, setPreviewError] = (0, import_react199.useState)(false);
   const { id, uploadState } = attachment.localMetadata ?? {};
-  const handleLoadError = (0, import_react198.useCallback)(() => setPreviewError(true), []);
+  const handleLoadError = (0, import_react199.useCallback)(() => setPreviewError(true), []);
   const assetUrl = attachment.image_url || attachment.localMetadata.previewUri;
-  return /* @__PURE__ */ import_react198.default.createElement(
+  return /* @__PURE__ */ import_react199.default.createElement(
     "div",
     {
       className: (0, import_clsx53.default)("str-chat__attachment-preview-image", {
@@ -52697,7 +52705,7 @@ var ImageAttachmentPreview = ({
       }),
       "data-testid": "attachment-preview-image"
     },
-    /* @__PURE__ */ import_react198.default.createElement(
+    /* @__PURE__ */ import_react199.default.createElement(
       "button",
       {
         "aria-label": t2("aria/Remove attachment"),
@@ -52706,19 +52714,19 @@ var ImageAttachmentPreview = ({
         disabled: uploadState === "uploading",
         onClick: () => id && removeAttachments([id])
       },
-      /* @__PURE__ */ import_react198.default.createElement(CloseIcon, null)
+      /* @__PURE__ */ import_react199.default.createElement(CloseIcon, null)
     ),
-    uploadState === "failed" && /* @__PURE__ */ import_react198.default.createElement(
+    uploadState === "failed" && /* @__PURE__ */ import_react199.default.createElement(
       "button",
       {
         className: "str-chat__attachment-preview-error str-chat__attachment-preview-error-image",
         "data-testid": "image-preview-item-retry-button",
         onClick: () => handleRetry(attachment)
       },
-      /* @__PURE__ */ import_react198.default.createElement(RetryIcon, null)
+      /* @__PURE__ */ import_react199.default.createElement(RetryIcon, null)
     ),
-    uploadState === "uploading" && /* @__PURE__ */ import_react198.default.createElement("div", { className: "str-chat__attachment-preview-image-loading" }, /* @__PURE__ */ import_react198.default.createElement(LoadingIndicatorIcon, { size: 17 })),
-    assetUrl && /* @__PURE__ */ import_react198.default.createElement(
+    uploadState === "uploading" && /* @__PURE__ */ import_react199.default.createElement("div", { className: "str-chat__attachment-preview-image-loading" }, /* @__PURE__ */ import_react199.default.createElement(LoadingIndicatorIcon, { size: 17 })),
+    assetUrl && /* @__PURE__ */ import_react199.default.createElement(
       BaseImage3,
       {
         alt: attachment.fallback,
@@ -52741,7 +52749,7 @@ var AttachmentPreviewList = ({
   VoiceRecordingPreview: VoiceRecordingPreview2 = VoiceRecordingPreview
 }) => {
   const { attachments, removeAttachments, uploadAttachment } = useMessageInputContext("AttachmentPreviewList");
-  return /* @__PURE__ */ import_react199.default.createElement("div", { className: "str-chat__attachment-preview-list" }, /* @__PURE__ */ import_react199.default.createElement(
+  return /* @__PURE__ */ import_react200.default.createElement("div", { className: "str-chat__attachment-preview-list" }, /* @__PURE__ */ import_react200.default.createElement(
     "div",
     {
       className: "str-chat__attachment-list-scroll-container",
@@ -52750,7 +52758,7 @@ var AttachmentPreviewList = ({
     attachments.map((attachment) => {
       if (isScrapedContent(attachment)) return null;
       if (isLocalVoiceRecordingAttachment(attachment)) {
-        return /* @__PURE__ */ import_react199.default.createElement(
+        return /* @__PURE__ */ import_react200.default.createElement(
           VoiceRecordingPreview2,
           {
             attachment,
@@ -52760,7 +52768,7 @@ var AttachmentPreviewList = ({
           }
         );
       } else if (isLocalAudioAttachment(attachment)) {
-        return /* @__PURE__ */ import_react199.default.createElement(
+        return /* @__PURE__ */ import_react200.default.createElement(
           AudioAttachmentPreview,
           {
             attachment,
@@ -52770,7 +52778,7 @@ var AttachmentPreviewList = ({
           }
         );
       } else if (isLocalMediaAttachment(attachment)) {
-        return /* @__PURE__ */ import_react199.default.createElement(
+        return /* @__PURE__ */ import_react200.default.createElement(
           VideoAttachmentPreview,
           {
             attachment,
@@ -52780,7 +52788,7 @@ var AttachmentPreviewList = ({
           }
         );
       } else if (isLocalImageAttachment(attachment)) {
-        return /* @__PURE__ */ import_react199.default.createElement(
+        return /* @__PURE__ */ import_react200.default.createElement(
           ImageAttachmentPreview2,
           {
             attachment,
@@ -52790,7 +52798,7 @@ var AttachmentPreviewList = ({
           }
         );
       } else if (isLocalFileAttachment(attachment)) {
-        return /* @__PURE__ */ import_react199.default.createElement(
+        return /* @__PURE__ */ import_react200.default.createElement(
           FileAttachmentPreview2,
           {
             attachment,
@@ -52800,7 +52808,7 @@ var AttachmentPreviewList = ({
           }
         );
       } else if (isLocalAttachment(attachment)) {
-        return /* @__PURE__ */ import_react199.default.createElement(
+        return /* @__PURE__ */ import_react200.default.createElement(
           UnsupportedAttachmentPreview2,
           {
             attachment,
@@ -52816,13 +52824,13 @@ var AttachmentPreviewList = ({
 };
 
 // src/components/MessageInput/CooldownTimer.tsx
-var import_react201 = __toESM(require("react"));
+var import_react202 = __toESM(require("react"));
 
 // src/components/MessageInput/hooks/useTimer.ts
-var import_react200 = require("react");
+var import_react201 = require("react");
 var useTimer = ({ startFrom }) => {
-  const [secondsLeft, setSecondsLeft] = (0, import_react200.useState)();
-  (0, import_react200.useEffect)(() => {
+  const [secondsLeft, setSecondsLeft] = (0, import_react201.useState)();
+  (0, import_react201.useEffect)(() => {
     let countdownTimeout;
     if (typeof secondsLeft === "number" && secondsLeft > 0) {
       countdownTimeout = setTimeout(() => {
@@ -52833,7 +52841,7 @@ var useTimer = ({ startFrom }) => {
       clearTimeout(countdownTimeout);
     };
   }, [secondsLeft]);
-  (0, import_react200.useEffect)(() => {
+  (0, import_react201.useEffect)(() => {
     setSecondsLeft(startFrom ?? 0);
   }, [startFrom]);
   return secondsLeft;
@@ -52842,11 +52850,11 @@ var useTimer = ({ startFrom }) => {
 // src/components/MessageInput/CooldownTimer.tsx
 var CooldownTimer = ({ cooldownInterval }) => {
   const secondsLeft = useTimer({ startFrom: cooldownInterval });
-  return /* @__PURE__ */ import_react201.default.createElement("div", { className: "str-chat__message-input-cooldown", "data-testid": "cooldown-timer" }, secondsLeft);
+  return /* @__PURE__ */ import_react202.default.createElement("div", { className: "str-chat__message-input-cooldown", "data-testid": "cooldown-timer" }, secondsLeft);
 };
 
 // src/components/MessageInput/DefaultTriggerProvider.tsx
-var import_react204 = __toESM(require("react"));
+var import_react205 = __toESM(require("react"));
 
 // src/components/MessageInput/hooks/useCommandTrigger.ts
 var useCommandTrigger = () => {
@@ -52916,7 +52924,7 @@ var useCommandTrigger = () => {
 };
 
 // src/components/EmoticonItem/EmoticonItem.tsx
-var import_react202 = __toESM(require("react"));
+var import_react203 = __toESM(require("react"));
 var UnMemoizedEmoticonItem = (props) => {
   const { entity } = props;
   const hasEntity = Object.keys(entity).length;
@@ -52924,12 +52932,12 @@ var UnMemoizedEmoticonItem = (props) => {
   const renderName = () => {
     if (!hasEntity) return null;
     return hasEntity && itemParts.parts.map(
-      (part, i) => part.toLowerCase() === itemParts.match.toLowerCase() ? /* @__PURE__ */ import_react202.default.createElement("span", { className: "str-chat__emoji-item--highlight", key: `part-${i}` }, part) : /* @__PURE__ */ import_react202.default.createElement("span", { className: "str-chat__emoji-item--part", key: `part-${i}` }, part)
+      (part, i) => part.toLowerCase() === itemParts.match.toLowerCase() ? /* @__PURE__ */ import_react203.default.createElement("span", { className: "str-chat__emoji-item--highlight", key: `part-${i}` }, part) : /* @__PURE__ */ import_react203.default.createElement("span", { className: "str-chat__emoji-item--part", key: `part-${i}` }, part)
     );
   };
-  return /* @__PURE__ */ import_react202.default.createElement("div", { className: "str-chat__emoji-item" }, /* @__PURE__ */ import_react202.default.createElement("span", { className: "str-chat__emoji-item--entity" }, entity.native), /* @__PURE__ */ import_react202.default.createElement("span", { className: "str-chat__emoji-item--name" }, renderName()));
+  return /* @__PURE__ */ import_react203.default.createElement("div", { className: "str-chat__emoji-item" }, /* @__PURE__ */ import_react203.default.createElement("span", { className: "str-chat__emoji-item--entity" }, entity.native), /* @__PURE__ */ import_react203.default.createElement("span", { className: "str-chat__emoji-item--name" }, renderName()));
 };
-var EmoticonItem = import_react202.default.memo(
+var EmoticonItem = import_react203.default.memo(
   UnMemoizedEmoticonItem
 );
 
@@ -52959,7 +52967,7 @@ var useEmojiTrigger = (emojiSearchIndex) => ({
 });
 
 // src/components/MessageInput/hooks/useUserTrigger.ts
-var import_react203 = require("react");
+var import_react204 = require("react");
 var import_lodash20 = __toESM(require("lodash.throttle"));
 var useUserTrigger = (params) => {
   const {
@@ -52969,12 +52977,12 @@ var useUserTrigger = (params) => {
     onSelectUser,
     useMentionsTransliteration
   } = params;
-  const [searching, setSearching] = (0, import_react203.useState)(false);
+  const [searching, setSearching] = (0, import_react204.useState)(false);
   const { client, mutes } = useChatContext("useUserTrigger");
   const { channel } = useChannelStateContext("useUserTrigger");
   const { members } = channel.state;
   const { watchers } = channel.state;
-  const getMembersAndWatchers = (0, import_react203.useCallback)(() => {
+  const getMembersAndWatchers = (0, import_react204.useCallback)(() => {
     const memberUsers = members ? Object.values(members).map(({ user }) => user) : [];
     const watcherUsers = watchers ? Object.values(watchers) : [];
     const users = [...memberUsers, ...watcherUsers];
@@ -52986,7 +52994,7 @@ var useUserTrigger = (params) => {
     });
     return Object.values(uniqueUsers);
   }, [members, watchers]);
-  const queryMembersThrottled = (0, import_react203.useCallback)(
+  const queryMembersThrottled = (0, import_react204.useCallback)(
     (0, import_lodash20.default)(
       async (query, onReady) => {
         try {
@@ -53106,21 +53114,21 @@ var DefaultTriggerProvider = ({
     ...currentValue,
     autocompleteTriggers: defaultAutocompleteTriggers
   };
-  return /* @__PURE__ */ import_react204.default.createElement(MessageInputContextProvider, { value: newValue }, children);
+  return /* @__PURE__ */ import_react205.default.createElement(MessageInputContextProvider, { value: newValue }, children);
 };
 
 // src/components/MessageInput/EditMessageForm.tsx
-var import_react217 = __toESM(require("react"));
+var import_react218 = __toESM(require("react"));
 
 // src/components/MessageInput/MessageInputFlat.tsx
-var import_react216 = __toESM(require("react"));
+var import_react217 = __toESM(require("react"));
 
 // src/components/MessageInput/SendButton.tsx
-var import_react205 = __toESM(require("react"));
+var import_react206 = __toESM(require("react"));
 var SendButton = ({
   sendMessage,
   ...rest
-}) => /* @__PURE__ */ import_react205.default.createElement(
+}) => /* @__PURE__ */ import_react206.default.createElement(
   "button",
   {
     "aria-label": "Send",
@@ -53130,17 +53138,17 @@ var SendButton = ({
     type: "button",
     ...rest
   },
-  /* @__PURE__ */ import_react205.default.createElement(SendIcon, null)
+  /* @__PURE__ */ import_react206.default.createElement(SendIcon, null)
 );
 
 // src/components/MessageInput/StopAIGenerationButton.tsx
-var import_react206 = __toESM(require("react"));
+var import_react207 = __toESM(require("react"));
 var StopAIGenerationButton = ({
   onClick,
   ...restProps
 }) => {
   const { t: t2 } = useTranslationContext();
-  return /* @__PURE__ */ import_react206.default.createElement(
+  return /* @__PURE__ */ import_react207.default.createElement(
     "button",
     {
       "aria-label": t2("aria/Stop AI Generation"),
@@ -53153,21 +53161,21 @@ var StopAIGenerationButton = ({
 };
 
 // src/components/MessageInput/QuotedMessagePreview.tsx
-var import_react210 = __toESM(require("react"));
+var import_react211 = __toESM(require("react"));
 
 // src/components/Message/FixedHeightMessage.tsx
-var import_react208 = __toESM(require("react"));
+var import_react209 = __toESM(require("react"));
 
 // src/components/MML/MML.tsx
-var import_react207 = __toESM(require("react"));
-var MMLReact = import_react207.default.lazy(async () => {
+var import_react208 = __toESM(require("react"));
+var MMLReact = import_react208.default.lazy(async () => {
   const mml = await Promise.resolve().then(() => __toESM(require_dist2()));
   return { default: mml.MML };
 });
 var MML = (props) => {
   const { actionHandler, align = "right", source } = props;
   const { theme } = useChatContext("MML");
-  return /* @__PURE__ */ import_react207.default.createElement(import_react207.Suspense, { fallback: null }, /* @__PURE__ */ import_react207.default.createElement(
+  return /* @__PURE__ */ import_react208.default.createElement(import_react208.Suspense, { fallback: null }, /* @__PURE__ */ import_react208.default.createElement(
     MMLReact,
     {
       className: `mml-align-${align}`,
@@ -53205,24 +53213,24 @@ var UnMemoizedFixedHeightMessage = (props) => {
   const handleDelete2 = useDeleteHandler(message);
   const role = useUserRole(message);
   const messageTextToRender = message?.i18n?.[`${userLanguage}_text`] || message?.text;
-  const renderedText = (0, import_react208.useMemo)(
+  const renderedText = (0, import_react209.useMemo)(
     () => renderText(messageTextToRender, message.mentioned_users),
     [message.mentioned_users, messageTextToRender]
   );
   const userId = message.user?.id || "";
-  const userColor = (0, import_react208.useMemo)(() => getUserColor(theme, userId), [userId, theme]);
-  const messageActionsHandler = (0, import_react208.useCallback)(
+  const userColor = (0, import_react209.useMemo)(() => getUserColor(theme, userId), [userId, theme]);
+  const messageActionsHandler = (0, import_react209.useCallback)(
     () => getMessageActions(["delete"], { canDelete: role.canDelete }),
     [role]
   );
   const images = message?.attachments?.filter(({ type }) => type === "image");
-  return /* @__PURE__ */ import_react208.default.createElement(
+  return /* @__PURE__ */ import_react209.default.createElement(
     "div",
     {
       className: `str-chat__virtual-message__wrapper ${role.isMyMessage ? "str-chat__virtual-message__wrapper--me" : ""} ${groupedByUser ? "str-chat__virtual-message__wrapper--group" : ""}`,
       key: message.id
     },
-    message.user && /* @__PURE__ */ import_react208.default.createElement(
+    message.user && /* @__PURE__ */ import_react209.default.createElement(
       Avatar,
       {
         image: message.user.image,
@@ -53230,7 +53238,7 @@ var UnMemoizedFixedHeightMessage = (props) => {
         user: message.user
       }
     ),
-    /* @__PURE__ */ import_react208.default.createElement("div", { className: "str-chat__virtual-message__content" }, /* @__PURE__ */ import_react208.default.createElement("div", { className: "str-chat__virtual-message__meta" }, /* @__PURE__ */ import_react208.default.createElement("div", { className: "str-chat__virtual-message__author", style: { color: userColor } }, /* @__PURE__ */ import_react208.default.createElement("strong", null, message.user?.name || "unknown"))), message.deleted_at || message.type === "deleted" ? /* @__PURE__ */ import_react208.default.createElement(MessageDeleted2, { message }) : /* @__PURE__ */ import_react208.default.createElement(import_react208.default.Fragment, null, images && /* @__PURE__ */ import_react208.default.createElement(Gallery, { images }), /* @__PURE__ */ import_react208.default.createElement("div", { className: "str-chat__virtual-message__text", "data-testid": "msg-text" }, renderedText, message.mml && /* @__PURE__ */ import_react208.default.createElement(MML, { actionHandler: handleAction, align: "left", source: message.mml }), /* @__PURE__ */ import_react208.default.createElement("div", { className: "str-chat__virtual-message__data" }, /* @__PURE__ */ import_react208.default.createElement(
+    /* @__PURE__ */ import_react209.default.createElement("div", { className: "str-chat__virtual-message__content" }, /* @__PURE__ */ import_react209.default.createElement("div", { className: "str-chat__virtual-message__meta" }, /* @__PURE__ */ import_react209.default.createElement("div", { className: "str-chat__virtual-message__author", style: { color: userColor } }, /* @__PURE__ */ import_react209.default.createElement("strong", null, message.user?.name || "unknown"))), message.deleted_at || message.type === "deleted" ? /* @__PURE__ */ import_react209.default.createElement(MessageDeleted2, { message }) : /* @__PURE__ */ import_react209.default.createElement(import_react209.default.Fragment, null, images && /* @__PURE__ */ import_react209.default.createElement(Gallery, { images }), /* @__PURE__ */ import_react209.default.createElement("div", { className: "str-chat__virtual-message__text", "data-testid": "msg-text" }, renderedText, message.mml && /* @__PURE__ */ import_react209.default.createElement(MML, { actionHandler: handleAction, align: "left", source: message.mml }), /* @__PURE__ */ import_react209.default.createElement("div", { className: "str-chat__virtual-message__data" }, /* @__PURE__ */ import_react209.default.createElement(
       MessageActions,
       {
         customWrapperClass: "str-chat__virtual-message__actions",
@@ -53239,7 +53247,7 @@ var UnMemoizedFixedHeightMessage = (props) => {
         message,
         mine: () => role.isMyMessage
       }
-    ), /* @__PURE__ */ import_react208.default.createElement("span", { className: "str-chat__virtual-message__date" }, /* @__PURE__ */ import_react208.default.createElement(
+    ), /* @__PURE__ */ import_react209.default.createElement("span", { className: "str-chat__virtual-message__date" }, /* @__PURE__ */ import_react209.default.createElement(
       MessageTimestamp,
       {
         customClass: "str-chat__message-simple-timestamp",
@@ -53248,12 +53256,12 @@ var UnMemoizedFixedHeightMessage = (props) => {
     ))))))
   );
 };
-var FixedHeightMessage = import_react208.default.memo(
+var FixedHeightMessage = import_react209.default.memo(
   UnMemoizedFixedHeightMessage
 );
 
 // src/components/Message/StreamedMessageText.tsx
-var import_react209 = __toESM(require("react"));
+var import_react210 = __toESM(require("react"));
 var StreamedMessageText = (props) => {
   const {
     message: messageFromProps,
@@ -53269,7 +53277,7 @@ var StreamedMessageText = (props) => {
     streamingLetterIntervalMs,
     text: text7
   });
-  return /* @__PURE__ */ import_react209.default.createElement(
+  return /* @__PURE__ */ import_react210.default.createElement(
     MessageText,
     {
       message: { ...message, text: streamedMessageText },
@@ -53282,14 +53290,14 @@ var StreamedMessageText = (props) => {
 var QuotedMessagePreviewHeader = () => {
   const { setQuotedMessage } = useChannelActionContext("QuotedMessagePreview");
   const { t: t2 } = useTranslationContext("QuotedMessagePreview");
-  return /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__quoted-message-preview-header" }, /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__quoted-message-reply-to-message" }, t2("Reply to Message")), /* @__PURE__ */ import_react210.default.createElement(
+  return /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__quoted-message-preview-header" }, /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__quoted-message-reply-to-message" }, t2("Reply to Message")), /* @__PURE__ */ import_react211.default.createElement(
     "button",
     {
       "aria-label": t2("aria/Cancel Reply"),
       className: "str-chat__quoted-message-remove",
       onClick: () => setQuotedMessage(void 0)
     },
-    /* @__PURE__ */ import_react210.default.createElement(CloseIcon, null)
+    /* @__PURE__ */ import_react211.default.createElement(CloseIcon, null)
   ));
 };
 var QuotedMessagePreview = ({
@@ -53300,23 +53308,23 @@ var QuotedMessagePreview = ({
   const { Attachment: Attachment2 = Attachment, Avatar: Avatar2 = Avatar } = useComponentContext("QuotedMessagePreview");
   const { userLanguage } = useTranslationContext("QuotedMessagePreview");
   const quotedMessageText = quotedMessage.i18n?.[`${userLanguage}_text`] || quotedMessage.text;
-  const renderedText = (0, import_react210.useMemo)(
+  const renderedText = (0, import_react211.useMemo)(
     () => renderText2(quotedMessageText, quotedMessage.mentioned_users),
     [quotedMessage.mentioned_users, quotedMessageText, renderText2]
   );
-  const quotedMessageAttachment = (0, import_react210.useMemo)(() => {
+  const quotedMessageAttachment = (0, import_react211.useMemo)(() => {
     const [attachment] = quotedMessage.attachments ?? [];
     return attachment ? [attachment] : [];
   }, [quotedMessage.attachments]);
   if (!quotedMessageText && !quotedMessageAttachment) return null;
   const poll = quotedMessage.poll_id && client.polls.fromState(quotedMessage.poll_id);
-  return /* @__PURE__ */ import_react210.default.createElement(
+  return /* @__PURE__ */ import_react211.default.createElement(
     "div",
     {
       className: "str-chat__quoted-message-preview",
       "data-testid": "quoted-message-preview"
     },
-    quotedMessage.user && /* @__PURE__ */ import_react210.default.createElement(
+    quotedMessage.user && /* @__PURE__ */ import_react211.default.createElement(
       Avatar2,
       {
         className: "str-chat__avatar--quoted-message-sender",
@@ -53325,7 +53333,7 @@ var QuotedMessagePreview = ({
         user: quotedMessage.user
       }
     ),
-    /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__quoted-message-bubble" }, poll ? /* @__PURE__ */ import_react210.default.createElement(Poll, { isQuoted: true, poll }) : /* @__PURE__ */ import_react210.default.createElement(import_react210.default.Fragment, null, !!quotedMessageAttachment.length && /* @__PURE__ */ import_react210.default.createElement(Attachment2, { attachments: quotedMessageAttachment, isQuoted: true }), /* @__PURE__ */ import_react210.default.createElement(
+    /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__quoted-message-bubble" }, poll ? /* @__PURE__ */ import_react211.default.createElement(Poll, { isQuoted: true, poll }) : /* @__PURE__ */ import_react211.default.createElement(import_react211.default.Fragment, null, !!quotedMessageAttachment.length && /* @__PURE__ */ import_react211.default.createElement(Attachment2, { attachments: quotedMessageAttachment, isQuoted: true }), /* @__PURE__ */ import_react211.default.createElement(
       "div",
       {
         className: "str-chat__quoted-message-text",
@@ -53338,20 +53346,20 @@ var QuotedMessagePreview = ({
 
 // src/components/MessageInput/LinkPreviewList.tsx
 var import_clsx54 = __toESM(require("clsx"));
-var import_react211 = __toESM(require("react"));
+var import_react212 = __toESM(require("react"));
 var LinkPreviewList = ({ linkPreviews }) => {
   const { quotedMessage } = useChannelStateContext();
   const showLinkPreviews = linkPreviews.length > 0 && !quotedMessage;
   if (!showLinkPreviews) return null;
-  return /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__link-preview-list" }, Array.from(linkPreviews.values()).map(
-    (linkPreview) => linkPreview.state === "loaded" /* LOADED */ ? /* @__PURE__ */ import_react211.default.createElement(LinkPreviewCard, { key: linkPreview.og_scrape_url, linkPreview }) : null
+  return /* @__PURE__ */ import_react212.default.createElement("div", { className: "str-chat__link-preview-list" }, Array.from(linkPreviews.values()).map(
+    (linkPreview) => linkPreview.state === "loaded" /* LOADED */ ? /* @__PURE__ */ import_react212.default.createElement(LinkPreviewCard, { key: linkPreview.og_scrape_url, linkPreview }) : null
   ));
 };
 var LinkPreviewCard = ({ linkPreview }) => {
   const { dismissLinkPreview } = useMessageInputContext();
   const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
-  const [referenceElement, setReferenceElement] = (0, import_react211.useState)(null);
-  return /* @__PURE__ */ import_react211.default.createElement(
+  const [referenceElement, setReferenceElement] = (0, import_react212.useState)(null);
+  return /* @__PURE__ */ import_react212.default.createElement(
     "div",
     {
       className: (0, import_clsx54.default)("str-chat__link-preview-card", {
@@ -53359,7 +53367,7 @@ var LinkPreviewCard = ({ linkPreview }) => {
       }),
       "data-testid": "link-preview-card"
     },
-    /* @__PURE__ */ import_react211.default.createElement(
+    /* @__PURE__ */ import_react212.default.createElement(
       PopperTooltip,
       {
         offset: [0, 5],
@@ -53368,7 +53376,7 @@ var LinkPreviewCard = ({ linkPreview }) => {
       },
       linkPreview.og_scrape_url
     ),
-    /* @__PURE__ */ import_react211.default.createElement(
+    /* @__PURE__ */ import_react212.default.createElement(
       "div",
       {
         className: "str-chat__link-preview-card__icon-container",
@@ -53376,23 +53384,23 @@ var LinkPreviewCard = ({ linkPreview }) => {
         onMouseLeave: handleLeave,
         ref: setReferenceElement
       },
-      /* @__PURE__ */ import_react211.default.createElement(LinkIcon, null)
+      /* @__PURE__ */ import_react212.default.createElement(LinkIcon, null)
     ),
-    /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__link-preview-card__content" }, /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__link-preview-card__content-title" }, linkPreview.title), /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__link-preview-card__content-description" }, linkPreview.text)),
-    /* @__PURE__ */ import_react211.default.createElement(
+    /* @__PURE__ */ import_react212.default.createElement("div", { className: "str-chat__link-preview-card__content" }, /* @__PURE__ */ import_react212.default.createElement("div", { className: "str-chat__link-preview-card__content-title" }, linkPreview.title), /* @__PURE__ */ import_react212.default.createElement("div", { className: "str-chat__link-preview-card__content-description" }, linkPreview.text)),
+    /* @__PURE__ */ import_react212.default.createElement(
       "button",
       {
         className: "str-chat__link-preview-card__dismiss-button",
         "data-testid": "link-preview-card-dismiss-btn",
         onClick: () => dismissLinkPreview(linkPreview)
       },
-      /* @__PURE__ */ import_react211.default.createElement(CloseIcon, null)
+      /* @__PURE__ */ import_react212.default.createElement(CloseIcon, null)
     )
   );
 };
 
 // src/components/ChatAutoComplete/ChatAutoComplete.tsx
-var import_react212 = __toESM(require("react"));
+var import_react213 = __toESM(require("react"));
 var UnMemoizedChatAutoComplete = (props) => {
   const {
     AutocompleteSuggestionItem: SuggestionItem,
@@ -53414,7 +53422,7 @@ var UnMemoizedChatAutoComplete = (props) => {
     const [firstSkin] = emoji.skins ?? [];
     return emoji.native ?? firstSkin.native;
   };
-  const updateInnerRef = (0, import_react212.useCallback)(
+  const updateInnerRef = (0, import_react213.useCallback)(
     (ref) => {
       if (innerRef) {
         innerRef.current = ref;
@@ -53422,7 +53430,7 @@ var UnMemoizedChatAutoComplete = (props) => {
     },
     [innerRef]
   );
-  return /* @__PURE__ */ import_react212.default.createElement(
+  return /* @__PURE__ */ import_react213.default.createElement(
     ReactTextareaAutocomplete,
     {
       additionalTextareaProps: messageInput.additionalTextareaProps,
@@ -53457,15 +53465,15 @@ var UnMemoizedChatAutoComplete = (props) => {
     }
   );
 };
-var ChatAutoComplete = import_react212.default.memo(
+var ChatAutoComplete = import_react213.default.memo(
   UnMemoizedChatAutoComplete
 );
 
 // src/components/AIStateIndicator/AIStateIndicator.tsx
-var import_react214 = __toESM(require("react"));
+var import_react215 = __toESM(require("react"));
 
 // src/components/AIStateIndicator/hooks/useAIState.ts
-var import_react213 = require("react");
+var import_react214 = require("react");
 var AIStates = {
   Error: "AI_STATE_ERROR",
   ExternalSources: "AI_STATE_EXTERNAL_SOURCES",
@@ -53474,8 +53482,8 @@ var AIStates = {
   Thinking: "AI_STATE_THINKING"
 };
 var useAIState = (channel) => {
-  const [aiState, setAiState] = (0, import_react213.useState)(AIStates.Idle);
-  (0, import_react213.useEffect)(() => {
+  const [aiState, setAiState] = (0, import_react214.useState)(AIStates.Idle);
+  (0, import_react214.useEffect)(() => {
     if (!channel) {
       return;
     }
@@ -53515,20 +53523,20 @@ var AIStateIndicator = ({
     [AIStates.Thinking]: t2("Thinking..."),
     [AIStates.Generating]: t2("Generating...")
   };
-  return aiState in allowedStates ? /* @__PURE__ */ import_react214.default.createElement("div", { className: "str-chat__ai-state-indicator-container" }, /* @__PURE__ */ import_react214.default.createElement("p", { className: "str-chat__ai-state-indicator-text" }, allowedStates[aiState])) : null;
+  return aiState in allowedStates ? /* @__PURE__ */ import_react215.default.createElement("div", { className: "str-chat__ai-state-indicator-container" }, /* @__PURE__ */ import_react215.default.createElement("p", { className: "str-chat__ai-state-indicator-text" }, allowedStates[aiState])) : null;
 };
 
 // src/components/MessageInput/WithDragAndDropUpload.tsx
-var import_react215 = __toESM(require("react"));
+var import_react216 = __toESM(require("react"));
 var import_react_dropzone2 = require("react-dropzone");
 var import_clsx55 = __toESM(require("clsx"));
-var DragAndDropUploadContext = import_react215.default.createContext({
+var DragAndDropUploadContext = import_react216.default.createContext({
   subscribeToDrop: null
 });
-var useDragAndDropUploadContext = () => (0, import_react215.useContext)(DragAndDropUploadContext);
+var useDragAndDropUploadContext = () => (0, import_react216.useContext)(DragAndDropUploadContext);
 var useRegisterDropHandlers = ({ uploadNewFiles }) => {
   const { subscribeToDrop } = useDragAndDropUploadContext();
-  (0, import_react215.useEffect)(() => {
+  (0, import_react216.useEffect)(() => {
     const unsubscribe = subscribeToDrop?.(uploadNewFiles);
     return unsubscribe;
   }, [subscribeToDrop, uploadNewFiles]);
@@ -53539,26 +53547,26 @@ var WithDragAndDropUpload = ({
   component: Component2 = "div",
   style
 }) => {
-  const dropHandlersRef = (0, import_react215.useRef)(/* @__PURE__ */ new Set());
+  const dropHandlersRef = (0, import_react216.useRef)(/* @__PURE__ */ new Set());
   const { acceptedFiles = [], multipleUploads } = useChannelStateContext();
   const { t: t2 } = useTranslationContext();
   const messageInputContext = useMessageInputContext();
   const dragAndDropUploadContext = useDragAndDropUploadContext();
   const isWithinMessageInputContext = typeof messageInputContext.uploadNewFiles === "function";
-  const accept = (0, import_react215.useMemo)(
+  const accept = (0, import_react216.useMemo)(
     () => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
       mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
       return mediaTypeMap;
     }, {}),
     [acceptedFiles]
   );
-  const subscribeToDrop = (0, import_react215.useCallback)((fn) => {
+  const subscribeToDrop = (0, import_react216.useCallback)((fn) => {
     dropHandlersRef.current.add(fn);
     return () => {
       dropHandlersRef.current.delete(fn);
     };
   }, []);
-  const handleDrop = (0, import_react215.useCallback)((files) => {
+  const handleDrop = (0, import_react216.useCallback)((files) => {
     dropHandlersRef.current.forEach((fn) => fn(files));
   }, []);
   const { getRootProps, isDragActive, isDragReject } = (0, import_react_dropzone2.useDropzone)({
@@ -53571,24 +53579,24 @@ var WithDragAndDropUpload = ({
     onDrop: isWithinMessageInputContext ? messageInputContext.uploadNewFiles : handleDrop
   });
   if (dragAndDropUploadContext.subscribeToDrop !== null) {
-    return /* @__PURE__ */ import_react215.default.createElement(Component2, { className }, children);
+    return /* @__PURE__ */ import_react216.default.createElement(Component2, { className }, children);
   }
-  return /* @__PURE__ */ import_react215.default.createElement(
+  return /* @__PURE__ */ import_react216.default.createElement(
     DragAndDropUploadContext.Provider,
     {
       value: {
         subscribeToDrop
       }
     },
-    /* @__PURE__ */ import_react215.default.createElement(Component2, { ...getRootProps({ className, style }) }, isDragActive && /* @__PURE__ */ import_react215.default.createElement(
+    /* @__PURE__ */ import_react216.default.createElement(Component2, { ...getRootProps({ className, style }) }, isDragActive && /* @__PURE__ */ import_react216.default.createElement(
       "div",
       {
         className: (0, import_clsx55.default)("str-chat__dropzone-container", {
           "str-chat__dropzone-container--not-accepted": isDragReject
         })
       },
-      !isDragReject && /* @__PURE__ */ import_react215.default.createElement("p", null, t2("Drag your files here")),
-      isDragReject && /* @__PURE__ */ import_react215.default.createElement("p", null, t2("Some of the files will not be accepted"))
+      !isDragReject && /* @__PURE__ */ import_react216.default.createElement("p", null, t2("Drag your files here")),
+      isDragReject && /* @__PURE__ */ import_react216.default.createElement("p", null, t2("Some of the files will not be accepted"))
     ), children)
   );
 };
@@ -53628,19 +53636,19 @@ var MessageInputFlat = () => {
   const { setQuotedMessage } = useChannelActionContext("MessageInputFlat");
   const { channel } = useChatContext("MessageInputFlat");
   const { aiState } = useAIState(channel);
-  const stopGenerating = (0, import_react216.useCallback)(() => channel?.stopAIResponse(), [channel]);
+  const stopGenerating = (0, import_react217.useCallback)(() => channel?.stopAIResponse(), [channel]);
   const [
     showRecordingPermissionDeniedNotification,
     setShowRecordingPermissionDeniedNotification
-  ] = (0, import_react216.useState)(false);
-  const closePermissionDeniedNotification = (0, import_react216.useCallback)(() => {
+  ] = (0, import_react217.useState)(false);
+  const closePermissionDeniedNotification = (0, import_react217.useCallback)(() => {
     setShowRecordingPermissionDeniedNotification(false);
   }, []);
-  const failedUploadsCount = (0, import_react216.useMemo)(
+  const failedUploadsCount = (0, import_react217.useMemo)(
     () => attachments.filter((a2) => a2.localMetadata?.uploadState === "failed").length,
     [attachments]
   );
-  (0, import_react216.useEffect)(() => {
+  (0, import_react217.useEffect)(() => {
     const handleQuotedMessageUpdate = (e2) => {
       if (e2.message?.id !== quotedMessage?.id) return;
       if (e2.type === "message.deleted") {
@@ -53656,31 +53664,31 @@ var MessageInputFlat = () => {
       channel?.off("message.updated", handleQuotedMessageUpdate);
     };
   }, [channel, quotedMessage]);
-  if (recordingController.recordingState) return /* @__PURE__ */ import_react216.default.createElement(AudioRecorder2, null);
+  if (recordingController.recordingState) return /* @__PURE__ */ import_react217.default.createElement(AudioRecorder2, null);
   const displayQuotedMessage = !message && quotedMessage && quotedMessage.parent_id === parent?.id;
   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_react216.default.createElement(WithDragAndDropUpload, { className: "str-chat__message-input", component: "div" }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react216.default.createElement(
+  return /* @__PURE__ */ import_react217.default.createElement(WithDragAndDropUpload, { className: "str-chat__message-input", component: "div" }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react217.default.createElement(
     RecordingPermissionDeniedNotification2,
     {
       onClose: closePermissionDeniedNotification,
       permissionName: "microphone" /* MIC */
     }
-  ), findAndEnqueueURLsToEnrich && /* @__PURE__ */ import_react216.default.createElement(LinkPreviewList2, { linkPreviews: Array.from(linkPreviews.values()) }), displayQuotedMessage && /* @__PURE__ */ import_react216.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react216.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__message-textarea-container" }, displayQuotedMessage && /* @__PURE__ */ import_react216.default.createElement(QuotedMessagePreview2, { quotedMessage }), isUploadEnabled && !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && /* @__PURE__ */ import_react216.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react216.default.createElement(ChatAutoComplete, null), EmojiPicker && /* @__PURE__ */ import_react216.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react216.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react216.default.createElement(import_react216.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react216.default.createElement(
+  ), findAndEnqueueURLsToEnrich && /* @__PURE__ */ import_react217.default.createElement(LinkPreviewList2, { linkPreviews: Array.from(linkPreviews.values()) }), displayQuotedMessage && /* @__PURE__ */ import_react217.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react217.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react217.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react217.default.createElement("div", { className: "str-chat__message-textarea-container" }, displayQuotedMessage && /* @__PURE__ */ import_react217.default.createElement(QuotedMessagePreview2, { quotedMessage }), isUploadEnabled && !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && /* @__PURE__ */ import_react217.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react217.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react217.default.createElement(ChatAutoComplete, null), EmojiPicker && /* @__PURE__ */ import_react217.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react217.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react217.default.createElement(import_react217.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react217.default.createElement(
     CooldownTimer2,
     {
       cooldownInterval: cooldownRemaining,
       setCooldownRemaining
     }
-  ) : /* @__PURE__ */ import_react216.default.createElement(import_react216.default.Fragment, null, /* @__PURE__ */ import_react216.default.createElement(
+  ) : /* @__PURE__ */ import_react217.default.createElement(import_react217.default.Fragment, null, /* @__PURE__ */ import_react217.default.createElement(
     SendButton2,
     {
       disabled: !numberOfUploads && !text7.length && attachments.length - failedUploadsCount === 0,
       sendMessage: handleSubmit
     }
-  ), recordingEnabled && /* @__PURE__ */ import_react216.default.createElement(
+  ), recordingEnabled && /* @__PURE__ */ import_react217.default.createElement(
     StartRecordingAudioButton2,
     {
       disabled: isRecording || !asyncMessagesMultiSendEnabled && attachments.some(
@@ -53698,22 +53706,22 @@ var MessageInputFlat = () => {
 var EditMessageForm = () => {
   const { t: t2 } = useTranslationContext("EditMessageForm");
   const { clearEditingState, handleSubmit } = useMessageInputContext("EditMessageForm");
-  (0, import_react217.useEffect)(() => {
+  (0, import_react218.useEffect)(() => {
     const onKeyDown = (event) => {
       if (event.key === "Escape") clearEditingState?.();
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [clearEditingState]);
-  return /* @__PURE__ */ import_react217.default.createElement(
+  return /* @__PURE__ */ import_react218.default.createElement(
     "form",
     {
       autoComplete: "off",
       className: "str-chat__edit-message-form",
       onSubmit: handleSubmit
     },
-    /* @__PURE__ */ import_react217.default.createElement(MessageInputFlat, null),
-    /* @__PURE__ */ import_react217.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react217.default.createElement(
+    /* @__PURE__ */ import_react218.default.createElement(MessageInputFlat, null),
+    /* @__PURE__ */ import_react218.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react218.default.createElement(
       "button",
       {
         className: "str-chat__edit-message-cancel",
@@ -53721,7 +53729,7 @@ var EditMessageForm = () => {
         onClick: clearEditingState
       },
       t2("Cancel")
-    ), /* @__PURE__ */ import_react217.default.createElement(
+    ), /* @__PURE__ */ import_react218.default.createElement(
       "button",
       {
         className: "str-chat__edit-message-send",
@@ -53734,7 +53742,7 @@ var EditMessageForm = () => {
 };
 
 // src/components/MessageInput/MessageInput.tsx
-var import_react218 = __toESM(require("react"));
+var import_react219 = __toESM(require("react"));
 var MessageInputProvider = (props) => {
   const cooldownTimerState = useCooldownTimer();
   const messageInputState = useMessageInputState(props);
@@ -53746,44 +53754,45 @@ var MessageInputProvider = (props) => {
     emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex
   });
   useRegisterDropHandlers(messageInputContextValue);
-  return /* @__PURE__ */ import_react218.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
+  return /* @__PURE__ */ import_react219.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
 };
 var UnMemoizedMessageInput = (props) => {
   const { Input: PropInput } = props;
   const { dragAndDropWindow } = useChannelStateContext();
   const { Input: ContextInput, TriggerProvider = DefaultTriggerProvider } = useComponentContext("MessageInput");
+  const id = useStableId();
   const Input = PropInput || ContextInput || MessageInputFlat;
-  const dialogManagerId = props.isThreadInput ? "message-input-dialog-manager-thread" : "message-input-dialog-manager";
+  const dialogManagerId = props.isThreadInput ? `message-input-dialog-manager-thread-${id}` : `message-input-dialog-manager-${id}`;
   if (dragAndDropWindow)
-    return /* @__PURE__ */ import_react218.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react218.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react218.default.createElement(Input, null)));
-  return /* @__PURE__ */ import_react218.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react218.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react218.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react218.default.createElement(Input, null))));
+    return /* @__PURE__ */ import_react219.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react219.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react219.default.createElement(Input, null)));
+  return /* @__PURE__ */ import_react219.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react219.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react219.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react219.default.createElement(Input, null))));
 };
-var MessageInput = import_react218.default.memo(
+var MessageInput = import_react219.default.memo(
   UnMemoizedMessageInput
 );
 
 // src/components/Reactions/ReactionsList.tsx
-var import_react222 = __toESM(require("react"));
+var import_react223 = __toESM(require("react"));
 var import_clsx57 = __toESM(require("clsx"));
 
 // src/components/Reactions/ReactionsListModal.tsx
-var import_react220 = __toESM(require("react"));
+var import_react221 = __toESM(require("react"));
 var import_clsx56 = __toESM(require("clsx"));
 
 // src/components/Reactions/hooks/useFetchReactions.ts
-var import_react219 = require("react");
+var import_react220 = require("react");
 function useFetchReactions(options) {
   const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext("useFetchReactions");
-  const [reactions, setReactions] = (0, import_react219.useState)([]);
+  const [reactions, setReactions] = (0, import_react220.useState)([]);
   const {
     handleFetchReactions: propHandleFetchReactions,
     reactionType,
     shouldFetch,
     sort
   } = options;
-  const [isLoading, setIsLoading] = (0, import_react219.useState)(shouldFetch);
+  const [isLoading, setIsLoading] = (0, import_react220.useState)(shouldFetch);
   const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
-  (0, import_react219.useEffect)(() => {
+  (0, import_react220.useEffect)(() => {
     if (!shouldFetch) {
       return;
     }
@@ -53839,24 +53848,24 @@ function ReactionsListModal({
     shouldFetch: modalProps.open,
     sort: reactionDetailsSort
   });
-  const reactionDetailsWithLegacyFallback = (0, import_react220.useMemo)(
+  const reactionDetailsWithLegacyFallback = (0, import_react221.useMemo)(
     () => legacySortReactionDetails ? [...reactionDetails].sort(legacySortReactionDetails) : reactionDetails,
     [legacySortReactionDetails, reactionDetails]
   );
-  return /* @__PURE__ */ import_react220.default.createElement(
+  return /* @__PURE__ */ import_react221.default.createElement(
     Modal,
     {
       ...modalProps,
       className: (0, import_clsx56.default)("str-chat__message-reactions-details-modal", modalProps.className)
     },
-    /* @__PURE__ */ import_react220.default.createElement(
+    /* @__PURE__ */ import_react221.default.createElement(
       "div",
       {
         className: "str-chat__message-reactions-details",
         "data-testid": "reactions-list-modal"
       },
-      /* @__PURE__ */ import_react220.default.createElement("div", { className: "str-chat__message-reactions-details-reaction-types" }, reactions.map(
-        ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react220.default.createElement(
+      /* @__PURE__ */ import_react221.default.createElement("div", { className: "str-chat__message-reactions-details-reaction-types" }, reactions.map(
+        ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react221.default.createElement(
           "div",
           {
             className: (0, import_clsx56.default)("str-chat__message-reactions-details-reaction-type", {
@@ -53868,25 +53877,25 @@ function ReactionsListModal({
               reactionType
             )
           },
-          /* @__PURE__ */ import_react220.default.createElement("span", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback" }, /* @__PURE__ */ import_react220.default.createElement(EmojiComponent, null)),
+          /* @__PURE__ */ import_react221.default.createElement("span", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback" }, /* @__PURE__ */ import_react221.default.createElement(EmojiComponent, null)),
           "\xA0",
-          /* @__PURE__ */ import_react220.default.createElement("span", { className: "str-chat__message-reaction-count" }, reactionCount)
+          /* @__PURE__ */ import_react221.default.createElement("span", { className: "str-chat__message-reaction-count" }, reactionCount)
         )
       )),
-      SelectedEmojiComponent && /* @__PURE__ */ import_react220.default.createElement("div", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big" }, /* @__PURE__ */ import_react220.default.createElement(SelectedEmojiComponent, null)),
-      /* @__PURE__ */ import_react220.default.createElement(
+      SelectedEmojiComponent && /* @__PURE__ */ import_react221.default.createElement("div", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big" }, /* @__PURE__ */ import_react221.default.createElement(SelectedEmojiComponent, null)),
+      /* @__PURE__ */ import_react221.default.createElement(
         "div",
         {
           className: "str-chat__message-reactions-details-reacting-users",
           "data-testid": "all-reacting-users"
         },
-        areReactionsLoading ? /* @__PURE__ */ import_react220.default.createElement(LoadingIndicator, null) : reactionDetailsWithLegacyFallback.map(({ user }) => /* @__PURE__ */ import_react220.default.createElement(
+        areReactionsLoading ? /* @__PURE__ */ import_react221.default.createElement(LoadingIndicator, null) : reactionDetailsWithLegacyFallback.map(({ user }) => /* @__PURE__ */ import_react221.default.createElement(
           "div",
           {
             className: "str-chat__message-reactions-details-reacting-user",
             key: user?.id
           },
-          /* @__PURE__ */ import_react220.default.createElement(
+          /* @__PURE__ */ import_react221.default.createElement(
             Avatar,
             {
               className: "stream-chat__avatar--reaction",
@@ -53895,7 +53904,7 @@ function ReactionsListModal({
               name: user?.name || user?.id
             }
           ),
-          /* @__PURE__ */ import_react220.default.createElement(
+          /* @__PURE__ */ import_react221.default.createElement(
             "span",
             {
               className: "str-chat__user-item--name",
@@ -53910,7 +53919,7 @@ function ReactionsListModal({
 }
 
 // src/components/Reactions/hooks/useProcessReactions.tsx
-var import_react221 = require("react");
+var import_react222 = require("react");
 var defaultReactionsSort = (a2, b) => {
   if (a2.firstReactionAt && b.firstReactionAt) {
     return +a2.firstReactionAt - +b.firstReactionAt;
@@ -53932,19 +53941,19 @@ var useProcessReactions = (params) => {
   const latestReactions = propReactions || message.latest_reactions;
   const ownReactions = propOwnReactions || message?.own_reactions;
   const reactionGroups = propReactionGroups || message?.reaction_groups;
-  const isOwnReaction = (0, import_react221.useCallback)(
+  const isOwnReaction = (0, import_react222.useCallback)(
     (reactionType) => ownReactions?.some((reaction) => reaction.type === reactionType) ?? false,
     [ownReactions]
   );
-  const getEmojiByReactionType = (0, import_react221.useCallback)(
+  const getEmojiByReactionType = (0, import_react222.useCallback)(
     (reactionType) => reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null,
     [reactionOptions]
   );
-  const isSupportedReaction = (0, import_react221.useCallback)(
+  const isSupportedReaction = (0, import_react222.useCallback)(
     (reactionType) => reactionOptions.some((reactionOption) => reactionOption.type === reactionType),
     [reactionOptions]
   );
-  const getLatestReactedUserNames = (0, import_react221.useCallback)(
+  const getLatestReactedUserNames = (0, import_react222.useCallback)(
     (reactionType) => latestReactions?.flatMap((reaction) => {
       if (reactionType && reactionType === reaction.type) {
         const username = reaction.user?.name || reaction.user?.id;
@@ -53954,7 +53963,7 @@ var useProcessReactions = (params) => {
     }) ?? [],
     [latestReactions]
   );
-  const existingReactions = (0, import_react221.useMemo)(() => {
+  const existingReactions = (0, import_react222.useMemo)(() => {
     if (!reactionGroups) {
       return [];
     }
@@ -53988,7 +53997,7 @@ var useProcessReactions = (params) => {
     sortReactions
   ]);
   const hasReactions = existingReactions.length > 0;
-  const totalReactionCount = (0, import_react221.useMemo)(
+  const totalReactionCount = (0, import_react222.useMemo)(
     () => existingReactions.reduce((total, { reactionCount }) => total + reactionCount, 0),
     [existingReactions]
   );
@@ -54010,7 +54019,7 @@ var UnMemoizedReactionsList = (props) => {
     ...rest
   } = props;
   const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
-  const [selectedReactionType, setSelectedReactionType] = (0, import_react222.useState)(null);
+  const [selectedReactionType, setSelectedReactionType] = (0, import_react223.useState)(null);
   const { t: t2 } = useTranslationContext("ReactionsList");
   const { ReactionsListModal: ReactionsListModal2 = ReactionsListModal } = useComponentContext();
   const handleReactionButtonClick = (reactionType) => {
@@ -54020,7 +54029,7 @@ var UnMemoizedReactionsList = (props) => {
     setSelectedReactionType(reactionType);
   };
   if (!hasReactions) return null;
-  return /* @__PURE__ */ import_react222.default.createElement(import_react222.default.Fragment, null, /* @__PURE__ */ import_react222.default.createElement(
+  return /* @__PURE__ */ import_react223.default.createElement(import_react223.default.Fragment, null, /* @__PURE__ */ import_react223.default.createElement(
     "div",
     {
       "aria-label": t2("aria/Reaction list"),
@@ -54031,8 +54040,8 @@ var UnMemoizedReactionsList = (props) => {
       "data-testid": "reaction-list",
       role: "figure"
     },
-    /* @__PURE__ */ import_react222.default.createElement("ul", { className: "str-chat__message-reactions" }, existingReactions.map(
-      ({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react222.default.createElement(
+    /* @__PURE__ */ import_react223.default.createElement("ul", { className: "str-chat__message-reactions" }, existingReactions.map(
+      ({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react223.default.createElement(
         "li",
         {
           className: (0, import_clsx57.default)("str-chat__message-reaction", {
@@ -54040,7 +54049,7 @@ var UnMemoizedReactionsList = (props) => {
           }),
           key: reactionType
         },
-        /* @__PURE__ */ import_react222.default.createElement(
+        /* @__PURE__ */ import_react223.default.createElement(
           "button",
           {
             "aria-label": `Reactions: ${reactionType}`,
@@ -54048,9 +54057,9 @@ var UnMemoizedReactionsList = (props) => {
             onClick: () => handleReactionButtonClick(reactionType),
             type: "button"
           },
-          /* @__PURE__ */ import_react222.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react222.default.createElement(EmojiComponent, null)),
+          /* @__PURE__ */ import_react223.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react223.default.createElement(EmojiComponent, null)),
           "\xA0",
-          /* @__PURE__ */ import_react222.default.createElement(
+          /* @__PURE__ */ import_react223.default.createElement(
             "span",
             {
               className: "str-chat__message-reaction-count",
@@ -54060,8 +54069,8 @@ var UnMemoizedReactionsList = (props) => {
           )
         )
       )
-    ), /* @__PURE__ */ import_react222.default.createElement("li", null, /* @__PURE__ */ import_react222.default.createElement("span", { className: "str-chat__reaction-list--counter" }, totalReactionCount)))
-  ), selectedReactionType !== null && /* @__PURE__ */ import_react222.default.createElement(
+    ), /* @__PURE__ */ import_react223.default.createElement("li", null, /* @__PURE__ */ import_react223.default.createElement("span", { className: "str-chat__reaction-list--counter" }, totalReactionCount)))
+  ), selectedReactionType !== null && /* @__PURE__ */ import_react223.default.createElement(
     ReactionsListModal2,
     {
       handleFetchReactions,
@@ -54074,12 +54083,12 @@ var UnMemoizedReactionsList = (props) => {
     }
   ));
 };
-var ReactionsList = import_react222.default.memo(
+var ReactionsList = import_react223.default.memo(
   UnMemoizedReactionsList
 );
 
 // src/components/Reactions/SimpleReactionsList.tsx
-var import_react223 = __toESM(require("react"));
+var import_react224 = __toESM(require("react"));
 var import_clsx58 = __toESM(require("clsx"));
 var WithTooltip = ({
   children,
@@ -54087,12 +54096,12 @@ var WithTooltip = ({
   onMouseLeave,
   title
 }) => {
-  const [referenceElement, setReferenceElement] = (0, import_react223.useState)(null);
+  const [referenceElement, setReferenceElement] = (0, import_react224.useState)(null);
   const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers({
     onMouseEnter,
     onMouseLeave
   });
-  return /* @__PURE__ */ import_react223.default.createElement(import_react223.default.Fragment, null, /* @__PURE__ */ import_react223.default.createElement(PopperTooltip, { referenceElement, visible: tooltipVisible }, title), /* @__PURE__ */ import_react223.default.createElement(
+  return /* @__PURE__ */ import_react224.default.createElement(import_react224.default.Fragment, null, /* @__PURE__ */ import_react224.default.createElement(PopperTooltip, { referenceElement, visible: tooltipVisible }, title), /* @__PURE__ */ import_react224.default.createElement(
     "span",
     {
       onMouseEnter: handleEnter,
@@ -54108,7 +54117,7 @@ var UnMemoizedSimpleReactionsList = (props) => {
   const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
   const handleReaction = propHandleReaction || contextHandleReaction;
   if (!hasReactions) return null;
-  return /* @__PURE__ */ import_react223.default.createElement("div", { className: "str-chat__message-reactions-container" }, /* @__PURE__ */ import_react223.default.createElement(
+  return /* @__PURE__ */ import_react224.default.createElement("div", { className: "str-chat__message-reactions-container" }, /* @__PURE__ */ import_react224.default.createElement(
     "ul",
     {
       className: "str-chat__simple-reactions-list str-chat__message-reactions",
@@ -54117,7 +54126,7 @@ var UnMemoizedSimpleReactionsList = (props) => {
     existingReactions.map(
       ({ EmojiComponent, isOwnReaction, latestReactedUserNames, reactionType }) => {
         const tooltipContent = latestReactedUserNames.join(", ");
-        return EmojiComponent && /* @__PURE__ */ import_react223.default.createElement(
+        return EmojiComponent && /* @__PURE__ */ import_react224.default.createElement(
           "li",
           {
             className: (0, import_clsx58.default)("str-chat__simple-reactions-list-item", {
@@ -54127,19 +54136,19 @@ var UnMemoizedSimpleReactionsList = (props) => {
             onClick: (event) => handleReaction(reactionType, event),
             onKeyUp: (event) => handleReaction(reactionType, event)
           },
-          /* @__PURE__ */ import_react223.default.createElement(WithTooltip, { title: tooltipContent }, /* @__PURE__ */ import_react223.default.createElement(EmojiComponent, null))
+          /* @__PURE__ */ import_react224.default.createElement(WithTooltip, { title: tooltipContent }, /* @__PURE__ */ import_react224.default.createElement(EmojiComponent, null))
         );
       }
     ),
-    /* @__PURE__ */ import_react223.default.createElement("li", { className: "str-chat__simple-reactions-list-item--last-number" }, totalReactionCount)
+    /* @__PURE__ */ import_react224.default.createElement("li", { className: "str-chat__simple-reactions-list-item--last-number" }, totalReactionCount)
   ));
 };
-var SimpleReactionsList = import_react223.default.memo(
+var SimpleReactionsList = import_react224.default.memo(
   UnMemoizedSimpleReactionsList
 );
 
 // src/components/Message/MessageEditedTimestamp.tsx
-var import_react224 = __toESM(require("react"));
+var import_react225 = __toESM(require("react"));
 var import_clsx59 = __toESM(require("clsx"));
 function MessageEditedTimestamp({
   message: propMessage,
@@ -54155,7 +54164,7 @@ function MessageEditedTimestamp({
   if (!isMessageEdited(message)) {
     return null;
   }
-  return /* @__PURE__ */ import_react224.default.createElement(
+  return /* @__PURE__ */ import_react225.default.createElement(
     "div",
     {
       className: (0, import_clsx59.default)(
@@ -54166,7 +54175,7 @@ function MessageEditedTimestamp({
     },
     t2("Edited"),
     " ",
-    /* @__PURE__ */ import_react224.default.createElement(Timestamp2, { timestamp: message.message_text_updated_at, ...timestampProps })
+    /* @__PURE__ */ import_react225.default.createElement(Timestamp2, { timestamp: message.message_text_updated_at, ...timestampProps })
   );
 }
 
@@ -54193,8 +54202,8 @@ var MessageSimpleWithContext = (props) => {
   } = props;
   const { client } = useChatContext("MessageSimple");
   const { t: t2 } = useTranslationContext("MessageSimple");
-  const [isBounceDialogOpen, setIsBounceDialogOpen] = (0, import_react225.useState)(false);
-  const [isEditedTimestampOpen, setEditedTimestampOpen] = (0, import_react225.useState)(false);
+  const [isBounceDialogOpen, setIsBounceDialogOpen] = (0, import_react226.useState)(false);
+  const [isEditedTimestampOpen, setEditedTimestampOpen] = (0, import_react226.useState)(false);
   const {
     Attachment: Attachment2 = Attachment,
     Avatar: Avatar2 = Avatar,
@@ -54215,7 +54224,7 @@ var MessageSimpleWithContext = (props) => {
   } = useComponentContext("MessageSimple");
   const hasAttachment = messageHasAttachments(message);
   const hasReactions = messageHasReactions(message);
-  const isAIGenerated = (0, import_react225.useMemo)(
+  const isAIGenerated = (0, import_react226.useMemo)(
     () => isMessageAIGenerated?.(message),
     [isMessageAIGenerated, message]
   );
@@ -54223,10 +54232,10 @@ var MessageSimpleWithContext = (props) => {
     return null;
   }
   if (message.deleted_at || message.type === "deleted") {
-    return /* @__PURE__ */ import_react225.default.createElement(MessageDeleted2, { message });
+    return /* @__PURE__ */ import_react226.default.createElement(MessageDeleted2, { message });
   }
   if (isMessageBlocked(message)) {
-    return /* @__PURE__ */ import_react225.default.createElement(MessageBlocked2, null);
+    return /* @__PURE__ */ import_react226.default.createElement(MessageBlocked2, null);
   }
   const showMetadata = !groupedByUser || endOfGroup;
   const showReplyCountButton = !threadList && !!message.reply_count;
@@ -54260,14 +54269,14 @@ var MessageSimpleWithContext = (props) => {
     }
   );
   const poll = message.poll_id && client.polls.fromState(message.poll_id);
-  return /* @__PURE__ */ import_react225.default.createElement(import_react225.default.Fragment, null, editing && /* @__PURE__ */ import_react225.default.createElement(
+  return /* @__PURE__ */ import_react226.default.createElement(import_react226.default.Fragment, null, editing && /* @__PURE__ */ import_react226.default.createElement(
     Modal,
     {
       className: "str-chat__edit-message-modal",
       onClose: clearEditingState,
       open: editing
     },
-    /* @__PURE__ */ import_react225.default.createElement(
+    /* @__PURE__ */ import_react226.default.createElement(
       MessageInput,
       {
         clearEditingState,
@@ -54278,14 +54287,14 @@ var MessageSimpleWithContext = (props) => {
         ...additionalMessageInputProps
       }
     )
-  ), isBounceDialogOpen && /* @__PURE__ */ import_react225.default.createElement(
+  ), isBounceDialogOpen && /* @__PURE__ */ import_react226.default.createElement(
     MessageBounceModal,
     {
       MessageBouncePrompt: MessageBouncePrompt2,
       onClose: () => setIsBounceDialogOpen(false),
       open: isBounceDialogOpen
     }
-  ), /* @__PURE__ */ import_react225.default.createElement("div", { className: rootClassName2, key: message.id }, PinIndicator2 && /* @__PURE__ */ import_react225.default.createElement(PinIndicator2, null), message.user && /* @__PURE__ */ import_react225.default.createElement(
+  ), /* @__PURE__ */ import_react226.default.createElement("div", { className: rootClassName2, key: message.id }, PinIndicator2 && /* @__PURE__ */ import_react226.default.createElement(PinIndicator2, null), message.user && /* @__PURE__ */ import_react226.default.createElement(
     Avatar2,
     {
       image: message.user.image,
@@ -54294,7 +54303,7 @@ var MessageSimpleWithContext = (props) => {
       onMouseOver: onUserHover,
       user: message.user
     }
-  ), /* @__PURE__ */ import_react225.default.createElement(
+  ), /* @__PURE__ */ import_react226.default.createElement(
     "div",
     {
       className: (0, import_clsx60.default)("str-chat__message-inner", {
@@ -54304,37 +54313,37 @@ var MessageSimpleWithContext = (props) => {
       onClick: handleClick,
       onKeyUp: handleClick
     },
-    /* @__PURE__ */ import_react225.default.createElement(MessageActions2, null),
-    /* @__PURE__ */ import_react225.default.createElement("div", { className: "str-chat__message-reactions-host" }, hasReactions && /* @__PURE__ */ import_react225.default.createElement(ReactionsList2, { reverse: true })),
-    /* @__PURE__ */ import_react225.default.createElement("div", { className: "str-chat__message-bubble" }, poll && /* @__PURE__ */ import_react225.default.createElement(Poll, { poll }), message.attachments?.length && !message.quoted_message ? /* @__PURE__ */ import_react225.default.createElement(
+    /* @__PURE__ */ import_react226.default.createElement(MessageActions2, null),
+    /* @__PURE__ */ import_react226.default.createElement("div", { className: "str-chat__message-reactions-host" }, hasReactions && /* @__PURE__ */ import_react226.default.createElement(ReactionsList2, { reverse: true })),
+    /* @__PURE__ */ import_react226.default.createElement("div", { className: "str-chat__message-bubble" }, poll && /* @__PURE__ */ import_react226.default.createElement(Poll, { poll }), message.attachments?.length && !message.quoted_message ? /* @__PURE__ */ import_react226.default.createElement(
       Attachment2,
       {
         actionHandler: handleAction,
         attachments: message.attachments
       }
-    ) : null, isAIGenerated ? /* @__PURE__ */ import_react225.default.createElement(StreamedMessageText2, { message, renderText: renderText2 }) : /* @__PURE__ */ import_react225.default.createElement(MessageText, { message, renderText: renderText2 }), message.mml && /* @__PURE__ */ import_react225.default.createElement(
+    ) : null, isAIGenerated ? /* @__PURE__ */ import_react226.default.createElement(StreamedMessageText2, { message, renderText: renderText2 }) : /* @__PURE__ */ import_react226.default.createElement(MessageText, { message, renderText: renderText2 }), message.mml && /* @__PURE__ */ import_react226.default.createElement(
       MML,
       {
         actionHandler: handleAction,
         align: isMyMessage() ? "right" : "left",
         source: message.mml
       }
-    ), /* @__PURE__ */ import_react225.default.createElement(MessageErrorIcon, null))
-  ), showReplyCountButton && /* @__PURE__ */ import_react225.default.createElement(
+    ), /* @__PURE__ */ import_react226.default.createElement(MessageErrorIcon, null))
+  ), showReplyCountButton && /* @__PURE__ */ import_react226.default.createElement(
     MessageRepliesCountButton2,
     {
       onClick: handleOpenThread,
       reply_count: message.reply_count
     }
-  ), showMetadata && /* @__PURE__ */ import_react225.default.createElement("div", { className: "str-chat__message-metadata" }, /* @__PURE__ */ import_react225.default.createElement(MessageStatus2, null), !isMyMessage() && !!message.user && /* @__PURE__ */ import_react225.default.createElement("span", { className: "str-chat__message-simple-name" }, message.user.name || message.user.id), /* @__PURE__ */ import_react225.default.createElement(MessageTimestamp2, { customClass: "str-chat__message-simple-timestamp" }), isEdited && /* @__PURE__ */ import_react225.default.createElement("span", { className: "str-chat__mesage-simple-edited" }, t2("Edited")), isEdited && /* @__PURE__ */ import_react225.default.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))));
+  ), showMetadata && /* @__PURE__ */ import_react226.default.createElement("div", { className: "str-chat__message-metadata" }, /* @__PURE__ */ import_react226.default.createElement(MessageStatus2, null), !isMyMessage() && !!message.user && /* @__PURE__ */ import_react226.default.createElement("span", { className: "str-chat__message-simple-name" }, message.user.name || message.user.id), /* @__PURE__ */ import_react226.default.createElement(MessageTimestamp2, { customClass: "str-chat__message-simple-timestamp" }), isEdited && /* @__PURE__ */ import_react226.default.createElement("span", { className: "str-chat__mesage-simple-edited" }, t2("Edited")), isEdited && /* @__PURE__ */ import_react226.default.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))));
 };
-var MemoizedMessageSimple = import_react225.default.memo(
+var MemoizedMessageSimple = import_react226.default.memo(
   MessageSimpleWithContext,
   areMessageUIPropsEqual
 );
 var MessageSimple = (props) => {
   const messageContext = useMessageContext("MessageSimple");
-  return /* @__PURE__ */ import_react225.default.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
+  return /* @__PURE__ */ import_react226.default.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
 };
 
 // src/components/Message/Message.tsx
@@ -54370,11 +54379,11 @@ var MessageWithContext = (props) => {
     canReply,
     isMyMessage
   } = userRoles;
-  const messageIsUnread = (0, import_react226.useMemo)(
+  const messageIsUnread = (0, import_react227.useMemo)(
     () => !!(!isMyMessage && client.user?.id && read && (!read[client.user.id] || message?.created_at && new Date(message.created_at).getTime() > read[client.user.id].last_read.getTime())),
     [client, isMyMessage, message.created_at, read]
   );
-  const messageActionsHandler = (0, import_react226.useCallback)(
+  const messageActionsHandler = (0, import_react227.useCallback)(
     () => getMessageActions(messageActions, {
       canDelete,
       canEdit,
@@ -54428,9 +54437,9 @@ var MessageWithContext = (props) => {
     onUserHover,
     setEditingState: setEdit
   };
-  return /* @__PURE__ */ import_react226.default.createElement(MessageProvider, { value: messageContextValue }, /* @__PURE__ */ import_react226.default.createElement(MessageUIComponent, { groupedByUser }));
+  return /* @__PURE__ */ import_react227.default.createElement(MessageProvider, { value: messageContextValue }, /* @__PURE__ */ import_react227.default.createElement(MessageUIComponent, { groupedByUser }));
 };
-var MemoizedMessage = import_react226.default.memo(
+var MemoizedMessage = import_react227.default.memo(
   MessageWithContext,
   areMessagePropsEqual
 );
@@ -54497,7 +54506,7 @@ var Message = (props) => {
     notify: addNotification
   });
   const highlighted = highlightedMessageId === message.id;
-  return /* @__PURE__ */ import_react226.default.createElement(
+  return /* @__PURE__ */ import_react227.default.createElement(
     MemoizedMessage,
     {
       additionalMessageInputProps: props.additionalMessageInputProps,
@@ -54549,18 +54558,18 @@ var Message = (props) => {
 // src/components/MessageList/GiphyPreviewMessage.tsx
 var GiphyPreviewMessage = (props) => {
   const { message } = props;
-  return /* @__PURE__ */ import_react227.default.createElement("div", { className: "giphy-preview-message" }, /* @__PURE__ */ import_react227.default.createElement(Message, { message }));
+  return /* @__PURE__ */ import_react228.default.createElement("div", { className: "giphy-preview-message" }, /* @__PURE__ */ import_react228.default.createElement(Message, { message }));
 };
 
 // src/components/MessageList/MessageList.tsx
 var import_clsx62 = __toESM(require("clsx"));
-var import_react246 = __toESM(require("react"));
+var import_react247 = __toESM(require("react"));
 
 // src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
-var import_react228 = require("react");
+var import_react229 = require("react");
 
 // src/components/MessageList/utils.ts
-var import_nanoid9 = require("nanoid");
+var import_nanoid10 = require("nanoid");
 var processMessages = (params) => {
   const { messages, reviewProcessedMessage, setGiphyPreviewMessage, ...context } = params;
   const {
@@ -54636,9 +54645,9 @@ var processMessages = (params) => {
 var makeDateMessageId = (date) => {
   let idSuffix;
   try {
-    idSuffix = !date ? (0, import_nanoid9.nanoid)() : date instanceof Date ? date.toISOString() : date;
+    idSuffix = !date ? (0, import_nanoid10.nanoid)() : date instanceof Date ? date.toISOString() : date;
   } catch (e2) {
-    idSuffix = (0, import_nanoid9.nanoid)();
+    idSuffix = (0, import_nanoid10.nanoid)();
   }
   return `${CUSTOM_MESSAGE_TYPE.date}-${idSuffix}`;
 };
@@ -54764,7 +54773,7 @@ var useEnrichedMessages = (args) => {
   } = args;
   const { client } = useChatContext("useEnrichedMessages");
   const { HeaderComponent } = useComponentContext("useEnrichedMessages");
-  const lastRead = (0, import_react228.useMemo)(() => channel.lastRead?.(), [channel]);
+  const lastRead = (0, import_react229.useMemo)(() => channel.lastRead?.(), [channel]);
   const enableDateSeparator = !disableDateSeparator;
   let messagesWithDates = !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator ? messages : processMessages({
     enableDateSeparator,
@@ -54779,7 +54788,7 @@ var useEnrichedMessages = (args) => {
     messagesWithDates = insertIntro(messagesWithDates, headerPosition);
   }
   const groupStylesFn = groupStyles || getGroupStyles;
-  const messageGroupStyles = (0, import_react228.useMemo)(
+  const messageGroupStyles = (0, import_react229.useMemo)(
     () => messagesWithDates.reduce((acc, message, i) => {
       const style = groupStylesFn(
         message,
@@ -54798,13 +54807,13 @@ var useEnrichedMessages = (args) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useMessageListElements.tsx
-var import_react230 = require("react");
+var import_react231 = require("react");
 
 // src/components/MessageList/hooks/useLastReadData.ts
-var import_react229 = require("react");
+var import_react230 = require("react");
 var useLastReadData = (props) => {
   const { messages, read, returnAllReadData, userID } = props;
-  return (0, import_react229.useMemo)(
+  return (0, import_react230.useMemo)(
     () => getReadStates(
       messages.filter(({ user }) => user?.id === userID),
       read,
@@ -54836,11 +54845,11 @@ var useMessageListElements = (props) => {
     returnAllReadData,
     userID: client.userID
   });
-  const lastReceivedMessageId = (0, import_react230.useMemo)(
+  const lastReceivedMessageId = (0, import_react231.useMemo)(
     () => getLastReceived(enrichedMessages),
     [enrichedMessages]
   );
-  const elements = (0, import_react230.useMemo)(
+  const elements = (0, import_react231.useMemo)(
     () => renderMessages({
       channelUnreadUiState,
       components,
@@ -54867,7 +54876,7 @@ var useMessageListElements = (props) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts
-var import_react231 = require("react");
+var import_react232 = require("react");
 function useMessageListScrollManager(params) {
   const {
     loadMoreScrollThreshold,
@@ -54878,13 +54887,13 @@ function useMessageListScrollManager(params) {
     showNewMessages
   } = params;
   const { client } = useChatContext("useMessageListScrollManager");
-  const measures = (0, import_react231.useRef)({
+  const measures = (0, import_react232.useRef)({
     offsetHeight: 0,
     scrollHeight: 0
   });
-  const messages = (0, import_react231.useRef)(void 0);
-  const scrollTop = (0, import_react231.useRef)(0);
-  (0, import_react231.useLayoutEffect)(() => {
+  const messages = (0, import_react232.useRef)(void 0);
+  const scrollTop = (0, import_react232.useRef)(0);
+  (0, import_react232.useLayoutEffect)(() => {
     const prevMeasures = measures.current;
     const prevMessages = messages.current;
     const newMessages = params.messages;
@@ -54924,7 +54933,7 @@ function useMessageListScrollManager(params) {
 }
 
 // src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx
-var import_react232 = require("react");
+var import_react233 = require("react");
 var useScrollLocationLogic = (params) => {
   const {
     hasMoreNewer,
@@ -54934,12 +54943,12 @@ var useScrollLocationLogic = (params) => {
     scrolledUpThreshold = 200,
     suppressAutoscroll
   } = params;
-  const [hasNewMessages, setHasNewMessages] = (0, import_react232.useState)(false);
-  const [wrapperRect, setWrapperRect] = (0, import_react232.useState)();
-  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react232.useState)(true);
-  const closeToBottom = (0, import_react232.useRef)(false);
-  const closeToTop = (0, import_react232.useRef)(false);
-  const scrollToBottom = (0, import_react232.useCallback)(() => {
+  const [hasNewMessages, setHasNewMessages] = (0, import_react233.useState)(false);
+  const [wrapperRect, setWrapperRect] = (0, import_react233.useState)();
+  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react233.useState)(true);
+  const closeToBottom = (0, import_react233.useRef)(false);
+  const closeToTop = (0, import_react233.useRef)(false);
+  const scrollToBottom = (0, import_react233.useCallback)(() => {
     if (!listElement?.scrollTo || hasMoreNewer || suppressAutoscroll) {
       return;
     }
@@ -54948,7 +54957,7 @@ var useScrollLocationLogic = (params) => {
     });
     setHasNewMessages(false);
   }, [listElement, hasMoreNewer, suppressAutoscroll]);
-  (0, import_react232.useLayoutEffect)(() => {
+  (0, import_react233.useLayoutEffect)(() => {
     if (listElement) {
       setWrapperRect(listElement.getBoundingClientRect());
       scrollToBottom();
@@ -54968,7 +54977,7 @@ var useScrollLocationLogic = (params) => {
     scrollToBottom,
     showNewMessages: () => setHasNewMessages(true)
   });
-  const onScroll = (0, import_react232.useCallback)(
+  const onScroll = (0, import_react233.useCallback)(
     (event) => {
       const element3 = event.target;
       const scrollTop = element3.scrollTop;
@@ -54999,22 +55008,22 @@ var useScrollLocationLogic = (params) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts
-var import_react235 = require("react");
+var import_react236 = require("react");
 
 // src/components/MessageList/MessageListMainPanel.tsx
-var import_react233 = __toESM(require("react"));
+var import_react234 = __toESM(require("react"));
 var MESSAGE_LIST_MAIN_PANEL_CLASS = "str-chat__main-panel-inner str-chat__message-list-main-panel";
-var MessageListMainPanel = ({ children }) => /* @__PURE__ */ import_react233.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
+var MessageListMainPanel = ({ children }) => /* @__PURE__ */ import_react234.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
 
 // src/components/MessageList/UnreadMessagesSeparator.tsx
-var import_react234 = __toESM(require("react"));
+var import_react235 = __toESM(require("react"));
 var UNREAD_MESSAGE_SEPARATOR_CLASS = "str-chat__unread-messages-separator";
 var UnreadMessagesSeparator = ({
   showCount,
   unreadCount
 }) => {
   const { t: t2 } = useTranslationContext("UnreadMessagesSeparator");
-  return /* @__PURE__ */ import_react234.default.createElement(
+  return /* @__PURE__ */ import_react235.default.createElement(
     "div",
     {
       className: UNREAD_MESSAGE_SEPARATOR_CLASS,
@@ -55040,10 +55049,10 @@ var useUnreadMessagesNotification = ({
   unreadCount
 }) => {
   const { messages } = useChannelStateContext("UnreadMessagesNotification");
-  const [show, setShow] = (0, import_react235.useState)(false);
-  const isScrolledAboveTargetTop = (0, import_react235.useRef)(false);
+  const [show, setShow] = (0, import_react236.useState)(false);
+  const isScrolledAboveTargetTop = (0, import_react236.useRef)(false);
   const intersectionObserverIsSupported = typeof IntersectionObserver !== "undefined";
-  (0, import_react235.useEffect)(() => {
+  (0, import_react236.useEffect)(() => {
     if (!(unreadCount && intersectionObserverIsSupported)) {
       setShow(false);
       return;
@@ -55090,7 +55099,7 @@ var useUnreadMessagesNotification = ({
     showAlways,
     unreadCount
   ]);
-  (0, import_react235.useEffect)(() => {
+  (0, import_react236.useEffect)(() => {
     if (unreadCount && isMessageListScrolledToBottom && isScrolledAboveTargetTop.current) {
       setShow(true);
       isScrolledAboveTargetTop.current = false;
@@ -55100,7 +55109,7 @@ var useUnreadMessagesNotification = ({
 };
 
 // src/components/MessageList/hooks/useMarkRead.ts
-var import_react236 = require("react");
+var import_react237 = require("react");
 var hasReadLastMessage = (channel, userId) => {
   const latestMessageIdInChannel = channel.state.latestMessages.slice(-1)[0]?.id;
   const lastReadMessageIdServer = channel.state.read[userId]?.last_read_message_id;
@@ -55114,7 +55123,7 @@ var useMarkRead = ({
   const { client } = useChatContext("useMarkRead");
   const { markRead, setChannelUnreadUiState } = useChannelActionContext("useMarkRead");
   const { channel } = useChannelStateContext("useMarkRead");
-  (0, import_react236.useEffect)(() => {
+  (0, import_react237.useEffect)(() => {
     const shouldMarkRead = () => !document.hidden && !wasMarkedUnread && !messageListIsThread && isMessageListScrolledToBottom && client.user?.id && !hasReadLastMessage(channel, client.user.id);
     const onVisibilityChange = () => {
       if (shouldMarkRead()) markRead();
@@ -55173,11 +55182,11 @@ function getPreviousLastMessage(messages, newMessage) {
 }
 
 // src/components/MessageList/MessageNotification.tsx
-var import_react237 = __toESM(require("react"));
+var import_react238 = __toESM(require("react"));
 var UnMemoizedMessageNotification = (props) => {
   const { children, onClick, showNotification = true } = props;
   if (!showNotification) return null;
-  return /* @__PURE__ */ import_react237.default.createElement(
+  return /* @__PURE__ */ import_react238.default.createElement(
     "button",
     {
       "aria-live": "polite",
@@ -55188,12 +55197,12 @@ var UnMemoizedMessageNotification = (props) => {
     children
   );
 };
-var MessageNotification = import_react237.default.memo(
+var MessageNotification = import_react238.default.memo(
   UnMemoizedMessageNotification
 );
 
 // src/components/MessageList/MessageListNotifications.tsx
-var import_react238 = __toESM(require("react"));
+var import_react239 = __toESM(require("react"));
 var MessageListNotifications = (props) => {
   const {
     hasNewMessages,
@@ -55206,7 +55215,7 @@ var MessageListNotifications = (props) => {
     unreadCount
   } = props;
   const { t: t2 } = useTranslationContext("MessageListNotifications");
-  return /* @__PURE__ */ import_react238.default.createElement("div", { className: "str-chat__list-notifications" }, notifications.map((notification) => /* @__PURE__ */ import_react238.default.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)), /* @__PURE__ */ import_react238.default.createElement(ConnectionStatus, null), /* @__PURE__ */ import_react238.default.createElement(
+  return /* @__PURE__ */ import_react239.default.createElement("div", { className: "str-chat__list-notifications" }, notifications.map((notification) => /* @__PURE__ */ import_react239.default.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)), /* @__PURE__ */ import_react239.default.createElement(ConnectionStatus, null), /* @__PURE__ */ import_react239.default.createElement(
     MessageNotification2,
     {
       isMessageListScrolledToBottom,
@@ -55220,11 +55229,11 @@ var MessageListNotifications = (props) => {
 };
 
 // src/components/MessageList/UnreadMessagesNotification.tsx
-var import_react240 = __toESM(require("react"));
+var import_react241 = __toESM(require("react"));
 
 // src/components/MessageList/icons.tsx
-var import_react239 = __toESM(require("react"));
-var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react239.default.createElement(
+var import_react240 = __toESM(require("react"));
+var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react240.default.createElement(
   "svg",
   {
     className,
@@ -55235,7 +55244,7 @@ var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react23
     width: "24",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react239.default.createElement(
+  /* @__PURE__ */ import_react240.default.createElement(
     "path",
     {
       d: "M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z",
@@ -55243,7 +55252,7 @@ var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react23
     }
   )
 );
-var CloseIcon2 = () => /* @__PURE__ */ import_react239.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 14 13", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react239.default.createElement("path", { d: "M1.32227 12.3408C0.944336 11.9629 0.953125 11.3213 1.32227 10.9521L5.60254 6.66309L1.32227 2.38281C0.953125 2.01367 0.944336 1.37207 1.32227 0.994141C1.7002 0.616211 2.3418 0.625 2.71094 0.985352L7 5.27441L11.2803 0.994141C11.6494 0.625 12.291 0.616211 12.6689 0.994141C13.0469 1.37207 13.0381 2.01367 12.6689 2.38281L8.38867 6.66309L12.6689 10.9521C13.0381 11.3213 13.0469 11.9629 12.6689 12.3408C12.291 12.7188 11.6494 12.71 11.2803 12.3408L7 8.06055L2.71094 12.3408C2.3418 12.71 1.7002 12.7188 1.32227 12.3408Z" }));
+var CloseIcon2 = () => /* @__PURE__ */ import_react240.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 14 13", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react240.default.createElement("path", { d: "M1.32227 12.3408C0.944336 11.9629 0.953125 11.3213 1.32227 10.9521L5.60254 6.66309L1.32227 2.38281C0.953125 2.01367 0.944336 1.37207 1.32227 0.994141C1.7002 0.616211 2.3418 0.625 2.71094 0.985352L7 5.27441L11.2803 0.994141C11.6494 0.625 12.291 0.616211 12.6689 0.994141C13.0469 1.37207 13.0381 2.01367 12.6689 2.38281L8.38867 6.66309L12.6689 10.9521C13.0381 11.3213 13.0469 11.9629 12.6689 12.3408C12.291 12.7188 11.6494 12.71 11.2803 12.3408L7 8.06055L2.71094 12.3408C2.3418 12.71 1.7002 12.7188 1.32227 12.3408Z" }));
 
 // src/components/MessageList/UnreadMessagesNotification.tsx
 var UnreadMessagesNotification = ({
@@ -55255,19 +55264,19 @@ var UnreadMessagesNotification = ({
     "UnreadMessagesNotification"
   );
   const { t: t2 } = useTranslationContext("UnreadMessagesNotification");
-  return /* @__PURE__ */ import_react240.default.createElement(
+  return /* @__PURE__ */ import_react241.default.createElement(
     "div",
     {
       className: "str-chat__unread-messages-notification",
       "data-testid": "unread-messages-notification"
     },
-    /* @__PURE__ */ import_react240.default.createElement("button", { onClick: () => jumpToFirstUnreadMessage(queryMessageLimit) }, unreadCount && showCount ? t2("{{count}} unread", { count: unreadCount ?? 0 }) : t2("Unread messages")),
-    /* @__PURE__ */ import_react240.default.createElement("button", { onClick: () => markRead() }, /* @__PURE__ */ import_react240.default.createElement(CloseIcon2, null))
+    /* @__PURE__ */ import_react241.default.createElement("button", { onClick: () => jumpToFirstUnreadMessage(queryMessageLimit) }, unreadCount && showCount ? t2("{{count}} unread", { count: unreadCount ?? 0 }) : t2("Unread messages")),
+    /* @__PURE__ */ import_react241.default.createElement("button", { onClick: () => markRead() }, /* @__PURE__ */ import_react241.default.createElement(CloseIcon2, null))
   );
 };
 
 // src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
-var import_react241 = __toESM(require("react"));
+var import_react242 = __toESM(require("react"));
 var mousewheelListener2 = (event) => {
   if (event instanceof WheelEvent && event.deltaY === 1) {
     event.preventDefault();
@@ -55298,10 +55307,10 @@ var InfiniteScroll = (props) => {
   const loadPreviousPageFn = loadPreviousPage || loadMore;
   const hasNextPageFlag = hasNextPage || hasMoreNewer;
   const hasPreviousPageFlag = hasPreviousPage || hasMore;
-  const scrollComponent = (0, import_react241.useRef)(void 0);
-  const previousOffset = (0, import_react241.useRef)(void 0);
-  const previousReverseOffset = (0, import_react241.useRef)(void 0);
-  const scrollListenerRef = (0, import_react241.useRef)(void 0);
+  const scrollComponent = (0, import_react242.useRef)(void 0);
+  const previousOffset = (0, import_react242.useRef)(void 0);
+  const previousReverseOffset = (0, import_react242.useRef)(void 0);
+  const scrollListenerRef = (0, import_react242.useRef)(void 0);
   scrollListenerRef.current = () => {
     const element4 = scrollComponent.current;
     if (!element4 || element4.offsetParent === null) {
@@ -55325,7 +55334,7 @@ var InfiniteScroll = (props) => {
       loadNextPageFn();
     }
   };
-  (0, import_react241.useEffect)(() => {
+  (0, import_react242.useEffect)(() => {
     deprecationAndReplacementWarning(
       [
         [{ hasMoreNewer }, { hasNextPage }],
@@ -55336,7 +55345,7 @@ var InfiniteScroll = (props) => {
       "InfiniteScroll"
     );
   }, []);
-  (0, import_react241.useEffect)(() => {
+  (0, import_react242.useEffect)(() => {
     const scrollElement = scrollComponent.current?.parentNode;
     if (!scrollElement) return;
     const scrollListener = () => scrollListenerRef.current?.();
@@ -55348,7 +55357,7 @@ var InfiniteScroll = (props) => {
       scrollElement.removeEventListener("resize", scrollListener, useCapture);
     };
   }, [initialLoad, useCapture]);
-  (0, import_react241.useEffect)(() => {
+  (0, import_react242.useEffect)(() => {
     const scrollElement = scrollComponent.current?.parentNode;
     if (scrollElement) {
       scrollElement.addEventListener("wheel", mousewheelListener2, { passive: false });
@@ -55369,11 +55378,11 @@ var InfiniteScroll = (props) => {
   if (head) {
     childrenArray.unshift(head);
   }
-  return import_react241.default.createElement(element3, attributes, childrenArray);
+  return import_react242.default.createElement(element3, attributes, childrenArray);
 };
 
 // src/components/TypingIndicator/TypingIndicator.tsx
-var import_react242 = __toESM(require("react"));
+var import_react243 = __toESM(require("react"));
 var import_clsx61 = __toESM(require("clsx"));
 var useJoinTypingUsers = (names) => {
   const { t: t2 } = useTranslationContext();
@@ -55411,7 +55420,7 @@ var UnMemoizedTypingIndicator = (props) => {
     return null;
   }
   if (!isTypingActive) return null;
-  return /* @__PURE__ */ import_react242.default.createElement(
+  return /* @__PURE__ */ import_react243.default.createElement(
     "div",
     {
       className: (0, import_clsx61.default)("str-chat__typing-indicator", {
@@ -55419,19 +55428,19 @@ var UnMemoizedTypingIndicator = (props) => {
       }),
       "data-testid": "typing-indicator"
     },
-    /* @__PURE__ */ import_react242.default.createElement("div", { className: "str-chat__typing-indicator__dots" }, /* @__PURE__ */ import_react242.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react242.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react242.default.createElement("span", { className: "str-chat__typing-indicator__dot" })),
-    /* @__PURE__ */ import_react242.default.createElement("div", { className: "str-chat__typing-indicator__users", "data-testid": "typing-users" }, joinedTypingUsers)
+    /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__typing-indicator__dots" }, /* @__PURE__ */ import_react243.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react243.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react243.default.createElement("span", { className: "str-chat__typing-indicator__dot" })),
+    /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__typing-indicator__users", "data-testid": "typing-users" }, joinedTypingUsers)
   );
 };
-var TypingIndicator = import_react242.default.memo(
+var TypingIndicator = import_react243.default.memo(
   UnMemoizedTypingIndicator
 );
 
 // src/components/MessageList/renderMessages.tsx
-var import_react245 = __toESM(require("react"));
+var import_react246 = __toESM(require("react"));
 
 // src/components/DateSeparator/DateSeparator.tsx
-var import_react243 = __toESM(require("react"));
+var import_react244 = __toESM(require("react"));
 var UnMemoizedDateSeparator = (props) => {
   const {
     calendar: calendar3,
@@ -55451,21 +55460,21 @@ var UnMemoizedDateSeparator = (props) => {
     tDateTimeParser,
     timestampTranslationKey: "timestamp/DateSeparator"
   });
-  return /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__date-separator", "data-testid": "date-separator" }, (position4 === "right" || position4 === "center") && /* @__PURE__ */ import_react243.default.createElement("hr", { className: "str-chat__date-separator-line" }), /* @__PURE__ */ import_react243.default.createElement("div", { className: "str-chat__date-separator-date" }, unread ? `${t2("New")} - ${formattedDate}` : formattedDate), (position4 === "left" || position4 === "center") && /* @__PURE__ */ import_react243.default.createElement("hr", { className: "str-chat__date-separator-line" }));
+  return /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__date-separator", "data-testid": "date-separator" }, (position4 === "right" || position4 === "center") && /* @__PURE__ */ import_react244.default.createElement("hr", { className: "str-chat__date-separator-line" }), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__date-separator-date" }, unread ? `${t2("New")} - ${formattedDate}` : formattedDate), (position4 === "left" || position4 === "center") && /* @__PURE__ */ import_react244.default.createElement("hr", { className: "str-chat__date-separator-line" }));
 };
-var DateSeparator = import_react243.default.memo(
+var DateSeparator = import_react244.default.memo(
   UnMemoizedDateSeparator
 );
 
 // src/components/EventComponent/EventComponent.tsx
-var import_react244 = __toESM(require("react"));
+var import_react245 = __toESM(require("react"));
 var UnMemoizedEventComponent = (props) => {
   const { Avatar: Avatar2 = Avatar, calendar: calendar3, calendarFormats, format, message } = props;
   const { t: t2, tDateTimeParser } = useTranslationContext("EventComponent");
   const { created_at = "", event, text: text7, type } = message;
   const getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser };
   if (type === "system")
-    return /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message--system", "data-testid": "message-system" }, /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message--system__text" }, /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message--system__line" }), /* @__PURE__ */ import_react244.default.createElement("p", null, text7), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message--system__line" })), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__message--system__date" }, /* @__PURE__ */ import_react244.default.createElement("strong", null, getDateString({
+    return /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message--system", "data-testid": "message-system" }, /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message--system__text" }, /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message--system__line" }), /* @__PURE__ */ import_react245.default.createElement("p", null, text7), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message--system__line" })), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__message--system__date" }, /* @__PURE__ */ import_react245.default.createElement("strong", null, getDateString({
       ...getDateOptions,
       calendar: calendar3,
       calendarFormats,
@@ -55476,11 +55485,11 @@ var UnMemoizedEventComponent = (props) => {
   if (event?.type === "member.removed" || event?.type === "member.added") {
     const name2 = event.user?.name || event.user?.id;
     const sentence = `${name2} ${event.type === "member.added" ? "has joined the chat" : "was removed from the chat"}`;
-    return /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__event-component__channel-event" }, /* @__PURE__ */ import_react244.default.createElement(Avatar2, { image: event.user?.image, name: name2, user: event.user }), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__event-component__channel-event__content" }, /* @__PURE__ */ import_react244.default.createElement("em", { className: "str-chat__event-component__channel-event__sentence" }, sentence), /* @__PURE__ */ import_react244.default.createElement("div", { className: "str-chat__event-component__channel-event__date" }, getDateString({ ...getDateOptions, format: "LT" }))));
+    return /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__event-component__channel-event" }, /* @__PURE__ */ import_react245.default.createElement(Avatar2, { image: event.user?.image, name: name2, user: event.user }), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__event-component__channel-event__content" }, /* @__PURE__ */ import_react245.default.createElement("em", { className: "str-chat__event-component__channel-event__sentence" }, sentence), /* @__PURE__ */ import_react245.default.createElement("div", { className: "str-chat__event-component__channel-event__date" }, getDateString({ ...getDateOptions, format: "LT" }))));
   }
   return null;
 };
-var EventComponent = import_react244.default.memo(
+var EventComponent = import_react245.default.memo(
   UnMemoizedEventComponent
 );
 
@@ -55508,7 +55517,7 @@ function defaultRenderMessages({
     const message = messages[index3];
     if (isDateSeparatorMessage(message)) {
       renderedMessages.push(
-        /* @__PURE__ */ import_react245.default.createElement("li", { key: `${message.date.toISOString()}-i` }, /* @__PURE__ */ import_react245.default.createElement(
+        /* @__PURE__ */ import_react246.default.createElement("li", { key: `${message.date.toISOString()}-i` }, /* @__PURE__ */ import_react246.default.createElement(
           DateSeparator2,
           {
             date: message.date,
@@ -55519,17 +55528,17 @@ function defaultRenderMessages({
       );
     } else if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
       renderedMessages.push(
-        /* @__PURE__ */ import_react245.default.createElement("li", { key: "intro" }, /* @__PURE__ */ import_react245.default.createElement(HeaderComponent, null))
+        /* @__PURE__ */ import_react246.default.createElement("li", { key: "intro" }, /* @__PURE__ */ import_react246.default.createElement(HeaderComponent, null))
       );
     } else if (message.type === "system") {
       renderedMessages.push(
-        /* @__PURE__ */ import_react245.default.createElement(
+        /* @__PURE__ */ import_react246.default.createElement(
           "li",
           {
             "data-message-id": message.id,
             key: message.id || message.created_at
           },
-          /* @__PURE__ */ import_react245.default.createElement(MessageSystem, { message })
+          /* @__PURE__ */ import_react246.default.createElement(MessageSystem, { message })
         )
       );
     } else {
@@ -55548,19 +55557,19 @@ function defaultRenderMessages({
         unreadMessageCount: channelUnreadUiState?.unread_messages
       });
       renderedMessages.push(
-        /* @__PURE__ */ import_react245.default.createElement(import_react245.Fragment, { key: message.id || message.created_at }, isFirstUnreadMessage && UnreadMessagesSeparator2 && /* @__PURE__ */ import_react245.default.createElement("li", { className: "str-chat__li str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react245.default.createElement(
+        /* @__PURE__ */ import_react246.default.createElement(import_react246.Fragment, { key: message.id || message.created_at }, isFirstUnreadMessage && UnreadMessagesSeparator2 && /* @__PURE__ */ import_react246.default.createElement("li", { className: "str-chat__li str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react246.default.createElement(
           UnreadMessagesSeparator2,
           {
             unreadCount: channelUnreadUiState?.unread_messages
           }
-        )), /* @__PURE__ */ import_react245.default.createElement(
+        )), /* @__PURE__ */ import_react246.default.createElement(
           "li",
           {
             className: messageClass,
             "data-message-id": message.id,
             "data-testid": messageClass
           },
-          /* @__PURE__ */ import_react245.default.createElement(
+          /* @__PURE__ */ import_react246.default.createElement(
             Message,
             {
               groupStyles: [groupStyles],
@@ -55617,8 +55626,8 @@ var MessageListWithContext = (props) => {
     threadList = false,
     unsafeHTML = false
   } = props;
-  const [listElement, setListElement] = import_react246.default.useState(null);
-  const [ulElement, setUlElement] = import_react246.default.useState(null);
+  const [listElement, setListElement] = import_react247.default.useState(null);
+  const [ulElement, setUlElement] = import_react247.default.useState(null);
   const { customClasses } = useChatContext("MessageList");
   const {
     EmptyStateIndicator: EmptyStateIndicator2 = EmptyStateIndicator,
@@ -55706,24 +55715,24 @@ var MessageListWithContext = (props) => {
     threadList
   });
   const messageListClass = customClasses?.messageList || "str-chat__list";
-  const loadMore = import_react246.default.useCallback(() => {
+  const loadMore = import_react247.default.useCallback(() => {
     if (loadMoreCallback) {
       loadMoreCallback(messageLimit);
     }
   }, [loadMoreCallback, messageLimit]);
-  const loadMoreNewer = import_react246.default.useCallback(() => {
+  const loadMoreNewer = import_react247.default.useCallback(() => {
     if (loadMoreNewerCallback) {
       loadMoreNewerCallback(messageLimit);
     }
   }, [loadMoreNewerCallback, messageLimit]);
-  const scrollToBottomFromNotification = import_react246.default.useCallback(async () => {
+  const scrollToBottomFromNotification = import_react247.default.useCallback(async () => {
     if (hasMoreNewer) {
       await jumpToLatestMessage();
     } else {
       scrollToBottom();
     }
   }, [scrollToBottom, hasMoreNewer]);
-  import_react246.default.useLayoutEffect(() => {
+  import_react247.default.useLayoutEffect(() => {
     if (highlightedMessageId) {
       const element3 = ulElement?.querySelector(
         `[data-message-id='${highlightedMessageId}']`
@@ -55731,14 +55740,15 @@ var MessageListWithContext = (props) => {
       element3?.scrollIntoView({ block: "center" });
     }
   }, [highlightedMessageId]);
+  const id = useStableId();
   const showEmptyStateIndicator = elements.length === 0 && !threadList;
-  const dialogManagerId = threadList ? "message-list-dialog-manager-thread" : "message-list-dialog-manager";
-  return /* @__PURE__ */ import_react246.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react246.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react246.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react246.default.createElement(
+  const dialogManagerId = threadList ? `message-list-dialog-manager-thread-${id}` : `message-list-dialog-manager-${id}`;
+  return /* @__PURE__ */ import_react247.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react247.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react247.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react247.default.createElement(
     UnreadMessagesNotification2,
     {
       unreadCount: channelUnreadUiState?.unread_messages
     }
-  ), /* @__PURE__ */ import_react246.default.createElement(
+  ), /* @__PURE__ */ import_react247.default.createElement(
     "div",
     {
       className: (0, import_clsx62.default)(messageListClass, customClasses?.threadList),
@@ -55746,7 +55756,7 @@ var MessageListWithContext = (props) => {
       ref: setListElement,
       tabIndex: 0
     },
-    showEmptyStateIndicator ? /* @__PURE__ */ import_react246.default.createElement(EmptyStateIndicator2, { listType: threadList ? "thread" : "message" }) : /* @__PURE__ */ import_react246.default.createElement(
+    showEmptyStateIndicator ? /* @__PURE__ */ import_react247.default.createElement(EmptyStateIndicator2, { listType: threadList ? "thread" : "message" }) : /* @__PURE__ */ import_react247.default.createElement(
       InfiniteScroll,
       {
         className: "str-chat__message-list-scroll",
@@ -55755,17 +55765,17 @@ var MessageListWithContext = (props) => {
         hasPreviousPage: props.hasMore,
         head: props.head,
         isLoading: props.loadingMore,
-        loader: /* @__PURE__ */ import_react246.default.createElement("div", { className: "str-chat__list__loading", key: "loading-indicator" }, props.loadingMore && /* @__PURE__ */ import_react246.default.createElement(LoadingIndicator2, { size: 20 })),
+        loader: /* @__PURE__ */ import_react247.default.createElement("div", { className: "str-chat__list__loading", key: "loading-indicator" }, props.loadingMore && /* @__PURE__ */ import_react247.default.createElement(LoadingIndicator2, { size: 20 })),
         loadNextPage: loadMoreNewer,
         loadPreviousPage: loadMore,
         threshold: loadMoreScrollThreshold,
         ...restInternalInfiniteScrollProps
       },
-      /* @__PURE__ */ import_react246.default.createElement("ul", { className: "str-chat__ul", ref: setUlElement }, elements),
-      /* @__PURE__ */ import_react246.default.createElement(TypingIndicator2, { threadList }),
-      /* @__PURE__ */ import_react246.default.createElement("div", { key: "bottom" })
+      /* @__PURE__ */ import_react247.default.createElement("ul", { className: "str-chat__ul", ref: setUlElement }, elements),
+      /* @__PURE__ */ import_react247.default.createElement(TypingIndicator2, { threadList }),
+      /* @__PURE__ */ import_react247.default.createElement("div", { key: "bottom" })
     )
-  ))), /* @__PURE__ */ import_react246.default.createElement(
+  ))), /* @__PURE__ */ import_react247.default.createElement(
     MessageListNotifications2,
     {
       hasNewMessages,
@@ -55790,7 +55800,7 @@ var MessageList = (props) => {
     // eslint-disable-line @typescript-eslint/no-unused-vars
     ...restChannelStateContext
   } = useChannelStateContext("MessageList");
-  return /* @__PURE__ */ import_react246.default.createElement(
+  return /* @__PURE__ */ import_react247.default.createElement(
     MessageListWithContext,
     {
       jumpToLatestMessage,
@@ -55803,16 +55813,16 @@ var MessageList = (props) => {
 };
 
 // src/components/MessageList/ScrollToBottomButton.tsx
-var import_react247 = __toESM(require("react"));
+var import_react248 = __toESM(require("react"));
 var import_clsx63 = __toESM(require("clsx"));
 var UnMemoizedScrollToBottomButton = (props) => {
   const { isMessageListScrolledToBottom, onClick, threadList } = props;
   const { channel: activeChannel, client } = useChatContext();
   const { thread } = useChannelStateContext();
-  const [countUnread, setCountUnread] = (0, import_react247.useState)(activeChannel?.countUnread() || 0);
-  const [replyCount, setReplyCount] = (0, import_react247.useState)(thread?.reply_count || 0);
+  const [countUnread, setCountUnread] = (0, import_react248.useState)(activeChannel?.countUnread() || 0);
+  const [replyCount, setReplyCount] = (0, import_react248.useState)(thread?.reply_count || 0);
   const observedEvent = threadList ? "message.updated" : "message.new";
-  (0, import_react247.useEffect)(() => {
+  (0, import_react248.useEffect)(() => {
     const handleEvent = (event) => {
       const newMessageInAnotherChannel = event.cid !== activeChannel?.cid;
       const newMessageIsMine = event.user?.id === client.user?.id;
@@ -55834,14 +55844,14 @@ var UnMemoizedScrollToBottomButton = (props) => {
       client.off(observedEvent, handleEvent);
     };
   }, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
-  (0, import_react247.useEffect)(() => {
+  (0, import_react248.useEffect)(() => {
     if (isMessageListScrolledToBottom) {
       setCountUnread(0);
       setReplyCount(thread?.reply_count || 0);
     }
   }, [isMessageListScrolledToBottom, thread]);
   if (isMessageListScrolledToBottom) return null;
-  return /* @__PURE__ */ import_react247.default.createElement("div", { className: "str-chat__jump-to-latest-message" }, /* @__PURE__ */ import_react247.default.createElement(
+  return /* @__PURE__ */ import_react248.default.createElement("div", { className: "str-chat__jump-to-latest-message" }, /* @__PURE__ */ import_react248.default.createElement(
     "button",
     {
       "aria-live": "polite",
@@ -55852,8 +55862,8 @@ var UnMemoizedScrollToBottomButton = (props) => {
       "data-testid": "message-notification",
       onClick
     },
-    /* @__PURE__ */ import_react247.default.createElement(ArrowDown, null),
-    countUnread > 0 && /* @__PURE__ */ import_react247.default.createElement(
+    /* @__PURE__ */ import_react248.default.createElement(ArrowDown, null),
+    countUnread > 0 && /* @__PURE__ */ import_react248.default.createElement(
       "div",
       {
         className: (0, import_clsx63.default)(
@@ -55866,23 +55876,23 @@ var UnMemoizedScrollToBottomButton = (props) => {
     )
   ));
 };
-var ScrollToBottomButton = import_react247.default.memo(
+var ScrollToBottomButton = import_react248.default.memo(
   UnMemoizedScrollToBottomButton
 );
 
 // src/components/MessageList/VirtualizedMessageList.tsx
-var import_react257 = __toESM(require("react"));
+var import_react258 = __toESM(require("react"));
 var import_react_virtuoso2 = require("react-virtuoso");
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts
-var import_react248 = require("react");
+var import_react249 = require("react");
 function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
-  const [newMessagesNotification, setNewMessagesNotification] = (0, import_react248.useState)(false);
-  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react248.useState)(true);
-  const didMount = (0, import_react248.useRef)(false);
-  const lastMessageId = (0, import_react248.useRef)("");
-  const atBottom = (0, import_react248.useRef)(false);
-  (0, import_react248.useEffect)(() => {
+  const [newMessagesNotification, setNewMessagesNotification] = (0, import_react249.useState)(false);
+  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react249.useState)(true);
+  const didMount = (0, import_react249.useRef)(false);
+  const lastMessageId = (0, import_react249.useRef)("");
+  const atBottom = (0, import_react249.useRef)(false);
+  (0, import_react249.useEffect)(() => {
     if (hasMoreNewer) {
       setNewMessagesNotification(true);
       return;
@@ -55908,17 +55918,17 @@ function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
 }
 
 // src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts
-var import_react249 = require("react");
+var import_react250 = require("react");
 var STATUSES_EXCLUDED_FROM_PREPEND = {
   failed: true,
   sending: true
 };
 function usePrependedMessagesCount(messages, hasDateSeparator) {
   const firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-  const firstMessageOnFirstLoadedPage = (0, import_react249.useRef)(void 0);
-  const previousFirstMessageOnFirstLoadedPage = (0, import_react249.useRef)(void 0);
-  const previousNumItemsPrepended = (0, import_react249.useRef)(0);
-  const numItemsPrepended = (0, import_react249.useMemo)(() => {
+  const firstMessageOnFirstLoadedPage = (0, import_react250.useRef)(void 0);
+  const previousFirstMessageOnFirstLoadedPage = (0, import_react250.useRef)(void 0);
+  const previousNumItemsPrepended = (0, import_react250.useRef)(0);
+  const numItemsPrepended = (0, import_react250.useMemo)(() => {
     if (!messages || !messages.length) {
       previousNumItemsPrepended.current = 0;
       return 0;
@@ -55948,10 +55958,10 @@ function usePrependedMessagesCount(messages, hasDateSeparator) {
 }
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts
-var import_react250 = require("react");
+var import_react251 = require("react");
 function useShouldForceScrollToBottom(messages, currentUserId) {
-  const lastFocusedOwnMessage = (0, import_react250.useRef)("");
-  const initialFocusRegistered = (0, import_react250.useRef)(false);
+  const lastFocusedOwnMessage = (0, import_react251.useRef)("");
+  const initialFocusRegistered = (0, import_react251.useRef)(false);
   function recheckForNewOwnMessage() {
     if (messages && messages.length > 0) {
       const lastMessage = messages[messages.length - 1];
@@ -55962,7 +55972,7 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
     }
     return false;
   }
-  (0, import_react250.useEffect)(() => {
+  (0, import_react251.useEffect)(() => {
     if (messages && messages.length && !initialFocusRegistered.current) {
       initialFocusRegistered.current = true;
       recheckForNewOwnMessage();
@@ -55972,11 +55982,11 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
 }
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts
-var import_react251 = require("react");
+var import_react252 = require("react");
 var useGiphyPreview = (separateGiphyPreview) => {
-  const [giphyPreviewMessage, setGiphyPreviewMessage] = (0, import_react251.useState)();
+  const [giphyPreviewMessage, setGiphyPreviewMessage] = (0, import_react252.useState)();
   const { client } = useChatContext("useGiphyPreview");
-  (0, import_react251.useEffect)(() => {
+  (0, import_react252.useEffect)(() => {
     const handleEvent = (event) => {
       const { message, user } = event;
       if (message?.command === "giphy" && user?.id === client.userID) {
@@ -55993,13 +56003,13 @@ var useGiphyPreview = (separateGiphyPreview) => {
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts
-var import_react252 = require("react");
+var import_react253 = require("react");
 var useMessageSetKey = ({
   messages
 }) => {
-  const [messageSetKey, setMessageSetKey] = (0, import_react252.useState)(+/* @__PURE__ */ new Date());
-  const firstMessageId = (0, import_react252.useRef)(void 0);
-  (0, import_react252.useEffect)(() => {
+  const [messageSetKey, setMessageSetKey] = (0, import_react253.useState)(+/* @__PURE__ */ new Date());
+  const firstMessageId = (0, import_react253.useRef)(void 0);
+  (0, import_react253.useEffect)(() => {
     const continuousSet = messages?.find(
       (message) => message.id === firstMessageId.current
     );
@@ -56014,24 +56024,24 @@ var useMessageSetKey = ({
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
-var import_react253 = require("react");
+var import_react254 = require("react");
 var useScrollToBottomOnNewMessage = ({
   messages,
   scrollToBottom,
   scrollToLatestMessageOnFocus
 }) => {
-  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = (0, import_react253.useState)(false);
-  const scrollToBottomIfConfigured = (0, import_react253.useRef)(void 0);
+  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = (0, import_react254.useState)(false);
+  const scrollToBottomIfConfigured = (0, import_react254.useRef)(void 0);
   scrollToBottomIfConfigured.current = (event) => {
     if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window) {
       return;
     }
     setTimeout(scrollToBottom, 100);
   };
-  (0, import_react253.useEffect)(() => {
+  (0, import_react254.useEffect)(() => {
     setNewMessagesReceivedInBackground(true);
   }, [messages]);
-  (0, import_react253.useEffect)(() => {
+  (0, import_react254.useEffect)(() => {
     const handleFocus = (event) => {
       scrollToBottomIfConfigured.current?.(event);
     };
@@ -56050,14 +56060,14 @@ var useScrollToBottomOnNewMessage = ({
 };
 
 // src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts
-var import_react254 = require("react");
+var import_react255 = require("react");
 var useUnreadMessagesNotificationVirtualized = ({
   lastRead,
   showAlways,
   unreadCount
 }) => {
-  const [show, setShow] = (0, import_react254.useState)(false);
-  const toggleShowUnreadMessagesNotification = (0, import_react254.useCallback)(
+  const [show, setShow] = (0, import_react255.useState)(false);
+  const toggleShowUnreadMessagesNotification = (0, import_react255.useCallback)(
     (renderedMessages) => {
       if (!unreadCount) return;
       const firstRenderedMessage = renderedMessages[0];
@@ -56071,7 +56081,7 @@ var useUnreadMessagesNotificationVirtualized = ({
     },
     [lastRead, showAlways, unreadCount]
   );
-  (0, import_react254.useEffect)(() => {
+  (0, import_react255.useEffect)(() => {
     if (!unreadCount) setShow(false);
   }, [unreadCount]);
   return { show, toggleShowUnreadMessagesNotification };
@@ -56080,7 +56090,7 @@ var useUnreadMessagesNotificationVirtualized = ({
 // src/components/MessageList/VirtualizedMessageListComponents.tsx
 var import_clsx64 = __toESM(require("clsx"));
 var import_lodash21 = __toESM(require("lodash.throttle"));
-var import_react255 = __toESM(require("react"));
+var import_react256 = __toESM(require("react"));
 var PREPEND_OFFSET = 10 ** 7;
 function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
   return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
@@ -56101,10 +56111,10 @@ var Item3 = ({
   context,
   ...props
 }) => {
-  if (!context) return /* @__PURE__ */ import_react255.default.createElement(import_react255.default.Fragment, null);
+  if (!context) return /* @__PURE__ */ import_react256.default.createElement(import_react256.default.Fragment, null);
   const message = context.processedMessages[calculateItemIndex(props["data-item-index"], context.numItemsPrepended)];
   const groupStyles = context.messageGroupStyles[message.id];
-  return /* @__PURE__ */ import_react255.default.createElement(
+  return /* @__PURE__ */ import_react256.default.createElement(
     "div",
     {
       ...props,
@@ -56118,13 +56128,13 @@ var Header = ({
   context
 }) => {
   const { LoadingIndicator: LoadingIndicator2 = LoadingIndicator } = useComponentContext("VirtualizedMessageListHeader");
-  return /* @__PURE__ */ import_react255.default.createElement(import_react255.default.Fragment, null, context?.head, context?.loadingMore && LoadingIndicator2 && /* @__PURE__ */ import_react255.default.createElement("div", { className: "str-chat__virtual-list__loading" }, /* @__PURE__ */ import_react255.default.createElement(LoadingIndicator2, { size: 20 })));
+  return /* @__PURE__ */ import_react256.default.createElement(import_react256.default.Fragment, null, context?.head, context?.loadingMore && LoadingIndicator2 && /* @__PURE__ */ import_react256.default.createElement("div", { className: "str-chat__virtual-list__loading" }, /* @__PURE__ */ import_react256.default.createElement(LoadingIndicator2, { size: 20 })));
 };
 var EmptyPlaceholder = ({
   context
 }) => {
   const { EmptyStateIndicator: EmptyStateIndicator2 = EmptyStateIndicator } = useComponentContext("VirtualizedMessageList");
-  return /* @__PURE__ */ import_react255.default.createElement(import_react255.default.Fragment, null, EmptyStateIndicator2 && /* @__PURE__ */ import_react255.default.createElement(EmptyStateIndicator2, { listType: context?.threadList ? "thread" : "message" }));
+  return /* @__PURE__ */ import_react256.default.createElement(import_react256.default.Fragment, null, EmptyStateIndicator2 && /* @__PURE__ */ import_react256.default.createElement(EmptyStateIndicator2, { listType: context?.threadList ? "thread" : "message" }));
 };
 var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
   const {
@@ -56160,12 +56170,12 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     return customMessageRenderer(messageList, streamMessageIndex);
   }
   const message = messageList[streamMessageIndex];
-  if (!message) return /* @__PURE__ */ import_react255.default.createElement("div", { style: { height: "1px" } });
+  if (!message) return /* @__PURE__ */ import_react256.default.createElement("div", { style: { height: "1px" } });
   if (isDateSeparatorMessage(message)) {
-    return DateSeparator2 ? /* @__PURE__ */ import_react255.default.createElement(DateSeparator2, { date: message.date, unread: message.unread }) : null;
+    return DateSeparator2 ? /* @__PURE__ */ import_react256.default.createElement(DateSeparator2, { date: message.date, unread: message.unread }) : null;
   }
   if (message.type === "system") {
-    return MessageSystem ? /* @__PURE__ */ import_react255.default.createElement(MessageSystem, { message }) : null;
+    return MessageSystem ? /* @__PURE__ */ import_react256.default.createElement(MessageSystem, { message }) : null;
   }
   const groupedByUser = shouldGroupByUser && streamMessageIndex > 0 && message.user?.id === messageList[streamMessageIndex - 1].user?.id;
   const maybePrevMessage = messageList[streamMessageIndex - 1];
@@ -56181,7 +56191,7 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : void 0,
     unreadMessageCount
   });
-  return /* @__PURE__ */ import_react255.default.createElement(import_react255.default.Fragment, null, isFirstUnreadMessage && /* @__PURE__ */ import_react255.default.createElement("div", { className: "str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react255.default.createElement(UnreadMessagesSeparator2, { unreadCount: unreadMessageCount })), /* @__PURE__ */ import_react255.default.createElement(
+  return /* @__PURE__ */ import_react256.default.createElement(import_react256.default.Fragment, null, isFirstUnreadMessage && /* @__PURE__ */ import_react256.default.createElement("div", { className: "str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react256.default.createElement(UnreadMessagesSeparator2, { unreadCount: unreadMessageCount })), /* @__PURE__ */ import_react256.default.createElement(
     Message,
     {
       additionalMessageInputProps,
@@ -56208,12 +56218,12 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
 };
 
 // src/context/VirtualizedMessageListContext.tsx
-var import_react256 = __toESM(require("react"));
-var VirtualizedMessageListContext = (0, import_react256.createContext)(void 0);
+var import_react257 = __toESM(require("react"));
+var VirtualizedMessageListContext = (0, import_react257.createContext)(void 0);
 var VirtualizedMessageListContextProvider = ({
   children,
   value
-}) => /* @__PURE__ */ import_react256.default.createElement(
+}) => /* @__PURE__ */ import_react257.default.createElement(
   VirtualizedMessageListContext.Provider,
   {
     value
@@ -56228,7 +56238,7 @@ function captureResizeObserverExceededError(e2) {
   }
 }
 function useCaptureResizeObserverExceededError() {
-  (0, import_react257.useEffect)(() => {
+  (0, import_react258.useEffect)(() => {
     window.addEventListener("error", captureResizeObserverExceededError);
     return () => {
       window.removeEventListener("error", captureResizeObserverExceededError);
@@ -56314,15 +56324,15 @@ var VirtualizedMessageListWithContext = (props) => {
   const { client, customClasses } = useChatContext(
     "VirtualizedMessageList"
   );
-  const virtuoso = (0, import_react257.useRef)(null);
-  const lastRead = (0, import_react257.useMemo)(() => channel.lastRead?.(), [channel]);
+  const virtuoso = (0, import_react258.useRef)(null);
+  const lastRead = (0, import_react258.useMemo)(() => channel.lastRead?.(), [channel]);
   const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } = useUnreadMessagesNotificationVirtualized({
     lastRead: channelUnreadUiState?.last_read,
     showAlways: !!showUnreadNotificationAlways,
     unreadCount: channelUnreadUiState?.unread_messages ?? 0
   });
   const { giphyPreviewMessage, setGiphyPreviewMessage } = useGiphyPreview(separateGiphyPreview);
-  const processedMessages = (0, import_react257.useMemo)(() => {
+  const processedMessages = (0, import_react258.useMemo)(() => {
     if (typeof messages === "undefined") {
       return [];
     }
@@ -56354,12 +56364,12 @@ var VirtualizedMessageListWithContext = (props) => {
     returnAllReadData,
     userID: client.userID
   });
-  const lastReceivedMessageId = (0, import_react257.useMemo)(
+  const lastReceivedMessageId = (0, import_react258.useMemo)(
     () => getLastReceived(processedMessages),
     [processedMessages]
   );
   const groupStylesFn = groupStyles || getGroupStyles;
-  const messageGroupStyles = (0, import_react257.useMemo)(
+  const messageGroupStyles = (0, import_react258.useMemo)(
     () => processedMessages.reduce((acc, message, i) => {
       const style = groupStylesFn(
         message,
@@ -56392,7 +56402,7 @@ var VirtualizedMessageListWithContext = (props) => {
     messageListIsThread: !!threadList,
     wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id
   });
-  const scrollToBottom = (0, import_react257.useCallback)(async () => {
+  const scrollToBottom = (0, import_react258.useCallback)(async () => {
     if (hasMoreNewer) {
       await jumpToLatestMessage();
       return;
@@ -56424,7 +56434,7 @@ var VirtualizedMessageListWithContext = (props) => {
     processedMessages,
     client.userID
   );
-  const handleItemsRendered = (0, import_react257.useMemo)(
+  const handleItemsRendered = (0, import_react258.useMemo)(
     () => makeItemsRenderedHandler([toggleShowUnreadMessagesNotification], processedMessages),
     [processedMessages, toggleShowUnreadMessagesNotification]
   );
@@ -56437,7 +56447,7 @@ var VirtualizedMessageListWithContext = (props) => {
     }
     return isAtBottom ? stickToBottomScrollBehavior : false;
   };
-  const computeItemKey2 = (0, import_react257.useCallback)(
+  const computeItemKey2 = (0, import_react258.useCallback)(
     (index3, _, { numItemsPrepended: numItemsPrepended2, processedMessages: processedMessages2 }) => processedMessages2[calculateItemIndex(index3, numItemsPrepended2)].id,
     []
   );
@@ -56454,7 +56464,7 @@ var VirtualizedMessageListWithContext = (props) => {
       loadMore?.(messageLimit);
     }
   };
-  (0, import_react257.useEffect)(() => {
+  (0, import_react258.useEffect)(() => {
     let scrollTimeout;
     if (highlightedMessageId) {
       const index3 = findMessageIndex(processedMessages, highlightedMessageId);
@@ -56468,19 +56478,20 @@ var VirtualizedMessageListWithContext = (props) => {
       clearTimeout(scrollTimeout);
     };
   }, [highlightedMessageId, processedMessages]);
+  const id = useStableId();
   if (!processedMessages) return null;
-  const dialogManagerId = threadList ? "virtualized-message-list-dialog-manager-thread" : "virtualized-message-list-dialog-manager";
-  return /* @__PURE__ */ import_react257.default.createElement(VirtualizedMessageListContextProvider, { value: { scrollToBottom } }, /* @__PURE__ */ import_react257.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react257.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react257.default.createElement(
+  const dialogManagerId = threadList ? `virtualized-message-list-dialog-manager-thread-${id}` : `virtualized-message-list-dialog-manager-${id}`;
+  return /* @__PURE__ */ import_react258.default.createElement(VirtualizedMessageListContextProvider, { value: { scrollToBottom } }, /* @__PURE__ */ import_react258.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react258.default.createElement(DialogManagerProvider, { id: dialogManagerId }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react258.default.createElement(
     UnreadMessagesNotification2,
     {
       unreadCount: channelUnreadUiState?.unread_messages
     }
-  ), /* @__PURE__ */ import_react257.default.createElement(
+  ), /* @__PURE__ */ import_react258.default.createElement(
     "div",
     {
       className: customClasses?.virtualizedMessageList || "str-chat__virtual-list"
     },
-    /* @__PURE__ */ import_react257.default.createElement(
+    /* @__PURE__ */ import_react258.default.createElement(
       import_react_virtuoso2.Virtuoso,
       {
         atBottomStateChange,
@@ -56546,7 +56557,7 @@ var VirtualizedMessageListWithContext = (props) => {
         ...defaultItemHeight ? { defaultItemHeight } : {}
       }
     )
-  )), TypingIndicator2 && /* @__PURE__ */ import_react257.default.createElement(TypingIndicator2, null)), /* @__PURE__ */ import_react257.default.createElement(
+  )), TypingIndicator2 && /* @__PURE__ */ import_react258.default.createElement(TypingIndicator2, null)), /* @__PURE__ */ import_react258.default.createElement(
     MessageListNotifications2,
     {
       hasNewMessages: newMessagesNotification,
@@ -56558,7 +56569,7 @@ var VirtualizedMessageListWithContext = (props) => {
       threadList,
       unreadCount: threadList ? void 0 : channelUnreadUiState?.unread_messages
     }
-  ), giphyPreviewMessage && /* @__PURE__ */ import_react257.default.createElement(GiphyPreviewMessage2, { message: giphyPreviewMessage }));
+  ), giphyPreviewMessage && /* @__PURE__ */ import_react258.default.createElement(GiphyPreviewMessage2, { message: giphyPreviewMessage }));
 };
 function VirtualizedMessageList(props) {
   const { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext("VirtualizedMessageList");
@@ -56576,7 +56587,7 @@ function VirtualizedMessageList(props) {
     suppressAutoscroll
   } = useChannelStateContext("VirtualizedMessageList");
   const messages = props.messages || contextMessages;
-  return /* @__PURE__ */ import_react257.default.createElement(
+  return /* @__PURE__ */ import_react258.default.createElement(
     VirtualizedMessageListWithContext,
     {
       channel,
@@ -56617,12 +56628,12 @@ var useChannelContainerClasses = ({
 };
 
 // src/components/Channel/utils.ts
-var import_nanoid10 = require("nanoid");
+var import_nanoid11 = require("nanoid");
 var makeAddNotifications = (setNotifications, notificationTimeouts) => (text7, type) => {
   if (typeof text7 !== "string" || type !== "success" && type !== "error") {
     return;
   }
-  const id = (0, import_nanoid10.nanoid)();
+  const id = (0, import_nanoid11.nanoid)();
   setNotifications((prevNotifications) => [...prevNotifications, { id, text: text7, type }]);
   const timeout = setTimeout(
     () => setNotifications(
@@ -56782,7 +56793,7 @@ var ChannelContainer = ({
     customClasses
   });
   const className = (0, import_clsx65.default)(chatClass, theme, channelClass, additionalClassName);
-  return /* @__PURE__ */ import_react258.default.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className }, children);
+  return /* @__PURE__ */ import_react259.default.createElement("div", { id: CHANNEL_CONTAINER_ID, ...props, className }, children);
 };
 var UnMemoizedChannel = (props) => {
   const {
@@ -56794,15 +56805,15 @@ var UnMemoizedChannel = (props) => {
   const { channel: contextChannel, channelsQueryState } = useChatContext("Channel");
   const channel = propsChannel || contextChannel;
   if (channelsQueryState.queryInProgress === "reload" && LoadingIndicator2) {
-    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react258.default.createElement(LoadingIndicator2, null));
+    return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react259.default.createElement(LoadingIndicator2, null));
   }
   if (channelsQueryState.error && LoadingErrorIndicator2) {
-    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react258.default.createElement(LoadingErrorIndicator2, { error: channelsQueryState.error }));
+    return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react259.default.createElement(LoadingErrorIndicator2, { error: channelsQueryState.error }));
   }
   if (!channel?.cid) {
-    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
+    return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, EmptyPlaceholder2);
   }
-  return /* @__PURE__ */ import_react258.default.createElement(ChannelInner, { ...props, channel, key: channel.cid });
+  return /* @__PURE__ */ import_react259.default.createElement(ChannelInner, { ...props, channel, key: channel.cid });
 };
 var ChannelInner = (props) => {
   const {
@@ -56828,7 +56839,7 @@ var ChannelInner = (props) => {
     optionalMessageInputProps = {},
     skipMessageDataMemoization
   } = props;
-  const channelQueryOptions = (0, import_react258.useMemo)(
+  const channelQueryOptions = (0, import_react259.useMemo)(
     () => (0, import_lodash23.default)(propChannelQueryOptions, {
       messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE }
     }),
@@ -56839,13 +56850,13 @@ var ChannelInner = (props) => {
   const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
   const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
   const thread = useThreadContext();
-  const [channelConfig, setChannelConfig] = (0, import_react258.useState)(channel.getConfig());
-  const [notifications, setNotifications] = (0, import_react258.useState)([]);
-  const [quotedMessage, setQuotedMessage] = (0, import_react258.useState)();
-  const [channelUnreadUiState, _setChannelUnreadUiState] = (0, import_react258.useState)();
-  const notificationTimeouts = (0, import_react258.useRef)([]);
-  const channelReducer = (0, import_react258.useMemo)(() => makeChannelReducer(), []);
-  const [state, dispatch] = (0, import_react258.useReducer)(
+  const [channelConfig, setChannelConfig] = (0, import_react259.useState)(channel.getConfig());
+  const [notifications, setNotifications] = (0, import_react259.useState)([]);
+  const [quotedMessage, setQuotedMessage] = (0, import_react259.useState)();
+  const [channelUnreadUiState, _setChannelUnreadUiState] = (0, import_react259.useState)();
+  const notificationTimeouts = (0, import_react259.useRef)([]);
+  const channelReducer = (0, import_react259.useMemo)(() => makeChannelReducer(), []);
+  const [state, dispatch] = (0, import_react259.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
@@ -56857,10 +56868,10 @@ var ChannelInner = (props) => {
   );
   const jumpToMessageFromSearch = useSearchFocusedMessage();
   const isMounted = useIsMounted();
-  const originalTitle = (0, import_react258.useRef)("");
-  const lastRead = (0, import_react258.useRef)(void 0);
-  const online = (0, import_react258.useRef)(true);
-  const clearHighlightedMessageTimeoutId = (0, import_react258.useRef)(
+  const originalTitle = (0, import_react259.useRef)("");
+  const lastRead = (0, import_react259.useRef)(void 0);
+  const online = (0, import_react259.useRef)(true);
+  const clearHighlightedMessageTimeoutId = (0, import_react259.useRef)(
     null
   );
   const channelCapabilitiesArray = channel.data?.own_capabilities;
@@ -56872,14 +56883,14 @@ var ChannelInner = (props) => {
       trailing: true
     }
   );
-  const setChannelUnreadUiState = (0, import_react258.useMemo)(
+  const setChannelUnreadUiState = (0, import_react259.useMemo)(
     () => (0, import_lodash24.default)(_setChannelUnreadUiState, 200, {
       leading: true,
       trailing: false
     }),
     []
   );
-  const markRead = (0, import_react258.useMemo)(
+  const markRead = (0, import_react259.useMemo)(
     () => (0, import_lodash24.default)(
       async (options) => {
         const { updateChannelUiUnreadState = true } = options ?? {};
@@ -56982,7 +56993,7 @@ var ChannelInner = (props) => {
     }
     throttledCopyStateFromChannel();
   };
-  (0, import_react258.useLayoutEffect)(() => {
+  (0, import_react259.useLayoutEffect)(() => {
     let errored = false;
     let done = false;
     (async () => {
@@ -57048,12 +57059,12 @@ var ChannelInner = (props) => {
     channelConfig?.read_events,
     initializeOnMount
   ]);
-  (0, import_react258.useEffect)(() => {
+  (0, import_react259.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_react258.useCallback)(
+  const handleHighlightedMessageChange = (0, import_react259.useCallback)(
     ({
       highlightDuration,
       highlightedMessageId
@@ -57076,15 +57087,15 @@ var ChannelInner = (props) => {
     },
     [channel, searchController]
   );
-  (0, import_react258.useEffect)(() => {
+  (0, import_react259.useEffect)(() => {
     if (!jumpToMessageFromSearch?.id) return;
     handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
   }, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
-  const addNotification = (0, import_react258.useMemo)(
+  const addNotification = (0, import_react259.useMemo)(
     () => makeAddNotifications(setNotifications, notificationTimeouts.current),
     []
   );
-  const loadMoreFinished = (0, import_react258.useCallback)(
+  const loadMoreFinished = (0, import_react259.useCallback)(
     (0, import_lodash22.default)(
       (hasMore, messages) => {
         if (!isMounted.current) return;
@@ -57145,7 +57156,7 @@ var ChannelInner = (props) => {
     });
     return queryResponse.messages.length;
   };
-  const jumpToMessage = (0, import_react258.useCallback)(
+  const jumpToMessage = (0, import_react259.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);
@@ -57157,14 +57168,14 @@ var ChannelInner = (props) => {
     },
     [channel, handleHighlightedMessageChange, loadMoreFinished]
   );
-  const jumpToLatestMessage = (0, import_react258.useCallback)(async () => {
+  const jumpToLatestMessage = (0, import_react259.useCallback)(async () => {
     await channel.state.loadMessageIntoState("latest");
     loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
     dispatch({
       type: "jumpToLatestMessage"
     });
   }, [channel, loadMoreFinished]);
-  const jumpToFirstUnreadMessage = (0, import_react258.useCallback)(
+  const jumpToFirstUnreadMessage = (0, import_react259.useCallback)(
     async (queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE, highlightDuration = DEFAULT_HIGHLIGHT_DURATION) => {
       if (!channelUnreadUiState?.unread_messages) return;
       let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
@@ -57287,7 +57298,7 @@ var ChannelInner = (props) => {
       channelUnreadUiState
     ]
   );
-  const deleteMessage = (0, import_react258.useCallback)(
+  const deleteMessage = (0, import_react259.useCallback)(
     async (message) => {
       if (!message?.id) {
         throw new Error("Cannot delete a message - missing message ID.");
@@ -57392,7 +57403,7 @@ var ChannelInner = (props) => {
       attachments,
       created_at: /* @__PURE__ */ new Date(),
       html: text7,
-      id: customMessageData?.id ?? `${client.userID}-${(0, import_nanoid11.nanoid)()}`,
+      id: customMessageData?.id ?? `${client.userID}-${(0, import_nanoid12.nanoid)()}`,
       mentioned_users,
       parent_id: parent?.id,
       reactions: [],
@@ -57444,7 +57455,7 @@ var ChannelInner = (props) => {
     event?.preventDefault();
     dispatch({ type: "closeThread" });
   };
-  const loadMoreThreadFinished = (0, import_react258.useCallback)(
+  const loadMoreThreadFinished = (0, import_react259.useCallback)(
     (0, import_lodash22.default)(
       (threadHasMore, threadMessages) => {
         dispatch({
@@ -57508,7 +57519,7 @@ var ChannelInner = (props) => {
     videoAttachmentSizeHandler: props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration,
     watcher_count: state.watcherCount
   });
-  const channelActionContextValue = (0, import_react258.useMemo)(
+  const channelActionContextValue = (0, import_react259.useMemo)(
     () => ({
       addNotification,
       closeThread,
@@ -57549,7 +57560,7 @@ var ChannelInner = (props) => {
       setChannelUnreadUiState
     ]
   );
-  const componentContextValue = (0, import_react258.useMemo)(
+  const componentContextValue = (0, import_react259.useMemo)(
     () => ({
       Attachment: props.Attachment,
       AttachmentPreviewList: props.AttachmentPreviewList,
@@ -57681,26 +57692,26 @@ var ChannelInner = (props) => {
     typing
   });
   if (state.error) {
-    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react258.default.createElement(LoadingErrorIndicator2, { error: state.error }));
+    return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react259.default.createElement(LoadingErrorIndicator2, { error: state.error }));
   }
   if (state.loading) {
-    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react258.default.createElement(LoadingIndicator2, null));
+    return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react259.default.createElement(LoadingIndicator2, null));
   }
   if (!channel.watch) {
-    return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react258.default.createElement("div", null, t2("Channel Missing")));
+    return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, null, /* @__PURE__ */ import_react259.default.createElement("div", null, t2("Channel Missing")));
   }
-  return /* @__PURE__ */ import_react258.default.createElement(ChannelContainer, { className: windowsEmojiClass }, /* @__PURE__ */ import_react258.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react258.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react258.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react258.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react258.default.createElement("div", { className: `${chatContainerClass}` }, dragAndDropWindow && /* @__PURE__ */ import_react258.default.createElement(DropzoneProvider, { ...optionalMessageInputProps }, children), !dragAndDropWindow && /* @__PURE__ */ import_react258.default.createElement(import_react258.default.Fragment, null, children)))))));
+  return /* @__PURE__ */ import_react259.default.createElement(ChannelContainer, { className: windowsEmojiClass }, /* @__PURE__ */ import_react259.default.createElement(ChannelStateProvider, { value: channelStateContextValue }, /* @__PURE__ */ import_react259.default.createElement(ChannelActionProvider, { value: channelActionContextValue }, /* @__PURE__ */ import_react259.default.createElement(WithComponents, { overrides: componentContextValue }, /* @__PURE__ */ import_react259.default.createElement(TypingProvider, { value: typingContextValue }, /* @__PURE__ */ import_react259.default.createElement("div", { className: `${chatContainerClass}` }, dragAndDropWindow && /* @__PURE__ */ import_react259.default.createElement(DropzoneProvider, { ...optionalMessageInputProps }, children), !dragAndDropWindow && /* @__PURE__ */ import_react259.default.createElement(import_react259.default.Fragment, null, children)))))));
 };
-var Channel = import_react258.default.memo(UnMemoizedChannel);
+var Channel = import_react259.default.memo(UnMemoizedChannel);
 
 // src/components/ChannelHeader/ChannelHeader.tsx
-var import_react260 = __toESM(require("react"));
+var import_react261 = __toESM(require("react"));
 
 // src/components/ChannelHeader/icons.tsx
-var import_react259 = __toESM(require("react"));
+var import_react260 = __toESM(require("react"));
 var MenuIcon2 = ({ title }) => {
   const { t: t2 } = useTranslationContext("MenuIcon");
-  return /* @__PURE__ */ import_react259.default.createElement("svg", { "data-testid": "menu-icon", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react259.default.createElement("title", null, title ?? t2("Menu")), /* @__PURE__ */ import_react259.default.createElement(
+  return /* @__PURE__ */ import_react260.default.createElement("svg", { "data-testid": "menu-icon", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react260.default.createElement("title", null, title ?? t2("Menu")), /* @__PURE__ */ import_react260.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",
@@ -57727,15 +57738,15 @@ var ChannelHeader = (props) => {
     overrideTitle
   });
   const { member_count, subtitle } = channel?.data || {};
-  return /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__channel-header" }, /* @__PURE__ */ import_react260.default.createElement(
+  return /* @__PURE__ */ import_react261.default.createElement("div", { className: "str-chat__channel-header" }, /* @__PURE__ */ import_react261.default.createElement(
     "button",
     {
       "aria-label": t2("aria/Menu"),
       className: "str-chat__header-hamburger",
       onClick: openMobileNav
     },
-    /* @__PURE__ */ import_react260.default.createElement(MenuIcon3, null)
-  ), /* @__PURE__ */ import_react260.default.createElement(
+    /* @__PURE__ */ import_react261.default.createElement(MenuIcon3, null)
+  ), /* @__PURE__ */ import_react261.default.createElement(
     Avatar2,
     {
       className: "str-chat__avatar--channel-header",
@@ -57743,36 +57754,36 @@ var ChannelHeader = (props) => {
       image: displayImage,
       name: displayTitle
     }
-  ), /* @__PURE__ */ import_react260.default.createElement("div", { className: "str-chat__channel-header-end" }, /* @__PURE__ */ import_react260.default.createElement("p", { className: "str-chat__channel-header-title" }, displayTitle, " ", live && /* @__PURE__ */ import_react260.default.createElement("span", { className: "str-chat__header-livestream-livelabel" }, t2("live"))), subtitle && /* @__PURE__ */ import_react260.default.createElement("p", { className: "str-chat__channel-header-subtitle" }, subtitle), /* @__PURE__ */ import_react260.default.createElement("p", { className: "str-chat__channel-header-info" }, !live && !!member_count && member_count > 0 && /* @__PURE__ */ import_react260.default.createElement(import_react260.default.Fragment, null, t2("{{ memberCount }} members", {
+  ), /* @__PURE__ */ import_react261.default.createElement("div", { className: "str-chat__channel-header-end" }, /* @__PURE__ */ import_react261.default.createElement("p", { className: "str-chat__channel-header-title" }, displayTitle, " ", live && /* @__PURE__ */ import_react261.default.createElement("span", { className: "str-chat__header-livestream-livelabel" }, t2("live"))), subtitle && /* @__PURE__ */ import_react261.default.createElement("p", { className: "str-chat__channel-header-subtitle" }, subtitle), /* @__PURE__ */ import_react261.default.createElement("p", { className: "str-chat__channel-header-info" }, !live && !!member_count && member_count > 0 && /* @__PURE__ */ import_react261.default.createElement(import_react261.default.Fragment, null, t2("{{ memberCount }} members", {
     memberCount: member_count
   }), ",", " "), t2("{{ watcherCount }} online", { watcherCount: watcher_count }))));
 };
 
 // src/components/Chat/Chat.tsx
-var import_react264 = __toESM(require("react"));
+var import_react265 = __toESM(require("react"));
 var import_stream_chat6 = require("stream-chat");
 
 // src/components/Chat/hooks/useChat.ts
-var import_react261 = require("react");
+var import_react262 = require("react");
 var useChat = ({
   client,
   defaultLanguage = "en",
   i18nInstance,
   initialNavOpen
 }) => {
-  const [translators, setTranslators] = (0, import_react261.useState)({
+  const [translators, setTranslators] = (0, import_react262.useState)({
     t: (key) => key,
     tDateTimeParser: defaultDateTimeParser,
     userLanguage: "en"
   });
-  const [channel, setChannel] = (0, import_react261.useState)();
-  const [mutes, setMutes] = (0, import_react261.useState)([]);
-  const [navOpen, setNavOpen] = (0, import_react261.useState)(initialNavOpen);
-  const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0, import_react261.useState)({});
+  const [channel, setChannel] = (0, import_react262.useState)();
+  const [mutes, setMutes] = (0, import_react262.useState)([]);
+  const [navOpen, setNavOpen] = (0, import_react262.useState)(initialNavOpen);
+  const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = (0, import_react262.useState)({});
   const clientMutes = client.user?.mutes || [];
   const closeMobileNav = () => setNavOpen(false);
   const openMobileNav = () => setTimeout(() => setNavOpen(true), 100);
-  const appSettings = (0, import_react261.useRef)(
+  const appSettings = (0, import_react262.useRef)(
     null
   );
   const getAppSettings = () => {
@@ -57782,9 +57793,9 @@ var useChat = ({
     appSettings.current = client.getAppSettings();
     return appSettings.current;
   };
-  (0, import_react261.useEffect)(() => {
+  (0, import_react262.useEffect)(() => {
     if (!client) return;
-    const version = "12.15.1";
+    const version = "12.15.3";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
@@ -57796,7 +57807,7 @@ var useChat = ({
       client.polls.unregisterSubscriptions();
     };
   }, [client]);
-  (0, import_react261.useEffect)(() => {
+  (0, import_react262.useEffect)(() => {
     setMutes(clientMutes);
     const handleEvent = (event) => {
       setMutes(event.me?.mutes || []);
@@ -57804,7 +57815,7 @@ var useChat = ({
     client.on("notification.mutes_updated", handleEvent);
     return () => client.off("notification.mutes_updated", handleEvent);
   }, [clientMutes?.length]);
-  (0, import_react261.useEffect)(() => {
+  (0, import_react262.useEffect)(() => {
     let userLanguage = client.user?.language;
     if (!userLanguage) {
       const browserLanguage = window.navigator.language.slice(0, 2);
@@ -57821,7 +57832,7 @@ var useChat = ({
       });
     });
   }, [i18nInstance]);
-  const setActiveChannel = (0, import_react261.useCallback)(
+  const setActiveChannel = (0, import_react262.useCallback)(
     async (activeChannel, watchers = {}, event) => {
       if (event && event.preventDefault) event.preventDefault();
       if (activeChannel && Object.keys(watchers).length) {
@@ -57832,7 +57843,7 @@ var useChat = ({
     },
     []
   );
-  (0, import_react261.useEffect)(() => {
+  (0, import_react262.useEffect)(() => {
     setLatestMessageDatesByChannels({});
   }, [client.user?.id]);
   return {
@@ -57849,7 +57860,7 @@ var useChat = ({
 };
 
 // src/components/Chat/hooks/useCreateChatContext.ts
-var import_react262 = require("react");
+var import_react263 = require("react");
 var useCreateChatContext = (value) => {
   const {
     channel,
@@ -57874,7 +57885,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_react262.useMemo)(
+  const chatContext = (0, import_react263.useMemo)(
     () => ({
       channel,
       channelsQueryState,
@@ -57909,10 +57920,10 @@ var useCreateChatContext = (value) => {
 };
 
 // src/components/Chat/hooks/useChannelsQueryState.ts
-var import_react263 = require("react");
+var import_react264 = require("react");
 var useChannelsQueryState = () => {
-  const [error, setError] = (0, import_react263.useState)(null);
-  const [queryInProgress, setQueryInProgress] = (0, import_react263.useState)("uninitialized");
+  const [error, setError] = (0, import_react264.useState)(null);
+  const [queryInProgress, setQueryInProgress] = (0, import_react264.useState)("uninitialized");
   return {
     error,
     queryInProgress,
@@ -57947,7 +57958,7 @@ var Chat = (props) => {
     translators
   } = useChat({ client, defaultLanguage, i18nInstance, initialNavOpen });
   const channelsQueryState = useChannelsQueryState();
-  const searchController = (0, import_react264.useMemo)(
+  const searchController = (0, import_react265.useMemo)(
     () => customChannelSearchController ?? new import_stream_chat6.SearchController({
       sources: [
         new import_stream_chat6.ChannelSearchSource(client),
@@ -57975,11 +57986,11 @@ var Chat = (props) => {
     useImageFlagEmojisOnWindows
   });
   if (!translators.t) return null;
-  return /* @__PURE__ */ import_react264.default.createElement(ChatProvider, { value: chatContextValue }, /* @__PURE__ */ import_react264.default.createElement(TranslationProvider, { value: translators }, children));
+  return /* @__PURE__ */ import_react265.default.createElement(ChatProvider, { value: chatContextValue }, /* @__PURE__ */ import_react265.default.createElement(TranslationProvider, { value: translators }, children));
 };
 
 // src/components/Chat/hooks/useCreateChatClient.ts
-var import_react265 = require("react");
+var import_react266 = require("react");
 var import_stream_chat7 = require("stream-chat");
 var useCreateChatClient = ({
   apiKey,
@@ -57987,13 +57998,13 @@ var useCreateChatClient = ({
   tokenOrProvider,
   userData
 }) => {
-  const [chatClient, setChatClient] = (0, import_react265.useState)(null);
-  const [cachedUserData, setCachedUserData] = (0, import_react265.useState)(userData);
+  const [chatClient, setChatClient] = (0, import_react266.useState)(null);
+  const [cachedUserData, setCachedUserData] = (0, import_react266.useState)(userData);
   if (userData.id !== cachedUserData.id) {
     setCachedUserData(userData);
   }
-  const [cachedOptions] = (0, import_react265.useState)(options);
-  (0, import_react265.useEffect)(() => {
+  const [cachedOptions] = (0, import_react266.useState)(options);
+  (0, import_react266.useEffect)(() => {
     const client = new import_stream_chat7.StreamChat(apiKey, void 0, cachedOptions);
     let didUserConnectInterrupt = false;
     const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
@@ -58011,17 +58022,17 @@ var useCreateChatClient = ({
 };
 
 // src/components/Thread/Thread.tsx
-var import_react270 = __toESM(require("react"));
+var import_react271 = __toESM(require("react"));
 var import_clsx66 = __toESM(require("clsx"));
 
 // src/components/Thread/ThreadHeader.tsx
-var import_react267 = __toESM(require("react"));
+var import_react268 = __toESM(require("react"));
 
 // src/components/Thread/icons.tsx
-var import_react266 = __toESM(require("react"));
+var import_react267 = __toESM(require("react"));
 var CloseIcon3 = ({ title }) => {
   const { t: t2 } = useTranslationContext("CloseIcon");
-  return /* @__PURE__ */ import_react266.default.createElement(
+  return /* @__PURE__ */ import_react267.default.createElement(
     "svg",
     {
       "data-testid": "close-no-outline",
@@ -58029,8 +58040,8 @@ var CloseIcon3 = ({ title }) => {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ import_react266.default.createElement("title", null, title ?? t2("Close")),
-    /* @__PURE__ */ import_react266.default.createElement(
+    /* @__PURE__ */ import_react267.default.createElement("title", null, title ?? t2("Close")),
+    /* @__PURE__ */ import_react267.default.createElement(
       "path",
       {
         d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
@@ -58050,7 +58061,7 @@ var ThreadHeader = (props) => {
     overrideImage,
     overrideTitle
   });
-  return /* @__PURE__ */ import_react267.default.createElement("div", { className: "str-chat__thread-header" }, /* @__PURE__ */ import_react267.default.createElement("div", { className: "str-chat__thread-header-details" }, /* @__PURE__ */ import_react267.default.createElement("div", { className: "str-chat__thread-header-title" }, t2("Thread")), /* @__PURE__ */ import_react267.default.createElement("div", { className: "str-chat__thread-header-subtitle" }, displayTitle)), /* @__PURE__ */ import_react267.default.createElement(
+  return /* @__PURE__ */ import_react268.default.createElement("div", { className: "str-chat__thread-header" }, /* @__PURE__ */ import_react268.default.createElement("div", { className: "str-chat__thread-header-details" }, /* @__PURE__ */ import_react268.default.createElement("div", { className: "str-chat__thread-header-title" }, t2("Thread")), /* @__PURE__ */ import_react268.default.createElement("div", { className: "str-chat__thread-header-subtitle" }, displayTitle)), /* @__PURE__ */ import_react268.default.createElement(
     "button",
     {
       "aria-label": t2("aria/Close thread"),
@@ -58058,26 +58069,26 @@ var ThreadHeader = (props) => {
       "data-testid": "close-button",
       onClick: closeThread
     },
-    /* @__PURE__ */ import_react267.default.createElement(CloseIcon3, null)
+    /* @__PURE__ */ import_react268.default.createElement(CloseIcon3, null)
   ));
 };
 
 // src/components/Thread/ThreadHead.tsx
-var import_react269 = __toESM(require("react"));
+var import_react270 = __toESM(require("react"));
 
 // src/components/Thread/ThreadStart.tsx
-var import_react268 = __toESM(require("react"));
+var import_react269 = __toESM(require("react"));
 var ThreadStart = () => {
   const { thread } = useChannelStateContext("ThreadStart");
   const { t: t2 } = useTranslationContext("ThreadStart");
   if (!thread?.reply_count) return null;
-  return /* @__PURE__ */ import_react268.default.createElement("div", { className: "str-chat__thread-start" }, t2("replyCount", { count: thread.reply_count }));
+  return /* @__PURE__ */ import_react269.default.createElement("div", { className: "str-chat__thread-start" }, t2("replyCount", { count: thread.reply_count }));
 };
 
 // src/components/Thread/ThreadHead.tsx
 var ThreadHead = (props) => {
   const { ThreadStart: ThreadStart2 = ThreadStart } = useComponentContext("ThreadHead");
-  return /* @__PURE__ */ import_react269.default.createElement("div", { className: "str-chat__parent-message-li" }, /* @__PURE__ */ import_react269.default.createElement(Message, { initialMessage: true, threadList: true, ...props }), /* @__PURE__ */ import_react269.default.createElement(ThreadStart2, null));
+  return /* @__PURE__ */ import_react270.default.createElement("div", { className: "str-chat__parent-message-li" }, /* @__PURE__ */ import_react270.default.createElement(Message, { initialMessage: true, threadList: true, ...props }), /* @__PURE__ */ import_react270.default.createElement(ThreadStart2, null));
 };
 
 // src/components/Thread/Thread.tsx
@@ -58087,7 +58098,7 @@ var Thread = (props) => {
   if (!thread && !threadInstance || channelConfig?.replies === false) return null;
   return (
     // FIXME: TS is having trouble here as at least one of the two would always be defined
-    /* @__PURE__ */ import_react270.default.createElement(
+    /* @__PURE__ */ import_react271.default.createElement(
       ThreadInner,
       {
         ...props,
@@ -58138,7 +58149,7 @@ var ThreadInner = (props) => {
   const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
   const MessageUIComponent = ThreadMessage || FallbackMessage;
   const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
-  (0, import_react270.useEffect)(() => {
+  (0, import_react271.useEffect)(() => {
     if (thread?.id && thread?.reply_count) {
       loadMoreThread();
     }
@@ -58160,7 +58171,7 @@ var ThreadInner = (props) => {
   const threadClass = customClasses?.thread || (0, import_clsx66.default)("str-chat__thread-container str-chat__thread", {
     "str-chat__thread--virtualized": virtualized
   });
-  const head = /* @__PURE__ */ import_react270.default.createElement(
+  const head = /* @__PURE__ */ import_react271.default.createElement(
     ThreadHead2,
     {
       key: messageAsThread.id,
@@ -58169,7 +58180,7 @@ var ThreadInner = (props) => {
       ...additionalParentMessageProps
     }
   );
-  return /* @__PURE__ */ import_react270.default.createElement("div", { className: threadClass }, /* @__PURE__ */ import_react270.default.createElement(ThreadHeader2, { closeThread, thread: messageAsThread }), /* @__PURE__ */ import_react270.default.createElement(
+  return /* @__PURE__ */ import_react271.default.createElement("div", { className: threadClass }, /* @__PURE__ */ import_react271.default.createElement(ThreadHeader2, { closeThread, thread: messageAsThread }), /* @__PURE__ */ import_react271.default.createElement(
     ThreadMessageList,
     {
       disableDateSeparator: !enableDateSeparator,
@@ -58181,7 +58192,7 @@ var ThreadInner = (props) => {
       ...threadProps,
       ...virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps
     }
-  ), /* @__PURE__ */ import_react270.default.createElement(
+  ), /* @__PURE__ */ import_react271.default.createElement(
     MessageInput,
     {
       focus: autoFocus,
@@ -58195,12 +58206,12 @@ var ThreadInner = (props) => {
 };
 
 // src/components/Window/Window.tsx
-var import_react271 = __toESM(require("react"));
+var import_react272 = __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_react271.default.createElement(
+  return /* @__PURE__ */ import_react272.default.createElement(
     "div",
     {
       className: (0, import_clsx67.default)("str-chat__main-panel", {
@@ -58210,7 +58221,7 @@ var UnMemoizedWindow = (props) => {
     children
   );
 };
-var Window = import_react271.default.memo(UnMemoizedWindow);
+var Window = import_react272.default.memo(UnMemoizedWindow);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ACTIONS_NOT_WORKING_IN_THREAD,