stream-chat-react 11.12.1 → 11.12.2

package/dist/browser.full-bundle.js

@@ -54264,6 +54264,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
     var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
+    var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
     var DEFAULT_THREAD_PAGE_SIZE = 50;
     var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 
@@ -54631,6 +54632,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
     var hasNotMoreMessages = function (returnedCountMessages, limit) {
         return returnedCountMessages < limit;
     };
+    function isDateSeparatorMessage(message) {
+        return message.customType === CUSTOM_MESSAGE_TYPE.date && !!message.date && isDate(message.date);
+    }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useEnrichedMessages = function (args) {
         var channel = args.channel, disableDateSeparator = args.disableDateSeparator, groupStyles = args.groupStyles, headerPosition = args.headerPosition, hideDeletedMessages = args.hideDeletedMessages, hideNewMessageSeparator = args.hideNewMessageSeparator, messages = args.messages, noGroupByUser = args.noGroupByUser;
@@ -54951,7 +54955,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
                     unreadMessages > 0;
             };
             var onVisibilityChange = function () {
-                if (shouldMarkRead(unreadCount))
+                if (shouldMarkRead(channel.countUnread()))
                     markRead();
             };
             var handleMessageNew = function (event) {
@@ -54973,7 +54977,6 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
                 }
                 else if (newMessageToCurrentChannel &&
                     mainChannelUpdated &&
-                    !isOwnMessage &&
                     shouldMarkRead(channel.countUnread())) {
                     markRead();
                 }
@@ -54982,7 +54985,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
             document.addEventListener('visibilitychange', onVisibilityChange);
             var hasScrolledToBottom = previousRenderMessageListScrolledToBottom.current !== isMessageListScrolledToBottom &&
                 isMessageListScrolledToBottom;
