stream-chat-react 12.12.0 → 12.13.0

package/dist/index.node.cjs

@@ -45535,10 +45535,10 @@ var UnMemoizedConnectionStatus = () => {
 var ConnectionStatus = import_react80.default.memo(UnMemoizedConnectionStatus);
 
 // src/components/MessageList/GiphyPreviewMessage.tsx
-var import_react224 = __toESM(require("react"));
+var import_react225 = __toESM(require("react"));
 
 // src/components/Message/Message.tsx
-var import_react223 = __toESM(require("react"));
+var import_react224 = __toESM(require("react"));
 
 // src/components/Message/hooks/useActionHandler.ts
 var handleActionWarning = `Action handler was called, but it is missing one of its required arguments. 
@@ -49112,7 +49112,7 @@ var useMessageTextStreaming = ({
 };
 
 // src/components/Message/MessageSimple.tsx
-var import_react222 = __toESM(require("react"));
+var import_react223 = __toESM(require("react"));
 var import_clsx59 = __toESM(require("clsx"));
 
 // src/components/Message/icons.tsx
@@ -51707,19 +51707,30 @@ var PollCreationDialog = ({ close }) => {
 };
 
 // src/components/Message/QuotedMessage.tsx
-var QuotedMessage = () => {
+var QuotedMessage = ({
+  renderText: propsRenderText
+}) => {
   const { Attachment: Attachment2 = Attachment, Avatar: ContextAvatar } = useComponentContext("QuotedMessage");
   const { client } = useChatContext();
-  const { isMyMessage, message } = useMessageContext("QuotedMessage");
+  const {
+    isMyMessage,
+    message,
+    renderText: contextRenderText
+  } = useMessageContext("QuotedMessage");
   const { t: t2, userLanguage } = useTranslationContext("QuotedMessage");
   const { jumpToMessage } = useChannelActionContext("QuotedMessage");
+  const renderText2 = propsRenderText ?? contextRenderText ?? renderText;
   const Avatar2 = ContextAvatar || Avatar;
   const { quoted_message } = message;
+  const poll = quoted_message?.poll_id && client.polls.fromState(quoted_message.poll_id);
+  const quotedMessageDeleted = quoted_message?.deleted_at || quoted_message?.type === "deleted";
+  const quotedMessageText = quotedMessageDeleted ? t2("This message was deleted...") : quoted_message?.i18n?.[`${userLanguage}_text`] || quoted_message?.text;
+  const quotedMessageAttachment = quoted_message?.attachments?.length && !quotedMessageDeleted ? quoted_message.attachments[0] : null;
+  const renderedText = (0, import_react179.useMemo)(
+    () => renderText2(quotedMessageText, quoted_message?.mentioned_users),
+    [quotedMessageText, quoted_message?.mentioned_users, renderText2]
+  );
   if (!quoted_message) return null;
-  const poll = quoted_message.poll_id && client.polls.fromState(quoted_message.poll_id);
-  const quotedMessageDeleted = quoted_message.deleted_at || quoted_message.type === "deleted";
-  const quotedMessageText = quotedMessageDeleted ? t2("This message was deleted...") : quoted_message.i18n?.[`${userLanguage}_text`] || quoted_message.text;
-  const quotedMessageAttachment = quoted_message.attachments?.length && !quotedMessageDeleted ? quoted_message.attachments[0] : null;
   if (!quoted_message.poll && !quotedMessageText && !quotedMessageAttachment) return null;
   return /* @__PURE__ */ import_react179.default.createElement(import_react179.default.Fragment, null, /* @__PURE__ */ import_react179.default.createElement(
     "div",
@@ -51753,7 +51764,7 @@ var QuotedMessage = () => {
           className: "str-chat__quoted-message-bubble__text",
           "data-testid": "quoted-message-text"
         },
-        quotedMessageText
+        renderedText
       ))
     )
   ), message.attachments?.length ? /* @__PURE__ */ import_react179.default.createElement(Attachment2, { attachments: message.attachments }) : null);
@@ -53060,10 +53071,10 @@ var DefaultTriggerProvider = ({
 };
 
 // src/components/MessageInput/EditMessageForm.tsx
-var import_react212 = __toESM(require("react"));
+var import_react215 = __toESM(require("react"));
 
 // src/components/MessageInput/MessageInputFlat.tsx
-var import_react211 = __toESM(require("react"));
+var import_react214 = __toESM(require("react"));
 var import_clsx54 = __toESM(require("clsx"));
 var import_react_dropzone2 = require("react-dropzone");
 
@@ -53105,40 +53116,170 @@ var StopAIGenerationButton = ({
 };
 
 // src/components/MessageInput/QuotedMessagePreview.tsx
+var import_react209 = __toESM(require("react"));
+
+// src/components/Message/FixedHeightMessage.tsx
+var import_react207 = __toESM(require("react"));
+
+// src/components/MML/MML.tsx
 var import_react206 = __toESM(require("react"));
+var MMLReact = import_react206.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_react206.default.createElement(import_react206.Suspense, { fallback: null }, /* @__PURE__ */ import_react206.default.createElement(
+    MMLReact,
+    {
+      className: `mml-align-${align}`,
+      Loading: null,
+      onSubmit: actionHandler,
+      source,
+      Success: null,
+      theme: (theme || "").replace(" ", "-")
+    }
+  ));
+};
+
+// src/components/Message/FixedHeightMessage.tsx
+var selectColor = (number2, dark) => {
+  const hue = number2 * 137.508;
+  return `hsl(${hue},${dark ? "50%" : "85%"}, ${dark ? "75%" : "55%"})`;
+};
+var hashUserId = (userId) => {
+  const hash = userId.split("").reduce((acc, c) => {
+    acc = (acc << 5) - acc + c.charCodeAt(0);
+    return acc & acc;
+  }, 0);
+  return Math.abs(hash) / 10 ** Math.ceil(Math.log10(Math.abs(hash) + 1));
+};
+var getUserColor = (theme, userId) => selectColor(hashUserId(userId), theme.includes("dark"));
+var UnMemoizedFixedHeightMessage = (props) => {
+  const { groupedByUser: propGroupedByUser, message: propMessage } = props;
+  const { theme } = useChatContext("FixedHeightMessage");
+  const { groupedByUser: contextGroupedByUser, message: contextMessage } = useMessageContext("FixedHeightMessage");
+  const { MessageDeleted: MessageDeleted2 = MessageDeleted } = useComponentContext("FixedHeightMessage");
+  const { userLanguage } = useTranslationContext("FixedHeightMessage");
+  const groupedByUser = propGroupedByUser !== void 0 ? propGroupedByUser : contextGroupedByUser;
+  const message = propMessage || contextMessage;
+  const handleAction = useActionHandler(message);
+  const handleDelete2 = useDeleteHandler(message);
+  const role = useUserRole(message);
+  const messageTextToRender = message?.i18n?.[`${userLanguage}_text`] || message?.text;
+  const renderedText = (0, import_react207.useMemo)(
+    () => renderText(messageTextToRender, message.mentioned_users),
+    [message.mentioned_users, messageTextToRender]
+  );
+  const userId = message.user?.id || "";
+  const userColor = (0, import_react207.useMemo)(() => getUserColor(theme, userId), [userId, theme]);
+  const messageActionsHandler = (0, import_react207.useCallback)(
+    () => getMessageActions(["delete"], { canDelete: role.canDelete }),
+    [role]
+  );
+  const images = message?.attachments?.filter(({ type }) => type === "image");
+  return /* @__PURE__ */ import_react207.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_react207.default.createElement(
+      Avatar,
+      {
+        image: message.user.image,
+        name: message.user.name || message.user.id,
+        user: message.user
+      }
+    ),
+    /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__virtual-message__content" }, /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__virtual-message__meta" }, /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__virtual-message__author", style: { color: userColor } }, /* @__PURE__ */ import_react207.default.createElement("strong", null, message.user?.name || "unknown"))), message.deleted_at || message.type === "deleted" ? /* @__PURE__ */ import_react207.default.createElement(MessageDeleted2, { message }) : /* @__PURE__ */ import_react207.default.createElement(import_react207.default.Fragment, null, images && /* @__PURE__ */ import_react207.default.createElement(Gallery, { images }), /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__virtual-message__text", "data-testid": "msg-text" }, renderedText, message.mml && /* @__PURE__ */ import_react207.default.createElement(MML, { actionHandler: handleAction, align: "left", source: message.mml }), /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__virtual-message__data" }, /* @__PURE__ */ import_react207.default.createElement(
+      MessageActions,
+      {
+        customWrapperClass: "str-chat__virtual-message__actions",
+        getMessageActions: messageActionsHandler,
+        handleDelete: handleDelete2,
+        message,
+        mine: () => role.isMyMessage
+      }
+    ), /* @__PURE__ */ import_react207.default.createElement("span", { className: "str-chat__virtual-message__date" }, /* @__PURE__ */ import_react207.default.createElement(
+      MessageTimestamp,
+      {
+        customClass: "str-chat__message-simple-timestamp",
+        message
+      }
+    ))))))
+  );
+};
+var FixedHeightMessage = import_react207.default.memo(
+  UnMemoizedFixedHeightMessage
+);
+
+// src/components/Message/StreamedMessageText.tsx
+var import_react208 = __toESM(require("react"));
+var StreamedMessageText = (props) => {
+  const {
+    message: messageFromProps,
+    renderingLetterCount,
+    renderText: renderText2,
+    streamingLetterIntervalMs
+  } = props;
+  const { message: messageFromContext } = useMessageContext("StreamedMessageText");
+  const message = messageFromProps || messageFromContext;
+  const { text: text7 = "" } = message;
+  const { streamedMessageText } = useMessageTextStreaming({
+    renderingLetterCount,
+    streamingLetterIntervalMs,
+    text: text7
+  });
+  return /* @__PURE__ */ import_react208.default.createElement(
+    MessageText,
+    {
+      message: { ...message, text: streamedMessageText },
+      renderText: renderText2
+    }
+  );
+};
+
+// src/components/MessageInput/QuotedMessagePreview.tsx
 var QuotedMessagePreviewHeader = () => {
   const { setQuotedMessage } = useChannelActionContext("QuotedMessagePreview");
   const { t: t2 } = useTranslationContext("QuotedMessagePreview");
-  return /* @__PURE__ */ import_react206.default.createElement("div", { className: "str-chat__quoted-message-preview-header" }, /* @__PURE__ */ import_react206.default.createElement("div", { className: "str-chat__quoted-message-reply-to-message" }, t2("Reply to Message")), /* @__PURE__ */ import_react206.default.createElement(
+  return /* @__PURE__ */ import_react209.default.createElement("div", { className: "str-chat__quoted-message-preview-header" }, /* @__PURE__ */ import_react209.default.createElement("div", { className: "str-chat__quoted-message-reply-to-message" }, t2("Reply to Message")), /* @__PURE__ */ import_react209.default.createElement(
     "button",
     {
       "aria-label": t2("aria/Cancel Reply"),
       className: "str-chat__quoted-message-remove",
       onClick: () => setQuotedMessage(void 0)
     },
-    /* @__PURE__ */ import_react206.default.createElement(CloseIcon, null)
+    /* @__PURE__ */ import_react209.default.createElement(CloseIcon, null)
   ));
 };
 var QuotedMessagePreview = ({
-  quotedMessage
+  quotedMessage,
+  renderText: renderText2 = renderText
 }) => {
   const { client } = useChatContext();
   const { Attachment: Attachment2 = Attachment, Avatar: Avatar2 = Avatar } = useComponentContext("QuotedMessagePreview");
   const { userLanguage } = useTranslationContext("QuotedMessagePreview");
   const quotedMessageText = quotedMessage.i18n?.[`${userLanguage}_text`] || quotedMessage.text;
-  const quotedMessageAttachment = (0, import_react206.useMemo)(() => {
+  const renderedText = (0, import_react209.useMemo)(
+    () => renderText2(quotedMessageText, quotedMessage.mentioned_users),
+    [quotedMessage.mentioned_users, quotedMessageText, renderText2]
+  );
+  const quotedMessageAttachment = (0, import_react209.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_react206.default.createElement(
+  return /* @__PURE__ */ import_react209.default.createElement(
     "div",
     {
       className: "str-chat__quoted-message-preview",
       "data-testid": "quoted-message-preview"
     },
-    quotedMessage.user && /* @__PURE__ */ import_react206.default.createElement(
+    quotedMessage.user && /* @__PURE__ */ import_react209.default.createElement(
       Avatar2,
       {
         className: "str-chat__avatar--quoted-message-sender",
@@ -53147,33 +53288,33 @@ var QuotedMessagePreview = ({
         user: quotedMessage.user
       }
     ),
-    /* @__PURE__ */ import_react206.default.createElement("div", { className: "str-chat__quoted-message-bubble" }, poll ? /* @__PURE__ */ import_react206.default.createElement(Poll, { isQuoted: true, poll }) : /* @__PURE__ */ import_react206.default.createElement(import_react206.default.Fragment, null, !!quotedMessageAttachment.length && /* @__PURE__ */ import_react206.default.createElement(Attachment2, { attachments: quotedMessageAttachment, isQuoted: true }), /* @__PURE__ */ import_react206.default.createElement(
+    /* @__PURE__ */ import_react209.default.createElement("div", { className: "str-chat__quoted-message-bubble" }, poll ? /* @__PURE__ */ import_react209.default.createElement(Poll, { isQuoted: true, poll }) : /* @__PURE__ */ import_react209.default.createElement(import_react209.default.Fragment, null, !!quotedMessageAttachment.length && /* @__PURE__ */ import_react209.default.createElement(Attachment2, { attachments: quotedMessageAttachment, isQuoted: true }), /* @__PURE__ */ import_react209.default.createElement(
       "div",
       {
         className: "str-chat__quoted-message-text",
         "data-testid": "quoted-message-text"
       },
-      /* @__PURE__ */ import_react206.default.createElement("p", null, quotedMessageText)
+      renderedText
     )))
   );
 };
 
 // src/components/MessageInput/LinkPreviewList.tsx
 var import_clsx53 = __toESM(require("clsx"));
-var import_react207 = __toESM(require("react"));
+var import_react210 = __toESM(require("react"));
 var LinkPreviewList = ({ linkPreviews }) => {
   const { quotedMessage } = useChannelStateContext();
   const showLinkPreviews = linkPreviews.length > 0 && !quotedMessage;
   if (!showLinkPreviews) return null;
-  return /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__link-preview-list" }, Array.from(linkPreviews.values()).map(
-    (linkPreview) => linkPreview.state === "loaded" /* LOADED */ ? /* @__PURE__ */ import_react207.default.createElement(LinkPreviewCard, { key: linkPreview.og_scrape_url, linkPreview }) : null
+  return /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__link-preview-list" }, Array.from(linkPreviews.values()).map(
+    (linkPreview) => linkPreview.state === "loaded" /* LOADED */ ? /* @__PURE__ */ import_react210.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_react207.useState)(null);
-  return /* @__PURE__ */ import_react207.default.createElement(
+  const [referenceElement, setReferenceElement] = (0, import_react210.useState)(null);
+  return /* @__PURE__ */ import_react210.default.createElement(
     "div",
     {
       className: (0, import_clsx53.default)("str-chat__link-preview-card", {
@@ -53181,7 +53322,7 @@ var LinkPreviewCard = ({ linkPreview }) => {
       }),
       "data-testid": "link-preview-card"
     },
-    /* @__PURE__ */ import_react207.default.createElement(
+    /* @__PURE__ */ import_react210.default.createElement(
       PopperTooltip,
       {
         offset: [0, 5],
@@ -53190,7 +53331,7 @@ var LinkPreviewCard = ({ linkPreview }) => {
       },
       linkPreview.og_scrape_url
     ),
-    /* @__PURE__ */ import_react207.default.createElement(
+    /* @__PURE__ */ import_react210.default.createElement(
       "div",
       {
         className: "str-chat__link-preview-card__icon-container",
@@ -53198,23 +53339,23 @@ var LinkPreviewCard = ({ linkPreview }) => {
         onMouseLeave: handleLeave,
         ref: setReferenceElement
       },
-      /* @__PURE__ */ import_react207.default.createElement(LinkIcon, null)
+      /* @__PURE__ */ import_react210.default.createElement(LinkIcon, null)
     ),
-    /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__link-preview-card__content" }, /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__link-preview-card__content-title" }, linkPreview.title), /* @__PURE__ */ import_react207.default.createElement("div", { className: "str-chat__link-preview-card__content-description" }, linkPreview.text)),
-    /* @__PURE__ */ import_react207.default.createElement(
+    /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__link-preview-card__content" }, /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__link-preview-card__content-title" }, linkPreview.title), /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__link-preview-card__content-description" }, linkPreview.text)),
+    /* @__PURE__ */ import_react210.default.createElement(
       "button",
       {
         className: "str-chat__link-preview-card__dismiss-button",
         "data-testid": "link-preview-card-dismiss-btn",
         onClick: () => dismissLinkPreview(linkPreview)
       },
-      /* @__PURE__ */ import_react207.default.createElement(CloseIcon, null)
+      /* @__PURE__ */ import_react210.default.createElement(CloseIcon, null)
     )
   );
 };
 
 // src/components/ChatAutoComplete/ChatAutoComplete.tsx
-var import_react208 = __toESM(require("react"));
+var import_react211 = __toESM(require("react"));
 var UnMemoizedChatAutoComplete = (props) => {
   const {
     AutocompleteSuggestionItem: SuggestionItem,
@@ -53236,7 +53377,7 @@ var UnMemoizedChatAutoComplete = (props) => {
     const [firstSkin] = emoji.skins ?? [];
     return emoji.native ?? firstSkin.native;
   };
-  const updateInnerRef = (0, import_react208.useCallback)(
+  const updateInnerRef = (0, import_react211.useCallback)(
     (ref) => {
       if (innerRef) {
         innerRef.current = ref;
@@ -53244,7 +53385,7 @@ var UnMemoizedChatAutoComplete = (props) => {
     },
     [innerRef]
   );
-  return /* @__PURE__ */ import_react208.default.createElement(
+  return /* @__PURE__ */ import_react211.default.createElement(
     ReactTextareaAutocomplete,
     {
       additionalTextareaProps: messageInput.additionalTextareaProps,
@@ -53279,15 +53420,15 @@ var UnMemoizedChatAutoComplete = (props) => {
     }
   );
 };
-var ChatAutoComplete = import_react208.default.memo(
+var ChatAutoComplete = import_react211.default.memo(
   UnMemoizedChatAutoComplete
 );
 
 // src/components/AIStateIndicator/AIStateIndicator.tsx
-var import_react210 = __toESM(require("react"));
+var import_react213 = __toESM(require("react"));
 
 // src/components/AIStateIndicator/hooks/useAIState.ts
-var import_react209 = require("react");
+var import_react212 = require("react");
 var AIStates = {
   Error: "AI_STATE_ERROR",
   ExternalSources: "AI_STATE_EXTERNAL_SOURCES",
@@ -53296,8 +53437,8 @@ var AIStates = {
   Thinking: "AI_STATE_THINKING"
 };
 var useAIState = (channel) => {
-  const [aiState, setAiState] = (0, import_react209.useState)(AIStates.Idle);
-  (0, import_react209.useEffect)(() => {
+  const [aiState, setAiState] = (0, import_react212.useState)(AIStates.Idle);
+  (0, import_react212.useEffect)(() => {
     if (!channel) {
       return;
     }
@@ -53337,7 +53478,7 @@ var AIStateIndicator = ({
     [AIStates.Thinking]: t2("Thinking..."),
     [AIStates.Generating]: t2("Generating...")
   };
-  return aiState in allowedStates ? /* @__PURE__ */ import_react210.default.createElement("div", { className: "str-chat__ai-state-indicator-container" }, /* @__PURE__ */ import_react210.default.createElement("p", { className: "str-chat__ai-state-indicator-text" }, allowedStates[aiState])) : null;
+  return aiState in allowedStates ? /* @__PURE__ */ import_react213.default.createElement("div", { className: "str-chat__ai-state-indicator-container" }, /* @__PURE__ */ import_react213.default.createElement("p", { className: "str-chat__ai-state-indicator-text" }, allowedStates[aiState])) : null;
 };
 
 // src/components/MessageInput/MessageInputFlat.tsx
@@ -53382,19 +53523,19 @@ var MessageInputFlat = () => {
   const { setQuotedMessage } = useChannelActionContext("MessageInputFlat");
   const { channel } = useChatContext("MessageInputFlat");
   const { aiState } = useAIState(channel);
-  const stopGenerating = (0, import_react211.useCallback)(() => channel?.stopAIResponse(), [channel]);
+  const stopGenerating = (0, import_react214.useCallback)(() => channel?.stopAIResponse(), [channel]);
   const [
     showRecordingPermissionDeniedNotification,
     setShowRecordingPermissionDeniedNotification
-  ] = (0, import_react211.useState)(false);
-  const closePermissionDeniedNotification = (0, import_react211.useCallback)(() => {
+  ] = (0, import_react214.useState)(false);
+  const closePermissionDeniedNotification = (0, import_react214.useCallback)(() => {
     setShowRecordingPermissionDeniedNotification(false);
   }, []);
-  const failedUploadsCount = (0, import_react211.useMemo)(
+  const failedUploadsCount = (0, import_react214.useMemo)(
     () => attachments.filter((a2) => a2.localMetadata?.uploadState === "failed").length,
     [attachments]
   );
-  const accept = (0, import_react211.useMemo)(
+  const accept = (0, import_react214.useMemo)(
     () => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
       mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
       return mediaTypeMap;
@@ -53408,7 +53549,7 @@ var MessageInputFlat = () => {
     noClick: true,
     onDrop: uploadNewFiles
   });
-  (0, import_react211.useEffect)(() => {
+  (0, import_react214.useEffect)(() => {
     const handleQuotedMessageUpdate = (e2) => {
       if (e2.message?.id !== quotedMessage?.id) return;
       if (e2.type === "message.deleted") {
@@ -53424,40 +53565,40 @@ var MessageInputFlat = () => {
       channel?.off("message.updated", handleQuotedMessageUpdate);
     };
   }, [channel, quotedMessage]);
-  if (recordingController.recordingState) return /* @__PURE__ */ import_react211.default.createElement(AudioRecorder2, null);
+  if (recordingController.recordingState) return /* @__PURE__ */ import_react214.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_react211.default.createElement(import_react211.default.Fragment, null, /* @__PURE__ */ import_react211.default.createElement("div", { ...getRootProps({ className: "str-chat__message-input" }) }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react211.default.createElement(
+  return /* @__PURE__ */ import_react214.default.createElement(import_react214.default.Fragment, null, /* @__PURE__ */ import_react214.default.createElement("div", { ...getRootProps({ className: "str-chat__message-input" }) }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react214.default.createElement(
     RecordingPermissionDeniedNotification2,
     {
       onClose: closePermissionDeniedNotification,
       permissionName: "microphone" /* MIC */
     }
-  ), findAndEnqueueURLsToEnrich && /* @__PURE__ */ import_react211.default.createElement(LinkPreviewList2, { linkPreviews: Array.from(linkPreviews.values()) }), isDragActive && /* @__PURE__ */ import_react211.default.createElement(
+  ), findAndEnqueueURLsToEnrich && /* @__PURE__ */ import_react214.default.createElement(LinkPreviewList2, { linkPreviews: Array.from(linkPreviews.values()) }), isDragActive && /* @__PURE__ */ import_react214.default.createElement(
     "div",
     {
       className: (0, import_clsx54.default)("str-chat__dropzone-container", {
         "str-chat__dropzone-container--not-accepted": isDragReject
       })
     },
-    !isDragReject && /* @__PURE__ */ import_react211.default.createElement("p", null, t2("Drag your files here")),
-    isDragReject && /* @__PURE__ */ import_react211.default.createElement("p", null, t2("Some of the files will not be accepted"))
-  ), displayQuotedMessage && /* @__PURE__ */ import_react211.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react211.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__message-textarea-container" }, displayQuotedMessage && /* @__PURE__ */ import_react211.default.createElement(QuotedMessagePreview2, { quotedMessage }), isUploadEnabled && !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && /* @__PURE__ */ import_react211.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react211.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react211.default.createElement(ChatAutoComplete, null), EmojiPicker && /* @__PURE__ */ import_react211.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react211.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react211.default.createElement(import_react211.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react211.default.createElement(
+    !isDragReject && /* @__PURE__ */ import_react214.default.createElement("p", null, t2("Drag your files here")),
+    isDragReject && /* @__PURE__ */ import_react214.default.createElement("p", null, t2("Some of the files will not be accepted"))
+  ), displayQuotedMessage && /* @__PURE__ */ import_react214.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react214.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react214.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react214.default.createElement("div", { className: "str-chat__message-textarea-container" }, displayQuotedMessage && /* @__PURE__ */ import_react214.default.createElement(QuotedMessagePreview2, { quotedMessage }), isUploadEnabled && !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && /* @__PURE__ */ import_react214.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react214.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react214.default.createElement(ChatAutoComplete, null), EmojiPicker && /* @__PURE__ */ import_react214.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react214.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react214.default.createElement(import_react214.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react214.default.createElement(
     CooldownTimer2,
     {
       cooldownInterval: cooldownRemaining,
       setCooldownRemaining
     }
-  ) : /* @__PURE__ */ import_react211.default.createElement(import_react211.default.Fragment, null, /* @__PURE__ */ import_react211.default.createElement(
+  ) : /* @__PURE__ */ import_react214.default.createElement(import_react214.default.Fragment, null, /* @__PURE__ */ import_react214.default.createElement(
     SendButton2,
     {
       disabled: !numberOfUploads && !text7.length && attachments.length - failedUploadsCount === 0,
       sendMessage: handleSubmit
     }
-  ), recordingEnabled && /* @__PURE__ */ import_react211.default.createElement(
+  ), recordingEnabled && /* @__PURE__ */ import_react214.default.createElement(
     StartRecordingAudioButton2,
     {
       disabled: isRecording || !asyncMessagesMultiSendEnabled && attachments.some(
@@ -53475,22 +53616,22 @@ var MessageInputFlat = () => {
 var EditMessageForm = () => {
   const { t: t2 } = useTranslationContext("EditMessageForm");
   const { clearEditingState, handleSubmit } = useMessageInputContext("EditMessageForm");
-  (0, import_react212.useEffect)(() => {
+  (0, import_react215.useEffect)(() => {
     const onKeyDown = (event) => {
       if (event.key === "Escape") clearEditingState?.();
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [clearEditingState]);
-  return /* @__PURE__ */ import_react212.default.createElement(
+  return /* @__PURE__ */ import_react215.default.createElement(
     "form",
     {
       autoComplete: "off",
       className: "str-chat__edit-message-form",
       onSubmit: handleSubmit
     },
-    /* @__PURE__ */ import_react212.default.createElement(MessageInputFlat, null),
-    /* @__PURE__ */ import_react212.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react212.default.createElement(
+    /* @__PURE__ */ import_react215.default.createElement(MessageInputFlat, null),
+    /* @__PURE__ */ import_react215.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react215.default.createElement(
       "button",
       {
         className: "str-chat__edit-message-cancel",
@@ -53498,7 +53639,7 @@ var EditMessageForm = () => {
         onClick: clearEditingState
       },
       t2("Cancel")
-    ), /* @__PURE__ */ import_react212.default.createElement(
+    ), /* @__PURE__ */ import_react215.default.createElement(
       "button",
       {
         className: "str-chat__edit-message-send",
@@ -53511,7 +53652,7 @@ var EditMessageForm = () => {
 };
 
 // src/components/MessageInput/MessageInput.tsx
-var import_react213 = __toESM(require("react"));
+var import_react216 = __toESM(require("react"));
 var MessageInputProvider = (props) => {
   const cooldownTimerState = useCooldownTimer();
   const messageInputState = useMessageInputState(props);
@@ -53522,7 +53663,7 @@ var MessageInputProvider = (props) => {
     ...props,
     emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex
   });
-  return /* @__PURE__ */ import_react213.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
+  return /* @__PURE__ */ import_react216.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
 };
 var UnMemoizedMessageInput = (props) => {
   const { Input: PropInput } = props;
@@ -53531,57 +53672,35 @@ var UnMemoizedMessageInput = (props) => {
   const Input = PropInput || ContextInput || MessageInputFlat;
   const dialogManagerId = props.isThreadInput ? "message-input-dialog-manager-thread" : "message-input-dialog-manager";
   if (dragAndDropWindow)
-    return /* @__PURE__ */ import_react213.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react213.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react213.default.createElement(Input, null)));
-  return /* @__PURE__ */ import_react213.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react213.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react213.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react213.default.createElement(Input, null))));
+    return /* @__PURE__ */ import_react216.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react216.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react216.default.createElement(Input, null)));
+  return /* @__PURE__ */ import_react216.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react216.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react216.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react216.default.createElement(Input, null))));
 };
-var MessageInput = import_react213.default.memo(
+var MessageInput = import_react216.default.memo(
   UnMemoizedMessageInput
 );
 
-// src/components/MML/MML.tsx
-var import_react214 = __toESM(require("react"));
-var MMLReact = import_react214.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_react214.default.createElement(import_react214.Suspense, { fallback: null }, /* @__PURE__ */ import_react214.default.createElement(
-    MMLReact,
-    {
-      className: `mml-align-${align}`,
-      Loading: null,
-      onSubmit: actionHandler,
-      source,
-      Success: null,
-      theme: (theme || "").replace(" ", "-")
-    }
-  ));
-};
-
 // src/components/Reactions/ReactionsList.tsx
-var import_react218 = __toESM(require("react"));
+var import_react220 = __toESM(require("react"));
 var import_clsx56 = __toESM(require("clsx"));
 
 // src/components/Reactions/ReactionsListModal.tsx
-var import_react216 = __toESM(require("react"));
+var import_react218 = __toESM(require("react"));
 var import_clsx55 = __toESM(require("clsx"));
 
 // src/components/Reactions/hooks/useFetchReactions.ts
-var import_react215 = require("react");
+var import_react217 = require("react");
 function useFetchReactions(options) {
   const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext("useFetchReactions");
-  const [reactions, setReactions] = (0, import_react215.useState)([]);
+  const [reactions, setReactions] = (0, import_react217.useState)([]);
   const {
     handleFetchReactions: propHandleFetchReactions,
     reactionType,
     shouldFetch,
     sort
   } = options;
-  const [isLoading, setIsLoading] = (0, import_react215.useState)(shouldFetch);
+  const [isLoading, setIsLoading] = (0, import_react217.useState)(shouldFetch);
   const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
-  (0, import_react215.useEffect)(() => {
+  (0, import_react217.useEffect)(() => {
     if (!shouldFetch) {
       return;
     }
@@ -53637,24 +53756,24 @@ function ReactionsListModal({
     shouldFetch: modalProps.open,
     sort: reactionDetailsSort
   });
-  const reactionDetailsWithLegacyFallback = (0, import_react216.useMemo)(
+  const reactionDetailsWithLegacyFallback = (0, import_react218.useMemo)(
     () => legacySortReactionDetails ? [...reactionDetails].sort(legacySortReactionDetails) : reactionDetails,
     [legacySortReactionDetails, reactionDetails]
   );
-  return /* @__PURE__ */ import_react216.default.createElement(
+  return /* @__PURE__ */ import_react218.default.createElement(
     Modal,
     {
       ...modalProps,
       className: (0, import_clsx55.default)("str-chat__message-reactions-details-modal", modalProps.className)
     },
-    /* @__PURE__ */ import_react216.default.createElement(
+    /* @__PURE__ */ import_react218.default.createElement(
       "div",
       {
         className: "str-chat__message-reactions-details",
         "data-testid": "reactions-list-modal"
       },
-      /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__message-reactions-details-reaction-types" }, reactions.map(
-        ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react216.default.createElement(
+      /* @__PURE__ */ import_react218.default.createElement("div", { className: "str-chat__message-reactions-details-reaction-types" }, reactions.map(
+        ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react218.default.createElement(
           "div",
           {
             className: (0, import_clsx55.default)("str-chat__message-reactions-details-reaction-type", {
@@ -53666,25 +53785,25 @@ function ReactionsListModal({
               reactionType
             )
           },
-          /* @__PURE__ */ import_react216.default.createElement("span", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback" }, /* @__PURE__ */ import_react216.default.createElement(EmojiComponent, null)),
+          /* @__PURE__ */ import_react218.default.createElement("span", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback" }, /* @__PURE__ */ import_react218.default.createElement(EmojiComponent, null)),
           "\xA0",
-          /* @__PURE__ */ import_react216.default.createElement("span", { className: "str-chat__message-reaction-count" }, reactionCount)
+          /* @__PURE__ */ import_react218.default.createElement("span", { className: "str-chat__message-reaction-count" }, reactionCount)
         )
       )),
-      SelectedEmojiComponent && /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big" }, /* @__PURE__ */ import_react216.default.createElement(SelectedEmojiComponent, null)),
-      /* @__PURE__ */ import_react216.default.createElement(
+      SelectedEmojiComponent && /* @__PURE__ */ import_react218.default.createElement("div", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big" }, /* @__PURE__ */ import_react218.default.createElement(SelectedEmojiComponent, null)),
+      /* @__PURE__ */ import_react218.default.createElement(
         "div",
         {
           className: "str-chat__message-reactions-details-reacting-users",
           "data-testid": "all-reacting-users"
         },
-        areReactionsLoading ? /* @__PURE__ */ import_react216.default.createElement(LoadingIndicator, null) : reactionDetailsWithLegacyFallback.map(({ user }) => /* @__PURE__ */ import_react216.default.createElement(
+        areReactionsLoading ? /* @__PURE__ */ import_react218.default.createElement(LoadingIndicator, null) : reactionDetailsWithLegacyFallback.map(({ user }) => /* @__PURE__ */ import_react218.default.createElement(
           "div",
           {
             className: "str-chat__message-reactions-details-reacting-user",
             key: user?.id
           },
-          /* @__PURE__ */ import_react216.default.createElement(
+          /* @__PURE__ */ import_react218.default.createElement(
             Avatar,
             {
               className: "stream-chat__avatar--reaction",
@@ -53693,7 +53812,7 @@ function ReactionsListModal({
               name: user?.name || user?.id
             }
           ),
-          /* @__PURE__ */ import_react216.default.createElement(
+          /* @__PURE__ */ import_react218.default.createElement(
             "span",
             {
               className: "str-chat__user-item--name",
@@ -53708,7 +53827,7 @@ function ReactionsListModal({
 }
 
 // src/components/Reactions/hooks/useProcessReactions.tsx
-var import_react217 = require("react");
+var import_react219 = require("react");
 var defaultReactionsSort = (a2, b) => {
   if (a2.firstReactionAt && b.firstReactionAt) {
     return +a2.firstReactionAt - +b.firstReactionAt;
@@ -53730,19 +53849,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_react217.useCallback)(
+  const isOwnReaction = (0, import_react219.useCallback)(
     (reactionType) => ownReactions?.some((reaction) => reaction.type === reactionType) ?? false,
     [ownReactions]
   );
-  const getEmojiByReactionType = (0, import_react217.useCallback)(
+  const getEmojiByReactionType = (0, import_react219.useCallback)(
     (reactionType) => reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null,
     [reactionOptions]
   );
-  const isSupportedReaction = (0, import_react217.useCallback)(
+  const isSupportedReaction = (0, import_react219.useCallback)(
     (reactionType) => reactionOptions.some((reactionOption) => reactionOption.type === reactionType),
     [reactionOptions]
   );
-  const getLatestReactedUserNames = (0, import_react217.useCallback)(
+  const getLatestReactedUserNames = (0, import_react219.useCallback)(
     (reactionType) => latestReactions?.flatMap((reaction) => {
       if (reactionType && reactionType === reaction.type) {
         const username = reaction.user?.name || reaction.user?.id;
@@ -53752,7 +53871,7 @@ var useProcessReactions = (params) => {
     }) ?? [],
     [latestReactions]
   );
-  const existingReactions = (0, import_react217.useMemo)(() => {
+  const existingReactions = (0, import_react219.useMemo)(() => {
     if (!reactionGroups) {
       return [];
     }
@@ -53786,7 +53905,7 @@ var useProcessReactions = (params) => {
     sortReactions
   ]);
   const hasReactions = existingReactions.length > 0;
-  const totalReactionCount = (0, import_react217.useMemo)(
+  const totalReactionCount = (0, import_react219.useMemo)(
     () => existingReactions.reduce((total, { reactionCount }) => total + reactionCount, 0),
     [existingReactions]
   );
@@ -53808,7 +53927,7 @@ var UnMemoizedReactionsList = (props) => {
     ...rest
   } = props;
   const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
-  const [selectedReactionType, setSelectedReactionType] = (0, import_react218.useState)(null);
+  const [selectedReactionType, setSelectedReactionType] = (0, import_react220.useState)(null);
   const { t: t2 } = useTranslationContext("ReactionsList");
   const { ReactionsListModal: ReactionsListModal2 = ReactionsListModal } = useComponentContext();
   const handleReactionButtonClick = (reactionType) => {
@@ -53818,7 +53937,7 @@ var UnMemoizedReactionsList = (props) => {
     setSelectedReactionType(reactionType);
   };
   if (!hasReactions) return null;
-  return /* @__PURE__ */ import_react218.default.createElement(import_react218.default.Fragment, null, /* @__PURE__ */ import_react218.default.createElement(
+  return /* @__PURE__ */ import_react220.default.createElement(import_react220.default.Fragment, null, /* @__PURE__ */ import_react220.default.createElement(
     "div",
     {
       "aria-label": t2("aria/Reaction list"),
@@ -53829,8 +53948,8 @@ var UnMemoizedReactionsList = (props) => {
       "data-testid": "reaction-list",
       role: "figure"
     },
-    /* @__PURE__ */ import_react218.default.createElement("ul", { className: "str-chat__message-reactions" }, existingReactions.map(
-      ({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react218.default.createElement(
+    /* @__PURE__ */ import_react220.default.createElement("ul", { className: "str-chat__message-reactions" }, existingReactions.map(
+      ({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react220.default.createElement(
         "li",
         {
           className: (0, import_clsx56.default)("str-chat__message-reaction", {
@@ -53838,7 +53957,7 @@ var UnMemoizedReactionsList = (props) => {
           }),
           key: reactionType
         },
-        /* @__PURE__ */ import_react218.default.createElement(
+        /* @__PURE__ */ import_react220.default.createElement(
           "button",
           {
             "aria-label": `Reactions: ${reactionType}`,
@@ -53846,9 +53965,9 @@ var UnMemoizedReactionsList = (props) => {
             onClick: () => handleReactionButtonClick(reactionType),
             type: "button"
           },
-          /* @__PURE__ */ import_react218.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react218.default.createElement(EmojiComponent, null)),
+          /* @__PURE__ */ import_react220.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react220.default.createElement(EmojiComponent, null)),
           "\xA0",
-          /* @__PURE__ */ import_react218.default.createElement(
+          /* @__PURE__ */ import_react220.default.createElement(
             "span",
             {
               className: "str-chat__message-reaction-count",
@@ -53858,8 +53977,8 @@ var UnMemoizedReactionsList = (props) => {
           )
         )
       )
-    ), /* @__PURE__ */ import_react218.default.createElement("li", null, /* @__PURE__ */ import_react218.default.createElement("span", { className: "str-chat__reaction-list--counter" }, totalReactionCount)))
-  ), selectedReactionType !== null && /* @__PURE__ */ import_react218.default.createElement(
+    ), /* @__PURE__ */ import_react220.default.createElement("li", null, /* @__PURE__ */ import_react220.default.createElement("span", { className: "str-chat__reaction-list--counter" }, totalReactionCount)))
+  ), selectedReactionType !== null && /* @__PURE__ */ import_react220.default.createElement(
     ReactionsListModal2,
     {
       handleFetchReactions,
@@ -53872,12 +53991,12 @@ var UnMemoizedReactionsList = (props) => {
     }
   ));
 };
-var ReactionsList = import_react218.default.memo(
+var ReactionsList = import_react220.default.memo(
   UnMemoizedReactionsList
 );
 
 // src/components/Reactions/SimpleReactionsList.tsx
-var import_react219 = __toESM(require("react"));
+var import_react221 = __toESM(require("react"));
 var import_clsx57 = __toESM(require("clsx"));
 var WithTooltip = ({
   children,
@@ -53885,12 +54004,12 @@ var WithTooltip = ({
   onMouseLeave,
   title
 }) => {
-  const [referenceElement, setReferenceElement] = (0, import_react219.useState)(null);
+  const [referenceElement, setReferenceElement] = (0, import_react221.useState)(null);
   const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers({
     onMouseEnter,
     onMouseLeave
   });
-  return /* @__PURE__ */ import_react219.default.createElement(import_react219.default.Fragment, null, /* @__PURE__ */ import_react219.default.createElement(PopperTooltip, { referenceElement, visible: tooltipVisible }, title), /* @__PURE__ */ import_react219.default.createElement(
+  return /* @__PURE__ */ import_react221.default.createElement(import_react221.default.Fragment, null, /* @__PURE__ */ import_react221.default.createElement(PopperTooltip, { referenceElement, visible: tooltipVisible }, title), /* @__PURE__ */ import_react221.default.createElement(
     "span",
     {
       onMouseEnter: handleEnter,
@@ -53906,7 +54025,7 @@ var UnMemoizedSimpleReactionsList = (props) => {
   const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
   const handleReaction = propHandleReaction || contextHandleReaction;
   if (!hasReactions) return null;
-  return /* @__PURE__ */ import_react219.default.createElement("div", { className: "str-chat__message-reactions-container" }, /* @__PURE__ */ import_react219.default.createElement(
+  return /* @__PURE__ */ import_react221.default.createElement("div", { className: "str-chat__message-reactions-container" }, /* @__PURE__ */ import_react221.default.createElement(
     "ul",
     {
       className: "str-chat__simple-reactions-list str-chat__message-reactions",
@@ -53915,7 +54034,7 @@ var UnMemoizedSimpleReactionsList = (props) => {
     existingReactions.map(
       ({ EmojiComponent, isOwnReaction, latestReactedUserNames, reactionType }) => {
         const tooltipContent = latestReactedUserNames.join(", ");
-        return EmojiComponent && /* @__PURE__ */ import_react219.default.createElement(
+        return EmojiComponent && /* @__PURE__ */ import_react221.default.createElement(
           "li",
           {
             className: (0, import_clsx57.default)("str-chat__simple-reactions-list-item", {
@@ -53925,19 +54044,19 @@ var UnMemoizedSimpleReactionsList = (props) => {
             onClick: (event) => handleReaction(reactionType, event),
             onKeyUp: (event) => handleReaction(reactionType, event)
           },
-          /* @__PURE__ */ import_react219.default.createElement(WithTooltip, { title: tooltipContent }, /* @__PURE__ */ import_react219.default.createElement(EmojiComponent, null))
+          /* @__PURE__ */ import_react221.default.createElement(WithTooltip, { title: tooltipContent }, /* @__PURE__ */ import_react221.default.createElement(EmojiComponent, null))
         );
       }
     ),
-    /* @__PURE__ */ import_react219.default.createElement("li", { className: "str-chat__simple-reactions-list-item--last-number" }, totalReactionCount)
+    /* @__PURE__ */ import_react221.default.createElement("li", { className: "str-chat__simple-reactions-list-item--last-number" }, totalReactionCount)
   ));
 };
-var SimpleReactionsList = import_react219.default.memo(
+var SimpleReactionsList = import_react221.default.memo(
   UnMemoizedSimpleReactionsList
 );
 
 // src/components/Message/MessageEditedTimestamp.tsx
-var import_react220 = __toESM(require("react"));
+var import_react222 = __toESM(require("react"));
 var import_clsx58 = __toESM(require("clsx"));
 function MessageEditedTimestamp({
   message: propMessage,
@@ -53953,7 +54072,7 @@ function MessageEditedTimestamp({
   if (!isMessageEdited(message)) {
     return null;
   }
-  return /* @__PURE__ */ import_react220.default.createElement(
+  return /* @__PURE__ */ import_react222.default.createElement(
     "div",
     {
       className: (0, import_clsx58.default)(
@@ -53964,36 +54083,10 @@ function MessageEditedTimestamp({
     },
     t2("Edited"),
     " ",
-    /* @__PURE__ */ import_react220.default.createElement(Timestamp2, { timestamp: message.message_text_updated_at, ...timestampProps })
+    /* @__PURE__ */ import_react222.default.createElement(Timestamp2, { timestamp: message.message_text_updated_at, ...timestampProps })
   );
 }
 
-// src/components/Message/StreamedMessageText.tsx
-var import_react221 = __toESM(require("react"));
-var StreamedMessageText = (props) => {
-  const {
-    message: messageFromProps,
-    renderingLetterCount,
-    renderText: renderText2,
-    streamingLetterIntervalMs
-  } = props;
-  const { message: messageFromContext } = useMessageContext("StreamedMessageText");
-  const message = messageFromProps || messageFromContext;
-  const { text: text7 = "" } = message;
-  const { streamedMessageText } = useMessageTextStreaming({
-    renderingLetterCount,
-    streamingLetterIntervalMs,
-    text: text7
-  });
-  return /* @__PURE__ */ import_react221.default.createElement(
-    MessageText,
-    {
-      message: { ...message, text: streamedMessageText },
-      renderText: renderText2
-    }
-  );
-};
-
 // src/components/Message/MessageSimple.tsx
 var MessageSimpleWithContext = (props) => {
   const {
@@ -54017,8 +54110,8 @@ var MessageSimpleWithContext = (props) => {
   } = props;
   const { client } = useChatContext("MessageSimple");
   const { t: t2 } = useTranslationContext("MessageSimple");
-  const [isBounceDialogOpen, setIsBounceDialogOpen] = (0, import_react222.useState)(false);
-  const [isEditedTimestampOpen, setEditedTimestampOpen] = (0, import_react222.useState)(false);
+  const [isBounceDialogOpen, setIsBounceDialogOpen] = (0, import_react223.useState)(false);
+  const [isEditedTimestampOpen, setEditedTimestampOpen] = (0, import_react223.useState)(false);
   const {
     Attachment: Attachment2 = Attachment,
     Avatar: Avatar2 = Avatar,
@@ -54038,7 +54131,7 @@ var MessageSimpleWithContext = (props) => {
   } = useComponentContext("MessageSimple");
   const hasAttachment = messageHasAttachments(message);
   const hasReactions = messageHasReactions(message);
-  const isAIGenerated = (0, import_react222.useMemo)(
+  const isAIGenerated = (0, import_react223.useMemo)(
     () => isMessageAIGenerated?.(message),
     [isMessageAIGenerated, message]
   );
@@ -54046,7 +54139,7 @@ var MessageSimpleWithContext = (props) => {
     return null;
   }
   if (message.deleted_at || message.type === "deleted") {
-    return /* @__PURE__ */ import_react222.default.createElement(MessageDeleted2, { message });
+    return /* @__PURE__ */ import_react223.default.createElement(MessageDeleted2, { message });
   }
   const showMetadata = !groupedByUser || endOfGroup;
   const showReplyCountButton = !threadList && !!message.reply_count;
@@ -54080,14 +54173,14 @@ var MessageSimpleWithContext = (props) => {
     }
   );
   const poll = message.poll_id && client.polls.fromState(message.poll_id);
-  return /* @__PURE__ */ import_react222.default.createElement(import_react222.default.Fragment, null, editing && /* @__PURE__ */ import_react222.default.createElement(
+  return /* @__PURE__ */ import_react223.default.createElement(import_react223.default.Fragment, null, editing && /* @__PURE__ */ import_react223.default.createElement(
     Modal,
     {
       className: "str-chat__edit-message-modal",
       onClose: clearEditingState,
       open: editing
     },
-    /* @__PURE__ */ import_react222.default.createElement(
+    /* @__PURE__ */ import_react223.default.createElement(
       MessageInput,
       {
         clearEditingState,
@@ -54098,14 +54191,14 @@ var MessageSimpleWithContext = (props) => {
         ...additionalMessageInputProps
       }
     )
-  ), isBounceDialogOpen && /* @__PURE__ */ import_react222.default.createElement(
+  ), isBounceDialogOpen && /* @__PURE__ */ import_react223.default.createElement(
     MessageBounceModal,
     {
       MessageBouncePrompt: MessageBouncePrompt2,
       onClose: () => setIsBounceDialogOpen(false),
       open: isBounceDialogOpen
     }
-  ), /* @__PURE__ */ import_react222.default.createElement("div", { className: rootClassName2, key: message.id }, PinIndicator2 && /* @__PURE__ */ import_react222.default.createElement(PinIndicator2, null), message.user && /* @__PURE__ */ import_react222.default.createElement(
+  ), /* @__PURE__ */ import_react223.default.createElement("div", { className: rootClassName2, key: message.id }, PinIndicator2 && /* @__PURE__ */ import_react223.default.createElement(PinIndicator2, null), message.user && /* @__PURE__ */ import_react223.default.createElement(
     Avatar2,
     {
       image: message.user.image,
@@ -54114,7 +54207,7 @@ var MessageSimpleWithContext = (props) => {
       onMouseOver: onUserHover,
       user: message.user
     }
-  ), /* @__PURE__ */ import_react222.default.createElement(
+  ), /* @__PURE__ */ import_react223.default.createElement(
     "div",
     {
       className: (0, import_clsx59.default)("str-chat__message-inner", {
@@ -54124,37 +54217,37 @@ var MessageSimpleWithContext = (props) => {
       onClick: handleClick,
       onKeyUp: handleClick
     },
-    /* @__PURE__ */ import_react222.default.createElement(MessageActions2, null),
-    /* @__PURE__ */ import_react222.default.createElement("div", { className: "str-chat__message-reactions-host" }, hasReactions && /* @__PURE__ */ import_react222.default.createElement(ReactionsList2, { reverse: true })),
-    /* @__PURE__ */ import_react222.default.createElement("div", { className: "str-chat__message-bubble" }, poll && /* @__PURE__ */ import_react222.default.createElement(Poll, { poll }), message.attachments?.length && !message.quoted_message ? /* @__PURE__ */ import_react222.default.createElement(
+    /* @__PURE__ */ import_react223.default.createElement(MessageActions2, null),
+    /* @__PURE__ */ import_react223.default.createElement("div", { className: "str-chat__message-reactions-host" }, hasReactions && /* @__PURE__ */ import_react223.default.createElement(ReactionsList2, { reverse: true })),
+    /* @__PURE__ */ import_react223.default.createElement("div", { className: "str-chat__message-bubble" }, poll && /* @__PURE__ */ import_react223.default.createElement(Poll, { poll }), message.attachments?.length && !message.quoted_message ? /* @__PURE__ */ import_react223.default.createElement(
       Attachment2,
       {
         actionHandler: handleAction,
         attachments: message.attachments
       }
-    ) : null, isAIGenerated ? /* @__PURE__ */ import_react222.default.createElement(StreamedMessageText2, { message, renderText: renderText2 }) : /* @__PURE__ */ import_react222.default.createElement(MessageText, { message, renderText: renderText2 }), message.mml && /* @__PURE__ */ import_react222.default.createElement(
+    ) : null, isAIGenerated ? /* @__PURE__ */ import_react223.default.createElement(StreamedMessageText2, { message, renderText: renderText2 }) : /* @__PURE__ */ import_react223.default.createElement(MessageText, { message, renderText: renderText2 }), message.mml && /* @__PURE__ */ import_react223.default.createElement(
       MML,
       {
         actionHandler: handleAction,
         align: isMyMessage() ? "right" : "left",
         source: message.mml
       }
-    ), /* @__PURE__ */ import_react222.default.createElement(MessageErrorIcon, null))
-  ), showReplyCountButton && /* @__PURE__ */ import_react222.default.createElement(
+    ), /* @__PURE__ */ import_react223.default.createElement(MessageErrorIcon, null))
+  ), showReplyCountButton && /* @__PURE__ */ import_react223.default.createElement(
     MessageRepliesCountButton2,
     {
       onClick: handleOpenThread,
       reply_count: message.reply_count
     }
-  ), showMetadata && /* @__PURE__ */ import_react222.default.createElement("div", { className: "str-chat__message-metadata" }, /* @__PURE__ */ import_react222.default.createElement(MessageStatus2, null), !isMyMessage() && !!message.user && /* @__PURE__ */ import_react222.default.createElement("span", { className: "str-chat__message-simple-name" }, message.user.name || message.user.id), /* @__PURE__ */ import_react222.default.createElement(MessageTimestamp2, { customClass: "str-chat__message-simple-timestamp" }), isEdited && /* @__PURE__ */ import_react222.default.createElement("span", { className: "str-chat__mesage-simple-edited" }, t2("Edited")), isEdited && /* @__PURE__ */ import_react222.default.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))));
+  ), showMetadata && /* @__PURE__ */ import_react223.default.createElement("div", { className: "str-chat__message-metadata" }, /* @__PURE__ */ import_react223.default.createElement(MessageStatus2, null), !isMyMessage() && !!message.user && /* @__PURE__ */ import_react223.default.createElement("span", { className: "str-chat__message-simple-name" }, message.user.name || message.user.id), /* @__PURE__ */ import_react223.default.createElement(MessageTimestamp2, { customClass: "str-chat__message-simple-timestamp" }), isEdited && /* @__PURE__ */ import_react223.default.createElement("span", { className: "str-chat__mesage-simple-edited" }, t2("Edited")), isEdited && /* @__PURE__ */ import_react223.default.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))));
 };
-var MemoizedMessageSimple = import_react222.default.memo(
+var MemoizedMessageSimple = import_react223.default.memo(
   MessageSimpleWithContext,
   areMessageUIPropsEqual
 );
 var MessageSimple = (props) => {
   const messageContext = useMessageContext("MessageSimple");
-  return /* @__PURE__ */ import_react222.default.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
+  return /* @__PURE__ */ import_react223.default.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
 };
 
 // src/components/Message/Message.tsx
@@ -54190,11 +54283,11 @@ var MessageWithContext = (props) => {
     canReply,
     isMyMessage
   } = userRoles;
-  const messageIsUnread = (0, import_react223.useMemo)(
+  const messageIsUnread = (0, import_react224.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_react223.useCallback)(
+  const messageActionsHandler = (0, import_react224.useCallback)(
     () => getMessageActions(messageActions, {
       canDelete,
       canEdit,
@@ -54248,9 +54341,9 @@ var MessageWithContext = (props) => {
     onUserHover,
     setEditingState: setEdit
   };
-  return /* @__PURE__ */ import_react223.default.createElement(MessageProvider, { value: messageContextValue }, /* @__PURE__ */ import_react223.default.createElement(MessageUIComponent, { groupedByUser }));
+  return /* @__PURE__ */ import_react224.default.createElement(MessageProvider, { value: messageContextValue }, /* @__PURE__ */ import_react224.default.createElement(MessageUIComponent, { groupedByUser }));
 };
-var MemoizedMessage = import_react223.default.memo(
+var MemoizedMessage = import_react224.default.memo(
   MessageWithContext,
   areMessagePropsEqual
 );
@@ -54317,7 +54410,7 @@ var Message = (props) => {
     notify: addNotification
   });
   const highlighted = highlightedMessageId === message.id;
-  return /* @__PURE__ */ import_react223.default.createElement(
+  return /* @__PURE__ */ import_react224.default.createElement(
     MemoizedMessage,
     {
       additionalMessageInputProps: props.additionalMessageInputProps,
@@ -54369,7 +54462,7 @@ var Message = (props) => {
 // src/components/MessageList/GiphyPreviewMessage.tsx
 var GiphyPreviewMessage = (props) => {
   const { message } = props;
-  return /* @__PURE__ */ import_react224.default.createElement("div", { className: "giphy-preview-message" }, /* @__PURE__ */ import_react224.default.createElement(Message, { message }));
+  return /* @__PURE__ */ import_react225.default.createElement("div", { className: "giphy-preview-message" }, /* @__PURE__ */ import_react225.default.createElement(Message, { message }));
 };
 
 // src/components/MessageList/MessageList.tsx
@@ -54377,7 +54470,7 @@ var import_clsx61 = __toESM(require("clsx"));
 var import_react244 = __toESM(require("react"));
 
 // src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
-var import_react225 = require("react");
+var import_react226 = require("react");
 
 // src/components/MessageList/utils.ts
 var import_nanoid9 = require("nanoid");
@@ -54560,6 +54653,7 @@ var getIsFirstUnreadMessage = ({
   previousMessage,
   unreadMessageCount = 0
 }) => {
+  if (message.parent_id) return false;
   const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
   const lastReadTimestamp = lastReadDate?.getTime();
   const messageIsUnread = !!createdAtTimestamp && !!lastReadTimestamp && createdAtTimestamp > lastReadTimestamp;
@@ -54583,7 +54677,7 @@ var useEnrichedMessages = (args) => {
   } = args;
   const { client } = useChatContext("useEnrichedMessages");
   const { HeaderComponent } = useComponentContext("useEnrichedMessages");
-  const lastRead = (0, import_react225.useMemo)(() => channel.lastRead?.(), [channel]);
+  const lastRead = (0, import_react226.useMemo)(() => channel.lastRead?.(), [channel]);
   const enableDateSeparator = !disableDateSeparator;
   let messagesWithDates = !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator ? messages : processMessages({
     enableDateSeparator,
@@ -54598,7 +54692,7 @@ var useEnrichedMessages = (args) => {
     messagesWithDates = insertIntro(messagesWithDates, headerPosition);
   }
   const groupStylesFn = groupStyles || getGroupStyles;
-  const messageGroupStyles = (0, import_react225.useMemo)(
+  const messageGroupStyles = (0, import_react226.useMemo)(
     () => messagesWithDates.reduce((acc, message, i) => {
       const style = groupStylesFn(
         message,
@@ -54617,13 +54711,13 @@ var useEnrichedMessages = (args) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useMessageListElements.tsx
-var import_react227 = require("react");
+var import_react228 = require("react");
 
 // src/components/MessageList/hooks/useLastReadData.ts
-var import_react226 = require("react");
+var import_react227 = require("react");
 var useLastReadData = (props) => {
   const { messages, read, returnAllReadData, userID } = props;
-  return (0, import_react226.useMemo)(
+  return (0, import_react227.useMemo)(
     () => getReadStates(
       messages.filter(({ user }) => user?.id === userID),
       read,
@@ -54655,11 +54749,11 @@ var useMessageListElements = (props) => {
     returnAllReadData,
     userID: client.userID
   });
-  const lastReceivedMessageId = (0, import_react227.useMemo)(
+  const lastReceivedMessageId = (0, import_react228.useMemo)(
     () => getLastReceived(enrichedMessages),
     [enrichedMessages]
   );
-  const elements = (0, import_react227.useMemo)(
+  const elements = (0, import_react228.useMemo)(
     () => renderMessages({
       channelUnreadUiState,
       components,
@@ -54686,7 +54780,7 @@ var useMessageListElements = (props) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts
-var import_react228 = require("react");
+var import_react229 = require("react");
 function useMessageListScrollManager(params) {
   const {
     loadMoreScrollThreshold,
@@ -54697,13 +54791,13 @@ function useMessageListScrollManager(params) {
     showNewMessages
   } = params;
   const { client } = useChatContext("useMessageListScrollManager");
-  const measures = (0, import_react228.useRef)({
+  const measures = (0, import_react229.useRef)({
     offsetHeight: 0,
     scrollHeight: 0
   });
-  const messages = (0, import_react228.useRef)(void 0);
-  const scrollTop = (0, import_react228.useRef)(0);
-  (0, import_react228.useLayoutEffect)(() => {
+  const messages = (0, import_react229.useRef)(void 0);
+  const scrollTop = (0, import_react229.useRef)(0);
+  (0, import_react229.useLayoutEffect)(() => {
     const prevMeasures = measures.current;
     const prevMessages = messages.current;
     const newMessages = params.messages;
@@ -54743,7 +54837,7 @@ function useMessageListScrollManager(params) {
 }
 
 // src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx
-var import_react229 = require("react");
+var import_react230 = require("react");
 var useScrollLocationLogic = (params) => {
   const {
     hasMoreNewer,
@@ -54753,12 +54847,12 @@ var useScrollLocationLogic = (params) => {
     scrolledUpThreshold = 200,
     suppressAutoscroll
   } = params;
-  const [hasNewMessages, setHasNewMessages] = (0, import_react229.useState)(false);
-  const [wrapperRect, setWrapperRect] = (0, import_react229.useState)();
-  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react229.useState)(true);
-  const closeToBottom = (0, import_react229.useRef)(false);
-  const closeToTop = (0, import_react229.useRef)(false);
-  const scrollToBottom = (0, import_react229.useCallback)(() => {
+  const [hasNewMessages, setHasNewMessages] = (0, import_react230.useState)(false);
+  const [wrapperRect, setWrapperRect] = (0, import_react230.useState)();
+  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react230.useState)(true);
+  const closeToBottom = (0, import_react230.useRef)(false);
+  const closeToTop = (0, import_react230.useRef)(false);
+  const scrollToBottom = (0, import_react230.useCallback)(() => {
     if (!listElement?.scrollTo || hasMoreNewer || suppressAutoscroll) {
       return;
     }
@@ -54767,7 +54861,7 @@ var useScrollLocationLogic = (params) => {
     });
     setHasNewMessages(false);
   }, [listElement, hasMoreNewer, suppressAutoscroll]);
-  (0, import_react229.useLayoutEffect)(() => {
+  (0, import_react230.useLayoutEffect)(() => {
     if (listElement) {
       setWrapperRect(listElement.getBoundingClientRect());
       scrollToBottom();
@@ -54787,7 +54881,7 @@ var useScrollLocationLogic = (params) => {
     scrollToBottom,
     showNewMessages: () => setHasNewMessages(true)
   });
-  const onScroll = (0, import_react229.useCallback)(
+  const onScroll = (0, import_react230.useCallback)(
     (event) => {
       const element3 = event.target;
       const scrollTop = element3.scrollTop;
@@ -54818,22 +54912,22 @@ var useScrollLocationLogic = (params) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts
-var import_react232 = require("react");
+var import_react233 = require("react");
 
 // src/components/MessageList/MessageListMainPanel.tsx
-var import_react230 = __toESM(require("react"));
+var import_react231 = __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_react230.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
+var MessageListMainPanel = ({ children }) => /* @__PURE__ */ import_react231.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
 
 // src/components/MessageList/UnreadMessagesSeparator.tsx
-var import_react231 = __toESM(require("react"));
+var import_react232 = __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_react231.default.createElement(
+  return /* @__PURE__ */ import_react232.default.createElement(
     "div",
     {
       className: UNREAD_MESSAGE_SEPARATOR_CLASS,
@@ -54859,10 +54953,10 @@ var useUnreadMessagesNotification = ({
   unreadCount
 }) => {
   const { messages } = useChannelStateContext("UnreadMessagesNotification");
-  const [show, setShow] = (0, import_react232.useState)(false);
-  const isScrolledAboveTargetTop = (0, import_react232.useRef)(false);
+  const [show, setShow] = (0, import_react233.useState)(false);
+  const isScrolledAboveTargetTop = (0, import_react233.useRef)(false);
   const intersectionObserverIsSupported = typeof IntersectionObserver !== "undefined";
-  (0, import_react232.useEffect)(() => {
+  (0, import_react233.useEffect)(() => {
     if (!(unreadCount && intersectionObserverIsSupported)) {
       setShow(false);
       return;
@@ -54909,7 +55003,7 @@ var useUnreadMessagesNotification = ({
     showAlways,
     unreadCount
   ]);
-  (0, import_react232.useEffect)(() => {
+  (0, import_react233.useEffect)(() => {
     if (unreadCount && isMessageListScrolledToBottom && isScrolledAboveTargetTop.current) {
       setShow(true);
       isScrolledAboveTargetTop.current = false;
@@ -54919,7 +55013,7 @@ var useUnreadMessagesNotification = ({
 };
 
 // src/components/MessageList/hooks/useMarkRead.ts
-var import_react233 = require("react");
+var import_react234 = 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;
@@ -54933,7 +55027,7 @@ var useMarkRead = ({
   const { client } = useChatContext("useMarkRead");
   const { markRead, setChannelUnreadUiState } = useChannelActionContext("useMarkRead");
   const { channel } = useChannelStateContext("useMarkRead");
-  (0, import_react233.useEffect)(() => {
+  (0, import_react234.useEffect)(() => {
     const shouldMarkRead = () => !document.hidden && !wasMarkedUnread && !messageListIsThread && isMessageListScrolledToBottom && client.user?.id && !hasReadLastMessage(channel, client.user.id);
     const onVisibilityChange = () => {
       if (shouldMarkRead()) markRead();
@@ -54992,11 +55086,11 @@ function getPreviousLastMessage(messages, newMessage) {
 }
 
 // src/components/MessageList/MessageNotification.tsx
-var import_react234 = __toESM(require("react"));
+var import_react235 = __toESM(require("react"));
 var UnMemoizedMessageNotification = (props) => {
   const { children, onClick, showNotification = true } = props;
   if (!showNotification) return null;
-  return /* @__PURE__ */ import_react234.default.createElement(
+  return /* @__PURE__ */ import_react235.default.createElement(
     "button",
     {
       "aria-live": "polite",
@@ -55007,12 +55101,12 @@ var UnMemoizedMessageNotification = (props) => {
     children
   );
 };
-var MessageNotification = import_react234.default.memo(
+var MessageNotification = import_react235.default.memo(
   UnMemoizedMessageNotification
 );
 
 // src/components/MessageList/MessageListNotifications.tsx
-var import_react235 = __toESM(require("react"));
+var import_react236 = __toESM(require("react"));
 var MessageListNotifications = (props) => {
   const {
     hasNewMessages,
@@ -55025,7 +55119,7 @@ var MessageListNotifications = (props) => {
     unreadCount
   } = props;
   const { t: t2 } = useTranslationContext("MessageListNotifications");
-  return /* @__PURE__ */ import_react235.default.createElement("div", { className: "str-chat__list-notifications" }, notifications.map((notification) => /* @__PURE__ */ import_react235.default.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)), /* @__PURE__ */ import_react235.default.createElement(ConnectionStatus, null), /* @__PURE__ */ import_react235.default.createElement(
+  return /* @__PURE__ */ import_react236.default.createElement("div", { className: "str-chat__list-notifications" }, notifications.map((notification) => /* @__PURE__ */ import_react236.default.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)), /* @__PURE__ */ import_react236.default.createElement(ConnectionStatus, null), /* @__PURE__ */ import_react236.default.createElement(
     MessageNotification2,
     {
       isMessageListScrolledToBottom,
@@ -55039,11 +55133,11 @@ var MessageListNotifications = (props) => {
 };
 
 // src/components/MessageList/UnreadMessagesNotification.tsx
-var import_react237 = __toESM(require("react"));
+var import_react238 = __toESM(require("react"));
 
 // src/components/MessageList/icons.tsx
-var import_react236 = __toESM(require("react"));
-var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react236.default.createElement(
+var import_react237 = __toESM(require("react"));
+var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react237.default.createElement(
   "svg",
   {
     className,
@@ -55054,7 +55148,7 @@ var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react23
     width: "24",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react236.default.createElement(
+  /* @__PURE__ */ import_react237.default.createElement(
     "path",
     {
       d: "M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z",
@@ -55062,7 +55156,7 @@ var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react23
     }
   )
 );
-var CloseIcon2 = () => /* @__PURE__ */ import_react236.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 14 13", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react236.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_react237.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 14 13", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react237.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 = ({
@@ -55074,19 +55168,19 @@ var UnreadMessagesNotification = ({
     "UnreadMessagesNotification"
   );
   const { t: t2 } = useTranslationContext("UnreadMessagesNotification");
-  return /* @__PURE__ */ import_react237.default.createElement(
+  return /* @__PURE__ */ import_react238.default.createElement(
     "div",
     {
       className: "str-chat__unread-messages-notification",
       "data-testid": "unread-messages-notification"
     },
-    /* @__PURE__ */ import_react237.default.createElement("button", { onClick: () => jumpToFirstUnreadMessage(queryMessageLimit) }, unreadCount && showCount ? t2("{{count}} unread", { count: unreadCount ?? 0 }) : t2("Unread messages")),
-    /* @__PURE__ */ import_react237.default.createElement("button", { onClick: () => markRead() }, /* @__PURE__ */ import_react237.default.createElement(CloseIcon2, null))
+    /* @__PURE__ */ import_react238.default.createElement("button", { onClick: () => jumpToFirstUnreadMessage(queryMessageLimit) }, unreadCount && showCount ? t2("{{count}} unread", { count: unreadCount ?? 0 }) : t2("Unread messages")),
+    /* @__PURE__ */ import_react238.default.createElement("button", { onClick: () => markRead() }, /* @__PURE__ */ import_react238.default.createElement(CloseIcon2, null))
   );
 };
 
 // src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
-var import_react238 = __toESM(require("react"));
+var import_react239 = __toESM(require("react"));
 var mousewheelListener2 = (event) => {
   if (event instanceof WheelEvent && event.deltaY === 1) {
     event.preventDefault();
@@ -55117,10 +55211,10 @@ var InfiniteScroll = (props) => {
   const loadPreviousPageFn = loadPreviousPage || loadMore;
   const hasNextPageFlag = hasNextPage || hasMoreNewer;
   const hasPreviousPageFlag = hasPreviousPage || hasMore;
-  const scrollComponent = (0, import_react238.useRef)(void 0);
-  const previousOffset = (0, import_react238.useRef)(void 0);
-  const previousReverseOffset = (0, import_react238.useRef)(void 0);
-  const scrollListenerRef = (0, import_react238.useRef)(void 0);
+  const scrollComponent = (0, import_react239.useRef)(void 0);
+  const previousOffset = (0, import_react239.useRef)(void 0);
+  const previousReverseOffset = (0, import_react239.useRef)(void 0);
+  const scrollListenerRef = (0, import_react239.useRef)(void 0);
   scrollListenerRef.current = () => {
     const element4 = scrollComponent.current;
     if (!element4 || element4.offsetParent === null) {
@@ -55144,7 +55238,7 @@ var InfiniteScroll = (props) => {
       loadNextPageFn();
     }
   };
-  (0, import_react238.useEffect)(() => {
+  (0, import_react239.useEffect)(() => {
     deprecationAndReplacementWarning(
       [
         [{ hasMoreNewer }, { hasNextPage }],
@@ -55155,7 +55249,7 @@ var InfiniteScroll = (props) => {
       "InfiniteScroll"
     );
   }, []);
-  (0, import_react238.useEffect)(() => {
+  (0, import_react239.useEffect)(() => {
     const scrollElement = scrollComponent.current?.parentNode;
     if (!scrollElement) return;
     const scrollListener = () => scrollListenerRef.current?.();
@@ -55167,7 +55261,7 @@ var InfiniteScroll = (props) => {
       scrollElement.removeEventListener("resize", scrollListener, useCapture);
     };
   }, [initialLoad, useCapture]);
-  (0, import_react238.useEffect)(() => {
+  (0, import_react239.useEffect)(() => {
     const scrollElement = scrollComponent.current?.parentNode;
     if (scrollElement) {
       scrollElement.addEventListener("wheel", mousewheelListener2, { passive: false });
@@ -55188,11 +55282,11 @@ var InfiniteScroll = (props) => {
   if (head) {
     childrenArray.unshift(head);
   }
-  return import_react238.default.createElement(element3, attributes, childrenArray);
+  return import_react239.default.createElement(element3, attributes, childrenArray);
 };
 
 // src/components/TypingIndicator/TypingIndicator.tsx
-var import_react239 = __toESM(require("react"));
+var import_react240 = __toESM(require("react"));
 var import_clsx60 = __toESM(require("clsx"));
 var useJoinTypingUsers = (names) => {
   const { t: t2 } = useTranslationContext();
@@ -55230,7 +55324,7 @@ var UnMemoizedTypingIndicator = (props) => {
     return null;
   }
   if (!isTypingActive) return null;
-  return /* @__PURE__ */ import_react239.default.createElement(
+  return /* @__PURE__ */ import_react240.default.createElement(
     "div",
     {
       className: (0, import_clsx60.default)("str-chat__typing-indicator", {
@@ -55238,90 +55332,17 @@ var UnMemoizedTypingIndicator = (props) => {
       }),
       "data-testid": "typing-indicator"
     },
-    /* @__PURE__ */ import_react239.default.createElement("div", { className: "str-chat__typing-indicator__dots" }, /* @__PURE__ */ import_react239.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react239.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react239.default.createElement("span", { className: "str-chat__typing-indicator__dot" })),
-    /* @__PURE__ */ import_react239.default.createElement("div", { className: "str-chat__typing-indicator__users", "data-testid": "typing-users" }, joinedTypingUsers)
+    /* @__PURE__ */ import_react240.default.createElement("div", { className: "str-chat__typing-indicator__dots" }, /* @__PURE__ */ import_react240.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react240.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react240.default.createElement("span", { className: "str-chat__typing-indicator__dot" })),
+    /* @__PURE__ */ import_react240.default.createElement("div", { className: "str-chat__typing-indicator__users", "data-testid": "typing-users" }, joinedTypingUsers)
   );
 };
-var TypingIndicator = import_react239.default.memo(
+var TypingIndicator = import_react240.default.memo(
   UnMemoizedTypingIndicator
 );
 
 // src/components/MessageList/renderMessages.tsx
 var import_react243 = __toESM(require("react"));
 
-// src/components/Message/FixedHeightMessage.tsx
-var import_react240 = __toESM(require("react"));
-var selectColor = (number2, dark) => {
-  const hue = number2 * 137.508;
-  return `hsl(${hue},${dark ? "50%" : "85%"}, ${dark ? "75%" : "55%"})`;
-};
-var hashUserId = (userId) => {
-  const hash = userId.split("").reduce((acc, c) => {
-    acc = (acc << 5) - acc + c.charCodeAt(0);
-    return acc & acc;
-  }, 0);
-  return Math.abs(hash) / 10 ** Math.ceil(Math.log10(Math.abs(hash) + 1));
-};
-var getUserColor = (theme, userId) => selectColor(hashUserId(userId), theme.includes("dark"));
-var UnMemoizedFixedHeightMessage = (props) => {
-  const { groupedByUser: propGroupedByUser, message: propMessage } = props;
-  const { theme } = useChatContext("FixedHeightMessage");
-  const { groupedByUser: contextGroupedByUser, message: contextMessage } = useMessageContext("FixedHeightMessage");
-  const { MessageDeleted: MessageDeleted2 = MessageDeleted } = useComponentContext("FixedHeightMessage");
-  const { userLanguage } = useTranslationContext("FixedHeightMessage");
-  const groupedByUser = propGroupedByUser !== void 0 ? propGroupedByUser : contextGroupedByUser;
-  const message = propMessage || contextMessage;
-  const handleAction = useActionHandler(message);
-  const handleDelete2 = useDeleteHandler(message);
-  const role = useUserRole(message);
-  const messageTextToRender = message?.i18n?.[`${userLanguage}_text`] || message?.text;
-  const renderedText = (0, import_react240.useMemo)(
-    () => renderText(messageTextToRender, message.mentioned_users),
-    [message.mentioned_users, messageTextToRender]
-  );
-  const userId = message.user?.id || "";
-  const userColor = (0, import_react240.useMemo)(() => getUserColor(theme, userId), [userId, theme]);
-  const messageActionsHandler = (0, import_react240.useCallback)(
-    () => getMessageActions(["delete"], { canDelete: role.canDelete }),
-    [role]
-  );
-  const images = message?.attachments?.filter(({ type }) => type === "image");
-  return /* @__PURE__ */ import_react240.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_react240.default.createElement(
-      Avatar,
-      {
-        image: message.user.image,
-        name: message.user.name || message.user.id,
-        user: message.user
-      }
-    ),
-    /* @__PURE__ */ import_react240.default.createElement("div", { className: "str-chat__virtual-message__content" }, /* @__PURE__ */ import_react240.default.createElement("div", { className: "str-chat__virtual-message__meta" }, /* @__PURE__ */ import_react240.default.createElement("div", { className: "str-chat__virtual-message__author", style: { color: userColor } }, /* @__PURE__ */ import_react240.default.createElement("strong", null, message.user?.name || "unknown"))), message.deleted_at || message.type === "deleted" ? /* @__PURE__ */ import_react240.default.createElement(MessageDeleted2, { message }) : /* @__PURE__ */ import_react240.default.createElement(import_react240.default.Fragment, null, images && /* @__PURE__ */ import_react240.default.createElement(Gallery, { images }), /* @__PURE__ */ import_react240.default.createElement("div", { className: "str-chat__virtual-message__text", "data-testid": "msg-text" }, renderedText, message.mml && /* @__PURE__ */ import_react240.default.createElement(MML, { actionHandler: handleAction, align: "left", source: message.mml }), /* @__PURE__ */ import_react240.default.createElement("div", { className: "str-chat__virtual-message__data" }, /* @__PURE__ */ import_react240.default.createElement(
-      MessageActions,
-      {
-        customWrapperClass: "str-chat__virtual-message__actions",
-        getMessageActions: messageActionsHandler,
-        handleDelete: handleDelete2,
-        message,
-        mine: () => role.isMyMessage
-      }
-    ), /* @__PURE__ */ import_react240.default.createElement("span", { className: "str-chat__virtual-message__date" }, /* @__PURE__ */ import_react240.default.createElement(
-      MessageTimestamp,
-      {
-        customClass: "str-chat__message-simple-timestamp",
-        message
-      }
-    ))))))
-  );
-};
-var FixedHeightMessage = import_react240.default.memo(
-  UnMemoizedFixedHeightMessage
-);
-
 // src/components/DateSeparator/DateSeparator.tsx
 var import_react241 = __toESM(require("react"));
 var UnMemoizedDateSeparator = (props) => {
@@ -57676,7 +57697,7 @@ var useChat = ({
     if (!client) return;
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
-      client.setUserAgent(`stream-chat-react-12.12.0-${userAgent}`);
+      client.setUserAgent(`stream-chat-react-12.13.0-${userAgent}`);
     }
     client.threads.registerSubscriptions();
     client.polls.registerSubscriptions();