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

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

@@ -0,0 +1,38 @@
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { getGroupStyles, insertIntro, processMessages } from "../../utils.mjs";
+import { useMemo } from "react";
+//#region src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
+var useEnrichedMessages = (args) => {
+	const { channel, groupStyles, headerPosition, hideDeletedMessages, hideNewMessageSeparator, maxTimeBetweenGroupedMessages, messages, noGroupByUser, reviewProcessedMessage, withDateSeparator } = args;
+	const { client } = useChatContext();
+	const { HeaderComponent } = useComponentContext();
+	const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
+	let messagesWithDates = !withDateSeparator && !hideDeletedMessages && hideNewMessageSeparator ? messages : processMessages({
+		hideDeletedMessages,
+		hideNewMessageSeparator,
+		lastRead,
+		messages,
+		reviewProcessedMessage,
+		userId: client.userID || "",
+		withDateSeparator
+	});
+	if (HeaderComponent) messagesWithDates = insertIntro(messagesWithDates, headerPosition);
+	const groupStylesFn = groupStyles || getGroupStyles;
+	return {
+		messageGroupStyles: useMemo(() => messagesWithDates.reduce((acc, message, i) => {
+			const style = groupStylesFn(message, messagesWithDates[i - 1], messagesWithDates[i + 1], noGroupByUser, maxTimeBetweenGroupedMessages);
+			if (style) acc[message.id] = style;
+			return acc;
+		}, {}), [
+			maxTimeBetweenGroupedMessages,
+			messagesWithDates,
+			noGroupByUser
+		]),
+		messages: messagesWithDates
+	};
+};
+//#endregion
+export { useEnrichedMessages };
+
+//# sourceMappingURL=useEnrichedMessages.mjs.map

package/dist/es/components/MessageList/hooks/MessageList/useEnrichedMessages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnrichedMessages.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { GroupStyle, ProcessMessagesParams, RenderedMessage } from '../../utils';\nimport { getGroupStyles, insertIntro, processMessages } from '../../utils';\n\nimport { useChatContext } from '../../../../context/ChatContext';\nimport { useComponentContext } from '../../../../context/ComponentContext';\n\nimport type { Channel, LocalMessage, TimestampNS } from 'stream-chat';\n\nexport const useEnrichedMessages = (args: {\n  channel: Channel;\n  hideDeletedMessages: boolean;\n  hideNewMessageSeparator: boolean;\n  messages: LocalMessage[];\n  noGroupByUser: boolean;\n  withDateSeparator: boolean;\n  groupStyles?: (\n    message: RenderedMessage,\n    previousMessage: RenderedMessage,\n    nextMessage: RenderedMessage,\n    noGroupByUser: boolean,\n    maxTimeBetweenGroupedMessages?: number,\n  ) => GroupStyle;\n  headerPosition?: TimestampNS;\n  maxTimeBetweenGroupedMessages?: number;\n  reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];\n}) => {\n  const {\n    channel,\n    groupStyles,\n    headerPosition,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    maxTimeBetweenGroupedMessages,\n    messages,\n    noGroupByUser,\n    reviewProcessedMessage,\n    withDateSeparator,\n  } = args;\n\n  const { client } = useChatContext();\n  const { HeaderComponent } = useComponentContext();\n\n  const lastRead = useMemo(() => channel.lastRead?.(), [channel]);\n\n  let messagesWithDates =\n    !withDateSeparator && !hideDeletedMessages && hideNewMessageSeparator\n      ? messages\n      : processMessages({\n          hideDeletedMessages,\n          hideNewMessageSeparator,\n          lastRead,\n          messages,\n          reviewProcessedMessage,\n          userId: client.userID || '',\n          withDateSeparator,\n        });\n\n  if (HeaderComponent) {\n    messagesWithDates = insertIntro(messagesWithDates, headerPosition);\n  }\n\n  const groupStylesFn = groupStyles || getGroupStyles;\n  const messageGroupStyles = useMemo(\n    () =>\n      messagesWithDates.reduce<Record<string, GroupStyle>>((acc, message, i) => {\n        const style = groupStylesFn(\n          message,\n          messagesWithDates[i - 1],\n          messagesWithDates[i + 1],\n          noGroupByUser,\n          maxTimeBetweenGroupedMessages,\n        );\n        if (style) acc[message.id] = style;\n        return acc;\n      }, {}),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [maxTimeBetweenGroupedMessages, messagesWithDates, noGroupByUser],\n  );\n\n  return { messageGroupStyles, messages: messagesWithDates };\n};\n"],"mappings":";;;;;AAUA,IAAa,uBAAuB,SAiB9B;CACJ,MAAM,EACJ,SACA,aACA,gBACA,qBACA,yBACA,+BACA,UACA,eACA,wBACA,sBACE;CAEJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,MAAM,WAAW,cAAc,QAAQ,WAAW,GAAG,CAAC,OAAO,CAAC;CAE9D,IAAI,oBACF,CAAC,qBAAqB,CAAC,uBAAuB,0BAC1C,WACA,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA,QAAQ,OAAO,UAAU;EACzB;CACF,CAAC;CAEP,IAAI,iBACF,oBAAoB,YAAY,mBAAmB,cAAc;CAGnE,MAAM,gBAAgB,eAAe;CAkBrC,OAAO;EAAE,oBAjBkB,cAEvB,kBAAkB,QAAoC,KAAK,SAAS,MAAM;GACxE,MAAM,QAAQ,cACZ,SACA,kBAAkB,IAAI,IACtB,kBAAkB,IAAI,IACtB,eACA,6BACF;GACA,IAAI,OAAO,IAAI,QAAQ,MAAM;GAC7B,OAAO;EACT,GAAG,CAAC,CAAC,GAEP;GAAC;GAA+B;GAAmB;EAAa,CAGzD;EAAoB,UAAU;CAAkB;AAC3D"}

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

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useState } from "react";
+import throttle from "lodash.throttle";
+//#region src/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.ts
+var DATE_SEPARATOR_SELECTOR = ".str-chat__date-separator:not(.str-chat__date-separator--floating)";
+var THROTTLE_MS = 100;
+/**
+* For non-virtualized MessageList: keeps the floating date synced with the
+* separator currently pinned to the top boundary of the list viewport.
+*/
+var useFloatingDateSeparatorMessageList = ({ listElement, processedMessages, withDateSeparator }) => {
+	const [state, setState] = useState({
+		date: null,
+		visible: false
+	});
+	const update = useCallback(() => {
+		if (!withDateSeparator || !listElement || processedMessages.length === 0) {
+			setState({
+				date: null,
+				visible: false
+			});
+			return;
+		}
+		const separators = listElement.querySelectorAll(DATE_SEPARATOR_SELECTOR);
+		if (separators.length === 0) {
+			setState({
+				date: null,
+				visible: false
+			});
+			return;
+		}
+		const containerRect = listElement.getBoundingClientRect();
+		let bestDate = null;
+		let bestTop = -Infinity;
+		for (const el of separators) {
+			const rect = el.getBoundingClientRect();
+			const dataDate = el.getAttribute("data-date");
+			if (!dataDate) continue;
+			if (rect.top <= containerRect.top && rect.top > bestTop) {
+				bestTop = rect.top;
+				const d = new Date(dataDate);
+				if (!isNaN(d.getTime())) bestDate = d;
+			}
+		}
+		setState({
+			date: bestDate,
+			visible: bestDate !== null
+		});
+	}, [
+		withDateSeparator,
+		listElement,
+		processedMessages
+	]);
+	useEffect(() => {
+		if (!listElement) return;
+		const throttled = throttle(update, THROTTLE_MS);
+		throttled();
+		listElement.addEventListener("scroll", throttled);
+		const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(throttled) : void 0;
+		resizeObserver?.observe(listElement);
+		return () => {
+			listElement.removeEventListener("scroll", throttled);
+			resizeObserver?.disconnect();
+			throttled.cancel();
+		};
+	}, [listElement, update]);
+	return {
+		floatingDate: state.date,
+		showFloatingDate: state.visible
+	};
+};
+//#endregion
+export { useFloatingDateSeparatorMessageList };
+
+//# sourceMappingURL=useFloatingDateSeparatorMessageList.mjs.map

