stream-chat-react 13.8.1 → 13.9.0

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

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { ChannelQueryOptions, EventAPIResponse, LocalMessage, Message, MessageResponse, SendMessageOptions, Channel as StreamChannel, StreamChat, UpdateMessageOptions } from 'stream-chat';
+import type { ChannelQueryOptions, DeleteMessageOptions, EventAPIResponse, LocalMessage, Message, MessageResponse, SendMessageOptions, Channel as StreamChannel, StreamChat, UpdateMessageOptions } from 'stream-chat';
 import type { OnMentionAction } from './hooks/useMentionsHandlers';
 import type { LoadingErrorIndicatorProps } from '../Loading';
 import type { ComponentContextValue } from '../../context';
@@ -19,7 +19,7 @@ export type ChannelProps = ChannelPropsForwardedToComponentContext & {
      */
     channelQueryOptions?: ChannelQueryOptions;
     /** Custom action handler to override the default `client.deleteMessage(message.id)` function */
-    doDeleteMessageRequest?: (message: LocalMessage) => Promise<MessageResponse>;
+    doDeleteMessageRequest?: (message: LocalMessage, options?: DeleteMessageOptions) => Promise<MessageResponse>;
     /** Custom action handler to override the default `channel.markRead` request function (advanced usage only) */
     doMarkReadRequest?: (channel: StreamChannel, setChannelUnreadUiState?: (state: ChannelUnreadUiState) => void) => Promise<EventAPIResponse> | void;
     /** Custom action handler to override the default `channel.sendMessage` request function (advanced usage only) */

package/dist/components/Channel/Channel.js

@@ -500,16 +500,16 @@ const ChannelInner = (props) => {
         t,
         channelUnreadUiState,
     ]);
