stream-chat-react 11.2.1 → 11.4.0

package/dist/browser.full-bundle.js

@@ -5817,14 +5817,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _typeof$2(obj) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _typeof$2(o) {
       "@babel/helpers - typeof";
 
-      return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-        return typeof obj;
-      } : function (obj) {
-        return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      }, _typeof$2(obj);
+      return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+        return typeof o;
+      } : function (o) {
+        return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+      }, _typeof$2(o);
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _classCallCheck(instance, Constructor) {
@@ -5833,20 +5833,20 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
       }
     }
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _toPrimitive(input, hint) {
-      if (_typeof$2(input) !== "object" || input === null) return input;
-      var prim = input[Symbol.toPrimitive];
-      if (prim !== undefined) {
-        var res = prim.call(input, hint || "default");
-        if (_typeof$2(res) !== "object") return res;
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function toPrimitive$1(t, r) {
+      if ("object" != _typeof$2(t) || !t) return t;
+      var e = t[Symbol.toPrimitive];
+      if (void 0 !== e) {
+        var i = e.call(t, r || "default");
+        if ("object" != _typeof$2(i)) return i;
         throw new TypeError("@@toPrimitive must return a primitive value.");
       }
-      return (hint === "string" ? String : Number)(input);
+      return ("string" === r ? String : Number)(t);
     }
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _toPropertyKey(arg) {
-      var key = _toPrimitive(arg, "string");
-      return _typeof$2(key) === "symbol" ? key : String(key);
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function toPropertyKey$1(t) {
+      var i = toPrimitive$1(t, "string");
+      return "symbol" == _typeof$2(i) ? i : String(i);
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _defineProperties(target, props) {
@@ -5855,7 +5855,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+        Object.defineProperty(target, toPropertyKey$1(descriptor.key), descriptor);
       }
     }
     function _createClass(Constructor, protoProps, staticProps) {
@@ -5916,7 +5916,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _defineProperty$3(obj, key, value) {
-      key = _toPropertyKey(key);
+      key = toPropertyKey$1(key);
       if (key in obj) {
         Object.defineProperty(obj, key, {
           value: value,
@@ -9863,6 +9863,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             audioRef.current.play();
             return function () {
                 var _a;
+                // eslint-disable-next-line react-hooks/exhaustive-deps
                 (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.pause();
                 window.clearInterval(interval);
             };
@@ -10028,7 +10029,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     source: imageSrc,
                 };
             });
-        }, [images]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [images]);
         return (React__default["default"].createElement(ImageGallery, { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
     };
 
@@ -14648,6 +14651,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 var config = videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail);
                 setAttachmentConfiguration(config);
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [videoElement, videoAttachmentSizeHandler, attachment]);
         var content = (React__default["default"].createElement("div", { className: 'str-chat__player-wrapper', "data-testid": 'video-wrapper', ref: videoElement, style: getCssDimensionsVariables(attachment.thumb_url || '') },
             React__default["default"].createElement(Media, { className: 'react-player', config: { file: { attributes: { poster: attachmentConfiguration === null || attachmentConfiguration === void 0 ? void 0 : attachmentConfiguration.thumbUrl } } }, controls: true, height: '100%', url: attachmentConfiguration === null || attachmentConfiguration === void 0 ? void 0 : attachmentConfiguration.url, width: '100%' })));
@@ -14683,6 +14687,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
      */
     var Attachment = function (props) {
         var attachments = props.attachments;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var groupedAttachments = React$2.useMemo(function () { return renderGroupedAttachments(props); }, [attachments]);
         return (React__default["default"].createElement("div", { className: 'str-chat__attachment-list' }, ATTACHMENT_GROUPS_ORDER.reduce(function (acc, groupName) { return __spreadArray(__spreadArray([], acc, true), groupedAttachments[groupName], true); }, [])));
     };
@@ -16087,7 +16092,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
      * @property {Array<string>} [mustUseProperty]
      */
 
-    const own$b = {}.hasOwnProperty;
+    const own$a = {}.hasOwnProperty;
 
     /**
      * @param {Definition} definition
@@ -16102,7 +16107,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
       let prop;
 
       for (prop in definition.properties) {
-        if (own$b.call(definition.properties, prop)) {
+        if (own$a.call(definition.properties, prop)) {
           const value = definition.properties[prop];
           const info = new DefinedInfo(
             prop,
@@ -18031,7 +18036,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
      * @typedef {import('./components.js').Components} Components
      */
 
-    const own$a = {}.hasOwnProperty;
+    const own$9 = {}.hasOwnProperty;
 
     /** @type {Map<string, number>} */
     const emptyMap = new Map();
@@ -18168,7 +18173,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             });
           }
 
-          if (own$a.call(state.components, node.tagName)) {
+          if (own$9.call(state.components, node.tagName)) {
             const key = /** @type {keyof JSX.IntrinsicElements} */ (node.tagName);
             type = state.components[key];
 
@@ -18314,7 +18319,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         let alignValue;
 
         for (prop in node.properties) {
-          if (prop !== 'children' && own$a.call(node.properties, prop)) {
+          if (prop !== 'children' && own$9.call(node.properties, prop)) {
             const result = createProperty(
               state,
               ancestors,
@@ -18480,7 +18485,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
       let from;
 
       for (from in domCasing) {
-        if (own$a.call(domCasing, from)) {
+        if (own$9.call(domCasing, from)) {
           cssCasing[transformStyleToCssCasing(from)] = domCasing[from];
         }
       }
@@ -18559,395 +18564,6 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
       ]
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
-     * @typedef {import('micromark-util-types').Code} Code
-     */
-
-    const unicodePunctuationInternal = regexCheck$9(/\p{P}/u);
-
-    /**
-     * Check whether the character code represents an ASCII alpha (`a` through `z`,
-     * case insensitive).
-     *
-     * An **ASCII alpha** is an ASCII upper alpha or ASCII lower alpha.
-     *
-     * An **ASCII upper alpha** is a character in the inclusive range U+0041 (`A`)
-     * to U+005A (`Z`).
-     *
-     * An **ASCII lower alpha** is a character in the inclusive range U+0061 (`a`)
-     * to U+007A (`z`).
-     *
-     * @param code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    const asciiAlpha$4 = regexCheck$9(/[A-Za-z]/);
-
-    /**
-     * Check whether the character code represents an ASCII alphanumeric (`a`
-     * through `z`, case insensitive, or `0` through `9`).
-     *
-     * An **ASCII alphanumeric** is an ASCII digit (see `asciiDigit`) or ASCII alpha
-     * (see `asciiAlpha`).
-     *
-     * @param code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    const asciiAlphanumeric$5 = regexCheck$9(/[\dA-Za-z]/);
-
-    /**
-     * Check whether the character code represents an ASCII atext.
-     *
-     * atext is an ASCII alphanumeric (see `asciiAlphanumeric`), or a character in
-     * the inclusive ranges U+0023 NUMBER SIGN (`#`) to U+0027 APOSTROPHE (`'`),
-     * U+002A ASTERISK (`*`), U+002B PLUS SIGN (`+`), U+002D DASH (`-`), U+002F
-     * SLASH (`/`), U+003D EQUALS TO (`=`), U+003F QUESTION MARK (`?`), U+005E
-     * CARET (`^`) to U+0060 GRAVE ACCENT (`` ` ``), or U+007B LEFT CURLY BRACE
-     * (`{`) to U+007E TILDE (`~`).
-     *
-     * See:
-     * **\[RFC5322]**:
-     * [Internet Message Format](https://tools.ietf.org/html/rfc5322).
-     * P. Resnick.
-     * IETF.
-     *
-     * @param code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    const asciiAtext$2 = regexCheck$9(/[#-'*+\--9=?A-Z^-~]/);
-
-    /**
-     * Check whether a character code is an ASCII control character.
-     *
-     * An **ASCII control** is a character in the inclusive range U+0000 NULL (NUL)
-     * to U+001F (US), or U+007F (DEL).
-     *
-     * @param {Code} code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    function asciiControl$3(code) {
-      return (
-        // Special whitespace codes (which have negative values), C0 and Control
-        // character DEL
-        code !== null && (code < 32 || code === 127)
-      )
-    }
-
-    /**
-     * Check whether the character code represents an ASCII digit (`0` through `9`).
-     *
-     * An **ASCII digit** is a character in the inclusive range U+0030 (`0`) to
-     * U+0039 (`9`).
-     *
-     * @param code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    const asciiDigit$3 = regexCheck$9(/\d/);
-
-    /**
-     * Check whether the character code represents an ASCII hex digit (`a` through
-     * `f`, case insensitive, or `0` through `9`).
-     *
-     * An **ASCII hex digit** is an ASCII digit (see `asciiDigit`), ASCII upper hex
-     * digit, or an ASCII lower hex digit.
-     *
-     * An **ASCII upper hex digit** is a character in the inclusive range U+0041
-     * (`A`) to U+0046 (`F`).
-     *
-     * An **ASCII lower hex digit** is a character in the inclusive range U+0061
-     * (`a`) to U+0066 (`f`).
-     *
-     * @param code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    const asciiHexDigit$2 = regexCheck$9(/[\dA-Fa-f]/);
-
-    /**
-     * Check whether the character code represents ASCII punctuation.
-     *
-     * An **ASCII punctuation** is a character in the inclusive ranges U+0021
-     * EXCLAMATION MARK (`!`) to U+002F SLASH (`/`), U+003A COLON (`:`) to U+0040 AT
-     * SIGN (`@`), U+005B LEFT SQUARE BRACKET (`[`) to U+0060 GRAVE ACCENT
-     * (`` ` ``), or U+007B LEFT CURLY BRACE (`{`) to U+007E TILDE (`~`).
-     *
-     * @param code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    const asciiPunctuation$2 = regexCheck$9(/[!-/:-@[-`{-~]/);
-
-    /**
-     * Check whether a character code is a markdown line ending.
-     *
-     * A **markdown line ending** is the virtual characters M-0003 CARRIAGE RETURN
-     * LINE FEED (CRLF), M-0004 LINE FEED (LF) and M-0005 CARRIAGE RETURN (CR).
-     *
-     * In micromark, the actual character U+000A LINE FEED (LF) and U+000D CARRIAGE
-     * RETURN (CR) are replaced by these virtual characters depending on whether
-     * they occurred together.
-     *
-     * @param {Code} code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    function markdownLineEnding$k(code) {
-      return code !== null && code < -2
-    }
-
-    /**
-     * Check whether a character code is a markdown line ending (see
-     * `markdownLineEnding`) or markdown space (see `markdownSpace`).
-     *
-     * @param {Code} code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    function markdownLineEndingOrSpace$9(code) {
-      return code !== null && (code < 0 || code === 32)
-    }
-
-    /**
-     * Check whether a character code is a markdown space.
-     *
-     * A **markdown space** is the concrete character U+0020 SPACE (SP) and the
-     * virtual characters M-0001 VIRTUAL SPACE (VS) and M-0002 HORIZONTAL TAB (HT).
-     *
-     * In micromark, the actual character U+0009 CHARACTER TABULATION (HT) is
-     * replaced by one M-0002 HORIZONTAL TAB (HT) and between 0 and 3 M-0001 VIRTUAL
-     * SPACE (VS) characters, depending on the column at which the tab occurred.
-     *
-     * @param {Code} code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    function markdownSpace$a(code) {
-      return code === -2 || code === -1 || code === 32
-    }
-
-    // Size note: removing ASCII from the regex and using `asciiPunctuation` here
-    // In fact adds to the bundle size.
-    /**
-     * Check whether the character code represents Unicode punctuation.
-     *
-     * A **Unicode punctuation** is a character in the Unicode `Pc` (Punctuation,
-     * Connector), `Pd` (Punctuation, Dash), `Pe` (Punctuation, Close), `Pf`
-     * (Punctuation, Final quote), `Pi` (Punctuation, Initial quote), `Po`
-     * (Punctuation, Other), or `Ps` (Punctuation, Open) categories, or an ASCII
-     * punctuation (see `asciiPunctuation`).
-     *
-     * See:
-     * **\[UNICODE]**:
-     * [The Unicode Standard](https://www.unicode.org/versions/).
-     * Unicode Consortium.
-     *
-     * @param {Code} code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    function unicodePunctuation$3(code) {
-      return asciiPunctuation$2(code) || unicodePunctuationInternal(code)
-    }
-
-    /**
-     * Check whether the character code represents Unicode whitespace.
-     *
-     * Note that this does handle micromark specific markdown whitespace characters.
-     * See `markdownLineEndingOrSpace` to check that.
-     *
-     * A **Unicode whitespace** is a character in the Unicode `Zs` (Separator,
-     * Space) category, or U+0009 CHARACTER TABULATION (HT), U+000A LINE FEED (LF),
-     * U+000C (FF), or U+000D CARRIAGE RETURN (CR) (**\[UNICODE]**).
-     *
-     * See:
-     * **\[UNICODE]**:
-     * [The Unicode Standard](https://www.unicode.org/versions/).
-     * Unicode Consortium.
-     *
-     * @param code
-     *   Code.
-     * @returns {boolean}
-     *   Whether it matches.
-     */
-    const unicodeWhitespace$2 = regexCheck$9(/\s/);
-
-    /**
-     * Create a code check from a regex.
-     *
-     * @param {RegExp} regex
-     * @returns {(code: Code) => boolean}
-     */
-    function regexCheck$9(regex) {
-      return check
-
-      /**
-       * Check whether a code matches the bound regex.
-       *
-       * @param {Code} code
-       *   Character code.
-       * @returns {boolean}
-       *   Whether the character code matches the bound regex.
-       */
-      function check(code) {
-        return code !== null && code > -1 && regex.test(String.fromCharCode(code))
-      }
-    }
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};const characterReferences = {'"': 'quot', '&': 'amp', '<': 'lt', '>': 'gt'};
-
-    /**
-     * Encode only the dangerous HTML characters.
-     *
-     * This ensures that certain characters which have special meaning in HTML are
-     * dealt with.
-     * Technically, we can skip `>` and `"` in many cases, but CM includes them.
-     *
-     * @param {string} value
-     *   Value to encode.
-     * @returns {string}
-     *   Encoded value.
-     */
-    function encode(value) {
-      return value.replace(/["&<>]/g, replace)
-
-      /**
-       * @param {string} value
-       * @returns {string}
-       */
-      function replace(value) {
-        // @ts-expect-error Hush, it’s fine.
-        return '&' + characterReferences[value] + ';'
-      }
-    }
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
-     * Make a value safe for injection as a URL.
-     *
-     * This encodes unsafe characters with percent-encoding and skips already
-     * encoded sequences (see `normalizeUri`).
-     * Further unsafe characters are encoded as character references (see
-     * `micromark-util-encode`).
-     *
-     * A regex of allowed protocols can be given, in which case the URL is
-     * sanitized.
-     * For example, `/^(https?|ircs?|mailto|xmpp)$/i` can be used for `a[href]`, or
-     * `/^https?$/i` for `img[src]` (this is what `github.com` allows).
-     * If the URL includes an unknown protocol (one not matched by `protocol`, such
-     * as a dangerous example, `javascript:`), the value is ignored.
-     *
-     * @param {string | null | undefined} url
-     *   URI to sanitize.
-     * @param {RegExp | null | undefined} [protocol]
-     *   Allowed protocols.
-     * @returns {string}
-     *   Sanitized URI.
-     */
-    function sanitizeUri(url, protocol) {
-      const value = encode(normalizeUri(url || ''));
-      if (!protocol) {
-        return value
-      }
-      const colon = value.indexOf(':');
-      const questionMark = value.indexOf('?');
-      const numberSign = value.indexOf('#');
-      const slash = value.indexOf('/');
-      if (
-        // If there is no protocol, it’s relative.
-        colon < 0 ||
-        // If the first colon is after a `?`, `#`, or `/`, it’s not a protocol.
-        (slash > -1 && colon > slash) ||
-        (questionMark > -1 && colon > questionMark) ||
-        (numberSign > -1 && colon > numberSign) ||
-        // It is a protocol, it should be allowed.
-        protocol.test(value.slice(0, colon))
-      ) {
-        return value
-      }
-      return ''
-    }
-
-    /**
-     * Normalize a URL.
-     *
-     * Encode unsafe characters with percent-encoding, skipping already encoded
-     * sequences.
-     *
-     * @param {string} value
-     *   URI to normalize.
-     * @returns {string}
-     *   Normalized URI.
-     */
-    function normalizeUri(value) {
-      /** @type {Array<string>} */
-      const result = [];
-      let index = -1;
-      let start = 0;
-      let skip = 0;
-      while (++index < value.length) {
-        const code = value.charCodeAt(index);
-        /** @type {string} */
-        let replace = '';
-
-        // A correct percent encoded value.
-        if (
-          code === 37 &&
-          asciiAlphanumeric$5(value.charCodeAt(index + 1)) &&
-          asciiAlphanumeric$5(value.charCodeAt(index + 2))
-        ) {
-          skip = 2;
-        }
-        // ASCII.
-        else if (code < 128) {
-          if (!/[!#$&-;=?-Z_a-z~]/.test(String.fromCharCode(code))) {
-            replace = String.fromCharCode(code);
-          }
-        }
-        // Astral.
-        else if (code > 55_295 && code < 57_344) {
-          const next = value.charCodeAt(index + 1);
-
-          // A correct surrogate pair.
-          if (code < 56_320 && next > 56_319 && next < 57_344) {
-            replace = String.fromCharCode(code, next);
-            skip = 1;
-          }
-          // Lone surrogate.
-          else {
-            replace = '\uFFFD';
-          }
-        }
-        // Unicode.
-        else {
-          replace = String.fromCharCode(code);
-        }
-        if (replace) {
-          result.push(value.slice(start, index), encodeURIComponent(replace));
-          start = index + skip + 1;
-          replace = '';
-        }
-        if (skip) {
-          index += skip;
-          skip = 0;
-        }
-      }
-      return result.join('') + value.slice(start)
-    }
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
      * @typedef {import('mdast').Nodes} Nodes
      *
@@ -19328,6 +18944,323 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
       )
     }
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
+     * @typedef {import('micromark-util-types').Code} Code
+     */
+
+    const unicodePunctuationInternal = regexCheck$9(/\p{P}/u);
+
+    /**
+     * Check whether the character code represents an ASCII alpha (`a` through `z`,
+     * case insensitive).
+     *
+     * An **ASCII alpha** is an ASCII upper alpha or ASCII lower alpha.
+     *
+     * An **ASCII upper alpha** is a character in the inclusive range U+0041 (`A`)
+     * to U+005A (`Z`).
+     *
+     * An **ASCII lower alpha** is a character in the inclusive range U+0061 (`a`)
+     * to U+007A (`z`).
+     *
+     * @param code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    const asciiAlpha$4 = regexCheck$9(/[A-Za-z]/);
+
+    /**
+     * Check whether the character code represents an ASCII alphanumeric (`a`
+     * through `z`, case insensitive, or `0` through `9`).
+     *
+     * An **ASCII alphanumeric** is an ASCII digit (see `asciiDigit`) or ASCII alpha
+     * (see `asciiAlpha`).
+     *
+     * @param code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    const asciiAlphanumeric$5 = regexCheck$9(/[\dA-Za-z]/);
+
+    /**
+     * Check whether the character code represents an ASCII atext.
+     *
+     * atext is an ASCII alphanumeric (see `asciiAlphanumeric`), or a character in
+     * the inclusive ranges U+0023 NUMBER SIGN (`#`) to U+0027 APOSTROPHE (`'`),
+     * U+002A ASTERISK (`*`), U+002B PLUS SIGN (`+`), U+002D DASH (`-`), U+002F
+     * SLASH (`/`), U+003D EQUALS TO (`=`), U+003F QUESTION MARK (`?`), U+005E
+     * CARET (`^`) to U+0060 GRAVE ACCENT (`` ` ``), or U+007B LEFT CURLY BRACE
+     * (`{`) to U+007E TILDE (`~`).
+     *
+     * See:
+     * **\[RFC5322]**:
+     * [Internet Message Format](https://tools.ietf.org/html/rfc5322).
+     * P. Resnick.
+     * IETF.
+     *
+     * @param code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    const asciiAtext$2 = regexCheck$9(/[#-'*+\--9=?A-Z^-~]/);
+
+    /**
+     * Check whether a character code is an ASCII control character.
+     *
+     * An **ASCII control** is a character in the inclusive range U+0000 NULL (NUL)
+     * to U+001F (US), or U+007F (DEL).
+     *
+     * @param {Code} code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    function asciiControl$3(code) {
+      return (
+        // Special whitespace codes (which have negative values), C0 and Control
+        // character DEL
+        code !== null && (code < 32 || code === 127)
+      )
+    }
+
+    /**
+     * Check whether the character code represents an ASCII digit (`0` through `9`).
+     *
+     * An **ASCII digit** is a character in the inclusive range U+0030 (`0`) to
+     * U+0039 (`9`).
+     *
+     * @param code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    const asciiDigit$3 = regexCheck$9(/\d/);
+
+    /**
+     * Check whether the character code represents an ASCII hex digit (`a` through
+     * `f`, case insensitive, or `0` through `9`).
+     *
+     * An **ASCII hex digit** is an ASCII digit (see `asciiDigit`), ASCII upper hex
+     * digit, or an ASCII lower hex digit.
+     *
+     * An **ASCII upper hex digit** is a character in the inclusive range U+0041
+     * (`A`) to U+0046 (`F`).
+     *
+     * An **ASCII lower hex digit** is a character in the inclusive range U+0061
+     * (`a`) to U+0066 (`f`).
+     *
+     * @param code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    const asciiHexDigit$2 = regexCheck$9(/[\dA-Fa-f]/);
+
+    /**
+     * Check whether the character code represents ASCII punctuation.
+     *
+     * An **ASCII punctuation** is a character in the inclusive ranges U+0021
+     * EXCLAMATION MARK (`!`) to U+002F SLASH (`/`), U+003A COLON (`:`) to U+0040 AT
+     * SIGN (`@`), U+005B LEFT SQUARE BRACKET (`[`) to U+0060 GRAVE ACCENT
+     * (`` ` ``), or U+007B LEFT CURLY BRACE (`{`) to U+007E TILDE (`~`).
+     *
+     * @param code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    const asciiPunctuation$2 = regexCheck$9(/[!-/:-@[-`{-~]/);
+
+    /**
+     * Check whether a character code is a markdown line ending.
+     *
+     * A **markdown line ending** is the virtual characters M-0003 CARRIAGE RETURN
+     * LINE FEED (CRLF), M-0004 LINE FEED (LF) and M-0005 CARRIAGE RETURN (CR).
+     *
+     * In micromark, the actual character U+000A LINE FEED (LF) and U+000D CARRIAGE
+     * RETURN (CR) are replaced by these virtual characters depending on whether
+     * they occurred together.
+     *
+     * @param {Code} code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    function markdownLineEnding$k(code) {
+      return code !== null && code < -2
+    }
+
+    /**
+     * Check whether a character code is a markdown line ending (see
+     * `markdownLineEnding`) or markdown space (see `markdownSpace`).
+     *
+     * @param {Code} code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    function markdownLineEndingOrSpace$9(code) {
+      return code !== null && (code < 0 || code === 32)
+    }
+
+    /**
+     * Check whether a character code is a markdown space.
+     *
+     * A **markdown space** is the concrete character U+0020 SPACE (SP) and the
+     * virtual characters M-0001 VIRTUAL SPACE (VS) and M-0002 HORIZONTAL TAB (HT).
+     *
+     * In micromark, the actual character U+0009 CHARACTER TABULATION (HT) is
+     * replaced by one M-0002 HORIZONTAL TAB (HT) and between 0 and 3 M-0001 VIRTUAL
+     * SPACE (VS) characters, depending on the column at which the tab occurred.
+     *
+     * @param {Code} code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    function markdownSpace$a(code) {
+      return code === -2 || code === -1 || code === 32
+    }
+
+    // Size note: removing ASCII from the regex and using `asciiPunctuation` here
+    // In fact adds to the bundle size.
+    /**
+     * Check whether the character code represents Unicode punctuation.
+     *
+     * A **Unicode punctuation** is a character in the Unicode `Pc` (Punctuation,
+     * Connector), `Pd` (Punctuation, Dash), `Pe` (Punctuation, Close), `Pf`
+     * (Punctuation, Final quote), `Pi` (Punctuation, Initial quote), `Po`
+     * (Punctuation, Other), or `Ps` (Punctuation, Open) categories, or an ASCII
+     * punctuation (see `asciiPunctuation`).
+     *
+     * See:
+     * **\[UNICODE]**:
+     * [The Unicode Standard](https://www.unicode.org/versions/).
+     * Unicode Consortium.
+     *
+     * @param {Code} code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    function unicodePunctuation$3(code) {
+      return asciiPunctuation$2(code) || unicodePunctuationInternal(code)
+    }
+
+    /**
+     * Check whether the character code represents Unicode whitespace.
+     *
+     * Note that this does handle micromark specific markdown whitespace characters.
+     * See `markdownLineEndingOrSpace` to check that.
+     *
+     * A **Unicode whitespace** is a character in the Unicode `Zs` (Separator,
+     * Space) category, or U+0009 CHARACTER TABULATION (HT), U+000A LINE FEED (LF),
+     * U+000C (FF), or U+000D CARRIAGE RETURN (CR) (**\[UNICODE]**).
+     *
+     * See:
+     * **\[UNICODE]**:
+     * [The Unicode Standard](https://www.unicode.org/versions/).
+     * Unicode Consortium.
+     *
+     * @param code
+     *   Code.
+     * @returns {boolean}
+     *   Whether it matches.
+     */
+    const unicodeWhitespace$2 = regexCheck$9(/\s/);
+
+    /**
+     * Create a code check from a regex.
+     *
+     * @param {RegExp} regex
+     * @returns {(code: Code) => boolean}
+     */
+    function regexCheck$9(regex) {
+      return check
+
+      /**
+       * Check whether a code matches the bound regex.
+       *
+       * @param {Code} code
+       *   Character code.
+       * @returns {boolean}
+       *   Whether the character code matches the bound regex.
+       */
+      function check(code) {
+        return code !== null && code > -1 && regex.test(String.fromCharCode(code))
+      }
+    }
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+    /**
+     * Normalize a URL.
+     *
+     * Encode unsafe characters with percent-encoding, skipping already encoded
+     * sequences.
+     *
+     * @param {string} value
+     *   URI to normalize.
+     * @returns {string}
+     *   Normalized URI.
+     */
+    function normalizeUri(value) {
+      /** @type {Array<string>} */
+      const result = [];
+      let index = -1;
+      let start = 0;
+      let skip = 0;
+      while (++index < value.length) {
+        const code = value.charCodeAt(index);
+        /** @type {string} */
+        let replace = '';
+
+        // A correct percent encoded value.
+        if (
+          code === 37 &&
+          asciiAlphanumeric$5(value.charCodeAt(index + 1)) &&
+          asciiAlphanumeric$5(value.charCodeAt(index + 2))
+        ) {
+          skip = 2;
+        }
+        // ASCII.
+        else if (code < 128) {
+          if (!/[!#$&-;=?-Z_a-z~]/.test(String.fromCharCode(code))) {
+            replace = String.fromCharCode(code);
+          }
+        }
+        // Astral.
+        else if (code > 55_295 && code < 57_344) {
+          const next = value.charCodeAt(index + 1);
+
+          // A correct surrogate pair.
+          if (code < 56_320 && next > 56_319 && next < 57_344) {
+            replace = String.fromCharCode(code, next);
+            skip = 1;
+          }
+          // Lone surrogate.
+          else {
+            replace = '\uFFFD';
+          }
+        }
+        // Unicode.
+        else {
+          replace = String.fromCharCode(code);
+        }
+        if (replace) {
+          result.push(value.slice(start, index), encodeURIComponent(replace));
+          start = index + skip + 1;
+          replace = '';
+        }
+        if (skip) {
+          index += skip;
+          skip = 0;
+        }
+      }
+      return result.join('') + value.slice(start)
+    }
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
      * @typedef {import('micromark-util-types').Effects} Effects
      * @typedef {import('micromark-util-types').State} State
@@ -27491,7 +27424,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
      *
      * @typedef {import('../index.js').CompileData} CompileData
      */
-    const own$9 = {}.hasOwnProperty;
+    const own$8 = {}.hasOwnProperty;
 
     /**
      * Turn markdown into a syntax tree.
@@ -27684,7 +27617,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         index = -1;
         while (++index < events.length) {
           const handler = config[events[index][0]];
-          if (own$9.call(handler, events[index][1].type)) {
+          if (own$8.call(handler, events[index][1].type)) {
             handler[events[index][1].type].call(
               Object.assign(
                 {
@@ -28636,7 +28569,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
       /** @type {keyof Extension} */
       let key;
       for (key in extension) {
-        if (own$9.call(extension, key)) {
+        if (own$8.call(extension, key)) {
           switch (key) {
             case 'canContainEols': {
               const right = extension[key];
@@ -30343,7 +30276,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
      * @typedef {import('./footer.js').FootnoteBackLabelTemplate} FootnoteBackLabelTemplate
      */
 
-    const own$8 = {}.hasOwnProperty;
+    const own$7 = {}.hasOwnProperty;
 
     /** @type {Options} */
     const emptyOptions$1 = {};
@@ -30416,7 +30349,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         const type = node.type;
         const handle = state.handlers[type];
 
-        if (own$8.call(state.handlers, type) && handle) {
+        if (own$7.call(state.handlers, type) && handle) {
           return handle(state, node, parent)
         }
 
@@ -30572,7 +30505,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
       /** @type {HastElement | HastText} */
       const result =
         'value' in node &&
-        !(own$8.call(data, 'hProperties') || own$8.call(data, 'hChildren'))
+        !(own$7.call(data, 'hProperties') || own$7.call(data, 'hChildren'))
           ? {type: 'text', value: node.value}
           : {
               type: 'element',
@@ -32380,7 +32313,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     // `parse` is called.
     // Currently, we allow directly setting `processor.parser`, which is untyped.
 
-    const own$7 = {}.hasOwnProperty;
+    const own$6 = {}.hasOwnProperty;
 
     /**
      * @template {Node | undefined} [ParseTree=undefined]
@@ -32601,7 +32534,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
           }
 
           // Get `key`.
-          return (own$7.call(this.namespace, key) && this.namespace[key]) || undefined
+          return (own$6.call(this.namespace, key) && this.namespace[key]) || undefined
         }
 
         // Set space.
@@ -33332,7 +33265,6 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};// Register `Raw` in tree:
 
-    const own$6 = {}.hasOwnProperty;
     const changelog =
       'https://github.com/remarkjs/react-markdown/blob/main/changelog.md';
 
@@ -33478,7 +33410,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
           let key;
 
           for (key in urlAttributes) {
-            if (own$6.call(urlAttributes, key) && own$6.call(node.properties, key)) {
+            if (
+              Object.hasOwn(urlAttributes, key) &&
+              Object.hasOwn(node.properties, key)
+            ) {
               const value = node.properties[key];
               const test = urlAttributes[key];
               if (test === null || test.includes(node.tagName)) {
@@ -33522,7 +33457,28 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
      *   Safe URL.
      */
     function defaultUrlTransform(value) {
-      return sanitizeUri(value, safeProtocol)
+      // Same as:
+      // <https://github.com/micromark/micromark/blob/929275e/packages/micromark-util-sanitize-uri/dev/index.js#L34>
+      // But without the `encode` part.
+      const colon = value.indexOf(':');
+      const questionMark = value.indexOf('?');
+      const numberSign = value.indexOf('#');
+      const slash = value.indexOf('/');
+
+      if (
+        // If there is no protocol, it’s relative.
+        colon < 0 ||
+        // If the first colon is after a `?`, `#`, or `/`, it’s not a protocol.
+        (slash > -1 && colon > slash) ||
+        (questionMark > -1 && colon > questionMark) ||
+        (numberSign > -1 && colon > numberSign) ||
+        // It is a protocol, it should be allowed.
+        safeProtocol.test(value.slice(0, colon))
+      ) {
+        return value
+      }
+
+      return ''
     }
 
     var lodash_uniqby = {exports: {}};
@@ -44810,7 +44766,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             watcher_count: watcher_count,
             watcherCount: watcherCount,
             watchers: watchers,
-        }); }, [
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
             channelId,
             debounceURLEnrichmentMs,
             enrichURLForPreview,
@@ -44847,7 +44805,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var typingValue = Object.keys(typing || {}).join();
         var typingContext = React$2.useMemo(function () { return ({
             typing: typing,
-        }); }, [typingValue]);
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [typingValue]);
         return typingContext;
     };
 
@@ -45356,34 +45316,24 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CustomMessageActionsList = function (props) {
         var customMessageActions = props.customMessageActions, message = props.message;
+        if (!customMessageActions)
+            return null;
         var customActionsArray = Object.keys(customMessageActions);
         return (React__default["default"].createElement(React__default["default"].Fragment, null, customActionsArray.map(function (customAction) {
             var customHandler = customMessageActions[customAction];
             return (React__default["default"].createElement("button", { "aria-selected": 'false', className: 'str-chat__message-actions-list-item str-chat__message-actions-list-item-button', key: customAction, onClick: function (event) { return customHandler(message, event); }, role: 'option' }, customAction));
         })));
     };
-    var UnMemoizedMessageActionsBox = function (props) {
-        var getMessageActions = props.getMessageActions, handleDelete = props.handleDelete, handleEdit = props.handleEdit, handleFlag = props.handleFlag, handleMute = props.handleMute, handlePin = props.handlePin, isUserMuted = props.isUserMuted, mine = props.mine, _a = props.open, open = _a === void 0 ? false : _a;
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageActionsBox = React__default["default"].forwardRef(function (props, ref) {
+        var getMessageActions = props.getMessageActions, handleDelete = props.handleDelete, handleEdit = props.handleEdit, handleFlag = props.handleFlag, handleMute = props.handleMute, handlePin = props.handlePin, isUserMuted = props.isUserMuted; 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        props.mine; var _a = props.open, open = _a === void 0 ? false : _a, restDivProps = __rest(props, ["getMessageActions", "handleDelete", "handleEdit", "handleFlag", "handleMute", "handlePin", "isUserMuted", "mine", "open"]);
+        var _b = useComponentContext('MessageActionsBox').CustomMessageActionsList, CustomMessageActionsList$1 = _b === void 0 ? CustomMessageActionsList : _b;
         var setQuotedMessage = useChannelActionContext('MessageActionsBox').setQuotedMessage;
-        var _b = useMessageContext('MessageActionsBox'), customMessageActions = _b.customMessageActions, message = _b.message, messageListRect = _b.messageListRect;
+        var _c = useMessageContext('MessageActionsBox'), customMessageActions = _c.customMessageActions, message = _c.message;
         var t = useTranslationContext('MessageActionsBox').t;
-        var _c = React$2.useState(false), reverse = _c[0], setReverse = _c[1];
         var messageActions = getMessageActions();
-        var checkIfReverse = React$2.useCallback(function (containerElement) {
-            if (!containerElement) {
-                setReverse(false);
-                return;
-            }
-            if (open) {
-                var containerRect = containerElement.getBoundingClientRect();
-                if (mine) {
-                    setReverse(!!messageListRect && containerRect.left < messageListRect.left);
-                }
-                else {
-                    setReverse(!!messageListRect && containerRect.right + 5 > messageListRect.right);
-                }
-            }
-        }, [messageListRect, mine, open]);
         var handleQuote = function () {
             setQuotedMessage(message);
             var elements = message.parent_id
@@ -45395,140 +45345,24 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             }
         };
         var rootClassName = clsx('str-chat__message-actions-box', {
-            'str-chat__message-actions-box--mine': mine,
             'str-chat__message-actions-box--open': open,
-            'str-chat__message-actions-box--reverse': reverse,
         });
         var buttonClassName = 'str-chat__message-actions-list-item str-chat__message-actions-list-item-button';
-        return (React__default["default"].createElement("div", { className: rootClassName, "data-testid": 'message-actions-box', ref: checkIfReverse },
+        return (React__default["default"].createElement("div", __assign({}, restDivProps, { className: rootClassName, "data-testid": 'message-actions-box', ref: ref }),
             React__default["default"].createElement("div", { "aria-label": 'Message Options', className: 'str-chat__message-actions-list', role: 'listbox' },
-                customMessageActions && (React__default["default"].createElement(CustomMessageActionsList, { customMessageActions: customMessageActions, message: message })),
+                React__default["default"].createElement(CustomMessageActionsList$1, { customMessageActions: customMessageActions, message: message }),
                 messageActions.indexOf(MESSAGE_ACTIONS.quote) > -1 && (React__default["default"].createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleQuote, role: 'option' }, t('Reply'))),
                 messageActions.indexOf(MESSAGE_ACTIONS.pin) > -1 && !message.parent_id && (React__default["default"].createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handlePin, role: 'option' }, !message.pinned ? t('Pin') : t('Unpin'))),
                 messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1 && (React__default["default"].createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleFlag, role: 'option' }, t('Flag'))),
                 messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React__default["default"].createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleMute, role: 'option' }, isUserMuted() ? t('Unmute') : t('Mute'))),
                 messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (React__default["default"].createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleEdit, role: 'option' }, t('Edit Message'))),
                 messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (React__default["default"].createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleDelete, role: 'option' }, t('Delete'))))));
-    };
+    });
     /**
      * A popup box that displays the available actions on a message, such as edit, delete, pin, etc.
      */
     var MessageActionsBox = React__default["default"].memo(UnMemoizedMessageActionsBox);
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MessageActions = function (props) {
-        var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propGetMessageActions = props.getMessageActions, propHandleDelete = props.handleDelete, propHandleFlag = props.handleFlag, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
-        var mutes = useChatContext('MessageActions').mutes;
-        var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
-        var getMessageActions = propGetMessageActions || contextGetMessageActions;
-        var handleDelete = propHandleDelete || contextHandleDelete;
-        var handleFlag = propHandleFlag || contextHandleFlag;
-        var handleMute = propHandleMute || contextHandleMute;
-        var handlePin = propHandlePin || contextHandlePin;
-        var message = propMessage || contextMessage;
-        var _d = React$2.useState(false), actionsBoxOpen = _d[0], setActionsBoxOpen = _d[1];
-        var isMuted = React$2.useCallback(function () { return isUserMuted(message, mutes); }, [message, mutes]);
-        var hideOptions = React$2.useCallback(function (event) {
-            if (event instanceof KeyboardEvent && event.key !== 'Escape') {
-                return;
-            }
-            setActionsBoxOpen(false);
-        }, []);
-        var messageActions = getMessageActions();
-        var messageDeletedAt = !!(message === null || message === void 0 ? void 0 : message.deleted_at);
-        React$2.useEffect(function () {
-            if (messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current) {
-                messageWrapperRef.current.addEventListener('mouseleave', hideOptions);
-            }
-        }, [hideOptions, messageWrapperRef]);
-        React$2.useEffect(function () {
-            if (messageDeletedAt) {
-                document.removeEventListener('click', hideOptions);
-            }
-        }, [hideOptions, messageDeletedAt]);
-        React$2.useEffect(function () {
-            if (!actionsBoxOpen)
-                return;
-            document.addEventListener('click', hideOptions);
-            document.addEventListener('keyup', hideOptions);
-            return function () {
-                document.removeEventListener('click', hideOptions);
-                document.removeEventListener('keyup', hideOptions);
-            };
-        }, [actionsBoxOpen, hideOptions]);
-        if (!messageActions.length && !customMessageActions)
-            return null;
-        return (React__default["default"].createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
-            React__default["default"].createElement(MessageActionsBox, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: mine ? mine() : isMyMessage(), open: actionsBoxOpen }),
-            React__default["default"].createElement("button", { "aria-expanded": actionsBoxOpen, "aria-haspopup": 'true', "aria-label": 'Open Message Actions Menu', className: 'str-chat__message-actions-box-button' },
-                React__default["default"].createElement(ActionsIcon$1, { className: 'str-chat__message-action-icon' }))));
-    };
-    var MessageActionsWrapper = function (props) {
-        var children = props.children, customWrapperClass = props.customWrapperClass, inline = props.inline, setActionsBoxOpen = props.setActionsBoxOpen;
-        var defaultWrapperClass = "\n  str-chat__message-simple__actions__action\n  str-chat__message-simple__actions__action--options\n  str-chat__message-actions-container";
-        var wrapperClass = customWrapperClass || defaultWrapperClass;
-        var onClickOptionsAction = function (event) {
-            event.stopPropagation();
-            setActionsBoxOpen(function (prev) { return !prev; });
-        };
-        var wrapperProps = {
-            className: wrapperClass,
-            'data-testid': 'message-actions',
-            onClick: onClickOptionsAction,
-        };
-        if (inline)
-            return React__default["default"].createElement("span", __assign({}, wrapperProps), children);
-        return React__default["default"].createElement("div", __assign({}, wrapperProps), children);
-    };
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageOptions = function (props) {
-        var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.displayReplies, displayReplies = _b === void 0 ? true : _b, propHandleOpenThread = props.handleOpenThread, messageWrapperRef = props.messageWrapperRef, _c = props.ReactionIcon, ReactionIcon$1 = _c === void 0 ? ReactionIcon : _c, _d = props.theme, theme = _d === void 0 ? 'simple' : _d, _e = props.ThreadIcon, ThreadIcon$1 = _e === void 0 ? ThreadIcon : _e;
-        var _f = useMessageContext('MessageOptions'), customMessageActions = _f.customMessageActions, getMessageActions = _f.getMessageActions, contextHandleOpenThread = _f.handleOpenThread, initialMessage = _f.initialMessage, message = _f.message, onReactionListClick = _f.onReactionListClick, threadList = _f.threadList;
-        var handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
-        var messageActions = getMessageActions();
-        var showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
-        var shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
-        var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
-        if (!message.type ||
-            message.type === 'error' ||
-            message.type === 'system' ||
-            message.type === 'ephemeral' ||
-            message.status === 'failed' ||
-            message.status === 'sending' ||
-            initialMessage) {
-            return null;
-        }
-        var rootClassName = "str-chat__message-".concat(theme, "__actions str-chat__message-options");
-        return (React__default["default"].createElement("div", { className: rootClassName, "data-testid": 'message-options' },
-            showActionsBox && (React__default["default"].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef })),
-            shouldShowReplies && (React__default["default"].createElement("button", { "aria-label": 'Open Thread', className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--thread str-chat__message-reply-in-thread-button"), "data-testid": 'thread-action', onClick: handleOpenThread },
-                React__default["default"].createElement(ThreadIcon$1, { className: 'str-chat__message-action-icon' }))),
-            shouldShowReactions && (React__default["default"].createElement("button", { "aria-label": 'Open Reaction Selector', className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--reactions str-chat__message-reactions-button"), "data-testid": 'message-reaction-action', onClick: onReactionListClick },
-                React__default["default"].createElement(ReactionIcon$1, { className: 'str-chat__message-action-icon' })))));
-    };
-    var MessageOptions = React__default["default"].memo(UnMemoizedMessageOptions);
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageRepliesCountButton = function (props) {
-        var labelPlural = props.labelPlural, labelSingle = props.labelSingle, onClick = props.onClick, _a = props.reply_count, reply_count = _a === void 0 ? 0 : _a;
-        var t = useTranslationContext('MessageRepliesCountButton').t;
-        var themeVersion = useChatContext('MessageRepliesCountButton').themeVersion;
-        if (!reply_count)
-            return null;
-        var replyCountText = t('replyCount', { count: reply_count });
-        if (labelPlural && reply_count > 1) {
-            replyCountText = "".concat(reply_count, " ").concat(labelPlural);
-        }
-        else if (labelSingle) {
-            replyCountText = "1 ".concat(labelSingle);
-        }
-        return (React__default["default"].createElement("div", { className: 'str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper' },
-            React__default["default"].createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', onClick: onClick },
-                themeVersion === '1' && React__default["default"].createElement(ReplyIcon, null),
-                replyCountText)));
-    };
-    var MessageRepliesCountButton = React__default["default"].memo(UnMemoizedMessageRepliesCountButton);
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};React__namespace.createContext();
     React__namespace.createContext();
 