-            if (shouldMarkRead(hasScrolledToBottom ? channel.countUnread() : unreadCount))
+            if (hasScrolledToBottom && shouldMarkRead(channel.countUnread()))
                 markRead();
             previousRenderMessageListScrolledToBottom.current = isMessageListScrolledToBottom;
             return function () {
@@ -55264,35 +55267,123 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var selectColor = function (number, dark) {
+        var hue = number * 137.508; // use golden angle approximation
+        return "hsl(".concat(hue, ",").concat(dark ? '50%' : '85%', ", ").concat(dark ? '75%' : '55%', ")");
+    };
+    var hashUserId = function (userId) {
+        var hash = userId.split('').reduce(function (acc, c) {
+            acc = (acc << 5) - acc + c.charCodeAt(0); // eslint-disable-line
+            return acc & acc; // eslint-disable-line no-bitwise
+        }, 0);
+        return Math.abs(hash) / Math.pow(10, Math.ceil(Math.log10(Math.abs(hash) + 1)));
+    };
+    var getUserColor = function (theme, userId) {
+        return selectColor(hashUserId(userId), theme.includes('dark'));
+    };
+    var UnMemoizedFixedHeightMessage = function (props) {
+        var _a, _b, _c, _d;
+        var propGroupedByUser = props.groupedByUser, propMessage = props.message;
+        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);
+        var handleDelete = useDeleteHandler(message);
+        var role = useUserRole(message);
+        var messageTextToRender = ((_a = message === null || message === void 0 ? void 0 : message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) || (message === null || message === void 0 ? void 0 : message.text);
+        var renderedText = React$2.useMemo(function () { return renderText(messageTextToRender, message.mentioned_users); }, [
+            message.mentioned_users,
+            messageTextToRender,
+        ]);
+        var userId = ((_b = message.user) === null || _b === void 0 ? void 0 : _b.id) || '';
+        var userColor = React$2.useMemo(function () { return getUserColor(theme, userId); }, [userId, theme]);
+        var messageActionsHandler = React$2.useCallback(function () { return getMessageActions(['delete'], { canDelete: role.canDelete }); }, [role]);
+        var images = (_c = message === null || message === void 0 ? void 0 : message.attachments) === null || _c === void 0 ? void 0 : _c.filter(function (_a) {
+            var type = _a.type;
+            return type === 'image';
+        });
+        return (React__default["default"].createElement("div", { className: "str-chat__virtual-message__wrapper ".concat(role.isMyMessage ? 'str-chat__virtual-message__wrapper--me' : '', " ").concat(groupedByUser ? 'str-chat__virtual-message__wrapper--group' : ''), key: message.id },
+            message.user && (React__default["default"].createElement(Avatar, { image: message.user.image, name: message.user.name || message.user.id, shape: 'rounded', size: 38, user: message.user })),
+            React__default["default"].createElement("div", { className: 'str-chat__virtual-message__content' },
+                React__default["default"].createElement("div", { className: 'str-chat__virtual-message__meta' },
+                    React__default["default"].createElement("div", { className: 'str-chat__virtual-message__author', style: { color: userColor } },
+                        React__default["default"].createElement("strong", null, ((_d = message.user) === null || _d === void 0 ? void 0 : _d.name) || 'unknown'))),
+                message.deleted_at || message.type === 'deleted' ? (React__default["default"].createElement(MessageDeleted$1, { message: message })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    images && React__default["default"].createElement(Gallery, { images: images }),
+                    React__default["default"].createElement("div", { className: 'str-chat__virtual-message__text', "data-testid": 'msg-text' },
+                        renderedText,
+                        message.mml && (React__default["default"].createElement(MML$1, { actionHandler: handleAction, align: 'left', source: message.mml })),
+                        React__default["default"].createElement("div", { className: 'str-chat__virtual-message__data' },
+                            React__default["default"].createElement(MessageActions, { customWrapperClass: 'str-chat__virtual-message__actions', getMessageActions: messageActionsHandler, handleDelete: handleDelete, message: message, mine: function () { return role.isMyMessage; } }),
+                            React__default["default"].createElement("span", { className: 'str-chat__virtual-message__date' },
+                                React__default["default"].createElement(MessageTimestamp, { customClass: 'str-chat__message-simple-timestamp', message: message })))))))));
+    };
+    /**
+     * @deprecated - This UI component will be removed in the next major release.
+     *
+     * FixedHeightMessage - This component renders a single message.
+     * It uses fixed height elements to make sure it works well in VirtualizedMessageList
+     */
+    var FixedHeightMessage = React__default["default"].memo(UnMemoizedFixedHeightMessage);
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};function defaultRenderMessages(_a) {
         var channelUnreadUiState = _a.channelUnreadUiState, components = _a.components, customClasses = _a.customClasses, lastReceivedId = _a.lastReceivedMessageId, messageGroupStyles = _a.messageGroupStyles, messages = _a.messages, readData = _a.readData, messageProps = _a.sharedMessageProps;
         var DateSeparator = components.DateSeparator, HeaderComponent = components.HeaderComponent, MessageSystem = components.MessageSystem, UnreadMessagesSeparator = components.UnreadMessagesSeparator;
-        return messages.map(function (message, index) {
-            if (message.customType === CUSTOM_MESSAGE_TYPE.date && message.date && isDate(message.date)) {
-                return (React__default["default"].createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
+        var renderedMessages = [];
+        var firstMessage;
+        for (var index = 0; index < messages.length; index++) {
+            var message = messages[index];
+            if (isDateSeparatorMessage(message)) {
+                renderedMessages.push(React__default["default"].createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
                     React__default["default"].createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
             }
-            if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
-                return (React__default["default"].createElement("li", { key: 'intro' },
+            else if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
+                renderedMessages.push(React__default["default"].createElement("li", { key: 'intro' },
                     React__default["default"].createElement(HeaderComponent, null)));
             }
-            if (message.type === 'system') {
-                return (React__default["default"].createElement("li", { key: message.id || message.created_at },
+            else if (message.type === 'system') {
+                renderedMessages.push(React__default["default"].createElement("li", { key: message.id || message.created_at },
                     React__default["default"].createElement(MessageSystem, { message: message })));
             }
-            var groupStyles = messageGroupStyles[message.id] || '';
-            var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
-            var isNewestMessage = index === messages.length - 1;
-            var isLastReadMessage = (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id) === message.id;
-            var showUnreadSeparator = isLastReadMessage &&
-                !isNewestMessage &&
-                ((channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id) || (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) > 0); // unread count can be 0 if the user marks unread only own messages
-            return (React__default["default"].createElement(React$2.Fragment, { key: message.id || message.created_at },
-                React__default["default"].createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
-                    React__default["default"].createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))),
-                showUnreadSeparator && UnreadMessagesSeparator && (React__default["default"].createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
-                    React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState.unread_messages })))));
-        });
+            else {
+                if (!firstMessage) {
+                    firstMessage = message;
+                }
+                var groupStyles = messageGroupStyles[message.id] || '';
+                var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
+                var createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+                var lastReadTimestamp = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read.getTime();
+                var isFirstMessage = (firstMessage === null || firstMessage === void 0 ? void 0 : firstMessage.id) && firstMessage.id === message.id;
+                var isNewestMessage = index === messages.length - 1;
+                var isLastReadMessage = (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id) === message.id ||
+                    (!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) && createdAtTimestamp === lastReadTimestamp);
+                var isFirstUnreadMessage = (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id) === message.id ||
+                    (!!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) &&
+                        !!createdAtTimestamp &&
+                        !!lastReadTimestamp &&
+                        createdAtTimestamp > lastReadTimestamp &&
+                        isFirstMessage);
+                var showUnreadSeparatorAbove = !(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id) && isFirstUnreadMessage;
+                var showUnreadSeparatorBelow = isLastReadMessage &&
+                    !isNewestMessage &&
+                    ((channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id) || !!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages)); // this part has to be here as we do not mark channel read when sending a message
+                renderedMessages.push(React__default["default"].createElement(React$2.Fragment, { key: message.id || message.created_at },
+                    showUnreadSeparatorAbove && UnreadMessagesSeparator && (React__default["default"].createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                        React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages }))),
+                    React__default["default"].createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
+                        React__default["default"].createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))),
+                    showUnreadSeparatorBelow && UnreadMessagesSeparator && (React__default["default"].createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                        React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages })))));
+            }
+        }
+        return renderedMessages;
     }
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MessageListWithContext = function (props) {
@@ -56915,72 +57006,6 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var selectColor = function (number, dark) {
-        var hue = number * 137.508; // use golden angle approximation
-        return "hsl(".concat(hue, ",").concat(dark ? '50%' : '85%', ", ").concat(dark ? '75%' : '55%', ")");
-    };
-    var hashUserId = function (userId) {
-        var hash = userId.split('').reduce(function (acc, c) {
-            acc = (acc << 5) - acc + c.charCodeAt(0); // eslint-disable-line
-            return acc & acc; // eslint-disable-line no-bitwise
-        }, 0);
-        return Math.abs(hash) / Math.pow(10, Math.ceil(Math.log10(Math.abs(hash) + 1)));
-    };
-    var getUserColor = function (theme, userId) {
-        return selectColor(hashUserId(userId), theme.includes('dark'));
-    };
-    var UnMemoizedFixedHeightMessage = function (props) {
-        var _a, _b, _c, _d;
-        var propGroupedByUser = props.groupedByUser, propMessage = props.message;
-        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);
-        var handleDelete = useDeleteHandler(message);
-        var role = useUserRole(message);
-        var messageTextToRender = ((_a = message === null || message === void 0 ? void 0 : message.i18n) === null || _a === void 0 ? void 0 : _a["".concat(userLanguage, "_text")]) || (message === null || message === void 0 ? void 0 : message.text);
-        var renderedText = React$2.useMemo(function () { return renderText(messageTextToRender, message.mentioned_users); }, [
-            message.mentioned_users,
-            messageTextToRender,
-        ]);
-        var userId = ((_b = message.user) === null || _b === void 0 ? void 0 : _b.id) || '';
-        var userColor = React$2.useMemo(function () { return getUserColor(theme, userId); }, [userId, theme]);
-        var messageActionsHandler = React$2.useCallback(function () { return getMessageActions(['delete'], { canDelete: role.canDelete }); }, [role]);
-        var images = (_c = message === null || message === void 0 ? void 0 : message.attachments) === null || _c === void 0 ? void 0 : _c.filter(function (_a) {
-            var type = _a.type;
-            return type === 'image';
-        });
-        return (React__default["default"].createElement("div", { className: "str-chat__virtual-message__wrapper ".concat(role.isMyMessage ? 'str-chat__virtual-message__wrapper--me' : '', " ").concat(groupedByUser ? 'str-chat__virtual-message__wrapper--group' : ''), key: message.id },
-            message.user && (React__default["default"].createElement(Avatar, { image: message.user.image, name: message.user.name || message.user.id, shape: 'rounded', size: 38, user: message.user })),
-            React__default["default"].createElement("div", { className: 'str-chat__virtual-message__content' },
-                React__default["default"].createElement("div", { className: 'str-chat__virtual-message__meta' },
-                    React__default["default"].createElement("div", { className: 'str-chat__virtual-message__author', style: { color: userColor } },
-                        React__default["default"].createElement("strong", null, ((_d = message.user) === null || _d === void 0 ? void 0 : _d.name) || 'unknown'))),
-                message.deleted_at || message.type === 'deleted' ? (React__default["default"].createElement(MessageDeleted$1, { message: message })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    images && React__default["default"].createElement(Gallery, { images: images }),
-                    React__default["default"].createElement("div", { className: 'str-chat__virtual-message__text', "data-testid": 'msg-text' },
-                        renderedText,
-                        message.mml && (React__default["default"].createElement(MML$1, { actionHandler: handleAction, align: 'left', source: message.mml })),
-                        React__default["default"].createElement("div", { className: 'str-chat__virtual-message__data' },
-                            React__default["default"].createElement(MessageActions, { customWrapperClass: 'str-chat__virtual-message__actions', getMessageActions: messageActionsHandler, handleDelete: handleDelete, message: message, mine: function () { return role.isMyMessage; } }),
-                            React__default["default"].createElement("span", { className: 'str-chat__virtual-message__date' },
-                                React__default["default"].createElement(MessageTimestamp, { customClass: 'str-chat__message-simple-timestamp', message: message })))))))));
-    };
-    /**
-     * @deprecated - This UI component will be removed in the next major release.
-     *
-     * FixedHeightMessage - This component renders a single message.
-     * It uses fixed height elements to make sure it works well in VirtualizedMessageList
-     */
-    var FixedHeightMessage = React__default["default"].memo(UnMemoizedFixedHeightMessage);
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var PREPEND_OFFSET = Math.pow(10, 7);
     function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
         return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
