stream-chat-react 11.12.1 → 11.12.2

package/dist/components/MessageList/renderMessages.js

@@ -1,35 +1,57 @@
 import { __assign } from "tslib";
 import React, { Fragment } from 'react';
-import { isDate } from '../../context';
+import { isDateSeparatorMessage } from './utils';
+import { Message } from '../Message';
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
-import { Message } from '../Message/Message';
 export 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.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.createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
                 React.createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
         }
-        if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
-            return (React.createElement("li", { key: 'intro' },
+        else if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
+            renderedMessages.push(React.createElement("li", { key: 'intro' },
                 React.createElement(HeaderComponent, null)));
         }
-        if (message.type === 'system') {
-            return (React.createElement("li", { key: message.id || message.created_at },
+        else if (message.type === 'system') {
+            renderedMessages.push(React.createElement("li", { key: message.id || message.created_at },
                 React.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.createElement(Fragment, { key: message.id || message.created_at },
-            React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
-                React.createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))),
-            showUnreadSeparator && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
-                React.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.createElement(Fragment, { key: message.id || message.created_at },
+                showUnreadSeparatorAbove && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                    React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages }))),
+                React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
+                    React.createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [] }, messageProps))),
+                showUnreadSeparatorBelow && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                    React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages })))));
+        }
+    }
+    return renderedMessages;
 }

package/dist/components/MessageList/utils.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { UserResponse } from 'stream-chat';
+import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
+import type { MessageLabel, UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { StreamMessage } from '../../context/ChannelStateContext';
 type ProcessMessagesParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
@@ -44,5 +45,13 @@ export type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
 export declare const getGroupStyles: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
 export declare const hasMoreMessagesProbably: (returnedCountMessages: number, limit: number) => boolean;
 export declare const hasNotMoreMessages: (returnedCountMessages: number, limit: number) => boolean;
+type DateSeparatorMessage = {
+    customType: typeof CUSTOM_MESSAGE_TYPE.date;
+    date: Date;
+    id: string;
+    type: MessageLabel;
+    unread: boolean;
+};
+export declare function isDateSeparatorMessage<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>): message is DateSeparatorMessage;
 export {};
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/MessageList/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/utils.ts"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGvE,KAAK,qBAAqB,CACxB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kEAAkE;IAClE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,+FAA+F;IAC/F,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CACrC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC,CACpE,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,8KAuF3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,MAAM,GAAG,IAAI,WAQrD,CAAC;AAGF,eAAO,MAAM,eAAe,oJAY3B,CAAC;AAEF,eAAO,MAAM,aAAa;eAIU,IAAI;;mCACnB,OAAO,uDAqC3B,CAAC;AAEF,eAAO,MAAM,WAAW,qJAIL,MAAM,wCAgDxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,eAAO,MAAM,cAAc,oPAMV,OAAO,KACrB,UA2CF,CAAC;AAOF,eAAO,MAAM,uBAAuB,0BAA2B,MAAM,SAAS,MAAM,YACpD,CAAC;AAGjC,eAAO,MAAM,kBAAkB,0BAA2B,MAAM,SAAS,MAAM,YAChD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/utils.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAInE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGvE,KAAK,qBAAqB,CACxB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,2EAA2E;IAC3E,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kEAAkE;IAClE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,+FAA+F;IAC/F,sBAAsB,CAAC,EAAE,KAAK,CAAC,QAAQ,CACrC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC,CACpE,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,8KAuF3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,MAAM,GAAG,IAAI,WAQrD,CAAC;AAGF,eAAO,MAAM,eAAe,oJAY3B,CAAC;AAEF,eAAO,MAAM,aAAa;eAIU,IAAI;;mCACnB,OAAO,uDAqC3B,CAAC;AAEF,eAAO,MAAM,WAAW,qJAIL,MAAM,wCAgDxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,eAAO,MAAM,cAAc,oPAMV,OAAO,KACrB,UA2CF,CAAC;AAOF,eAAO,MAAM,uBAAuB,0BAA2B,MAAM,SAAS,MAAM,YACpD,CAAC;AAGjC,eAAO,MAAM,kBAAkB,0BAA2B,MAAM,SAAS,MAAM,YAChD,CAAC;AAEhC,KAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC5C,IAAI,EAAE,IAAI,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,sBAAsB,CACpC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,GAAG,OAAO,IAAI,oBAAoB,CAE7E"}

package/dist/components/MessageList/utils.js