package/dist/es/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingDateSeparatorMessageList.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport throttle from 'lodash.throttle';\n\nimport type { RenderedMessage } from '../../utils';\n\nconst DATE_SEPARATOR_SELECTOR =\n  '.str-chat__date-separator:not(.str-chat__date-separator--floating)';\nconst THROTTLE_MS = 100;\n\nexport type UseFloatingDateSeparatorMessageListParams = {\n  listElement: HTMLDivElement | null;\n  processedMessages: RenderedMessage[];\n  withDateSeparator: boolean;\n};\n\nexport type UseFloatingDateSeparatorMessageListResult = {\n  floatingDate: Date | null;\n  showFloatingDate: boolean;\n};\n\n/**\n * For non-virtualized MessageList: keeps the floating date synced with the\n * separator currently pinned to the top boundary of the list viewport.\n */\nexport const useFloatingDateSeparatorMessageList = ({\n  listElement,\n  processedMessages,\n  withDateSeparator,\n}: UseFloatingDateSeparatorMessageListParams): UseFloatingDateSeparatorMessageListResult => {\n  const [state, setState] = useState<{ date: Date | null; visible: boolean }>({\n    date: null,\n    visible: false,\n  });\n\n  const update = useCallback(() => {\n    if (!withDateSeparator || !listElement || processedMessages.length === 0) {\n      setState({ date: null, visible: false });\n      return;\n    }\n\n    const separators = listElement.querySelectorAll<HTMLElement>(DATE_SEPARATOR_SELECTOR);\n    if (separators.length === 0) {\n      setState({ date: null, visible: false });\n      return;\n    }\n\n    const containerRect = listElement.getBoundingClientRect();\n    let bestDate: Date | null = null;\n    let bestTop = -Infinity;\n\n    for (const el of separators) {\n      const rect = el.getBoundingClientRect();\n      const dataDate = el.getAttribute('data-date');\n      if (!dataDate) continue;\n\n      const isAtOrAboveTopBoundary = rect.top <= containerRect.top;\n\n      if (isAtOrAboveTopBoundary && rect.top > bestTop) {\n        bestTop = rect.top;\n        const d = new Date(dataDate);\n        if (!isNaN(d.getTime())) bestDate = d;\n      }\n    }\n\n    setState({\n      date: bestDate,\n      visible: bestDate !== null,\n    });\n  }, [withDateSeparator, listElement, processedMessages]);\n\n  useEffect(() => {\n    if (!listElement) return;\n\n    const throttled = throttle(update, THROTTLE_MS);\n\n    throttled();\n    listElement.addEventListener('scroll', throttled);\n    const resizeObserver =\n      typeof ResizeObserver !== 'undefined' ? new ResizeObserver(throttled) : undefined;\n    resizeObserver?.observe(listElement);\n\n    return () => {\n      listElement.removeEventListener('scroll', throttled);\n      resizeObserver?.disconnect();\n      throttled.cancel();\n    };\n  }, [listElement, update]);\n\n  return {\n    floatingDate: state.date,\n    showFloatingDate: state.visible,\n  };\n};\n"],"mappings":";;;AAKA,IAAM,0BACJ;AACF,IAAM,cAAc;;;;;AAiBpB,IAAa,uCAAuC,EAClD,aACA,mBACA,wBAC0F;CAC1F,MAAM,CAAC,OAAO,YAAY,SAAkD;EAC1E,MAAM;EACN,SAAS;CACX,CAAC;CAED,MAAM,SAAS,kBAAkB;EAC/B,IAAI,CAAC,qBAAqB,CAAC,eAAe,kBAAkB,WAAW,GAAG;GACxE,SAAS;IAAE,MAAM;IAAM,SAAS;GAAM,CAAC;GACvC;EACF;EAEA,MAAM,aAAa,YAAY,iBAA8B,uBAAuB;EACpF,IAAI,WAAW,WAAW,GAAG;GAC3B,SAAS;IAAE,MAAM;IAAM,SAAS;GAAM,CAAC;GACvC;EACF;EAEA,MAAM,gBAAgB,YAAY,sBAAsB;EACxD,IAAI,WAAwB;EAC5B,IAAI,UAAU;EAEd,KAAK,MAAM,MAAM,YAAY;GAC3B,MAAM,OAAO,GAAG,sBAAsB;GACtC,MAAM,WAAW,GAAG,aAAa,WAAW;GAC5C,IAAI,CAAC,UAAU;GAIf,IAF+B,KAAK,OAAO,cAAc,OAE3B,KAAK,MAAM,SAAS;IAChD,UAAU,KAAK;IACf,MAAM,IAAI,IAAI,KAAK,QAAQ;IAC3B,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,WAAW;GACtC;EACF;EAEA,SAAS;GACP,MAAM;GACN,SAAS,aAAa;EACxB,CAAC;CACH,GAAG;EAAC;EAAmB;EAAa;CAAiB,CAAC;CAEtD,gBAAgB;EACd,IAAI,CAAC,aAAa;EAElB,MAAM,YAAY,SAAS,QAAQ,WAAW;EAE9C,UAAU;EACV,YAAY,iBAAiB,UAAU,SAAS;EAChD,MAAM,iBACJ,OAAO,mBAAmB,cAAc,IAAI,eAAe,SAAS,IAAI,KAAA;EAC1E,gBAAgB,QAAQ,WAAW;EAEnC,aAAa;GACX,YAAY,oBAAoB,UAAU,SAAS;GACnD,gBAAgB,WAAW;GAC3B,UAAU,OAAO;EACnB;CACF,GAAG,CAAC,aAAa,MAAM,CAAC;CAExB,OAAO;EACL,cAAc,MAAM;EACpB,kBAAkB,MAAM;CAC1B;AACF"}

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

@@ -0,0 +1,66 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { getLastReceived } from "../../utils.mjs";
+import { useLastReadData } from "../useLastReadData.mjs";
+import { useLastDeliveredData } from "../useLastDeliveredData.mjs";
+import { useChannel } from "../../../../context/useChannel.mjs";
+import { useMemo } from "react";
+//#region src/components/MessageList/hooks/MessageList/useMessageListElements.tsx
+var unreadStateSnapshotSelector = (state) => state;
+var useMessageListElements = (props) => {
+	const { enrichedMessages, focusedMessageId, internalMessageProps, lastOwnMessage, messageGroupStyles, messages, renderMessages, returnAllReadData } = props;
+	const { customClasses } = useChatContext();
+	const channel = useChannel();
+	const components = useComponentContext();
+	const channelUnreadUiState = useStateStore(channel.messagePaginator.unreadStateSnapshot, unreadStateSnapshotSelector);
+	const readData = useLastReadData({
+		channel,
+		lastOwnMessage,
+		messages,
+		returnAllReadData
+	});
+	const ownMessagesDeliveredToOthers = useLastDeliveredData({
+		channel,
+		lastOwnMessage,
+		messages,
+		returnAllReadData
+	});
+	const lastReceivedMessageId = useMemo(() => getLastReceived(enrichedMessages), [enrichedMessages]);
+	return useMemo(() => renderMessages({
+		channel,
+		channelUnreadUiState,
+		components,
+		customClasses,
+		focusedMessageId,
+		lastOwnMessage,
+		lastReceivedMessageId,
+		messageGroupStyles,
+		messages: enrichedMessages,
+		ownMessagesDeliveredToOthers,
+		readData,
+		sharedMessageProps: {
+			...internalMessageProps,
+			returnAllReadData
+		}
+	}), [
+		channel,
+		channelUnreadUiState,
+		components,
+		customClasses,
+		enrichedMessages,
+		focusedMessageId,
+		internalMessageProps,
+		lastOwnMessage,
+		lastReceivedMessageId,
+		messageGroupStyles,
+		ownMessagesDeliveredToOthers,
+		readData,
+		renderMessages,
+		returnAllReadData
+	]);
+};
+//#endregion
+export { useMessageListElements };
+
+//# sourceMappingURL=useMessageListElements.mjs.map

