stream-chat-react 10.6.0 → 10.7.1

package/dist/index.cjs.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var sanitizeUrl = require('@braintree/sanitize-url');
 var ReactPlayer = require('react-player');
 var prettybytes = require('pretty-bytes');
+var sanitizeUrl = require('@braintree/sanitize-url');
 var DefaultEmojiIndex = require('emoji-mart/dist/utils/emoji-index/nimble-emoji-index.js');
 var Dayjs = require('dayjs');
 var calendar = require('dayjs/plugin/calendar');
@@ -1384,7 +1384,7 @@ var UnMemoizedGallery = function (props) {
             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({ 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({ alt: 'User uploaded content', src: sanitizeUrl.sanitizeUrl(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,
@@ -1715,6 +1715,18 @@ var renderMedia = function (props) {
     });
 };
 
+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; };
+
 var AttachmentWithinContainer = function (_a) {
     var _b;
     var _c;
@@ -1852,12 +1864,18 @@ var MediaContainer = function (props) {
             content,
             React__default["default"].createElement(AttachmentActionsContainer, __assign({}, 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 })));
+};
 
 var CONTAINER_MAP = {
     audio: AudioContainer,
     card: CardContainer,
     file: FileContainer,
     media: MediaContainer,
+    unsupported: UnsupportedAttachmentContainer,
 };
 var ATTACHMENT_GROUPS_ORDER = [
     'card',
@@ -1866,6 +1884,7 @@ var ATTACHMENT_GROUPS_ORDER = [
     'media',
     'audio',
     'file',
+    'unsupported',
 ];
 /**
  * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
@@ -1877,26 +1896,27 @@ var Attachment = function (props) {
 };
 var renderGroupedAttachments = function (_a) {
     var attachments = _a.attachments, rest = __rest(_a, ["attachments"]);
-    var uploadedImages = [];
-    var containers = attachments.reduce(function (acc, attachment) {
-        if (isUploadedImage(attachment)) {
-            uploadedImages.push(__assign(__assign({}, attachment), { image_url: sanitizeUrl.sanitizeUrl(attachment.image_url), thumb_url: sanitizeUrl.sanitizeUrl(attachment.thumb_url) }));
-        }
-        else {
-            var attachmentType = getAttachmentType(attachment);
-            if (attachmentType) {
-                var Container = CONTAINER_MAP[attachmentType];
-                acc[attachmentType].push(React__default["default"].createElement(Container, __assign({ 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({ 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'] = [
@@ -1926,21 +1946,19 @@ var getAttachmentType = function (attachment) {
     else if (isFileAttachment(attachment)) {
         return 'file';
     }
-    return null;
+    return 'unsupported';
 };
 
 var Item = /*#__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.useCallback(function () {
     return onSelectHandler(item);
   }, [item, onClickHandler]);
@@ -4874,12 +4892,12 @@ var extend = function extend() {
 };
 
 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);
 }
 
 /**
@@ -23939,73 +23957,59 @@ var DefaultSuggestionListHeader = function (props) {
 };
 
 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) { _defineProperty__default["default"](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 = 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;
   var SuggestionHeader = PropHeader || AutocompleteSuggestionHeader || DefaultSuggestionListHeader;
-
   var _useState = React.useState(undefined),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      selectedItem = _useState2[0],
-      setSelectedItem = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_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.useCallback(function (item) {
     var index = values.findIndex(function (value) {
       return value.id ? value.id === item.id : value.name === item.name;
@@ -24021,7 +24025,6 @@ var List = function List(_ref) {
         return newID;
       });
     }
-
     if (event.key === 'ArrowDown') {
       setSelectedItem(function (prevSelected) {
         if (prevSelected === undefined) return 0;
@@ -24030,14 +24033,13 @@ var List = function List(_ref) {
         return newID;
       });
     }
-
     if ((event.key === 'Enter' || event.key === 'Tab') && selectedItem !== undefined) {
       handleClick(event);
     }
-
     return null;
   }, [selectedItem, values] // eslint-disable-line
   );
+
   React.useEffect(function () {
     document.addEventListener('keydown', handleKeyDown, false);
     return function () {
@@ -24098,12 +24100,11 @@ function defaultScrollToItem(container, item) {
   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) {
@@ -24113,40 +24114,33 @@ var triggerPropsCheck = function triggerPropsCheck(_ref) {
   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__default["default"](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.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;
 };
 
@@ -24216,24 +24210,16 @@ var UnMemoizedUserItem = function (_a) {
 var UserItem = React__default["default"].memo(UnMemoizedUserItem);
 
 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) { _defineProperty__default["default"](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 = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](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) {
   _inherits__default["default"](ReactTextareaAutocomplete, _React$Component);
-
   var _super = _createSuper(ReactTextareaAutocomplete);
-
   function ReactTextareaAutocomplete(_props) {
     var _this;
-
     _classCallCheck__default["default"](this, ReactTextareaAutocomplete);
-
     _this = _super.call(this, _props);
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "getSelectionPosition", function () {
       if (!_this.textareaRef) return null;
       return {
@@ -24241,72 +24227,58 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         selectionStart: _this.textareaRef.selectionStart
       };
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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);
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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);
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "getCaretPosition", function () {
       if (!_this.textareaRef) return 0;
       return _this.textareaRef.selectionEnd;
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_defaultShouldSubmit", function (event) {
       return event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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();
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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();
       }
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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();
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_replaceWord", function () {
       var value = _this.state.value;
       var lastWordRegex = /([^\s]+)(\s*)$/;
@@ -24314,14 +24286,11 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
       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 () {
@@ -24329,53 +24298,47 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         var e = new CustomEvent('change', {
           bubbles: true
         });
-
         _this.textareaRef.dispatchEvent(e);
-
         if (_this.props.onChange) _this.props.onChange(e);
       });
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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
@@ -24384,25 +24347,17 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         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();
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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;
@@ -24411,22 +24366,17 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         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;
       };
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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;
@@ -24434,91 +24384,74 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         if (_typeof__default["default"](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)
         };
       };
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_getCurrentTriggerSettings", function (paramTrigger) {
       var stateTrigger = _this.state.currentTrigger;
       var currentTrigger = paramTrigger || stateTrigger;
       if (!currentTrigger) return null;
       return _this.props.trigger[currentTrigger];
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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.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,
@@ -24526,16 +24459,14 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         });
       });
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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;
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_closeAutocomplete", function () {
       _this.setState({
         currentTrigger: null,
@@ -24545,54 +24476,45 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         top: null
       });
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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;
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_isCommand", function (text) {
       if (text[0] !== '/') return false;
       var tokens = text.split(' ');
       return tokens.length <= 1;
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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;
@@ -24606,35 +24528,31 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
           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__default["default"](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,
@@ -24648,77 +24566,62 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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);
       }
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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);
       }
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "_onScrollHandler", function () {
       return _this._closeAutocomplete();
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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);
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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,
@@ -24728,7 +24631,6 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         value: value,
         values: suggestionData
       };
-
       if (showCommandsList && trigger['/'] || showMentionsList && trigger['@']) {
         var currentCommands;
         var getCommands = trigger[showCommandsList ? '/' : '@'].dataProvider;
@@ -24743,28 +24645,25 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         triggerProps.value = showCommandsList ? '/' : '@';
         triggerProps.values = currentCommands;
       }
-
       return triggerProps;
     });
-
     _defineProperty__default["default"](_assertThisInitialized__default["default"](_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,
@@ -24779,22 +24678,20 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
   _createClass__default["default"](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 : _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 : _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),
@@ -24809,24 +24706,24 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
           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
 
@@ -24849,7 +24746,6 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         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;
         },
@@ -24878,12 +24774,9 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
     /**
      * Close autocomplete, also clean up trigger (to avoid slow promises)
      */
-
   }]);
