stream-chat-react 14.11.0 → 14.12.0

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

@@ -0,0 +1,275 @@
+import { useMessageListScrollManager } from "./useMessageListScrollManager.mjs";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx
+/**
+* Centralized scroll-position logic for MessageList.
+*
+* Responsibilities:
+* - Keep viewport stable during prepend/append pagination updates.
+* - Track whether the list is near bottom and expose that state to UI.
+* - Auto-scroll to bottom when appropriate while respecting suppression flags.
+* - Perform a short hydration settle pass so freshly loaded lists land at bottom.
+*/
+var useScrollLocationLogic = (params) => {
+	const { disableAutoScrollToBottom = false, disableScrollManagement = false, hasMoreNewer, listElement, loadingMore = false, loadMoreScrollThreshold, messages = [], scrolledUpThreshold = 200, suppressAutoscroll } = params;
+	const [hasNewMessages, setHasNewMessages] = useState(false);
+	const [wrapperRect, setWrapperRect] = useState();
+	const previousHasMoreNewerRef = useRef(hasMoreNewer);
+	const justReachedLatestMessageSet = previousHasMoreNewerRef.current && !hasMoreNewer;
+	const skipNextAutoScrollRef = useRef(false);
+	const isRestoringOlderAnchorRef = useRef(false);
+	const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = useState(true);
+	const closeToBottom = useRef(false);
+	const closeToTop = useRef(false);
+	const previousScrollTopRef = useRef(0);
+	const previousMessagesLengthRef = useRef(messages.length);
+	const previousDisableAutoScrollToBottomRef = useRef(disableAutoScrollToBottom);
+	const previousDisableAutoScrollSettleRef = useRef(disableAutoScrollToBottom);
+	const anchorRestoreCleanupRef = useRef(null);
+	const captureAnchor = useCallback(() => {
+		if (!listElement) return null;
+		const listRect = listElement.getBoundingClientRect();
+		const listTop = listRect.top;
+		const listBottom = listRect.bottom;
+		const listCenter = listTop + listRect.height / 2;
+		const preferTopEdgeAnchor = loadingMore || listElement.scrollTop < loadMoreScrollThreshold;
+		const messageAnchors = Array.from(listElement.querySelectorAll("[data-message-id]")).map((element) => {
+			const rect = element.getBoundingClientRect();
+			return {
+				center: rect.top + rect.height / 2,
+				element,
+				offsetTop: rect.top - listTop,
+				rect
+			};
+		});
+		const visibleMessageAnchors = messageAnchors.filter(({ rect }) => rect.bottom > listTop && rect.top < listBottom);
+		const topEdgeAnchor = visibleMessageAnchors.reduce((closest, candidate) => {
+			if (!closest || candidate.rect.top < closest.rect.top) return candidate;
+			return closest;
+		}, null);
+		const centerAnchor = visibleMessageAnchors.find(({ rect }) => rect.top <= listCenter && rect.bottom >= listCenter) ?? visibleMessageAnchors.reduce((closest, candidate) => {
+			if (!closest) return candidate;
+			return Math.abs(candidate.center - listCenter) < Math.abs(closest.center - listCenter) ? candidate : closest;
+		}, null);
+		const anchor = (preferTopEdgeAnchor ? topEdgeAnchor : centerAnchor) ?? messageAnchors[0];
+		if (!anchor?.element.dataset.messageId) return null;
+		return {
+			id: anchor.element.dataset.messageId,
+			offsetTop: anchor.offsetTop
+		};
+	}, [
+		listElement,
+		loadMoreScrollThreshold,
+		loadingMore
+	]);
+	const restoreAnchor = useCallback((anchor) => {
+		if (!listElement) return;
+		anchorRestoreCleanupRef.current?.();
+		let cancelled = false;
+		let stableFrameCount = 0;
+		let frameQueued = false;
+		let resizeObserver;
+		let settleTimeoutId;
+		let animationFrameId;
+		isRestoringOlderAnchorRef.current = true;
+		const applyAnchor = () => {
+			if (cancelled) return true;
+			const anchorElement = listElement.querySelector(`[data-message-id='${anchor.id}']`);
+			if (!anchorElement) return true;
+			const listTop = listElement.getBoundingClientRect().top;
+			const offsetDelta = anchorElement.getBoundingClientRect().top - listTop - anchor.offsetTop;
+			if (Math.abs(offsetDelta) > 1) {
+				listElement.scrollBy({ top: offsetDelta });
+				return false;
+			}
+			return true;
+		};
+		const cleanup = () => {
+			cancelled = true;
+			frameQueued = false;
+			isRestoringOlderAnchorRef.current = false;
+			if (typeof animationFrameId !== "undefined") window.cancelAnimationFrame(animationFrameId);
+			if (settleTimeoutId) clearTimeout(settleTimeoutId);
+			resizeObserver?.disconnect();
+		};
+		const queueNextFrame = () => {
+			if (cancelled || frameQueued) return;
+			frameQueued = true;
+			animationFrameId = window.requestAnimationFrame(() => {
+				frameQueued = false;
+				stableFrameCount = applyAnchor() ? stableFrameCount + 1 : 0;
+				if (stableFrameCount >= 2) {
+					cleanup();
+					return;
+				}
+				queueNextFrame();
+			});
+		};
+		stableFrameCount = applyAnchor() ? 1 : 0;
+		queueNextFrame();
+		if (typeof ResizeObserver !== "undefined") {
+			resizeObserver = new ResizeObserver(() => {
+				stableFrameCount = 0;
+				queueNextFrame();
+			});
+			resizeObserver.observe(listElement);
+		}
+		settleTimeoutId = setTimeout(() => {
+			cleanup();
+		}, 1200);
+		anchorRestoreCleanupRef.current = cleanup;
+	}, [listElement]);
+	useLayoutEffect(() => () => {
+		anchorRestoreCleanupRef.current?.();
+	}, []);
+	const scrollToBottom = useCallback((options) => {
+		if (!listElement?.scrollTo || hasMoreNewer || isRestoringOlderAnchorRef.current || justReachedLatestMessageSet || suppressAutoscroll) return;
+		listElement.scrollTo({
+			behavior: options?.behavior,
+			top: listElement.scrollHeight
+		});
+		setHasNewMessages(false);
+	}, [
+		hasMoreNewer,
+		justReachedLatestMessageSet,
+		listElement,
+		suppressAutoscroll
+	]);
+	/**
+	* Keeps wrapper geometry up to date and handles the "reached latest merged set"
+	* path where existing viewport position must be preserved.
+	*/
+	useLayoutEffect(() => {
+		const disableAutoScrollJustReleased = previousDisableAutoScrollToBottomRef.current && !disableAutoScrollToBottom;
+		previousDisableAutoScrollToBottomRef.current = disableAutoScrollToBottom;
+		if (disableAutoScrollJustReleased) return;
+		if (listElement) setWrapperRect(listElement.getBoundingClientRect());
+		if (listElement && justReachedLatestMessageSet) {
+			listElement.scrollTop = previousScrollTopRef.current;
+			skipNextAutoScrollRef.current = true;
+			return;
+		}
+		if (skipNextAutoScrollRef.current) {
+			skipNextAutoScrollRef.current = false;
+			return;
+		}
+		if (listElement && !disableAutoScrollToBottom && !isRestoringOlderAnchorRef.current) scrollToBottom();
+	}, [
+		disableAutoScrollToBottom,
+		justReachedLatestMessageSet,
+		listElement,
+		hasMoreNewer
+	]);
+	/**
+	* Short post-render bottom settle. This is intentionally small (immediate + 2 retries)
+	* to catch late layout updates without keeping the list in a prolonged lock loop.
+	*/
+	useLayoutEffect(() => {
+		const disableAutoScrollJustReleased = previousDisableAutoScrollSettleRef.current && !disableAutoScrollToBottom;
+		previousDisableAutoScrollSettleRef.current = disableAutoScrollToBottom;
+		if (disableAutoScrollJustReleased) return;
+		if (!listElement || disableAutoScrollToBottom || hasMoreNewer || suppressAutoscroll || justReachedLatestMessageSet || isRestoringOlderAnchorRef.current) return;
+		const initialDistanceToBottom = listElement.scrollHeight - (listElement.scrollTop + listElement.clientHeight);
+		const messagesHydrated = previousMessagesLengthRef.current === 0 && messages.length > 0;
+		if (initialDistanceToBottom > scrolledUpThreshold && !messagesHydrated) return;
+		let keepPinnedToBottom = true;
+		const maybeScrollToBottom = () => {
+			if (keepPinnedToBottom) scrollToBottom();
+		};
+		maybeScrollToBottom();
+		const settleTimeoutIds = [
+			80,
+			messagesHydrated ? 260 : 420,
+			900,
+			1700
+		].map((delay) => setTimeout(maybeScrollToBottom, delay));
+		const stopKeepingPinnedToBottom = () => {
+			keepPinnedToBottom = false;
+		};
+		listElement.addEventListener("pointerdown", stopKeepingPinnedToBottom, { passive: true });
+		listElement.addEventListener("touchstart", stopKeepingPinnedToBottom, { passive: true });
+		listElement.addEventListener("wheel", stopKeepingPinnedToBottom, { passive: true });
+		listElement.addEventListener("keydown", stopKeepingPinnedToBottom);
+		const pinWindowTimeoutId = setTimeout(() => {
+			stopKeepingPinnedToBottom();
+		}, 2200);
+		return () => {
+			settleTimeoutIds.forEach(clearTimeout);
+			clearTimeout(pinWindowTimeoutId);
+			listElement.removeEventListener("pointerdown", stopKeepingPinnedToBottom);
+			listElement.removeEventListener("touchstart", stopKeepingPinnedToBottom);
+			listElement.removeEventListener("wheel", stopKeepingPinnedToBottom);
+			listElement.removeEventListener("keydown", stopKeepingPinnedToBottom);
+		};
+	}, [
+		disableAutoScrollToBottom,
+		hasMoreNewer,
+		justReachedLatestMessageSet,
+		listElement,
+		messages.length,
+		scrollToBottom,
+		scrolledUpThreshold,
+		suppressAutoscroll
+	]);
+	const updateScrollTop = useMessageListScrollManager({
+		captureAnchor,
+		disableScrollManagement: disableScrollManagement || isRestoringOlderAnchorRef.current,
+		justReachedLatestMessageSet,
+		loadingMore,
+		loadMoreScrollThreshold,
+		messages,
+		onScrollBy: (scrollBy) => {
+			listElement?.scrollBy({ top: scrollBy });
+		},
+		onScrollToTop: () => {
+			if (!listElement) return;
+			listElement.scrollTop = 0;
+		},
+		restoreAnchor,
+		scrollContainerMeasures: () => ({
+			offsetHeight: listElement?.offsetHeight || 0,
+			scrollHeight: listElement?.scrollHeight || 0,
+			scrollTop: listElement?.scrollTop || 0
+		}),
+		scrolledUpThreshold,
+		scrollToBottom,
+		showNewMessages: () => setHasNewMessages(true)
+	});
+	useLayoutEffect(() => {
+		previousHasMoreNewerRef.current = hasMoreNewer;
+	}, [hasMoreNewer]);
+	useLayoutEffect(() => {
+		previousMessagesLengthRef.current = messages.length;
+	}, [messages.length]);
+	return {
+		hasNewMessages,
+		isMessageListScrolledToBottom,
+		onScroll: useCallback((event) => {
+			const element = event.target;
+			const scrollTop = element.scrollTop;
+			previousScrollTopRef.current = scrollTop;
+			updateScrollTop(scrollTop, captureAnchor);
+			const offsetHeight = element.offsetHeight;
+			const distanceToBottom = element.scrollHeight - (scrollTop + offsetHeight);
+			const bottomEnterThreshold = Math.max(Math.floor(scrolledUpThreshold * .6), 24);
+			const prevCloseToBottom = closeToBottom.current;
+			closeToBottom.current = prevCloseToBottom ? distanceToBottom < scrolledUpThreshold : distanceToBottom < bottomEnterThreshold;
+			closeToTop.current = scrollTop < scrolledUpThreshold;
+			if (closeToBottom.current) setHasNewMessages(false);
+			if (prevCloseToBottom && !closeToBottom.current) setIsMessageListScrolledToBottom(false);
+			else if (!prevCloseToBottom && closeToBottom.current) setIsMessageListScrolledToBottom(true);
+		}, [
+			captureAnchor,
+			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  /** Disables automatic scroll-to-bottom updates after message changes. */\n  disableAutoScrollToBottom?: boolean;\n  /** Disables scroll-management adjustments (anchor restore, append/prepend handling). */\n  disableScrollManagement?: boolean;\n  /** True when there are newer messages to load beyond the currently rendered page. */\n  hasMoreNewer: boolean;\n  /** Scrollable message-list container element. */\n  listElement: HTMLDivElement | null;\n  /** Threshold used to detect older-page pagination proximity near the top. */\n  loadMoreScrollThreshold: number;\n  /** Indicates whether older-page pagination is currently in progress. */\n  loadingMore?: boolean;\n  /** Hard-disable all autoscroll behavior. */\n  suppressAutoscroll: boolean;\n  /** Current rendered message set used for scroll reconciliation. */\n  messages?: LocalMessage[];\n  /** Distance from bottom (px) considered as \"near bottom\". */\n  scrolledUpThreshold?: number;\n};\n\n/**\n * Centralized scroll-position logic for MessageList.\n *\n * Responsibilities:\n * - Keep viewport stable during prepend/append pagination updates.\n * - Track whether the list is near bottom and expose that state to UI.\n * - Auto-scroll to bottom when appropriate while respecting suppression flags.\n * - Perform a short hydration settle pass so freshly loaded lists land at bottom.\n */\nexport const useScrollLocationLogic = (params: UseScrollLocationLogicParams) => {\n  const {\n    disableAutoScrollToBottom = false,\n    disableScrollManagement = false,\n    hasMoreNewer,\n    listElement,\n    loadingMore = false,\n    loadMoreScrollThreshold,\n    messages = [],\n    scrolledUpThreshold = 200,\n    suppressAutoscroll,\n  } = params;\n\n  const [hasNewMessages, setHasNewMessages] = useState(false);\n  const [wrapperRect, setWrapperRect] = useState<DOMRect>();\n  const previousHasMoreNewerRef = useRef(hasMoreNewer);\n  const justReachedLatestMessageSet = previousHasMoreNewerRef.current && !hasMoreNewer;\n  const skipNextAutoScrollRef = useRef(false);\n  const isRestoringOlderAnchorRef = useRef(false);\n\n  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] =\n    useState(true);\n  const closeToBottom = useRef(false);\n  const closeToTop = useRef(false);\n  const previousScrollTopRef = useRef(0);\n  const previousMessagesLengthRef = useRef(messages.length);\n  const previousDisableAutoScrollToBottomRef = useRef(disableAutoScrollToBottom);\n  const previousDisableAutoScrollSettleRef = useRef(disableAutoScrollToBottom);\n  const anchorRestoreCleanupRef = useRef<(() => void) | null>(null);\n\n  const captureAnchor = useCallback(() => {\n    if (!listElement) return null;\n\n    const listRect = listElement.getBoundingClientRect();\n    const listTop = listRect.top;\n    const listBottom = listRect.bottom;\n    const listCenter = listTop + listRect.height / 2;\n    // Older-page pagination should track the top edge, while the generic\n    // “keep this viewport stable” case works better from the center.\n    const preferTopEdgeAnchor =\n      loadingMore || listElement.scrollTop < loadMoreScrollThreshold;\n    const messageElements = Array.from(\n      listElement.querySelectorAll<HTMLElement>('[data-message-id]'),\n    );\n    const messageAnchors = messageElements.map((element) => {\n      const rect = element.getBoundingClientRect();\n      return {\n        center: rect.top + rect.height / 2,\n        element,\n        offsetTop: rect.top - listTop,\n        rect,\n      };\n    });\n\n    const visibleMessageAnchors = messageAnchors.filter(\n      ({ rect }) => rect.bottom > listTop && rect.top < listBottom,\n    );\n\n    const topEdgeAnchor = visibleMessageAnchors.reduce<\n      (typeof visibleMessageAnchors)[number] | null\n    >((closest, candidate) => {\n      if (!closest || candidate.rect.top < closest.rect.top) {\n        return candidate;\n      }\n\n      return closest;\n    }, null);\n\n    const centerAnchor =\n      visibleMessageAnchors.find(\n        ({ rect }) => rect.top <= listCenter && rect.bottom >= listCenter,\n      ) ??\n      visibleMessageAnchors.reduce<(typeof visibleMessageAnchors)[number] | null>(\n        (closest, candidate) => {\n          if (!closest) return candidate;\n\n          const distance = Math.abs(candidate.center - listCenter);\n          const closestDistance = Math.abs(closest.center - listCenter);\n\n          return distance < closestDistance ? candidate : closest;\n        },\n        null,\n      );\n\n    const anchor =\n      (preferTopEdgeAnchor ? topEdgeAnchor : centerAnchor) ?? messageAnchors[0];\n\n    if (!anchor?.element.dataset.messageId) return null;\n\n    return {\n      id: anchor.element.dataset.messageId,\n      offsetTop: anchor.offsetTop,\n    };\n  }, [listElement, loadMoreScrollThreshold, loadingMore]);\n\n  const restoreAnchor = useCallback(\n    (anchor: { id: string; offsetTop: number }) => {\n      if (!listElement) return;\n\n      anchorRestoreCleanupRef.current?.();\n\n      let cancelled = false;\n      let stableFrameCount = 0;\n      let frameQueued = false;\n      let resizeObserver: ResizeObserver | undefined;\n      // eslint-disable-next-line prefer-const\n      let settleTimeoutId: ReturnType<typeof setTimeout> | undefined;\n      let animationFrameId: number | undefined;\n\n      isRestoringOlderAnchorRef.current = true;\n\n      const applyAnchor = () => {\n        if (cancelled) return true;\n\n        const anchorElement = listElement.querySelector<HTMLElement>(\n          `[data-message-id='${anchor.id}']`,\n        );\n        if (!anchorElement) return true;\n\n        const listTop = listElement.getBoundingClientRect().top;\n        const nextOffsetTop = anchorElement.getBoundingClientRect().top - listTop;\n        const offsetDelta = nextOffsetTop - anchor.offsetTop;\n\n        if (Math.abs(offsetDelta) > 1) {\n          listElement.scrollBy({ top: offsetDelta });\n          return false;\n        }\n\n        return true;\n      };\n\n      const cleanup = () => {\n        cancelled = true;\n        frameQueued = false;\n        isRestoringOlderAnchorRef.current = false;\n        if (typeof animationFrameId !== 'undefined') {\n          window.cancelAnimationFrame(animationFrameId);\n        }\n        if (settleTimeoutId) {\n          clearTimeout(settleTimeoutId);\n        }\n        resizeObserver?.disconnect();\n      };\n\n      // Keep correcting against the same anchor until the DOM stops shifting.\n      const queueNextFrame = () => {\n        if (cancelled || frameQueued) return;\n        frameQueued = true;\n        animationFrameId = window.requestAnimationFrame(() => {\n          frameQueued = false;\n          const isStable = applyAnchor();\n          stableFrameCount = isStable ? stableFrameCount + 1 : 0;\n\n          if (stableFrameCount >= 2) {\n            cleanup();\n            return;\n          }\n\n          queueNextFrame();\n        });\n      };\n\n      stableFrameCount = applyAnchor() ? 1 : 0;\n      queueNextFrame();\n\n      // Late media/layout updates can still move the anchor after the first\n      // correction, so restart the settle check when the list resizes.\n      if (typeof ResizeObserver !== 'undefined') {\n        resizeObserver = new ResizeObserver(() => {\n          stableFrameCount = 0;\n          queueNextFrame();\n        });\n        resizeObserver.observe(listElement);\n      }\n\n      settleTimeoutId = setTimeout(() => {\n        cleanup();\n      }, 1200);\n\n      anchorRestoreCleanupRef.current = cleanup;\n    },\n    [listElement],\n  );\n\n  useLayoutEffect(\n    () => () => {\n      anchorRestoreCleanupRef.current?.();\n    },\n    [],\n  );\n\n  const scrollToBottom = useCallback(\n    (options?: ScrollToOptions) => {\n      if (\n        !listElement?.scrollTo ||\n        hasMoreNewer ||\n        isRestoringOlderAnchorRef.current ||\n        justReachedLatestMessageSet ||\n        suppressAutoscroll\n      ) {\n        return;\n      }\n\n      listElement.scrollTo({\n        behavior: options?.behavior,\n        top: listElement.scrollHeight,\n      });\n      setHasNewMessages(false);\n    },\n    [hasMoreNewer, justReachedLatestMessageSet, listElement, suppressAutoscroll],\n  );\n\n  /**\n   * Keeps wrapper geometry up to date and handles the \"reached latest merged set\"\n   * path where existing viewport position must be preserved.\n   */\n  useLayoutEffect(() => {\n    const disableAutoScrollJustReleased =\n      previousDisableAutoScrollToBottomRef.current && !disableAutoScrollToBottom;\n    previousDisableAutoScrollToBottomRef.current = disableAutoScrollToBottom;\n\n    // Re-enabling auto-scroll should not immediately force a jump to bottom.\n    // This avoids snap-back after temporary suppression (e.g. jump-to-message).\n    if (disableAutoScrollJustReleased) {\n      return;\n    }\n\n    if (listElement) {\n      setWrapperRect(listElement.getBoundingClientRect());\n    }\n\n    if (listElement && justReachedLatestMessageSet) {\n      listElement.scrollTop = previousScrollTopRef.current;\n      skipNextAutoScrollRef.current = true;\n      return;\n    }\n\n    if (skipNextAutoScrollRef.current) {\n      skipNextAutoScrollRef.current = false;\n      return;\n    }\n\n    if (listElement && !disableAutoScrollToBottom && !isRestoringOlderAnchorRef.current) {\n      scrollToBottom();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disableAutoScrollToBottom, justReachedLatestMessageSet, listElement, hasMoreNewer]);\n\n  /**\n   * Short post-render bottom settle. This is intentionally small (immediate + 2 retries)\n   * to catch late layout updates without keeping the list in a prolonged lock loop.\n   */\n  useLayoutEffect(() => {\n    const disableAutoScrollJustReleased =\n      previousDisableAutoScrollSettleRef.current && !disableAutoScrollToBottom;\n    previousDisableAutoScrollSettleRef.current = disableAutoScrollToBottom;\n\n    // Skip one settle cycle when auto-scroll suppression is released.\n    // Without this guard, a jump-to-message flow can scroll to the target and then\n    // get pulled back down by the delayed \"keep pinned to bottom\" retries\n    // (80/260/420/900/1700ms), which looks like a snap-back to the latest message.\n    // Letting this transition frame pass preserves the jump destination.\n    if (disableAutoScrollJustReleased) {\n      return;\n    }\n\n    if (\n      !listElement ||\n      disableAutoScrollToBottom ||\n      hasMoreNewer ||\n      suppressAutoscroll ||\n      justReachedLatestMessageSet ||\n      isRestoringOlderAnchorRef.current\n    ) {\n      return;\n    }\n\n    const initialDistanceToBottom =\n      listElement.scrollHeight - (listElement.scrollTop + listElement.clientHeight);\n    const messagesHydrated =\n      previousMessagesLengthRef.current === 0 && messages.length > 0;\n\n    if (initialDistanceToBottom > scrolledUpThreshold && !messagesHydrated) {\n      return;\n    }\n\n    let keepPinnedToBottom = true;\n\n    const maybeScrollToBottom = () => {\n      if (keepPinnedToBottom) {\n        scrollToBottom();\n      }\n    };\n\n    maybeScrollToBottom();\n    const settleDelays = [80, messagesHydrated ? 260 : 420, 900, 1700];\n    const settleTimeoutIds = settleDelays.map((delay) =>\n      setTimeout(maybeScrollToBottom, delay),\n    );\n\n    const stopKeepingPinnedToBottom = () => {\n      keepPinnedToBottom = false;\n    };\n\n    // Any direct user interaction with the scroller disables the temporary\n    // initial-load pin, so manual scrolling is never force-overridden.\n    listElement.addEventListener('pointerdown', stopKeepingPinnedToBottom, {\n      passive: true,\n    });\n    listElement.addEventListener('touchstart', stopKeepingPinnedToBottom, {\n      passive: true,\n    });\n    listElement.addEventListener('wheel', stopKeepingPinnedToBottom, {\n      passive: true,\n    });\n    listElement.addEventListener('keydown', stopKeepingPinnedToBottom);\n\n    const pinWindowTimeoutId = setTimeout(() => {\n      stopKeepingPinnedToBottom();\n    }, 2200);\n\n    return () => {\n      settleTimeoutIds.forEach(clearTimeout);\n      clearTimeout(pinWindowTimeoutId);\n      listElement.removeEventListener('pointerdown', stopKeepingPinnedToBottom);\n      listElement.removeEventListener('touchstart', stopKeepingPinnedToBottom);\n      listElement.removeEventListener('wheel', stopKeepingPinnedToBottom);\n      listElement.removeEventListener('keydown', stopKeepingPinnedToBottom);\n    };\n  }, [\n    disableAutoScrollToBottom,\n    hasMoreNewer,\n    justReachedLatestMessageSet,\n    listElement,\n    messages.length,\n    scrollToBottom,\n    scrolledUpThreshold,\n    suppressAutoscroll,\n  ]);\n\n  const updateScrollTop = useMessageListScrollManager({\n    captureAnchor,\n    disableScrollManagement: disableScrollManagement || isRestoringOlderAnchorRef.current,\n    justReachedLatestMessageSet,\n    loadingMore,\n    loadMoreScrollThreshold,\n    messages,\n    onScrollBy: (scrollBy) => {\n      listElement?.scrollBy({ top: scrollBy });\n    },\n    onScrollToTop: () => {\n      if (!listElement) return;\n      listElement.scrollTop = 0;\n    },\n    restoreAnchor,\n\n    scrollContainerMeasures: () => ({\n      offsetHeight: listElement?.offsetHeight || 0,\n      scrollHeight: listElement?.scrollHeight || 0,\n      scrollTop: listElement?.scrollTop || 0,\n    }),\n    scrolledUpThreshold,\n    scrollToBottom,\n    showNewMessages: () => setHasNewMessages(true),\n  });\n\n  useLayoutEffect(() => {\n    previousHasMoreNewerRef.current = hasMoreNewer;\n  }, [hasMoreNewer]);\n\n  useLayoutEffect(() => {\n    previousMessagesLengthRef.current = messages.length;\n  }, [messages.length]);\n\n  /**\n   * Updates cached scroll metrics and bottom/top proximity state used by\n   * notifications, autoscroll decisions, and paginator behavior.\n   */\n  const onScroll = useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      const element = event.target as HTMLDivElement;\n      const scrollTop = element.scrollTop;\n      previousScrollTopRef.current = scrollTop;\n\n      updateScrollTop(scrollTop, captureAnchor);\n\n      const offsetHeight = element.offsetHeight;\n      const scrollHeight = element.scrollHeight;\n      const distanceToBottom = scrollHeight - (scrollTop + offsetHeight);\n      const bottomEnterThreshold = Math.max(Math.floor(scrolledUpThreshold * 0.6), 24);\n\n      const prevCloseToBottom = closeToBottom.current;\n      closeToBottom.current = prevCloseToBottom\n        ? distanceToBottom < scrolledUpThreshold\n        : distanceToBottom < bottomEnterThreshold;\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    [captureAnchor, updateScrollTop, closeToTop, closeToBottom, scrolledUpThreshold],\n  );\n\n  return {\n    hasNewMessages,\n    isMessageListScrolledToBottom,\n    onScroll,\n    scrollToBottom,\n    wrapperRect,\n  };\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,81 @@
+import { useChannelStateContext } from "../../../../context/ChannelStateContext.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 useUnreadMessagesNotification = ({ isMessageListScrolledToBottom, listElement, showAlways, unreadCount }) => {
+	const { messages } = useChannelStateContext("UnreadMessagesNotification");
+	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(true);
+			return;
+		}
+		const [observedTarget] = document.getElementsByClassName(UNREAD_MESSAGE_SEPARATOR_CLASS);
+		if (!observedTarget) {
+			setShow(true);
+			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 { useChannelStateContext } from '../../../../context';\nimport { useEffect, useRef, useState } from 'react';\nimport { MESSAGE_LIST_MAIN_PANEL_CLASS } from '../../MessageListMainPanel';\nimport { UNREAD_MESSAGE_SEPARATOR_CLASS } from '../../UnreadMessagesSeparator';\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\nexport const useUnreadMessagesNotification = ({\n  isMessageListScrolledToBottom,\n  listElement,\n  showAlways,\n  unreadCount,\n}: UseUnreadMessagesNotificationParams) => {\n  const { messages } = useChannelStateContext('UnreadMessagesNotification');\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(true);\n      }\n      return;\n    }\n\n    const [observedTarget] = document.getElementsByClassName(\n      UNREAD_MESSAGE_SEPARATOR_CLASS,\n    );\n    if (!observedTarget) {\n      setShow(true);\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":";;;;;AAKA,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,IAAa,iCAAiC,EAC5C,+BACA,aACA,YACA,kBACyC;CACzC,MAAM,EAAE,aAAa,uBAAuB,4BAA4B;CACxE,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,IAAI;GAEd;EACF;EAEA,MAAM,CAAC,kBAAkB,SAAS,uBAChC,8BACF;EACA,IAAI,CAAC,gBAAgB;GACnB,QAAQ,IAAI;GACZ;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"}

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

@@ -0,0 +1,69 @@
+import { isDateSeparatorMessage, isIntroMessage } from "../../utils.mjs";
+import { useCallback, useState } from "react";
+//#region src/components/MessageList/hooks/VirtualizedMessageList/useFloatingDateSeparator.ts
+/**
+* Returns the date to show in the floating date separator based on currently visible messages.
+* When the first visible item is a message (not a date separator), we've scrolled past its
+* date separator — find that separator's date.
+*/
+function getFloatingDateForFirstMessage(firstMessage, processedMessages, firstMessageIndex) {
+	if (isIntroMessage(firstMessage)) return null;
+	for (let i = firstMessageIndex - 1; i >= 0; i -= 1) {
+		const item = processedMessages[i];
+		if (isDateSeparatorMessage(item)) return item.date;
+	}
+	const created = firstMessage.created_at;
+	if (created) {
+		const d = new Date(created);
+		return isNaN(d.getTime()) ? null : d;
+	}
+	return null;
+}
+function getFloatingDateForFirstItem(firstItem, processedMessages, firstItemIndex) {
+	if (isDateSeparatorMessage(firstItem)) return firstItem.date;
+	return getFloatingDateForFirstMessage(firstItem, processedMessages, firstItemIndex);
+}
+/**
+* Controls the floating date separator as a sticky "current section" label.
+* It follows the date separator represented by the first visible item.
+*/
+var HIDDEN_STATE = {
+	date: null,
+	visible: false
+};
+var useFloatingDateSeparator = ({ disableDateSeparator, processedMessages }) => {
+	const [state, setState] = useState(HIDDEN_STATE);
+	const onItemsRendered = useCallback((rendered) => {
+		if (disableDateSeparator || processedMessages.length === 0) {
+			setState(HIDDEN_STATE);
+			return;
+		}
+		const valid = rendered.filter((m) => m != null);
+		if (valid.length === 0) {
+			setState(HIDDEN_STATE);
+			return;
+		}
+		const first = valid[0];
+		const firstIndex = processedMessages.findIndex((m) => m.id === first.id);
+		const date = firstIndex >= 0 ? getFloatingDateForFirstItem(first, processedMessages, firstIndex) : null;
+		const visible = date !== null;
+		setState((prev) => {
+			const prevTime = prev.date?.getTime() ?? null;
+			const nextTime = date?.getTime() ?? null;
+			if (prev.visible === visible && prevTime === nextTime) return prev;
+			return {
+				date,
+				visible
+			};
+		});
+	}, [disableDateSeparator, processedMessages]);
+	return {
+		floatingDate: state.date,
+		onItemsRendered,
+		showFloatingDate: !!state.date && state.visible
+	};
+};
+//#endregion
+export { useFloatingDateSeparator };
+
+//# sourceMappingURL=useFloatingDateSeparator.mjs.map

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/useFloatingDateSeparator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingDateSeparator.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useFloatingDateSeparator.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { RenderedMessage } from '../../utils';\nimport { isDateSeparatorMessage, isIntroMessage } from '../../utils';\nimport type { LocalMessage } from 'stream-chat';\n\nexport type UseFloatingDateSeparatorParams = {\n  disableDateSeparator: boolean;\n  processedMessages: RenderedMessage[];\n};\n\nexport type UseFloatingDateSeparatorResult = {\n  floatingDate: Date | null;\n  onItemsRendered: (rendered: RenderedMessage[]) => void;\n  showFloatingDate: boolean;\n};\n\n/**\n * Returns the date to show in the floating date separator based on currently visible messages.\n * When the first visible item is a message (not a date separator), we've scrolled past its\n * date separator — find that separator's date.\n */\nfunction getFloatingDateForFirstMessage(\n  firstMessage: RenderedMessage,\n  processedMessages: RenderedMessage[],\n  firstMessageIndex: number,\n): Date | null {\n  if (isIntroMessage(firstMessage)) return null;\n\n  // Walk backwards to find the last date separator before this message\n  for (let i = firstMessageIndex - 1; i >= 0; i -= 1) {\n    const item = processedMessages[i];\n    if (isDateSeparatorMessage(item)) {\n      return item.date;\n    }\n  }\n\n  // No preceding date separator; use message's created_at\n  const msg = firstMessage as LocalMessage;\n  const created = msg.created_at;\n  if (created) {\n    const d = new Date(created);\n    return isNaN(d.getTime()) ? null : d;\n  }\n  return null;\n}\n\nfunction getFloatingDateForFirstItem(\n  firstItem: RenderedMessage,\n  processedMessages: RenderedMessage[],\n  firstItemIndex: number,\n): Date | null {\n  if (isDateSeparatorMessage(firstItem)) return firstItem.date;\n\n  return getFloatingDateForFirstMessage(firstItem, processedMessages, firstItemIndex);\n}\n\n/**\n * Controls the floating date separator as a sticky \"current section\" label.\n * It follows the date separator represented by the first visible item.\n */\nconst HIDDEN_STATE = { date: null, visible: false } as const;\n\nexport const useFloatingDateSeparator = ({\n  disableDateSeparator,\n  processedMessages,\n}: UseFloatingDateSeparatorParams): UseFloatingDateSeparatorResult => {\n  const [state, setState] = useState<{\n    date: Date | null;\n    visible: boolean;\n  }>(HIDDEN_STATE);\n\n  const onItemsRendered = useCallback(\n    (rendered: RenderedMessage[]) => {\n      if (disableDateSeparator || processedMessages.length === 0) {\n        setState(HIDDEN_STATE);\n        return;\n      }\n\n      const valid = rendered.filter((m): m is RenderedMessage => m != null);\n      if (valid.length === 0) {\n        setState(HIDDEN_STATE);\n        return;\n      }\n\n      const first = valid[0];\n      const firstIndex = processedMessages.findIndex((m) => m.id === first.id);\n      const date =\n        firstIndex >= 0\n          ? getFloatingDateForFirstItem(first, processedMessages, firstIndex)\n          : null;\n\n      const visible = date !== null;\n      setState((prev) => {\n        const prevTime = prev.date?.getTime() ?? null;\n        const nextTime = date?.getTime() ?? null;\n        if (prev.visible === visible && prevTime === nextTime) return prev;\n        return { date, visible };\n      });\n    },\n    [disableDateSeparator, processedMessages],\n  );\n\n  return {\n    floatingDate: state.date,\n    onItemsRendered,\n    showFloatingDate: !!state.date && state.visible,\n  };\n};\n"],"mappings":";;;;;;;;AAsBA,SAAS,+BACP,cACA,mBACA,mBACa;CACb,IAAI,eAAe,YAAY,GAAG,OAAO;CAGzC,KAAK,IAAI,IAAI,oBAAoB,GAAG,KAAK,GAAG,KAAK,GAAG;EAClD,MAAM,OAAO,kBAAkB;EAC/B,IAAI,uBAAuB,IAAI,GAC7B,OAAO,KAAK;CAEhB;CAIA,MAAM,UAAU,aAAI;CACpB,IAAI,SAAS;EACX,MAAM,IAAI,IAAI,KAAK,OAAO;EAC1B,OAAO,MAAM,EAAE,QAAQ,CAAC,IAAI,OAAO;CACrC;CACA,OAAO;AACT;AAEA,SAAS,4BACP,WACA,mBACA,gBACa;CACb,IAAI,uBAAuB,SAAS,GAAG,OAAO,UAAU;CAExD,OAAO,+BAA+B,WAAW,mBAAmB,cAAc;AACpF;;;;;AAMA,IAAM,eAAe;CAAE,MAAM;CAAM,SAAS;AAAM;AAElD,IAAa,4BAA4B,EACvC,sBACA,wBACoE;CACpE,MAAM,CAAC,OAAO,YAAY,SAGvB,YAAY;CAEf,MAAM,kBAAkB,aACrB,aAAgC;EAC/B,IAAI,wBAAwB,kBAAkB,WAAW,GAAG;GAC1D,SAAS,YAAY;GACrB;EACF;EAEA,MAAM,QAAQ,SAAS,QAAQ,MAA4B,KAAK,IAAI;EACpE,IAAI,MAAM,WAAW,GAAG;GACtB,SAAS,YAAY;GACrB;EACF;EAEA,MAAM,QAAQ,MAAM;EACpB,MAAM,aAAa,kBAAkB,WAAW,MAAM,EAAE,OAAO,MAAM,EAAE;EACvE,MAAM,OACJ,cAAc,IACV,4BAA4B,OAAO,mBAAmB,UAAU,IAChE;EAEN,MAAM,UAAU,SAAS;EACzB,UAAU,SAAS;GACjB,MAAM,WAAW,KAAK,MAAM,QAAQ,KAAK;GACzC,MAAM,WAAW,MAAM,QAAQ,KAAK;GACpC,IAAI,KAAK,YAAY,WAAW,aAAa,UAAU,OAAO;GAC9D,OAAO;IAAE;IAAM;GAAQ;EACzB,CAAC;CACH,GACA,CAAC,sBAAsB,iBAAiB,CAC1C;CAEA,OAAO;EACL,cAAc,MAAM;EACpB;EACA,kBAAkB,CAAC,CAAC,MAAM,QAAQ,MAAM;CAC1C;AACF"}

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

@@ -0,0 +1,24 @@
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useEffect, useState } from "react";
+//#region src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts
+var useGiphyPreview = (separateGiphyPreview) => {
+	const [giphyPreviewMessage, setGiphyPreviewMessage] = useState();
+	const { client } = useChatContext("useGiphyPreview");
+	useEffect(() => {
+		if (!separateGiphyPreview) return;
+		const handleEvent = (event) => {
+			const { message, user } = event;
+			if (message?.command === "giphy" && user?.id === client.userID) setGiphyPreviewMessage(void 0);
+		};
+		client.on("message.new", handleEvent);
+		return () => client.off("message.new", handleEvent);
+	}, [client, separateGiphyPreview]);
+	return {
+		giphyPreviewMessage,
+		setGiphyPreviewMessage: separateGiphyPreview ? setGiphyPreviewMessage : void 0
+	};
+};
+//#endregion
+export { useGiphyPreview };
+
+//# sourceMappingURL=useGiphyPreview.mjs.map

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGiphyPreview.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useChatContext } from '../../../../context/ChatContext';\n\nimport type { EventHandler, LocalMessage } from 'stream-chat';\n\nexport const useGiphyPreview = (separateGiphyPreview: boolean) => {\n  const [giphyPreviewMessage, setGiphyPreviewMessage] = useState<LocalMessage>();\n\n  const { client } = useChatContext('useGiphyPreview');\n\n  useEffect(() => {\n    if (!separateGiphyPreview) return;\n    const handleEvent: EventHandler = (event) => {\n      const { message, user } = event;\n\n      if (message?.command === 'giphy' && user?.id === client.userID) {\n        setGiphyPreviewMessage(undefined);\n      }\n    };\n\n    client.on('message.new', handleEvent);\n    return () => client.off('message.new', handleEvent);\n  }, [client, separateGiphyPreview]);\n\n  return {\n    giphyPreviewMessage,\n    setGiphyPreviewMessage: separateGiphyPreview ? setGiphyPreviewMessage : undefined,\n  };\n};\n"],"mappings":";;;AAMA,IAAa,mBAAmB,yBAAkC;CAChE,MAAM,CAAC,qBAAqB,0BAA0B,SAAuB;CAE7E,MAAM,EAAE,WAAW,eAAe,iBAAiB;CAEnD,gBAAgB;EACd,IAAI,CAAC,sBAAsB;EAC3B,MAAM,eAA6B,UAAU;GAC3C,MAAM,EAAE,SAAS,SAAS;GAE1B,IAAI,SAAS,YAAY,WAAW,MAAM,OAAO,OAAO,QACtD,uBAAuB,KAAA,CAAS;EAEpC;EAEA,OAAO,GAAG,eAAe,WAAW;EACpC,aAAa,OAAO,IAAI,eAAe,WAAW;CACpD,GAAG,CAAC,QAAQ,oBAAoB,CAAC;CAEjC,OAAO;EACL;EACA,wBAAwB,uBAAuB,yBAAyB,KAAA;CAC1E;AACF"}

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

@@ -0,0 +1,18 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts
+var useMessageSetKey = ({ messages }) => {
+	/**
+	* Logic to update the key of the virtuoso component when the list jumps to a new location.
+	*/
+	const [messageSetKey, setMessageSetKey] = useState(+/* @__PURE__ */ new Date());
+	const firstMessageId = useRef(void 0);
+	useEffect(() => {
+		if (!messages?.find((message) => message.id === firstMessageId.current)) setMessageSetKey(+/* @__PURE__ */ new Date());
+		firstMessageId.current = messages?.[0]?.id;
+	}, [messages]);
+	return { messageSetKey };
+};
+//#endregion
+export { useMessageSetKey };
+
+//# sourceMappingURL=useMessageSetKey.mjs.map

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageSetKey.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { LocalMessage } from 'stream-chat';\n\ntype UseMessageSetKeyParams = {\n  messages?: LocalMessage[];\n};\n\nexport const useMessageSetKey = ({ messages }: UseMessageSetKeyParams) => {\n  /**\n   * Logic to update the key of the virtuoso component when the list jumps to a new location.\n   */\n  const [messageSetKey, setMessageSetKey] = useState(+new Date());\n  const firstMessageId = useRef<string | undefined>(undefined);\n\n  useEffect(() => {\n    const continuousSet = messages?.find(\n      (message) => message.id === firstMessageId.current,\n    );\n    if (!continuousSet) {\n      setMessageSetKey(+new Date());\n    }\n    firstMessageId.current = messages?.[0]?.id;\n  }, [messages]);\n\n  return {\n    messageSetKey,\n  };\n};\n"],"mappings":";;AAOA,IAAa,oBAAoB,EAAE,eAAuC;;;;CAIxE,MAAM,CAAC,eAAe,oBAAoB,SAAS,iBAAC,IAAI,KAAK,CAAC;CAC9D,MAAM,iBAAiB,OAA2B,KAAA,CAAS;CAE3D,gBAAgB;EAId,IAAI,CAHkB,UAAU,MAC7B,YAAY,QAAQ,OAAO,eAAe,OAC7C,GAEE,iBAAiB,iBAAC,IAAI,KAAK,CAAC;EAE9B,eAAe,UAAU,WAAW,EAAE,EAAE;CAC1C,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO,EACL,cACF;AACF"}

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

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts
+function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
+	const [newMessagesNotification, setNewMessagesNotification] = useState(false);
+	const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = useState(true);
+	/**
+	* use the flag to avoid the initial "new messages" quick blink
+	*/
+	const didMount = useRef(false);
+	const lastMessageId = useRef("");
+	const atBottom = useRef(false);
+	useEffect(() => {
+		if (hasMoreNewer) {
+			setNewMessagesNotification(true);
+			return;
+		}
+		if (!messages?.length) return;
+		const lastMessage = messages[messages.length - 1];
+		const prevMessageId = lastMessageId.current;
+		lastMessageId.current = lastMessage.id || "";
+		if (lastMessage.id === prevMessageId) return;
+		if (atBottom.current) return;
+		if (lastMessage.user?.id !== currentUserId && didMount.current) setNewMessagesNotification(true);
+		didMount.current = true;
+	}, [
+		currentUserId,
+		messages,
+		hasMoreNewer
+	]);
+	return {
+		atBottom,
+		isMessageListScrolledToBottom,
+		newMessagesNotification,
+		setIsMessageListScrolledToBottom,
+		setNewMessagesNotification
+	};
+}
+//#endregion
+export { useNewMessageNotification };
+
+//# sourceMappingURL=useNewMessageNotification.mjs.map

package/dist/es/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNewMessageNotification.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { LocalMessage } from 'stream-chat';\nimport type { RenderedMessage } from '../../utils';\n\nexport function useNewMessageNotification(\n  messages: RenderedMessage[],\n  currentUserId: string | undefined,\n  hasMoreNewer?: boolean,\n) {\n  const [newMessagesNotification, setNewMessagesNotification] = useState(false);\n  const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] =\n    useState(true);\n  /**\n   * use the flag to avoid the initial \"new messages\" quick blink\n   */\n  const didMount = useRef(false);\n\n  const lastMessageId = useRef('');\n  const atBottom = useRef(false);\n\n  useEffect(() => {\n    if (hasMoreNewer) {\n      setNewMessagesNotification(true);\n      return;\n    }\n    /* handle scrolling behavior for new messages */\n    if (!messages?.length) return;\n\n    const lastMessage = messages[messages.length - 1];\n    const prevMessageId = lastMessageId.current;\n    lastMessageId.current = lastMessage.id || ''; // update last message id\n\n    /* do nothing if new messages are loaded from top(loadMore)  */\n    if (lastMessage.id === prevMessageId) return;\n\n    /* if list is already at the bottom return, followOutput will do the job */\n    if (atBottom.current) return;\n\n    /* if the new message belongs to current user scroll to bottom */\n    if ((lastMessage as LocalMessage).user?.id !== currentUserId && didMount.current) {\n      /* otherwise just show newMessage notification  */\n      setNewMessagesNotification(true);\n    }\n    didMount.current = true;\n  }, [currentUserId, messages, hasMoreNewer]);\n\n  return {\n    atBottom,\n    isMessageListScrolledToBottom,\n    newMessagesNotification,\n    setIsMessageListScrolledToBottom,\n    setNewMessagesNotification,\n  };\n}\n"],"mappings":";;AAIA,SAAgB,0BACd,UACA,eACA,cACA;CACA,MAAM,CAAC,yBAAyB,8BAA8B,SAAS,KAAK;CAC5E,MAAM,CAAC,+BAA+B,oCACpC,SAAS,IAAI;;;;CAIf,MAAM,WAAW,OAAO,KAAK;CAE7B,MAAM,gBAAgB,OAAO,EAAE;CAC/B,MAAM,WAAW,OAAO,KAAK;CAE7B,gBAAgB;EACd,IAAI,cAAc;GAChB,2BAA2B,IAAI;GAC/B;EACF;EAEA,IAAI,CAAC,UAAU,QAAQ;EAEvB,MAAM,cAAc,SAAS,SAAS,SAAS;EAC/C,MAAM,gBAAgB,cAAc;EACpC,cAAc,UAAU,YAAY,MAAM;EAG1C,IAAI,YAAY,OAAO,eAAe;EAGtC,IAAI,SAAS,SAAS;EAGtB,IAAK,YAA6B,MAAM,OAAO,iBAAiB,SAAS,SAEvE,2BAA2B,IAAI;EAEjC,SAAS,UAAU;CACrB,GAAG;EAAC;EAAe;EAAU;CAAY,CAAC;CAE1C,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}

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

@@ -0,0 +1,41 @@
+import { isLocalMessage } from "../../utils.mjs";
+import { useMemo, useRef } from "react";
+//#region src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts
+var STATUSES_EXCLUDED_FROM_PREPEND = {
+	failed: true,
+	sending: true
+};
+function usePrependedMessagesCount(messages, hasDateSeparator) {
+	const firstRealMessageIndex = hasDateSeparator ? 1 : 0;
+	const firstMessageOnFirstLoadedPage = useRef(void 0);
+	const previousFirstMessageOnFirstLoadedPage = useRef(void 0);
+	const previousNumItemsPrepended = useRef(0);
+	return useMemo(() => {
+		if (!messages || !messages.length) {
+			previousNumItemsPrepended.current = 0;
+			return 0;
+		}
+		const currentFirstMessage = messages?.[firstRealMessageIndex];
+		const noNewMessages = currentFirstMessage?.id === previousFirstMessageOnFirstLoadedPage.current?.id;
+		const currentFirstMessageStatus = isLocalMessage(currentFirstMessage) ? currentFirstMessage.status : void 0;
+		const firstMsgMovedAfterMessagesInExcludedStatus = !!(currentFirstMessageStatus && STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessageStatus]);
+		if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) return previousNumItemsPrepended.current;
+		if (!firstMessageOnFirstLoadedPage.current) firstMessageOnFirstLoadedPage.current = currentFirstMessage;
+		previousFirstMessageOnFirstLoadedPage.current = currentFirstMessage;
+		for (let prependedMessageCount = previousNumItemsPrepended.current; prependedMessageCount < messages.length; prependedMessageCount += 1) if (messages[prependedMessageCount].id === firstMessageOnFirstLoadedPage.current?.id) {
+			previousNumItemsPrepended.current = prependedMessageCount - firstRealMessageIndex;
+			return previousNumItemsPrepended.current;
+		}
+		firstMessageOnFirstLoadedPage.current = currentFirstMessage;
+		previousNumItemsPrepended.current = 0;
+		return 0;
+	}, [
+		firstRealMessageIndex,
+		messages,
+		messages?.length
+	]);
+}
+//#endregion
+export { usePrependedMessagesCount };
+
+//# sourceMappingURL=usePrependMessagesCount.mjs.map