stream-chat-react 13.8.1 → 13.10.0

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/renderText/remarkPlugins/index.d.ts

@@ -2,3 +2,4 @@ export * from './htmlToTextPlugin';
 export * from './imageToLink';
 export * from './keepLineBreaksPlugin';
 export * from './plusPlusToEmphasis';
+export * from './remarkIgnoreMarkdown';

package/dist/components/Message/renderText/remarkPlugins/index.js

@@ -2,3 +2,4 @@ export * from './htmlToTextPlugin';
 export * from './imageToLink';
 export * from './keepLineBreaksPlugin';
 export * from './plusPlusToEmphasis';
+export * from './remarkIgnoreMarkdown';

package/dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.d.ts

@@ -1,2 +1,10 @@
-import type { Nodes } from 'hast-util-find-and-replace/lib';
-export declare const keepLineBreaksPlugin: () => (tree: Nodes) => void;
+import type { Plugin } from 'unified';
+import type { Root } from 'mdast';
+/**
+ * Inserts runs of <br> between sibling block nodes to preserve the exact
+ * number of *blank source lines* between them. No paragraph wrappers are added.
+ *
+ * Works because `mdast-util-to-hast` respects `data.hName`, turning our
+ * `thematicBreak` into `<br>`. Multiple blank lines -> multiple `<br>` siblings.
+ */
+export declare const keepLineBreaksPlugin: Plugin<[], Root>;

package/dist/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.js

@@ -1,28 +1,48 @@
 import { visit } from 'unist-util-visit';
-import { u } from 'unist-builder';
-const visitor = (node, index, parent) => {
-    if (!(index && parent && node.position))
-        return;
-    const prevSibling = parent.children.at(index - 1);
-    if (!prevSibling?.position)
-        return;
-    if (node.position.start.line === prevSibling.position.start.line)
-        return;
-    const ownStartLine = node.position.start.line;
-    const prevEndLine = prevSibling.position.end.line;
-    // the -1 is adjustment for the single line break into which multiple line breaks are converted
-    const countTruncatedLineBreaks = ownStartLine - prevEndLine - 1;
-    if (countTruncatedLineBreaks < 1)
-        return;
-    const lineBreaks = Array.from({ length: countTruncatedLineBreaks }, () => u('break', { tagName: 'br' }));
-    parent.children = [
-        ...parent.children.slice(0, index),
-        ...lineBreaks,
-        ...parent.children.slice(index),
-    ];
-    return;
+/** Type guard: does the node have mdast children? */
+function isParentWithChildren(node) {
+    const maybe = node;
+    return Array.isArray(maybe.children);
+}
+/** Build a single <br> by mapping a standard mdast node via data.hName */
+function brNode() {
+    return { data: { hName: 'br' }, type: 'thematicBreak' };
+}
+/**
+ * Inserts runs of <br> between sibling block nodes to preserve the exact
+ * number of *blank source lines* between them. No paragraph wrappers are added.
+ *
+ * Works because `mdast-util-to-hast` respects `data.hName`, turning our
+ * `thematicBreak` into `<br>`. Multiple blank lines -> multiple `<br>` siblings.
+ */
+export const keepLineBreaksPlugin = () => (tree) => {
+    visit(tree, // visit needs a Unist parent-like root
+    isParentWithChildren, // limit to parents with children
+    (parent) => {
+        const children = parent.children;
+        if (children.length < 2)
+            return;
+        const out = [];
+        for (let i = 0; i < children.length; i++) {
+            const curr = children[i];
+            out.push(curr);
+            if (i === children.length - 1)
+                break;
+            const next = children[i + 1];
+            const currEndLine = curr.position && curr.position.end ? curr.position.end.line : undefined;
+            const nextStartLine = next.position && next.position.start ? next.position.start.line : undefined;
+            if (typeof currEndLine !== 'number' || typeof nextStartLine !== 'number') {
+                continue;
+            }
+            // Markdown already separates blocks by at least one visual gap.
+            // We add back only the *extra* blank lines from the source.
+            const extraBlankLines = Math.max(0, nextStartLine - currEndLine - 1);
+            if (extraBlankLines > 0) {
+                for (let k = 0; k < extraBlankLines; k++) {
+                    out.push(brNode());
+                }
+            }
+        }
+        parent.children = out;
+    });
 };
-const transform = (tree) => {
-    visit(tree, visitor);
-};
-export const keepLineBreaksPlugin = () => transform;

package/dist/components/Message/renderText/remarkPlugins/remarkIgnoreMarkdown.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from 'unified';
+import type { Root } from 'mdast';
+/**
+ * Replace the parsed Markdown tree with a single paragraph containing the
+ * original source as a plain text node. No Markdown formatting is interpreted.
+ * React will escape it.
+ */
+export declare const remarkIgnoreMarkdown: Plugin<[], Root>;

package/dist/components/Message/renderText/remarkPlugins/remarkIgnoreMarkdown.js

@@ -0,0 +1,11 @@
+/**
+ * Replace the parsed Markdown tree with a single paragraph containing the
+ * original source as a plain text node. No Markdown formatting is interpreted.
+ * React will escape it.
+ */
+export const remarkIgnoreMarkdown = () => (tree, file) => {
+    const source = String(file.value ?? '');
+    const text = { type: 'text', value: source };
+    const paragraph = { children: [text], type: 'paragraph' };
+    tree.children = [paragraph];
+};

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/MessageActions.js

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useCallback, useRef } from 'react';
 import { MessageActionsBox } from './MessageActionsBox';
