stream-chat-react 8.1.3-beta.1 → 9.0.0

package/dist/browser.full-bundle.js

@@ -5452,81 +5452,22 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
     var ReactPlayer = unwrapExports(lib$8);
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};// Unique ID creation requires a high quality random # generator. In the browser we therefore
-    // require the crypto API and do not support built-in fallback to lower quality random number
-    // generators (like Math.random()).
-    var getRandomValues;
-    var rnds8 = new Uint8Array(16);
-    function rng() {
-      // lazy load so that environments that need to polyfill have a chance to do so
-      if (!getRandomValues) {
-        // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
-        // find the complete implementation of crypto (msCrypto) on IE11.
-        getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
-
-        if (!getRandomValues) {
-          throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-        }
-      }
-
-      return getRandomValues(rnds8);
-    }
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    function validate(uuid) {
-      return typeof uuid === 'string' && REGEX.test(uuid);
-    }
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
-     * Convert array of 16 byte values to UUID string format of the form:
-     * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
-     */
-
-    var byteToHex = [];
-
-    for (var i$1 = 0; i$1 < 256; ++i$1) {
-      byteToHex.push((i$1 + 0x100).toString(16).substr(1));
-    }
-
-    function stringify$2(arr) {
-      var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      // Note: Be careful editing this code!  It's been tuned for performance
-      // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-      var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
-      // of the following:
-      // - One or more input array values don't map to a hex octet (leading to
-      // "undefined" in the uuid)
-      // - Invalid input values for the RFC `version` or `variant` fields
-
-      if (!validate(uuid)) {
-        throw TypeError('Stringified UUID is invalid');
-      }
-
-      return uuid;
-    }
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-    function v4(options, buf, offset) {
-      options = options || {};
-      var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
 
-      rnds[6] = rnds[6] & 0x0f | 0x40;
-      rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
-
-      if (buf) {
-        offset = offset || 0;
-
-        for (var i = 0; i < 16; ++i) {
-          buf[offset + i] = rnds[i];
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};let nanoid = (size = 21) =>
+      crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
+        byte &= 63;
+        if (byte < 36) {
+          id += byte.toString(36);
+        } else if (byte < 62) {
+          id += (byte - 26).toString(36).toUpperCase();
+        } else if (byte > 62) {
+          id += '-';
+        } else {
+          id += '_';
         }
-
-        return buf;
-      }
-
-      return stringify$2(rnds);
-    }
+        return id
+      }, '');
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedAttachmentActions = function (props) {
         var actionHandler = props.actionHandler, actions = props.actions, id = props.id, text = props.text;
@@ -11780,7 +11721,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
                         ? 'actions'
                         : '';
         }
-        return (React__default['default'].createElement("div", { className: "str-chat__message-attachment str-chat__message-attachment--" + componentType + " str-chat__message-attachment--" + ((attachment === null || attachment === void 0 ? void 0 : attachment.type) || '') + " str-chat__message-attachment--" + componentType + "--" + extra, key: (isGalleryAttachmentType(attachment) ? '' : (attachment === null || attachment === void 0 ? void 0 : attachment.id) || v4()) + "-" + ((attachment === null || attachment === void 0 ? void 0 : attachment.type) || 'none') + " " }, children));
+        return (React__default['default'].createElement("div", { className: "str-chat__message-attachment str-chat__message-attachment--" + componentType + " str-chat__message-attachment--" + ((attachment === null || attachment === void 0 ? void 0 : attachment.type) || '') + " str-chat__message-attachment--" + componentType + "--" + extra, key: (isGalleryAttachmentType(attachment) ? '' : (attachment === null || attachment === void 0 ? void 0 : attachment.id) || nanoid()) + "-" + ((attachment === null || attachment === void 0 ? void 0 : attachment.type) || 'none') + " " }, children));
     };
     var renderAttachmentActions = function (props) {
         var _a;
@@ -11957,8 +11898,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       return obj;
     }
 
-    module.exports = _defineProperty;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _defineProperty, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     var _defineProperty = unwrapExports(defineProperty$1);
@@ -11969,8 +11909,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       if (Array.isArray(arr)) return arr;
     }
 