package/dist/es/components/MessageList/hooks/MessageList/useMessageListElements.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageListElements.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useMessageListElements.tsx"],"sourcesContent":["import type React from 'react';\nimport { useMemo } from 'react';\n\nimport { useLastReadData } from '../useLastReadData';\nimport type { GroupStyle, RenderedMessage } from '../../utils';\nimport { getLastReceived } from '../../utils';\n\nimport { useChatContext } from '../../../../context/ChatContext';\nimport { useComponentContext } from '../../../../context/ComponentContext';\n\nimport type { LocalMessage, UnreadSnapshotState } from 'stream-chat';\nimport type { MessageRenderer, SharedMessageProps } from '../../renderMessages';\nimport { useChannel } from '../../../../context';\nimport { useLastDeliveredData } from '../useLastDeliveredData';\nimport { useStateStore } from '../../../../store';\n\ntype UseMessageListElementsProps = {\n  messages: LocalMessage[];\n  enrichedMessages: RenderedMessage[];\n  focusedMessageId?: string | null;\n  internalMessageProps: SharedMessageProps;\n  messageGroupStyles: Record<string, GroupStyle>;\n  renderMessages: MessageRenderer;\n  returnAllReadData: boolean;\n  lastOwnMessage?: LocalMessage;\n};\n\nconst unreadStateSnapshotSelector = (state: UnreadSnapshotState) => state;\n\nexport const useMessageListElements = (props: UseMessageListElementsProps) => {\n  const {\n    enrichedMessages,\n    focusedMessageId,\n    internalMessageProps,\n    lastOwnMessage,\n    messageGroupStyles,\n    messages,\n    renderMessages,\n    returnAllReadData,\n  } = props;\n\n  const { customClasses } = useChatContext();\n  const channel = useChannel();\n  const components = useComponentContext();\n  const channelUnreadUiState = useStateStore(\n    channel.messagePaginator.unreadStateSnapshot,\n    unreadStateSnapshotSelector,\n  );\n  // get the readData, but only for messages submitted by the user themselves\n  const readData = useLastReadData({\n    channel,\n    lastOwnMessage,\n    messages,\n    returnAllReadData,\n  });\n\n  const ownMessagesDeliveredToOthers = useLastDeliveredData({\n    channel,\n    lastOwnMessage,\n    messages,\n    returnAllReadData,\n  });\n\n  const lastReceivedMessageId = useMemo(\n    () => getLastReceived(enrichedMessages),\n    [enrichedMessages],\n  );\n\n  const elements: React.ReactNode[] = useMemo(\n    () =>\n      renderMessages({\n        channel,\n        channelUnreadUiState,\n        components,\n        customClasses,\n        focusedMessageId,\n        lastOwnMessage,\n        lastReceivedMessageId,\n        messageGroupStyles,\n        messages: enrichedMessages,\n        ownMessagesDeliveredToOthers,\n        readData,\n        sharedMessageProps: { ...internalMessageProps, returnAllReadData },\n      }),\n    [\n      channel,\n      channelUnreadUiState,\n      components,\n      customClasses,\n      enrichedMessages,\n      focusedMessageId,\n      internalMessageProps,\n      lastOwnMessage,\n      lastReceivedMessageId,\n      messageGroupStyles,\n      ownMessagesDeliveredToOthers,\n      readData,\n      renderMessages,\n      returnAllReadData,\n    ],\n  );\n\n  return elements;\n};\n"],"mappings":";;;;;;;;;AA2BA,IAAM,+BAA+B,UAA+B;AAEpE,IAAa,0BAA0B,UAAuC;CAC5E,MAAM,EACJ,kBACA,kBACA,sBACA,gBACA,oBACA,UACA,gBACA,sBACE;CAEJ,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,UAAU,WAAW;CAC3B,MAAM,aAAa,oBAAoB;CACvC,MAAM,uBAAuB,cAC3B,QAAQ,iBAAiB,qBACzB,2BACF;CAEA,MAAM,WAAW,gBAAgB;EAC/B;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,+BAA+B,qBAAqB;EACxD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB,cACtB,gBAAgB,gBAAgB,GACtC,CAAC,gBAAgB,CACnB;CAoCA,OAlCoC,cAEhC,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA,oBAAoB;GAAE,GAAG;GAAsB;EAAkB;CACnE,CAAC,GACH;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAGK;AACT"}

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

@@ -0,0 +1,143 @@
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useLayoutEffect, useRef } from "react";
+//#region src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts
+var messageIdsMatchAsPrefix = (prevMessages, newMessages) => prevMessages.every((message, index) => message.id === newMessages[index]?.id);
+var messageIdsMatchAsSuffix = (prevMessages, newMessages) => prevMessages.every((message, index) => message.id === newMessages[newMessages.length - prevMessages.length + index]?.id);
+/**
+* Coordinates scroll-position preservation when the rendered message array changes.
+*
+* The hook distinguishes three broad cases:
+* 1. Older-page pagination prepends messages at the top of the list.
+*    This path either sticks to the top of the new page or restores a captured
+*    message anchor, depending on where the user was when pagination started.
+* 2. Newer messages append to the bottom of the list.
+*    This path preserves normal chat behavior by auto-scrolling only when the
+*    user was already near the bottom or the appended message is the user's own.
+* 3. Disjunct/overlapping page switches.
+*    These intentionally bypass prepend heuristics because the old and new arrays
+*    are not comparable as a single contiguous list.
+*/
+function useMessageListScrollManager(params) {
+	const { captureAnchor, disableScrollManagement = false, justReachedLatestMessageSet = false, loadingMore = false, loadMoreScrollThreshold, onScrollBy, onScrollToTop, restoreAnchor, scrollContainerMeasures, scrolledUpThreshold, scrollToBottom, showNewMessages, suppressAutoscroll = false } = params;
+	const { client } = useChatContext();
+	const measures = useRef({
+		offsetHeight: 0,
+		scrollHeight: 0,
+		scrollTop: 0
+	});
+	const messages = useRef(void 0);
+	const olderPaginationState = useRef({
+		anchor: null,
+		mode: "idle"
+	});
+	const previousLoadingMoreRef = useRef(loadingMore);
+	const scrollTop = useRef(0);
+	useLayoutEffect(() => {
+		if (disableScrollManagement) {
+			messages.current = params.messages;
+			measures.current = scrollContainerMeasures();
+			previousLoadingMoreRef.current = loadingMore;
+			return;
+		}
+		const prevMeasures = measures.current;
+		const prevMessages = messages.current;
+		const newMessages = params.messages;
+		const lastNewMessage = newMessages[newMessages.length - 1] || {};
+		const lastPrevMessage = prevMessages?.[prevMessages.length - 1];
+		const newMeasures = scrollContainerMeasures();
+		const startedLoadingOlder = loadingMore && !previousLoadingMoreRef.current;
+		const finishedLoadingOlder = !loadingMore && previousLoadingMoreRef.current;
+		if (startedLoadingOlder) {
+			const liveMeasures = scrollContainerMeasures();
+			const hasOverflow = liveMeasures.scrollHeight > liveMeasures.offsetHeight;
+			const liveScrollTop = liveMeasures.scrollTop;
+			if (!hasOverflow) olderPaginationState.current = {
+				anchor: null,
+				mode: "idle"
+			};
+			else if (liveScrollTop <= 1) olderPaginationState.current = {
+				anchor: null,
+				mode: "stick-to-top"
+			};
+			else if (liveScrollTop < loadMoreScrollThreshold) {
+				const capturedAnchor = captureAnchor();
+				if (capturedAnchor) olderPaginationState.current = {
+					anchor: capturedAnchor,
+					mode: "preserve-anchor"
+				};
+				else olderPaginationState.current = {
+					anchor: null,
+					mode: "idle"
+				};
+			} else olderPaginationState.current = {
+				anchor: null,
+				mode: "idle"
+			};
+		}
+		const wasAtBottom = prevMeasures.scrollHeight - prevMeasures.offsetHeight - scrollTop.current < scrolledUpThreshold;
+		if (typeof prevMessages !== "undefined") if (prevMessages.length < newMessages.length) {
+			const messagesAddedToTop = messageIdsMatchAsSuffix(prevMessages, newMessages);
+			const messagesAddedToBottom = messageIdsMatchAsPrefix(prevMessages, newMessages);
+			if (messagesAddedToTop) {
+				const preservedAnchor = olderPaginationState.current.mode === "preserve-anchor" && olderPaginationState.current.anchor && (finishedLoadingOlder || loadingMore) ? olderPaginationState.current.anchor : null;
+				if (olderPaginationState.current.mode === "stick-to-top") onScrollToTop();
+				else if (preservedAnchor) restoreAnchor(preservedAnchor);
+				else if (scrollTop.current < loadMoreScrollThreshold) onScrollBy(newMeasures.scrollHeight - prevMeasures.scrollHeight);
+				olderPaginationState.current = {
+					anchor: null,
+					mode: "idle"
+				};
+			} else if (messagesAddedToBottom) {
+				if (justReachedLatestMessageSet) {
+					messages.current = newMessages;
+					measures.current = newMeasures;
+					previousLoadingMoreRef.current = loadingMore;
+					return;
+				}
+				const lastMessageIsFromCurrentUser = lastNewMessage.user?.id === client.userID;
+				if (!suppressAutoscroll && (lastMessageIsFromCurrentUser || wasAtBottom)) scrollToBottom();
+				else showNewMessages();
+			} else olderPaginationState.current = {
+				anchor: null,
+				mode: "idle"
+			};
+		} else {
+			const hasNewReactions = lastPrevMessage?.latest_reactions?.length !== lastNewMessage.latest_reactions?.length;
+			const hasNewReplies = lastPrevMessage?.reply_count !== lastNewMessage.reply_count;
+			if ((hasNewReactions || hasNewReplies) && wasAtBottom) scrollToBottom();
+			if (finishedLoadingOlder) olderPaginationState.current = {
+				anchor: null,
+				mode: "idle"
+			};
+		}
+		messages.current = newMessages;
+		measures.current = newMeasures;
+		previousLoadingMoreRef.current = loadingMore;
+	}, [
+		captureAnchor,
+		disableScrollManagement,
+		justReachedLatestMessageSet,
+		loadingMore,
+		measures,
+		messages,
+		params.messages,
+		restoreAnchor,
+		scrollContainerMeasures,
+		suppressAutoscroll
+	]);
+	return (scrollTopValue, getLatestAnchor = null) => {
+		scrollTop.current = scrollTopValue;
+		if (loadingMore && getLatestAnchor && olderPaginationState.current.mode === "preserve-anchor") {
+			const latestAnchor = getLatestAnchor();
+			if (!latestAnchor) return;
+			olderPaginationState.current = {
+				anchor: latestAnchor,
+				mode: "preserve-anchor"
+			};
+		}
+	};
+}
+//#endregion
+export { useMessageListScrollManager };
+
+//# sourceMappingURL=useMessageListScrollManager.mjs.map