-import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
+import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
 import { ActionsIcon as DefaultActionsIcon } from '../Message/icons';
 import { isUserMuted, shouldRenderMessageActions } from '../Message/utils';
 import { useChatContext } from '../../context/ChatContext';
@@ -24,8 +24,8 @@ export const MessageActions = (props) => {
     const isMuted = useCallback(() => isUserMuted(message, mutes), [message, mutes]);
     const dialogIdNamespace = threadList ? '-thread-' : '';
     const dialogId = `message-actions${dialogIdNamespace}--${message.id}`;
-    const dialog = useDialog({ id: dialogId });
-    const dialogIsOpen = useDialogIsOpen(dialogId);
+    const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
     const messageActions = getMessageActions();
     const renderMessageActions = shouldRenderMessageActions({
         customMessageActions,
@@ -37,7 +37,7 @@ export const MessageActions = (props) => {
     if (!renderMessageActions)
         return null;
     return (React.createElement(MessageActionsWrapper, { customWrapperClass: customWrapperClass, inline: inline, toggleOpen: dialog?.toggle },
-        React.createElement(DialogAnchor, { id: dialogId, placement: isMine ? 'top-end' : 'top-start', referenceElement: actionsBoxButtonRef.current, tabIndex: -1, trapFocus: true },
+        React.createElement(DialogAnchor, { dialogManagerId: dialogManager?.id, id: dialogId, placement: isMine ? 'top-end' : 'top-start', referenceElement: actionsBoxButtonRef.current, tabIndex: -1, trapFocus: true },
             React.createElement(MessageActionsBox, { getMessageActions: getMessageActions, handleDelete: handleDelete, handleEdit: setEditingState, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handlePin: handlePin, isUserMuted: isMuted, mine: isMine, open: dialogIsOpen })),
         React.createElement("button", { "aria-expanded": dialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Message Actions Menu'), className: 'str-chat__message-actions-box-button', "data-testid": 'message-actions-toggle-button', ref: actionsBoxButtonRef },
             React.createElement(ActionsIcon, { className: 'str-chat__message-action-icon' }))));

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/MessageInput/AttachmentSelector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const SimpleAttachmentSelector: () => React.JSX.Element;
+export declare const SimpleAttachmentSelector: () => React.JSX.Element | null;
 export type AttachmentSelectorModalContentProps = {
     close: () => void;
 };

package/dist/components/MessageInput/AttachmentSelector.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { UploadIcon as DefaultUploadIcon } from './icons';
 import { useAttachmentManagerState } from './hooks/useAttachmentManagerState';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
-import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
+import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
 import { DialogMenuButton } from '../Dialog/DialogMenu';
 import { Modal as DefaultModal } from '../Modal';
 import { ShareLocationDialog as DefaultLocationDialog } from '../Location';
@@ -16,6 +16,7 @@ import clsx from 'clsx';
 import { useMessageComposer } from './hooks';
 export const SimpleAttachmentSelector = () => {
     const { AttachmentSelectorInitiationButtonContents, FileUploadIcon = DefaultUploadIcon, } = useComponentContext();
+    const { channelCapabilities } = useChannelStateContext();
     const inputRef = useRef(null);
     const [labelElement, setLabelElement] = useState(null);
     const id = useStableId();
@@ -33,6 +34,8 @@ export const SimpleAttachmentSelector = () => {
             labelElement.removeEventListener('keyup', handleKeyUp);
         };
     }, [labelElement]);
+    if (!channelCapabilities['upload-file'])
+        return null;
     return (React.createElement("div", { className: 'str-chat__file-input-container', "data-testid": 'file-upload-button' },
         React.createElement(UploadFileInput, { id: id, ref: inputRef }),
         React.createElement("label", { className: 'str-chat__file-input-label', htmlFor: id, ref: setLabelElement, tabIndex: 0 }, AttachmentSelectorInitiationButtonContents ? (React.createElement(AttachmentSelectorInitiationButtonContents, null)) : (React.createElement(FileUploadIcon, null)))));
@@ -119,8 +122,10 @@ export const AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttach
     const messageComposer = useMessageComposer();
     const actions = useAttachmentSelectorActionsFiltered(attachmentSelectorActionSet);
     const menuDialogId = `attachment-actions-menu${messageComposer.threadId ? '-thread' : ''}`;
-    const menuDialog = useDialog({ id: menuDialogId });
-    const menuDialogIsOpen = useDialogIsOpen(menuDialogId);
+    const { dialog: menuDialog, dialogManager } = useDialogOnNearestManager({
+        id: menuDialogId,
+    });
+    const menuDialogIsOpen = useDialogIsOpen(menuDialogId, dialogManager?.id);
     const [modalContentAction, setModalContentActionAction] = useState();
     const openModal = useCallback((actionType) => {
         const action = actions.find((a) => a.type === actionType);
@@ -143,7 +148,7 @@ export const AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttach
             channelCapabilities['upload-file'] && React.createElement(UploadFileInput, { ref: setFileInput }),
             React.createElement("button", { "aria-expanded": menuDialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Attachment Selector'), className: 'str-chat__attachment-selector__menu-button', "data-testid": 'invoke-attachment-selector-button', onClick: () => menuDialog?.toggle(), ref: menuButtonRef },
                 React.createElement(AttachmentSelectorMenuInitButtonIcon, null)),
-            React.createElement(DialogAnchor, { id: menuDialogId, placement: 'top-start', referenceElement: menuButtonRef.current, tabIndex: -1, trapFocus: true },
+            React.createElement(DialogAnchor, { dialogManagerId: dialogManager?.id, id: menuDialogId, placement: 'top-start', referenceElement: menuButtonRef.current, tabIndex: -1, trapFocus: true },
                 React.createElement("div", { className: 'str-chat__attachment-selector-actions-menu str-chat__dialog-menu', "data-testid": 'attachment-selector-actions-menu' }, actions.map(({ ActionButton, type }) => (React.createElement(ActionButton, { closeMenu: menuDialog.close, key: `attachment-selector-item-${type}`, openModalForAction: openModal }))))),
             React.createElement(Portal, { getPortalDestination: getModalPortalDestination ?? getDefaultPortalDestination, isOpen: modalIsOpen },
                 React.createElement(Modal, { className: clsx({

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,16 @@
+import { useCallback, useEffect, useState } from 'react';
+export const useLastDeliveredData = (props) => {
+    const { channel, messages, returnAllReadData } = props;
+    const calculate = useCallback(() => 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]);
+    const [deliveredTo, setDeliveredTo] = useState(calculate);
+    useEffect(() => channel.on('message.delivered', () => setDeliveredTo(calculate)).unsubscribe, [channel, calculate]);
+    return deliveredTo;
+};

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 {};