stream-chat-react 11.4.0 → 11.6.0

package/dist/components/Channel/Channel.d.ts

@@ -8,7 +8,8 @@ import type { MessageProps } from '../Message/types';
 import type { MessageInputProps } from '../MessageInput/MessageInput';
 import type { CustomTrigger, DefaultStreamChatGenerics, GiphyVersions, ImageAttachmentSizeHandler, SendMessageOptions, UpdateMessageOptions, VideoAttachmentSizeHandler } from '../../types/types';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
-import { ReactionOptions } from '../../components/Reactions/reactionOptions';
+import { ReactionOptions } from '../Reactions';
+import type { UnreadMessagesNotificationProps } from '../MessageList';
 type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /** Custom UI component to display a message attachment, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) */
     Attachment?: ComponentContextValue<StreamChatGenerics>['Attachment'];
@@ -96,13 +97,17 @@ type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultS
     TriggerProvider?: ComponentContextValue<StreamChatGenerics>['TriggerProvider'];
     /** Custom UI component for the typing indicator, defaults to and accepts same props as: [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) */
     TypingIndicator?: ComponentContextValue<StreamChatGenerics>['TypingIndicator'];
+    /** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */
+    UnreadMessagesNotification?: React.ComponentType<UnreadMessagesNotificationProps>;
+    /** Custom UI component that separates read messages from unread, defaults to and accepts same props as: [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) */
+    UnreadMessagesSeparator?: ComponentContextValue<StreamChatGenerics>['UnreadMessagesSeparator'];
     /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
     VirtualMessage?: ComponentContextValue<StreamChatGenerics>['VirtualMessage'];
 };
 export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = ChannelPropsForwardedToComponentContext<StreamChatGenerics> & {
     /** List of accepted file types */
     acceptedFiles?: string[];
-    /** Custom handler function that runs when the active channel has unread messages (i.e., when chat is running on a separate browser tab) */
+    /** Custom handler function that runs when the active channel has unread messages (i.e., when chat is running in a separate browser tab) */
     activeUnreadHandler?: (unread: number, documentTitle: string) => void;
     /** The connected and active channel */
     channel?: StreamChannel<StreamChatGenerics>;
@@ -143,6 +148,8 @@ export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics =
      * Preventing to initialize the channel on mount allows us to postpone the channel creation to a later point in time.
      */
     initializeOnMount?: boolean;
+    /** Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is not marked read on mount. */
+    markReadOnMount?: boolean;
     /** Maximum number of attachments allowed per message */
     maxNumberOfFiles?: number;
     /** Whether to allow multiple attachment uploads */

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

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

package/dist/components/Channel/Channel.js

@@ -23,12 +23,12 @@ import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { TypingProvider } from '../../context/TypingContext';
 import { DEFAULT_INITIAL_CHANNEL_PAGE_SIZE, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, DEFAULT_THREAD_PAGE_SIZE, } from '../../constants/limits';
-import { hasMoreMessagesProbably } from '../MessageList/utils';
-import { makeAddNotifications } from './utils';
-import { getChannel } from '../../utils/getChannel';
+import { hasMoreMessagesProbably, UnreadMessagesSeparator } from '../MessageList';
 import { useChannelContainerClasses } from './hooks/useChannelContainerClasses';
+import { makeAddNotifications } from './utils';
+import { getChannel } from '../../utils';
 import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration, } from '../Attachment/attachment-sizing';
-import { defaultReactionOptions, } from '../../components/Reactions/reactionOptions';
+import { defaultReactionOptions } from '../Reactions';
 import { EventComponent } from '../EventComponent';
 import { DateSeparator } from '../DateSeparator';
 var isUserResponseArray = function (output) { var _a; return ((_a = output[0]) === null || _a === void 0 ? void 0 : _a.id) != null; };
