stream-chat-react 11.7.0 → 11.9.0

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

@@ -34,8 +34,6 @@ export type MessageListProps<StreamChatGenerics extends DefaultStreamChatGeneric
     loadMore?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);
     /** Function called when newer messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
     loadMoreNewer?: ChannelActionContextValue['loadMoreNewer'] | (() => 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;
     /** The limit to use when paginating messages */
     messageLimit?: number;
     /** The messages to render in the list, defaults to messages stored in [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/) */
@@ -52,6 +50,12 @@ export type MessageListProps<StreamChatGenerics extends DefaultStreamChatGeneric
      * Defaults to 200px
      */
     scrolledUpThreshold?: number;
+    /**
+     * The floating notification informing about unread messages will be shown when the
+     * UnreadMessagesSeparator is not visible. The default is false, that means the notification
+     * is shown only when viewing unread messages.
+     */
+    showUnreadNotificationAlways?: boolean;
     /** If true, indicates the message list is a thread  */
     threadList?: boolean;
 };
@@ -63,6 +67,6 @@ export type MessageListProps<StreamChatGenerics extends DefaultStreamChatGeneric
  * - [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/)
  * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
  */
-export declare const MessageList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageListProps<StreamChatGenerics>) => JSX.Element;
+export declare const MessageList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageListProps<StreamChatGenerics>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=MessageList.d.ts.map

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

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

package/dist/components/MessageList/MessageList.js

