diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx index e7c6abbbf..2f6a3c007 100644 --- a/src/components/Channel/Channel.tsx +++ b/src/components/Channel/Channel.tsx @@ -74,8 +74,6 @@ import { useChannelContainerClasses } from './hooks/useChannelContainerClasses'; import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils'; import { getChannel } from '../../utils'; -import type { UnreadMessagesNotificationProps } from '../MessageList'; -import type { MessageProps } from '../Message'; import type { MessageInputProps } from '../MessageInput'; import type { @@ -93,111 +91,62 @@ import { getVideoAttachmentConfiguration, } from '../Attachment/attachment-sizing'; import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews'; -import { ReactionOptions } from '../Reactions'; import { useThreadContext } from '../Threads'; 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['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['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['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['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['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['Avatar']; - /** Custom UI component to display 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['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['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['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['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['EditMessageInput']; - /** Custom UI component for rendering button with emoji picker in MessageInput */ - EmojiPicker?: ComponentContextValue['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['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['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['FileUploadIcon']; - /** Custom UI component to render a Giphy preview in the `VirtualizedMessageList` */ - GiphyPreviewMessage?: ComponentContextValue['GiphyPreviewMessage']; - /** Custom UI component to render at the top of the `MessageList` */ - HeaderComponent?: ComponentContextValue['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['Input']; - /** Custom component to render link previews in message input **/ - LinkPreviewList?: ComponentContextValue['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; - /** 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['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['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['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['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['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['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['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['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['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['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['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['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['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['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['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['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['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['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['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>; - /** 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['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['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['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['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['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; - /** 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['UnreadMessagesSeparator']; - /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */ - VirtualMessage?: ComponentContextValue['VirtualMessage']; -}; +> = Pick< + ComponentContextValue, + | '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' +>; const isUserResponseArray = < StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics @@ -266,6 +215,8 @@ export type ChannelProps< * 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; /** 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 */ diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx index c30c94007..1472a17e9 100644 --- a/src/context/ComponentContext.tsx +++ b/src/context/ComponentContext.tsx @@ -60,48 +60,89 @@ 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>; + /** 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; + /** 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>; + /** 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>; + /** 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>; + /** Custom UI component to display 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; + /** 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; + /** 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>; + /** 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; + /** 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>; + /** 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; + /** 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>; + /** 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>; + /** Custom component to render link previews in message input **/ LinkPreviewList?: React.ComponentType; + /** 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; + /** 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>; + /** 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; + /** 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>; MessageListMainPanel?: React.ComponentType; + /** 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; + /** 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; + /** 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>; + /** 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; + /** 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; + /** 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>; + /** 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>; + /** 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; + /** 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>; + /** 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>; + /** 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>; + /** 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>; RecordingPermissionDeniedNotification?: React.ComponentType; + /** 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>; + /** 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; + /** 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>; + /** 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>; ThreadInput?: React.ComponentType>; ThreadListEmptyPlaceholder?: React.ComponentType; @@ -109,12 +150,19 @@ export type ComponentContextValue< ThreadListItemUI?: React.ComponentType; 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; + /** 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; + /** 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; + /** 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; + /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */ VirtualMessage?: React.ComponentType>; };