stream-chat-react/dist/components/MessageList/VirtualizedMessageList.d.ts

React components to create chat conversations or livestream style chat

import type { RefObject } from 'react';
import React from 'react';
import type { ScrollSeekConfiguration, ScrollSeekPlaceholderProps, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
import type { GroupStyle, ProcessMessagesParams, RenderedMessage } from './utils';
import type { MessageProps, MessageUIComponentProps } from '../Message';
import type { ChannelActionContextValue } from '../../context/ChannelActionContext';
import type { ChannelStateContextValue } from '../../context/ChannelStateContext';
import type { ChatContextValue } from '../../context/ChatContext';
import type { ComponentContextValue } from '../../context/ComponentContext';
import type { LocalMessage, UserResponse } from 'stream-chat';
import type { 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 = Required<Pick<ComponentContextValue, 'DateSeparator' | 'MessageSystem' | 'UnreadMessagesSeparator'>> & Pick<VirtualizedMessageListProps, VirtualizedMessageListPropsForContext> & Pick<ChatContextValue, '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[]>;
    /** The original message list enriched with date separators, omitted deleted messages or giphy previews. */
    processedMessages: RenderedMessage[];
    /** 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 = Partial<Pick<MessageProps, PropsDrilledToMessage>> & {
    /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */
    additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext>;
    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: RenderedMessage[], 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: RenderedMessage, previousMessage: RenderedMessage, nextMessage: RenderedMessage, 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>;
    /** 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?: LocalMessage[];
    /**
     * @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['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(props: VirtualizedMessageListProps): React.JSX.Element;
export {};