stream-chat-react 13.12.0 → 13.13.0

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.12.0";
+        const version = "13.13.0";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/MessageList/MessageList.js

@@ -25,9 +25,8 @@ 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;
     const [listElement, setListElement] = React.useState(null);
-    const [ulElement, setUlElement] = React.useState(null);
     const { customClasses } = useChatContext('MessageList');
-    const { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListMainPanel = DefaultMessageListMainPanel, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, } = useComponentContext('MessageList');
+    const { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListMainPanel = DefaultMessageListMainPanel, MessageListNotifications = DefaultMessageListNotifications, MessageListWrapper = 'ul', MessageNotification = DefaultMessageNotification, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, } = useComponentContext('MessageList');
     const { hasNewMessages, isMessageListScrolledToBottom, onScroll, scrollToBottom, wrapperRect, } = useScrollLocationLogic({
         hasMoreNewer,
         listElement,
@@ -125,7 +124,7 @@ const MessageListWithContext = (props) => {
     }, [scrollToBottom, hasMoreNewer]);
     React.useLayoutEffect(() => {
         if (highlightedMessageId) {
-            const element = ulElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
+            const element = listElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
             element?.scrollIntoView({ block: 'center' });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -135,12 +134,16 @@ const MessageListWithContext = (props) => {
     const dialogManagerId = threadList
         ? `message-list-dialog-manager-thread-${id}`
         : `message-list-dialog-manager-${id}`;
-    return (React.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } },
+    return (React.createElement(MessageListContextProvider, { value: {
+            listElement,
+            processedMessages: enrichedMessages,
+            scrollToBottom,
+        } },
         React.createElement(MessageListMainPanel, null,
             React.createElement(DialogManagerProvider, { id: dialogManagerId },
                 !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
                 React.createElement("div", { className: clsx(messageListClass, customClasses?.threadList), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, { className: 'str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore, threshold: loadMoreScrollThreshold, ...restInternalInfiniteScrollProps },
-                    React.createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
+                    React.createElement(MessageListWrapper, { className: 'str-chat__ul' }, elements),
                     React.createElement(TypingIndicator, { threadList: threadList }),
                     React.createElement("div", { key: 'bottom' })))))),
         React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottomFromNotification, threadList: threadList, unreadCount: threadList ? undefined : channelUnreadUiState?.unread_messages })));

package/dist/components/MessageList/renderMessages.js

@@ -5,24 +5,24 @@ import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
 import { EventComponent as DefaultMessageSystem } from '../EventComponent';
 import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from './UnreadMessagesSeparator';
 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 { DateSeparator = DefaultDateSeparator, HeaderComponent, MessageListItem = 'li', MessageSystem = DefaultMessageSystem, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, } = components;
     const renderedMessages = [];
     let firstMessage;
     let previousMessage = undefined;
     for (let index = 0; index < messages.length; index++) {
         const message = messages[index];
         if (isDateSeparatorMessage(message)) {
-            renderedMessages.push(React.createElement("li", { key: `${message.date.toISOString()}-i` },
+            renderedMessages.push(React.createElement(MessageListItem, { "data-index": index, key: `${message.date.toISOString()}-i` },
                 React.createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
         }
         else if (isIntroMessage(message)) {
             if (HeaderComponent) {
-                renderedMessages.push(React.createElement("li", { key: 'intro' },
+                renderedMessages.push(React.createElement(MessageListItem, { "data-index": index, key: 'intro' },
                     React.createElement(HeaderComponent, null)));
             }
         }
         else if (message.type === 'system') {
-            renderedMessages.push(React.createElement("li", { "data-message-id": message.id, key: message.id || message.created_at.toISOString() },
+            renderedMessages.push(React.createElement(MessageListItem, { "data-index": index, "data-message-id": message.id, key: message.id || message.created_at.toISOString() },
                 React.createElement(MessageSystem, { message: message })));
         }
         else {
@@ -41,9 +41,9 @@ export function defaultRenderMessages({ channelUnreadUiState, components, custom
                 unreadMessageCount: channelUnreadUiState?.unread_messages,
             });
             renderedMessages.push(React.createElement(Fragment, { key: message.id || message.created_at.toISOString() },
-                isFirstUnreadMessage && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                isFirstUnreadMessage && UnreadMessagesSeparator && (React.createElement(MessageListItem, { 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(MessageListItem, { className: messageClass, "data-index": index, "data-message-id": message.id, "data-testid": messageClass },
                     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/ComponentContext.d.ts

@@ -178,6 +178,10 @@ export type ComponentContextValue = {
     UnreadMessagesSeparator?: React.ComponentType<UnreadMessagesSeparatorProps>;
     /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
     VirtualMessage?: React.ComponentType<FixedHeightMessageProps>;
+    /** Custom UI component to wrap MessageList children. Default is the `ul` tag */
+    MessageListWrapper?: React.ComponentType<PropsWithChildren>;
+    /** Custom UI component to wrap each element of MessageList. Default is the `li` tag */
+    MessageListItem?: React.ComponentType<PropsWithChildren>;
 };
 export declare const ComponentContext: React.Context<ComponentContextValue>;
 export declare const ComponentProvider: ({ children, value, }: PropsWithChildren<{

package/dist/context/MessageListContext.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
+import type { RenderedMessage } from '../components';
 export type MessageListContextValue = {
+    /** Enriched message list, including date separators and intro message (if enabled) */
+    processedMessages: RenderedMessage[];
     /** The scroll container within which the messages and typing indicator are rendered */
     listElement: HTMLDivElement | null;
     /** Function that scrolls the `listElement` to the bottom. */