stream-chat-react 11.2.1 → 11.4.0

package/dist/index.cjs.js

@@ -163,6 +163,7 @@ var useAudioController = function () {
         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);
         };
@@ -317,7 +318,9 @@ var ModalGallery = function (props) {
                 source: imageSrc,
             };
         });
-    }, [images]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [images]);
     return (React__default["default"].createElement(ImageGallery__default["default"], { items: formattedArray, renderItem: renderItem, showIndex: true, showPlayButton: false, showThumbnails: false, startIndex: index }));
 };
 
@@ -3226,6 +3229,7 @@ var MediaContainer = function (props) {
             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%' })));
@@ -3261,6 +3265,7 @@ var ATTACHMENT_GROUPS_ORDER = [
  */
 var Attachment = function (props) {
     var attachments = props.attachments;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var groupedAttachments = React.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 icons.__spreadArray(icons.__spreadArray([], acc, true), groupedAttachments[groupName], true); }, [])));
 };
@@ -4651,7 +4656,7 @@ function mark(values, key, value) {
  * @property {Array<string>} [mustUseProperty]
  */
 
-const own$6 = {}.hasOwnProperty;
+const own$5 = {}.hasOwnProperty;
 
 /**
  * @param {Definition} definition
@@ -4666,7 +4671,7 @@ function create(definition) {
   let prop;
 
   for (prop in definition.properties) {
-    if (own$6.call(definition.properties, prop)) {
+    if (own$5.call(definition.properties, prop)) {
       const value = definition.properties[prop];
       const info = new DefinedInfo(
         prop,
@@ -6585,7 +6590,7 @@ VFileMessage.prototype.source = undefined;
  * @typedef {import('./components.js').Components} Components
  */
 
-const own$5 = {}.hasOwnProperty;
+const own$4 = {}.hasOwnProperty;
 
 /** @type {Map<string, number>} */
 const emptyMap = new Map();
@@ -6722,7 +6727,7 @@ function one$1(state, node, key) {
         });
       }
 
