stream-chat-react 13.9.0 → 13.10.1

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

@@ -59,6 +59,8 @@ export type MessageProps = {
     highlighted?: boolean;
     /** Whether the threaded message is the first in the thread list */
     initialMessage?: boolean;
+    /** Latest own message in currently displayed message set. */
+    lastOwnMessage?: LocalMessage;
     /** Latest message id on current channel */
     lastReceivedId?: string | null;
     /** UI component to display a Message in MessageList, overrides value in [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/#message) */
@@ -89,6 +91,8 @@ export type MessageProps = {
     renderText?: (text?: string, mentioned_users?: UserResponse[], options?: RenderTextOptions) => ReactNode;
     /** Custom retry send message handler to override default in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
     retrySendMessage?: ChannelActionContextValue['retrySendMessage'];
+    /** Keep track of read receipts for each message sent by the user. When disabled, only the last own message delivery / read status is rendered. */
+    returnAllReadData?: boolean;
     /** Comparator function to sort the list of reacted users
      * @deprecated use `reactionDetailsSort` instead
      */

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/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

@@ -20,6 +20,7 @@ import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageLi
 import { defaultRenderMessages } from './renderMessages';
 import { useStableId } from '../UtilityComponents/useStableId';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, } from '../../constants/limits';
+import { useLastOwnMessage } from './hooks/useLastOwnMessage';
 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, renderMessages = defaultRenderMessages, returnAllReadData = false, reviewProcessedMessage, showUnreadNotificationAlways, sortReactionDetails, sortReactions, suppressAutoscroll, threadList = false, unsafeHTML = false, } = props;
@@ -57,6 +58,10 @@ const MessageListWithContext = (props) => {
         noGroupByUser,
         reviewProcessedMessage,
     });
+    const lastOwnMessage = useLastOwnMessage({
+        messages,
+        ownUserId: channel.getClient().user?.id,
+    });
     const elements = useMessageListElements({
         channelUnreadUiState,
         enrichedMessages,
@@ -91,6 +96,7 @@ const MessageListWithContext = (props) => {
             sortReactions,
             unsafeHTML,
         },
+        lastOwnMessage,
         messageGroupStyles,
         messages,
         renderMessages,

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

@@ -10,7 +10,7 @@ import type { ComponentContextValue } from '../../context/ComponentContext';
 import type { LocalMessage, UserResponse } from 'stream-chat';
 import type { UnknownType } from '../../types/types';
 type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActions' | 'formatDate' | 'messageActions' | 'openThread' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails';
-type VirtualizedMessageListPropsForContext = PropsDrilledToMessage | 'closeReactionSelectorOnClick' | 'customMessageRenderer' | 'head' | 'loadingMore' | 'Message' | 'shouldGroupByUser' | 'threadList';
+type VirtualizedMessageListPropsForContext = PropsDrilledToMessage | 'closeReactionSelectorOnClick' | 'customMessageRenderer' | 'head' | 'loadingMore' | 'Message' | 'returnAllReadData' | 'shouldGroupByUser' | 'threadList';
 /**
  * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions)
  */
@@ -29,6 +29,8 @@ export type VirtuosoContext = Required<Pick<ComponentContextValue, 'DateSeparato
     processedMessages: RenderedMessage[];
     /** Instance of VirtuosoHandle object providing the API to navigate in the virtualized list by various scroll actions. */
     virtuosoRef: RefObject<VirtuosoHandle | null>;
+    /** Latest own message in currently displayed message set. */
+    lastOwnMessage?: LocalMessage;
     /** Message id which was marked as unread. ALl the messages following this message are considered unrea.  */
     firstUnreadMessageId?: string;
     lastReadDate?: Date;

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -23,6 +23,7 @@ import { VirtualizedMessageListContextProvider } from '../../context/Virtualized
 import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
 import { useStableId } from '../UtilityComponents/useStableId';
 import { useLastDeliveredData } from './hooks/useLastDeliveredData';
+import { useLastOwnMessage } from './hooks/useLastOwnMessage';
 function captureResizeObserverExceededError(e) {
     if (e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
         e.message === 'ResizeObserver loop limit exceeded') {
@@ -101,14 +102,17 @@ const VirtualizedMessageListWithContext = (props) => {
         messages?.length,
         client.userID,
     ]);
+    const lastOwnMessage = useLastOwnMessage({ messages, ownUserId: client.user?.id });
     // get the mapping of own messages to array of users who read them
     const ownMessagesReadByOthers = useLastReadData({
         channel,
+        lastOwnMessage,
         messages: messages || [],
         returnAllReadData,
     });
     const ownMessagesDeliveredToOthers = useLastDeliveredData({
         channel,
+        lastOwnMessage,
         messages: messages || [],
         returnAllReadData,
     });
@@ -226,6 +230,7 @@ const VirtualizedMessageListWithContext = (props) => {
                             firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
                             formatDate,
                             head,
+                            lastOwnMessage,
                             lastReadDate: channelUnreadUiState?.last_read,
                             lastReadMessageId: channelUnreadUiState?.last_read_message_id,
                             lastReceivedMessageId,
@@ -240,6 +245,7 @@ const VirtualizedMessageListWithContext = (props) => {
                             ownMessagesReadByOthers,
                             processedMessages,
                             reactionDetailsSort,
+                            returnAllReadData,
                             shouldGroupByUser,
                             sortReactionDetails,
                             sortReactions,

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, ownMessagesDeliveredToOthers, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
+    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastOwnMessage, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, openThread, ownMessagesDeliveredToOthers, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, returnAllReadData, 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, 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 })));
+        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] ?? ''], lastOwnMessage: lastOwnMessage, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, openThread: openThread, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], returnAllReadData: returnAllReadData, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList })));
 };

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