package/dist/es/components/MessageList/hooks/MessageList/useMessageListScrollManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageListScrollManager.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useMessageListScrollManager.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\n\nimport { useChatContext } from '../../../../context/ChatContext';\nimport type { LocalMessage } from 'stream-chat';\n\nexport type ContainerMeasures = {\n  offsetHeight: number;\n  scrollHeight: number;\n  scrollTop: number;\n};\n\nexport type UseMessageListScrollManagerParams = {\n  captureAnchor: () => { id: string; offsetTop: number } | null;\n  disableScrollManagement?: boolean;\n  justReachedLatestMessageSet?: boolean;\n  loadMoreScrollThreshold: number;\n  loadingMore?: boolean;\n  messages: LocalMessage[];\n  onScrollBy: (scrollBy: number) => void;\n  onScrollToTop: () => void;\n  restoreAnchor: (anchor: { id: string; offsetTop: number }) => void;\n  scrollContainerMeasures: () => ContainerMeasures;\n  scrolledUpThreshold: number;\n  scrollToBottom: () => void;\n  showNewMessages: () => void;\n  suppressAutoscroll?: boolean;\n};\n\n// Tracks how the current older-page pagination cycle should restore the viewport\n// once messages are prepended. The mode is chosen when loading starts and cleared\n// after the prepend has been handled.\n//\n// Modes:\n// - `idle`: there is no active older-page restoration strategy\n// - `stick-to-top`: pagination started from the absolute top, so keep the newly\n//   loaded page pinned to the top of the container\n// - `preserve-anchor`: pagination started near the top but not at the absolute\n//   top, so restore the captured anchor message to its previous viewport offset\ntype OlderPaginationState =\n  | { anchor: null; mode: 'idle' }\n  | { anchor: null; mode: 'stick-to-top' }\n  | { anchor: { id: string; offsetTop: number }; mode: 'preserve-anchor' };\n\n// An \"anchor\" is the currently visible message row we want to keep visually pinned\n// to the same spot in the viewport while older messages are inserted above it.\n// It stores:\n// - `id`: which rendered message row should stay stable\n// - `offsetTop`: how far that row sits from the top edge of the scroll container\n//\n// After a prepend, the DOM shifts downward. Restoring the anchor means finding the\n// same message row again and correcting scrollTop until it returns to that offset.\n\n// When all previous messages appear at the start of the new array, the growth\n// happened at the bottom of the list.\nconst messageIdsMatchAsPrefix = (\n  prevMessages: LocalMessage[],\n  newMessages: LocalMessage[],\n) => prevMessages.every((message, index) => message.id === newMessages[index]?.id);\n\n// When all previous messages appear at the end of the new array, the growth\n// happened at the top of the list.\nconst messageIdsMatchAsSuffix = (\n  prevMessages: LocalMessage[],\n  newMessages: LocalMessage[],\n) =>\n  prevMessages.every(\n    (message, index) =>\n      message.id === newMessages[newMessages.length - prevMessages.length + index]?.id,\n  );\n\n/**\n * Coordinates scroll-position preservation when the rendered message array changes.\n *\n * The hook distinguishes three broad cases:\n * 1. Older-page pagination prepends messages at the top of the list.\n *    This path either sticks to the top of the new page or restores a captured\n *    message anchor, depending on where the user was when pagination started.\n * 2. Newer messages append to the bottom of the list.\n *    This path preserves normal chat behavior by auto-scrolling only when the\n *    user was already near the bottom or the appended message is the user's own.\n * 3. Disjunct/overlapping page switches.\n *    These intentionally bypass prepend heuristics because the old and new arrays\n *    are not comparable as a single contiguous list.\n */\nexport function useMessageListScrollManager(params: UseMessageListScrollManagerParams) {\n  const {\n    captureAnchor,\n    disableScrollManagement = false,\n    justReachedLatestMessageSet = false,\n    loadingMore = false,\n    loadMoreScrollThreshold,\n    onScrollBy,\n    onScrollToTop,\n    restoreAnchor,\n    scrollContainerMeasures,\n    scrolledUpThreshold,\n    scrollToBottom,\n    showNewMessages,\n    suppressAutoscroll = false,\n  } = params;\n\n  const { client } = useChatContext();\n\n  const measures = useRef<ContainerMeasures>({\n    offsetHeight: 0,\n    scrollHeight: 0,\n    scrollTop: 0,\n  });\n  const messages = useRef<LocalMessage[]>(undefined);\n  const olderPaginationState = useRef<OlderPaginationState>({\n    anchor: null,\n    mode: 'idle',\n  });\n  const previousLoadingMoreRef = useRef(loadingMore);\n  const scrollTop = useRef(0);\n\n  useLayoutEffect(() => {\n    if (disableScrollManagement) {\n      // Even while management is disabled we still refresh the cached list shape,\n      // so the next enabled render compares against the most recent DOM state.\n      messages.current = params.messages;\n      measures.current = scrollContainerMeasures();\n      previousLoadingMoreRef.current = loadingMore;\n      return;\n    }\n\n    const prevMeasures = measures.current;\n    const prevMessages = messages.current;\n    const newMessages = params.messages;\n    const lastNewMessage = newMessages[newMessages.length - 1] || {};\n    const lastPrevMessage = prevMessages?.[prevMessages.length - 1];\n    const newMeasures = scrollContainerMeasures();\n    const startedLoadingOlder = loadingMore && !previousLoadingMoreRef.current;\n    const finishedLoadingOlder = !loadingMore && previousLoadingMoreRef.current;\n\n    if (startedLoadingOlder) {\n      // Read the live DOM scroll position instead of the cached ref so we get\n      // the correct value even when scrollToBottom() has been called but the\n      // async scroll event hasn't updated the ref yet (common on initial mount).\n      const liveMeasures = scrollContainerMeasures();\n      const hasOverflow = liveMeasures.scrollHeight > liveMeasures.offsetHeight;\n      const liveScrollTop = liveMeasures.scrollTop;\n\n      // Older-page pagination uses one of three modes:\n      // - `stick-to-top`: user hit the absolute top and wants to keep reading upward\n      // - `preserve-anchor`: user was only near the top, so keep the same message in view\n      // - `idle`: no restoration needed for this load cycle\n      //\n      // When the container doesn't overflow yet (e.g. content hasn't reached its\n      // final height due to font loading) the scroll position is meaningless, so\n      // default to idle to avoid a false stick-to-top that would jump the list.\n      if (!hasOverflow) {\n        olderPaginationState.current = {\n          anchor: null,\n          mode: 'idle',\n        };\n      } else if (liveScrollTop <= 1) {\n        olderPaginationState.current = {\n          anchor: null,\n          mode: 'stick-to-top',\n        };\n      } else if (liveScrollTop < loadMoreScrollThreshold) {\n        const capturedAnchor = captureAnchor();\n        if (capturedAnchor) {\n          olderPaginationState.current = {\n            anchor: capturedAnchor,\n            mode: 'preserve-anchor',\n          };\n        } else {\n          olderPaginationState.current = {\n            anchor: null,\n            mode: 'idle',\n          };\n        }\n      } else {\n        olderPaginationState.current = {\n          anchor: null,\n          mode: 'idle',\n        };\n      }\n    }\n\n    // Evaluate bottom proximity from the previous render, before any new content\n    // changes the list height and invalidates the prior bottom distance.\n    const wasAtBottom =\n      prevMeasures.scrollHeight - prevMeasures.offsetHeight - scrollTop.current <\n      scrolledUpThreshold;\n\n    if (typeof prevMessages !== 'undefined') {\n      if (prevMessages.length < newMessages.length) {\n        const messagesAddedToTop = messageIdsMatchAsSuffix(prevMessages, newMessages);\n        const messagesAddedToBottom = messageIdsMatchAsPrefix(prevMessages, newMessages);\n\n        // A clean prepend means older messages were inserted ahead of the current\n        // viewport. Restore the viewport according to the mode chosen when loading\n        // started, then clear the mode for the next pagination cycle.\n        if (messagesAddedToTop) {\n          const preservedAnchor =\n            olderPaginationState.current.mode === 'preserve-anchor' &&\n            olderPaginationState.current.anchor &&\n            (finishedLoadingOlder || loadingMore)\n              ? olderPaginationState.current.anchor\n              : null;\n\n          // When pagination was triggered from absolute top, keep the newly\n          // loaded page pinned to top instead of restoring the old viewport.\n          if (olderPaginationState.current.mode === 'stick-to-top') {\n            onScrollToTop();\n          } else if (preservedAnchor) {\n            restoreAnchor(preservedAnchor);\n          } else if (scrollTop.current < loadMoreScrollThreshold) {\n            // Fallback for prepends when there is no stable DOM anchor to restore.\n            // This is less accurate than anchor restoration, but still avoids a full\n            // jump by compensating for the inserted page height.\n            const listHeightDelta = newMeasures.scrollHeight - prevMeasures.scrollHeight;\n            onScrollBy(listHeightDelta);\n          }\n\n          olderPaginationState.current = {\n            anchor: null,\n            mode: 'idle',\n          };\n        }\n        // A clean append means the list grew downward. Preserve the usual chat\n        // semantics: auto-scroll only for self-sent messages or when the user was\n        // already close enough to bottom.\n        else if (messagesAddedToBottom) {\n          if (justReachedLatestMessageSet) {\n            // Merging into the latest page is handled by dedicated logic higher up.\n            // Returning here avoids undoing that behavior with a normal append scroll.\n            messages.current = newMessages;\n            measures.current = newMeasures;\n            previousLoadingMoreRef.current = loadingMore;\n            return;\n          }\n\n          const lastMessageIsFromCurrentUser = lastNewMessage.user?.id === client.userID;\n\n          if (!suppressAutoscroll && (lastMessageIsFromCurrentUser || wasAtBottom)) {\n            scrollToBottom();\n          } else {\n            showNewMessages();\n          }\n        } else {\n          // If the new page is neither a pure prepend nor a pure append, treat it as\n          // a disjunct/overlapping page switch and avoid applying prepend heuristics.\n          olderPaginationState.current = {\n            anchor: null,\n            mode: 'idle',\n          };\n        }\n      }\n      // message list length didn't change, but check if last message had reaction/reply update\n      else {\n        const hasNewReactions =\n          lastPrevMessage?.latest_reactions?.length !==\n          lastNewMessage.latest_reactions?.length;\n        const hasNewReplies = lastPrevMessage?.reply_count !== lastNewMessage.reply_count;\n\n        if ((hasNewReactions || hasNewReplies) && wasAtBottom) {\n          scrollToBottom();\n        }\n\n        if (finishedLoadingOlder) {\n          // Clear any older-page mode when the request ends without increasing the\n          // rendered list size, so the next pagination cycle starts from a clean slate.\n          olderPaginationState.current = {\n            anchor: null,\n            mode: 'idle',\n          };\n        }\n      }\n    }\n\n    messages.current = newMessages;\n    measures.current = newMeasures;\n    previousLoadingMoreRef.current = loadingMore;\n    // MERGE-RECONCILE: deps are the UNION of master's anchor-based scroll params and\n    // PR #2909's suppressAutoscroll (exhaustive-deps is disabled, so extra deps are safe).\n    // The scroll logic here (master) and useScrollLocationLogic (PR base) diverged;\n    // verify the two scroll paths cooperate rather than double-manage scrolling.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    captureAnchor,\n    disableScrollManagement,\n    justReachedLatestMessageSet,\n    loadingMore,\n    measures,\n    messages,\n    params.messages,\n    restoreAnchor,\n    scrollContainerMeasures,\n    suppressAutoscroll,\n  ]);\n\n  return (\n    scrollTopValue: number,\n    getLatestAnchor: (() => { id: string; offsetTop: number } | null) | null = null,\n  ) => {\n    scrollTop.current = scrollTopValue;\n\n    if (\n      loadingMore &&\n      getLatestAnchor &&\n      olderPaginationState.current.mode === 'preserve-anchor'\n    ) {\n      // Keep the anchor fresh while the request is in flight so restoration matches\n      // the latest viewport position if the user keeps scrolling before data arrives.\n      // The getter keeps normal scroll events cheap by avoiding DOM anchor capture\n      // unless anchor preservation is actually active.\n      const latestAnchor = getLatestAnchor();\n      if (!latestAnchor) return;\n\n      olderPaginationState.current = {\n        anchor: latestAnchor,\n        mode: 'preserve-anchor',\n      };\n    }\n  };\n}\n"],"mappings":";;;AAsDA,IAAM,2BACJ,cACA,gBACG,aAAa,OAAO,SAAS,UAAU,QAAQ,OAAO,YAAY,MAAM,EAAE,EAAE;AAIjF,IAAM,2BACJ,cACA,gBAEA,aAAa,OACV,SAAS,UACR,QAAQ,OAAO,YAAY,YAAY,SAAS,aAAa,SAAS,MAAM,EAAE,EAClF;;;;;;;;;;;;;;;AAgBF,SAAgB,4BAA4B,QAA2C;CACrF,MAAM,EACJ,eACA,0BAA0B,OAC1B,8BAA8B,OAC9B,cAAc,OACd,yBACA,YACA,eACA,eACA,yBACA,qBACA,gBACA,iBACA,qBAAqB,UACnB;CAEJ,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,WAAW,OAA0B;EACzC,cAAc;EACd,cAAc;EACd,WAAW;CACb,CAAC;CACD,MAAM,WAAW,OAAuB,KAAA,CAAS;CACjD,MAAM,uBAAuB,OAA6B;EACxD,QAAQ;EACR,MAAM;CACR,CAAC;CACD,MAAM,yBAAyB,OAAO,WAAW;CACjD,MAAM,YAAY,OAAO,CAAC;CAE1B,sBAAsB;EACpB,IAAI,yBAAyB;GAG3B,SAAS,UAAU,OAAO;GAC1B,SAAS,UAAU,wBAAwB;GAC3C,uBAAuB,UAAU;GACjC;EACF;EAEA,MAAM,eAAe,SAAS;EAC9B,MAAM,eAAe,SAAS;EAC9B,MAAM,cAAc,OAAO;EAC3B,MAAM,iBAAiB,YAAY,YAAY,SAAS,MAAM,CAAC;EAC/D,MAAM,kBAAkB,eAAe,aAAa,SAAS;EAC7D,MAAM,cAAc,wBAAwB;EAC5C,MAAM,sBAAsB,eAAe,CAAC,uBAAuB;EACnE,MAAM,uBAAuB,CAAC,eAAe,uBAAuB;EAEpE,IAAI,qBAAqB;GAIvB,MAAM,eAAe,wBAAwB;GAC7C,MAAM,cAAc,aAAa,eAAe,aAAa;GAC7D,MAAM,gBAAgB,aAAa;GAUnC,IAAI,CAAC,aACH,qBAAqB,UAAU;IAC7B,QAAQ;IACR,MAAM;GACR;QACK,IAAI,iBAAiB,GAC1B,qBAAqB,UAAU;IAC7B,QAAQ;IACR,MAAM;GACR;QACK,IAAI,gBAAgB,yBAAyB;IAClD,MAAM,iBAAiB,cAAc;IACrC,IAAI,gBACF,qBAAqB,UAAU;KAC7B,QAAQ;KACR,MAAM;IACR;SAEA,qBAAqB,UAAU;KAC7B,QAAQ;KACR,MAAM;IACR;GAEJ,OACE,qBAAqB,UAAU;IAC7B,QAAQ;IACR,MAAM;GACR;EAEJ;EAIA,MAAM,cACJ,aAAa,eAAe,aAAa,eAAe,UAAU,UAClE;EAEF,IAAI,OAAO,iBAAiB,aAC1B,IAAI,aAAa,SAAS,YAAY,QAAQ;GAC5C,MAAM,qBAAqB,wBAAwB,cAAc,WAAW;GAC5E,MAAM,wBAAwB,wBAAwB,cAAc,WAAW;GAK/E,IAAI,oBAAoB;IACtB,MAAM,kBACJ,qBAAqB,QAAQ,SAAS,qBACtC,qBAAqB,QAAQ,WAC5B,wBAAwB,eACrB,qBAAqB,QAAQ,SAC7B;IAIN,IAAI,qBAAqB,QAAQ,SAAS,gBACxC,cAAc;SACT,IAAI,iBACT,cAAc,eAAe;SACxB,IAAI,UAAU,UAAU,yBAK7B,WADwB,YAAY,eAAe,aAAa,YACtC;IAG5B,qBAAqB,UAAU;KAC7B,QAAQ;KACR,MAAM;IACR;GACF,OAIK,IAAI,uBAAuB;IAC9B,IAAI,6BAA6B;KAG/B,SAAS,UAAU;KACnB,SAAS,UAAU;KACnB,uBAAuB,UAAU;KACjC;IACF;IAEA,MAAM,+BAA+B,eAAe,MAAM,OAAO,OAAO;IAExE,IAAI,CAAC,uBAAuB,gCAAgC,cAC1D,eAAe;SAEf,gBAAgB;GAEpB,OAGE,qBAAqB,UAAU;IAC7B,QAAQ;IACR,MAAM;GACR;EAEJ,OAEK;GACH,MAAM,kBACJ,iBAAiB,kBAAkB,WACnC,eAAe,kBAAkB;GACnC,MAAM,gBAAgB,iBAAiB,gBAAgB,eAAe;GAEtE,KAAK,mBAAmB,kBAAkB,aACxC,eAAe;GAGjB,IAAI,sBAGF,qBAAqB,UAAU;IAC7B,QAAQ;IACR,MAAM;GACR;EAEJ;EAGF,SAAS,UAAU;EACnB,SAAS,UAAU;EACnB,uBAAuB,UAAU;CAMnC,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA;EACA;CACF,CAAC;CAED,QACE,gBACA,kBAA2E,SACxE;EACH,UAAU,UAAU;EAEpB,IACE,eACA,mBACA,qBAAqB,QAAQ,SAAS,mBACtC;GAKA,MAAM,eAAe,gBAAgB;GACrC,IAAI,CAAC,cAAc;GAEnB,qBAAqB,UAAU;IAC7B,QAAQ;IACR,MAAM;GACR;EACF;CACF;AACF"}

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

