stream-chat-react 12.0.0 → 12.1.0

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

@@ -3,112 +3,10 @@ import { ChannelQueryOptions, EventAPIResponse, Message, MessageResponse, Channe
 import { OnMentionAction } from './hooks/useMentionsHandlers';
 import { LoadingErrorIndicatorProps } from '../Loading';
 import { ComponentContextValue, StreamMessage } from '../../context';
-import type { UnreadMessagesNotificationProps } from '../MessageList';
-import type { MessageProps } from '../Message';
 import type { MessageInputProps } from '../MessageInput';
 import type { ChannelUnreadUiState, CustomTrigger, DefaultStreamChatGenerics, GiphyVersions, ImageAttachmentSizeHandler, SendMessageOptions, UpdateMessageOptions, VideoAttachmentSizeHandler } from '../../types/types';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
-import { ReactionOptions } from '../Reactions';
-type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** Custom UI component to display a message attachment, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) */
-    Attachment?: ComponentContextValue<StreamChatGenerics>['Attachment'];
-    /** Custom UI component to display an attachment previews in MessageInput, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentPreviewList.tsx) */
-    AttachmentPreviewList?: ComponentContextValue<StreamChatGenerics>['AttachmentPreviewList'];
-    /** Custom UI component to display AudioRecorder in MessageInput, defaults to and accepts same props as: [AudioRecorder](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AudioRecorder.tsx) */
-    AudioRecorder?: ComponentContextValue<StreamChatGenerics>['AudioRecorder'];
-    /** Optional UI component to override the default suggestion Item component, defaults to and accepts same props as: [Item](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/Item.js) */
-    AutocompleteSuggestionItem?: ComponentContextValue<StreamChatGenerics>['AutocompleteSuggestionItem'];
-    /** Optional UI component to override the default List component that displays suggestions, defaults to and accepts same props as: [List](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/List.js) */
-    AutocompleteSuggestionList?: ComponentContextValue<StreamChatGenerics>['AutocompleteSuggestionList'];
-    /** UI component to display a user's avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
-    Avatar?: ComponentContextValue<StreamChatGenerics>['Avatar'];
-    /** Custom UI component to display <img/> elements resp. a fallback in case of load error, defaults to and accepts same props as: [BaseImage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/BaseImage.tsx) */
-    BaseImage?: ComponentContextValue<StreamChatGenerics>['BaseImage'];
-    /** Custom UI component to display the slow mode cooldown timer, defaults to and accepts same props as: [CooldownTimer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/CooldownTimer.tsx) */
-    CooldownTimer?: ComponentContextValue<StreamChatGenerics>['CooldownTimer'];
-    /** Custom UI component to render set of buttons to be displayed in the MessageActionsBox, defaults to and accepts same props as: [CustomMessageActionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/CustomMessageActionsList.tsx) */
-    CustomMessageActionsList?: ComponentContextValue<StreamChatGenerics>['CustomMessageActionsList'];
-    /** Custom UI component for date separators, defaults to and accepts same props as: [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator.tsx) */
-    DateSeparator?: ComponentContextValue<StreamChatGenerics>['DateSeparator'];
-    /** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
-    EditMessageInput?: ComponentContextValue<StreamChatGenerics>['EditMessageInput'];
-    /** Custom UI component for rendering button with emoji picker in MessageInput */
-    EmojiPicker?: ComponentContextValue<StreamChatGenerics>['EmojiPicker'];
-    /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */
-    emojiSearchIndex?: ComponentContextValue<StreamChatGenerics>['emojiSearchIndex'];
-    /** Custom UI component to be displayed when the `MessageList` is empty, defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx)  */
-    EmptyStateIndicator?: ComponentContextValue<StreamChatGenerics>['EmptyStateIndicator'];
-    /** Custom UI component for file upload icon, defaults to and accepts same props as: [FileUploadIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
-    FileUploadIcon?: ComponentContextValue<StreamChatGenerics>['FileUploadIcon'];
-    /** Custom UI component to render a Giphy preview in the `VirtualizedMessageList` */
-    GiphyPreviewMessage?: ComponentContextValue<StreamChatGenerics>['GiphyPreviewMessage'];
-    /** Custom UI component to render at the top of the `MessageList` */
-    HeaderComponent?: ComponentContextValue<StreamChatGenerics>['HeaderComponent'];
-    /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
-    Input?: ComponentContextValue<StreamChatGenerics>['Input'];
-    /** Custom component to render link previews in message input **/
-    LinkPreviewList?: ComponentContextValue<StreamChatGenerics>['LinkPreviewList'];
-    /** Custom UI component to be shown if the channel query fails, defaults to and accepts same props as: [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) */
-    LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
-    /** Custom UI component to render while the `MessageList` is loading new messages, defaults to and accepts same props as: [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) */
-    LoadingIndicator?: ComponentContextValue<StreamChatGenerics>['LoadingIndicator'];
-    /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
-    Message?: ComponentContextValue<StreamChatGenerics>['Message'];
-    /** Custom UI component to display the contents of a bounced message modal. Usually it allows to retry, edit, or delete the message. Defaults to and accepts the same props as: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) */
-    MessageBouncePrompt?: ComponentContextValue<StreamChatGenerics>['MessageBouncePrompt'];
-    /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
-    MessageDeleted?: ComponentContextValue<StreamChatGenerics>['MessageDeleted'];
-    /** Custom UI component that displays message and connection status notifications in the `MessageList`, defaults to and accepts same props as [DefaultMessageListNotifications](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageListNotifications.tsx) */
-    MessageListNotifications?: ComponentContextValue<StreamChatGenerics>['MessageListNotifications'];
-    /** Custom UI component to display a notification when scrolled up the list and new messages arrive, defaults to and accepts same props as [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx) */
-    MessageNotification?: ComponentContextValue<StreamChatGenerics>['MessageNotification'];
-    /** Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) */
-    MessageOptions?: ComponentContextValue<StreamChatGenerics>['MessageOptions'];
-    /** Custom UI component to display message replies, defaults to and accepts same props as: [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) */
-    MessageRepliesCountButton?: ComponentContextValue<StreamChatGenerics>['MessageRepliesCountButton'];
-    /** Custom UI component to display message delivery status, defaults to and accepts same props as: [MessageStatus](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageStatus.tsx) */
-    MessageStatus?: ComponentContextValue<StreamChatGenerics>['MessageStatus'];
-    /** Custom UI component to display system messages, defaults to and accepts same props as: [EventComponent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx) */
-    MessageSystem?: ComponentContextValue<StreamChatGenerics>['MessageSystem'];
-    /** Custom UI component to display a timestamp on a message, defaults to and accepts same props as: [MessageTimestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) */
-    MessageTimestamp?: ComponentContextValue<StreamChatGenerics>['MessageTimestamp'];
-    /** Custom UI component for viewing message's image attachments, defaults to and accepts the same props as [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */
-    ModalGallery?: ComponentContextValue<StreamChatGenerics>['ModalGallery'];
-    /** Custom UI component to override default pinned message indicator, defaults to and accepts same props as: [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) */
-    PinIndicator?: ComponentContextValue<StreamChatGenerics>['PinIndicator'];
-    /** Custom UI component to override quoted message UI on a sent message, defaults to and accepts same props as: [QuotedMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) */
-    QuotedMessage?: ComponentContextValue<StreamChatGenerics>['QuotedMessage'];
-    /** Custom UI component to override the message input's quoted message preview, defaults to and accepts same props as: [QuotedMessagePreview](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/QuotedMessagePreview.tsx) */
-    QuotedMessagePreview?: ComponentContextValue<StreamChatGenerics>['QuotedMessagePreview'];
-    /** Custom reaction options to be applied to ReactionSelector, ReactionList and SimpleReactionList components */
-    reactionOptions?: ReactionOptions;
-    /** Custom UI component to display the reaction selector, defaults to and accepts same props as: [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) */
-    ReactionSelector?: ComponentContextValue<StreamChatGenerics>['ReactionSelector'];
-    /** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) */
-    ReactionsList?: ComponentContextValue<StreamChatGenerics>['ReactionsList'];
-    /** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
-    SendButton?: ComponentContextValue<StreamChatGenerics>['SendButton'];
-    /** Custom UI component button for initiating audio recording, defaults to and accepts same props as: [StartRecordingAudioButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx) */
-    StartRecordingAudioButton?: ComponentContextValue<StreamChatGenerics>['StartRecordingAudioButton'];
-    /** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
-    ThreadHead?: React.ComponentType<MessageProps<StreamChatGenerics>>;
-    /** Custom UI component to display the header of a `Thread`, defaults to and accepts same props as: [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
-    ThreadHeader?: ComponentContextValue<StreamChatGenerics>['ThreadHeader'];
-    /** Custom UI component to display the start of a threaded `MessageList`, defaults to and accepts same props as: [DefaultThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
-    ThreadStart?: ComponentContextValue<StreamChatGenerics>['ThreadStart'];
-    /** Custom UI component to display a date used in timestamps. It's used internally by the default `MessageTimestamp`, and to display a timestamp for edited messages. */
-    Timestamp?: ComponentContextValue<StreamChatGenerics>['Timestamp'];
-    /** Optional context provider that lets you override the default autocomplete triggers, defaults to: [DefaultTriggerProvider](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/DefaultTriggerProvider.tsx) */
-    TriggerProvider?: ComponentContextValue<StreamChatGenerics>['TriggerProvider'];
-    /** Custom UI component for the typing indicator, defaults to and accepts same props as: [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) */
-    TypingIndicator?: ComponentContextValue<StreamChatGenerics>['TypingIndicator'];
-    /** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */
-    UnreadMessagesNotification?: React.ComponentType<UnreadMessagesNotificationProps>;
-    /** Custom UI component that separates read messages from unread, defaults to and accepts same props as: [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) */
-    UnreadMessagesSeparator?: ComponentContextValue<StreamChatGenerics>['UnreadMessagesSeparator'];
-    /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
-    VirtualMessage?: ComponentContextValue<StreamChatGenerics>['VirtualMessage'];
-};
+type ChannelPropsForwardedToComponentContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ComponentContextValue<StreamChatGenerics>, 'Attachment' | 'AttachmentPreviewList' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'Message' | 'MessageBouncePrompt' | 'MessageDeleted' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'QuotedMessage' | 'QuotedMessagePreview' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'SendButton' | 'StartRecordingAudioButton' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TriggerProvider' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage'>;
 export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = ChannelPropsForwardedToComponentContext<StreamChatGenerics> & {
     /** List of accepted file types */
     acceptedFiles?: string[];
@@ -153,6 +51,8 @@ export type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics =
      * Preventing to initialize the channel on mount allows us to postpone the channel creation to a later point in time.
      */
     initializeOnMount?: boolean;
+    /** Custom UI component to be shown if the channel query fails, defaults to and accepts same props as: [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) */
+    LoadingErrorIndicator?: React.ComponentType<LoadingErrorIndicatorProps>;
     /** Configuration parameter to mark the active channel as read when mounted (opened). By default, the channel is marked read on mount. */
     markReadOnMount?: boolean;
     /** Maximum number of attachments allowed per message */

package/dist/components/MessageList/MessageList.js

@@ -16,7 +16,7 @@ import { InfiniteScroll } from '../InfiniteScrollPaginator/InfiniteScroll';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
 import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
-import { MessageListMainPanel } from './MessageListMainPanel';
+import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';
 import { defaultRenderMessages } from './renderMessages';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, } from '../../constants/limits';
 const MessageListWithContext = (props) => {
@@ -25,7 +25,7 @@ const MessageListWithContext = (props) => {
     const [listElement, setListElement] = React.useState(null);
     const [ulElement, setUlElement] = React.useState(null);
     const { customClasses } = useChatContext('MessageList');
-    const { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, } = useComponentContext('MessageList');
+    const { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, MessageListMainPanel = DefaultMessageListMainPanel, } = useComponentContext('MessageList');
     const { hasNewMessages, isMessageListScrolledToBottom, onScroll, scrollToBottom, wrapperRect, } = useScrollLocationLogic({
         hasMoreNewer,
         listElement,

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { PropsWithChildrenOnly } from '../../types/types';
-export declare const MESSAGE_LIST_MAIN_PANEL_CLASS: "str-chat__main-panel-inner";
+export declare const MESSAGE_LIST_MAIN_PANEL_CLASS: "str-chat__main-panel-inner str-chat__message-list-main-panel";
 export declare const MessageListMainPanel: ({ children }: PropsWithChildrenOnly) => React.JSX.Element;

package/dist/components/MessageList/MessageListMainPanel.js

@@ -1,3 +1,3 @@
 import React from 'react';
-export const MESSAGE_LIST_MAIN_PANEL_CLASS = 'str-chat__main-panel-inner';
+export const MESSAGE_LIST_MAIN_PANEL_CLASS = 'str-chat__main-panel-inner str-chat__message-list-main-panel';
 export const MessageListMainPanel = ({ children }) => (React.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children));

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -6,7 +6,7 @@ import { useGiphyPreview, useMessageSetKey, useNewMessageNotification, usePrepen
 import { useMarkRead } from './hooks/useMarkRead';
 import { MessageNotification as DefaultMessageNotification } from './MessageNotification';
 import { MessageListNotifications as DefaultMessageListNotifications } from './MessageListNotifications';
-import { MessageListMainPanel } from './MessageListMainPanel';
+import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';
 import { getGroupStyles, getLastReceived, processMessages, } from './utils';
 import { MessageSimple } from '../Message';
 import { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';
@@ -57,7 +57,7 @@ const VirtualizedMessageListWithContext = (props) => {
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
     useCaptureResizeObserverExceededError();
-    const { DateSeparator = DefaultDateSeparator, GiphyPreviewMessage = DefaultGiphyPreviewMessage, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, MessageSystem = DefaultMessageSystem, UnreadMessagesNotification = DefaultUnreadMessagesNotification, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageSimple, TypingIndicator, } = useComponentContext('VirtualizedMessageList');
+    const { DateSeparator = DefaultDateSeparator, GiphyPreviewMessage = DefaultGiphyPreviewMessage, MessageListNotifications = DefaultMessageListNotifications, MessageNotification = DefaultMessageNotification, MessageSystem = DefaultMessageSystem, MessageListMainPanel = DefaultMessageListMainPanel, UnreadMessagesNotification = DefaultUnreadMessagesNotification, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageSimple, TypingIndicator, } = useComponentContext('VirtualizedMessageList');
     const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
     const { client, customClasses } = useChatContext('VirtualizedMessageList');
     const virtuoso = useRef(null);

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

@@ -21,10 +21,10 @@ export const useUnreadMessagesNotification = ({ isMessageListScrolledToBottom, s
             setShow(false);
             return;
         }
-        const msgListPanel = document.querySelector(`.${MESSAGE_LIST_MAIN_PANEL_CLASS}`);
+        const [msgListPanel] = document.getElementsByClassName(MESSAGE_LIST_MAIN_PANEL_CLASS);
         if (!msgListPanel)
             return;
-        const observedTarget = document.querySelector(`.${UNREAD_MESSAGE_SEPARATOR_CLASS}`);
+        const [observedTarget] = document.getElementsByClassName(UNREAD_MESSAGE_SEPARATOR_CLASS);
         if (!observedTarget) {
             setShow(true);
             return;

package/dist/context/ComponentContext.d.ts

@@ -3,49 +3,91 @@ import { BaseImageProps, CooldownTimerProps, CustomMessageActionsListProps, Star
 import type { AttachmentPreviewListProps, AttachmentProps, AvatarProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
 import type { MessageBouncePromptProps } from '../components/MessageBounce';
 import type { TimestampProps } from '../components/Message/Timestamp';
-import type { CustomTrigger, DefaultStreamChatGenerics, UnknownType } from '../types/types';
+import type { CustomTrigger, DefaultStreamChatGenerics, PropsWithChildrenOnly, UnknownType } from '../types/types';
 export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
+    /** Custom UI component to display a message attachment, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) */
     Attachment?: React.ComponentType<AttachmentProps<StreamChatGenerics>>;
+    /** Custom UI component to display an attachment previews in MessageInput, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentPreviewList.tsx) */
     AttachmentPreviewList?: React.ComponentType<AttachmentPreviewListProps>;
+    /** Custom UI component to display AudioRecorder in MessageInput, defaults to and accepts same props as: [AudioRecorder](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AudioRecorder.tsx) */
     AudioRecorder?: React.ComponentType;
+    /** Optional UI component to override the default suggestion Item component, defaults to and accepts same props as: [Item](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/Item.js) */
     AutocompleteSuggestionItem?: React.ComponentType<SuggestionItemProps<StreamChatGenerics>>;
+    /** Optional UI component to override the default List component that displays suggestions, defaults to and accepts same props as: [List](https://github.com/GetStream/stream-chat-react/blob/master/src/components/AutoCompleteTextarea/List.js) */
     AutocompleteSuggestionList?: React.ComponentType<SuggestionListProps<StreamChatGenerics>>;
+    /** UI component to display a user's avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
     Avatar?: React.ComponentType<AvatarProps<StreamChatGenerics>>;
+    /** Custom UI component to display <img/> elements resp. a fallback in case of load error, defaults to and accepts same props as: [BaseImage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/BaseImage.tsx) */
     BaseImage?: React.ComponentType<BaseImageProps>;
+    /** Custom UI component to display the slow mode cooldown timer, defaults to and accepts same props as: [CooldownTimer](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/CooldownTimer.tsx) */
     CooldownTimer?: React.ComponentType<CooldownTimerProps>;
+    /** Custom UI component to render set of buttons to be displayed in the MessageActionsBox, defaults to and accepts same props as: [CustomMessageActionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/CustomMessageActionsList.tsx) */
     CustomMessageActionsList?: React.ComponentType<CustomMessageActionsListProps<StreamChatGenerics>>;
+    /** Custom UI component for date separators, defaults to and accepts same props as: [DateSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/DateSeparator.tsx) */
     DateSeparator?: React.ComponentType<DateSeparatorProps>;
+    /** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
     EditMessageInput?: React.ComponentType<MessageInputProps<StreamChatGenerics>>;
+    /** Custom UI component for rendering button with emoji picker in MessageInput */
     EmojiPicker?: React.ComponentType;
+    /** Mechanism to be used with autocomplete and text replace features of the `MessageInput` component, see [emoji-mart `SearchIndex`](https://github.com/missive/emoji-mart#%EF%B8%8F%EF%B8%8F-headless-search) */
     emojiSearchIndex?: EmojiSearchIndex;
+    /** Custom UI component to be displayed when the `MessageList` is empty, defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx)  */
     EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
+    /** Custom UI component for file upload icon, defaults to and accepts same props as: [FileUploadIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
     FileUploadIcon?: React.ComponentType;
+    /** Custom UI component to render a Giphy preview in the `VirtualizedMessageList` */
     GiphyPreviewMessage?: React.ComponentType<GiphyPreviewMessageProps<StreamChatGenerics>>;
+    /** Custom UI component to render at the top of the `MessageList` */
     HeaderComponent?: React.ComponentType;
+    /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
     Input?: React.ComponentType<MessageInputProps<StreamChatGenerics, V>>;
+    /** Custom component to render link previews in message input **/
     LinkPreviewList?: React.ComponentType<LinkPreviewListProps>;
+    /** Custom UI component to render while the `MessageList` is loading new messages, defaults to and accepts same props as: [LoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingIndicator.tsx) */
     LoadingIndicator?: React.ComponentType<LoadingIndicatorProps>;
+    /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
     Message?: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;
+    /** Custom UI component to display the contents of a bounced message modal. Usually it allows to retry, edit, or delete the message. Defaults to and accepts the same props as: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) */
     MessageBouncePrompt?: React.ComponentType<MessageBouncePromptProps>;
+    /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
     MessageDeleted?: React.ComponentType<MessageDeletedProps<StreamChatGenerics>>;
+    MessageListMainPanel?: React.ComponentType<PropsWithChildrenOnly>;
+    /** Custom UI component that displays message and connection status notifications in the `MessageList`, defaults to and accepts same props as [DefaultMessageListNotifications](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageListNotifications.tsx) */
     MessageListNotifications?: React.ComponentType<MessageListNotificationsProps>;
+    /** Custom UI component to display a notification when scrolled up the list and new messages arrive, defaults to and accepts same props as [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx) */
     MessageNotification?: React.ComponentType<MessageNotificationProps>;
+    /** Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) */
     MessageOptions?: React.ComponentType<MessageOptionsProps<StreamChatGenerics>>;
+    /** Custom UI component to display message replies, defaults to and accepts same props as: [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) */
     MessageRepliesCountButton?: React.ComponentType<MessageRepliesCountButtonProps>;
+    /** Custom UI component to display message delivery status, defaults to and accepts same props as: [MessageStatus](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageStatus.tsx) */
     MessageStatus?: React.ComponentType<MessageStatusProps>;
+    /** Custom UI component to display system messages, defaults to and accepts same props as: [EventComponent](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx) */
     MessageSystem?: React.ComponentType<EventComponentProps<StreamChatGenerics>>;
+    /** Custom UI component to display a timestamp on a message, defaults to and accepts same props as: [MessageTimestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) */
     MessageTimestamp?: React.ComponentType<MessageTimestampProps<StreamChatGenerics>>;
+    /** Custom UI component for viewing message's image attachments, defaults to and accepts the same props as [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */
     ModalGallery?: React.ComponentType<ModalGalleryProps>;
+    /** Custom UI component to override default pinned message indicator, defaults to and accepts same props as: [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) */
     PinIndicator?: React.ComponentType<PinIndicatorProps<StreamChatGenerics>>;
+    /** Custom UI component to override quoted message UI on a sent message, defaults to and accepts same props as: [QuotedMessage](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) */
     QuotedMessage?: React.ComponentType;
+    /** Custom UI component to override the message input's quoted message preview, defaults to and accepts same props as: [QuotedMessagePreview](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/QuotedMessagePreview.tsx) */
     QuotedMessagePreview?: React.ComponentType<QuotedMessagePreviewProps<StreamChatGenerics>>;
+    /** Custom reaction options to be applied to ReactionSelector, ReactionList and SimpleReactionList components */
     reactionOptions?: ReactionOptions;
+    /** Custom UI component to display the reaction selector, defaults to and accepts same props as: [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) */
     ReactionSelector?: React.ForwardRefExoticComponent<ReactionSelectorProps<StreamChatGenerics>>;
+    /** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) */
     ReactionsList?: React.ComponentType<ReactionsListProps<StreamChatGenerics>>;
     RecordingPermissionDeniedNotification?: React.ComponentType<RecordingPermissionDeniedNotificationProps>;
+    /** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
     SendButton?: React.ComponentType<SendButtonProps<StreamChatGenerics>>;
+    /** Custom UI component button for initiating audio recording, defaults to and accepts same props as: [StartRecordingAudioButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx) */
     StartRecordingAudioButton?: React.ComponentType<StartRecordingAudioButtonProps>;
+    /** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
     ThreadHead?: React.ComponentType<MessageProps<StreamChatGenerics>>;
+    /** Custom UI component to display the header of a `Thread`, defaults to and accepts same props as: [DefaultThreadHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
     ThreadHeader?: React.ComponentType<ThreadHeaderProps<StreamChatGenerics>>;
     ThreadInput?: React.ComponentType<MessageInputProps<StreamChatGenerics, V>>;
     ThreadListEmptyPlaceholder?: React.ComponentType;
@@ -53,12 +95,19 @@ export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGe
     ThreadListItemUI?: React.ComponentType<ThreadListItemUIProps>;
     ThreadListLoadingIndicator?: React.ComponentType;
     ThreadListUnseenThreadsBanner?: React.ComponentType;
+    /** Custom UI component to display the start of a threaded `MessageList`, defaults to and accepts same props as: [DefaultThreadStart](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Thread/Thread.tsx) */
     ThreadStart?: React.ComponentType;
+    /** Custom UI component to display a date used in timestamps. It's used internally by the default `MessageTimestamp`, and to display a timestamp for edited messages. */
     Timestamp?: React.ComponentType<TimestampProps>;
+    /** Optional context provider that lets you override the default autocomplete triggers, defaults to: [DefaultTriggerProvider](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/DefaultTriggerProvider.tsx) */
     TriggerProvider?: React.ComponentType;
+    /** Custom UI component for the typing indicator, defaults to and accepts same props as: [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) */
     TypingIndicator?: React.ComponentType<TypingIndicatorProps>;
+    /** Custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to UnreadMessagesSeparator. Defaults to and accepts same props as: [UnreadMessagesNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesNotification.tsx) */
     UnreadMessagesNotification?: React.ComponentType<UnreadMessagesNotificationProps>;
+    /** Custom UI component that separates read messages from unread, defaults to and accepts same props as: [UnreadMessagesSeparator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/UnreadMessagesSeparator.tsx) */
     UnreadMessagesSeparator?: React.ComponentType<UnreadMessagesSeparatorProps>;
+    /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
     VirtualMessage?: React.ComponentType<FixedHeightMessageProps<StreamChatGenerics>>;
 };
 export declare const ComponentContext: React.Context<ComponentContextValue<DefaultStreamChatGenerics, CustomTrigger>>;

package/dist/index.browser.cjs

@@ -43427,7 +43427,7 @@ var import_react162 = require("react");
 
 // src/components/MessageList/MessageListMainPanel.tsx
 var import_react160 = __toESM(require("react"));
-var MESSAGE_LIST_MAIN_PANEL_CLASS = "str-chat__main-panel-inner";
+var MESSAGE_LIST_MAIN_PANEL_CLASS = "str-chat__main-panel-inner str-chat__message-list-main-panel";
 var MessageListMainPanel = ({ children }) => /* @__PURE__ */ import_react160.default.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children);
 
 // src/components/MessageList/UnreadMessagesSeparator.tsx
@@ -43465,9 +43465,9 @@ var useUnreadMessagesNotification = ({
       setShow(false);
       return;
     }
-    const msgListPanel = document.querySelector(`.${MESSAGE_LIST_MAIN_PANEL_CLASS}`);
+    const [msgListPanel] = document.getElementsByClassName(MESSAGE_LIST_MAIN_PANEL_CLASS);
     if (!msgListPanel) return;
-    const observedTarget = document.querySelector(`.${UNREAD_MESSAGE_SEPARATOR_CLASS}`);
+    const [observedTarget] = document.getElementsByClassName(UNREAD_MESSAGE_SEPARATOR_CLASS);
     if (!observedTarget) {
       setShow(true);
       return;
@@ -44153,7 +44153,8 @@ var MessageListWithContext = (props) => {
     MessageListNotifications: MessageListNotifications2 = MessageListNotifications,
     MessageNotification: MessageNotification2 = MessageNotification,
     TypingIndicator: TypingIndicator2 = TypingIndicator,
-    UnreadMessagesNotification: UnreadMessagesNotification2 = UnreadMessagesNotification
+    UnreadMessagesNotification: UnreadMessagesNotification2 = UnreadMessagesNotification,
+    MessageListMainPanel: MessageListMainPanel2 = MessageListMainPanel
   } = useComponentContext("MessageList");
   const {
     hasNewMessages,
@@ -44257,7 +44258,7 @@ var MessageListWithContext = (props) => {
     }
   }, [highlightedMessageId]);
   const showEmptyStateIndicator = elements.length === 0 && !threadList;
-  return /* @__PURE__ */ import_react176.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react176.default.createElement(MessageListMainPanel, null, /* @__PURE__ */ import_react176.default.createElement(DialogManagerProvider, { id: "message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react176.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react176.default.createElement(
+  return /* @__PURE__ */ import_react176.default.createElement(MessageListContextProvider, { value: { listElement, scrollToBottom } }, /* @__PURE__ */ import_react176.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react176.default.createElement(DialogManagerProvider, { id: "message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react176.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react176.default.createElement(
     "div",
     {
       className: (0, import_clsx38.default)(messageListClass, customClasses?.threadList),
@@ -44814,6 +44815,7 @@ var VirtualizedMessageListWithContext = (props) => {
     MessageListNotifications: MessageListNotifications2 = MessageListNotifications,
     MessageNotification: MessageNotification2 = MessageNotification,
     MessageSystem = EventComponent,
+    MessageListMainPanel: MessageListMainPanel2 = MessageListMainPanel,
     UnreadMessagesNotification: UnreadMessagesNotification2 = UnreadMessagesNotification,
     UnreadMessagesSeparator: UnreadMessagesSeparator2 = UnreadMessagesSeparator,
     VirtualMessage: MessageUIComponentFromContext = MessageSimple,
@@ -44966,7 +44968,7 @@ var VirtualizedMessageListWithContext = (props) => {
     };
   }, [highlightedMessageId, processedMessages]);
   if (!processedMessages) return null;
-  return /* @__PURE__ */ import_react186.default.createElement(import_react186.default.Fragment, null, /* @__PURE__ */ import_react186.default.createElement(MessageListMainPanel, null, /* @__PURE__ */ import_react186.default.createElement(DialogManagerProvider, { id: "virtualized-message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react186.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react186.default.createElement("div", { className: customClasses?.virtualizedMessageList || "str-chat__virtual-list" }, /* @__PURE__ */ import_react186.default.createElement(
+  return /* @__PURE__ */ import_react186.default.createElement(import_react186.default.Fragment, null, /* @__PURE__ */ import_react186.default.createElement(MessageListMainPanel2, null, /* @__PURE__ */ import_react186.default.createElement(DialogManagerProvider, { id: "virtualized-message-list-dialog-manager" }, !threadList && showUnreadMessagesNotification && /* @__PURE__ */ import_react186.default.createElement(UnreadMessagesNotification2, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ import_react186.default.createElement("div", { className: customClasses?.virtualizedMessageList || "str-chat__virtual-list" }, /* @__PURE__ */ import_react186.default.createElement(
     import_react_virtuoso3.Virtuoso,
     {
       atBottomStateChange,