@@ -12,6 +12,7 @@ type UseMessageListElementsProps = {
     returnAllReadData: boolean;
     threadList: boolean;
     channelUnreadUiState?: ChannelUnreadUiState;
+    lastOwnMessage?: LocalMessage;
 };
 export declare const useMessageListElements: (props: UseMessageListElementsProps) => React.ReactNode[];
 export {};

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

@@ -6,18 +6,20 @@ import { useComponentContext } from '../../../../context/ComponentContext';
 import { useChannelStateContext } from '../../../../context';
 import { useLastDeliveredData } from '../useLastDeliveredData';
 export const useMessageListElements = (props) => {
-    const { channelUnreadUiState, enrichedMessages, internalMessageProps, messageGroupStyles, messages, renderMessages, returnAllReadData, threadList, } = props;
+    const { channelUnreadUiState, enrichedMessages, internalMessageProps, lastOwnMessage, 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({
         channel,
+        lastOwnMessage,
         messages,
         returnAllReadData,
     });
     const ownMessagesDeliveredToOthers = useLastDeliveredData({
         channel,
+        lastOwnMessage,
         messages,
         returnAllReadData,
     });
@@ -26,22 +28,25 @@ export const useMessageListElements = (props) => {
         channelUnreadUiState,
         components,
         customClasses,
+        lastOwnMessage,
         lastReceivedMessageId,
         messageGroupStyles,
         messages: enrichedMessages,
         ownMessagesDeliveredToOthers,
         readData,
-        sharedMessageProps: { ...internalMessageProps, threadList },
+        sharedMessageProps: { ...internalMessageProps, returnAllReadData, threadList },
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
         enrichedMessages,
         internalMessageProps,
+        lastOwnMessage,
         lastReceivedMessageId,
         messageGroupStyles,
         channelUnreadUiState,
         readData,
         renderMessages,
+        returnAllReadData,
         threadList,
     ]);
     return elements;

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

@@ -3,6 +3,7 @@ type UseLastDeliveredDataParams = {
     channel: Channel;
     messages: LocalMessage[];
     returnAllReadData: boolean;
+    lastOwnMessage?: LocalMessage;
 };
 export declare const useLastDeliveredData: (props: UseLastDeliveredDataParams) => Record<string, UserResponse[]>;
 export {};

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

@@ -1,13 +1,26 @@
-import { useMemo } from 'react';
+import { useCallback, useEffect, useState } 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]);
+    const { channel, lastOwnMessage, messages, returnAllReadData } = props;
+    const calculate = useCallback(() => {
+        if (returnAllReadData) {
+            return messages.reduce((acc, msg) => {
+                acc[msg.id] = channel.messageReceiptsTracker.deliveredForMessage({
+                    msgId: msg.id,
+                    timestampMs: msg.created_at.getTime(),
+                });
+                return acc;
+            }, {});
+        }
+        if (!lastOwnMessage)
+            return {};
+        return {
+            [lastOwnMessage.id]: channel.messageReceiptsTracker.deliveredForMessage({
+                msgId: lastOwnMessage.id,
+                timestampMs: lastOwnMessage.created_at.getTime(),
+            }),
+        };
+    }, [channel, lastOwnMessage, messages, returnAllReadData]);
+    const [deliveredTo, setDeliveredTo] = useState(calculate);
+    useEffect(() => channel.on('message.delivered', () => setDeliveredTo(calculate)).unsubscribe, [channel, calculate]);
+    return deliveredTo;
 };

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

