stream-chat-react

import React, { RefObject } from 'react'; import { ScrollSeekConfiguration, ScrollSeekPlaceholderProps, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso'; import { GroupStyle, ProcessMessagesParams } from './utils'; import { MessageProps, MessageUIComponentProps } from '../Message'; import { ChannelActionContextValue } from '../../context/ChannelActionContext'; import { ChannelStateContextValue, StreamMessage } from '../../context/ChannelStateContext'; import { ChatContextValue } from '../../context/ChatContext'; import { ComponentContextValue } from '../../context/ComponentContext'; import type { UserResponse } from 'stream-chat'; import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types'; 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) */ export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Required<Pick<ComponentContextValue<StreamChatGenerics>, 'DateSeparator' | 'MessageSystem' | 'UnreadMessagesSeparator'>> & Pick<VirtualizedMessageListProps<StreamChatGenerics>, VirtualizedMessageListPropsForContext> & Pick<ChatContextValue<StreamChatGenerics>, 'customClasses'> & { /** Latest received message id in the current channel */ lastReceivedMessageId: string | null | undefined; /** Object mapping between the message ID and a string representing the position in the group of a sequence of messages posted by the same user. */ messageGroupStyles: Record<string, GroupStyle>; /** Number of messages prepended before the first page of messages. This is needed to calculate the virtual position in the virtual list. */ numItemsPrepended: number; /** Mapping of message ID of own messages to the array of users, who read the given message */ ownMessagesReadByOthers: Record<string, UserResponse<StreamChatGenerics>[]>; /** The original message list enriched with date separators, omitted deleted messages or giphy previews. */ processedMessages: StreamMessage<StreamChatGenerics>[]; /** Instance of VirtuosoHandle object providing the API to navigate in the virtualized list by various scroll actions. */ virtuosoRef: RefObject<VirtuosoHandle | null>; /** Message id which was marked as unread. ALl the messages following this message are considered unrea. */ firstUnreadMessageId?: string; lastReadDate?: Date; /** * The ID of the last message considered read by the current user in the current channel. * All the messages following this message are considered unread. */ lastReadMessageId?: string; /** The number of unread messages in the current channel. */ unreadMessageCount?: number; }; 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>>; channelUnreadUiState?: ChannelStateContextValue['channelUnreadUiState']; /** If true, picking a reaction from the `ReactionSelector` component will close the selector */ closeReactionSelectorOnClick?: boolean; /** Custom render function, if passed, certain UI props are ignored */ customMessageRenderer?: (messageList: StreamMessage<StreamChatGenerics>[], index: number) => React.ReactElement; /** @deprecated Use additionalVirtuosoProps.defaultItemHeight instead. Will be removed with next major release - `v11.0.0`. * If set, the default item height is used for the calculation of the total list height. Use if you expect messages with a lot of height variance * */ defaultItemHeight?: number; /** Disables the injection of date separator components in MessageList, defaults to `true` */ disableDateSeparator?: boolean; /** Callback function to set group styles for each message */ groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean, maxTimeBetweenGroupedMessages?: number) => GroupStyle; /** Whether or not the list has more items to load */ hasMore?: boolean; /** Whether or not the list has newer items to load */ hasMoreNewer?: boolean; /** * @deprecated Use additionalVirtuosoProps.components.Header to override default component rendered above the list ove messages. * Element to be rendered at the top of the thread message list. By default, these are the Message and ThreadStart components */ head?: React.ReactElement; /** 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; /** The id of the message to highlight and center */ highlightedMessageId?: string; /** 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 new messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */ loadMoreNewer?: ChannelActionContextValue['loadMore'] | (() => Promise<void>); /** Maximum time in milliseconds that should occur between messages to still consider them grouped together */ maxTimeBetweenGroupedMessages?: number; /** Custom UI component to display a message, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */ Message?: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>; /** The limit to use when paginating messages */ messageLimit?: number; /** Optional prop to override the messages available from [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/) */ messages?: StreamMessage<StreamChatGenerics>[]; /** * @deprecated Use additionalVirtuosoProps.overscan instead. Will be removed with next major release - `v11.0.0`. * The amount of extra content the list should render in addition to what's necessary to fill in the viewport */ overscan?: number; /** Keep track of read receipts for each message sent by the user. When disabled, only the last own message delivery / read status is rendered. */ returnAllReadData?: boolean; /** * Allows to review changes introduced to messages array on per message basis (e.g. date separator injected 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 `VirtualizedMessageList`. */ reviewProcessedMessage?: ProcessMessagesParams<StreamChatGenerics>['reviewProcessedMessage']; /** * @deprecated Pass additionalVirtuosoProps.scrollSeekConfiguration and specify the placeholder in additionalVirtuosoProps.components.ScrollSeekPlaceholder instead. Will be removed with next major release - `v11.0.0`. * Performance improvement by showing placeholders if user scrolls fast through list. * it can be used like this: * ``` * { * enter: (velocity) => Math.abs(velocity) > 120, * exit: (velocity) => Math.abs(velocity) < 40, * change: () => null, * placeholder: ({index, height})=> <div style={{height: height + "px"}}>{index}</div>, * } * ``` */ scrollSeekPlaceHolder?: ScrollSeekConfiguration & { placeholder: React.ComponentType<ScrollSeekPlaceholderProps>; }; /** When `true`, the list will scroll to the latest message when the window regains focus */ scrollToLatestMessageOnFocus?: boolean; /** If true, the Giphy preview will render as a separate component above the `MessageInput`, rather than inline with the other messages in the list */ separateGiphyPreview?: boolean; /** If true, group messages belonging to the same user, otherwise show each message individually */ shouldGroupByUser?: boolean; /** * 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; /** The scrollTo behavior when new messages appear. Use `"smooth"` for regular chat channels, and `"auto"` (which results in instant scroll to bottom) if you expect high throughput. */ stickToBottomScrollBehavior?: 'smooth' | 'auto'; /** stops the list from autoscrolling when new messages are loaded */ suppressAutoscroll?: boolean; /** If true, indicates the message list is a thread */ threadList?: boolean; }; /** * The VirtualizedMessageList component renders a list of messages in a virtualized list. * It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx). */ export declare function VirtualizedMessageList<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: VirtualizedMessageListProps<StreamChatGenerics>): React.JSX.Element; export {};