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

package/dist/es/components/MessageList/FloatingDateSeparator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingDateSeparator.mjs","names":[],"sources":["../../../../src/components/MessageList/FloatingDateSeparator.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport type { RefObject } from 'react';\n\nimport { DateSeparator as DefaultDateSeparator } from '../DateSeparator';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useFloatingDateSeparatorMessageList } from './hooks/MessageList';\nimport { useFloatingDateSeparator } from './hooks/VirtualizedMessageList';\nimport type { RenderedMessage } from './utils';\n\ntype BaseProps = {\n  disableDateSeparator: boolean;\n  processedMessages: RenderedMessage[];\n};\n\nexport type FloatingDateSeparatorProps = BaseProps &\n  (\n    | {\n        /** For VirtualizedMessageList: ref the parent calls with visible items */\n        itemsRenderedRef: RefObject<((rendered: RenderedMessage[]) => void) | null>;\n      }\n    | {\n        /** For MessageList: scroll container to query DOM for date separators */\n        listElement: HTMLDivElement | null;\n      }\n  );\n\n/**\n * Renders a floating date separator when the user has scrolled past the in-flow date.\n * State is internal so MessageList/VirtualizedMessageList do not re-render when it changes.\n * Use itemsRenderedRef for Virtuoso, listElement for non-virtualized MessageList.\n */\nexport const FloatingDateSeparator = (props: FloatingDateSeparatorProps) => {\n  const { DateSeparator = DefaultDateSeparator } = useComponentContext(\n    'FloatingDateSeparator',\n  );\n  const { disableDateSeparator, processedMessages } = props;\n\n  const listElement = 'listElement' in props ? props.listElement : null;\n  const useDomMode = listElement != null;\n\n  const virtuosoResult = useFloatingDateSeparator({\n    disableDateSeparator,\n    processedMessages,\n  });\n  const domResult = useFloatingDateSeparatorMessageList({\n    disableDateSeparator,\n    listElement,\n    processedMessages,\n  });\n\n  const floatingDate = useDomMode ? domResult.floatingDate : virtuosoResult.floatingDate;\n  const showFloatingDate = useDomMode\n    ? domResult.showFloatingDate\n    : virtuosoResult.showFloatingDate;\n\n  const itemsRenderedRef = 'itemsRenderedRef' in props ? props.itemsRenderedRef : null;\n  useLayoutEffect(() => {\n    if (!itemsRenderedRef) return;\n    itemsRenderedRef.current = virtuosoResult.onItemsRendered;\n    return () => {\n      itemsRenderedRef.current = null;\n    };\n  }, [itemsRenderedRef, virtuosoResult.onItemsRendered]);\n\n  if (!showFloatingDate || !floatingDate || !DateSeparator) return null;\n\n  return <DateSeparator date={floatingDate} floating />;\n};\n"],"mappings":";;;;;;;;;;;;AA+BA,IAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,eAAA,kBAAgB,kBAAyB,oBAC/C,uBACF;CACA,MAAM,EAAE,sBAAsB,sBAAsB;CAEpD,MAAM,cAAc,iBAAiB,QAAQ,MAAM,cAAc;CACjE,MAAM,aAAa,eAAe;CAElC,MAAM,iBAAiB,yBAAyB;EAC9C;EACA;CACF,CAAC;CACD,MAAM,YAAY,oCAAoC;EACpD;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAe,aAAa,UAAU,eAAe,eAAe;CAC1E,MAAM,mBAAmB,aACrB,UAAU,mBACV,eAAe;CAEnB,MAAM,mBAAmB,sBAAsB,QAAQ,MAAM,mBAAmB;CAChF,sBAAsB;EACpB,IAAI,CAAC,kBAAkB;EACvB,iBAAiB,UAAU,eAAe;EAC1C,aAAa;GACX,iBAAiB,UAAU;EAC7B;CACF,GAAG,CAAC,kBAAkB,eAAe,eAAe,CAAC;CAErD,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,iBAAe,OAAO;CAEjE,OAAO,oBAAC,iBAAD;EAAe,MAAM;EAAc,UAAA;CAAU,CAAA;AACtD"}
+{"version":3,"file":"FloatingDateSeparator.mjs","names":[],"sources":["../../../../src/components/MessageList/FloatingDateSeparator.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport type { RefObject } from 'react';\n\nimport { DateSeparator as DefaultDateSeparator } from '../DateSeparator';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useFloatingDateSeparatorMessageList } from './hooks/MessageList';\nimport { useFloatingDateSeparator } from './hooks/VirtualizedMessageList';\nimport type { RenderedMessage } from './utils';\n\ntype BaseProps = {\n  processedMessages: RenderedMessage[];\n  withDateSeparator: boolean;\n};\n\nexport type FloatingDateSeparatorProps = BaseProps &\n  (\n    | {\n        /** For VirtualizedMessageList: ref the parent calls with visible items */\n        itemsRenderedRef: RefObject<((rendered: RenderedMessage[]) => void) | null>;\n      }\n    | {\n        /** For MessageList: scroll container to query DOM for date separators */\n        listElement: HTMLDivElement | null;\n      }\n  );\n\n/**\n * Renders a floating date separator when the user has scrolled past the in-flow date.\n * State is internal so MessageList/VirtualizedMessageList do not re-render when it changes.\n * Use itemsRenderedRef for Virtuoso, listElement for non-virtualized MessageList.\n */\nexport const FloatingDateSeparator = (props: FloatingDateSeparatorProps) => {\n  const { DateSeparator = DefaultDateSeparator } = useComponentContext();\n  const { processedMessages, withDateSeparator } = props;\n\n  const listElement = 'listElement' in props ? props.listElement : null;\n  const useDomMode = listElement != null;\n\n  const virtuosoResult = useFloatingDateSeparator({\n    processedMessages,\n    withDateSeparator,\n  });\n  const domResult = useFloatingDateSeparatorMessageList({\n    listElement,\n    processedMessages,\n    withDateSeparator,\n  });\n\n  const floatingDate = useDomMode ? domResult.floatingDate : virtuosoResult.floatingDate;\n  const showFloatingDate = useDomMode\n    ? domResult.showFloatingDate\n    : virtuosoResult.showFloatingDate;\n\n  const itemsRenderedRef = 'itemsRenderedRef' in props ? props.itemsRenderedRef : null;\n  useLayoutEffect(() => {\n    if (!itemsRenderedRef) return;\n    itemsRenderedRef.current = virtuosoResult.onItemsRendered;\n    return () => {\n      itemsRenderedRef.current = null;\n    };\n  }, [itemsRenderedRef, virtuosoResult.onItemsRendered]);\n\n  if (!showFloatingDate || !floatingDate || !DateSeparator) return null;\n\n  return <DateSeparator date={floatingDate} floating />;\n};\n"],"mappings":";;;;;;;;;;;;AA+BA,IAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,eAAA,kBAAgB,kBAAyB,oBAAoB;CACrE,MAAM,EAAE,mBAAmB,sBAAsB;CAEjD,MAAM,cAAc,iBAAiB,QAAQ,MAAM,cAAc;CACjE,MAAM,aAAa,eAAe;CAElC,MAAM,iBAAiB,yBAAyB;EAC9C;EACA;CACF,CAAC;CACD,MAAM,YAAY,oCAAoC;EACpD;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAe,aAAa,UAAU,eAAe,eAAe;CAC1E,MAAM,mBAAmB,aACrB,UAAU,mBACV,eAAe;CAEnB,MAAM,mBAAmB,sBAAsB,QAAQ,MAAM,mBAAmB;CAChF,sBAAsB;EACpB,IAAI,CAAC,kBAAkB;EACvB,iBAAiB,UAAU,eAAe;EAC1C,aAAa;GACX,iBAAiB,UAAU;EAC7B;CACF,GAAG,CAAC,kBAAkB,eAAe,eAAe,CAAC;CAErD,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,iBAAe,OAAO;CAEjE,OAAO,oBAAC,iBAAD;EAAe,MAAM;EAAc,UAAA;CAAU,CAAA;AACtD"}

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

