stream-chat-react 6.7.0 → 6.9.0

package/dist/index.cjs.js

@@ -778,24 +778,31 @@ function generateRandomId() {
     // prettier-ignore
     return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
 }
-var smartRender = function (ElementOrComponentOrLiteral, props, fallback) {
-    if (ElementOrComponentOrLiteral === undefined && fallback) {
-        ElementOrComponentOrLiteral = fallback;
+// 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);
+    if (Number.isNaN(code))
+        return '';
+    if (code < 0xd800 || code > 0xdfff)
+        return str.charAt(i);
+    if (0xd800 <= code && code <= 0xdbff) {
+        if (str.length <= i + 1) {
+            throw 'High surrogate without following low surrogate';
+        }
+        var next = str.charCodeAt(i + 1);
+        if (0xdc00 > next || next > 0xdfff) {
+            throw 'High surrogate without following low surrogate';
+        }
+        return str.charAt(i) + str.charAt(i + 1);
     }
-    if (React__default['default'].isValidElement(ElementOrComponentOrLiteral)) {
-        // Flow cast through any, to make flow believe it's a React.Element
-        var element = ElementOrComponentOrLiteral;
-        return element;
+    if (i === 0) {
+        throw 'Low surrogate without preceding high surrogate';
     }
-    // Flow cast through any to remove React.Element after previous check
-    var ComponentOrLiteral = ElementOrComponentOrLiteral;
-    if (typeof ComponentOrLiteral === 'string' ||
-        typeof ComponentOrLiteral === 'number' ||
-        typeof ComponentOrLiteral === 'boolean' ||
-        ComponentOrLiteral == null) {
-        return ComponentOrLiteral;
+    var prev = str.charCodeAt(i - 1);
+    if (0xd800 > prev || prev > 0xdbff) {
+        throw 'Low surrogate without preceding high surrogate';
     }
-    return React__default['default'].createElement(ComponentOrLiteral, __assign({}, props));
+    return '';
 };
 
 var DefaultSuggestionListHeader = function (_a) {
@@ -1377,7 +1384,7 @@ var ReactTextareaAutocomplete = /*#__PURE__*/function (_React$Component) {
             };
           }
 
-          if (!textToReplace.text) {
+          if (!textToReplace.text && currentTrigger !== ':') {
             throw new Error("Output \"text\" is not defined! Object should has shape {text: string, caretPosition: string | number}. Check the implementation for trigger \"".concat(currentTrigger, "\" and its token \"").concat(actualToken, "\"\n"));
           }
 
@@ -1901,7 +1908,8 @@ var Avatar = function (props) {
         setError(false);
         setLoaded(false);
     }, [image]);
-    var initials = ((name === null || name === void 0 ? void 0 : name.toString()) || '').charAt(0);
+    var nameStr = (name === null || name === void 0 ? void 0 : name.toString()) || '';
+    var initials = getWholeChar(nameStr, 0);
     return (React__default['default'].createElement("div", { className: "str-chat__avatar str-chat__avatar--" + shape, "data-testid": 'avatar', onClick: onClick, onMouseOver: onMouseOver, style: {
             flexBasis: size + "px",
             fontSize: size / 2 + "px",
@@ -2018,6 +2026,101 @@ var defaultMinimalEmojis = [
 // use this only for small lists like in ReactionSelector
 var getStrippedEmojiData = function (data) { return (__assign(__assign({}, data), { emojis: {} })); };
 
+var useCreateChannelStateContext = function (value) {
+    var _a;
+    var acceptedFiles = value.acceptedFiles, channel = value.channel, channelConfig = value.channelConfig, error = value.error, hasMore = value.hasMore, loading = value.loading, loadingMore = value.loadingMore, maxNumberOfFiles = value.maxNumberOfFiles, members = value.members, _b = value.messages, messages = _b === void 0 ? [] : _b, multipleUploads = value.multipleUploads, mutes = value.mutes, notifications = value.notifications, pinnedMessages = value.pinnedMessages, quotedMessage = value.quotedMessage, _c = value.read, read = _c === void 0 ? {} : _c, skipMessageDataMemoization = value.skipMessageDataMemoization, thread = value.thread, threadHasMore = value.threadHasMore, threadLoadingMore = value.threadLoadingMore, _d = value.threadMessages, threadMessages = _d === void 0 ? [] : _d, watcherCount = value.watcherCount, watcher_count = value.watcher_count, watchers = value.watchers;
+    var channelId = channel.cid;
+    var lastRead = channel.initialized && ((_a = channel.lastRead()) === null || _a === void 0 ? void 0 : _a.getTime());
+    var membersLength = Object.keys(members || []).length;
+    var notificationsLength = notifications.length;
+    var readUsers = Object.values(read);
+    var readUsersLength = readUsers.length;
+    var readUsersLastReads = readUsers.map(function (_a) {
+        var last_read = _a.last_read;
+        return last_read.toISOString();
+    }).join();
+    var threadMessagesLength = threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.length;
+    var memoizedMessageData = skipMessageDataMemoization
+        ? messages
+        : messages
+            .map(function (_a) {
+            var deleted_at = _a.deleted_at, latest_reactions = _a.latest_reactions, pinned = _a.pinned, reply_count = _a.reply_count, status = _a.status, updated_at = _a.updated_at;
+            return "" + deleted_at + (latest_reactions ? latest_reactions.map(function (_a) {
+                var type = _a.type;
+                return type;
+            }).join() : '') + pinned + reply_count + status + (updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
+                ? updated_at.toISOString()
+                : updated_at || '');
+        })
+            .join();
+    var memoizedThreadMessageData = threadMessages
+        .map(function (_a) {
+        var deleted_at = _a.deleted_at, latest_reactions = _a.latest_reactions, pinned = _a.pinned, status = _a.status, updated_at = _a.updated_at;
+        return "" + deleted_at + (latest_reactions ? latest_reactions.map(function (_a) {
+            var type = _a.type;
+            return type;
+        }).join() : '') + pinned + status + (updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
+            ? updated_at.toISOString()
+            : updated_at || '');
+    })
+        .join();
+    var channelStateContext = React.useMemo(function () { return ({
+        acceptedFiles: acceptedFiles,
+        channel: channel,
+        channelConfig: channelConfig,
+        error: error,
+        hasMore: hasMore,
+        loading: loading,
+        loadingMore: loadingMore,
+        maxNumberOfFiles: maxNumberOfFiles,
+        members: members,
+        messages: messages,
+        multipleUploads: multipleUploads,
+        mutes: mutes,
+        notifications: notifications,
+        pinnedMessages: pinnedMessages,
+        quotedMessage: quotedMessage,
+        read: read,
+        thread: thread,
+        threadHasMore: threadHasMore,
+        threadLoadingMore: threadLoadingMore,
+        threadMessages: threadMessages,
+        watcher_count: watcher_count,
+        watcherCount: watcherCount,
+        watchers: watchers,
+    }); }, [
+        channelId,
+        error,
+        hasMore,
+        lastRead,
+        loading,
+        loadingMore,
+        membersLength,
+        memoizedMessageData,
+        memoizedThreadMessageData,
+        notificationsLength,
+        quotedMessage,
+        readUsersLength,
+        readUsersLastReads,
+        skipMessageDataMemoization,
+        thread,
+        threadHasMore,
+        threadLoadingMore,
+        threadMessagesLength,
+        watcherCount,
+    ]);
+    return channelStateContext;
+};
+
+var useCreateTypingContext = function (value) {
+    var typing = value.typing;
+    var typingValue = Object.keys(typing || {}).join();
+    var typingContext = React.useMemo(function () { return ({
+        typing: typing,
+    }); }, [typingValue]);
+    return typingContext;
+};
+
 var ChatContext = React__default['default'].createContext({});
 var ChatProvider = function (_a) {
     var children = _a.children, value = _a.value;
@@ -3111,7 +3214,7 @@ var usePinHandler = function (message, permissions, notifications) {
     return { canPin: canPin(), handlePin: handlePin };
 };
 
-var reactionHandlerWarning = "Reaction handler was called, but it is missing one of its required arguments. \nMake sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.";
+var reactionHandlerWarning = "Reaction handler was called, but it is missing one of its required arguments.\nMake sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.";
 var useReactionHandler = function (message) {
     var updateMessage = useChannelActionContext().updateMessage;
     var channel = useChannelStateContext().channel;
@@ -3250,14 +3353,12 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
         if (showDetailedReactions && !hasListener.current) {
             hasListener.current = true;
             document.addEventListener('click', closeDetailedReactions);
-            document.addEventListener('touchend', closeDetailedReactions);
             if (messageWrapper) {
                 messageWrapper.addEventListener('mouseleave', closeDetailedReactions);
             }
         }
         if (!showDetailedReactions && hasListener.current) {
             document.removeEventListener('click', closeDetailedReactions);
-            document.removeEventListener('touchend', closeDetailedReactions);
             if (messageWrapper) {
                 messageWrapper.removeEventListener('mouseleave', closeDetailedReactions);
             }
@@ -3266,7 +3367,6 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
         return function () {
             if (hasListener.current) {
                 document.removeEventListener('click', closeDetailedReactions);
-                document.removeEventListener('touchend', closeDetailedReactions);
                 if (messageWrapper) {
                     messageWrapper.removeEventListener('mouseleave', closeDetailedReactions);
                 }
@@ -3278,7 +3378,6 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
         var messageWrapper = messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current;
         if (messageDeleted && hasListener.current) {
             document.removeEventListener('click', closeDetailedReactions);
-            document.removeEventListener('touchend', closeDetailedReactions);
             if (messageWrapper) {
                 messageWrapper.removeEventListener('mouseleave', closeDetailedReactions);
             }
@@ -3516,6 +3615,85 @@ var useEmojiTrigger = function (emojiIndex) { return ({
     }); },
 }); };
 
+var accentsMap = {
+    a: 'á|à|ã|â|À|Á|Ã|Â',
+    c: 'ç|Ç',
+    e: 'é|è|ê|É|È|Ê',
+    i: 'í|ì|î|Í|Ì|Î',
+    n: 'ñ|Ñ',
+    o: 'ó|ò|ô|õ|Ó|Ò|Ô|Õ',
+    u: 'ú|ù|û|ü|Ú|Ù|Û|Ü',
+};
+var removeDiacritics = function (text) {
+    if (!text)
+        return '';
+    return Object.keys(accentsMap).reduce(function (acc, current) { return acc.replace(new RegExp(accentsMap[current], 'g'), current); }, text);
+};
+var calculateLevenshtein = function (query, name) {
+    if (query.length === 0)
+        return name.length;
+    if (name.length === 0)
+        return query.length;
+    var matrix = [];
+    var i;
+    for (i = 0; i <= name.length; i++) {
+        matrix[i] = [i];
+    }
+    var j;
+    for (j = 0; j <= query.length; j++) {
+        matrix[0][j] = j;
+    }
+    for (i = 1; i <= name.length; i++) {
+        for (j = 1; j <= query.length; j++) {
+            if (name.charAt(i - 1) === query.charAt(j - 1)) {
+                matrix[i][j] = matrix[i - 1][j - 1];
+            }
+            else {
+                matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // substitution
+                Math.min(matrix[i][j - 1] + 1, // insertion
+                matrix[i - 1][j] + 1)); // deletion
+            }
+        }
+    }
+    return matrix[name.length][query.length];
+};
+var searchLocalUsers = function (params) {
+    var ownUserId = params.ownUserId, query = params.query, useMentionsTransliteration = params.useMentionsTransliteration, users = params.users;
+    var matchingUsers = users.filter(function (user) {
+        if (user.id === ownUserId)
+            return false;
+        if (!query)
+            return true;
+        var updatedId = removeDiacritics(user.id).toLowerCase();
+        var updatedName = removeDiacritics(user.name).toLowerCase();
+        var updatedQuery = removeDiacritics(query).toLowerCase();
+        if (useMentionsTransliteration) {
+            (function () { return __awaiter(void 0, void 0, void 0, function () {
+                var transliterate;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@sindresorhus/transliterate')); })];
+                        case 1:
+                            transliterate = (_a.sent()).default;
+                            updatedName = transliterate(user.name || '').toLowerCase();
+                            updatedQuery = transliterate(query).toLowerCase();
+                            updatedId = transliterate(user.id).toLowerCase();
+                            return [2 /*return*/];
+                    }
+                });
+            }); })();
+        }
+        if (updatedName) {
+            var levenshtein_1 = calculateLevenshtein(updatedQuery, updatedName);
+            if (updatedName.includes(updatedQuery) || levenshtein_1 <= 3)
+                return true;
+        }
+        var levenshtein = calculateLevenshtein(updatedQuery, updatedId);
+        return updatedId.includes(updatedQuery) || levenshtein <= 3;
+    });
+    return matchingUsers;
+};
+
 /**
  * UI component for mentions rendered in suggestion list
  */
@@ -3538,7 +3716,7 @@ var UnMemoizedUserItem = function (props) {
 var UserItem = React__default['default'].memo(UnMemoizedUserItem);
 
 var useUserTrigger = function (params) {
-    var disableMentions = params.disableMentions, mentionAllAppUsers = params.mentionAllAppUsers, _a = params.mentionQueryParams, mentionQueryParams = _a === void 0 ? {} : _a, onSelectUser = params.onSelectUser;
+    var disableMentions = params.disableMentions, mentionAllAppUsers = params.mentionAllAppUsers, _a = params.mentionQueryParams, mentionQueryParams = _a === void 0 ? {} : _a, onSelectUser = params.onSelectUser, useMentionsTransliteration = params.useMentionsTransliteration;
     var _b = React.useState(false), searching = _b[0], setSearching = _b[1];
     var _c = useChatContext(), client = _c.client, mutes = _c.mutes;
     var channel = useChannelStateContext().channel;
@@ -3622,14 +3800,22 @@ var useUserTrigger = function (params) {
     return {
         callback: function (item) { return onSelectUser(item); },
         component: UserItem,
-        dataProvider: function (query, _, onReady) {
+        dataProvider: function (query, text, onReady) {
             var _a;
             if (disableMentions)
                 return;
             var filterMutes = function (data) {
+                if (text.includes('/unmute') && !mutes.length) {
+                    return [];
+                }
                 if (!mutes.length)
                     return data;
-                return data.filter(function (suggestion) { return mutes.some(function (mute) { return mute.target.id === suggestion.id; }); });
+                if (text.includes('/unmute')) {
+                    return data.filter(function (suggestion) {
+                        return mutes.some(function (mute) { return mute.target.id === suggestion.id; });
+                    });
+                }
+                return data.filter(function (suggestion) { return mutes.every(function (mute) { return mute.target.id !== suggestion.id; }); });
             };
             if (mentionAllAppUsers) {
                 return queryUsersThrottled(query, function (data) {
@@ -3645,16 +3831,13 @@ var useUserTrigger = function (params) {
              */
             if (!query || Object.values(members || {}).length < 100) {
                 var users = getMembersAndWatchers();
-                var matchingUsers = users.filter(function (user) {
-                    if (user.id === client.userID)
-                        return false;
-                    if (!query)
-                        return true;
-                    if (user.name !== undefined && user.name.toLowerCase().includes(query.toLowerCase())) {
-                        return true;
-                    }
-                    return user.id.toLowerCase().includes(query.toLowerCase());
-                });
+                var params_1 = {
+                    ownUserId: client.userID,
+                    query: query,
+                    useMentionsTransliteration: useMentionsTransliteration,
+                    users: users,
+                };
+                var matchingUsers = searchLocalUsers(params_1);
                 var usersToShow = ((_a = mentionQueryParams.options) === null || _a === void 0 ? void 0 : _a.limit) || 10;
                 var data = matchingUsers.slice(0, usersToShow);
                 if (onReady)
@@ -3701,6 +3884,7 @@ var DefaultTriggerProvider = function (_a) {
             mentionAllAppUsers: currentValue.mentionAllAppUsers,
             mentionQueryParams: currentValue.mentionQueryParams,
             onSelectUser: currentValue.onSelectUser,
+            useMentionsTransliteration: currentValue.useMentionsTransliteration,
         }),
     };
     var newValue = __assign(__assign({}, currentValue), { autocompleteTriggers: defaultAutocompleteTriggers });
@@ -4198,7 +4382,7 @@ var useAttachments = function (props, state, dispatch) {
 
 var useMessageInputText = function (props, state, dispatch) {
     var channel = useChannelStateContext().channel;
-    var additionalTextareaProps = props.additionalTextareaProps, focus = props.focus, parent = props.parent, publishTypingEvent = props.publishTypingEvent;
+    var additionalTextareaProps = props.additionalTextareaProps, focus = props.focus, parent = props.parent, _a = props.publishTypingEvent, publishTypingEvent = _a === void 0 ? true : _a;
     var text = state.text;
     var textareaRef = React.useRef();
     // Focus
@@ -4399,10 +4583,11 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
                         text: text,
                     };
                     if (!message) return [3 /*break*/, 5];
+                    delete message.i18n;
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, editMessage(__assign(__assign({}, updatedMessage), { id: message.id }))];
+                    return [4 /*yield*/, editMessage(__assign(__assign({}, message), updatedMessage))];
                 case 2:
                     _a.sent();
                     if (clearEditingState)
@@ -4516,6 +4701,7 @@ var initState = function (message) {
             imageOrder: [],
             imageUploads: __assign({}, emptyImageUploads),
             mentioned_users: [],
+            setText: function () { return null; },
             text: '',
         };
     }
@@ -4567,6 +4753,7 @@ var initState = function (message) {
         imageOrder: imageOrder,
         imageUploads: imageUploads,
         mentioned_users: mentioned_users,
+        setText: function () { return null; },
         text: message.text || '',
     };
 };
@@ -4655,12 +4842,15 @@ var useMessageInputState = function (props) {
     var onSelectUser = React.useCallback(function (item) {
         dispatch({ type: 'addMentionedUser', user: item });
     }, []);
+    var setText = React.useCallback(function (text) {
+        dispatch({ getNewText: function () { return text; }, type: 'setText' });
+    }, []);
     return __assign(__assign({}, state), { closeCommandsList: closeCommandsList, 
         /**
          * TODO: fix the below at some point because this type casting is wrong
          * and just forced to not have warnings currently with the unknown casting
          */
-        closeEmojiPicker: closeEmojiPicker, emojiIndex: useEmojiIndex(), emojiPickerRef: emojiPickerRef, handleChange: handleChange, handleEmojiKeyDown: handleEmojiKeyDown, handleSubmit: handleSubmit, insertText: insertText, isUploadEnabled: isUploadEnabled, maxFilesLeft: maxFilesLeft, numberOfUploads: numberOfUploads, onPaste: onPaste, onSelectEmoji: onSelectEmoji, onSelectUser: onSelectUser, openCommandsList: openCommandsList, openEmojiPicker: openEmojiPicker, removeFile: removeFile, removeImage: removeImage, showCommandsList: showCommandsList, textareaRef: textareaRef, uploadFile: uploadFile, uploadImage: uploadImage, uploadNewFiles: uploadNewFiles });
+        closeEmojiPicker: closeEmojiPicker, emojiIndex: useEmojiIndex(), emojiPickerRef: emojiPickerRef, handleChange: handleChange, handleEmojiKeyDown: handleEmojiKeyDown, handleSubmit: handleSubmit, insertText: insertText, isUploadEnabled: isUploadEnabled, maxFilesLeft: maxFilesLeft, numberOfUploads: numberOfUploads, onPaste: onPaste, onSelectEmoji: onSelectEmoji, onSelectUser: onSelectUser, openCommandsList: openCommandsList, openEmojiPicker: openEmojiPicker, removeFile: removeFile, removeImage: removeImage, setText: setText, showCommandsList: showCommandsList, textareaRef: textareaRef, uploadFile: uploadFile, uploadImage: uploadImage, uploadNewFiles: uploadNewFiles });
 };
 
 var QuotedMessagePreviewHeader = function () {
@@ -4722,13 +4912,101 @@ var MessageInputFlat = function () {
                 !cooldownRemaining && React__default['default'].createElement(SendButton$1, { sendMessage: handleSubmit })))));
 };
 
+var useCreateMessageInputContext = function (value) {
+    var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeEmojiPicker = value.closeEmojiPicker, cooldownInterval = value.cooldownInterval, 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, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, showCommandsList = value.showCommandsList, 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
+        .map(function (_a) {
+        _a[0]; var value = _a[1];
+        return value.state;
+    })
+        .join();
+    var imageUploadsValue = Object.entries(imageUploads)
+        // eslint-disable-next-line
+        .map(function (_a) {
+        _a[0]; var value = _a[1];
+        return value.state;
+    })
+        .join();
+    var mentionedUsersLength = mentioned_users.length;
+    var parentId = parent === null || parent === void 0 ? void 0 : parent.id;
+    var messageInputContext = React.useMemo(function () { return ({
+        additionalTextareaProps: additionalTextareaProps,
+        attachments: attachments,
+        autocompleteTriggers: autocompleteTriggers,
+        clearEditingState: clearEditingState,
+        closeCommandsList: closeCommandsList,
+        closeEmojiPicker: closeEmojiPicker,
+        cooldownInterval: cooldownInterval,
+        disabled: disabled,
+        disableMentions: disableMentions,
+        doFileUploadRequest: doFileUploadRequest,
+        doImageUploadRequest: doImageUploadRequest,
+        emojiIndex: emojiIndex,
+        emojiPickerIsOpen: emojiPickerIsOpen,
+        emojiPickerRef: emojiPickerRef,
+        errorHandler: errorHandler,
+        fileOrder: fileOrder,
+        fileUploads: fileUploads,
+        focus: focus,
+        grow: grow,
+        handleChange: handleChange,
+        handleEmojiKeyDown: handleEmojiKeyDown,
+        handleSubmit: handleSubmit,
+        imageOrder: imageOrder,
+        imageUploads: imageUploads,
+        insertText: insertText,
+        isUploadEnabled: isUploadEnabled,
+        keycodeSubmitKeys: keycodeSubmitKeys,
+        maxFilesLeft: maxFilesLeft,
+        maxRows: maxRows,
+        mentionAllAppUsers: mentionAllAppUsers,
+        mentioned_users: mentioned_users,
+        mentionQueryParams: mentionQueryParams,
+        message: message,
+        noFiles: noFiles,
+        numberOfUploads: numberOfUploads,
+        onPaste: onPaste,
+        onSelectEmoji: onSelectEmoji,
+        onSelectUser: onSelectUser,
+        openCommandsList: openCommandsList,
+        openEmojiPicker: openEmojiPicker,
+        overrideSubmitHandler: overrideSubmitHandler,
+        parent: parent,
+        publishTypingEvent: publishTypingEvent,
+        removeFile: removeFile,
+        removeImage: removeImage,
+        setCooldownRemaining: setCooldownRemaining,
+        setText: setText,
+        showCommandsList: showCommandsList,
+        text: text,
+        textareaRef: textareaRef,
+        uploadFile: uploadFile,
+        uploadImage: uploadImage,
+        uploadNewFiles: uploadNewFiles,
+        useMentionsTransliteration: useMentionsTransliteration,
+    }); }, [
+        editing,
+        emojiPickerIsOpen,
+        fileUploadsValue,
+        imageUploadsValue,
+        isUploadEnabled,
+        mentionedUsersLength,
+        parentId,
+        publishTypingEvent,
+        text,
+    ]);
+    return messageInputContext;
+};
+
 var UnMemoizedMessageInput = function (props) {
     var PropInput = props.Input;
     var _a = useComponentContext(), ContextInput = _a.Input, _b = _a.TriggerProvider, TriggerProvider = _b === void 0 ? DefaultTriggerProvider : _b;
     var Input = PropInput || ContextInput || MessageInputFlat;
     var messageInputState = useMessageInputState(props);
     var cooldownTimerState = useCooldownTimer();
-    var messageInputContextValue = __assign(__assign(__assign({}, cooldownTimerState), messageInputState), props);
+    var messageInputContextValue = useCreateMessageInputContext(__assign(__assign(__assign({}, cooldownTimerState), messageInputState), props));
     return (React__default['default'].createElement(MessageInputContextProvider, { value: messageInputContextValue },
         React__default['default'].createElement(TriggerProvider, null,
             React__default['default'].createElement(Input, null))));
@@ -5120,7 +5398,7 @@ var UnMemoizedChannel = function (props) {
     return React__default['default'].createElement(ChannelInner, __assign({}, props, { channel: channel, key: channel.cid }));
 };
 var ChannelInner = function (props) {
-    var acceptedFiles = props.acceptedFiles, channel = props.channel, children = props.children, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _a = props.emojiData, emojiData = _a === void 0 ? defaultEmojiData : _a, _b = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _b === void 0 ? LoadingErrorIndicator : _b, _c = props.LoadingIndicator, LoadingIndicator$1 = _c === void 0 ? LoadingIndicator : _c, maxNumberOfFiles = props.maxNumberOfFiles, _d = props.multipleUploads, multipleUploads = _d === void 0 ? true : _d, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover;
+    var acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, children = props.children, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _a = props.emojiData, emojiData = _a === void 0 ? defaultEmojiData : _a, _b = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _b === void 0 ? LoadingErrorIndicator : _b, _c = props.LoadingIndicator, LoadingIndicator$1 = _c === void 0 ? LoadingIndicator : _c, maxNumberOfFiles = props.maxNumberOfFiles, _d = props.multipleUploads, multipleUploads = _d === void 0 ? true : _d, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover, skipMessageDataMemoization = props.skipMessageDataMemoization;
     var _e = useChatContext(), client = _e.client, customClasses = _e.customClasses, mutes = _e.mutes, theme = _e.theme, useImageFlagEmojisOnWindows = _e.useImageFlagEmojisOnWindows;
     var t = useTranslationContext().t;
     var _f = React.useState([]), notifications = _f[0], setNotifications = _f[1];
@@ -5138,14 +5416,12 @@ var ChannelInner = function (props) {
         emojiData: emojiData,
         emojiSetDef: emojiSetDef,
     };
-    var throttledCopyStateFromChannel = React.useCallback(throttle__default['default'](function () {
-        if (!channel)
-            return;
-        dispatch({ channel: channel, type: 'copyStateFromChannelOnEvent' });
-    }, 500, { leading: true, trailing: true }), [channel]);
-    var markRead = React.useCallback(function () {
-        var _a;
-        if (!channel || channel.disconnected || !((_a = channel.getConfig()) === null || _a === void 0 ? void 0 : _a.read_events)) {
+    var throttledCopyStateFromChannel = throttle__default['default'](function () { return dispatch({ channel: channel, type: 'copyStateFromChannelOnEvent' }); }, 500, {
+        leading: true,
+        trailing: true,
+    });
+    var markRead = function () {
+        if (channel.disconnected || !(channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.read_events)) {
             return;
         }
         lastRead.current = new Date();
@@ -5158,10 +5434,10 @@ var ChannelInner = function (props) {
         if (originalTitle.current) {
             document.title = originalTitle.current;
         }
-    }, [channel, doMarkReadRequest]);
-    var markReadThrottled = React.useCallback(throttle__default['default'](markRead, 500, { leading: true, trailing: true }), [markRead]);
-    var handleEvent = React.useCallback(function (event) {
-        var _a, _b, _c, _d, _e;
+    };
+    var markReadThrottled = throttle__default['default'](markRead, 500, { leading: true, trailing: true });
+    var handleEvent = function (event) {
+        var _a, _b, _c, _d;
         if (event.message) {
             dispatch({
                 channel: channel,
@@ -5170,11 +5446,7 @@ var ChannelInner = function (props) {
             });
         }
         if (event.type === 'typing.start' || event.type === 'typing.stop') {
-            dispatch({
-                channel: channel,
-                type: 'setTyping',
-            });
-            return;
+            return dispatch({ channel: channel, type: 'setTyping' });
         }
         if (event.type === 'connection.changed' && typeof event.online === 'boolean') {
             online.current = event.online;
@@ -5188,29 +5460,33 @@ var ChannelInner = function (props) {
                 if (!document.hidden) {
                     markReadThrottled();
                 }
-                else if (((_e = channel.getConfig()) === null || _e === void 0 ? void 0 : _e.read_events) && !channel.muteStatus().muted) {
+                else if ((channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.read_events) && !channel.muteStatus().muted) {
                     var unread = channel.countUnread(lastRead.current);
-                    document.title = "(" + unread + ") " + originalTitle.current;
+                    if (activeUnreadHandler) {
+                        activeUnreadHandler(unread, originalTitle.current);
+                    }
+                    else {
+                        document.title = "(" + unread + ") " + originalTitle.current;
+                    }
                 }
             }
         }
         throttledCopyStateFromChannel();
-    }, [channel, client.userID, markReadThrottled, throttledCopyStateFromChannel]);
+    };
     // useLayoutEffect here to prevent spinner. Use Suspense when it is available in stable release
     React.useLayoutEffect(function () {
         var errored = false;
         var done = false;
         var onVisibilityChange = function () {
-            if (!document.hidden) {
+            if (!document.hidden)
                 markRead();
-            }
         };
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var e_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!(channel && !channel.initialized)) return [3 /*break*/, 4];
+                        if (!!channel.initialized) return [3 /*break*/, 4];
                         _a.label = 1;
                     case 1:
                         _a.trys.push([1, 3, , 4]);
@@ -5226,7 +5502,7 @@ var ChannelInner = function (props) {
                     case 4:
                         done = true;
                         originalTitle.current = document.title;
-                        if (channel && !errored) {
+                        if (!errored) {
                             dispatch({ channel: channel, type: 'initStateFromChannel' });
                             if (channel.countUnread() > 0)
                                 markRead();
@@ -5246,15 +5522,14 @@ var ChannelInner = function (props) {
             if (errored || !done)
                 return;
             document.removeEventListener('visibilitychange', onVisibilityChange);
-            if (channel)
-                channel.off(handleEvent);
+            channel === null || channel === void 0 ? void 0 : channel.off(handleEvent);
             client.off('connection.changed', handleEvent);
             client.off('connection.recovered', handleEvent);
             client.off('user.updated', handleEvent);
             client.off('user.deleted', handleEvent);
             notificationTimeouts.forEach(clearTimeout);
         };
-    }, [channel, client, handleEvent, markRead]);
+    }, [channel.cid]);
     React.useEffect(function () {
         var _a;
         if (state.thread && ((_a = state.messages) === null || _a === void 0 ? void 0 : _a.length)) {
@@ -5281,17 +5556,15 @@ var ChannelInner = function (props) {
         }, 5000);
         notificationTimeouts.push(timeout);
     };
-    var loadMoreFinished = React.useCallback(debounce__default['default'](function (hasMore, messages) {
+    var loadMoreFinished = debounce__default['default'](function (hasMore, messages) {
         if (!isMounted.current)
             return;
         dispatch({ hasMore: hasMore, messages: messages, type: 'loadMoreFinished' });
     }, 2000, {
         leading: true,
         trailing: true,
-    }), []);
-    var loadMore = React.useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-inferrable-types
-    function (limit) {
+    });
+    var loadMore = function (limit) {
         if (limit === void 0) { limit = 100; }
         return __awaiter(void 0, void 0, void 0, function () {
             var oldestMessage, oldestID, perPage, queryResponse, e_2, hasMoreMessages;
@@ -5299,7 +5572,7 @@ var ChannelInner = function (props) {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        if (!online.current || !window.navigator.onLine || !channel)
+                        if (!online.current || !window.navigator.onLine)
                             return [2 /*return*/, 0];
                         oldestMessage = (_a = state === null || state === void 0 ? void 0 : state.messages) === null || _a === void 0 ? void 0 : _a[0];
                         if (state.loadingMore || (oldestMessage === null || oldestMessage === void 0 ? void 0 : oldestMessage.status) !== 'received')
@@ -5334,27 +5607,22 @@ var ChannelInner = function (props) {
                 }
             });
         });
-    }, [channel, loadMoreFinished, online, state.loadingMore, state.messages]);
-    var updateMessage = React.useCallback(function (updatedMessage) {
-        if (!channel)
-            return;
-        // adds the message to the local channel state..
-        // this adds to both the main channel state as well as any reply threads
+    };
+    var updateMessage = function (updatedMessage) {
+        // add the message to the local channel state
         channel.state.addMessageSorted(updatedMessage, true);
         dispatch({
             channel: channel,
             parentId: state.thread && updatedMessage.parent_id,
             type: 'copyMessagesFromChannel',
         });
-    }, [channel, state.thread]);
+    };
     var isUserResponseArray = function (output) { var _a; return ((_a = output[0]) === null || _a === void 0 ? void 0 : _a.id) != null; };
-    var doSendMessage = React.useCallback(function (message, customMessageData) { return __awaiter(void 0, void 0, void 0, function () {
+    var doSendMessage = function (message, customMessageData) { return __awaiter(void 0, void 0, void 0, function () {
         var attachments, id, _a, mentioned_users, parent_id, text, mentions, messageData, messageResponse, error_1, stringError, parsedError;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    if (!channel)
-                        return [2 /*return*/];
                     attachments = message.attachments, id = message.id, _a = message.mentioned_users, mentioned_users = _a === void 0 ? [] : _a, parent_id = message.parent_id, text = message.text;
                     mentions = isUserResponseArray(mentioned_users)
                         ? mentioned_users.map(function (_a) {
@@ -5378,7 +5646,7 @@ var ChannelInner = function (props) {
                     _b.label = 5;
                 case 5:
                     // replace it after send is completed
-                    if (messageResponse && messageResponse.message) {
+                    if (messageResponse === null || messageResponse === void 0 ? void 0 : messageResponse.message) {
                         updateMessage(__assign(__assign({}, messageResponse.message), { status: 'received' }));
                     }
                     if (quotedMessage)
@@ -5393,25 +5661,20 @@ var ChannelInner = function (props) {
                 case 7: return [2 /*return*/];
             }
         });
-    }); }, [channel, doSendMessageRequest, quotedMessage, updateMessage]);
-    var createMessagePreview = React.useCallback(function (text, attachments, parent, mentioned_users) {
-        // create a preview of the message
+    }); };
+    var createMessagePreview = function (text, attachments, parent, mentioned_users) {
         var clientSideID = client.userID + "-" + uuid.v4();
         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));
-    }, [client.user, client.userID]);
-    var sendMessage = React.useCallback(function (_a, customMessageData) {
+    };
+    var sendMessage = function (_a, customMessageData) {
         var _b = _a.attachments, attachments = _b === void 0 ? [] : _b, _c = _a.mentioned_users, mentioned_users = _c === void 0 ? [] : _c, _d = _a.parent, parent = _d === void 0 ? undefined : _d, _e = _a.text, text = _e === void 0 ? '' : _e;
         return __awaiter(void 0, void 0, void 0, function () {
             var messagePreview;
             return __generator(this, function (_f) {
                 switch (_f.label) {
                     case 0:
-                        if (!channel)
-                            return [2 /*return*/];
-                        // remove error messages upon submit
                         channel.state.filterErrorMessages();
                         messagePreview = createMessagePreview(text, attachments, parent, mentioned_users);
-                        // first we add the message to the UI
                         updateMessage(messagePreview);
                         return [4 /*yield*/, doSendMessage(messagePreview, customMessageData)];
                     case 1:
@@ -5420,62 +5683,55 @@ var ChannelInner = function (props) {
                 }
             });
         });
-    }, [channel === null || channel === void 0 ? void 0 : channel.state, createMessagePreview, doSendMessage, updateMessage]);
-    var retrySendMessage = React.useCallback(function (message) { return __awaiter(void 0, void 0, void 0, function () {
+    };
+    var retrySendMessage = function (message) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    // set the message status to sending
                     updateMessage(__assign(__assign({}, message), { errorStatusCode: undefined, status: 'sending' }));
-                    // actually try to send the message...
                     return [4 /*yield*/, doSendMessage(message)];
                 case 1:
-                    // actually try to send the message...
                     _a.sent();
                     return [2 /*return*/];
             }
         });
-    }); }, [doSendMessage, updateMessage]);
-    var removeMessage = React.useCallback(function (message) {
-        if (!channel)
-            return;
+    }); };
+    var removeMessage = function (message) {
         channel.state.removeMessage(message);
         dispatch({
             channel: channel,
             parentId: state.thread && message.parent_id,
             type: 'copyMessagesFromChannel',
         });
-    }, [channel, state.thread]);
+    };
     /** THREAD */
-    var openThread = React.useCallback(function (message, event) {
-        if (!channel)
-            return;
-        if (event && event.preventDefault) {
-            event.preventDefault();
-        }
+    var openThread = function (message, event) {
+        event.preventDefault();
         dispatch({ channel: channel, message: message, type: 'openThread' });
-    }, [channel]);
-    var loadMoreThreadFinished = React.useCallback(debounce__default['default'](function (threadHasMore, threadMessages) {
+    };
+    var closeThread = function (event) {
+        event.preventDefault();
+        dispatch({ type: 'closeThread' });
+    };
+    var loadMoreThreadFinished = debounce__default['default'](function (threadHasMore, threadMessages) {
         dispatch({
             threadHasMore: threadHasMore,
             threadMessages: threadMessages,
             type: 'loadMoreThreadFinished',
         });
-    }, 2000, { leading: true, trailing: true }), []);
-    var loadMoreThread = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+    }, 2000, { leading: true, trailing: true });
+    var loadMoreThread = function () { return __awaiter(void 0, void 0, void 0, function () {
         var parentID, oldMessages, oldestMessageID, limit, queryResponse, threadHasMoreMessages, newThreadMessages;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    // prevent duplicate loading events...
-                    if (!channel || state.threadLoadingMore || !state.thread)
+                    if (state.threadLoadingMore || !state.thread)
                         return [2 /*return*/];
                     dispatch({ type: 'startLoadingThread' });
                     parentID = state.thread.id;
                     if (!parentID) {
-                        dispatch({ type: 'closeThread' });
-                        return [2 /*return*/];
+                        return [2 /*return*/, dispatch({ type: 'closeThread' })];
                     }
                     oldMessages = channel.state.threads[parentID] || [];
                     oldestMessageID = (_a = oldMessages[0]) === null || _a === void 0 ? void 0 : _a.id;
@@ -5491,7 +5747,7 @@ var ChannelInner = function (props) {
                     queryResponse = _b.sent();
                     threadHasMoreMessages = queryResponse.messages.length === limit;
                     newThreadMessages = channel.state.threads[parentID] || [];
-                    // next set loadingMore to false so we can start asking for more data...
+                    // next set loadingMore to false so we can start asking for more data
                     loadMoreThreadFinished(threadHasMoreMessages, newThreadMessages);
                     return [3 /*break*/, 4];
                 case 3:
@@ -5501,18 +5757,12 @@ var ChannelInner = function (props) {
                 case 4: return [2 /*return*/];
             }
         });
-    }); }, [channel, loadMoreThreadFinished, state.thread, state.threadLoadingMore]);
-    var closeThread = React.useCallback(function (event) {
-        if (event && event.preventDefault) {
-            event.preventDefault();
-        }
-        dispatch({ type: 'closeThread' });
-    }, []);
+    }); };
     var onMentionsHoverOrClick = useMentionsHandlers(onMentionsHover, onMentionsClick);
     var editMessage = useEditMessageHandler(doUpdateMessageRequest);
     var typing = state.typing, restState = __rest(state, ["typing"]);
-    var channelStateContextValue = __assign(__assign({}, restState), { acceptedFiles: acceptedFiles, channel: channel, channelConfig: channelConfig, maxNumberOfFiles: maxNumberOfFiles, multipleUploads: multipleUploads, mutes: mutes, notifications: notifications, quotedMessage: quotedMessage, watcher_count: state.watcherCount });
-    var channelActionContextValue = {
+    var channelStateContextValue = useCreateChannelStateContext(__assign(__assign({}, restState), { acceptedFiles: acceptedFiles, channel: channel, channelConfig: channelConfig, maxNumberOfFiles: maxNumberOfFiles, multipleUploads: multipleUploads, mutes: mutes, notifications: notifications, quotedMessage: quotedMessage, watcher_count: state.watcherCount }));
+    var channelActionContextValue = React.useMemo(function () { return ({
         addNotification: addNotification,
         closeThread: closeThread,
         dispatch: dispatch,
@@ -5526,8 +5776,9 @@ var ChannelInner = function (props) {
         retrySendMessage: retrySendMessage,
         sendMessage: sendMessage,
         setQuotedMessage: setQuotedMessage,
+        skipMessageDataMemoization: skipMessageDataMemoization,
         updateMessage: updateMessage,
-    };
+    }); }, [channel.cid, loadMore, quotedMessage]);
     var componentContextValue = React.useMemo(function () { return ({
         Attachment: props.Attachment || Attachment,
         AutocompleteSuggestionHeader: props.AutocompleteSuggestionHeader,
@@ -5571,13 +5822,13 @@ var ChannelInner = function (props) {
         EmojiIndex: props.EmojiIndex,
         EmojiPicker: props.EmojiPicker,
     }); }, []);
-    var typingContextValue = {
+    var typingContextValue = useCreateTypingContext({
         typing: typing,
-    };
+    });
     var chatClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) || 'str-chat';
     var channelClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.channel) || 'str-chat-channel';
     var windowsEmojiClass = useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
-        ? ' str-chat--windows-flags'
+        ? 'str-chat--windows-flags'
         : '';
     if (state.error) {
         return (React__default['default'].createElement("div", { className: chatClass + " " + channelClass + " " + theme },
@@ -5587,7 +5838,7 @@ var ChannelInner = function (props) {
         return (React__default['default'].createElement("div", { className: chatClass + " " + channelClass + " " + theme },
             React__default['default'].createElement(LoadingIndicator$1, { size: 25 })));
     }
-    if (!(channel === null || channel === void 0 ? void 0 : channel.watch)) {
+    if (!channel.watch) {
         return (React__default['default'].createElement("div", { className: chatClass + " " + channelClass + " " + theme },
             React__default['default'].createElement("div", null, t('Channel Missing'))));
     }
@@ -5881,7 +6132,8 @@ var useMobileNavigation = function (channelListRef, navOpen, closeMobileNav) {
     }, [channelListRef, closeMobileNav, navOpen]);
 };
 
-var useNotificationAddedToChannelListener = function (setChannels, customHandler) {
+var useNotificationAddedToChannelListener = function (setChannels, customHandler, allowNewMessagesFromUnfilteredChannels) {
+    if (allowNewMessagesFromUnfilteredChannels === void 0) { allowNewMessagesFromUnfilteredChannels = true; }
     var client = useChatContext().client;
     React.useEffect(function () {
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
@@ -5894,7 +6146,7 @@ var useNotificationAddedToChannelListener = function (setChannels, customHandler
                         customHandler(setChannels, event);
                         return [3 /*break*/, 3];
                     case 1:
-                        if (!((_a = event.channel) === null || _a === void 0 ? void 0 : _a.type)) return [3 /*break*/, 3];
+                        if (!(allowNewMessagesFromUnfilteredChannels && ((_a = event.channel) === null || _a === void 0 ? void 0 : _a.type))) return [3 /*break*/, 3];
                         return [4 /*yield*/, getChannel(client, event.channel.type, event.channel.id)];
                     case 2:
                         channel_1 = _b.sent();
@@ -5911,7 +6163,8 @@ var useNotificationAddedToChannelListener = function (setChannels, customHandler
     }, [customHandler]);
 };
 
-var useNotificationMessageNewListener = function (setChannels, customHandler, setOffset) {
+var useNotificationMessageNewListener = function (setChannels, customHandler, allowNewMessagesFromUnfilteredChannels) {
+    if (allowNewMessagesFromUnfilteredChannels === void 0) { allowNewMessagesFromUnfilteredChannels = true; }
     var client = useChatContext().client;
     React.useEffect(function () {
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
@@ -5924,16 +6177,13 @@ var useNotificationMessageNewListener = function (setChannels, customHandler, se
                         customHandler(setChannels, event);
                         return [3 /*break*/, 3];
                     case 1:
-                        if (!((_a = event.channel) === null || _a === void 0 ? void 0 : _a.type)) return [3 /*break*/, 3];
+                        if (!(allowNewMessagesFromUnfilteredChannels && ((_a = event.channel) === null || _a === void 0 ? void 0 : _a.type))) return [3 /*break*/, 3];
                         return [4 /*yield*/, getChannel(client, event.channel.type, event.channel.id)];
                     case 2:
                         channel_1 = _b.sent();
-                        // move channel to starting position
                         setChannels(function (channels) { return uniqBy__default['default'](__spreadArray([channel_1], channels), 'cid'); });
                         _b.label = 3;
-                    case 3:
-                        setOffset === null || setOffset === void 0 ? void 0 : setOffset(function (prevOffset) { return prevOffset + 1; });
-                        return [2 /*return*/];
+                    case 3: return [2 /*return*/];
                 }
             });
         }); };
@@ -5967,12 +6217,11 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
     var _b = React.useState(false), error = _b[0], setError = _b[1];
     var _c = React.useState(true), hasNextPage = _c[0], setHasNextPage = _c[1];
     var _d = React.useState(true), loadingChannels = _d[0], setLoadingChannels = _d[1];
-    var _e = React.useState(0), offset = _e[0], setOffset = _e[1];
-    var _f = React.useState(true), refreshing = _f[0], setRefreshing = _f[1];
+    var _e = React.useState(true), refreshing = _e[0], setRefreshing = _e[1];
     var filterString = React.useMemo(function () { return JSON.stringify(filters); }, [filters]);
     var sortString = React.useMemo(function () { return JSON.stringify(sort); }, [sort]);
     var queryChannels = function (queryType) { return __awaiter(void 0, void 0, void 0, function () {
-        var newOptions, channelQueryResponse, newChannels, err_1;
+        var offset, newOptions, channelQueryResponse, newChannels, err_1;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -5982,27 +6231,21 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
                         setLoadingChannels(true);
                     }
                     setRefreshing(true);
-                    newOptions = __assign({ limit: (_a = options === null || options === void 0 ? void 0 : options.limit) !== null && _a !== void 0 ? _a : MAX_QUERY_CHANNELS_LIMIT, offset: queryType === 'reload' ? 0 : offset }, options);
+                    offset = queryType === 'reload' ? 0 : channels.length;
+                    newOptions = __assign({ limit: (_a = options === null || options === void 0 ? void 0 : options.limit) !== null && _a !== void 0 ? _a : MAX_QUERY_CHANNELS_LIMIT, offset: offset }, options);
                     _b.label = 1;
                 case 1:
                     _b.trys.push([1, 3, , 4]);
                     return [4 /*yield*/, client.queryChannels(filters, sort || {}, newOptions)];
                 case 2:
                     channelQueryResponse = _b.sent();
-                    newChannels = void 0;
-                    if (queryType === 'reload') {
-                        newChannels = channelQueryResponse;
-                    }
-                    else {
-                        newChannels = __spreadArray(__spreadArray([], channels), channelQueryResponse);
-                    }
+                    newChannels = queryType === 'reload' ? channelQueryResponse : __spreadArray(__spreadArray([], channels), channelQueryResponse);
                     setChannels(newChannels);
                     setHasNextPage(channelQueryResponse.length >= newOptions.limit);
-                    // Set active channel only after first page.
-                    if (offset === 0 && activeChannelHandler) {
+                    // Set active channel only on load of first page
+                    if (!offset && activeChannelHandler) {
                         activeChannelHandler(newChannels, setChannels);
                     }
-                    setOffset(newChannels.length);
                     return [3 /*break*/, 4];
                 case 3:
                     err_1 = _b.sent();
@@ -6027,7 +6270,6 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
         hasNextPage: hasNextPage,
         loadNextPage: loadNextPage,
         setChannels: setChannels,
-        setOffset: setOffset,
         status: {
             error: error,
             loadingChannels: loadingChannels,
@@ -6158,6 +6400,16 @@ var ChannelPreview = function (props) {
     var _e = React.useState(0), unread = _e[0], setUnread = _e[1];
     var isActive = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) === channel.cid;
     var muted = useIsChannelMuted(channel).muted;
+    React.useEffect(function () {
+        var handleEvent = function (event) {
+            if (!event.cid)
+                return setUnread(0);
+            if (channel.cid === event.cid)
+                setUnread(0);
+        };
+        client.on('notification.mark_read', handleEvent);
+        return function () { return client.off('notification.mark_read', handleEvent); };
+    }, []);
     React.useEffect(function () {
         if (isActive || muted) {
             setUnread(0);
@@ -6467,12 +6719,12 @@ var UnMemoizedChannelList = function (props) {
      * force a re-render. Incrementing this dummy variable ensures the channel previews update.
      */
     var forceUpdate = function () { return setChannelUpdateCount(function (count) { return count + 1; }); };
-    var _r = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _r.channels, hasNextPage = _r.hasNextPage, loadNextPage = _r.loadNextPage, setChannels = _r.setChannels, setOffset = _r.setOffset, status = _r.status;
+    var _r = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _r.channels, hasNextPage = _r.hasNextPage, loadNextPage = _r.loadNextPage, setChannels = _r.setChannels, status = _r.status;
     var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
     useMobileNavigation(channelListRef, navOpen, closeMobileNav);
     useMessageNewListener(setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
-    useNotificationMessageNewListener(setChannels, onMessageNew, setOffset);
-    useNotificationAddedToChannelListener(setChannels, onAddedToChannel);
+    useNotificationMessageNewListener(setChannels, onMessageNew, allowNewMessagesFromUnfilteredChannels);
+    useNotificationAddedToChannelListener(setChannels, onAddedToChannel, allowNewMessagesFromUnfilteredChannels);
     useNotificationRemovedFromChannelListener(setChannels, onRemovedFromChannel);
     useChannelDeletedListener(setChannels, onChannelDeleted);
     useChannelHiddenListener(setChannels, onChannelHidden);
@@ -7149,7 +7401,7 @@ var Streami18n = /** @class */ (function () {
     return Streami18n;
 }());
 
-var version = '6.7.0';
+var version = '6.9.0';
 
 var useChat = function (_a) {
     var _b;
@@ -7162,7 +7414,7 @@ var useChat = function (_a) {
     var _e = React.useState(), channel = _e[0], setChannel = _e[1];
     var _f = React.useState([]), mutes = _f[0], setMutes = _f[1];
     var _g = React.useState(initialNavOpen), navOpen = _g[0], setNavOpen = _g[1];
-    var clientMutes = (_b = client === null || client === void 0 ? void 0 : client.user) === null || _b === void 0 ? void 0 : _b.mutes;
+    var clientMutes = (_b = client.user) === null || _b === void 0 ? void 0 : _b.mutes;
     var closeMobileNav = function () { return setNavOpen(false); };
     var openMobileNav = function () { return setTimeout(function () { return setNavOpen(true); }, 100); };
     React.useEffect(function () {
@@ -7232,6 +7484,27 @@ var useChat = function (_a) {
     };
 };
 
+var useCreateChatContext = function (value) {
+    var _a;
+    var channel = value.channel, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, theme = value.theme, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
+    var channelCid = channel === null || channel === void 0 ? void 0 : channel.cid;
+    var clientValues = "" + client.clientID + Object.keys(client.activeChannels).length + Object.keys(client.listeners).length + client.mutedChannels.length + "\n  " + ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id);
+    var mutedUsersLength = mutes.length;
+    var chatContext = React.useMemo(function () { return ({
+        channel: channel,
+        client: client,
+        closeMobileNav: closeMobileNav,
+        customClasses: customClasses,
+        mutes: mutes,
+        navOpen: navOpen,
+        openMobileNav: openMobileNav,
+        setActiveChannel: setActiveChannel,
+        theme: theme,
+        useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
+    }); }, [channelCid, clientValues, mutedUsersLength, navOpen]);
+    return chatContext;
+};
+
 var darkModeTheme = {
     '--bg-gradient-end': '#101214',
     '--bg-gradient-start': '#070a0d',
@@ -7270,20 +7543,21 @@ var Chat = function (props) {
     var children = props.children, client = props.client, customClasses = props.customClasses, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
     var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, closeMobileNav = _e.closeMobileNav, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, translators = _e.translators;
     useCustomStyles(darkMode ? darkModeTheme : customStyles);
+    var chatContextValue = useCreateChatContext({
+        channel: channel,
+        client: client,
+        closeMobileNav: closeMobileNav,
+        customClasses: customClasses,
+        mutes: mutes,
+        navOpen: navOpen,
+        openMobileNav: openMobileNav,
+        setActiveChannel: setActiveChannel,
+        theme: theme,
+        useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
+    });
     if (!translators.t)
         return null;
-    return (React__default['default'].createElement(ChatProvider, { value: {
-            channel: channel,
-            client: client,
-            closeMobileNav: closeMobileNav,
-            customClasses: customClasses,
-            mutes: mutes,
-            navOpen: navOpen,
-            openMobileNav: openMobileNav,
-            setActiveChannel: setActiveChannel,
-            theme: theme,
-            useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
-        } },
+    return (React__default['default'].createElement(ChatProvider, { value: chatContextValue },
         React__default['default'].createElement(TranslationProvider, { value: translators }, children)));
 };
 
@@ -8551,7 +8825,7 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
 
 var PREPEND_OFFSET = Math.pow(10, 7);
 var VirtualizedMessageListWithContext = function (props) {
-    var channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, hasMore = props.hasMore, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, loadingMore = props.loadingMore, loadMore = props.loadMore, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, _e = props.overscan, overscan = _e === void 0 ? 0 : _e, 
+    var additionalVirtuosoProps = props.additionalVirtuosoProps, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, hasMore = props.hasMore, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, loadingMore = props.loadingMore, loadMore = props.loadMore, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, _e = props.overscan, overscan = _e === void 0 ? 0 : _e, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _f = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _f === void 0 ? false : _f, _g = props.separateGiphyPreview, separateGiphyPreview = _g === void 0 ? false : _g, _h = props.shouldGroupByUser, shouldGroupByUser = _h === void 0 ? false : _h, _j = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _j === void 0 ? 'smooth' : _j;
     var _k = useComponentContext(), _l = _k.DateSeparator, DateSeparator$1 = _l === void 0 ? DateSeparator : _l, _m = _k.EmptyStateIndicator, EmptyStateIndicator$1 = _m === void 0 ? EmptyStateIndicator : _m, _o = _k.GiphyPreviewMessage, GiphyPreviewMessage$1 = _o === void 0 ? GiphyPreviewMessage : _o, _p = _k.LoadingIndicator, LoadingIndicator$1 = _p === void 0 ? LoadingIndicator : _p, _q = _k.MessageNotification, MessageNotification$1 = _q === void 0 ? MessageNotification : _q, _r = _k.MessageSystem, MessageSystem = _r === void 0 ? EventComponent : _r, _s = _k.TypingIndicator, TypingIndicator = _s === void 0 ? null : _s, _t = _k.VirtualMessage, contextMessage = _t === void 0 ? MessageSimple : _t;
@@ -8679,7 +8953,7 @@ var VirtualizedMessageListWithContext = function (props) {
     var virtualizedMessageListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list';
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement("div", { className: virtualizedMessageListClass },
-            React__default['default'].createElement(reactVirtuoso.Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, initialTopMostItemIndex: processedMessages.length ? processedMessages.length - 1 : 0, itemContent: function (i) { return messageRenderer(processedMessages, i); }, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))),
+            React__default['default'].createElement(reactVirtuoso.Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, initialTopMostItemIndex: processedMessages.length ? processedMessages.length - 1 : 0, itemContent: function (i) { return messageRenderer(processedMessages, i); }, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))),
             React__default['default'].createElement("div", { className: 'str-chat__list-notifications' },
                 React__default['default'].createElement(MessageNotification$1, { onClick: scrollToBottom, showNotification: newMessagesNotification }, t('New Messages!')))),
         giphyPreviewMessage && React__default['default'].createElement(GiphyPreviewMessage$1, { message: giphyPreviewMessage })));
@@ -8916,6 +9190,7 @@ exports.getLatestMessagePreview = getLatestMessagePreview;
 exports.getMessageActions = getMessageActions;
 exports.getNonImageAttachments = getNonImageAttachments;
 exports.getReadByTooltipText = getReadByTooltipText;
+exports.getWholeChar = getWholeChar;
 exports.handleActionWarning = handleActionWarning;
 exports.hiTranslations = hiTranslations;
 exports.isAudioAttachment = isAudioAttachment;
@@ -8956,7 +9231,6 @@ exports.renderPreviewText = renderPreviewText;
 exports.renderText = renderText;
 exports.ruTranslations = ruTranslations;
 exports.showMessageActionsBox = showMessageActionsBox;
-exports.smartRender = smartRender;
 exports.trTranslations = trTranslations;
 exports.useActionHandler = useActionHandler;
 exports.useBreakpoint = useBreakpoint;