stream-chat-react 10.14.1 → 10.16.0

package/dist/index.cjs.js

@@ -34,10 +34,7 @@ var linkify = require('linkifyjs');
 var _defineProperty$2 = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray$2 = require('@babel/runtime/helpers/slicedToArray');
 var emojiRegex = require('emoji-regex');
-var crypto = require('crypto');
 var uniqBy = require('lodash.uniqby');
-var ReactIs = require('react-is');
-var path$1 = require('path');
 var _objectWithoutProperties$1 = require('@babel/runtime/helpers/objectWithoutProperties');
 var _extends = require('@babel/runtime/helpers/extends');
 var _typeof = require('@babel/runtime/helpers/typeof');
@@ -49,11 +46,14 @@ var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstru
 var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
 var Textarea = require('react-textarea-autosize');
 var getCaretCoordinates = require('textarea-caret');
+var ReactIs = require('react-is');
 var debounce$1 = require('lodash.debounce');
 var throttle = require('lodash.throttle');
 var streamChat = require('stream-chat');
+var crypto = require('crypto');
 var deepequal = require('react-fast-compare');
 var ReactDOM = require('react-dom');
+var path$1 = require('path');
 var reactVirtuoso = require('react-virtuoso');
 var nimbleEmoji = require('emoji-mart/dist/components/emoji/nimble-emoji');
 var nimblePicker = require('emoji-mart/dist/components/picker/nimble-picker');
@@ -98,10 +98,7 @@ var linkify__namespace = /*#__PURE__*/_interopNamespace(linkify);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty$2);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray$2);
 var emojiRegex__default = /*#__PURE__*/_interopDefaultLegacy(emojiRegex);
-var crypto__default = /*#__PURE__*/_interopDefaultLegacy(crypto);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
-var ReactIs__default = /*#__PURE__*/_interopDefaultLegacy(ReactIs);
-var path__default = /*#__PURE__*/_interopDefaultLegacy(path$1);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties$1);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
@@ -113,10 +110,13 @@ var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_po
 var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
 var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
 var getCaretCoordinates__default = /*#__PURE__*/_interopDefaultLegacy(getCaretCoordinates);
+var ReactIs__default = /*#__PURE__*/_interopDefaultLegacy(ReactIs);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce$1);
 var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
+var crypto__default = /*#__PURE__*/_interopDefaultLegacy(crypto);
 var deepequal__default = /*#__PURE__*/_interopDefaultLegacy(deepequal);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var path__default = /*#__PURE__*/_interopDefaultLegacy(path$1);
 var nimbleEmoji__default = /*#__PURE__*/_interopDefaultLegacy(nimbleEmoji);
 var nimblePicker__default = /*#__PURE__*/_interopDefaultLegacy(nimblePicker);
 
