stream-chat-react 13.10.0 → 13.10.1

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

@@ -8,9 +8,13 @@ export const useCreateChannelStateContext = (value) => {
     const notificationsLength = notifications.length;
     const readUsers = Object.values(read);
     const readUsersLength = readUsers.length;
-    const readUsersLastReads = readUsers
-        .map(({ last_read }) => last_read.toISOString())
-        .join();
+    const readUsersLastReadDateStrings = [];
+    for (const { last_read } of readUsers) {
+        if (!lastRead)
+            continue;
+        readUsersLastReadDateStrings.push(last_read?.toISOString());
+    }
+    const readUsersLastReads = readUsersLastReadDateStrings.join();
     const threadMessagesLength = threadMessages?.length;
     const channelCapabilities = {};
     channelCapabilitiesArray.forEach((capability) => {

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.10.0";
+        const version = "13.10.1";
         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, 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 }));
+    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, lastOwnMessage: props.lastOwnMessage, 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, returnAllReadData: props.returnAllReadData, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
 };

package/dist/components/Message/MessageStatus.js

@@ -15,7 +15,7 @@ const UnMemoizedMessageStatus = (props) => {
     const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
     const { client } = useChatContext('MessageStatus');
     const { Avatar: contextAvatar } = useComponentContext('MessageStatus');
-    const { deliveredTo, isMyMessage, message, readBy, threadList } = useMessageContext('MessageStatus');
+    const { deliveredTo, isMyMessage, lastOwnMessage, message, readBy, returnAllReadData, threadList, } = useMessageContext('MessageStatus');
     const { t } = useTranslationContext('MessageStatus');
     const [referenceElement, setReferenceElement] = useState(null);
     const Avatar = propAvatar || contextAvatar || DefaultAvatar;
@@ -26,7 +26,11 @@ const UnMemoizedMessageStatus = (props) => {
     const sending = message.status === 'sending';
     const read = !!(readBy?.length && !justReadByMe && !threadList);
     const delivered = !!(deliveredTo?.length && !deliveredOnlyToMe && !read && !threadList);
-    const sent = message.status === 'received' && !delivered && !read && !threadList;
+    const sent = (returnAllReadData || lastOwnMessage?.id === message.id) &&
+        message.status === 'received' &&
+        !delivered &&
+        !read &&
+        !threadList;
     const readersWithoutOwnUser = read
         ? readBy.filter((item) => item.id !== client.user?.id)
         : [];

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/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,15 +1,25 @@
 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 { 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/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
      */