stream-chat-react
Version:
React components to create chat conversations or livestream style chat
78 lines (77 loc) • 5.82 kB
TypeScript
import React from 'react';
import type { ChannelActionContextValue } from '../../context/ChannelActionContext';
import type { InfiniteScrollProps } from '../InfiniteScrollPaginator/InfiniteScroll';
import type { LocalMessage } from 'stream-chat';
import type { MessageRenderer } from './renderMessages';
import type { GroupStyle, ProcessMessagesParams, RenderedMessage } from './utils';
import type { MessageProps } from '../Message/types';
type PropsDrilledToMessage = 'additionalMessageInputProps' | 'closeReactionSelectorOnClick' | 'customMessageActions' | 'disableQuotedMessages' | 'formatDate' | 'getDeleteMessageErrorNotification' | 'getFlagMessageErrorNotification' | 'getFlagMessageSuccessNotification' | 'getMarkMessageUnreadErrorNotification' | 'getMarkMessageUnreadSuccessNotification' | 'getMuteUserErrorNotification' | 'getMuteUserSuccessNotification' | 'getPinMessageErrorNotification' | 'Message' | 'messageActions' | 'onlySenderCanEdit' | 'onMentionsClick' | 'onMentionsHover' | 'onUserClick' | 'onUserHover' | 'openThread' | 'pinPermissions' | 'reactionDetailsSort' | 'renderText' | 'retrySendMessage' | 'sortReactions' | 'sortReactionDetails' | 'unsafeHTML';
export type MessageListProps = Partial<Pick<MessageProps, PropsDrilledToMessage>> & {
/** Disables the injection of date separator components in MessageList, defaults to `false` */
disableDateSeparator?: boolean;
/** Callback function to set group styles for each message */
groupStyles?: (message: RenderedMessage, previousMessage: RenderedMessage, nextMessage: RenderedMessage, noGroupByUser: boolean, maxTimeBetweenGroupedMessages?: number) => GroupStyle;
/** Whether the list has more items to load */
hasMore?: boolean;
/** Element to be rendered at the top of the thread message list. By default, these are the Message and ThreadStart components */
head?: React.ReactElement;
/** Position to render HeaderComponent */
headerPosition?: number;
/** Hides the MessageDeleted components from the list, defaults to `false` */
hideDeletedMessages?: boolean;
/** Hides the DateSeparator component when new messages are received in a channel that's watched but not active, defaults to false */
hideNewMessageSeparator?: boolean;
/** Overrides the default props passed to [InfiniteScroll](https://github.com/GetStream/stream-chat-react/blob/master/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx) */
internalInfiniteScrollProps?: Partial<InfiniteScrollProps>;
/** Function called when latest messages should be loaded, after the list has jumped at an earlier message set */
jumpToLatestMessage?: () => Promise<void>;
/** Whether or not the list is currently loading more items */
loadingMore?: boolean;
/** Whether or not the list is currently loading newer items */
loadingMoreNewer?: boolean;
/** Function called when more messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
loadMore?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);
/** Function called when newer messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
loadMoreNewer?: ChannelActionContextValue['loadMoreNewer'] | (() => Promise<void>);
/** Maximum time in milliseconds that should occur between messages to still consider them grouped together */
maxTimeBetweenGroupedMessages?: number;
/** The limit to use when paginating messages */
messageLimit?: number;
/** The messages to render in the list, defaults to messages stored in [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/) */
messages?: LocalMessage[];
/** If true, turns off message UI grouping by user */
noGroupByUser?: boolean;
/** Overrides the way MessageList renders messages */
renderMessages?: MessageRenderer;
/** If true, `readBy` data supplied to the `Message` components will include all user read states per sent message */
returnAllReadData?: boolean;
/**
* Allows to review changes introduced to messages array on per message basis (e.g. date separator injection before a message).
* The array returned from the function is appended to the array of messages that are later rendered into React elements in the `MessageList`.
*/
reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];
/**
* The pixel threshold under which the message list is considered to be so near to the bottom,
* so that if a new message is delivered, the list will be scrolled to the absolute bottom.
* Defaults to 200px
*/
scrolledUpThreshold?: number;
/**
* The floating notification informing about unread messages will be shown when the
* UnreadMessagesSeparator is not visible. The default is false, that means the notification
* is shown only when viewing unread messages.
*/
showUnreadNotificationAlways?: boolean;
/** If true, indicates the message list is a thread */
threadList?: boolean;
};
/**
* The MessageList component renders a list of Messages.
* It is a consumer of the following contexts:
* - [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/)
* - [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/)
* - [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/)
* - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
*/
export declare const MessageList: (props: MessageListProps) => React.JSX.Element;
export {};