stream-chat-react 10.6.0 → 10.7.1

package/dist/browser.full-bundle.js

@@ -162,46 +162,6 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     	return a;
     }
 
-    var dist$1 = {};
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};Object.defineProperty(dist$1, "__esModule", { value: true });
-    var sanitizeUrl_1 = dist$1.sanitizeUrl = void 0;
-    var invalidProtocolRegex = /^([^\w]*)(javascript|data|vbscript)/im;
-    var htmlEntitiesRegex = /&#(\w+)(^\w|;)?/g;
-    var ctrlCharactersRegex = /[\u0000-\u001F\u007F-\u009F\u2000-\u200D\uFEFF]/gim;
-    var urlSchemeRegex = /^([^:]+):/gm;
-    var relativeFirstCharacters = [".", "/"];
-    function isRelativeUrlWithoutProtocol(url) {
-        return relativeFirstCharacters.indexOf(url[0]) > -1;
-    }
-    // adapted from https://stackoverflow.com/a/29824550/2601552
-    function decodeHtmlCharacters(str) {
-        return str.replace(htmlEntitiesRegex, function (match, dec) {
-            return String.fromCharCode(dec);
-        });
-    }
-    function sanitizeUrl(url) {
-        var sanitizedUrl = decodeHtmlCharacters(url || "")
-            .replace(ctrlCharactersRegex, "")
-            .trim();
-        if (!sanitizedUrl) {
-            return "about:blank";
-        }
-        if (isRelativeUrlWithoutProtocol(sanitizedUrl)) {
-            return sanitizedUrl;
-        }
-        var urlSchemeParseResults = sanitizedUrl.match(urlSchemeRegex);
-        if (!urlSchemeParseResults) {
-            return sanitizedUrl;
-        }
-        var urlScheme = urlSchemeParseResults[0];
-        if (invalidProtocolRegex.test(urlScheme)) {
-            return "about:blank";
-        }
-        return sanitizedUrl;
-    }
-    sanitizeUrl_1 = dist$1.sanitizeUrl = sanitizeUrl;
-
     var lib$1 = {};
 
     var players = {};
@@ -5810,11 +5770,53 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         return (React__default["default"].createElement("span", { className: 'str-chat__message-attachment-file--item-size' }, prettyBytes(fileSize)));
     };
 
+    var dist$2 = {};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};Object.defineProperty(dist$2, "__esModule", { value: true });
+    var sanitizeUrl_1$1 = dist$2.sanitizeUrl = void 0;
+    var invalidProtocolRegex$1 = /^([^\w]*)(javascript|data|vbscript)/im;
+    var htmlEntitiesRegex$1 = /&#(\w+)(^\w|;)?/g;
+    var htmlCtrlEntityRegex = /&(newline|tab);/gi;
+    var ctrlCharactersRegex$1 = /[\u0000-\u001F\u007F-\u009F\u2000-\u200D\uFEFF]/gim;
+    var urlSchemeRegex$1 = /^.+(:|:)/gim;
+    var relativeFirstCharacters$1 = [".", "/"];
+    function isRelativeUrlWithoutProtocol$1(url) {
+        return relativeFirstCharacters$1.indexOf(url[0]) > -1;
+    }
+    // adapted from https://stackoverflow.com/a/29824550/2601552
+    function decodeHtmlCharacters$1(str) {
+        return str.replace(htmlEntitiesRegex$1, function (match, dec) {
+            return String.fromCharCode(dec);
+        });
+    }
+    function sanitizeUrl$1(url) {
+        var sanitizedUrl = decodeHtmlCharacters$1(url || "")
+            .replace(htmlCtrlEntityRegex, "")
+            .replace(ctrlCharactersRegex$1, "")
+            .trim();
+        if (!sanitizedUrl) {
+            return "about:blank";
+        }
+        if (isRelativeUrlWithoutProtocol$1(sanitizedUrl)) {
+            return sanitizedUrl;
+        }
+        var urlSchemeParseResults = sanitizedUrl.match(urlSchemeRegex$1);
+        if (!urlSchemeParseResults) {
+            return sanitizedUrl;
+        }
+        var urlScheme = urlSchemeParseResults[0];
+        if (invalidProtocolRegex$1.test(urlScheme)) {
+            return "about:blank";
+        }
+        return sanitizedUrl;
+    }
+    sanitizeUrl_1$1 = dist$2.sanitizeUrl = sanitizeUrl$1;
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedSafeAnchor = function (props) {
         var children = props.children, className = props.className, download = props.download, href = props.href, rel = props.rel, target = props.target;
         if (!href)
             return null;
-        var sanitized = sanitizeUrl_1(href);
+        var sanitized = sanitizeUrl_1$1(href);
         return (React__default["default"].createElement("a", { "aria-label": 'Attachment', className: className, download: download, href: sanitized, rel: rel, target: target }, children));
     };
     var SafeAnchor = React__default["default"].memo(UnMemoizedSafeAnchor);
@@ -7101,16 +7103,31 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
       }
     }
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _toPrimitive(input, hint) {
+      if (_typeof$1(input) !== "object" || input === null) return input;
+      var prim = input[Symbol.toPrimitive];
+      if (prim !== undefined) {
+        var res = prim.call(input, hint || "default");
+        if (_typeof$1(res) !== "object") return res;
+        throw new TypeError("@@toPrimitive must return a primitive value.");
+      }
+      return (hint === "string" ? String : Number)(input);
+    }
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _toPropertyKey(arg) {
+      var key = _toPrimitive(arg, "string");
+      return _typeof$1(key) === "symbol" ? key : String(key);
+    }
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _defineProperties(target, props) {
       for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
+        Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
       }
     }
-
     function _createClass(Constructor, protoProps, staticProps) {
       if (protoProps) _defineProperties(Constructor.prototype, protoProps);
       if (staticProps) _defineProperties(Constructor, staticProps);
@@ -7124,16 +7141,14 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
       if (self === void 0) {
         throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
       }
-
       return self;
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _setPrototypeOf(o, p) {
-      _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
       };
-
       return _setPrototypeOf(o, p);
     }
 
@@ -7141,7 +7156,6 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
       if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
       }
