stream-chat-react 11.3.0 → 11.5.0

package/dist/components/MessageList/ScrollToBottomButton.js

@@ -1,53 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import { ArrowDown } from './icons';
-import { useChannelStateContext, useChatContext } from '../../context';
 var UnMemoizedScrollToBottomButton = function (props) {
-    var isMessageListScrolledToBottom = props.isMessageListScrolledToBottom, onClick = props.onClick, threadList = props.threadList;
-    var _a = useChatContext(), activeChannel = _a.channel, client = _a.client;
-    var thread = useChannelStateContext().thread;
-    var _b = useState((activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.countUnread()) || 0), countUnread = _b[0], setCountUnread = _b[1];
-    var _c = useState((thread === null || thread === void 0 ? void 0 : thread.reply_count) || 0), replyCount = _c[0], setReplyCount = _c[1];
-    var observedEvent = threadList ? 'message.updated' : 'message.new';
-    useEffect(function () {
-        var handleEvent = function (event) {
-            var _a, _b, _c, _d, _e;
-            var newMessageInAnotherChannel = event.cid !== (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.cid);
-            var newMessageIsMine = ((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id);
-            var isThreadOpen = !!thread;
-            var newMessageIsReply = !!((_c = event.message) === null || _c === void 0 ? void 0 : _c.parent_id);
-            var dontIncreaseMainListCounterOnNewReply = isThreadOpen && !threadList && newMessageIsReply;
-            if (isMessageListScrolledToBottom ||
-                newMessageInAnotherChannel ||
-                newMessageIsMine ||
-                dontIncreaseMainListCounterOnNewReply) {
-                return;
-            }
-            if (event.type === 'message.new') {
-                // cannot rely on channel.countUnread because active channel is automatically marked read
-                setCountUnread(function (prev) { return prev + 1; });
-            }
-            else if (((_d = event.message) === null || _d === void 0 ? void 0 : _d.id) === (thread === null || thread === void 0 ? void 0 : thread.id)) {
-                var newReplyCount_1 = ((_e = event.message) === null || _e === void 0 ? void 0 : _e.reply_count) || 0;
-                setCountUnread(function () { return newReplyCount_1 - replyCount; });
-            }
-        };
-        client.on(observedEvent, handleEvent);
-        return function () {
-            client.off(observedEvent, handleEvent);
-        };
-    }, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
-    useEffect(function () {
-        if (isMessageListScrolledToBottom) {
-            setCountUnread(0);
-            setReplyCount((thread === null || thread === void 0 ? void 0 : thread.reply_count) || 0);
-        }
-    }, [isMessageListScrolledToBottom, thread]);
+    var isMessageListScrolledToBottom = props.isMessageListScrolledToBottom, onClick = props.onClick, _a = props.unreadCount, unreadCount = _a === void 0 ? 0 : _a;
     if (isMessageListScrolledToBottom)
         return null;
     return (React.createElement("div", { className: 'str-chat__jump-to-latest-message' },
         React.createElement("button", { "aria-live": 'polite', className: "\n        str-chat__message-notification-right\n        str-chat__message-notification-scroll-to-latest\n        str-chat__circle-fab\n      ", "data-testid": 'message-notification', onClick: onClick },
             React.createElement(ArrowDown, null),
-            countUnread > 0 && (React.createElement("div", { className: clsx('str-chat__message-notification', 'str-chat__message-notification-scroll-to-latest-unread-count', 'str-chat__jump-to-latest-unread-count'), "data-testid": 'unread-message-notification-counter' }, countUnread)))));
+            unreadCount > 0 && (React.createElement("div", { className: clsx('str-chat__message-notification', 'str-chat__message-notification-scroll-to-latest-unread-count', 'str-chat__jump-to-latest-unread-count'), "data-testid": 'unread-message-notification-counter' }, unreadCount)))));
 };
 export var ScrollToBottomButton = React.memo(UnMemoizedScrollToBottomButton);

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

@@ -0,0 +1,6 @@
+export type UnreadMessagesNotificationProps = {
+    queryMessageLimit?: number;
+    unreadCount?: number;
+};
+export declare const UnreadMessagesNotification: ({ queryMessageLimit, unreadCount, }: UnreadMessagesNotificationProps) => JSX.Element;
+//# sourceMappingURL=UnreadMessagesNotification.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadMessagesNotification.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/UnreadMessagesNotification.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,+BAA+B,GAAG;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,0BAA0B,wCAGpC,+BAA+B,gBAgBjC,CAAC"}