@@ -1064,11 +1064,10 @@ var Streami18n = /** @class */ (function () {
             keySeparator: false,
             lng: this.currentLanguage,
             nsSeparator: false,
-            parseMissingKeyHandler: function (key) {
-                _this.logger("Streami18n: Missing translation for key: ".concat(key));
-                return key;
-            },
         };
+        if (finalOptions.parseMissingKeyHandler) {
+            this.i18nextConfig.parseMissingKeyHandler = finalOptions.parseMissingKeyHandler;
+        }
         this.validateCurrentLanguage();
         var dayjsLocaleConfigForLanguage = finalOptions.dayjsLocaleConfigForLanguage;
         if (dayjsLocaleConfigForLanguage) {
@@ -4331,7 +4330,7 @@ var getAttachmentType = function (attachment) {
     return 'unsupported';
 };
 
-var Item = /*#__PURE__*/React__default["default"].forwardRef(function Item(props, innerRef) {
+var Item$1 = /*#__PURE__*/React__default["default"].forwardRef(function Item(props, innerRef) {
   var className = props.className,
     Component = props.component,
     item = props.item,
@@ -4378,29 +4377,29 @@ var Item = /*#__PURE__*/React__default["default"].forwardRef(function Item(props
   }))));
 });
 
-let urlAlphabet =
-  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
-const POOL_SIZE_MULTIPLIER = 128;
-let pool, poolOffset;
-let fillPool = bytes => {
-  if (!pool || pool.length < bytes) {
-    pool = Buffer.allocUnsafe(bytes * POOL_SIZE_MULTIPLIER);
-    crypto__default["default"].randomFillSync(pool);
-    poolOffset = 0;
-  } else if (poolOffset + bytes > pool.length) {
-    crypto__default["default"].randomFillSync(pool);
-    poolOffset = 0;
-  }
-  poolOffset += bytes;
-};
-let nanoid = (size = 21) => {
-  fillPool((size -= 0));
-  let id = '';
-  for (let i = poolOffset - size; i < poolOffset; i++) {
-    id += urlAlphabet[pool[i] & 63];
-  }
-  return id
+var DefaultSuggestionListHeader = function (props) {
+    var currentTrigger = props.currentTrigger, value = props.value;
+    var t = useTranslationContext('DefaultSuggestionListHeader').t;
+    var triggerIndex = value.lastIndexOf(currentTrigger);
+    if (currentTrigger === '/') {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            t('Commands matching'),
+            " ",
+            React__default["default"].createElement("strong", null, value.slice(triggerIndex + 1))));
+    }
+    if (currentTrigger === ':') {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            t('Emoji matching'),
+            " ",
+            React__default["default"].createElement("strong", null, value.slice(triggerIndex + 1))));
+    }
+    if (currentTrigger === '@') {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            t('People matching'),
+            " ",
+            React__default["default"].createElement("strong", null, value.slice(triggerIndex + 1))));
+    }
+    return null;
 };
 
 /**
@@ -5079,6 +5078,351 @@ function toFunction$1(replace) {
   return typeof replace === 'function' ? replace : () => replace
 }
 
+/**
+ * @typedef {import('unist').Node} Node
+ * @typedef {import('unist').Parent} Parent
+ * @typedef {import('unist').Literal} Literal
+ * @typedef {Object.<string, unknown>} Props
+ * @typedef {Array.<Node>|string} ChildrenOrValue
+ *
+ * @typedef {(<T extends string, P extends Record<string, unknown>, C extends Node[]>(type: T, props: P, children: C) => {type: T, children: C} & P)} BuildParentWithProps
+ * @typedef {(<T extends string, P extends Record<string, unknown>>(type: T, props: P, value: string) => {type: T, value: string} & P)} BuildLiteralWithProps
+ * @typedef {(<T extends string, P extends Record<string, unknown>>(type: T, props: P) => {type: T} & P)} BuildVoidWithProps
+ * @typedef {(<T extends string, C extends Node[]>(type: T, children: C) => {type: T, children: C})} BuildParent
+ * @typedef {(<T extends string>(type: T, value: string) => {type: T, value: string})} BuildLiteral
+ * @typedef {(<T extends string>(type: T) => {type: T})} BuildVoid
+ */
+
+var u = /**
+ * @type {BuildVoid & BuildVoidWithProps & BuildLiteral & BuildLiteralWithProps & BuildParent & BuildParentWithProps}
+ */ (
+  /**
+   * @param {string} type Type of node
+   * @param {Props|ChildrenOrValue} [props] Additional properties for node (or `children` or `value`)
+   * @param {ChildrenOrValue} [value] `children` or `value` of node
+   * @returns {Node}
+   */
+  function (type, props, value) {
+    /** @type {Node} */
+    var node = {type: String(type)};
+
+    if (
+      (value === undefined || value === null) &&
+      (typeof props === 'string' || Array.isArray(props))
+    ) {
+      value = props;
+    } else {
+      Object.assign(node, props);
+    }
+
+    if (Array.isArray(value)) {
+      node.children = value;
+    } else if (value !== undefined && value !== null) {
+      node.value = String(value);
+    }
+
+    return node
+  }
+);
+
+/**
+ * @param {string} d
+ * @returns {string}
+ */
+function color(d) {
+  return '\u001B[33m' + d + '\u001B[39m'
+}
+
+/**
+ * @typedef {import('unist').Node} Node
+ * @typedef {import('unist').Parent} Parent
+ * @typedef {import('unist-util-is').Test} Test
+ * @typedef {import('./complex-types.js').Action} Action
+ * @typedef {import('./complex-types.js').Index} Index
+ * @typedef {import('./complex-types.js').ActionTuple} ActionTuple
+ * @typedef {import('./complex-types.js').VisitorResult} VisitorResult
+ * @typedef {import('./complex-types.js').Visitor} Visitor
+ */
+
+/**
+ * Continue traversing as normal
+ */
+const CONTINUE = true;
+/**
+ * Do not traverse this node’s children
+ */
+const SKIP = 'skip';
+/**
+ * Stop traversing immediately
+ */
+const EXIT = false;
+
+/**
+ * Visit children of tree which pass test.
+ *
+ * @param tree
+ *   Tree to walk
+ * @param [test]
+ *   `unist-util-is`-compatible test
+ * @param visitor
+ *   Function called for nodes that pass `test`.
+ * @param [reverse=false]
+ *   Traverse in reverse preorder (NRL) instead of preorder (NLR) (default).
+ */
+const visitParents =
+  /**
+   * @type {(
+   *   (<Tree extends Node, Check extends Test>(tree: Tree, test: Check, visitor: import('./complex-types.js').BuildVisitor<Tree, Check>, reverse?: boolean) => void) &
+   *   (<Tree extends Node>(tree: Tree, visitor: import('./complex-types.js').BuildVisitor<Tree>, reverse?: boolean) => void)
+   * )}
+   */
+  (
+    /**
+     * @param {Node} tree
+     * @param {Test} test
+     * @param {import('./complex-types.js').Visitor<Node>} visitor
+     * @param {boolean} [reverse=false]
+     */
+    function (tree, test, visitor, reverse) {
+      if (typeof test === 'function' && typeof visitor !== 'function') {
+        reverse = visitor;
+        // @ts-expect-error no visitor given, so `visitor` is test.
+        visitor = test;
+        test = null;
+      }
+
+      const is = convert(test);
+      const step = reverse ? -1 : 1;
+
+      factory(tree, null, [])();
+
+      /**
+       * @param {Node} node
+       * @param {number?} index
+       * @param {Array<Parent>} parents
+       */
+      function factory(node, index, parents) {
+        /** @type {Record<string, unknown>} */
+        // @ts-expect-error: hush
+        const value = typeof node === 'object' && node !== null ? node : {};
+        /** @type {string|undefined} */
+        let name;
+
+        if (typeof value.type === 'string') {
+          name =
+            typeof value.tagName === 'string'
+              ? value.tagName
+              : typeof value.name === 'string'
+              ? value.name
+              : undefined;
+
+          Object.defineProperty(visit, 'name', {
+            value:
+              'node (' +
+              color(value.type + (name ? '<' + name + '>' : '')) +
+              ')'
+          });
+        }
+
+        return visit
+
+        function visit() {
+          /** @type {ActionTuple} */
+          let result = [];
+          /** @type {ActionTuple} */
+          let subresult;
+          /** @type {number} */
+          let offset;
+          /** @type {Array<Parent>} */
+          let grandparents;
+
+          if (!test || is(node, index, parents[parents.length - 1] || null)) {
+            result = toResult(visitor(node, parents));
+
+            if (result[0] === EXIT) {
+              return result
+            }
+          }
+
+          // @ts-expect-error looks like a parent.
+          if (node.children && result[0] !== SKIP) {
+            // @ts-expect-error looks like a parent.
+            offset = (reverse ? node.children.length : -1) + step;
+            // @ts-expect-error looks like a parent.
+            grandparents = parents.concat(node);
+
+            // @ts-expect-error looks like a parent.
+            while (offset > -1 && offset < node.children.length) {
+              // @ts-expect-error looks like a parent.
+              subresult = factory(node.children[offset], offset, grandparents)();
+
+              if (subresult[0] === EXIT) {
+                return subresult
+              }
+
+              offset =
+                typeof subresult[1] === 'number' ? subresult[1] : offset + step;
+            }
+          }
+
+          return result
+        }
+      }
+    }
+  );
+
+/**
+ * @param {VisitorResult} value
+ * @returns {ActionTuple}
+ */
+function toResult(value) {
+  if (Array.isArray(value)) {
+    return value
+  }
+
+  if (typeof value === 'number') {
+    return [CONTINUE, value]
+  }
+
+  return [value]
+}
+
+/**
+ * @typedef {import('unist').Node} Node
+ * @typedef {import('unist').Parent} Parent
+ * @typedef {import('unist-util-is').Test} Test
+ * @typedef {import('unist-util-visit-parents').VisitorResult} VisitorResult
+ * @typedef {import('./complex-types.js').Visitor} Visitor
+ */
+
+/**
+ * Visit children of tree which pass test.
+ *
+ * @param tree
+ *   Tree to walk
+ * @param [test]
+ *   `unist-util-is`-compatible test
+ * @param visitor
+ *   Function called for nodes that pass `test`.
+ * @param reverse
+ *   Traverse in reverse preorder (NRL) instead of preorder (NLR) (default).
+ */
+const visit =
+  /**
+   * @type {(
+   *   (<Tree extends Node, Check extends Test>(tree: Tree, test: Check, visitor: import('./complex-types.js').BuildVisitor<Tree, Check>, reverse?: boolean) => void) &
+   *   (<Tree extends Node>(tree: Tree, visitor: import('./complex-types.js').BuildVisitor<Tree>, reverse?: boolean) => void)
+   * )}
+   */
+  (
+    /**
+     * @param {Node} tree
+     * @param {Test} test
+     * @param {import('./complex-types.js').Visitor} visitor
+     * @param {boolean} [reverse]
+     */
+    function (tree, test, visitor, reverse) {
+      if (typeof test === 'function' && typeof visitor !== 'function') {
+        reverse = visitor;
+        visitor = test;
+        test = null;
+      }
+
+      visitParents(tree, test, overload, reverse);
+
+      /**
+       * @param {Node} node
+       * @param {Array<Parent>} parents
+       */
+      function overload(node, parents) {
+        const parent = parents[parents.length - 1];
+        return visitor(
+          node,
+          parent ? parent.children.indexOf(node) : null,
+          parent
+        )
+      }
+    }
+  );
+
+function escapeRegExp(text) {
+    return text.replace(/[-[\]{}()*+?.,/\\^$|#]/g, '\\$&');
+}
+var detectHttp = /(http(s?):\/\/)?(www\.)?/;
+var messageCodeBlocks = function (message) {
+    var codeRegex = /```[a-z]*\n[\s\S]*?\n```|`[a-z]*[\s\S]*?`/gm;
+    var matches = message.match(codeRegex);
+    return matches || [];
+};
+var matchMarkdownLinks = function (message) {
+    var regexMdLinks = /\[([^[]+)\](\(.*\))/gm;
+    var matches = message.match(regexMdLinks);
+    var singleMatch = /\[([^[]+)\]\((.*)\)/;
+    var links = matches
+        ? matches.map(function (match) {
+            var i = singleMatch.exec(match);
+            return i && [i[1], i[2]];
+        })
+        : [];
+    return links.flat();
+};
+
+var mentionsMarkdownPlugin = function (mentioned_users) { return function () {
+    var mentioned_usernames = mentioned_users
+        .map(function (user) { return user.name || user.id; })
+        .filter(Boolean)
+        .map(escapeRegExp);
+    var mentionedUsersRegex = new RegExp(mentioned_usernames.map(function (username) { return "@".concat(username); }).join('|'), 'g');
+    var replace = function (match) {
+        var usernameOrId = match.replace('@', '');
+        var user = mentioned_users.find(function (_a) {
+            var id = _a.id, name = _a.name;
+            return name === usernameOrId || id === usernameOrId;
+        });
+        return u('element', { mentionedUser: user, tagName: 'mention' }, [u('text', match)]);
+    };
+    var transform = function (tree) {
+        if (!mentioned_usernames.length)
+            return tree;
+        // handles special cases of mentions where user.name is an e-mail
+        // Remark GFM translates all e-mail-like text nodes to links creating
+        // two separate child nodes "@" and "your.name@as.email" instead of
+        // keeping it as one text node with value "@your.name@as.email"
+        // this piece finds these two separated nodes and merges them together
+        // before "replace" function takes over
+        visit(tree, function (node, index, parent) {
+            var _a;
+            if (index === null)
+                return;
+            if (!parent)
+                return;
+            var nextChild = parent.children.at(index + 1);
+            var nextChildHref = (_a = nextChild === null || nextChild === void 0 ? void 0 : nextChild.properties) === null || _a === void 0 ? void 0 : _a.href;
+            if (node.type === 'text' &&
+                // text value has to have @ sign at the end of the string
+                // and no other characters except whitespace can precede it
+                // valid cases:   "text @", "@", " @"
+                // invalid cases: "text@", "@text",
+                /.?\s?@$|^@$/.test(node.value) &&
+                (nextChildHref === null || nextChildHref === void 0 ? void 0 : nextChildHref.startsWith('mailto:'))) {
+                var newTextValue = node.value.replace(/@$/, '');
+                var username = nextChildHref.replace('mailto:', '');
+                parent.children[index] = u('text', newTextValue);
+                parent.children[index + 1] = u('text', "@".concat(username));
+            }
+        });
+        return findAndReplace$1(tree, mentionedUsersRegex, replace);
+    };
+    return transform;
+}; };
+var emojiMarkdownPlugin = function () {
+    var replace = function (match) {
+        return u('element', { tagName: 'emoji' }, [u('text', match)]);
+    };
+    var transform = function (node) { return findAndReplace$1(node, emojiRegex__default["default"](), replace); };
+    return transform;
+};
+
 const protocols = ['http', 'https', 'mailto', 'tel'];
 
 /**
@@ -17874,53 +18218,6 @@ function remarkParse(options) {
   Object.assign(this, {Parser: parser});
 }
 
-/**
- * @typedef {import('unist').Node} Node
- * @typedef {import('unist').Parent} Parent
- * @typedef {import('unist').Literal} Literal
- * @typedef {Object.<string, unknown>} Props
- * @typedef {Array.<Node>|string} ChildrenOrValue
- *
- * @typedef {(<T extends string, P extends Record<string, unknown>, C extends Node[]>(type: T, props: P, children: C) => {type: T, children: C} & P)} BuildParentWithProps
- * @typedef {(<T extends string, P extends Record<string, unknown>>(type: T, props: P, value: string) => {type: T, value: string} & P)} BuildLiteralWithProps
- * @typedef {(<T extends string, P extends Record<string, unknown>>(type: T, props: P) => {type: T} & P)} BuildVoidWithProps
- * @typedef {(<T extends string, C extends Node[]>(type: T, children: C) => {type: T, children: C})} BuildParent
- * @typedef {(<T extends string>(type: T, value: string) => {type: T, value: string})} BuildLiteral
- * @typedef {(<T extends string>(type: T) => {type: T})} BuildVoid
- */
-
-var u = /**
- * @type {BuildVoid & BuildVoidWithProps & BuildLiteral & BuildLiteralWithProps & BuildParent & BuildParentWithProps}
- */ (
-  /**
-   * @param {string} type Type of node
-   * @param {Props|ChildrenOrValue} [props] Additional properties for node (or `children` or `value`)
-   * @param {ChildrenOrValue} [value] `children` or `value` of node
-   * @returns {Node}
-   */
-  function (type, props, value) {
-    /** @type {Node} */
-    var node = {type: String(type)};
-
-    if (
-      (value === undefined || value === null) &&
-      (typeof props === 'string' || Array.isArray(props))
-    ) {
-      value = props;
-    } else {
-      Object.assign(node, props);
-    }
-
-    if (Array.isArray(value)) {
-      node.children = value;
-    } else if (value !== undefined && value !== null) {
-      node.value = String(value);
-    }
-
-    return node
-  }
-);
-
 /**
  * @typedef {import('mdast').Root|import('mdast').Parent['children'][number]} MdastNode
  * @typedef {import('./index.js').H} H
@@ -18028,226 +18325,6 @@ function all(h, parent) {
   return values
 }
 
-/**
- * @param {string} d
- * @returns {string}
- */
-function color(d) {
-  return '\u001B[33m' + d + '\u001B[39m'
-}
-
-/**
- * @typedef {import('unist').Node} Node
- * @typedef {import('unist').Parent} Parent
- * @typedef {import('unist-util-is').Test} Test
- * @typedef {import('./complex-types.js').Action} Action
- * @typedef {import('./complex-types.js').Index} Index
- * @typedef {import('./complex-types.js').ActionTuple} ActionTuple
- * @typedef {import('./complex-types.js').VisitorResult} VisitorResult
- * @typedef {import('./complex-types.js').Visitor} Visitor
- */
-
-/**
- * Continue traversing as normal
- */
-const CONTINUE = true;
-/**
- * Do not traverse this node’s children
- */
-const SKIP = 'skip';
-/**
- * Stop traversing immediately
- */
-const EXIT = false;
-
-/**
- * Visit children of tree which pass test.
- *
- * @param tree
- *   Tree to walk
- * @param [test]
- *   `unist-util-is`-compatible test
- * @param visitor
- *   Function called for nodes that pass `test`.
- * @param [reverse=false]
- *   Traverse in reverse preorder (NRL) instead of preorder (NLR) (default).
- */
-const visitParents =
-  /**
-   * @type {(
-   *   (<Tree extends Node, Check extends Test>(tree: Tree, test: Check, visitor: import('./complex-types.js').BuildVisitor<Tree, Check>, reverse?: boolean) => void) &
-   *   (<Tree extends Node>(tree: Tree, visitor: import('./complex-types.js').BuildVisitor<Tree>, reverse?: boolean) => void)
-   * )}
-   */
-  (
-    /**
-     * @param {Node} tree
-     * @param {Test} test
-     * @param {import('./complex-types.js').Visitor<Node>} visitor
-     * @param {boolean} [reverse=false]
-     */
-    function (tree, test, visitor, reverse) {
-      if (typeof test === 'function' && typeof visitor !== 'function') {
-        reverse = visitor;
-        // @ts-expect-error no visitor given, so `visitor` is test.
-        visitor = test;
-        test = null;
-      }
-
-      const is = convert(test);
-      const step = reverse ? -1 : 1;
-
-      factory(tree, null, [])();
-
-      /**
-       * @param {Node} node
-       * @param {number?} index
-       * @param {Array<Parent>} parents
-       */
-      function factory(node, index, parents) {
-        /** @type {Record<string, unknown>} */
-        // @ts-expect-error: hush
-        const value = typeof node === 'object' && node !== null ? node : {};
-        /** @type {string|undefined} */
-        let name;
-
-        if (typeof value.type === 'string') {
-          name =
-            typeof value.tagName === 'string'
-              ? value.tagName
-              : typeof value.name === 'string'
-              ? value.name
-              : undefined;
-
-          Object.defineProperty(visit, 'name', {
-            value:
-              'node (' +
-              color(value.type + (name ? '<' + name + '>' : '')) +
-              ')'
-          });
-        }
-
-        return visit
-
-        function visit() {
-          /** @type {ActionTuple} */
-          let result = [];
-          /** @type {ActionTuple} */
-          let subresult;
-          /** @type {number} */
-          let offset;
-          /** @type {Array<Parent>} */
-          let grandparents;
-
-          if (!test || is(node, index, parents[parents.length - 1] || null)) {
-            result = toResult(visitor(node, parents));
-
-            if (result[0] === EXIT) {
-              return result
-            }
-          }
-
-          // @ts-expect-error looks like a parent.
-          if (node.children && result[0] !== SKIP) {
-            // @ts-expect-error looks like a parent.
-            offset = (reverse ? node.children.length : -1) + step;
-            // @ts-expect-error looks like a parent.
-            grandparents = parents.concat(node);
-
-            // @ts-expect-error looks like a parent.
-            while (offset > -1 && offset < node.children.length) {
-              // @ts-expect-error looks like a parent.
-              subresult = factory(node.children[offset], offset, grandparents)();
-
-              if (subresult[0] === EXIT) {
-                return subresult
-              }
-
-              offset =
-                typeof subresult[1] === 'number' ? subresult[1] : offset + step;
-            }
-          }
-
-          return result
-        }
-      }
-    }
-  );
-
-/**
- * @param {VisitorResult} value
- * @returns {ActionTuple}
- */
-function toResult(value) {
-  if (Array.isArray(value)) {
-    return value
-  }
-
-  if (typeof value === 'number') {
-    return [CONTINUE, value]
-  }
-
-  return [value]
-}
-
-/**
- * @typedef {import('unist').Node} Node
- * @typedef {import('unist').Parent} Parent
- * @typedef {import('unist-util-is').Test} Test
- * @typedef {import('unist-util-visit-parents').VisitorResult} VisitorResult
- * @typedef {import('./complex-types.js').Visitor} Visitor
- */
-
-/**
- * Visit children of tree which pass test.
- *
- * @param tree
- *   Tree to walk
- * @param [test]
- *   `unist-util-is`-compatible test
- * @param visitor
- *   Function called for nodes that pass `test`.
- * @param reverse
- *   Traverse in reverse preorder (NRL) instead of preorder (NLR) (default).
- */
-const visit =
-  /**
-   * @type {(
-   *   (<Tree extends Node, Check extends Test>(tree: Tree, test: Check, visitor: import('./complex-types.js').BuildVisitor<Tree, Check>, reverse?: boolean) => void) &
-   *   (<Tree extends Node>(tree: Tree, visitor: import('./complex-types.js').BuildVisitor<Tree>, reverse?: boolean) => void)
-   * )}
-   */
-  (
-    /**
-     * @param {Node} tree
-     * @param {Test} test
-     * @param {import('./complex-types.js').Visitor} visitor
-     * @param {boolean} [reverse]
-     */
-    function (tree, test, visitor, reverse) {
-      if (typeof test === 'function' && typeof visitor !== 'function') {
-        reverse = visitor;
-        visitor = test;
-        test = null;
-      }
-
-      visitParents(tree, test, overload, reverse);
-
-      /**
-       * @param {Node} node
-       * @param {Array<Parent>} parents
-       */
-      function overload(node, parents) {
-        const parent = parents[parents.length - 1];
-        return visitor(
-          node,
-          parent ? parent.children.indexOf(node) : null,
-          parent
-        )
-      }
-    }
-  );
-
 /**
  * @typedef {import('unist').Position} Position
  * @typedef {import('unist').Node} Node
@@ -26097,14 +26174,26 @@ function remarkGfm(options = {}) {
   }
 }
 
-var isOnlyEmojis = function (text) {
-    if (!text)
-        return false;
-    var noEmojis = text.replace(emojiRegex__default["default"](), '');
-    var noSpace = noEmojis.replace(/[\s\n]/gm, '');
-    return !noSpace;
+var Emoji = function (_a) {
+    var children = _a.children;
+    return (React__default["default"].createElement("span", { className: 'inline-text-emoji', "data-testid": 'inline-text-emoji' }, children));
+};
+
+var Anchor = function (_a) {
+    var children = _a.children, href = _a.href;
+    var isEmail = href === null || href === void 0 ? void 0 : href.startsWith('mailto:');
+    var isUrl = href === null || href === void 0 ? void 0 : href.startsWith('http');
+    if (!href || (!isEmail && !isUrl))
+        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    return (React__default["default"].createElement("a", { className: clsx({ 'str-chat__message-url-link': isUrl }), href: href, rel: 'nofollow noreferrer noopener', target: '_blank' }, children));
+};
+
+var Mention = function (_a) {
+    var children = _a.children, mentionedUser = _a.node.mentionedUser;
+    return (React__default["default"].createElement("span", { className: 'str-chat__message-mention', "data-user-id": mentionedUser.id }, children));
 };
-var allowedMarkups = [
+
+var defaultAllowedTagNames = [
     'html',
     'text',
     'br',
@@ -26123,24 +26212,6 @@ var allowedMarkups = [
     'emoji',
     'mention',
 ];
-var matchMarkdownLinks = function (message) {
-    var regexMdLinks = /\[([^[]+)\](\(.*\))/gm;
-    var matches = message.match(regexMdLinks);
-    var singleMatch = /\[([^[]+)\]\((.*)\)/;
-    var links = matches
-        ? matches.map(function (match) {
-            var i = singleMatch.exec(match);
-            return i && [i[1], i[2]];
-        })
-        : [];
-    return links.flat();
-};
-var messageCodeBlocks = function (message) {
-    var codeRegex = /```[a-z]*\n[\s\S]*?\n```|`[a-z]*[\s\S]*?`/gm;
-    var matches = message.match(codeRegex);
-    return matches || [];
-};
-var detectHttp = /(http(s?):\/\/)?(www\.)?/;
 function formatUrlForDisplay(url) {
     try {
         return decodeURIComponent(url).replace(detectHttp, '');
@@ -26157,84 +26228,15 @@ function encodeDecode(url) {
         return url;
     }
 }
-var Anchor = function (_a) {
-    var children = _a.children, href = _a.href;
-    var isEmail = href === null || href === void 0 ? void 0 : href.startsWith('mailto:');
-    var isUrl = href === null || href === void 0 ? void 0 : href.startsWith('http');
-    if (!href || (!isEmail && !isUrl))
-        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-    return (React__default["default"].createElement("a", { className: clsx({ 'str-chat__message-url-link': isUrl }), href: href, rel: 'nofollow noreferrer noopener', target: '_blank' }, children));
-};
-var Emoji = function (_a) {
-    var children = _a.children;
-    return (React__default["default"].createElement("span", { className: 'inline-text-emoji', "data-testid": 'inline-text-emoji' }, children));
-};
-var Mention = function (_a) {
-    var children = _a.children, mentionedUser = _a.node.mentionedUser;
-    return (React__default["default"].createElement("span", { className: 'str-chat__message-mention', "data-user-id": mentionedUser.id }, children));
-};
+var transformLinkUri = function (uri) { return (uri.startsWith('app://') ? uri : uriTransformer(uri)); };
+var getPluginsForward = function (plugins) { return plugins; };
 var markDownRenderers = {
     a: Anchor,
     emoji: Emoji,
     mention: Mention,
 };
-var emojiMarkdownPlugin = function () {
-    var replace = function (match) {
-        return u('element', { tagName: 'emoji' }, [u('text', match)]);
-    };
-    var transform = function (node) { return findAndReplace$1(node, emojiRegex__default["default"](), replace); };
-    return transform;
-};
-var mentionsMarkdownPlugin = function (mentioned_users) { return function () {
-    var mentioned_usernames = mentioned_users
-        .map(function (user) { return user.name || user.id; })
-        .filter(Boolean)
-        .map(escapeRegExp);
-    var mentionedUsersRegex = new RegExp(mentioned_usernames.map(function (username) { return "@".concat(username); }).join('|'), 'g');
-    var replace = function (match) {
-        var usernameOrId = match.replace('@', '');
-        var user = mentioned_users.find(function (_a) {
-            var id = _a.id, name = _a.name;
-            return name === usernameOrId || id === usernameOrId;
-        });
-        return u('element', { mentionedUser: user, tagName: 'mention' }, [u('text', match)]);
-    };
-    var transform = function (tree) {
-        if (!mentioned_usernames.length)
-            return tree;
-        // handles special cases of mentions where user.name is an e-mail
-        // Remark GFM translates all e-mail-like text nodes to links creating
-        // two separate child nodes "@" and "your.name@as.email" instead of
-        // keeping it as one text node with value "@your.name@as.email"
-        // this piece finds these two separated nodes and merges them together
-        // before "replace" function takes over
-        visit(tree, function (node, index, parent) {
-            var _a;
-            if (index === null)
-                return;
-            if (!parent)
-                return;
-            var nextChild = parent.children.at(index + 1);
-            var nextChildHref = (_a = nextChild === null || nextChild === void 0 ? void 0 : nextChild.properties) === null || _a === void 0 ? void 0 : _a.href;
-            if (node.type === 'text' &&
-                // text value has to have @ sign at the end of the string
-                // and no other characters except whitespace can precede it
-                // valid cases:   "text @", "@", " @"
-                // invalid cases: "text@", "@text",
-                /.?\s?@$|^@$/.test(node.value) &&
-                (nextChildHref === null || nextChildHref === void 0 ? void 0 : nextChildHref.startsWith('mailto:'))) {
-                var newTextValue = node.value.replace(/@$/, '');
-                var username = nextChildHref.replace('mailto:', '');
-                parent.children[index] = u('text', newTextValue);
-                parent.children[index + 1] = u('text', "@".concat(username));
-            }
-        });
-        return findAndReplace$1(tree, mentionedUsersRegex, replace);
-    };
-    return transform;
-}; };
 var renderText = function (text, mentionedUsers, _a) {
-    var _b = _a === void 0 ? {} : _a, customMarkDownRenderers = _b.customMarkDownRenderers;
+    var _b = _a === void 0 ? {} : _a, _c = _b.allowedTagNames, allowedTagNames = _c === void 0 ? defaultAllowedTagNames : _c, customMarkDownRenderers = _b.customMarkDownRenderers, _d = _b.getRehypePlugins, getRehypePlugins = _d === void 0 ? getPluginsForward : _d, _e = _b.getRemarkPlugins, getRemarkPlugins = _e === void 0 ? getPluginsForward : _e;
     // take the @ mentions and turn them into markdown?
     // translate links
     if (!text)
@@ -26282,6 +26284,7 @@ var renderText = function (text, mentionedUsers, _a) {
         catch (e) {
         }
     });
+    var remarkPlugins = [[remarkGfm, { singleTilde: false }]];
     var rehypePlugins = [emojiMarkdownPlugin];
     if (mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) {
         rehypePlugins.push(mentionsMarkdownPlugin(mentionedUsers));
@@ -26302,65 +26305,7 @@ var renderText = function (text, mentionedUsers, _a) {
         };
     }
     var rehypeComponents = __assign(__assign({}, markDownRenderers), customMarkDownRenderers);
-    return (React__default["default"].createElement(ReactMarkdown, { allowedElements: allowedMarkups, components: rehypeComponents, rehypePlugins: rehypePlugins, remarkPlugins: [[remarkGfm, { singleTilde: false }]], skipHtml: true, transformLinkUri: function (uri) { return (uri.startsWith('app://') ? uri : uriTransformer(uri)); }, unwrapDisallowed: true }, newText));
-};
-function escapeRegExp(text) {
-    return text.replace(/[-[\]{}()*+?.,/\\^$|#]/g, '\\$&');
-}
-/**
- * @deprecated will be removed in the next major release
- */
-var generateRandomId = nanoid;
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt#getting_whole_characters
-var getWholeChar = function (str, i) {
-    var code = str.charCodeAt(i);
-    if (Number.isNaN(code))
-        return '';
-    if (code < 0xd800 || code > 0xdfff)
-        return str.charAt(i);
-    if (0xd800 <= code && code <= 0xdbff) {
-        if (str.length <= i + 1) {
-            throw 'High surrogate without following low surrogate';
-        }
-        var next = str.charCodeAt(i + 1);
-        if (0xdc00 > next || next > 0xdfff) {
-            throw 'High surrogate without following low surrogate';
-        }
-        return str.charAt(i) + str.charAt(i + 1);
-    }
-    if (i === 0) {
-        throw 'Low surrogate without preceding high surrogate';
-    }
-    var prev = str.charCodeAt(i - 1);
-    if (0xd800 > prev || prev > 0xdbff) {
-        throw 'Low surrogate without preceding high surrogate';
-    }
-    return '';
-};
-
-var DefaultSuggestionListHeader = function (props) {
-    var currentTrigger = props.currentTrigger, value = props.value;
-    var t = useTranslationContext('DefaultSuggestionListHeader').t;
-    var triggerIndex = value.lastIndexOf(currentTrigger);
-    if (currentTrigger === '/') {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            t('Commands matching'),
-            " ",
-            React__default["default"].createElement("strong", null, value.slice(triggerIndex + 1))));
-    }
-    if (currentTrigger === ':') {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            t('Emoji matching'),
-            " ",
-            React__default["default"].createElement("strong", null, value.slice(triggerIndex + 1))));
-    }
-    if (currentTrigger === '@') {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            t('People matching'),
-            " ",
-            React__default["default"].createElement("strong", null, value.slice(triggerIndex + 1))));
-    }
-    return null;
+    return (React__default["default"].createElement(ReactMarkdown, { allowedElements: allowedTagNames, components: rehypeComponents, rehypePlugins: getRehypePlugins(rehypePlugins), remarkPlugins: getRemarkPlugins(remarkPlugins), skipHtml: true, transformLinkUri: transformLinkUri, unwrapDisallowed: true }, newText));
 };
 
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -26386,7 +26331,7 @@ var List = function List(_ref) {
     AutocompleteSuggestionItem = _useComponentContext.AutocompleteSuggestionItem;
   var _useChatContext = useChatContext('SuggestionList'),
     themeVersion = _useChatContext.themeVersion;
-  var SuggestionItem = PropSuggestionItem || AutocompleteSuggestionItem || Item;
+  var SuggestionItem = PropSuggestionItem || AutocompleteSuggestionItem || Item$1;
   var SuggestionHeader = PropHeader || AutocompleteSuggestionHeader || DefaultSuggestionListHeader;
   var _useState = React.useState(undefined),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -26563,6 +26508,33 @@ var UnMemoizedCommandItem = function (props) {
 };
 var CommandItem = React__default["default"].memo(UnMemoizedCommandItem);
 
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt#getting_whole_characters
+var getWholeChar = function (str, i) {
+    var code = str.charCodeAt(i);
+    if (Number.isNaN(code))
+        return '';
+    if (code < 0xd800 || code > 0xdfff)
+        return str.charAt(i);
+    if (0xd800 <= code && code <= 0xdbff) {
+        if (str.length <= i + 1) {
+            throw 'High surrogate without following low surrogate';
+        }
+        var next = str.charCodeAt(i + 1);
+        if (0xdc00 > next || next > 0xdfff) {
+            throw 'High surrogate without following low surrogate';
+        }
+        return str.charAt(i) + str.charAt(i + 1);
+    }
+    if (i === 0) {
+        throw 'Low surrogate without preceding high surrogate';
+    }
+    var prev = str.charCodeAt(i - 1);
+    if (0xd800 > prev || prev > 0xdbff) {
+        throw 'Low surrogate without preceding high surrogate';
+    }
+    return '';
+};
+
 /**
  * A round avatar image with fallback to username's first letter
  */
@@ -27265,6 +27237,31 @@ ReactTextareaAutocomplete.propTypes = {
   value: PropTypes__default["default"].string
 };
 
+let urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+const POOL_SIZE_MULTIPLIER = 128;
+let pool, poolOffset;
+let fillPool = bytes => {
+  if (!pool || pool.length < bytes) {
+    pool = Buffer.allocUnsafe(bytes * POOL_SIZE_MULTIPLIER);
+    crypto__default["default"].randomFillSync(pool);
+    poolOffset = 0;
+  } else if (poolOffset + bytes > pool.length) {
+    crypto__default["default"].randomFillSync(pool);
+    poolOffset = 0;
+  }
+  poolOffset += bytes;
+};
+let nanoid = (size = 21) => {
+  fillPool((size -= 0));
+  let id = '';
+  for (let i = poolOffset - size; i < poolOffset; i++) {
+    id += urlAlphabet[pool[i] & 63];
+  }
+  return id
+};
+
 var channelReducer = function (state, action) {
     var _a;
     switch (action.type) {
@@ -28003,6 +28000,13 @@ var getReadByTooltipText = function (users, t, client, tooltipUserNameMapper) {
     }
     return outStr;
 };
+var isOnlyEmojis = function (text) {
+    if (!text)
+        return false;
+    var noEmojis = text.replace(emojiRegex__default["default"](), '');
+    var noSpace = noEmojis.replace(/[\s\n]/gm, '');
+    return !noSpace;
+};
 
 var CustomMessageActionsList = function (props) {
     var customMessageActions = props.customMessageActions, message = props.message;
@@ -30438,6 +30442,7 @@ var CooldownTimer = function (_a) {
 var useCommandTrigger = function () {
     var themeVersion = useChatContext('useCommandTrigger').themeVersion;
     var channelConfig = useChannelStateContext('useCommandTrigger').channelConfig;
+    var t = useTranslationContext('useCommandTrigger').t;
     var commands = channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.commands;
     return {
         component: CommandItem,
@@ -30446,7 +30451,7 @@ var useCommandTrigger = function () {
                 return [];
             }
             var selectedCommands = commands.filter(function (command) { var _a; return ((_a = command.name) === null || _a === void 0 ? void 0 : _a.indexOf(query)) !== -1; });
-            // sort alphabetically unless the you're matching the first char
+            // sort alphabetically unless you're matching the first char
             selectedCommands.sort(function (a, b) {
                 var _a, _b;
                 var nameA = (_a = a.name) === null || _a === void 0 ? void 0 : _a.toLowerCase();
@@ -30470,8 +30475,25 @@ var useCommandTrigger = function () {
             });
             var result = selectedCommands.slice(0, themeVersion === '2' ? 5 : 10);
             if (onReady)
-                onReady(result.filter(function (result) {
+                onReady(result
+                    .filter(function (result) {
                     return result.name !== undefined;
+                })
+                    .map(function (commandData) {
+                    var translatedCommandData = {
+                        name: t("".concat(commandData.name, "-command-name"), {
+                            defaultValue: commandData.name,
+                        }),
+                    };
+                    if (commandData.args)
+                        translatedCommandData.args = t("".concat(commandData.name, "-command-args"), {
+                            defaultValue: commandData.args,
+                        });
+                    if (commandData.description)
+                        translatedCommandData.description = t("".concat(commandData.name, "-command-description"), {
+                            defaultValue: commandData.description,
+                        });
+                    return translatedCommandData;
                 }), query);
             return result;
         },
@@ -34994,7 +35016,8 @@ var UnMemoizedChannelList = function (props) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: className, ref: channelListRef },
             showChannelSearch && (React__default["default"].createElement(ChannelSearch$1, __assign({ onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels }, additionalChannelSearchProps))),
-            showChannelList && (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: channelsQueryState.queryInProgress === 'reload', LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default["default"].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default["default"].createElement(Paginator, { hasNextPage: hasNextPage, isLoading: channelsQueryState.queryInProgress === 'load-more', loadNextPage: loadNextPage }, renderChannels
+            showChannelList && (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: !!channelsQueryState.queryInProgress &&
+                    ['reload', 'uninitialized'].includes(channelsQueryState.queryInProgress), LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default["default"].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default["default"].createElement(Paginator, { hasNextPage: hasNextPage, isLoading: channelsQueryState.queryInProgress === 'load-more', loadNextPage: loadNextPage }, renderChannels
                 ? renderChannels(loadedChannels, renderChannel)
                 : loadedChannels.map(function (channel) { return renderChannel(channel); }))))))));
 };
@@ -35003,7 +35026,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.14.1';
+var version = '10.16.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -35135,7 +35158,7 @@ var useCreateChatContext = function (value) {
 
 var useChannelsQueryState = function () {
     var _a = React.useState(null), error = _a[0], setError = _a[1];
-    var _b = React.useState(null), queryInProgress = _b[0], setQueryInProgress = _b[1];
+    var _b = React.useState('uninitialized'), queryInProgress = _b[0], setQueryInProgress = _b[1];
     return {
         error: error,
         queryInProgress: queryInProgress,
@@ -35227,7 +35250,7 @@ var UnMemoizedDateSeparator = function (props) {
         messageCreatedAt: messageCreatedAt,
         tDateTimeParser: tDateTimeParser,
     });
-    return (React__default["default"].createElement("div", { className: 'str-chat__date-separator' },
+    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' }))));
@@ -35247,7 +35270,7 @@ var UnMemoizedEventComponent = function (props) {
     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' },
+        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),
@@ -36529,23 +36552,6 @@ var UnMemoizedScrollToBottomButton = function (props) {
 };
 var ScrollToBottomButton = React__default["default"].memo(UnMemoizedScrollToBottomButton);
 
-var useGiphyPreview = function (separateGiphyPreview) {
-    var _a = React.useState(), giphyPreviewMessage = _a[0], setGiphyPreviewMessage = _a[1];
-    var client = useChatContext('useGiphyPreview').client;
-    React.useEffect(function () {
-        var handleEvent = function (event) {
-            var message = event.message, user = event.user;
-            if ((message === null || message === void 0 ? void 0 : message.command) === 'giphy' && (user === null || user === void 0 ? void 0 : user.id) === client.userID) {
-                setGiphyPreviewMessage(undefined);
-            }
-        };
-        if (separateGiphyPreview)
-            client.on('message.new', handleEvent);
-        return function () { return client.off('message.new', handleEvent); };
-    }, [separateGiphyPreview]);
-    return { giphyPreviewMessage: giphyPreviewMessage, setGiphyPreviewMessage: setGiphyPreviewMessage };
-};
-
 function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
     var _a = React.useState(false), newMessagesNotification = _a[0], setNewMessagesNotification = _a[1];
     var _b = React.useState(true), isMessageListScrolledToBottom = _b[0], setIsMessageListScrolledToBottom = _b[1];
@@ -36669,7 +36675,134 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
     return recheckForNewOwnMessage;
 }
 
+var useGiphyPreview = function (separateGiphyPreview) {
+    var _a = React.useState(), giphyPreviewMessage = _a[0], setGiphyPreviewMessage = _a[1];
+    var client = useChatContext('useGiphyPreview').client;
+    React.useEffect(function () {
+        var handleEvent = function (event) {
+            var message = event.message, user = event.user;
+            if ((message === null || message === void 0 ? void 0 : message.command) === 'giphy' && (user === null || user === void 0 ? void 0 : user.id) === client.userID) {
+                setGiphyPreviewMessage(undefined);
+            }
+        };
+        if (separateGiphyPreview)
+            client.on('message.new', handleEvent);
+        return function () { return client.off('message.new', handleEvent); };
+    }, [separateGiphyPreview]);
+    return { giphyPreviewMessage: giphyPreviewMessage, setGiphyPreviewMessage: setGiphyPreviewMessage };
+};
+
+var useMessageSetKey = function (_a) {
+    var messages = _a.messages;
+    /**
+     * Logic to update the key of the virtuoso component when the list jumps to a new location.
+     */
+    var _b = React.useState(+new Date()), messageSetKey = _b[0], setMessageSetKey = _b[1];
+    var firstMessageId = React.useRef();
+    React.useEffect(function () {
+        var _a;
+        var continuousSet = messages === null || messages === void 0 ? void 0 : messages.find(function (message) { return message.id === firstMessageId.current; });
+        if (!continuousSet) {
+            setMessageSetKey(+new Date());
+        }
+        firstMessageId.current = (_a = messages === null || messages === void 0 ? void 0 : messages[0]) === null || _a === void 0 ? void 0 : _a.id;
+    }, [messages]);
+    return {
+        messageSetKey: messageSetKey,
+    };
+};
+
+var useScrollToBottomOnNewMessage = function (_a) {
+    var messages = _a.messages, scrollToBottom = _a.scrollToBottom, scrollToLatestMessageOnFocus = _a.scrollToLatestMessageOnFocus;
+    var _b = React__default["default"].useState(false), newMessagesReceivedInBackground = _b[0], setNewMessagesReceivedInBackground = _b[1];
+    var resetNewMessagesReceivedInBackground = React.useCallback(function () {
+        setNewMessagesReceivedInBackground(false);
+    }, []);
+    React.useEffect(function () {
+        setNewMessagesReceivedInBackground(true);
+    }, [messages]);
+    var scrollToBottomIfConfigured = React.useCallback(function (event) {
+        if (!scrollToLatestMessageOnFocus ||
+            !newMessagesReceivedInBackground ||
+            event.target !== window)
+            return;
+        setTimeout(scrollToBottom, 100);
+    }, [scrollToLatestMessageOnFocus, scrollToBottom, newMessagesReceivedInBackground]);
+    React.useEffect(function () {
+        if (typeof window !== 'undefined') {
+            window.addEventListener('focus', scrollToBottomIfConfigured);
+            window.addEventListener('blur', resetNewMessagesReceivedInBackground);
+        }
+        return function () {
+            window.removeEventListener('focus', scrollToBottomIfConfigured);
+            window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
+        };
+    }, [scrollToBottomIfConfigured]);
+};
+
 var PREPEND_OFFSET = Math.pow(10, 7);
+function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
+    return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
+}
+function calculateFirstItemIndex(numItemsPrepended) {
+    return PREPEND_OFFSET - numItemsPrepended;
+}
+// using 'display: inline-block'
+// traps CSS margins of the item elements, preventing incorrect item measurements
+var Item = function (_a) {
+    var _b;
+    var _c;
+    var context = _a.context, props = __rest(_a, ["context"]);
+    if (!context)
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    var message = context.processedMessages[calculateItemIndex(props['data-item-index'], context.numItemsPrepended)];
+    var groupStyles = context.messageGroupStyles[message.id];
+    return (React__default["default"].createElement("div", __assign({}, props, { className: ((_c = context === null || context === void 0 ? void 0 : context.customClasses) === null || _c === void 0 ? void 0 : _c.virtualMessage) ||
+            clsx('str-chat__virtual-list-message-wrapper str-chat__li', (_b = {},
+                _b["str-chat__li--".concat(groupStyles)] = groupStyles,
+                _b)) })));
+};
+var Header = function (_a) {
+    var context = _a.context;
+    var _b = useComponentContext('VirtualizedMessageListHeader').LoadingIndicator, LoadingIndicator$1 = _b === void 0 ? LoadingIndicator : _b;
+    if (!(context === null || context === void 0 ? void 0 : context.loadingMore))
+        return null;
+    return LoadingIndicator$1 ? (React__default["default"].createElement("div", { className: 'str-chat__virtual-list__loading' },
+        React__default["default"].createElement(LoadingIndicator$1, { size: 20 }))) : ((context === null || context === void 0 ? void 0 : context.head) || null);
+};
+var EmptyPlaceholder = function (_a) {
+    var context = _a.context;
+    var _b = useComponentContext('VirtualizedMessageList').EmptyStateIndicator, EmptyStateIndicator$1 = _b === void 0 ? EmptyStateIndicator : _b;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, EmptyStateIndicator$1 && (React__default["default"].createElement(EmptyStateIndicator$1, { listType: (context === null || context === void 0 ? void 0 : context.threadList) ? 'thread' : 'message' }))));
+};
+var Footer = function () {
+    var TypingIndicator = useComponentContext('VirtualizedMessageList').TypingIndicator;
+    return TypingIndicator ? React__default["default"].createElement(TypingIndicator, { avatarSize: 24 }) : null;
+};
+var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, virtuosoRef = virtuosoContext.virtuosoRef;
+    var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
+    if (customMessageRenderer) {
+        return customMessageRenderer(messageList, streamMessageIndex);
+    }
+    var message = messageList[streamMessageIndex];
+    if (!message)
+        return React__default["default"].createElement("div", { style: { height: '1px' } }); // returning null or zero height breaks the virtuoso
+    if (message.customType === CUSTOM_MESSAGE_TYPE.date && message.date && isDate(message.date)) {
+        return DateSeparator ? React__default["default"].createElement(DateSeparator, { date: message.date, unread: message.unread }) : null;
+    }
+    if (message.type === 'system') {
+        return MessageSystem ? React__default["default"].createElement(MessageSystem, { message: message }) : null;
+    }
+    var groupedByUser = shouldGroupByUser &&
+        streamMessageIndex > 0 &&
+        ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
+    var firstOfGroup = shouldGroupByUser && ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_e = (_d = messageList[streamMessageIndex - 1]) === null || _d === void 0 ? void 0 : _d.user) === null || _e === void 0 ? void 0 : _e.id);
+    var endOfGroup = shouldGroupByUser && ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_h = (_g = messageList[streamMessageIndex + 1]) === null || _g === void 0 ? void 0 : _g.user) === null || _h === void 0 ? void 0 : _h.id);
+    return (React__default["default"].createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_j = virtuosoRef.current) === null || _j === void 0 ? void 0 : _j.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, readBy: ownMessagesReadByOthers[message.id] || [] }));
+};
+
 function captureResizeObserverExceededError(e) {
     if (e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
         e.message === 'ResizeObserver loop limit exceeded') {
@@ -36700,19 +36833,21 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
     return messages.length - 1;
 }
 var VirtualizedMessageListWithContext = function (props) {
-    var additionalVirtuosoProps = props.additionalVirtuosoProps, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, groupStyles = props.groupStyles, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, head = props.head, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, 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, 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, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    _e = props.overscan, 
+    _f = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    overscan = _e === void 0 ? 0 : _e, read = props.read, _f = props.returnAllReadData, returnAllReadData = _f === void 0 ? false : _f, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _g = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _g === void 0 ? false : _g, _h = props.separateGiphyPreview, separateGiphyPreview = _h === void 0 ? false : _h, _j = props.shouldGroupByUser, shouldGroupByUser = _j === void 0 ? false : _j, _k = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _k === void 0 ? 'smooth' : _k, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
+    overscan = _f === void 0 ? 0 : _f, read = props.read, _g = props.returnAllReadData, returnAllReadData = _g === void 0 ? false : _g, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _h = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _h === void 0 ? false : _h, _j = props.separateGiphyPreview, separateGiphyPreview = _j === void 0 ? false : _j, _k = props.shouldGroupByUser, shouldGroupByUser = _k === void 0 ? false : _k, _l = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _l === void 0 ? 'smooth' : _l, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
+    var virtuosoComponentsFromProps = additionalVirtuosoProps.components, overridingVirtuosoProps = __rest(additionalVirtuosoProps, ["components"]);
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
     useCaptureResizeObserverExceededError();
-    var _l = useComponentContext('VirtualizedMessageList'), _m = _l.DateSeparator, DateSeparator$1 = _m === void 0 ? DateSeparator : _m, _o = _l.EmptyStateIndicator, EmptyStateIndicator$1 = _o === void 0 ? EmptyStateIndicator : _o, _p = _l.GiphyPreviewMessage, GiphyPreviewMessage$1 = _p === void 0 ? GiphyPreviewMessage : _p, _q = _l.LoadingIndicator, LoadingIndicator$1 = _q === void 0 ? LoadingIndicator : _q, _r = _l.MessageListNotifications, MessageListNotifications$1 = _r === void 0 ? MessageListNotifications : _r, _s = _l.MessageNotification, MessageNotification$1 = _s === void 0 ? MessageNotification : _s, _t = _l.MessageSystem, MessageSystem = _t === void 0 ? EventComponent : _t, _u = _l.TypingIndicator, TypingIndicator = _u === void 0 ? null : _u, _v = _l.VirtualMessage, contextMessage = _v === void 0 ? MessageSimple : _v;
-    var _w = useChatContext('VirtualizedMessageList'), client = _w.client, customClasses = _w.customClasses;
+    var _m = useComponentContext('VirtualizedMessageList'), _o = _m.DateSeparator, DateSeparator$1 = _o === void 0 ? DateSeparator : _o, _p = _m.GiphyPreviewMessage, GiphyPreviewMessage$1 = _p === void 0 ? GiphyPreviewMessage : _p, _q = _m.MessageListNotifications, MessageListNotifications$1 = _q === void 0 ? MessageListNotifications : _q, _r = _m.MessageNotification, MessageNotification$1 = _r === void 0 ? MessageNotification : _r, _s = _m.MessageSystem, MessageSystem = _s === void 0 ? EventComponent : _s, _t = _m.VirtualMessage, MessageUIComponentFromContext = _t === void 0 ? MessageSimple : _t;
+    var MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
+    var _u = useChatContext('VirtualizedMessageList'), client = _u.client, customClasses = _u.customClasses;
+    var virtuoso = React.useRef(null);
     var lastRead = React.useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
-    var MessageUIComponent = propMessage || contextMessage;
-    var _x = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _x.giphyPreviewMessage, setGiphyPreviewMessage = _x.setGiphyPreviewMessage;
+    var _v = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _v.giphyPreviewMessage, setGiphyPreviewMessage = _v.setGiphyPreviewMessage;
     var processedMessages = React.useMemo(function () {
         if (typeof messages === 'undefined') {
             return [];
@@ -36761,9 +36896,8 @@ var VirtualizedMessageListWithContext = function (props) {
         }, {});
     }, 
     // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
-    [processedMessages.length, shouldGroupByUser]);
-    var virtuoso = React.useRef(null);
-    var _y = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _y.atBottom, isMessageListScrolledToBottom = _y.isMessageListScrolledToBottom, newMessagesNotification = _y.newMessagesNotification, setIsMessageListScrolledToBottom = _y.setIsMessageListScrolledToBottom, setNewMessagesNotification = _y.setNewMessagesNotification;
+    [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 __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -36790,44 +36924,9 @@ var VirtualizedMessageListWithContext = function (props) {
         hasMoreNewer,
         jumpToLatestMessage,
     ]);
-    var _z = React__default["default"].useState(false), newMessagesReceivedInBackground = _z[0], setNewMessagesReceivedInBackground = _z[1];
-    var resetNewMessagesReceivedInBackground = React.useCallback(function () {
-        setNewMessagesReceivedInBackground(false);
-    }, []);
-    React.useEffect(function () {
-        setNewMessagesReceivedInBackground(true);
-    }, [messages]);
-    var scrollToBottomIfConfigured = React.useCallback(function (event) {
-        if (scrollToLatestMessageOnFocus && event.target === window) {
-            if (newMessagesReceivedInBackground) {
-                setTimeout(scrollToBottom, 100);
-            }
-        }
-    }, [scrollToLatestMessageOnFocus, scrollToBottom, newMessagesReceivedInBackground]);
-    React.useEffect(function () {
-        if (typeof window !== 'undefined') {
-            window.addEventListener('focus', scrollToBottomIfConfigured);
-            window.addEventListener('blur', resetNewMessagesReceivedInBackground);
-        }
-        return function () {
-            window.removeEventListener('focus', scrollToBottomIfConfigured);
-            window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
-        };
-    }, [scrollToBottomIfConfigured]);
+    useScrollToBottomOnNewMessage({ messages: messages, scrollToBottom: scrollToBottom, scrollToLatestMessageOnFocus: scrollToLatestMessageOnFocus });
     var numItemsPrepended = usePrependedMessagesCount(processedMessages, !disableDateSeparator);
-    /**
-     * Logic to update the key of the virtuoso component when the list jumps to a new location.
-     */
-    var _0 = React.useState(+new Date()), messageSetKey = _0[0], setMessageSetKey = _0[1];
-    var firstMessageId = React.useRef();
-    React.useEffect(function () {
-        var _a;
-        var continuousSet = messages === null || messages === void 0 ? void 0 : messages.find(function (message) { return message.id === firstMessageId.current; });
-        if (!continuousSet) {
-            setMessageSetKey(+new Date());
-        }
-        firstMessageId.current = (_a = messages === null || messages === void 0 ? void 0 : messages[0]) === null || _a === void 0 ? void 0 : _a.id;
-    }, [messages]);
+    var messageSetKey = useMessageSetKey({ messages: messages }).messageSetKey;
     var shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
     var followOutput = function (isAtBottom) {
         if (hasMoreNewer || suppressAutoscroll) {
@@ -36839,63 +36938,10 @@ var VirtualizedMessageListWithContext = function (props) {
         // a message from another user has been received - don't scroll to bottom unless already there
         return isAtBottom ? stickToBottomScrollBehavior : false;
     };
-    var messageRenderer = React.useCallback(function (messageList, virtuosoIndex, virtuosoContext) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        var lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers;
-        var streamMessageIndex = virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
-        // use custom renderer supplied by client if present and skip the rest
-        if (customMessageRenderer) {
-            return customMessageRenderer(messageList, streamMessageIndex);
-        }
-        var message = messageList[streamMessageIndex];
-        if (message.customType === CUSTOM_MESSAGE_TYPE.date && message.date && isDate(message.date)) {
-            return React__default["default"].createElement(DateSeparator$1, { date: message.date, unread: message.unread });
-        }
-        if (!message)
-            return React__default["default"].createElement("div", { style: { height: '1px' } }); // returning null or zero height breaks the virtuoso
-        if (message.type === 'system') {
-            return React__default["default"].createElement(MessageSystem, { message: message });
-        }
-        var groupedByUser = shouldGroupByUser &&
-            streamMessageIndex > 0 &&
-            ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
-        var firstOfGroup = shouldGroupByUser && ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_e = (_d = messageList[streamMessageIndex - 1]) === null || _d === void 0 ? void 0 : _d.user) === null || _e === void 0 ? void 0 : _e.id);
-        var endOfGroup = shouldGroupByUser && ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_h = (_g = messageList[streamMessageIndex + 1]) === null || _g === void 0 ? void 0 : _g.user) === null || _h === void 0 ? void 0 : _h.id);
-        return (React__default["default"].createElement(Message, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: (_j = virtuoso.current) === null || _j === void 0 ? void 0 : _j.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: props.messageActions, readBy: ownMessagesReadByOthers[message.id] || [] }));
-    }, [customMessageRenderer, shouldGroupByUser, numItemsPrepended]);
-    var Item = React.useMemo(function () {
-        // using 'display: inline-block'
-        // traps CSS margins of the item elements, preventing incorrect item measurements
-        var Item = function (props) {
-            var _a;
-            var _b;
-            var context = props.context;
-            var streamMessageIndex = props['data-item-index'] + context.numItemsPrepended - PREPEND_OFFSET;
-            var message = context.processedMessages[streamMessageIndex];
-            var groupStyles = context.messageGroupStyles[message.id] || '';
-            return (React__default["default"].createElement("div", __assign({}, props, { className: ((_b = context === null || context === void 0 ? void 0 : context.customClasses) === null || _b === void 0 ? void 0 : _b.virtualMessage) ||
-                    clsx('str-chat__virtual-list-message-wrapper str-chat__li', (_a = {},
-                        _a["str-chat__li--".concat(groupStyles)] = groupStyles,
-                        _a)) })));
-        };
-        return Item;
+    var computeItemKey = React.useCallback(function (index, _, _a) {
+        var numItemsPrepended = _a.numItemsPrepended, processedMessages = _a.processedMessages;
+        return processedMessages[calculateItemIndex(index, numItemsPrepended)].id;
     }, []);
-    var virtuosoComponents = React.useMemo(function () {
-        var EmptyPlaceholder = function () { return (React__default["default"].createElement(React__default["default"].Fragment, null, EmptyStateIndicator$1 && (React__default["default"].createElement(EmptyStateIndicator$1, { listType: threadList ? 'thread' : 'message' })))); };
-        var Header = function () {
-            return loadingMore ? (React__default["default"].createElement("div", { className: 'str-chat__virtual-list__loading' },
-                React__default["default"].createElement(LoadingIndicator$1, { size: 20 }))) : (head || null);
-        };
-        var Footer = function () {
-            return TypingIndicator ? React__default["default"].createElement(TypingIndicator, { avatarSize: 24 }) : React__default["default"].createElement(React__default["default"].Fragment, null);
-        };
-        return {
-            EmptyPlaceholder: EmptyPlaceholder,
-            Footer: Footer,
-            Header: Header,
-            Item: Item,
-        };
-    }, [loadingMore, head, Item]);
     var atBottomStateChange = function (isAtBottom) {
         atBottom.current = isAtBottom;
         setIsMessageListScrolledToBottom(isAtBottom);
@@ -36927,18 +36973,27 @@ var VirtualizedMessageListWithContext = function (props) {
     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, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 200, className: 'str-chat__message-list-scroll', components: virtuosoComponents, computeItemKey: function (index) {
-                        return processedMessages[numItemsPrepended + index - PREPEND_OFFSET].id;
-                    }, context: {
+                React__default["default"].createElement(reactVirtuoso.Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 200, className: 'str-chat__message-list-scroll', components: __assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
+                        additionalMessageInputProps: additionalMessageInputProps,
+                        closeReactionSelectorOnClick: closeReactionSelectorOnClick,
                         customClasses: customClasses,
+                        customMessageActions: customMessageActions,
+                        customMessageRenderer: customMessageRenderer,
+                        DateSeparator: DateSeparator$1,
+                        head: head,
                         lastReceivedMessageId: lastReceivedMessageId,
+                        loadingMore: loadingMore,
+                        Message: MessageUIComponent,
+                        messageActions: messageActions,
                         messageGroupStyles: messageGroupStyles,
+                        MessageSystem: MessageSystem,
                         numItemsPrepended: numItemsPrepended,
                         ownMessagesReadByOthers: ownMessagesReadByOthers,
                         processedMessages: processedMessages,
-                    }, endReached: endReached, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: function (i, _, context) {
-                        return messageRenderer(processedMessages, i, context);
-                    }, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
+                        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 } : {}))))),
         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 })));
 };
