import React, { RefObject } from 'react'; import { ScrollSeekConfiguration, ScrollSeekPlaceholderProps, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso'; import { GroupStyle } from './utils'; import { MessageProps, MessageUIComponentProps } from '../Message'; import { ChannelActionContextValue } from '../../context/ChannelActionContext'; import { StreamMessage } from '../../context/ChannelStateContext'; import { ChatContextValue } from '../../context/ChatContext'; import { ComponentContextValue } from '../../context/ComponentContext'; import type { UserResponse } from 'open-chat-js'; import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types'; type VirtualizedMessageListPropsForContext = 'additionalMessageInputProps' | 'closeReactionSelectorOnClick' | 'customMessageActions' | 'customMessageRenderer' | 'head' | 'loadingMore' | 'Message' | 'messageActions' | 'shouldGroupByUser' | 'sortReactions' | 'sortReactionDetails' | 'threadList'; /** * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions) */ export type VirtuosoContext = Required, 'DateSeparator' | 'MessageSystem' | 'UnreadMessagesSeparator'>> & Pick, VirtualizedMessageListPropsForContext> & Pick, '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; /** 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[]>; /** The original message list enriched with date separators, omitted deleted messages or giphy previews. */ processedMessages: StreamMessage[]; /** Instance of VirtuosoHandle object providing the API to navigate in the virtualized list by various scroll actions. */ virtuosoRef: RefObject; /** Message id which was marked as unread. ALl the messages following this message are considered unrea. */ firstUnreadMessageId?: string; /** * 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; }; type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActions' | 'messageActions' | 'sortReactions' | 'sortReactionDetails'; export type VirtualizedMessageListProps = Partial, PropsDrilledToMessage>> & { /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */ additionalVirtuosoProps?: VirtuosoProps>; /** 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[], 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, previousMessage: StreamMessage, nextMessage: StreamMessage, noGroupByUser: boolean) => 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); /** 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); /** 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>; /** 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[]; /** * @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; /** * @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})=>
{index}
, * } * ``` */ scrollSeekPlaceHolder?: ScrollSeekConfiguration & { placeholder: React.ComponentType; }; /** 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(props: VirtualizedMessageListProps): React.JSX.Element; export {}; //# sourceMappingURL=VirtualizedMessageList.d.ts.map