-
   return ReactTextareaAutocomplete;
 }(React__default["default"].Component);
-
 _defineProperty__default["default"](ReactTextareaAutocomplete, "defaultProps", {
   closeOnClickOutside: true,
   maxRows: 10,
@@ -24892,7 +24785,6 @@ _defineProperty__default["default"](ReactTextareaAutocomplete, "defaultProps", {
   scrollToItem: true,
   value: ''
 });
-
 ReactTextareaAutocomplete.propTypes = {
   className: PropTypes__default["default"].string,
   closeOnClickOutside: PropTypes__default["default"].bool,
@@ -33778,7 +33670,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.6.0';
+var version = '10.7.1';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -34870,7 +34762,6 @@ var useMessageListElements = function (props) {
     var lastReceivedId = React.useMemo(function () { return getLastReceived(enrichedMessages); }, [enrichedMessages]);
     var elements = React.useMemo(function () {
         return enrichedMessages.map(function (message) {
-            var _a;
             if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
                 message.date &&
                 isDate(message.date)) {
@@ -34882,9 +34773,7 @@ var useMessageListElements = function (props) {
                     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] || '';
@@ -35905,6 +35794,7 @@ exports.MessageText = MessageText;
 exports.MessageTimestamp = MessageTimestamp;
 exports.Modal = Modal;
 exports.ModalGallery = ModalGallery;
+exports.NullComponent = NullComponent;
 exports.PinIcon = PinIcon;
 exports.PinIndicator = PinIndicator;
 exports.PlayButton = PlayButton;
@@ -35940,6 +35830,8 @@ exports.TypingContext = TypingContext;
 exports.TypingIndicator = TypingIndicator;
 exports.TypingProvider = TypingProvider;
 exports.UnMemoizedLoadMorePaginator = UnMemoizedLoadMorePaginator;
+exports.UnsupportedAttachment = UnsupportedAttachment;
+exports.UnsupportedAttachmentContainer = UnsupportedAttachmentContainer;
 exports.UploadIcon = UploadIcon;
 exports.UploadsPreview = UploadsPreview;
 exports.UserItem = UserItem;