@@ -47463,6 +47297,160 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};// Public components
      // Public types
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function useMessageActionsBoxPopper(_a) {
+        var open = _a.open, placement = _a.placement, referenceElement = _a.referenceElement;
+        var popperElementRef = React$2.useRef(null);
+        var _b = usePopper(referenceElement, popperElementRef.current, {
+            modifiers: [
+                {
+                    name: 'eventListeners',
+                    options: {
+                        // It's not safe to update popper position on resize and scroll, since popper's
+                        // reference element might not be visible at the time.
+                        resize: false,
+                        scroll: false,
+                    },
+                },
+            ],
+            placement: placement,
+        }), attributes = _b.attributes, styles = _b.styles, update = _b.update;
+        React$2.useEffect(function () {
+            if (open) {
+                // Since the popper's reference element might not be (and usually is not) visible
+                // all the time, it's safer to force popper update before showing it.
+                update === null || update === void 0 ? void 0 : update();
+            }
+        }, [open, update]);
+        return {
+            attributes: attributes,
+            popperElementRef: popperElementRef,
+            styles: styles,
+        };
+    }
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MessageActions = function (props) {
+        var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propGetMessageActions = props.getMessageActions, propHandleDelete = props.handleDelete, propHandleFlag = props.handleFlag, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
+        var mutes = useChatContext('MessageActions').mutes;
+        var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
+        var getMessageActions = propGetMessageActions || contextGetMessageActions;
+        var handleDelete = propHandleDelete || contextHandleDelete;
+        var handleFlag = propHandleFlag || contextHandleFlag;
+        var handleMute = propHandleMute || contextHandleMute;
+        var handlePin = propHandlePin || contextHandlePin;
+        var message = propMessage || contextMessage;
+        var isMine = mine ? mine() : isMyMessage();
+        var _d = React$2.useState(false), actionsBoxOpen = _d[0], setActionsBoxOpen = _d[1];
+        var isMuted = React$2.useCallback(function () { return isUserMuted(message, mutes); }, [message, mutes]);
+        var hideOptions = React$2.useCallback(function (event) {
+            if (event instanceof KeyboardEvent && event.key !== 'Escape') {
+                return;
+            }
+            setActionsBoxOpen(false);
+        }, []);
+        var messageActions = getMessageActions();
+        var messageDeletedAt = !!(message === null || message === void 0 ? void 0 : message.deleted_at);
+        React$2.useEffect(function () {
+            if (messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current) {
+                messageWrapperRef.current.addEventListener('mouseleave', hideOptions);
+            }
+        }, [hideOptions, messageWrapperRef]);
+        React$2.useEffect(function () {
+            if (messageDeletedAt) {
+                document.removeEventListener('click', hideOptions);
+            }
+        }, [hideOptions, messageDeletedAt]);
+        React$2.useEffect(function () {
+            if (!actionsBoxOpen)
+                return;
+            document.addEventListener('click', hideOptions);
+            document.addEventListener('keyup', hideOptions);
+            return function () {
+                document.removeEventListener('click', hideOptions);
+                document.removeEventListener('keyup', hideOptions);
+            };
+        }, [actionsBoxOpen, hideOptions]);
+        var actionsBoxButtonRef = React$2.useRef(null);
+        var _e = useMessageActionsBoxPopper({
+            open: actionsBoxOpen,
+            placement: isMine ? 'top-end' : 'top-start',
+            referenceElement: actionsBoxButtonRef.current,
+        }), attributes = _e.attributes, popperElementRef = _e.popperElementRef, styles = _e.styles;
+        if (!messageActions.length && !customMessageActions)
+            return null;
+        return (React__default["default"].createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
+            React__default["default"].createElement(MessageActionsBox, __assign({}, attributes.popper, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: isMine, open: actionsBoxOpen, ref: popperElementRef, style: styles.popper })),
+            React__default["default"].createElement("button", { "aria-expanded": actionsBoxOpen, "aria-haspopup": 'true', "aria-label": 'Open Message Actions Menu', className: 'str-chat__message-actions-box-button', ref: actionsBoxButtonRef },
+                React__default["default"].createElement(ActionsIcon$1, { className: 'str-chat__message-action-icon' }))));
+    };
+    var MessageActionsWrapper = function (props) {
+        var children = props.children, customWrapperClass = props.customWrapperClass, inline = props.inline, setActionsBoxOpen = props.setActionsBoxOpen;
+        var defaultWrapperClass = "\n  str-chat__message-simple__actions__action\n  str-chat__message-simple__actions__action--options\n  str-chat__message-actions-container";
+        var wrapperClass = customWrapperClass || defaultWrapperClass;
+        var onClickOptionsAction = function (event) {
+            event.stopPropagation();
+            setActionsBoxOpen(function (prev) { return !prev; });
+        };
+        var wrapperProps = {
+            className: wrapperClass,
+            'data-testid': 'message-actions',
+            onClick: onClickOptionsAction,
+        };
+        if (inline)
+            return React__default["default"].createElement("span", __assign({}, wrapperProps), children);
+        return React__default["default"].createElement("div", __assign({}, wrapperProps), children);
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageOptions = function (props) {
+        var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.displayReplies, displayReplies = _b === void 0 ? true : _b, propHandleOpenThread = props.handleOpenThread, messageWrapperRef = props.messageWrapperRef, _c = props.ReactionIcon, ReactionIcon$1 = _c === void 0 ? ReactionIcon : _c, _d = props.theme, theme = _d === void 0 ? 'simple' : _d, _e = props.ThreadIcon, ThreadIcon$1 = _e === void 0 ? ThreadIcon : _e;
+        var _f = useMessageContext('MessageOptions'), customMessageActions = _f.customMessageActions, getMessageActions = _f.getMessageActions, contextHandleOpenThread = _f.handleOpenThread, initialMessage = _f.initialMessage, message = _f.message, onReactionListClick = _f.onReactionListClick, threadList = _f.threadList;
+        var handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
+        var messageActions = getMessageActions();
+        var showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
+        var shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
+        var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
+        if (!message.type ||
+            message.type === 'error' ||
+            message.type === 'system' ||
+            message.type === 'ephemeral' ||
+            message.status === 'failed' ||
+            message.status === 'sending' ||
+            initialMessage) {
+            return null;
+        }
+        var rootClassName = "str-chat__message-".concat(theme, "__actions str-chat__message-options");
+        return (React__default["default"].createElement("div", { className: rootClassName, "data-testid": 'message-options' },
+            showActionsBox && (React__default["default"].createElement(MessageActions, { ActionsIcon: ActionsIcon$1, messageWrapperRef: messageWrapperRef })),
+            shouldShowReplies && (React__default["default"].createElement("button", { "aria-label": 'Open Thread', className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--thread str-chat__message-reply-in-thread-button"), "data-testid": 'thread-action', onClick: handleOpenThread },
+                React__default["default"].createElement(ThreadIcon$1, { className: 'str-chat__message-action-icon' }))),
+            shouldShowReactions && (React__default["default"].createElement("button", { "aria-label": 'Open Reaction Selector', className: "str-chat__message-".concat(theme, "__actions__action str-chat__message-").concat(theme, "__actions__action--reactions str-chat__message-reactions-button"), "data-testid": 'message-reaction-action', onClick: onReactionListClick },
+                React__default["default"].createElement(ReactionIcon$1, { className: 'str-chat__message-action-icon' })))));
+    };
+    var MessageOptions = React__default["default"].memo(UnMemoizedMessageOptions);
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedMessageRepliesCountButton = function (props) {
+        var labelPlural = props.labelPlural, labelSingle = props.labelSingle, onClick = props.onClick, _a = props.reply_count, reply_count = _a === void 0 ? 0 : _a;
+        var t = useTranslationContext('MessageRepliesCountButton').t;
+        var themeVersion = useChatContext('MessageRepliesCountButton').themeVersion;
+        if (!reply_count)
+            return null;
+        var replyCountText = t('replyCount', { count: reply_count });
+        if (labelPlural && reply_count > 1) {
+            replyCountText = "".concat(reply_count, " ").concat(labelPlural);
+        }
+        else if (labelSingle) {
+            replyCountText = "1 ".concat(labelSingle);
+        }
+        return (React__default["default"].createElement("div", { className: 'str-chat__message-simple-reply-button str-chat__message-replies-count-button-wrapper' },
+            React__default["default"].createElement("button", { className: 'str-chat__message-replies-count-button', "data-testid": 'replies-count-button', onClick: onClick },
+                themeVersion === '1' && React__default["default"].createElement(ReplyIcon, null),
+                replyCountText)));
+    };
+    var MessageRepliesCountButton = React__default["default"].memo(UnMemoizedMessageRepliesCountButton);
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var Tooltip = function (_a) {
         var children = _a.children, rest = __rest(_a, ["children"]);
         return (React__default["default"].createElement("div", __assign({ className: 'str-chat__tooltip' }, rest), children));
@@ -47589,6 +47577,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var message = propMessage || contextMessage;
         var hasAttachment = messageHasAttachments(message);
         var messageTextToRender = ((_b = message.i18n) === null || _b === void 0 ? void 0 : _b["".concat(userLanguage, "_text")]) || message.text;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var messageText = React$2.useMemo(function () { return renderText$1(messageTextToRender, message.mentioned_users); }, [
             message.mentioned_users,
             messageTextToRender,
@@ -48108,6 +48097,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             });
             return Object.values(uniqueUsers);
         }, [members, watchers]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var queryMembersThrottled = React$2.useCallback(lodash_throttle(function (query, onReady) { return __awaiter(void 0, void 0, void 0, function () {
             var response, users, error_1;
             return __generator(this, function (_a) {
@@ -48417,6 +48407,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 channel === null || channel === void 0 ? void 0 : channel.off('message.deleted', handleQuotedMessageUpdate);
                 channel === null || channel === void 0 ? void 0 : channel.off('message.updated', handleQuotedMessageUpdate);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [channel, quotedMessage]);
         return themeVersion === '2' ? (React__default["default"].createElement(MessageInputV2, null)) : (React__default["default"].createElement(MessageInputV1, null));
     };
@@ -48584,6 +48575,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var removeImage = React$2.useCallback(function (id) {
             dispatch({ id: id, type: 'removeImageUpload' });
             // TODO: cancel upload if still uploading
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var uploadImage = React$2.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
             var img, file, canUpload, response, error_1, errorMessage, alreadyRemoved;
@@ -48659,7 +48651,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                         return [2 /*return*/];
                 }
             });
-        }); }, [imageUploads, channel, doImageUploadRequest, errorHandler, removeImage]);
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [imageUploads, channel, doImageUploadRequest, errorHandler, removeImage]);
         React$2.useEffect(function () {
             var upload = Object.values(imageUploads).find(function (imageUpload) { return imageUpload.state === 'uploading' && imageUpload.file; });
             if (!upload)
@@ -48681,10 +48675,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var t = useTranslationContext('useFileUploads').t;
         var uploadFile = React$2.useCallback(function (id) {
             dispatch({ id: id, state: 'uploading', type: 'setFileUpload' });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var removeFile = React$2.useCallback(function (id) {
             // TODO: cancel upload if still uploading
             dispatch({ id: id, type: 'removeFileUpload' });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         React$2.useEffect(function () {
             (function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -48756,6 +48752,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     }
                 });
             }); })();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [fileUploads, channel, doFileUploadRequest, errorHandler, removeFile]);
         return {
             removeFile: removeFile,
@@ -48807,7 +48804,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 }
             });
             (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }, [maxFilesLeft, noFiles]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [maxFilesLeft, noFiles]);
         return {
             maxFilesLeft: maxFilesLeft,
             numberOfUploads: numberOfUploads,
@@ -48858,7 +48857,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 },
                 type: 'setText',
             });
