stream-chat-react 6.8.0 → 6.9.0

package/dist/index.cjs.js

@@ -778,24 +778,31 @@ function generateRandomId() {
     // prettier-ignore
     return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
 }
-var smartRender = function (ElementOrComponentOrLiteral, props, fallback) {
-    if (ElementOrComponentOrLiteral === undefined && fallback) {
-        ElementOrComponentOrLiteral = fallback;
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt#getting_whole_characters
+var getWholeChar = function (str, i) {
+    var code = str.charCodeAt(i);
+    if (Number.isNaN(code))
+        return '';
+    if (code < 0xd800 || code > 0xdfff)
+        return str.charAt(i);
+    if (0xd800 <= code && code <= 0xdbff) {
+        if (str.length <= i + 1) {
+            throw 'High surrogate without following low surrogate';
+        }
+        var next = str.charCodeAt(i + 1);
+        if (0xdc00 > next || next > 0xdfff) {
+            throw 'High surrogate without following low surrogate';
+        }
+        return str.charAt(i) + str.charAt(i + 1);
     }
-    if (React__default['default'].isValidElement(ElementOrComponentOrLiteral)) {
-        // Flow cast through any, to make flow believe it's a React.Element
-        var element = ElementOrComponentOrLiteral;
-        return element;
+    if (i === 0) {
+        throw 'Low surrogate without preceding high surrogate';
     }
-    // Flow cast through any to remove React.Element after previous check
-    var ComponentOrLiteral = ElementOrComponentOrLiteral;
-    if (typeof ComponentOrLiteral === 'string' ||
-        typeof ComponentOrLiteral === 'number' ||
-        typeof ComponentOrLiteral === 'boolean' ||
-        ComponentOrLiteral == null) {
-        return ComponentOrLiteral;
+    var prev = str.charCodeAt(i - 1);
+    if (0xd800 > prev || prev > 0xdbff) {
+        throw 'Low surrogate without preceding high surrogate';
     }
-    return React__default['default'].createElement(ComponentOrLiteral, __assign({}, props));
+    return '';
 };
 
 var DefaultSuggestionListHeader = function (_a) {
@@ -1901,7 +1908,8 @@ var Avatar = function (props) {
         setError(false);
         setLoaded(false);
     }, [image]);
-    var initials = ((name === null || name === void 0 ? void 0 : name.toString()) || '').charAt(0);
+    var nameStr = (name === null || name === void 0 ? void 0 : name.toString()) || '';
+    var initials = getWholeChar(nameStr, 0);
     return (React__default['default'].createElement("div", { className: "str-chat__avatar str-chat__avatar--" + shape, "data-testid": 'avatar', onClick: onClick, onMouseOver: onMouseOver, style: {
             flexBasis: size + "px",
             fontSize: size / 2 + "px",
@@ -2018,6 +2026,101 @@ var defaultMinimalEmojis = [
 // use this only for small lists like in ReactionSelector
 var getStrippedEmojiData = function (data) { return (__assign(__assign({}, data), { emojis: {} })); };
 
+var useCreateChannelStateContext = function (value) {
+    var _a;
+    var acceptedFiles = value.acceptedFiles, channel = value.channel, channelConfig = value.channelConfig, error = value.error, hasMore = value.hasMore, loading = value.loading, loadingMore = value.loadingMore, maxNumberOfFiles = value.maxNumberOfFiles, members = value.members, _b = value.messages, messages = _b === void 0 ? [] : _b, multipleUploads = value.multipleUploads, mutes = value.mutes, notifications = value.notifications, pinnedMessages = value.pinnedMessages, quotedMessage = value.quotedMessage, _c = value.read, read = _c === void 0 ? {} : _c, skipMessageDataMemoization = value.skipMessageDataMemoization, thread = value.thread, threadHasMore = value.threadHasMore, threadLoadingMore = value.threadLoadingMore, _d = value.threadMessages, threadMessages = _d === void 0 ? [] : _d, watcherCount = value.watcherCount, watcher_count = value.watcher_count, watchers = value.watchers;
+    var channelId = channel.cid;
+    var lastRead = channel.initialized && ((_a = channel.lastRead()) === null || _a === void 0 ? void 0 : _a.getTime());
+    var membersLength = Object.keys(members || []).length;
+    var notificationsLength = notifications.length;
+    var readUsers = Object.values(read);
+    var readUsersLength = readUsers.length;
+    var readUsersLastReads = readUsers.map(function (_a) {
+        var last_read = _a.last_read;
+        return last_read.toISOString();
+    }).join();
+    var threadMessagesLength = threadMessages === null || threadMessages === void 0 ? void 0 : threadMessages.length;
+    var memoizedMessageData = skipMessageDataMemoization
+        ? messages
+        : messages
+            .map(function (_a) {
+            var deleted_at = _a.deleted_at, latest_reactions = _a.latest_reactions, pinned = _a.pinned, reply_count = _a.reply_count, status = _a.status, updated_at = _a.updated_at;
+            return "" + deleted_at + (latest_reactions ? latest_reactions.map(function (_a) {
+                var type = _a.type;
+                return type;
+            }).join() : '') + pinned + reply_count + status + (updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
+                ? updated_at.toISOString()
+                : updated_at || '');
+        })
+            .join();
+    var memoizedThreadMessageData = threadMessages
+        .map(function (_a) {
+        var deleted_at = _a.deleted_at, latest_reactions = _a.latest_reactions, pinned = _a.pinned, status = _a.status, updated_at = _a.updated_at;
+        return "" + deleted_at + (latest_reactions ? latest_reactions.map(function (_a) {
+            var type = _a.type;
+            return type;
+        }).join() : '') + pinned + status + (updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
+            ? updated_at.toISOString()
+            : updated_at || '');
+    })
+        .join();
+    var channelStateContext = React.useMemo(function () { return ({
+        acceptedFiles: acceptedFiles,
+        channel: channel,
+        channelConfig: channelConfig,
+        error: error,
+        hasMore: hasMore,
+        loading: loading,
+        loadingMore: loadingMore,
+        maxNumberOfFiles: maxNumberOfFiles,
+        members: members,
+        messages: messages,
+        multipleUploads: multipleUploads,
+        mutes: mutes,
+        notifications: notifications,
+        pinnedMessages: pinnedMessages,
+        quotedMessage: quotedMessage,
+        read: read,
+        thread: thread,
+        threadHasMore: threadHasMore,
+        threadLoadingMore: threadLoadingMore,
+        threadMessages: threadMessages,
+        watcher_count: watcher_count,
+        watcherCount: watcherCount,
+        watchers: watchers,
+    }); }, [
+        channelId,
+        error,
+        hasMore,
+        lastRead,
+        loading,
+        loadingMore,
+        membersLength,
+        memoizedMessageData,
+        memoizedThreadMessageData,
+        notificationsLength,
+        quotedMessage,
+        readUsersLength,
+        readUsersLastReads,
+        skipMessageDataMemoization,
+        thread,
+        threadHasMore,
+        threadLoadingMore,
+        threadMessagesLength,
+        watcherCount,
+    ]);
+    return channelStateContext;
+};
+
+var useCreateTypingContext = function (value) {
+    var typing = value.typing;
+    var typingValue = Object.keys(typing || {}).join();
+    var typingContext = React.useMemo(function () { return ({
+        typing: typing,
+    }); }, [typingValue]);
+    return typingContext;
+};
+
 var ChatContext = React__default['default'].createContext({});
 var ChatProvider = function (_a) {
     var children = _a.children, value = _a.value;
@@ -4809,13 +4912,101 @@ var MessageInputFlat = function () {
                 !cooldownRemaining && React__default['default'].createElement(SendButton$1, { sendMessage: handleSubmit })))));
 };
 
+var useCreateMessageInputContext = function (value) {
+    var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeEmojiPicker = value.closeEmojiPicker, cooldownInterval = value.cooldownInterval, disabled = value.disabled, disableMentions = value.disableMentions, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiIndex = value.emojiIndex, emojiPickerIsOpen = value.emojiPickerIsOpen, emojiPickerRef = value.emojiPickerRef, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleEmojiKeyDown = value.handleEmojiKeyDown, handleSubmit = value.handleSubmit, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, keycodeSubmitKeys = value.keycodeSubmitKeys, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectEmoji = value.onSelectEmoji, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openEmojiPicker = value.openEmojiPicker, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, showCommandsList = value.showCommandsList, text = value.text, textareaRef = value.textareaRef, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
+    var editing = message === null || message === void 0 ? void 0 : message.editing;
+    var fileUploadsValue = Object.entries(fileUploads)
+        // eslint-disable-next-line
+        .map(function (_a) {
+        _a[0]; var value = _a[1];
+        return value.state;
+    })
+        .join();
+    var imageUploadsValue = Object.entries(imageUploads)
+        // eslint-disable-next-line
+        .map(function (_a) {
+        _a[0]; var value = _a[1];
+        return value.state;
+    })
+        .join();
+    var mentionedUsersLength = mentioned_users.length;
+    var parentId = parent === null || parent === void 0 ? void 0 : parent.id;
+    var messageInputContext = React.useMemo(function () { return ({
+        additionalTextareaProps: additionalTextareaProps,
+        attachments: attachments,
+        autocompleteTriggers: autocompleteTriggers,
+        clearEditingState: clearEditingState,
+        closeCommandsList: closeCommandsList,
+        closeEmojiPicker: closeEmojiPicker,
+        cooldownInterval: cooldownInterval,
+        disabled: disabled,
+        disableMentions: disableMentions,
+        doFileUploadRequest: doFileUploadRequest,
+        doImageUploadRequest: doImageUploadRequest,
+        emojiIndex: emojiIndex,
+        emojiPickerIsOpen: emojiPickerIsOpen,
+        emojiPickerRef: emojiPickerRef,
+        errorHandler: errorHandler,
+        fileOrder: fileOrder,
+        fileUploads: fileUploads,
+        focus: focus,
+        grow: grow,
+        handleChange: handleChange,
+        handleEmojiKeyDown: handleEmojiKeyDown,
+        handleSubmit: handleSubmit,
+        imageOrder: imageOrder,
+        imageUploads: imageUploads,
+        insertText: insertText,
+        isUploadEnabled: isUploadEnabled,
+        keycodeSubmitKeys: keycodeSubmitKeys,
+        maxFilesLeft: maxFilesLeft,
+        maxRows: maxRows,
+        mentionAllAppUsers: mentionAllAppUsers,
+        mentioned_users: mentioned_users,
+        mentionQueryParams: mentionQueryParams,
+        message: message,
+        noFiles: noFiles,
+        numberOfUploads: numberOfUploads,
+        onPaste: onPaste,
+        onSelectEmoji: onSelectEmoji,
+        onSelectUser: onSelectUser,
+        openCommandsList: openCommandsList,
+        openEmojiPicker: openEmojiPicker,
+        overrideSubmitHandler: overrideSubmitHandler,
+        parent: parent,
+        publishTypingEvent: publishTypingEvent,
+        removeFile: removeFile,
+        removeImage: removeImage,
+        setCooldownRemaining: setCooldownRemaining,
+        setText: setText,
+        showCommandsList: showCommandsList,
+        text: text,
+        textareaRef: textareaRef,
+        uploadFile: uploadFile,
+        uploadImage: uploadImage,
+        uploadNewFiles: uploadNewFiles,
+        useMentionsTransliteration: useMentionsTransliteration,
+    }); }, [
+        editing,
+        emojiPickerIsOpen,
+        fileUploadsValue,
+        imageUploadsValue,
+        isUploadEnabled,
+        mentionedUsersLength,
+        parentId,
+        publishTypingEvent,
+        text,
+    ]);
+    return messageInputContext;
+};
+
 var UnMemoizedMessageInput = function (props) {
     var PropInput = props.Input;
     var _a = useComponentContext(), ContextInput = _a.Input, _b = _a.TriggerProvider, TriggerProvider = _b === void 0 ? DefaultTriggerProvider : _b;
     var Input = PropInput || ContextInput || MessageInputFlat;
     var messageInputState = useMessageInputState(props);
     var cooldownTimerState = useCooldownTimer();
-    var messageInputContextValue = __assign(__assign(__assign({}, cooldownTimerState), messageInputState), props);
+    var messageInputContextValue = useCreateMessageInputContext(__assign(__assign(__assign({}, cooldownTimerState), messageInputState), props));
     return (React__default['default'].createElement(MessageInputContextProvider, { value: messageInputContextValue },
         React__default['default'].createElement(TriggerProvider, null,
             React__default['default'].createElement(Input, null))));
@@ -5207,7 +5398,7 @@ var UnMemoizedChannel = function (props) {
     return React__default['default'].createElement(ChannelInner, __assign({}, props, { channel: channel, key: channel.cid }));
 };
 var ChannelInner = function (props) {
-    var acceptedFiles = props.acceptedFiles, 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 acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, children = props.children, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _a = props.emojiData, emojiData = _a === void 0 ? defaultEmojiData : _a, _b = props.LoadingErrorIndicator, LoadingErrorIndicator$1 = _b === void 0 ? LoadingErrorIndicator : _b, _c = props.LoadingIndicator, LoadingIndicator$1 = _c === void 0 ? LoadingIndicator : _c, maxNumberOfFiles = props.maxNumberOfFiles, _d = props.multipleUploads, multipleUploads = _d === void 0 ? true : _d, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover, skipMessageDataMemoization = props.skipMessageDataMemoization;
     var _e = useChatContext(), client = _e.client, customClasses = _e.customClasses, mutes = _e.mutes, theme = _e.theme, useImageFlagEmojisOnWindows = _e.useImageFlagEmojisOnWindows;
     var t = useTranslationContext().t;
     var _f = React.useState([]), notifications = _f[0], setNotifications = _f[1];
@@ -5225,14 +5416,12 @@ var ChannelInner = function (props) {
         emojiData: emojiData,
         emojiSetDef: emojiSetDef,
     };
-    var throttledCopyStateFromChannel = React.useCallback(throttle__default['default'](function () {
-        if (!channel)
-            return;
-        dispatch({ channel: channel, type: 'copyStateFromChannelOnEvent' });
-    }, 500, { leading: true, trailing: true }), [channel]);
-    var markRead = React.useCallback(function () {
-        var _a;
-        if (!channel || channel.disconnected || !((_a = channel.getConfig()) === null || _a === void 0 ? void 0 : _a.read_events)) {
+    var throttledCopyStateFromChannel = throttle__default['default'](function () { return dispatch({ channel: channel, type: 'copyStateFromChannelOnEvent' }); }, 500, {
+        leading: true,
+        trailing: true,
+    });
+    var markRead = function () {
+        if (channel.disconnected || !(channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.read_events)) {
             return;
         }
         lastRead.current = new Date();
@@ -5245,10 +5434,10 @@ var ChannelInner = function (props) {
         if (originalTitle.current) {
             document.title = originalTitle.current;
         }
-    }, [channel, doMarkReadRequest]);
-    var markReadThrottled = React.useCallback(throttle__default['default'](markRead, 500, { leading: true, trailing: true }), [markRead]);
-    var handleEvent = React.useCallback(function (event) {
-        var _a, _b, _c, _d, _e;
+    };
+    var markReadThrottled = throttle__default['default'](markRead, 500, { leading: true, trailing: true });
+    var handleEvent = function (event) {
+        var _a, _b, _c, _d;
         if (event.message) {
             dispatch({
                 channel: channel,
@@ -5257,11 +5446,7 @@ var ChannelInner = function (props) {
             });
         }
         if (event.type === 'typing.start' || event.type === 'typing.stop') {
-            dispatch({
-                channel: channel,
-                type: 'setTyping',
-            });
-            return;
+            return dispatch({ channel: channel, type: 'setTyping' });
         }
         if (event.type === 'connection.changed' && typeof event.online === 'boolean') {
             online.current = event.online;
@@ -5275,7 +5460,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,22 +5472,21 @@ 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;
             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]);
@@ -5318,7 +5502,7 @@ var ChannelInner = function (props) {
                     case 4:
                         done = true;
                         originalTitle.current = document.title;
-                        if (channel && !errored) {
+                        if (!errored) {
                             dispatch({ channel: channel, type: 'initStateFromChannel' });
                             if (channel.countUnread() > 0)
                                 markRead();
@@ -5338,15 +5522,14 @@ var ChannelInner = function (props) {
             if (errored || !done)
                 return;
             document.removeEventListener('visibilitychange', onVisibilityChange);
-            if (channel)
-                channel.off(handleEvent);
+            channel === null || channel === void 0 ? void 0 : channel.off(handleEvent);
             client.off('connection.changed', handleEvent);
             client.off('connection.recovered', handleEvent);
             client.off('user.updated', handleEvent);
             client.off('user.deleted', handleEvent);
             notificationTimeouts.forEach(clearTimeout);
         };
-    }, [channel, client, handleEvent, markRead]);
+    }, [channel.cid]);
     React.useEffect(function () {
         var _a;
         if (state.thread && ((_a = state.messages) === null || _a === void 0 ? void 0 : _a.length)) {
@@ -5373,17 +5556,15 @@ var ChannelInner = function (props) {
         }, 5000);
         notificationTimeouts.push(timeout);
     };
-    var loadMoreFinished = React.useCallback(debounce__default['default'](function (hasMore, messages) {
+    var loadMoreFinished = debounce__default['default'](function (hasMore, messages) {
         if (!isMounted.current)
             return;
         dispatch({ hasMore: hasMore, messages: messages, type: 'loadMoreFinished' });
     }, 2000, {
         leading: true,
         trailing: true,
-    }), []);
-    var loadMore = React.useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-inferrable-types
-    function (limit) {
+    });
+    var loadMore = function (limit) {
         if (limit === void 0) { limit = 100; }
         return __awaiter(void 0, void 0, void 0, function () {
             var oldestMessage, oldestID, perPage, queryResponse, e_2, hasMoreMessages;
@@ -5391,7 +5572,7 @@ var ChannelInner = function (props) {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        if (!online.current || !window.navigator.onLine || !channel)
+                        if (!online.current || !window.navigator.onLine)
                             return [2 /*return*/, 0];
                         oldestMessage = (_a = state === null || state === void 0 ? void 0 : state.messages) === null || _a === void 0 ? void 0 : _a[0];
                         if (state.loadingMore || (oldestMessage === null || oldestMessage === void 0 ? void 0 : oldestMessage.status) !== 'received')
@@ -5426,27 +5607,22 @@ var ChannelInner = function (props) {
                 }
             });
         });
-    }, [channel, loadMoreFinished, online, state.loadingMore, state.messages]);
-    var updateMessage = React.useCallback(function (updatedMessage) {
-        if (!channel)
-            return;
-        // adds the message to the local channel state..
-        // this adds to both the main channel state as well as any reply threads
+    };
+    var updateMessage = function (updatedMessage) {
+        // add the message to the local channel state
         channel.state.addMessageSorted(updatedMessage, true);
         dispatch({
             channel: channel,
             parentId: state.thread && updatedMessage.parent_id,
             type: 'copyMessagesFromChannel',
         });
-    }, [channel, state.thread]);
+    };
     var isUserResponseArray = function (output) { var _a; return ((_a = output[0]) === null || _a === void 0 ? void 0 : _a.id) != null; };
-    var doSendMessage = React.useCallback(function (message, customMessageData) { return __awaiter(void 0, void 0, void 0, function () {
+    var doSendMessage = function (message, customMessageData) { return __awaiter(void 0, void 0, void 0, function () {
         var attachments, id, _a, mentioned_users, parent_id, text, mentions, messageData, messageResponse, error_1, stringError, parsedError;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    if (!channel)
-                        return [2 /*return*/];
                     attachments = message.attachments, id = message.id, _a = message.mentioned_users, mentioned_users = _a === void 0 ? [] : _a, parent_id = message.parent_id, text = message.text;
                     mentions = isUserResponseArray(mentioned_users)
                         ? mentioned_users.map(function (_a) {
@@ -5470,7 +5646,7 @@ var ChannelInner = function (props) {
                     _b.label = 5;
                 case 5:
                     // replace it after send is completed
-                    if (messageResponse && messageResponse.message) {
+                    if (messageResponse === null || messageResponse === void 0 ? void 0 : messageResponse.message) {
                         updateMessage(__assign(__assign({}, messageResponse.message), { status: 'received' }));
                     }
                     if (quotedMessage)
@@ -5485,25 +5661,20 @@ var ChannelInner = function (props) {
                 case 7: return [2 /*return*/];
             }
         });
-    }); }, [channel, doSendMessageRequest, quotedMessage, updateMessage]);
-    var createMessagePreview = React.useCallback(function (text, attachments, parent, mentioned_users) {
-        // create a preview of the message
+    }); };
+    var createMessagePreview = function (text, attachments, parent, mentioned_users) {
         var clientSideID = client.userID + "-" + uuid.v4();
         return __assign({ __html: text, attachments: attachments, created_at: new Date(), html: text, id: clientSideID, mentioned_users: mentioned_users, reactions: [], status: 'sending', text: text, type: 'regular', user: client.user }, ((parent === null || parent === void 0 ? void 0 : parent.id) ? { parent_id: parent.id } : null));
-    }, [client.user, client.userID]);
-    var sendMessage = React.useCallback(function (_a, customMessageData) {
+    };
+    var sendMessage = function (_a, customMessageData) {
         var _b = _a.attachments, attachments = _b === void 0 ? [] : _b, _c = _a.mentioned_users, mentioned_users = _c === void 0 ? [] : _c, _d = _a.parent, parent = _d === void 0 ? undefined : _d, _e = _a.text, text = _e === void 0 ? '' : _e;
         return __awaiter(void 0, void 0, void 0, function () {
             var messagePreview;
             return __generator(this, function (_f) {
                 switch (_f.label) {
                     case 0:
-                        if (!channel)
-                            return [2 /*return*/];
-                        // remove error messages upon submit
                         channel.state.filterErrorMessages();
                         messagePreview = createMessagePreview(text, attachments, parent, mentioned_users);
-                        // first we add the message to the UI
                         updateMessage(messagePreview);
                         return [4 /*yield*/, doSendMessage(messagePreview, customMessageData)];
                     case 1:
@@ -5512,62 +5683,55 @@ var ChannelInner = function (props) {
                 }
             });
         });
-    }, [channel === null || channel === void 0 ? void 0 : channel.state, createMessagePreview, doSendMessage, updateMessage]);
-    var retrySendMessage = React.useCallback(function (message) { return __awaiter(void 0, void 0, void 0, function () {
+    };
+    var retrySendMessage = function (message) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    // set the message status to sending
                     updateMessage(__assign(__assign({}, message), { errorStatusCode: undefined, status: 'sending' }));
-                    // actually try to send the message...
                     return [4 /*yield*/, doSendMessage(message)];
                 case 1:
-                    // actually try to send the message...
                     _a.sent();
                     return [2 /*return*/];
             }
         });
-    }); }, [doSendMessage, updateMessage]);
-    var removeMessage = React.useCallback(function (message) {
-        if (!channel)
-            return;
+    }); };
+    var removeMessage = function (message) {
         channel.state.removeMessage(message);
         dispatch({
             channel: channel,
             parentId: state.thread && message.parent_id,
             type: 'copyMessagesFromChannel',
         });
-    }, [channel, state.thread]);
+    };
     /** THREAD */
-    var openThread = React.useCallback(function (message, event) {
-        if (!channel)
-            return;
-        if (event && event.preventDefault) {
-            event.preventDefault();
-        }
+    var openThread = function (message, event) {
+        event.preventDefault();
         dispatch({ channel: channel, message: message, type: 'openThread' });
-    }, [channel]);
-    var loadMoreThreadFinished = React.useCallback(debounce__default['default'](function (threadHasMore, threadMessages) {
+    };
+    var closeThread = function (event) {
+        event.preventDefault();
+        dispatch({ type: 'closeThread' });
+    };
+    var loadMoreThreadFinished = debounce__default['default'](function (threadHasMore, threadMessages) {
         dispatch({
             threadHasMore: threadHasMore,
             threadMessages: threadMessages,
             type: 'loadMoreThreadFinished',
         });
-    }, 2000, { leading: true, trailing: true }), []);
-    var loadMoreThread = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+    }, 2000, { leading: true, trailing: true });
+    var loadMoreThread = function () { return __awaiter(void 0, void 0, void 0, function () {
         var parentID, oldMessages, oldestMessageID, limit, queryResponse, threadHasMoreMessages, newThreadMessages;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    // prevent duplicate loading events...
-                    if (!channel || state.threadLoadingMore || !state.thread)
+                    if (state.threadLoadingMore || !state.thread)
                         return [2 /*return*/];
                     dispatch({ type: 'startLoadingThread' });
                     parentID = state.thread.id;
                     if (!parentID) {
-                        dispatch({ type: 'closeThread' });
-                        return [2 /*return*/];
+                        return [2 /*return*/, dispatch({ type: 'closeThread' })];
                     }
                     oldMessages = channel.state.threads[parentID] || [];
                     oldestMessageID = (_a = oldMessages[0]) === null || _a === void 0 ? void 0 : _a.id;
@@ -5583,7 +5747,7 @@ var ChannelInner = function (props) {
                     queryResponse = _b.sent();
                     threadHasMoreMessages = queryResponse.messages.length === limit;
                     newThreadMessages = channel.state.threads[parentID] || [];
-                    // next set loadingMore to false so we can start asking for more data...
+                    // next set loadingMore to false so we can start asking for more data
                     loadMoreThreadFinished(threadHasMoreMessages, newThreadMessages);
                     return [3 /*break*/, 4];
                 case 3:
@@ -5593,18 +5757,12 @@ var ChannelInner = function (props) {
                 case 4: return [2 /*return*/];
             }
         });
-    }); }, [channel, loadMoreThreadFinished, state.thread, state.threadLoadingMore]);
-    var closeThread = React.useCallback(function (event) {
-        if (event && event.preventDefault) {
-            event.preventDefault();
-        }
-        dispatch({ type: 'closeThread' });
-    }, []);
+    }); };
     var onMentionsHoverOrClick = useMentionsHandlers(onMentionsHover, onMentionsClick);
     var editMessage = useEditMessageHandler(doUpdateMessageRequest);
     var typing = state.typing, restState = __rest(state, ["typing"]);
-    var channelStateContextValue = __assign(__assign({}, restState), { acceptedFiles: acceptedFiles, channel: channel, channelConfig: channelConfig, maxNumberOfFiles: maxNumberOfFiles, multipleUploads: multipleUploads, mutes: mutes, notifications: notifications, quotedMessage: quotedMessage, watcher_count: state.watcherCount });
-    var channelActionContextValue = {
+    var channelStateContextValue = useCreateChannelStateContext(__assign(__assign({}, restState), { acceptedFiles: acceptedFiles, channel: channel, channelConfig: channelConfig, maxNumberOfFiles: maxNumberOfFiles, multipleUploads: multipleUploads, mutes: mutes, notifications: notifications, quotedMessage: quotedMessage, watcher_count: state.watcherCount }));
+    var channelActionContextValue = React.useMemo(function () { return ({
         addNotification: addNotification,
         closeThread: closeThread,
         dispatch: dispatch,
@@ -5618,8 +5776,9 @@ var ChannelInner = function (props) {
         retrySendMessage: retrySendMessage,
         sendMessage: sendMessage,
         setQuotedMessage: setQuotedMessage,
+        skipMessageDataMemoization: skipMessageDataMemoization,
         updateMessage: updateMessage,
-    };
+    }); }, [channel.cid, loadMore, quotedMessage]);
     var componentContextValue = React.useMemo(function () { return ({
         Attachment: props.Attachment || Attachment,
         AutocompleteSuggestionHeader: props.AutocompleteSuggestionHeader,
@@ -5663,9 +5822,9 @@ var ChannelInner = function (props) {
         EmojiIndex: props.EmojiIndex,
         EmojiPicker: props.EmojiPicker,
     }); }, []);
-    var typingContextValue = {
+    var typingContextValue = useCreateTypingContext({
         typing: typing,
-    };
+    });
     var chatClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) || 'str-chat';
     var channelClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.channel) || 'str-chat-channel';
     var windowsEmojiClass = useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/)
@@ -5679,7 +5838,7 @@ var ChannelInner = function (props) {
         return (React__default['default'].createElement("div", { className: chatClass + " " + channelClass + " " + theme },
             React__default['default'].createElement(LoadingIndicator$1, { size: 25 })));
     }
-    if (!(channel === null || channel === void 0 ? void 0 : channel.watch)) {
+    if (!channel.watch) {
         return (React__default['default'].createElement("div", { className: chatClass + " " + channelClass + " " + theme },
             React__default['default'].createElement("div", null, t('Channel Missing'))));
     }
@@ -6004,7 +6163,7 @@ 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;
     React.useEffect(function () {
@@ -6024,9 +6183,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*/];
                 }
             });
         }); };