-
       subClass.prototype = Object.create(superClass && superClass.prototype, {
         constructor: {
           value: subClass,
@@ -7161,18 +7175,18 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
       } else if (call !== void 0) {
         throw new TypeError("Derived constructors may only return object or undefined");
       }
-
       return _assertThisInitialized(self);
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _getPrototypeOf(o) {
-      _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
         return o.__proto__ || Object.getPrototypeOf(o);
       };
       return _getPrototypeOf(o);
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _defineProperty$4(obj, key, value) {
+      key = _toPropertyKey(key);
       if (key in obj) {
         Object.defineProperty(obj, key, {
           value: value,
@@ -7183,7 +7197,6 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
       } else {
         obj[key] = value;
       }
-
       return obj;
     }
 
@@ -7197,11 +7210,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function _arrayLikeToArray$5(arr, len) {
       if (len == null || len > arr.length) len = arr.length;
-
-      for (var i = 0, arr2 = new Array(len); i < len; i++) {
-        arr2[i] = arr[i];
-      }
-
+      for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
       return arr2;
     }
 
@@ -10834,7 +10843,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                 React__default["default"].createElement("p", null, t('{{ imageCount }} more', {
                     imageCount: images.length - countImagesDisplayedInPreview,
                 })))) : (React__default["default"].createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); } },
-                React__default["default"].createElement("img", __assign$8({ alt: 'User uploaded content', src: image.previewUrl || image.image_url || image.thumb_url, style: image.style }, ((innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs.current) && { ref: function (r) { return (innerRefs.current[i] = r); } })))));
+                React__default["default"].createElement("img", __assign$8({ alt: 'User uploaded content', src: sanitizeUrl_1$1(image.previewUrl || image.image_url || image.thumb_url), style: image.style }, ((innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs.current) && { ref: function (r) { return (innerRefs.current[i] = r); } })))));
         });
         var className = clsx('str-chat__gallery', {
             'str-chat__gallery--square': images.length > lastImageIndexInPreview,
@@ -10857,7 +10866,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         var _a = props.dimensions, dimensions = _a === void 0 ? {} : _a, fallback = props.fallback, image_url = props.image_url, thumb_url = props.thumb_url, innerRef = props.innerRef, previewUrl = props.previewUrl, style = props.style;
         var _b = React$2.useState(false), modalIsOpen = _b[0], setModalIsOpen = _b[1];
         var _c = useComponentContext('ImageComponent').ModalGallery, ModalGallery$1 = _c === void 0 ? ModalGallery : _c;
-        var imageSrc = sanitizeUrl_1(previewUrl || image_url || thumb_url);
+        var imageSrc = sanitizeUrl_1$1(previewUrl || image_url || thumb_url);
         var toggleModal = function () { return setModalIsOpen(function (modalIsOpen) { return !modalIsOpen; }); };
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement("img", __assign$8({ alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, style: style, tabIndex: 0 }, dimensions, (innerRef && { ref: innerRef }))),
@@ -15290,6 +15299,18 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
       return tokens.length === 1 && tokens[0].isLink && (!type || tokens[0].t === type);
     }
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnsupportedAttachment = function (_a) {
+        var _b;
+        var attachment = _a.attachment;
+        return (React__default["default"].createElement("div", null,
+            React__default["default"].createElement("div", null,
+                "Unsupported attachment type ",
+                React__default["default"].createElement("strong", null, (_b = attachment.type) !== null && _b !== void 0 ? _b : 'unknown')),
+            React__default["default"].createElement("code", null, JSON.stringify(attachment, null, 4)),
+            ";"));
+    };
+    var NullComponent = function () { return null; };
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var AttachmentWithinContainer = function (_a) {
         var _b;
         var _c;
@@ -15427,12 +15448,18 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                 content,
                 React__default["default"].createElement(AttachmentActionsContainer, __assign$8({}, props))))) : (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType }, content));
     };
