stream-chat-react 9.2.0 → 9.4.1

package/dist/index.cjs.js

@@ -32,7 +32,6 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var emojiRegex = require('emoji-regex');
 var linkify = require('linkifyjs');
-var findAndReplace = require('mdast-util-find-and-replace');
 var RootReactMarkdown = require('react-markdown');
 var ReactMarkdown = require('react-markdown/with-html');
 var uniqBy = require('lodash.uniqby');
@@ -93,7 +92,6 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var emojiRegex__default = /*#__PURE__*/_interopDefaultLegacy(emojiRegex);
 var linkify__namespace = /*#__PURE__*/_interopNamespace(linkify);
-var findAndReplace__default = /*#__PURE__*/_interopDefaultLegacy(findAndReplace);
 var RootReactMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(RootReactMarkdown);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(ReactMarkdown);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
@@ -1333,6 +1331,718 @@ var withComponentContext = function (Component) {
     return WithComponentContextComponent;
 };
 
+function escapeStringRegexp(string) {
+	if (typeof string !== 'string') {
+		throw new TypeError('Expected a string');
+	}
+
+	// Escape characters with special meaning either inside or outside character sets.
+	// Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+	return string
+		.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
+		.replace(/-/g, '\\x2d');
+}
+
+/**
+ * @typedef {import('unist').Node} Node
+ * @typedef {import('unist').Parent} Parent
+ *
+ * @typedef {string} Type
+ * @typedef {Object<string, unknown>} Props
+ *
+ * @typedef {null|undefined|Type|Props|TestFunctionAnything|Array.<Type|Props|TestFunctionAnything>} Test
+ */
+
+const convert$1 =
+  /**
+   * @type {(
+   *   (<T extends Node>(test: T['type']|Partial<T>|TestFunctionPredicate<T>) => AssertPredicate<T>) &
+   *   ((test?: Test) => AssertAnything)
+   * )}
+   */
+  (
+    /**
+     * Generate an assertion from a check.
+     * @param {Test} [test]
+     * When nullish, checks if `node` is a `Node`.
+     * When `string`, works like passing `function (node) {return node.type === test}`.
+     * When `function` checks if function passed the node is true.
+     * When `object`, checks that all keys in test are in node, and that they have (strictly) equal values.
+     * When `array`, checks any one of the subtests pass.
+     * @returns {AssertAnything}
+     */
+    function (test) {
+      if (test === undefined || test === null) {
+        return ok$1
+      }
+
+      if (typeof test === 'string') {
+        return typeFactory$1(test)
+      }
+
+      if (typeof test === 'object') {
+        return Array.isArray(test) ? anyFactory$1(test) : propsFactory$1(test)
+      }
+
+      if (typeof test === 'function') {
+        return castFactory$1(test)
+      }
+
+      throw new Error('Expected function, string, or object as test')
+    }
+  );
+/**
+ * @param {Array.<Type|Props|TestFunctionAnything>} tests
+ * @returns {AssertAnything}
+ */
+function anyFactory$1(tests) {
+  /** @type {Array.<AssertAnything>} */
+  const checks = [];
+  let index = -1;
+
+  while (++index < tests.length) {
+    checks[index] = convert$1(tests[index]);
+  }
+
+  return castFactory$1(any)
+
+  /**
+   * @this {unknown}
+   * @param {unknown[]} parameters
+   * @returns {boolean}
+   */
+  function any(...parameters) {
+    let index = -1;
+
+    while (++index < checks.length) {
+      if (checks[index].call(this, ...parameters)) return true
+    }
+
+    return false
+  }
+}
+
+/**
+ * Utility to assert each property in `test` is represented in `node`, and each
+ * values are strictly equal.
+ *
+ * @param {Props} check
+ * @returns {AssertAnything}
+ */
+function propsFactory$1(check) {
+  return castFactory$1(all)
+
+  /**
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function all(node) {
+    /** @type {string} */
+    let key;
+
+    for (key in check) {
+      // @ts-expect-error: hush, it sure works as an index.
+      if (node[key] !== check[key]) return false
+    }
+
+    return true
+  }
+}
+
+/**
+ * Utility to convert a string into a function which checks a given node’s type
+ * for said string.
+ *
+ * @param {Type} check
+ * @returns {AssertAnything}
+ */
+function typeFactory$1(check) {
+  return castFactory$1(type)
+
+  /**
+   * @param {Node} node
+   */
+  function type(node) {
+    return node && node.type === check
+  }
+}
+
+/**
+ * Utility to convert a string into a function which checks a given node’s type
+ * for said string.
+ * @param {TestFunctionAnything} check
+ * @returns {AssertAnything}
+ */
+function castFactory$1(check) {
+  return assertion
+
+  /**
+   * @this {unknown}
+   * @param {Array.<unknown>} parameters
+   * @returns {boolean}
+   */
+  function assertion(...parameters) {
+    // @ts-expect-error: spreading is fine.
+    return Boolean(check.call(this, ...parameters))
+  }
+}
+
+// Utility to return true.
+function ok$1() {
+  return true
+}
+
+/**
+ * @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').Action} Action
+ * @typedef {import('./complex-types').Index} Index
+ * @typedef {import('./complex-types').ActionTuple} ActionTuple
+ * @typedef {import('./complex-types').VisitorResult} VisitorResult
+ * @typedef {import('./complex-types').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 a test
+ *
+ * @param tree Abstract syntax tree to walk
+ * @param test Test node, optional
+ * @param visitor Function to run for each node
+ * @param reverse Visit the tree in reverse order, defaults to false
+ */
+const visitParents =
+  /**
+   * @type {(
+   *   (<Tree extends Node, Check extends Test>(tree: Tree, test: Check, visitor: import('./complex-types').BuildVisitor<Tree, Check>, reverse?: boolean) => void) &
+   *   (<Tree extends Node>(tree: Tree, visitor: import('./complex-types').BuildVisitor<Tree>, reverse?: boolean) => void)
+   * )}
+   */
+  (
+    /**
+     * @param {Node} tree
+     * @param {Test} test
+     * @param {import('./complex-types').Visitor<Node>} visitor
+     * @param {boolean} [reverse]
+     */
+    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$1(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 {Object.<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 {string} Type
+ * @typedef {Object<string, unknown>} Props
+ *
+ * @typedef {null|undefined|Type|Props|TestFunctionAnything|Array.<Type|Props|TestFunctionAnything>} Test
+ */
+
+const convert =
+  /**
+   * @type {(
+   *   (<T extends Node>(test: T['type']|Partial<T>|TestFunctionPredicate<T>) => AssertPredicate<T>) &
+   *   ((test?: Test) => AssertAnything)
+   * )}
+   */
+  (
+    /**
+     * Generate an assertion from a check.
+     * @param {Test} [test]
+     * When nullish, checks if `node` is a `Node`.
+     * When `string`, works like passing `function (node) {return node.type === test}`.
+     * When `function` checks if function passed the node is true.
+     * When `object`, checks that all keys in test are in node, and that they have (strictly) equal values.
+     * When `array`, checks any one of the subtests pass.
+     * @returns {AssertAnything}
+     */
+    function (test) {
+      if (test === undefined || test === null) {
+        return ok
+      }
+
+      if (typeof test === 'string') {
+        return typeFactory(test)
+      }
+
+      if (typeof test === 'object') {
+        return Array.isArray(test) ? anyFactory(test) : propsFactory(test)
+      }
+
+      if (typeof test === 'function') {
+        return castFactory(test)
+      }
+
+      throw new Error('Expected function, string, or object as test')
+    }
+  );
+/**
+ * @param {Array.<Type|Props|TestFunctionAnything>} tests
+ * @returns {AssertAnything}
+ */
+function anyFactory(tests) {
+  /** @type {Array.<AssertAnything>} */
+  const checks = [];
+  let index = -1;
+
+  while (++index < tests.length) {
+    checks[index] = convert(tests[index]);
+  }
+
+  return castFactory(any)
+
+  /**
+   * @this {unknown}
+   * @param {unknown[]} parameters
+   * @returns {boolean}
+   */
+  function any(...parameters) {
+    let index = -1;
+
+    while (++index < checks.length) {
+      if (checks[index].call(this, ...parameters)) return true
+    }
+
+    return false
+  }
+}
+
+/**
+ * Utility to assert each property in `test` is represented in `node`, and each
+ * values are strictly equal.
+ *
+ * @param {Props} check
+ * @returns {AssertAnything}
+ */
+function propsFactory(check) {
+  return castFactory(all)
+
+  /**
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function all(node) {
+    /** @type {string} */
+    let key;
+
+    for (key in check) {
+      // @ts-expect-error: hush, it sure works as an index.
+      if (node[key] !== check[key]) return false
+    }
+
+    return true
+  }
+}
+
+/**
+ * Utility to convert a string into a function which checks a given node’s type
+ * for said string.
+ *
+ * @param {Type} check
+ * @returns {AssertAnything}
+ */
+function typeFactory(check) {
+  return castFactory(type)
+
+  /**
+   * @param {Node} node
+   */
+  function type(node) {
+    return node && node.type === check
+  }
+}
+
+/**
+ * Utility to convert a string into a function which checks a given node’s type
+ * for said string.
+ * @param {TestFunctionAnything} check
+ * @returns {AssertAnything}
+ */
+function castFactory(check) {
+  return assertion
+
+  /**
+   * @this {unknown}
+   * @param {Array.<unknown>} parameters
+   * @returns {boolean}
+   */
+  function assertion(...parameters) {
+    // @ts-expect-error: spreading is fine.
+    return Boolean(check.call(this, ...parameters))
+  }
+}
+
+// Utility to return true.
+function ok() {
+  return true
+}
+
+/**
+ * @typedef Options
+ *   Configuration (optional).
+ * @property {Test} [ignore]
+ *   `unist-util-is` test used to assert parents
+ *
+ * @typedef {import('mdast').Root} Root
+ * @typedef {import('mdast').Content} Content
+ * @typedef {import('mdast').PhrasingContent} PhrasingContent
+ * @typedef {import('mdast').Text} Text
+ * @typedef {Content|Root} Node
+ * @typedef {Exclude<Extract<Node, import('mdast').Parent>, Root>} Parent
+ *
+ * @typedef {import('unist-util-visit-parents').Test} Test
+ * @typedef {import('unist-util-visit-parents').VisitorResult} VisitorResult
+ *
+ * @typedef RegExpMatchObject
+ * @property {number} index
+ * @property {string} input
+ * @property {[Root, ...Array<Parent>, Text]} stack
+ *
+ * @typedef {string|RegExp} Find
+ * @typedef {string|ReplaceFunction} Replace
+ *
+ * @typedef {[Find, Replace]} FindAndReplaceTuple
+ * @typedef {Record<string, Replace>} FindAndReplaceSchema
+ * @typedef {Array<FindAndReplaceTuple>} FindAndReplaceList
+ *
+ * @typedef {[RegExp, ReplaceFunction]} Pair
+ * @typedef {Array<Pair>} Pairs
+ */
+
+const own = {}.hasOwnProperty;
+
+/**
+ * @param tree mdast tree
+ * @param find Value to find and remove. When `string`, escaped and made into a global `RegExp`
+ * @param [replace] Value to insert.
+ *   * When `string`, turned into a Text node.
+ *   * When `Function`, called with the results of calling `RegExp.exec` as
+ *     arguments, in which case it can return a single or a list of `Node`,
+ *     a `string` (which is wrapped in a `Text` node), or `false` to not replace
+ * @param [options] Configuration.
+ */
+const findAndReplace =
+  /**
+   * @type {(
+   *   ((tree: Node, find: Find, replace?: Replace, options?: Options) => Node) &
+   *   ((tree: Node, schema: FindAndReplaceSchema|FindAndReplaceList, options?: Options) => Node)
+   * )}
+   **/
+  (
+    /**
+     * @param {Node} tree
+     * @param {Find|FindAndReplaceSchema|FindAndReplaceList} find
+     * @param {Replace|Options} [replace]
+     * @param {Options} [options]
+     */
+    function (tree, find, replace, options) {
+      /** @type {Options|undefined} */
+      let settings;
+      /** @type {FindAndReplaceSchema|FindAndReplaceList} */
+      let schema;
+
+      if (typeof find === 'string' || find instanceof RegExp) {
+        // @ts-expect-error don’t expect options twice.
+        schema = [[find, replace]];
+        settings = options;
+      } else {
+        schema = find;
+        // @ts-expect-error don’t expect replace twice.
+        settings = replace;
+      }
+
+      if (!settings) {
+        settings = {};
+      }
+
+      const ignored = convert(settings.ignore || []);
+      const pairs = toPairs(schema);
+      let pairIndex = -1;
+
+      while (++pairIndex < pairs.length) {
+        visitParents(tree, 'text', visitor);
+      }
+
+      return tree
+
+      /** @type {import('unist-util-visit-parents/complex-types').BuildVisitor<Root, 'text'>} */
+      function visitor(node, parents) {
+        let index = -1;
+        /** @type {Parent|undefined} */
+        let grandparent;
+
+        while (++index < parents.length) {
+          const parent = /** @type {Parent} */ (parents[index]);
+
+          if (
+            ignored(
+              parent,
+              // @ts-expect-error mdast vs. unist parent.
+              grandparent ? grandparent.children.indexOf(parent) : undefined,
+              grandparent
+            )
+          ) {
+            return
+          }
+
+          grandparent = parent;
+        }
+
+        if (grandparent) {
+          // @ts-expect-error: stack is fine.
+          return handler(node, parents)
+        }
+      }
+
+      /**
+       * @param {Text} node
+       * @param {[Root, ...Array<Parent>]} parents
+       * @returns {VisitorResult}
+       */
+      function handler(node, parents) {
+        const parent = parents[parents.length - 1];
+        const find = pairs[pairIndex][0];
+        const replace = pairs[pairIndex][1];
+        let start = 0;
+        // @ts-expect-error: TS is wrong, some of these children can be text.
+        const index = parent.children.indexOf(node);
+        let change = false;
+        /** @type {Array<PhrasingContent>} */
+        let nodes = [];
+        /** @type {number|undefined} */
+        let position;
+
+        find.lastIndex = 0;
+
+        let match = find.exec(node.value);
+
+        while (match) {
+          position = match.index;
+          /** @type {RegExpMatchObject} */
+          const matchObject = {
+            index: match.index,
+            input: match.input,
+            stack: [...parents, node]
+          };
+          let value = replace(...match, matchObject);
+
+          if (typeof value === 'string') {
+            value = value.length > 0 ? {type: 'text', value} : undefined;
+          }
+
+          if (value !== false) {
+            if (start !== position) {
+              nodes.push({
+                type: 'text',
+                value: node.value.slice(start, position)
+              });
+            }
+
+            if (Array.isArray(value)) {
+              nodes.push(...value);
+            } else if (value) {
+              nodes.push(value);
+            }
+
+            start = position + match[0].length;
+            change = true;
+          }
+
+          if (!find.global) {
+            break
+          }
+
+          match = find.exec(node.value);
+        }
+
+        if (change) {
+          if (start < node.value.length) {
+            nodes.push({type: 'text', value: node.value.slice(start)});
+          }
+
+          parent.children.splice(index, 1, ...nodes);
+        } else {
+          nodes = [node];
+        }
+
+        return index + nodes.length
+      }
+    }
+  );
+
+/**
+ * @param {FindAndReplaceSchema|FindAndReplaceList} schema
+ * @returns {Pairs}
+ */
+function toPairs(schema) {
+  /** @type {Pairs} */
+  const result = [];
+
+  if (typeof schema !== 'object') {
+    throw new TypeError('Expected array or object as schema')
+  }
+
+  if (Array.isArray(schema)) {
+    let index = -1;
+
+    while (++index < schema.length) {
+      result.push([
+        toExpression(schema[index][0]),
+        toFunction(schema[index][1])
+      ]);
+    }
+  } else {
+    /** @type {string} */
+    let key;
+
+    for (key in schema) {
+      if (own.call(schema, key)) {
+        result.push([toExpression(key), toFunction(schema[key])]);
+      }
+    }
+  }
+
+  return result
+}
+
+/**
+ * @param {Find} find
+ * @returns {RegExp}
+ */
+function toExpression(find) {
+  return typeof find === 'string' ? new RegExp(escapeStringRegexp(find), 'g') : find
+}
+
+/**
+ * @param {Replace} replace
+ * @returns {ReplaceFunction}
+ */
+function toFunction(replace) {
+  return typeof replace === 'function' ? replace : () => replace
+}
+
 var isOnlyEmojis = function (text) {
     if (!text)
         return false;
@@ -1413,7 +2123,7 @@ var emojiMarkdownPlugin = function () {
         };
     }
     var transform = function (markdownAST) {
-        findAndReplace__default['default'](markdownAST, emojiRegex__default['default'](), replace);
+        findAndReplace(markdownAST, emojiRegex__default['default'](), replace);
         return markdownAST;
     };
     return transform;
@@ -1440,7 +2150,7 @@ var mentionsMarkdownPlugin = function (mentioned_users) { return function () {
             return markdownAST;
         }
         var mentionedUsersRegex = new RegExp(mentioned_usernames.map(function (username) { return "@" + username; }).join('|'), 'g');
-        findAndReplace__default['default'](markdownAST, mentionedUsersRegex, replace);
+        findAndReplace(markdownAST, mentionedUsersRegex, replace);
         return markdownAST;
     };
     return transform;
@@ -1471,6 +2181,22 @@ var renderText = function (text, mentioned_users, options) {
         if (noParsingNeeded.length > 0 || linkIsInBlock)
             return;
         try {
+            // special case for mentions:
+            // it could happen that a user's name matches with an e-mail format pattern.
+            // in that case, we check whether the found e-mail is actually a mention
+            // by naively checking for an existence of @ sign in front of it.
+            if (type === 'email' && mentioned_users) {
+                var emailMatchesWithName = mentioned_users.some(function (u) { return u.name === value; });
+                if (emailMatchesWithName) {
+                    newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), function (match, position) {
+                        var isMention = newText.charAt(position - 1) === '@';
+                        // in case of mention, we leave the match in its original form,
+                        // and we let `mentionsMarkdownPlugin` to do its job
+                        return isMention ? match : "[" + match + "](" + encodeDecode(href) + ")";
+                    });
+                    return;
+                }
+            }
             var displayLink = type === 'email' ? value : formatUrlForDisplay(href);
             newText = newText.replace(new RegExp(escapeRegExp(value), 'g'), "[" + displayLink + "](" + encodeDecode(href) + ")");
         }
@@ -2547,7 +3273,7 @@ var channelReducer = function (state, action) {
         }
         case 'loadMoreFinished': {
             var hasMore = action.hasMore, messages = action.messages;
-            return __assign(__assign({}, state), { hasMore: hasMore, loadingMore: false, messages: messages });
+            return __assign(__assign({}, state), { hasMore: hasMore, loadingMore: false, messages: messages, suppressAutoscroll: false });
         }
         case 'loadMoreNewerFinished': {
             var hasMoreNewer = action.hasMoreNewer, messages = action.messages;
@@ -2568,7 +3294,7 @@ var channelReducer = function (state, action) {
         case 'setLoadingMore': {
             var loadingMore = action.loadingMore;
             // suppress the autoscroll behavior
-            return __assign(__assign({}, state), { loadingMore: loadingMore, suppressAutoscroll: true });
+            return __assign(__assign({}, state), { loadingMore: loadingMore, suppressAutoscroll: loadingMore });
         }
         case 'setLoadingMoreNewer': {
             var loadingMoreNewer = action.loadingMoreNewer;
@@ -3180,15 +3906,24 @@ var getNonImageAttachments = function (message) {
     }
     return message.attachments.filter(function (item) { return item.type !== 'image'; });
 };
-var getReadByTooltipText = function (users, t, client) {
+/**
+ * Default Tooltip Username mapper implementation.
+ *
+ * @param user the user.
+ */
+var mapToUserNameOrId = function (user) { return user.name || user.id; };
+var getReadByTooltipText = function (users, t, client, tooltipUserNameMapper) {
     var outStr = '';
     if (!t) {
-        throw new Error('`getReadByTooltipText was called, but translation function is not available`');
+        throw new Error('getReadByTooltipText was called, but translation function is not available');
+    }
+    if (!tooltipUserNameMapper) {
+        throw new Error('getReadByTooltipText was called, but tooltipUserNameMapper function is not available');
     }
     // first filter out client user, so restLength won't count it
     var otherUsers = users
         .filter(function (item) { return item && (client === null || client === void 0 ? void 0 : client.user) && item.id !== client.user.id; })
-        .map(function (item) { return item.name || item.id; });
+        .map(tooltipUserNameMapper);
     var slicedArr = otherUsers.slice(0, 5);
     var restLength = otherUsers.length - slicedArr.length;
     if (slicedArr.length === 1) {
@@ -3207,7 +3942,7 @@ var getReadByTooltipText = function (users, t, client) {
         // example: "bob, joe, sam and 4 more"
         if (restLength === 0) {
             // mutate slicedArr to remove last user to display it separately
-            var lastUser = slicedArr.splice(slicedArr.length - 2, 1);
+            var lastUser = slicedArr.splice(slicedArr.length - 1, 1);
             outStr = t('{{ commaSeparatedUsers }}, and {{ lastUser }}', {
                 commaSeparatedUsers: slicedArr.join(', '),
                 lastUser: lastUser,
@@ -3460,10 +4195,10 @@ var Tooltip = function (props) {
 
 var UnMemoizedMessageStatus = function (props) {
     var _a;
-    var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b;
+    var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b, _c = props.tooltipUserNameMapper, tooltipUserNameMapper = _c === void 0 ? mapToUserNameOrId : _c;
     var client = useChatContext('MessageStatus').client;
     var contextAvatar = useComponentContext('MessageStatus').Avatar;
-    var _c = useMessageContext('MessageStatus'), isMyMessage = _c.isMyMessage, lastReceivedId = _c.lastReceivedId, message = _c.message, readBy = _c.readBy, threadList = _c.threadList;
+    var _d = useMessageContext('MessageStatus'), isMyMessage = _d.isMyMessage, lastReceivedId = _d.lastReceivedId, message = _d.message, readBy = _d.readBy, threadList = _d.threadList;
     var t = useTranslationContext('MessageStatus').t;
     var Avatar$1 = propAvatar || contextAvatar || Avatar;
     if (!isMyMessage() || message.type === 'error') {
@@ -3478,7 +4213,7 @@ var UnMemoizedMessageStatus = function (props) {
     if ((readBy === null || readBy === void 0 ? void 0 : readBy.length) && !threadList && !justReadByMe) {
         var lastReadUser = readBy.filter(function (item) { var _a; return item.id !== ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id); })[0];
         return (React__default['default'].createElement("span", { className: "str-chat__message-" + messageType + "-status", "data-testid": 'message-status-read-by' },
-            React__default['default'].createElement(Tooltip, null, getReadByTooltipText(readBy, t, client)),
+            React__default['default'].createElement(Tooltip, null, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
             React__default['default'].createElement(Avatar$1, { image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, size: 15, user: lastReadUser }),
             readBy.length > 2 && (React__default['default'].createElement("span", { className: "str-chat__message-" + messageType + "-status-number", "data-testid": 'message-status-read-by-many' }, readBy.length - 1))));
     }
@@ -5328,7 +6063,7 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, editMessage(__assign(__assign({}, message), updatedMessage))];
+                    return [4 /*yield*/, editMessage(__assign(__assign(__assign({}, message), updatedMessage), customMessageData))];
                 case 2:
                     _a.sent();
                     clearEditingState === null || clearEditingState === void 0 ? void 0 : clearEditingState();
@@ -7682,7 +8417,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default['default'].memo(UnMemoizedChannelList);
 
-var version = '9.2.0';
+var version = '9.4.1';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -9638,6 +10373,7 @@ exports.itTranslations = itTranslations;
 exports.jaTranslations = jaTranslations;
 exports.koTranslations = koTranslations;
 exports.makeDateMessageId = makeDateMessageId;
+exports.mapToUserNameOrId = mapToUserNameOrId;
 exports.markDownRenderers = markDownRenderers;
 exports.matchMarkdownLinks = matchMarkdownLinks;
 exports.mentionsMarkdownPlugin = mentionsMarkdownPlugin;