@@ -19,34 +19,34 @@ import { MessageListMainPanel } from './MessageListMainPanel';
 import { defaultRenderMessages } from './renderMessages';
 var MessageListWithContext = function (props) {
     var _a;
-    var channel = props.channel, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? false : _b, groupStyles = props.groupStyles, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, internalInfiniteScrollProps = props.internalInfiniteScrollProps, _e = props.messageActions, messageActions = _e === void 0 ? Object.keys(MESSAGE_ACTIONS) : _e, _f = props.messages, messages = _f === void 0 ? [] : _f, notifications = props.notifications, _g = props.noGroupByUser, noGroupByUser = _g === void 0 ? false : _g, _h = props.pinPermissions, pinPermissions = _h === void 0 ? defaultPinPermissions : _h, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+    var channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? false : _b, groupStyles = props.groupStyles, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, internalInfiniteScrollProps = props.internalInfiniteScrollProps, _e = props.messageActions, messageActions = _e === void 0 ? Object.keys(MESSAGE_ACTIONS) : _e, _f = props.messages, messages = _f === void 0 ? [] : _f, notifications = props.notifications, _g = props.noGroupByUser, noGroupByUser = _g === void 0 ? false : _g, _h = props.pinPermissions, pinPermissions = _h === void 0 ? defaultPinPermissions : _h, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     _j = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    returnAllReadData = _j === void 0 ? false : _j, _k = props.threadList, threadList = _k === void 0 ? false : _k, _l = props.unsafeHTML, unsafeHTML = _l === void 0 ? false : _l, headerPosition = props.headerPosition, read = props.read, markReadOnScrolledToBottom = props.markReadOnScrolledToBottom, _m = props.renderMessages, renderMessages = _m === void 0 ? defaultRenderMessages : _m, _o = props.messageLimit, messageLimit = _o === void 0 ? 100 : _o, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _p = props.hasMoreNewer, hasMoreNewer = _p === void 0 ? false : _p, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _q = props.jumpToLatestMessage, jumpToLatestMessage = _q === void 0 ? function () { return Promise.resolve(); } : _q;
+    returnAllReadData = _j === void 0 ? false : _j, _k = props.threadList, threadList = _k === void 0 ? false : _k, _l = props.unsafeHTML, unsafeHTML = _l === void 0 ? false : _l, headerPosition = props.headerPosition, read = props.read, _m = props.renderMessages, renderMessages = _m === void 0 ? defaultRenderMessages : _m, _o = props.messageLimit, messageLimit = _o === void 0 ? 100 : _o, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _p = props.hasMoreNewer, hasMoreNewer = _p === void 0 ? false : _p, showUnreadNotificationAlways = props.showUnreadNotificationAlways, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _q = props.jumpToLatestMessage, jumpToLatestMessage = _q === void 0 ? function () { return Promise.resolve(); } : _q;
     var _r = React.useState(null), listElement = _r[0], setListElement = _r[1];
     var _s = React.useState(null), ulElement = _s[0], setUlElement = _s[1];
-    var _t = useChatContext('MessageList'), client = _t.client, customClasses = _t.customClasses;
-    var _u = useComponentContext('MessageList'), _v = _u.EmptyStateIndicator, EmptyStateIndicator = _v === void 0 ? DefaultEmptyStateIndicator : _v, _w = _u.LoadingIndicator, LoadingIndicator = _w === void 0 ? DefaultLoadingIndicator : _w, _x = _u.MessageListNotifications, MessageListNotifications = _x === void 0 ? DefaultMessageListNotifications : _x, _y = _u.MessageNotification, MessageNotification = _y === void 0 ? DefaultMessageNotification : _y, _z = _u.TypingIndicator, TypingIndicator = _z === void 0 ? DefaultTypingIndicator : _z, _0 = _u.UnreadMessagesNotification, UnreadMessagesNotification = _0 === void 0 ? DefaultUnreadMessagesNotification : _0;
+    var customClasses = useChatContext('MessageList').customClasses;
+    var _t = useComponentContext('MessageList'), _u = _t.EmptyStateIndicator, EmptyStateIndicator = _u === void 0 ? DefaultEmptyStateIndicator : _u, _v = _t.LoadingIndicator, LoadingIndicator = _v === void 0 ? DefaultLoadingIndicator : _v, _w = _t.MessageListNotifications, MessageListNotifications = _w === void 0 ? DefaultMessageListNotifications : _w, _x = _t.MessageNotification, MessageNotification = _x === void 0 ? DefaultMessageNotification : _x, _y = _t.TypingIndicator, TypingIndicator = _y === void 0 ? DefaultTypingIndicator : _y, _z = _t.UnreadMessagesNotification, UnreadMessagesNotification = _z === void 0 ? DefaultUnreadMessagesNotification : _z;
     var loadMoreScrollThreshold = (internalInfiniteScrollProps === null || internalInfiniteScrollProps === void 0 ? void 0 : internalInfiniteScrollProps.threshold) || 250;
-    var currentUserChannelReadState = client.user && (read === null || read === void 0 ? void 0 : read[client.user.id]);
-    var _1 = useScrollLocationLogic({
+    var _0 = useScrollLocationLogic({
         hasMoreNewer: hasMoreNewer,
         listElement: listElement,
         loadMoreScrollThreshold: loadMoreScrollThreshold,
         messages: messages,
         scrolledUpThreshold: props.scrolledUpThreshold,
         suppressAutoscroll: suppressAutoscroll,
-    }), hasNewMessages = _1.hasNewMessages, isMessageListScrolledToBottom = _1.isMessageListScrolledToBottom, onScroll = _1.onScroll, scrollToBottom = _1.scrollToBottom, wrapperRect = _1.wrapperRect;
+    }), hasNewMessages = _0.hasNewMessages, isMessageListScrolledToBottom = _0.isMessageListScrolledToBottom, onScroll = _0.onScroll, scrollToBottom = _0.scrollToBottom, wrapperRect = _0.wrapperRect;
     var showUnreadMessagesNotification = useUnreadMessagesNotification({
         isMessageListScrolledToBottom: isMessageListScrolledToBottom,
-        unreadCount: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages,
+        showAlways: !!showUnreadNotificationAlways,
+        unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages,
     }).show;
     useMarkRead({
         isMessageListScrolledToBottom: isMessageListScrolledToBottom,
-        markReadOnScrolledToBottom: markReadOnScrolledToBottom,
         messageListIsThread: threadList,
-        unreadCount: (_a = currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages) !== null && _a !== void 0 ? _a : 0,
+        unreadCount: (_a = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) !== null && _a !== void 0 ? _a : 0,
+        wasMarkedUnread: !!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id),
     });