@@ -0,0 +1,5 @@
+import type { LocalMessage } from 'stream-chat';
+export declare const useLastOwnMessage: ({ messages, ownUserId, }: {
+    messages?: LocalMessage[];
+    ownUserId?: string;
+}) => LocalMessage | undefined;

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

@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+import { findReverse } from '../../../utils/findReverse';
+// fixme: we should be able to retrieve last own message quickly from the LLC. Should be done when refactoring the LLC Channel state to reactive.
+export const useLastOwnMessage = ({ messages, ownUserId, }) => useMemo(() => messages && findReverse(messages, (msg) => (msg.user && msg.user.id) === ownUserId), [messages, ownUserId]);

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

@@ -3,6 +3,7 @@ type UseLastReadDataParams = {
     channel: Channel;
     messages: LocalMessage[];
     returnAllReadData: boolean;
+    lastOwnMessage?: LocalMessage;
 };
 export declare const useLastReadData: (props: UseLastReadDataParams) => Record<string, UserResponse[]>;
 export {};

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

@@ -1,13 +1,23 @@
 import { useMemo } from 'react';
 export const useLastReadData = (props) => {
-    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]);
+    const { channel, lastOwnMessage, messages, returnAllReadData } = props;
+    return useMemo(() => {
+        if (returnAllReadData) {
+            return messages.reduce((acc, msg) => {
+                acc[msg.id] = channel.messageReceiptsTracker.readersForMessage({
+                    msgId: msg.id,
+                    timestampMs: msg.created_at.getTime(),
+                });
+                return acc;
+            }, {});
+        }
+        if (!lastOwnMessage)
+            return {};
+        return {
+            [lastOwnMessage.id]: channel.messageReceiptsTracker.readersForMessage({
+                msgId: lastOwnMessage.id,
+                timestampMs: lastOwnMessage.created_at.getTime(),
+            }),
+        };
+    }, [channel, lastOwnMessage, messages, returnAllReadData]);
 };

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

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import type { GroupStyle, RenderedMessage } from './utils';
 import type { MessageProps } from '../Message';