@@ -1,89 +1,90 @@
-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 { MessageListContextProvider } from "../../context/MessageListContext.mjs";
-import { MessageTranslationViewProvider } from "../../context/MessageTranslationViewContext.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 { EmptyStateIndicator } from "../EmptyStateIndicator/EmptyStateIndicator.mjs";
+import { InfiniteScrollPaginator } from "../InfiniteScrollPaginator/InfiniteScrollPaginator.mjs";
 import { LoadingIndicator } from "../Loading/LoadingIndicator.mjs";
-import { MESSAGE_ACTIONS } from "../Message/utils.mjs";
+import { MessageTranslationViewProvider } from "../../context/MessageTranslationViewContext.mjs";
+import { useMessagePaginator } from "../../hooks/useMessagePaginator.mjs";
 import { useEnrichedMessages } from "./hooks/MessageList/useEnrichedMessages.mjs";
 import { useMessageListElements } from "./hooks/MessageList/useMessageListElements.mjs";
 import { useScrollLocationLogic } from "./hooks/MessageList/useScrollLocationLogic.mjs";
 import { MessageListMainPanel } from "./MessageListMainPanel.mjs";
 import { useUnreadMessagesNotification } from "./hooks/MessageList/useUnreadMessagesNotification.mjs";
+import { getMessageSourceKey } from "./messageSourceKey.mjs";
 import { useMarkRead } from "./hooks/useMarkRead.mjs";
 import { NewMessageNotification } from "./NewMessageNotification.mjs";
 import { UnreadMessagesNotification } from "./UnreadMessagesNotification.mjs";