@@ -55,7 +55,7 @@ var UnMemoizedChannel = function (props) {
 };
 var ChannelInner = function (props) {
     var _a;
-    var acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, channelQueryOptions = props.channelQueryOptions, children = props.children, doDeleteMessageRequest = props.doDeleteMessageRequest, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _b = props.dragAndDropWindow, dragAndDropWindow = _b === void 0 ? false : _b, enrichURLForPreviewConfig = props.enrichURLForPreviewConfig, _c = props.initializeOnMount, initializeOnMount = _c === void 0 ? true : _c, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? DefaultLoadingErrorIndicator : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? DefaultLoadingIndicator : _e, maxNumberOfFiles = props.maxNumberOfFiles, _f = props.multipleUploads, multipleUploads = _f === void 0 ? true : _f, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover, _g = props.optionalMessageInputProps, optionalMessageInputProps = _g === void 0 ? {} : _g, skipMessageDataMemoization = props.skipMessageDataMemoization;
+    var acceptedFiles = props.acceptedFiles, activeUnreadHandler = props.activeUnreadHandler, channel = props.channel, channelQueryOptions = props.channelQueryOptions, children = props.children, doDeleteMessageRequest = props.doDeleteMessageRequest, doMarkReadRequest = props.doMarkReadRequest, doSendMessageRequest = props.doSendMessageRequest, doUpdateMessageRequest = props.doUpdateMessageRequest, _b = props.dragAndDropWindow, dragAndDropWindow = _b === void 0 ? false : _b, enrichURLForPreviewConfig = props.enrichURLForPreviewConfig, _c = props.initializeOnMount, initializeOnMount = _c === void 0 ? true : _c, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? DefaultLoadingErrorIndicator : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? DefaultLoadingIndicator : _e, markReadOnMount = props.markReadOnMount, maxNumberOfFiles = props.maxNumberOfFiles, _f = props.multipleUploads, multipleUploads = _f === void 0 ? true : _f, onMentionsClick = props.onMentionsClick, onMentionsHover = props.onMentionsHover, _g = props.optionalMessageInputProps, optionalMessageInputProps = _g === void 0 ? {} : _g, skipMessageDataMemoization = props.skipMessageDataMemoization;
     var _h = useChatContext('Channel'), client = _h.client, customClasses = _h.customClasses, latestMessageDatesByChannels = _h.latestMessageDatesByChannels, mutes = _h.mutes, theme = _h.theme;
     var t = useTranslationContext('Channel').t;
     var _j = useChannelContainerClasses({ customClasses: customClasses }), channelClass = _j.channelClass, chatClass = _j.chatClass, chatContainerClass = _j.chatContainerClass, windowsEmojiClass = _j.windowsEmojiClass;
@@ -73,7 +73,8 @@ var ChannelInner = function (props) {
         leading: true,
         trailing: true,
     });