@@ -226,3 +226,6 @@ export var hasMoreMessagesProbably = function (returnedCountMessages, limit) {
 export var hasNotMoreMessages = function (returnedCountMessages, limit) {
     return returnedCountMessages < limit;
 };
+export function isDateSeparatorMessage(message) {
+    return message.customType === CUSTOM_MESSAGE_TYPE.date && !!message.date && isDate(message.date);
+}

package/dist/constants/limits.d.ts

@@ -1,5 +1,6 @@
 export declare const DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
 export declare const DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
+export declare const DEFAULT_JUMP_TO_PAGE_SIZE = 100;
 export declare const DEFAULT_THREAD_PAGE_SIZE = 50;
 export declare const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
 //# sourceMappingURL=limits.d.ts.map

package/dist/constants/limits.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"limits.d.ts","sourceRoot":"","sources":["../../src/constants/limits.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iCAAiC,KAAK,CAAC;AACpD,eAAO,MAAM,8BAA8B,MAAM,CAAC;AAClD,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,kCAAkC,MAAM,CAAC"}
+{"version":3,"file":"limits.d.ts","sourceRoot":"","sources":["../../src/constants/limits.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iCAAiC,KAAK,CAAC;AACpD,eAAO,MAAM,8BAA8B,MAAM,CAAC;AAClD,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,eAAO,MAAM,kCAAkC,MAAM,CAAC"}

package/dist/constants/limits.js

@@ -1,4 +1,5 @@
 export var DEFAULT_INITIAL_CHANNEL_PAGE_SIZE = 25;
 export var DEFAULT_NEXT_CHANNEL_PAGE_SIZE = 100;
+export var DEFAULT_JUMP_TO_PAGE_SIZE = 100;
 export var DEFAULT_THREAD_PAGE_SIZE = 50;
 export var DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;

package/dist/index.cjs.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('./Window-40a618cb.js');
+var Window = require('./Window-44a85f63.js');
 var React = require('react');
 var streamChat = require('stream-chat');
-var reactVirtuoso = require('react-virtuoso');
 var throttle = require('lodash.throttle');
 require('emoji-regex');
 require('linkifyjs');
 require('lodash.uniqby');
+var reactVirtuoso = require('react-virtuoso');
 require('@braintree/sanitize-url');
 require('react-image-gallery');
 require('react-dom');
@@ -425,7 +425,7 @@ var useMarkRead = function (_a) {
                 unreadMessages > 0;
         };
         var onVisibilityChange = function () {
-            if (shouldMarkRead(unreadCount))
+            if (shouldMarkRead(channel.countUnread()))
                 markRead();
         };
         var handleMessageNew = function (event) {
@@ -447,7 +447,6 @@ var useMarkRead = function (_a) {
             }
             else if (newMessageToCurrentChannel &&
                 mainChannelUpdated &&
-                !isOwnMessage &&
                 shouldMarkRead(channel.countUnread())) {
                 markRead();
             }
@@ -456,7 +455,7 @@ var useMarkRead = function (_a) {
         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 () {
@@ -600,32 +599,54 @@ var InfiniteScroll = function (props) {
 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 === Window.CUSTOM_MESSAGE_TYPE.date && message.date && Window.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 (Window.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 === Window.CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
-            return (React__default["default"].createElement("li", { key: 'intro' },
+        else if (message.customType === Window.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.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(Window.Message, Window.__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.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(Window.Message, Window.__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;
 }
 
 var MessageListWithContext = function (props) {
@@ -1048,7 +1069,7 @@ var Footer = function () {
 };
 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);
@@ -1056,7 +1077,7 @@ var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     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 === Window.CUSTOM_MESSAGE_TYPE.date && message.date && Window.isDate(message.date)) {
+    if (Window.isDateSeparatorMessage(message)) {
         return DateSeparator ? React__default["default"].createElement(DateSeparator, { date: message.date, unread: message.unread }) : null;
     }
     if (message.type === 'system') {
@@ -1072,12 +1093,25 @@ var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
             (maybePrevMessage && Window.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) || Window.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(Window.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 })))));
 };
 
@@ -1278,6 +1312,7 @@ var VirtualizedMessageListWithContext = function (props) {
                         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,
@@ -1310,7 +1345,7 @@ function VirtualizedMessageList(props) {
     return (React__default["default"].createElement(VirtualizedMessageListWithContext, Window.__assign({ channel: channel, channelUnreadUiState: channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll }, props)));
 }
 
-var version = '11.12.1';
+var version = '11.12.2';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -1844,6 +1879,7 @@ exports.insertIntro = Window.insertIntro;
 exports.isAudioAttachment = Window.isAudioAttachment;
 exports.isChannel = Window.isChannel;
 exports.isDate = Window.isDate;
+exports.isDateSeparatorMessage = Window.isDateSeparatorMessage;
 exports.isDayOrMoment = Window.isDayOrMoment;
 exports.isFileAttachment = Window.isFileAttachment;
 exports.isGalleryAttachmentType = Window.isGalleryAttachmentType;

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "11.12.1";
+export declare const version = "11.12.2";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.12.1';
+export var version = '11.12.2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.12.1",
+  "version": "11.12.2",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",