@@ -0,0 +1,100 @@
+import { useMessageListScrollManager } from "./useMessageListScrollManager.mjs";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx
+var useScrollLocationLogic = (params) => {
+	const { hasMoreNewer, listElement, loadMoreScrollThreshold, messages = [], scrolledUpThreshold = 200, suppressAutoscroll = false } = params;
+	const [hasNewMessages, setHasNewMessages] = useState(false);
+	const [wrapperRect, setWrapperRect] = useState();
+	const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = useState(true);
+	const closeToBottom = useRef(false);
+	const closeToTop = useRef(false);
+	const initialDataAutoscrollDoneRef = useRef(false);
+	const previousHasMoreNewer = useRef(hasMoreNewer);
+	const justReachedLatestMessageSet = previousHasMoreNewer.current && !hasMoreNewer;
+	const scrollToBottom = useCallback((options) => {
+		if (!listElement?.scrollTo || hasMoreNewer || suppressAutoscroll) return;
+		listElement.scrollTo({
+			behavior: options?.behavior,
+			top: listElement.scrollHeight
+		});
+		setHasNewMessages(false);
+	}, [
+		listElement,
+		hasMoreNewer,
+		suppressAutoscroll
+	]);
+	useLayoutEffect(() => {
+		if (listElement) {
+			setWrapperRect(listElement.getBoundingClientRect());
+			if (!justReachedLatestMessageSet) scrollToBottom();
+		}
+	}, [listElement, hasMoreNewer]);
+	useLayoutEffect(() => {
+		if (messages.length === 0) {
+			initialDataAutoscrollDoneRef.current = false;
+			return;
+		}
+		if (listElement?.scrollTo && !initialDataAutoscrollDoneRef.current && !suppressAutoscroll) {
+			listElement.scrollTo({ top: listElement.scrollHeight });
+			setHasNewMessages(false);
+			initialDataAutoscrollDoneRef.current = true;
+		}
+	}, [
+		listElement,
+		messages.length,
+		suppressAutoscroll
+	]);
+	const updateScrollTop = useMessageListScrollManager({
+		captureAnchor: () => null,
+		justReachedLatestMessageSet,
+		loadMoreScrollThreshold,
+		messages,
+		onScrollBy: (scrollBy) => {
+			listElement?.scrollBy({ top: scrollBy });
+		},
+		onScrollToTop: () => {
+			listElement?.scrollTo({ top: 0 });
+		},
+		restoreAnchor: () => void 0,
+		scrollContainerMeasures: () => ({
+			offsetHeight: listElement?.offsetHeight || 0,
+			scrollHeight: listElement?.scrollHeight || 0,
+			scrollTop: listElement?.scrollTop || 0
+		}),
+		scrolledUpThreshold,
+		scrollToBottom,
+		showNewMessages: () => setHasNewMessages(true),
+		suppressAutoscroll
+	});
+	useLayoutEffect(() => {
+		previousHasMoreNewer.current = hasMoreNewer;
+	}, [hasMoreNewer]);
+	return {
+		hasNewMessages,
+		isMessageListScrolledToBottom,
+		onScroll: useCallback((event) => {
+			const element = event.target;
+			const scrollTop = element.scrollTop;
+			updateScrollTop(scrollTop);
+			const offsetHeight = element.offsetHeight;
+			const scrollHeight = element.scrollHeight;
+			const prevCloseToBottom = closeToBottom.current;
+			closeToBottom.current = scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
+			closeToTop.current = scrollTop < scrolledUpThreshold;
+			if (closeToBottom.current) setHasNewMessages(false);
+			if (prevCloseToBottom && !closeToBottom.current) setIsMessageListScrolledToBottom(false);
+			else if (!prevCloseToBottom && closeToBottom.current) setIsMessageListScrolledToBottom(true);
+		}, [
+			updateScrollTop,
+			closeToTop,
+			closeToBottom,
+			scrolledUpThreshold
+		]),
+		scrollToBottom,
+		wrapperRect
+	};
+};
+//#endregion
+export { useScrollLocationLogic };
+
+//# sourceMappingURL=useScrollLocationLogic.mjs.map