-    var _2 = useEnrichedMessages({
+    var _1 = useEnrichedMessages({
         channel: channel,
         disableDateSeparator: disableDateSeparator,
         groupStyles: groupStyles,
@@ -55,8 +55,9 @@ var MessageListWithContext = function (props) {
         hideNewMessageSeparator: hideNewMessageSeparator,
         messages: messages,
         noGroupByUser: noGroupByUser,
-    }), messageGroupStyles = _2.messageGroupStyles, enrichedMessages = _2.messages;
+    }), messageGroupStyles = _1.messageGroupStyles, enrichedMessages = _1.messages;
     var elements = useMessageListElements({
+        channelUnreadUiState: channelUnreadUiState,
         enrichedMessages: enrichedMessages,
         internalMessageProps: {
             additionalMessageInputProps: props.additionalMessageInputProps,
@@ -132,12 +133,12 @@ var MessageListWithContext = function (props) {
     var showEmptyStateIndicator = elements.length === 0 && !threadList;
     return (React.createElement(MessageListContextProvider, { value: { listElement: listElement, scrollToBottom: scrollToBottom } },
         React.createElement(MessageListMainPanel, null,
-            !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages })),
+            !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages })),
             React.createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore }, props.internalInfiniteScrollProps, { threshold: loadMoreScrollThreshold }),
                 React.createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
                 React.createElement(TypingIndicator, { threadList: threadList }),
                 React.createElement("div", { key: 'bottom' }))))),
-        React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottomFromNotification, threadList: threadList, unreadCount: threadList ? undefined : currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages })));
+        React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottomFromNotification, threadList: threadList, unreadCount: threadList ? undefined : channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages })));
 };
 /**
  * The MessageList component renders a list of Messages.

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

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { PropsWithChildrenOnly } from '../../types/types';
 export declare const MESSAGE_LIST_MAIN_PANEL_CLASS: "str-chat__main-panel-inner";
-export declare const MessageListMainPanel: ({ children }: PropsWithChildrenOnly) => JSX.Element;
+export declare const MessageListMainPanel: ({ children }: PropsWithChildrenOnly) => React.JSX.Element;
 //# sourceMappingURL=MessageListMainPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageListMainPanel.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageListMainPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE/D,eAAO,MAAM,6BAA6B,8BAAwC,CAAC;AAEnF,eAAO,MAAM,oBAAoB,iBAAkB,qBAAqB,gBAMvE,CAAC"}
+{"version":3,"file":"MessageListMainPanel.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageListMainPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE/D,eAAO,MAAM,6BAA6B,8BAAwC,CAAC;AAEnF,eAAO,MAAM,oBAAoB,iBAAkB,qBAAqB,sBAMvE,CAAC"}

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

@@ -11,5 +11,5 @@ export type MessageListNotificationsProps = {
     threadList?: boolean;
     unreadCount?: number;
 };
-export declare const MessageListNotifications: (props: MessageListNotificationsProps) => JSX.Element;
+export declare const MessageListNotifications: (props: MessageListNotificationsProps) => React.JSX.Element;
 //# sourceMappingURL=MessageListNotifications.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageListNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageListNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,MAAM,MAAM,6BAA6B,GAAG;IAC1C,cAAc,EAAE,OAAO,CAAC;IACxB,6BAA6B,EAAE,OAAO,CAAC;IACvC,uBAAuB,EAAE,OAAO,CAAC;IACjC,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACnE,aAAa,EAAE,oBAAoB,CAAC;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAW,6BAA6B,gBAiC5E,CAAC"}
+{"version":3,"file":"MessageListNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageListNotifications.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,MAAM,MAAM,6BAA6B,GAAG;IAC1C,cAAc,EAAE,OAAO,CAAC;IACxB,6BAA6B,EAAE,OAAO,CAAC;IACvC,uBAAuB,EAAE,OAAO,CAAC;IACjC,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACnE,aAAa,EAAE,oBAAoB,CAAC;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAW,6BAA6B,sBAiC5E,CAAC"}

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

@@ -11,5 +11,5 @@ export type MessageNotificationProps = PropsWithChildren<{
     /** */
     unreadCount?: number;
 }>;