@@ -57036,7 +57061,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
     };
     var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
         var _a, _b, _c, _d, _e, _f, _g;
-        var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _h = virtuosoContext.unreadMessageCount, unreadMessageCount = _h === void 0 ? 0 : _h, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
+        var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadDate = virtuosoContext.lastReadDate, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _h = virtuosoContext.unreadMessageCount, unreadMessageCount = _h === void 0 ? 0 : _h, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
         var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
         if (customMessageRenderer) {
             return customMessageRenderer(messageList, streamMessageIndex);
@@ -57044,7 +57069,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         var message = messageList[streamMessageIndex];
         if (!message)
             return React__default["default"].createElement("div", { style: { height: '1px' } }); // returning null or zero height breaks the virtuoso
-        if (message.customType === CUSTOM_MESSAGE_TYPE.date && message.date && isDate(message.date)) {
+        if (isDateSeparatorMessage(message)) {
             return DateSeparator ? React__default["default"].createElement(DateSeparator, { date: message.date, unread: message.unread }) : null;
         }
         if (message.type === 'system') {
@@ -57060,12 +57085,25 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
                 (maybePrevMessage && isMessageEdited(maybePrevMessage)));
         var endOfGroup = shouldGroupByUser &&
             (((_e = message.user) === null || _e === void 0 ? void 0 : _e.id) !== ((_f = maybeNextMessage === null || maybeNextMessage === void 0 ? void 0 : maybeNextMessage.user) === null || _f === void 0 ? void 0 : _f.id) || isMessageEdited(message));
+        var createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+        var lastReadTimestamp = lastReadDate === null || lastReadDate === void 0 ? void 0 : lastReadDate.getTime();
+        var isFirstMessage = streamMessageIndex === 0;
         var isNewestMessage = lastReadMessageId === lastReceivedMessageId;
-        var isLastReadMessage = message.id === lastReadMessageId;
-        var showUnreadSeparator = isLastReadMessage && !isNewestMessage && (firstUnreadMessageId || unreadMessageCount > 0); // unread count can be 0 if the user marks unread only own messages
+        var isLastReadMessage = message.id === lastReadMessageId ||
+            (!unreadMessageCount && createdAtTimestamp === lastReadTimestamp);
+        var isFirstUnreadMessage = firstUnreadMessageId === message.id ||
+            (!!unreadMessageCount &&
+                createdAtTimestamp &&
+                lastReadTimestamp &&
+                createdAtTimestamp > lastReadTimestamp &&
+                isFirstMessage);
+        var showUnreadSeparatorAbove = !lastReadMessageId && isFirstUnreadMessage;
+        var showUnreadSeparatorBelow = isLastReadMessage && !isNewestMessage && (firstUnreadMessageId || !!unreadMessageCount);
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            showUnreadSeparatorAbove && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
+                React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
             React__default["default"].createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_g = virtuosoRef.current) === null || _g === void 0 ? void 0 : _g.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
-            showUnreadSeparator && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
+            showUnreadSeparatorBelow && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
                 React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
     };
 