-    module.exports = _arrayWithHoles;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _arrayWithHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     unwrapExports(arrayWithHoles);
@@ -11978,14 +11917,17 @@ var StreamChatReact = (function (exports, React, streamChat) {
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
     var iterableToArrayLimit = createCommonjsModule$1(function (module) {
     function _iterableToArrayLimit(arr, i) {
-      if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+      var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+      if (_i == null) return;
       var _arr = [];
       var _n = true;
       var _d = false;
-      var _e = undefined;
+
+      var _s, _e;
 
       try {
-        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+        for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
           _arr.push(_s.value);
 
           if (i && _arr.length === i) break;
@@ -12004,8 +11946,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       return _arr;
     }
 
-    module.exports = _iterableToArrayLimit;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _iterableToArrayLimit, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     unwrapExports(iterableToArrayLimit);
@@ -12022,8 +11963,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       return arr2;
     }
 
-    module.exports = _arrayLikeToArray;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     unwrapExports(arrayLikeToArray);
@@ -12039,8 +11979,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
     }
 
-    module.exports = _unsupportedIterableToArray;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     unwrapExports(unsupportedIterableToArray);
@@ -12051,8 +11990,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
 
-    module.exports = _nonIterableRest;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _nonIterableRest, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     unwrapExports(nonIterableRest);
@@ -12063,8 +12001,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
     }
 
-    module.exports = _slicedToArray;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _slicedToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     var _slicedToArray = unwrapExports(slicedToArray);
@@ -36659,14 +36596,10 @@ var StreamChatReact = (function (exports, React, streamChat) {
     function escapeRegExp(text) {
         return text.replace(/[-[\]{}()*+?.,\\^$|#]/g, '\\$&');
     }
-    function S4() {
-        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-    }
-    // https://stackoverflow.com/a/6860916/2570866
-    function generateRandomId() {
-        // prettier-ignore
-        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
-    }
+    /**
+     * @deprecated will be removed in the next major release
+     */
+    var generateRandomId = nanoid;
     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt#getting_whole_characters
     var getWholeChar = function (str, i) {
         var code = str.charCodeAt(i);
@@ -36886,14 +36819,11 @@ var StreamChatReact = (function (exports, React, streamChat) {
         }
 
         return target;
-      };
-
-      module.exports["default"] = module.exports, module.exports.__esModule = true;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports;
       return _extends.apply(this, arguments);
     }
 
-    module.exports = _extends;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     var _extends$2 = unwrapExports(_extends_1);
@@ -36903,25 +36833,14 @@ var StreamChatReact = (function (exports, React, streamChat) {
     function _typeof(obj) {
       "@babel/helpers - typeof";
 
-      if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-        module.exports = _typeof = function _typeof(obj) {
-          return typeof obj;
-        };
-
-        module.exports["default"] = module.exports, module.exports.__esModule = true;
-      } else {
-        module.exports = _typeof = function _typeof(obj) {
-          return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-        };
-
-        module.exports["default"] = module.exports, module.exports.__esModule = true;
-      }
-
-      return _typeof(obj);
+      return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+        return typeof obj;
+      } : function (obj) {
+        return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
     }
 
-    module.exports = _typeof;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     var _typeof = unwrapExports(_typeof_1);
@@ -36934,8 +36853,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       }
     }
 
-    module.exports = _classCallCheck;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _classCallCheck, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     var _classCallCheck = unwrapExports(classCallCheck);
@@ -36955,11 +36873,13 @@ var StreamChatReact = (function (exports, React, streamChat) {
     function _createClass(Constructor, protoProps, staticProps) {
       if (protoProps) _defineProperties(Constructor.prototype, protoProps);
       if (staticProps) _defineProperties(Constructor, staticProps);
+      Object.defineProperty(Constructor, "prototype", {
+        writable: false
+      });
       return Constructor;
     }
 
-    module.exports = _createClass;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _createClass, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     var _createClass = unwrapExports(createClass);
@@ -36974,8 +36894,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       return self;
     }
 
-    module.exports = _assertThisInitialized;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _assertThisInitialized, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     var _assertThisInitialized = unwrapExports(assertThisInitialized);
@@ -36986,14 +36905,11 @@ var StreamChatReact = (function (exports, React, streamChat) {
       module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
-      };
-
-      module.exports["default"] = module.exports, module.exports.__esModule = true;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports;
       return _setPrototypeOf(o, p);
     }
 
-    module.exports = _setPrototypeOf;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     unwrapExports(setPrototypeOf);
@@ -37012,11 +36928,13 @@ var StreamChatReact = (function (exports, React, streamChat) {
           configurable: true
         }
       });
+      Object.defineProperty(subClass, "prototype", {
+        writable: false
+      });
       if (superClass) setPrototypeOf(subClass, superClass);
     }
 
-    module.exports = _inherits;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _inherits, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     var _inherits = unwrapExports(inherits);
@@ -37030,13 +36948,14 @@ var StreamChatReact = (function (exports, React, streamChat) {
     function _possibleConstructorReturn(self, call) {
       if (call && (_typeof(call) === "object" || typeof call === "function")) {
         return call;
+      } else if (call !== void 0) {
+        throw new TypeError("Derived constructors may only return object or undefined");
       }
 
       return assertThisInitialized(self);
     }
 
-    module.exports = _possibleConstructorReturn;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _possibleConstructorReturn, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     var _possibleConstructorReturn = unwrapExports(possibleConstructorReturn);
@@ -37046,13 +36965,11 @@ var StreamChatReact = (function (exports, React, streamChat) {
     function _getPrototypeOf(o) {
       module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
         return o.__proto__ || Object.getPrototypeOf(o);
-      };
-      module.exports["default"] = module.exports, module.exports.__esModule = true;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports;
       return _getPrototypeOf(o);
     }
 
-    module.exports = _getPrototypeOf;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _getPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     var _getPrototypeOf = unwrapExports(getPrototypeOf);
@@ -37700,10 +37617,14 @@ var StreamChatReact = (function (exports, React, streamChat) {
           return _this.textareaRef.selectionEnd;
         });
 
+        _defineProperty(_assertThisInitialized(_this), "_defaultShouldSubmit", function (event) {
+          return event.key === 'Enter' && !event.shiftKey;
+        });
+
         _defineProperty(_assertThisInitialized(_this), "_handleKeyDown", function (event) {
-          var _this$props$keycodeSu = _this.props.keycodeSubmitKeys,
-              submitKeys = _this$props$keycodeSu === void 0 ? [] : _this$props$keycodeSu;
-          if (event.key === 'Enter' || submitKeys.includes(event.key)) return _this._onEnter(event);
+          var _this$props$shouldSub = _this.props.shouldSubmit,
+              shouldSubmit = _this$props$shouldSub === void 0 ? _this._defaultShouldSubmit : _this$props$shouldSub;
+          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();
         });
@@ -37712,13 +37633,6 @@ var StreamChatReact = (function (exports, React, streamChat) {
           if (!_this.textareaRef) return;
           var trigger = _this.state.currentTrigger;
 
-          var hasFocus = _this.textareaRef.matches(':focus'); // Don't submit if the element doesn't have focus or the shift key is pressed, unless shift+Enter were provided as submit keys
-
-
-          if (!hasFocus || event.shiftKey === true && !_this.keycodeSubmitShiftE || event.shiftKey === true && !_this.props.keycodeSubmitKeys) {
-            return;
-          }
-
           if (!trigger || !_this.state.data) {
             // trigger a submit
             _this._replaceWord();
@@ -37985,7 +37899,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
         _defineProperty(_assertThisInitialized(_this), "_cleanUpProps", function () {
           var props = _objectSpread({}, _this.props);
 
-          var notSafe = ['additionalTextareaProps', 'className', 'closeCommandsList', 'closeMentionsList', 'closeOnClickOutside', 'containerClassName', 'containerStyle', 'disableMentions', 'dropdownClassName', 'dropdownStyle', 'grow', 'handleSubmit', 'innerRef', 'itemClassName', 'itemStyle', 'keycodeSubmitKeys', 'listClassName', 'listStyle', 'loaderClassName', 'loaderStyle', 'loadingComponent', 'minChar', 'movePopupAsYouType', 'onCaretPositionChange', 'onChange', 'ref', 'replaceWord', 'scrollToItem', 'showCommandsList', 'showMentionsList', 'SuggestionItem', 'SuggestionList', 'trigger', 'value']; // eslint-disable-next-line
+          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
 
           for (var prop in props) {
             if (notSafe.includes(prop)) delete props[prop];
@@ -37997,8 +37911,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
         _defineProperty(_assertThisInitialized(_this), "_isCommand", function (text) {
           if (text[0] !== '/') return false;
           var tokens = text.split(' ');
-          if (tokens.length > 1) return false;
-          return true;
+          return tokens.length <= 1;
         });
 
         _defineProperty(_assertThisInitialized(_this), "_changeHandler", function (e) {
@@ -38204,9 +38117,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
           currentTrigger: null,
           data: null,
           dataLoading: false,
-          keycodeSubmitShiftE: false,
           left: null,
-          listenerIndex: {},
           selectionEnd: 0,
           selectionStart: 0,
           top: null,
@@ -38265,7 +38176,10 @@ var StreamChatReact = (function (exports, React, streamChat) {
           var _this$state7 = this.state,
               dataLoading = _this$state7.dataLoading,
               value = _this$state7.value;
-          if (!this.props.grow) maxRows = 1;
+          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
+
           return /*#__PURE__*/React__default['default'].createElement("div", {
             className: "rta ".concat(dataLoading === true ? 'rta--loading' : '', " ").concat(containerClassName || ''),
             style: containerStyle
@@ -38287,7 +38201,9 @@ var StreamChatReact = (function (exports, React, streamChat) {
             },
             style: style,
             value: value
-          }, this.props.additionalTextareaProps)));
+          }, this.props.additionalTextareaProps, {
+            defaultValue: undefined
+          })));
         }
       }], [{
         key: "getDerivedStateFromProps",
@@ -38333,7 +38249,6 @@ var StreamChatReact = (function (exports, React, streamChat) {
       dropdownStyle: propTypes$1.object,
       itemClassName: propTypes$1.string,
       itemStyle: propTypes$1.object,
-      keycodeSubmitKeys: propTypes$1.array,
       listClassName: propTypes$1.string,
       listStyle: propTypes$1.object,
       loaderClassName: propTypes$1.string,
@@ -38344,6 +38259,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       onCaretPositionChange: propTypes$1.func,
       onChange: propTypes$1.func,
       onSelect: propTypes$1.func,
+      shouldSubmit: propTypes$1.func,
       style: propTypes$1.object,
       SuggestionList: propTypes$1.elementType,
       trigger: triggerPropsCheck,
@@ -39324,7 +39240,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
                     return type;
                 }).join() : '') + pinned + reply_count + status + (updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
                     ? updated_at.toISOString()
-                    : updated_at || '') + (user === null || user === void 0 ? void 0 : user.image) + (user === null || user === void 0 ? void 0 : user.name);
+                    : updated_at || '') + (user === null || user === void 0 ? void 0 : user.updated_at);
             })
                 .join();
         var memoizedThreadMessageData = threadMessages
@@ -39335,7 +39251,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 return type;
             }).join() : '') + pinned + status + (updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
                 ? updated_at.toISOString()
-                : updated_at || '') + (user === null || user === void 0 ? void 0 : user.image) + (user === null || user === void 0 ? void 0 : user.name);
+                : updated_at || '') + (user === null || user === void 0 ? void 0 : user.updated_at);
         })
             .join();
         var channelStateContext = React.useMemo(function () { return ({
@@ -39753,7 +39669,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
         return true;
     };
     var areMessagePropsEqual = function (prevProps, nextProps) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f;
         var prevMessage = prevProps.message, prevMessageUI = prevProps.Message;
         var nextMessage = nextProps.message, nextMessageUI = nextProps.Message;
         if (prevMessageUI !== nextMessageUI)
@@ -39772,8 +39688,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             prevMessage.text === nextMessage.text &&
             prevMessage.type === nextMessage.type &&
             prevMessage.updated_at === nextMessage.updated_at &&
-            ((_e = prevMessage.user) === null || _e === void 0 ? void 0 : _e.image) === ((_f = nextMessage.user) === null || _f === void 0 ? void 0 : _f.image) &&
-            ((_g = prevMessage.user) === null || _g === void 0 ? void 0 : _g.name) === ((_h = nextMessage.user) === null || _h === void 0 ? void 0 : _h.name);
+            ((_e = prevMessage.user) === null || _e === void 0 ? void 0 : _e.updated_at) === ((_f = nextMessage.user) === null || _f === void 0 ? void 0 : _f.updated_at);
         if (!messagesAreEqual)
             return false;
         var deepEqualProps = reactFastCompare(nextProps.readBy, prevProps.readBy) &&
@@ -39787,7 +39702,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
         );
     };
     var areMessageUIPropsEqual = function (prevProps, nextProps) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var prevLastReceivedId = prevProps.lastReceivedId, prevMessage = prevProps.message;
         var nextLastReceivedId = nextProps.lastReceivedId, nextMessage = nextProps.message;
         if (prevProps.editing !== nextProps.editing)
@@ -39807,7 +39722,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             prevLastReceivedId !== nextLastReceivedId) {
             return false;
         }
-        var messagesAreEqual = prevMessage.deleted_at === nextMessage.deleted_at &&
+        return (prevMessage.deleted_at === nextMessage.deleted_at &&
             ((_e = prevMessage.latest_reactions) === null || _e === void 0 ? void 0 : _e.length) === ((_f = nextMessage.latest_reactions) === null || _f === void 0 ? void 0 : _f.length) &&
             ((_g = prevMessage.own_reactions) === null || _g === void 0 ? void 0 : _g.length) === ((_h = nextMessage.own_reactions) === null || _h === void 0 ? void 0 : _h.length) &&
             prevMessage.pinned === nextMessage.pinned &&
@@ -39816,11 +39731,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             prevMessage.text === nextMessage.text &&
             prevMessage.type === nextMessage.type &&
             prevMessage.updated_at === nextMessage.updated_at &&
-            ((_j = prevMessage.user) === null || _j === void 0 ? void 0 : _j.image) === ((_k = nextMessage.user) === null || _k === void 0 ? void 0 : _k.image) &&
-            ((_l = prevMessage.user) === null || _l === void 0 ? void 0 : _l.name) === ((_m = nextMessage.user) === null || _m === void 0 ? void 0 : _m.name);
-        if (!messagesAreEqual)
-            return false;
-        return true;
+            ((_j = prevMessage.user) === null || _j === void 0 ? void 0 : _j.updated_at) === ((_k = nextMessage.user) === null || _k === void 0 ? void 0 : _k.updated_at));
     };
     var messageHasReactions = function (message) { return !!(message === null || message === void 0 ? void 0 : message.latest_reactions) && !!message.latest_reactions.length; };
     var messageHasAttachments = function (message) { return !!(message === null || message === void 0 ? void 0 : message.attachments) && !!message.attachments.length; };