-import { InfiniteScroll } from "../InfiniteScrollPaginator/InfiniteScroll.mjs";
+import { MessageListContextProvider } from "../../context/MessageListContext.mjs";
 import { TypingIndicator } from "../TypingIndicator/TypingIndicator.mjs";
 import { FloatingDateSeparator } from "./FloatingDateSeparator.mjs";
 import { defaultRenderMessages } from "./renderMessages.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 { useNotificationTarget } from "../Notifications/hooks/useNotificationTarget.mjs";
-import { NotificationList } from "../Notifications/NotificationList.mjs";
-import { useIncomingMessageAnnouncements } from "../Accessibility/hooks/useIncomingMessageAnnouncements.mjs";
-import React from "react";
+import { useCanPaginateReplies } from "./hooks/useCanPaginateReplies.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import React, { createElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/MessageList/MessageList.tsx
-var getMessageSetSignature = (messages) => `${messages.length}:${messages[0]?.id || ""}:${messages[messages.length - 1]?.id || ""}`;
-var getMessageTimestamp = (message) => message?.created_at?.getTime?.() ?? null;
+var messagePaginatorStateSelector = (state) => ({
+	hasMoreNewer: state.hasMoreHead,
+	isLoading: state.isLoading,
+	messages: state.items ?? []
+});
+var unreadStateSnapshotSelector = (state) => state;
+var messageFocusSignalSelector = (state) => ({ messageFocusSignal: state.signal });
+var getScrollBehavior = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
 var MessageListWithContext = (props) => {
-	const { channel, channelUnreadUiState, disableDateSeparator = false, groupStyles, hasMoreNewer = false, headerPosition, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, internalInfiniteScrollProps: { threshold: loadMoreScrollThreshold = 250, ...restInternalInfiniteScrollProps } = {}, jumpToLatestMessage = () => Promise.resolve(), loadMore: loadMoreCallback, loadMoreNewer: loadMoreNewerCallback, maxTimeBetweenGroupedMessages, messageActions = Object.keys(MESSAGE_ACTIONS), messageLimit = 25, messages = [], noGroupByUser = false, reactionDetailsSort, renderMessages = defaultRenderMessages, returnAllReadData = false, reviewProcessedMessage, showUnreadNotificationAlways, sortReactions, suppressAutoscroll, thread, threadList = false, unsafeHTML = false } = props;
+	const channel = useChannel();
+	const threadHead = useThreadHead();
+	const { groupStyles, headerPosition, hideDeletedMessages = false, hideNewMessageSeparator = false, internalInfiniteScrollProps: { element: internalListElement = "div", threshold: loadMoreScrollThreshold = 250, ...restInternalInfiniteScrollProps } = {}, maxTimeBetweenGroupedMessages, noGroupByUser = false, reactionDetailsSort, renderMessages = defaultRenderMessages, returnAllReadData = false, reviewProcessedMessage, showUnreadNotificationAlways, sortReactions, suppressAutoscroll: suppressAutoscrollFromProps = false, unsafeHTML = false, withDateSeparator = true } = props;
+	const thread = useThreadContext();
+	const isThreadList = !!thread;
+	const [suppressAutoscrollWhileLoadingOlder, setSuppressAutoscrollWhileLoadingOlder] = React.useState(false);
+	const suppressAutoscroll = suppressAutoscrollFromProps || suppressAutoscrollWhileLoadingOlder;
+	const loadingOlderRef = React.useRef(false);
 	const [listElement, setListElement] = React.useState(null);
-	const [jumpToLatestPhase, setJumpToLatestPhase] = React.useState("idle");
-	const [highlightedJumpPhase, setHighlightedJumpPhase] = React.useState("idle");
-	const [jumpSourceMessageSetSignature, setJumpSourceMessageSetSignature] = React.useState(null);
-	const previousHasMoreNewerRef = React.useRef(hasMoreNewer);
-	const previousMessageSetSignatureRef = React.useRef("");
-	const previousMessageSetBoundsRef = React.useRef({
-		firstTimestamp: null,
-		lastTimestamp: null
-	});
-	const { customClasses } = useChatContext("MessageList");
-	const scrollBehavior = useReducedMotionPreference() ? "auto" : "smooth";
-	const { EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, MessageListMainPanel: MessageListMainPanel$1 = MessageListMainPanel, MessageListWrapper = "ul", NewMessageNotification: NewMessageNotification$1 = NewMessageNotification, NotificationList: NotificationList$1 = NotificationList, ScrollToLatestMessageButton: ScrollToLatestMessageButton$1 = ScrollToLatestMessageButton, TypingIndicator: TypingIndicator$1 = TypingIndicator, UnreadMessagesNotification: UnreadMessagesNotification$1 = UnreadMessagesNotification } = useComponentContext();
-	const notificationTarget = useNotificationTarget();
-	const messageSetSignature = React.useMemo(() => getMessageSetSignature(messages), [messages]);
-	const messageSetBounds = React.useMemo(() => ({
-		firstTimestamp: getMessageTimestamp(messages[0]),
-		lastTimestamp: getMessageTimestamp(messages[messages.length - 1])
-	}), [messages]);
-	const isJumpingToLatest = jumpToLatestPhase !== "idle";
-	const isHighlightedJumpRequested = !!highlightedMessageId;
-	const isJumpingToHighlightedMessage = highlightedJumpPhase !== "idle";
-	const justReachedLatestMergedSet = previousHasMoreNewerRef.current && !hasMoreNewer;
+	const { customClasses } = useChatContext();
+	const { EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, MessageListWrapper = "ul", NewMessageNotification: NewMessageNotification$1 = NewMessageNotification, TypingIndicator: TypingIndicator$1 = TypingIndicator, UnreadMessagesNotification: UnreadMessagesNotification$1 = UnreadMessagesNotification } = useComponentContext();
+	const messagePaginator = useMessagePaginator();
+	const { hasMoreNewer, isLoading, messages } = useStateStore(messagePaginator.state, messagePaginatorStateSelector);
+	const channelUnreadUiState = useStateStore(messagePaginator.unreadStateSnapshot, unreadStateSnapshotSelector);
+	const { messageFocusSignal } = useStateStore(messagePaginator.messageFocusSignal, messageFocusSignalSelector);
+	const focusedMessageId = messageFocusSignal?.messageId;
 	const { hasNewMessages, isMessageListScrolledToBottom, onScroll, scrollToBottom, wrapperRect } = useScrollLocationLogic({
-		disableAutoScrollToBottom: isJumpingToLatest || isHighlightedJumpRequested || justReachedLatestMergedSet,
-		disableScrollManagement: isJumpingToLatest || isJumpingToHighlightedMessage,
 		hasMoreNewer,
 		listElement,
-		loadingMore: props.loadingMore,
 		loadMoreScrollThreshold,
 		messages,
 		scrolledUpThreshold: props.scrolledUpThreshold,
 		suppressAutoscroll
 	});
-	const isTypingIndicatorScrolledToBottom = isMessageListScrolledToBottom && !isJumpingToLatest && !isJumpingToHighlightedMessage && !justReachedLatestMergedSet;
 	const { show: showUnreadMessagesNotification } = useUnreadMessagesNotification({
 		isMessageListScrolledToBottom,
 		listElement,
-		showAlways: !!showUnreadNotificationAlways,
-		unreadCount: channelUnreadUiState?.unread_messages
+		showAlways: !!showUnreadNotificationAlways
 	});
 	useMarkRead({
-		isMessageListScrolledToBottom: isTypingIndicatorScrolledToBottom,
-		messageListIsThread: threadList,
-		wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id
+		hasMoreNewer,
+		isMessageListScrolledToBottom,
+		messageListIsThread: isThreadList
+	});
+	useIncomingMessageAnnouncements({
+		activeThreadId: thread?.id,
+		channel,
+		ownUserId: channel.getClient().user?.id,
+		threadList: isThreadList
 	});
 	const { messageGroupStyles, messages: enrichedMessages } = useEnrichedMessages({
 		channel,
-		disableDateSeparator,
 		groupStyles,
 		headerPosition,
 		hideDeletedMessages,
@@ -91,31 +92,28 @@ var MessageListWithContext = (props) => {
 		maxTimeBetweenGroupedMessages,
 		messages,
 		noGroupByUser,
-		reviewProcessedMessage
+		reviewProcessedMessage,
+		withDateSeparator
 	});
 	const lastOwnMessage = useLastOwnMessage({
 		messages,
 		ownUserId: channel.getClient().user?.id
 	});
 	const elements = useMessageListElements({
-		channelUnreadUiState,
 		enrichedMessages,
+		focusedMessageId,
 		internalMessageProps: {
 			additionalMessageComposerProps: props.additionalMessageComposerProps,
 			closeReactionSelectorOnClick: props.closeReactionSelectorOnClick,
 			disableQuotedMessages: props.disableQuotedMessages,
 			formatDate: props.formatDate,
-			Message: props.Message,
-			messageActions,
 			messageListRect: wrapperRect,
 			onMentionsClick: props.onMentionsClick,
 			onMentionsHover: props.onMentionsHover,
 			onUserClick: props.onUserClick,
 			onUserHover: props.onUserHover,
-			openThread: props.openThread,
 			reactionDetailsSort,
 			renderText: props.renderText,
-			retrySendMessage: props.retrySendMessage,
 			showAvatar: props.showAvatar,
 			sortReactions,
 			unsafeHTML
@@ -124,204 +122,161 @@ var MessageListWithContext = (props) => {
 		messageGroupStyles,
 		messages,
 		renderMessages,
-		returnAllReadData,
-		threadList
-	});
-	useIncomingMessageAnnouncements({
-		activeThreadId: thread?.id,
-		channel,
-		ownUserId: channel.getClient().user?.id,
-		threadList
+		returnAllReadData
 	});
 	const messageListClass = customClasses?.messageList || "str-chat__message-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) {
-			setJumpSourceMessageSetSignature(messageSetSignature);
-			setJumpToLatestPhase("waiting-for-render");
-			try {
-				await jumpToLatestMessage();
-			} catch (error) {
-				setJumpSourceMessageSetSignature(null);
-				setJumpToLatestPhase("idle");
-				throw error;
-			}
-			return;
+	const canPaginateReplies = useCanPaginateReplies();
+	const loadOlderMessages = React.useCallback(async () => {
+		if (loadingOlderRef.current) return;
+		loadingOlderRef.current = true;
+		setSuppressAutoscrollWhileLoadingOlder(true);
+		try {
+			await messagePaginator.toTail();
+		} finally {
+			loadingOlderRef.current = false;
+			setSuppressAutoscrollWhileLoadingOlder(false);
 		}
-		scrollToBottom({ behavior: scrollBehavior });
-	}, [
-		scrollBehavior,
-		hasMoreNewer,
-		jumpToLatestMessage,
-		messageSetSignature,
-		scrollToBottom
-	]);
+	}, [messagePaginator]);
+	const scrollToBottomFromNotification = React.useCallback(() => {
+		if (messagePaginator.hasMoreHead) messagePaginator.jumpToTheLatestMessage();
+		else scrollToBottom({ behavior: getScrollBehavior() });
+	}, [messagePaginator, scrollToBottom]);
 	React.useLayoutEffect(() => {
-		if (jumpToLatestPhase !== "waiting-for-render" || hasMoreNewer || !listElement?.scrollTo || messageSetSignature === jumpSourceMessageSetSignature) return;
-		listElement.scrollTo({ top: 0 });
-		const animationFrameId = requestAnimationFrame(() => {
-			setJumpToLatestPhase("animating");
-			listElement.scrollTo({
-				behavior: scrollBehavior,
-				top: listElement.scrollHeight
-			});
+		if (!messageFocusSignal || !listElement) return;
+		const { messageId, token } = messageFocusSignal;
+		const findTarget = () => listElement.querySelector(`[data-message-id='${messageId}']`);
+		const centerTarget = (behavior) => findTarget()?.scrollIntoView({
+			behavior,
+			block: "center"
 		});
-		return () => cancelAnimationFrame(animationFrameId);
-	}, [
-		scrollBehavior,
-		hasMoreNewer,
-		jumpSourceMessageSetSignature,
-		jumpToLatestPhase,
-		listElement,
-		messageSetSignature
-	]);
-	React.useLayoutEffect(() => {
-		if (jumpToLatestPhase !== "animating" || !listElement?.scrollTo) return;
-		const finalize = () => {
-			listElement.scrollTo({ top: listElement.scrollHeight });
-			setJumpSourceMessageSetSignature(null);
-			setJumpToLatestPhase("idle");
-		};
-		const settleTimeoutId = setTimeout(finalize, 500);
-		return () => {
-			clearTimeout(settleTimeoutId);
-		};
-	}, [jumpToLatestPhase, listElement]);
-	React.useLayoutEffect(() => {
-		if (!highlightedMessageId) {
-			setHighlightedJumpPhase("idle");
-			return;
-		}
-		const element = listElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
-		if (!element) {
-			setHighlightedJumpPhase("waiting-for-render");
+		centerTarget(getScrollBehavior());
+		const target = findTarget();
+		if (!target || typeof IntersectionObserver === "undefined" || typeof ResizeObserver === "undefined") {
+			messagePaginator.scheduleMessageFocusSignalClear({ token });
 			return;
 		}
-		const messageSetChanged = previousMessageSetSignatureRef.current !== messageSetSignature;
-		setHighlightedJumpPhase(messageSetChanged ? "animating" : "idle");
-		let settleTimeoutId;
-		const animationFrameId = requestAnimationFrame(() => {
-			element.scrollIntoView({
-				behavior: scrollBehavior,
-				block: "center"
-			});
-			if (!messageSetChanged || !listElement?.scrollTo) {
-				setHighlightedJumpPhase("idle");
-				return;
-			}
-			settleTimeoutId = setTimeout(() => {
-				const elementRect = element.getBoundingClientRect();
-				const listRect = listElement.getBoundingClientRect();
-				const targetTop = listElement.scrollTop + (elementRect.top - listRect.top) - (listElement.clientHeight - elementRect.height) / 2;
-				listElement.scrollTo({ top: Math.max(targetTop, 0) });
-				setHighlightedJumpPhase("idle");
-			}, 500);
+		let lastWidth = listElement.clientWidth;
+		let lastHeight = listElement.clientHeight;
+		const relayoutObserver = new ResizeObserver(() => {
+			const width = listElement.clientWidth;
+			const height = listElement.clientHeight;
+			if (width === lastWidth && height === lastHeight) return;
+			lastWidth = width;
+			lastHeight = height;
+			centerTarget("auto");
+		});
+		const viewObserver = new IntersectionObserver((entries) => {
+			const entry = entries[entries.length - 1];
+			const rootHeight = listElement.clientHeight || 1;
+			if (!(entry.isIntersecting && (entry.intersectionRatio >= .5 || entry.intersectionRect.height >= rootHeight * .5))) return;
+			messagePaginator.scheduleMessageFocusSignalClear({ token });
+			viewObserver.disconnect();
+			relayoutObserver.disconnect();
+		}, {
+			root: listElement,
+			threshold: [
+				0,
+				.5,
+				1
+			]
 		});
+		viewObserver.observe(target);
+		relayoutObserver.observe(listElement);
 		return () => {
-			cancelAnimationFrame(animationFrameId);
-			if (settleTimeoutId) clearTimeout(settleTimeoutId);
+			viewObserver.disconnect();
+			relayoutObserver.disconnect();
 		};
 	}, [
-		scrollBehavior,
-		highlightedMessageId,
-		messageSetSignature
+		messageFocusSignal,
+		listElement,
+		messagePaginator
 	]);
-	React.useEffect(() => {
-		previousHasMoreNewerRef.current = hasMoreNewer;
-	}, [hasMoreNewer]);
-	React.useEffect(() => {
-		previousMessageSetSignatureRef.current = messageSetSignature;
-		previousMessageSetBoundsRef.current = messageSetBounds;
-	}, [messageSetBounds, messageSetSignature]);
 	const id = useStableId();
-	const showEmptyStateIndicator = elements.length === 0 && !threadList;
-	const dialogManagerId = threadList ? `message-list-dialog-manager-thread-${id}` : `message-list-dialog-manager-${id}`;
+	const showEmptyStateIndicator = elements.length === 0 && !isThreadList;
+	const dialogManagerId = isThreadList ? `message-list-dialog-manager-thread-${id}` : `message-list-dialog-manager-${id}`;
 	return /* @__PURE__ */ jsx(MessageListContextProvider, {
 		value: {
 			listElement,
 			processedMessages: enrichedMessages,
 			scrollToBottom
 		},
-		children: /* @__PURE__ */ jsx(MessageTranslationViewProvider, { children: /* @__PURE__ */ jsxs(MessageListMainPanel$1, { children: [/* @__PURE__ */ jsxs(DialogManagerProvider, {
+		children: /* @__PURE__ */ jsx(MessageTranslationViewProvider, { children: /* @__PURE__ */ jsxs(DialogManagerProvider, {
 			id: dialogManagerId,
 			children: [
-				!threadList && showUnreadMessagesNotification && /* @__PURE__ */ jsx(UnreadMessagesNotification$1, { unreadCount: channelUnreadUiState?.unread_messages }),
+				!isThreadList && showUnreadMessagesNotification && /* @__PURE__ */ jsx(UnreadMessagesNotification$1, { unreadCount: channelUnreadUiState?.unreadCount }),
 				/* @__PURE__ */ jsx(FloatingDateSeparator, {
-					disableDateSeparator,
 					listElement,
-					processedMessages: enrichedMessages
+					processedMessages: enrichedMessages,
+					withDateSeparator
 				}),
-				/* @__PURE__ */ jsx("div", {
+				/* @__PURE__ */ jsxs("div", {
 					className: clsx(messageListClass, customClasses?.threadList),
 					onScroll,
 					ref: setListElement,
 					tabIndex: 0,
-					children: showEmptyStateIndicator ? /* @__PURE__ */ jsx(EmptyStateIndicator$1, { listType: threadList ? "thread" : "message" }) : /* @__PURE__ */ jsxs(InfiniteScroll, {
-						className: "str-chat__message-list-scroll",
-						"data-testid": "reverse-infinite-scroll",
-						hasNextPage: props.hasMoreNewer,
-						hasPreviousPage: isJumpingToHighlightedMessage ? false : props.hasMore,
-						head: props.head,
-						isLoading: Boolean(props.loadingMore || props.loadingMoreForJumpToChannelMessage),
-						loader: /* @__PURE__ */ jsx("div", {
-							className: "str-chat__list__loading",
-							children: (props.loadingMore || props.loadingMoreForJumpToChannelMessage) && /* @__PURE__ */ jsx(LoadingIndicator$1, {})
-						}, "loading-indicator"),
-						loadNextPage: loadMoreNewer,
-						loadPreviousPage: isJumpingToHighlightedMessage ? () => void 0 : loadMore,
-						threshold: loadMoreScrollThreshold,
-						...restInternalInfiniteScrollProps,
-						children: [
-							/* @__PURE__ */ jsx(MessageListWrapper, {
-								className: "str-chat__ul",
-								children: elements
-							}),
-							/* @__PURE__ */ jsx(TypingIndicator$1, {
-								isMessageListScrolledToBottom: isTypingIndicatorScrolledToBottom,
-								scrollToBottom,
-								threadList
-							}),
-							/* @__PURE__ */ jsx("div", {}, "bottom")
-						]
-					})
-				}),
-				/* @__PURE__ */ jsx(NewMessageNotification$1, {
-					newMessageCount: channelUnreadUiState?.unread_messages,
-					showNotification: hasNewMessages || hasMoreNewer
-				}),
-				/* @__PURE__ */ jsx(ScrollToLatestMessageButton$1, {
-					isMessageListScrolledToBottom,
-					isNotAtLatestMessageSet: hasMoreNewer,
-					onClick: scrollToBottomFromNotification,
-					threadList
+					children: [
+						showEmptyStateIndicator ? /* @__PURE__ */ jsx(EmptyStateIndicator$1, { listType: isThreadList ? "thread" : "message" }) : /* @__PURE__ */ jsxs(InfiniteScrollPaginator, {
+							className: "str-chat__message-list-scroll",
+							"data-testid": "reverse-infinite-scroll",
+							element: internalListElement,
+							loadNextOnScrollToBottom: canPaginateReplies ? messagePaginator.toHead : void 0,
+							loadNextOnScrollToTop: canPaginateReplies ? loadOlderMessages : void 0,
+							onScroll,
+							ref: setListElement,
+							threshold: loadMoreScrollThreshold,
+							...restInternalInfiniteScrollProps,
+							children: [
+								threadHead,
+								isLoading && /* @__PURE__ */ jsx("div", {
+									className: "str-chat__list__loading",
+									children: props.loadingMore && /* @__PURE__ */ jsx(LoadingIndicator$1, {})
+								}, "loading-indicator"),
+								/* @__PURE__ */ jsx(MessageListWrapper, {
+									className: "str-chat__ul",
+									children: elements
+								}),
+								/* @__PURE__ */ jsx(TypingIndicator$1, {
+									isMessageListScrolledToBottom,
+									scrollToBottom
+								}),
+								/* @__PURE__ */ jsx("div", {}, "bottom")
+							]
+						}),
+						/* @__PURE__ */ jsx(NewMessageNotification$1, {
+							newMessageCount: channelUnreadUiState?.unreadCount,
+							showNotification: (hasNewMessages || hasMoreNewer) && !isMessageListScrolledToBottom
+						}),
+						messages.length > 0 && /* @__PURE__ */ jsx(ScrollToLatestMessageButton, {
+							isMessageListScrolledToBottom,
+							isNotAtLatestMessageSet: hasMoreNewer && messages.length > 0,
+							onClick: scrollToBottomFromNotification
+						})
+					]
 				})
 			]
-		}), /* @__PURE__ */ jsx(NotificationList$1, { panel: notificationTarget })] }) })
+		}) })
 	});
 };
 /**
 * 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/)
+* - `ChannelInstanceContext`
+* - `ChatContext`
+* - `ComponentContext`
+* - `ThreadContext`
 */
 var MessageList = (props) => {
-	const { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext("MessageList");
-	const { members: membersPropToNotPass, mutes: mutesPropToNotPass, watchers: watchersPropToNotPass, ...restChannelStateContext } = useChannelStateContext("MessageList");
-	return /* @__PURE__ */ jsx(MessageListWithContext, {
-		jumpToLatestMessage,
-		loadMore,
-		loadMoreNewer,
-		...restChannelStateContext,
-		...props
-	});
+	const channel = useChannel();
+	const thread = useThreadContext();
+	const notificationTarget = useNotificationTarget();
+	const { MessageListMainPanel: MessageListMainPanel$1 = MessageListMainPanel, NotificationList: NotificationList$1 = NotificationList } = useComponentContext();
+	return /* @__PURE__ */ jsxs(MessageListMainPanel$1, { children: [/* @__PURE__ */ createElement(MessageListWithContext, {
+		...props,
+		key: getMessageSourceKey({
+			channel,
+			thread
+		})
+	}), /* @__PURE__ */ jsx(NotificationList$1, { panel: notificationTarget })] });
 };
 //#endregion
 export { MessageList };