-export declare const MessageNotification: (props: MessageNotificationProps) => JSX.Element | null;
+export declare const MessageNotification: (props: MessageNotificationProps) => React.JSX.Element | null;
 //# sourceMappingURL=MessageNotification.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageNotification.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IACvD,iCAAiC;IACjC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,gQAAgQ;IAChQ,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,mMAAmM;IACnM,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM;IACN,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAmBH,eAAO,MAAM,mBAAmB,UAjBc,wBAAwB,uBAmB7B,CAAC"}
+{"version":3,"file":"MessageNotification.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/MessageNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,CAAC;IACvD,iCAAiC;IACjC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,gQAAgQ;IAChQ,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,mMAAmM;IACnM,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM;IACN,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAmBH,eAAO,MAAM,mBAAmB,UAjBc,wBAAwB,6BAmB7B,CAAC"}

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { MessageNotificationProps } from './MessageNotification';
-export declare const ScrollToBottomButton: (props: Pick<MessageNotificationProps, 'isMessageListScrolledToBottom' | 'onClick' | 'threadList' | 'unreadCount'>) => JSX.Element | null;
+export declare const ScrollToBottomButton: (props: Pick<MessageNotificationProps, 'isMessageListScrolledToBottom' | 'onClick' | 'threadList'>) => React.JSX.Element | null;
 //# sourceMappingURL=ScrollToBottomButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollToBottomButton.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/ScrollToBottomButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AA0CtE,eAAO,MAAM,oBAAoB,UAvCxB,KACL,wBAAwB,EACxB,+BAA+B,GAAG,SAAS,GAAG,YAAY,GAAG,aAAa,CAC3E,uBAsCuC,CAAC"}
+{"version":3,"file":"ScrollToBottomButton.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/ScrollToBottomButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAuFtE,eAAO,MAAM,oBAAoB,UApFxB,KAAK,wBAAwB,EAAE,+BAA+B,GAAG,SAAS,GAAG,YAAY,CAAC,6BAsFzD,CAAC"}

package/dist/components/MessageList/ScrollToBottomButton.js

@@ -1,13 +1,54 @@
-import React from 'react';
+import React, { useEffect, useState } 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, _a = props.unreadCount, unreadCount = _a === void 0 ? 0 : _a;
+    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);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [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]);
     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),
-            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)))));
+            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)))));
 };
 export var ScrollToBottomButton = React.memo(UnMemoizedScrollToBottomButton);

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

@@ -1,6 +1,17 @@
+import React from 'react';
 export type UnreadMessagesNotificationProps = {
+    /**
+     * Configuration parameter to determine the message page size, when jumping to the first unread message.
+     */
     queryMessageLimit?: number;
+    /**
+     * Configuration parameter to determine, whether the unread count is to be shown on the component. Disabled by default.
+     */
+    showCount?: boolean;
+    /**
+     * The count of unread messages to be displayed if enabled.
+     */
     unreadCount?: number;
 };
-export declare const UnreadMessagesNotification: ({ queryMessageLimit, unreadCount, }: UnreadMessagesNotificationProps) => JSX.Element;
+export declare const UnreadMessagesNotification: ({ queryMessageLimit, showCount, unreadCount, }: UnreadMessagesNotificationProps) => React.JSX.Element;
 //# sourceMappingURL=UnreadMessagesNotification.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"UnreadMessagesNotification.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/UnreadMessagesNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,+BAA+B,GAAG;IAC5C;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,0BAA0B,mDAIpC,+BAA+B,sBAqBjC,CAAC"}

package/dist/components/MessageList/UnreadMessagesNotification.js

@@ -2,11 +2,13 @@ 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 queryMessageLimit = _a.queryMessageLimit, showCount = _a.showCount, 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 },
+    return (React.createElement("div", { className: 'str-chat__unread-messages-notification', "data-testid": 'unread-messages-notification' },
+        React.createElement("button", { onClick: function () { return jumpToFirstUnreadMessage(queryMessageLimit); } }, unreadCount && showCount
+            ? t('{{count}} unread', { count: unreadCount !== null && unreadCount !== void 0 ? unreadCount : 0 })
+            : t('Unread messages')),
+        React.createElement("button", { onClick: function () { return markRead(); } },
             React.createElement(CloseIcon, null))));
 };

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

