stream-chat-react 13.11.0 → 13.13.0

package/dist/components/AudioPlayback/WithAudioPlayback.js

@@ -0,0 +1,57 @@
+import React, { useContext, useState } from 'react';
+import { useEffect } from 'react';
+import { AudioPlayerPool } from './AudioPlayerPool';
+import { audioPlayerNotificationsPluginFactory } from './plugins/AudioPlayerNotificationsPlugin';
+import { useChatContext, useTranslationContext } from '../../context';
+import { useStateStore } from '../../store';
+const AudioPlayerContext = React.createContext({
+    audioPlayers: null,
+});
+export const WithAudioPlayback = ({ allowConcurrentPlayback, children, }) => {
+    const [audioPlayers] = useState(() => new AudioPlayerPool({ allowConcurrentPlayback }));
+    useEffect(() => () => {
+        audioPlayers.clear();
+    }, [audioPlayers]);
+    return (React.createElement(AudioPlayerContext.Provider, { value: { audioPlayers } }, children));
+};
+const makeAudioPlayerId = ({ requester, src }) => `${requester ?? 'requester-unknown'}:${src}`;
+export const useAudioPlayer = ({ durationSeconds, fileSize, mimeType, playbackRates, plugins, requester = '', src, title, waveformData, }) => {
+    const { client } = useChatContext();
+    const { t } = useTranslationContext();
+    const { audioPlayers } = useContext(AudioPlayerContext);
+    const audioPlayer = src && audioPlayers
+        ? audioPlayers.getOrAdd({
+            durationSeconds,
+            fileSize,
+            id: makeAudioPlayerId({ requester, src }),
+            mimeType,
+            playbackRates,
+            plugins,
+            src,
+            title,
+            waveformData,
+        })
+        : undefined;
+    useEffect(() => {
+        if (!audioPlayer)
+            return;
+        /**
+         * Avoid having to pass client and translation function to AudioPlayer instances
+         * and instead provide plugin that takes care of translated notifications.
+         */
+        const notificationsPlugin = audioPlayerNotificationsPluginFactory({ client, t });
+        audioPlayer.setPlugins((currentPlugins) => [
+            ...currentPlugins.filter((plugin) => plugin.id !== notificationsPlugin.id),
+            notificationsPlugin,
+        ]);
+    }, [audioPlayer, client, t]);
+    return audioPlayer;
+};
+const activeAudioPlayerSelector = ({ activeAudioPlayer }) => ({
+    activeAudioPlayer,
+});
+export const useActiveAudioPlayer = () => {
+    const { audioPlayers } = useContext(AudioPlayerContext);
+    const { activeAudioPlayer } = useStateStore(audioPlayers?.state, activeAudioPlayerSelector) ?? {};
+    return activeAudioPlayer;
+};

package/dist/components/AudioPlayback/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AudioPlayer';
+export * from './plugins';
+export { useActiveAudioPlayer, useAudioPlayer, type UseAudioPlayerProps, type WithAudioPlaybackProps, WithAudioPlayback, } from './WithAudioPlayback';

package/dist/components/AudioPlayback/index.js

@@ -0,0 +1,3 @@
+export * from './AudioPlayer';
+export * from './plugins';
+export { useActiveAudioPlayer, useAudioPlayer, WithAudioPlayback, } from './WithAudioPlayback';

package/dist/components/AudioPlayback/plugins/AudioPlayerNotificationsPlugin.d.ts

@@ -0,0 +1,7 @@
+import type { AudioPlayerPlugin } from './AudioPlayerPlugin';
+import type { StreamChat } from 'stream-chat';
+import type { TFunction } from 'i18next';
+export declare const audioPlayerNotificationsPluginFactory: ({ client, t, }: {
+    client: StreamChat;
+    t: TFunction;
+}) => AudioPlayerPlugin;

package/dist/components/AudioPlayback/plugins/AudioPlayerNotificationsPlugin.js

@@ -0,0 +1,25 @@
+export const audioPlayerNotificationsPluginFactory = ({ client, t, }) => {
+    const errors = {
+        'failed-to-start': new Error(t('Failed to play the recording')),
+        'not-playable': new Error(t('Recording format is not supported and cannot be reproduced')),
+        'seek-not-supported': new Error(t('Cannot seek in the recording')),
+    };
+    return {
+        id: 'AudioPlayerNotificationsPlugin',
+        onError: ({ errCode, error: e }) => {
+            const error = (errCode && errors[errCode]) ??
+                e ??
+                new Error(t('Error reproducing the recording'));
+            client?.notifications.addError({
+                message: error.message,
+                options: {
+                    originalError: error,
+                    type: 'browser:audio:playback:error',
+                },
+                origin: {
+                    emitter: 'AudioPlayer',
+                },
+            });
+        },
+    };
+};

