stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/MessageList/VirtualizedMessageList.mjs

@@ -1,22 +1,25 @@
-import { useChannelActionContext } from "../../context/ChannelActionContext.mjs";
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../context/ChatContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { DialogManagerProvider } from "../../context/DialogManagerContext.mjs";
-import { MessageTranslationViewProvider } from "../../context/MessageTranslationViewContext.mjs";
-import { VirtualizedMessageListContextProvider } from "../../context/VirtualizedMessageListContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useNotificationTarget } from "../Notifications/hooks/useNotificationTarget.mjs";
+import { NotificationList } from "../Notifications/NotificationList.mjs";
+import { useIncomingMessageAnnouncements } from "../Accessibility/hooks/useIncomingMessageAnnouncements.mjs";
 import { useStableId } from "../UtilityComponents/useStableId.mjs";
-import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
-import { MessageUI } from "../Message/MessageUI.mjs";
+import { MessageTranslationViewProvider } from "../../context/MessageTranslationViewContext.mjs";
+import { useMessagePaginator } from "../../hooks/useMessagePaginator.mjs";
 import { GiphyPreviewMessage } from "./GiphyPreviewMessage.mjs";
 import { getGroupStyles, getLastReceived, processMessages } from "./utils.mjs";
 import { useLastReadData } from "./hooks/useLastReadData.mjs";
 import { useLastDeliveredData } from "./hooks/useLastDeliveredData.mjs";
 import { MessageListMainPanel } from "./MessageListMainPanel.mjs";
 import { UnreadMessagesSeparator } from "./UnreadMessagesSeparator.mjs";
+import { getMessageSourceKey } from "./messageSourceKey.mjs";
 import { useMarkRead } from "./hooks/useMarkRead.mjs";
 import { NewMessageNotification } from "./NewMessageNotification.mjs";
 import { UnreadMessagesNotification } from "./UnreadMessagesNotification.mjs";
+import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
 import { useGiphyPreview } from "./hooks/VirtualizedMessageList/useGiphyPreview.mjs";
 import { useMessageSetKey } from "./hooks/VirtualizedMessageList/useMessageSetKey.mjs";
 import { useNewMessageNotification } from "./hooks/VirtualizedMessageList/useNewMessageNotification.mjs";
@@ -26,17 +29,19 @@ import { useShouldForceScrollToBottom } from "./hooks/VirtualizedMessageList/use
 import { useUnreadMessagesNotificationVirtualized } from "./hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.mjs";
 import { FloatingDateSeparator } from "./FloatingDateSeparator.mjs";
 import { EventComponent } from "../EventComponent/EventComponent.mjs";
+import { useThreadHead } from "./hooks/useThreadHead.mjs";
 import { useLastOwnMessage } from "./hooks/useLastOwnMessage.mjs";
-import { useReducedMotionPreference } from "./hooks/useReducedMotionPreference.mjs";
 import { ScrollToLatestMessageButton } from "./ScrollToLatestMessageButton.mjs";
+import { useCanPaginateReplies } from "./hooks/useCanPaginateReplies.mjs";
 import { EmptyPlaceholder, Header, Item, calculateFirstItemIndex, calculateItemIndex, makeItemsRenderedHandler, messageRenderer } from "./VirtualizedMessageListComponents.mjs";
-import { useNotificationTarget } from "../Notifications/hooks/useNotificationTarget.mjs";
-import { NotificationList } from "../Notifications/NotificationList.mjs";
-import { useIncomingMessageAnnouncements } from "../Accessibility/hooks/useIncomingMessageAnnouncements.mjs";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { VirtualizedMessageListContextProvider } from "../../context/VirtualizedMessageListContext.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { WithComponents } from "../../context/WithComponents.mjs";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Virtuoso } from "react-virtuoso";
 //#region src/components/MessageList/VirtualizedMessageList.tsx
+var channelReadSelector = (nextValue) => ({ read: nextValue.read });
 function captureResizeObserverExceededError(e) {
 	if (e.message === "ResizeObserver loop completed with undelivered notifications." || e.message === "ResizeObserver loop limit exceeded") e.stopImmediatePropagation();
 }