@@ -1,6 +1,14 @@
+import React from 'react';
 export declare const UNREAD_MESSAGE_SEPARATOR_CLASS = "str-chat__unread-messages-separator";
 export type UnreadMessagesSeparatorProps = {
+    /**
+     * Configuration parameter to determine, whether the unread count is to be shown on the component. Disabled by default.
+     */
+    showCount?: boolean;
+    /**
+     * The count of unread messages to be displayed if enabled.
+     */
     unreadCount?: number;
 };
-export declare const UnreadMessagesSeparator: ({ unreadCount }: UnreadMessagesSeparatorProps) => JSX.Element;
+export declare const UnreadMessagesSeparator: ({ showCount, unreadCount, }: UnreadMessagesSeparatorProps) => React.JSX.Element;
 //# sourceMappingURL=UnreadMessagesSeparator.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"UnreadMessagesSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList/UnreadMessagesSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,8BAA8B,wCAAwC,CAAC;AAEpF,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,gCAGjC,4BAA4B,sBAS9B,CAAC"}

package/dist/components/MessageList/UnreadMessagesSeparator.js

@@ -2,9 +2,9 @@ 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 showCount = _a.showCount, unreadCount = _a.unreadCount;
     var t = useTranslationContext('UnreadMessagesSeparator').t;
-    return (React.createElement("div", { className: UNREAD_MESSAGE_SEPARATOR_CLASS }, unreadCount
+    return (React.createElement("div", { className: UNREAD_MESSAGE_SEPARATOR_CLASS, "data-testid": 'unread-messages-separator' }, unreadCount && showCount
         ? t('unreadMessagesSeparatorText', { count: unreadCount })
         : t('Unread messages')));
 };

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

@@ -74,8 +74,6 @@ 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 */
@@ -111,6 +109,12 @@ export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStream
     separateGiphyPreview?: boolean;
     /** If true, group messages belonging to the same user, otherwise show each message individually */
     shouldGroupByUser?: boolean;
+    /**
+     * The floating notification informing about unread messages will be shown when the
+     * UnreadMessagesSeparator is not visible. The default is false, that means the notification
+     * is shown only when viewing unread messages.
+     */
+    showUnreadNotificationAlways?: boolean;
     /** The scrollTo behavior when new messages appear. Use `"smooth"` for regular chat channels, and `"auto"` (which results in instant scroll to bottom) if you expect high throughput. */
     stickToBottomScrollBehavior?: 'smooth' | 'auto';
     /** stops the list from autoscrolling when new messages are loaded */
@@ -122,6 +126,6 @@ export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStream
  * The VirtualizedMessageList component renders a list of messages in a virtualized list.
  * It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx).
  */
-export declare function VirtualizedMessageList<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: VirtualizedMessageListProps<StreamChatGenerics>): JSX.Element;
+export declare function VirtualizedMessageList<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: VirtualizedMessageListProps<StreamChatGenerics>): React.JSX.Element;
 export {};
 //# sourceMappingURL=VirtualizedMessageList.d.ts.map

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

