stream-chat-react 12.0.0 → 12.2.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/ChannelList/ChannelList.js

@@ -66,7 +66,9 @@ const UnMemoizedChannelList = (props) => {
      * For some events, inner properties on the channel will update but the shallow comparison will not
      * force a re-render. Incrementing this dummy variable ensures the channel previews update.
      */
-    const forceUpdate = () => setChannelUpdateCount((count) => count + 1);
+    const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), [
+        setChannelUpdateCount,
+    ]);
     const onSearch = useCallback((event) => {
         if (!event.target.value) {
             setSearchActive(false);

package/dist/components/ChannelList/hooks/useChannelDeletedListener.js

@@ -12,7 +12,7 @@ export const useChannelDeletedListener = (setChannels, customHandler) => {
                     const channelIndex = channels.findIndex((channel) => channel.cid === event.cid);
                     if (channelIndex < 0)
                         return [...channels];
-                    // Remove the deleted channel from the list.s
+                    // Remove the deleted channel from the list
                     channels.splice(channelIndex, 1);
                     return [...channels];
                 });
@@ -22,6 +22,5 @@ export const useChannelDeletedListener = (setChannels, customHandler) => {
         return () => {
             client.off('channel.deleted', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useChannelHiddenListener.js

@@ -22,6 +22,5 @@ export const useChannelHiddenListener = (setChannels, customHandler) => {
         return () => {
             client.off('channel.hidden', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useChannelTruncatedListener.js

@@ -16,6 +16,5 @@ export const useChannelTruncatedListener = (setChannels, customHandler, forceUpd
         return () => {
             client.off('channel.truncated', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, forceUpdate, setChannels]);
 };

package/dist/components/ChannelList/hooks/useChannelUpdatedListener.js

@@ -28,6 +28,5 @@ export const useChannelUpdatedListener = (setChannels, customHandler, forceUpdat
         return () => {
             client.off('channel.updated', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, forceUpdate, setChannels]);
 };

package/dist/components/ChannelList/hooks/useChannelVisibleListener.js

@@ -22,6 +22,5 @@ export const useChannelVisibleListener = (setChannels, customHandler) => {
         return () => {
             client.off('channel.visible', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useConnectionRecoveredListener.js

@@ -12,6 +12,5 @@ export const useConnectionRecoveredListener = (forceUpdate) => {
         return () => {
             client.off('connection.recovered', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [client, forceUpdate]);
 };

package/dist/components/ChannelList/hooks/useMessageNewListener.js

@@ -26,6 +26,11 @@ export const useMessageNewListener = (setChannels, customHandler, lockChannelOrd
         return () => {
             client.off('message.new', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [lockChannelOrder]);
+    }, [
+        allowNewMessagesFromUnfilteredChannels,
+        client,
+        customHandler,
+        lockChannelOrder,
+        setChannels,
+    ]);
 };

package/dist/components/ChannelList/hooks/useNotificationAddedToChannelListener.js

@@ -29,6 +29,5 @@ export const useNotificationAddedToChannelListener = (setChannels, customHandler
         return () => {
             client.off('notification.added_to_channel', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useNotificationMessageNewListener.js

@@ -22,6 +22,5 @@ export const useNotificationMessageNewListener = (setChannels, customHandler, al
         return () => {
             client.off('notification.message_new', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [allowNewMessagesFromUnfilteredChannels, client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useNotificationRemovedFromChannelListener.js

@@ -15,6 +15,5 @@ export const useNotificationRemovedFromChannelListener = (setChannels, customHan
         return () => {
             client.off('notification.removed_from_channel', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customHandler]);
+    }, [client, customHandler, setChannels]);
 };

package/dist/components/ChannelList/hooks/useUserPresenceChangedListener.js

@@ -20,6 +20,5 @@ export const useUserPresenceChangedListener = (setChannels) => {
         return () => {
             client.off('user.presence.changed', handleEvent);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [client, setChannels]);
 };

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.d.ts

@@ -8,7 +8,8 @@ import { ChatContextValue } from '../../context/ChatContext';
 import { ComponentContextValue } from '../../context/ComponentContext';
 import type { UserResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
-type VirtualizedMessageListPropsForContext = 'additionalMessageInputProps' | 'closeReactionSelectorOnClick' | 'customMessageActions' | 'customMessageRenderer' | 'formatDate' | 'head' | 'loadingMore' | 'Message' | 'messageActions' | 'shouldGroupByUser' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails' | 'threadList';
+type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActions' | 'formatDate' | 'messageActions' | 'openThread' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails';
+type VirtualizedMessageListPropsForContext = PropsDrilledToMessage | 'closeReactionSelectorOnClick' | 'customMessageRenderer' | 'head' | 'loadingMore' | 'Message' | 'shouldGroupByUser' | 'threadList';
 /**
  * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions)
  */
@@ -36,7 +37,6 @@ export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics
     /** The number of unread messages in the current channel. */
     unreadMessageCount?: number;
 };
-type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActions' | 'formatDate' | 'messageActions' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails';
 export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {
     /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */
     additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext<StreamChatGenerics>>;

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';
@@ -50,14 +50,14 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
     return messages.length - 1;
 }
 const VirtualizedMessageListWithContext = (props) => {
-    const { additionalMessageInputProps, additionalVirtuosoProps = {}, channel, channelUnreadUiState, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, defaultItemHeight, disableDateSeparator = true, formatDate, groupStyles, hasMoreNewer, head, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, jumpToLatestMessage, loadingMore, loadMore, loadMoreNewer, maxTimeBetweenGroupedMessages, Message: MessageUIComponentFromProps, messageActions, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages, notifications, 
+    const { additionalMessageInputProps, additionalVirtuosoProps = {}, channel, channelUnreadUiState, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, defaultItemHeight, disableDateSeparator = true, formatDate, groupStyles, hasMoreNewer, head, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, jumpToLatestMessage, loadingMore, loadMore, loadMoreNewer, maxTimeBetweenGroupedMessages, Message: MessageUIComponentFromProps, messageActions, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages, notifications, openThread, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     overscan = 0, read, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showUnreadNotificationAlways, reactionDetailsSort, sortReactionDetails, sortReactions, stickToBottomScrollBehavior = 'smooth', suppressAutoscroll, threadList, } = props;
     const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } = additionalVirtuosoProps;
     // 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);
@@ -218,6 +218,7 @@ const VirtualizedMessageListWithContext = (props) => {
                             messageGroupStyles,
                             MessageSystem,
                             numItemsPrepended,
+                            openThread,
                             ownMessagesReadByOthers,
                             processedMessages,
                             reactionDetailsSort,

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -47,7 +47,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, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
+    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, openThread, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, threadList, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
     const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -89,7 +89,7 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     return (React.createElement(React.Fragment, null,
         showUnreadSeparatorAbove && (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, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, 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, 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 }),
         showUnreadSeparatorBelow && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };

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/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.d.ts

@@ -1,7 +1,6 @@
 import { StreamMessage } from '../../../../context';
 import { DefaultStreamChatGenerics } from '../../../../types/types';
 type UseScrollToBottomOnNewMessageParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    /** */
     scrollToBottom: () => void;
     messages?: StreamMessage<StreamChatGenerics>[];
     /** When `true`, the list will scroll to the latest message when the window regains focus */

package/dist/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.js

@@ -1,28 +1,32 @@
-import React, { useCallback, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 export const useScrollToBottomOnNewMessage = ({ messages, scrollToBottom, scrollToLatestMessageOnFocus, }) => {
-    const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = React.useState(false);
-    const resetNewMessagesReceivedInBackground = useCallback(() => {
-        setNewMessagesReceivedInBackground(false);
-    }, []);
-    useEffect(() => {
-        setNewMessagesReceivedInBackground(true);
-    }, [messages]);
-    const scrollToBottomIfConfigured = useCallback((event) => {
+    const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = useState(false);
+    const scrollToBottomIfConfigured = useRef();
+    scrollToBottomIfConfigured.current = (event) => {
         if (!scrollToLatestMessageOnFocus ||
             !newMessagesReceivedInBackground ||
-            event.target !== window)
+            event.target !== window) {
             return;
+        }
         setTimeout(scrollToBottom, 100);
-    }, [scrollToLatestMessageOnFocus, scrollToBottom, newMessagesReceivedInBackground]);
+    };
     useEffect(() => {
+        setNewMessagesReceivedInBackground(true);
+    }, [messages]);
+    useEffect(() => {
+        const handleFocus = (event) => {
+            scrollToBottomIfConfigured.current?.(event);
+        };
+        const handleBlur = () => {
+            setNewMessagesReceivedInBackground(false);
+        };
         if (typeof window !== 'undefined') {
-            window.addEventListener('focus', scrollToBottomIfConfigured);
-            window.addEventListener('blur', resetNewMessagesReceivedInBackground);
+            window.addEventListener('focus', handleFocus);
+            window.addEventListener('blur', handleBlur);
         }
         return () => {
-            window.removeEventListener('focus', scrollToBottomIfConfigured);
-            window.removeEventListener('blur', resetNewMessagesReceivedInBackground);
+            window.removeEventListener('focus', handleFocus);
+            window.removeEventListener('blur', handleBlur);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [scrollToBottomIfConfigured]);
+    }, []);
 };

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