@@ -57266,6 +57304,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
                             DateSeparator: DateSeparator,
                             firstUnreadMessageId: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id,
                             head: head,
+                            lastReadDate: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read,
                             lastReadMessageId: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id,
                             lastReceivedMessageId: lastReceivedMessageId,
                             loadingMore: loadingMore,
@@ -57327,6 +57366,62 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         }, 5000);
         notificationTimeouts.push(timeout);
     }; };
+    /**
+     * Utility function for jumpToFirstUnreadMessage
+     * @param targetId
+     * @param msgSet
+     */
+    var findInMsgSetById = function (targetId, msgSet) {
+        for (var i = msgSet.length - 1; i >= 0; i--) {
+            var item = msgSet[i];
+            if (item.id === targetId) {
+                return {
+                    index: i,
+                    target: item,
+                };
+            }
+        }
+        return {
+            index: -1,
+        };
+    };
+    /**
+     * Utility function for jumpToFirstUnreadMessage
+     * @param targetDate
+     * @param msgSet
+     * @param exact
+     */
+    var findInMsgSetByDate = function (targetDate, msgSet, exact) {
+        var _a, _b;
+        if (exact === void 0) { exact = false; }
+        var targetTimestamp = targetDate.getTime();
+        var left = 0;
+        var middle = 0;
+        var right = msgSet.length - 1;
+        while (left <= right) {
+            middle = Math.floor((right + left) / 2);
+            var middleTimestamp = new Date(msgSet[middle].created_at).getTime();
+            var middleLeftTimestamp = ((_a = msgSet[middle - 1]) === null || _a === void 0 ? void 0 : _a.created_at) &&
+                new Date(msgSet[middle - 1].created_at).getTime();
+            var middleRightTimestamp = ((_b = msgSet[middle + 1]) === null || _b === void 0 ? void 0 : _b.created_at) &&
+                new Date(msgSet[middle + 1].created_at).getTime();
+            if (middleTimestamp === targetTimestamp ||
+                (middleLeftTimestamp &&
+                    middleRightTimestamp &&
+                    middleLeftTimestamp < targetTimestamp &&
+                    targetTimestamp < middleRightTimestamp)) {
+                return { index: middle, target: msgSet[middle] };
+            }
+            if (middleTimestamp < targetTimestamp)
+                left = middle + 1;
+            else
+                right = middle - 1;
+        }
+        if (!exact || new Date(msgSet[left].created_at).getTime() === targetTimestamp) {
+            return { index: left, target: msgSet[left] };
+        }
+        return { index: -1 };
+    };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
      * @deprecated will be removed in the next major release