package/dist/es/components/MessageList/hooks/MessageList/useScrollLocationLogic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollLocationLogic.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useMessageListScrollManager } from './useMessageListScrollManager';\nimport type { LocalMessage } from 'stream-chat';\n\nexport type UseScrollLocationLogicParams = {\n  hasMoreNewer: boolean;\n  listElement: HTMLElement | null;\n  loadMoreScrollThreshold: number;\n  suppressAutoscroll?: boolean;\n  messages?: LocalMessage[];\n  scrolledUpThreshold?: number;\n};\n\nexport const useScrollLocationLogic = (params: UseScrollLocationLogicParams) => {\n  const {\n    hasMoreNewer,\n    listElement,\n    loadMoreScrollThreshold,\n    messages = [],\n    scrolledUpThreshold = 200,\n    suppressAutoscroll = false,\n  } = params;\n\n  const [hasNewMessages, setHasNewMessages] = useState(false);\n  const [wrapperRect, setWrapperRect] = useState<DOMRect>();\n\n  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] =\n    useState(true);\n  const closeToBottom = useRef(false);\n  const closeToTop = useRef(false);\n  const initialDataAutoscrollDoneRef = useRef(false);\n\n  // `hasMoreNewer` turning false means the loaded window just reached the live head — typically\n  // because the user scrolled down out of a window they had jumped to (a search result deep in\n  // history) and the page bridging the gap arrived.\n  //\n  // The viewport must not move for that. The user is reading where they jumped to, and the merged\n  // page lands *below* them; treating the merge like a mount (or like a newly received message at\n  // the head) teleports them to the newest message. Both autoscroll paths below are suppressed for\n  // this one render, and the ref is advanced afterwards so only the transition itself counts.\n  const previousHasMoreNewer = useRef(hasMoreNewer);\n  const justReachedLatestMessageSet = previousHasMoreNewer.current && !hasMoreNewer;\n\n  // `behavior` is optional so callers opt into animation: the initial-mount and streaming\n  // \"keep pinned to bottom\" autoscroll below call it with no argument and stay instant (which is\n  // what keeps pagination position-preservation correct), while an interactive scroll-to-latest\n  // passes `{ behavior }` for a smooth (or reduced-motion `auto`) scroll.\n  const scrollToBottom = useCallback(\n    (options?: { behavior?: ScrollBehavior }) => {\n      if (!listElement?.scrollTo || hasMoreNewer || suppressAutoscroll) {\n        return;\n      }\n\n      listElement.scrollTo({\n        behavior: options?.behavior,\n        top: listElement.scrollHeight,\n      });\n      setHasNewMessages(false);\n    },\n    [listElement, hasMoreNewer, suppressAutoscroll],\n  );\n\n  useLayoutEffect(() => {\n    if (listElement) {\n      setWrapperRect(listElement.getBoundingClientRect());\n      // `hasMoreNewer` is a dependency so a list that mounts before its first page resolves still\n      // autoscrolls once it does. That makes this run on *every* change of it, including the merge\n      // into the live head, which must leave the viewport alone.\n      if (!justReachedLatestMessageSet) scrollToBottom();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [listElement, hasMoreNewer]);\n\n  useLayoutEffect(() => {\n    if (messages.length === 0) {\n      initialDataAutoscrollDoneRef.current = false;\n      return;\n    }\n\n    if (\n      listElement?.scrollTo &&\n      !initialDataAutoscrollDoneRef.current &&\n      !suppressAutoscroll\n    ) {\n      listElement.scrollTo({ top: listElement.scrollHeight });\n      setHasNewMessages(false);\n      initialDataAutoscrollDoneRef.current = true;\n    }\n  }, [listElement, messages.length, suppressAutoscroll]);\n\n  const updateScrollTop = useMessageListScrollManager({\n    // MERGE-RECONCILE: master's useMessageListScrollManager expects anchor-based restoration\n    // params (captureAnchor/restoreAnchor/onScrollToTop) that PR #2909's useScrollLocationLogic\n    // does not compute. captureAnchor returns null so the manager falls back to its\n    // height-delta compensation (no precise anchor restoration). Reconcile the two scroll\n    // paths if precise anchor preservation on older-page loads is required.\n    captureAnchor: () => null,\n    justReachedLatestMessageSet,\n    loadMoreScrollThreshold,\n    messages,\n    onScrollBy: (scrollBy) => {\n      listElement?.scrollBy({ top: scrollBy });\n    },\n    onScrollToTop: () => {\n      listElement?.scrollTo({ top: 0 });\n    },\n    restoreAnchor: () => undefined,\n\n    scrollContainerMeasures: () => ({\n      offsetHeight: listElement?.offsetHeight || 0,\n      scrollHeight: listElement?.scrollHeight || 0,\n      // MERGE-RECONCILE: master's ContainerMeasures requires scrollTop (used by the\n      // anchor-based useMessageListScrollManager); PR #2909's version omitted it.\n      scrollTop: listElement?.scrollTop || 0,\n    }),\n    scrolledUpThreshold,\n    scrollToBottom,\n    showNewMessages: () => setHasNewMessages(true),\n    suppressAutoscroll,\n  });\n\n  // Declared after the two autoscroll layout effects and the scroll manager's own, so all three\n  // observe the transition before it is consumed.\n  useLayoutEffect(() => {\n    previousHasMoreNewer.current = hasMoreNewer;\n  }, [hasMoreNewer]);\n\n  const onScroll = useCallback(\n    (event: React.UIEvent<HTMLElement>) => {\n      const element = event.target as HTMLElement;\n      const scrollTop = element.scrollTop;\n\n      updateScrollTop(scrollTop);\n\n      const offsetHeight = element.offsetHeight;\n      const scrollHeight = element.scrollHeight;\n\n      const prevCloseToBottom = closeToBottom.current;\n      closeToBottom.current =\n        scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;\n      closeToTop.current = scrollTop < scrolledUpThreshold;\n\n      if (closeToBottom.current) {\n        setHasNewMessages(false);\n      }\n      if (prevCloseToBottom && !closeToBottom.current) {\n        setIsMessageListScrolledToBottom(false);\n      } else if (!prevCloseToBottom && closeToBottom.current) {\n        setIsMessageListScrolledToBottom(true);\n      }\n    },\n    [updateScrollTop, closeToTop, closeToBottom, scrolledUpThreshold],\n  );\n\n  return {\n    hasNewMessages,\n    isMessageListScrolledToBottom,\n    onScroll,\n    scrollToBottom,\n    wrapperRect,\n  };\n};\n"],"mappings":";;;AAeA,IAAa,0BAA0B,WAAyC;CAC9E,MAAM,EACJ,cACA,aACA,yBACA,WAAW,CAAC,GACZ,sBAAsB,KACtB,qBAAqB,UACnB;CAEJ,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAC1D,MAAM,CAAC,aAAa,kBAAkB,SAAkB;CAExD,MAAM,CAAC,+BAA+B,oCACpC,SAAS,IAAI;CACf,MAAM,gBAAgB,OAAO,KAAK;CAClC,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,+BAA+B,OAAO,KAAK;CAUjD,MAAM,uBAAuB,OAAO,YAAY;CAChD,MAAM,8BAA8B,qBAAqB,WAAW,CAAC;CAMrE,MAAM,iBAAiB,aACpB,YAA4C;EAC3C,IAAI,CAAC,aAAa,YAAY,gBAAgB,oBAC5C;EAGF,YAAY,SAAS;GACnB,UAAU,SAAS;GACnB,KAAK,YAAY;EACnB,CAAC;EACD,kBAAkB,KAAK;CACzB,GACA;EAAC;EAAa;EAAc;CAAkB,CAChD;CAEA,sBAAsB;EACpB,IAAI,aAAa;GACf,eAAe,YAAY,sBAAsB,CAAC;GAIlD,IAAI,CAAC,6BAA6B,eAAe;EACnD;CAEF,GAAG,CAAC,aAAa,YAAY,CAAC;CAE9B,sBAAsB;EACpB,IAAI,SAAS,WAAW,GAAG;GACzB,6BAA6B,UAAU;GACvC;EACF;EAEA,IACE,aAAa,YACb,CAAC,6BAA6B,WAC9B,CAAC,oBACD;GACA,YAAY,SAAS,EAAE,KAAK,YAAY,aAAa,CAAC;GACtD,kBAAkB,KAAK;GACvB,6BAA6B,UAAU;EACzC;CACF,GAAG;EAAC;EAAa,SAAS;EAAQ;CAAkB,CAAC;CAErD,MAAM,kBAAkB,4BAA4B;EAMlD,qBAAqB;EACrB;EACA;EACA;EACA,aAAa,aAAa;GACxB,aAAa,SAAS,EAAE,KAAK,SAAS,CAAC;EACzC;EACA,qBAAqB;GACnB,aAAa,SAAS,EAAE,KAAK,EAAE,CAAC;EAClC;EACA,qBAAqB,KAAA;EAErB,gCAAgC;GAC9B,cAAc,aAAa,gBAAgB;GAC3C,cAAc,aAAa,gBAAgB;GAG3C,WAAW,aAAa,aAAa;EACvC;EACA;EACA;EACA,uBAAuB,kBAAkB,IAAI;EAC7C;CACF,CAAC;CAID,sBAAsB;EACpB,qBAAqB,UAAU;CACjC,GAAG,CAAC,YAAY,CAAC;CA6BjB,OAAO;EACL;EACA;EACA,UA9Be,aACd,UAAsC;GACrC,MAAM,UAAU,MAAM;GACtB,MAAM,YAAY,QAAQ;GAE1B,gBAAgB,SAAS;GAEzB,MAAM,eAAe,QAAQ;GAC7B,MAAM,eAAe,QAAQ;GAE7B,MAAM,oBAAoB,cAAc;GACxC,cAAc,UACZ,gBAAgB,YAAY,gBAAgB;GAC9C,WAAW,UAAU,YAAY;GAEjC,IAAI,cAAc,SAChB,kBAAkB,KAAK;GAEzB,IAAI,qBAAqB,CAAC,cAAc,SACtC,iCAAiC,KAAK;QACjC,IAAI,CAAC,qBAAqB,cAAc,SAC7C,iCAAiC,IAAI;EAEzC,GACA;GAAC;GAAiB;GAAY;GAAe;EAAmB,CAMhE;EACA;EACA;CACF;AACF"}

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