-    const deleteMessage = useCallback(async (message) => {
+    const deleteMessage = useCallback(async (message, options) => {
         if (!message?.id) {
             throw new Error('Cannot delete a message - missing message ID.');
         }
         let deletedMessage;
         if (doDeleteMessageRequest) {
-            deletedMessage = await doDeleteMessageRequest(message);
+            deletedMessage = await doDeleteMessageRequest(message, options);
         }
         else {
-            const result = await client.deleteMessage(message.id);
+            const result = await client.deleteMessage(message.id, options);
             deletedMessage = result.message;
         }
         return deletedMessage;

package/dist/components/Channel/hooks/useCreateChannelStateContext.js

@@ -16,10 +16,12 @@ export const useCreateChannelStateContext = (value) => {
     channelCapabilitiesArray.forEach((capability) => {
         channelCapabilities[capability] = true;
     });
+    // FIXME: this is crazy - I could not find out why the messages were not getting updated when only message properties that are not part
+    // of this serialization has been changed. A great example of memoization gone wrong.
     const memoizedMessageData = skipMessageDataMemoization
         ? messages
         : messages
-            .map(({ deleted_at, latest_reactions, pinned, reply_count, status, updated_at, user, }) => `${deleted_at}${latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''}${pinned}${reply_count}${status}${updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
+            .map(({ deleted_at, latest_reactions, pinned, reply_count, status, type, updated_at, user, }) => `${type}${deleted_at}${latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''}${pinned}${reply_count}${status}${updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
             ? updated_at.toISOString()
             : updated_at || ''}${user?.updated_at}`)
             .join();

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

@@ -1,5 +1,6 @@
 import type { Channel, LocalMessage } from 'stream-chat';
 export declare enum MessageDeliveryStatus {
+    SENT = "sent",
     DELIVERED = "delivered",
     READ = "read"
 }

package/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.js

@@ -2,53 +2,65 @@ import { useCallback, useEffect, useState } from 'react';
 import { useChatContext } from '../../../context';
 export var MessageDeliveryStatus;
 (function (MessageDeliveryStatus) {
+    MessageDeliveryStatus["SENT"] = "sent";
     MessageDeliveryStatus["DELIVERED"] = "delivered";
     MessageDeliveryStatus["READ"] = "read";
 })(MessageDeliveryStatus || (MessageDeliveryStatus = {}));
 export const useMessageDeliveryStatus = ({ channel, lastMessage, }) => {
     const { client } = useChatContext();
     const [messageDeliveryStatus, setMessageDeliveryStatus] = useState();
-    const isOwnMessage = useCallback((message) => client.user && message?.user?.id === client.user.id, [client]);
+    const isOwnMessage = useCallback((message) => client.user && message && message.user?.id === client.user.id, [client]);
     useEffect(() => {
+        // empty channel
+        if (!lastMessage) {
+            setMessageDeliveryStatus(undefined);
+        }
         const lastMessageIsOwn = isOwnMessage(lastMessage);
         if (!lastMessage?.created_at || !lastMessageIsOwn)
             return;
-        const lastMessageCreatedAtDate = typeof lastMessage.created_at === 'string'
-            ? new Date(lastMessage.created_at)
-            : lastMessage.created_at;
-        const channelReadByOthersAfterLastMessageUpdate = Object.values(channel.state.read).some(({ last_read: channelLastMarkedReadDate, user }) => {
-            const ignoreOwnReadStatus = client.user && user.id !== client.user.id;
-            return ignoreOwnReadStatus && lastMessageCreatedAtDate < channelLastMarkedReadDate;
-        });
-        setMessageDeliveryStatus(channelReadByOthersAfterLastMessageUpdate
+        const msgRef = {
+            msgId: lastMessage.id,
+            timestampMs: lastMessage.created_at.getTime(),
+        };
+        setMessageDeliveryStatus(channel.messageReceiptsTracker.readersForMessage(msgRef).length > 0
             ? MessageDeliveryStatus.READ
-            : MessageDeliveryStatus.DELIVERED);
-    }, [channel.state.read, client, isOwnMessage, lastMessage]);
+            : channel.messageReceiptsTracker.deliveredForMessage(msgRef).length > 0
+                ? MessageDeliveryStatus.DELIVERED
+                : MessageDeliveryStatus.SENT);
+    }, [channel, isOwnMessage, lastMessage]);
     useEffect(() => {
         const handleMessageNew = (event) => {
             // the last message is not mine, so do not show the delivery status
             if (!isOwnMessage(event.message)) {
                 return setMessageDeliveryStatus(undefined);
             }
-            return setMessageDeliveryStatus(MessageDeliveryStatus.DELIVERED);
+            return setMessageDeliveryStatus(MessageDeliveryStatus.SENT);
         };
         channel.on('message.new', handleMessageNew);
         return () => {
             channel.off('message.new', handleMessageNew);
         };
-    }, [channel, client, isOwnMessage]);
+    }, [channel, isOwnMessage]);
     useEffect(() => {
         if (!isOwnMessage(lastMessage))
             return;
+        const handleMessageDelivered = (event) => {
+            if (event.user?.id !== client.user?.id &&
+                lastMessage &&
+                lastMessage.id === event.last_delivered_message_id)
+                setMessageDeliveryStatus(MessageDeliveryStatus.DELIVERED);
+        };
         const handleMarkRead = (event) => {
             if (event.user?.id !== client.user?.id)
                 setMessageDeliveryStatus(MessageDeliveryStatus.READ);
         };
+        channel.on('message.delivered', handleMessageDelivered);
         channel.on('message.read', handleMarkRead);
         return () => {
+            channel.off('message.delivered', handleMessageDelivered);
             channel.off('message.read', handleMarkRead);
         };
-    }, [channel, client, lastMessage, isOwnMessage]);
+    }, [channel, client, isOwnMessage, lastMessage]);
     return {
         messageDeliveryStatus,
     };

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.8.1";
+        const version = "13.9.0";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/Message/Message.js

@@ -116,5 +116,5 @@ export const Message = (props) => {
         notify: addNotification,
     });
     const highlighted = highlightedMessageId === message.id;
-    return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, closeReactionSelectorOnClick: closeReactionSelectorOnClick, 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, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionDetailsSort: reactionDetailsSort, readBy: props.readBy, renderText: props.renderText, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
+    return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, deliveredTo: props.deliveredTo, 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, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionDetailsSort: reactionDetailsSort, readBy: props.readBy, renderText: props.renderText, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
 };

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

@@ -6,6 +6,7 @@ export type MessageStatusProps = {
     MessageDeliveredStatus?: React.ComponentType;
     MessageReadStatus?: React.ComponentType;
     MessageSendingStatus?: React.ComponentType;
+    MessageSentStatus?: React.ComponentType;
     messageType?: string;
     tooltipUserNameMapper?: TooltipUsernameMapper;
 };

package/dist/components/Message/MessageStatus.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { MessageDeliveredIcon } from './icons';
+import { MessageDeliveredIcon, MessageSentIcon } from './icons';
 import { getReadByTooltipText, mapToUserNameOrId } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { LoadingIndicator } from '../Loading';
@@ -11,40 +11,50 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 const UnMemoizedMessageStatus = (props) => {
-    const { Avatar: propAvatar, MessageDeliveredStatus, MessageReadStatus, MessageSendingStatus, messageType = 'simple', tooltipUserNameMapper = mapToUserNameOrId, } = props;
+    const { Avatar: propAvatar, MessageDeliveredStatus, MessageReadStatus, MessageSendingStatus, MessageSentStatus, messageType = 'simple', tooltipUserNameMapper = mapToUserNameOrId, } = props;
     const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
     const { client } = useChatContext('MessageStatus');
     const { Avatar: contextAvatar } = useComponentContext('MessageStatus');
-    const { isMyMessage, lastReceivedId, message, readBy, threadList } = useMessageContext('MessageStatus');
+    const { deliveredTo, isMyMessage, message, readBy, threadList } = useMessageContext('MessageStatus');
     const { t } = useTranslationContext('MessageStatus');
     const [referenceElement, setReferenceElement] = useState(null);
     const Avatar = propAvatar || contextAvatar || DefaultAvatar;
     if (!isMyMessage() || message.type === 'error')
         return null;
     const justReadByMe = readBy?.length === 1 && readBy[0].id === client.user?.id;
-    const rootClassName = `str-chat__message-${messageType}-status str-chat__message-status`;
+    const deliveredOnlyToMe = deliveredTo?.length === 1 && deliveredTo[0].id === client.user?.id;
     const sending = message.status === 'sending';
-    const delivered = message.status === 'received' && message.id === lastReceivedId && !threadList;
-    const deliveredAndRead = !!(readBy?.length && !threadList && !justReadByMe);
-    const readersWithoutOwnUser = deliveredAndRead
+    const read = !!(readBy?.length && !justReadByMe && !threadList);
+    const delivered = !!(deliveredTo?.length && !deliveredOnlyToMe && !read && !threadList);
+    const sent = message.status === 'received' && !delivered && !read && !threadList;
+    const readersWithoutOwnUser = read
         ? readBy.filter((item) => item.id !== client.user?.id)
         : [];
     const [lastReadUser] = readersWithoutOwnUser;
-    return (React.createElement("span", { className: rootClassName, "data-testid": clsx({
-            'message-status-read-by': deliveredAndRead,
-            'message-status-received': delivered && !deliveredAndRead,
+    return (React.createElement("span", { className: clsx(`str-chat__message-${messageType}-status str-chat__message-status`, {
+            'str-chat__message-status-delivered': delivered,
+            'str-chat__message-status-read-by': read,
+            'str-chat__message-status-sending': sending,
+            'str-chat__message-status-sent': sent,
+        }), "data-testid": clsx({
+            'message-status-delivered': delivered,
+            'message-status-read-by': read,
             'message-status-sending': sending,
+            'message-status-sent': sent,
         }), onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
         sending &&
             (MessageSendingStatus ? (React.createElement(MessageSendingStatus, null)) : (React.createElement(React.Fragment, null,
                 React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sending...')),
                 React.createElement(LoadingIndicator, null)))),
+        sent &&
+            (MessageSentStatus ? (React.createElement(MessageSentStatus, null)) : (React.createElement(React.Fragment, null,
+                React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Sent')),
+                React.createElement(MessageSentIcon, null)))),
         delivered &&
-            !deliveredAndRead &&
             (MessageDeliveredStatus ? (React.createElement(MessageDeliveredStatus, null)) : (React.createElement(React.Fragment, null,
                 React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, t('Delivered')),
                 React.createElement(MessageDeliveredIcon, null)))),
-        deliveredAndRead &&
+        read &&
             (MessageReadStatus ? (React.createElement(MessageReadStatus, null)) : (React.createElement(React.Fragment, null,
                 React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)),
                 React.createElement(Avatar, { className: 'str-chat__avatar--message-status', image: lastReadUser.image, name: lastReadUser.name || lastReadUser.id, user: lastReadUser }),

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

@@ -7,13 +7,13 @@ export const useDeleteHandler = (message, notifications = {}) => {
     const { deleteMessage, updateMessage } = useChannelActionContext('useDeleteHandler');
     const { client } = useChatContext('useDeleteHandler');
     const { t } = useTranslationContext('useDeleteHandler');
-    return async (event) => {
+    return async (event, options) => {
         event.preventDefault();
         if (!message?.id || !client || !updateMessage) {
             return;
         }
         try {
-            const deletedMessage = await deleteMessage(message);
+            const deletedMessage = await deleteMessage(message, options);
             updateMessage(deletedMessage);
         }
         catch (e) {

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

@@ -6,5 +6,6 @@ export declare const ReactionIcon: ({ className }: IconProps) => React.JSX.Eleme
 export declare const ThreadIcon: ({ className }: IconProps) => React.JSX.Element;
 export declare const PinIcon: () => React.JSX.Element;
 export declare const PinIndicator: ({ message, t }: PinIndicatorProps) => React.JSX.Element | null;
+export declare const MessageSentIcon: () => React.JSX.Element;
 export declare const MessageDeliveredIcon: () => React.JSX.Element;
 export declare const MessageErrorIcon: () => React.JSX.Element;

package/dist/components/Message/icons.js

@@ -23,8 +23,12 @@ export const PinIndicator = ({ message, t }) => {
             ? `${t('Pinned by')} ${message.pinned_by?.name || message.pinned_by?.id}`
             : t('Message pinned'))));
 };
-export const MessageDeliveredIcon = () => (React.createElement("svg", { "data-testid": 'delivered-icon', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-    React.createElement("path", { clipRule: 'evenodd', d: 'M8.9999 16.2L4.7999 12L3.3999 13.4L8.9999 19L20.9999 6.99998L19.5999 5.59998L8.9999 16.2Z', fill: 'black', fillRule: 'evenodd' })));
+export const MessageSentIcon = () => (React.createElement("svg", { "data-testid": 'message-sent-icon', fill: 'currentColor', viewBox: '0 0 10 8', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { clipRule: 'evenodd', d: 'M9.47116 1.80482C9.73151 1.54447 9.73151 1.12236 9.47116 0.862011C9.21081 0.601661 8.7887 0.601661 8.52835 0.862011L3.66646 5.7239L1.47108 3.52851C1.21073 3.26816 0.788619 3.26816 0.52827 3.52851C0.26792 3.78886 0.26792 4.21097 0.52827 4.47132L3.18877 7.13182C3.19083 7.13394 3.19292 7.13605 3.19502 7.13815C3.45537 7.3985 3.87748 7.3985 4.13783 7.13815L9.47116 1.80482Z', fillRule: 'evenodd' })));
+export const MessageDeliveredIcon = () => (React.createElement("svg", { "data-testid": 'delivered-icon', fill: 'currentColor', viewBox: '0 0 14 8', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { clipRule: 'evenodd', d: 'M9.50041 0.862011C9.76149 1.12236 9.76149 1.54447 9.50041 1.80482L6.63046 4.66681L7.69051 5.72392L12.566 0.862011C12.827 0.601661 13.2503 0.601661 13.5114 0.862011C13.7725 1.12236 13.7725 1.54447 13.5114 1.80482L8.16321 7.13815C7.90214 7.3985 7.47885 7.3985 7.21778 7.13815C7.2164 7.13678 7.21502 7.13539 7.21366 7.13401L5.68502 5.60962L4.15223 7.13815C3.89115 7.3985 3.46787 7.3985 3.20679 7.13815L3.19746 7.12866L0.53272 4.47132C0.271645 4.21097 0.271645 3.78886 0.53272 3.52851C0.793794 3.26816 1.21708 3.26816 1.47815 3.52851L3.6796 5.72385L5.20067 4.207L5.21216 4.19526L5.22393 4.1838L8.55498 0.862011C8.81605 0.601661 9.23934 0.601661 9.50041 0.862011Z', 
+        // fill='#005DFF'
+        fillRule: 'evenodd' })));
 export const MessageErrorIcon = () => (React.createElement("div", { className: 'str-chat__message-error-icon' },
     React.createElement("svg", { "data-testid": 'error', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
         React.createElement("path", { d: 'M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z', fill: 'black', id: 'background' }),

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

@@ -23,6 +23,8 @@ export type MessageProps = {
     closeReactionSelectorOnClick?: boolean;
     /** Object containing custom message actions and function handlers */
     customMessageActions?: MessageContextValue['customMessageActions'];
+    /** An array of user IDs that have confirmed the message delivery to their device */
+    deliveredTo?: UserResponse[];
     /** If true, disables the ability for users to quote messages, defaults to false */
     disableQuotedMessages?: boolean;
     /** When true, the message is the last one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */

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

@@ -12,6 +12,9 @@ export declare const validateAndGetMessage: <T extends unknown[]>(func: (...args
  * Tell if the owner of the current message is muted
  */
 export declare const isUserMuted: (message: LocalMessage, mutes?: Mute[]) => boolean;
+export declare const OPTIONAL_MESSAGE_ACTIONS: {
+    deleteForMe: string;
+};
 export declare const MESSAGE_ACTIONS: {
     delete: string;
     edit: string;
@@ -25,7 +28,7 @@ export declare const MESSAGE_ACTIONS: {
     reply: string;
     saveForLater: string;
 };
-export type MessageActionsArray<T extends string = string> = Array<keyof typeof MESSAGE_ACTIONS | T>;
+export type MessageActionsArray<T extends string = string> = Array<keyof typeof MESSAGE_ACTIONS | keyof typeof OPTIONAL_MESSAGE_ACTIONS | T>;
 export declare const defaultPinPermissions: PinPermissions;
 export type Capabilities = {
     canDelete?: boolean;

package/dist/components/Message/utils.js

@@ -26,6 +26,9 @@ export const isUserMuted = (message, mutes) => {
     const userMuted = mutes.filter((el) => el.target.id === message.user?.id);
     return !!userMuted.length;
 };
+export const OPTIONAL_MESSAGE_ACTIONS = {
+    deleteForMe: 'deleteForMe',
+};
 export const MESSAGE_ACTIONS = {
     delete: 'delete',
     edit: 'edit',
@@ -113,6 +116,9 @@ export const getMessageActions = (actions, { canDelete, canEdit, canFlag, canMar
     if (canDelete && messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.delete);
     }
+    if (canDelete && messageActions.indexOf(OPTIONAL_MESSAGE_ACTIONS.deleteForMe) > -1) {
+        messageActionsAfterPermission.push(OPTIONAL_MESSAGE_ACTIONS.deleteForMe);
+    }
     if (canEdit && messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.edit);
     }
@@ -213,6 +219,7 @@ export const areMessagePropsEqual = (prevProps, nextProps) => {
         return false;
     const deepEqualProps = deepequal(nextProps.messageActions, prevProps.messageActions) &&
         deepequal(nextProps.readBy, prevProps.readBy) &&
+        deepequal(nextProps.deliveredTo, prevProps.deliveredTo) &&
         deepequal(nextProps.highlighted, prevProps.highlighted) &&
         deepequal(nextProps.groupStyles, prevProps.groupStyles) && // last 3 messages can have different group styles
         deepequal(nextProps.mutes, prevProps.mutes) &&
@@ -235,6 +242,8 @@ export const areMessageUIPropsEqual = (prevProps, nextProps) => {
         return false;
     if (prevProps.readBy?.length !== nextProps.readBy?.length)
         return false;
+    if (prevProps.deliveredTo?.length !== nextProps.deliveredTo?.length)
+        return false;
     if (prevProps.groupStyles !== nextProps.groupStyles)
         return false;
     if (prevProps.showDetailedReactions !== nextProps.showDetailedReactions) {

package/dist/components/MessageActions/MessageActionsBox.js

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { CustomMessageActionsList as DefaultCustomMessageActionsList } from './CustomMessageActionsList';
 import { RemindMeActionButton } from './RemindMeSubmenu';
-import { useMessageReminder } from '../Message';
+import { OPTIONAL_MESSAGE_ACTIONS, useMessageReminder } from '../Message';
 import { useMessageComposer } from '../MessageInput';
 import { useChatContext, useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 import { MESSAGE_ACTIONS } from '../Message/utils';
@@ -41,6 +41,8 @@ const UnMemoizedMessageActionsBox = (props) => {
             messageActions.indexOf(MESSAGE_ACTIONS.mute) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleMute, role: 'option' }, isUserMuted() ? t('Unmute') : t('Mute'))),
             messageActions.indexOf(MESSAGE_ACTIONS.edit) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleEdit, role: 'option' }, t('Edit Message'))),
             messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: handleDelete, role: 'option' }, t('Delete'))),
+            messageActions.indexOf(OPTIONAL_MESSAGE_ACTIONS.deleteForMe) > -1 &&
+                !message.deleted_for_me && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: (e) => handleDelete(e, { deleteForMe: true }), role: 'option' }, t('Delete for me'))),
             messageActions.indexOf(MESSAGE_ACTIONS.remindMe) > -1 && (React.createElement(RemindMeActionButton, { className: buttonClassName, isMine: mine })),
             messageActions.indexOf(MESSAGE_ACTIONS.saveForLater) > -1 && (React.createElement("button", { "aria-selected": 'false', className: buttonClassName, onClick: () => reminder
                     ? client.reminders.deleteReminder(reminder.id)

package/dist/components/MessageList/MessageList.js

@@ -22,7 +22,7 @@ import { useStableId } from '../UtilityComponents/useStableId';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, } from '../../constants/limits';
 const MessageListWithContext = (props) => {
     const { channel, channelUnreadUiState, disableDateSeparator = false, groupStyles, hasMoreNewer = false, headerPosition, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, internalInfiniteScrollProps: { threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ...restInternalInfiniteScrollProps } = {}, jumpToLatestMessage = () => Promise.resolve(), loadMore: loadMoreCallback, loadMoreNewer: loadMoreNewerCallback, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    maxTimeBetweenGroupedMessages, messageActions = Object.keys(MESSAGE_ACTIONS), messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages = [], noGroupByUser = false, notifications, pinPermissions = defaultPinPermissions, reactionDetailsSort, read, renderMessages = defaultRenderMessages, returnAllReadData = false, reviewProcessedMessage, showUnreadNotificationAlways, sortReactionDetails, sortReactions, suppressAutoscroll, threadList = false, unsafeHTML = false, } = props;
+    maxTimeBetweenGroupedMessages, messageActions = Object.keys(MESSAGE_ACTIONS), messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages = [], noGroupByUser = false, notifications, pinPermissions = defaultPinPermissions, reactionDetailsSort, renderMessages = defaultRenderMessages, returnAllReadData = false, reviewProcessedMessage, showUnreadNotificationAlways, sortReactionDetails, sortReactions, suppressAutoscroll, threadList = false, unsafeHTML = false, } = props;
     const [listElement, setListElement] = React.useState(null);
     const [ulElement, setUlElement] = React.useState(null);
     const { customClasses } = useChatContext('MessageList');
@@ -92,7 +92,7 @@ const MessageListWithContext = (props) => {
             unsafeHTML,
         },
         messageGroupStyles,
-        read,
+        messages,
         renderMessages,
         returnAllReadData,
         threadList,

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

@@ -21,6 +21,8 @@ export type VirtuosoContext = Required<Pick<ComponentContextValue, 'DateSeparato
     messageGroupStyles: Record<string, GroupStyle>;
     /** Number of messages prepended before the first page of messages. This is needed to calculate the virtual position in the virtual list. */
     numItemsPrepended: number;
+    /** Mapping of message ID of own messages to the array of users, who were delivered the given message */
+    ownMessagesDeliveredToOthers: Record<string, UserResponse[]>;
     /** Mapping of message ID of own messages to the array of users, who read the given message */
     ownMessagesReadByOthers: Record<string, UserResponse[]>;
     /** The original message list enriched with date separators, omitted deleted messages or giphy previews. */

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -22,6 +22,7 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { VirtualizedMessageListContextProvider } from '../../context/VirtualizedMessageListContext';
 import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
 import { useStableId } from '../UtilityComponents/useStableId';
+import { useLastDeliveredData } from './hooks/useLastDeliveredData';
 function captureResizeObserverExceededError(e) {
     if (e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
         e.message === 'ResizeObserver loop limit exceeded') {
@@ -54,7 +55,7 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
 const VirtualizedMessageListWithContext = (props) => {
     const { additionalMessageInputProps, additionalVirtuosoProps = {}, channel, channelUnreadUiState, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, defaultItemHeight, disableDateSeparator = true, formatDate, groupStyles, hasMoreNewer, head, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, jumpToLatestMessage, loadingMore, loadMore, loadMoreNewer, maxTimeBetweenGroupedMessages, Message: MessageUIComponentFromProps, messageActions, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages, notifications, openThread, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    overscan = 0, reactionDetailsSort, read, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showUnreadNotificationAlways, sortReactionDetails, sortReactions, stickToBottomScrollBehavior = 'smooth', suppressAutoscroll, threadList, } = props;
+    overscan = 0, reactionDetailsSort, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showUnreadNotificationAlways, sortReactionDetails, sortReactions, stickToBottomScrollBehavior = 'smooth', suppressAutoscroll, threadList, } = props;
     const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } = additionalVirtuosoProps;
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
@@ -102,10 +103,14 @@ const VirtualizedMessageListWithContext = (props) => {
     ]);
     // get the mapping of own messages to array of users who read them
     const ownMessagesReadByOthers = useLastReadData({
-        messages: processedMessages,
-        read,
+        channel,
+        messages: messages || [],
+        returnAllReadData,
+    });
+    const ownMessagesDeliveredToOthers = useLastDeliveredData({
+        channel,
+        messages: messages || [],
         returnAllReadData,
-        userID: client.userID,
     });
     const lastReceivedMessageId = useMemo(() => getLastReceived(processedMessages), [processedMessages]);
     const groupStylesFn = groupStyles || getGroupStyles;
@@ -231,6 +236,7 @@ const VirtualizedMessageListWithContext = (props) => {
                             MessageSystem,
                             numItemsPrepended,
                             openThread,
+                            ownMessagesDeliveredToOthers,
                             ownMessagesReadByOthers,
                             processedMessages,
                             reactionDetailsSort,

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -51,7 +51,7 @@ export const EmptyPlaceholder = ({ context }) => {
     return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: context?.threadList ? 'thread' : 'message' }))));
 };
 export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
-    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, openThread, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
+    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, openThread, ownMessagesDeliveredToOthers, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
     const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -88,5 +88,5 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     return (React.createElement(React.Fragment, null,
         isFirstUnreadMessage && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
-        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, openThread: openThread, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList })));
+        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, deliveredTo: ownMessagesDeliveredToOthers[message.id] || [], endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, openThread: openThread, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList })));
 };

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

@@ -1,9 +1,10 @@
 import type React from 'react';
-import type { ChannelState as StreamChannelState } from 'stream-chat';
 import type { GroupStyle, RenderedMessage } from '../../utils';
+import type { LocalMessage } from 'stream-chat';
 import type { ChannelUnreadUiState } from '../../../../types/types';
 import type { MessageRenderer, SharedMessageProps } from '../../renderMessages';
 type UseMessageListElementsProps = {
+    messages: LocalMessage[];
     enrichedMessages: RenderedMessage[];
     internalMessageProps: SharedMessageProps;
     messageGroupStyles: Record<string, GroupStyle>;
@@ -11,7 +12,6 @@ type UseMessageListElementsProps = {
     returnAllReadData: boolean;
     threadList: boolean;
     channelUnreadUiState?: ChannelUnreadUiState;
-    read?: StreamChannelState['read'];
 };
 export declare const useMessageListElements: (props: UseMessageListElementsProps) => React.ReactNode[];
 export {};

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

@@ -3,16 +3,23 @@ import { useLastReadData } from '../useLastReadData';
 import { getLastReceived } from '../../utils';
 import { useChatContext } from '../../../../context/ChatContext';
 import { useComponentContext } from '../../../../context/ComponentContext';
+import { useChannelStateContext } from '../../../../context';
+import { useLastDeliveredData } from '../useLastDeliveredData';
 export const useMessageListElements = (props) => {
-    const { channelUnreadUiState, enrichedMessages, internalMessageProps, messageGroupStyles, read, renderMessages, returnAllReadData, threadList, } = props;
-    const { client, customClasses } = useChatContext('useMessageListElements');
+    const { channelUnreadUiState, enrichedMessages, internalMessageProps, messageGroupStyles, messages, renderMessages, returnAllReadData, threadList, } = props;
+    const { customClasses } = useChatContext('useMessageListElements');
+    const { channel } = useChannelStateContext();
     const components = useComponentContext('useMessageListElements');
     // get the readData, but only for messages submitted by the user themselves
     const readData = useLastReadData({
-        messages: enrichedMessages,
-        read,
+        channel,
+        messages,
+        returnAllReadData,
+    });
+    const ownMessagesDeliveredToOthers = useLastDeliveredData({
+        channel,
+        messages,
         returnAllReadData,
-        userID: client.userID,
     });
     const lastReceivedMessageId = useMemo(() => getLastReceived(enrichedMessages), [enrichedMessages]);
     const elements = useMemo(() => renderMessages({
@@ -22,6 +29,7 @@ export const useMessageListElements = (props) => {
         lastReceivedMessageId,
         messageGroupStyles,
         messages: enrichedMessages,
+        ownMessagesDeliveredToOthers,
         readData,
         sharedMessageProps: { ...internalMessageProps, threadList },
     }), 

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

@@ -0,0 +1,8 @@
+import type { Channel, LocalMessage, UserResponse } from 'stream-chat';
+type UseLastDeliveredDataParams = {
+    channel: Channel;
+    messages: LocalMessage[];
+    returnAllReadData: boolean;
+};
+export declare const useLastDeliveredData: (props: UseLastDeliveredDataParams) => Record<string, UserResponse[]>;
+export {};

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

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+export const useLastDeliveredData = (props) => {
+    const { channel, messages, returnAllReadData } = props;
+    return useMemo(() => returnAllReadData
+        ? messages.reduce((acc, msg) => {
+            acc[msg.id] = channel.messageReceiptsTracker.deliveredForMessage({
+                msgId: msg.id,
+                timestampMs: msg.created_at.getTime(),
+            });
+            return acc;
+        }, {})
+        : channel.messageReceiptsTracker.groupUsersByLastDeliveredMessage(), [channel, messages, returnAllReadData]);
+};

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

@@ -1,13 +1,8 @@
-import type { UserResponse } from 'stream-chat';
-import type { RenderedMessage } from '../utils';
+import type { Channel, LocalMessage, UserResponse } from 'stream-chat';
 type UseLastReadDataParams = {
-    messages: RenderedMessage[];
+    channel: Channel;
+    messages: LocalMessage[];
     returnAllReadData: boolean;
-    userID: string | undefined;
-    read?: Record<string, {
-        last_read: Date;
-        user: UserResponse;
-    }>;
 };
 export declare const useLastReadData: (props: UseLastReadDataParams) => Record<string, UserResponse[]>;
 export {};

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

@@ -1,10 +1,13 @@
 import { useMemo } from 'react';
-import { isLocalMessage } from '../utils';
-import { getReadStates } from '../utils';
 export const useLastReadData = (props) => {
-    const { messages, read, returnAllReadData, userID } = props;
-    return useMemo(() => {
-        const ownLocalMessages = messages.filter((msg) => isLocalMessage(msg) && msg.user?.id === userID);
-        return getReadStates(ownLocalMessages, read, returnAllReadData);
-    }, [messages, read, returnAllReadData, userID]);
+    const { channel, messages, returnAllReadData } = props;
+    return useMemo(() => returnAllReadData
+        ? messages.reduce((acc, msg) => {
+            acc[msg.id] = channel.messageReceiptsTracker.readersForMessage({
+                msgId: msg.id,
+                timestampMs: msg.created_at.getTime(),
+            });
+            return acc;
+        }, {})
+        : channel.messageReceiptsTracker.groupUsersByLastReadMessage(), [channel, messages, returnAllReadData]);
 };