-import type { UserResponse } from 'stream-chat';
+import type { LocalMessage, UserResponse } from 'stream-chat';
 import type { ComponentContextValue, CustomClasses } from '../../context';
 import type { ChannelUnreadUiState } from '../../types';
 export interface RenderMessagesOptions {
@@ -19,6 +19,8 @@ export interface RenderMessagesOptions {
      * Props forwarded to the Message component.
      */
     sharedMessageProps: SharedMessageProps;
+    /** Latest own message in currently displayed message set. */
+    lastOwnMessage?: LocalMessage;
     /**
      * Current user's channel read state used to render components reflecting unread state.
      * It does not reflect the back-end state if a channel is marked read on mount.
@@ -30,5 +32,5 @@ export interface RenderMessagesOptions {
 export type SharedMessageProps = Omit<MessageProps, MessagePropsToOmit>;
 export type MessageRenderer = (options: RenderMessagesOptions) => Array<ReactNode>;
 type MessagePropsToOmit = 'channel' | 'deliveredTo' | 'groupStyles' | 'initialMessage' | 'lastReceivedId' | 'message' | 'readBy';
-export declare function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, ownMessagesDeliveredToOthers, readData, sharedMessageProps: messageProps, }: RenderMessagesOptions): React.JSX.Element[];
+export declare function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastOwnMessage, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, ownMessagesDeliveredToOthers, readData, sharedMessageProps: messageProps, }: RenderMessagesOptions): React.JSX.Element[];
 export {};

package/dist/components/MessageList/renderMessages.js

@@ -4,7 +4,7 @@ import { Message } from '../Message';
 import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
 import { EventComponent as DefaultMessageSystem } from '../EventComponent';
 import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from './UnreadMessagesSeparator';
-export function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, ownMessagesDeliveredToOthers, readData, sharedMessageProps: messageProps, }) {
+export function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastOwnMessage, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, ownMessagesDeliveredToOthers, readData, sharedMessageProps: messageProps, }) {
     const { DateSeparator = DefaultDateSeparator, HeaderComponent, MessageSystem = DefaultMessageSystem, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, } = components;
     const renderedMessages = [];
     let firstMessage;
@@ -44,7 +44,7 @@ export function defaultRenderMessages({ channelUnreadUiState, components, custom
                 isFirstUnreadMessage && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
                     React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState?.unread_messages }))),
                 React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },
-                    React.createElement(Message, { deliveredTo: ownMessagesDeliveredToOthers[message.id] || [], groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], ...messageProps }))));
+                    React.createElement(Message, { deliveredTo: ownMessagesDeliveredToOthers[message.id] || [], groupStyles: [groupStyles], lastOwnMessage: lastOwnMessage, lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], ...messageProps }))));
             previousMessage = message;
         }
     }

package/dist/components/Modal/GlobalModal.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import React, { useEffect, useRef } from 'react';
 import { FocusScope } from '@react-aria/focus';
 import { CloseIconRound } from './icons';
-import { useTranslationContext } from '../../context';
+import { modalDialogManagerId, useTranslationContext } from '../../context';
 import { DialogPortalEntry, modalDialogId, useModalDialog, useModalDialogIsOpen, } from '../Dialog';
 export const GlobalModal = ({ children, className, onClose, onCloseAttempt, open, }) => {
     const { t } = useTranslationContext('Modal');
@@ -48,7 +48,7 @@ export const GlobalModal = ({ children, className, onClose, onCloseAttempt, open
     }, [dialog, open]);
     if (!open || !isOpen)
         return null;
-    return (React.createElement(DialogPortalEntry, { dialogId: modalDialogId },
+    return (React.createElement(DialogPortalEntry, { dialogId: modalDialogId, dialogManagerId: modalDialogManagerId },
         React.createElement("div", { className: clsx('str-chat str-chat__modal str-chat-react__modal str-chat__modal--open', className), onClick: handleClick },
             React.createElement(FocusScope, { autoFocus: true, contain: true },
                 React.createElement("button", { className: 'str-chat__modal__close-button', ref: closeButtonRef, title: t('Close'), type: 'button' },

package/dist/components/Reactions/ReactionSelectorWithButton.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { ReactionSelector as DefaultReactionSelector } from './ReactionSelector';
-import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
+import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
 import { useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 /**
  * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
@@ -13,10 +13,10 @@ export const ReactionSelectorWithButton = ({ ReactionIcon, }) => {
     const buttonRef = useRef(null);
     const dialogIdNamespace = threadList ? '-thread-' : '';
     const dialogId = `reaction-selector${dialogIdNamespace}--${message.id}`;
-    const dialog = useDialog({ id: dialogId });
-    const dialogIsOpen = useDialogIsOpen(dialogId);
+    const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
     return (React.createElement(React.Fragment, null,
-        React.createElement(DialogAnchor, { id: dialogId, placement: isMyMessage() ? 'top-end' : 'top-start', referenceElement: buttonRef.current, trapFocus: true },
+        React.createElement(DialogAnchor, { dialogManagerId: dialogManager?.id, id: dialogId, placement: isMyMessage() ? 'top-end' : 'top-start', referenceElement: buttonRef.current, trapFocus: true },
             React.createElement(ReactionSelector, null)),
         React.createElement("button", { "aria-expanded": dialogIsOpen, "aria-label": t('aria/Open Reaction Selector'), className: 'str-chat__message-reactions-button', "data-testid": 'message-reaction-action', onClick: () => dialog?.toggle(), ref: buttonRef },
             React.createElement(ReactionIcon, { className: 'str-chat__message-action-icon' }))));

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
-import type { PopperProps } from 'react-popper';
+import type { PopperLikePlacement } from '../Dialog';
 export declare const Tooltip: ({ children, ...rest }: ComponentProps<'div'>) => React.JSX.Element;
 export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<{
     /** Reference element to which the tooltip should attach to */
@@ -8,7 +8,7 @@ export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<
     /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */
     offset?: [number, number];
     /** Popper's placement property defining default position of the tooltip, default 'top' */
-    placement?: PopperProps<unknown>['placement'];
+    placement?: PopperLikePlacement;
     /** Tells component whether to render its contents */
     visible?: boolean;
 }>;

package/dist/components/Tooltip/Tooltip.js

@@ -1,20 +1,19 @@
-import React, { useState } from 'react';
-import { usePopper } from 'react-popper';
+import React, { useEffect, useState } from 'react';
+import { usePopoverPosition } from '../Dialog/hooks/usePopoverPosition';
 export const Tooltip = ({ children, ...rest }) => (React.createElement("div", { className: 'str-chat__tooltip', ...rest }, children));
 export const PopperTooltip = ({ children, offset = [0, 10], placement = 'top', referenceElement, visible = false, }) => {
     const [popperElement, setPopperElement] = useState(null);
-    const { attributes, styles } = usePopper(referenceElement, popperElement, {
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset,
-                },
-            },
-        ],
+    const { placement: resolvedPlacement, refs, strategy, x, y, } = usePopoverPosition({
+        offset,
         placement,
     });
+    useEffect(() => {
+        refs.setReference(referenceElement);
+    }, [referenceElement, refs]);
+    useEffect(() => {
+        refs.setFloating(popperElement);
+    }, [popperElement, refs]);
     if (!visible)
         return null;
-    return (React.createElement("div", { className: 'str-chat__tooltip', ref: setPopperElement, style: styles.popper, ...attributes.popper }, children));
+    return (React.createElement("div", { className: 'str-chat__tooltip', "data-placement": resolvedPlacement, ref: setPopperElement, style: { left: x ?? 0, position: strategy, top: y ?? 0 } }, children));
 };

