stream-chat-react 12.12.0 → 12.13.0

package/dist/index.browser.cjs

@@ -16187,10 +16187,10 @@ function Parse(source, customConvertors) {
   var XMLNodes = SourceToXML(source);
   return XMLtoMMLTree(XMLNodes, customConvertors);
 }
-var import_react214, import_parse_xml, import_dayjs4, import_sanitize_url4, import_react_markdown3, import_linkifyjs3, import_ical_expander, import_react_virtuoso2, import_isBetween, runtime_1, MMLTag, Card2, Icon3, CardHeader2, CardBody, ButtonList, SvgIcon, IconGoogle, IconMicrosoft, IconApple, isIE, getCurrentURL, CALENDAR_SERVICES, AddToCalendar, Button, Carousel, CarouselItem, Col, Error$1, Image2, Input, SIZE, Progress, Loading, truncate, matchMarkdownLinks2, MDLinkRender, markDownRenderers2, allowedMarkups, MD, Number2, Row, ITEMS_PER_PAGE, VERTICAL_COMPENSATION, INITIAL_INDEX, VIRTUOSO_START_INDEX, DatePickerSelect, getItemData, DatePickerDate, getItemData$1, DatePickerTime, DatePicker, setupIcalFilter, Scheduler, Success, Text, converters, Tree, MML;
+var import_react206, import_parse_xml, import_dayjs4, import_sanitize_url4, import_react_markdown3, import_linkifyjs3, import_ical_expander, import_react_virtuoso2, import_isBetween, runtime_1, MMLTag, Card2, Icon3, CardHeader2, CardBody, ButtonList, SvgIcon, IconGoogle, IconMicrosoft, IconApple, isIE, getCurrentURL, CALENDAR_SERVICES, AddToCalendar, Button, Carousel, CarouselItem, Col, Error$1, Image2, Input, SIZE, Progress, Loading, truncate, matchMarkdownLinks2, MDLinkRender, markDownRenderers2, allowedMarkups, MD, Number2, Row, ITEMS_PER_PAGE, VERTICAL_COMPENSATION, INITIAL_INDEX, VIRTUOSO_START_INDEX, DatePickerSelect, getItemData, DatePickerDate, getItemData$1, DatePickerTime, DatePicker, setupIcalFilter, Scheduler, Success, Text, converters, Tree, MML;
 var init_mml_react_esm = __esm({
   "node_modules/mml-react/dist/mml-react.esm.js"() {
-    import_react214 = __toESM(require("react"));
+    import_react206 = __toESM(require("react"));
     import_parse_xml = __toESM(require_src());
     import_dayjs4 = __toESM(require("dayjs"));
     import_sanitize_url4 = require("@braintree/sanitize-url");
@@ -16720,57 +16720,57 @@ var init_mml_react_esm = __esm({
     }();
     Card2 = function Card3(_ref) {
       var _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className, children = _ref.children;
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-card " + className
       }, children);
     };
     Icon3 = function Icon4(_ref) {
       var name2 = _ref.name;
-      return import_react214.default.createElement("i", {
+      return import_react206.default.createElement("i", {
         className: "mml-icon material-icons"
       }, name2);
     };
     CardHeader2 = function CardHeader3(_ref) {
       var text8 = _ref.text, _ref$icon = _ref.icon, icon2 = _ref$icon === void 0 ? "" : _ref$icon, _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className;
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-card-header " + className
-      }, icon2 && import_react214.default.createElement(Icon3, {
+      }, icon2 && import_react206.default.createElement(Icon3, {
         name: icon2
-      }), import_react214.default.createElement("span", {
+      }), import_react206.default.createElement("span", {
         className: "mml-card-header__text"
       }, text8));
     };
     CardBody = function CardBody2(_ref) {
       var _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className, children = _ref.children;
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-card-body " + className
       }, children);
     };
     ButtonList = function ButtonList2(_ref) {
       var children = _ref.children, _ref$variant = _ref.variant, variant = _ref$variant === void 0 ? "" : _ref$variant;
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-btnlist " + (variant === "floating" ? " mml-btnlist--floating" : "mml-btnlist--grounded")
       }, children);
     };
     SvgIcon = function SvgIcon2(_ref) {
       var path2 = _ref.path;
-      return import_react214.default.createElement("i", {
+      return import_react206.default.createElement("i", {
         className: "mml-icon"
-      }, import_react214.default.createElement("svg", {
+      }, import_react206.default.createElement("svg", {
         className: "mml-icon__svg",
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24"
-      }, import_react214.default.createElement("path", {
+      }, import_react206.default.createElement("path", {
         d: path2
       })));
     };
-    IconGoogle = /* @__PURE__ */ import_react214.default.createElement(SvgIcon, {
+    IconGoogle = /* @__PURE__ */ import_react206.default.createElement(SvgIcon, {
       path: "M21.35 11.1h-9.17v2.73h6.5c-.33 3.8-3.5 5.44-6.5 5.44C8.36 19.27 5 16.25 5 12c0-4.1 3.2-7.27 7.2-7.27 3.1 0 4.9 1.97 4.9 1.97L19 4.72S16.56 2 12.1 2C6.42 2 2.03 6.8 2.03 12c0 5.05 4.13 10 10.22 10 5.35 0 9.25-3.67 9.25-9.1 0-1.15-.15-1.8-.15-1.8h0z"
     });
-    IconMicrosoft = /* @__PURE__ */ import_react214.default.createElement(SvgIcon, {
+    IconMicrosoft = /* @__PURE__ */ import_react206.default.createElement(SvgIcon, {
       path: "M3 12V6.75l6-1.32v6.48L3 12m17-9v8.75l-10 .15V5.2L20 3M3 13l6 .1v6.8l-6-1.15V13m17 .25V22l-10-1.9v-7l10 .15z"
     });
-    IconApple = /* @__PURE__ */ import_react214.default.createElement(SvgIcon, {
+    IconApple = /* @__PURE__ */ import_react206.default.createElement(SvgIcon, {
       path: "M18.7 19.5c-.83 1.24-1.7 2.45-3.05 2.47-1.34.03-1.77-.8-3.3-.8-1.53 0-2 .77-3.27.82-1.3.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.4c.87-1.52 2.43-2.48 4.12-2.5 1.28-.02 2.5.87 3.3.87.78 0 2.26-1.07 3.8-.9.65.03 2.47.26 3.64 1.98-.1.06-2.17 1.28-2.15 3.8.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.2-.7.85-1.83 1.5-2.95 1.42-.15-1.15.4-2.35 1.05-3.1z"
     });
     isIE = typeof window !== "undefined" && window.navigator.msSaveOrOpenBlob && window.Blob;
@@ -16826,14 +16826,14 @@ var init_mml_react_esm = __esm({
           window.open(url, "_blank");
         }
       }
-      return import_react214.default.createElement(Card2, {
+      return import_react206.default.createElement(Card2, {
         className: "mml-add-to-calendar " + className
-      }, import_react214.default.createElement(CardHeader2, {
+      }, import_react206.default.createElement(CardHeader2, {
         icon: "date_range",
         text: "Add to My Calendar"
-      }), import_react214.default.createElement(CardBody, null, import_react214.default.createElement(ButtonList, null, CALENDAR_SERVICES.map(function(_ref3) {
+      }), import_react206.default.createElement(CardBody, null, import_react206.default.createElement(ButtonList, null, CALENDAR_SERVICES.map(function(_ref3) {
         var id = _ref3.id, label = _ref3.label, Icon5 = _ref3.Icon;
-        return import_react214.default.createElement("a", {
+        return import_react206.default.createElement("a", {
           key: id,
           className: "mml-btn " + (Icon5 ? "mml-btn--with-icon" : ""),
           onClick: handleLinkClick,
@@ -16851,15 +16851,15 @@ var init_mml_react_esm = __esm({
         className += " mml-btn--text";
       }
       className += variant === "floating" ? " mml-btn--floating" : " mml-btn--grounded";
-      if (url) return import_react214.default.createElement("a", {
+      if (url) return import_react206.default.createElement("a", {
         className: "mml-btn " + className,
         href: (0, import_sanitize_url4.sanitizeUrl)(url),
         target: "_blank",
         rel: "nofollow noreferrer noopener"
-      }, icon2 && import_react214.default.createElement(Icon3, {
+      }, icon2 && import_react206.default.createElement(Icon3, {
         name: icon2
       }), text8);
-      return import_react214.default.createElement("button", {
+      return import_react206.default.createElement("button", {
         className: "mml-btn " + className,
         type: "submit",
         name: name2,
@@ -16872,20 +16872,20 @@ var init_mml_react_esm = __esm({
           input2.value = value || "";
           (_event$currentTarget = event.currentTarget) == null ? void 0 : (_event$currentTarget$ = _event$currentTarget.closest("form")) == null ? void 0 : _event$currentTarget$.appendChild(input2);
         }
-      }, icon2 && import_react214.default.createElement(Icon3, {
+      }, icon2 && import_react206.default.createElement(Icon3, {
         name: icon2
       }), text8);
     };
     Carousel = function Carousel2(_ref) {
       var children = _ref.children, _ref$slideWidth = _ref.slideWidth, slideWidth = _ref$slideWidth === void 0 ? "120px" : _ref$slideWidth, _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className;
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-carousel " + className
-      }, import_react214.default.createElement("div", {
+      }, import_react206.default.createElement("div", {
         className: "mml-carousel__track"
-      }, import_react214.default.createElement("div", {
+      }, import_react206.default.createElement("div", {
         className: "mml-carousel__slides"
-      }, import_react214.Children.map(children, function(child) {
-        return (0, import_react214.cloneElement)(child, {
+      }, import_react206.Children.map(children, function(child) {
+        return (0, import_react206.cloneElement)(child, {
           className: "mml-carousel__slide",
           slideWidth
         });
@@ -16894,7 +16894,7 @@ var init_mml_react_esm = __esm({
     CarouselItem = function CarouselItem2(_ref) {
       var children = _ref.children, slideWidth = _ref.slideWidth, _ref$width = _ref.width, width = _ref$width === void 0 ? "" : _ref$width, _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className;
       var finalWidth = width || slideWidth;
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-carousel-item " + className,
         style: {
           flex: "0 0 " + finalWidth,
@@ -16907,20 +16907,20 @@ var init_mml_react_esm = __esm({
       var classNames = "mml-col-" + width;
       if (offset) classNames = classNames + (" mml-offset-" + offset);
       classNames = classNames + (" mml-align-" + align);
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: classNames
       }, children);
     };
     Error$1 = function Error2(_ref) {
       var _ref$error = _ref.error, error = _ref$error === void 0 ? "" : _ref$error;
       if (!error) return null;
-      return import_react214.default.createElement("span", {
+      return import_react206.default.createElement("span", {
         className: "mml-error"
       }, error);
     };
     Image2 = function Image3(_ref) {
       var src = _ref.src, _ref$alt = _ref.alt, alt = _ref$alt === void 0 ? "" : _ref$alt, _ref$title = _ref.title, title = _ref$title === void 0 ? "" : _ref$title, _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className;
-      return import_react214.default.createElement("img", {
+      return import_react206.default.createElement("img", {
         className: ("mml-image " + className).trim(),
         src,
         alt,
@@ -16929,14 +16929,14 @@ var init_mml_react_esm = __esm({
     };
     Input = function Input2(_ref) {
       var name2 = _ref.name, label = _ref.label, _ref$value = _ref.value, value = _ref$value === void 0 ? "" : _ref$value, _ref$type = _ref.type, type = _ref$type === void 0 ? "text" : _ref$type, _ref$placeholder = _ref.placeholder, placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder;
-      var _useState = (0, import_react214.useState)(value), state = _useState[0], setState = _useState[1];
+      var _useState = (0, import_react206.useState)(value), state = _useState[0], setState = _useState[1];
       var id = "mml-" + name2;
-      return import_react214.default.createElement(import_react214.default.Fragment, null, label && import_react214.default.createElement("label", {
+      return import_react206.default.createElement(import_react206.default.Fragment, null, label && import_react206.default.createElement("label", {
         className: "mml-card-header",
         htmlFor: id
-      }, import_react214.default.createElement("span", {
+      }, import_react206.default.createElement("span", {
         className: "mml-card-header__text"
-      }, label)), import_react214.default.createElement("input", {
+      }, label)), import_react206.default.createElement("input", {
         id,
         className: "mml-input",
         name: name2,
@@ -16953,7 +16953,7 @@ var init_mml_react_esm = __esm({
       var size = _ref.size, _ref$thickness = _ref.thickness, thickness = _ref$thickness === void 0 ? 3.6 : _ref$thickness, color2 = _ref.color;
       thickness = typeof thickness === "string" ? parseFloat(thickness) : thickness;
       size = typeof size === "string" && /^\d+$/.test(size) || typeof size === "number" ? size + "px" : size;
-      return import_react214.default.createElement("span", {
+      return import_react206.default.createElement("span", {
         className: "mml-progress",
         role: "progressbar",
         style: {
@@ -16961,10 +16961,10 @@ var init_mml_react_esm = __esm({
           height: size,
           color: color2
         }
-      }, import_react214.default.createElement("svg", {
+      }, import_react206.default.createElement("svg", {
         className: "mml-progress__svg",
         viewBox: SIZE / 2 + " " + SIZE / 2 + " " + SIZE + " " + SIZE
-      }, import_react214.default.createElement("circle", {
+      }, import_react206.default.createElement("circle", {
         className: "mml-progress__circle",
         cx: SIZE,
         cy: SIZE,
@@ -16976,13 +16976,13 @@ var init_mml_react_esm = __esm({
     Loading = function Loading2(_ref) {
       var _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className, _ref$loading = _ref.loading, loading = _ref$loading === void 0 ? false : _ref$loading, text8 = _ref.text, size = _ref.size, thickness = _ref.thickness, color2 = _ref.color;
       if (!loading) return null;
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-loading " + className
-      }, import_react214.default.createElement(Progress, Object.assign({}, {
+      }, import_react206.default.createElement(Progress, Object.assign({}, {
         size,
         thickness,
         color: color2
-      })), text8 && import_react214.default.createElement("div", {
+      })), text8 && import_react206.default.createElement("div", {
         className: "mml-loading__text"
       }, text8));
     };
@@ -17005,7 +17005,7 @@ var init_mml_react_esm = __esm({
     };
     MDLinkRender = function MDLinkRender2(props) {
       if (!props.href || !props.href.startsWith("http") && !props.href.startsWith("mailto:")) return props.children;
-      return import_react214.default.createElement("a", {
+      return import_react206.default.createElement("a", {
         href: props.href,
         target: "_blank",
         rel: "nofollow noreferrer noopener"
@@ -17044,9 +17044,9 @@ var init_mml_react_esm = __esm({
         var displayLink = type === "email" ? value : truncate(value.replace(/(http(s?):\/\/)?(www\.)?/, ""), 20);
         newText = newText.replace(value, "[" + displayLink + "](" + encodeURI(href) + ")");
       });
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-md"
-      }, import_react214.default.createElement(import_react_markdown3.default, {
+      }, import_react206.default.createElement(import_react_markdown3.default, {
         allowedTypes: allowedMarkups,
         renderers: markDownRenderers2,
         source: newText,
@@ -17059,34 +17059,34 @@ var init_mml_react_esm = __esm({
     };
     Number2 = function Number3(_ref) {
       var name2 = _ref.name, value = _ref.value;
-      var _useState = (0, import_react214.useState)(parseInt("" + value, 10) || 0), state = _useState[0], setState = _useState[1];
-      return import_react214.default.createElement("div", {
+      var _useState = (0, import_react206.useState)(parseInt("" + value, 10) || 0), state = _useState[0], setState = _useState[1];
+      return import_react206.default.createElement("div", {
         className: "mml-number"
-      }, import_react214.default.createElement("input", {
+      }, import_react206.default.createElement("input", {
         name: name2,
         value: state,
         type: "hidden"
-      }), import_react214.default.createElement("span", {
+      }), import_react206.default.createElement("span", {
         className: "mml-btn mml-btn--floating mml-btn--icon mml-number__dec",
         onClick: function onClick() {
           return setState(state - 1);
         }
-      }, import_react214.default.createElement(Icon3, {
+      }, import_react206.default.createElement(Icon3, {
         name: "remove"
-      })), import_react214.default.createElement("span", {
+      })), import_react206.default.createElement("span", {
         className: "mml-number__count"
-      }, state), import_react214.default.createElement("span", {
+      }, state), import_react206.default.createElement("span", {
         className: "mml-btn mml-btn--floating mml-btn--icon mml-number__inc",
         onClick: function onClick() {
           return setState(state + 1);
         }
-      }, import_react214.default.createElement(Icon3, {
+      }, import_react206.default.createElement(Icon3, {
         name: "add"
       })));
     };
     Row = function Row2(_ref) {
       var children = _ref.children;
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-row"
       }, children);
     };
@@ -17096,7 +17096,7 @@ var init_mml_react_esm = __esm({
     VIRTUOSO_START_INDEX = 1e4;
     DatePickerSelect = function DatePickerSelect2(props) {
       var onChange = props.onChange, icalFilter = props.icalFilter, getItemData4 = props.getItemData, itemClassName = props.itemClassName, interval = props.interval, format = props.format, value = props.value;
-      var generateItems = (0, import_react214.useCallback)(function(quantity, firstIdx) {
+      var generateItems = (0, import_react206.useCallback)(function(quantity, firstIdx) {
         return Array(quantity).fill(true).map(function(_, idx) {
           return getItemData4({
             interval,
@@ -17108,11 +17108,11 @@ var init_mml_react_esm = __esm({
           return !icalFilter || icalFilter && icalFilter(newItem.value);
         });
       }, [interval, format, value, icalFilter, getItemData4]);
-      var _useState = (0, import_react214.useState)(generateItems(ITEMS_PER_PAGE * 2, -ITEMS_PER_PAGE)), items = _useState[0], setItems = _useState[1];
-      var _useState2 = (0, import_react214.useState)(VIRTUOSO_START_INDEX), firstItemIndex = _useState2[0], setFirstItemIndex = _useState2[1];
-      var initialIndexOffset = (0, import_react214.useRef)(INITIAL_INDEX);
-      var _useState3 = (0, import_react214.useState)(null), selectedIdx = _useState3[0], setSelectedIdx = _useState3[1];
-      var handleClick = (0, import_react214.useCallback)(function(item2) {
+      var _useState = (0, import_react206.useState)(generateItems(ITEMS_PER_PAGE * 2, -ITEMS_PER_PAGE)), items = _useState[0], setItems = _useState[1];
+      var _useState2 = (0, import_react206.useState)(VIRTUOSO_START_INDEX), firstItemIndex = _useState2[0], setFirstItemIndex = _useState2[1];
+      var initialIndexOffset = (0, import_react206.useRef)(INITIAL_INDEX);
+      var _useState3 = (0, import_react206.useState)(null), selectedIdx = _useState3[0], setSelectedIdx = _useState3[1];
+      var handleClick = (0, import_react206.useCallback)(function(item2) {
         onChange(item2.value);
         var firstItemIndex2 = initialIndexOffset.current || 0;
         var nextFirstItemIdx = firstItemIndex2 - INITIAL_INDEX - ITEMS_PER_PAGE;
@@ -17126,12 +17126,12 @@ var init_mml_react_esm = __esm({
         }
         setSelectedIdx(item2.idx);
       }, [setItems, generateItems, initialIndexOffset, onChange]);
-      var appendItems = (0, import_react214.useCallback)(function(lastItemIndex) {
+      var appendItems = (0, import_react206.useCallback)(function(lastItemIndex) {
         setItems(function(items2) {
           return [].concat(items2, generateItems(ITEMS_PER_PAGE, lastItemIndex));
         });
       }, [setItems, generateItems]);
-      var prependItems = (0, import_react214.useCallback)(function() {
+      var prependItems = (0, import_react206.useCallback)(function() {
         var firstItemIndex2 = initialIndexOffset.current || 0;
         var nextFirstItemIdx = firstItemIndex2 - INITIAL_INDEX - ITEMS_PER_PAGE;
         if (initialIndexOffset) {
@@ -17143,7 +17143,7 @@ var init_mml_react_esm = __esm({
         setFirstItemIndex(firstItemIndex2 - ITEMS_PER_PAGE);
         return false;
       }, [setItems, generateItems, initialIndexOffset]);
-      (0, import_react214.useEffect)(function() {
+      (0, import_react206.useEffect)(function() {
         if (value) {
           var initialSelectedIdx = null;
           for (var i = 0; i < items.length; i++) {
@@ -17155,11 +17155,11 @@ var init_mml_react_esm = __esm({
           setSelectedIdx(initialSelectedIdx);
         }
       }, []);
-      return import_react214.default.createElement(import_react_virtuoso2.Virtuoso, {
+      return import_react206.default.createElement(import_react_virtuoso2.Virtuoso, {
         data: items,
         firstItemIndex,
         itemContent: function itemContent(_, item2) {
-          return import_react214.default.createElement("div", {
+          return import_react206.default.createElement("div", {
             className: itemClassName + (" mml-datepicker__item " + (item2.idx === selectedIdx ? "mml-datepicker__item--selected" : "")),
             onClick: function onClick() {
               return handleClick(item2);
@@ -17183,9 +17183,9 @@ var init_mml_react_esm = __esm({
       };
     };
     DatePickerDate = function DatePickerDate2(props) {
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-datepicker__select mml-datepicker__date"
-      }, import_react214.default.createElement(DatePickerSelect, Object.assign({}, props, {
+      }, import_react206.default.createElement(DatePickerSelect, Object.assign({}, props, {
         itemClassName: "mml-datepicker__item--day",
         getItemData
       })));
@@ -17204,16 +17204,16 @@ var init_mml_react_esm = __esm({
       };
     };
     DatePickerTime = function DatePickerTime2(props) {
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-datepicker__select mml-datepicker__time"
-      }, import_react214.default.createElement(DatePickerSelect, Object.assign({}, props, {
+      }, import_react206.default.createElement(DatePickerSelect, Object.assign({}, props, {
         itemClassName: "mml-datepicker__item--time",
         getItemData: getItemData$1
       })));
     };
     DatePicker = function DatePicker2(_ref) {
       var name2 = _ref.name, selected = _ref.selected, dateInterval = _ref.dateInterval, timeInterval = _ref.timeInterval, dateFormat = _ref.dateFormat, timeFormat = _ref.timeFormat, fullDay = _ref.fullDay, icalFilter = _ref.icalFilter;
-      var _useState = (0, import_react214.useState)(selected), date = _useState[0], setDate = _useState[1];
+      var _useState = (0, import_react206.useState)(selected), date = _useState[0], setDate = _useState[1];
       var handleChangeDate = function handleChangeDate2(value) {
         setDate(function(prevDate) {
           return prevDate.set("date", value.get("date")).set("month", value.get("month")).set("year", value.get("year"));
@@ -17224,19 +17224,19 @@ var init_mml_react_esm = __esm({
           return prevDate.set("minute", value.get("minute")).set("hour", value.get("hour"));
         });
       };
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-datepicker mml-datepicker--" + (fullDay ? "single" : "double")
-      }, import_react214.default.createElement("input", {
+      }, import_react206.default.createElement("input", {
         name: name2,
         value: date.toISOString(),
         type: "hidden"
-      }), import_react214.default.createElement(DatePickerDate, {
+      }), import_react206.default.createElement(DatePickerDate, {
         icalFilter,
         format: dateFormat,
         value: date,
         onChange: handleChangeDate,
         interval: dateInterval
-      }), !fullDay && import_react214.default.createElement(DatePickerTime, {
+      }), !fullDay && import_react206.default.createElement(DatePickerTime, {
         icalFilter,
         format: timeFormat,
         value: date,
@@ -17293,14 +17293,14 @@ var init_mml_react_esm = __esm({
     }();
     Scheduler = function Scheduler2(_ref2) {
       var name2 = _ref2.name, selected = _ref2.selected, icalAvailability = _ref2.icalAvailability, _ref2$duration = _ref2.duration, duration = _ref2$duration === void 0 ? 30 : _ref2$duration, _ref2$dateInterval = _ref2.dateInterval, dateInterval = _ref2$dateInterval === void 0 ? 1 : _ref2$dateInterval, _ref2$timeInterval = _ref2.timeInterval, timeInterval = _ref2$timeInterval === void 0 ? 30 : _ref2$timeInterval, _ref2$dateFormat = _ref2.dateFormat, dateFormat = _ref2$dateFormat === void 0 ? "ddd MMM DD" : _ref2$dateFormat, _ref2$timeFormat = _ref2.timeFormat, timeFormat = _ref2$timeFormat === void 0 ? "hh:mm A" : _ref2$timeFormat, _ref2$fullDay = _ref2.fullDay, fullDay = _ref2$fullDay === void 0 ? false : _ref2$fullDay;
-      var _useState = (0, import_react214.useState)(false), loading = _useState[0], setLoading = _useState[1];
-      var _useState2 = (0, import_react214.useState)(""), error = _useState2[0], setError = _useState2[1];
-      var _useState3 = (0, import_react214.useState)(function() {
+      var _useState = (0, import_react206.useState)(false), loading = _useState[0], setLoading = _useState[1];
+      var _useState2 = (0, import_react206.useState)(""), error = _useState2[0], setError = _useState2[1];
+      var _useState3 = (0, import_react206.useState)(function() {
         return function() {
           return true;
         };
       }), icalFilter = _useState3[0], setIcalFilter = _useState3[1];
-      (0, import_react214.useEffect)(function() {
+      (0, import_react206.useEffect)(function() {
         if (!icalAvailability) return;
         setLoading(true);
         setupIcalFilter(icalAvailability, duration).then(setIcalFilter)["catch"](function(err) {
@@ -17313,17 +17313,17 @@ var init_mml_react_esm = __esm({
           return setLoading(false);
         });
       }, [icalAvailability, duration]);
-      return import_react214.default.createElement(Card2, {
+      return import_react206.default.createElement(Card2, {
         className: "mml-scheduler"
-      }, import_react214.default.createElement(CardHeader2, {
+      }, import_react206.default.createElement(CardHeader2, {
         icon: "date_range",
         text: "Scheduler"
-      }), import_react214.default.createElement(CardBody, null, error && !loading && import_react214.default.createElement(Error$1, {
+      }), import_react206.default.createElement(CardBody, null, error && !loading && import_react206.default.createElement(Error$1, {
         error: "Failed, error: " + error
-      }), !error && loading && import_react214.default.createElement(Loading, {
+      }), !error && loading && import_react206.default.createElement(Loading, {
         loading: true,
         text: "Loading availability"
-      }), !error && !loading && import_react214.default.createElement(DatePicker, {
+      }), !error && !loading && import_react206.default.createElement(DatePicker, {
         name: name2,
         selected: selected ? (0, import_dayjs4.default)(selected) : (0, import_dayjs4.default)().startOf("hour"),
         dateInterval,
@@ -17336,20 +17336,20 @@ var init_mml_react_esm = __esm({
     };
     Success = function Success2(_ref) {
       var success = _ref.success;
-      if (success) return import_react214.default.createElement("div", {
+      if (success) return import_react206.default.createElement("div", {
         className: "mml-success"
       }, success);
       return null;
     };
     Text = function Text2(_ref) {
       var text8 = _ref.text, _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className;
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: ("mml-text " + className).trim()
       }, text8);
     };
     converters = {
       button: function button(tag) {
-        return import_react214.default.createElement(Button, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(Button, Object.assign({}, tag.attributes, {
           key: tag.key,
           text: tag.getText(),
           name: tag.attributes.name,
@@ -17357,19 +17357,19 @@ var init_mml_react_esm = __esm({
         }));
       },
       button_list: function button_list(tag, children) {
-        return import_react214.default.createElement(ButtonList, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(ButtonList, Object.assign({}, tag.attributes, {
           key: tag.key
         }), children);
       },
       input: function input(tag) {
-        return import_react214.default.createElement(Input, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(Input, Object.assign({}, tag.attributes, {
           key: tag.key,
           name: tag.attributes.name,
           value: tag.attributes.value
         }));
       },
       add_to_calendar: function add_to_calendar(tag) {
-        return import_react214.default.createElement(AddToCalendar, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(AddToCalendar, Object.assign({}, tag.attributes, {
           key: tag.key,
           title: tag.attributes.title,
           start: tag.attributes.start,
@@ -17377,41 +17377,41 @@ var init_mml_react_esm = __esm({
         }));
       },
       col: function col(tag, children) {
-        return import_react214.default.createElement(Col, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(Col, Object.assign({}, tag.attributes, {
           key: tag.key
         }), children);
       },
       row: function row(tag, children) {
-        return import_react214.default.createElement(Row, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(Row, Object.assign({}, tag.attributes, {
           key: tag.key
         }), children);
       },
       icon: function icon(tag) {
-        return import_react214.default.createElement(Icon3, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(Icon3, Object.assign({}, tag.attributes, {
           key: tag.key,
           name: tag.attributes.name
         }));
       },
       image: function image3(tag) {
-        return import_react214.default.createElement(Image2, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(Image2, Object.assign({}, tag.attributes, {
           key: tag.key,
           src: tag.attributes.src
         }));
       },
       md: function md(tag) {
-        return import_react214.default.createElement(MD, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(MD, Object.assign({}, tag.attributes, {
           key: tag.key,
           text: tag.getText()
         }));
       },
       text: function text7(tag) {
-        return import_react214.default.createElement(Text, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(Text, Object.assign({}, tag.attributes, {
           key: tag.key,
           text: tag.getText()
         }));
       },
       scheduler: function scheduler(tag) {
-        return import_react214.default.createElement(Scheduler, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(Scheduler, Object.assign({}, tag.attributes, {
           key: tag.key,
           name: tag.attributes.name,
           dateInterval: parseInt(tag.attributes.dateInterval, 10) || 1,
@@ -17423,19 +17423,19 @@ var init_mml_react_esm = __esm({
         }));
       },
       carousel: function carousel(tag, children) {
-        return import_react214.default.createElement(Carousel, Object.assign({
+        return import_react206.default.createElement(Carousel, Object.assign({
           slideWidth: tag.attributes.slideWidth
         }, tag.attributes, {
           key: tag.key
         }), children);
       },
       item: function item(tag, children) {
-        return import_react214.default.createElement(CarouselItem, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(CarouselItem, Object.assign({}, tag.attributes, {
           key: tag.key
         }), children);
       },
       number: function number2(tag) {
-        return import_react214.default.createElement(Number2, Object.assign({}, tag.attributes, {
+        return import_react206.default.createElement(Number2, Object.assign({}, tag.attributes, {
           key: tag.key,
           name: tag.attributes.name,
           value: tag.attributes.value
@@ -17473,13 +17473,13 @@ var init_mml_react_esm = __esm({
     }();
     MML = function MML2(_ref) {
       var source = _ref.source, onSubmit = _ref.onSubmit, converters2 = _ref.converters, _ref$theme = _ref.theme, theme = _ref$theme === void 0 ? "" : _ref$theme, _ref$className = _ref.className, className = _ref$className === void 0 ? "" : _ref$className, _ref$Loading = _ref.Loading, Loading$1 = _ref$Loading === void 0 ? Loading : _ref$Loading, _ref$Error = _ref.Error, Error3 = _ref$Error === void 0 ? Error$1 : _ref$Error, _ref$Success = _ref.Success, Success$1 = _ref$Success === void 0 ? Success : _ref$Success;
-      var _useState = (0, import_react214.useState)(""), error = _useState[0], setError = _useState[1];
-      var _useState2 = (0, import_react214.useState)({
+      var _useState = (0, import_react206.useState)(""), error = _useState[0], setError = _useState[1];
+      var _useState2 = (0, import_react206.useState)({
         loading: false,
         error: "",
         success: ""
       }), submitState = _useState2[0], setSubmitState = _useState2[1];
-      var tree = (0, import_react214.useMemo)(function() {
+      var tree = (0, import_react206.useMemo)(function() {
         try {
           return Parse(source, converters2);
         } catch (e2) {
@@ -17488,7 +17488,7 @@ var init_mml_react_esm = __esm({
           return null;
         }
       }, [source, converters2]);
-      var handleSubmit = (0, import_react214.useCallback)(/* @__PURE__ */ function() {
+      var handleSubmit = (0, import_react206.useCallback)(/* @__PURE__ */ function() {
         var _ref2 = _asyncToGenerator(/* @__PURE__ */ runtime_1.mark(function _callee(event) {
           var state;
           return runtime_1.wrap(function _callee$(_context) {
@@ -17542,24 +17542,24 @@ var init_mml_react_esm = __esm({
           return _ref2.apply(this, arguments);
         };
       }(), [onSubmit, tree]);
-      return import_react214.default.createElement("div", {
+      return import_react206.default.createElement("div", {
         className: "mml-container " + theme + " " + className,
         "data-testid": "mml-container"
-      }, error ? import_react214.default.createElement("div", {
+      }, error ? import_react206.default.createElement("div", {
         className: "mml-wrap"
-      }, Error3 && import_react214.default.createElement(Error3, {
+      }, Error3 && import_react206.default.createElement(Error3, {
         error
-      })) : import_react214.default.createElement("form", {
+      })) : import_react206.default.createElement("form", {
         onSubmit: handleSubmit,
         className: "mml-wrap",
         "data-testid": "mml-form"
-      }, tree != null && tree.type ? import_react214.default.createElement("div", {
+      }, tree != null && tree.type ? import_react206.default.createElement("div", {
         className: "mml-card"
-      }, tree == null ? void 0 : tree.reactElements) : tree == null ? void 0 : tree.reactElements, submitState.loading && Loading$1 && import_react214.default.createElement(Loading$1, {
+      }, tree == null ? void 0 : tree.reactElements) : tree == null ? void 0 : tree.reactElements, submitState.loading && Loading$1 && import_react206.default.createElement(Loading$1, {
         loading: submitState.loading
-      }), submitState.success && Success$1 && import_react214.default.createElement(Success$1, {
+      }), submitState.success && Success$1 && import_react206.default.createElement(Success$1, {
         success: submitState.success
-      }), submitState.error && Error3 && import_react214.default.createElement(Error3, {
+      }), submitState.error && Error3 && import_react206.default.createElement(Error3, {
         error: submitState.error
       })));
     };
@@ -40855,10 +40855,10 @@ var UnMemoizedConnectionStatus = () => {
 var ConnectionStatus = import_react80.default.memo(UnMemoizedConnectionStatus);
 
 // src/components/MessageList/GiphyPreviewMessage.tsx
-var import_react225 = __toESM(require("react"));
+var import_react226 = __toESM(require("react"));
 
 // src/components/Message/Message.tsx
-var import_react224 = __toESM(require("react"));
+var import_react225 = __toESM(require("react"));
 
 // src/components/Message/hooks/useActionHandler.ts
 var handleActionWarning = `Action handler was called, but it is missing one of its required arguments. 
@@ -44432,7 +44432,7 @@ var useMessageTextStreaming = ({
 };
 
 // src/components/Message/MessageSimple.tsx
-var import_react223 = __toESM(require("react"));
+var import_react224 = __toESM(require("react"));
 var import_clsx59 = __toESM(require("clsx"));
 
 // src/components/Message/icons.tsx
@@ -47027,19 +47027,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",
@@ -47073,7 +47084,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);
@@ -48380,10 +48391,10 @@ var DefaultTriggerProvider = ({
 };
 
 // src/components/MessageInput/EditMessageForm.tsx
-var import_react212 = __toESM(require("react"));
+var import_react216 = __toESM(require("react"));
 
 // src/components/MessageInput/MessageInputFlat.tsx
-var import_react211 = __toESM(require("react"));
+var import_react215 = __toESM(require("react"));
 var import_clsx54 = __toESM(require("clsx"));
 var import_react_dropzone2 = require("react-dropzone");
 
@@ -48425,40 +48436,170 @@ var StopAIGenerationButton = ({
 };
 
 // src/components/MessageInput/QuotedMessagePreview.tsx
-var import_react206 = __toESM(require("react"));
+var import_react210 = __toESM(require("react"));
+
+// src/components/Message/FixedHeightMessage.tsx
+var import_react208 = __toESM(require("react"));
+
+// src/components/MML/MML.tsx
+var import_react207 = __toESM(require("react"));
+var MMLReact = import_react207.default.lazy(async () => {
+  const mml = await Promise.resolve().then(() => (init_mml_react_esm(), mml_react_esm_exports));
+  return { default: mml.MML };
+});
+var MML3 = (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(
+    MMLReact,
+    {
+      className: `mml-align-${align}`,
+      Loading: null,
+      onSubmit: actionHandler,
+      source,
+      Success: null,
+      theme: (theme || "").replace(" ", "-")
+    }
+  ));
+};
+
+// src/components/Message/FixedHeightMessage.tsx
+var selectColor = (number3, dark) => {
+  const hue = number3 * 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_react208.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)(
+    () => getMessageActions(["delete"], { canDelete: role.canDelete }),
+    [role]
+  );
+  const images = message?.attachments?.filter(({ type }) => type === "image");
+  return /* @__PURE__ */ import_react208.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(
+      Avatar,
+      {
+        image: message.user.image,
+        name: message.user.name || message.user.id,
+        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(MML3, { actionHandler: handleAction, align: "left", source: message.mml }), /* @__PURE__ */ import_react208.default.createElement("div", { className: "str-chat__virtual-message__data" }, /* @__PURE__ */ import_react208.default.createElement(
+      MessageActions,
+      {
+        customWrapperClass: "str-chat__virtual-message__actions",
+        getMessageActions: messageActionsHandler,
+        handleDelete: handleDelete2,
+        message,
+        mine: () => role.isMyMessage
+      }
+    ), /* @__PURE__ */ import_react208.default.createElement("span", { className: "str-chat__virtual-message__date" }, /* @__PURE__ */ import_react208.default.createElement(
+      MessageTimestamp,
+      {
+        customClass: "str-chat__message-simple-timestamp",
+        message
+      }
+    ))))))
+  );
+};
+var FixedHeightMessage = import_react208.default.memo(
+  UnMemoizedFixedHeightMessage
+);
+
+// src/components/Message/StreamedMessageText.tsx
+var import_react209 = __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: text8 = "" } = message;
+  const { streamedMessageText } = useMessageTextStreaming({
+    renderingLetterCount,
+    streamingLetterIntervalMs,
+    text: text8
+  });
+  return /* @__PURE__ */ import_react209.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_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(
     "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_react210.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_react210.useMemo)(
+    () => renderText2(quotedMessageText, quotedMessage.mentioned_users),
+    [quotedMessage.mentioned_users, quotedMessageText, renderText2]
+  );
+  const quotedMessageAttachment = (0, import_react210.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_react210.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_react210.default.createElement(
       Avatar2,
       {
         className: "str-chat__avatar--quoted-message-sender",
@@ -48467,33 +48608,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_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(
       "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_react211 = __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_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
   ));
 };
 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_react211.useState)(null);
+  return /* @__PURE__ */ import_react211.default.createElement(
     "div",
     {
       className: (0, import_clsx53.default)("str-chat__link-preview-card", {
@@ -48501,7 +48642,7 @@ var LinkPreviewCard = ({ linkPreview }) => {
       }),
       "data-testid": "link-preview-card"
     },
-    /* @__PURE__ */ import_react207.default.createElement(
+    /* @__PURE__ */ import_react211.default.createElement(
       PopperTooltip,
       {
         offset: [0, 5],
@@ -48510,7 +48651,7 @@ var LinkPreviewCard = ({ linkPreview }) => {
       },
       linkPreview.og_scrape_url
     ),
-    /* @__PURE__ */ import_react207.default.createElement(
+    /* @__PURE__ */ import_react211.default.createElement(
       "div",
       {
         className: "str-chat__link-preview-card__icon-container",
@@ -48518,23 +48659,23 @@ var LinkPreviewCard = ({ linkPreview }) => {
         onMouseLeave: handleLeave,
         ref: setReferenceElement
       },
-      /* @__PURE__ */ import_react207.default.createElement(LinkIcon, null)
+      /* @__PURE__ */ import_react211.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_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(
       "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_react211.default.createElement(CloseIcon, null)
     )
   );
 };
 
 // src/components/ChatAutoComplete/ChatAutoComplete.tsx
-var import_react208 = __toESM(require("react"));
+var import_react212 = __toESM(require("react"));
 var UnMemoizedChatAutoComplete = (props) => {
   const {
     AutocompleteSuggestionItem: SuggestionItem,
@@ -48556,7 +48697,7 @@ var UnMemoizedChatAutoComplete = (props) => {
     const [firstSkin] = emoji.skins ?? [];
     return emoji.native ?? firstSkin.native;
   };
-  const updateInnerRef = (0, import_react208.useCallback)(
+  const updateInnerRef = (0, import_react212.useCallback)(
     (ref) => {
       if (innerRef) {
         innerRef.current = ref;
@@ -48564,7 +48705,7 @@ var UnMemoizedChatAutoComplete = (props) => {
     },
     [innerRef]
   );
-  return /* @__PURE__ */ import_react208.default.createElement(
+  return /* @__PURE__ */ import_react212.default.createElement(
     ReactTextareaAutocomplete,
     {
       additionalTextareaProps: messageInput.additionalTextareaProps,
@@ -48599,15 +48740,15 @@ var UnMemoizedChatAutoComplete = (props) => {
     }
   );
 };
-var ChatAutoComplete = import_react208.default.memo(
+var ChatAutoComplete = import_react212.default.memo(
   UnMemoizedChatAutoComplete
 );
 
 // src/components/AIStateIndicator/AIStateIndicator.tsx
-var import_react210 = __toESM(require("react"));
+var import_react214 = __toESM(require("react"));
 
 // src/components/AIStateIndicator/hooks/useAIState.ts
-var import_react209 = require("react");
+var import_react213 = require("react");
 var AIStates = {
   Error: "AI_STATE_ERROR",
   ExternalSources: "AI_STATE_EXTERNAL_SOURCES",
@@ -48616,8 +48757,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_react213.useState)(AIStates.Idle);
+  (0, import_react213.useEffect)(() => {
     if (!channel) {
       return;
     }
@@ -48657,7 +48798,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_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;
 };
 
 // src/components/MessageInput/MessageInputFlat.tsx
@@ -48702,19 +48843,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_react215.useCallback)(() => channel?.stopAIResponse(), [channel]);
   const [
     showRecordingPermissionDeniedNotification,
     setShowRecordingPermissionDeniedNotification
-  ] = (0, import_react211.useState)(false);
-  const closePermissionDeniedNotification = (0, import_react211.useCallback)(() => {
+  ] = (0, import_react215.useState)(false);
+  const closePermissionDeniedNotification = (0, import_react215.useCallback)(() => {
     setShowRecordingPermissionDeniedNotification(false);
   }, []);
-  const failedUploadsCount = (0, import_react211.useMemo)(
+  const failedUploadsCount = (0, import_react215.useMemo)(
     () => attachments.filter((a2) => a2.localMetadata?.uploadState === "failed").length,
     [attachments]
   );
-  const accept = (0, import_react211.useMemo)(
+  const accept = (0, import_react215.useMemo)(
     () => acceptedFiles.reduce((mediaTypeMap, mediaType) => {
       mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
       return mediaTypeMap;
@@ -48728,7 +48869,7 @@ var MessageInputFlat = () => {
     noClick: true,
     onDrop: uploadNewFiles
   });
-  (0, import_react211.useEffect)(() => {
+  (0, import_react215.useEffect)(() => {
     const handleQuotedMessageUpdate = (e2) => {
       if (e2.message?.id !== quotedMessage?.id) return;
       if (e2.type === "message.deleted") {
@@ -48744,40 +48885,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_react215.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_react215.default.createElement(import_react215.default.Fragment, null, /* @__PURE__ */ import_react215.default.createElement("div", { ...getRootProps({ className: "str-chat__message-input" }) }, recordingEnabled && recordingController.permissionState === "denied" && showRecordingPermissionDeniedNotification && /* @__PURE__ */ import_react215.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_react215.default.createElement(LinkPreviewList2, { linkPreviews: Array.from(linkPreviews.values()) }), isDragActive && /* @__PURE__ */ import_react215.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_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"))
+  ), displayQuotedMessage && /* @__PURE__ */ import_react215.default.createElement(QuotedMessagePreviewHeader, null), /* @__PURE__ */ import_react215.default.createElement("div", { className: "str-chat__message-input-inner" }, /* @__PURE__ */ import_react215.default.createElement(AttachmentSelector2, null), /* @__PURE__ */ import_react215.default.createElement("div", { className: "str-chat__message-textarea-container" }, displayQuotedMessage && /* @__PURE__ */ import_react215.default.createElement(QuotedMessagePreview2, { quotedMessage }), isUploadEnabled && !!(numberOfUploads + failedUploadsCount || attachments.length > 0) && /* @__PURE__ */ import_react215.default.createElement(AttachmentPreviewList2, null), /* @__PURE__ */ import_react215.default.createElement("div", { className: "str-chat__message-textarea-with-emoji-picker" }, /* @__PURE__ */ import_react215.default.createElement(ChatAutoComplete, null), EmojiPicker && /* @__PURE__ */ import_react215.default.createElement(EmojiPicker, null))), shouldDisplayStopAIGeneration ? /* @__PURE__ */ import_react215.default.createElement(StopAIGenerationButton2, { onClick: stopGenerating }) : !hideSendButton && /* @__PURE__ */ import_react215.default.createElement(import_react215.default.Fragment, null, cooldownRemaining ? /* @__PURE__ */ import_react215.default.createElement(
     CooldownTimer2,
     {
       cooldownInterval: cooldownRemaining,
       setCooldownRemaining
     }
-  ) : /* @__PURE__ */ import_react211.default.createElement(import_react211.default.Fragment, null, /* @__PURE__ */ import_react211.default.createElement(
+  ) : /* @__PURE__ */ import_react215.default.createElement(import_react215.default.Fragment, null, /* @__PURE__ */ import_react215.default.createElement(
     SendButton2,
     {
       disabled: !numberOfUploads && !text8.length && attachments.length - failedUploadsCount === 0,
       sendMessage: handleSubmit
     }
-  ), recordingEnabled && /* @__PURE__ */ import_react211.default.createElement(
+  ), recordingEnabled && /* @__PURE__ */ import_react215.default.createElement(
     StartRecordingAudioButton2,
     {
       disabled: isRecording || !asyncMessagesMultiSendEnabled && attachments.some(
@@ -48795,22 +48936,22 @@ var MessageInputFlat = () => {
 var EditMessageForm = () => {
   const { t: t2 } = useTranslationContext("EditMessageForm");
   const { clearEditingState, handleSubmit } = useMessageInputContext("EditMessageForm");
-  (0, import_react212.useEffect)(() => {
+  (0, import_react216.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_react216.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_react216.default.createElement(MessageInputFlat, null),
+    /* @__PURE__ */ import_react216.default.createElement("div", { className: "str-chat__edit-message-form-options" }, /* @__PURE__ */ import_react216.default.createElement(
       "button",
       {
         className: "str-chat__edit-message-cancel",
@@ -48818,7 +48959,7 @@ var EditMessageForm = () => {
         onClick: clearEditingState
       },
       t2("Cancel")
-    ), /* @__PURE__ */ import_react212.default.createElement(
+    ), /* @__PURE__ */ import_react216.default.createElement(
       "button",
       {
         className: "str-chat__edit-message-send",
@@ -48831,7 +48972,7 @@ var EditMessageForm = () => {
 };
 
 // src/components/MessageInput/MessageInput.tsx
-var import_react213 = __toESM(require("react"));
+var import_react217 = __toESM(require("react"));
 var MessageInputProvider = (props) => {
   const cooldownTimerState = useCooldownTimer();
   const messageInputState = useMessageInputState(props);
@@ -48842,7 +48983,7 @@ var MessageInputProvider = (props) => {
     ...props,
     emojiSearchIndex: props.emojiSearchIndex ?? emojiSearchIndex
   });
-  return /* @__PURE__ */ import_react213.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
+  return /* @__PURE__ */ import_react217.default.createElement(MessageInputContextProvider, { value: messageInputContextValue }, props.children);
 };
 var UnMemoizedMessageInput = (props) => {
   const { Input: PropInput } = props;
@@ -48851,57 +48992,35 @@ var UnMemoizedMessageInput = (props) => {
   const Input3 = 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(Input3, 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(Input3, null))));
+    return /* @__PURE__ */ import_react217.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react217.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react217.default.createElement(Input3, null)));
+  return /* @__PURE__ */ import_react217.default.createElement(DialogManagerProvider, { id: dialogManagerId }, /* @__PURE__ */ import_react217.default.createElement(MessageInputProvider, { ...props }, /* @__PURE__ */ import_react217.default.createElement(TriggerProvider, null, /* @__PURE__ */ import_react217.default.createElement(Input3, null))));
 };
-var MessageInput = import_react213.default.memo(
+var MessageInput = import_react217.default.memo(
   UnMemoizedMessageInput
 );
 
-// src/components/MML/MML.tsx
-var import_react215 = __toESM(require("react"));
-var MMLReact = import_react215.default.lazy(async () => {
-  const mml = await Promise.resolve().then(() => (init_mml_react_esm(), mml_react_esm_exports));
-  return { default: mml.MML };
-});
-var MML3 = (props) => {
-  const { actionHandler, align = "right", source } = props;
-  const { theme } = useChatContext("MML");
-  return /* @__PURE__ */ import_react215.default.createElement(import_react215.Suspense, { fallback: null }, /* @__PURE__ */ import_react215.default.createElement(
-    MMLReact,
-    {
-      className: `mml-align-${align}`,
-      Loading: null,
-      onSubmit: actionHandler,
-      source,
-      Success: null,
-      theme: (theme || "").replace(" ", "-")
-    }
-  ));
-};
-
 // src/components/Reactions/ReactionsList.tsx
-var import_react219 = __toESM(require("react"));
+var import_react221 = __toESM(require("react"));
 var import_clsx56 = __toESM(require("clsx"));
 
 // src/components/Reactions/ReactionsListModal.tsx
-var import_react217 = __toESM(require("react"));
+var import_react219 = __toESM(require("react"));
 var import_clsx55 = __toESM(require("clsx"));
 
 // src/components/Reactions/hooks/useFetchReactions.ts
-var import_react216 = require("react");
+var import_react218 = require("react");
 function useFetchReactions(options) {
   const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext("useFetchReactions");
-  const [reactions, setReactions] = (0, import_react216.useState)([]);
+  const [reactions, setReactions] = (0, import_react218.useState)([]);
   const {
     handleFetchReactions: propHandleFetchReactions,
     reactionType,
     shouldFetch,
     sort
   } = options;
-  const [isLoading, setIsLoading] = (0, import_react216.useState)(shouldFetch);
+  const [isLoading, setIsLoading] = (0, import_react218.useState)(shouldFetch);
   const handleFetchReactions = propHandleFetchReactions ?? contextHandleFetchReactions;
-  (0, import_react216.useEffect)(() => {
+  (0, import_react218.useEffect)(() => {
     if (!shouldFetch) {
       return;
     }
@@ -48957,24 +49076,24 @@ function ReactionsListModal({
     shouldFetch: modalProps.open,
     sort: reactionDetailsSort
   });
-  const reactionDetailsWithLegacyFallback = (0, import_react217.useMemo)(
+  const reactionDetailsWithLegacyFallback = (0, import_react219.useMemo)(
     () => legacySortReactionDetails ? [...reactionDetails].sort(legacySortReactionDetails) : reactionDetails,
     [legacySortReactionDetails, reactionDetails]
   );
-  return /* @__PURE__ */ import_react217.default.createElement(
+  return /* @__PURE__ */ import_react219.default.createElement(
     Modal,
     {
       ...modalProps,
       className: (0, import_clsx55.default)("str-chat__message-reactions-details-modal", modalProps.className)
     },
-    /* @__PURE__ */ import_react217.default.createElement(
+    /* @__PURE__ */ import_react219.default.createElement(
       "div",
       {
         className: "str-chat__message-reactions-details",
         "data-testid": "reactions-list-modal"
       },
-      /* @__PURE__ */ import_react217.default.createElement("div", { className: "str-chat__message-reactions-details-reaction-types" }, reactions.map(
-        ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react217.default.createElement(
+      /* @__PURE__ */ import_react219.default.createElement("div", { className: "str-chat__message-reactions-details-reaction-types" }, reactions.map(
+        ({ EmojiComponent, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react219.default.createElement(
           "div",
           {
             className: (0, import_clsx55.default)("str-chat__message-reactions-details-reaction-type", {
@@ -48986,25 +49105,25 @@ function ReactionsListModal({
               reactionType
             )
           },
-          /* @__PURE__ */ import_react217.default.createElement("span", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback" }, /* @__PURE__ */ import_react217.default.createElement(EmojiComponent, null)),
+          /* @__PURE__ */ import_react219.default.createElement("span", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback" }, /* @__PURE__ */ import_react219.default.createElement(EmojiComponent, null)),
           "\xA0",
-          /* @__PURE__ */ import_react217.default.createElement("span", { className: "str-chat__message-reaction-count" }, reactionCount)
+          /* @__PURE__ */ import_react219.default.createElement("span", { className: "str-chat__message-reaction-count" }, reactionCount)
         )
       )),
-      SelectedEmojiComponent && /* @__PURE__ */ import_react217.default.createElement("div", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big" }, /* @__PURE__ */ import_react217.default.createElement(SelectedEmojiComponent, null)),
-      /* @__PURE__ */ import_react217.default.createElement(
+      SelectedEmojiComponent && /* @__PURE__ */ import_react219.default.createElement("div", { className: "str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big" }, /* @__PURE__ */ import_react219.default.createElement(SelectedEmojiComponent, null)),
+      /* @__PURE__ */ import_react219.default.createElement(
         "div",
         {
           className: "str-chat__message-reactions-details-reacting-users",
           "data-testid": "all-reacting-users"
         },
-        areReactionsLoading ? /* @__PURE__ */ import_react217.default.createElement(LoadingIndicator, null) : reactionDetailsWithLegacyFallback.map(({ user }) => /* @__PURE__ */ import_react217.default.createElement(
+        areReactionsLoading ? /* @__PURE__ */ import_react219.default.createElement(LoadingIndicator, null) : reactionDetailsWithLegacyFallback.map(({ user }) => /* @__PURE__ */ import_react219.default.createElement(
           "div",
           {
             className: "str-chat__message-reactions-details-reacting-user",
             key: user?.id
           },
-          /* @__PURE__ */ import_react217.default.createElement(
+          /* @__PURE__ */ import_react219.default.createElement(
             Avatar,
             {
               className: "stream-chat__avatar--reaction",
@@ -49013,7 +49132,7 @@ function ReactionsListModal({
               name: user?.name || user?.id
             }
           ),
-          /* @__PURE__ */ import_react217.default.createElement(
+          /* @__PURE__ */ import_react219.default.createElement(
             "span",
             {
               className: "str-chat__user-item--name",
@@ -49028,7 +49147,7 @@ function ReactionsListModal({
 }
 
 // src/components/Reactions/hooks/useProcessReactions.tsx
-var import_react218 = require("react");
+var import_react220 = require("react");
 var defaultReactionsSort = (a2, b) => {
   if (a2.firstReactionAt && b.firstReactionAt) {
     return +a2.firstReactionAt - +b.firstReactionAt;
@@ -49050,19 +49169,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_react218.useCallback)(
+  const isOwnReaction = (0, import_react220.useCallback)(
     (reactionType) => ownReactions?.some((reaction) => reaction.type === reactionType) ?? false,
     [ownReactions]
   );
-  const getEmojiByReactionType = (0, import_react218.useCallback)(
+  const getEmojiByReactionType = (0, import_react220.useCallback)(
     (reactionType) => reactionOptions.find(({ type }) => type === reactionType)?.Component ?? null,
     [reactionOptions]
   );
-  const isSupportedReaction = (0, import_react218.useCallback)(
+  const isSupportedReaction = (0, import_react220.useCallback)(
     (reactionType) => reactionOptions.some((reactionOption) => reactionOption.type === reactionType),
     [reactionOptions]
   );
-  const getLatestReactedUserNames = (0, import_react218.useCallback)(
+  const getLatestReactedUserNames = (0, import_react220.useCallback)(
     (reactionType) => latestReactions?.flatMap((reaction) => {
       if (reactionType && reactionType === reaction.type) {
         const username = reaction.user?.name || reaction.user?.id;
@@ -49072,7 +49191,7 @@ var useProcessReactions = (params) => {
     }) ?? [],
     [latestReactions]
   );
-  const existingReactions = (0, import_react218.useMemo)(() => {
+  const existingReactions = (0, import_react220.useMemo)(() => {
     if (!reactionGroups) {
       return [];
     }
@@ -49106,7 +49225,7 @@ var useProcessReactions = (params) => {
     sortReactions
   ]);
   const hasReactions = existingReactions.length > 0;
-  const totalReactionCount = (0, import_react218.useMemo)(
+  const totalReactionCount = (0, import_react220.useMemo)(
     () => existingReactions.reduce((total, { reactionCount }) => total + reactionCount, 0),
     [existingReactions]
   );
@@ -49128,7 +49247,7 @@ var UnMemoizedReactionsList = (props) => {
     ...rest
   } = props;
   const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
-  const [selectedReactionType, setSelectedReactionType] = (0, import_react219.useState)(null);
+  const [selectedReactionType, setSelectedReactionType] = (0, import_react221.useState)(null);
   const { t: t2 } = useTranslationContext("ReactionsList");
   const { ReactionsListModal: ReactionsListModal2 = ReactionsListModal } = useComponentContext();
   const handleReactionButtonClick = (reactionType) => {
@@ -49138,7 +49257,7 @@ var UnMemoizedReactionsList = (props) => {
     setSelectedReactionType(reactionType);
   };
   if (!hasReactions) return null;
-  return /* @__PURE__ */ import_react219.default.createElement(import_react219.default.Fragment, null, /* @__PURE__ */ import_react219.default.createElement(
+  return /* @__PURE__ */ import_react221.default.createElement(import_react221.default.Fragment, null, /* @__PURE__ */ import_react221.default.createElement(
     "div",
     {
       "aria-label": t2("aria/Reaction list"),
@@ -49149,8 +49268,8 @@ var UnMemoizedReactionsList = (props) => {
       "data-testid": "reaction-list",
       role: "figure"
     },
-    /* @__PURE__ */ import_react219.default.createElement("ul", { className: "str-chat__message-reactions" }, existingReactions.map(
-      ({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react219.default.createElement(
+    /* @__PURE__ */ import_react221.default.createElement("ul", { className: "str-chat__message-reactions" }, existingReactions.map(
+      ({ EmojiComponent, isOwnReaction, reactionCount, reactionType }) => EmojiComponent && /* @__PURE__ */ import_react221.default.createElement(
         "li",
         {
           className: (0, import_clsx56.default)("str-chat__message-reaction", {
@@ -49158,7 +49277,7 @@ var UnMemoizedReactionsList = (props) => {
           }),
           key: reactionType
         },
-        /* @__PURE__ */ import_react219.default.createElement(
+        /* @__PURE__ */ import_react221.default.createElement(
           "button",
           {
             "aria-label": `Reactions: ${reactionType}`,
@@ -49166,9 +49285,9 @@ var UnMemoizedReactionsList = (props) => {
             onClick: () => handleReactionButtonClick(reactionType),
             type: "button"
           },
-          /* @__PURE__ */ import_react219.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react219.default.createElement(EmojiComponent, null)),
+          /* @__PURE__ */ import_react221.default.createElement("span", { className: "str-chat__message-reaction-emoji" }, /* @__PURE__ */ import_react221.default.createElement(EmojiComponent, null)),
           "\xA0",
-          /* @__PURE__ */ import_react219.default.createElement(
+          /* @__PURE__ */ import_react221.default.createElement(
             "span",
             {
               className: "str-chat__message-reaction-count",
@@ -49178,8 +49297,8 @@ var UnMemoizedReactionsList = (props) => {
           )
         )
       )
-    ), /* @__PURE__ */ import_react219.default.createElement("li", null, /* @__PURE__ */ import_react219.default.createElement("span", { className: "str-chat__reaction-list--counter" }, totalReactionCount)))
-  ), selectedReactionType !== null && /* @__PURE__ */ import_react219.default.createElement(
+    ), /* @__PURE__ */ import_react221.default.createElement("li", null, /* @__PURE__ */ import_react221.default.createElement("span", { className: "str-chat__reaction-list--counter" }, totalReactionCount)))
+  ), selectedReactionType !== null && /* @__PURE__ */ import_react221.default.createElement(
     ReactionsListModal2,
     {
       handleFetchReactions,
@@ -49192,12 +49311,12 @@ var UnMemoizedReactionsList = (props) => {
     }
   ));
 };
-var ReactionsList = import_react219.default.memo(
+var ReactionsList = import_react221.default.memo(
   UnMemoizedReactionsList
 );
 
 // src/components/Reactions/SimpleReactionsList.tsx
-var import_react220 = __toESM(require("react"));
+var import_react222 = __toESM(require("react"));
 var import_clsx57 = __toESM(require("clsx"));
 var WithTooltip = ({
   children,
@@ -49205,12 +49324,12 @@ var WithTooltip = ({
   onMouseLeave,
   title
 }) => {
-  const [referenceElement, setReferenceElement] = (0, import_react220.useState)(null);
+  const [referenceElement, setReferenceElement] = (0, import_react222.useState)(null);
   const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers({
     onMouseEnter,
     onMouseLeave
   });
-  return /* @__PURE__ */ import_react220.default.createElement(import_react220.default.Fragment, null, /* @__PURE__ */ import_react220.default.createElement(PopperTooltip, { referenceElement, visible: tooltipVisible }, title), /* @__PURE__ */ import_react220.default.createElement(
+  return /* @__PURE__ */ import_react222.default.createElement(import_react222.default.Fragment, null, /* @__PURE__ */ import_react222.default.createElement(PopperTooltip, { referenceElement, visible: tooltipVisible }, title), /* @__PURE__ */ import_react222.default.createElement(
     "span",
     {
       onMouseEnter: handleEnter,
@@ -49226,7 +49345,7 @@ var UnMemoizedSimpleReactionsList = (props) => {
   const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
   const handleReaction = propHandleReaction || contextHandleReaction;
   if (!hasReactions) return null;
-  return /* @__PURE__ */ import_react220.default.createElement("div", { className: "str-chat__message-reactions-container" }, /* @__PURE__ */ import_react220.default.createElement(
+  return /* @__PURE__ */ import_react222.default.createElement("div", { className: "str-chat__message-reactions-container" }, /* @__PURE__ */ import_react222.default.createElement(
     "ul",
     {
       className: "str-chat__simple-reactions-list str-chat__message-reactions",
@@ -49235,7 +49354,7 @@ var UnMemoizedSimpleReactionsList = (props) => {
     existingReactions.map(
       ({ EmojiComponent, isOwnReaction, latestReactedUserNames, reactionType }) => {
         const tooltipContent = latestReactedUserNames.join(", ");
-        return EmojiComponent && /* @__PURE__ */ import_react220.default.createElement(
+        return EmojiComponent && /* @__PURE__ */ import_react222.default.createElement(
           "li",
           {
             className: (0, import_clsx57.default)("str-chat__simple-reactions-list-item", {
@@ -49245,19 +49364,19 @@ var UnMemoizedSimpleReactionsList = (props) => {
             onClick: (event) => handleReaction(reactionType, event),
             onKeyUp: (event) => handleReaction(reactionType, event)
           },
-          /* @__PURE__ */ import_react220.default.createElement(WithTooltip, { title: tooltipContent }, /* @__PURE__ */ import_react220.default.createElement(EmojiComponent, null))
+          /* @__PURE__ */ import_react222.default.createElement(WithTooltip, { title: tooltipContent }, /* @__PURE__ */ import_react222.default.createElement(EmojiComponent, null))
         );
       }
     ),
-    /* @__PURE__ */ import_react220.default.createElement("li", { className: "str-chat__simple-reactions-list-item--last-number" }, totalReactionCount)
+    /* @__PURE__ */ import_react222.default.createElement("li", { className: "str-chat__simple-reactions-list-item--last-number" }, totalReactionCount)
   ));
 };
-var SimpleReactionsList = import_react220.default.memo(
+var SimpleReactionsList = import_react222.default.memo(
   UnMemoizedSimpleReactionsList
 );
 
 // src/components/Message/MessageEditedTimestamp.tsx
-var import_react221 = __toESM(require("react"));
+var import_react223 = __toESM(require("react"));
 var import_clsx58 = __toESM(require("clsx"));
 function MessageEditedTimestamp({
   message: propMessage,
@@ -49273,7 +49392,7 @@ function MessageEditedTimestamp({
   if (!isMessageEdited(message)) {
     return null;
   }
-  return /* @__PURE__ */ import_react221.default.createElement(
+  return /* @__PURE__ */ import_react223.default.createElement(
     "div",
     {
       className: (0, import_clsx58.default)(
@@ -49284,36 +49403,10 @@ function MessageEditedTimestamp({
     },
     t2("Edited"),
     " ",
-    /* @__PURE__ */ import_react221.default.createElement(Timestamp2, { timestamp: message.message_text_updated_at, ...timestampProps })
+    /* @__PURE__ */ import_react223.default.createElement(Timestamp2, { timestamp: message.message_text_updated_at, ...timestampProps })
   );
 }
 
-// src/components/Message/StreamedMessageText.tsx
-var import_react222 = __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: text8 = "" } = message;
-  const { streamedMessageText } = useMessageTextStreaming({
-    renderingLetterCount,
-    streamingLetterIntervalMs,
-    text: text8
-  });
-  return /* @__PURE__ */ import_react222.default.createElement(
-    MessageText,
-    {
-      message: { ...message, text: streamedMessageText },
-      renderText: renderText2
-    }
-  );
-};
-
 // src/components/Message/MessageSimple.tsx
 var MessageSimpleWithContext = (props) => {
   const {
@@ -49337,8 +49430,8 @@ var MessageSimpleWithContext = (props) => {
   } = props;
   const { client } = useChatContext("MessageSimple");
   const { t: t2 } = useTranslationContext("MessageSimple");
-  const [isBounceDialogOpen, setIsBounceDialogOpen] = (0, import_react223.useState)(false);
-  const [isEditedTimestampOpen, setEditedTimestampOpen] = (0, import_react223.useState)(false);
+  const [isBounceDialogOpen, setIsBounceDialogOpen] = (0, import_react224.useState)(false);
+  const [isEditedTimestampOpen, setEditedTimestampOpen] = (0, import_react224.useState)(false);
   const {
     Attachment: Attachment2 = Attachment,
     Avatar: Avatar2 = Avatar,
@@ -49358,7 +49451,7 @@ var MessageSimpleWithContext = (props) => {
   } = useComponentContext("MessageSimple");
   const hasAttachment = messageHasAttachments(message);
   const hasReactions = messageHasReactions(message);
-  const isAIGenerated = (0, import_react223.useMemo)(
+  const isAIGenerated = (0, import_react224.useMemo)(
     () => isMessageAIGenerated?.(message),
     [isMessageAIGenerated, message]
   );
@@ -49366,7 +49459,7 @@ var MessageSimpleWithContext = (props) => {
     return null;
   }
   if (message.deleted_at || message.type === "deleted") {
-    return /* @__PURE__ */ import_react223.default.createElement(MessageDeleted2, { message });
+    return /* @__PURE__ */ import_react224.default.createElement(MessageDeleted2, { message });
   }
   const showMetadata = !groupedByUser || endOfGroup;
   const showReplyCountButton = !threadList && !!message.reply_count;
@@ -49400,14 +49493,14 @@ var MessageSimpleWithContext = (props) => {
     }
   );
   const poll = message.poll_id && client.polls.fromState(message.poll_id);
-  return /* @__PURE__ */ import_react223.default.createElement(import_react223.default.Fragment, null, editing && /* @__PURE__ */ import_react223.default.createElement(
+  return /* @__PURE__ */ import_react224.default.createElement(import_react224.default.Fragment, null, editing && /* @__PURE__ */ import_react224.default.createElement(
     Modal,
     {
       className: "str-chat__edit-message-modal",
       onClose: clearEditingState,
       open: editing
     },
-    /* @__PURE__ */ import_react223.default.createElement(
+    /* @__PURE__ */ import_react224.default.createElement(
       MessageInput,
       {
         clearEditingState,
@@ -49418,14 +49511,14 @@ var MessageSimpleWithContext = (props) => {
         ...additionalMessageInputProps
       }
     )
-  ), isBounceDialogOpen && /* @__PURE__ */ import_react223.default.createElement(
+  ), isBounceDialogOpen && /* @__PURE__ */ import_react224.default.createElement(
     MessageBounceModal,
     {
       MessageBouncePrompt: MessageBouncePrompt2,
       onClose: () => setIsBounceDialogOpen(false),
       open: isBounceDialogOpen
     }
-  ), /* @__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(
+  ), /* @__PURE__ */ import_react224.default.createElement("div", { className: rootClassName2, key: message.id }, PinIndicator2 && /* @__PURE__ */ import_react224.default.createElement(PinIndicator2, null), message.user && /* @__PURE__ */ import_react224.default.createElement(
     Avatar2,
     {
       image: message.user.image,
@@ -49434,7 +49527,7 @@ var MessageSimpleWithContext = (props) => {
       onMouseOver: onUserHover,
       user: message.user
     }
-  ), /* @__PURE__ */ import_react223.default.createElement(
+  ), /* @__PURE__ */ import_react224.default.createElement(
     "div",
     {
       className: (0, import_clsx59.default)("str-chat__message-inner", {
@@ -49444,37 +49537,37 @@ var MessageSimpleWithContext = (props) => {
       onClick: handleClick,
       onKeyUp: handleClick
     },
-    /* @__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(
+    /* @__PURE__ */ import_react224.default.createElement(MessageActions2, null),
+    /* @__PURE__ */ import_react224.default.createElement("div", { className: "str-chat__message-reactions-host" }, hasReactions && /* @__PURE__ */ import_react224.default.createElement(ReactionsList2, { reverse: true })),
+    /* @__PURE__ */ import_react224.default.createElement("div", { className: "str-chat__message-bubble" }, poll && /* @__PURE__ */ import_react224.default.createElement(Poll, { poll }), message.attachments?.length && !message.quoted_message ? /* @__PURE__ */ import_react224.default.createElement(
       Attachment2,
       {
         actionHandler: handleAction,
         attachments: message.attachments
       }
-    ) : 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(
+    ) : null, isAIGenerated ? /* @__PURE__ */ import_react224.default.createElement(StreamedMessageText2, { message, renderText: renderText2 }) : /* @__PURE__ */ import_react224.default.createElement(MessageText, { message, renderText: renderText2 }), message.mml && /* @__PURE__ */ import_react224.default.createElement(
       MML3,
       {
         actionHandler: handleAction,
         align: isMyMessage() ? "right" : "left",
         source: message.mml
       }
-    ), /* @__PURE__ */ import_react223.default.createElement(MessageErrorIcon, null))
-  ), showReplyCountButton && /* @__PURE__ */ import_react223.default.createElement(
+    ), /* @__PURE__ */ import_react224.default.createElement(MessageErrorIcon, null))
+  ), showReplyCountButton && /* @__PURE__ */ import_react224.default.createElement(
     MessageRepliesCountButton2,
     {
       onClick: handleOpenThread,
       reply_count: message.reply_count
     }
-  ), 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 }))));
+  ), showMetadata && /* @__PURE__ */ import_react224.default.createElement("div", { className: "str-chat__message-metadata" }, /* @__PURE__ */ import_react224.default.createElement(MessageStatus2, null), !isMyMessage() && !!message.user && /* @__PURE__ */ import_react224.default.createElement("span", { className: "str-chat__message-simple-name" }, message.user.name || message.user.id), /* @__PURE__ */ import_react224.default.createElement(MessageTimestamp2, { customClass: "str-chat__message-simple-timestamp" }), isEdited && /* @__PURE__ */ import_react224.default.createElement("span", { className: "str-chat__mesage-simple-edited" }, t2("Edited")), isEdited && /* @__PURE__ */ import_react224.default.createElement(MessageEditedTimestamp, { calendar: true, open: isEditedTimestampOpen }))));
 };
-var MemoizedMessageSimple = import_react223.default.memo(
+var MemoizedMessageSimple = import_react224.default.memo(
   MessageSimpleWithContext,
   areMessageUIPropsEqual
 );
 var MessageSimple = (props) => {
   const messageContext = useMessageContext("MessageSimple");
-  return /* @__PURE__ */ import_react223.default.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
+  return /* @__PURE__ */ import_react224.default.createElement(MemoizedMessageSimple, { ...messageContext, ...props });
 };
 
 // src/components/Message/Message.tsx
@@ -49510,11 +49603,11 @@ var MessageWithContext = (props) => {
     canReply,
     isMyMessage
   } = userRoles;
-  const messageIsUnread = (0, import_react224.useMemo)(
+  const messageIsUnread = (0, import_react225.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_react224.useCallback)(
+  const messageActionsHandler = (0, import_react225.useCallback)(
     () => getMessageActions(messageActions, {
       canDelete,
       canEdit,
@@ -49568,9 +49661,9 @@ var MessageWithContext = (props) => {
     onUserHover,
     setEditingState: setEdit
   };
-  return /* @__PURE__ */ import_react224.default.createElement(MessageProvider, { value: messageContextValue }, /* @__PURE__ */ import_react224.default.createElement(MessageUIComponent, { groupedByUser }));
+  return /* @__PURE__ */ import_react225.default.createElement(MessageProvider, { value: messageContextValue }, /* @__PURE__ */ import_react225.default.createElement(MessageUIComponent, { groupedByUser }));
 };
-var MemoizedMessage = import_react224.default.memo(
+var MemoizedMessage = import_react225.default.memo(
   MessageWithContext,
   areMessagePropsEqual
 );
@@ -49637,7 +49730,7 @@ var Message = (props) => {
     notify: addNotification
   });
   const highlighted = highlightedMessageId === message.id;
-  return /* @__PURE__ */ import_react224.default.createElement(
+  return /* @__PURE__ */ import_react225.default.createElement(
     MemoizedMessage,
     {
       additionalMessageInputProps: props.additionalMessageInputProps,
@@ -49689,7 +49782,7 @@ var Message = (props) => {
 // src/components/MessageList/GiphyPreviewMessage.tsx
 var GiphyPreviewMessage = (props) => {
   const { message } = props;
-  return /* @__PURE__ */ import_react225.default.createElement("div", { className: "giphy-preview-message" }, /* @__PURE__ */ import_react225.default.createElement(Message, { message }));
+  return /* @__PURE__ */ import_react226.default.createElement("div", { className: "giphy-preview-message" }, /* @__PURE__ */ import_react226.default.createElement(Message, { message }));
 };
 
 // src/components/MessageList/MessageList.tsx
@@ -49697,7 +49790,7 @@ var import_clsx61 = __toESM(require("clsx"));
 var import_react245 = __toESM(require("react"));
 
 // src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
-var import_react226 = require("react");
+var import_react227 = require("react");
 
 // src/components/MessageList/utils.ts
 var import_nanoid9 = require("nanoid");
@@ -49880,6 +49973,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;
@@ -49903,7 +49997,7 @@ var useEnrichedMessages = (args) => {
   } = args;
   const { client } = useChatContext("useEnrichedMessages");
   const { HeaderComponent } = useComponentContext("useEnrichedMessages");
-  const lastRead = (0, import_react226.useMemo)(() => channel.lastRead?.(), [channel]);
+  const lastRead = (0, import_react227.useMemo)(() => channel.lastRead?.(), [channel]);
   const enableDateSeparator = !disableDateSeparator;
   let messagesWithDates = !enableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator ? messages : processMessages({
     enableDateSeparator,
@@ -49918,7 +50012,7 @@ var useEnrichedMessages = (args) => {
     messagesWithDates = insertIntro(messagesWithDates, headerPosition);
   }
   const groupStylesFn = groupStyles || getGroupStyles;
-  const messageGroupStyles = (0, import_react226.useMemo)(
+  const messageGroupStyles = (0, import_react227.useMemo)(
     () => messagesWithDates.reduce((acc, message, i) => {
       const style = groupStylesFn(
         message,
@@ -49937,13 +50031,13 @@ var useEnrichedMessages = (args) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useMessageListElements.tsx
-var import_react228 = require("react");
+var import_react229 = require("react");
 
 // src/components/MessageList/hooks/useLastReadData.ts
-var import_react227 = require("react");
+var import_react228 = require("react");
 var useLastReadData = (props) => {
   const { messages, read, returnAllReadData, userID } = props;
-  return (0, import_react227.useMemo)(
+  return (0, import_react228.useMemo)(
     () => getReadStates(
       messages.filter(({ user }) => user?.id === userID),
       read,
@@ -49975,11 +50069,11 @@ var useMessageListElements = (props) => {
     returnAllReadData,
     userID: client.userID
   });
-  const lastReceivedMessageId = (0, import_react228.useMemo)(
+  const lastReceivedMessageId = (0, import_react229.useMemo)(
     () => getLastReceived(enrichedMessages),
     [enrichedMessages]
   );
-  const elements = (0, import_react228.useMemo)(
+  const elements = (0, import_react229.useMemo)(
     () => renderMessages({
       channelUnreadUiState,
       components,
@@ -50006,7 +50100,7 @@ var useMessageListElements = (props) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts
-var import_react229 = require("react");
+var import_react230 = require("react");
 function useMessageListScrollManager(params) {
   const {
     loadMoreScrollThreshold,
@@ -50017,13 +50111,13 @@ function useMessageListScrollManager(params) {
     showNewMessages
   } = params;
   const { client } = useChatContext("useMessageListScrollManager");
-  const measures = (0, import_react229.useRef)({
+  const measures = (0, import_react230.useRef)({
     offsetHeight: 0,
     scrollHeight: 0
   });
-  const messages = (0, import_react229.useRef)(void 0);
-  const scrollTop = (0, import_react229.useRef)(0);
-  (0, import_react229.useLayoutEffect)(() => {
+  const messages = (0, import_react230.useRef)(void 0);
+  const scrollTop = (0, import_react230.useRef)(0);
+  (0, import_react230.useLayoutEffect)(() => {
     const prevMeasures = measures.current;
     const prevMessages = messages.current;
     const newMessages = params.messages;
@@ -50063,7 +50157,7 @@ function useMessageListScrollManager(params) {
 }
 
 // src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx
-var import_react230 = require("react");
+var import_react231 = require("react");
 var useScrollLocationLogic = (params) => {
   const {
     hasMoreNewer,
@@ -50073,12 +50167,12 @@ var useScrollLocationLogic = (params) => {
     scrolledUpThreshold = 200,
     suppressAutoscroll
   } = params;
-  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)(() => {
+  const [hasNewMessages, setHasNewMessages] = (0, import_react231.useState)(false);
+  const [wrapperRect, setWrapperRect] = (0, import_react231.useState)();
+  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = (0, import_react231.useState)(true);
+  const closeToBottom = (0, import_react231.useRef)(false);
+  const closeToTop = (0, import_react231.useRef)(false);
+  const scrollToBottom = (0, import_react231.useCallback)(() => {
     if (!listElement?.scrollTo || hasMoreNewer || suppressAutoscroll) {
       return;
     }
@@ -50087,7 +50181,7 @@ var useScrollLocationLogic = (params) => {
     });
     setHasNewMessages(false);
   }, [listElement, hasMoreNewer, suppressAutoscroll]);
-  (0, import_react230.useLayoutEffect)(() => {
+  (0, import_react231.useLayoutEffect)(() => {
     if (listElement) {
       setWrapperRect(listElement.getBoundingClientRect());
       scrollToBottom();
@@ -50107,7 +50201,7 @@ var useScrollLocationLogic = (params) => {
     scrollToBottom,
     showNewMessages: () => setHasNewMessages(true)
   });
-  const onScroll = (0, import_react230.useCallback)(
+  const onScroll = (0, import_react231.useCallback)(
     (event) => {
       const element4 = event.target;
       const scrollTop = element4.scrollTop;
@@ -50138,22 +50232,22 @@ var useScrollLocationLogic = (params) => {
 };
 
 // src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts
-var import_react233 = require("react");
+var import_react234 = require("react");
 
 // src/components/MessageList/MessageListMainPanel.tsx
-var import_react231 = __toESM(require("react"));
+var import_react232 = __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_react231.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
+var MessageListMainPanel = ({ children }) => /* @__PURE__ */ import_react232.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
 
 // src/components/MessageList/UnreadMessagesSeparator.tsx
-var import_react232 = __toESM(require("react"));
+var import_react233 = __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_react232.default.createElement(
+  return /* @__PURE__ */ import_react233.default.createElement(
     "div",
     {
       className: UNREAD_MESSAGE_SEPARATOR_CLASS,
@@ -50179,10 +50273,10 @@ var useUnreadMessagesNotification = ({
   unreadCount
 }) => {
   const { messages } = useChannelStateContext("UnreadMessagesNotification");
-  const [show, setShow] = (0, import_react233.useState)(false);
-  const isScrolledAboveTargetTop = (0, import_react233.useRef)(false);
+  const [show, setShow] = (0, import_react234.useState)(false);
+  const isScrolledAboveTargetTop = (0, import_react234.useRef)(false);
   const intersectionObserverIsSupported = typeof IntersectionObserver !== "undefined";
-  (0, import_react233.useEffect)(() => {
+  (0, import_react234.useEffect)(() => {
     if (!(unreadCount && intersectionObserverIsSupported)) {
       setShow(false);
       return;
@@ -50229,7 +50323,7 @@ var useUnreadMessagesNotification = ({
     showAlways,
     unreadCount
   ]);
-  (0, import_react233.useEffect)(() => {
+  (0, import_react234.useEffect)(() => {
     if (unreadCount && isMessageListScrolledToBottom && isScrolledAboveTargetTop.current) {
       setShow(true);
       isScrolledAboveTargetTop.current = false;
@@ -50239,7 +50333,7 @@ var useUnreadMessagesNotification = ({
 };
 
 // src/components/MessageList/hooks/useMarkRead.ts
-var import_react234 = require("react");
+var import_react235 = 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;
@@ -50253,7 +50347,7 @@ var useMarkRead = ({
   const { client } = useChatContext("useMarkRead");
   const { markRead, setChannelUnreadUiState } = useChannelActionContext("useMarkRead");
   const { channel } = useChannelStateContext("useMarkRead");
-  (0, import_react234.useEffect)(() => {
+  (0, import_react235.useEffect)(() => {
     const shouldMarkRead = () => !document.hidden && !wasMarkedUnread && !messageListIsThread && isMessageListScrolledToBottom && client.user?.id && !hasReadLastMessage(channel, client.user.id);
     const onVisibilityChange = () => {
       if (shouldMarkRead()) markRead();
@@ -50312,11 +50406,11 @@ function getPreviousLastMessage(messages, newMessage) {
 }
 
 // src/components/MessageList/MessageNotification.tsx
-var import_react235 = __toESM(require("react"));
+var import_react236 = __toESM(require("react"));
 var UnMemoizedMessageNotification = (props) => {
   const { children, onClick, showNotification = true } = props;
   if (!showNotification) return null;
-  return /* @__PURE__ */ import_react235.default.createElement(
+  return /* @__PURE__ */ import_react236.default.createElement(
     "button",
     {
       "aria-live": "polite",
@@ -50327,12 +50421,12 @@ var UnMemoizedMessageNotification = (props) => {
     children
   );
 };
-var MessageNotification = import_react235.default.memo(
+var MessageNotification = import_react236.default.memo(
   UnMemoizedMessageNotification
 );
 
 // src/components/MessageList/MessageListNotifications.tsx
-var import_react236 = __toESM(require("react"));
+var import_react237 = __toESM(require("react"));
 var MessageListNotifications = (props) => {
   const {
     hasNewMessages,
@@ -50345,7 +50439,7 @@ var MessageListNotifications = (props) => {
     unreadCount
   } = props;
   const { t: t2 } = useTranslationContext("MessageListNotifications");
-  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(
+  return /* @__PURE__ */ import_react237.default.createElement("div", { className: "str-chat__list-notifications" }, notifications.map((notification) => /* @__PURE__ */ import_react237.default.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)), /* @__PURE__ */ import_react237.default.createElement(ConnectionStatus, null), /* @__PURE__ */ import_react237.default.createElement(
     MessageNotification2,
     {
       isMessageListScrolledToBottom,
@@ -50359,11 +50453,11 @@ var MessageListNotifications = (props) => {
 };
 
 // src/components/MessageList/UnreadMessagesNotification.tsx
-var import_react238 = __toESM(require("react"));
+var import_react239 = __toESM(require("react"));
 
 // src/components/MessageList/icons.tsx
-var import_react237 = __toESM(require("react"));
-var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react237.default.createElement(
+var import_react238 = __toESM(require("react"));
+var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react238.default.createElement(
   "svg",
   {
     className,
@@ -50374,7 +50468,7 @@ var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react23
     width: "24",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ import_react237.default.createElement(
+  /* @__PURE__ */ import_react238.default.createElement(
     "path",
     {
       d: "M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z",
@@ -50382,7 +50476,7 @@ var ArrowDown = ({ className, color: color2 }) => /* @__PURE__ */ import_react23
     }
   )
 );
-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" }));
+var CloseIcon2 = () => /* @__PURE__ */ import_react238.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 14 13", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react238.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 = ({
@@ -50394,19 +50488,19 @@ var UnreadMessagesNotification = ({
     "UnreadMessagesNotification"
   );
   const { t: t2 } = useTranslationContext("UnreadMessagesNotification");
-  return /* @__PURE__ */ import_react238.default.createElement(
+  return /* @__PURE__ */ import_react239.default.createElement(
     "div",
     {
       className: "str-chat__unread-messages-notification",
       "data-testid": "unread-messages-notification"
     },
-    /* @__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))
+    /* @__PURE__ */ import_react239.default.createElement("button", { onClick: () => jumpToFirstUnreadMessage(queryMessageLimit) }, unreadCount && showCount ? t2("{{count}} unread", { count: unreadCount ?? 0 }) : t2("Unread messages")),
+    /* @__PURE__ */ import_react239.default.createElement("button", { onClick: () => markRead() }, /* @__PURE__ */ import_react239.default.createElement(CloseIcon2, null))
   );
 };
 
 // src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
-var import_react239 = __toESM(require("react"));
+var import_react240 = __toESM(require("react"));
 var mousewheelListener2 = (event) => {
   if (event instanceof WheelEvent && event.deltaY === 1) {
     event.preventDefault();
@@ -50437,10 +50531,10 @@ var InfiniteScroll = (props) => {
   const loadPreviousPageFn = loadPreviousPage || loadMore;
   const hasNextPageFlag = hasNextPage || hasMoreNewer;
   const hasPreviousPageFlag = hasPreviousPage || hasMore;
-  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);
+  const scrollComponent = (0, import_react240.useRef)(void 0);
+  const previousOffset = (0, import_react240.useRef)(void 0);
+  const previousReverseOffset = (0, import_react240.useRef)(void 0);
+  const scrollListenerRef = (0, import_react240.useRef)(void 0);
   scrollListenerRef.current = () => {
     const element5 = scrollComponent.current;
     if (!element5 || element5.offsetParent === null) {
@@ -50464,7 +50558,7 @@ var InfiniteScroll = (props) => {
       loadNextPageFn();
     }
   };
-  (0, import_react239.useEffect)(() => {
+  (0, import_react240.useEffect)(() => {
     deprecationAndReplacementWarning(
       [
         [{ hasMoreNewer }, { hasNextPage }],
@@ -50475,7 +50569,7 @@ var InfiniteScroll = (props) => {
       "InfiniteScroll"
     );
   }, []);
-  (0, import_react239.useEffect)(() => {
+  (0, import_react240.useEffect)(() => {
     const scrollElement = scrollComponent.current?.parentNode;
     if (!scrollElement) return;
     const scrollListener = () => scrollListenerRef.current?.();
@@ -50487,7 +50581,7 @@ var InfiniteScroll = (props) => {
       scrollElement.removeEventListener("resize", scrollListener, useCapture);
     };
   }, [initialLoad, useCapture]);
-  (0, import_react239.useEffect)(() => {
+  (0, import_react240.useEffect)(() => {
     const scrollElement = scrollComponent.current?.parentNode;
     if (scrollElement) {
       scrollElement.addEventListener("wheel", mousewheelListener2, { passive: false });
@@ -50508,11 +50602,11 @@ var InfiniteScroll = (props) => {
   if (head) {
     childrenArray.unshift(head);
   }
-  return import_react239.default.createElement(element4, attributes, childrenArray);
+  return import_react240.default.createElement(element4, attributes, childrenArray);
 };
 
 // src/components/TypingIndicator/TypingIndicator.tsx
-var import_react240 = __toESM(require("react"));
+var import_react241 = __toESM(require("react"));
 var import_clsx60 = __toESM(require("clsx"));
 var useJoinTypingUsers = (names) => {
   const { t: t2 } = useTranslationContext();
@@ -50550,7 +50644,7 @@ var UnMemoizedTypingIndicator = (props) => {
     return null;
   }
   if (!isTypingActive) return null;
-  return /* @__PURE__ */ import_react240.default.createElement(
+  return /* @__PURE__ */ import_react241.default.createElement(
     "div",
     {
       className: (0, import_clsx60.default)("str-chat__typing-indicator", {
@@ -50558,90 +50652,17 @@ var UnMemoizedTypingIndicator = (props) => {
       }),
       "data-testid": "typing-indicator"
     },
-    /* @__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)
+    /* @__PURE__ */ import_react241.default.createElement("div", { className: "str-chat__typing-indicator__dots" }, /* @__PURE__ */ import_react241.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react241.default.createElement("span", { className: "str-chat__typing-indicator__dot" }), /* @__PURE__ */ import_react241.default.createElement("span", { className: "str-chat__typing-indicator__dot" })),
+    /* @__PURE__ */ import_react241.default.createElement("div", { className: "str-chat__typing-indicator__users", "data-testid": "typing-users" }, joinedTypingUsers)
   );
 };
-var TypingIndicator = import_react240.default.memo(
+var TypingIndicator = import_react241.default.memo(
   UnMemoizedTypingIndicator
 );
 
 // src/components/MessageList/renderMessages.tsx
 var import_react244 = __toESM(require("react"));
 
-// src/components/Message/FixedHeightMessage.tsx
-var import_react241 = __toESM(require("react"));
-var selectColor = (number3, dark) => {
-  const hue = number3 * 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_react241.useMemo)(
-    () => renderText(messageTextToRender, message.mentioned_users),
-    [message.mentioned_users, messageTextToRender]
-  );
-  const userId = message.user?.id || "";
-  const userColor = (0, import_react241.useMemo)(() => getUserColor(theme, userId), [userId, theme]);
-  const messageActionsHandler = (0, import_react241.useCallback)(
-    () => getMessageActions(["delete"], { canDelete: role.canDelete }),
-    [role]
-  );
-  const images = message?.attachments?.filter(({ type }) => type === "image");
-  return /* @__PURE__ */ import_react241.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_react241.default.createElement(
-      Avatar,
-      {
-        image: message.user.image,
-        name: message.user.name || message.user.id,
-        user: message.user
-      }
-    ),
-    /* @__PURE__ */ import_react241.default.createElement("div", { className: "str-chat__virtual-message__content" }, /* @__PURE__ */ import_react241.default.createElement("div", { className: "str-chat__virtual-message__meta" }, /* @__PURE__ */ import_react241.default.createElement("div", { className: "str-chat__virtual-message__author", style: { color: userColor } }, /* @__PURE__ */ import_react241.default.createElement("strong", null, message.user?.name || "unknown"))), message.deleted_at || message.type === "deleted" ? /* @__PURE__ */ import_react241.default.createElement(MessageDeleted2, { message }) : /* @__PURE__ */ import_react241.default.createElement(import_react241.default.Fragment, null, images && /* @__PURE__ */ import_react241.default.createElement(Gallery, { images }), /* @__PURE__ */ import_react241.default.createElement("div", { className: "str-chat__virtual-message__text", "data-testid": "msg-text" }, renderedText, message.mml && /* @__PURE__ */ import_react241.default.createElement(MML3, { actionHandler: handleAction, align: "left", source: message.mml }), /* @__PURE__ */ import_react241.default.createElement("div", { className: "str-chat__virtual-message__data" }, /* @__PURE__ */ import_react241.default.createElement(
-      MessageActions,
-      {
-        customWrapperClass: "str-chat__virtual-message__actions",
-        getMessageActions: messageActionsHandler,
-        handleDelete: handleDelete2,
-        message,
-        mine: () => role.isMyMessage
-      }
-    ), /* @__PURE__ */ import_react241.default.createElement("span", { className: "str-chat__virtual-message__date" }, /* @__PURE__ */ import_react241.default.createElement(
-      MessageTimestamp,
-      {
-        customClass: "str-chat__message-simple-timestamp",
-        message
-      }
-    ))))))
-  );
-};
-var FixedHeightMessage = import_react241.default.memo(
-  UnMemoizedFixedHeightMessage
-);
-
 // src/components/DateSeparator/DateSeparator.tsx
 var import_react242 = __toESM(require("react"));
 var UnMemoizedDateSeparator = (props) => {
@@ -52996,7 +53017,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();