stream-chat-react 6.8.0 → 6.11.0

package/dist/index.cjs.js

@@ -308,7 +308,14 @@ var TranslationProvider = function (_a) {
     var children = _a.children, value = _a.value;
     return (React__default['default'].createElement(TranslationContext.Provider, { value: value }, children));
 };
-var useTranslationContext = function () { return React.useContext(TranslationContext); };
+var useTranslationContext = function (componentName) {
+    var contextValue = React.useContext(TranslationContext);
+    if (!contextValue) {
+        console.warn("The useTranslationContext hook was called outside of the TranslationContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the " + componentName + " component.");
+        return {};
+    }
+    return contextValue;
+};
 var withTranslationContext = function (Component) {
     var WithTranslationContextComponent = function (props) {
         var translationContext = useTranslationContext();
@@ -320,7 +327,7 @@ var withTranslationContext = function (Component) {
 
 var UnMemoizedCard = function (props) {
     var image_url = props.image_url, og_scrape_url = props.og_scrape_url, text = props.text, thumb_url = props.thumb_url, title = props.title, title_link = props.title_link, type = props.type;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('Card').t;
     var image = thumb_url || image_url;
     var trimUrl = function (url) {
         if (url !== undefined && url !== null) {
@@ -381,7 +388,7 @@ var UnMemoizedGallery = function (props) {
     var images = props.images;
     var _a = React.useState(0), index = _a[0], setIndex = _a[1];
     var _b = React.useState(false), modalOpen = _b[0], setModalOpen = _b[1];
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('Gallery').t;
     var toggleModal = function (selectedIndex) {
         if (modalOpen) {
             setModalOpen(false);
@@ -610,13 +617,18 @@ var Item = /*#__PURE__*/React__default['default'].forwardRef(function Item(props
   })));
 });
 
-var ComponentContext = React__default['default'].createContext({});
+var ComponentContext = React__default['default'].createContext(undefined);
 var ComponentProvider = function (_a) {
     var children = _a.children, value = _a.value;
     return (React__default['default'].createElement(ComponentContext.Provider, { value: value }, children));
 };
-var useComponentContext = function () {
-    return React.useContext(ComponentContext);
+var useComponentContext = function (componentName) {
+    var contextValue = React.useContext(ComponentContext);
+    if (!contextValue) {
+        console.warn("The useComponentContext hook was called outside of the ComponentContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the " + componentName + " component.");
+        return {};
+    }
+    return contextValue;
 };
 /**
  * Typescript currently does not support partial inference, so if ComponentContext
@@ -778,46 +790,54 @@ 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;
-    }
-    if (React__default['default'].isValidElement(ElementOrComponentOrLiteral)) {
-        // Flow cast through any, to make flow believe it's a React.Element
-        var element = ElementOrComponentOrLiteral;
-        return element;
-    }
-    // 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;
-    }
-    return React__default['default'].createElement(ComponentOrLiteral, __assign({}, props));
-};
-
-var DefaultSuggestionListHeader = function (_a) {
-    var value = _a.value;
-    var t = useTranslationContext().t;
-    if (value[0] === '/') {
+// 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 (i === 0) {
+        throw 'Low surrogate without preceding high surrogate';
+    }
+    var prev = str.charCodeAt(i - 1);
+    if (0xd800 > prev || prev > 0xdbff) {
+        throw 'Low surrogate without preceding high surrogate';
+    }
+    return '';
+};
+
+var DefaultSuggestionListHeader = function (props) {
+    var currentTrigger = props.currentTrigger, value = props.value;
+    var t = useTranslationContext('DefaultSuggestionListHeader').t;
+    var triggerIndex = value.lastIndexOf(currentTrigger);
+    if (currentTrigger === '/') {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
             t('Commands matching'),
             " ",
-            React__default['default'].createElement("strong", null, value.replace('/', ''))));
+            React__default['default'].createElement("strong", null, value.slice(triggerIndex + 1))));
     }
-    if (value[0] === ':') {
+    if (currentTrigger === ':') {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
             t('Emoji matching'),
             " ",
-            React__default['default'].createElement("strong", null, value.replace(':', ''))));
+            React__default['default'].createElement("strong", null, value.slice(triggerIndex + 1))));
     }
-    if (value[0] === '@') {
+    if (currentTrigger === '@') {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
             t('People matching'),
             " ",
-            React__default['default'].createElement("strong", null, value.replace('@', ''))));
+            React__default['default'].createElement("strong", null, value.slice(triggerIndex + 1))));
     }
     return null;
 };
@@ -1045,6 +1065,7 @@ var List = function List(props) {
   }, /*#__PURE__*/React__default['default'].createElement("li", {
     className: "rta__list-header"
   }, /*#__PURE__*/React__default['default'].createElement(SuggestionHeader, {
+    currentTrigger: currentTrigger,
     value: propValue
   })), values.map(function (item, i) {
     return /*#__PURE__*/React__default['default'].createElement(SuggestionItem, {
@@ -1058,7 +1079,8 @@ var List = function List(props) {
         itemsRef[i] = _ref;
       },
       selected: isSelected(item),
-      style: itemStyle
+      style: itemStyle,
+      value: propValue
     });
   }));
 };
@@ -1901,7 +1923,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,12 +2041,119 @@ var defaultMinimalEmojis = [
 // use this only for small lists like in ReactionSelector
 var getStrippedEmojiData = function (data) { return (__assign(__assign({}, data), { emojis: {} })); };
 
-var ChatContext = React__default['default'].createContext({});
+var useCreateChannelStateContext = function (value) {
+    var _a;
+    var acceptedFiles = value.acceptedFiles, channel = value.channel, _b = value.channelCapabilitiesArray, channelCapabilitiesArray = _b === void 0 ? [] : _b, channelConfig = value.channelConfig, error = value.error, hasMore = value.hasMore, loading = value.loading, loadingMore = value.loadingMore, maxNumberOfFiles = value.maxNumberOfFiles, members = value.members, _c = value.messages, messages = _c === void 0 ? [] : _c, multipleUploads = value.multipleUploads, mutes = value.mutes, notifications = value.notifications, pinnedMessages = value.pinnedMessages, quotedMessage = value.quotedMessage, _d = value.read, read = _d === void 0 ? {} : _d, skipMessageDataMemoization = value.skipMessageDataMemoization, thread = value.thread, threadHasMore = value.threadHasMore, threadLoadingMore = value.threadLoadingMore, _e = value.threadMessages, threadMessages = _e === void 0 ? [] : _e, 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 channelCapabilities = {};
+    channelCapabilitiesArray.forEach(function (capability) {
+        channelCapabilities[capability] = true;
+    });
+    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,
+        channelCapabilities: channelCapabilities,
+        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(undefined);
 var ChatProvider = function (_a) {
     var children = _a.children, value = _a.value;
     return (React__default['default'].createElement(ChatContext.Provider, { value: value }, children));
 };
-var useChatContext = function () { return React.useContext(ChatContext); };
+var useChatContext = function (componentName) {
+    var contextValue = React.useContext(ChatContext);
+    if (!contextValue) {
+        console.warn("The useChatContext hook was called outside of the ChatContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the " + componentName + " component.");
+        return {};
+    }
+    return contextValue;
+};
 /**
  * Typescript currently does not support partial inference so if ChatContext
  * typing is desired while using the HOC withChatContext the Props for the
@@ -2039,7 +2169,7 @@ var withChatContext = function (Component) {
 };
 
 var useEditMessageHandler = function (doUpdateMessageRequest) {
-    var _a = useChatContext(), channel = _a.channel, client = _a.client;
+    var _a = useChatContext('useEditMessageHandler'), channel = _a.channel, client = _a.client;
     return function (updatedMessage) {
         if (doUpdateMessageRequest && channel) {
             return Promise.resolve(doUpdateMessageRequest(channel.cid, updatedMessage));
@@ -2100,7 +2230,7 @@ var LoadingChannels = React__default['default'].memo(UnMemoizedLoadingChannels);
  */
 var UnMemoizedLoadingErrorIndicator = function (_a) {
     var error = _a.error;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('LoadingErrorIndicator').t;
     if (!error)
         return null;
     return React__default['default'].createElement("div", null, t('Error: {{ errorMessage }}', { errorMessage: error.message }));
@@ -2124,13 +2254,18 @@ var LoadingIndicator = React__default['default'].memo(UnMemoizedLoadingIndicator
     return prevProps.color === nextProps.color && prevProps.size === nextProps.size;
 });
 
-var ChannelStateContext = React__default['default'].createContext({});
+var ChannelStateContext = React__default['default'].createContext(undefined);
 var ChannelStateProvider = function (_a) {
     var children = _a.children, value = _a.value;
     return (React__default['default'].createElement(ChannelStateContext.Provider, { value: value }, children));
 };
-var useChannelStateContext = function () {
-    return React.useContext(ChannelStateContext);
+var useChannelStateContext = function (componentName) {
+    var contextValue = React.useContext(ChannelStateContext);
+    if (!contextValue) {
+        console.warn("The useChannelStateContext hook was called outside of the ChannelStateContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the " + componentName + " component.");
+        return {};
+    }
+    return contextValue;
 };
 /**
  * Typescript currently does not support partial inference, so if ChannelStateContext
@@ -2150,21 +2285,23 @@ var withChannelStateContext = function (Component) {
 
 var useUserRole = function (message, onlySenderCanEdit, disableQuotedMessages) {
     var _a, _b, _c;
-    var _d = useChannelStateContext(), channel = _d.channel, channelConfig = _d.channelConfig;
-    var client = useChatContext().client;
+    var _d = useChannelStateContext('useUserRole'), channel = _d.channel, _e = _d.channelCapabilities, channelCapabilities = _e === void 0 ? {} : _e, channelConfig = _d.channelConfig;
+    var client = useChatContext('useUserRole').client;
     var isAdmin = ((_a = client.user) === null || _a === void 0 ? void 0 : _a.role) === 'admin' || channel.state.membership.role === 'admin';
     var isMyMessage = client.userID === ((_b = message.user) === null || _b === void 0 ? void 0 : _b.id);
     var isOwner = channel.state.membership.role === 'owner';
     var isModerator = ((_c = client.user) === null || _c === void 0 ? void 0 : _c.role) === 'channel_moderator' ||
         channel.state.membership.role === 'channel_moderator' ||
         channel.state.membership.role === 'moderator';
-    var canEdit = isMyMessage || (!onlySenderCanEdit && (isModerator || isAdmin));
-    var canDelete = isMyMessage || isModerator || isAdmin;
+    var canEdit = (!onlySenderCanEdit && channelCapabilities['update-any-message']) ||
+        (isMyMessage && channelCapabilities['update-own-message']);
+    var canDelete = channelCapabilities['delete-any-message'] ||
+        (isMyMessage && channelCapabilities['delete-own-message']);
     var canFlag = !isMyMessage;
     var canMute = !isMyMessage && (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.mutes);
     var canQuote = !disableQuotedMessages;
-    var canReact = channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.reactions;
-    var canReply = channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.replies;
+    var canReact = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.reactions) !== false && channelCapabilities['send-reaction'];
+    var canReply = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.replies) !== false && channelCapabilities['send-reply'];
     return {
         canDelete: canDelete,
         canEdit: canEdit,
@@ -2182,7 +2319,7 @@ var useUserRole = function (message, onlySenderCanEdit, disableQuotedMessages) {
 
 var MessageDeleted = function (props) {
     var message = props.message;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('MessageDeleted').t;
     var isMyMessage = useUserRole(message).isMyMessage;
     var messageClasses = isMyMessage
         ? 'str-chat__message str-chat__message--me str-chat__message-simple str-chat__message-simple--me'
@@ -2261,6 +2398,7 @@ var MESSAGE_ACTIONS = {
     react: 'react',
     reply: 'reply',
 };
+// @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
 var defaultPinPermissions = {
     commerce: {
         admin: true,
@@ -2490,13 +2628,18 @@ var getReadByTooltipText = function (users, t, client) {
     return outStr;
 };
 
-var ChannelActionContext = React__default['default'].createContext({});
+var ChannelActionContext = React__default['default'].createContext(undefined);
 var ChannelActionProvider = function (_a) {
     var children = _a.children, value = _a.value;
     return (React__default['default'].createElement(ChannelActionContext.Provider, { value: value }, children));
 };
-var useChannelActionContext = function () {
-    return React.useContext(ChannelActionContext);
+var useChannelActionContext = function (componentName) {
+    var contextValue = React.useContext(ChannelActionContext);
+    if (!contextValue) {
+        console.warn("The useChannelActionContext hook was called outside of the ChannelActionContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the " + componentName + " component.");
+        return {};
+    }
+    return contextValue;
 };
 /**
  * Typescript currently does not support partial inference, so if ChannelActionContext
@@ -2514,12 +2657,19 @@ var withChannelActionContext = function (Component) {
     return WithChannelActionContextComponent;
 };
 
-var MessageContext = React__default['default'].createContext({});
+var MessageContext = React__default['default'].createContext(undefined);
 var MessageProvider = function (_a) {
     var children = _a.children, value = _a.value;
     return (React__default['default'].createElement(MessageContext.Provider, { value: value }, children));
 };
-var useMessageContext = function () { return React.useContext(MessageContext); };
+var useMessageContext = function (componentName) {
+    var contextValue = React.useContext(MessageContext);
+    if (!contextValue) {
+        console.warn("The useMessageContext hook was called outside of the MessageContext provider. Make sure this hook is called within the Message's UI component. The errored call is located in the " + componentName + " component.");
+        return {};
+    }
+    return contextValue;
+};
 /**
  * Typescript currently does not support partial inference, so if MessageContext
  * typing is desired while using the HOC withMessageContext, the Props for the
@@ -2547,9 +2697,9 @@ var CustomMessageActionsList = function (props) {
 };
 var UnMemoizedMessageActionsBox = function (props) {
     var getMessageActions = props.getMessageActions, handleDelete = props.handleDelete, handleEdit = props.handleEdit, handleFlag = props.handleFlag, handleMute = props.handleMute, handlePin = props.handlePin, isUserMuted = props.isUserMuted, mine = props.mine, _a = props.open, open = _a === void 0 ? false : _a;
-    var setQuotedMessage = useChannelActionContext().setQuotedMessage;
-    var _b = useMessageContext(), customMessageActions = _b.customMessageActions, message = _b.message, messageListRect = _b.messageListRect;
-    var t = useTranslationContext().t;
+    var setQuotedMessage = useChannelActionContext('MessageActionsBox').setQuotedMessage;
+    var _b = useMessageContext('MessageActionsBox'), customMessageActions = _b.customMessageActions, message = _b.message, messageListRect = _b.messageListRect;
+    var t = useTranslationContext('MessageActionsBox').t;
     var _c = React.useState(false), reverse = _c[0], setReverse = _c[1];
     var messageActions = getMessageActions();
     var checkIfReverse = React.useCallback(function (containerElement) {
@@ -2600,8 +2750,8 @@ var MessageActionsBox = React__default['default'].memo(UnMemoizedMessageActionsB
 
 var MessageActions = function (props) {
     var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propGetMessageActions = props.getMessageActions, propHandleDelete = props.handleDelete, propHandleFlag = props.handleFlag, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
-    var mutes = useChatContext().mutes;
-    var _c = useMessageContext(), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
+    var mutes = useChatContext('MessageActions').mutes;
+    var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
     var getMessageActions = propGetMessageActions || contextGetMessageActions;
     var handleDelete = propHandleDelete || contextHandleDelete;
     var handleFlag = propHandleFlag || contextHandleFlag;
@@ -2658,7 +2808,7 @@ var MessageActionsWrapper = function (props) {
 
 var UnMemoizedMessageOptions = function (props) {
     var _a = props.ActionsIcon, ActionsIcon$1 = _a === void 0 ? ActionsIcon : _a, _b = props.displayLeft, displayLeft = _b === void 0 ? true : _b, _c = props.displayReplies, displayReplies = _c === void 0 ? true : _c, propHandleOpenThread = props.handleOpenThread, messageWrapperRef = props.messageWrapperRef, _d = props.ReactionIcon, ReactionIcon$1 = _d === void 0 ? ReactionIcon : _d, _e = props.theme, theme = _e === void 0 ? 'simple' : _e, _f = props.ThreadIcon, ThreadIcon$1 = _f === void 0 ? ThreadIcon : _f;
-    var _g = useMessageContext(), customMessageActions = _g.customMessageActions, getMessageActions = _g.getMessageActions, contextHandleOpenThread = _g.handleOpenThread, initialMessage = _g.initialMessage, isMyMessage = _g.isMyMessage, message = _g.message, onReactionListClick = _g.onReactionListClick, threadList = _g.threadList;
+    var _g = useMessageContext('MessageOptions'), customMessageActions = _g.customMessageActions, getMessageActions = _g.getMessageActions, contextHandleOpenThread = _g.handleOpenThread, initialMessage = _g.initialMessage, isMyMessage = _g.isMyMessage, message = _g.message, onReactionListClick = _g.onReactionListClick, threadList = _g.threadList;
     var handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
     var messageActions = getMessageActions();
     var showActionsBox = showMessageActionsBox(messageActions) || !!customMessageActions;
@@ -2692,7 +2842,7 @@ var MessageOptions = React__default['default'].memo(UnMemoizedMessageOptions);
 
 var UnMemoizedMessageRepliesCountButton = function (props) {
     var labelPlural = props.labelPlural, labelSingle = props.labelSingle, onClick = props.onClick, _a = props.reply_count, reply_count = _a === void 0 ? 0 : _a;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('MessageRepliesCountButton').t;
     var singleReplyText;
     var pluralReplyText;
     if (reply_count === 1) {
@@ -2730,10 +2880,10 @@ var Tooltip = function (props) {
 var UnMemoizedMessageStatus = function (props) {
     var _a;
     var propAvatar = props.Avatar, _b = props.messageType, messageType = _b === void 0 ? 'simple' : _b;
-    var client = useChatContext().client;
-    var contextAvatar = useComponentContext().Avatar;
-    var _c = useMessageContext(), isMyMessage = _c.isMyMessage, lastReceivedId = _c.lastReceivedId, message = _c.message, readBy = _c.readBy, threadList = _c.threadList;
-    var t = useTranslationContext().t;
+    var client = useChatContext('MessageStatus').client;
+    var contextAvatar = useComponentContext('MessageStatus').Avatar;
+    var _c = useMessageContext('MessageStatus'), isMyMessage = _c.isMyMessage, lastReceivedId = _c.lastReceivedId, message = _c.message, readBy = _c.readBy, threadList = _c.threadList;
+    var t = useTranslationContext('MessageStatus').t;
     var Avatar$1 = propAvatar || contextAvatar || Avatar;
     if (!isMyMessage() || message.type === 'error') {
         return null;
@@ -2763,8 +2913,8 @@ var MessageStatus = React__default['default'].memo(UnMemoizedMessageStatus);
 var handleActionWarning = "Action 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.";
 function useActionHandler(message) {
     var _this = this;
-    var _a = useChannelActionContext(), removeMessage = _a.removeMessage, updateMessage = _a.updateMessage;
-    var channel = useChannelStateContext().channel;
+    var _a = useChannelActionContext('useActionHandler'), removeMessage = _a.removeMessage, updateMessage = _a.updateMessage;
+    var channel = useChannelStateContext('useActionHandler').channel;
     return function (dataOrName, value, event) { return __awaiter(_this, void 0, void 0, function () {
         var messageID, formData, data;
         return __generator(this, function (_a) {
@@ -2822,9 +2972,9 @@ var useBreakpoint = function () {
 var useDeleteHandler = function (message, notifications) {
     if (notifications === void 0) { notifications = {}; }
     var getErrorNotification = notifications.getErrorNotification, notify = notifications.notify;
-    var updateMessage = useChannelActionContext().updateMessage;
-    var client = useChatContext().client;
-    var t = useTranslationContext().t;
+    var updateMessage = useChannelActionContext('useDeleteHandler').updateMessage;
+    var client = useChatContext('useDeleteHandler').client;
+    var t = useTranslationContext('useDeleteHandler').t;
     return function (event) { return __awaiter(void 0, void 0, void 0, function () {
         var data, errorMessage;
         return __generator(this, function (_a) {
@@ -2877,8 +3027,8 @@ var useEditHandler = function (customInitialState, customSetEditing, customClear
 var missingUseFlagHandlerParameterWarning = 'useFlagHandler was called but it is missing one or more necessary parameters.';
 var useFlagHandler = function (message, notifications) {
     if (notifications === void 0) { notifications = {}; }
-    var client = useChatContext().client;
-    var t = useTranslationContext().t;
+    var client = useChatContext('useFlagHandler').client;
+    var t = useTranslationContext('useFlagHandler').t;
     return function (event) { return __awaiter(void 0, void 0, void 0, function () {
         var getErrorNotification, getSuccessNotification, notify, successMessage, errorMessage;
         var _a;
@@ -2924,7 +3074,7 @@ function createEventHandler(fn, message) {
     };
 }
 var useMentionsHandler = function (message, customMentionHandler) {
-    var _a = useChannelActionContext(), contextOnMentionsClick = _a.onMentionsClick, contextOnMentionsHover = _a.onMentionsHover;
+    var _a = useChannelActionContext('useMentionsHandler'), contextOnMentionsClick = _a.onMentionsClick, contextOnMentionsHover = _a.onMentionsHover;
     var onMentionsClick = (customMentionHandler === null || customMentionHandler === void 0 ? void 0 : customMentionHandler.onMentionsClick) || contextOnMentionsClick || (function () { return null; });
     var onMentionsHover = (customMentionHandler === null || customMentionHandler === void 0 ? void 0 : customMentionHandler.onMentionsHover) || contextOnMentionsHover || (function () { return null; });
     return {
@@ -2968,9 +3118,9 @@ var useMobilePress = function () {
 var missingUseMuteHandlerParamsWarning = 'useMuteHandler was called but it is missing one or more necessary parameter.';
 var useMuteHandler = function (message, notifications) {
     if (notifications === void 0) { notifications = {}; }
-    var mutes = useChannelStateContext().mutes;
-    var client = useChatContext().client;
-    var t = useTranslationContext().t;
+    var mutes = useChannelStateContext('useMuteHandler').mutes;
+    var client = useChatContext('useMuteHandler').client;
+    var t = useTranslationContext('useMuteHandler').t;
     return function (event) { return __awaiter(void 0, void 0, void 0, function () {
         var getErrorNotification, getSuccessNotification, notify, successMessage, errorMessage, fallbackMessage, successMessage, errorMessage;
         return __generator(this, function (_a) {
@@ -3031,7 +3181,7 @@ var useMuteHandler = function (message, notifications) {
 };
 
 var useOpenThreadHandler = function (message, customOpenThread) {
-    var channelOpenThread = useChannelActionContext().openThread;
+    var channelOpenThread = useChannelActionContext('useOpenThreadHandler').openThread;
     var openThread = customOpenThread || channelOpenThread;
     return function (event) {
         if (!openThread || !message) {
@@ -3042,25 +3192,17 @@ var useOpenThreadHandler = function (message, customOpenThread) {
     };
 };
 
-var usePinHandler = function (message, permissions, notifications) {
-    if (permissions === void 0) { permissions = defaultPinPermissions; }
+var usePinHandler = function (message, 
+// @ts-expect-error @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+permissions, // eslint-disable-line
+notifications) {
     if (notifications === void 0) { notifications = {}; }
     var getErrorNotification = notifications.getErrorNotification, notify = notifications.notify;
-    var updateMessage = useChannelActionContext().updateMessage;
-    var channel = useChannelStateContext().channel;
-    var client = useChatContext().client;
-    var t = useTranslationContext().t;
-    var canPin = function () {
-        if (!channel || !permissions || !permissions[channel.type]) {
-            return false;
-        }
-        var currentChannelPermissions = permissions[channel.type];
-        var currentRole = channel.state.membership.role;
-        if (currentChannelPermissions && currentRole && currentChannelPermissions[currentRole]) {
-            return true;
-        }
-        return false;
-    };
+    var updateMessage = useChannelActionContext('usePinHandler').updateMessage;
+    var _a = useChannelStateContext('usePinHandler').channelCapabilities, channelCapabilities = _a === void 0 ? {} : _a;
+    var client = useChatContext('usePinHandler').client;
+    var t = useTranslationContext('usePinHandler').t;
+    var canPin = !!channelCapabilities['pin-message'];
     var handlePin = function (event) { return __awaiter(void 0, void 0, void 0, function () {
         var optimisticMessage, messageResponse, errorMessage, optimisticMessage, messageResponse, errorMessage;
         return __generator(this, function (_a) {
@@ -3108,14 +3250,14 @@ var usePinHandler = function (message, permissions, notifications) {
             }
         });
     }); };
-    return { canPin: canPin(), handlePin: handlePin };
+    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 useReactionHandler = function (message) {
-    var updateMessage = useChannelActionContext().updateMessage;
-    var channel = useChannelStateContext().channel;
-    var client = useChatContext().client;
+    var updateMessage = useChannelActionContext('useReactionHandler').updateMessage;
+    var channel = useChannelStateContext('useReactionHandler').channel;
+    var client = useChatContext('useReactionHandler').client;
     var createMessagePreview = React.useCallback(function (add, reaction, message) {
         var _a, _b;
         var newReactionCounts = (message === null || message === void 0 ? void 0 : message.reaction_counts) || {};
@@ -3230,11 +3372,10 @@ var useReactionHandler = function (message) {
     }); };
 };
 var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef, closeReactionSelectorOnClick) {
-    var _a, _b;
-    var channel = useChannelStateContext().channel;
+    var _a = useChannelStateContext('useReactionClick'), _b = _a.channelCapabilities, channelCapabilities = _b === void 0 ? {} : _b, channelConfig = _a.channelConfig;
     var _c = React.useState(false), showDetailedReactions = _c[0], setShowDetailedReactions = _c[1];
     var hasListener = React.useRef(false);
-    var isReactionEnabled = ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.getConfig) === null || _a === void 0 ? void 0 : _a.call(channel)) === null || _b === void 0 ? void 0 : _b.reactions) !== false;
+    var isReactionEnabled = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.reactions) !== false && channelCapabilities['send-reaction'];
     var messageDeleted = !!(message === null || message === void 0 ? void 0 : message.deleted_at);
     var closeDetailedReactions = React.useCallback(function (event) {
         var _a;
@@ -3295,7 +3436,7 @@ var useReactionClick = function (message, reactionSelectorRef, messageWrapperRef
 };
 
 var useRetryHandler = function (customRetrySendMessage) {
-    var contextRetrySendMessage = useChannelActionContext().retrySendMessage;
+    var contextRetrySendMessage = useChannelActionContext('useRetryHandler').retrySendMessage;
     var retrySendMessage = customRetrySendMessage || contextRetrySendMessage;
     return function (message) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -3329,9 +3470,9 @@ var useUserHandler = function (message, eventHandlers) { return ({
 
 var QuotedMessage = function () {
     var _a, _b;
-    var Attachment = useComponentContext().Attachment;
-    var _c = useMessageContext(), isMyMessage = _c.isMyMessage, message = _c.message;
-    var userLanguage = useTranslationContext().userLanguage;
+    var Attachment = useComponentContext('QuotedMessage').Attachment;
+    var _c = useMessageContext('QuotedMessage'), isMyMessage = _c.isMyMessage, message = _c.message;
+    var userLanguage = useTranslationContext('QuotedMessage').userLanguage;
     var quoted_message = message.quoted_message;
     if (!quoted_message)
         return null;
@@ -3356,9 +3497,9 @@ var QuotedMessage = function () {
 var UnMemoizedMessageTextComponent = function (props) {
     var _a;
     var customInnerClass = props.customInnerClass, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propMessage = props.message, _c = props.theme, theme = _c === void 0 ? 'simple' : _c;
-    var _d = useComponentContext().QuotedMessage, QuotedMessage$1 = _d === void 0 ? QuotedMessage : _d;
-    var _e = useMessageContext(), contextMessage = _e.message, onMentionsClickMessage = _e.onMentionsClickMessage, onMentionsHoverMessage = _e.onMentionsHoverMessage, _f = _e.renderText, renderText$1 = _f === void 0 ? renderText : _f, unsafeHTML = _e.unsafeHTML;
-    var _g = useTranslationContext(), t = _g.t, userLanguage = _g.userLanguage;
+    var _d = useComponentContext('MessageText').QuotedMessage, QuotedMessage$1 = _d === void 0 ? QuotedMessage : _d;
+    var _e = useMessageContext('MessageText'), contextMessage = _e.message, onMentionsClickMessage = _e.onMentionsClickMessage, onMentionsHoverMessage = _e.onMentionsHoverMessage, _f = _e.renderText, renderText$1 = _f === void 0 ? renderText : _f, unsafeHTML = _e.unsafeHTML;
+    var _g = useTranslationContext('MessageText'), t = _g.t, userLanguage = _g.userLanguage;
     var handleMobilePress = useMobilePress().handleMobilePress;
     var message = propMessage || contextMessage;
     var hasAttachment = messageHasAttachments(message);
@@ -3417,8 +3558,8 @@ function getDateString(messageCreatedAt, formatDate, calendar, tDateTimeParser,
 }
 var UnMemoizedMessageTimestamp = function (props) {
     var _a = props.calendar, calendar = _a === void 0 ? false : _a, _b = props.customClass, customClass = _b === void 0 ? '' : _b, _c = props.format, format = _c === void 0 ? defaultTimestampFormat : _c, propMessage = props.message;
-    var _d = useMessageContext(), formatDate = _d.formatDate, contextMessage = _d.message;
-    var tDateTimeParser = useTranslationContext().tDateTimeParser;
+    var _d = useMessageContext('MessageTimestamp'), formatDate = _d.formatDate, contextMessage = _d.message;
+    var tDateTimeParser = useTranslationContext('MessageTimestamp').tDateTimeParser;
     var message = propMessage || contextMessage;
     var createdAt = message.created_at;
     var when = React.useMemo(function () { return getDateString(createdAt, formatDate, calendar, tDateTimeParser, format); }, [formatDate, calendar, tDateTimeParser, format, createdAt]);
@@ -3429,9 +3570,8 @@ var UnMemoizedMessageTimestamp = function (props) {
 var MessageTimestamp = React__default['default'].memo(UnMemoizedMessageTimestamp);
 
 var useCommandTrigger = function () {
-    var _a, _b;
-    var channel = useChannelStateContext().channel;
-    var commands = (_b = (_a = channel === null || channel === void 0 ? void 0 : channel.getConfig) === null || _a === void 0 ? void 0 : _a.call(channel)) === null || _b === void 0 ? void 0 : _b.commands;
+    var channelConfig = useChannelStateContext('useCommandTrigger').channelConfig;
+    var commands = channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.commands;
     return {
         component: CommandItem,
         dataProvider: function (query, text, onReady) {
@@ -3518,7 +3658,7 @@ var accentsMap = {
     e: 'é|è|ê|É|È|Ê',
     i: 'í|ì|î|Í|Ì|Î',
     n: 'ñ|Ñ',
-    o: 'ó|ò|ô|õ|Ó|Ò|Ô|Õ',
+    o: 'ó|ò|ô|ő|õ|Ó|Ò|Ô|Õ',
     u: 'ú|ù|û|ü|Ú|Ù|Û|Ü',
 };
 var removeDiacritics = function (text) {
@@ -3555,7 +3695,7 @@ var calculateLevenshtein = function (query, name) {
     return matrix[name.length][query.length];
 };
 var searchLocalUsers = function (params) {
-    var ownUserId = params.ownUserId, query = params.query, useMentionsTransliteration = params.useMentionsTransliteration, users = params.users;
+    var ownUserId = params.ownUserId, query = params.query, text = params.text, useMentionsTransliteration = params.useMentionsTransliteration, users = params.users;
     var matchingUsers = users.filter(function (user) {
         if (user.id === ownUserId)
             return false;
@@ -3580,13 +3720,16 @@ var searchLocalUsers = function (params) {
                 });
             }); })();
         }
+        var maxDistance = 3;
+        var lastDigits = text.slice(-(maxDistance + 1)).includes('@');
         if (updatedName) {
             var levenshtein_1 = calculateLevenshtein(updatedQuery, updatedName);
-            if (updatedName.includes(updatedQuery) || levenshtein_1 <= 3)
+            if (updatedName.includes(updatedQuery) || (levenshtein_1 <= maxDistance && lastDigits)) {
                 return true;
+            }
         }
         var levenshtein = calculateLevenshtein(updatedQuery, updatedId);
-        return updatedId.includes(updatedQuery) || levenshtein <= 3;
+        return updatedId.includes(updatedQuery) || (levenshtein <= maxDistance && lastDigits);
     });
     return matchingUsers;
 };
@@ -3615,8 +3758,8 @@ 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, 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;
+    var _c = useChatContext('useUserTrigger'), client = _c.client, mutes = _c.mutes;
+    var channel = useChannelStateContext('useUserTrigger').channel;
     var members = channel.state.members;
     var watchers = channel.state.watchers;
     var getMembersAndWatchers = React.useCallback(function () {
@@ -3731,6 +3874,7 @@ var useUserTrigger = function (params) {
                 var params_1 = {
                     ownUserId: client.userID,
                     query: query,
+                    text: text,
                     useMentionsTransliteration: useMentionsTransliteration,
                     users: users,
                 };
@@ -3759,20 +3903,18 @@ var MessageInputContextProvider = function (_a) {
     var children = _a.children, value = _a.value;
     return (React__default['default'].createElement(MessageInputContext.Provider, { value: value }, children));
 };
-/**
- * hook for MessageInput context
- */
-var useMessageInputContext = function () {
+var useMessageInputContext = function (componentName) {
     var contextValue = React.useContext(MessageInputContext);
-    if (contextValue === undefined) {
-        console.warn('Empty MessageInputContext consumed. Make sure you wrap every component that uses MessageInputContext with a MessageInputContextProvider');
+    if (!contextValue) {
+        console.warn("The useMessageInputContext hook was called outside of the MessageInputContext provider. Make sure this hook is called within the MessageInput's UI component. The errored call is located in the " + componentName + " component.");
+        return {};
     }
     return contextValue;
 };
 
 var DefaultTriggerProvider = function (_a) {
     var children = _a.children;
-    var currentValue = useMessageInputContext();
+    var currentValue = useMessageInputContext('DefaultTriggerProvider');
     var defaultAutocompleteTriggers = {
         '/': useCommandTrigger(),
         ':': useEmojiTrigger(currentValue.emojiIndex),
@@ -3810,7 +3952,7 @@ var DefaultEmojiPicker = React__default['default'].lazy(function () { return __a
         }
     });
 }); });
-var EmojiContext = React__default['default'].createContext({});
+var EmojiContext = React__default['default'].createContext(undefined);
 var EmojiProvider = function (_a) {
     var children = _a.children, value = _a.value;
     var _b = value.Emoji, Emoji = _b === void 0 ? DefaultEmoji : _b, emojiConfig = value.emojiConfig, _c = value.EmojiIndex, EmojiIndex = _c === void 0 ? DefaultEmojiIndex__default['default'] : _c, _d = value.EmojiPicker, EmojiPicker = _d === void 0 ? DefaultEmojiPicker : _d;
@@ -3822,8 +3964,13 @@ var EmojiProvider = function (_a) {
     };
     return React__default['default'].createElement(EmojiContext.Provider, { value: emojiContextValue }, children);
 };
-var useEmojiContext = function () {
-    return React.useContext(EmojiContext);
+var useEmojiContext = function (componentName) {
+    var contextValue = React.useContext(EmojiContext);
+    if (!contextValue) {
+        console.warn("The useEmojiContext hook was called outside of the EmojiContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the " + componentName + " component.");
+        return {};
+    }
+    return contextValue;
 };
 /**
  * Typescript currently does not support partial inference, so if EmojiContext
@@ -3849,9 +3996,9 @@ var filterEmoji = function (emoji) {
 };
 var EmojiPicker = function (props) {
     var small = props.small;
-    var _a = useEmojiContext(), emojiConfig = _a.emojiConfig, EmojiPickerComponent = _a.EmojiPicker;
-    var t = useTranslationContext().t;
-    var messageInput = useMessageInputContext();
+    var _a = useEmojiContext('EmojiPicker'), emojiConfig = _a.emojiConfig, EmojiPickerComponent = _a.EmojiPicker;
+    var t = useTranslationContext('EmojiPicker').t;
+    var messageInput = useMessageInputContext('EmojiPicker');
     var emojiData = (emojiConfig || {}).emojiData;
     if (messageInput.emojiPickerIsOpen && emojiData) {
         var className = small
@@ -3865,34 +4012,34 @@ var EmojiPicker = function (props) {
 };
 
 var EmojiIconLarge = function () {
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('EmojiIconLarge').t;
     return (React__default['default'].createElement("svg", { height: '28', width: '28', xmlns: 'http://www.w3.org/2000/svg' },
         React__default['default'].createElement("title", null, t('Open emoji picker')),
         React__default['default'].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
             React__default['default'].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' }))));
 };
 var EmojiIconSmall = function () {
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('EmojiIconSmall').t;
     return (React__default['default'].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
         React__default['default'].createElement("title", null, t('Open emoji picker')),
         React__default['default'].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
             React__default['default'].createElement("path", { d: 'M6.7 1.42C3.73 1.42 1.42 3.73 1.42 6.7c0 2.97 2.31 5.28 5.28 5.28c2.97 0 5.28-2.31 5.28-5.28c0-2.97-2.31-5.28-5.28-5.28zM.1 6.7c0-3.63 2.97-6.6 6.6-6.6s6.6 2.97 6.6 6.6s-2.97 6.6-6.6 6.6s-6.6-2.97-6.6-6.6zM6.04 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM9.34 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM3.73 7.47c.33-.22.66-.11.88.11c.33.44.88.99 1.65 1.1c.66.22 1.54.11 2.64-1.1c.22-.22.66-.33.88 0c.22.22.33.66 0 .88c-1.21 1.43-2.64 1.87-3.85 1.65c-1.1-.22-1.98-.99-2.42-1.65c-.22-.33-.11-.66.22-.99z' }))));
 };
 var FileUploadIcon = function () {
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('FileUploadIcon').t;
     return (React__default['default'].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
         React__default['default'].createElement("title", null, t('Attach files')),
         React__default['default'].createElement("path", { d: 'M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z', fillRule: 'nonzero' })));
 };
 var FileUploadIconFlat = function () {
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('FileUploadIconFlat').t;
     return (React__default['default'].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
         React__default['default'].createElement("title", null, t('Attach files')),
         React__default['default'].createElement("path", { d: 'M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z', fillRule: 'nonzero' })));
 };
 var SendButton = function (_a) {
     var sendMessage = _a.sendMessage;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('SendButton').t;
     return (React__default['default'].createElement("button", { className: 'str-chat__send-button', onClick: sendMessage },
         React__default['default'].createElement("svg", { height: '17', viewBox: '0 0 18 17', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
             React__default['default'].createElement("title", null, t('Send')),
@@ -3900,8 +4047,8 @@ var SendButton = function (_a) {
 };
 
 var UploadsPreview = function () {
-    var _a = useChannelStateContext(), maxNumberOfFiles = _a.maxNumberOfFiles, multipleUploads = _a.multipleUploads;
-    var messageInput = useMessageInputContext();
+    var _a = useChannelStateContext('UploadsPreview'), maxNumberOfFiles = _a.maxNumberOfFiles, multipleUploads = _a.multipleUploads;
+    var messageInput = useMessageInputContext('UploadsPreview');
     var fileOrder = messageInput.fileOrder, fileUploads = messageInput.fileUploads, imageOrder = messageInput.imageOrder, imageUploads = messageInput.imageUploads, numberOfUploads = messageInput.numberOfUploads, removeFile = messageInput.removeFile, removeImage = messageInput.removeImage, text = messageInput.text, uploadFile = messageInput.uploadFile, uploadImage = messageInput.uploadImage, uploadNewFiles = messageInput.uploadNewFiles;
     var imagesToPreview = imageOrder.map(function (id) { return imageUploads[id]; });
     var filesToPreview = fileOrder.map(function (id) { return fileUploads[id]; });
@@ -3924,9 +4071,9 @@ var UploadsPreview = function () {
 };
 
 var UnMemoizedChatAutoComplete = function (props) {
-    var _a = useComponentContext(), SuggestionItem = _a.AutocompleteSuggestionItem, SuggestionList = _a.AutocompleteSuggestionList;
-    var t = useTranslationContext().t;
-    var messageInput = useMessageInputContext();
+    var _a = useComponentContext('ChatAutoComplete'), SuggestionItem = _a.AutocompleteSuggestionItem, SuggestionList = _a.AutocompleteSuggestionList;
+    var t = useTranslationContext('ChatAutoComplete').t;
+    var messageInput = useMessageInputContext('ChatAutoComplete');
     var cooldownRemaining = messageInput.cooldownRemaining, disabled = messageInput.disabled, emojiIndex = messageInput.emojiIndex, innerRef = messageInput.textareaRef;
     var placeholder = props.placeholder || t('Type your message');
     var emojiReplace = function (word) {
@@ -3952,10 +4099,10 @@ var UnMemoizedChatAutoComplete = function (props) {
 var ChatAutoComplete = React__default['default'].memo(UnMemoizedChatAutoComplete);
 
 var EditMessageForm = function () {
-    var _a = useChannelStateContext(), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads;
-    var t = useTranslationContext().t;
-    var _b = useMessageInputContext(), clearEditingState = _b.clearEditingState, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, uploadNewFiles = _b.uploadNewFiles;
-    var _c = useComponentContext(), _d = _c.EmojiIcon, EmojiIcon = _d === void 0 ? EmojiIconSmall : _d, _e = _c.FileUploadIcon, FileUploadIcon$1 = _e === void 0 ? FileUploadIcon : _e;
+    var _a = useChannelStateContext('EditMessageForm'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads;
+    var t = useTranslationContext('EditMessageForm').t;
+    var _b = useMessageInputContext('EditMessageForm'), clearEditingState = _b.clearEditingState, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, uploadNewFiles = _b.uploadNewFiles;
+    var _c = useComponentContext('EditMessageForm'), _d = _c.EmojiIcon, EmojiIcon = _d === void 0 ? EmojiIconSmall : _d, _e = _c.FileUploadIcon, FileUploadIcon$1 = _e === void 0 ? FileUploadIcon : _e;
     React.useEffect(function () {
         var onKeyDown = function (event) {
             if (event.keyCode === KEY_CODES.ESC && clearEditingState)
@@ -4018,8 +4165,8 @@ var checkUserRoles = function (globalRole, channelRole) {
 };
 var useCooldownTimer = function () {
     var _a, _b;
-    var client = useChatContext().client;
-    var channel = useChannelStateContext().channel;
+    var client = useChatContext('useCooldownTimer').client;
+    var channel = useChannelStateContext('useCooldownTimer').channel;
     var cooldownInterval = (channel.data || {}).cooldown;
     var _c = React.useState(), cooldownRemaining = _c[0], setCooldownRemaining = _c[1];
     var globalRole = ((_a = client.user) === null || _a === void 0 ? void 0 : _a.role) || '';
@@ -4040,7 +4187,7 @@ var useCooldownTimer = function () {
 };
 
 var useEmojiIndex = function () {
-    var _a = useEmojiContext(), emojiConfig = _a.emojiConfig, EmojiIndex = _a.EmojiIndex;
+    var _a = useEmojiContext('useEmojiIndex'), emojiConfig = _a.emojiConfig, EmojiIndex = _a.EmojiIndex;
     var emojiData = (emojiConfig || {}).emojiData;
     var emojiIndex = React.useMemo(function () {
         if (EmojiIndex) {
@@ -4054,9 +4201,9 @@ var useEmojiIndex = function () {
 var useImageUploads = function (props, state, dispatch) {
     var doImageUploadRequest = props.doImageUploadRequest, errorHandler = props.errorHandler;
     var imageUploads = state.imageUploads;
-    var channel = useChannelStateContext().channel;
-    var addNotification = useChannelActionContext().addNotification;
-    var t = useTranslationContext().t;
+    var channel = useChannelStateContext('useImageUploads').channel;
+    var addNotification = useChannelActionContext('useImageUploads').addNotification;
+    var t = useTranslationContext('useImageUploads').t;
     var removeImage = React.useCallback(function (id) {
         dispatch({ id: id, type: 'removeImageUpload' });
         // TODO: cancel upload if still uploading
@@ -4157,9 +4304,9 @@ var useImageUploads = function (props, state, dispatch) {
 var useFileUploads = function (props, state, dispatch) {
     var doFileUploadRequest = props.doFileUploadRequest, errorHandler = props.errorHandler;
     var fileUploads = state.fileUploads;
-    var channel = useChannelStateContext().channel;
-    var addNotification = useChannelActionContext().addNotification;
-    var t = useTranslationContext().t;
+    var channel = useChannelStateContext('useFileUploads').channel;
+    var addNotification = useChannelActionContext('useFileUploads').addNotification;
+    var t = useTranslationContext('useFileUploads').t;
     var uploadFile = React.useCallback(function (id) {
         dispatch({ id: id, state: 'uploading', type: 'setFileUpload' });
     }, []);
@@ -4234,7 +4381,7 @@ var apiMaxNumberOfFiles = 10;
 var useAttachments = function (props, state, dispatch) {
     var noFiles = props.noFiles;
     var fileUploads = state.fileUploads, imageUploads = state.imageUploads;
-    var _a = useChannelStateContext(), maxNumberOfFiles = _a.maxNumberOfFiles, multipleUploads = _a.multipleUploads;
+    var _a = useChannelStateContext('useAttachments'), maxNumberOfFiles = _a.maxNumberOfFiles, multipleUploads = _a.multipleUploads;
     var _b = useFileUploads(props, state, dispatch), removeFile = _b.removeFile, uploadFile = _b.uploadFile;
     var _c = useImageUploads(props, state, dispatch), removeImage = _c.removeImage, uploadImage = _c.uploadImage;
     // Number of files that the user can still add. Should never be more than the amount allowed by the API.
@@ -4278,7 +4425,7 @@ var useAttachments = function (props, state, dispatch) {
 };
 
 var useMessageInputText = function (props, state, dispatch) {
-    var channel = useChannelStateContext().channel;
+    var channel = useChannelStateContext('useMessageInputText').channel;
     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();
@@ -4415,9 +4562,9 @@ var getAttachmentTypeFromMime = function (mime) {
 var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
     var clearEditingState = props.clearEditingState, message = props.message, overrideSubmitHandler = props.overrideSubmitHandler, parent = props.parent, publishTypingEvent = props.publishTypingEvent;
     var attachments = state.attachments, fileOrder = state.fileOrder, fileUploads = state.fileUploads, imageOrder = state.imageOrder, imageUploads = state.imageUploads, mentioned_users = state.mentioned_users, text = state.text;
-    var channel = useChannelStateContext().channel;
-    var _a = useChannelActionContext(), addNotification = _a.addNotification, editMessage = _a.editMessage, sendMessage = _a.sendMessage;
-    var t = useTranslationContext().t;
+    var channel = useChannelStateContext('useSubmitHandler').channel;
+    var _a = useChannelActionContext('useSubmitHandler'), addNotification = _a.addNotification, editMessage = _a.editMessage, sendMessage = _a.sendMessage;
+    var t = useTranslationContext('useSubmitHandler').t;
     var getAttachmentsFromUploads = function () {
         var imageAttachments = imageOrder
             .map(function (id) { return imageUploads[id]; })
@@ -4717,9 +4864,8 @@ var messageInputReducer = function (state, action) {
  * hook for MessageInput state
  */
 var useMessageInputState = function (props) {
-    var _a, _b;
     var message = props.message;
-    var channel = useChannelStateContext().channel;
+    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 _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];
@@ -4735,7 +4881,7 @@ var useMessageInputState = function (props) {
     var _g = useAttachments(props, state, dispatch), maxFilesLeft = _g.maxFilesLeft, numberOfUploads = _g.numberOfUploads, removeFile = _g.removeFile, removeImage = _g.removeImage, uploadFile = _g.uploadFile, uploadImage = _g.uploadImage, uploadNewFiles = _g.uploadNewFiles;
     var handleSubmit = useSubmitHandler(props, state, dispatch, numberOfUploads).handleSubmit;
     var onPaste = usePasteHandler(uploadNewFiles, insertText).onPaste;
-    var isUploadEnabled = ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.getConfig) === null || _a === void 0 ? void 0 : _a.call(channel)) === null || _b === void 0 ? void 0 : _b.uploads) !== false;
+    var isUploadEnabled = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.uploads) !== false && channelCapabilities['upload-file'] !== false;
     var onSelectUser = React.useCallback(function (item) {
         dispatch({ type: 'addMentionedUser', user: item });
     }, []);
@@ -4751,8 +4897,8 @@ var useMessageInputState = function (props) {
 };
 
 var QuotedMessagePreviewHeader = function () {
-    var setQuotedMessage = useChannelActionContext().setQuotedMessage;
-    var t = useTranslationContext().t;
+    var setQuotedMessage = useChannelActionContext('QuotedMessagePreview').setQuotedMessage;
+    var t = useTranslationContext('QuotedMessagePreview').t;
     return (React__default['default'].createElement("div", { className: 'quoted-message-preview-header' },
         React__default['default'].createElement("div", null, t('Reply to Message')),
         React__default['default'].createElement("button", { className: 'str-chat__square-button', onClick: function () { return setQuotedMessage(undefined); } },
@@ -4762,8 +4908,8 @@ var QuotedMessagePreviewHeader = function () {
 var QuotedMessagePreview = function (props) {
     var _a;
     var quotedMessage = props.quotedMessage;
-    var Attachment = useComponentContext().Attachment;
-    var userLanguage = useTranslationContext().userLanguage;
+    var Attachment = useComponentContext('QuotedMessagePreview').Attachment;
+    var userLanguage = useTranslationContext('QuotedMessagePreview').userLanguage;
     var quotedMessageText = ((_a = quotedMessage.i18n) === null || _a === void 0 ? void 0 : _a[userLanguage + "_text"]) ||
         quotedMessage.text;
     // @ts-expect-error
@@ -4783,10 +4929,10 @@ var QuotedMessagePreview = function (props) {
 };
 
 var MessageInputFlat = function () {
-    var _a = useChannelStateContext(), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
-    var t = useTranslationContext().t;
-    var _b = useMessageInputContext(), closeEmojiPicker = _b.closeEmojiPicker, cooldownInterval = _b.cooldownInterval, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleEmojiKeyDown = _b.handleEmojiKeyDown, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
-    var _c = useComponentContext(), _d = _c.CooldownTimer, CooldownTimer$1 = _d === void 0 ? CooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? EmojiIconLarge : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? FileUploadIconFlat : _f, _g = _c.QuotedMessagePreview, QuotedMessagePreview$1 = _g === void 0 ? QuotedMessagePreview : _g, _h = _c.SendButton, SendButton$1 = _h === void 0 ? SendButton : _h;
+    var _a = useChannelStateContext('MessageInputFlat'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
+    var t = useTranslationContext('MessageInputFlat').t;
+    var _b = useMessageInputContext('MessageInputFlat'), closeEmojiPicker = _b.closeEmojiPicker, cooldownInterval = _b.cooldownInterval, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleEmojiKeyDown = _b.handleEmojiKeyDown, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
+    var _c = useComponentContext('MessageInputFlat'), _d = _c.CooldownTimer, CooldownTimer$1 = _d === void 0 ? CooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? EmojiIconLarge : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? FileUploadIconFlat : _f, _g = _c.QuotedMessagePreview, QuotedMessagePreview$1 = _g === void 0 ? QuotedMessagePreview : _g, _h = _c.SendButton, SendButton$1 = _h === void 0 ? SendButton : _h;
     return (React__default['default'].createElement("div", { className: "str-chat__input-flat " + (SendButton$1 ? 'str-chat__input-flat--send-button-active' : null) + " " + (quotedMessage ? 'str-chat__input-flat-quoted' : null) },
         React__default['default'].createElement(reactFileUtils.ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0 || !!cooldownRemaining, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
             quotedMessage && React__default['default'].createElement(QuotedMessagePreview$1, { quotedMessage: quotedMessage }),
@@ -4809,13 +4955,104 @@ 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, 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, 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,
+        cooldownRemaining: cooldownRemaining,
+        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,
+    }); }, [
+        cooldownInterval,
+        cooldownRemaining,
+        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 _a = useComponentContext('MessageInput'), 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))));
@@ -4826,10 +5063,10 @@ var UnMemoizedMessageInput = function (props) {
 var MessageInput = React__default['default'].memo(UnMemoizedMessageInput);
 
 var MessageInputSmall = function () {
-    var _a = useChannelStateContext(), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads;
-    var t = useTranslationContext().t;
-    var _b = useMessageInputContext(), closeEmojiPicker = _b.closeEmojiPicker, cooldownInterval = _b.cooldownInterval, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleEmojiKeyDown = _b.handleEmojiKeyDown, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
-    var _c = useComponentContext(), _d = _c.CooldownTimer, CooldownTimer$1 = _d === void 0 ? CooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? EmojiIconSmall : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? FileUploadIconFlat : _f, _g = _c.SendButton, SendButton$1 = _g === void 0 ? SendButton : _g;
+    var _a = useChannelStateContext('MessageInputSmall'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads;
+    var t = useTranslationContext('MessageInputSmall').t;
+    var _b = useMessageInputContext('MessageInputSmall'), closeEmojiPicker = _b.closeEmojiPicker, cooldownInterval = _b.cooldownInterval, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleEmojiKeyDown = _b.handleEmojiKeyDown, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
+    var _c = useComponentContext('MessageInputSmall'), _d = _c.CooldownTimer, CooldownTimer$1 = _d === void 0 ? CooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? EmojiIconSmall : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? FileUploadIconFlat : _f, _g = _c.SendButton, SendButton$1 = _g === void 0 ? SendButton : _g;
     return (React__default['default'].createElement("div", { className: 'str-chat__small-message-input__wrapper' },
         React__default['default'].createElement(reactFileUtils.ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0 || !!cooldownRemaining, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
             React__default['default'].createElement("div", { className: "str-chat__small-message-input " + (SendButton$1 ? 'str-chat__small-message-input--send-button-active' : null) },
@@ -4869,14 +5106,14 @@ var MMLReact = React__default['default'].lazy(function () { return __awaiter(voi
  */
 var MML = function (props) {
     var actionHandler = props.actionHandler, _a = props.align, align = _a === void 0 ? 'right' : _a, source = props.source;
-    var theme = useChatContext().theme;
+    var theme = useChatContext('MML').theme;
     return (React__default['default'].createElement(React.Suspense, { fallback: null },
         React__default['default'].createElement(MMLReact, { className: "mml-align-" + align, Loading: null, onSubmit: actionHandler, source: source, Success: null, theme: (theme || '').replace(' ', '-') })));
 };
 
 var Modal = function (props) {
     var children = props.children, onClose = props.onClose, open = props.open;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('Modal').t;
     var innerRef = React.useRef(null);
     var handleClick = function (event) {
         var _a;
@@ -4916,9 +5153,9 @@ var isMutableRef = function (ref) {
 var UnMemoizedReactionSelector = React__default['default'].forwardRef(function (props, ref) {
     var _a;
     var _b = props.additionalEmojiProps, additionalEmojiProps = _b === void 0 ? {} : _b, propAvatar = props.Avatar, _c = props.detailedView, detailedView = _c === void 0 ? true : _c, propHandleReaction = props.handleReaction, propLatestReactions = props.latest_reactions, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, _d = props.reverse, reverse = _d === void 0 ? false : _d;
-    var contextAvatar = useComponentContext().Avatar;
-    var _e = useEmojiContext(), Emoji = _e.Emoji, emojiConfig = _e.emojiConfig;
-    var _f = useMessageContext(), contextHandleReaction = _f.handleReaction, message = _f.message;
+    var contextAvatar = useComponentContext('ReactionSelector').Avatar;
+    var _e = useEmojiContext('ReactionSelector'), Emoji = _e.Emoji, emojiConfig = _e.emojiConfig;
+    var _f = useMessageContext('ReactionSelector'), contextHandleReaction = _f.handleReaction, message = _f.message;
     var _g = emojiConfig || {}, defaultMinimalEmojis = _g.defaultMinimalEmojis, fullEmojiData = _g.emojiData, emojiSetDef = _g.emojiSetDef;
     var Avatar$1 = propAvatar || contextAvatar || Avatar;
     var handleReaction = propHandleReaction || contextHandleReaction;
@@ -4998,8 +5235,8 @@ var ReactionSelector = React__default['default'].memo(UnMemoizedReactionSelector
 
 var UnMemoizedReactionsList = function (props) {
     var additionalEmojiProps = props.additionalEmojiProps, onClick = props.onClick, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, propReactions = props.reactions, _a = props.reverse, reverse = _a === void 0 ? false : _a;
-    var _b = useEmojiContext(), Emoji = _b.Emoji, emojiConfig = _b.emojiConfig;
-    var _c = useMessageContext(), message = _c.message, onReactionListClick = _c.onReactionListClick;
+    var _b = useEmojiContext('ReactionsList'), Emoji = _b.Emoji, emojiConfig = _b.emojiConfig;
+    var _c = useMessageContext('ReactionsList'), message = _c.message, onReactionListClick = _c.onReactionListClick;
     var _d = emojiConfig || {}, defaultMinimalEmojis = _d.defaultMinimalEmojis, fullEmojiData = _d.emojiData, emojiSetDef = _d.emojiSetDef;
     var reactions = propReactions || message.latest_reactions || [];
     var reactionCounts = propReactionCounts || message.reaction_counts || {};
@@ -5057,8 +5294,8 @@ var ReactionsList = React__default['default'].memo(UnMemoizedReactionsList);
 
 var UnMemoizedSimpleReactionsList = function (props) {
     var _a = props.additionalEmojiProps, additionalEmojiProps = _a === void 0 ? {} : _a, propHandleReaction = props.handleReaction, propReactionCounts = props.reaction_counts, propReactionOptions = props.reactionOptions, propReactions = props.reactions;
-    var _b = useEmojiContext(), Emoji = _b.Emoji, emojiConfig = _b.emojiConfig;
-    var _c = useMessageContext(), contextHandleReaction = _c.handleReaction, message = _c.message;
+    var _b = useEmojiContext('SimpleReactionsList'), Emoji = _b.Emoji, emojiConfig = _b.emojiConfig;
+    var _c = useMessageContext('SimpleReactionsList'), contextHandleReaction = _c.handleReaction, message = _c.message;
     var _d = emojiConfig || {}, defaultMinimalEmojis = _d.defaultMinimalEmojis, fullEmojiData = _d.emojiData, emojiSetDef = _d.emojiSetDef;
     var _e = React.useState(undefined), tooltipReactionType = _e[0], setTooltipReactionType = _e[1];
     var handleReaction = propHandleReaction || contextHandleReaction;
@@ -5130,7 +5367,7 @@ var SimpleReactionsList = React__default['default'].memo(UnMemoizedSimpleReactio
 var MessageSimpleWithContext = function (props) {
     var _a;
     var additionalMessageInputProps = props.additionalMessageInputProps, clearEditingState = props.clearEditingState, editing = props.editing, endOfGroup = props.endOfGroup, firstOfGroup = props.firstOfGroup, groupedByUser = props.groupedByUser, handleAction = props.handleAction, handleOpenThread = props.handleOpenThread, handleRetry = props.handleRetry, isMyMessage = props.isMyMessage, isReactionEnabled = props.isReactionEnabled, message = props.message, onUserClick = props.onUserClick, onUserHover = props.onUserHover, reactionSelectorRef = props.reactionSelectorRef, showDetailedReactions = props.showDetailedReactions, threadList = props.threadList;
-    var _b = useComponentContext(), Attachment = _b.Attachment, _c = _b.Avatar, Avatar$1 = _c === void 0 ? Avatar : _c, _d = _b.EditMessageInput, EditMessageInput = _d === void 0 ? EditMessageForm : _d, _e = _b.MessageDeleted, MessageDeleted$1 = _e === void 0 ? MessageDeleted : _e, _f = _b.MessageOptions, MessageOptions$1 = _f === void 0 ? MessageOptions : _f, _g = _b.MessageRepliesCountButton, MessageRepliesCountButton$1 = _g === void 0 ? MessageRepliesCountButton : _g, _h = _b.MessageStatus, MessageStatus$1 = _h === void 0 ? MessageStatus : _h, _j = _b.MessageTimestamp, MessageTimestamp$1 = _j === void 0 ? MessageTimestamp : _j, _k = _b.ReactionSelector, ReactionSelector$1 = _k === void 0 ? ReactionSelector : _k, _l = _b.ReactionsList, ReactionsList$1 = _l === void 0 ? ReactionsList : _l;
+    var _b = useComponentContext('MessageSimple'), Attachment = _b.Attachment, _c = _b.Avatar, Avatar$1 = _c === void 0 ? Avatar : _c, _d = _b.EditMessageInput, EditMessageInput = _d === void 0 ? EditMessageForm : _d, _e = _b.MessageDeleted, MessageDeleted$1 = _e === void 0 ? MessageDeleted : _e, _f = _b.MessageOptions, MessageOptions$1 = _f === void 0 ? MessageOptions : _f, _g = _b.MessageRepliesCountButton, MessageRepliesCountButton$1 = _g === void 0 ? MessageRepliesCountButton : _g, _h = _b.MessageStatus, MessageStatus$1 = _h === void 0 ? MessageStatus : _h, _j = _b.MessageTimestamp, MessageTimestamp$1 = _j === void 0 ? MessageTimestamp : _j, _k = _b.ReactionSelector, ReactionSelector$1 = _k === void 0 ? ReactionSelector : _k, _l = _b.ReactionsList, ReactionsList$1 = _l === void 0 ? ReactionsList : _l;
     var messageWrapperRef = React.useRef(null);
     var hasAttachment = messageHasAttachments(message);
     var hasReactions = messageHasReactions(message);
@@ -5170,16 +5407,23 @@ var MemoizedMessageSimple = React__default['default'].memo(MessageSimpleWithCont
  * The default UI component that renders a message and receives functionality and logic from the MessageContext.
  */
 var MessageSimple = function (props) {
-    var messageContext = useMessageContext();
+    var messageContext = useMessageContext('MessageSimple');
     return React__default['default'].createElement(MemoizedMessageSimple, __assign({}, messageContext, props));
 };
 
-var TypingContext = React__default['default'].createContext({});
+var TypingContext = React__default['default'].createContext(undefined);
 var TypingProvider = function (_a) {
     var children = _a.children, value = _a.value;
     return (React__default['default'].createElement(TypingContext.Provider, { value: value }, children));
 };
-var useTypingContext = function () { return React.useContext(TypingContext); };
+var useTypingContext = function (componentName) {
+    var contextValue = React.useContext(TypingContext);
+    if (!contextValue) {
+        console.warn("The useTypingContext hook was called outside of the TypingContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the " + componentName + " component.");
+        return {};
+    }
+    return contextValue;
+};
 /**
  * Typescript currently does not support partial inference, so if TypingContext
  * typing is desired while using the HOC withTypingContext, the Props for the
@@ -5200,39 +5444,39 @@ var compressed=true;var categories=[{id:"people",name:"Smileys & People",emojis:
 
 var UnMemoizedChannel = function (props) {
     var propsChannel = props.channel, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a;
-    var contextChannel = useChatContext().channel;
+    var contextChannel = useChatContext('Channel').channel;
     var channel = propsChannel || contextChannel;
     if (!(channel === null || channel === void 0 ? void 0 : channel.cid))
         return EmptyPlaceholder;
     return React__default['default'].createElement(ChannelInner, __assign({}, props, { channel: channel, key: channel.cid }));
 };
 var ChannelInner = function (props) {
-    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;
-    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];
-    var _g = React.useState(), quotedMessage = _g[0], setQuotedMessage = _g[1];
+    var _a;
+    var acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, children = props.children, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _b = props.emojiData, emojiData = _b === void 0 ? defaultEmojiData : _b, _c = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _c === void 0 ? LoadingErrorIndicator : _c, _d = props.LoadingIndicator, LoadingIndicator$1 = _d === void 0 ? LoadingIndicator : _d, maxNumberOfFiles = props.maxNumberOfFiles, _e = props.multipleUploads, multipleUploads = _e === void 0 ? true : _e, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover, skipMessageDataMemoization = props.skipMessageDataMemoization;
+    var _f = useChatContext('Channel'), client = _f.client, customClasses = _f.customClasses, mutes = _f.mutes, theme = _f.theme, useImageFlagEmojisOnWindows = _f.useImageFlagEmojisOnWindows;
+    var t = useTranslationContext('Channel').t;
+    var _g = React.useState(channel.getConfig()), channelConfig = _g[0], setChannelConfig = _g[1];
+    var _h = React.useState([]), notifications = _h[0], setNotifications = _h[1];
+    var _j = React.useState(), quotedMessage = _j[0], setQuotedMessage = _j[1];
     var notificationTimeouts = [];
-    var _h = React.useReducer(channelReducer, initialState), state = _h[0], dispatch = _h[1];
+    var _k = React.useReducer(channelReducer, initialState), state = _k[0], dispatch = _k[1];
     var isMounted = useIsMounted();
     var originalTitle = React.useRef('');
     var lastRead = React.useRef(new Date());
     var online = React.useRef(true);
-    var channelConfig = channel.getConfig();
+    var channelCapabilitiesArray = (_a = channel.data) === null || _a === void 0 ? void 0 : _a.own_capabilities;
     var emojiConfig = {
         commonEmoji: commonEmoji,
         defaultMinimalEmojis: defaultMinimalEmojis,
         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();
@@ -5242,13 +5486,16 @@ var ChannelInner = function (props) {
         else {
             streamChat.logChatPromiseExecution(channel.markRead(), 'mark read');
         }
-        if (originalTitle.current) {
+        if (activeUnreadHandler) {
+            activeUnreadHandler(0, originalTitle.current);
+        }
+        else 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,
@@ -5256,12 +5503,10 @@ var ChannelInner = function (props) {
                 type: 'updateThreadOnEvent',
             });
         }
-        if (event.type === 'typing.start' || event.type === 'typing.stop') {
-            dispatch({
-                channel: channel,
-                type: 'setTyping',
-            });
+        if (event.type === 'user.watching.start' || event.type === 'user.watching.stop')
             return;
+        if (event.type === 'typing.start' || event.type === 'typing.stop') {
+            return dispatch({ channel: channel, type: 'setTyping' });
         }
         if (event.type === 'connection.changed' && typeof event.online === 'boolean') {
             online.current = event.online;
@@ -5275,7 +5520,7 @@ 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);
                     if (activeUnreadHandler) {
                         activeUnreadHandler(unread, originalTitle.current);
@@ -5287,28 +5532,29 @@ var ChannelInner = function (props) {
             }
         }
         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;
+            var config, 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]);
                         return [4 /*yield*/, channel.watch()];
                     case 2:
                         _a.sent();
+                        config = channel.getConfig();
+                        setChannelConfig(config);
                         return [3 /*break*/, 4];
                     case 3:
                         e_1 = _a.sent();
@@ -5318,7 +5564,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();
@@ -5338,15 +5584,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)) {
@@ -5373,17 +5618,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;
@@ -5391,7 +5634,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')
@@ -5426,27 +5669,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) {
@@ -5470,7 +5708,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)
@@ -5485,25 +5723,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:
@@ -5512,62 +5745,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;
@@ -5583,7 +5809,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:
@@ -5593,18 +5819,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, channelCapabilitiesArray: channelCapabilitiesArray, 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,
@@ -5618,8 +5838,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,
@@ -5663,10 +5884,11 @@ 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 chatContainerClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.chatContainer) || 'str-chat__container';
     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'
@@ -5679,7 +5901,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'))));
     }
@@ -5689,7 +5911,7 @@ var ChannelInner = function (props) {
                 React__default['default'].createElement(ComponentProvider, { value: componentContextValue },
                     React__default['default'].createElement(EmojiProvider, { value: emojiContextValue },
                         React__default['default'].createElement(TypingProvider, { value: typingContextValue },
-                            React__default['default'].createElement("div", { className: 'str-chat__container' }, children))))))));
+                            React__default['default'].createElement("div", { className: "" + chatContainerClass }, children))))))));
 };
 /**
  * A wrapper component that provides channel data and renders children.
@@ -5704,9 +5926,9 @@ var Channel = React__default['default'].memo(UnMemoizedChannel);
 
 var UnMemoizedChannelHeader = function (props) {
     var _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, propImage = props.image, live = props.live, title = props.title;
-    var _b = useChannelStateContext(), channel = _b.channel, watcher_count = _b.watcher_count;
-    var openMobileNav = useChatContext().openMobileNav;
-    var t = useTranslationContext().t;
+    var _b = useChannelStateContext('ChannelHeader'), channel = _b.channel, watcher_count = _b.watcher_count;
+    var openMobileNav = useChatContext('ChannelHeader').openMobileNav;
+    var t = useTranslationContext('ChannelHeader').t;
     var _c = (channel === null || channel === void 0 ? void 0 : channel.data) || {}, channelImage = _c.image, member_count = _c.member_count, name = _c.name, subtitle = _c.subtitle;
     var image = propImage || channelImage;
     return (React__default['default'].createElement("div", { className: 'str-chat__header-livestream' },
@@ -5739,7 +5961,7 @@ var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3cs
 
 var UnMemoizedChatDown = function (props) {
     var image = props.image, text = props.text, _a = props.type, type = _a === void 0 ? 'Error' : _a;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('ChatDown').t;
     return (React__default['default'].createElement("div", { className: 'str-chat__down' },
         React__default['default'].createElement(LoadingChannels, null),
         React__default['default'].createElement("div", { className: 'str-chat__down-main' },
@@ -5768,7 +5990,7 @@ var ChannelListMessenger = function (props) {
 };
 
 var useChannelDeletedListener = function (setChannels, customHandler) {
-    var client = useChatContext().client;
+    var client = useChatContext('useChannelDeletedListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) {
             if (customHandler && typeof customHandler === 'function') {
@@ -5793,7 +6015,7 @@ var useChannelDeletedListener = function (setChannels, customHandler) {
 };
 
 var useChannelHiddenListener = function (setChannels, customHandler) {
-    var client = useChatContext().client;
+    var client = useChatContext('useChannelHiddenListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) {
             if (customHandler && typeof customHandler === 'function') {
@@ -5818,7 +6040,7 @@ var useChannelHiddenListener = function (setChannels, customHandler) {
 };
 
 var useChannelTruncatedListener = function (setChannels, customHandler, forceUpdate) {
-    var client = useChatContext().client;
+    var client = useChatContext('useChannelTruncatedListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) {
             setChannels(function (channels) { return __spreadArray([], channels); });
@@ -5837,7 +6059,7 @@ var useChannelTruncatedListener = function (setChannels, customHandler, forceUpd
 };
 
 var useChannelUpdatedListener = function (setChannels, customHandler, forceUpdate) {
-    var client = useChatContext().client;
+    var client = useChatContext('useChannelUpdatedListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) {
             setChannels(function (channels) {
@@ -5889,7 +6111,7 @@ var moveChannelUp = function (_a) {
 };
 
 var useChannelVisibleListener = function (setChannels, customHandler) {
-    var client = useChatContext().client;
+    var client = useChatContext('useChannelVisibleListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
             var channel_1;
@@ -5918,7 +6140,7 @@ var useChannelVisibleListener = function (setChannels, customHandler) {
 };
 
 var useConnectionRecoveredListener = function (forceUpdate) {
-    var client = useChatContext().client;
+    var client = useChatContext('useConnectionRecoveredListener').client;
     React.useEffect(function () {
         var handleEvent = function () {
             if (forceUpdate) {
@@ -5935,7 +6157,7 @@ var useConnectionRecoveredListener = function (forceUpdate) {
 var useMessageNewListener = function (setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels) {
     if (lockChannelOrder === void 0) { lockChannelOrder = false; }
     if (allowNewMessagesFromUnfilteredChannels === void 0) { allowNewMessagesFromUnfilteredChannels = true; }
-    var client = useChatContext().client;
+    var client = useChatContext('useMessageNewListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) {
             setChannels(function (channels) {
@@ -5975,7 +6197,7 @@ var useMobileNavigation = function (channelListRef, navOpen, closeMobileNav) {
 
 var useNotificationAddedToChannelListener = function (setChannels, customHandler, allowNewMessagesFromUnfilteredChannels) {
     if (allowNewMessagesFromUnfilteredChannels === void 0) { allowNewMessagesFromUnfilteredChannels = true; }
-    var client = useChatContext().client;
+    var client = useChatContext('useNotificationAddedToChannelListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
             var channel_1;
@@ -6004,9 +6226,9 @@ var useNotificationAddedToChannelListener = function (setChannels, customHandler
     }, [customHandler]);
 };
 
-var useNotificationMessageNewListener = function (setChannels, customHandler, setOffset, allowNewMessagesFromUnfilteredChannels) {
+var useNotificationMessageNewListener = function (setChannels, customHandler, allowNewMessagesFromUnfilteredChannels) {
     if (allowNewMessagesFromUnfilteredChannels === void 0) { allowNewMessagesFromUnfilteredChannels = true; }
-    var client = useChatContext().client;
+    var client = useChatContext('useNotificationMessageNewListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
             var channel_1;
@@ -6024,9 +6246,7 @@ var useNotificationMessageNewListener = function (setChannels, customHandler, se
                         channel_1 = _b.sent();
                         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*/];
                 }
             });
         }); };
@@ -6038,7 +6258,7 @@ var useNotificationMessageNewListener = function (setChannels, customHandler, se
 };
 
 var useNotificationRemovedFromChannelListener = function (setChannels, customHandler) {
-    var client = useChatContext().client;
+    var client = useChatContext('useNotificationRemovedFromChannelListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) {
             if (customHandler && typeof customHandler === 'function') {
@@ -6060,12 +6280,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) {
@@ -6075,27 +6294,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();
@@ -6120,7 +6333,6 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
         hasNextPage: hasNextPage,
         loadNextPage: loadNextPage,
         setChannels: setChannels,
-        setOffset: setOffset,
         status: {
             error: error,
             loadingChannels: loadingChannels,
@@ -6130,7 +6342,7 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
 };
 
 var useUserPresenceChangedListener = function (setChannels) {
-    var client = useChatContext().client;
+    var client = useChatContext('useUserPresenceChangedListener').client;
     React.useEffect(function () {
         var handleEvent = function (event) {
             setChannels(function (channels) {
@@ -6183,7 +6395,7 @@ var UnMemoizedChannelPreviewMessenger = function (props) {
 var ChannelPreviewMessenger = React__default['default'].memo(UnMemoizedChannelPreviewMessenger);
 
 var useIsChannelMuted = function (channel) {
-    var client = useChatContext().client;
+    var client = useChatContext('useIsChannelMuted').client;
     var _a = React.useState(channel.muteStatus()), muted = _a[0], setMuted = _a[1];
     React.useEffect(function () {
         var handleEvent = function () { return setMuted(channel.muteStatus()); };
@@ -6245,8 +6457,8 @@ var getDisplayImage = function (channel, currentUser) {
 
 var ChannelPreview = function (props) {
     var channel = props.channel, _a = props.Preview, Preview = _a === void 0 ? ChannelPreviewMessenger : _a;
-    var _b = useChatContext(), activeChannel = _b.channel, client = _b.client, setActiveChannel = _b.setActiveChannel;
-    var _c = useTranslationContext(), t = _c.t, userLanguage = _c.userLanguage;
+    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 isActive = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid) === channel.cid;
@@ -6299,7 +6511,7 @@ var ChannelPreview = function (props) {
 
 var SearchInput = function (props) {
     var channelSearchParams = props.channelSearchParams, inputRef = props.inputRef, onSearch = props.onSearch, query = props.query, searchFunction = props.searchFunction;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('SearchInput').t;
     return (React__default['default'].createElement("input", { className: 'str-chat__channel-search-input', onChange: function (event) {
             return searchFunction ? searchFunction(channelSearchParams, event) : onSearch(event);
         }, placeholder: t('Search'), ref: inputRef, type: 'text', value: query }));
@@ -6331,7 +6543,7 @@ var DefaultSearchResultItem = function (props) {
 };
 var SearchResults = function (props) {
     var _a = props.DropdownContainer, DropdownContainer = _a === void 0 ? DefaultDropdownContainer : _a, popupResults = props.popupResults, results = props.results, searching = props.searching, SearchEmpty = props.SearchEmpty, SearchResultsHeader = props.SearchResultsHeader, SearchLoading = props.SearchLoading, _b = props.SearchResultItem, SearchResultItem = _b === void 0 ? DefaultSearchResultItem : _b, selectResult = props.selectResult;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('SearchResults').t;
     var _c = React.useState(), focusedUser = _c[0], setFocusedUser = _c[1];
     var device = useBreakpoint().device;
     var containerStyle = popupResults && device === 'full' ? 'popup' : 'inline';
@@ -6379,7 +6591,7 @@ var SearchResults = function (props) {
 
 var UnMemoizedChannelSearch = function (props) {
     var _a = props.channelType, channelType = _a === void 0 ? 'messaging' : _a, DropdownContainer = props.DropdownContainer, onSelectResult = props.onSelectResult, _b = props.popupResults, popupResults = _b === void 0 ? false : _b, SearchEmpty = props.SearchEmpty, _c = props.searchForChannels, searchForChannels = _c === void 0 ? false : _c, searchFunction = props.searchFunction, _d = props.SearchInput, SearchInput$1 = _d === void 0 ? SearchInput : _d, SearchLoading = props.SearchLoading, searchQueryParams = props.searchQueryParams, SearchResultItem = props.SearchResultItem, SearchResultsHeader = props.SearchResultsHeader;
-    var _e = useChatContext(), client = _e.client, setActiveChannel = _e.setActiveChannel;
+    var _e = useChatContext('ChannelSearch'), client = _e.client, setActiveChannel = _e.setActiveChannel;
     var _f = React.useState(''), query = _f[0], setQuery = _f[1];
     var _g = React.useState([]), results = _g[0], setResults = _g[1];
     var _h = React.useState(false), resultsOpen = _h[0], setResultsOpen = _h[1];
@@ -6493,7 +6705,7 @@ var ChannelSearch = React__default['default'].memo(UnMemoizedChannelSearch);
 
 var UnMemoizedEmptyStateIndicator = function (props) {
     var listType = props.listType;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('EmptyStateIndicator').t;
     if (listType === 'channel')
         return React__default['default'].createElement("p", null, t('You have no channels currently'));
     if (listType === 'message')
@@ -6523,7 +6735,7 @@ var DEFAULT_OPTIONS = {};
 var DEFAULT_SORT = {};
 var UnMemoizedChannelList = function (props) {
     var additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch$1 = _b === void 0 ? ChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator$1 = _c === void 0 ? EmptyStateIndicator : _c, filters = props.filters, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? ChatDown : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannels : _e, _f = props.List, List = _f === void 0 ? ChannelListMessenger : _f, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _g = props.Paginator, Paginator = _g === void 0 ? LoadMorePaginator : _g, Preview = props.Preview, _h = props.sendChannelsToList, sendChannelsToList = _h === void 0 ? false : _h, _j = props.setActiveChannelOnMount, setActiveChannelOnMount = _j === void 0 ? true : _j, _k = props.showChannelSearch, showChannelSearch = _k === void 0 ? false : _k, _l = props.sort, sort = _l === void 0 ? DEFAULT_SORT : _l, _m = props.watchers, watchers = _m === void 0 ? {} : _m;
-    var _o = useChatContext(), channel = _o.channel, client = _o.client, closeMobileNav = _o.closeMobileNav, customClasses = _o.customClasses, _p = _o.navOpen, navOpen = _p === void 0 ? false : _p, setActiveChannel = _o.setActiveChannel, theme = _o.theme, useImageFlagEmojisOnWindows = _o.useImageFlagEmojisOnWindows;
+    var _o = useChatContext('ChannelList'), channel = _o.channel, client = _o.client, closeMobileNav = _o.closeMobileNav, customClasses = _o.customClasses, _p = _o.navOpen, navOpen = _p === void 0 ? false : _p, setActiveChannel = _o.setActiveChannel, theme = _o.theme, useImageFlagEmojisOnWindows = _o.useImageFlagEmojisOnWindows;
     var channelListRef = React.useRef(null);
     var _q = React.useState(0), channelUpdateCount = _q[0], setChannelUpdateCount = _q[1];
     /**
@@ -6570,11 +6782,11 @@ 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, allowNewMessagesFromUnfilteredChannels);
+    useNotificationMessageNewListener(setChannels, onMessageNew, allowNewMessagesFromUnfilteredChannels);
     useNotificationAddedToChannelListener(setChannels, onAddedToChannel, allowNewMessagesFromUnfilteredChannels);
     useNotificationRemovedFromChannelListener(setChannels, onRemovedFromChannel);
     useChannelDeletedListener(setChannels, onChannelDeleted);
@@ -6629,7 +6841,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default['default'].memo(UnMemoizedChannelList);
 
-var Cancel$b="Stornieren";var Close$b="Schließen";var Delete$b="Löschen";var Delivered$b="Geliefert";var Flag$b="Flagge";var Mute$b="Stumm";var New$b="Neu";var Pin$b="Stift";var Reply$b="Antworten";var Search$b="Suche";var Send$b="Senden";var Thread$c="Faden";var Unmute$b="Stummschaltung aufheben";var Unpin$b="Lösen Sie den Stift";var live$b="wohnen";var deTranslations = {"1 reply":"1 Antwort","Attach files":"Dateien anhängen",Cancel:Cancel$b,"Channel Missing":"Kanal fehlt",Close:Close$b,"Close emoji picker":"Emoji-Picker schließen","Commands matching":"Übereinstimmende Befehle","Connection failure, reconnecting now...":"Verbindungsfehler, jetzt wieder verbinden...",Delete:Delete$b,Delivered:Delivered$b,"Edit Message":"Nachricht bearbeiten","Edit message request failed":"Anfrage zum Bearbeiten der Nachricht fehlgeschlagen","Emoji matching":"Emoji passend","Empty message...":"Leere Nachricht...","Error adding flag":"Fehler beim Hinzufügen des Flags","Error connecting to chat, refresh the page to try again.":"Fehler beim Herstellen einer Verbindung zum Chat. Aktualisieren Sie die Seite, um es erneut zu versuchen.","Error deleting message":"Fehler beim Löschen der Nachricht","Error muting a user ...":"Fehler beim Stummschalten eines Benutzers...","Error pinning message":"Fehler beim Fixieren der Nachricht","Error removing message pin":"Fehler beim Entfernen des Nachrichten-Pins","Error unmuting a user ...":"Fehler beim Stummschalten eines Benutzers...","Error uploading file":"Fehler beim Hochladen der Datei","Error uploading image":"Fehler beim hochladen des Bildes","Error · Unsent":"Fehler nicht gesendet","Error: {{ errorMessage }}":"Fehler: {{ errorMessage }}",Flag:Flag$b,"Message Failed · Click to try again":"Nachricht fehlgeschlagen · Klicken Sie hier, um es erneut zu versuchen","Message Failed · Unauthorized":"Nachricht fehlgeschlagen · Nicht autorisiert","Message deleted":"Nachricht gelöscht","Message has been successfully flagged":"Nachricht wurde erfolgreich markiert","Message pinned":"Nachricht angeheftet",Mute:Mute$b,New:New$b,"New Messages!":"Neue Nachrichten!","No results found":"keine Ergebnisse gefunden","Nothing yet...":"Noch nichts...","Only visible to you":"Nur für Sie sichtbar","Open emoji picker":"Öffnen Sie den Emoji-Picker","People matching":"Passende Personen","Pick your emoji":"Wähle dein Emoji",Pin:Pin$b,"Pinned by":"Gepinnt von",Reply:Reply$b,"Reply to Message":"Auf Nachricht antworten",Search:Search$b,"Searching...":"Suchen...",Send:Send$b,"Send message request failed":"Nachrichtenanfrage senden fehlgeschlagen","Sending...":"Senden...","Slow Mode ON":"Langsamer Modus EIN","Start of a new thread":"Start eines neuen Faden","This message was deleted...":"Diese Nachricht wurde gelöscht...",Thread:Thread$c,"Type your message":"Geben Sie Ihre Nachricht ein",Unmute:Unmute$b,Unpin:Unpin$b,"Wait until all attachments have uploaded":"Warten Sie, bis alle Anhänge hochgeladen wurden","You have no channels currently":"Sie haben derzeit keine Kanäle","You've reached the maximum number of files":"Sie haben die maximale Anzahl von Dateien erreicht",live:live$b,"this content could not be displayed":"Dieser Inhalt konnte nicht angezeigt werden","{{ commaSeparatedUsers }} and {{ moreCount }} more":"{{ commaSeparatedUsers }} und {{moreCount}} Mehr","{{ commaSeparatedUsers }}, and {{ lastUser }}":"{{ commaSeparatedUsers }} und {{ lastUser }}","{{ firstUser }} and {{ secondUser }}":"{{ firstUser }} und {{ secondUser }}","{{ imageCount }} more":"{{ imageCount }} Mehr","{{ memberCount }} members":"{{ memberCount }} Mitglieder","{{ replyCount }} replies":"{{ replyCount }} antwortet","{{ user }} has been muted":"{{ user }} wurde stummgeschaltet","{{ user }} has been unmuted":"{{ user }} wurde nicht stummgeschaltet","{{ watcherCount }} online":"{{ watcherCount }} online","🏙 Attachment...":"🏙 Anhang..."};
+var Cancel$b="Stornieren";var Close$b="Schließen";var Delete$b="Löschen";var Delivered$b="Geliefert";var Flag$b="Flagge";var Mute$b="Stumm";var New$b="Neu";var Pin$b="Stift";var Reply$b="Antworten";var Search$b="Suche";var Send$b="Senden";var Thread$c="Thread";var Unmute$b="Stummschaltung aufheben";var Unpin$b="Lösen Sie den Stift";var live$b="live";var deTranslations = {"1 reply":"1 Antwort","Attach files":"Dateien anhängen",Cancel:Cancel$b,"Channel Missing":"Kanal fehlt",Close:Close$b,"Close emoji picker":"Emoji-Picker schließen","Commands matching":"Übereinstimmende Befehle","Connection failure, reconnecting now...":"Verbindungsfehler, jetzt wieder verbinden...",Delete:Delete$b,Delivered:Delivered$b,"Edit Message":"Nachricht bearbeiten","Edit message request failed":"Anfrage zum Bearbeiten der Nachricht fehlgeschlagen","Emoji matching":"Emoji passend","Empty message...":"Leere Nachricht...","Error adding flag":"Fehler beim Hinzufügen des Flags","Error connecting to chat, refresh the page to try again.":"Fehler beim Herstellen einer Verbindung zum Chat. Aktualisieren Sie die Seite, um es erneut zu versuchen.","Error deleting message":"Fehler beim Löschen der Nachricht","Error muting a user ...":"Fehler beim Stummschalten eines Benutzers...","Error pinning message":"Fehler beim Fixieren der Nachricht","Error removing message pin":"Fehler beim Entfernen des Nachrichten-Pins","Error unmuting a user ...":"Fehler beim Stummschalten eines Benutzers...","Error uploading file":"Fehler beim Hochladen der Datei","Error uploading image":"Fehler beim hochladen des Bildes","Error · Unsent":"Fehler nicht gesendet","Error: {{ errorMessage }}":"Fehler: {{ errorMessage }}",Flag:Flag$b,"Message Failed · Click to try again":"Nachricht fehlgeschlagen · Klicken Sie hier, um es erneut zu versuchen","Message Failed · Unauthorized":"Nachricht fehlgeschlagen · Nicht autorisiert","Message deleted":"Nachricht gelöscht","Message has been successfully flagged":"Nachricht wurde erfolgreich markiert","Message pinned":"Nachricht angeheftet",Mute:Mute$b,New:New$b,"New Messages!":"Neue Nachrichten!","No results found":"keine Ergebnisse gefunden","Nothing yet...":"Noch nichts...","Only visible to you":"Nur für Sie sichtbar","Open emoji picker":"Öffnen Sie den Emoji-Picker","People matching":"Passende Personen","Pick your emoji":"Wähle dein Emoji",Pin:Pin$b,"Pinned by":"Gepinnt von",Reply:Reply$b,"Reply to Message":"Auf Nachricht antworten",Search:Search$b,"Searching...":"Suchen...",Send:Send$b,"Send message request failed":"Nachrichtenanfrage senden fehlgeschlagen","Sending...":"Senden...","Slow Mode ON":"Langsamer Modus EIN","Start of a new thread":"Start eines neuen Threads","This message was deleted...":"Diese Nachricht wurde gelöscht...",Thread:Thread$c,"Type your message":"Geben Sie Ihre Nachricht ein",Unmute:Unmute$b,Unpin:Unpin$b,"Wait until all attachments have uploaded":"Warten Sie, bis alle Anhänge hochgeladen wurden","You have no channels currently":"Sie haben derzeit keine Kanäle","You've reached the maximum number of files":"Sie haben die maximale Anzahl von Dateien erreicht",live:live$b,"this content could not be displayed":"Dieser Inhalt konnte nicht angezeigt werden","{{ commaSeparatedUsers }} and {{ moreCount }} more":"{{ commaSeparatedUsers }} und {{moreCount}} Mehr","{{ commaSeparatedUsers }}, and {{ lastUser }}":"{{ commaSeparatedUsers }} und {{ lastUser }}","{{ firstUser }} and {{ secondUser }}":"{{ firstUser }} und {{ secondUser }}","{{ imageCount }} more":"{{ imageCount }} Mehr","{{ memberCount }} members":"{{ memberCount }} Mitglieder","{{ replyCount }} replies":"{{ replyCount }} antworten","{{ user }} has been muted":"{{ user }} wurde stummgeschaltet","{{ user }} has been unmuted":"{{ user }} wurde nicht stummgeschaltet","{{ watcherCount }} online":"{{ watcherCount }} online","🏙 Attachment...":"🏙 Anhang..."};
 
 var Cancel$a="Cancel";var Close$a="Close";var Delete$a="Delete";var Delivered$a="Delivered";var Flag$a="Flag";var Mute$a="Mute";var New$a="New";var Pin$a="Pin";var Reply$a="Reply";var Search$a="Search";var Send$a="Send";var Thread$b="Thread";var Unmute$a="Unmute";var Unpin$a="Unpin";var live$a="live";var enTranslations = {"1 reply":"1 reply","Attach files":"Attach files",Cancel:Cancel$a,"Channel Missing":"Channel Missing",Close:Close$a,"Close emoji picker":"Close emoji picker","Commands matching":"Commands matching","Connection failure, reconnecting now...":"Connection failure, reconnecting now...",Delete:Delete$a,Delivered:Delivered$a,"Edit Message":"Edit Message","Edit message request failed":"Edit message request failed","Emoji matching":"Emoji matching","Empty message...":"Empty message...","Error adding flag":"Error adding flag","Error connecting to chat, refresh the page to try again.":"Error connecting to chat, refresh the page to try again.","Error deleting message":"Error deleting message","Error muting a user ...":"Error muting a user ...","Error pinning message":"Error pinning message","Error removing message pin":"Error removing message pin","Error unmuting a user ...":"Error unmuting a user ...","Error uploading file":"Error uploading file","Error uploading image":"Error uploading image","Error · Unsent":"Error · Unsent","Error: {{ errorMessage }}":"Error: {{ errorMessage }}",Flag:Flag$a,"Message Failed · Click to try again":"Message Failed · Click to try again","Message Failed · Unauthorized":"Message Failed · Unauthorized","Message deleted":"Message deleted","Message has been successfully flagged":"Message has been successfully flagged","Message pinned":"Message pinned",Mute:Mute$a,New:New$a,"New Messages!":"New Messages!","No results found":"No results found","Nothing yet...":"Nothing yet...","Only visible to you":"Only visible to you","Open emoji picker":"Open emoji picker","People matching":"People matching","Pick your emoji":"Pick your emoji",Pin:Pin$a,"Pinned by":"Pinned by",Reply:Reply$a,"Reply to Message":"Reply to Message",Search:Search$a,"Searching...":"Searching...",Send:Send$a,"Send message request failed":"Send message request failed","Sending...":"Sending...","Slow Mode ON":"Slow Mode ON","Start of a new thread":"Start of a new thread","This message was deleted...":"This message was deleted...",Thread:Thread$b,"Type your message":"Type your message",Unmute:Unmute$a,Unpin:Unpin$a,"Wait until all attachments have uploaded":"Wait until all attachments have uploaded","You have no channels currently":"You have no channels currently","You've reached the maximum number of files":"You've reached the maximum number of files",live:live$a,"this content could not be displayed":"this content could not be displayed","{{ commaSeparatedUsers }} and {{ moreCount }} more":"{{ commaSeparatedUsers }} and {{ moreCount }} more","{{ commaSeparatedUsers }}, and {{ lastUser }}":"{{ commaSeparatedUsers }}, and {{ lastUser }}","{{ firstUser }} and {{ secondUser }}":"{{ firstUser }} and {{ secondUser }}","{{ imageCount }} more":"{{ imageCount }} more","{{ memberCount }} members":"{{ memberCount }} members","{{ replyCount }} replies":"{{ replyCount }} replies","{{ user }} has been muted":"{{ user }} has been muted","{{ user }} has been unmuted":"{{ user }} has been unmuted","{{ watcherCount }} online":"{{ watcherCount }} online","🏙 Attachment...":"🏙 Attachment..."};
 
@@ -6659,9 +6871,9 @@ Dayjs__default['default'].extend(updateLocale__default['default']);
 Dayjs__default['default'].updateLocale('de', {
     calendar: {
         lastDay: '[gestern um] LT',
-        lastWeek: '[vergangenheit] dddd [beim] LT',
+        lastWeek: '[letzten] dddd [bei] LT',
         nextDay: '[morgen zu] LT',
-        nextWeek: 'dddd [beim] LT',
+        nextWeek: 'dddd [bei] LT',
         sameDay: '[heute um] LT',
         sameElse: 'L',
     },
@@ -7252,7 +7464,7 @@ var Streami18n = /** @class */ (function () {
     return Streami18n;
 }());
 
-var version = '6.8.0';
+var version = '6.11.0';
 
 var useChat = function (_a) {
     var _b;
@@ -7265,7 +7477,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 () {
@@ -7335,6 +7547,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',
@@ -7373,26 +7606,27 @@ 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)));
 };
 
 var UnMemoizedDateSeparator = function (props) {
     var date = props.date, formatDate = props.formatDate, _a = props.position, position = _a === void 0 ? 'right' : _a, unread = props.unread;
-    var _b = useTranslationContext(), t = _b.t, tDateTimeParser = _b.tDateTimeParser;
+    var _b = useTranslationContext('DateSeparator'), t = _b.t, tDateTimeParser = _b.tDateTimeParser;
     if (typeof date === 'string')
         return null;
     var parsedDate = tDateTimeParser(date.toISOString());
@@ -7417,7 +7651,7 @@ var DateSeparator = React__default['default'].memo(UnMemoizedDateSeparator);
 var UnMemoizedEventComponent = function (props) {
     var _a, _b, _c;
     var _d = props.Avatar, Avatar$1 = _d === void 0 ? Avatar : _d, message = props.message;
-    var tDateTimeParser = useTranslationContext().tDateTimeParser;
+    var tDateTimeParser = useTranslationContext('EventComponent').tDateTimeParser;
     var _e = message.created_at, created_at = _e === void 0 ? '' : _e, event = message.event, text = message.text, type = message.type;
     var dateFormatter = function (date, format) {
         var parsedDate = tDateTimeParser(date);
@@ -7572,10 +7806,10 @@ var getUserColor = function (theme, userId) {
 var UnMemoizedFixedHeightMessage = function (props) {
     var _a, _b, _c, _d;
     var propGroupedByUser = props.groupedByUser, propMessage = props.message;
-    var theme = useChatContext().theme;
-    var _e = useMessageContext(), contextGroupedByUser = _e.groupedByUser, contextMessage = _e.message;
-    var _f = useComponentContext().MessageDeleted, MessageDeleted$1 = _f === void 0 ? MessageDeleted : _f;
-    var userLanguage = useTranslationContext().userLanguage;
+    var theme = useChatContext('FixedHeightMessage').theme;
+    var _e = useMessageContext('FixedHeightMessage'), contextGroupedByUser = _e.groupedByUser, contextMessage = _e.message;
+    var _f = useComponentContext('FixedHeightMessage').MessageDeleted, MessageDeleted$1 = _f === void 0 ? MessageDeleted : _f;
+    var userLanguage = useTranslationContext('FixedHeightMessage').userLanguage;
     var groupedByUser = propGroupedByUser !== undefined ? propGroupedByUser : contextGroupedByUser;
     var message = propMessage || contextMessage;
     var handleAction = useActionHandler(message);
@@ -7619,7 +7853,7 @@ var FixedHeightMessage = React__default['default'].memo(UnMemoizedFixedHeightMes
 
 var MessageWithContext = function (props) {
     var canPin = props.canPin, groupedByUser = props.groupedByUser, propMessage = props.Message, message = props.message, _a = props.messageActions, messageActions = _a === void 0 ? Object.keys(MESSAGE_ACTIONS) : _a, propOnUserClick = props.onUserClick, propOnUserHover = props.onUserHover, userRoles = props.userRoles;
-    var contextMessage = useComponentContext().Message;
+    var contextMessage = useComponentContext('Message').Message;
     var actionsEnabled = message.type === 'regular' && message.status === 'received';
     var MessageUIComponent = propMessage || contextMessage;
     var _b = useEditHandler(), clearEdit = _b.clearEdit, editing = _b.editing, setEdit = _b.setEdit;
@@ -7629,9 +7863,6 @@ var MessageWithContext = function (props) {
     }), onUserClick = _c.onUserClick, onUserHover = _c.onUserHover;
     var canDelete = userRoles.canDelete, canEdit = userRoles.canEdit, canFlag = userRoles.canFlag, canMute = userRoles.canMute, canQuote = userRoles.canQuote, canReact = userRoles.canReact, canReply = userRoles.canReply, isMyMessage = userRoles.isMyMessage;
     var messageActionsHandler = React.useCallback(function () {
-        if (!message || !messageActions) {
-            return [];
-        }
         return getMessageActions(messageActions, {
             canDelete: canDelete,
             canEdit: canEdit,
@@ -7661,8 +7892,8 @@ var MemoizedMessage = React__default['default'].memo(MessageWithContext, areMess
  */
 var Message = function (props) {
     var closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, disableQuotedMessages = props.disableQuotedMessages, getDeleteMessageErrorNotification = props.getDeleteMessageErrorNotification, getFlagMessageErrorNotification = props.getFlagMessageErrorNotification, getFlagMessageSuccessNotification = props.getFlagMessageSuccessNotification, getMuteUserErrorNotification = props.getMuteUserErrorNotification, getMuteUserSuccessNotification = props.getMuteUserSuccessNotification, getPinMessageErrorNotification = props.getPinMessageErrorNotification, message = props.message, _a = props.onlySenderCanEdit, onlySenderCanEdit = _a === void 0 ? false : _a, propOnMentionsClick = props.onMentionsClick, propOnMentionsHover = props.onMentionsHover, propOpenThread = props.openThread, pinPermissions = props.pinPermissions, propRetrySendMessage = props.retrySendMessage;
-    var addNotification = useChannelActionContext().addNotification;
-    var mutes = useChannelStateContext().mutes;
+    var addNotification = useChannelActionContext('Message').addNotification;
+    var mutes = useChannelStateContext('Message').mutes;
     var reactionSelectorRef = React.useRef(null);
     var handleAction = useActionHandler(message);
     var handleOpenThread = useOpenThreadHandler(message, propOpenThread);
@@ -7698,7 +7929,7 @@ var Message = function (props) {
 var MessageCommerceWithContext = function (props) {
     var _a, _b, _c, _d, _e, _f;
     var groupStyles = props.groupStyles, handleAction = props.handleAction, handleOpenThread = props.handleOpenThread, isMyMessage = props.isMyMessage, isReactionEnabled = props.isReactionEnabled, message = props.message, onUserClick = props.onUserClick, onUserHover = props.onUserHover, reactionSelectorRef = props.reactionSelectorRef, showDetailedReactions = props.showDetailedReactions, threadList = props.threadList;
-    var _g = useComponentContext(), Attachment = _g.Attachment, _h = _g.Avatar, Avatar$1 = _h === void 0 ? Avatar : _h, _j = _g.MessageDeleted, MessageDeleted$1 = _j === void 0 ? MessageDeleted : _j, _k = _g.MessageRepliesCountButton, MessageRepliesCountButton$1 = _k === void 0 ? MessageRepliesCountButton : _k, _l = _g.MessageOptions, MessageOptions$1 = _l === void 0 ? MessageOptions : _l, _m = _g.MessageTimestamp, MessageTimestamp$1 = _m === void 0 ? MessageTimestamp : _m, _o = _g.ReactionSelector, ReactionSelector$1 = _o === void 0 ? ReactionSelector : _o, _p = _g.ReactionsList, ReactionsList$1 = _p === void 0 ? ReactionsList : _p;
+    var _g = useComponentContext('MessageCommerce'), Attachment = _g.Attachment, _h = _g.Avatar, Avatar$1 = _h === void 0 ? Avatar : _h, _j = _g.MessageDeleted, MessageDeleted$1 = _j === void 0 ? MessageDeleted : _j, _k = _g.MessageRepliesCountButton, MessageRepliesCountButton$1 = _k === void 0 ? MessageRepliesCountButton : _k, _l = _g.MessageOptions, MessageOptions$1 = _l === void 0 ? MessageOptions : _l, _m = _g.MessageTimestamp, MessageTimestamp$1 = _m === void 0 ? MessageTimestamp : _m, _o = _g.ReactionSelector, ReactionSelector$1 = _o === void 0 ? ReactionSelector : _o, _p = _g.ReactionsList, ReactionsList$1 = _p === void 0 ? ReactionsList : _p;
     var hasAttachment = messageHasAttachments(message);
     var hasReactions = messageHasReactions(message);
     var firstGroupStyle = groupStyles ? groupStyles[0] : 'single';
@@ -7732,16 +7963,15 @@ var MemoizedMessageCommerce = React__default['default'].memo(MessageCommerceWith
  * UI component that renders a message and receives functionality from the Message/MessageList components
  */
 var MessageCommerce = function (props) {
-    var messageContext = useMessageContext();
+    var messageContext = useMessageContext('MessageCommerce');
     return React__default['default'].createElement(MemoizedMessageCommerce, __assign({}, messageContext, props));
 };
 
 var MessageLivestreamWithContext = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var clearEditingState = props.clearEditingState, editing = props.editing, groupStyles = props.groupStyles, handleAction = props.handleAction, handleOpenThread = props.handleOpenThread, handleRetry = props.handleRetry, initialMessage = props.initialMessage, isReactionEnabled = props.isReactionEnabled, message = props.message, messageWrapperRef = props.messageWrapperRef, onMentionsClickMessage = props.onMentionsClickMessage, onMentionsHoverMessage = props.onMentionsHoverMessage, onReactionListClick = props.onReactionListClick, onUserClick = props.onUserClick, onUserHover = props.onUserHover, reactionSelectorRef = props.reactionSelectorRef, _l = props.renderText, renderText$1 = _l === void 0 ? renderText : _l, showDetailedReactions = props.showDetailedReactions, unsafeHTML = props.unsafeHTML;
-    var _m = useComponentContext().QuotedMessage, QuotedMessage$1 = _m === void 0 ? QuotedMessage : _m;
-    var _o = useComponentContext(), Attachment = _o.Attachment, _p = _o.Avatar, Avatar$1 = _p === void 0 ? Avatar : _p, _q = _o.EditMessageInput, EditMessageInput = _q === void 0 ? EditMessageForm : _q, _r = _o.MessageDeleted, MessageDeleted$1 = _r === void 0 ? MessageDeleted : _r, _s = _o.MessageRepliesCountButton, MessageRepliesCountButton$1 = _s === void 0 ? MessageRepliesCountButton : _s, _t = _o.PinIndicator, PinIndicator$1 = _t === void 0 ? PinIndicator : _t, _u = _o.ReactionsList, ReactionsList = _u === void 0 ? SimpleReactionsList : _u, _v = _o.ReactionSelector, ReactionSelector$1 = _v === void 0 ? ReactionSelector : _v;
-    var _w = useTranslationContext(), t = _w.t, userLanguage = _w.userLanguage;
+    var _m = useComponentContext('MessageLivestream'), Attachment = _m.Attachment, _o = _m.Avatar, Avatar$1 = _o === void 0 ? Avatar : _o, _p = _m.EditMessageInput, EditMessageInput = _p === void 0 ? EditMessageForm : _p, _q = _m.MessageDeleted, MessageDeleted$1 = _q === void 0 ? MessageDeleted : _q, _r = _m.MessageRepliesCountButton, MessageRepliesCountButton$1 = _r === void 0 ? MessageRepliesCountButton : _r, _s = _m.PinIndicator, PinIndicator$1 = _s === void 0 ? PinIndicator : _s, _t = _m.QuotedMessage, QuotedMessage$1 = _t === void 0 ? QuotedMessage : _t, _u = _m.ReactionsList, ReactionsList = _u === void 0 ? SimpleReactionsList : _u, _v = _m.ReactionSelector, ReactionSelector$1 = _v === void 0 ? ReactionSelector : _v;
+    var _w = useTranslationContext('MessageLivestream'), t = _w.t, userLanguage = _w.userLanguage;
     var messageTextToRender = ((_a = message.i18n) === null || _a === void 0 ? void 0 : _a[userLanguage + "_text"]) || message.text;
     var messageText = React.useMemo(function () { return renderText$1(messageTextToRender, message.mentioned_users); }, [
         message.mentioned_users,
@@ -7804,8 +8034,8 @@ var MessageLivestreamWithContext = function (props) {
 };
 var MessageLivestreamActions = function (props) {
     var messageWrapperRef = props.messageWrapperRef, onReactionListClick = props.onReactionListClick;
-    var _a = useComponentContext().MessageTimestamp, MessageTimestamp$1 = _a === void 0 ? MessageTimestamp : _a;
-    var _b = useMessageContext(), getMessageActions = _b.getMessageActions, handleOpenThread = _b.handleOpenThread, initialMessage = _b.initialMessage, message = _b.message, threadList = _b.threadList;
+    var _a = useComponentContext('MessageLivestream').MessageTimestamp, MessageTimestamp$1 = _a === void 0 ? MessageTimestamp : _a;
+    var _b = useMessageContext('MessageLivestream'), getMessageActions = _b.getMessageActions, handleOpenThread = _b.handleOpenThread, initialMessage = _b.initialMessage, message = _b.message, threadList = _b.threadList;
     var _c = React.useState(false), actionsBoxOpen = _c[0], setActionsBoxOpen = _c[1];
     var hideOptions = React.useCallback(function () { return setActionsBoxOpen(false); }, []);
     var messageDeletedAt = !!message.deleted_at;
@@ -7866,7 +8096,7 @@ var MemoizedMessageLivestream = React__default['default'].memo(MessageLivestream
  * Implements the look and feel for a livestream use case.
  */
 var MessageLivestream = function (props) {
-    var messageContext = useMessageContext();
+    var messageContext = useMessageContext('MessageLivestream');
     var messageWrapperRef = React.useRef(null);
     var reactionSelectorRef = React.useRef(null);
     var message = props.message || messageContext.message;
@@ -7877,8 +8107,8 @@ var MessageLivestream = function (props) {
 var MessageTeamWithContext = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var clearEditingState = props.clearEditingState, editing = props.editing, getMessageActions = props.getMessageActions, groupStyles = props.groupStyles, handleAction = props.handleAction, handleOpenThread = props.handleOpenThread, handleRetry = props.handleRetry, initialMessage = props.initialMessage, isReactionEnabled = props.isReactionEnabled, message = props.message, messageWrapperRef = props.messageWrapperRef, onMentionsClickMessage = props.onMentionsClickMessage, onMentionsHoverMessage = props.onMentionsHoverMessage, onReactionListClick = props.onReactionListClick, onUserClick = props.onUserClick, onUserHover = props.onUserHover, reactionSelectorRef = props.reactionSelectorRef, _o = props.renderText, renderText$1 = _o === void 0 ? renderText : _o, showDetailedReactions = props.showDetailedReactions, threadList = props.threadList, unsafeHTML = props.unsafeHTML;
-    var _p = useComponentContext(), Attachment = _p.Attachment, _q = _p.Avatar, Avatar$1 = _q === void 0 ? Avatar : _q, _r = _p.EditMessageInput, EditMessageInput = _r === void 0 ? EditMessageForm : _r, _s = _p.MessageDeleted, MessageDeleted$1 = _s === void 0 ? MessageDeleted : _s, _t = _p.MessageRepliesCountButton, MessageRepliesCountButton$1 = _t === void 0 ? MessageRepliesCountButton : _t, _u = _p.MessageTimestamp, MessageTimestamp$1 = _u === void 0 ? MessageTimestamp : _u, _v = _p.PinIndicator, PinIndicator$1 = _v === void 0 ? PinIndicator : _v, _w = _p.QuotedMessage, QuotedMessage$1 = _w === void 0 ? QuotedMessage : _w, _x = _p.ReactionsList, ReactionsList = _x === void 0 ? SimpleReactionsList : _x, _y = _p.ReactionSelector, ReactionSelector$1 = _y === void 0 ? ReactionSelector : _y;
-    var _z = useTranslationContext(), t = _z.t, userLanguage = _z.userLanguage;
+    var _p = useComponentContext('MessageTeam'), Attachment = _p.Attachment, _q = _p.Avatar, Avatar$1 = _q === void 0 ? Avatar : _q, _r = _p.EditMessageInput, EditMessageInput = _r === void 0 ? EditMessageForm : _r, _s = _p.MessageDeleted, MessageDeleted$1 = _s === void 0 ? MessageDeleted : _s, _t = _p.MessageRepliesCountButton, MessageRepliesCountButton$1 = _t === void 0 ? MessageRepliesCountButton : _t, _u = _p.MessageTimestamp, MessageTimestamp$1 = _u === void 0 ? MessageTimestamp : _u, _v = _p.PinIndicator, PinIndicator$1 = _v === void 0 ? PinIndicator : _v, _w = _p.QuotedMessage, QuotedMessage$1 = _w === void 0 ? QuotedMessage : _w, _x = _p.ReactionsList, ReactionsList = _x === void 0 ? SimpleReactionsList : _x, _y = _p.ReactionSelector, ReactionSelector$1 = _y === void 0 ? ReactionSelector : _y;
+    var _z = useTranslationContext('MessageTeam'), t = _z.t, userLanguage = _z.userLanguage;
     var messageActions = getMessageActions();
     var showActionsBox = showMessageActionsBox(messageActions);
     var shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && !threadList;
@@ -7948,7 +8178,7 @@ var MemoizedMessageTeam = React__default['default'].memo(MessageTeamWithContext,
  * Implements the look and feel for a team style collaboration environment.
  */
 var MessageTeam = function (props) {
-    var messageContext = useMessageContext();
+    var messageContext = useMessageContext('MessageTeam');
     var reactionSelectorRef = React.useRef(null);
     var messageWrapperRef = React.useRef(null);
     var message = props.message || messageContext.message;
@@ -7965,8 +8195,8 @@ var UnMemoizedCustomNotification = function (props) {
 var CustomNotification = React__default['default'].memo(UnMemoizedCustomNotification);
 
 var UnMemoizedConnectionStatus = function () {
-    var client = useChatContext().client;
-    var t = useTranslationContext().t;
+    var client = useChatContext('ConnectionStatus').client;
+    var t = useTranslationContext('ConnectionStatus').t;
     var _a = React.useState(true), online = _a[0], setOnline = _a[1];
     React.useEffect(function () {
         var connectionChanged = function (_a) {
@@ -8187,8 +8417,8 @@ var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByU
 
 var useEnrichedMessages = function (args) {
     var channel = args.channel, disableDateSeparator = args.disableDateSeparator, headerPosition = args.headerPosition, hideDeletedMessages = args.hideDeletedMessages, hideNewMessageSeparator = args.hideNewMessageSeparator, messages = args.messages, noGroupByUser = args.noGroupByUser, threadList = args.threadList;
-    var client = useChatContext().client;
-    var HeaderComponent = useComponentContext().HeaderComponent;
+    var client = useChatContext('useEnrichedMessages').client;
+    var HeaderComponent = useComponentContext('useEnrichedMessages').HeaderComponent;
     var lastRead = React.useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
     var messagesWithDates = disableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator
         ? messages
@@ -8227,8 +8457,8 @@ var useLastReadData = function (props) {
 
 var useMessageListElements = function (props) {
     var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, onMessageLoadCaptured = props.onMessageLoadCaptured, read = props.read, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
-    var _a = useChatContext(), client = _a.client, customClasses = _a.customClasses;
-    var _b = useComponentContext(), _c = _b.DateSeparator, DateSeparator$1 = _c === void 0 ? DateSeparator : _c, HeaderComponent = _b.HeaderComponent, _d = _b.MessageSystem, MessageSystem = _d === void 0 ? EventComponent : _d;
+    var _a = useChatContext('useMessageListElements'), client = _a.client, customClasses = _a.customClasses;
+    var _b = useComponentContext('useMessageListElements'), _c = _b.DateSeparator, DateSeparator$1 = _c === void 0 ? DateSeparator : _c, HeaderComponent = _b.HeaderComponent, _d = _b.MessageSystem, MessageSystem = _d === void 0 ? EventComponent : _d;
     // get the readData, but only for messages submitted by the user themselves
     var readData = useLastReadData({
         messages: enrichedMessages,
@@ -8272,7 +8502,7 @@ var useMessageListElements = function (props) {
 
 function useMessageListScrollManager(params) {
     var onScrollBy = params.onScrollBy, scrollContainerMeasures = params.scrollContainerMeasures, scrolledUpThreshold = params.scrolledUpThreshold, scrollToBottom = params.scrollToBottom, showNewMessages = params.showNewMessages;
-    var client = useChatContext().client;
+    var client = useChatContext('useMessageListScrollManager').client;
     var measures = React.useRef({
         offsetHeight: 0,
         scrollHeight: 0,
@@ -8415,14 +8645,23 @@ var UnMemoizedMessageNotification = function (props) {
 };
 var MessageNotification = React__default['default'].memo(UnMemoizedMessageNotification);
 
+var MessageListNotifications = function (props) {
+    var hasNewMessages = props.hasNewMessages, MessageNotification = props.MessageNotification, notifications = props.notifications, scrollToBottom = props.scrollToBottom;
+    var t = useTranslationContext('MessageListNotifications').t;
+    return (React__default['default'].createElement("div", { className: 'str-chat__list-notifications' },
+        notifications.map(function (notification) { return (React__default['default'].createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)); }),
+        React__default['default'].createElement(ConnectionStatus, null),
+        React__default['default'].createElement(MessageNotification, { onClick: scrollToBottom, showNotification: hasNewMessages }, t('New Messages!'))));
+};
+
 /**
  * TypingIndicator lists users currently typing, it needs to be a child of Channel component
  */
 var UnMemoizedTypingIndicator = function (props) {
     var _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, _b = props.avatarSize, avatarSize = _b === void 0 ? 32 : _b, threadList = props.threadList;
-    var _c = useChannelStateContext(), channelConfig = _c.channelConfig, thread = _c.thread;
-    var client = useChatContext().client;
-    var _d = useTypingContext().typing, typing = _d === void 0 ? {} : _d;
+    var _c = useChannelStateContext('TypingIndicator'), channelConfig = _c.channelConfig, thread = _c.thread;
+    var client = useChatContext('TypingIndicator').client;
+    var _d = useTypingContext('TypingIndicator').typing, typing = _d === void 0 ? {} : _d;
     if ((channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.typing_events) === false) {
         return null;
     }
@@ -8454,23 +8693,17 @@ var UnMemoizedTypingIndicator = function (props) {
 };
 var TypingIndicator = React__default['default'].memo(UnMemoizedTypingIndicator);
 
-var DefaultMessageListNotifications = function (props) {
-    var hasNewMessages = props.hasNewMessages, MessageNotification = props.MessageNotification, notifications = props.notifications, scrollToBottom = props.scrollToBottom;
-    var t = useTranslationContext().t;
-    return (React__default['default'].createElement("div", { className: 'str-chat__list-notifications' },
-        notifications.map(function (notification) { return (React__default['default'].createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text)); }),
-        React__default['default'].createElement(ConnectionStatus, null),
-        React__default['default'].createElement(MessageNotification, { onClick: scrollToBottom, showNotification: hasNewMessages }, t('New Messages!'))));
-};
 var useInternalInfiniteScrollProps = function (props) {
-    var _a = useComponentContext().LoadingIndicator, LoadingIndicator$1 = _a === void 0 ? LoadingIndicator : _a;
+    var _a = useComponentContext('useInternalInfiniteScrollProps').LoadingIndicator, LoadingIndicator$1 = _a === void 0 ? LoadingIndicator : _a;
     return __assign({ hasMore: props.hasMore, isLoading: props.loadingMore, loader: (React__default['default'].createElement(Center, { key: 'loadingindicator' },
             React__default['default'].createElement(LoadingIndicator$1, { size: 20 }))), loadMore: useCallLoadMore(props.loadMore, props.messageLimit || 100) }, props.internalInfiniteScrollProps);
 };
 var MessageListWithContext = function (props) {
-    var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, _h = props.returnAllReadData, returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read;
-    var customClasses = useChatContext().customClasses;
-    var _l = useComponentContext(), _m = _l.EmptyStateIndicator, EmptyStateIndicator$1 = _m === void 0 ? EmptyStateIndicator : _m, _o = _l.MessageListNotifications, MessageListNotifications = _o === void 0 ? DefaultMessageListNotifications : _o, _p = _l.MessageNotification, MessageNotification$1 = _p === void 0 ? MessageNotification : _p, _q = _l.TypingIndicator, TypingIndicator$1 = _q === void 0 ? TypingIndicator : _q;
+    var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+    _h = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+    returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read;
+    var customClasses = useChatContext('MessageList').customClasses;
+    var _l = useComponentContext('MessageList'), _m = _l.EmptyStateIndicator, EmptyStateIndicator$1 = _m === void 0 ? EmptyStateIndicator : _m, _o = _l.MessageListNotifications, MessageListNotifications$1 = _o === void 0 ? MessageListNotifications : _o, _p = _l.MessageNotification, MessageNotification$1 = _p === void 0 ? MessageNotification : _p, _q = _l.TypingIndicator, TypingIndicator$1 = _q === void 0 ? TypingIndicator : _q;
     var _r = useScrollLocationLogic({
         messages: messages,
         scrolledUpThreshold: props.scrolledUpThreshold,
@@ -8527,7 +8760,7 @@ var MessageListWithContext = function (props) {
             React__default['default'].createElement("ul", { className: 'str-chat__ul' }, elements),
             React__default['default'].createElement(TypingIndicator$1, { threadList: threadList }),
             React__default['default'].createElement("div", { key: 'bottom' })))),
-        React__default['default'].createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, MessageNotification: MessageNotification$1, notifications: notifications, scrollToBottom: scrollToBottom })));
+        React__default['default'].createElement(MessageListNotifications$1, { hasNewMessages: hasNewMessages, MessageNotification: MessageNotification$1, notifications: notifications, scrollToBottom: scrollToBottom })));
 };
 /**
  * The MessageList component renders a list of Messages.
@@ -8538,8 +8771,8 @@ var MessageListWithContext = function (props) {
  * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
  */
 var MessageList = function (props) {
-    var loadMore = useChannelActionContext().loadMore;
-    var _a = useChannelStateContext(); _a.members; // eslint-disable-line @typescript-eslint/no-unused-vars
+    var loadMore = useChannelActionContext('MessageList').loadMore;
+    var _a = useChannelStateContext('MessageList'); _a.members; // eslint-disable-line @typescript-eslint/no-unused-vars
     _a.mutes; // eslint-disable-line @typescript-eslint/no-unused-vars
     _a.watchers; // eslint-disable-line @typescript-eslint/no-unused-vars
     var restChannelStateContext = __rest(_a, ["members", "mutes", "watchers"]);
@@ -8548,7 +8781,7 @@ var MessageList = function (props) {
 
 var useGiphyPreview = function (separateGiphyPreview) {
     var _a = React.useState(), giphyPreviewMessage = _a[0], setGiphyPreviewMessage = _a[1];
-    var client = useChatContext().client;
+    var client = useChatContext('useGiphyPreview').client;
     React.useEffect(function () {
         var handleEvent = function (event) {
             var message = event.message, user = event.user;
@@ -8654,15 +8887,14 @@ 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, notifications = props.notifications, _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;
-    var _u = useChatContext(), client = _u.client, customClasses = _u.customClasses;
-    var t = useTranslationContext().t;
+    var _k = useComponentContext('VirtualizedMessageList'), _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.MessageListNotifications, MessageListNotifications$1 = _q === void 0 ? MessageListNotifications : _q, _r = _k.MessageNotification, MessageNotification$1 = _r === void 0 ? MessageNotification : _r, _s = _k.MessageSystem, MessageSystem = _s === void 0 ? EventComponent : _s, _t = _k.TypingIndicator, TypingIndicator = _t === void 0 ? null : _t, _u = _k.VirtualMessage, contextMessage = _u === void 0 ? MessageSimple : _u;
+    var _v = useChatContext('VirtualizedMessageList'), client = _v.client, customClasses = _v.customClasses;
     var lastRead = React.useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
     var MessageUIComponent = propMessage || contextMessage;
-    var _v = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _v.giphyPreviewMessage, setGiphyPreviewMessage = _v.setGiphyPreviewMessage;
+    var _w = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _w.giphyPreviewMessage, setGiphyPreviewMessage = _w.setGiphyPreviewMessage;
     var processedMessages = React.useMemo(function () {
         if (typeof messages === 'undefined') {
             return [];
@@ -8693,7 +8925,7 @@ var VirtualizedMessageListWithContext = function (props) {
         client.userID,
     ]);
     var virtuoso = React.useRef(null);
-    var _w = useNewMessageNotification(processedMessages, client.userID), atBottom = _w.atBottom, newMessagesNotification = _w.newMessagesNotification, setNewMessagesNotification = _w.setNewMessagesNotification;
+    var _x = useNewMessageNotification(processedMessages, client.userID), atBottom = _x.atBottom, newMessagesNotification = _x.newMessagesNotification, setNewMessagesNotification = _x.setNewMessagesNotification;
     var scrollToBottom = React.useCallback(function () {
         if (virtuoso.current) {
             virtuoso.current.scrollToIndex(processedMessages.length - 1);
@@ -8782,9 +9014,8 @@ 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("div", { className: 'str-chat__list-notifications' },
-                React__default['default'].createElement(MessageNotification$1, { onClick: scrollToBottom, showNotification: newMessagesNotification }, t('New Messages!')))),
+            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(MessageListNotifications$1, { hasNewMessages: newMessagesNotification, MessageNotification: MessageNotification$1, notifications: notifications, scrollToBottom: scrollToBottom }),
         giphyPreviewMessage && React__default['default'].createElement(GiphyPreviewMessage$1, { message: giphyPreviewMessage })));
 };
 /**
@@ -8794,26 +9025,25 @@ var VirtualizedMessageListWithContext = function (props) {
  * **Note**: It works well when there are thousands of messages in a channel, it has a shortcoming though - the message UI should have a fixed height.
  */
 function VirtualizedMessageList(props) {
-    var loadMore = useChannelActionContext().loadMore;
-    var _a = useChannelStateContext(), channel = _a.channel, hasMore = _a.hasMore, loadingMore = _a.loadingMore, contextMessages = _a.messages;
+    var loadMore = useChannelActionContext('VirtualizedMessageList').loadMore;
+    var _a = useChannelStateContext('VirtualizedMessageList'), channel = _a.channel, hasMore = _a.hasMore, loadingMore = _a.loadingMore, contextMessages = _a.messages, notifications = _a.notifications;
     var messages = props.messages || contextMessages;
-    return (React__default['default'].createElement(VirtualizedMessageListWithContext, __assign({ channel: channel, hasMore: !!hasMore, loadingMore: !!loadingMore, loadMore: loadMore, messages: messages }, props)));
+    return (React__default['default'].createElement(VirtualizedMessageListWithContext, __assign({ channel: channel, hasMore: !!hasMore, loadingMore: !!loadingMore, loadMore: loadMore, messages: messages, notifications: notifications }, props)));
 }
 
 /**
  * The Thread component renders a parent Message with a list of replies
  */
 var Thread = function (props) {
-    var _a, _b;
-    var _c = useChannelStateContext(), channel = _c.channel, thread = _c.thread;
-    if (!thread || ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.getConfig) === null || _a === void 0 ? void 0 : _a.call(channel)) === null || _b === void 0 ? void 0 : _b.replies) === false)
+    var _a = useChannelStateContext('Thread'), channel = _a.channel, channelConfig = _a.channelConfig, thread = _a.thread;
+    if (!thread || (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.replies) === false)
         return null;
     // The wrapper ensures a key variable is set and the component recreates on thread switch
     return React__default['default'].createElement(ThreadInner, __assign({}, props, { key: "thread-" + thread.id + "-" + (channel === null || channel === void 0 ? void 0 : channel.cid) }));
 };
 var DefaultThreadHeader = function (props) {
     var closeThread = props.closeThread, thread = props.thread;
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('Thread').t;
     var getReplyCount = function () {
         if (!thread.reply_count)
             return '';
@@ -8832,15 +9062,15 @@ var DefaultThreadHeader = function (props) {
                 React__default['default'].createElement("path", { d: 'M9.916 1.027L8.973.084 5 4.058 1.027.084l-.943.943L4.058 5 .084 8.973l.943.943L5 5.942l3.973 3.974.943-.943L5.942 5z', fillRule: 'evenodd' })))));
 };
 var DefaultThreadStart = function () {
-    var t = useTranslationContext().t;
+    var t = useTranslationContext('Thread').t;
     return React__default['default'].createElement("div", { className: 'str-chat__thread-start' }, t('Start of a new thread'));
 };
 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.fullWidth, fullWidth = _b === void 0 ? false : _b, PropInput = props.Input, PropMessage = props.Message, virtualized = props.virtualized;
-    var _c = useChannelStateContext(), thread = _c.thread, threadHasMore = _c.threadHasMore, threadLoadingMore = _c.threadLoadingMore, threadMessages = _c.threadMessages;
-    var _d = useChannelActionContext(), closeThread = _d.closeThread, loadMoreThread = _d.loadMoreThread;
-    var customClasses = useChatContext().customClasses;
-    var _e = useComponentContext(), ContextInput = _e.ThreadInput, ContextMessage = _e.Message, _f = _e.ThreadHeader, ThreadHeader = _f === void 0 ? DefaultThreadHeader : _f, _g = _e.ThreadStart, ThreadStart = _g === void 0 ? DefaultThreadStart : _g, _h = _e.VirtualMessage, VirtualMessage = _h === void 0 ? FixedHeightMessage : _h;
+    var _c = useChannelStateContext('Thread'), thread = _c.thread, threadHasMore = _c.threadHasMore, threadLoadingMore = _c.threadLoadingMore, threadMessages = _c.threadMessages;
+    var _d = useChannelActionContext('Thread'), closeThread = _d.closeThread, loadMoreThread = _d.loadMoreThread;
+    var customClasses = useChatContext('Thread').customClasses;
+    var _e = useComponentContext('Thread'), ContextInput = _e.ThreadInput, ContextMessage = _e.Message, _f = _e.ThreadHeader, ThreadHeader = _f === void 0 ? DefaultThreadHeader : _f, _g = _e.ThreadStart, ThreadStart = _g === void 0 ? DefaultThreadStart : _g, _h = _e.VirtualMessage, VirtualMessage = _h === void 0 ? FixedHeightMessage : _h;
     var messageList = React.useRef(null);
     var ThreadInput = PropInput || (additionalMessageInputProps === null || additionalMessageInputProps === void 0 ? void 0 : additionalMessageInputProps.Input) || ContextInput || MessageInputSmall;
     var ThreadMessage = PropMessage || (additionalMessageListProps === null || additionalMessageListProps === void 0 ? void 0 : additionalMessageListProps.Message);
@@ -8874,7 +9104,7 @@ var ThreadInner = function (props) {
 
 var UnMemoizedWindow = function (props) {
     var children = props.children, _a = props.hideOnThread, hideOnThread = _a === void 0 ? false : _a;
-    var thread = useChannelStateContext().thread;
+    var thread = useChannelStateContext('Window').thread;
     // If thread is active and window should hide on thread. Return null
     if (thread && hideOnThread)
         return null;
@@ -9006,6 +9236,7 @@ exports.deTranslations = deTranslations;
 exports.defaultPinPermissions = defaultPinPermissions;
 exports.defaultScrollToItem = defaultScrollToItem;
 exports.defaultTimestampFormat = defaultTimestampFormat;
+exports.emojiMarkdownPlugin = emojiMarkdownPlugin;
 exports.enTranslations = enTranslations;
 exports.esTranslations = esTranslations;
 exports.escapeRegExp = escapeRegExp;
@@ -9019,6 +9250,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;
@@ -9037,6 +9269,10 @@ exports.itTranslations = itTranslations;
 exports.jaTranslations = jaTranslations;
 exports.koTranslations = koTranslations;
 exports.listener = Listeners;
+exports.markDownRenderers = markDownRenderers;
+exports.matchMarkdownLinks = matchMarkdownLinks;
+exports.mentionsMarkdownPlugin = mentionsMarkdownPlugin;
+exports.messageCodeBlocks = messageCodeBlocks;
 exports.messageHasAttachments = messageHasAttachments;
 exports.messageHasReactions = messageHasReactions;
 exports.missingUseFlagHandlerParameterWarning = missingUseFlagHandlerParameterWarning;
@@ -9059,7 +9295,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;