stream-chat-react 11.3.0 → 11.5.0

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/MessageText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageText.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageText.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,gBAAgB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IAEF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,OAAO,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,YAAY,CAAC,CAAC;AA0FhE,eAAO,MAAM,WAAW,uJAEkB,CAAC"}
+{"version":3,"file":"MessageText.d.ts","sourceRoot":"","sources":["../../../src/components/Message/MessageText.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,gBAAgB,CAC1B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IAEF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,OAAO,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,YAAY,CAAC,CAAC;AA2FhE,eAAO,MAAM,WAAW,uJAEkB,CAAC"}

package/dist/components/Message/MessageText.js

@@ -13,6 +13,7 @@ var UnMemoizedMessageTextComponent = function (props) {
     var message = propMessage || contextMessage;
     var hasAttachment = messageHasAttachments(message);
     var messageTextToRender = ((_b = message.i18n) === null || _b === void 0 ? void 0 : _b["".concat(userLanguage, "_text")]) || message.text;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var messageText = useMemo(function () { return renderText(messageTextToRender, message.mentioned_users); }, [
         message.mentioned_users,
         messageTextToRender,

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"}

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

@@ -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,3 +11,4 @@ export * from './useReactionHandler';
 export * from './useRetryHandler';
 export * from './useUserHandler';
 export * from './useUserRole';
+export * from './useReactionsFetcher';

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

@@ -0,0 +1,10 @@
+import type { StreamMessage } from '../../../context';
+import type { ReactEventHandler } from '../types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+export type MarkUnreadHandlerNotifications<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    getErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+    getSuccessNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+    notify?: (notificationText: string, type: 'success' | 'error') => void;
+};
+export declare const useMarkUnreadHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics> | undefined, notifications?: MarkUnreadHandlerNotifications<StreamChatGenerics>) => ReactEventHandler;
+//# sourceMappingURL=useMarkUnreadHandler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMarkUnreadHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useMarkUnreadHandler.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,MAAM,MAAM,8BAA8B,CACxC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,KAAK,MAAM,CAAC;IAC9E,sBAAsB,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,KAAK,MAAM,CAAC;IAChF,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,eAAO,MAAM,oBAAoB,qNAK9B,iBAiCF,CAAC"}

package/dist/components/Message/hooks/useMarkUnreadHandler.js

@@ -0,0 +1,45 @@
+import { __awaiter, __generator } from "tslib";
+import { validateAndGetMessage } from '../utils';
+import { useChannelStateContext, useTranslationContext } from '../../../context';
+export var useMarkUnreadHandler = function (message, notifications) {
+    if (notifications === void 0) { notifications = {}; }
+    var getErrorNotification = notifications.getErrorNotification, getSuccessNotification = notifications.getSuccessNotification, notify = notifications.notify;
+    var channel = useChannelStateContext('useMarkUnreadHandler').channel;
+    var t = useTranslationContext('useMarkUnreadHandler').t;
+    return function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var successMessage, e_1, errorMessage;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    event.preventDefault();
+                    if (!(message === null || message === void 0 ? void 0 : message.id)) {
+                        console.warn('Mark unread handler does not have access to message id');
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, channel.markUnread({ message_id: message.id })];
+                case 2:
+                    _a.sent();
+                    if (!notify)
+                        return [2 /*return*/];
+                    successMessage = getSuccessNotification && validateAndGetMessage(getSuccessNotification, [message]);
+                    if (successMessage)
+                        notify(successMessage, 'success');
+                    return [3 /*break*/, 4];
+                case 3:
+                    e_1 = _a.sent();
+                    if (!notify)
+                        return [2 /*return*/];
+                    errorMessage = getErrorNotification && validateAndGetMessage(getErrorNotification, [message]);
+                    if (getErrorNotification && !errorMessage)
+                        return [2 /*return*/];
+                    notify(errorMessage ||
+                        t('Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.'), 'error');
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+};

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

@@ -1 +1 @@
-{"version":3,"file":"useReactionHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useReactionHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAInF,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAG7F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIlD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,sBAAsB,4MACsF,CAAC;AAE1H,eAAO,MAAM,kBAAkB,gKAgFD,MAAM,UAAU,MAAM,kBAAkB,kBAmCrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,oKAIL,UAAU,cAAc,GAAG,IAAI,CAAC,sBAClC,UAAU,cAAc,GAAG,IAAI,CAAC,iCACrB,OAAO;;;;CAwFvC,CAAC"}
+{"version":3,"file":"useReactionHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useReactionHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAInF,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAG7F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIlD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,sBAAsB,4MACsF,CAAC;AAE1H,eAAO,MAAM,kBAAkB,gKAiFD,MAAM,UAAU,MAAM,kBAAkB,kBAmCrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,oKAIL,UAAU,cAAc,GAAG,IAAI,CAAC,sBAClC,UAAU,cAAc,GAAG,IAAI,CAAC,iCACrB,OAAO;;;;CAyFvC,CAAC"}

package/dist/components/Message/hooks/useReactionHandler.js

@@ -30,7 +30,9 @@ export var useReactionHandler = function (message) {
         var newOwnReactions = add
             ? __spreadArray([reaction], ((message === null || message === void 0 ? void 0 : message.own_reactions) || []), true) : (_b = message === null || message === void 0 ? void 0 : message.own_reactions) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.type !== reaction.type; });
         return __assign(__assign({}, message), { latest_reactions: newReactions || message.latest_reactions, own_reactions: newOwnReactions, reaction_counts: newReactionCounts, reaction_scores: newReactionCounts });
-    }, [client.user, client.userID]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [client.user, client.userID]);
     var createReactionPreview = function (type) {
         var _a;
         return ({
@@ -136,7 +138,9 @@ export var useReactionClick = function (message, reactionSelectorRef, messageWra
             return;
         }
         setShowDetailedReactions(false);
-    }, [setShowDetailedReactions, reactionSelectorRef]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setShowDetailedReactions, reactionSelectorRef]);
     useEffect(function () {
         var messageWrapper = messageWrapperRef === null || messageWrapperRef === void 0 ? void 0 : messageWrapperRef.current;
         if (showDetailedReactions && !hasListener.current) {

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

@@ -0,0 +1,11 @@
+import { StreamMessage } from '../../../context';
+import { DefaultStreamChatGenerics } from '../../../types/types';
+import { ReactionResponse } from 'stream-chat';
+export declare const MAX_MESSAGE_REACTIONS_TO_FETCH = 1200;
+type FetchMessageReactionsNotifications<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    getErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+    notify?: (notificationText: string, type: 'success' | 'error') => void;
+};
+export declare function useReactionsFetcher<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>, notifications?: FetchMessageReactionsNotifications<StreamChatGenerics>): () => Promise<ReactionResponse<StreamChatGenerics>[]>;
+export {};
+//# sourceMappingURL=useReactionsFetcher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useReactionsFetcher.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useReactionsFetcher.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiD,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAW,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAExD,eAAO,MAAM,8BAA8B,OAAO,CAAC;AAEnD,KAAK,kCAAkC,CACrC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,KAAK,MAAM,CAAC;IAC9E,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAEhF,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAC1C,aAAa,GAAE,kCAAkC,CAAC,kBAAkB,CAAM,yDAe3E"}

package/dist/components/Message/hooks/useReactionsFetcher.js

@@ -0,0 +1,58 @@
+import { __awaiter, __generator } from "tslib";
+import { useChannelStateContext, useTranslationContext } from '../../../context';
+export var MAX_MESSAGE_REACTIONS_TO_FETCH = 1200;
+export function useReactionsFetcher(message, notifications) {
+    var _this = this;
+    if (notifications === void 0) { notifications = {}; }
+    var channel = useChannelStateContext('useReactionFetcher').channel;
+    var t = useTranslationContext('useReactionFetcher').t;
+    var getErrorNotification = notifications.getErrorNotification, notify = notifications.notify;
+    return function () { return __awaiter(_this, void 0, void 0, function () {
+        var e_1, errorMessage;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, fetchMessageReactions(channel, message.id)];
+                case 1: return [2 /*return*/, _a.sent()];
+                case 2:
+                    e_1 = _a.sent();
+                    errorMessage = getErrorNotification === null || getErrorNotification === void 0 ? void 0 : getErrorNotification(message);
+                    notify === null || notify === void 0 ? void 0 : notify(errorMessage || t('Error fetching reactions'), 'error');
+                    throw e_1;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+}
+function fetchMessageReactions(channel, messageId) {
+    return __awaiter(this, void 0, void 0, function () {
+        var reactions, limit, offset, reactionsLimit, lastPageSize, response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    reactions = [];
+                    limit = 300;
+                    offset = 0;
+                    reactionsLimit = MAX_MESSAGE_REACTIONS_TO_FETCH;
+                    lastPageSize = limit;
+                    _a.label = 1;
+                case 1:
+                    if (!(lastPageSize === limit && reactions.length < reactionsLimit)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, channel.getReactions(messageId, {
+                            limit: limit,
+                            offset: offset,
+                        })];
+                case 2:
+                    response = _a.sent();
+                    lastPageSize = response.reactions.length;
+                    if (lastPageSize > 0) {
+                        reactions.push.apply(reactions, response.reactions);
+                    }
+                    offset += lastPageSize;
+                    return [3 /*break*/, 1];
+                case 3: return [2 /*return*/, reactions];
+            }
+        });
+    });
+}

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