package/dist/components/MessageList/UnreadMessagesNotification.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CloseIcon } from './icons';
+import { useChannelActionContext, useTranslationContext } from '../../context';
+export var UnreadMessagesNotification = function (_a) {
+    var queryMessageLimit = _a.queryMessageLimit, unreadCount = _a.unreadCount;
+    var _b = useChannelActionContext('UnreadMessagesNotification'), jumpToFirstUnreadMessage = _b.jumpToFirstUnreadMessage, markRead = _b.markRead;
+    var t = useTranslationContext('UnreadMessagesNotification').t;
+    return (React.createElement("div", { className: 'str-chat__unread-messages-notification' },
+        React.createElement("button", { onClick: function () { return jumpToFirstUnreadMessage(queryMessageLimit); } }, t('{{count}} unread', { count: unreadCount !== null && unreadCount !== void 0 ? unreadCount : 0 })),
+        React.createElement("button", { onClick: markRead },
+            React.createElement(CloseIcon, null))));
+};

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

@@ -0,0 +1,6 @@
+export declare const UNREAD_MESSAGE_SEPARATOR_CLASS = "str-chat__unread-messages-separator";
+export type UnreadMessagesSeparatorProps = {
+    unreadCount?: number;
+};
+export declare const UnreadMessagesSeparator: ({ unreadCount }: UnreadMessagesSeparatorProps) => JSX.Element;
+//# sourceMappingURL=UnreadMessagesSeparator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadMessagesSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/UnreadMessagesSeparator.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,8BAA8B,wCAAwC,CAAC;AAEpF,MAAM,MAAM,4BAA4B,GAAG;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,oBAAqB,4BAA4B,gBASpF,CAAC"}

package/dist/components/MessageList/UnreadMessagesSeparator.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useTranslationContext } from '../../context';
+export var UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator';
+export var UnreadMessagesSeparator = function (_a) {
+    var unreadCount = _a.unreadCount;
+    var t = useTranslationContext('UnreadMessagesSeparator').t;
+    return (React.createElement("div", { className: UNREAD_MESSAGE_SEPARATOR_CLASS }, unreadCount
+        ? t('unreadMessagesSeparatorText', { count: unreadCount })
+        : t('Unread messages')));
+};

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

@@ -12,7 +12,7 @@ type VirtualizedMessageListPropsForContext = 'additionalMessageInputProps' | 'cl
 /**
  * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions)
  */