+    var UnsupportedAttachmentContainer = function (_a) {
+        var attachment = _a.attachment, _b = _a.UnsupportedAttachment, UnsupportedAttachment = _b === void 0 ? NullComponent : _b;
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(UnsupportedAttachment, { attachment: attachment })));
+    };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CONTAINER_MAP = {
         audio: AudioContainer,
         card: CardContainer,
         file: FileContainer,
         media: MediaContainer,
+        unsupported: UnsupportedAttachmentContainer,
     };
     var ATTACHMENT_GROUPS_ORDER = [
         'card',
@@ -15441,6 +15468,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         'media',
         'audio',
         'file',
+        'unsupported',
     ];
     /**
      * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
@@ -15452,26 +15480,27 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     };
     var renderGroupedAttachments = function (_a) {
         var attachments = _a.attachments, rest = __rest$4(_a, ["attachments"]);
-        var uploadedImages = [];
-        var containers = attachments.reduce(function (acc, attachment) {
-            if (isUploadedImage(attachment)) {
-                uploadedImages.push(__assign$8(__assign$8({}, attachment), { image_url: sanitizeUrl_1(attachment.image_url), thumb_url: sanitizeUrl_1(attachment.thumb_url) }));
-            }
-            else {
-                var attachmentType = getAttachmentType(attachment);
-                if (attachmentType) {
-                    var Container = CONTAINER_MAP[attachmentType];
-                    acc[attachmentType].push(React__default["default"].createElement(Container, __assign$8({ key: "".concat(attachmentType, "-").concat(acc[attachmentType].length) }, rest, { attachment: attachment })));
-                }
-            }
-            return acc;
+        var uploadedImages = attachments.filter(function (attachment) {
+            return isUploadedImage(attachment);
+        });
+        var containers = attachments
+            .filter(function (attachment) { return !isUploadedImage(attachment); })
+            .reduce(function (typeMap, attachment) {
+            var attachmentType = getAttachmentType(attachment);
+            var Container = CONTAINER_MAP[attachmentType];
+            typeMap[attachmentType].push(React__default["default"].createElement(Container, __assign$8({ key: "".concat(attachmentType, "-").concat(typeMap[attachmentType].length) }, rest, { attachment: attachment })));
+            return typeMap;
         }, {
             audio: [],
             card: [],
             file: [],
-            gallery: [],
-            image: [],
             media: [],
+            unsupported: [],
+            // not used in reduce
+            // eslint-disable-next-line sort-keys
+            image: [],
+            // eslint-disable-next-line sort-keys
+            gallery: [],
         });
         if (uploadedImages.length > 1) {
             containers['gallery'] = [
@@ -15501,23 +15530,21 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         else if (isFileAttachment(attachment)) {
             return 'file';
         }
-        return null;
+        return 'unsupported';
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var Item$1 = /*#__PURE__*/React__default["default"].forwardRef(function Item(props, innerRef) {
       var className = props.className,
-          Component = props.component,
-          item = props.item,
-          onClickHandler = props.onClickHandler,
-          onSelectHandler = props.onSelectHandler,
-          selected = props.selected,
-          style = props.style;
-
+        Component = props.component,
+        item = props.item,
+        onClickHandler = props.onClickHandler,
+        onSelectHandler = props.onSelectHandler,
+        selected = props.selected,
+        style = props.style;
       var _useChatContext = useChatContext('SuggestionItem'),
-          themeVersion = _useChatContext.themeVersion;
-
+        themeVersion = _useChatContext.themeVersion;
       var selectItem = React$2.useCallback(function () {
         return onSelectHandler(item);
       }, [item, onClickHandler]);
@@ -17723,12 +17750,12 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function isPlainObject(value) {
-    	if (Object.prototype.toString.call(value) !== '[object Object]') {
+    	if (typeof value !== 'object' || value === null) {
     		return false;
     	}
 
     	const prototype = Object.getPrototypeOf(value);
-    	return prototype === null || prototype === Object.prototype;
+    	return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in value) && !(Symbol.iterator in value);
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
@@ -37135,75 +37162,60 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         return null;
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    function ownKeys$3(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; }
-
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function ownKeys$3(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; }
     function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { definePropertyExports(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
     var List$1 = function List(_ref) {
       var className = _ref.className,
-          component = _ref.component,
-          currentTrigger = _ref.currentTrigger,
-          dropdownScroll = _ref.dropdownScroll,
-          getSelectedItem = _ref.getSelectedItem,
-          getTextToReplace = _ref.getTextToReplace,
-          PropHeader = _ref.Header,
-          itemClassName = _ref.itemClassName,
-          itemStyle = _ref.itemStyle,
-          onSelect = _ref.onSelect,
-          selectionEnd = _ref.selectionEnd,
-          style = _ref.style,
-          PropSuggestionItem = _ref.SuggestionItem,
-          propValue = _ref.value,
-          values = _ref.values;
-
+        component = _ref.component,
+        currentTrigger = _ref.currentTrigger,
+        dropdownScroll = _ref.dropdownScroll,
+        getSelectedItem = _ref.getSelectedItem,
+        getTextToReplace = _ref.getTextToReplace,
+        PropHeader = _ref.Header,
+        itemClassName = _ref.itemClassName,
+        itemStyle = _ref.itemStyle,
+        onSelect = _ref.onSelect,
+        selectionEnd = _ref.selectionEnd,
+        style = _ref.style,
+        PropSuggestionItem = _ref.SuggestionItem,
+        propValue = _ref.value,
+        values = _ref.values;
       var _useComponentContext = useComponentContext('SuggestionList'),
-          AutocompleteSuggestionHeader = _useComponentContext.AutocompleteSuggestionHeader,
-          AutocompleteSuggestionItem = _useComponentContext.AutocompleteSuggestionItem;
-
+        AutocompleteSuggestionHeader = _useComponentContext.AutocompleteSuggestionHeader,
+        AutocompleteSuggestionItem = _useComponentContext.AutocompleteSuggestionItem;
       var _useChatContext = useChatContext('SuggestionList'),
-          themeVersion = _useChatContext.themeVersion;
-
+        themeVersion = _useChatContext.themeVersion;
       var SuggestionItem = PropSuggestionItem || AutocompleteSuggestionItem || Item$1;
       var SuggestionHeader = PropHeader || AutocompleteSuggestionHeader || DefaultSuggestionListHeader;
-
       var _useState = React$2.useState(undefined),
-          _useState2 = _slicedToArray$2(_useState, 2),
-          selectedItem = _useState2[0],
-          setSelectedItem = _useState2[1];
-
+        _useState2 = _slicedToArray$2(_useState, 2),
+        selectedItem = _useState2[0],
+        setSelectedItem = _useState2[1];
       var itemsRef = [];
-
       var isSelected = function isSelected(item) {
         return selectedItem === values.findIndex(function (value) {
           return getId(value) === getId(item);
         });
       };
-
       var getId = function getId(item) {
         var textToReplace = getTextToReplace(item);
-
         if (textToReplace.key) {
           return textToReplace.key;
         }
-
         if (typeof item === 'string' || !item.key) {
           return textToReplace.text;
         }
-
         return item.key;
       };
-
       var modifyText = function modifyText(value) {
         if (!value) return;
         onSelect(getTextToReplace(value));
         if (getSelectedItem) getSelectedItem(value);
       };
-
       var handleClick = function handleClick(e) {
         e === null || e === void 0 ? void 0 : e.preventDefault();
         modifyText(values[selectedItem]);
       };
-
       var selectItem = React$2.useCallback(function (item) {
         var index = values.findIndex(function (value) {
           return value.id ? value.id === item.id : value.name === item.name;
@@ -37219,7 +37231,6 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             return newID;
           });
         }
-
         if (event.key === 'ArrowDown') {
           setSelectedItem(function (prevSelected) {
             if (prevSelected === undefined) return 0;
@@ -37228,14 +37239,13 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             return newID;
           });
         }
-
         if ((event.key === 'Enter' || event.key === 'Tab') && selectedItem !== undefined) {
           handleClick(event);
         }
-
         return null;
       }, [selectedItem, values] // eslint-disable-line
       );
+
       React$2.useEffect(function () {
         document.addEventListener('keydown', handleKeyDown, false);
         return function () {
@@ -37914,12 +37924,11 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
       var containerHight = parseInt(getComputedStyle(container).getPropertyValue('height'), 10) - itemHeight;
       var actualScrollTop = container.scrollTop;
       var itemOffsetTop = item.offsetTop;
-
       if (itemOffsetTop < actualScrollTop + containerHight && actualScrollTop < itemOffsetTop) {
         return;
-      } // eslint-disable-next-line
-
+      }
 
+      // eslint-disable-next-line
       container.scrollTop = itemOffsetTop;
     }
     var errorMessage = function errorMessage(message) {
@@ -37929,40 +37938,33 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
       var trigger = _ref.trigger;
       if (!trigger) return Error('Invalid prop trigger. Prop missing.');
       var triggers = Object.entries(trigger);
-
       for (var i = 0; i < triggers.length; i += 1) {
         var _triggers$i = _slicedToArray$2(triggers[i], 2),
-            triggerChar = _triggers$i[0],
-            settings = _triggers$i[1];
-
+          triggerChar = _triggers$i[0],
+          settings = _triggers$i[1];
         if (typeof triggerChar !== 'string' || triggerChar.length !== 1) {
           return Error('Invalid prop trigger. Keys of the object has to be string / one character.');
-        } // $FlowFixMe
-
+        }
 
+        // $FlowFixMe
         var triggerSetting = settings;
         var callback = triggerSetting.callback,
-            component = triggerSetting.component,
-            dataProvider = triggerSetting.dataProvider,
-            output = triggerSetting.output;
-
+          component = triggerSetting.component,
+          dataProvider = triggerSetting.dataProvider,
+          output = triggerSetting.output;
         if (!reactIs$1.exports.isValidElementType(component)) {
           return Error('Invalid prop trigger: component should be defined.');
         }
-
         if (!dataProvider || typeof dataProvider !== 'function') {
           return Error('Invalid prop trigger: dataProvider should be defined.');
         }
-
         if (output && typeof output !== 'function') {
           return Error('Invalid prop trigger: output should be a function.');
         }
-
         if (callback && typeof callback !== 'function') {
           return Error('Invalid prop trigger: callback should be a function.');
         }
       }
-
       return null;
     };
 
@@ -38033,26 +38035,17 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     };
     var UserItem = React__default["default"].memo(UnMemoizedUserItem);
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    function ownKeys$2(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; }
-
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function ownKeys$2(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; }
     function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { definePropertyExports(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
     function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOfExports(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOfExports(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturnExports(this, result); }; }
-
     function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
     var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
       inheritsExports(ReactTextareaAutocomplete, _React$Component);
-
       var _super = _createSuper(ReactTextareaAutocomplete);
-
       function ReactTextareaAutocomplete(_props) {
         var _this;
-
         classCallCheckExports(this, ReactTextareaAutocomplete);
-
         _this = _super.call(this, _props);
-
         definePropertyExports(assertThisInitializedExports(_this), "getSelectionPosition", function () {
           if (!_this.textareaRef) return null;
           return {
@@ -38060,72 +38053,58 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             selectionStart: _this.textareaRef.selectionStart
           };
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "getSelectedText", function () {
           if (!_this.textareaRef) return null;
           var _this$textareaRef = _this.textareaRef,
-              selectionEnd = _this$textareaRef.selectionEnd,
-              selectionStart = _this$textareaRef.selectionStart;
+            selectionEnd = _this$textareaRef.selectionEnd,
+            selectionStart = _this$textareaRef.selectionStart;
           if (selectionStart === selectionEnd) return null;
           return _this.state.value.substr(selectionStart, selectionEnd - selectionStart);
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "setCaretPosition", function () {
           var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
           if (!_this.textareaRef) return;
-
           _this.textareaRef.focus();
-
           _this.textareaRef.setSelectionRange(position, position);
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "getCaretPosition", function () {
           if (!_this.textareaRef) return 0;
           return _this.textareaRef.selectionEnd;
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_defaultShouldSubmit", function (event) {
           return event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_handleKeyDown", function (event) {
           var _this$props$shouldSub = _this.props.shouldSubmit,
-              shouldSubmit = _this$props$shouldSub === void 0 ? _this._defaultShouldSubmit : _this$props$shouldSub; // prevent default behaviour when the selection list is rendered
+            shouldSubmit = _this$props$shouldSub === void 0 ? _this._defaultShouldSubmit : _this$props$shouldSub;
 
+          // prevent default behaviour when the selection list is rendered
           if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && _this.dropdownRef) event.preventDefault();
           if (shouldSubmit !== null && shouldSubmit !== void 0 && shouldSubmit(event)) return _this._onEnter(event);
           if (event.key === ' ') return _this._onSpace(event);
           if (event.key === 'Escape') return _this._closeAutocomplete();
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_onEnter", function (event) {
           if (!_this.textareaRef) return;
           var trigger = _this.state.currentTrigger;
-
           if (!trigger || !_this.state.data) {
             // trigger a submit
             _this._replaceWord();
-
             if (_this.textareaRef) {
               _this.textareaRef.selectionEnd = 0;
             }
-
             _this.props.handleSubmit(event);
-
             _this._closeAutocomplete();
           }
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_onSpace", function () {
-          if (!_this.props.replaceWord || !_this.textareaRef) return; // don't change characters if the element doesn't have focus
+          if (!_this.props.replaceWord || !_this.textareaRef) return;
 
+          // don't change characters if the element doesn't have focus
           var hasFocus = _this.textareaRef.matches(':focus');
-
           if (!hasFocus) return;
-
           _this._replaceWord();
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_replaceWord", function () {
           var value = _this.state.value;
           var lastWordRegex = /([^\s]+)(\s*)$/;
@@ -38133,14 +38112,11 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
           var lastWord = match && match[1];
           if (!lastWord) return;
           var spaces = match[2];
-
           var newWord = _this.props.replaceWord(lastWord);
-
           if (newWord == null) return;
           var textBeforeWord = value.slice(0, _this.getCaretPosition() - match[0].length);
           var textAfterCaret = value.slice(_this.getCaretPosition(), -1);
           var newText = textBeforeWord + newWord + spaces + textAfterCaret;
-
           _this.setState({
             value: newText
           }, function () {
@@ -38148,53 +38124,47 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             var e = new CustomEvent('change', {
               bubbles: true
             });
-
             _this.textareaRef.dispatchEvent(e);
-
             if (_this.props.onChange) _this.props.onChange(e);
           });
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_onSelect", function (newToken) {
           var _this$props = _this.props,
-              closeCommandsList = _this$props.closeCommandsList,
-              closeMentionsList = _this$props.closeMentionsList,
-              onChange = _this$props.onChange,
-              showCommandsList = _this$props.showCommandsList,
-              showMentionsList = _this$props.showMentionsList;
+            closeCommandsList = _this$props.closeCommandsList,
+            closeMentionsList = _this$props.closeMentionsList,
+            onChange = _this$props.onChange,
+            showCommandsList = _this$props.showCommandsList,
+            showMentionsList = _this$props.showMentionsList;
           var _this$state = _this.state,
-              stateTrigger = _this$state.currentTrigger,
-              selectionEnd = _this$state.selectionEnd,
-              textareaValue = _this$state.value;
+            stateTrigger = _this$state.currentTrigger,
+            selectionEnd = _this$state.selectionEnd,
+            textareaValue = _this$state.value;
           var currentTrigger = showCommandsList ? '/' : showMentionsList ? '@' : stateTrigger;
           if (!currentTrigger) return;
-
           var computeCaretPosition = function computeCaretPosition(position, token, startToken) {
             switch (position) {
               case 'start':
                 return startToken;
-
               case 'next':
               case 'end':
                 return startToken + token.length;
-
               default:
                 if (!Number.isInteger(position)) {
                   throw new Error('RTA: caretPosition should be "start", "next", "end" or number.');
                 }
-
                 return position;
             }
           };
-
           var textToModify = showCommandsList ? '/' : showMentionsList ? '@' : textareaValue.slice(0, selectionEnd);
-          var startOfTokenPosition = textToModify.lastIndexOf(currentTrigger); // we add space after emoji is selected if a caret position is next
+          var startOfTokenPosition = textToModify.lastIndexOf(currentTrigger);
 
+          // we add space after emoji is selected if a caret position is next
           var newTokenString = newToken.caretPosition === 'next' ? "".concat(newToken.text, " ") : newToken.text;
           var newCaretPosition = computeCaretPosition(newToken.caretPosition, newTokenString, startOfTokenPosition);
           var modifiedText = textToModify.substring(0, startOfTokenPosition) + newTokenString;
-          var valueToReplace = textareaValue.replace(textToModify, modifiedText); // set the new textarea value and after that set the caret back to its position
+          var valueToReplace = textareaValue.replace(textToModify, modifiedText);
 
+          // set the new textarea value and after that set the caret back to its position
           _this.setState({
             dataLoading: false,
             value: valueToReplace
@@ -38203,25 +38173,17 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             var e = new CustomEvent('change', {
               bubbles: true
             });
-
             _this.textareaRef.dispatchEvent(e);
-
             if (onChange) onChange(e);
-
             _this.setCaretPosition(newCaretPosition);
           });
-
           _this._closeAutocomplete();
-
           if (showCommandsList) closeCommandsList();
           if (showMentionsList) closeMentionsList();
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_getItemOnSelect", function (paramTrigger) {
           var stateTrigger = _this.state.currentTrigger;
-
           var triggerSettings = _this._getCurrentTriggerSettings(paramTrigger);
-
           var currentTrigger = paramTrigger || stateTrigger;
           if (!currentTrigger || !triggerSettings) return null;
           var callback = triggerSettings.callback;
@@ -38230,22 +38192,17 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             if (typeof callback !== 'function') {
               throw new Error('Output functor is not defined! You have to define "output" function. https://github.com/webscopeio/react-textarea-autocomplete#trigger-type');
             }
-
             if (callback) {
               return callback(item, currentTrigger);
             }
-
             return null;
           };
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_getTextToReplace", function (paramTrigger) {
           var _this$state2 = _this.state,
-              actualToken = _this$state2.actualToken,
-              stateTrigger = _this$state2.currentTrigger;
-
+            actualToken = _this$state2.actualToken,
+            stateTrigger = _this$state2.currentTrigger;
           var triggerSettings = _this._getCurrentTriggerSettings(paramTrigger);
-
           var currentTrigger = paramTrigger || stateTrigger;
           if (!currentTrigger || !triggerSettings) return null;
           var output = triggerSettings.output;
@@ -38253,91 +38210,74 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             if (_typeof$2(item) === 'object' && (!output || typeof output !== 'function')) {
               throw new Error('Output functor is not defined! If you are using items as object you have to define "output" function. https://github.com/webscopeio/react-textarea-autocomplete#trigger-type');
             }
-
             if (output) {
               var textToReplace = output(item, currentTrigger);
-
               if (!textToReplace || typeof textToReplace === 'number') {
                 throw new Error("Output functor should return string or object in shape {text: string, caretPosition: string | number}.\nGot \"".concat(String(textToReplace), "\". Check the implementation for trigger \"").concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n\nSee https://github.com/webscopeio/react-textarea-autocomplete#trigger-type for more informations.\n"));
               }
-
               if (typeof textToReplace === 'string') {
                 return {
                   caretPosition: DEFAULT_CARET_POSITION,
                   text: textToReplace
                 };
               }
-
               if (!textToReplace.text && currentTrigger !== ':') {
                 throw new Error("Output \"text\" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger \"".concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n"));
               }
-
               if (!textToReplace.caretPosition) {
                 throw new Error("Output \"caretPosition\" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger \"".concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n"));
               }
-
               return textToReplace;
             }
-
             if (typeof item !== 'string') {
               throw new Error('Output item should be string\n');
             }
-
             return {
               caretPosition: DEFAULT_CARET_POSITION,
               text: "".concat(currentTrigger).concat(item).concat(currentTrigger)
             };
           };
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_getCurrentTriggerSettings", function (paramTrigger) {
           var stateTrigger = _this.state.currentTrigger;
           var currentTrigger = paramTrigger || stateTrigger;
           if (!currentTrigger) return null;
           return _this.props.trigger[currentTrigger];
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_getValuesFromProvider", function () {
           var _this$state3 = _this.state,
-              actualToken = _this$state3.actualToken,
-              currentTrigger = _this$state3.currentTrigger;
-
+            actualToken = _this$state3.actualToken,
+            currentTrigger = _this$state3.currentTrigger;
           var triggerSettings = _this._getCurrentTriggerSettings();
-
           if (!currentTrigger || !triggerSettings) return;
           var component = triggerSettings.component,
-              dataProvider = triggerSettings.dataProvider;
-
+            dataProvider = triggerSettings.dataProvider;
           if (typeof dataProvider !== 'function') {
             throw new Error('Trigger provider has to be a function!');
           }
-
           _this.setState({
             dataLoading: true
-          }); // Modified: send the full text to support / style commands
-
+          });
 
+          // Modified: send the full text to support / style commands
           dataProvider(actualToken, _this.state.value, function (data, token) {
             // Make sure that the result is still relevant for current query
             if (token !== _this.state.actualToken) return;
-
             if (!Array.isArray(data)) {
               throw new Error('Trigger provider has to provide an array!');
             }
-
             if (!reactIs$1.exports.isValidElementType(component)) {
               throw new Error('Component should be defined!');
-            } // throw away if we resolved old trigger
-
+            }
 
-            if (currentTrigger !== _this.state.currentTrigger) return; // if we haven't resolved any data let's close the autocomplete
+            // throw away if we resolved old trigger
+            if (currentTrigger !== _this.state.currentTrigger) return;
 
+            // if we haven't resolved any data let's close the autocomplete
             if (!data.length) {
               _this._closeAutocomplete();
-
               return;
             }
-
             _this.setState({
               component: component,
               data: data,
@@ -38345,16 +38285,14 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             });
           });
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_getSuggestions", function (paramTrigger) {
           var _this$state4 = _this.state,
-              stateTrigger = _this$state4.currentTrigger,
-              data = _this$state4.data;
+            stateTrigger = _this$state4.currentTrigger,
+            data = _this$state4.data;
           var currentTrigger = paramTrigger || stateTrigger;
           if (!currentTrigger || !data || data && !data.length) return null;
           return data;
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_closeAutocomplete", function () {
           _this.setState({
             currentTrigger: null,
@@ -38364,54 +38302,45 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             top: null
           });
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_cleanUpProps", function () {
           var props = _objectSpread$2({}, _this.props);
+          var notSafe = ['additionalTextareaProps', 'className', 'closeCommandsList', 'closeMentionsList', 'closeOnClickOutside', 'containerClassName', 'containerStyle', 'disableMentions', 'dropdownClassName', 'dropdownStyle', 'grow', 'handleSubmit', 'innerRef', 'itemClassName', 'itemStyle', 'listClassName', 'listStyle', 'loaderClassName', 'loaderStyle', 'loadingComponent', 'minChar', 'movePopupAsYouType', 'onCaretPositionChange', 'onChange', 'ref', 'replaceWord', 'scrollToItem', 'shouldSubmit', 'showCommandsList', 'showMentionsList', 'SuggestionItem', 'SuggestionList', 'trigger', 'value'];
 
-          var notSafe = ['additionalTextareaProps', 'className', 'closeCommandsList', 'closeMentionsList', 'closeOnClickOutside', 'containerClassName', 'containerStyle', 'disableMentions', 'dropdownClassName', 'dropdownStyle', 'grow', 'handleSubmit', 'innerRef', 'itemClassName', 'itemStyle', 'listClassName', 'listStyle', 'loaderClassName', 'loaderStyle', 'loadingComponent', 'minChar', 'movePopupAsYouType', 'onCaretPositionChange', 'onChange', 'ref', 'replaceWord', 'scrollToItem', 'shouldSubmit', 'showCommandsList', 'showMentionsList', 'SuggestionItem', 'SuggestionList', 'trigger', 'value']; // eslint-disable-next-line
-
+          // eslint-disable-next-line
           for (var prop in props) {
             if (notSafe.includes(prop)) delete props[prop];
           }
-
           return props;
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_isCommand", function (text) {
           if (text[0] !== '/') return false;
           var tokens = text.split(' ');
           return tokens.length <= 1;
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_changeHandler", function (e) {
           var _this$props2 = _this.props,
-              minChar = _this$props2.minChar,
-              movePopupAsYouType = _this$props2.movePopupAsYouType,
-              onCaretPositionChange = _this$props2.onCaretPositionChange,
-              onChange = _this$props2.onChange,
-              trigger = _this$props2.trigger;
+            minChar = _this$props2.minChar,
+            movePopupAsYouType = _this$props2.movePopupAsYouType,
+            onCaretPositionChange = _this$props2.onCaretPositionChange,
+            onChange = _this$props2.onChange,
+            trigger = _this$props2.trigger;
           var _this$state5 = _this.state,
-              left = _this$state5.left,
-              top = _this$state5.top;
+            left = _this$state5.left,
+            top = _this$state5.top;
           var textarea = e.target;
           var selectionEnd = textarea.selectionEnd,
-              selectionStart = textarea.selectionStart,
-              value = textarea.value;
-
+            selectionStart = textarea.selectionStart,
+            value = textarea.value;
           if (onChange) {
             e.persist();
             onChange(e);
           }
-
           if (onCaretPositionChange) onCaretPositionChange(_this.getCaretPosition());
-
           _this.setState({
             value: value
           });
-
           var currentTrigger;
           var lastToken;
-
           if (_this._isCommand(value)) {
             currentTrigger = '/';
             lastToken = value;
@@ -38425,35 +38354,31 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
               return a === lastToken[0];
             }) || null;
           }
+
           /*
            if we lost the trigger token or there is no following character we want to close
            the autocomplete
           */
-
-
           if (!lastToken || lastToken.length <= minChar) {
             _this._closeAutocomplete();
-
             return;
           }
+          var actualToken = lastToken.slice(1);
 
-          var actualToken = lastToken.slice(1); // if trigger is not configured step out from the function, otherwise proceed
-
+          // if trigger is not configured step out from the function, otherwise proceed
           if (!currentTrigger) return;
-
-          if (movePopupAsYouType || top === null && left === null || // if we have single char - trigger it means we want to re-position the autocomplete
+          if (movePopupAsYouType || top === null && left === null ||
+          // if we have single char - trigger it means we want to re-position the autocomplete
           lastToken.length === 1) {
             var _getCaretCoordinates = getCaretCoordinates(textarea, selectionEnd),
-                newLeft = _getCaretCoordinates.left,
-                newTop = _getCaretCoordinates.top;
-
+              newLeft = _getCaretCoordinates.left,
+              newTop = _getCaretCoordinates.top;
             _this.setState({
               // make position relative to textarea
               left: newLeft,
               top: newTop - _this.textareaRef.scrollTop || 0
             });
           }
-
           _this.setState({
             actualToken: actualToken,
             currentTrigger: currentTrigger,
@@ -38467,77 +38392,62 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             }
           });
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_selectHandler", function (e) {
           var _this$props3 = _this.props,
-              onCaretPositionChange = _this$props3.onCaretPositionChange,
-              onSelect = _this$props3.onSelect;
+            onCaretPositionChange = _this$props3.onCaretPositionChange,
+            onSelect = _this$props3.onSelect;
           if (onCaretPositionChange) onCaretPositionChange(_this.getCaretPosition());
-
           if (onSelect) {
             e.persist();
             onSelect(e);
           }
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_onClickAndBlurHandler", function (e) {
           var _this$props4 = _this.props,
-              closeOnClickOutside = _this$props4.closeOnClickOutside,
-              onBlur = _this$props4.onBlur; // If this is a click: e.target is the textarea, and e.relatedTarget is the thing
+            closeOnClickOutside = _this$props4.closeOnClickOutside,
+            onBlur = _this$props4.onBlur;
+
+          // If this is a click: e.target is the textarea, and e.relatedTarget is the thing
           // that was actually clicked. If we clicked inside the auto-select dropdown, then
           // that's not a blur, from the auto-select point of view, so then do nothing.
-
           var el = e.relatedTarget;
-
           if (_this.dropdownRef && el instanceof Node && _this.dropdownRef.contains(el)) {
             return;
           }
-
           if (closeOnClickOutside) _this._closeAutocomplete();
-
           if (onBlur) {
             e.persist();
             onBlur(e);
           }
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_onScrollHandler", function () {
           return _this._closeAutocomplete();
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "_dropdownScroll", function (item) {
           var scrollToItem = _this.props.scrollToItem;
           if (!scrollToItem) return;
-
           if (scrollToItem === true) {
             defaultScrollToItem(_this.dropdownRef, item);
             return;
           }
-
           if (typeof scrollToItem !== 'function' || scrollToItem.length !== 2) {
             throw new Error('`scrollToItem` has to be boolean (true for default implementation) or function with two parameters: container, item.');
           }
-
           scrollToItem(_this.dropdownRef, item);
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "getTriggerProps", function () {
           var _this$props5 = _this.props,
-              showCommandsList = _this$props5.showCommandsList,
-              showMentionsList = _this$props5.showMentionsList,
-              trigger = _this$props5.trigger;
+            showCommandsList = _this$props5.showCommandsList,
+            showMentionsList = _this$props5.showMentionsList,
+            trigger = _this$props5.trigger;
           var _this$state6 = _this.state,
-              component = _this$state6.component,
-              currentTrigger = _this$state6.currentTrigger,
-              selectionEnd = _this$state6.selectionEnd,
-              value = _this$state6.value;
-
+            component = _this$state6.component,
+            currentTrigger = _this$state6.currentTrigger,
+            selectionEnd = _this$state6.selectionEnd,
+            value = _this$state6.value;
           var selectedItem = _this._getItemOnSelect();
-
           var suggestionData = _this._getSuggestions();
-
           var textToReplace = _this._getTextToReplace();
-
           var triggerProps = {
             component: component,
             currentTrigger: currentTrigger,
@@ -38547,7 +38457,6 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             value: value,
             values: suggestionData
           };
-
           if (showCommandsList && trigger['/'] || showMentionsList && trigger['@']) {
             var currentCommands;
             var getCommands = trigger[showCommandsList ? '/' : '@'].dataProvider;
@@ -38562,28 +38471,25 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             triggerProps.value = showCommandsList ? '/' : '@';
             triggerProps.values = currentCommands;
           }
-
           return triggerProps;
         });
-
         definePropertyExports(assertThisInitializedExports(_this), "setDropdownRef", function (element) {
           _this.dropdownRef = element;
         });
-
         var _this$props6 = _this.props,
-            loadingComponent = _this$props6.loadingComponent,
-            _trigger = _this$props6.trigger,
-            _value = _this$props6.value; // TODO: it would be better to have the parent control state...
+          loadingComponent = _this$props6.loadingComponent,
+          _trigger = _this$props6.trigger,
+          _value = _this$props6.value;
+
+        // TODO: it would be better to have the parent control state...
         // if (value) this.state.value = value;
 
         if (!loadingComponent) {
           throw new Error('RTA: loadingComponent is not defined');
         }
-
         if (!_trigger) {
           throw new Error('RTA: trigger is not defined');
         }
-
         _this.state = {
           actualToken: '',
           component: null,
@@ -38598,22 +38504,20 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         };
         return _this;
       }
-
       createClassExports(ReactTextareaAutocomplete, [{
         key: "renderSuggestionListContainer",
         value: function renderSuggestionListContainer() {
           var _this$props7 = this.props,
-              disableMentions = _this$props7.disableMentions,
-              dropdownClassName = _this$props7.dropdownClassName,
-              dropdownStyle = _this$props7.dropdownStyle,
-              itemClassName = _this$props7.itemClassName,
-              itemStyle = _this$props7.itemStyle,
-              listClassName = _this$props7.listClassName,
-              SuggestionItem = _this$props7.SuggestionItem,
-              _this$props7$Suggesti = _this$props7.SuggestionList,
-              SuggestionList = _this$props7$Suggesti === void 0 ? List$1 : _this$props7$Suggesti;
+            disableMentions = _this$props7.disableMentions,
+            dropdownClassName = _this$props7.dropdownClassName,
+            dropdownStyle = _this$props7.dropdownStyle,
+            itemClassName = _this$props7.itemClassName,
+            itemStyle = _this$props7.itemStyle,
+            listClassName = _this$props7.listClassName,
+            SuggestionItem = _this$props7.SuggestionItem,
+            _this$props7$Suggesti = _this$props7.SuggestionList,
+            SuggestionList = _this$props7$Suggesti === void 0 ? List$1 : _this$props7$Suggesti;
           var triggerProps = this.getTriggerProps();
-
           if (triggerProps.values && triggerProps.currentTrigger && !(disableMentions && triggerProps.currentTrigger === '@')) {
             return /*#__PURE__*/React__default["default"].createElement("div", {
               className: clsx('rta__autocomplete', 'str-chat__suggestion-list-container', dropdownClassName),
@@ -38628,24 +38532,24 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
               SuggestionItem: SuggestionItem
             }, triggerProps)));
           }
-
           return null;
         }
       }, {
         key: "render",
         value: function render() {
           var _this2 = this;
-
           var _this$props8 = this.props,
-              className = _this$props8.className,
-              containerClassName = _this$props8.containerClassName,
-              containerStyle = _this$props8.containerStyle,
-              style = _this$props8.style;
+            className = _this$props8.className,
+            containerClassName = _this$props8.containerClassName,
+            containerStyle = _this$props8.containerStyle,
+            style = _this$props8.style;
           var maxRows = this.props.maxRows;
           var _this$state7 = this.state,
-              dataLoading = _this$state7.dataLoading,
-              value = _this$state7.value;
-          if (!this.props.grow) maxRows = 1; // By setting defaultValue to undefined, avoid error:
+            dataLoading = _this$state7.dataLoading,
+            value = _this$state7.value;
+          if (!this.props.grow) maxRows = 1;
+
+          // By setting defaultValue to undefined, avoid error:
           // ForwardRef(TextareaAutosize) contains a textarea with both value and defaultValue props.
           // Textarea elements must be either controlled or uncontrolled
 
@@ -38668,7 +38572,6 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
             onSelect: this._selectHandler,
             ref: function ref(_ref) {
               var _this2$props;
-
               (_this2$props = _this2.props) === null || _this2$props === void 0 ? void 0 : _this2$props.innerRef(_ref);
               _this2.textareaRef = _ref;
             },
@@ -38697,12 +38600,9 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         /**
          * Close autocomplete, also clean up trigger (to avoid slow promises)
          */
-
       }]);
-
       return ReactTextareaAutocomplete;
     }(React__default["default"].Component);
-
     definePropertyExports(ReactTextareaAutocomplete, "defaultProps", {
       closeOnClickOutside: true,
       maxRows: 10,
@@ -38711,7 +38611,6 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
       scrollToItem: true,
       value: ''
     });
-
     ReactTextareaAutocomplete.propTypes = {
       className: propTypesExports.string,
       closeOnClickOutside: propTypesExports.bool,
@@ -48456,7 +48355,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '10.6.0';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '10.7.1';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -49572,7 +49471,6 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
         var lastReceivedId = React$2.useMemo(function () { return getLastReceived(enrichedMessages); }, [enrichedMessages]);
         var elements = React$2.useMemo(function () {
             return enrichedMessages.map(function (message) {
-                var _a;
                 if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
                     message.date &&
                     isDate(message.date)) {
@@ -49584,9 +49482,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
                         React__default["default"].createElement(HeaderComponent, null)));
                 }
                 if (message.type === 'system') {
-                    return (React__default["default"].createElement("li", { key: ((_a = message.event) === null || _a === void 0 ? void 0 : _a.created_at) ||
-                            message.created_at ||
-                            '' },
+                    return (React__default["default"].createElement("li", { key: message.id || message.created_at },
                         React__default["default"].createElement(MessageSystem, { message: message })));
                 }
                 var groupStyles = messageGroupStyles[message.id] || '';
@@ -56452,6 +56348,46 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
 
     var parseXml$1 = src;
 
+    var dist$1 = {};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};Object.defineProperty(dist$1, "__esModule", { value: true });
+    var sanitizeUrl_1 = dist$1.sanitizeUrl = void 0;
+    var invalidProtocolRegex = /^([^\w]*)(javascript|data|vbscript)/im;
+    var htmlEntitiesRegex = /&#(\w+)(^\w|;)?/g;
+    var ctrlCharactersRegex = /[\u0000-\u001F\u007F-\u009F\u2000-\u200D\uFEFF]/gim;
+    var urlSchemeRegex = /^([^:]+):/gm;
+    var relativeFirstCharacters = [".", "/"];
+    function isRelativeUrlWithoutProtocol(url) {
+        return relativeFirstCharacters.indexOf(url[0]) > -1;
+    }
+    // adapted from https://stackoverflow.com/a/29824550/2601552
+    function decodeHtmlCharacters(str) {
+        return str.replace(htmlEntitiesRegex, function (match, dec) {
+            return String.fromCharCode(dec);
+        });
+    }
+    function sanitizeUrl(url) {
+        var sanitizedUrl = decodeHtmlCharacters(url || "")
+            .replace(ctrlCharactersRegex, "")
+            .trim();
+        if (!sanitizedUrl) {
+            return "about:blank";
+        }
+        if (isRelativeUrlWithoutProtocol(sanitizedUrl)) {
+            return sanitizedUrl;
+        }
+        var urlSchemeParseResults = sanitizedUrl.match(urlSchemeRegex);
+        if (!urlSchemeParseResults) {
+            return sanitizedUrl;
+        }
+        var urlScheme = urlSchemeParseResults[0];
+        if (invalidProtocolRegex.test(urlScheme)) {
+            return "about:blank";
+        }
+        return sanitizedUrl;
+    }
+    sanitizeUrl_1 = dist$1.sanitizeUrl = sanitizeUrl;
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
     var immutable = extend$1;
 
@@ -78529,6 +78465,7 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     exports.MessageTimestamp = MessageTimestamp;
     exports.Modal = Modal;
     exports.ModalGallery = ModalGallery;
+    exports.NullComponent = NullComponent;
     exports.PinIcon = PinIcon;
     exports.PinIndicator = PinIndicator;
     exports.PlayButton = PlayButton;
@@ -78564,6 +78501,8 @@ var StreamChatReact = (function (exports, React$2, streamChat, ReactDOM) {
     exports.TypingIndicator = TypingIndicator;
     exports.TypingProvider = TypingProvider;
     exports.UnMemoizedLoadMorePaginator = UnMemoizedLoadMorePaginator;
+    exports.UnsupportedAttachment = UnsupportedAttachment;
+    exports.UnsupportedAttachmentContainer = UnsupportedAttachmentContainer;
     exports.UploadIcon = UploadIcon;
     exports.UploadsPreview = UploadsPreview;
     exports.UserItem = UserItem;