package/dist/context/DialogManagerContext.d.ts

@@ -25,4 +25,5 @@ export declare const useDialogManager: ({ dialogId, dialogManagerId, }?: UseDial
 export declare const modalDialogManagerId: "modal-dialog-manager";
 export declare const ModalDialogManagerProvider: ({ children }: PropsWithChildrenOnly) => React.JSX.Element;
 export declare const useModalDialogManager: () => DialogManager | undefined;
+export declare const useNearestDialogManagerContext: () => DialogManagerProviderContextValue | undefined;
 export {};

package/dist/context/DialogManagerContext.js

@@ -121,3 +121,4 @@ export const useDialogManager = ({ dialogId, dialogManagerId, } = {}) => {
 export const modalDialogManagerId = 'modal-dialog-manager';
 export const ModalDialogManagerProvider = ({ children }) => (React.createElement(DialogManagerProvider, { id: modalDialogManagerId }, children));
 export const useModalDialogManager = () => useMemo(() => getDialogManager(modalDialogManagerId), []);
+export const useNearestDialogManagerContext = () => useContext(DialogManagerProviderContext);

package/dist/context/MessageContext.d.ts

@@ -92,6 +92,8 @@ export type MessageContextValue = {
      * A factory function that determines whether a message is AI generated or not.
      */
     isMessageAIGenerated?: (message: LocalMessage) => boolean;
+    /** Latest own message in currently displayed message set. */
+    lastOwnMessage?: LocalMessage;
     /** Latest message id on current channel */
     lastReceivedId?: string | null;
     /** DOMRect object for parent MessageList component */
@@ -106,6 +108,8 @@ export type MessageContextValue = {
     readBy?: UserResponse[];
     /** Custom function to render message text content, defaults to the renderText function: [utils](https://github.com/GetStream/stream-chat-react/blob/master/src/utils.tsx) */
     renderText?: (text?: string, mentioned_users?: UserResponse[], options?: RenderTextOptions) => ReactNode;
+    /** Keep track of read receipts for each message sent by the user. When disabled, only the last own message delivery / read status is rendered. */
+    returnAllReadData?: boolean;
     /** Comparator function to sort the list of reacted users
      * @deprecated use `reactionDetailsSort` instead
      */