-export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Required<Pick<ComponentContextValue<StreamChatGenerics>, 'DateSeparator' | 'MessageSystem'>> & Pick<VirtualizedMessageListProps<StreamChatGenerics>, VirtualizedMessageListPropsForContext> & Pick<ChatContextValue<StreamChatGenerics>, 'customClasses'> & {
+export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Required<Pick<ComponentContextValue<StreamChatGenerics>, 'DateSeparator' | 'MessageSystem' | 'UnreadMessagesSeparator'>> & Pick<VirtualizedMessageListProps<StreamChatGenerics>, VirtualizedMessageListPropsForContext> & Pick<ChatContextValue<StreamChatGenerics>, 'customClasses'> & {
     /** Latest received message id in the current channel */
     lastReceivedMessageId: string | null | undefined;
     /** Object mapping between the message ID and a string representing the position in the group of a sequence of messages posted by the same user. */
@@ -25,6 +25,15 @@ export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics
     processedMessages: StreamMessage<StreamChatGenerics>[];
     /** Instance of VirtuosoHandle object providing the API to navigate in the virtualized list by various scroll actions. */
     virtuosoRef: RefObject<VirtuosoHandle>;
+    /** Message id which was marked as unread. ALl the messages following this message are considered unrea.  */
+    firstUnreadMessageId?: string;
+    /**
+     * The ID of the last message considered read by the current user in the current channel.
+     * All the messages following this message are considered unread.
+     */
+    lastReadMessageId?: string;
+    /** The number of unread messages in the current channel. */
+    unreadMessageCount?: number;
 };
 type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActions' | 'messageActions';
 export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {
@@ -65,6 +74,8 @@ export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStream
     loadMore?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);
     /** Function called when new messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
     loadMoreNewer?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);
+    /** When enabled, the channel will be marked read when a user scrolls to the bottom. Ignored when scrolled to the bottom of a thread message list. */
+    markReadOnScrolledToBottom?: boolean;
     /** Custom UI component to display a message, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
     Message?: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;
     /** The limit to use when paginating messages */

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VirtualizedMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageList.tsx"],"names":[],"mappings":"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"}

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -3,15 +3,15 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, } from 'react-virtuoso';
 import { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';
 import { useLastReadData } from './hooks';
-import { useGiphyPreview, useMessageSetKey, useNewMessageNotification, usePrependedMessagesCount, useScrollToBottomOnNewMessage, useShouldForceScrollToBottom, } from './hooks/VirtualizedMessageList';
+import { useGiphyPreview, useMessageSetKey, useNewMessageNotification, usePrependedMessagesCount, useScrollToBottomOnNewMessage, useShouldForceScrollToBottom, useUnreadMessagesNotificationVirtualized, } from './hooks/VirtualizedMessageList';
+import { useMarkRead } from './hooks/useMarkRead';
 import { MessageNotification as DefaultMessageNotification } from './MessageNotification';
 import { MessageListNotifications as DefaultMessageListNotifications } from './MessageListNotifications';
 import { MessageListMainPanel } from './MessageListMainPanel';
 import { getGroupStyles, getLastReceived, processMessages } from './utils';
 import { MessageSimple } from '../Message';
-import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
-import { EventComponent } from '../EventComponent';
-import { calculateFirstItemIndex, calculateItemIndex, EmptyPlaceholder, Footer, Header, Item, messageRenderer, } from './VirtualizedMessageListComponents';
+import { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';
+import { calculateFirstItemIndex, calculateItemIndex, EmptyPlaceholder, Footer, Header, Item, makeItemsRenderedHandler, messageRenderer, } from './VirtualizedMessageListComponents';
 import { useChannelActionContext, } from '../../context/ChannelActionContext';
 import { useChannelStateContext, } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
@@ -46,21 +46,27 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
     return messages.length - 1;
 }
 var VirtualizedMessageListWithContext = function (props) {
-    var additionalMessageInputProps = props.additionalMessageInputProps, _a = props.additionalVirtuosoProps, additionalVirtuosoProps = _a === void 0 ? {} : _a, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? true : _b, groupStyles = props.groupStyles, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, head = props.head, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _e = props.messageLimit, messageLimit = _e === void 0 ? 100 : _e, messages = props.messages, notifications = props.notifications, 
+    var _a, _b;
+    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, customMessageActions = props.customMessageActions, customMessageRenderer = props.customMessageRenderer, defaultItemHeight = props.defaultItemHeight, _d = props.disableDateSeparator, disableDateSeparator = _d === void 0 ? true : _d, groupStyles = props.groupStyles, hasMoreNewer = props.hasMoreNewer, head = props.head, _e = props.hideDeletedMessages, hideDeletedMessages = _e === void 0 ? false : _e, _f = props.hideNewMessageSeparator, hideNewMessageSeparator = _f === void 0 ? false : _f, highlightedMessageId = props.highlightedMessageId, jumpToLatestMessage = props.jumpToLatestMessage, loadingMore = props.loadingMore, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, markReadOnScrolledToBottom = props.markReadOnScrolledToBottom, MessageUIComponentFromProps = props.Message, messageActions = props.messageActions, _g = props.messageLimit, messageLimit = _g === void 0 ? 100 : _g, messages = props.messages, notifications = props.notifications, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    _f = props.overscan, 
+    _h = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    overscan = _f === void 0 ? 0 : _f, read = props.read, _g = props.returnAllReadData, returnAllReadData = _g === void 0 ? false : _g, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _h = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _h === void 0 ? false : _h, _j = props.separateGiphyPreview, separateGiphyPreview = _j === void 0 ? false : _j, _k = props.shouldGroupByUser, shouldGroupByUser = _k === void 0 ? false : _k, _l = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _l === void 0 ? 'smooth' : _l, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
+    overscan = _h === void 0 ? 0 : _h, read = props.read, _j = props.returnAllReadData, returnAllReadData = _j === void 0 ? false : _j, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _k = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _k === void 0 ? false : _k, _l = props.separateGiphyPreview, separateGiphyPreview = _l === void 0 ? false : _l, _m = props.shouldGroupByUser, shouldGroupByUser = _m === void 0 ? false : _m, _o = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _o === void 0 ? 'smooth' : _o, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
     var virtuosoComponentsFromProps = additionalVirtuosoProps.components, overridingVirtuosoProps = __rest(additionalVirtuosoProps, ["components"]);
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
     useCaptureResizeObserverExceededError();
-    var _m = useComponentContext('VirtualizedMessageList'), _o = _m.DateSeparator, DateSeparator = _o === void 0 ? DefaultDateSeparator : _o, _p = _m.GiphyPreviewMessage, GiphyPreviewMessage = _p === void 0 ? DefaultGiphyPreviewMessage : _p, _q = _m.MessageListNotifications, MessageListNotifications = _q === void 0 ? DefaultMessageListNotifications : _q, _r = _m.MessageNotification, MessageNotification = _r === void 0 ? DefaultMessageNotification : _r, _s = _m.MessageSystem, MessageSystem = _s === void 0 ? EventComponent : _s, _t = _m.VirtualMessage, MessageUIComponentFromContext = _t === void 0 ? MessageSimple : _t;
+    var _p = useComponentContext('VirtualizedMessageList'), DateSeparator = _p.DateSeparator, _q = _p.GiphyPreviewMessage, GiphyPreviewMessage = _q === void 0 ? DefaultGiphyPreviewMessage : _q, _r = _p.MessageListNotifications, MessageListNotifications = _r === void 0 ? DefaultMessageListNotifications : _r, _s = _p.MessageNotification, MessageNotification = _s === void 0 ? DefaultMessageNotification : _s, MessageSystem = _p.MessageSystem, _t = _p.UnreadMessagesNotification, UnreadMessagesNotification = _t === void 0 ? DefaultUnreadMessagesNotification : _t, UnreadMessagesSeparator = _p.UnreadMessagesSeparator, _u = _p.VirtualMessage, MessageUIComponentFromContext = _u === void 0 ? MessageSimple : _u;
     var MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
-    var _u = useChatContext('VirtualizedMessageList'), client = _u.client, customClasses = _u.customClasses;
+    var _v = useChatContext('VirtualizedMessageList'), client = _v.client, customClasses = _v.customClasses;
     var virtuoso = useRef(null);
     var lastRead = useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
-    var _v = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _v.giphyPreviewMessage, setGiphyPreviewMessage = _v.setGiphyPreviewMessage;
+    var currentUserChannelReadState = client.user && (read === null || read === void 0 ? void 0 : read[client.user.id]);
+    var _w = useUnreadMessagesNotificationVirtualized({
+        lastRead: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.last_read,
+        unreadCount: (_a = currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages) !== null && _a !== void 0 ? _a : 0,
+    }), showUnreadMessagesNotification = _w.show, toggleShowUnreadMessagesNotification = _w.toggleShowUnreadMessagesNotification;
+    var _x = useGiphyPreview(separateGiphyPreview), giphyPreviewMessage = _x.giphyPreviewMessage, setGiphyPreviewMessage = _x.setGiphyPreviewMessage;
     var processedMessages = useMemo(function () {
         if (typeof messages === 'undefined') {
             return [];
@@ -80,6 +86,7 @@ var VirtualizedMessageListWithContext = function (props) {
             setGiphyPreviewMessage: setGiphyPreviewMessage,
             userId: client.userID || '',
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         disableDateSeparator,
         hideDeletedMessages,
@@ -109,8 +116,15 @@ var VirtualizedMessageListWithContext = function (props) {
         }, {});
     }, 
     // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [processedMessages.length, shouldGroupByUser, groupStylesFn]);
-    var _w = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _w.atBottom, isMessageListScrolledToBottom = _w.isMessageListScrolledToBottom, newMessagesNotification = _w.newMessagesNotification, setIsMessageListScrolledToBottom = _w.setIsMessageListScrolledToBottom, setNewMessagesNotification = _w.setNewMessagesNotification;
+    var _y = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer), atBottom = _y.atBottom, isMessageListScrolledToBottom = _y.isMessageListScrolledToBottom, newMessagesNotification = _y.newMessagesNotification, setIsMessageListScrolledToBottom = _y.setIsMessageListScrolledToBottom, setNewMessagesNotification = _y.setNewMessagesNotification;
+    useMarkRead({
+        isMessageListScrolledToBottom: isMessageListScrolledToBottom,
+        markReadOnScrolledToBottom: markReadOnScrolledToBottom,
+        messageListIsThread: !!threadList,
+        unreadCount: (_b = currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages) !== null && _b !== void 0 ? _b : 0,
+    });
     var scrollToBottom = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -141,6 +155,7 @@ var VirtualizedMessageListWithContext = function (props) {
     var numItemsPrepended = usePrependedMessagesCount(processedMessages, !disableDateSeparator);
     var messageSetKey = useMessageSetKey({ messages: messages }).messageSetKey;
     var shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
+    var handleItemsRendered = useMemo(function () { return makeItemsRenderedHandler([toggleShowUnreadMessagesNotification], processedMessages); }, [processedMessages, toggleShowUnreadMessagesNotification]);
     var followOutput = function (isAtBottom) {
         if (hasMoreNewer || suppressAutoscroll) {
             return false;
@@ -158,42 +173,46 @@ var VirtualizedMessageListWithContext = function (props) {
     var atBottomStateChange = function (isAtBottom) {
         atBottom.current = isAtBottom;
         setIsMessageListScrolledToBottom(isAtBottom);
-        if (isAtBottom && newMessagesNotification) {
-            setNewMessagesNotification(false);
-        }
-    };
-    var startReached = function () {
-        if (hasMore && loadMore) {
-            loadMore(messageLimit);
+        if (isAtBottom) {
+            loadMoreNewer === null || loadMoreNewer === void 0 ? void 0 : loadMoreNewer(messageLimit);
+            setNewMessagesNotification === null || setNewMessagesNotification === void 0 ? void 0 : setNewMessagesNotification(false);
         }
     };
-    var endReached = function () {
-        if (hasMoreNewer && loadMoreNewer) {
-            loadMoreNewer(messageLimit);
-        }
+    var atTopStateChange = function (isAtTop) {
+        if (isAtTop)
+            loadMore === null || loadMore === void 0 ? void 0 : loadMore(messageLimit);
     };
     useEffect(function () {
-        var _a;
+        var scrollTimeout;
         if (highlightedMessageId) {
-            var index = findMessageIndex(processedMessages, highlightedMessageId);
-            if (index !== -1) {
-                (_a = virtuoso.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({ align: 'center', index: index });
+            var index_1 = findMessageIndex(processedMessages, highlightedMessageId);
+            if (index_1 !== -1) {
+                scrollTimeout = setTimeout(function () {
+                    var _a;
+                    (_a = virtuoso.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex({ align: 'center', index: index_1 });
+                }, 0);
             }
         }
-    }, [highlightedMessageId]);
+        return function () {
+            clearTimeout(scrollTimeout);
+        };
+    }, [highlightedMessageId, processedMessages]);
     if (!processedMessages)
         return null;
     return (React.createElement(React.Fragment, null,
         React.createElement(MessageListMainPanel, null,
+            !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages })),
             React.createElement("div", { className: (customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualizedMessageList) || 'str-chat__virtual-list' },
-                React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 200, className: 'str-chat__message-list-scroll', components: __assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
+                React.createElement(Virtuoso, __assign({ atBottomStateChange: atBottomStateChange, atBottomThreshold: 100, atTopStateChange: atTopStateChange, atTopThreshold: 100, className: 'str-chat__message-list-scroll', components: __assign({ EmptyPlaceholder: EmptyPlaceholder, Footer: Footer, Header: Header, Item: Item }, virtuosoComponentsFromProps), computeItemKey: computeItemKey, context: {
                         additionalMessageInputProps: additionalMessageInputProps,
                         closeReactionSelectorOnClick: closeReactionSelectorOnClick,
                         customClasses: customClasses,
                         customMessageActions: customMessageActions,
                         customMessageRenderer: customMessageRenderer,
                         DateSeparator: DateSeparator,
+                        firstUnreadMessageId: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.first_unread_message_id,
                         head: head,
+                        lastReadMessageId: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.last_read_message_id,
                         lastReceivedMessageId: lastReceivedMessageId,
                         loadingMore: loadingMore,
                         Message: MessageUIComponent,
@@ -205,9 +224,11 @@ var VirtualizedMessageListWithContext = function (props) {
                         processedMessages: processedMessages,
                         shouldGroupByUser: shouldGroupByUser,
                         threadList: threadList,
+                        unreadMessageCount: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages,
+                        UnreadMessagesSeparator: UnreadMessagesSeparator,
                         virtuosoRef: virtuoso,
-                    }, endReached: endReached, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, key: messageSetKey, overscan: overscan, ref: virtuoso, startReached: startReached, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, overridingVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
-        React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList }),
+                    }, firstItemIndex: calculateFirstItemIndex(numItemsPrepended), followOutput: followOutput, increaseViewportBy: { bottom: 200, top: 0 }, initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId), itemContent: messageRenderer, itemSize: fractionalItemSize, itemsRendered: handleItemsRendered, key: messageSetKey, overscan: overscan, ref: virtuoso, style: { overflowX: 'hidden' }, totalCount: processedMessages.length }, overridingVirtuosoProps, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {}))))),
+        React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList, unreadCount: threadList ? undefined : currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages }),
         giphyPreviewMessage && React.createElement(GiphyPreviewMessage, { message: giphyPreviewMessage })));
 };
 /**

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

@@ -1,9 +1,11 @@
-import { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import React from 'react';
-import { ItemProps } from 'react-virtuoso';
-import { VirtuosoContext } from './VirtualizedMessageList';
+import { ItemProps, ListItem } from 'react-virtuoso';
+import { StreamMessage } from '../../context';
+import type { VirtuosoContext } from './VirtualizedMessageList';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 export declare function calculateItemIndex(virtuosoIndex: number, numItemsPrepended: number): number;
 export declare function calculateFirstItemIndex(numItemsPrepended: number): number;
+export declare const makeItemsRenderedHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(renderedItemsActions: ((msg: StreamMessage<StreamChatGenerics>[]) => void)[], processedMessages: StreamMessage<StreamChatGenerics>[]) => import("lodash").DebouncedFunc<(items: ListItem<UnknownType>[]) => void>;
 type CommonVirtuosoComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     context?: VirtuosoContext<StreamChatGenerics>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedMessageListComponents.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageListComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG3E,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,UAElF;AAED,wBAAgB,uBAAuB,CAAC,iBAAiB,EAAE,MAAM,UAEhE;AAED,KAAK,4BAA4B,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,OAAO,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;CAC/C,CAAC;AAGF,eAAO,MAAM,IAAI;;;;;;;oEAyBhB,CAAC;AACF,eAAO,MAAM,MAAM,0KAgBlB,CAAC;AACF,eAAO,MAAM,gBAAgB,mKAe5B,CAAC;AACF,eAAO,MAAM,MAAM,4GAKlB,CAAC;AACF,eAAO,MAAM,eAAe,oGAGX,MAAM,SACd,WAAW,6EAgEnB,CAAC"}
+{"version":3,"file":"VirtualizedMessageListComponents.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/VirtualizedMessageListComponents.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAMrD,OAAO,EAAU,aAAa,EAAuB,MAAM,eAAe,CAAC;AAI3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhF,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,UAElF;AAED,wBAAgB,uBAAuB,CAAC,iBAAiB,EAAE,MAAM,UAEhE;AAED,eAAO,MAAM,wBAAwB,0JAGuC,IAAI,uGAG7D,SAAS,WAAW,CAAC,EAAE,UAUjC,CAAC;AAEV,KAAK,4BAA4B,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,OAAO,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;CAC/C,CAAC;AAGF,eAAO,MAAM,IAAI;;;;;;;oEAyBhB,CAAC;AACF,eAAO,MAAM,MAAM,0KAgBlB,CAAC;AACF,eAAO,MAAM,gBAAgB,mKAe5B,CAAC;AACF,eAAO,MAAM,MAAM,4GAKlB,CAAC;AACF,eAAO,MAAM,eAAe,oGAGX,MAAM,SACd,WAAW,6EA+EnB,CAAC"}

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -1,11 +1,12 @@
 import { __assign, __rest } from "tslib";
-import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
-import { isDate, useComponentContext } from '../../context';
+import clsx from 'clsx';
+import throttle from 'lodash.throttle';
 import React from 'react';
+import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
-import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 import { Message } from '../Message';
-import clsx from 'clsx';
+import { isDate, useComponentContext } from '../../context';
+import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 var PREPEND_OFFSET = Math.pow(10, 7);
 export function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
     return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
@@ -13,6 +14,20 @@ export function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
 export function calculateFirstItemIndex(numItemsPrepended) {
     return PREPEND_OFFSET - numItemsPrepended;
 }
+export var makeItemsRenderedHandler = function (renderedItemsActions, processedMessages) {
+    return throttle(function (items) {
+        var renderedMessages = items
+            .map(function (item) {
+            if (!item.originalIndex)
+                return undefined;
+            return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];
+        })
+            .filter(function (msg) { return !!msg; });
+        renderedItemsActions.forEach(function (action) {
+            return action(renderedMessages);
+        });
+    }, 200);
+};
 // using 'display: inline-block'
 // traps CSS margins of the item elements, preventing incorrect item measurements
 export var Item = function (_a) {
@@ -47,7 +62,7 @@ export var Footer = function () {
 };
 export var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, virtuosoRef = virtuosoContext.virtuosoRef;
+    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, _k = virtuosoContext.unreadMessageCount, unreadMessageCount = _k === void 0 ? 0 : _k, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
     var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -66,5 +81,11 @@ export var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
         ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
     var firstOfGroup = shouldGroupByUser && ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_e = (_d = messageList[streamMessageIndex - 1]) === null || _d === void 0 ? void 0 : _d.user) === null || _e === void 0 ? void 0 : _e.id);
     var endOfGroup = shouldGroupByUser && ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_h = (_g = messageList[streamMessageIndex + 1]) === null || _g === void 0 ? void 0 : _g.user) === null || _h === void 0 ? void 0 : _h.id);
-    return (React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_j = virtuosoRef.current) === null || _j === void 0 ? void 0 : _j.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, readBy: ownMessagesReadByOthers[message.id] || [] }));
+    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
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_j = virtuosoRef.current) === null || _j === void 0 ? void 0 : _j.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, readBy: ownMessagesReadByOthers[message.id] || [] }),
+        showUnreadSeparator && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
+            React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };

package/dist/components/MessageList/hooks/MessageList/index.d.ts

@@ -2,4 +2,5 @@ export * from './useEnrichedMessages';
 export * from './useMessageListElements';
 export * from './useMessageListScrollManager';
 export * from './useScrollLocationLogic';
+export * from './useUnreadMessagesNotification';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/MessageList/hooks/MessageList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC"}

package/dist/components/MessageList/hooks/MessageList/index.js

@@ -2,3 +2,4 @@ export * from './useEnrichedMessages';
 export * from './useMessageListElements';
 export * from './useMessageListScrollManager';
 export * from './useScrollLocationLogic';
+export * from './useUnreadMessagesNotification';

package/dist/components/MessageList/hooks/MessageList/useEnrichedMessages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEnrichedMessages.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts"],"names":[],"mappings":"AAEA,OAAO,EAAkB,UAAU,EAAgC,MAAM,aAAa,CAAC;AAKvF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,eAAO,MAAM,mBAAmB;;0BAIR,OAAO;yBACR,OAAO;6BACH,OAAO;;mBAEjB,OAAO;mLAKL,OAAO,KACnB,UAAU;;;;;CAsDhB,CAAC"}
+{"version":3,"file":"useEnrichedMessages.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts"],"names":[],"mappings":"AAEA,OAAO,EAAkB,UAAU,EAAgC,MAAM,aAAa,CAAC;AAKvF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,eAAO,MAAM,mBAAmB;;0BAIR,OAAO;yBACR,OAAO;6BACH,OAAO;;mBAEjB,OAAO;mLAKL,OAAO,KACnB,UAAU;;;;;CAuDhB,CAAC"}

package/dist/components/MessageList/hooks/MessageList/useEnrichedMessages.js

@@ -29,6 +29,8 @@ export var useEnrichedMessages = function (args) {
                 acc[message.id] = style;
             return acc;
         }, {});
-    }, [messagesWithDates, noGroupByUser]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [messagesWithDates, noGroupByUser]);
     return { messageGroupStyles: messageGroupStyles, messages: messagesWithDates };
 };

package/dist/components/MessageList/hooks/MessageList/useMessageListElements.d.ts

@@ -1,20 +1,17 @@
 import React from 'react';
 import { GroupStyle } from '../../utils';
-import type { UserResponse } from 'stream-chat';
-import type { MessageProps } from '../../../Message/types';
+import type { ChannelState as StreamChannelState } from 'stream-chat';
 import type { StreamMessage } from '../../../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
-type MessagePropsToOmit = 'channel' | 'groupStyles' | 'initialMessage' | 'lastReceivedId' | 'message' | 'readBy' | 'threadList';
+import { MessageRenderer, SharedMessageProps } from '../../renderMessages';
 type UseMessageListElementsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     enrichedMessages: StreamMessage<StreamChatGenerics>[];
-    internalMessageProps: Omit<MessageProps<StreamChatGenerics>, MessagePropsToOmit>;
+    internalMessageProps: SharedMessageProps<StreamChatGenerics>;
     messageGroupStyles: Record<string, GroupStyle>;
+    renderMessages: MessageRenderer<StreamChatGenerics>;
     returnAllReadData: boolean;
     threadList: boolean;
-    read?: Record<string, {
-        last_read: Date;
-        user: UserResponse<StreamChatGenerics>;
-    }>;
+    read?: StreamChannelState<StreamChatGenerics>['read'];
 };
 export declare const useMessageListElements: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: UseMessageListElementsProps<StreamChatGenerics>) => React.ReactNode[];
 export {};

package/dist/components/MessageList/hooks/MessageList/useMessageListElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageListElements.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useMessageListElements.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,UAAU,EAAE,MAAM,aAAa,CAAC;AAW1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,KAAK,kBAAkB,GACnB,SAAS,GACT,aAAa,GACb,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,CAAC;AAEjB,KAAK,2BAA2B,CAC9B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gBAAgB,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACtD,oBAAoB,EAAE,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IACjF,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAA;KAAE,CAAC,CAAC;CACpF,CAAC;AAEF,eAAO,MAAM,sBAAsB,iKAkGlC,CAAC"}
+{"version":3,"file":"useMessageListElements.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useMessageListElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1D,OAAO,KAAK,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE3E,KAAK,2BAA2B,CAC9B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gBAAgB,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACtD,oBAAoB,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC;IAC7D,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,cAAc,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACpD,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,sBAAsB,iKA0DlC,CAAC"}

package/dist/components/MessageList/hooks/MessageList/useMessageListElements.js

@@ -1,19 +1,13 @@
 import { __assign } from "tslib";
-/* eslint-disable no-continue */
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { useLastReadData } from '../useLastReadData';
 import { getLastReceived } from '../../utils';