@@ -37046,6 +37101,11 @@ var UnMemoizedWindow = function (props) {
  */
 var Window = React__default["default"].memo(UnMemoizedWindow);
 
+/**
+ * @deprecated will be removed in the next major release
+ */
+var generateRandomId = nanoid;
+
 // @ts-expect-error
 
 var DefaultEmoji = /*#__PURE__*/Object.freeze({
@@ -37099,7 +37159,7 @@ exports.CooldownTimer = CooldownTimer;
 exports.DateSeparator = DateSeparator;
 exports.DefaultSuggestionList = List;
 exports.DefaultSuggestionListHeader = DefaultSuggestionListHeader;
-exports.DefaultSuggestionListItem = Item;
+exports.DefaultSuggestionListItem = Item$1;
 exports.DefaultTriggerProvider = DefaultTriggerProvider;
 exports.DeliveredCheckIcon = DeliveredCheckIcon;
 exports.DownloadIcon = DownloadIcon;
@@ -37207,6 +37267,7 @@ exports.areMessagePropsEqual = areMessagePropsEqual;
 exports.areMessageUIPropsEqual = areMessageUIPropsEqual;
 exports.darkModeTheme = darkModeTheme;
 exports.deTranslations = deTranslations;
+exports.defaultAllowedTagNames = defaultAllowedTagNames;
 exports.defaultDateTimeParser = defaultDateTimeParser;
 exports.defaultPinPermissions = defaultPinPermissions;
 exports.defaultScrollToItem = defaultScrollToItem;