@@ -47,11 +47,11 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
 }
 var VirtualizedMessageListWithContext = function (props) {
     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, 
+    var additionalMessageInputProps = props.additionalMessageInputProps, _c = props.additionalVirtuosoProps, additionalVirtuosoProps = _c === void 0 ? {} : _c, channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, 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, 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
     _h = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    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;
+    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, showUnreadNotificationAlways = props.showUnreadNotificationAlways, _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.
@@ -61,10 +61,10 @@ var VirtualizedMessageListWithContext = function (props) {
     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 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,
+        lastRead: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read,
+        showAlways: !!showUnreadNotificationAlways,
+        unreadCount: (_a = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.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 () {
@@ -121,9 +121,9 @@ var VirtualizedMessageListWithContext = function (props) {
     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,
+        unreadCount: (_b = channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages) !== null && _b !== void 0 ? _b : 0,
+        wasMarkedUnread: !!(channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id),
     });
     var scrollToBottom = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -201,7 +201,7 @@ var VirtualizedMessageListWithContext = function (props) {
         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 })),
+            !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.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: 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,
@@ -210,9 +210,9 @@ var VirtualizedMessageListWithContext = function (props) {
                         customMessageActions: customMessageActions,
                         customMessageRenderer: customMessageRenderer,
                         DateSeparator: DateSeparator,
-                        firstUnreadMessageId: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.first_unread_message_id,
+                        firstUnreadMessageId: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.first_unread_message_id,
                         head: head,
-                        lastReadMessageId: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.last_read_message_id,
+                        lastReadMessageId: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.last_read_message_id,
                         lastReceivedMessageId: lastReceivedMessageId,
                         loadingMore: loadingMore,
                         Message: MessageUIComponent,
@@ -224,11 +224,11 @@ var VirtualizedMessageListWithContext = function (props) {
                         processedMessages: processedMessages,
                         shouldGroupByUser: shouldGroupByUser,
                         threadList: threadList,
-                        unreadMessageCount: currentUserChannelReadState === null || currentUserChannelReadState === void 0 ? void 0 : currentUserChannelReadState.unread_messages,
+                        unreadMessageCount: channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages,
                         UnreadMessagesSeparator: UnreadMessagesSeparator,
                         virtuosoRef: virtuoso,
                     }, 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 }),
+        React.createElement(MessageListNotifications, { hasNewMessages: newMessagesNotification, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottom, threadList: threadList, unreadCount: threadList ? undefined : channelUnreadUiState === null || channelUnreadUiState === void 0 ? void 0 : channelUnreadUiState.unread_messages }),
         giphyPreviewMessage && React.createElement(GiphyPreviewMessage, { message: giphyPreviewMessage })));
 };
 /**
@@ -237,7 +237,7 @@ var VirtualizedMessageListWithContext = function (props) {
  */
 export function VirtualizedMessageList(props) {
     var _a = useChannelActionContext('VirtualizedMessageList'), jumpToLatestMessage = _a.jumpToLatestMessage, loadMore = _a.loadMore, loadMoreNewer = _a.loadMoreNewer;
-    var _b = useChannelStateContext('VirtualizedMessageList'), channel = _b.channel, hasMore = _b.hasMore, hasMoreNewer = _b.hasMoreNewer, highlightedMessageId = _b.highlightedMessageId, loadingMore = _b.loadingMore, loadingMoreNewer = _b.loadingMoreNewer, contextMessages = _b.messages, notifications = _b.notifications, read = _b.read, suppressAutoscroll = _b.suppressAutoscroll;
+    var _b = useChannelStateContext('VirtualizedMessageList'), channel = _b.channel, channelUnreadUiState = _b.channelUnreadUiState, hasMore = _b.hasMore, hasMoreNewer = _b.hasMoreNewer, highlightedMessageId = _b.highlightedMessageId, loadingMore = _b.loadingMore, loadingMoreNewer = _b.loadingMoreNewer, contextMessages = _b.messages, notifications = _b.notifications, read = _b.read, suppressAutoscroll = _b.suppressAutoscroll;
     var messages = props.messages || contextMessages;
-    return (React.createElement(VirtualizedMessageListWithContext, __assign({ channel: channel, 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)));
+    return (React.createElement(VirtualizedMessageListWithContext, __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)));
 }

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

@@ -9,17 +9,17 @@ export declare const makeItemsRenderedHandler: <StreamChatGenerics extends Defau
 type CommonVirtuosoComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     context?: VirtuosoContext<StreamChatGenerics>;
 };