-        }, [additionalTextareaProps, newCursorPosition, textareaRef]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [additionalTextareaProps, newCursorPosition, textareaRef]);
         React$2.useEffect(function () {
             var textareaElement = textareaRef.current;
             if (textareaElement && newCursorPosition.current !== undefined) {
@@ -48881,7 +48882,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             if (publishTypingEvent && newText && channel) {
                 streamChat.logChatPromiseExecution(channel.keystroke(parent === null || parent === void 0 ? void 0 : parent.id), 'start typing event');
             }
-        }, [channel, findAndEnqueueURLsToEnrich, parent, publishTypingEvent]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [channel, findAndEnqueueURLsToEnrich, parent, publishTypingEvent]);
         return {
             handleChange: handleChange,
             insertText: insertText,
@@ -49115,7 +49118,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     }
                 });
             }); })(clipboardEvent);
-        }, [insertText, uploadNewFiles]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [insertText, uploadNewFiles]);
         return { onPaste: onPaste };
     };
 
@@ -49139,7 +49144,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 mode: exports.SetLinkPreviewMode.UPSERT,
                 type: 'setLinkPreviews',
             });
-        }, [onLinkPreviewDismissed]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [onLinkPreviewDismissed]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var findAndEnqueueURLsToEnrich = React$2.useCallback(lodash_debounce(function (text, mode) {
             if (mode === void 0) { mode = exports.SetLinkPreviewMode.SET; }
             var urls = findURLFn
@@ -49205,6 +49213,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     });
                 });
             });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [shouldDiscardEnrichQueries, linkPreviews]);
         return {
             cancelURLEnrichment: cancelURLEnrichment,
@@ -49498,7 +49507,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             uploadImage: uploadImage,
             uploadNewFiles: uploadNewFiles,
             useMentionsTransliteration: useMentionsTransliteration,
-        }); }, [
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
             cancelURLEnrichment,
             cooldownInterval,
             cooldownRemaining,
@@ -49581,6 +49592,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 channel === null || channel === void 0 ? void 0 : channel.off('message.deleted', handleQuotedMessageUpdate);
                 channel === null || channel === void 0 ? void 0 : channel.off('message.updated', handleQuotedMessageUpdate);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [channel, quotedMessage]);
         return (React__default["default"].createElement("div", { className: 'str-chat__small-message-input__wrapper' },
             React__default["default"].createElement(ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0 || !!cooldownRemaining, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
@@ -49743,8 +49755,11 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var message = useMessageContext('useProcessReactions').message;
         var contextReactionOptions = useComponentContext('useProcessReactions').reactionOptions;
         var reactionOptions = propReactionOptions !== null && propReactionOptions !== void 0 ? propReactionOptions : contextReactionOptions;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var latestReactions = propReactions || message.latest_reactions || [];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var ownReactions = propOwnReactions || (message === null || message === void 0 ? void 0 : message.own_reactions) || [];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var reactionCounts = propReactionCounts || message.reaction_counts || {};
         var iHaveReactedWithReaction = React$2.useCallback(function (reactionType) { return ownReactions.find(function (reaction) { return reaction.type === reactionType; }); }, [ownReactions]);
         var getEmojiByReactionType = React$2.useCallback(function (reactionType) { return reactionOptions.find(function (_a) {
@@ -50256,7 +50271,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     //  The MessageList should have configurable the limit for performing the requests.
     //  This parameter would then be used within these functions
     var hasMoreMessagesProbably = function (returnedCountMessages, limit) {
-        return returnedCountMessages === limit;
+        return returnedCountMessages >= limit;
     };
     // @deprecated
     var hasNotMoreMessages = function (returnedCountMessages, limit) {
@@ -50430,7 +50445,65 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         url.searchParams.set('w', resizeDimensions.width.toString());
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=streamChat.logChatPromiseExecution;window.StreamChat.Channel=Channel$1;window.ICAL=window.ICAL||{};var UnMemoizedChannel = function (props) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
+     * Component to display system and channel event messages
+     */
+    var UnMemoizedEventComponent = function (props) {
+        var _a, _b, _c;
+        var _d = props.Avatar, Avatar$1 = _d === void 0 ? Avatar : _d, message = props.message;
+        var tDateTimeParser = useTranslationContext('EventComponent').tDateTimeParser;
+        var _e = message.created_at, created_at = _e === void 0 ? '' : _e, event = message.event, text = message.text, type = message.type;
+        var getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser: tDateTimeParser };
+        if (type === 'system')
+            return (React__default["default"].createElement("div", { className: 'str-chat__message--system', "data-testid": 'message-system' },
+                React__default["default"].createElement("div", { className: 'str-chat__message--system__text' },
+                    React__default["default"].createElement("div", { className: 'str-chat__message--system__line' }),
+                    React__default["default"].createElement("p", null, text),
+                    React__default["default"].createElement("div", { className: 'str-chat__message--system__line' })),
+                React__default["default"].createElement("div", { className: 'str-chat__message--system__date' },
+                    React__default["default"].createElement("strong", null,
+                        getDateString(__assign(__assign({}, getDateOptions), { format: 'dddd' })),
+                        " "),
+                    "at ",
+                    getDateString(__assign(__assign({}, getDateOptions), { format: 'hh:mm A' })))));
+        if ((event === null || event === void 0 ? void 0 : event.type) === 'member.removed' || (event === null || event === void 0 ? void 0 : event.type) === 'member.added') {
+            var name_1 = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = event.user) === null || _b === void 0 ? void 0 : _b.id);
+            var sentence = "".concat(name_1, " ").concat(event.type === 'member.added' ? 'has joined the chat' : 'was removed from the chat');
+            return (React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event' },
+                React__default["default"].createElement(Avatar$1, { image: (_c = event.user) === null || _c === void 0 ? void 0 : _c.image, name: name_1, user: event.user }),
+                React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event__content' },
+                    React__default["default"].createElement("em", { className: 'str-chat__event-component__channel-event__sentence' }, sentence),
+                    React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event__date' }, getDateString(__assign(__assign({}, getDateOptions), { format: 'LT' }))))));
+        }
+        return null;
+    };
+    var EventComponent = React__default["default"].memo(UnMemoizedEventComponent);
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedDateSeparator = function (props) {
+        var messageCreatedAt = props.date, formatDate = props.formatDate, _a = props.position, position = _a === void 0 ? 'right' : _a, unread = props.unread;
+        var _b = useTranslationContext('DateSeparator'), t = _b.t, tDateTimeParser = _b.tDateTimeParser;
+        var formattedDate = getDateString({
+            calendar: true,
+            formatDate: formatDate,
+            messageCreatedAt: messageCreatedAt,
+            tDateTimeParser: tDateTimeParser,
+        });
+        return (React__default["default"].createElement("div", { className: 'str-chat__date-separator', "data-testid": 'date-separator' },
+            (position === 'right' || position === 'center') && (React__default["default"].createElement("hr", { className: 'str-chat__date-separator-line' })),
+            React__default["default"].createElement("div", { className: 'str-chat__date-separator-date' }, unread ? "".concat(t('New'), " - ").concat(formattedDate) : formattedDate),
+            (position === 'left' || position === 'center') && (React__default["default"].createElement("hr", { className: 'str-chat__date-separator-line' }))));
+    };
+    /**
+     * A simple date separator between messages.
+     */
+    var DateSeparator = React__default["default"].memo(UnMemoizedDateSeparator);
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=streamChat.logChatPromiseExecution;window.StreamChat.Channel=Channel$1;window.ICAL=window.ICAL||{};var isUserResponseArray = function (output) { var _a; return ((_a = output[0]) === null || _a === void 0 ? void 0 : _a.id) != null; };
+    var UnMemoizedChannel = function (props) {
         var propsChannel = props.channel, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a, LoadingErrorIndicator = props.LoadingErrorIndicator, _b = props.LoadingIndicator, LoadingIndicator = _b === void 0 ? LoadingChannel : _b;
         var _c = useChatContext('Channel'), contextChannel = _c.channel, channelsQueryState = _c.channelsQueryState, customClasses = _c.customClasses, theme = _c.theme;
         var _d = useChannelContainerClasses({
@@ -50651,6 +50724,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 client.off('user.deleted', handleEvent);
                 notificationTimeouts.forEach(clearTimeout);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [
             channel.cid,
             channelQueryOptions,
@@ -50669,14 +50743,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         /** MESSAGE */
         // Adds a temporary notification to message list, will be removed after 5 seconds
         var addNotification = makeAddNotifications(setNotifications, notificationTimeouts);
-        var loadMoreFinished = lodash_debounce(function (hasMore, messages) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        var loadMoreFinished = React$2.useCallback(lodash_debounce(function (hasMore, messages) {
             if (!isMounted.current)
                 return;
             dispatch({ hasMore: hasMore, messages: messages, type: 'loadMoreFinished' });
-        }, 2000, {
-            leading: true,
-            trailing: true,
-        });
+        }, 2000, { leading: true, trailing: true }), []);
         var loadMore = function (limit) {
             if (limit === void 0) { limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE; }
             return __awaiter(void 0, void 0, void 0, function () {
@@ -50720,12 +50792,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var loadMoreNewer = function (limit) {
             if (limit === void 0) { limit = 100; }
             return __awaiter(void 0, void 0, void 0, function () {
-                var newestMessage, newestId, perPage, queryResponse, e_3, hasMoreNewer;
+                var newestMessage, newestId, perPage, queryResponse, e_3, hasMoreNewerMessages;
                 var _a, _b;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
-                            if (!online.current || !window.navigator.onLine)
+                            if (!online.current || !window.navigator.onLine || !state.hasMoreNewer)
                                 return [2 /*return*/, 0];
                             newestMessage = (_a = state === null || state === void 0 ? void 0 : state.messages) === null || _a === void 0 ? void 0 : _a[((_b = state === null || state === void 0 ? void 0 : state.messages) === null || _b === void 0 ? void 0 : _b.length) - 1];
                             if (state.loadingMore || state.loadingMoreNewer)
@@ -50749,8 +50821,12 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             dispatch({ loadingMoreNewer: false, type: 'setLoadingMoreNewer' });
                             return [2 /*return*/, 0];
                         case 4:
-                            hasMoreNewer = channel.state.messages !== channel.state.latestMessages;
-                            dispatch({ hasMoreNewer: hasMoreNewer, messages: channel.state.messages, type: 'loadMoreNewerFinished' });
+                            hasMoreNewerMessages = channel.state.messages !== channel.state.latestMessages;
+                            dispatch({
+                                hasMoreNewer: hasMoreNewerMessages,
+                                messages: channel.state.messages,
+                                type: 'loadMoreNewerFinished',
+                            });
                             return [2 /*return*/, queryResponse.messages.length];
                     }
                 });
@@ -50835,7 +50911,6 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 type: 'copyMessagesFromChannel',
             });
         };
-        var isUserResponseArray = function (output) { var _a; return ((_a = output[0]) === null || _a === void 0 ? void 0 : _a.id) != null; };
         var doSendMessage = function (message, customMessageData, options) { return __awaiter(void 0, void 0, void 0, function () {
             var attachments, id, _a, mentioned_users, parent_id, text, mentions, messageData, messageResponse, existingMessage, i, msg, responseTimestamp, existingMessageTimestamp, responseIsTheNewest, error_1, stringError, parsedError;
             var _b, _c;
@@ -50955,17 +51030,18 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             event === null || event === void 0 ? void 0 : event.preventDefault();
             dispatch({ type: 'closeThread' });
         };
-        var loadMoreThreadFinished = lodash_debounce(function (threadHasMore, threadMessages) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        var loadMoreThreadFinished = React$2.useCallback(lodash_debounce(function (threadHasMore, threadMessages) {
             dispatch({
                 threadHasMore: threadHasMore,
                 threadMessages: threadMessages,
                 type: 'loadMoreThreadFinished',
             });
-        }, 2000, { leading: true, trailing: true });
+        }, 2000, { leading: true, trailing: true }), []);
         var loadMoreThread = function (limit) {
             if (limit === void 0) { limit = DEFAULT_THREAD_PAGE_SIZE; }
             return __awaiter(void 0, void 0, void 0, function () {
-                var parentID, oldMessages, oldestMessageID, queryResponse, threadHasMoreMessages, newThreadMessages;
+                var parentId, oldMessages, oldestMessageId, queryResponse, threadHasMoreMessages, newThreadMessages;
                 var _a;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
@@ -50974,23 +51050,23 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             if (state.threadLoadingMore || !state.thread)
                                 return [2 /*return*/];
                             dispatch({ type: 'startLoadingThread' });
-                            parentID = state.thread.id;
-                            if (!parentID) {
+                            parentId = state.thread.id;
+                            if (!parentId) {
                                 return [2 /*return*/, dispatch({ type: 'closeThread' })];
                             }
-                            oldMessages = channel.state.threads[parentID] || [];
-                            oldestMessageID = (_a = oldMessages[0]) === null || _a === void 0 ? void 0 : _a.id;
+                            oldMessages = channel.state.threads[parentId] || [];
+                            oldestMessageId = (_a = oldMessages[0]) === null || _a === void 0 ? void 0 : _a.id;
                             _b.label = 1;
                         case 1:
                             _b.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, channel.getReplies(parentID, {
-                                    id_lt: oldestMessageID,
+                            return [4 /*yield*/, channel.getReplies(parentId, {
+                                    id_lt: oldestMessageId,
                                     limit: limit,
                                 })];
                         case 2:
                             queryResponse = _b.sent();
                             threadHasMoreMessages = hasMoreMessagesProbably(queryResponse.messages.length, limit);
-                            newThreadMessages = channel.state.threads[parentID] || [];
+                            newThreadMessages = channel.state.threads[parentId] || [];
                             // next set loadingMore to false so we can start asking for more data
                             loadMoreThreadFinished(threadHasMoreMessages, newThreadMessages);
                             return [3 /*break*/, 4];
@@ -51027,7 +51103,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             setQuotedMessage: setQuotedMessage,
             skipMessageDataMemoization: skipMessageDataMemoization,
             updateMessage: updateMessage,
-        }); }, [
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
             channel.cid,
             deleteMessage,
             enrichURLForPreviewConfig === null || enrichURLForPreviewConfig === void 0 ? void 0 : enrichURLForPreviewConfig.findURLFn,
@@ -51049,7 +51127,8 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 Avatar: props.Avatar,
                 BaseImage: props.BaseImage,
                 CooldownTimer: props.CooldownTimer,
-                DateSeparator: props.DateSeparator,
+                CustomMessageActionsList: props.CustomMessageActionsList,
+                DateSeparator: props.DateSeparator || DateSeparator,
                 EditMessageInput: props.EditMessageInput,
                 EmojiPicker: props.EmojiPicker,
                 emojiSearchIndex: props.emojiSearchIndex,
@@ -51067,7 +51146,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 MessageOptions: props.MessageOptions,
                 MessageRepliesCountButton: props.MessageRepliesCountButton,
                 MessageStatus: props.MessageStatus,
-                MessageSystem: props.MessageSystem,
+                MessageSystem: props.MessageSystem || EventComponent,
                 MessageTimestamp: props.MessageTimestamp,
                 ModalGallery: props.ModalGallery,
                 PinIndicator: props.PinIndicator,
@@ -51084,7 +51163,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 TypingIndicator: props.TypingIndicator,
                 VirtualMessage: props.VirtualMessage,
             });
-        }, [props.reactionOptions]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [props.reactionOptions]);
         var typingContextValue = useCreateTypingContext({
             typing: typing,
         });
@@ -51200,6 +51281,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('user.updated', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         return {
             displayImage: overrideImage || displayImage,
@@ -51302,6 +51384,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('channel.deleted', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51327,6 +51410,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('channel.hidden', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51346,6 +51430,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('channel.truncated', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51374,6 +51459,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('channel.updated', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51407,6 +51493,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('channel.visible', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51422,6 +51509,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('connection.recovered', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
     };
 
@@ -51463,6 +51551,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('message.new', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [lockChannelOrder]);
     };
 
@@ -51523,6 +51612,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('notification.added_to_channel', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51558,6 +51648,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('notification.message_new', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51576,6 +51667,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('notification.removed_from_channel', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [customHandler]);
     };
 
@@ -51595,6 +51687,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         // memoize props
         var filterString = React$2.useMemo(function () { return JSON.stringify(filters); }, [filters]);
         var sortString = React$2.useMemo(function () { return JSON.stringify(sort); }, [sort]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var queryChannels = function (queryType) { return __awaiter(void 0, void 0, void 0, function () {
             var offset, newOptions, channelQueryResponse, newChannels, err_1;
             var _a;
@@ -51663,6 +51756,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         }, [client, throttleRecover]);
         React$2.useEffect(function () {
             queryChannels('reload');
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [filterString, sortString]);
         return {
             channels: channels,
@@ -51693,6 +51787,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off('user.presence.changed', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
     };
 
@@ -51735,6 +51830,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             var handleEvent = function () { return setMuted(channel.muteStatus()); };
             client.on('notification.channel_mutes_updated', handleEvent);
             return function () { return client.off('notification.channel_mutes_updated', handleEvent); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [muted]);
         return muted;
     };
@@ -51818,6 +51914,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             };
             client.on('notification.mark_read', handleEvent);
             return function () { return client.off('notification.mark_read', handleEvent); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var refreshUnreadCount = React$2.useCallback(function () {
             if (isActive || muted) {
@@ -51842,6 +51939,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 channel.off('message.updated', handleEvent);
                 channel.off('message.deleted', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [refreshUnreadCount, channelUpdateCount]);
         if (!Preview)
             return null;
@@ -51898,6 +51996,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             };
             document.addEventListener('click', clickListener);
             return function () { return document.removeEventListener('click', clickListener); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [disabled, inputIsFocused, query, exitSearch, clearSearchOnClickOutside]);
         React$2.useEffect(function () {
             if (!inputRef.current || disabled)
@@ -51909,8 +52008,10 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             inputRef.current.addEventListener('keydown', handleKeyDown);
             return function () {
                 var _a;
+                // eslint-disable-next-line react-hooks/exhaustive-deps
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleKeyDown);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [disabled]);
         var selectResult = React$2.useCallback(function (result) { return __awaiter(void 0, void 0, void 0, function () {
             var selectedChannel, newChannel;
@@ -51949,7 +52050,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                         return [2 /*return*/];
                 }
             });
-        }); }, [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels]);
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [clearSearchOnClickOutside, client, exitSearch, onSelectResult, setActiveChannel, setChannels]);
         var getChannels = React$2.useCallback(function (text) { return __awaiter(void 0, void 0, void 0, function () {
             var results, userQueryPromise, users, channelQueryPromise, _a, channels, users, error_1;
             var _b, _c, _d, _e, _f, _g;
@@ -51997,6 +52100,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 }
             });
         }); }, [client, searchForChannels, searchQueryParams]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         var scheduleGetChannels = React$2.useCallback(lodash_debounce(getChannels, searchDebounceIntervalMs), [
             getChannels,
             searchDebounceIntervalMs,
@@ -52104,11 +52208,13 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 (_a = props.inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('focus', handleFocus);
                 (_b = props.inputRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', handleBlur);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var handleClearClick = React$2.useCallback(function () {
             var _a;
             exitSearch();
             (_a = inputProps.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var closeAppMenu = React$2.useCallback(function () { return setMenuIsOpen(false); }, []);
         return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-bar', "data-testid": 'search-bar', ref: searchBarRef },
@@ -52194,7 +52300,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     return setFocusedResult(undefined);
                 }
             }
-        }, [focusedResult]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [focusedResult]);
         React$2.useEffect(function () {
             document.addEventListener('keydown', handleKeyDown, false);
             return function () { return document.removeEventListener('keydown', handleKeyDown); };
@@ -52277,6 +52385,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
         React$2.useEffect(function () {
             deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMoreButton');
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         return (React__default["default"].createElement("div", { className: 'str-chat__load-more-button' },
             React__default["default"].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: loading, onClick: onClick }, loading ? React__default["default"].createElement(LoadingIndicator, null) : childrenOrDefaultString)));
@@ -52288,6 +52397,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var loadingState = typeof isLoading !== 'undefined' ? isLoading : refreshing;
         React$2.useEffect(function () {
             deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMorePaginator');
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             !reverse && children,
@@ -52359,11 +52469,13 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 setSearchActive(true);
             }
             (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearch) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps, event);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var onSearchExit = React$2.useCallback(function () {
             var _a;
             setSearchActive(false);
             (_a = additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.onSearchExit) === null || _a === void 0 ? void 0 : _a.call(additionalChannelSearchProps);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         var _u = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs), channels = _u.channels, hasNextPage = _u.hasNextPage, loadNextPage = _u.loadNextPage, setChannels = _u.setChannels;
         var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
@@ -52391,6 +52503,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 client.off('channel.deleted', handleEvent);
                 client.off('channel.hidden', handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [channel === null || channel === void 0 ? void 0 : channel.cid]);
         var renderChannel = function (item) {
             var previewProps = {
@@ -52430,7 +52543,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.2.1';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.4.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -52472,6 +52585,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             };
             client.on('notification.mutes_updated', handleEvent);
             return function () { return client.off('notification.mutes_updated', handleEvent); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [clientMutes === null || clientMutes === void 0 ? void 0 : clientMutes.length]);
         React$2.useEffect(function () {
             var _a;
@@ -52487,6 +52601,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             streami18n.getTranslators().then(function (translator) {
                 setTranslators(__assign(__assign({}, translator), { userLanguage: userLanguage || defaultLanguage }));
             });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [i18nInstance]);
         var setActiveChannel = React$2.useCallback(function (activeChannel, watchers, event) {
             if (watchers === void 0) { watchers = {}; }
@@ -52548,7 +52663,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             theme: theme,
             themeVersion: themeVersion,
             useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
-        }); }, [
+        }); }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
             channelCid,
             channelsQueryError,
             channelsQueryInProgress,
@@ -52651,63 +52768,6 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedDateSeparator = function (props) {
-        var messageCreatedAt = props.date, formatDate = props.formatDate, _a = props.position, position = _a === void 0 ? 'right' : _a, unread = props.unread;
-        var _b = useTranslationContext('DateSeparator'), t = _b.t, tDateTimeParser = _b.tDateTimeParser;
-        var formattedDate = getDateString({
-            calendar: true,
-            formatDate: formatDate,
-            messageCreatedAt: messageCreatedAt,
-            tDateTimeParser: tDateTimeParser,
-        });
-        return (React__default["default"].createElement("div", { className: 'str-chat__date-separator', "data-testid": 'date-separator' },
-            (position === 'right' || position === 'center') && (React__default["default"].createElement("hr", { className: 'str-chat__date-separator-line' })),
-            React__default["default"].createElement("div", { className: 'str-chat__date-separator-date' }, unread ? "".concat(t('New'), " - ").concat(formattedDate) : formattedDate),
-            (position === 'left' || position === 'center') && (React__default["default"].createElement("hr", { className: 'str-chat__date-separator-line' }))));
-    };
-    /**
-     * A simple date separator between messages.
-     */
-    var DateSeparator = React__default["default"].memo(UnMemoizedDateSeparator);
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
-     * Component to display system and channel event messages
-     */
-    var UnMemoizedEventComponent = function (props) {
-        var _a, _b, _c;
-        var _d = props.Avatar, Avatar$1 = _d === void 0 ? Avatar : _d, message = props.message;
-        var tDateTimeParser = useTranslationContext('EventComponent').tDateTimeParser;
-        var _e = message.created_at, created_at = _e === void 0 ? '' : _e, event = message.event, text = message.text, type = message.type;
-        var getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser: tDateTimeParser };
-        if (type === 'system')
-            return (React__default["default"].createElement("div", { className: 'str-chat__message--system', "data-testid": 'message-system' },
-                React__default["default"].createElement("div", { className: 'str-chat__message--system__text' },
-                    React__default["default"].createElement("div", { className: 'str-chat__message--system__line' }),
-                    React__default["default"].createElement("p", null, text),
-                    React__default["default"].createElement("div", { className: 'str-chat__message--system__line' })),
-                React__default["default"].createElement("div", { className: 'str-chat__message--system__date' },
-                    React__default["default"].createElement("strong", null,
-                        getDateString(__assign(__assign({}, getDateOptions), { format: 'dddd' })),
-                        " "),
-                    "at ",
-                    getDateString(__assign(__assign({}, getDateOptions), { format: 'hh:mm A' })))));
-        if ((event === null || event === void 0 ? void 0 : event.type) === 'member.removed' || (event === null || event === void 0 ? void 0 : event.type) === 'member.added') {
-            var name_1 = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = event.user) === null || _b === void 0 ? void 0 : _b.id);
-            var sentence = "".concat(name_1, " ").concat(event.type === 'member.added' ? 'has joined the chat' : 'was removed from the chat');
-            return (React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event' },
-                React__default["default"].createElement(Avatar$1, { image: (_c = event.user) === null || _c === void 0 ? void 0 : _c.image, name: name_1, user: event.user }),
-                React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event__content' },
-                    React__default["default"].createElement("em", { className: 'str-chat__event-component__channel-event__sentence' }, sentence),
-                    React__default["default"].createElement("div", { className: 'str-chat__event-component__channel-event__date' }, getDateString(__assign(__assign({}, getDateOptions), { format: 'LT' }))))));
-        }
-        return null;
-    };
-    var EventComponent = React__default["default"].memo(UnMemoizedEventComponent);
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
@@ -52765,6 +52825,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 [{ hasMore: hasMore }, { hasPreviousPage: hasPreviousPage }],
                 [{ loadMore: loadMore }, { loadPreviousPage: loadPreviousPage }],
             ], 'InfiniteScroll');
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         React$2.useLayoutEffect(function () {
             var _a;
@@ -53122,7 +53183,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             var newOwnReactions = add
                 ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.own_reactions) || []), true) : (_b = message === null || message === void 0 ? void 0 : message.own_reactions) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.type !== reaction.type; });
             return __assign(__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_counts: newReactionCounts, reaction_scores: newReactionCounts });
-        }, [client.user, client.userID]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [client.user, client.userID]);
         var createReactionPreview = function (type) {
             var _a;
             return ({
@@ -53228,7 +53291,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 return;
             }
             setShowDetailedReactions(false);
-        }, [setShowDetailedReactions, reactionSelectorRef]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [setShowDetailedReactions, reactionSelectorRef]);
         React$2.useEffect(function () {
             var messageWrapper = messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current;
             if (showDetailedReactions && !hasListener.current) {
@@ -53513,7 +53578,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     acc[message.id] = style;
                 return acc;
             }, {});
-        }, [messagesWithDates, noGroupByUser]);
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [messagesWithDates, noGroupByUser]);
         return { messageGroupStyles: messageGroupStyles, messages: messagesWithDates };
     };
 
@@ -53528,9 +53595,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useMessageListElements = function (props) {
-        var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, read = props.read, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
+        var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, read = props.read, renderMessages = props.renderMessages, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
         var _a = useChatContext('useMessageListElements'), client = _a.client, customClasses = _a.customClasses;
-        var _b = useComponentContext('useMessageListElements'), _c = _b.DateSeparator, DateSeparator$1 = _c === void 0 ? DateSeparator : _c, HeaderComponent = _b.HeaderComponent, _d = _b.MessageSystem, MessageSystem = _d === void 0 ? EventComponent : _d;
+        var components = useComponentContext('useMessageListElements');
         // get the readData, but only for messages submitted by the user themselves
         var readData = useLastReadData({
             messages: enrichedMessages,
@@ -53538,34 +53605,28 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             returnAllReadData: returnAllReadData,
             userID: client.userID,
         });
-        var lastReceivedId = React$2.useMemo(function () { return getLastReceived(enrichedMessages); }, [enrichedMessages]);
+        var lastReceivedMessageId = React$2.useMemo(function () { return getLastReceived(enrichedMessages); }, [
+            enrichedMessages,
+        ]);
         var elements = React$2.useMemo(function () {
-            return enrichedMessages.map(function (message) {
-                if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
-                    message.date &&
-                    isDate(message.date)) {
-                    return (React__default["default"].createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
-                        React__default["default"].createElement(DateSeparator$1, { date: message.date, formatDate: internalMessageProps.formatDate, unread: message.unread })));
-                }
-                if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
-                    return (React__default["default"].createElement("li", { key: 'intro' },
-                        React__default["default"].createElement(HeaderComponent, null)));
-                }
-                if (message.type === 'system') {
-                    return (React__default["default"].createElement("li", { key: message.id || message.created_at },
-                        React__default["default"].createElement(MessageSystem, { message: message })));
-                }
-                var groupStyles = messageGroupStyles[message.id] || '';
-                var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
-                return (React__default["default"].createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass, key: message.id || message.created_at },
-                    React__default["default"].createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], threadList: threadList }, internalMessageProps))));
+            return renderMessages({
+                components: components,
+                customClasses: customClasses,
+                lastReceivedMessageId: lastReceivedMessageId,
+                messageGroupStyles: messageGroupStyles,
+                messages: enrichedMessages,
+                readData: readData,
+                sharedMessageProps: __assign(__assign({}, internalMessageProps), { threadList: threadList }),
             });
-        }, [
+        }, 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
             enrichedMessages,
             internalMessageProps,