@@ -54,9 +59,9 @@ function fractionalItemSize(element) {
 function findMessageIndex(messages, id) {
 	return messages.findIndex((message) => message.id === id);
 }
-function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
-	if (highlightedMessageId) {
-		const index = findMessageIndex(messages, highlightedMessageId);
+function calculateInitialTopMostItemIndex(messages, focusedMessageId) {
+	if (focusedMessageId) {
+		const index = findMessageIndex(messages, focusedMessageId);
 		if (index !== -1) return {
 			align: "center",
 			index
@@ -64,38 +69,50 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
 	}
 	return messages.length - 1;
 }
+var unreadStateSnapshotSelector = (state) => state;
+var messageFocusSignalSelector = (state) => ({ messageFocusSignal: state.signal });
+var messagePaginatorStateSelector = (state) => ({
+	hasMoreNewer: state.hasMoreHead,
+	isLoading: state.isLoading,
+	messages: state.items ?? []
+});
 var VirtualizedMessageListWithContext = (props) => {
-	const { additionalMessageComposerProps, additionalVirtuosoProps = {}, channel, channelUnreadUiState, closeReactionSelectorOnClick, customMessageRenderer, defaultItemHeight, disableDateSeparator = true, formatDate, groupStyles, hasMoreNewer, head, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, jumpToLatestMessage, loadingMore, loadMore, loadMoreNewer, maxTimeBetweenGroupedMessages, Message: MessageUIComponentFromProps, messageActions, messageLimit = 25, messages, openThread, overscan = 0, reactionDetailsSort, renderText, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showAvatar, showUnreadNotificationAlways, sortReactions, stickToBottomScrollBehavior = "smooth", suppressAutoscroll, thread, threadList } = props;
+	const { additionalMessageComposerProps, additionalVirtuosoProps = {}, channel, closeReactionSelectorOnClick, customMessageRenderer, defaultItemHeight, formatDate, groupStyles, hideDeletedMessages = false, hideNewMessageSeparator = false, maxTimeBetweenGroupedMessages, overscan = 0, reactionDetailsSort, renderText, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showAvatar, showUnreadNotificationAlways, sortReactions, stickToBottomScrollBehavior = "smooth", suppressAutoscroll: suppressAutoscrollFromProps = false, withDateSeparator = false } = props;
+	const thread = useThreadContext();
+	const isThreadList = !!thread;
+	const threadHead = useThreadHead();
+	const [suppressAutoscrollWhileLoadingOlder, setSuppressAutoscrollWhileLoadingOlder] = React.useState(false);
+	const suppressAutoscroll = suppressAutoscrollFromProps || suppressAutoscrollWhileLoadingOlder;
+	const loadingOlderRef = useRef(false);
 	const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } = additionalVirtuosoProps;
 	useCaptureResizeObserverExceededError();
-	const { DateSeparator: DateSeparator$1 = DateSeparator, GiphyPreviewMessage: GiphyPreviewMessage$1 = GiphyPreviewMessage, MessageListMainPanel: MessageListMainPanel$1 = MessageListMainPanel, MessageSystem = EventComponent, NewMessageNotification: NewMessageNotification$1 = NewMessageNotification, NotificationList: NotificationList$1 = NotificationList, ScrollToLatestMessageButton: ScrollToLatestMessageButton$1 = ScrollToLatestMessageButton, TypingIndicator, UnreadMessagesNotification: UnreadMessagesNotification$1 = UnreadMessagesNotification, UnreadMessagesSeparator: UnreadMessagesSeparator$1 = UnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageUI } = useComponentContext("VirtualizedMessageList");
-	const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
-	const { client, customClasses } = useChatContext("VirtualizedMessageList");
-	const effectiveStickToBottomScrollBehavior = useReducedMotionPreference() ? "auto" : stickToBottomScrollBehavior;
-	const notificationTarget = useNotificationTarget();
+	const { DateSeparator: DateSeparator$1 = DateSeparator, GiphyPreviewMessage: GiphyPreviewMessage$1 = GiphyPreviewMessage, MessageSystem = EventComponent, NewMessageNotification: NewMessageNotification$1 = NewMessageNotification, TypingIndicator, UnreadMessagesNotification: UnreadMessagesNotification$1 = UnreadMessagesNotification, UnreadMessagesSeparator: UnreadMessagesSeparator$1 = UnreadMessagesSeparator, VirtualMessage } = useComponentContext();
+	const virtualMessageOverrides = useMemo(() => ({ MessageUI: VirtualMessage }), [VirtualMessage]);
+	const { client, customClasses } = useChatContext();
+	const messagePaginator = useMessagePaginator();
+	const { hasMoreNewer, isLoading, messages } = useStateStore(messagePaginator.state, messagePaginatorStateSelector);
+	const { messageFocusSignal } = useStateStore(messagePaginator.messageFocusSignal, messageFocusSignalSelector);
+	const channelUnreadUiState = useStateStore(messagePaginator.unreadStateSnapshot, unreadStateSnapshotSelector);
+	const focusedMessageId = messageFocusSignal?.messageId;
 	const virtuoso = useRef(null);
 	const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
-	const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } = useUnreadMessagesNotificationVirtualized({
-		lastRead: channelUnreadUiState?.last_read,
-		showAlways: !!showUnreadNotificationAlways,
-		unreadCount: channelUnreadUiState?.unread_messages ?? 0
-	});
+	const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } = useUnreadMessagesNotificationVirtualized({ showAlways: !!showUnreadNotificationAlways });
 	const { giphyPreviewMessage, setGiphyPreviewMessage } = useGiphyPreview(separateGiphyPreview);
 	const processedMessages = useMemo(() => {
 		if (typeof messages === "undefined") return [];
-		if (disableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator && !separateGiphyPreview) return messages;
+		if (!withDateSeparator && !hideDeletedMessages && hideNewMessageSeparator && !separateGiphyPreview) return messages;
 		return processMessages({
-			enableDateSeparator: !disableDateSeparator,
 			hideDeletedMessages,
 			hideNewMessageSeparator,
 			lastRead,
 			messages,
 			reviewProcessedMessage,
 			setGiphyPreviewMessage,
-			userId: client.userID || ""
+			userId: client.userID || "",
+			withDateSeparator
 		});
 	}, [
-		disableDateSeparator,
+		withDateSeparator,
 		hideDeletedMessages,
 		hideNewMessageSeparator,
 		lastRead,
@@ -138,63 +155,68 @@ var VirtualizedMessageListWithContext = (props) => {
 		shouldGroupByUser,
 		groupStylesFn
 	]);
-	const { atBottom, isMessageListScrolledToBottom, newMessagesNotification, setIsMessageListScrolledToBottom, setNewMessagesNotification } = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer);
+	const { atBottom, isMessageListScrolledToBottom, newMessagesNotification, setIsMessageListScrolledToBottom, setNewMessagesNotification } = useNewMessageNotification(processedMessages, client.userID);
 	useMarkRead({
+		hasMoreNewer,
 		isMessageListScrolledToBottom,
-		messageListIsThread: !!threadList,
-		wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id
+		messageListIsThread: isThreadList
+	});
+	useIncomingMessageAnnouncements({
+		activeThreadId: thread?.id,
+		channel,
+		ownUserId: channel.getClient().user?.id,
+		threadList: isThreadList
 	});
 	const scrollToBottom = useCallback(async () => {
-		if (hasMoreNewer) {
-			await jumpToLatestMessage();
-			return;
-		}
-		if (virtuoso.current) virtuoso.current.scrollToIndex(processedMessages.length - 1);
+		if (messagePaginator.hasMoreHead) await messagePaginator.jumpToTheLatestMessage();
+		else if (virtuoso.current) virtuoso.current.scrollToIndex(processedMessages.length - 1);
 		setNewMessagesNotification(false);
 	}, [
+		messagePaginator,
 		virtuoso,
 		processedMessages,
-		setNewMessagesNotification,
-		processedMessages.length,
-		hasMoreNewer,
-		jumpToLatestMessage
+		setNewMessagesNotification
 	]);
 	useScrollToBottomOnNewMessage({
 		messages,
 		scrollToBottom,
 		scrollToLatestMessageOnFocus
 	});
-	const numItemsPrepended = usePrependedMessagesCount(processedMessages, !disableDateSeparator);
+	const numItemsPrepended = usePrependedMessagesCount(processedMessages, withDateSeparator);
 	const { messageSetKey } = useMessageSetKey({ messages });
 	const shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
-	useIncomingMessageAnnouncements({
-		activeThreadId: thread?.id,
-		channel,
-		ownUserId: client.userID,
-		threadList
-	});
 	const handleItemsRendered = useMemo(() => makeItemsRenderedHandler([toggleShowUnreadMessagesNotification, (rendered) => floatingDateItemsRenderedRef.current?.(rendered)], processedMessages), [processedMessages, toggleShowUnreadMessagesNotification]);
 	const followOutput = (isAtBottom) => {
-		if (hasMoreNewer || suppressAutoscroll) return false;
-		if (shouldForceScrollToBottom()) return isAtBottom ? effectiveStickToBottomScrollBehavior : "auto";
-		return isAtBottom ? effectiveStickToBottomScrollBehavior : false;
+		if (messagePaginator.hasMoreHead || suppressAutoscroll) return false;
+		if (shouldForceScrollToBottom()) return isAtBottom ? stickToBottomScrollBehavior : "auto";
+		return isAtBottom ? stickToBottomScrollBehavior : false;
 	};
 	const computeItemKey = useCallback((index, _, { numItemsPrepended, processedMessages }) => processedMessages[calculateItemIndex(index, numItemsPrepended)].id, []);
+	const canPaginateReplies = useCanPaginateReplies();
 	const atBottomStateChange = (isAtBottom) => {
 		atBottom.current = isAtBottom;
 		setIsMessageListScrolledToBottom(isAtBottom);
 		if (isAtBottom) {
-			loadMoreNewer?.(messageLimit);
+			if (canPaginateReplies) messagePaginator.toHead();
 			setNewMessagesNotification?.(false);
 		}
 	};
 	const atTopStateChange = (isAtTop) => {
-		if (isAtTop) loadMore?.(messageLimit);
+		if (isAtTop) {
+			if (!canPaginateReplies) return;
+			if (loadingOlderRef.current) return;
+			loadingOlderRef.current = true;
+			setSuppressAutoscrollWhileLoadingOlder(true);
+			messagePaginator.toTail().finally(() => {
+				loadingOlderRef.current = false;
+				setSuppressAutoscrollWhileLoadingOlder(false);
+			});
+		}
 	};
 	useEffect(() => {
 		let scrollTimeout;
-		if (highlightedMessageId) {
-			const index = findMessageIndex(processedMessages, highlightedMessageId);
+		if (focusedMessageId) {
+			const index = findMessageIndex(processedMessages, focusedMessageId);
 			if (index !== -1) scrollTimeout = setTimeout(() => {
 				virtuoso.current?.scrollToIndex({
 					align: "center",
@@ -205,133 +227,130 @@ var VirtualizedMessageListWithContext = (props) => {
 		return () => {
 			clearTimeout(scrollTimeout);
 		};
-	}, [highlightedMessageId, processedMessages]);
+	}, [focusedMessageId, processedMessages]);
 	const id = useStableId();
 	if (!processedMessages) return null;
-	const dialogManagerId = threadList ? `virtualized-message-list-dialog-manager-thread-${id}` : `virtualized-message-list-dialog-manager-${id}`;
-	return /* @__PURE__ */ jsx(VirtualizedMessageListContextProvider, {
+	const dialogManagerId = isThreadList ? `virtualized-message-list-dialog-manager-thread-${id}` : `virtualized-message-list-dialog-manager-${id}`;
+	const list = /* @__PURE__ */ jsx(VirtualizedMessageListContextProvider, {
 		value: { scrollToBottom },
-		children: /* @__PURE__ */ jsxs(MessageTranslationViewProvider, { children: [/* @__PURE__ */ jsxs(MessageListMainPanel$1, { children: [/* @__PURE__ */ jsxs(DialogManagerProvider, {
-			id: dialogManagerId,
-			children: [!threadList && showUnreadMessagesNotification && /* @__PURE__ */ jsx(UnreadMessagesNotification$1, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ jsxs("div", {
-				className: customClasses?.virtualizedMessageList || "str-chat__virtual-list",
-				children: [
-					/* @__PURE__ */ jsx(FloatingDateSeparator, {
-						disableDateSeparator,
-						itemsRenderedRef: floatingDateItemsRenderedRef,
-						processedMessages
-					}),
-					/* @__PURE__ */ jsx(Virtuoso, {
-						atBottomStateChange,
-						atBottomThreshold: 100,
-						atTopStateChange,
-						atTopThreshold: 100,
-						className: "str-chat__message-list-scroll",
-						components: {
-							EmptyPlaceholder,
-							Header,
-							Item,
-							...TypingIndicator && { Footer: () => isMessageListScrolledToBottom ? /* @__PURE__ */ jsx(TypingIndicator, {
-								isMessageListScrolledToBottom,
-								scrollToBottom,
-								threadList
-							}) : null },
-							...virtuosoComponentsFromProps
-						},
-						computeItemKey,
-						context: {
-							additionalMessageComposerProps,
-							closeReactionSelectorOnClick,
-							customClasses,
-							customMessageRenderer,
-							DateSeparator: DateSeparator$1,
-							firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
-							formatDate,
-							head,
-							lastOwnMessage,
-							lastReadDate: channelUnreadUiState?.last_read,
-							lastReadMessageId: channelUnreadUiState?.last_read_message_id,
-							lastReceivedMessageId,
-							loadingMore,
-							Message: MessageUIComponent,
-							messageActions,
-							messageGroupStyles,
-							MessageSystem,
-							numItemsPrepended,
-							openThread,
-							ownMessagesDeliveredToOthers,
-							ownMessagesReadByOthers,
+		children: /* @__PURE__ */ jsxs(MessageTranslationViewProvider, { children: [
+			/* @__PURE__ */ jsxs(DialogManagerProvider, {
+				id: dialogManagerId,
+				children: [!isThreadList && showUnreadMessagesNotification && /* @__PURE__ */ jsx(UnreadMessagesNotification$1, { unreadCount: channelUnreadUiState?.unreadCount }), /* @__PURE__ */ jsxs("div", {
+					className: customClasses?.virtualizedMessageList || "str-chat__virtual-list",
+					children: [
+						/* @__PURE__ */ jsx(FloatingDateSeparator, {
+							itemsRenderedRef: floatingDateItemsRenderedRef,
 							processedMessages,
-							reactionDetailsSort,
-							renderText,
-							returnAllReadData,
-							shouldGroupByUser,
-							showAvatar,
-							sortReactions,
-							threadList,
-							unreadMessageCount: channelUnreadUiState?.unread_messages,
-							UnreadMessagesSeparator: UnreadMessagesSeparator$1,
-							virtuosoRef: virtuoso
-						},
-						firstItemIndex: calculateFirstItemIndex(numItemsPrepended),
-						followOutput,
-						increaseViewportBy: {
-							bottom: 200,
-							top: 0
-						},
-						initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId),
-						itemContent: messageRenderer,
-						itemSize: fractionalItemSize,
-						itemsRendered: handleItemsRendered,
-						overscan,
-						ref: virtuoso,
-						style: { overflowX: "hidden" },
-						totalCount: processedMessages.length,
-						...overridingVirtuosoProps,
-						...scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {},
-						...defaultItemHeight ? { defaultItemHeight } : {}
-					}, messageSetKey),
-					/* @__PURE__ */ jsx(NewMessageNotification$1, {
-						newMessageCount: channelUnreadUiState?.unread_messages,
-						showNotification: newMessagesNotification || hasMoreNewer
-					}),
-					/* @__PURE__ */ jsx(ScrollToLatestMessageButton$1, {
-						isMessageListScrolledToBottom,
-						isNotAtLatestMessageSet: hasMoreNewer,
-						onClick: scrollToBottom,
-						threadList
-					})
-				]
-			})]
-		}), /* @__PURE__ */ jsx(NotificationList$1, { panel: notificationTarget })] }), giphyPreviewMessage && /* @__PURE__ */ jsx(GiphyPreviewMessage$1, { message: giphyPreviewMessage })] })
+							withDateSeparator
+						}),
+						/* @__PURE__ */ jsx(Virtuoso, {
+							atBottomStateChange,
+							atBottomThreshold: 100,
+							atTopStateChange,
+							atTopThreshold: 100,
+							className: "str-chat__message-list-scroll",
+							components: {
+								EmptyPlaceholder,
+								Header,
+								Item,
+								...virtuosoComponentsFromProps
+							},
+							computeItemKey,
+							context: {
+								additionalMessageComposerProps,
+								channel,
+								closeReactionSelectorOnClick,
+								customClasses,
+								customMessageRenderer,
+								DateSeparator: DateSeparator$1,
+								firstUnreadMessageId: channelUnreadUiState?.firstUnreadMessageId,
+								focusedMessageId,
+								formatDate,
+								head: threadHead,
+								lastOwnMessage,
+								lastReadDate: channelUnreadUiState?.lastReadAt,
+								lastReadMessageId: channelUnreadUiState?.lastReadMessageId,
+								lastReceivedMessageId,
+								loadingMore: isLoading,
+								messageGroupStyles,
+								MessageSystem,
+								numItemsPrepended,
+								ownMessagesDeliveredToOthers,
+								ownMessagesReadByOthers,
+								processedMessages,
+								reactionDetailsSort,
+								renderText,
+								returnAllReadData,
+								shouldGroupByUser,
+								showAvatar,
+								sortReactions,
+								unreadMessageCount: channelUnreadUiState?.unreadCount,
+								UnreadMessagesSeparator: UnreadMessagesSeparator$1,
+								virtuosoRef: virtuoso
+							},
+							firstItemIndex: calculateFirstItemIndex(numItemsPrepended),
+							followOutput,
+							increaseViewportBy: {
+								bottom: 200,
+								top: 0
+							},
+							initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, focusedMessageId),
+							itemContent: messageRenderer,
+							itemSize: fractionalItemSize,
+							itemsRendered: handleItemsRendered,
+							overscan,
+							ref: virtuoso,
+							style: { overflowX: "hidden" },
+							totalCount: processedMessages.length,
+							...overridingVirtuosoProps,
+							...scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {},
+							...defaultItemHeight ? { defaultItemHeight } : {}
+						}, messageSetKey),
+						/* @__PURE__ */ jsx(NewMessageNotification$1, {
+							newMessageCount: channelUnreadUiState?.unreadCount,
+							showNotification: (newMessagesNotification || hasMoreNewer) && !isMessageListScrolledToBottom
+						}),
+						messages.length > 0 && /* @__PURE__ */ jsx(ScrollToLatestMessageButton, {
+							isMessageListScrolledToBottom,
+							isNotAtLatestMessageSet: hasMoreNewer && messages.length > 0,
+							onClick: scrollToBottom
+						})
+					]
+				})]
+			}),
+			TypingIndicator && /* @__PURE__ */ jsx(TypingIndicator, {
+				isMessageListScrolledToBottom,
+				scrollToBottom
+			}),
+			giphyPreviewMessage && /* @__PURE__ */ jsx(GiphyPreviewMessage$1, { message: giphyPreviewMessage })
+		] })
 	});
+	return VirtualMessage ? /* @__PURE__ */ jsx(WithComponents, {
+		overrides: virtualMessageOverrides,
+		children: list
+	}) : list;
 };
 /**
 * 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).
 */
 function VirtualizedMessageList(props) {
-	const { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext("VirtualizedMessageList");
-	const { channel, channelUnreadUiState, hasMore, hasMoreNewer, highlightedMessageId, loadingMore, loadingMoreNewer, messages: contextMessages, notifications, read, suppressAutoscroll, thread } = useChannelStateContext("VirtualizedMessageList");
-	const messages = props.messages || contextMessages;
-	return /* @__PURE__ */ jsx(VirtualizedMessageListWithContext, {
+	const channel = useChannel();
+	const thread = useThreadContext();
+	const notificationTarget = useNotificationTarget();
+	const { MessageListMainPanel: MessageListMainPanel$1 = MessageListMainPanel, NotificationList: NotificationList$1 = NotificationList } = useComponentContext();
+	const { read } = useStateStore(channel?.state, channelReadSelector) ?? {};
+	const messages = props.messages;
+	return /* @__PURE__ */ jsxs(MessageListMainPanel$1, { children: [/* @__PURE__ */ jsx(VirtualizedMessageListWithContext, {
 		channel,
-		channelUnreadUiState: props.channelUnreadUiState ?? channelUnreadUiState,
-		hasMore: !!hasMore,
-		hasMoreNewer: !!hasMoreNewer,
-		highlightedMessageId,
-		jumpToLatestMessage,
-		loadingMore: !!loadingMore,
-		loadingMoreNewer: !!loadingMoreNewer,
-		loadMore,
-		loadMoreNewer,
 		messages,
-		notifications,
 		read,
-		suppressAutoscroll,
-		thread,
 		...props
-	});
+	}, getMessageSourceKey({
+		channel,
+		thread
+	})), /* @__PURE__ */ jsx(NotificationList$1, { panel: notificationTarget })] });
 }
 //#endregion
 export { VirtualizedMessageList };