@@ -0,0 +1,86 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useMessagePaginator } from "../../../../hooks/useMessagePaginator.mjs";
+import { MESSAGE_LIST_MAIN_PANEL_CLASS } from "../../MessageListMainPanel.mjs";
+import { UNREAD_MESSAGE_SEPARATOR_CLASS } from "../../UnreadMessagesSeparator.mjs";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts
+var targetScrolledAboveVisibleContainerArea = (element, container) => {
+	const { bottom: targetBottom } = element.getBoundingClientRect();
+	return targetBottom < (container?.getBoundingClientRect().top ?? 0);
+};
+var targetScrolledBelowVisibleContainerArea = (element, container) => {
+	const { top: targetTop } = element.getBoundingClientRect();
+	const { bottom: containerBottom } = container.getBoundingClientRect();
+	return targetTop > containerBottom;
+};
+var messagePaginatorStateSelector = (state) => ({ messages: state.items ?? [] });
+var unreadStateSnapshotSelector = (state) => ({ unreadCount: state.unreadCount });
+var useUnreadMessagesNotification = ({ isMessageListScrolledToBottom, listElement, showAlways }) => {
+	const messagePaginator = useMessagePaginator();
+	const { messages } = useStateStore(messagePaginator.state, messagePaginatorStateSelector);
+	const { unreadCount } = useStateStore(messagePaginator.unreadStateSnapshot, unreadStateSnapshotSelector);
+	const [show, setShow] = useState(false);
+	const isScrolledAboveTargetTop = useRef(false);
+	const intersectionObserverIsSupported = typeof IntersectionObserver !== "undefined";
+	useEffect(() => {
+		if (!(unreadCount && intersectionObserverIsSupported)) {
+			setShow(false);
+			return;
+		}
+		const scrollRoot = listElement ?? null;
+		if (!scrollRoot) {
+			const [msgListPanel] = document.getElementsByClassName(MESSAGE_LIST_MAIN_PANEL_CLASS);
+			if (!msgListPanel) return;
+			const [observedTarget] = document.getElementsByClassName(UNREAD_MESSAGE_SEPARATOR_CLASS);
+			if (!observedTarget) setShow(unreadCount > 0);
+			return;
+		}
+		const [observedTarget] = document.getElementsByClassName(UNREAD_MESSAGE_SEPARATOR_CLASS);
+		if (!observedTarget) {
+			setShow(unreadCount > 0);
+			return;
+		}
+		const scrolledBelowSeparator = targetScrolledAboveVisibleContainerArea(observedTarget, scrollRoot);
+		const scrolledAboveSeparator = targetScrolledBelowVisibleContainerArea(observedTarget, scrollRoot);
+		setShow(showAlways ? scrolledBelowSeparator || scrolledAboveSeparator : scrolledBelowSeparator);
+		const observer = new IntersectionObserver((elements) => {
+			if (!elements.length) return;
+			const { boundingClientRect, isIntersecting, rootBounds } = elements[0];
+			if (isIntersecting) {
+				setShow(false);
+				return;
+			}
+			const rootTop = rootBounds?.top ?? 0;
+			const separatorIsAboveContainerTop = boundingClientRect.bottom < rootTop;
+			setShow(showAlways || separatorIsAboveContainerTop);
+			isScrolledAboveTargetTop.current = separatorIsAboveContainerTop;
+		}, { root: scrollRoot });
+		observer.observe(observedTarget);
+		return () => {
+			observer.disconnect();
+		};
+	}, [
+		intersectionObserverIsSupported,
+		listElement,
+		isMessageListScrolledToBottom,
+		messages,
+		showAlways,
+		unreadCount
+	]);
+	useEffect(() => {
+		/**
+		* Handle situation when scrollToBottom is called from another component when the msg list is scrolled above the observed target (unread separator).
+		* The intersection observer is not triggered when Element.scrollTo() is called. So we end up in a situation when we are scrolled to the bottom
+		* and at the same time scrolled above the observed target.
+		*/
+		if (unreadCount && isMessageListScrolledToBottom && isScrolledAboveTargetTop.current) {
+			setShow(true);
+			isScrolledAboveTargetTop.current = false;
+		}
+	}, [isMessageListScrolledToBottom, unreadCount]);
+	return { show: show && intersectionObserverIsSupported };
+};
+//#endregion
+export { useUnreadMessagesNotification };
+
+//# sourceMappingURL=useUnreadMessagesNotification.mjs.map