-            lastReceivedId,
+            lastReceivedMessageId,
             messageGroupStyles,
             readData,
+            renderMessages,
             threadList,
         ]);
         return elements;
@@ -53622,6 +53683,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             }
             messages.current = newMessages;
             measures.current = newMeasures;
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [measures, messages, params.messages]);
         return function (scrollTopValue) {
             scrollTop.current = scrollTopValue;
@@ -53651,6 +53713,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 setWrapperRect(listElement.getBoundingClientRect());
                 scrollToBottom();
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [listElement, hasMoreNewer]);
         var updateScrollTop = useMessageListScrollManager({
             loadMoreScrollThreshold: loadMoreScrollThreshold,
@@ -53805,24 +53868,50 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         return React__default["default"].createElement(React__default["default"].Fragment, null, children);
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function defaultRenderMessages(_a) {
+        var components = _a.components, customClasses = _a.customClasses, lastReceivedId = _a.lastReceivedMessageId, messageGroupStyles = _a.messageGroupStyles, messages = _a.messages, readData = _a.readData, messageProps = _a.sharedMessageProps;
+        var DateSeparator = components.DateSeparator, HeaderComponent = components.HeaderComponent, MessageSystem = components.MessageSystem;
+        return messages.map(function (message) {
+            if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
+                message.date &&
+                isDate(message.date) &&
+                DateSeparator) {
+                return (React__default["default"].createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
+                    React__default["default"].createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
+            }
+            if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
+                return (React__default["default"].createElement("li", { key: 'intro' },
+                    React__default["default"].createElement(HeaderComponent, null)));
+            }
+            if (message.type === 'system' && MessageSystem) {
+                return (React__default["default"].createElement("li", { key: message.id || message.created_at },
+                    React__default["default"].createElement(MessageSystem, { message: message })));
+            }
+            var groupStyles = messageGroupStyles[message.id] || '';
+            var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
+            return (React__default["default"].createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass, key: message.id || message.created_at },
+                React__default["default"].createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))));
+        });
+    }
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MessageListWithContext = function (props) {
         var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, groupStyles = props.groupStyles, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, internalInfiniteScrollProps = props.internalInfiniteScrollProps, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
         _h = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-        returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read, _l = props.messageLimit, messageLimit = _l === void 0 ? 100 : _l, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _m = props.hasMoreNewer, hasMoreNewer = _m === void 0 ? false : _m, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _o = props.jumpToLatestMessage, jumpToLatestMessage = _o === void 0 ? function () { return Promise.resolve(); } : _o;
-        var _p = React__default["default"].useState(null), listElement = _p[0], setListElement = _p[1];
-        var _q = React__default["default"].useState(null), ulElement = _q[0], setUlElement = _q[1];
+        returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read, _l = props.renderMessages, renderMessages = _l === void 0 ? defaultRenderMessages : _l, _m = props.messageLimit, messageLimit = _m === void 0 ? 100 : _m, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _o = props.hasMoreNewer, hasMoreNewer = _o === void 0 ? false : _o, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _p = props.jumpToLatestMessage, jumpToLatestMessage = _p === void 0 ? function () { return Promise.resolve(); } : _p;
+        var _q = React__default["default"].useState(null), listElement = _q[0], setListElement = _q[1];
+        var _r = React__default["default"].useState(null), ulElement = _r[0], setUlElement = _r[1];
         var customClasses = useChatContext('MessageList').customClasses;
-        var _r = useComponentContext('MessageList'), _s = _r.EmptyStateIndicator, EmptyStateIndicator$1 = _s === void 0 ? EmptyStateIndicator : _s, _t = _r.LoadingIndicator, LoadingIndicator$1 = _t === void 0 ? LoadingIndicator : _t, _u = _r.MessageListNotifications, MessageListNotifications$1 = _u === void 0 ? MessageListNotifications : _u, _v = _r.MessageNotification, MessageNotification$1 = _v === void 0 ? MessageNotification : _v, _w = _r.TypingIndicator, TypingIndicator$1 = _w === void 0 ? TypingIndicator : _w;
+        var _s = useComponentContext('MessageList'), _t = _s.EmptyStateIndicator, EmptyStateIndicator$1 = _t === void 0 ? EmptyStateIndicator : _t, _u = _s.LoadingIndicator, LoadingIndicator$1 = _u === void 0 ? LoadingIndicator : _u, _v = _s.MessageListNotifications, MessageListNotifications$1 = _v === void 0 ? MessageListNotifications : _v, _w = _s.MessageNotification, MessageNotification$1 = _w === void 0 ? MessageNotification : _w, _x = _s.TypingIndicator, TypingIndicator$1 = _x === void 0 ? TypingIndicator : _x;
         var loadMoreScrollThreshold = (internalInfiniteScrollProps === null || internalInfiniteScrollProps === void 0 ? void 0 : internalInfiniteScrollProps.threshold) || 250;
-        var _x = useScrollLocationLogic({
+        var _y = useScrollLocationLogic({
             hasMoreNewer: hasMoreNewer,
             listElement: listElement,
             loadMoreScrollThreshold: loadMoreScrollThreshold,
             messages: messages,
             scrolledUpThreshold: props.scrolledUpThreshold,
             suppressAutoscroll: suppressAutoscroll,
-        }), hasNewMessages = _x.hasNewMessages, isMessageListScrolledToBottom = _x.isMessageListScrolledToBottom, onScroll = _x.onScroll, scrollToBottom = _x.scrollToBottom, wrapperRect = _x.wrapperRect;
-        var _y = useEnrichedMessages({
+        }), hasNewMessages = _y.hasNewMessages, isMessageListScrolledToBottom = _y.isMessageListScrolledToBottom, onScroll = _y.onScroll, scrollToBottom = _y.scrollToBottom, wrapperRect = _y.wrapperRect;
+        var _z = useEnrichedMessages({
             channel: channel,
             disableDateSeparator: disableDateSeparator,
             groupStyles: groupStyles,
@@ -53831,7 +53920,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             hideNewMessageSeparator: hideNewMessageSeparator,
             messages: messages,
             noGroupByUser: noGroupByUser,
-        }), messageGroupStyles = _y.messageGroupStyles, enrichedMessages = _y.messages;
+        }), messageGroupStyles = _z.messageGroupStyles, enrichedMessages = _z.messages;
         var elements = useMessageListElements({
             enrichedMessages: enrichedMessages,
             internalMessageProps: {
@@ -53862,6 +53951,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             },
             messageGroupStyles: messageGroupStyles,
             read: read,
+            renderMessages: renderMessages,
             returnAllReadData: returnAllReadData,
             threadList: threadList,
         });
@@ -53900,6 +53990,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 var element = ulElement === null || ulElement === void 0 ? void 0 : ulElement.querySelector("[data-message-id='".concat(highlightedMessageId, "']"));
                 element === null || element === void 0 ? void 0 : element.scrollIntoView({ block: 'center' });
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [highlightedMessageId]);
         var showEmptyStateIndicator = elements.length === 0 && !threadList;
         return (React__default["default"].createElement(MessageListContextProvider, { value: { listElement: listElement, scrollToBottom: scrollToBottom } },
@@ -53967,6 +54058,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return function () {
                 client.off(observedEvent, handleEvent);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
         React$2.useEffect(function () {
             if (isMessageListScrolledToBottom) {
@@ -55277,6 +55369,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             return 0;
             // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)
             // that's why the second dependency is necessary
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [firstRealMessageIndex, messages, messages === null || messages === void 0 ? void 0 : messages.length]);
         return numItemsPrepended;
     }
@@ -55301,6 +55394,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 initialFocusRegistered.current = true;
                 recheckForNewOwnMessage();
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [messages, messages === null || messages === void 0 ? void 0 : messages.length]);
         return recheckForNewOwnMessage;
     }
@@ -55320,6 +55414,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             if (separateGiphyPreview)
                 client.on('message.new', handleEvent);
             return function () { return client.off('message.new', handleEvent); };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [separateGiphyPreview]);
         return { giphyPreviewMessage: giphyPreviewMessage, setGiphyPreviewMessage: setGiphyPreviewMessage };
     };