@@ -4,6 +4,7 @@ export declare const useUserRole: <StreamChatGenerics extends DefaultStreamChatG
     canDelete: boolean;
     canEdit: boolean;
     canFlag: boolean;
+    canMarkUnread: boolean;
     canMute: boolean;
     canQuote: boolean;
     canReact: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"useUserRole.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useUserRole.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAG7F,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,WAAW,qJAIF,OAAO,0BACH,OAAO;;;;;;;;;;;;CA2DhC,CAAC"}
+{"version":3,"file":"useUserRole.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/useUserRole.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAG7F,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,WAAW,qJAIF,OAAO,0BACH,OAAO;;;;;;;;;;;;;CA6DhC,CAAC"}

package/dist/components/Message/hooks/useUserRole.js

@@ -29,6 +29,7 @@ export var useUserRole = function (message, onlySenderCanEdit, disableQuotedMess
     var canDelete = channelCapabilities['delete-any-message'] ||
         (isMyMessage && channelCapabilities['delete-own-message']);
     var canFlag = !isMyMessage && channelCapabilities['flag-message'];
+    var canMarkUnread = channelCapabilities['read-events'];
     var canMute = !isMyMessage && channelCapabilities['mute-channel'];
     var canQuote = !disableQuotedMessages && channelCapabilities['quote-message'];
     var canReact = channelCapabilities['send-reaction'];
@@ -37,6 +38,7 @@ export var useUserRole = function (message, onlySenderCanEdit, disableQuotedMess
         canDelete: canDelete,
         canEdit: canEdit,
         canFlag: canFlag,
+        canMarkUnread: canMarkUnread,
         canMute: canMute,
         canQuote: canQuote,
         canReact: canReact,

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

@@ -33,10 +33,16 @@ export type MessageProps<StreamChatGenerics extends DefaultStreamChatGenerics =
     formatDate?: (date: Date) => string;
     /** Function that returns the notification text to be displayed when a delete message request fails */
     getDeleteMessageErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+    /** Function that returns the notification text to be displayed when loading message reactions fails */
+    getFetchReactionsErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
     /** Function that returns the notification text to be displayed when a flag message request fails */
     getFlagMessageErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
     /** Function that returns the notification text to be displayed when a flag message request succeeds */
     getFlagMessageSuccessNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+    /** Function that returns the notification text to be displayed when mark channel messages unread request fails */
+    getMarkMessageUnreadErrorNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
+    /** Function that returns the notification text to be displayed when mark channel messages unread request succeeds */
+    getMarkMessageUnreadSuccessNotification?: (message: StreamMessage<StreamChatGenerics>) => string;
     /** Function that returns the notification text to be displayed when a mute user request fails */
     getMuteUserErrorNotification?: (user: UserResponse<StreamChatGenerics>) => string;
     /** Function that returns the notification text to be displayed when a mute user request succeeds */
@@ -73,7 +79,7 @@ export type MessageProps<StreamChatGenerics extends DefaultStreamChatGenerics =
     openThread?: ChannelActionContextValue<StreamChatGenerics>['openThread'];
     /** @deprecated in favor of `channelCapabilities - The user roles allowed to pin messages in various channel types */
     pinPermissions?: PinPermissions;
-    /** A list of users that have read this Message */
+    /** A list of users that have read this Message if the message is the last one and was posted by my user */
     readBy?: UserResponse<StreamChatGenerics>[];
     /** Custom function to render message text content, defaults to the renderText function: [utils](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.ts) */
     renderText?: (text?: string, mentioned_users?: UserResponse<StreamChatGenerics>[], options?: RenderTextOptions) => JSX.Element | null;

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

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

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

@@ -17,6 +17,7 @@ export declare const MESSAGE_ACTIONS: {
     delete: string;
     edit: string;
     flag: string;
+    markUnread: string;
     mute: string;
     pin: string;
     quote: string;
@@ -29,13 +30,15 @@ export type Capabilities = {
     canDelete?: boolean;
     canEdit?: boolean;
     canFlag?: boolean;
+    canMarkUnread?: boolean;
     canMute?: boolean;
     canPin?: boolean;
     canQuote?: boolean;
     canReact?: boolean;
     canReply?: boolean;
 };
-export declare const getMessageActions: (actions: MessageActionsArray | boolean, { canDelete, canEdit, canFlag, canMute, canPin, canQuote, canReact, canReply }: Capabilities) => MessageActionsArray<string>;
+export declare const getMessageActions: (actions: MessageActionsArray | boolean, { canDelete, canEdit, canFlag, canMarkUnread, canMute, canPin, canQuote, canReact, canReply, }: Capabilities) => MessageActionsArray<string>;
+export declare const ACTIONS_NOT_WORKING_IN_THREAD: string[];
 export declare const showMessageActionsBox: (actions: MessageActionsArray<string>, inThread?: boolean | undefined) => boolean;
 export declare const areMessagePropsEqual: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(prevProps: MessageProps<StreamChatGenerics, import("../../types/types").CustomTrigger> & {
     mutes?: Mute<StreamChatGenerics>[] | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Message/utils.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,qBAAqB,8CACV,OAAO,2BAiB9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,2LAUvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;CAS3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAChE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,CAAC,CAC9E,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,cAwDnC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,YACnB,mBAAmB,GAAG,OAAO,kFAC0C,YAAY,gCA+C7F,CAAC;AAIF,eAAO,MAAM,qBAAqB,oDAErB,OAAO,GAAG,SAAS,YAsB/B,CAAC;AAmBF,eAAO,MAAM,oBAAoB;;;;;;aAsChC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;aA+BlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,wJAIqC,CAAC;AAEtE,eAAO,MAAM,qBAAqB,wJAIyB,CAAC;AAE5D,eAAO,MAAM,SAAS,yMASrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,yMASlC,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,CAAC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAC/E,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,GACrC,MAAM,CAAC;CACX;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,qBAAsD,CAAC;AAEvF,eAAO,MAAM,oBAAoB,mIAI5B,SAAS,iEAEW,qBAAqB,WAiD7C,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,YAOzC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Message/utils.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;GAGG;AACH,eAAO,MAAM,qBAAqB,8CACV,OAAO,2BAiB9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,2LAUvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;CAU3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAChE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,CAAC,CAC9E,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,cAwDnC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,YACnB,mBAAmB,GAAG,OAAO,kGAWnC,YAAY,gCAmDhB,CAAC;AAEF,eAAO,MAAM,6BAA6B,UAKzC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oDAErB,OAAO,GAAG,SAAS,YAsB/B,CAAC;AAmBF,eAAO,MAAM,oBAAoB;;;;;;aAsChC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;aA+BlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,wJAI6C,CAAC;AAE9E,eAAO,MAAM,qBAAqB,wJAIyB,CAAC;AAE5D,eAAO,MAAM,SAAS,yMASrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,yMASlC,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,CAAC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,EAC/E,IAAI,EAAE,YAAY,CAAC,kBAAkB,CAAC,GACrC,MAAM,CAAC;CACX;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,qBAAsD,CAAC;AAEvF,eAAO,MAAM,oBAAoB,mIAI5B,SAAS,iEAEW,qBAAqB,WAiD7C,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,YAOzC,CAAC"}

package/dist/components/Message/utils.js

@@ -32,6 +32,7 @@ export var MESSAGE_ACTIONS = {
     delete: 'delete',
     edit: 'edit',
     flag: 'flag',
+    markUnread: 'markUnread',
     mute: 'mute',
     pin: 'pin',
     quote: 'quote',
@@ -97,7 +98,7 @@ export var defaultPinPermissions = {
     },
 };
 export var getMessageActions = function (actions, _a) {
-    var canDelete = _a.canDelete, canEdit = _a.canEdit, canFlag = _a.canFlag, canMute = _a.canMute, canPin = _a.canPin, canQuote = _a.canQuote, canReact = _a.canReact, canReply = _a.canReply;
+    var canDelete = _a.canDelete, canEdit = _a.canEdit, canFlag = _a.canFlag, canMarkUnread = _a.canMarkUnread, canMute = _a.canMute, canPin = _a.canPin, canQuote = _a.canQuote, canReact = _a.canReact, canReply = _a.canReply;
     var messageActionsAfterPermission = [];
     var messageActions = [];
     if (actions && typeof actions === 'boolean') {
@@ -119,6 +120,9 @@ export var getMessageActions = function (actions, _a) {
     if (canFlag && messageActions.indexOf(MESSAGE_ACTIONS.flag) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.flag);
     }
+    if (canMarkUnread && messageActions.indexOf(MESSAGE_ACTIONS.markUnread) > -1) {
+        messageActionsAfterPermission.push(MESSAGE_ACTIONS.markUnread);
+    }
     if (canMute && messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.mute);
     }
@@ -136,7 +140,12 @@ export var getMessageActions = function (actions, _a) {
     }
     return messageActionsAfterPermission;
 };
-var ACTIONS_NOT_WORKING_IN_THREAD = ['pin', 'react', 'reply'];
+export var ACTIONS_NOT_WORKING_IN_THREAD = [
+    MESSAGE_ACTIONS.pin,
+    MESSAGE_ACTIONS.react,
+    MESSAGE_ACTIONS.reply,
+    MESSAGE_ACTIONS.markUnread,
+];
 export var showMessageActionsBox = function (actions, inThread) {
     if (actions.length === 0) {
         return false;
@@ -213,7 +222,7 @@ export var areMessageUIPropsEqual = function (prevProps, nextProps) {
     }
     return areMessagesEqual(prevMessage, nextMessage);
 };
-export var messageHasReactions = function (message) { return !!(message === null || message === void 0 ? void 0 : message.latest_reactions) && !!message.latest_reactions.length; };
+export var messageHasReactions = function (message) { var _a; return Object.values((_a = message === null || message === void 0 ? void 0 : message.reaction_counts) !== null && _a !== void 0 ? _a : {}).some(function (count) { return count > 0; }); };
 export var messageHasAttachments = function (message) { return !!(message === null || message === void 0 ? void 0 : message.attachments) && !!message.attachments.length; };
 export var getImages = function (message) {
     if (!(message === null || message === void 0 ? void 0 : message.attachments)) {

package/dist/components/MessageActions/MessageActions.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MessageContextValue } from '../../context/MessageContext';
 import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
-type MessageContextPropsToPick = 'getMessageActions' | 'handleDelete' | 'handleFlag' | 'handleMute' | 'handlePin' | 'message';
+type MessageContextPropsToPick = 'getMessageActions' | 'handleDelete' | 'handleFlag' | 'handleMarkUnread' | 'handleMute' | 'handlePin' | 'message';
 export type MessageActionsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, MessageContextPropsToPick>> & {
     ActionsIcon?: React.ComponentType<IconProps>;
     customWrapperClass?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"MessageActions.d.ts","sourceRoot":"","sources":["../../../src/components/MessageActions/MessageActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAC;AAQnF,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAEtF,OAAO,KAAK,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9E,KAAK,yBAAyB,GAC1B,mBAAmB,GACnB,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,SAAS,CAAC;AAEd,MAAM,MAAM,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,yBAAyB,CAAC,CAAC,GAAG;IAEtF,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAE7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAEpD,IAAI,CAAC,EAAE,MAAM,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,cAAc,0JAyG1B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC"}
+{"version":3,"file":"MessageActions.d.ts","sourceRoot":"","sources":["../../../src/components/MessageActions/MessageActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,mBAAmB,EAAqB,MAAM,8BAA8B,CAAC;AAEtF,OAAO,KAAK,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9E,KAAK,yBAAyB,GAC1B,mBAAmB,GACnB,cAAc,GACd,YAAY,GACZ,kBAAkB,GAClB,YAAY,GACZ,WAAW,GACX,SAAS,CAAC;AAEd,MAAM,MAAM,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,yBAAyB,CAAC,CAAC,GAAG;IAEtF,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAE7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAEpD,IAAI,CAAC,EAAE,MAAM,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,cAAc,0JA0H1B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC"}

package/dist/components/MessageActions/MessageActions.js

@@ -1,20 +1,23 @@
 import { __assign } from "tslib";
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState, } from 'react';
 import { MessageActionsBox } from './MessageActionsBox';
 import { ActionsIcon as DefaultActionsIcon } from '../Message/icons';
 import { isUserMuted } from '../Message/utils';
 import { useChatContext } from '../../context/ChatContext';
 import { useMessageContext } from '../../context/MessageContext';
+import { useMessageActionsBoxPopper } from './hooks';
 export var MessageActions = function (props) {
-    var _a = props.ActionsIcon, ActionsIcon = _a === void 0 ? DefaultActionsIcon : _a, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propGetMessageActions = props.getMessageActions, propHandleDelete = props.handleDelete, propHandleFlag = props.handleFlag, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
+    var _a = props.ActionsIcon, ActionsIcon = _a === void 0 ? DefaultActionsIcon : _a, _b = props.customWrapperClass, customWrapperClass = _b === void 0 ? '' : _b, propGetMessageActions = props.getMessageActions, propHandleDelete = props.handleDelete, propHandleFlag = props.handleFlag, propHandleMarkUnread = props.handleMarkUnread, propHandleMute = props.handleMute, propHandlePin = props.handlePin, inline = props.inline, propMessage = props.message, messageWrapperRef = props.messageWrapperRef, mine = props.mine;
     var mutes = useChatContext('MessageActions').mutes;
-    var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
+    var _c = useMessageContext('MessageActions'), customMessageActions = _c.customMessageActions, contextGetMessageActions = _c.getMessageActions, contextHandleDelete = _c.handleDelete, contextHandleFlag = _c.handleFlag, contextHandleMarkUnread = _c.handleMarkUnread, contextHandleMute = _c.handleMute, contextHandlePin = _c.handlePin, isMyMessage = _c.isMyMessage, contextMessage = _c.message, setEditingState = _c.setEditingState;
     var getMessageActions = propGetMessageActions || contextGetMessageActions;
     var handleDelete = propHandleDelete || contextHandleDelete;
     var handleFlag = propHandleFlag || contextHandleFlag;
+    var handleMarkUnread = propHandleMarkUnread || contextHandleMarkUnread;
     var handleMute = propHandleMute || contextHandleMute;
     var handlePin = propHandlePin || contextHandlePin;
     var message = propMessage || contextMessage;
+    var isMine = mine ? mine() : isMyMessage();
     var _d = useState(false), actionsBoxOpen = _d[0], setActionsBoxOpen = _d[1];
     var isMuted = useCallback(function () { return isUserMuted(message, mutes); }, [message, mutes]);
     var hideOptions = useCallback(function (event) {
@@ -45,11 +48,17 @@ export var MessageActions = function (props) {
             document.removeEventListener('keyup', hideOptions);
         };
     }, [actionsBoxOpen, hideOptions]);
+    var actionsBoxButtonRef = useRef(null);
+    var _e = useMessageActionsBoxPopper({
+        open: actionsBoxOpen,
+        placement: isMine ? 'top-end' : 'top-start',
+        referenceElement: actionsBoxButtonRef.current,
+    }), attributes = _e.attributes, popperElementRef = _e.popperElementRef, styles = _e.styles;
     if (!messageActions.length && !customMessageActions)
         return null;
     return (React.createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, setActionsBoxOpen: setActionsBoxOpen },
-        React.createElement(MessageActionsBox, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: mine ? mine() : isMyMessage(), open: actionsBoxOpen }),
-        React.createElement("button", { "aria-expanded": actionsBoxOpen, "aria-haspopup": 'true', "aria-label": 'Open Message Actions Menu', className: 'str-chat__message-actions-box-button' },
+        React.createElement(MessageActionsBox, __assign({}, attributes.popper, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: isMine, open: actionsBoxOpen, ref: popperElementRef, style: styles.popper })),
+        React.createElement("button", { "aria-expanded": actionsBoxOpen, "aria-haspopup": 'true', "aria-label": 'Open Message Actions Menu', className: 'str-chat__message-actions-box-button', ref: actionsBoxButtonRef },
             React.createElement(ActionsIcon, { className: 'str-chat__message-action-icon' }))));
 };
 var MessageActionsWrapper = function (props) {

package/dist/components/MessageActions/MessageActionsBox.d.ts

@@ -1,14 +1,15 @@
+import React, { ComponentProps } from 'react';
 import { MessageContextValue } from '../../context';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-type PropsDrilledToMessageActionsBox = 'getMessageActions' | 'handleDelete' | 'handleEdit' | 'handleFlag' | 'handleMute' | 'handlePin';
+type PropsDrilledToMessageActionsBox = 'getMessageActions' | 'handleDelete' | 'handleEdit' | 'handleMarkUnread' | 'handleFlag' | 'handleMute' | 'handlePin';
 export type MessageActionsBoxProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageContextValue<StreamChatGenerics>, PropsDrilledToMessageActionsBox> & {
     isUserMuted: () => boolean;
     mine: boolean;
     open: boolean;
-};
+} & ComponentProps<'div'>;
 /**
  * A popup box that displays the available actions on a message, such as edit, delete, pin, etc.
  */
-export declare const MessageActionsBox: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageActionsBoxProps<StreamChatGenerics>) => JSX.Element;
+export declare const MessageActionsBox: React.ForwardRefExoticComponent<Pick<MessageActionsBoxProps<DefaultStreamChatGenerics>, "open" | "key" | PropsDrilledToMessageActionsBox | "isUserMuted" | "mine" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement | null>>;
 export {};
 //# sourceMappingURL=MessageActionsBox.d.ts.map

package/dist/components/MessageActions/MessageActionsBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageActionsBox.d.ts","sourceRoot":"","sources":["../../../src/components/MessageActions/MessageActionsBox.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,mBAAmB,EAKpB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAInE,KAAK,+BAA+B,GAChC,mBAAmB,GACnB,cAAc,GACd,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,CAAC;AAEhB,MAAM,MAAM,sBAAsB,CAChC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,+BAA+B,CAAC,GAAG;IACnF,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AA+IF;;GAEG;AACH,eAAO,MAAM,iBAAiB,sJAES,CAAC"}
+{"version":3,"file":"MessageActionsBox.d.ts","sourceRoot":"","sources":["../../../src/components/MessageActions/MessageActionsBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK9C,OAAO,EACL,mBAAmB,EAKpB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAInE,KAAK,+BAA+B,GAChC,mBAAmB,GACnB,cAAc,GACd,YAAY,GACZ,kBAAkB,GAClB,YAAY,GACZ,YAAY,GACZ,WAAW,CAAC;AAEhB,MAAM,MAAM,sBAAsB,CAChC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,+BAA+B,CAAC,GAAG;IACnF,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAmI1B;;GAEG;AACH,eAAO,MAAM,iBAAiB,+PAES,CAAC"}