-    var markRead = function () {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var markRead = useCallback(throttle(function () {
         if (channel.disconnected || !(channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.read_events)) {
             return;
         }
@@ -90,8 +91,7 @@ var ChannelInner = function (props) {
         else if (originalTitle.current) {
             document.title = originalTitle.current;
         }
-    };
-    var markReadThrottled = throttle(markRead, 500, { leading: true, trailing: true });
+    }, 500, { leading: true, trailing: false }), [activeUnreadHandler, channel, channelConfig, doMarkReadRequest]);
     var handleEvent = function (event) { return __awaiter(void 0, void 0, void 0, function () {
         var mainChannelUpdated, unread, messageDate, cid, oldestID;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -119,10 +119,7 @@ var ChannelInner = function (props) {
                             mainChannelUpdated = false;
                         }
                         if (mainChannelUpdated) {
-                            if (!document.hidden) {
-                                markReadThrottled();
-                            }
-                            else if ((channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.read_events) && !channel.muteStatus().muted) {
+                            if (document.hidden && (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.read_events) && !channel.muteStatus().muted) {
                                 unread = channel.countUnread(lastRead.current);
                                 if (activeUnreadHandler) {
                                     activeUnreadHandler(unread, originalTitle.current);
@@ -170,10 +167,6 @@ var ChannelInner = function (props) {
     useLayoutEffect(function () {
         var errored = false;
         var done = false;
-        var onVisibilityChange = function () {
-            if (!document.hidden)
-                markRead();
-        };
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var members, _i, _a, member, userId, _b, user, user_id, config, e_1;
             var _c, _d, _e;
@@ -228,10 +221,9 @@ var ChannelInner = function (props) {
                              *
                              * const lastRead = channel.state.read[client.userID as string].last_read;
                              */
-                            if (channel.countUnread() > 0)
+                            if (channel.countUnread() > 0 && markReadOnMount)
                                 markRead();
                             // The more complex sync logic is done in Chat
-                            document.addEventListener('visibilitychange', onVisibilityChange);
                             client.on('connection.changed', handleEvent);
                             client.on('connection.recovered', handleEvent);
                             client.on('user.updated', handleEvent);
@@ -245,7 +237,6 @@ var ChannelInner = function (props) {
         return function () {
             if (errored || !done)
                 return;
-            document.removeEventListener('visibilitychange', onVisibilityChange);
             channel === null || channel === void 0 ? void 0 : channel.off(handleEvent);
             client.off('connection.changed', handleEvent);
             client.off('connection.recovered', handleEvent);
@@ -409,6 +400,73 @@ var ChannelInner = function (props) {
             }
         });
     }); };
+    var jumpToFirstUnreadMessage = useCallback(function (queryMessageLimit) {
+        if (queryMessageLimit === void 0) { queryMessageLimit = 100; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var readState, indexOfLastReadMessage, currentMessageSet, i, id, hasMoreMessages, e_4, firstUnreadMessage, jumpToMessageId;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!client.user)
+                            return [2 /*return*/];
+                        readState = channel.state.read[client.user.id];
+                        if (!(readState === null || readState === void 0 ? void 0 : readState.last_read_message_id)) {
+                            addNotification(t('Failed to jump to the first unread message'), 'error');
+                            return [2 /*return*/];
+                        }
+                        currentMessageSet = channel.state.messages;
+                        for (i = currentMessageSet.length - 1; i >= 0; i--) {
+                            id = currentMessageSet[i].id;
+                            if (id === readState.last_read_message_id) {
+                                indexOfLastReadMessage = i;
+                                break;
+                            }
+                        }
+                        if (!(typeof indexOfLastReadMessage === 'undefined')) return [3 /*break*/, 5];
+                        dispatch({ loadingMore: true, type: 'setLoadingMore' });
+                        hasMoreMessages = true;
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, channel.state.loadMessageIntoState(readState.last_read_message_id, undefined, queryMessageLimit)];
+                    case 2:
+                        _b.sent();
+                        /**
+                         * if the index of the last read message on the page is beyond the half of the page,
+                         * we have arrived to the oldest page of the channel
+                         */
+                        indexOfLastReadMessage = channel.state.messages.findIndex(function (message) { return message.id === readState.last_read_message_id; });
+                        hasMoreMessages = indexOfLastReadMessage >= Math.floor(queryMessageLimit / 2);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_4 = _b.sent();
+                        addNotification(t('Failed to jump to the first unread message'), 'error');
+                        loadMoreFinished(hasMoreMessages, channel.state.messages);
+                        return [2 /*return*/];
+                    case 4:
+                        loadMoreFinished(hasMoreMessages, channel.state.messages);
+                        _b.label = 5;
+                    case 5:
+                        firstUnreadMessage = channel.state.messages[indexOfLastReadMessage + 1];
+                        jumpToMessageId = (_a = firstUnreadMessage === null || firstUnreadMessage === void 0 ? void 0 : firstUnreadMessage.id) !== null && _a !== void 0 ? _a : readState.last_read_message_id;
+                        dispatch({
+                            hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
+                            highlightedMessageId: jumpToMessageId,
+                            type: 'jumpToMessageFinished',
+                        });
+                        if (clearHighlightedMessageTimeoutId.current) {
+                            clearTimeout(clearHighlightedMessageTimeoutId.current);
+                        }
+                        clearHighlightedMessageTimeoutId.current = setTimeout(function () {
+                            clearHighlightedMessageTimeoutId.current = null;
+                            dispatch({ type: 'clearHighlightedMessage' });
+                        }, 500);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }, [addNotification, channel, client, loadMoreFinished, t]);
     var deleteMessage = useCallback(function (message) { return __awaiter(void 0, void 0, void 0, function () {
         var deletedMessage, result;
         return __generator(this, function (_a) {
@@ -471,7 +529,7 @@ var ChannelInner = function (props) {
                     existingMessage = void 0;
                     for (i = channel.state.messages.length - 1; i >= 0; i--) {
                         msg = channel.state.messages[i];
-                        if (msg.id === messageData.id) {
+                        if (msg.id && msg.id === messageData.id) {
                             existingMessage = msg;
                             break;
                         }
@@ -570,7 +628,7 @@ var ChannelInner = function (props) {
     var loadMoreThread = function (limit) {
         if (limit === void 0) { limit = DEFAULT_THREAD_PAGE_SIZE; }
         return __awaiter(void 0, void 0, void 0, function () {
-            var parentId, oldMessages, oldestMessageId, queryResponse, threadHasMoreMessages, newThreadMessages, e_4;
+            var parentId, oldMessages, oldestMessageId, queryResponse, threadHasMoreMessages, newThreadMessages, e_5;
             var _a;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -600,7 +658,7 @@ var ChannelInner = function (props) {
                         loadMoreThreadFinished(threadHasMoreMessages, newThreadMessages);
                         return [3 /*break*/, 4];
                     case 3:
-                        e_4 = _b.sent();
+                        e_5 = _b.sent();
                         loadMoreThreadFinished(false, oldMessages);
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
@@ -618,11 +676,13 @@ var ChannelInner = function (props) {
         deleteMessage: deleteMessage,
         dispatch: dispatch,
         editMessage: editMessage,
+        jumpToFirstUnreadMessage: jumpToFirstUnreadMessage,
         jumpToLatestMessage: jumpToLatestMessage,
         jumpToMessage: jumpToMessage,
         loadMore: loadMore,
         loadMoreNewer: loadMoreNewer,
         loadMoreThread: loadMoreThread,
+        markRead: markRead,
         onMentionsClick: onMentionsHoverOrClick,
         onMentionsHover: onMentionsHoverOrClick,
         openThread: openThread,
@@ -641,7 +701,9 @@ var ChannelInner = function (props) {
         enrichURLForPreviewConfig === null || enrichURLForPreviewConfig === void 0 ? void 0 : enrichURLForPreviewConfig.onLinkPreviewDismissed,
         loadMore,
         loadMoreNewer,
+        markRead,
         quotedMessage,
+        jumpToFirstUnreadMessage,
         jumpToMessage,
         jumpToLatestMessage,
     ]);
@@ -690,6 +752,8 @@ var ChannelInner = function (props) {
             ThreadStart: props.ThreadStart,
             TriggerProvider: props.TriggerProvider,
             TypingIndicator: props.TypingIndicator,
+            UnreadMessagesNotification: props.UnreadMessagesNotification,
+            UnreadMessagesSeparator: props.UnreadMessagesSeparator || UnreadMessagesSeparator,
             VirtualMessage: props.VirtualMessage,
         });
     }, 

package/dist/components/ChannelPreview/ChannelPreview.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MarkChannelReadOn } from './ChannelPreviewMessenger';
 import { ChatContextValue } from '../../context/ChatContext';
 import { MessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 import type { Channel } from 'stream-chat';
@@ -16,6 +17,21 @@ export type ChannelPreviewUIComponentProps<StreamChatGenerics extends DefaultStr
     lastMessage?: StreamMessage<StreamChatGenerics>;
     /** Latest message preview to display, will be a string or JSX element supporting markdown. */
     latestMessage?: string | JSX.Element;
+    /**
+     * Configuration that determines when and whether a channel is marked read upon clicking ChannelPreview.
+     * 1. MarkChannelReadOn.never:
+     * Prevents a channel from being marked read when any ChannelPreview is clicked.
+     * 2. MarkChannelReadOn.leave:
+     * Marks active channel read before switching the active channel state to the clicked preview's channel.
+     * This means that active channel being left is marked read before navigating to another channel.
+     * 3. MarkChannelReadOn.reenter:
+     * Channel, which is re-entered by clicking the preview, is marked read.
+     * That means
+     *  1. an active channel can be marked unread, left and on return marked read.
+     *  2. a non-active channel receives a new message, is entered, left and re-entered and marked read.
+     * The default configuration is set to MarkChannelReadOn.reenter.
+     */
+    markActiveChannelReadOn?: MarkChannelReadOn;
     /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */
     messageDeliveryStatus?: MessageDeliveryStatus;
     /** Number of unread Messages */

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

@@ -1 +1 @@
-{"version":3,"file":"ChannelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,gBAAgB,EAAkB,MAAM,2BAA2B,CAAC;AAE7E,OAAO,EAAE,qBAAqB,EAA4B,MAAM,kCAAkC,CAAC;AAEnG,OAAO,KAAK,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,8BAA8B,CACxC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,mBAAmB,CAAC,kBAAkB,CAAC,GAAG;IAC5C,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,4JAA4J;IAC5J,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6MAA6M;IAC7M,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,sCAAsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5C,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C,6PAA6P;IAC7P,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClF,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC5E,2CAA2C;IAC3C,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,cAAc,0JAgF1B,CAAC"}
+{"version":3,"file":"ChannelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAA2B,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAKvF,OAAO,EAAE,gBAAgB,EAAkB,MAAM,2BAA2B,CAAC;AAE7E,OAAO,EAAE,qBAAqB,EAA4B,MAAM,kCAAkC,CAAC;AAEnG,OAAO,KAAK,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,8BAA8B,CACxC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,mBAAmB,CAAC,kBAAkB,CAAC,GAAG;IAC5C,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC;;;;;;;;;;;;;OAaG;IACH,uBAAuB,CAAC,EAAE,iBAAiB,CAAC;IAC5C,4JAA4J;IAC5J,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6MAA6M;IAC7M,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,sCAAsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5C,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C,6PAA6P;IAC7P,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClF,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC5E,2CAA2C;IAC3C,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,cAAc,0JA4F1B,CAAC"}

package/dist/components/ChannelPreview/ChannelPreview.js

@@ -31,14 +31,28 @@ export var ChannelPreview = function (props) {
         return function () { return client.off('notification.mark_read', handleEvent); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    useEffect(function () {
+        var handleEvent = function (event) {
+            var _a, _b;
+            if (channel.cid !== event.cid)
+                return;
+            if (((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) !== ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id))
+                return;
+            setUnread(channel.countUnread());
+        };
+        channel.on('notification.mark_unread', handleEvent);
+        return function () {
+            channel.off('notification.mark_unread', handleEvent);
+        };
+    }, [channel, client]);
     var refreshUnreadCount = useCallback(function () {
-        if (isActive || muted) {
+        if (muted) {
             setUnread(0);
         }
         else {
             setUnread(channel.countUnread());
         }
-    }, [channel, isActive, muted]);
+    }, [channel, muted]);
     useEffect(function () {
         refreshUnreadCount();
         var handleEvent = function (event) {

package/dist/components/ChannelPreview/ChannelPreviewMessenger.d.ts

@@ -1,5 +1,10 @@
 import type { ChannelPreviewUIComponentProps } from './ChannelPreview';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+export declare enum MarkChannelReadOn {
+    'never' = 0,
+    'leave' = 1,
+    'reenter' = 2
+}
 /**
  * Used as preview component for channel item in [ChannelList](#channellist) component.
  * Its best suited for messenger type chat.

package/dist/components/ChannelPreview/ChannelPreviewMessenger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelPreviewMessenger.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreviewMessenger.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,kBAAkB,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAwEnE;;;GAGG;AACH,eAAO,MAAM,uBAAuB,8JAES,CAAC"}
+{"version":3,"file":"ChannelPreviewMessenger.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreviewMessenger.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,kBAAkB,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,iBAAiB;IAC3B,OAAO,IAAA;IACP,OAAO,IAAA;IACP,SAAS,IAAA;CACV;AA4HD;;;GAGG;AACH,eAAO,MAAM,uBAAuB,8JAES,CAAC"}

package/dist/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -1,22 +1,82 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { Avatar as DefaultAvatar } from '../Avatar';
+import { useChatContext } from '../../context';
+export var MarkChannelReadOn;
+(function (MarkChannelReadOn) {
+    MarkChannelReadOn[MarkChannelReadOn["never"] = 0] = "never";
+    MarkChannelReadOn[MarkChannelReadOn["leave"] = 1] = "leave";
+    MarkChannelReadOn[MarkChannelReadOn["reenter"] = 2] = "reenter";
+})(MarkChannelReadOn || (MarkChannelReadOn = {}));
 var UnMemoizedChannelPreviewMessenger = function (props) {
     var _a, _b;
-    var active = props.active, _c = props.Avatar, Avatar = _c === void 0 ? DefaultAvatar : _c, channel = props.channel, _d = props.className, customClassName = _d === void 0 ? '' : _d, displayImage = props.displayImage, displayTitle = props.displayTitle, latestMessage = props.latestMessage, customOnSelectChannel = props.onSelect, setActiveChannel = props.setActiveChannel, unread = props.unread, watchers = props.watchers;
+    var active = props.active, activeChannel = props.activeChannel, _c = props.Avatar, Avatar = _c === void 0 ? DefaultAvatar : _c, channel = props.channel, _d = props.className, customClassName = _d === void 0 ? '' : _d, displayImage = props.displayImage, displayTitle = props.displayTitle, latestMessage = props.latestMessage, _e = props.markActiveChannelReadOn, markActiveChannelReadOn = _e === void 0 ? MarkChannelReadOn.reenter : _e, customOnSelectChannel = props.onSelect, setActiveChannel = props.setActiveChannel, unread = props.unread, watchers = props.watchers;
+    var client = useChatContext('ChannelPreviewMessenger').client;
     var channelPreviewButton = useRef(null);
     var avatarName = displayTitle || ((_b = (_a = channel.state.messages[channel.state.messages.length - 1]) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.id);
+    var previouslyClicked = useRef(active);
+    var handleMarkReadOnReenter = function () {
+        if (!client.user)
+            return;
+        var ownReadState = channel.state.read[client.user.id];
+        if (!previouslyClicked.current) {
+            previouslyClicked.current = true;
+        }
+        else if (!active &&
+            ((ownReadState === null || ownReadState === void 0 ? void 0 : ownReadState.first_unread_message_id) || (ownReadState === null || ownReadState === void 0 ? void 0 : ownReadState.unread_messages) > 0) &&
+            previouslyClicked.current) {
+            channel.markRead();
+        }
+    };
+    var handleMarkReadOnLeave = function () {
+        if (!(client.user && activeChannel))
+            return;
+        var ownReadState = activeChannel.state.read[client.user.id];
+        if ((ownReadState === null || ownReadState === void 0 ? void 0 : ownReadState.first_unread_message_id) || (ownReadState === null || ownReadState === void 0 ? void 0 : ownReadState.unread_messages) > 0) {
+            activeChannel.markRead();
+        }
+    };
     var onSelectChannel = function (e) {
         if (customOnSelectChannel) {
             customOnSelectChannel(e);
         }
         else if (setActiveChannel) {
+            // eslint-disable-next-line default-case
+            switch (markActiveChannelReadOn) {
+                case MarkChannelReadOn.never:
+                    break;
+                case MarkChannelReadOn.leave:
+                    handleMarkReadOnLeave();
+                    break;
+                case MarkChannelReadOn.reenter:
+                    handleMarkReadOnReenter();
+            }
             setActiveChannel(channel, watchers);
         }
         if (channelPreviewButton === null || channelPreviewButton === void 0 ? void 0 : channelPreviewButton.current) {
             channelPreviewButton.current.blur();
         }
     };
+    useEffect(function () {
+        if (markActiveChannelReadOn !== MarkChannelReadOn.reenter)
+            return;
+        var handleEvent = function (event) {
+            var _a, _b;
+            if (active)
+                return;
+            if (channel.cid !== event.cid)
+                return;
+            if (event.type === 'notification.mark_unread' && ((_a = event.user) === null || _a === void 0 ? void 0 : _a.id) !== ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id))
+                return;
+            previouslyClicked.current = false;
+        };
+        channel.on('notification.mark_unread', handleEvent);
+        channel.on('message.new', handleEvent);
+        return function () {
+            channel.off('notification.mark_unread', handleEvent);
+            channel.off('message.new', handleEvent);
+        };
+    }, [active, channel, client, markActiveChannelReadOn, previouslyClicked]);
     return (React.createElement("button", { "aria-label": "Select Channel: ".concat(displayTitle || ''), "aria-selected": active, className: clsx("str-chat__channel-preview-messenger str-chat__channel-preview", active && 'str-chat__channel-preview-messenger--active', unread && unread >= 1 && 'str-chat__channel-preview-messenger--unread', customClassName), "data-testid": 'channel-preview-button', onClick: onSelectChannel, ref: channelPreviewButton, role: 'option' },
         React.createElement("div", { className: 'str-chat__channel-preview-messenger--left' },
             React.createElement(Avatar, { image: displayImage, name: avatarName, size: 40 })),

package/dist/components/Emojis/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var icons = require('../../icons-b84cd102.js');
+var icons = require('../../icons-7ead3d97.js');
 var React = require('react');
 var Picker = require('@emoji-mart/react');
 require('react-dom');

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

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAuHnE;;;GAGG;AACH,eAAO,MAAM,OAAO,uLAkHnB,CAAC"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAsJnE;;;GAGG;AACH,eAAO,MAAM,OAAO,uLAkInB,CAAC"}

package/dist/components/Message/Message.js

@@ -1,10 +1,12 @@
 import { __assign, __rest } from "tslib";
-import React, { useCallback, useRef } from 'react';
-import { useActionHandler, useDeleteHandler, useEditHandler, useFlagHandler, useMentionsHandler, useMuteHandler, useOpenThreadHandler, usePinHandler, useReactionClick, useReactionHandler, useRetryHandler, useUserHandler, useUserRole, } from './hooks';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { useActionHandler, useDeleteHandler, useEditHandler, useFlagHandler, useMarkUnreadHandler, useMentionsHandler, useMuteHandler, useOpenThreadHandler, usePinHandler, useReactionClick, useReactionHandler, useReactionsFetcher, useRetryHandler, useUserHandler, useUserRole, } from './hooks';
 import { areMessagePropsEqual, getMessageActions, MESSAGE_ACTIONS } from './utils';
-import { MessageProvider, useChannelActionContext, useChannelStateContext, useComponentContext, } from '../../context';
+import { MessageProvider, useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
 var MessageWithContext = function (props) {
     var canPin = props.canPin, groupedByUser = props.groupedByUser, propMessage = props.Message, message = props.message, _a = props.messageActions, messageActions = _a === void 0 ? Object.keys(MESSAGE_ACTIONS) : _a, propOnUserClick = props.onUserClick, propOnUserHover = props.onUserHover, userRoles = props.userRoles;
+    var client = useChatContext('Message').client;
+    var read = useChannelStateContext('Message').read;
     var contextMessage = useComponentContext('Message').Message;
     var actionsEnabled = message.type === 'regular' && message.status === 'received';
     var MessageUIComponent = propMessage || contextMessage;
@@ -13,19 +15,40 @@ var MessageWithContext = function (props) {
         onUserClickHandler: propOnUserClick,
         onUserHoverHandler: propOnUserHover,
     }), onUserClick = _c.onUserClick, onUserHover = _c.onUserHover;
-    var canDelete = userRoles.canDelete, canEdit = userRoles.canEdit, canFlag = userRoles.canFlag, canMute = userRoles.canMute, canQuote = userRoles.canQuote, canReact = userRoles.canReact, canReply = userRoles.canReply, isMyMessage = userRoles.isMyMessage;
+    var canDelete = userRoles.canDelete, canEdit = userRoles.canEdit, canFlag = userRoles.canFlag, canMarkUnread = userRoles.canMarkUnread, canMute = userRoles.canMute, canQuote = userRoles.canQuote, canReact = userRoles.canReact, canReply = userRoles.canReply, isMyMessage = userRoles.isMyMessage;
+    var messageIsUnread = useMemo(function () {
+        var _a;
+        return !!(!isMyMessage &&
+            ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id) &&
+            read &&
+            (!read[client.user.id] ||
+                ((message === null || message === void 0 ? void 0 : message.created_at) &&
+                    new Date(message.created_at).getTime() > read[client.user.id].last_read.getTime())));
+    }, [client, isMyMessage, message.created_at, read]);
     var messageActionsHandler = useCallback(function () {
         return getMessageActions(messageActions, {
             canDelete: canDelete,
             canEdit: canEdit,
             canFlag: canFlag,
+            canMarkUnread: canMarkUnread,
             canMute: canMute,
             canPin: canPin,
             canQuote: canQuote,
             canReact: canReact,
             canReply: canReply,
         });
-    }, [messageActions, canDelete, canEdit, canFlag, canMute, canPin, canQuote, canReact, canReply]);
+    }, [
+        messageActions,
+        canDelete,
+        canEdit,
+        canFlag,
+        canMarkUnread,
+        canMute,
+        canPin,
+        canQuote,
+        canReact,
+        canReply,
+    ]);
     var canPinPropToNotPass = props.canPin, // eslint-disable-line @typescript-eslint/no-unused-vars
     messageActionsPropToNotPass = props.messageActions, // eslint-disable-line @typescript-eslint/no-unused-vars
     onlySenderCanEditPropToNotPass = props.onlySenderCanEdit, // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -33,7 +56,7 @@ var MessageWithContext = function (props) {
     onUserHoverPropToNotPass = props.onUserHover, // eslint-disable-line @typescript-eslint/no-unused-vars
     userRolesPropToNotPass = props.userRoles, // eslint-disable-line @typescript-eslint/no-unused-vars
     rest = __rest(props, ["canPin", "messageActions", "onlySenderCanEdit", "onUserClick", "onUserHover", "userRoles"]);
-    var messageContextValue = __assign(__assign({}, rest), { actionsEnabled: actionsEnabled, clearEditingState: clearEdit, editing: editing, getMessageActions: messageActionsHandler, handleEdit: setEdit, isMyMessage: function () { return isMyMessage; }, onUserClick: onUserClick, onUserHover: onUserHover, setEditingState: setEdit });
+    var messageContextValue = __assign(__assign({}, rest), { actionsEnabled: actionsEnabled, clearEditingState: clearEdit, editing: editing, getMessageActions: messageActionsHandler, handleEdit: setEdit, isMyMessage: function () { return isMyMessage; }, messageIsUnread: messageIsUnread, onUserClick: onUserClick, onUserHover: onUserHover, setEditingState: setEdit });
     return (React.createElement(MessageProvider, { value: messageContextValue },
         React.createElement(MessageUIComponent, { groupedByUser: groupedByUser })));
 };
@@ -43,7 +66,7 @@ var MemoizedMessage = React.memo(MessageWithContext, areMessagePropsEqual);
  * an individual message. The actual UI of the message is delegated via the Message prop on Channel.
  */
 export var Message = function (props) {
-    var closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, disableQuotedMessages = props.disableQuotedMessages, getDeleteMessageErrorNotification = props.getDeleteMessageErrorNotification, getFlagMessageErrorNotification = props.getFlagMessageErrorNotification, getFlagMessageSuccessNotification = props.getFlagMessageSuccessNotification, getMuteUserErrorNotification = props.getMuteUserErrorNotification, getMuteUserSuccessNotification = props.getMuteUserSuccessNotification, getPinMessageErrorNotification = props.getPinMessageErrorNotification, message = props.message, _a = props.onlySenderCanEdit, onlySenderCanEdit = _a === void 0 ? false : _a, propOnMentionsClick = props.onMentionsClick, propOnMentionsHover = props.onMentionsHover, propOpenThread = props.openThread, pinPermissions = props.pinPermissions, propRetrySendMessage = props.retrySendMessage;
+    var closeReactionSelectorOnClick = props.closeReactionSelectorOnClick, disableQuotedMessages = props.disableQuotedMessages, getDeleteMessageErrorNotification = props.getDeleteMessageErrorNotification, getFetchReactionsErrorNotification = props.getFetchReactionsErrorNotification, getFlagMessageErrorNotification = props.getFlagMessageErrorNotification, getFlagMessageSuccessNotification = props.getFlagMessageSuccessNotification, getMarkMessageUnreadErrorNotification = props.getMarkMessageUnreadErrorNotification, getMarkMessageUnreadSuccessNotification = props.getMarkMessageUnreadSuccessNotification, getMuteUserErrorNotification = props.getMuteUserErrorNotification, getMuteUserSuccessNotification = props.getMuteUserSuccessNotification, getPinMessageErrorNotification = props.getPinMessageErrorNotification, message = props.message, _a = props.onlySenderCanEdit, onlySenderCanEdit = _a === void 0 ? false : _a, propOnMentionsClick = props.onMentionsClick, propOnMentionsHover = props.onMentionsHover, propOpenThread = props.openThread, pinPermissions = props.pinPermissions, propRetrySendMessage = props.retrySendMessage;
     var addNotification = useChannelActionContext('Message').addNotification;
     var _b = useChannelStateContext('Message'), highlightedMessageId = _b.highlightedMessageId, mutes = _b.mutes;
     var reactionSelectorRef = useRef(null);
@@ -52,6 +75,10 @@ export var Message = function (props) {
     var handleReaction = useReactionHandler(message);
     var handleRetry = useRetryHandler(propRetrySendMessage);
     var userRoles = useUserRole(message, onlySenderCanEdit, disableQuotedMessages);
+    var handleFetchReactions = useReactionsFetcher(message, {
+        getErrorNotification: getFetchReactionsErrorNotification,
+        notify: addNotification,
+    });
     var handleDelete = useDeleteHandler(message, {
         getErrorNotification: getDeleteMessageErrorNotification,
         notify: addNotification,
@@ -61,6 +88,11 @@ export var Message = function (props) {
         getSuccessNotification: getFlagMessageSuccessNotification,
         notify: addNotification,
     });
+    var handleMarkUnread = useMarkUnreadHandler(message, {
+        getErrorNotification: getMarkMessageUnreadErrorNotification,
+        getSuccessNotification: getMarkMessageUnreadSuccessNotification,
+        notify: addNotification,
+    });
     var handleMute = useMuteHandler(message, {
         getErrorNotification: getMuteUserErrorNotification,
         getSuccessNotification: getMuteUserSuccessNotification,
@@ -76,5 +108,5 @@ export var Message = function (props) {
     }), canPin = _d.canPin, handlePin = _d.handlePin;
     var _e = useReactionClick(message, reactionSelectorRef, undefined, closeReactionSelectorOnClick), isReactionEnabled = _e.isReactionEnabled, onReactionListClick = _e.onReactionListClick, showDetailedReactions = _e.showDetailedReactions;
     var highlighted = highlightedMessageId === message.id;
-    return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, customMessageActions: props.customMessageActions, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFlag: handleFlag, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, isReactionEnabled: isReactionEnabled, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onReactionListClick: onReactionListClick, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionSelectorRef: reactionSelectorRef, readBy: props.readBy, renderText: props.renderText, showDetailedReactions: showDetailedReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
+    return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, customMessageActions: props.customMessageActions, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFetchReactions: handleFetchReactions, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, isReactionEnabled: isReactionEnabled, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onReactionListClick: onReactionListClick, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionSelectorRef: reactionSelectorRef, readBy: props.readBy, renderText: props.renderText, showDetailedReactions: showDetailedReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
 };

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

@@ -3,6 +3,7 @@ export * from './useDeleteHandler';
 export * from './useEditHandler';
 export * from './useFlagHandler';
 export * from './useMentionsHandler';
+export * from './useMarkUnreadHandler';
 export * from './useMuteHandler';
 export * from './useOpenThreadHandler';
 export * from './usePinHandler';
@@ -10,4 +11,5 @@ export * from './useReactionHandler';
 export * from './useRetryHandler';
 export * from './useUserHandler';
 export * from './useUserRole';
+export * from './useReactionsFetcher';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC"}