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

package/dist/index.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ReactPlayer = require('react-player');
-var uuid = require('uuid');
+var nanoid = require('nanoid');
 var sanitizeUrl = require('@braintree/sanitize-url');
 var Dayjs = require('dayjs');
 var calendar = require('dayjs/plugin/calendar');
@@ -1148,7 +1148,7 @@ var renderAttachmentWithinContainer = function (props) {
                     ? '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) || uuid.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.nanoid()) + "-" + ((attachment === null || attachment === void 0 ? void 0 : attachment.type) || 'none') + " " }, children));
 };
 var renderAttachmentActions = function (props) {
     var _a;
@@ -1491,14 +1491,10 @@ var renderText = function (text, mentioned_users, options) {
 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.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);
@@ -1871,10 +1867,14 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
       return _this.textareaRef.selectionEnd;
     });
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "_defaultShouldSubmit", function (event) {
+      return event.key === 'Enter' && !event.shiftKey;
+    });
+
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_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();
     });
@@ -1883,13 +1883,6 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
       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();
@@ -2156,7 +2149,7 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_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];
@@ -2168,8 +2161,7 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_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__default['default'](_assertThisInitialized__default['default'](_this), "_changeHandler", function (e) {
@@ -2375,9 +2367,7 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
       currentTrigger: null,
       data: null,
       dataLoading: false,
-      keycodeSubmitShiftE: false,
       left: null,
-      listenerIndex: {},
       selectionEnd: 0,
       selectionStart: 0,
       top: null,
@@ -2436,7 +2426,10 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
       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
@@ -2458,7 +2451,9 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
         },
         style: style,
         value: value
-      }, this.props.additionalTextareaProps)));
+      }, this.props.additionalTextareaProps, {
+        defaultValue: undefined
+      })));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -2504,7 +2499,6 @@ ReactTextareaAutocomplete.propTypes = {
   dropdownStyle: PropTypes__default['default'].object,
   itemClassName: PropTypes__default['default'].string,
   itemStyle: PropTypes__default['default'].object,
-  keycodeSubmitKeys: PropTypes__default['default'].array,
   listClassName: PropTypes__default['default'].string,
   listStyle: PropTypes__default['default'].object,
   loaderClassName: PropTypes__default['default'].string,
@@ -2515,6 +2509,7 @@ ReactTextareaAutocomplete.propTypes = {
   onCaretPositionChange: PropTypes__default['default'].func,
   onChange: PropTypes__default['default'].func,
   onSelect: PropTypes__default['default'].func,
+  shouldSubmit: PropTypes__default['default'].func,
   style: PropTypes__default['default'].object,
   SuggestionList: PropTypes__default['default'].elementType,
   trigger: triggerPropsCheck,
@@ -2673,7 +2668,7 @@ var useCreateChannelStateContext = function (value) {
                 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
@@ -2684,7 +2679,7 @@ var useCreateChannelStateContext = function (value) {
             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 ({
@@ -3100,7 +3095,7 @@ var showMessageActionsBox = function (actions, inThread) {
     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)
@@ -3119,8 +3114,7 @@ var areMessagePropsEqual = function (prevProps, nextProps) {
         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 = deepequal__default['default'](nextProps.readBy, prevProps.readBy) &&
@@ -3134,7 +3128,7 @@ var areMessagePropsEqual = function (prevProps, nextProps) {
     );
 };
 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)
@@ -3154,7 +3148,7 @@ var areMessageUIPropsEqual = function (prevProps, nextProps) {
         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 &&
@@ -3163,11 +3157,7 @@ var areMessageUIPropsEqual = function (prevProps, nextProps) {
         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; };
@@ -4746,7 +4736,7 @@ var UnMemoizedChatAutoComplete = function (props) {
             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);
 
@@ -5074,7 +5064,7 @@ var useAttachments = function (props, state, dispatch, textareaRef) {
         Array.from(files)
             .slice(0, maxFilesLeft)
             .forEach(function (file) {
-            var id = generateRandomId();
+            var id = nanoid.nanoid();
             if (file.type.startsWith('image/') &&
                 !file.type.endsWith('.photoshop') // photoshop files begin with 'image/'
             ) {
@@ -5325,25 +5315,27 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
                     _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(__assign({}, updatedMessage), { parent: parent }), channel.cid);
-                    return [3 /*break*/, 8];
-                case 6: return [4 /*yield*/, sendMessage(__assign(__assign({}, updatedMessage), { parent: parent }), customMessageData)];
-                case 7:
+                    if (!overrideSubmitHandler) return [3 /*break*/, 7];
+                    return [4 /*yield*/, overrideSubmitHandler(__assign(__assign({}, updatedMessage), { parent: parent }), channel.cid, customMessageData)];
+                case 6:
                     _a.sent();
-                    _a.label = 8;
+                    return [3 /*break*/, 9];
+                case 7: return [4 /*yield*/, sendMessage(__assign(__assign({}, 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; },
@@ -5355,16 +5347,18 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
                         });
                     }
                     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 };
 };
 
-var usePasteHandler = function (uploadNewFiles, insertText) {
+var usePasteHandler = function (uploadNewFiles, insertText, isUploadEnabled) {
     var onPaste = React.useCallback(function (clipboardEvent) {
+        if (!isUploadEnabled)
+            return;
         (function (event) { return __awaiter(void 0, void 0, void 0, function () {
             var items, plainTextPromise, _loop_1, i, state_1, fileLikes, pastedText;
             return __generator(this, function (_a) {
@@ -5414,30 +5408,31 @@ var usePasteHandler = function (uploadNewFiles, insertText) {
 
 var emptyFileUploads = {};
 var emptyImageUploads = {};
+var makeEmptyMessageInputState = function () { return ({
+    attachments: [],
+    emojiPickerIsOpen: false,
+    fileOrder: [],
+    fileUploads: __assign({}, emptyFileUploads),
+    imageOrder: [],
+    imageUploads: __assign({}, 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({}, emptyFileUploads),
-            imageOrder: [],
-            imageUploads: __assign({}, 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.nanoid();
         acc[id] = {
             file: {
                 name: attachment.fallback || '',
@@ -5453,7 +5448,7 @@ var initState = function (message) {
         var type = _a.type;
         return type === 'file';
     }).reduce(function (acc, attachment) {
-        var id = generateRandomId();
+        var id = nanoid.nanoid();
         acc[id] = {
             file: {
                 name: attachment.title || '',
@@ -5495,16 +5490,7 @@ var messageInputReducer = function (state, action) {
         case 'setText':
             return __assign(__assign({}, state), { text: action.getNewText(state.text) });
         case 'clear':
-            return {
-                attachments: [],
-                emojiPickerIsOpen: false,
-                fileOrder: [],
-                fileUploads: __assign({}, emptyFileUploads),
-                imageOrder: [],
-                imageUploads: __assign({}, emptyImageUploads),
-                mentioned_users: [],
-                text: '',
-            };
+            return makeEmptyMessageInputState();
         case 'setImageUpload': {
             var imageAlreadyExists = state.imageUploads[action.id];
             if (!imageAlreadyExists && !action.file)
@@ -5547,9 +5533,14 @@ var messageInputReducer = function (state, action) {
  * 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];
@@ -5572,8 +5563,8 @@ var useMessageInputState = function (props) {
     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 });
     }, []);
@@ -5669,7 +5660,7 @@ var MessageInputFlat = function () {
 };
 
 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
@@ -5716,7 +5707,6 @@ var useCreateMessageInputContext = function (value) {
         imageUploads: imageUploads,
         insertText: insertText,
         isUploadEnabled: isUploadEnabled,
-        keycodeSubmitKeys: keycodeSubmitKeys,
         maxFilesLeft: maxFilesLeft,
         maxRows: maxRows,
         mentionAllAppUsers: mentionAllAppUsers,
@@ -5738,6 +5728,7 @@ var useCreateMessageInputContext = function (value) {
         removeImage: removeImage,
         setCooldownRemaining: setCooldownRemaining,
         setText: setText,
+        shouldSubmit: shouldSubmit,
         showCommandsList: showCommandsList,
         showMentionsList: showMentionsList,
         text: text,
@@ -6148,7 +6139,7 @@ var makeAddNotifications = function (setNotifications, notificationTimeouts) { r
     if (typeof text !== 'string' || (type !== 'success' && type !== 'error')) {
         return;
     }
-    var id = uuid.v4();
+    var id = nanoid.nanoid();
     setNotifications(function (prevNotifications) { return __spreadArray(__spreadArray([], prevNotifications), [{ id: id, text: text, type: type }]); });
     var timeout = setTimeout(function () {
         return setNotifications(function (prevNotifications) {
@@ -6517,7 +6508,7 @@ var ChannelInner = function (props) {
         });
     }); };
     var createMessagePreview = function (text, attachments, parent, mentioned_users) {
-        var clientSideID = client.userID + "-" + uuid.v4();
+        var clientSideID = client.userID + "-" + nanoid.nanoid();
         return __assign({ __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) {
@@ -7277,8 +7268,10 @@ var ChannelPreview = function (props) {
     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 () {
@@ -7315,10 +7308,24 @@ var ChannelPreview = function (props) {
             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({}, props, { active: isActive, displayImage: displayImage, displayTitle: displayTitle, lastMessage: lastMessage, latestMessage: latestMessage, setActiveChannel: setActiveChannel, unread: unread })));
 };
@@ -7651,7 +7658,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default['default'].memo(UnMemoizedChannelList);
 
-var version = '8.1.3-beta.1';
+var version = '9.0.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -8460,10 +8467,10 @@ var processMessages = function (params) {
 var makeDateMessageId = function (date) {
     var idSuffix;
     try {
-        idSuffix = !date ? uuid.v4() : date instanceof Date ? date.toISOString() : date;
+        idSuffix = !date ? nanoid.nanoid() : date instanceof Date ? date.toISOString() : date;
     }
     catch (e) {
-        idSuffix = uuid.v4();
+        idSuffix = nanoid.nanoid();
     }
     return CUSTOM_MESSAGE_TYPE.date + "-" + idSuffix;
 };
@@ -9374,7 +9381,7 @@ var DefaultThreadStart = function () {
 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);
@@ -9387,15 +9394,19 @@ var ThreadInner = function (props) {
             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(void 0, void 0, void 0, function () {
+        return __generator(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';
@@ -9405,7 +9416,7 @@ var ThreadInner = function (props) {
             React__default['default'].createElement(Message, __assign({ initialMessage: true, message: thread, Message: ThreadMessage || FallbackMessage, threadList: true }, additionalParentMessageProps)),
             React__default['default'].createElement(ThreadStart, null),
             React__default['default'].createElement(ThreadMessageList, __assign({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: ThreadMessage || FallbackMessage, messages: threadMessages || [], threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps)))),
-        React__default['default'].createElement(MessageInput, __assign({ focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
+        React__default['default'].createElement(MessageInput, __assign({ focus: autoFocus, Input: ThreadInput, overrideSubmitHandler: threadSubmitHandler, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));
 };
 
 var UnMemoizedWindow = function (props) {