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

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

@@ -1 +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};\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  } = params;\n\n  const { client } = useChatContext('useMessageListScrollManager');\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 (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    // 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  ]);\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":"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"}
+{"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":"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"}

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

@@ -1,231 +1,61 @@
 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 { hasMoreNewer, listElement, loadMoreScrollThreshold, messages = [], scrolledUpThreshold = 200, suppressAutoscroll = false } = 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 initialDataAutoscrollDoneRef = useRef(false);
+	const previousHasMoreNewer = useRef(hasMoreNewer);
+	const justReachedLatestMessageSet = previousHasMoreNewer.current && !hasMoreNewer;
 	const scrollToBottom = useCallback((options) => {
-		if (!listElement?.scrollTo || hasMoreNewer || isRestoringOlderAnchorRef.current || justReachedLatestMessageSet || suppressAutoscroll) return;
+		if (!listElement?.scrollTo || hasMoreNewer || suppressAutoscroll) return;
 		listElement.scrollTo({
 			behavior: options?.behavior,
 			top: listElement.scrollHeight
 		});
 		setHasNewMessages(false);
 	}, [
-		hasMoreNewer,
-		justReachedLatestMessageSet,
 		listElement,
+		hasMoreNewer,
 		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 (listElement) {
+			setWrapperRect(listElement.getBoundingClientRect());
+			if (!justReachedLatestMessageSet) scrollToBottom();
 		}
-		if (skipNextAutoScrollRef.current) {
-			skipNextAutoScrollRef.current = false;
+	}, [listElement, hasMoreNewer]);
+	useLayoutEffect(() => {
+		if (messages.length === 0) {
+			initialDataAutoscrollDoneRef.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);
-		};
+		if (listElement?.scrollTo && !initialDataAutoscrollDoneRef.current && !suppressAutoscroll) {
+			listElement.scrollTo({ top: listElement.scrollHeight });
+			setHasNewMessages(false);
+			initialDataAutoscrollDoneRef.current = true;
+		}
 	}, [
-		disableAutoScrollToBottom,
-		hasMoreNewer,
-		justReachedLatestMessageSet,
 		listElement,
 		messages.length,
-		scrollToBottom,
-		scrolledUpThreshold,
 		suppressAutoscroll
 	]);
 	const updateScrollTop = useMessageListScrollManager({
-		captureAnchor,
-		disableScrollManagement: disableScrollManagement || isRestoringOlderAnchorRef.current,
+		captureAnchor: () => null,
 		justReachedLatestMessageSet,
-		loadingMore,
 		loadMoreScrollThreshold,
 		messages,
 		onScrollBy: (scrollBy) => {
 			listElement?.scrollBy({ top: scrollBy });
 		},
 		onScrollToTop: () => {
-			if (!listElement) return;
-			listElement.scrollTop = 0;
+			listElement?.scrollTo({ top: 0 });
 		},
-		restoreAnchor,
+		restoreAnchor: () => void 0,
 		scrollContainerMeasures: () => ({
 			offsetHeight: listElement?.offsetHeight || 0,
 			scrollHeight: listElement?.scrollHeight || 0,
@@ -233,33 +63,28 @@ var useScrollLocationLogic = (params) => {
 		}),
 		scrolledUpThreshold,
 		scrollToBottom,
-		showNewMessages: () => setHasNewMessages(true)
+		showNewMessages: () => setHasNewMessages(true),
+		suppressAutoscroll
 	});
 	useLayoutEffect(() => {
-		previousHasMoreNewerRef.current = hasMoreNewer;
+		previousHasMoreNewer.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);
+			updateScrollTop(scrollTop);
 			const offsetHeight = element.offsetHeight;
-			const distanceToBottom = element.scrollHeight - (scrollTop + offsetHeight);
-			const bottomEnterThreshold = Math.max(Math.floor(scrolledUpThreshold * .6), 24);
+			const scrollHeight = element.scrollHeight;
 			const prevCloseToBottom = closeToBottom.current;
-			closeToBottom.current = prevCloseToBottom ? distanceToBottom < scrolledUpThreshold : distanceToBottom < bottomEnterThreshold;
+			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);
 		}, [
-			captureAnchor,
 			updateScrollTop,
 			closeToTop,
 			closeToBottom,

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

@@ -1 +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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"}
+{"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

@@ -1,4 +1,5 @@
-import { useChannelStateContext } from "../../../../context/ChannelStateContext.mjs";
+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";
@@ -12,8 +13,12 @@ var targetScrolledBelowVisibleContainerArea = (element, container) => {
 	const { bottom: containerBottom } = container.getBoundingClientRect();
 	return targetTop > containerBottom;
 };
-var useUnreadMessagesNotification = ({ isMessageListScrolledToBottom, listElement, showAlways, unreadCount }) => {
-	const { messages } = useChannelStateContext("UnreadMessagesNotification");
+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";
@@ -27,12 +32,12 @@ var useUnreadMessagesNotification = ({ isMessageListScrolledToBottom, listElemen
 			const [msgListPanel] = document.getElementsByClassName(MESSAGE_LIST_MAIN_PANEL_CLASS);
 			if (!msgListPanel) return;
 			const [observedTarget] = document.getElementsByClassName(UNREAD_MESSAGE_SEPARATOR_CLASS);
-			if (!observedTarget) setShow(true);
+			if (!observedTarget) setShow(unreadCount > 0);
 			return;
 		}
 		const [observedTarget] = document.getElementsByClassName(UNREAD_MESSAGE_SEPARATOR_CLASS);
 		if (!observedTarget) {
-			setShow(true);
+			setShow(unreadCount > 0);
 			return;
 		}
 		const scrolledBelowSeparator = targetScrolledAboveVisibleContainerArea(observedTarget, scrollRoot);

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

@@ -1 +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"}
+{"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"}

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

@@ -1,5 +1,6 @@
 import { isDateSeparatorMessage, isIntroMessage } from "../../utils.mjs";
 import { useCallback, useState } from "react";
+import { nsToDate } from "stream-chat";
 //#region src/components/MessageList/hooks/VirtualizedMessageList/useFloatingDateSeparator.ts
 /**
 * Returns the date to show in the floating date separator based on currently visible messages.
@@ -13,8 +14,8 @@ function getFloatingDateForFirstMessage(firstMessage, processedMessages, firstMe
 		if (isDateSeparatorMessage(item)) return item.date;
 	}
 	const created = firstMessage.created_at;
-	if (created) {
-		const d = new Date(created);
+	if (created != null) {
+		const d = nsToDate(created);
 		return isNaN(d.getTime()) ? null : d;
 	}
 	return null;
@@ -31,10 +32,10 @@ var HIDDEN_STATE = {
 	date: null,
 	visible: false
 };
-var useFloatingDateSeparator = ({ disableDateSeparator, processedMessages }) => {
+var useFloatingDateSeparator = ({ processedMessages, withDateSeparator }) => {
 	const [state, setState] = useState(HIDDEN_STATE);
 	const onItemsRendered = useCallback((rendered) => {
-		if (disableDateSeparator || processedMessages.length === 0) {
+		if (!withDateSeparator || processedMessages.length === 0) {
 			setState(HIDDEN_STATE);
 			return;
 		}
@@ -56,7 +57,7 @@ var useFloatingDateSeparator = ({ disableDateSeparator, processedMessages }) =>
 				visible
 			};
 		});
-	}, [disableDateSeparator, processedMessages]);
+	}, [withDateSeparator, processedMessages]);
 	return {
 		floatingDate: state.date,
 		onItemsRendered,

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

@@ -1 +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"}
+{"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';\nimport { nsToDate } from 'stream-chat';\n\nexport type UseFloatingDateSeparatorParams = {\n  processedMessages: RenderedMessage[];\n  withDateSeparator: boolean;\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 != null) {\n    const d = nsToDate(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  processedMessages,\n  withDateSeparator,\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 (!withDateSeparator || 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    [withDateSeparator, processedMessages],\n  );\n\n  return {\n    floatingDate: state.date,\n    onItemsRendered,\n    showFloatingDate: !!state.date && state.visible,\n  };\n};\n"],"mappings":";;;;;;;;;AAuBA,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,WAAW,MAAM;EACnB,MAAM,IAAI,SAAS,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,mBACA,wBACoE;CACpE,MAAM,CAAC,OAAO,YAAY,SAGvB,YAAY;CAEf,MAAM,kBAAkB,aACrB,aAAgC;EAC/B,IAAI,CAAC,qBAAqB,kBAAkB,WAAW,GAAG;GACxD,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,mBAAmB,iBAAiB,CACvC;CAEA,OAAO;EACL,cAAc,MAAM;EACpB;EACA,kBAAkB,CAAC,CAAC,MAAM,QAAQ,MAAM;CAC1C;AACF"}

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

@@ -3,15 +3,15 @@ import { useEffect, useState } from "react";
 //#region src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts
 var useGiphyPreview = (separateGiphyPreview) => {
 	const [giphyPreviewMessage, setGiphyPreviewMessage] = useState();
-	const { client } = useChatContext("useGiphyPreview");
+	const { client } = useChatContext();
 	useEffect(() => {
 		if (!separateGiphyPreview) return;
 		const handleEvent = (event) => {
 			const { message, user } = event;
-			if (message?.command === "giphy" && user?.id === client.userID) setGiphyPreviewMessage(void 0);
+			if (message?.command === "giphy" && user?.id === client.userId) setGiphyPreviewMessage(void 0);
 		};
-		client.on("message.new", handleEvent);
-		return () => client.off("message.new", handleEvent);
+		const subscription = client.on("message.new", handleEvent);
+		return () => subscription.unsubscribe();
 	}, [client, separateGiphyPreview]);
 	return {
 		giphyPreviewMessage,

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

@@ -1 +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"}
+{"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 { EventPayload, LocalMessage } from 'stream-chat';\n\nexport const useGiphyPreview = (separateGiphyPreview: boolean) => {\n  const [giphyPreviewMessage, setGiphyPreviewMessage] = useState<LocalMessage>();\n\n  const { client } = useChatContext();\n\n  useEffect(() => {\n    if (!separateGiphyPreview) return;\n    const handleEvent = (event: EventPayload<'message.new'>) => {\n      const { message, user } = event;\n\n      if (message?.command === 'giphy' && user?.id === client.userId) {\n        setGiphyPreviewMessage(undefined);\n      }\n    };\n\n    const subscription = client.on('message.new', handleEvent);\n    return () => subscription.unsubscribe();\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;CAElC,gBAAgB;EACd,IAAI,CAAC,sBAAsB;EAC3B,MAAM,eAAe,UAAuC;GAC1D,MAAM,EAAE,SAAS,SAAS;GAE1B,IAAI,SAAS,YAAY,WAAW,MAAM,OAAO,OAAO,QACtD,uBAAuB,KAAA,CAAS;EAEpC;EAEA,MAAM,eAAe,OAAO,GAAG,eAAe,WAAW;EACzD,aAAa,aAAa,YAAY;CACxC,GAAG,CAAC,QAAQ,oBAAoB,CAAC;CAEjC,OAAO;EACL;EACA,wBAAwB,uBAAuB,yBAAyB,KAAA;CAC1E;AACF"}

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

@@ -1,8 +1,12 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useMessagePaginator } from "../../../../hooks/useMessagePaginator.mjs";
 import { useEffect, useRef, useState } from "react";
 //#region src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts
-function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
+var messagePaginatorStateSelector = (state) => ({ hasMoreNewer: state.hasMoreHead ?? [] });
+function useNewMessageNotification(messages, currentUserId) {
 	const [newMessagesNotification, setNewMessagesNotification] = useState(false);
 	const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = useState(true);
+	const { hasMoreNewer } = useStateStore(useMessagePaginator().state, messagePaginatorStateSelector);
 	/**
 	* use the flag to avoid the initial "new messages" quick blink
 	*/