-      if (own$5.call(state.components, node.tagName)) {
+      if (own$4.call(state.components, node.tagName)) {
         const key = /** @type {keyof JSX.IntrinsicElements} */ (node.tagName);
         type = state.components[key];
 
@@ -6868,7 +6873,7 @@ function createProperties(state, ancestors) {
     let alignValue;
 
     for (prop in node.properties) {
-      if (prop !== 'children' && own$5.call(node.properties, prop)) {
+      if (prop !== 'children' && own$4.call(node.properties, prop)) {
         const result = createProperty(
           state,
           ancestors,
@@ -7034,7 +7039,7 @@ function transformStylesToCssCasing(domCasing) {
   let from;
 
   for (from in domCasing) {
-    if (own$5.call(domCasing, from)) {
+    if (own$4.call(domCasing, from)) {
       cssCasing[transformStyleToCssCasing(from)] = domCasing[from];
     }
   }
@@ -7113,395 +7118,6 @@ const urlAttributes = {
   ]
 };
 
-/**
- * @typedef {import('micromark-util-types').Code} Code
- */
-
-const unicodePunctuationInternal = regexCheck(/\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 = regexCheck(/[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 = regexCheck(/[\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 = regexCheck(/[#-'*+\--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(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 = regexCheck(/\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 = regexCheck(/[\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 = regexCheck(/[!-/:-@[-`{-~]/);
-
-/**
- * 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(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(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(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(code) {
-  return asciiPunctuation(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 = regexCheck(/\s/);
-
-/**
- * Create a code check from a regex.
- *
- * @param {RegExp} regex
- * @returns {(code: Code) => boolean}
- */
-function regexCheck(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))
-  }
-}
-
-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] + ';'
-  }
-}
-
-/**
- * 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(value.charCodeAt(index + 1)) &&
-      asciiAlphanumeric(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)
-}
-
 /**
  * @typedef {import('mdast').Nodes} Nodes
  *
@@ -9744,7 +9360,7 @@ const characterEntities = {
   zwnj: '‌'
 };
 
-const own$4 = {}.hasOwnProperty;
+const own$3 = {}.hasOwnProperty;
 
 /**
  * Decode a single character reference (without the `&` or `;`).
@@ -9758,7 +9374,7 @@ const own$4 = {}.hasOwnProperty;
  *   Decoded reference.
  */
 function decodeNamedCharacterReference(value) {
-  return own$4.call(characterEntities, value) ? characterEntities[value] : false
+  return own$3.call(characterEntities, value) ? characterEntities[value] : false
 }
 
 /**
@@ -9998,6 +9614,322 @@ function normalizeIdentifier(value) {
   )
 }
 
+/**
+ * @typedef {import('micromark-util-types').Code} Code
+ */
+
+const unicodePunctuationInternal = regexCheck(/\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 = regexCheck(/[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 = regexCheck(/[\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 = regexCheck(/[#-'*+\--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(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 = regexCheck(/\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 = regexCheck(/[\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 = regexCheck(/[!-/:-@[-`{-~]/);
+
+/**
+ * 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(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(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(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(code) {
+  return asciiPunctuation(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 = regexCheck(/\s/);
+
+/**
+ * Create a code check from a regex.
+ *
+ * @param {RegExp} regex
+ * @returns {(code: Code) => boolean}
+ */
+function regexCheck(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))
+  }
+}
+
+/**
+ * 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(value.charCodeAt(index + 1)) &&
+      asciiAlphanumeric(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)
+}
+
 /**
  * @typedef {import('micromark-util-types').Effects} Effects
  * @typedef {import('micromark-util-types').State} State
@@ -18161,7 +18093,7 @@ function index(value) {
  *
  * @typedef {import('../index.js').CompileData} CompileData
  */
-const own$3 = {}.hasOwnProperty;
+const own$2 = {}.hasOwnProperty;
 
 /**
  * Turn markdown into a syntax tree.
@@ -18354,7 +18286,7 @@ function compiler(options) {
     index = -1;
     while (++index < events.length) {
       const handler = config[events[index][0]];
-      if (own$3.call(handler, events[index][1].type)) {
+      if (own$2.call(handler, events[index][1].type)) {
         handler[events[index][1].type].call(
           Object.assign(
             {
@@ -19306,7 +19238,7 @@ function extension(combined, extension) {
   /** @type {keyof Extension} */
   let key;
   for (key in extension) {
-    if (own$3.call(extension, key)) {
+    if (own$2.call(extension, key)) {
       switch (key) {
         case 'canContainEols': {
           const right = extension[key];
@@ -21011,7 +20943,7 @@ function footer(state) {
  * @typedef {import('./footer.js').FootnoteBackLabelTemplate} FootnoteBackLabelTemplate
  */
 
-const own$2 = {}.hasOwnProperty;
+const own$1 = {}.hasOwnProperty;
 
 /** @type {Options} */
 const emptyOptions$1 = {};
@@ -21084,7 +21016,7 @@ function createState(tree, options) {
     const type = node.type;
     const handle = state.handlers[type];
 
-    if (own$2.call(state.handlers, type) && handle) {
+    if (own$1.call(state.handlers, type) && handle) {
       return handle(state, node, parent)
     }
 
@@ -21240,7 +21172,7 @@ function defaultUnknownHandler(state, node) {
   /** @type {HastElement | HastText} */
   const result =
     'value' in node &&
-    !(own$2.call(data, 'hProperties') || own$2.call(data, 'hChildren'))
+    !(own$1.call(data, 'hProperties') || own$1.call(data, 'hChildren'))
       ? {type: 'text', value: node.value}
       : {
           type: 'element',
@@ -23046,7 +22978,7 @@ const CallableInstance =
 // `parse` is called.
 // Currently, we allow directly setting `processor.parser`, which is untyped.
 
-const own$1 = {}.hasOwnProperty;
+const own = {}.hasOwnProperty;
 
 /**
  * @template {Node | undefined} [ParseTree=undefined]
@@ -23267,7 +23199,7 @@ class Processor extends CallableInstance {
       }
 
       // Get `key`.
-      return (own$1.call(this.namespace, key) && this.namespace[key]) || undefined
+      return (own.call(this.namespace, key) && this.namespace[key]) || undefined
     }
 
     // Set space.
@@ -23998,7 +23930,6 @@ function isUint8Array(value) {
 
 // Register `Raw` in tree:
 
-const own = {}.hasOwnProperty;
 const changelog =
   'https://github.com/remarkjs/react-markdown/blob/main/changelog.md';
 
@@ -24144,7 +24075,10 @@ function Markdown(options) {
       let key;
 
       for (key in urlAttributes) {
-        if (own.call(urlAttributes, key) && own.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)) {
@@ -24188,7 +24122,28 @@ function Markdown(options) {
  *   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 ''
 }
 
 /**
@@ -31672,7 +31627,9 @@ var useCreateChannelStateContext = function (value) {
         watcher_count: watcher_count,
         watcherCount: watcherCount,
         watchers: watchers,
-    }); }, [
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         channelId,
         debounceURLEnrichmentMs,
         enrichURLForPreview,
@@ -31709,7 +31666,9 @@ var useCreateTypingContext = function (value) {
     var typingValue = Object.keys(typing || {}).join();
     var typingContext = React.useMemo(function () { return ({
         typing: typing,
-    }); }, [typingValue]);
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [typingValue]);
     return typingContext;
 };
 
@@ -32216,34 +32175,24 @@ var isOnlyEmojis = function (text) {
 
 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;
+
+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 = icons.__rest(props, ["getMessageActions", "handleDelete", "handleEdit", "handleFlag", "handleMute", "handlePin", "isUserMuted", "mine", "open"]);
+    var _b = icons.useComponentContext('MessageActionsBox').CustomMessageActionsList, CustomMessageActionsList$1 = _b === void 0 ? CustomMessageActionsList : _b;
     var setQuotedMessage = icons.useChannelActionContext('MessageActionsBox').setQuotedMessage;
-    var _b = icons.useMessageContext('MessageActionsBox'), customMessageActions = _b.customMessageActions, message = _b.message, messageListRect = _b.messageListRect;
+    var _c = icons.useMessageContext('MessageActionsBox'), customMessageActions = _c.customMessageActions, message = _c.message;
     var t = icons.useTranslationContext('MessageActionsBox').t;
-    var _c = React.useState(false), reverse = _c[0], setReverse = _c[1];
     var messageActions = getMessageActions();
-    var checkIfReverse = React.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
@@ -32255,26 +32204,55 @@ var UnMemoizedMessageActionsBox = function (props) {
         }
     };
     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", icons.__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);
 
+function useMessageActionsBoxPopper(_a) {
+    var open = _a.open, placement = _a.placement, referenceElement = _a.referenceElement;
+    var popperElementRef = React.useRef(null);
+    var _b = icons.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.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,
+    };
+}
+
 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 = icons.useChatContext('MessageActions').mutes;
@@ -32285,6 +32263,7 @@ var MessageActions = function (props) {
     var handleMute = propHandleMute || contextHandleMute;
     var handlePin = propHandlePin || contextHandlePin;
     var message = propMessage || contextMessage;
+    var isMine = mine ? mine() : isMyMessage();
     var _d = React.useState(false), actionsBoxOpen = _d[0], setActionsBoxOpen = _d[1];
     var isMuted = React.useCallback(function () { return isUserMuted(message, mutes); }, [message, mutes]);
     var hideOptions = React.useCallback(function (event) {
@@ -32315,11 +32294,17 @@ var MessageActions = function (props) {
             document.removeEventListener('keyup', hideOptions);
         };
     }, [actionsBoxOpen, hideOptions]);
+    var actionsBoxButtonRef = React.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, { 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(MessageActionsBox, icons.__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) {
@@ -32486,6 +32471,7 @@ var UnMemoizedMessageTextComponent = function (props) {
     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.useMemo(function () { return renderText$1(messageTextToRender, message.mentioned_users); }, [
         message.mentioned_users,
         messageTextToRender,
@@ -32931,6 +32917,7 @@ var useUserTrigger = function (params) {
         });
         return Object.values(uniqueUsers);
     }, [members, watchers]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var queryMembersThrottled = React.useCallback(throttle__default["default"](function (query, onReady) { return icons.__awaiter(void 0, void 0, void 0, function () {
         var response, users, error_1;
         return icons.__generator(this, function (_a) {
@@ -33240,6 +33227,7 @@ var MessageInputFlat = function () {
             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));
 };
@@ -33407,6 +33395,7 @@ var useImageUploads = function (props, state, dispatch) {
     var removeImage = React.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.useCallback(function (id) { return icons.__awaiter(void 0, void 0, void 0, function () {
         var img, file, canUpload, response, error_1, errorMessage, alreadyRemoved;
@@ -33482,7 +33471,9 @@ var useImageUploads = function (props, state, dispatch) {
                     return [2 /*return*/];
             }
         });
-    }); }, [imageUploads, channel, doImageUploadRequest, errorHandler, removeImage]);
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [imageUploads, channel, doImageUploadRequest, errorHandler, removeImage]);
     React.useEffect(function () {
         var upload = Object.values(imageUploads).find(function (imageUpload) { return imageUpload.state === 'uploading' && imageUpload.file; });
         if (!upload)
@@ -33504,10 +33495,12 @@ var useFileUploads = function (props, state, dispatch) {
     var t = icons.useTranslationContext('useFileUploads').t;
     var uploadFile = React.useCallback(function (id) {
         dispatch({ id: id, state: 'uploading', type: 'setFileUpload' });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var removeFile = React.useCallback(function (id) {
         // TODO: cancel upload if still uploading
         dispatch({ id: id, type: 'removeFileUpload' });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     React.useEffect(function () {
         (function () { return icons.__awaiter(void 0, void 0, void 0, function () {
@@ -33579,6 +33572,7 @@ var useFileUploads = function (props, state, dispatch) {
                 }
             });
         }); })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fileUploads, channel, doFileUploadRequest, errorHandler, removeFile]);
     return {
         removeFile: removeFile,
@@ -33630,7 +33624,9 @@ var useAttachments = function (props, state, dispatch, textareaRef) {
             }
         });
         (_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,
@@ -33681,7 +33677,9 @@ var useMessageInputText = function (props, state, dispatch, findAndEnqueueURLsTo
             },
             type: 'setText',
         });
-    }, [additionalTextareaProps, newCursorPosition, textareaRef]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [additionalTextareaProps, newCursorPosition, textareaRef]);
     React.useEffect(function () {
         var textareaElement = textareaRef.current;
         if (textareaElement && newCursorPosition.current !== undefined) {
@@ -33704,7 +33702,9 @@ var useMessageInputText = function (props, state, dispatch, findAndEnqueueURLsTo
         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,
@@ -33938,7 +33938,9 @@ var usePasteHandler = function (uploadNewFiles, insertText, isUploadEnabled, fin
                 }
             });
         }); })(clipboardEvent);
-    }, [insertText, uploadNewFiles]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [insertText, uploadNewFiles]);
     return { onPaste: onPaste };
 };
 
@@ -33962,7 +33964,10 @@ var useLinkPreviews = function (_a) {
             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.useCallback(debounce__default["default"](function (text, mode) {
         if (mode === void 0) { mode = exports.SetLinkPreviewMode.SET; }
         var urls = findURLFn
@@ -34028,6 +34033,7 @@ var useLinkPreviews = function (_a) {
                 });
             });
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [shouldDiscardEnrichQueries, linkPreviews]);
     return {
         cancelURLEnrichment: cancelURLEnrichment,
@@ -34319,7 +34325,9 @@ var useCreateMessageInputContext = function (value) {
         uploadImage: uploadImage,
         uploadNewFiles: uploadNewFiles,
         useMentionsTransliteration: useMentionsTransliteration,
-    }); }, [
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         cancelURLEnrichment,
         cooldownInterval,
         cooldownRemaining,
@@ -34402,6 +34410,7 @@ var MessageInputSmall = function () {
             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 },
@@ -34560,8 +34569,11 @@ var useProcessReactions = function (params) {
     var message = icons.useMessageContext('useProcessReactions').message;
     var contextReactionOptions = icons.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.useCallback(function (reactionType) { return ownReactions.find(function (reaction) { return reaction.type === reactionType; }); }, [ownReactions]);
     var getEmojiByReactionType = React.useCallback(function (reactionType) { return reactionOptions.find(function (_a) {
@@ -35071,7 +35083,7 @@ var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByU
 //  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) {
@@ -35245,6 +35257,60 @@ var addResizingParamsToUrl = function (resizeDimensions, url) {
     url.searchParams.set('w', resizeDimensions.width.toString());
 };
 
+/**
+ * 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 = icons.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(icons.__assign(icons.__assign({}, getDateOptions), { format: 'dddd' })),
+                    " "),
+                "at ",
+                getDateString(icons.__assign(icons.__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(icons.__assign(icons.__assign({}, getDateOptions), { format: 'LT' }))))));
+    }
+    return null;
+};
+var EventComponent = React__default["default"].memo(UnMemoizedEventComponent);
+
+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 = icons.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);
+
+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 = icons.useChatContext('Channel'), contextChannel = _c.channel, channelsQueryState = _c.channelsQueryState, customClasses = _c.customClasses, theme = _c.theme;
@@ -35466,6 +35532,7 @@ var ChannelInner = function (props) {
             client.off('user.deleted', handleEvent);
             notificationTimeouts.forEach(clearTimeout);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         channel.cid,
         channelQueryOptions,
@@ -35484,14 +35551,12 @@ var ChannelInner = function (props) {
     /** MESSAGE */
     // Adds a temporary notification to message list, will be removed after 5 seconds
     var addNotification = makeAddNotifications(setNotifications, notificationTimeouts);
-    var loadMoreFinished = debounce__default["default"](function (hasMore, messages) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var loadMoreFinished = React.useCallback(debounce__default["default"](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 icons.__awaiter(void 0, void 0, void 0, function () {
@@ -35535,12 +35600,12 @@ var ChannelInner = function (props) {
     var loadMoreNewer = function (limit) {
         if (limit === void 0) { limit = 100; }
         return icons.__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 icons.__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)
@@ -35564,8 +35629,12 @@ var ChannelInner = function (props) {
                         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];
                 }
             });
@@ -35650,7 +35719,6 @@ var ChannelInner = function (props) {
             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 icons.__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;
@@ -35770,17 +35838,18 @@ var ChannelInner = function (props) {
         event === null || event === void 0 ? void 0 : event.preventDefault();
         dispatch({ type: 'closeThread' });
     };
-    var loadMoreThreadFinished = debounce__default["default"](function (threadHasMore, threadMessages) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var loadMoreThreadFinished = React.useCallback(debounce__default["default"](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 icons.__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 icons.__generator(this, function (_b) {
                 switch (_b.label) {
@@ -35789,23 +35858,23 @@ var ChannelInner = function (props) {
                         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];
@@ -35842,7 +35911,9 @@ var ChannelInner = function (props) {
         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,
@@ -35864,7 +35935,8 @@ var ChannelInner = function (props) {
             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,
@@ -35882,7 +35954,7 @@ var ChannelInner = function (props) {
             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,
@@ -35899,7 +35971,9 @@ var ChannelInner = function (props) {
             TypingIndicator: props.TypingIndicator,
             VirtualMessage: props.VirtualMessage,
         });
-    }, [props.reactionOptions]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.reactionOptions]);
     var typingContextValue = useCreateTypingContext({
         typing: typing,
     });
@@ -36013,6 +36087,7 @@ var useChannelPreviewInfo = function (props) {
         return function () {
             client.off('user.updated', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return {
         displayImage: overrideImage || displayImage,
@@ -36113,6 +36188,7 @@ var useChannelDeletedListener = function (setChannels, customHandler) {
         return function () {
             client.off('channel.deleted', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36138,6 +36214,7 @@ var useChannelHiddenListener = function (setChannels, customHandler) {
         return function () {
             client.off('channel.hidden', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36157,6 +36234,7 @@ var useChannelTruncatedListener = function (setChannels, customHandler, forceUpd
         return function () {
             client.off('channel.truncated', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36185,6 +36263,7 @@ var useChannelUpdatedListener = function (setChannels, customHandler, forceUpdat
         return function () {
             client.off('channel.updated', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36218,6 +36297,7 @@ var useChannelVisibleListener = function (setChannels, customHandler) {
         return function () {
             client.off('channel.visible', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36233,6 +36313,7 @@ var useConnectionRecoveredListener = function (forceUpdate) {
         return function () {
             client.off('connection.recovered', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 };
 
@@ -36274,6 +36355,7 @@ var useMessageNewListener = function (setChannels, customHandler, lockChannelOrd
         return function () {
             client.off('message.new', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [lockChannelOrder]);
 };
 
@@ -36334,6 +36416,7 @@ var useNotificationAddedToChannelListener = function (setChannels, customHandler
         return function () {
             client.off('notification.added_to_channel', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36369,6 +36452,7 @@ var useNotificationMessageNewListener = function (setChannels, customHandler, al
         return function () {
             client.off('notification.message_new', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36387,6 +36471,7 @@ var useNotificationRemovedFromChannelListener = function (setChannels, customHan
         return function () {
             client.off('notification.removed_from_channel', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customHandler]);
 };
 
@@ -36406,6 +36491,7 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
     // memoize props
     var filterString = React.useMemo(function () { return JSON.stringify(filters); }, [filters]);
     var sortString = React.useMemo(function () { return JSON.stringify(sort); }, [sort]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var queryChannels = function (queryType) { return icons.__awaiter(void 0, void 0, void 0, function () {
         var offset, newOptions, channelQueryResponse, newChannels, err_1;
         var _a;
@@ -36474,6 +36560,7 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
     }, [client, throttleRecover]);
     React.useEffect(function () {
         queryChannels('reload');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filterString, sortString]);
     return {
         channels: channels,
@@ -36504,6 +36591,7 @@ var useUserPresenceChangedListener = function (setChannels) {
         return function () {
             client.off('user.presence.changed', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 };
 
@@ -36546,6 +36634,7 @@ var useIsChannelMuted = function (channel) {
         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;
 };
@@ -36629,6 +36718,7 @@ var ChannelPreview = function (props) {
         };
         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.useCallback(function () {
         if (isActive || muted) {
@@ -36653,6 +36743,7 @@ var ChannelPreview = function (props) {
             channel.off('message.updated', handleEvent);
             channel.off('message.deleted', handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [refreshUnreadCount, channelUpdateCount]);
     if (!Preview)
         return null;
@@ -36709,6 +36800,7 @@ var useChannelSearch = function (_a) {
         };
         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.useEffect(function () {
         if (!inputRef.current || disabled)
@@ -36720,8 +36812,10 @@ var useChannelSearch = function (_a) {
         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.useCallback(function (result) { return icons.__awaiter(void 0, void 0, void 0, function () {
         var selectedChannel, newChannel;
@@ -36760,7 +36854,9 @@ var useChannelSearch = function (_a) {
                     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.useCallback(function (text) { return icons.__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;
@@ -36808,6 +36904,7 @@ var useChannelSearch = function (_a) {
             }
         });
     }); }, [client, searchForChannels, searchQueryParams]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var scheduleGetChannels = React.useCallback(debounce__default["default"](getChannels, searchDebounceIntervalMs), [
         getChannels,
         searchDebounceIntervalMs,
@@ -36915,11 +37012,13 @@ var SearchBar = function (props) {
             (_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.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.useCallback(function () { return setMenuIsOpen(false); }, []);
     return (React__default["default"].createElement("div", { className: 'str-chat__channel-search-bar', "data-testid": 'search-bar', ref: searchBarRef },
@@ -37001,7 +37100,9 @@ var SearchResults = function (props) {
                 return setFocusedResult(undefined);
             }
         }
-    }, [focusedResult]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focusedResult]);
     React.useEffect(function () {
         document.addEventListener('keydown', handleKeyDown, false);
         return function () { return document.removeEventListener('keydown', handleKeyDown); };
@@ -37082,6 +37183,7 @@ var UnMemoizedLoadMoreButton = function (_a) {
     var loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
     React.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)));
@@ -37093,6 +37195,7 @@ var UnMemoizedLoadMorePaginator = function (props) {
     var loadingState = typeof isLoading !== 'undefined' ? isLoading : refreshing;
     React.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,
@@ -37164,11 +37267,13 @@ var UnMemoizedChannelList = function (props) {
             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.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;
@@ -37196,6 +37301,7 @@ var UnMemoizedChannelList = function (props) {
             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 = {
@@ -37229,7 +37335,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '11.2.1';
+var version = '11.4.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -37271,6 +37377,7 @@ var useChat = function (_a) {
         };
         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.useEffect(function () {
         var _a;
@@ -37286,6 +37393,7 @@ var useChat = function (_a) {
         streami18n.getTranslators().then(function (translator) {
             setTranslators(icons.__assign(icons.__assign({}, translator), { userLanguage: userLanguage || defaultLanguage }));
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [i18nInstance]);
     var setActiveChannel = React.useCallback(function (activeChannel, watchers, event) {
         if (watchers === void 0) { watchers = {}; }
@@ -37347,7 +37455,9 @@ var useCreateChatContext = function (value) {
         theme: theme,
         themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
-    }); }, [
+    }); }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         channelCid,
         channelsQueryError,
         channelsQueryInProgress,
@@ -37444,59 +37554,6 @@ var Chat = function (props) {
         React__default["default"].createElement(icons.TranslationProvider, { value: translators }, children)));
 };
 
-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 = icons.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);
-
-/**
- * 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 = icons.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(icons.__assign(icons.__assign({}, getDateOptions), { format: 'dddd' })),
-                    " "),
-                "at ",
-                getDateString(icons.__assign(icons.__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(icons.__assign(icons.__assign({}, getDateOptions), { format: 'LT' }))))));
-    }
-    return null;
-};
-var EventComponent = React__default["default"].memo(UnMemoizedEventComponent);
-
 /**
  * Prevents Chrome hangups
  * See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
@@ -37552,6 +37609,7 @@ var InfiniteScroll = function (props) {
             [{ hasMore: hasMore }, { hasPreviousPage: hasPreviousPage }],
             [{ loadMore: loadMore }, { loadPreviousPage: loadPreviousPage }],
         ], 'InfiniteScroll');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     React.useLayoutEffect(function () {
         var _a;
@@ -37905,7 +37963,9 @@ var useReactionHandler = function (message) {
         var newOwnReactions = add
             ? icons.__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 icons.__assign(icons.__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 ({
@@ -38011,7 +38071,9 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
             return;
         }
         setShowDetailedReactions(false);
-    }, [setShowDetailedReactions, reactionSelectorRef]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setShowDetailedReactions, reactionSelectorRef]);
     React.useEffect(function () {
         var messageWrapper = messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current;
         if (showDetailedReactions && !hasListener.current) {
@@ -38290,7 +38352,9 @@ var useEnrichedMessages = function (args) {
                 acc[message.id] = style;
             return acc;
         }, {});
-    }, [messagesWithDates, noGroupByUser]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [messagesWithDates, noGroupByUser]);
     return { messageGroupStyles: messageGroupStyles, messages: messagesWithDates };
 };
 
@@ -38305,9 +38369,9 @@ var useLastReadData = function (props) {
 };
 
 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 = icons.useChatContext('useMessageListElements'), client = _a.client, customClasses = _a.customClasses;
-    var _b = icons.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 = icons.useComponentContext('useMessageListElements');
     // get the readData, but only for messages submitted by the user themselves
     var readData = useLastReadData({
         messages: enrichedMessages,
@@ -38315,34 +38379,28 @@ var useMessageListElements = function (props) {
         returnAllReadData: returnAllReadData,
         userID: client.userID,
     });
-    var lastReceivedId = React.useMemo(function () { return getLastReceived(enrichedMessages); }, [enrichedMessages]);
+    var lastReceivedMessageId = React.useMemo(function () { return getLastReceived(enrichedMessages); }, [
+        enrichedMessages,
+    ]);
     var elements = React.useMemo(function () {
-        return enrichedMessages.map(function (message) {
-            if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
-                message.date &&
-                icons.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, icons.__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: icons.__assign(icons.__assign({}, internalMessageProps), { threadList: threadList }),
         });
-    }, [
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         enrichedMessages,
         internalMessageProps,
-        lastReceivedId,
+        lastReceivedMessageId,
         messageGroupStyles,
         readData,
+        renderMessages,
         threadList,
     ]);
     return elements;
@@ -38399,6 +38457,7 @@ function useMessageListScrollManager(params) {
         }
         messages.current = newMessages;
         measures.current = newMeasures;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [measures, messages, params.messages]);
     return function (scrollTopValue) {
         scrollTop.current = scrollTopValue;
@@ -38428,6 +38487,7 @@ var useScrollLocationLogic = function (params) {
             setWrapperRect(listElement.getBoundingClientRect());
             scrollToBottom();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [listElement, hasMoreNewer]);
     var updateScrollTop = useMessageListScrollManager({
         loadMoreScrollThreshold: loadMoreScrollThreshold,
@@ -38578,24 +38638,50 @@ var MessageListMainPanel = function (_a) {
     return React__default["default"].createElement(React__default["default"].Fragment, null, children);
 };
 
+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 &&
+            icons.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, icons.__assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))));
+    });
+}
+
 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 = icons.useChatContext('MessageList').customClasses;
-    var _r = icons.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 = icons.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,
@@ -38604,7 +38690,7 @@ var MessageListWithContext = function (props) {
         hideNewMessageSeparator: hideNewMessageSeparator,
         messages: messages,
         noGroupByUser: noGroupByUser,
-    }), messageGroupStyles = _y.messageGroupStyles, enrichedMessages = _y.messages;
+    }), messageGroupStyles = _z.messageGroupStyles, enrichedMessages = _z.messages;
     var elements = useMessageListElements({
         enrichedMessages: enrichedMessages,
         internalMessageProps: {
@@ -38635,6 +38721,7 @@ var MessageListWithContext = function (props) {
         },
         messageGroupStyles: messageGroupStyles,
         read: read,
+        renderMessages: renderMessages,
         returnAllReadData: returnAllReadData,
         threadList: threadList,
     });
@@ -38673,6 +38760,7 @@ var MessageListWithContext = function (props) {
             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(icons.MessageListContextProvider, { value: { listElement: listElement, scrollToBottom: scrollToBottom } },
@@ -38740,6 +38828,7 @@ var UnMemoizedScrollToBottomButton = function (props) {
         return function () {
             client.off(observedEvent, handleEvent);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
     React.useEffect(function () {
         if (isMessageListScrolledToBottom) {
@@ -38850,6 +38939,7 @@ function usePrependedMessagesCount(messages, hasDateSeparator) {
         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;
 }
@@ -38874,6 +38964,7 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
             initialFocusRegistered.current = true;
             recheckForNewOwnMessage();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [messages, messages === null || messages === void 0 ? void 0 : messages.length]);
     return recheckForNewOwnMessage;
 }
@@ -38891,6 +38982,7 @@ var useGiphyPreview = function (separateGiphyPreview) {
         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 };
 };
@@ -38940,6 +39032,7 @@ var useScrollToBottomOnNewMessage = function (_a) {
             window.removeEventListener('focus', scrollToBottomIfConfigured);
             window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [scrollToBottomIfConfigured]);
 };
 
@@ -39036,7 +39129,7 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
     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
@@ -39070,6 +39163,7 @@ var VirtualizedMessageListWithContext = function (props) {
             setGiphyPreviewMessage: setGiphyPreviewMessage,
             userId: client.userID || '',
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         disableDateSeparator,
         hideDeletedMessages,
@@ -39099,6 +39193,7 @@ var VirtualizedMessageListWithContext = function (props) {
         }, {});
     }, 
     // 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.useCallback(function () { return icons.__awaiter(void 0, void 0, void 0, function () {
@@ -39148,19 +39243,14 @@ var VirtualizedMessageListWithContext = function (props) {
     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.useEffect(function () {
         var _a;
@@ -39170,13 +39260,14 @@ var VirtualizedMessageListWithContext = function (props) {
                 (_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(reactVirtuoso.Virtuoso, icons.__assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 200, className: 'str-chat__message-list-scroll', components: icons.__assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
+                React__default["default"].createElement(reactVirtuoso.Virtuoso, icons.__assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 100, atTopStateChange: atTopStateChange, atTopThreshold: 100, className: 'str-chat__message-list-scroll', components: icons.__assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
                         additionalMessageInputProps: additionalMessageInputProps,
                         closeReactionSelectorOnClick: closeReactionSelectorOnClick,
                         customClasses: customClasses,
@@ -39196,7 +39287,7 @@ var VirtualizedMessageListWithContext = function (props) {
                         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 })));
 };
@@ -39278,6 +39369,7 @@ var ThreadInner = function (props) {
             // 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;
@@ -39410,6 +39502,7 @@ exports.ChatDown = ChatDown;
 exports.CommandItem = CommandItem;
 exports.ConnectionStatus = ConnectionStatus;
 exports.CooldownTimer = CooldownTimer;
+exports.CustomMessageActionsList = CustomMessageActionsList;
 exports.DateSeparator = DateSeparator;
 exports.DefaultSuggestionList = List;
 exports.DefaultSuggestionListHeader = DefaultSuggestionListHeader;
@@ -39500,6 +39593,7 @@ exports.darkModeTheme = darkModeTheme;
 exports.defaultAllowedTagNames = defaultAllowedTagNames;
 exports.defaultPinPermissions = defaultPinPermissions;
 exports.defaultReactionOptions = defaultReactionOptions;
+exports.defaultRenderMessages = defaultRenderMessages;
 exports.defaultScrollToItem = defaultScrollToItem;
 exports.defaultTimestampFormat = defaultTimestampFormat;
 exports.emojiMarkdownPlugin = emojiMarkdownPlugin;