@@ -57705,6 +57800,9 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
                                     unread_messages: (_a = event.unread_messages) !== null && _a !== void 0 ? _a : 0,
                                 };
                             });
+                        if (event.type === 'channel.truncated' && event.cid === channel.cid) {
+                            _setChannelUnreadUiState(undefined);
+                        }
                         throttledCopyStateFromChannel();
                         return [2 /*return*/];
                 }
@@ -57864,7 +57962,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
             });
         };
         var loadMoreNewer = function (limit) {
-            if (limit === void 0) { limit = 100; }
+            if (limit === void 0) { limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE; }
             return __awaiter(void 0, void 0, void 0, function () {
                 var newestMessage, newestId, perPage, queryResponse, e_4, hasMoreNewerMessages;
                 var _a, _b;
@@ -57908,7 +58006,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
         };
         var clearHighlightedMessageTimeoutId = React$2.useRef(null);
         var jumpToMessage = function (messageId, messageLimit) {
-            if (messageLimit === void 0) { messageLimit = 100; }
+            if (messageLimit === void 0) { messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE; }
             return __awaiter(void 0, void 0, void 0, function () {
                 var indexOfMessage, hasMoreMessages;
                 return __generator(this, function (_a) {
@@ -57955,57 +58053,113 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
             });
         }); };
         var jumpToFirstUnreadMessage = React$2.useCallback(function (queryMessageLimit) {
-            if (queryMessageLimit === void 0) { queryMessageLimit = 100; }
+            if (queryMessageLimit === void 0) { queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE; }
             return __awaiter(void 0, void 0, void 0, function () {
-                var indexOfLastReadMessage, currentMessageSet, i, id, hasMoreMessages, firstUnreadMessage, jumpToMessageId;
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var lastReadMessageId, firstUnreadMessageId, isInCurrentMessageSet, hasMoreMessages, result, result, lastReadTimestamp, _a, lastReadMessageIndex, lastReadMessage, messages, firstMessageWithCreationDate, firstMessageTimestamp, result, targetId_1, indexOfTarget;
+                var _b, _c, _d, _e;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
-                            if (!(client.user && (channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages)))
+                            if (!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages))
                                 return [2 /*return*/];
-                            if (!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id)) {
-                                addNotification(t('Failed to jump to the first unread message'), 'error');
-                                return [2 /*return*/];
-                            }
-                            currentMessageSet = channel.state.messages;
-                            for (i = currentMessageSet.length - 1; i >= 0; i--) {
-                                id = currentMessageSet[i].id;
-                                if (id === channelUnreadUiState.last_read_message_id) {
-                                    indexOfLastReadMessage = i;
-                                    break;
-                                }
-                            }
-                            if (!(typeof indexOfLastReadMessage === 'undefined')) return [3 /*break*/, 5];
-                            dispatch({ loadingMore: true, type: 'setLoadingMore' });
+                            lastReadMessageId = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id;
+                            firstUnreadMessageId = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id;
+                            isInCurrentMessageSet = false;
                             hasMoreMessages = true;
-                            _b.label = 1;
+                            if (!firstUnreadMessageId) return [3 /*break*/, 1];
+                            result = findInMsgSetById(firstUnreadMessageId, channel.state.messages);
+                            isInCurrentMessageSet = result.index !== -1;
+                            return [3 /*break*/, 8];
                         case 1:
-                            _b.trys.push([1, 3, , 4]);
-                            return [4 /*yield*/, channel.state.loadMessageIntoState(channelUnreadUiState.last_read_message_id, undefined, queryMessageLimit)];
+                            if (!lastReadMessageId) return [3 /*break*/, 2];
+                            result = findInMsgSetById(lastReadMessageId, channel.state.messages);
+                            isInCurrentMessageSet = !!result.target;
+                            firstUnreadMessageId =
+                                result.index > -1 ? (_b = channel.state.messages[result.index + 1]) === null || _b === void 0 ? void 0 : _b.id : undefined;
+                            return [3 /*break*/, 8];
                         case 2:
-                            _b.sent();
-                            /**
-                             * if the index of the last read message on the page is beyond the half of the page,
-                             * we have arrived to the oldest page of the channel
-                             */
-                            indexOfLastReadMessage = channel.state.messages.findIndex(function (message) { return message.id === channelUnreadUiState.last_read_message_id; });
-                            hasMoreMessages = indexOfLastReadMessage >= Math.floor(queryMessageLimit / 2);
-                            return [3 /*break*/, 4];
+                            lastReadTimestamp = channelUnreadUiState.last_read.getTime();
+                            _a = findInMsgSetByDate(channelUnreadUiState.last_read, channel.state.messages, true), lastReadMessageIndex = _a.index, lastReadMessage = _a.target;
+                            if (!lastReadMessage) return [3 /*break*/, 3];
+                            firstUnreadMessageId = (_c = channel.state.messages[lastReadMessageIndex + 1]) === null || _c === void 0 ? void 0 : _c.id;
+                            isInCurrentMessageSet = !!firstUnreadMessageId;
+                            lastReadMessageId = lastReadMessage.id;
+                            return [3 /*break*/, 8];
                         case 3:
-                            _b.sent();
+                            dispatch({ loadingMore: true, type: 'setLoadingMore' });
+                            messages = void 0;
+                            _f.label = 4;
+                        case 4:
+                            _f.trys.push([4, 6, , 7]);
+                            return [4 /*yield*/, channel.query({
+                                    messages: {
+                                        created_at_around: channelUnreadUiState.last_read.toISOString(),
+                                        limit: queryMessageLimit,
+                                    },
+                                }, 'new')];
+                        case 5:
+                            messages = (_f.sent()).messages;
+                            return [3 /*break*/, 7];
+                        case 6:
+                            _f.sent();
                             addNotification(t('Failed to jump to the first unread message'), 'error');
                             loadMoreFinished(hasMoreMessages, channel.state.messages);
                             return [2 /*return*/];
-                        case 4:
+                        case 7:
+                            firstMessageWithCreationDate = messages.find(function (msg) { return msg.created_at; });
+                            if (!firstMessageWithCreationDate) {
+                                addNotification(t('Failed to jump to the first unread message'), 'error');
+                                loadMoreFinished(hasMoreMessages, channel.state.messages);
+                                return [2 /*return*/];
+                            }
+                            firstMessageTimestamp = new Date(firstMessageWithCreationDate.created_at).getTime();
+                            if (lastReadTimestamp < firstMessageTimestamp) {
+                                // whole channel is unread
+                                firstUnreadMessageId = firstMessageWithCreationDate.id;
+                                hasMoreMessages = false;
+                            }
+                            else {
+                                result = findInMsgSetByDate(channelUnreadUiState.last_read, messages);
+                                lastReadMessageId = (_d = result.target) === null || _d === void 0 ? void 0 : _d.id;
+                                hasMoreMessages = result.index >= Math.floor(queryMessageLimit / 2);
+                            }
                             loadMoreFinished(hasMoreMessages, channel.state.messages);
-                            _b.label = 5;
-                        case 5:
-                            firstUnreadMessage = channel.state.messages[indexOfLastReadMessage + 1];
-                            jumpToMessageId = (_a = firstUnreadMessage === null || firstUnreadMessage === void 0 ? void 0 : firstUnreadMessage.id) !== null && _a !== void 0 ? _a : channelUnreadUiState.last_read_message_id;
+                            _f.label = 8;
+                        case 8:
+                            if (!firstUnreadMessageId && !lastReadMessageId) {
+                                addNotification(t('Failed to jump to the first unread message'), 'error');
+                                return [2 /*return*/];
+                            }
+                            if (!!isInCurrentMessageSet) return [3 /*break*/, 12];
+                            dispatch({ loadingMore: true, type: 'setLoadingMore' });
+                            _f.label = 9;
+                        case 9:
+                            _f.trys.push([9, 11, , 12]);
+                            targetId_1 = (firstUnreadMessageId !== null && firstUnreadMessageId !== void 0 ? firstUnreadMessageId : lastReadMessageId);
+                            return [4 /*yield*/, channel.state.loadMessageIntoState(targetId_1, undefined, queryMessageLimit)];
+                        case 10:
+                            _f.sent();
+                            indexOfTarget = channel.state.messages.findIndex(function (message) { return message.id === targetId_1; });
+                            hasMoreMessages = indexOfTarget >= Math.floor(queryMessageLimit / 2);
+                            loadMoreFinished(hasMoreMessages, channel.state.messages);
+                            firstUnreadMessageId =
+                                firstUnreadMessageId !== null && firstUnreadMessageId !== void 0 ? firstUnreadMessageId : (_e = channel.state.messages[indexOfTarget + 1]) === null || _e === void 0 ? void 0 : _e.id;
+                            return [3 /*break*/, 12];
+                        case 11:
+                            _f.sent();
+                            addNotification(t('Failed to jump to the first unread message'), 'error');
+                            loadMoreFinished(hasMoreMessages, channel.state.messages);
+                            return [2 /*return*/];
+                        case 12:
+                            if (!firstUnreadMessageId) {
+                                addNotification(t('Failed to jump to the first unread message'), 'error');
+                                return [2 /*return*/];
+                            }
+                            if (!channelUnreadUiState.first_unread_message_id)
+                                _setChannelUnreadUiState(__assign(__assign({}, channelUnreadUiState), { first_unread_message_id: firstUnreadMessageId, last_read_message_id: lastReadMessageId }));
                             dispatch({
                                 hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
-                                highlightedMessageId: jumpToMessageId,
+                                highlightedMessageId: firstUnreadMessageId,
                                 type: 'jumpToMessageFinished',
                             });
                             if (clearHighlightedMessageTimeoutId.current) {
@@ -58019,7 +58173,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
                     }
                 });
             });