-import { CUSTOM_MESSAGE_TYPE } from '../../../../constants/messageTypes';
-import { DateSeparator as DefaultDateSeparator } from '../../../DateSeparator/DateSeparator';
-import { EventComponent } from '../../../EventComponent/EventComponent';
-import { Message } from '../../../Message';
 import { useChatContext } from '../../../../context/ChatContext';
 import { useComponentContext } from '../../../../context/ComponentContext';
-import { isDate } from '../../../../context/TranslationContext';
 export var useMessageListElements = function (props) {
-    var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, read = props.read, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
+    var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, read = props.read, renderMessages = props.renderMessages, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
     var _a = useChatContext('useMessageListElements'), client = _a.client, customClasses = _a.customClasses;
-    var _b = useComponentContext('useMessageListElements'), _c = _b.DateSeparator, DateSeparator = _c === void 0 ? DefaultDateSeparator : _c, HeaderComponent = _b.HeaderComponent, _d = _b.MessageSystem, MessageSystem = _d === void 0 ? EventComponent : _d;
+    var components = useComponentContext('useMessageListElements');
     // get the readData, but only for messages submitted by the user themselves
     var readData = useLastReadData({
         messages: enrichedMessages,
@@ -21,34 +15,31 @@ export var useMessageListElements = function (props) {
         returnAllReadData: returnAllReadData,
         userID: client.userID,
     });
-    var lastReceivedId = useMemo(function () { return getLastReceived(enrichedMessages); }, [enrichedMessages]);
+    var lastReceivedMessageId = useMemo(function () { return getLastReceived(enrichedMessages); }, [
+        enrichedMessages,
+    ]);
+    var ownReadState = client.user && (read === null || read === void 0 ? void 0 : read[client.user.id]) ? read[client.user.id] : undefined;
     var elements = useMemo(function () {
-        return enrichedMessages.map(function (message) {
-            if (message.customType === CUSTOM_MESSAGE_TYPE.date &&
-                message.date &&
-                isDate(message.date)) {
-                return (React.createElement("li", { key: "".concat(message.date.toISOString(), "-i") },
-                    React.createElement(DateSeparator, { date: message.date, formatDate: internalMessageProps.formatDate, unread: message.unread })));
-            }
-            if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
-                return (React.createElement("li", { key: 'intro' },
-                    React.createElement(HeaderComponent, null)));
-            }
-            if (message.type === 'system') {
-                return (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);
-            return (React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass, key: message.id || message.created_at },
-                React.createElement(Message, __assign({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], threadList: threadList }, internalMessageProps))));
+        return renderMessages({
+            components: components,
+            customClasses: customClasses,
+            lastReceivedMessageId: lastReceivedMessageId,
+            messageGroupStyles: messageGroupStyles,
+            messages: enrichedMessages,
+            ownReadState: ownReadState,
+            readData: readData,
+            sharedMessageProps: __assign(__assign({}, internalMessageProps), { threadList: threadList }),
         });
-    }, [
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         enrichedMessages,
         internalMessageProps,
-        lastReceivedId,
+        lastReceivedMessageId,
         messageGroupStyles,
+        ownReadState,
         readData,
+        renderMessages,
         threadList,
     ]);
     return elements;

package/dist/components/MessageList/hooks/MessageList/useMessageListScrollManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMessageListScrollManager.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iCAAiC,CAC3C,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,uBAAuB,EAAE,MAAM,CAAC;IAChC,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;IACjD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAGF,wBAAgB,2BAA2B,CACzC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,MAAM,EAAE,iCAAiC,CAAC,kBAAkB,CAAC,oBAmErC,MAAM,UAG/B"}
+{"version":3,"file":"useMessageListScrollManager.d.ts","sourceRoot":"","sources":["../../../../../src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iCAAiC,CAC3C,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,uBAAuB,EAAE,MAAM,CAAC;IAChC,QAAQ,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAAE,CAAC;IAC9C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;IACjD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAGF,wBAAgB,2BAA2B,CACzC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAChF,MAAM,EAAE,iCAAiC,CAAC,kBAAkB,CAAC,oBAoErC,MAAM,UAG/B"}

package/dist/components/MessageList/hooks/MessageList/useMessageListScrollManager.js

@@ -51,6 +51,7 @@ export function useMessageListScrollManager(params) {
         }
         messages.current = newMessages;
         measures.current = newMeasures;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [measures, messages, params.messages]);
     return function (scrollTopValue) {
         scrollTop.current = scrollTopValue;