@@ -40781,8 +40692,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       };
     }
 
-    module.exports = _interopRequireDefault;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     unwrapExports(interopRequireDefault);
@@ -42208,7 +42118,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 innerRef.current = ref;
             }
         }, [innerRef]);
-        return (React__default['default'].createElement(ReactTextareaAutocomplete, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea', disabled: disabled || !!cooldownRemaining, disableMentions: messageInput.disableMentions, dropdownClassName: 'str-chat__emojisearch', grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, itemClassName: 'str-chat__emojisearch__item', keycodeSubmitKeys: messageInput.keycodeSubmitKeys, listClassName: 'str-chat__emojisearch__list', loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
+        return (React__default['default'].createElement(ReactTextareaAutocomplete, { additionalTextareaProps: messageInput.additionalTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: 'str-chat__textarea__textarea', closeCommandsList: messageInput.closeCommandsList, closeMentionsList: messageInput.closeMentionsList, containerClassName: 'str-chat__textarea', disabled: disabled || !!cooldownRemaining, disableMentions: messageInput.disableMentions, dropdownClassName: 'str-chat__emojisearch', grow: messageInput.grow, handleSubmit: props.handleSubmit || messageInput.handleSubmit, innerRef: updateInnerRef, itemClassName: 'str-chat__emojisearch__item', listClassName: 'str-chat__emojisearch__list', loadingComponent: LoadingIndicator, maxRows: messageInput.maxRows, minChar: 0, onBlur: props.onBlur, onChange: props.onChange || messageInput.handleChange, onFocus: props.onFocus, onPaste: props.onPaste || messageInput.onPaste, placeholder: cooldownRemaining ? t('Slow Mode ON') : placeholder, replaceWord: emojiReplace, rows: props.rows || 1, shouldSubmit: messageInput.shouldSubmit, showCommandsList: messageInput.showCommandsList, showMentionsList: messageInput.showMentionsList, SuggestionItem: SuggestionItem, SuggestionList: SuggestionList, trigger: messageInput.autocompleteTriggers || {}, value: props.value || messageInput.text }));
     };
     var ChatAutoComplete = React__default['default'].memo(UnMemoizedChatAutoComplete);
 
@@ -42536,7 +42446,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             Array.from(files)
                 .slice(0, maxFilesLeft)
                 .forEach(function (file) {
-                var id = generateRandomId();
+                var id = nanoid();
                 if (file.type.startsWith('image/') &&
                     !file.type.endsWith('.photoshop') // photoshop files begin with 'image/'
                 ) {
@@ -42787,25 +42697,27 @@ var StreamChatReact = (function (exports, React, streamChat) {
                         _a.sent();
                         addNotification(t('Edit message request failed'), 'error');
                         return [3 /*break*/, 4];
-                    case 4: return [3 /*break*/, 12];
+                    case 4: return [3 /*break*/, 13];
                     case 5:
-                        _a.trys.push([5, 11, , 12]);
+                        _a.trys.push([5, 12, , 13]);
                         dispatch({ type: 'clear' });
-                        if (!overrideSubmitHandler) return [3 /*break*/, 6];
-                        overrideSubmitHandler(__assign$2(__assign$2({}, updatedMessage), { parent: parent }), channel.cid);
-                        return [3 /*break*/, 8];
-                    case 6: return [4 /*yield*/, sendMessage(__assign$2(__assign$2({}, updatedMessage), { parent: parent }), customMessageData)];
-                    case 7:
+                        if (!overrideSubmitHandler) return [3 /*break*/, 7];
+                        return [4 /*yield*/, overrideSubmitHandler(__assign$2(__assign$2({}, updatedMessage), { parent: parent }), channel.cid, customMessageData)];
+                    case 6:
                         _a.sent();
-                        _a.label = 8;
+                        return [3 /*break*/, 9];
+                    case 7: return [4 /*yield*/, sendMessage(__assign$2(__assign$2({}, updatedMessage), { parent: parent }), customMessageData)];
                     case 8:
-                        if (!publishTypingEvent) return [3 /*break*/, 10];
-                        return [4 /*yield*/, channel.stopTyping()];
+                        _a.sent();
+                        _a.label = 9;
                     case 9:
+                        if (!publishTypingEvent) return [3 /*break*/, 11];
+                        return [4 /*yield*/, channel.stopTyping()];
+                    case 10:
                         _a.sent();
-                        _a.label = 10;
-                    case 10: return [3 /*break*/, 12];
-                    case 11:
+                        _a.label = 11;
+                    case 11: return [3 /*break*/, 13];
+                    case 12:
                         _a.sent();
                         dispatch({
                             getNewText: function () { return text; },
@@ -42817,16 +42729,18 @@ var StreamChatReact = (function (exports, React, streamChat) {
                             });
                         }
                         addNotification(t('Send message request failed'), 'error');
-                        return [3 /*break*/, 12];
-                    case 12: return [2 /*return*/];
+                        return [3 /*break*/, 13];
+                    case 13: return [2 /*return*/];
                 }
             });
         }); };
         return { handleSubmit: handleSubmit };
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var usePasteHandler = function (uploadNewFiles, insertText) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var usePasteHandler = function (uploadNewFiles, insertText, isUploadEnabled) {
         var onPaste = React.useCallback(function (clipboardEvent) {
+            if (!isUploadEnabled)
+                return;
             (function (event) { return __awaiter$1(void 0, void 0, void 0, function () {
                 var items, plainTextPromise, _loop_1, i, state_1, fileLikes, pastedText;
                 return __generator$1(this, function (_a) {
@@ -42876,30 +42790,31 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var emptyFileUploads = {};
     var emptyImageUploads = {};
+    var makeEmptyMessageInputState = function () { return ({
+        attachments: [],
+        emojiPickerIsOpen: false,
+        fileOrder: [],
+        fileUploads: __assign$2({}, emptyFileUploads),
+        imageOrder: [],
+        imageUploads: __assign$2({}, emptyImageUploads),
+        mentioned_users: [],
+        setText: function () { return null; },
+        text: '',
+    }); };
     /**
      * Initializes the state. Empty if the message prop is falsy.
      */
     var initState = function (message) {
         var _a, _b, _c;
         if (!message) {
-            return {
-                attachments: [],
-                emojiPickerIsOpen: false,
-                fileOrder: [],
-                fileUploads: __assign$2({}, emptyFileUploads),
-                imageOrder: [],
-                imageUploads: __assign$2({}, emptyImageUploads),
-                mentioned_users: [],
-                setText: function () { return null; },
-                text: '',
-            };
+            return makeEmptyMessageInputState();
         }
         // if message prop is defined, get image uploads, file uploads, text, etc.
         var imageUploads = ((_a = message.attachments) === null || _a === void 0 ? void 0 : _a.filter(function (_a) {
             var type = _a.type;
             return type === 'image';
         }).reduce(function (acc, attachment) {
-            var id = generateRandomId();
+            var id = nanoid();
             acc[id] = {
                 file: {
                     name: attachment.fallback || '',
@@ -42915,7 +42830,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             var type = _a.type;
             return type === 'file';
         }).reduce(function (acc, attachment) {
-            var id = generateRandomId();
+            var id = nanoid();
             acc[id] = {
                 file: {
                     name: attachment.title || '',
@@ -42957,16 +42872,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             case 'setText':
                 return __assign$2(__assign$2({}, state), { text: action.getNewText(state.text) });
             case 'clear':
-                return {
-                    attachments: [],
-                    emojiPickerIsOpen: false,
-                    fileOrder: [],
-                    fileUploads: __assign$2({}, emptyFileUploads),
-                    imageOrder: [],
-                    imageUploads: __assign$2({}, emptyImageUploads),
-                    mentioned_users: [],
-                    text: '',
-                };
+                return makeEmptyMessageInputState();
             case 'setImageUpload': {
                 var imageAlreadyExists = state.imageUploads[action.id];
                 if (!imageAlreadyExists && !action.file)
@@ -43009,9 +42915,14 @@ var StreamChatReact = (function (exports, React, streamChat) {
      * hook for MessageInput state
      */
     var useMessageInputState = function (props) {
-        var closeEmojiPickerOnClick = props.closeEmojiPickerOnClick, message = props.message;
+        var additionalTextareaProps = props.additionalTextareaProps, closeEmojiPickerOnClick = props.closeEmojiPickerOnClick, message = props.message;
         var _a = useChannelStateContext('useMessageInputState'), _b = _a.channelCapabilities, channelCapabilities = _b === void 0 ? {} : _b, channelConfig = _a.channelConfig;
-        var _c = React.useReducer(messageInputReducer, message, initState), state = _c[0], dispatch = _c[1];
+        var defaultValue = additionalTextareaProps === null || additionalTextareaProps === void 0 ? void 0 : additionalTextareaProps.defaultValue;
+        var initialStateValue = message ||
+            (Array.isArray(defaultValue)
+                ? { text: defaultValue.join('') }
+                : { text: defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString() });
+        var _c = React.useReducer(messageInputReducer, initialStateValue, initState), state = _c[0], dispatch = _c[1];
         var _d = useMessageInputText(props, state, dispatch), handleChange = _d.handleChange, insertText = _d.insertText, textareaRef = _d.textareaRef;
         var _e = React.useState(false), showCommandsList = _e[0], setShowCommandsList = _e[1];
         var _f = React.useState(false), showMentionsList = _f[0], setShowMentionsList = _f[1];
@@ -43034,8 +42945,8 @@ var StreamChatReact = (function (exports, React, streamChat) {
         var _g = useEmojiPicker(state, dispatch, insertText, textareaRef, closeEmojiPickerOnClick), closeEmojiPicker = _g.closeEmojiPicker, emojiPickerRef = _g.emojiPickerRef, handleEmojiKeyDown = _g.handleEmojiKeyDown, onSelectEmoji = _g.onSelectEmoji, openEmojiPicker = _g.openEmojiPicker;
         var _h = useAttachments(props, state, dispatch, textareaRef), maxFilesLeft = _h.maxFilesLeft, numberOfUploads = _h.numberOfUploads, removeFile = _h.removeFile, removeImage = _h.removeImage, uploadFile = _h.uploadFile, uploadImage = _h.uploadImage, uploadNewFiles = _h.uploadNewFiles;
         var handleSubmit = useSubmitHandler(props, state, dispatch, numberOfUploads).handleSubmit;
-        var onPaste = usePasteHandler(uploadNewFiles, insertText).onPaste;
         var isUploadEnabled = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.uploads) !== false && channelCapabilities['upload-file'] !== false;
+        var onPaste = usePasteHandler(uploadNewFiles, insertText, isUploadEnabled).onPaste;
         var onSelectUser = React.useCallback(function (item) {
             dispatch({ type: 'addMentionedUser', user: item });
         }, []);
@@ -43133,7 +43044,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useCreateMessageInputContext = function (value) {
-        var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeEmojiPicker = value.closeEmojiPicker, closeMentionsList = value.closeMentionsList, cooldownInterval = value.cooldownInterval, cooldownRemaining = value.cooldownRemaining, disabled = value.disabled, disableMentions = value.disableMentions, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiIndex = value.emojiIndex, emojiPickerIsOpen = value.emojiPickerIsOpen, emojiPickerRef = value.emojiPickerRef, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleEmojiKeyDown = value.handleEmojiKeyDown, handleSubmit = value.handleSubmit, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, keycodeSubmitKeys = value.keycodeSubmitKeys, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectEmoji = value.onSelectEmoji, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openEmojiPicker = value.openEmojiPicker, openMentionsList = value.openMentionsList, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, showCommandsList = value.showCommandsList, showMentionsList = value.showMentionsList, text = value.text, textareaRef = value.textareaRef, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
+        var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeEmojiPicker = value.closeEmojiPicker, closeMentionsList = value.closeMentionsList, cooldownInterval = value.cooldownInterval, cooldownRemaining = value.cooldownRemaining, disabled = value.disabled, disableMentions = value.disableMentions, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiIndex = value.emojiIndex, emojiPickerIsOpen = value.emojiPickerIsOpen, emojiPickerRef = value.emojiPickerRef, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleEmojiKeyDown = value.handleEmojiKeyDown, handleSubmit = value.handleSubmit, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectEmoji = value.onSelectEmoji, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openEmojiPicker = value.openEmojiPicker, openMentionsList = value.openMentionsList, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, shouldSubmit = value.shouldSubmit, showCommandsList = value.showCommandsList, showMentionsList = value.showMentionsList, text = value.text, textareaRef = value.textareaRef, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
         var editing = message === null || message === void 0 ? void 0 : message.editing;
         var fileUploadsValue = Object.entries(fileUploads)
             // eslint-disable-next-line
@@ -43180,7 +43091,6 @@ var StreamChatReact = (function (exports, React, streamChat) {
             imageUploads: imageUploads,
             insertText: insertText,
             isUploadEnabled: isUploadEnabled,
-            keycodeSubmitKeys: keycodeSubmitKeys,
             maxFilesLeft: maxFilesLeft,
             maxRows: maxRows,
             mentionAllAppUsers: mentionAllAppUsers,
@@ -43202,6 +43112,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             removeImage: removeImage,
             setCooldownRemaining: setCooldownRemaining,
             setText: setText,
+            shouldSubmit: shouldSubmit,
             showCommandsList: showCommandsList,
             showMentionsList: showMentionsList,
             text: text,
@@ -43618,7 +43529,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
         if (typeof text !== 'string' || (type !== 'success' && type !== 'error')) {
             return;
         }
-        var id = v4();
+        var id = nanoid();
         setNotifications(function (prevNotifications) { return __spreadArray(__spreadArray([], prevNotifications), [{ id: id, text: text, type: type }]); });
         var timeout = setTimeout(function () {
             return setNotifications(function (prevNotifications) {
@@ -43987,7 +43898,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
             });
         }); };
         var createMessagePreview = function (text, attachments, parent, mentioned_users) {
-            var clientSideID = client.userID + "-" + v4();
+            var clientSideID = client.userID + "-" + nanoid();
             return __assign$2({ __html: text, attachments: attachments, created_at: new Date(), html: text, id: clientSideID, mentioned_users: mentioned_users, reactions: [], status: 'sending', text: text, type: 'regular', user: client.user }, ((parent === null || parent === void 0 ? void 0 : parent.id) ? { parent_id: parent.id } : null));
         };
         var sendMessage = function (_a, customMessageData) {
@@ -44751,8 +44662,10 @@ var StreamChatReact = (function (exports, React, streamChat) {
         var channel = props.channel, _a = props.Preview, Preview = _a === void 0 ? ChannelPreviewMessenger : _a, channelUpdateCount = props.channelUpdateCount;
         var _b = useChatContext('ChannelPreview'), activeChannel = _b.channel, client = _b.client, setActiveChannel = _b.setActiveChannel;
         var _c = useTranslationContext('ChannelPreview'), t = _c.t, userLanguage = _c.userLanguage;
-        var _d = React.useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _d[0], setLastMessage = _d[1];
-        var _e = React.useState(0), unread = _e[0], setUnread = _e[1];
+        var _d = React.useState(getDisplayTitle(channel, client.user)), displayTitle = _d[0], setDisplayTitle = _d[1];
+        var _e = React.useState(getDisplayImage(channel, client.user)), displayImage = _e[0], setDisplayImage = _e[1];
+        var _f = React.useState(channel.state.messages[channel.state.messages.length - 1]), lastMessage = _f[0], setLastMessage = _f[1];
+        var _g = React.useState(0), unread = _g[0], setUnread = _g[1];
         var isActive = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) === channel.cid;
         var muted = useIsChannelMuted(channel).muted;
         React.useEffect(function () {
@@ -44789,10 +44702,24 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 channel.off('message.deleted', handleEvent);
             };
         }, [refreshUnreadCount, channelUpdateCount]);
+        React.useEffect(function () {
+            var handleEvent = function () {
+                setDisplayTitle(function (displayTitle) {
+                    var newDisplayTitle = getDisplayTitle(channel, client.user);
+                    return displayTitle !== newDisplayTitle ? newDisplayTitle : displayTitle;
+                });
+                setDisplayImage(function (displayImage) {
+                    var newDisplayImage = getDisplayImage(channel, client.user);
+                    return displayImage !== newDisplayImage ? newDisplayImage : displayImage;
+                });
+            };
+            client.on('user.updated', handleEvent);
+            return function () {
+                client.off('user.updated', handleEvent);
+            };
+        }, []);
         if (!Preview)
             return null;
-        var displayImage = getDisplayImage(channel, client.user);
-        var displayTitle = getDisplayTitle(channel, client.user);
         var latestMessage = getLatestMessagePreview(channel, t, userLanguage);
         return (React__default['default'].createElement(Preview, __assign$2({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, setActiveChannel: setActiveChannel, unread: unread })));
     };
@@ -45135,7 +45062,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
 
     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 = '8.1.3-beta.1';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '9.0.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -45964,10 +45891,10 @@ var StreamChatReact = (function (exports, React, streamChat) {
     var makeDateMessageId = function (date) {
         var idSuffix;
         try {
-            idSuffix = !date ? v4() : date instanceof Date ? date.toISOString() : date;
+            idSuffix = !date ? nanoid() : date instanceof Date ? date.toISOString() : date;
         }
         catch (e) {
-            idSuffix = v4();
+            idSuffix = nanoid();
         }
         return CUSTOM_MESSAGE_TYPE.date + "-" + idSuffix;
     };
@@ -48093,7 +48020,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
     var ThreadInner = function (props) {
         var additionalMessageInputProps = props.additionalMessageInputProps, additionalMessageListProps = props.additionalMessageListProps, additionalParentMessageProps = props.additionalParentMessageProps, additionalVirtualizedMessageListProps = props.additionalVirtualizedMessageListProps, _a = props.autoFocus, autoFocus = _a === void 0 ? true : _a, _b = props.enableDateSeparator, enableDateSeparator = _b === void 0 ? false : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? false : _c, PropInput = props.Input, PropMessage = props.Message, virtualized = props.virtualized;
         var _d = useChannelStateContext('Thread'), thread = _d.thread, threadHasMore = _d.threadHasMore, threadLoadingMore = _d.threadLoadingMore, threadMessages = _d.threadMessages;
-        var _e = useChannelActionContext('Thread'), closeThread = _e.closeThread, loadMoreThread = _e.loadMoreThread;
+        var _e = useChannelActionContext('Thread'), closeThread = _e.closeThread, loadMoreThread = _e.loadMoreThread, sendMessage = _e.sendMessage;
         var customClasses = useChatContext('Thread').customClasses;
         var _f = useComponentContext('Thread'), ContextInput = _f.ThreadInput, ContextMessage = _f.Message, _g = _f.ThreadHeader, ThreadHeader = _g === void 0 ? DefaultThreadHeader : _g, _h = _f.ThreadStart, ThreadStart = _h === void 0 ? DefaultThreadStart : _h, _j = _f.VirtualMessage, VirtualMessage = _j === void 0 ? FixedHeightMessage : _j;
         var messageList = React.useRef(null);
@@ -48106,15 +48033,19 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 loadMoreThread();
             }
         }, []);
-        React.useEffect(function () {
-            if (messageList.current && (threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.length)) {
-                var _a = messageList.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight, scrollTop = _a.scrollTop;
-                var scrollDown = clientHeight + scrollTop !== scrollHeight;
-                if (scrollDown) {
-                    messageList.current.scrollTop = scrollHeight - clientHeight;
+        var threadSubmitHandler = function (message, _, customMessageData) { return __awaiter$1(void 0, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, sendMessage(message, customMessageData)];
+                    case 1:
+                        _a.sent();
+                        if (messageList.current) {
+                            messageList.current.scrollTop = messageList.current.scrollHeight;
+                        }
+                        return [2 /*return*/];
                 }
-            }
-        }, [threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.length]);
+            });
+        }); };
         if (!thread)
             return null;
         var threadClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.thread) || 'str-chat__thread';
@@ -48124,7 +48055,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
                 React__default['default'].createElement(Message, __assign$2({ initialMessage: true, message: thread, Message: ThreadMessage || FallbackMessage, threadList: true }, additionalParentMessageProps)),
                 React__default['default'].createElement(ThreadStart, null),
                 React__default['default'].createElement(ThreadMessageList, __assign$2({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: ThreadMessage || FallbackMessage, messages: threadMessages || [], threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps)))),
-            React__default['default'].createElement(MessageInput, __assign$2({ focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
+            React__default['default'].createElement(MessageInput, __assign$2({ focus: autoFocus, Input: ThreadInput, overrideSubmitHandler: threadSubmitHandler, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
@@ -48557,19 +48488,17 @@ var StreamChatReact = (function (exports, React, streamChat) {
     var interopRequireWildcard = createCommonjsModule$1(function (module) {
     var _typeof = _typeof_1["default"];
 
-    function _getRequireWildcardCache() {
+    function _getRequireWildcardCache(nodeInterop) {
       if (typeof WeakMap !== "function") return null;
-      var cache = new WeakMap();
-
-      _getRequireWildcardCache = function _getRequireWildcardCache() {
-        return cache;
-      };
-
-      return cache;
+      var cacheBabelInterop = new WeakMap();
+      var cacheNodeInterop = new WeakMap();
+      return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+      })(nodeInterop);
     }
 
-    function _interopRequireWildcard(obj) {
-      if (obj && obj.__esModule) {
+    function _interopRequireWildcard(obj, nodeInterop) {
+      if (!nodeInterop && obj && obj.__esModule) {
         return obj;
       }
 
@@ -48579,7 +48508,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
         };
       }
 
-      var cache = _getRequireWildcardCache();
+      var cache = _getRequireWildcardCache(nodeInterop);
 
       if (cache && cache.has(obj)) {
         return cache.get(obj);
@@ -48589,7 +48518,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
 
       for (var key in obj) {
-        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
           var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
 
           if (desc && (desc.get || desc.set)) {
@@ -48609,8 +48538,7 @@ var StreamChatReact = (function (exports, React, streamChat) {
       return newObj;
     }
 
-    module.exports = _interopRequireWildcard;
-    module.exports["default"] = module.exports, module.exports.__esModule = true;
+    module.exports = _interopRequireWildcard, module.exports.__esModule = true, module.exports["default"] = module.exports;
     });
 
     unwrapExports(interopRequireWildcard);