@@ -6060,12 +6217,11 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
     var _b = React.useState(false), error = _b[0], setError = _b[1];
     var _c = React.useState(true), hasNextPage = _c[0], setHasNextPage = _c[1];
     var _d = React.useState(true), loadingChannels = _d[0], setLoadingChannels = _d[1];
-    var _e = React.useState(0), offset = _e[0], setOffset = _e[1];
-    var _f = React.useState(true), refreshing = _f[0], setRefreshing = _f[1];
+    var _e = React.useState(true), refreshing = _e[0], setRefreshing = _e[1];
     var filterString = React.useMemo(function () { return JSON.stringify(filters); }, [filters]);
     var sortString = React.useMemo(function () { return JSON.stringify(sort); }, [sort]);
     var queryChannels = function (queryType) { return __awaiter(void 0, void 0, void 0, function () {
-        var newOptions, channelQueryResponse, newChannels, err_1;
+        var offset, newOptions, channelQueryResponse, newChannels, err_1;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -6075,27 +6231,21 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
                         setLoadingChannels(true);
                     }
                     setRefreshing(true);
-                    newOptions = __assign({ limit: (_a = options === null || options === void 0 ? void 0 : options.limit) !== null && _a !== void 0 ? _a : MAX_QUERY_CHANNELS_LIMIT, offset: queryType === 'reload' ? 0 : offset }, options);
+                    offset = queryType === 'reload' ? 0 : channels.length;
+                    newOptions = __assign({ limit: (_a = options === null || options === void 0 ? void 0 : options.limit) !== null && _a !== void 0 ? _a : MAX_QUERY_CHANNELS_LIMIT, offset: offset }, options);
                     _b.label = 1;
                 case 1:
                     _b.trys.push([1, 3, , 4]);
                     return [4 /*yield*/, client.queryChannels(filters, sort || {}, newOptions)];
                 case 2:
                     channelQueryResponse = _b.sent();
-                    newChannels = void 0;
-                    if (queryType === 'reload') {
-                        newChannels = channelQueryResponse;
-                    }
-                    else {
-                        newChannels = __spreadArray(__spreadArray([], channels), channelQueryResponse);
-                    }
+                    newChannels = queryType === 'reload' ? channelQueryResponse : __spreadArray(__spreadArray([], channels), channelQueryResponse);
                     setChannels(newChannels);
                     setHasNextPage(channelQueryResponse.length >= newOptions.limit);
-                    // Set active channel only after first page.
-                    if (offset === 0 && activeChannelHandler) {
+                    // Set active channel only on load of first page
+                    if (!offset && activeChannelHandler) {
                         activeChannelHandler(newChannels, setChannels);
                     }
-                    setOffset(newChannels.length);
                     return [3 /*break*/, 4];
                 case 3:
                     err_1 = _b.sent();
@@ -6120,7 +6270,6 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
         hasNextPage: hasNextPage,
         loadNextPage: loadNextPage,
         setChannels: setChannels,
-        setOffset: setOffset,
         status: {
             error: error,
             loadingChannels: loadingChannels,
@@ -6570,11 +6719,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);
@@ -7252,7 +7401,7 @@ var Streami18n = /** @class */ (function () {
     return Streami18n;
 }());
 
-var version = '6.8.0';
+var version = '6.9.0';
 
 var useChat = function (_a) {
     var _b;
@@ -7265,7 +7414,7 @@ var useChat = function (_a) {
     var _e = React.useState(), channel = _e[0], setChannel = _e[1];
     var _f = React.useState([]), mutes = _f[0], setMutes = _f[1];
     var _g = React.useState(initialNavOpen), navOpen = _g[0], setNavOpen = _g[1];
-    var clientMutes = (_b = client === null || client === void 0 ? void 0 : client.user) === null || _b === void 0 ? void 0 : _b.mutes;
+    var clientMutes = (_b = client.user) === null || _b === void 0 ? void 0 : _b.mutes;
     var closeMobileNav = function () { return setNavOpen(false); };
     var openMobileNav = function () { return setTimeout(function () { return setNavOpen(true); }, 100); };
     React.useEffect(function () {
@@ -7335,6 +7484,27 @@ var useChat = function (_a) {
     };
 };
 
+var useCreateChatContext = function (value) {
+    var _a;
+    var channel = value.channel, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, theme = value.theme, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
+    var channelCid = channel === null || channel === void 0 ? void 0 : channel.cid;
+    var clientValues = "" + client.clientID + Object.keys(client.activeChannels).length + Object.keys(client.listeners).length + client.mutedChannels.length + "\n  " + ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id);
+    var mutedUsersLength = mutes.length;
+    var chatContext = React.useMemo(function () { return ({
+        channel: channel,
+        client: client,
+        closeMobileNav: closeMobileNav,
+        customClasses: customClasses,
+        mutes: mutes,
+        navOpen: navOpen,
+        openMobileNav: openMobileNav,
+        setActiveChannel: setActiveChannel,
+        theme: theme,
+        useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
+    }); }, [channelCid, clientValues, mutedUsersLength, navOpen]);
+    return chatContext;
+};
+
 var darkModeTheme = {
     '--bg-gradient-end': '#101214',
     '--bg-gradient-start': '#070a0d',
@@ -7373,20 +7543,21 @@ var Chat = function (props) {
     var children = props.children, client = props.client, customClasses = props.customClasses, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
     var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, closeMobileNav = _e.closeMobileNav, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, translators = _e.translators;
     useCustomStyles(darkMode ? darkModeTheme : customStyles);
+    var chatContextValue = useCreateChatContext({
+        channel: channel,
+        client: client,
+        closeMobileNav: closeMobileNav,
+        customClasses: customClasses,
+        mutes: mutes,
+        navOpen: navOpen,
+        openMobileNav: openMobileNav,
+        setActiveChannel: setActiveChannel,
+        theme: theme,
+        useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
+    });
     if (!translators.t)
         return null;
-    return (React__default['default'].createElement(ChatProvider, { value: {
-            channel: channel,
-            client: client,
-            closeMobileNav: closeMobileNav,
-            customClasses: customClasses,
-            mutes: mutes,
-            navOpen: navOpen,
-            openMobileNav: openMobileNav,
-            setActiveChannel: setActiveChannel,
-            theme: theme,
-            useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
-        } },
+    return (React__default['default'].createElement(ChatProvider, { value: chatContextValue },
         React__default['default'].createElement(TranslationProvider, { value: translators }, children)));
 };
 
@@ -8654,7 +8825,7 @@ function useShouldForceScrollToBottom(messages, currentUserId) {
 
 var PREPEND_OFFSET = Math.pow(10, 7);
 var VirtualizedMessageListWithContext = function (props) {
-    var channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, hasMore = props.hasMore, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, loadingMore = props.loadingMore, loadMore = props.loadMore, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, _e = props.overscan, overscan = _e === void 0 ? 0 : _e, 
+    var additionalVirtuosoProps = props.additionalVirtuosoProps, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? true : _a, hasMore = props.hasMore, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, loadingMore = props.loadingMore, loadMore = props.loadMore, propMessage = props.Message, _d = props.messageLimit, messageLimit = _d === void 0 ? 100 : _d, messages = props.messages, _e = props.overscan, overscan = _e === void 0 ? 0 : _e, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _f = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _f === void 0 ? false : _f, _g = props.separateGiphyPreview, separateGiphyPreview = _g === void 0 ? false : _g, _h = props.shouldGroupByUser, shouldGroupByUser = _h === void 0 ? false : _h, _j = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _j === void 0 ? 'smooth' : _j;
     var _k = useComponentContext(), _l = _k.DateSeparator, DateSeparator$1 = _l === void 0 ? DateSeparator : _l, _m = _k.EmptyStateIndicator, EmptyStateIndicator$1 = _m === void 0 ? EmptyStateIndicator : _m, _o = _k.GiphyPreviewMessage, GiphyPreviewMessage$1 = _o === void 0 ? GiphyPreviewMessage : _o, _p = _k.LoadingIndicator, LoadingIndicator$1 = _p === void 0 ? LoadingIndicator : _p, _q = _k.MessageNotification, MessageNotification$1 = _q === void 0 ? MessageNotification : _q, _r = _k.MessageSystem, MessageSystem = _r === void 0 ? EventComponent : _r, _s = _k.TypingIndicator, TypingIndicator = _s === void 0 ? null : _s, _t = _k.VirtualMessage, contextMessage = _t === void 0 ? MessageSimple : _t;
@@ -8782,7 +8953,7 @@ var VirtualizedMessageListWithContext = function (props) {
     var virtualizedMessageListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list';
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement("div", { className: virtualizedMessageListClass },
-            React__default['default'].createElement(reactVirtuoso.Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, initialTopMostItemIndex: processedMessages.length ? processedMessages.length - 1 : 0, itemContent: function (i) { return messageRenderer(processedMessages, i); }, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))),
+            React__default['default'].createElement(reactVirtuoso.Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, components: virtuosoComponents, firstItemIndex: PREPEND_OFFSET - numItemsPrepended, followOutput: followOutput, initialTopMostItemIndex: processedMessages.length ? processedMessages.length - 1 : 0, itemContent: function (i) { return messageRenderer(processedMessages, i); }, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, additionalVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))),
             React__default['default'].createElement("div", { className: 'str-chat__list-notifications' },
                 React__default['default'].createElement(MessageNotification$1, { onClick: scrollToBottom, showNotification: newMessagesNotification }, t('New Messages!')))),
         giphyPreviewMessage && React__default['default'].createElement(GiphyPreviewMessage$1, { message: giphyPreviewMessage })));
@@ -9019,6 +9190,7 @@ exports.getLatestMessagePreview = getLatestMessagePreview;
 exports.getMessageActions = getMessageActions;
 exports.getNonImageAttachments = getNonImageAttachments;
 exports.getReadByTooltipText = getReadByTooltipText;
+exports.getWholeChar = getWholeChar;
 exports.handleActionWarning = handleActionWarning;
 exports.hiTranslations = hiTranslations;
 exports.isAudioAttachment = isAudioAttachment;
@@ -9059,7 +9231,6 @@ exports.renderPreviewText = renderPreviewText;
 exports.renderText = renderText;
 exports.ruTranslations = ruTranslations;
 exports.showMessageActionsBox = showMessageActionsBox;
-exports.smartRender = smartRender;
 exports.trTranslations = trTranslations;
 exports.useActionHandler = useActionHandler;
 exports.useBreakpoint = useBreakpoint;