@@ -55369,6 +55464,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 window.removeEventListener('focus', scrollToBottomIfConfigured);
                 window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [scrollToBottomIfConfigured]);
     };
 
@@ -55467,7 +55563,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         return messages.length - 1;
     }
     var VirtualizedMessageListWithContext = function (props) {
-        var additionalMessageInputProps = props.additionalMessageInputProps, _a = props.additionalVirtuosoProps, additionalVirtuosoProps = _a === void 0 ? {} : _a, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? true : _b, groupStyles = props.groupStyles, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, head = props.head, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _e = props.messageLimit, messageLimit = _e === void 0 ? 100 : _e, messages = props.messages, notifications = props.notifications, 
+        var additionalMessageInputProps = props.additionalMessageInputProps, _a = props.additionalVirtuosoProps, additionalVirtuosoProps = _a === void 0 ? {} : _a, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? true : _b, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _e = props.messageLimit, messageLimit = _e === void 0 ? 100 : _e, messages = props.messages, notifications = props.notifications, 
         // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
         _f = props.overscan, 
         // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
@@ -55501,6 +55597,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 setGiphyPreviewMessage: setGiphyPreviewMessage,
                 userId: client.userID || '',
             });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [
             disableDateSeparator,
             hideDeletedMessages,
@@ -55530,6 +55627,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
             }, {});
         }, 
         // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [processedMessages.length, shouldGroupByUser, groupStylesFn]);
         var _w = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _w.atBottom, isMessageListScrolledToBottom = _w.isMessageListScrolledToBottom, newMessagesNotification = _w.newMessagesNotification, setIsMessageListScrolledToBottom = _w.setIsMessageListScrolledToBottom, setNewMessagesNotification = _w.setNewMessagesNotification;
         var scrollToBottom = React$2.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -55579,19 +55677,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
         var atBottomStateChange = function (isAtBottom) {
             atBottom.current = isAtBottom;
             setIsMessageListScrolledToBottom(isAtBottom);
-            if (isAtBottom && newMessagesNotification) {
-                setNewMessagesNotification(false);
-            }
-        };
-        var startReached = function () {
-            if (hasMore && loadMore) {
-                loadMore(messageLimit);
+            if (isAtBottom) {
+                loadMoreNewer === null || loadMoreNewer === void 0 ? void 0 : loadMoreNewer(messageLimit);
+                setNewMessagesNotification === null || setNewMessagesNotification === void 0 ? void 0 : setNewMessagesNotification(false);
             }
         };
-        var endReached = function () {
-            if (hasMoreNewer && loadMoreNewer) {
-                loadMoreNewer(messageLimit);
-            }
+        var atTopStateChange = function (isAtTop) {
+            if (isAtTop)
+                loadMore === null || loadMore === void 0 ? void 0 : loadMore(messageLimit);
         };
         React$2.useEffect(function () {
             var _a;
@@ -55601,13 +55694,14 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                     (_a = virtuoso.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({ align: 'center', index: index });
                 }
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [highlightedMessageId]);
         if (!processedMessages)
             return null;
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(MessageListMainPanel, null,
                 React__default["default"].createElement("div", { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list' },
-                    React__default["default"].createElement(on$1, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 200, className: 'str-chat__message-list-scroll', components: __assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item$1 }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
+                    React__default["default"].createElement(on$1, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 100, atTopStateChange: atTopStateChange, atTopThreshold: 100, className: 'str-chat__message-list-scroll', components: __assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item$1 }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
                             additionalMessageInputProps: additionalMessageInputProps,
                             closeReactionSelectorOnClick: closeReactionSelectorOnClick,
                             customClasses: customClasses,
@@ -55627,7 +55721,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                             shouldGroupByUser: shouldGroupByUser,
                             threadList: threadList,
                             virtuosoRef: virtuoso,
-                        }, endReached: endReached, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, overridingVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
+                        }, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, overridingVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
             React__default["default"].createElement(MessageListNotifications$1, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification$1, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList }),
             giphyPreviewMessage && React__default["default"].createElement(GiphyPreviewMessage$1, { message: giphyPreviewMessage })));
     };
@@ -55711,6 +55805,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
                 // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options
                 loadMoreThread();
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         if (!thread)
             return null;
@@ -79897,6 +79992,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     exports.ComponentProvider = ComponentProvider;
     exports.ConnectionStatus = ConnectionStatus;
     exports.CooldownTimer = CooldownTimer;
+    exports.CustomMessageActionsList = CustomMessageActionsList;
     exports.DateSeparator = DateSeparator;
     exports.DefaultSuggestionList = List$1;
     exports.DefaultSuggestionListHeader = DefaultSuggestionListHeader;
@@ -80016,6 +80112,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, streamChat, React
     exports.defaultDateTimeParser = defaultDateTimeParser;
     exports.defaultPinPermissions = defaultPinPermissions;
     exports.defaultReactionOptions = defaultReactionOptions;
+    exports.defaultRenderMessages = defaultRenderMessages;
     exports.defaultScrollToItem = defaultScrollToItem;
     exports.defaultTimestampFormat = defaultTimestampFormat;
     exports.defaultTranslatorFunction = defaultTranslatorFunction;