package/dist/components/AudioPlayback/plugins/AudioPlayerPlugin.d.ts

@@ -0,0 +1,10 @@
+import type { AudioPlayer, RegisterAudioPlayerErrorParams } from '../AudioPlayer';
+export type AudioPlayerPluginContext = {
+    player: AudioPlayer;
+};
+export type AudioPlayerPlugin = {
+    id: string;
+    onInit?(ctx: AudioPlayerPluginContext): void;
+    onError?(ctx: AudioPlayerPluginContext & RegisterAudioPlayerErrorParams): void;
+    onRemove?(ctx: AudioPlayerPluginContext): void;
+};

package/dist/components/AudioPlayback/plugins/AudioPlayerPlugin.js

@@ -0,0 +1 @@
+export {};

package/dist/components/AudioPlayback/plugins/index.d.ts

@@ -0,0 +1 @@
+export * from './AudioPlayerPlugin';

package/dist/components/AudioPlayback/plugins/index.js

@@ -0,0 +1 @@
+export * from './AudioPlayerPlugin';

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

@@ -9,6 +9,8 @@ type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Atta
 export type ChannelProps = ChannelPropsForwardedToComponentContext & {
     /** Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab */
     activeUnreadHandler?: (unread: number, documentTitle: string) => void;
+    /** Allows multiple audio players to play the audio at the same time. Disabled by default. */
+    allowConcurrentAudioPlayback?: boolean;
     /** The connected and active channel */
     channel?: StreamChannel;
     /**

package/dist/components/Channel/Channel.js

@@ -21,6 +21,7 @@ import { useThreadContext } from '../Threads';
 import { getChannel } from '../../utils';
 import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration, } from '../Attachment/attachment-sizing';
 import { useSearchFocusedMessage } from '../../experimental/Search/hooks';
+import { WithAudioPlayback } from '../AudioPlayback';
 const ChannelContainer = ({ children, className: additionalClassName, ...props }) => {
     const { customClasses, theme } = useChatContext('Channel');
     const { channelClass, chatClass } = useChannelContainerClasses({
@@ -47,7 +48,7 @@ const UnMemoizedChannel = (props) => {
     return React.createElement(ChannelInner, { ...props, channel: channel, key: channel.cid });
 };
 const ChannelInner = (props) => {
-    const { activeUnreadHandler, channel, channelQueryOptions: propChannelQueryOptions, children, doDeleteMessageRequest, doMarkReadRequest, doSendMessageRequest, doUpdateMessageRequest, initializeOnMount = true, LoadingErrorIndicator = DefaultLoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, markReadOnMount = true, onMentionsClick, onMentionsHover, skipMessageDataMemoization, } = props;
+    const { activeUnreadHandler, allowConcurrentAudioPlayback, channel, channelQueryOptions: propChannelQueryOptions, children, doDeleteMessageRequest, doMarkReadRequest, doSendMessageRequest, doUpdateMessageRequest, initializeOnMount = true, LoadingErrorIndicator = DefaultLoadingErrorIndicator, LoadingIndicator = DefaultLoadingIndicator, markReadOnMount = true, onMentionsClick, onMentionsHover, skipMessageDataMemoization, } = props;
     const channelQueryOptions = useMemo(() => defaultsDeep(propChannelQueryOptions, {
         messages: { limit: DEFAULT_INITIAL_CHANNEL_PAGE_SIZE },
     }), [propChannelQueryOptions]);
@@ -867,7 +868,8 @@ const ChannelInner = (props) => {
             React.createElement(ChannelActionProvider, { value: channelActionContextValue },
                 React.createElement(WithComponents, { overrides: componentContextValue },
                     React.createElement(TypingProvider, { value: typingContextValue },
-                        React.createElement("div", { className: clsx(chatContainerClass) }, children)))))));
+                        React.createElement(WithAudioPlayback, { allowConcurrentPlayback: allowConcurrentAudioPlayback },
+                            React.createElement("div", { className: clsx(chatContainerClass) }, children))))))));
 };
 /**
  * A wrapper component that provides channel data and renders children.

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.11.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/MediaRecorder/AudioRecorder/AudioRecordingPreview.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-export type AudioRecordingPlayerProps = React.ComponentProps<'audio'> & {
+export type AudioRecordingPlayerProps = {
     durationSeconds: number;
     mimeType?: string;
+    src?: string;
     waveformData?: number[];
 };
-export declare const AudioRecordingPreview: ({ durationSeconds, mimeType, waveformData, ...props }: AudioRecordingPlayerProps) => React.JSX.Element;
+export declare const AudioRecordingPreview: ({ durationSeconds, mimeType, src, waveformData, }: AudioRecordingPlayerProps) => React.JSX.Element | undefined;

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.js

@@ -1,19 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PauseIcon, PlayIcon } from '../../MessageInput/icons';
 import { RecordingTimer } from './RecordingTimer';
-import { useAudioController } from '../../Attachment/hooks/useAudioController';
 import { WaveProgressBar } from '../../Attachment';
-export const AudioRecordingPreview = ({ durationSeconds, mimeType, waveformData, ...props }) => {
-    const { audioRef, isPlaying, progress, secondsElapsed, seek, togglePlay } = useAudioController({
+import { useAudioPlayer } from '../../AudioPlayback';
+import { useStateStore } from '../../../store';
+const audioPlayerStateSelector = (state) => ({
+    isPlaying: state.isPlaying,
+    progress: state.progressPercent,
+    secondsElapsed: state.secondsElapsed,
+});
+export const AudioRecordingPreview = ({ durationSeconds, mimeType, src, waveformData, }) => {
+    const audioPlayer = useAudioPlayer({
         durationSeconds,
         mimeType,
+        src,
+        waveformData,
     });
+    const { isPlaying, progress, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
     const displayedDuration = secondsElapsed || durationSeconds;
+    useEffect(() => {
+        audioPlayer?.cancelScheduledRemoval();
+        return () => {
+            audioPlayer?.scheduleRemoval();
+        };
+    }, [audioPlayer]);
+    if (!audioPlayer)
+        return;
     return (React.createElement(React.Fragment, null,
-        React.createElement("audio", { ref: audioRef },
-            React.createElement("source", { src: props.src, type: mimeType })),
-        React.createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', "data-testid": 'audio-recording-preview-toggle-play-btn', onClick: togglePlay }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayIcon, null)),
+        React.createElement("button", { className: 'str-chat__audio_recorder__toggle-playback-button', "data-testid": 'audio-recording-preview-toggle-play-btn', onClick: audioPlayer.togglePlay }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayIcon, null)),
         React.createElement(RecordingTimer, { durationSeconds: displayedDuration }),
         React.createElement("div", { className: 'str-chat__wave-progress-bar__track-container' },
-            React.createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveformData || [] }))));
+            React.createElement(WaveProgressBar, { progress: progress, seek: audioPlayer.seek, waveformData: waveformData || [] }))));
 };

package/dist/components/MessageInput/AttachmentPreviewList/FileAttachmentPreview.js

@@ -9,7 +9,7 @@ export const FileAttachmentPreview = ({ attachment, handleRetry, removeAttachmen
         React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
             React.createElement(FileIcon, { filename: attachment.title, mimeType: attachment.mime_type })),
         React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
-                removeAttachments([attachment.localMetadata?.id]) },
+                removeAttachments([attachment.localMetadata?.id]), type: 'button' },
             React.createElement(CloseIcon, null)),
         ['blocked', 'failed'].includes(uploadState) && !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => {
                 handleRetry(attachment);

package/dist/components/MessageInput/AttachmentPreviewList/GeolocationPreview.js

@@ -8,7 +8,7 @@ export const GeolocationPreview = ({ location, PreviewImage = GeolocationPreview
     const { t } = useTranslationContext();
     return (React.createElement("div", { className: 'str-chat__location-preview', "data-testid": 'location-preview' },
         React.createElement(PreviewImage, { location: location }),
-        remove && (React.createElement("button", { "aria-label": t('aria/Remove location attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'location-preview-item-delete-button', onClick: remove },
+        remove && (React.createElement("button", { "aria-label": t('aria/Remove location attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'location-preview-item-delete-button', onClick: remove, type: 'button' },
             React.createElement(CloseIcon, null))),
         React.createElement("div", { className: 'str-chat__attachment-preview-metadata' }, location.durationMs ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: 'str-chat__attachment-preview-title', title: t('Shared live location') }, t('Live location')),

package/dist/components/MessageInput/AttachmentPreviewList/ImageAttachmentPreview.js

@@ -13,7 +13,7 @@ export const ImageAttachmentPreview = ({ attachment, handleRetry, removeAttachme
     return (React.createElement("div", { className: clsx('str-chat__attachment-preview-image', {
             'str-chat__attachment-preview-image--error': previewError,
         }), "data-testid": 'attachment-preview-image' },
-        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: uploadState === 'uploading', onClick: () => id && removeAttachments([id]) },
+        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: uploadState === 'uploading', onClick: () => id && removeAttachments([id]), type: 'button' },
             React.createElement(CloseIcon, null)),
         ['blocked', 'failed'].includes(uploadState) && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: () => handleRetry(attachment) },
             React.createElement(RetryIcon, null))),

package/dist/components/MessageInput/AttachmentPreviewList/UnsupportedAttachmentPreview.js

@@ -10,7 +10,7 @@ export const UnsupportedAttachmentPreview = ({ attachment, handleRetry, removeAt
         React.createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
             React.createElement(FileIcon, { filename: title, mimeType: attachment.mime_type })),
         React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id &&
-                removeAttachments([attachment.localMetadata?.id]) },
+                removeAttachments([attachment.localMetadata?.id]), type: 'button' },
             React.createElement(CloseIcon, null)),
         isLocalUploadAttachment(attachment) &&
             ['blocked', 'failed'].includes(attachment.localMetadata?.uploadState) &&

package/dist/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import type { LocalVoiceRecordingAttachment } from 'stream-chat';
 import type { UploadAttachmentPreviewProps } from './types';
 export type VoiceRecordingPreviewProps<CustomLocalMetadata = Record<string, unknown>> = UploadAttachmentPreviewProps<LocalVoiceRecordingAttachment<CustomLocalMetadata>>;
-export declare const VoiceRecordingPreview: ({ attachment, handleRetry, removeAttachments, }: VoiceRecordingPreviewProps) => React.JSX.Element;
+export declare const VoiceRecordingPreview: ({ attachment, handleRetry, removeAttachments, }: VoiceRecordingPreviewProps) => React.JSX.Element | null;

package/dist/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.js

@@ -1,20 +1,33 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PlayButton } from '../../Attachment';
 import { RecordingTimer } from '../../MediaRecorder';
 import { CloseIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
 import { FileIcon } from '../../ReactFileUtilities';
-import { useAudioController } from '../../Attachment/hooks/useAudioController';
 import { useTranslationContext } from '../../../context';
+import { useAudioPlayer } from '../../AudioPlayback';
+import { useStateStore } from '../../../store';
+const audioPlayerStateSelector = (state) => ({
+    isPlaying: state.isPlaying,
+    secondsElapsed: state.secondsElapsed,
+});
 export const VoiceRecordingPreview = ({ attachment, handleRetry, removeAttachments, }) => {
     const { t } = useTranslationContext();
-    const { audioRef, isPlaying, secondsElapsed, togglePlay } = useAudioController({
+    const audioPlayer = useAudioPlayer({
         mimeType: attachment.mime_type,
+        src: attachment.asset_url,
     });
+    const { isPlaying, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
+    useEffect(() => {
+        audioPlayer?.cancelScheduledRemoval();
+        return () => {
+            audioPlayer?.scheduleRemoval();
+        };
+    }, [audioPlayer]);
+    if (!audioPlayer)
+        return null;
     return (React.createElement("div", { className: 'str-chat__attachment-preview-voice-recording', "data-testid": 'attachment-preview-voice-recording' },
-        React.createElement("audio", { ref: audioRef },
-            React.createElement("source", { "data-testid": 'audio-source', src: attachment.asset_url, type: attachment.mime_type })),
-        React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay }),
-        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata.id]) },
+        React.createElement(PlayButton, { isPlaying: !!isPlaying, onClick: audioPlayer.togglePlay }),
+        React.createElement("button", { "aria-label": t('aria/Remove attachment'), className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: attachment.localMetadata?.uploadState === 'uploading', onClick: () => attachment.localMetadata?.id && removeAttachments([attachment.localMetadata.id]), type: 'button' },
             React.createElement(CloseIcon, null)),
         ['blocked', 'failed'].includes(attachment.localMetadata?.uploadState) &&
             !!handleRetry && (React.createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: () => handleRetry(attachment) },

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

@@ -1,4 +1,6 @@
+export * from './AIStateIndicator';
 export * from './Attachment';
+export * from './AudioPlayback';
 export * from './Avatar';
 export * from './Channel';
 export * from './ChannelHeader';
@@ -33,6 +35,5 @@ export * from './TypingIndicator';
 export * from './Window';
 export * from './Threads';
 export * from './ChatView';
-export * from './AIStateIndicator';
 export { UploadButton } from './ReactFileUtilities';
 export type { UploadButtonProps } from './ReactFileUtilities';

package/dist/components/index.js

@@ -1,4 +1,6 @@
+export * from './AIStateIndicator';
 export * from './Attachment';
+export * from './AudioPlayback';
 export * from './Avatar';
 export * from './Channel';
 export * from './ChannelHeader';
@@ -33,5 +35,4 @@ export * from './TypingIndicator';
 export * from './Window';
 export * from './Threads';
 export * from './ChatView';
-export * from './AIStateIndicator';
 export { UploadButton } from './ReactFileUtilities';

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