-        }, [addNotification, channel, client, loadMoreFinished, t, channelUnreadUiState]);
+        }, [addNotification, channel, loadMoreFinished, t, channelUnreadUiState]);
         var deleteMessage = React$2.useCallback(function (message) { return __awaiter(void 0, void 0, void 0, function () {
             var deletedMessage, result;
             return __generator(this, function (_a) {
@@ -58103,8 +58257,24 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
                     case 6:
                         error_1 = _d.sent();
                         stringError = JSON.stringify(error_1);
-                        parsedError = stringError ? JSON.parse(stringError) : {};
-                        updateMessage(__assign(__assign({}, message), { error: parsedError, errorStatusCode: parsedError.status || undefined, status: 'failed' }));
+                        parsedError = (stringError
+                            ? JSON.parse(stringError)
+                            : {});
+                        // Handle the case where the message already exists
+                        // (typically, when retrying to send a message).
+                        // If the message already exists, we can assume it was sent successfully,
+                        // so we update the message status to "received".
+                        // Right now, the only way to check this error is by checking
+                        // the combination of the error code and the error description,
+                        // since there is no special error code for duplicate messages.
+                        if (parsedError.code === 4 &&
+                            error_1 instanceof Error &&
+                            error_1.message.includes('already exists')) {
+                            updateMessage(__assign(__assign({}, message), { status: 'received' }));
+                        }
+                        else {
+                            updateMessage(__assign(__assign({}, message), { error: parsedError, errorStatusCode: parsedError.status || undefined, status: 'failed' }));
+                        }
                         return [3 /*break*/, 7];
                     case 7: return [2 /*return*/];
                 }
@@ -59680,7 +59850,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.12.1';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version$1 = '11.12.2';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -84353,6 +84523,7 @@ var StreamChatReact = (function (exports, React$2, jsxRuntime, ReactDOM, streamC
     exports.isAudioAttachment = isAudioAttachment;
     exports.isChannel = isChannel;
     exports.isDate = isDate;
+    exports.isDateSeparatorMessage = isDateSeparatorMessage;
     exports.isDayOrMoment = isDayOrMoment;
     exports.isFileAttachment = isFileAttachment;
     exports.isGalleryAttachmentType = isGalleryAttachmentType;