package/dist/es/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUnreadMessagesNotification.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { MESSAGE_LIST_MAIN_PANEL_CLASS } from '../../MessageListMainPanel';\nimport { UNREAD_MESSAGE_SEPARATOR_CLASS } from '../../UnreadMessagesSeparator';\nimport type { MessagePaginatorState, UnreadSnapshotState } from 'stream-chat';\nimport { useStateStore } from '../../../../store';\nimport { useMessagePaginator } from '../../../../hooks';\n\nconst targetScrolledAboveVisibleContainerArea = (\n  element: Element,\n  container?: Element,\n) => {\n  const { bottom: targetBottom } = element.getBoundingClientRect();\n  const containerTop = container?.getBoundingClientRect().top ?? 0;\n  return targetBottom < containerTop;\n};\n\nconst targetScrolledBelowVisibleContainerArea = (\n  element: Element,\n  container: Element,\n) => {\n  const { top: targetTop } = element.getBoundingClientRect();\n  const { bottom: containerBottom } = container.getBoundingClientRect();\n  return targetTop > containerBottom;\n};\n\nexport type UseUnreadMessagesNotificationParams = {\n  /** Scroll container (the element with overflow that actually scrolls). When provided, used as IntersectionObserver root and for initial visibility. */\n  listElement: HTMLDivElement | null;\n  isMessageListScrolledToBottom: boolean;\n  showAlways: boolean;\n  unreadCount?: number;\n};\n\nconst messagePaginatorStateSelector = (state: MessagePaginatorState) => ({\n  messages: state.items ?? [],\n});\n\nconst unreadStateSnapshotSelector = (state: UnreadSnapshotState) => ({\n  unreadCount: state.unreadCount,\n});\n\nexport const useUnreadMessagesNotification = ({\n  isMessageListScrolledToBottom,\n  listElement,\n  showAlways,\n}: UseUnreadMessagesNotificationParams) => {\n  const messagePaginator = useMessagePaginator();\n\n  const { messages } = useStateStore(\n    messagePaginator.state,\n    messagePaginatorStateSelector,\n  );\n\n  const { unreadCount } = useStateStore(\n    messagePaginator.unreadStateSnapshot,\n    unreadStateSnapshotSelector,\n  );\n  const [show, setShow] = useState(false);\n  const isScrolledAboveTargetTop = useRef(false);\n  const intersectionObserverIsSupported = typeof IntersectionObserver !== 'undefined';\n\n  useEffect(() => {\n    if (!(unreadCount && intersectionObserverIsSupported)) {\n      setShow(false);\n      return;\n    }\n\n    const scrollRoot = listElement ?? null;\n    if (!scrollRoot) {\n      const [msgListPanel] = document.getElementsByClassName(\n        MESSAGE_LIST_MAIN_PANEL_CLASS,\n      );\n      if (!msgListPanel) return;\n      const [observedTarget] = document.getElementsByClassName(\n        UNREAD_MESSAGE_SEPARATOR_CLASS,\n      );\n      if (!observedTarget) {\n        setShow(unreadCount > 0);\n      }\n      return;\n    }\n\n    const [observedTarget] = document.getElementsByClassName(\n      UNREAD_MESSAGE_SEPARATOR_CLASS,\n    );\n    if (!observedTarget) {\n      setShow(unreadCount > 0);\n      return;\n    }\n\n    const scrolledBelowSeparator = targetScrolledAboveVisibleContainerArea(\n      observedTarget,\n      scrollRoot,\n    );\n    const scrolledAboveSeparator = targetScrolledBelowVisibleContainerArea(\n      observedTarget,\n      scrollRoot,\n    );\n\n    setShow(\n      showAlways\n        ? scrolledBelowSeparator || scrolledAboveSeparator\n        : scrolledBelowSeparator,\n    );\n\n    const observer = new IntersectionObserver(\n      (elements) => {\n        if (!elements.length) return;\n        const entry = elements[0];\n        const { boundingClientRect, isIntersecting, rootBounds } = entry;\n        if (isIntersecting) {\n          setShow(false);\n          return;\n        }\n        const rootTop = rootBounds?.top ?? 0;\n        const separatorIsAboveContainerTop = boundingClientRect.bottom < rootTop;\n        setShow(showAlways || separatorIsAboveContainerTop);\n        isScrolledAboveTargetTop.current = separatorIsAboveContainerTop;\n      },\n      { root: scrollRoot },\n    );\n    observer.observe(observedTarget);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [\n    intersectionObserverIsSupported,\n    listElement,\n    isMessageListScrolledToBottom,\n    messages,\n    showAlways,\n    unreadCount,\n  ]);\n\n  useEffect(() => {\n    /**\n     * Handle situation when scrollToBottom is called from another component when the msg list is scrolled above the observed target (unread separator).\n     * The intersection observer is not triggered when Element.scrollTo() is called. So we end up in a situation when we are scrolled to the bottom\n     * and at the same time scrolled above the observed target.\n     */\n\n    if (\n      unreadCount &&\n      isMessageListScrolledToBottom &&\n      isScrolledAboveTargetTop.current\n    ) {\n      setShow(true);\n      isScrolledAboveTargetTop.current = false;\n    }\n  }, [isMessageListScrolledToBottom, unreadCount]);\n\n  return { show: show && intersectionObserverIsSupported };\n};\n"],"mappings":";;;;;;AAOA,IAAM,2CACJ,SACA,cACG;CACH,MAAM,EAAE,QAAQ,iBAAiB,QAAQ,sBAAsB;CAE/D,OAAO,gBADc,WAAW,sBAAsB,CAAC,CAAC,OAAO;AAEjE;AAEA,IAAM,2CACJ,SACA,cACG;CACH,MAAM,EAAE,KAAK,cAAc,QAAQ,sBAAsB;CACzD,MAAM,EAAE,QAAQ,oBAAoB,UAAU,sBAAsB;CACpE,OAAO,YAAY;AACrB;AAUA,IAAM,iCAAiC,WAAkC,EACvE,UAAU,MAAM,SAAS,CAAC,EAC5B;AAEA,IAAM,+BAA+B,WAAgC,EACnE,aAAa,MAAM,YACrB;AAEA,IAAa,iCAAiC,EAC5C,+BACA,aACA,iBACyC;CACzC,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,EAAE,aAAa,cACnB,iBAAiB,OACjB,6BACF;CAEA,MAAM,EAAE,gBAAgB,cACtB,iBAAiB,qBACjB,2BACF;CACA,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,2BAA2B,OAAO,KAAK;CAC7C,MAAM,kCAAkC,OAAO,yBAAyB;CAExE,gBAAgB;EACd,IAAI,EAAE,eAAe,kCAAkC;GACrD,QAAQ,KAAK;GACb;EACF;EAEA,MAAM,aAAa,eAAe;EAClC,IAAI,CAAC,YAAY;GACf,MAAM,CAAC,gBAAgB,SAAS,uBAC9B,6BACF;GACA,IAAI,CAAC,cAAc;GACnB,MAAM,CAAC,kBAAkB,SAAS,uBAChC,8BACF;GACA,IAAI,CAAC,gBACH,QAAQ,cAAc,CAAC;GAEzB;EACF;EAEA,MAAM,CAAC,kBAAkB,SAAS,uBAChC,8BACF;EACA,IAAI,CAAC,gBAAgB;GACnB,QAAQ,cAAc,CAAC;GACvB;EACF;EAEA,MAAM,yBAAyB,wCAC7B,gBACA,UACF;EACA,MAAM,yBAAyB,wCAC7B,gBACA,UACF;EAEA,QACE,aACI,0BAA0B,yBAC1B,sBACN;EAEA,MAAM,WAAW,IAAI,sBAClB,aAAa;GACZ,IAAI,CAAC,SAAS,QAAQ;GAEtB,MAAM,EAAE,oBAAoB,gBAAgB,eAD9B,SAAS;GAEvB,IAAI,gBAAgB;IAClB,QAAQ,KAAK;IACb;GACF;GACA,MAAM,UAAU,YAAY,OAAO;GACnC,MAAM,+BAA+B,mBAAmB,SAAS;GACjE,QAAQ,cAAc,4BAA4B;GAClD,yBAAyB,UAAU;EACrC,GACA,EAAE,MAAM,WAAW,CACrB;EACA,SAAS,QAAQ,cAAc;EAE/B,aAAa;GACX,SAAS,WAAW;EACtB;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gBAAgB;;;;;;EAOd,IACE,eACA,iCACA,yBAAyB,SACzB;GACA,QAAQ,IAAI;GACZ,yBAAyB,UAAU;EACrC;CACF,GAAG,CAAC,+BAA+B,WAAW,CAAC;CAE/C,OAAO,EAAE,MAAM,QAAQ,gCAAgC;AACzD"}