stream-chat-react 13.14.3 → 14.0.0-beta.2

package/dist/components/MessageList/MessageList.js

@@ -1,166 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import { useEnrichedMessages, useMessageListElements, useScrollLocationLogic, useUnreadMessagesNotification, } from './hooks/MessageList';
-import { useMarkRead } from './hooks/useMarkRead';
-import { MessageNotification as DefaultMessageNotification } from './MessageNotification';
-import { MessageListNotifications as DefaultMessageListNotifications } from './MessageListNotifications';
-import { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';
-import { useChannelActionContext } from '../../context/ChannelActionContext';
-import { useChannelStateContext } from '../../context/ChannelStateContext';
-import { DialogManagerProvider } from '../../context';
-import { useChatContext } from '../../context/ChatContext';
-import { useComponentContext } from '../../context/ComponentContext';
-import { MessageListContextProvider } from '../../context/MessageListContext';
-import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
-import { InfiniteScroll } from '../InfiniteScrollPaginator/InfiniteScroll';
-import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
-import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
-import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
-import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';
-import { defaultRenderMessages } from './renderMessages';
-import { useStableId } from '../UtilityComponents/useStableId';
-import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, } from '../../constants/limits';
-import { useLastOwnMessage } from './hooks/useLastOwnMessage';
-const MessageListWithContext = (props) => {
-    const { channel, channelUnreadUiState, disableDateSeparator = false, groupStyles, hasMoreNewer = false, headerPosition, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, internalInfiniteScrollProps: { threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ...restInternalInfiniteScrollProps } = {}, jumpToLatestMessage = () => Promise.resolve(), loadMore: loadMoreCallback, loadMoreNewer: loadMoreNewerCallback, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    maxTimeBetweenGroupedMessages, messageActions = Object.keys(MESSAGE_ACTIONS), messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages = [], noGroupByUser = false, notifications, pinPermissions = defaultPinPermissions, reactionDetailsSort, renderMessages = defaultRenderMessages, returnAllReadData = false, reviewProcessedMessage, showUnreadNotificationAlways, sortReactionDetails, sortReactions, suppressAutoscroll, threadList = false, unsafeHTML = false, } = props;
-    const [listElement, setListElement] = React.useState(null);
-    const { customClasses } = useChatContext('MessageList');
-    const { EmptyStateIndicator = DefaultEmptyStateIndicator, LoadingIndicator = DefaultLoadingIndicator, MessageListMainPanel = DefaultMessageListMainPanel, MessageListNotifications = DefaultMessageListNotifications, MessageListWrapper = 'ul', MessageNotification = DefaultMessageNotification, TypingIndicator = DefaultTypingIndicator, UnreadMessagesNotification = DefaultUnreadMessagesNotification, } = useComponentContext('MessageList');
-    const { hasNewMessages, isMessageListScrolledToBottom, onScroll, scrollToBottom, wrapperRect, } = useScrollLocationLogic({
-        hasMoreNewer,
-        listElement,
-        loadMoreScrollThreshold,
-        messages, // todo: is it correct to base the scroll logic on an array that does not contain date separators or intro?
-        scrolledUpThreshold: props.scrolledUpThreshold,
-        suppressAutoscroll,
-    });
-    const { show: showUnreadMessagesNotification } = useUnreadMessagesNotification({
-        isMessageListScrolledToBottom,
-        showAlways: !!showUnreadNotificationAlways,
-        unreadCount: channelUnreadUiState?.unread_messages,
-    });
-    useMarkRead({
-        isMessageListScrolledToBottom,
-        messageListIsThread: threadList,
-        wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,
-    });
-    const { messageGroupStyles, messages: enrichedMessages } = useEnrichedMessages({
-        channel,
-        disableDateSeparator,
-        groupStyles,
-        headerPosition,
-        hideDeletedMessages,
-        hideNewMessageSeparator,
-        maxTimeBetweenGroupedMessages,
-        messages,
-        noGroupByUser,
-        reviewProcessedMessage,
-    });
-    const lastOwnMessage = useLastOwnMessage({
-        messages,
-        ownUserId: channel.getClient().user?.id,
-    });
-    const elements = useMessageListElements({
-        channelUnreadUiState,
-        enrichedMessages,
-        internalMessageProps: {
-            additionalMessageInputProps: props.additionalMessageInputProps,
-            closeReactionSelectorOnClick: props.closeReactionSelectorOnClick,
-            customMessageActions: props.customMessageActions,
-            disableQuotedMessages: props.disableQuotedMessages,
-            formatDate: props.formatDate,
-            getDeleteMessageErrorNotification: props.getDeleteMessageErrorNotification,
-            getFlagMessageErrorNotification: props.getFlagMessageErrorNotification,
-            getFlagMessageSuccessNotification: props.getFlagMessageSuccessNotification,
-            getMarkMessageUnreadErrorNotification: props.getMarkMessageUnreadErrorNotification,
-            getMarkMessageUnreadSuccessNotification: props.getMarkMessageUnreadSuccessNotification,
-            getMuteUserErrorNotification: props.getMuteUserErrorNotification,
-            getMuteUserSuccessNotification: props.getMuteUserSuccessNotification,
-            getPinMessageErrorNotification: props.getPinMessageErrorNotification,
-            Message: props.Message,
-            messageActions,
-            messageListRect: wrapperRect,
-            onlySenderCanEdit: props.onlySenderCanEdit,
-            onMentionsClick: props.onMentionsClick,
-            onMentionsHover: props.onMentionsHover,
-            onUserClick: props.onUserClick,
-            onUserHover: props.onUserHover,
-            openThread: props.openThread,
-            pinPermissions,
-            reactionDetailsSort,
-            renderText: props.renderText,
-            retrySendMessage: props.retrySendMessage,
-            sortReactionDetails,
-            sortReactions,
-            unsafeHTML,
-        },
-        lastOwnMessage,
-        messageGroupStyles,
-        messages,
-        renderMessages,
-        returnAllReadData,
-        threadList,
-    });
-    const messageListClass = customClasses?.messageList || 'str-chat__list';
-    const loadMore = React.useCallback(() => {
-        if (loadMoreCallback) {
-            loadMoreCallback(messageLimit);
-        }
-    }, [loadMoreCallback, messageLimit]);
-    const loadMoreNewer = React.useCallback(() => {
-        if (loadMoreNewerCallback) {
-            loadMoreNewerCallback(messageLimit);
-        }
-    }, [loadMoreNewerCallback, messageLimit]);
-    const scrollToBottomFromNotification = React.useCallback(async () => {
-        if (hasMoreNewer) {
-            await jumpToLatestMessage();
-        }
-        else {
-            scrollToBottom();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [scrollToBottom, hasMoreNewer]);
-    React.useLayoutEffect(() => {
-        if (highlightedMessageId) {
-            const element = listElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
-            element?.scrollIntoView({ block: 'center' });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [highlightedMessageId]);
-    const id = useStableId();
-    const showEmptyStateIndicator = elements.length === 0 && !threadList;
-    const dialogManagerId = threadList
-        ? `message-list-dialog-manager-thread-${id}`
-        : `message-list-dialog-manager-${id}`;
-    return (React.createElement(MessageListContextProvider, { value: {
-            listElement,
-            processedMessages: enrichedMessages,
-            scrollToBottom,
-        } },
-        React.createElement(MessageListMainPanel, null,
-            React.createElement(DialogManagerProvider, { id: dialogManagerId },
-                !threadList && showUnreadMessagesNotification && (React.createElement(UnreadMessagesNotification, { unreadCount: channelUnreadUiState?.unread_messages })),
-                React.createElement("div", { className: clsx(messageListClass, customClasses?.threadList), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React.createElement(EmptyStateIndicator, { listType: threadList ? 'thread' : 'message' })) : (React.createElement(InfiniteScroll, { className: 'str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React.createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React.createElement(LoadingIndicator, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore, threshold: loadMoreScrollThreshold, ...restInternalInfiniteScrollProps },
-                    React.createElement(MessageListWrapper, { className: 'str-chat__ul' }, elements),
-                    React.createElement(TypingIndicator, { threadList: threadList }),
-                    React.createElement("div", { key: 'bottom' })))))),
-        React.createElement(MessageListNotifications, { hasNewMessages: hasNewMessages, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification, notifications: notifications, scrollToBottom: scrollToBottomFromNotification, threadList: threadList, unreadCount: threadList ? undefined : channelUnreadUiState?.unread_messages })));
-};
-/**
- * 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 const MessageList = (props) => {
-    const { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext('MessageList');
-    const { members: membersPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
-    mutes: mutesPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
-    watchers: watchersPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
-    ...restChannelStateContext } = useChannelStateContext('MessageList');
-    return (React.createElement(MessageListWithContext, { jumpToLatestMessage: jumpToLatestMessage, loadMore: loadMore, loadMoreNewer: loadMoreNewer, ...restChannelStateContext, ...props }));
-};

package/dist/components/MessageList/MessageListMainPanel.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { PropsWithChildrenOnly } from '../../types/types';
-export declare const MESSAGE_LIST_MAIN_PANEL_CLASS: "str-chat__main-panel-inner str-chat__message-list-main-panel";
-export declare const MessageListMainPanel: ({ children }: PropsWithChildrenOnly) => React.JSX.Element;

package/dist/components/MessageList/MessageListMainPanel.js

@@ -1,3 +0,0 @@
-import React from 'react';
-export const MESSAGE_LIST_MAIN_PANEL_CLASS = 'str-chat__main-panel-inner str-chat__message-list-main-panel';
-export const MessageListMainPanel = ({ children }) => (React.createElement("div", { className: MESSAGE_LIST_MAIN_PANEL_CLASS }, children));

package/dist/components/MessageList/MessageListNotifications.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { MessageNotificationProps } from './MessageNotification';
-import type { ChannelNotifications } from '../../context/ChannelStateContext';
-export type MessageListNotificationsProps = {
-    hasNewMessages: boolean;
-    isMessageListScrolledToBottom: boolean;
-    isNotAtLatestMessageSet: boolean;
-    MessageNotification: React.ComponentType<MessageNotificationProps>;
-    notifications: ChannelNotifications;
-    scrollToBottom: () => void;
-    threadList?: boolean;
-    unreadCount?: number;
-};
-export declare const MessageListNotifications: (props: MessageListNotificationsProps) => React.JSX.Element;

package/dist/components/MessageList/MessageListNotifications.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { ConnectionStatus } from './ConnectionStatus';
-import { CustomNotification } from './CustomNotification';
-import { useTranslationContext } from '../../context/TranslationContext';
-import { useNotifications } from '../Notifications/hooks/useNotifications';
-const ClientNotifications = () => {
-    const clientNotifications = useNotifications();
-    const { t } = useTranslationContext();
-    return (React.createElement(React.Fragment, null, clientNotifications.map((notification) => (React.createElement(CustomNotification, { active: true, key: notification.id, type: notification.severity }, t('translationBuilderTopic/notification', { notification }))))));
-};
-export const MessageListNotifications = (props) => {
-    const { hasNewMessages, isMessageListScrolledToBottom, isNotAtLatestMessageSet, MessageNotification, notifications, scrollToBottom, threadList, unreadCount, } = props;
-    const { t } = useTranslationContext('MessageListNotifications');
-    return (React.createElement("div", { className: 'str-chat__list-notifications' },
-        notifications.map((notification) => (React.createElement(CustomNotification, { active: true, key: notification.id, type: notification.type }, notification.text))),
-        React.createElement(ClientNotifications, null),
-        React.createElement(ConnectionStatus, null),
-        React.createElement(MessageNotification, { isMessageListScrolledToBottom: isMessageListScrolledToBottom, onClick: scrollToBottom, showNotification: hasNewMessages || isNotAtLatestMessageSet, threadList: threadList, unreadCount: unreadCount }, isNotAtLatestMessageSet ? t('Latest Messages') : t('New Messages!'))));
-};

package/dist/components/MessageList/MessageNotification.d.ts

@@ -1,15 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-export type MessageNotificationProps = PropsWithChildren<{
-    /** button click event handler */
-    onClick: React.MouseEventHandler;
-    /** signals whether the message list is considered (below a threshold) to be scrolled to the bottom. Prop used only by [ScrollToBottomButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/ScrollToBottomButton.tsx) */
-    isMessageListScrolledToBottom?: boolean;
-    /** Whether or not to show notification. Prop used only by [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx)  */
-    showNotification?: boolean;
-    /** informs the component whether it is rendered inside a thread message list */
-    threadList?: boolean;
-    /** */
-    unreadCount?: number;
-}>;
-export declare const MessageNotification: (props: MessageNotificationProps) => React.JSX.Element | null;

package/dist/components/MessageList/MessageNotification.js

@@ -1,8 +0,0 @@
-import React from 'react';
-const UnMemoizedMessageNotification = (props) => {
-    const { children, onClick, showNotification = true } = props;
-    if (!showNotification)
-        return null;
-    return (React.createElement("button", { "aria-live": 'polite', className: `str-chat__message-notification`, "data-testid": 'message-notification', onClick: onClick }, children));
-};
-export const MessageNotification = React.memo(UnMemoizedMessageNotification);

package/dist/components/MessageList/ScrollToBottomButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { MessageNotificationProps } from './MessageNotification';
-export declare const ScrollToBottomButton: (props: Pick<MessageNotificationProps, 'isMessageListScrolledToBottom' | 'onClick' | 'threadList'>) => React.JSX.Element | null;

package/dist/components/MessageList/ScrollToBottomButton.js

@@ -1,56 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { ArrowDown } from './icons';
-import { useChannelStateContext, useChatContext } from '../../context';
-const UnMemoizedScrollToBottomButton = (props) => {
-    const { isMessageListScrolledToBottom, onClick, threadList } = props;
-    const { channel: activeChannel, client } = useChatContext();
-    const { thread } = useChannelStateContext();
-    const [countUnread, setCountUnread] = useState(activeChannel?.countUnread() || 0);
-    const [replyCount, setReplyCount] = useState(thread?.reply_count || 0);
-    const observedEvent = threadList ? 'message.updated' : 'message.new';
-    useEffect(() => {
-        const handleEvent = (event) => {
-            const newMessageInAnotherChannel = event.cid !== activeChannel?.cid;
-            const newMessageIsMine = event.user?.id === client.user?.id;
-            const isThreadOpen = !!thread;
-            const newMessageIsReply = !!event.message?.parent_id;
-            const dontIncreaseMainListCounterOnNewReply = isThreadOpen && !threadList && newMessageIsReply;
-            if (isMessageListScrolledToBottom ||
-                newMessageInAnotherChannel ||
-                newMessageIsMine ||
-                dontIncreaseMainListCounterOnNewReply) {
-                return;
-            }
-            if (event.type === 'message.new') {
-                // cannot rely on channel.countUnread because active channel is automatically marked read
-                setCountUnread((prev) => prev + 1);
-            }
-            else if (event.message?.id === thread?.id) {
-                const newReplyCount = event.message?.reply_count || 0;
-                setCountUnread(() => newReplyCount - replyCount);
-            }
-        };
-        client.on(observedEvent, handleEvent);
-        return () => {
-            client.off(observedEvent, handleEvent);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
-    useEffect(() => {
-        if (isMessageListScrolledToBottom) {
-            setCountUnread(0);
-            setReplyCount(thread?.reply_count || 0);
-        }
-    }, [isMessageListScrolledToBottom, thread]);
-    if (isMessageListScrolledToBottom)
-        return null;
-    return (React.createElement("div", { className: 'str-chat__jump-to-latest-message' },
-        React.createElement("button", { "aria-live": 'polite', className: `
-        str-chat__message-notification-scroll-to-latest
-        str-chat__circle-fab
-      `, "data-testid": 'message-notification', onClick: onClick },
-            React.createElement(ArrowDown, null),
-            countUnread > 0 && (React.createElement("div", { className: clsx('str-chat__message-notification', 'str-chat__jump-to-latest-unread-count'), "data-testid": 'unread-message-notification-counter' }, countUnread)))));
-};
-export const ScrollToBottomButton = React.memo(UnMemoizedScrollToBottomButton);

package/dist/components/MessageList/UnreadMessagesNotification.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-export type UnreadMessagesNotificationProps = {
-    /**
-     * Configuration parameter to determine the message page size, when jumping to the first unread message.
-     */
-    queryMessageLimit?: number;
-    /**
-     * Configuration parameter to determine, whether the unread count is to be shown on the component. Disabled by default.
-     */
-    showCount?: boolean;
-    /**
-     * The count of unread messages to be displayed if enabled.
-     */
-    unreadCount?: number;
-};
-export declare const UnreadMessagesNotification: ({ queryMessageLimit, showCount, unreadCount, }: UnreadMessagesNotificationProps) => React.JSX.Element;

package/dist/components/MessageList/UnreadMessagesNotification.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { CloseIcon } from './icons';
-import { useChannelActionContext, useTranslationContext } from '../../context';
-export const UnreadMessagesNotification = ({ queryMessageLimit, showCount, unreadCount, }) => {
-    const { jumpToFirstUnreadMessage, markRead } = useChannelActionContext('UnreadMessagesNotification');
-    const { t } = useTranslationContext('UnreadMessagesNotification');
-    return (React.createElement("div", { className: 'str-chat__unread-messages-notification', "data-testid": 'unread-messages-notification' },
-        React.createElement("button", { onClick: () => jumpToFirstUnreadMessage(queryMessageLimit) }, unreadCount && showCount
-            ? t('{{count}} unread', { count: unreadCount ?? 0 })
-            : t('Unread messages')),
-        React.createElement("button", { onClick: () => markRead() },
-            React.createElement(CloseIcon, null))));
-};

package/dist/components/MessageList/UnreadMessagesSeparator.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-export declare const UNREAD_MESSAGE_SEPARATOR_CLASS = "str-chat__unread-messages-separator";
-export type UnreadMessagesSeparatorProps = {
-    /**
-     * Configuration parameter to determine, whether the unread count is to be shown on the component. Disabled by default.
-     */
-    showCount?: boolean;
-    /**
-     * The count of unread messages to be displayed if enabled.
-     */
-    unreadCount?: number;
-};
-export declare const UnreadMessagesSeparator: ({ showCount, unreadCount, }: UnreadMessagesSeparatorProps) => React.JSX.Element;

package/dist/components/MessageList/UnreadMessagesSeparator.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { useTranslationContext } from '../../context';
-export const UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator';
-export const UnreadMessagesSeparator = ({ showCount, unreadCount, }) => {
-    const { t } = useTranslationContext('UnreadMessagesSeparator');
-    return (React.createElement("div", { className: UNREAD_MESSAGE_SEPARATOR_CLASS, "data-testid": 'unread-messages-separator' }, unreadCount && showCount
-        ? t('unreadMessagesSeparatorText', { count: unreadCount })
-        : t('Unread messages')));
-};

package/dist/components/MessageList/VirtualizedMessageList.d.ts

@@ -1,144 +0,0 @@
-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' | 'renderText' | 'sortReactions' | 'sortReactionDetails';
-type VirtualizedMessageListPropsForContext = PropsDrilledToMessage | 'closeReactionSelectorOnClick' | 'customMessageRenderer' | 'head' | 'loadingMore' | 'Message' | 'returnAllReadData' | '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 were delivered the given message */
-    ownMessagesDeliveredToOthers: Record<string, UserResponse[]>;
-    /** 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>;
-    /** Latest own message in currently displayed message set. */
-    lastOwnMessage?: LocalMessage;
-    /** 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 {};