-export declare const Item: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, ...props }: Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+export declare const Item: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, ...props }: Pick<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "style" | "children"> & {
     'data-index': number;
     'data-item-index': number;
     'data-item-group-index'?: number | undefined;
     'data-known-size': number;
-} & CommonVirtuosoComponentProps<StreamChatGenerics>) => JSX.Element;
-export declare const Header: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => JSX.Element | null;
-export declare const EmptyPlaceholder: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => JSX.Element;
-export declare const Footer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => JSX.Element | null;
-export declare const messageRenderer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(virtuosoIndex: number, _data: UnknownType, virtuosoContext: VirtuosoContext<StreamChatGenerics>) => JSX.Element | null;
+} & CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const Header: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const EmptyPlaceholder: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const Footer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element | null;
+export declare const messageRenderer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(virtuosoIndex: number, _data: UnknownType, virtuosoContext: VirtuosoContext<StreamChatGenerics>) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=VirtualizedMessageListComponents.d.ts.map

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":"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"}
+{"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;;;;;;;0EAyBhB,CAAC;AACF,eAAO,MAAM,MAAM,gLAgBlB,CAAC;AACF,eAAO,MAAM,gBAAgB,yKAe5B,CAAC;AACF,eAAO,MAAM,MAAM,kHAKlB,CAAC;AACF,eAAO,MAAM,eAAe,oGAGX,MAAM,SACd,WAAW,mFA+EnB,CAAC"}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { GroupStyle } from '../../utils';
 import type { ChannelState as StreamChannelState } from 'stream-chat';
 import type { StreamMessage } from '../../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { ChannelUnreadUiState, DefaultStreamChatGenerics } from '../../../../types/types';
 import { MessageRenderer, SharedMessageProps } from '../../renderMessages';
 type UseMessageListElementsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     enrichedMessages: StreamMessage<StreamChatGenerics>[];
@@ -11,6 +11,7 @@ type UseMessageListElementsProps<StreamChatGenerics extends DefaultStreamChatGen
     renderMessages: MessageRenderer<StreamChatGenerics>;
     returnAllReadData: boolean;
     threadList: boolean;
+    channelUnreadUiState?: ChannelUnreadUiState<StreamChatGenerics>;
     read?: StreamChannelState<StreamChatGenerics>['read'];
 };
 export declare const useMessageListElements: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: UseMessageListElementsProps<StreamChatGenerics>) => React.ReactNode[];

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":"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"}
+{"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,oBAAoB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAC/F,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,oBAAoB,CAAC,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;IAChE,IAAI,CAAC,EAAE,kBAAkB,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,sBAAsB,iKAyDlC,CAAC"}

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

@@ -5,7 +5,7 @@ import { getLastReceived } from '../../utils';
 import { useChatContext } from '../../../../context/ChatContext';
 import { useComponentContext } from '../../../../context/ComponentContext';
 export var useMessageListElements = function (props) {
-    var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, read = props.read, renderMessages = props.renderMessages, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
+    var channelUnreadUiState = props.channelUnreadUiState, 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 components = useComponentContext('useMessageListElements');
     // get the readData, but only for messages submitted by the user themselves
@@ -18,15 +18,14 @@ export var useMessageListElements = function (props) {
     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 renderMessages({
+            channelUnreadUiState: channelUnreadUiState,
             components: components,
             customClasses: customClasses,
             lastReceivedMessageId: lastReceivedMessageId,
             messageGroupStyles: messageGroupStyles,
             messages: enrichedMessages,
-            ownReadState: ownReadState,
             readData: readData,
             sharedMessageProps: __assign(__assign({}, internalMessageProps), { threadList: threadList }),
         });
@@ -37,7 +36,7 @@ export var useMessageListElements = function (props) {
         internalMessageProps,
         lastReceivedMessageId,
         messageGroupStyles,
-        ownReadState,
+        channelUnreadUiState,
         readData,
         renderMessages,
         threadList,

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

@@ -1,8 +1,9 @@
 export type UseUnreadMessagesNotificationParams = {
     isMessageListScrolledToBottom: boolean;
+    showAlways: boolean;
     unreadCount?: number;
 };
-export declare const useUnreadMessagesNotification: ({ isMessageListScrolledToBottom, unreadCount, }: UseUnreadMessagesNotificationParams) => {
+export declare const useUnreadMessagesNotification: ({ isMessageListScrolledToBottom, showAlways, unreadCount, }: UseUnreadMessagesNotificationParams) => {
     show: boolean;
 };
 //# sourceMappingURL=useUnreadMessagesNotification.d.ts.map