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

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

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

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

@@ -1,5 +1,11 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useMessagePaginator } from "../../../../hooks/useMessagePaginator.mjs";
 import { useCallback, useEffect, useState } from "react";
 //#region src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts
+var unreadStateSnapshotSelector = (state) => ({
+	lastReadAt: state.lastReadAt,
+	unreadCount: state.unreadCount
+});
 /**
 * Controls the logic when an `UnreadMessagesNotification` component should be shown.
 * In virtualized message list there is no notion of being scrolled below or above `UnreadMessagesSeparator`.
@@ -8,24 +14,23 @@ import { useCallback, useEffect, useState } from "react";
 * messages created later than the last read message in the channel, then the
 * `UnreadMessagesNotification` component is rendered. This is an approximate equivalent to being
 * scrolled below the `UnreadMessagesNotification` component.
-* @param lastRead
 * @param showAlways
-* @param unreadCount
 */
-var useUnreadMessagesNotificationVirtualized = ({ lastRead, showAlways, unreadCount }) => {
+var useUnreadMessagesNotificationVirtualized = ({ showAlways }) => {
 	const [show, setShow] = useState(false);
+	const { lastReadAt, unreadCount } = useStateStore(useMessagePaginator().unreadStateSnapshot, unreadStateSnapshotSelector);
 	const toggleShowUnreadMessagesNotification = useCallback((renderedMessages) => {
 		if (!unreadCount) return;
 		const firstRenderedMessage = renderedMessages[0];
 		const lastRenderedMessage = renderedMessages.slice(-1)[0];
 		if (!(firstRenderedMessage && lastRenderedMessage)) return;
-		const firstRenderedMessageTime = new Date(firstRenderedMessage.created_at ?? 0).getTime();
-		const lastRenderedMessageTime = new Date(lastRenderedMessage.created_at ?? 0).getTime();
-		const lastReadTime = new Date(lastRead ?? 0).getTime();
-		const scrolledBelowSeparator = !!lastReadTime && firstRenderedMessageTime > lastReadTime;
-		setShow(showAlways ? scrolledBelowSeparator || !!lastReadTime && lastRenderedMessageTime < lastReadTime : scrolledBelowSeparator);
+		const firstRenderedMessageTime = firstRenderedMessage.created_at ?? 0;
+		const lastRenderedMessageTime = lastRenderedMessage.created_at ?? 0;
+		const lastReadTime = lastReadAt ?? 0;
+		const scrolledBelowSeparator = lastReadAt != null && firstRenderedMessageTime > lastReadTime;
+		setShow(showAlways ? scrolledBelowSeparator || lastReadAt != null && lastRenderedMessageTime < lastReadTime : scrolledBelowSeparator);
 	}, [
-		lastRead,
+		lastReadAt,
 		showAlways,
 		unreadCount
 	]);

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

@@ -1 +1 @@
-{"version":3,"file":"useUnreadMessagesNotificationVirtualized.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { RenderedMessage } from '../../utils';\nimport type { LocalMessage } from 'stream-chat';\n\nexport type UseUnreadMessagesNotificationParams = {\n  showAlways: boolean;\n  unreadCount: number;\n  lastRead?: Date | null;\n};\n\n/**\n * Controls the logic when an `UnreadMessagesNotification` component should be shown.\n * In virtualized message list there is no notion of being scrolled below or above `UnreadMessagesSeparator`.\n * Therefore, the `UnreadMessagesNotification` component is rendered based on timestamps.\n * If the there are unread messages in the channel and the `VirtualizedMessageList` renders\n * messages created later than the last read message in the channel, then the\n * `UnreadMessagesNotification` component is rendered. This is an approximate equivalent to being\n * scrolled below the `UnreadMessagesNotification` component.\n * @param lastRead\n * @param showAlways\n * @param unreadCount\n */\nexport const useUnreadMessagesNotificationVirtualized = ({\n  lastRead,\n  showAlways,\n  unreadCount,\n}: UseUnreadMessagesNotificationParams) => {\n  const [show, setShow] = useState(false);\n\n  const toggleShowUnreadMessagesNotification = useCallback(\n    (renderedMessages: RenderedMessage[]) => {\n      if (!unreadCount) return;\n      const firstRenderedMessage = renderedMessages[0];\n      const lastRenderedMessage = renderedMessages.slice(-1)[0];\n      if (!(firstRenderedMessage && lastRenderedMessage)) return;\n\n      const firstRenderedMessageTime = new Date(\n        (firstRenderedMessage as LocalMessage).created_at ?? 0,\n      ).getTime();\n      const lastRenderedMessageTime = new Date(\n        (lastRenderedMessage as LocalMessage).created_at ?? 0,\n      ).getTime();\n      const lastReadTime = new Date(lastRead ?? 0).getTime();\n\n      const scrolledBelowSeparator =\n        !!lastReadTime && firstRenderedMessageTime > lastReadTime;\n      const scrolledAboveSeparator =\n        !!lastReadTime && lastRenderedMessageTime < lastReadTime;\n\n      setShow(\n        showAlways\n          ? scrolledBelowSeparator || scrolledAboveSeparator\n          : scrolledBelowSeparator,\n      );\n    },\n    [lastRead, showAlways, unreadCount],\n  );\n\n  useEffect(() => {\n    if (!unreadCount) setShow(false);\n  }, [unreadCount]);\n\n  return { show, toggleShowUnreadMessagesNotification };\n};\n"],"mappings":";;;;;;;;;;;;;;AAsBA,IAAa,4CAA4C,EACvD,UACA,YACA,kBACyC;CACzC,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,uCAAuC,aAC1C,qBAAwC;EACvC,IAAI,CAAC,aAAa;EAClB,MAAM,uBAAuB,iBAAiB;EAC9C,MAAM,sBAAsB,iBAAiB,MAAM,EAAE,CAAC,CAAC;EACvD,IAAI,EAAE,wBAAwB,sBAAsB;EAEpD,MAAM,2BAA2B,IAAI,KAClC,qBAAsC,cAAc,CACvD,CAAC,CAAC,QAAQ;EACV,MAAM,0BAA0B,IAAI,KACjC,oBAAqC,cAAc,CACtD,CAAC,CAAC,QAAQ;EACV,MAAM,eAAe,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ;EAErD,MAAM,yBACJ,CAAC,CAAC,gBAAgB,2BAA2B;EAI/C,QACE,aACI,0BAJJ,CAAC,CAAC,gBAAgB,0BAA0B,eAKxC,sBACN;CACF,GACA;EAAC;EAAU;EAAY;CAAW,CACpC;CAEA,gBAAgB;EACd,IAAI,CAAC,aAAa,QAAQ,KAAK;CACjC,GAAG,CAAC,WAAW,CAAC;CAEhB,OAAO;EAAE;EAAM;CAAqC;AACtD"}
+{"version":3,"file":"useUnreadMessagesNotificationVirtualized.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { RenderedMessage } from '../../utils';\nimport type { LocalMessage, UnreadSnapshotState } from 'stream-chat';\nimport { useMessagePaginator } from '../../../../hooks';\nimport { useStateStore } from '../../../../store';\n\nexport type UseUnreadMessagesNotificationParams = {\n  showAlways: boolean;\n  // unreadCount: number;\n  // lastRead?: Date | null;\n};\n\nconst unreadStateSnapshotSelector = (state: UnreadSnapshotState) => ({\n  lastReadAt: state.lastReadAt,\n  unreadCount: state.unreadCount,\n});\n\n/**\n * Controls the logic when an `UnreadMessagesNotification` component should be shown.\n * In virtualized message list there is no notion of being scrolled below or above `UnreadMessagesSeparator`.\n * Therefore, the `UnreadMessagesNotification` component is rendered based on timestamps.\n * If the there are unread messages in the channel and the `VirtualizedMessageList` renders\n * messages created later than the last read message in the channel, then the\n * `UnreadMessagesNotification` component is rendered. This is an approximate equivalent to being\n * scrolled below the `UnreadMessagesNotification` component.\n * @param showAlways\n */\nexport const useUnreadMessagesNotificationVirtualized = ({\n  showAlways,\n}: UseUnreadMessagesNotificationParams) => {\n  const [show, setShow] = useState(false);\n  const messagePaginator = useMessagePaginator();\n  const { lastReadAt, unreadCount } = useStateStore(\n    messagePaginator.unreadStateSnapshot,\n    unreadStateSnapshotSelector,\n  );\n\n  const toggleShowUnreadMessagesNotification = useCallback(\n    (renderedMessages: RenderedMessage[]) => {\n      if (!unreadCount) return;\n      const firstRenderedMessage = renderedMessages[0];\n      const lastRenderedMessage = renderedMessages.slice(-1)[0];\n      if (!(firstRenderedMessage && lastRenderedMessage)) return;\n\n      // All three are wire timestamps, directly comparable. Building `Date`s here produced NaN,\n      // so the notification never appeared.\n      const firstRenderedMessageTime =\n        (firstRenderedMessage as LocalMessage).created_at ?? 0;\n      const lastRenderedMessageTime =\n        (lastRenderedMessage as LocalMessage).created_at ?? 0;\n      const lastReadTime = lastReadAt ?? 0;\n\n      const scrolledBelowSeparator =\n        lastReadAt != null && firstRenderedMessageTime > lastReadTime;\n      const scrolledAboveSeparator =\n        lastReadAt != null && lastRenderedMessageTime < lastReadTime;\n\n      setShow(\n        showAlways\n          ? scrolledBelowSeparator || scrolledAboveSeparator\n          : scrolledBelowSeparator,\n      );\n    },\n    [lastReadAt, showAlways, unreadCount],\n  );\n\n  useEffect(() => {\n    if (!unreadCount) setShow(false);\n  }, [unreadCount]);\n\n  return { show, toggleShowUnreadMessagesNotification };\n};\n"],"mappings":";;;;AAYA,IAAM,+BAA+B,WAAgC;CACnE,YAAY,MAAM;CAClB,aAAa,MAAM;AACrB;;;;;;;;;;;AAYA,IAAa,4CAA4C,EACvD,iBACyC;CACzC,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,EAAE,YAAY,gBAAgB,cADX,oBAEvB,CAAA,CAAiB,qBACjB,2BACF;CAEA,MAAM,uCAAuC,aAC1C,qBAAwC;EACvC,IAAI,CAAC,aAAa;EAClB,MAAM,uBAAuB,iBAAiB;EAC9C,MAAM,sBAAsB,iBAAiB,MAAM,EAAE,CAAC,CAAC;EACvD,IAAI,EAAE,wBAAwB,sBAAsB;EAIpD,MAAM,2BACH,qBAAsC,cAAc;EACvD,MAAM,0BACH,oBAAqC,cAAc;EACtD,MAAM,eAAe,cAAc;EAEnC,MAAM,yBACJ,cAAc,QAAQ,2BAA2B;EAInD,QACE,aACI,0BAJJ,cAAc,QAAQ,0BAA0B,eAK5C,sBACN;CACF,GACA;EAAC;EAAY;EAAY;CAAW,CACtC;CAEA,gBAAgB;EACd,IAAI,CAAC,aAAa,QAAQ,KAAK;CACjC,GAAG,CAAC,WAAW,CAAC;CAEhB,OAAO;EAAE;EAAM;CAAqC;AACtD"}

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

@@ -0,0 +1,47 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useThreadContext } from "../../Threads/ThreadContext.mjs";
+//#region src/components/MessageList/hooks/useCanPaginateReplies.ts
+var threadSelector = ({ replyCount }) => ({ replyCount });
+var paginatorSelector = ({ items }) => ({ loadedCount: items?.length ?? 0 });
+/**
+* Whether the list this hook is rendered in has replies left to fetch by scrolling.
+*
+* Always `true` outside a thread — a channel list paginates regardless.
+*
+* It exists because of the shape of a short list: it sits within the scroll threshold of BOTH its
+* top and its bottom, so the infinite scroller asks for a page in each direction as soon as it
+* observes its own size. The reply paginator cannot refuse while it has never queried — "more
+* headward/tailward" is optimistically true then, which is right in general and wrong here. The
+* counts are the missing piece, and they live on the thread.
+*
+* Two rules, in order:
+*
+* - **Nothing loaded yet → no.** The first page is the thread's own job: `Thread.reload()` fetches
+*   it through `GET /threads/:id`, which hydrates participants, read state and a watch alongside
+*   the replies. Arming here would ask for the same page again through
+*   `GET /messages/:id/replies`. A thread with no replies at all is the same rule — there is
+*   nothing to load, and until the first reply the thread does not exist server-side.
+* - **Otherwise, only when the parent reports replies the list does not hold.** Which also covers
+*   the moment the first reply is sent: it is ingested locally and the count catches up, so there
+*   is nothing left to ask for.
+*
+* The count is the raw window length, so a message the server never acknowledged (a failed send,
+* say) counts toward it. That can only under-arm, and only for a window that is BOTH partially
+* loaded and padded with enough local-only messages to reach `reply_count` — narrow enough not to
+* pay for a per-emission scan of the list.
+*
+* Not sticky: `replyCount` projects the parent message's `reply_count`, which the server keeps
+* current over the WS, and `loadedCount` follows the paginator, so both re-evaluate on their own.
+*/
+var useCanPaginateReplies = () => {
+	const thread = useThreadContext();
+	const { replyCount } = useStateStore(thread?.state, threadSelector) ?? {};
+	const { loadedCount } = useStateStore(thread?.messagePaginator?.state, paginatorSelector) ?? { loadedCount: 0 };
+	if (!thread) return true;
+	if (loadedCount === 0) return false;
+	return (replyCount ?? 0) > loadedCount;
+};
+//#endregion
+export { useCanPaginateReplies };
+
+//# sourceMappingURL=useCanPaginateReplies.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCanPaginateReplies.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useCanPaginateReplies.ts"],"sourcesContent":["import { useThreadContext } from '../../Threads';\nimport { useStateStore } from '../../../store';\n\nimport type { LocalMessage, ThreadState } from 'stream-chat';\n\nconst threadSelector = ({ replyCount }: ThreadState) => ({ replyCount });\n\nconst paginatorSelector = ({ items }: { items: LocalMessage[] | undefined }) => ({\n  loadedCount: items?.length ?? 0,\n});\n\n/**\n * Whether the list this hook is rendered in has replies left to fetch by scrolling.\n *\n * Always `true` outside a thread — a channel list paginates regardless.\n *\n * It exists because of the shape of a short list: it sits within the scroll threshold of BOTH its\n * top and its bottom, so the infinite scroller asks for a page in each direction as soon as it\n * observes its own size. The reply paginator cannot refuse while it has never queried — \"more\n * headward/tailward\" is optimistically true then, which is right in general and wrong here. The\n * counts are the missing piece, and they live on the thread.\n *\n * Two rules, in order:\n *\n * - **Nothing loaded yet → no.** The first page is the thread's own job: `Thread.reload()` fetches\n *   it through `GET /threads/:id`, which hydrates participants, read state and a watch alongside\n *   the replies. Arming here would ask for the same page again through\n *   `GET /messages/:id/replies`. A thread with no replies at all is the same rule — there is\n *   nothing to load, and until the first reply the thread does not exist server-side.\n * - **Otherwise, only when the parent reports replies the list does not hold.** Which also covers\n *   the moment the first reply is sent: it is ingested locally and the count catches up, so there\n *   is nothing left to ask for.\n *\n * The count is the raw window length, so a message the server never acknowledged (a failed send,\n * say) counts toward it. That can only under-arm, and only for a window that is BOTH partially\n * loaded and padded with enough local-only messages to reach `reply_count` — narrow enough not to\n * pay for a per-emission scan of the list.\n *\n * Not sticky: `replyCount` projects the parent message's `reply_count`, which the server keeps\n * current over the WS, and `loadedCount` follows the paginator, so both re-evaluate on their own.\n */\nexport const useCanPaginateReplies = (): boolean => {\n  const thread = useThreadContext();\n  const { replyCount } = useStateStore(thread?.state, threadSelector) ?? {};\n  const { loadedCount } = useStateStore(\n    thread?.messagePaginator?.state,\n    paginatorSelector,\n  ) ?? { loadedCount: 0 };\n\n  if (!thread) return true;\n  if (loadedCount === 0) return false;\n  return (replyCount ?? 0) > loadedCount;\n};\n"],"mappings":";;;AAKA,IAAM,kBAAkB,EAAE,kBAA+B,EAAE,WAAW;AAEtE,IAAM,qBAAqB,EAAE,aAAoD,EAC/E,aAAa,OAAO,UAAU,EAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,8BAAuC;CAClD,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,eAAe,cAAc,QAAQ,OAAO,cAAc,KAAK,CAAC;CACxE,MAAM,EAAE,gBAAgB,cACtB,QAAQ,kBAAkB,OAC1B,iBACF,KAAK,EAAE,aAAa,EAAE;CAEtB,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,gBAAgB,GAAG,OAAO;CAC9B,QAAQ,cAAc,KAAK;AAC7B"}

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

@@ -1,42 +1,10 @@
-import { useCallback, useEffect, useState } from "react";
+import { useReceiptsByMessageId } from "./useReceiptsByMessageId.mjs";
 //#region src/components/MessageList/hooks/useLastDeliveredData.ts
-var useLastDeliveredData = (props) => {
-	const { channel, lastOwnMessage, messages, returnAllReadData } = props;
-	const calculateForAll = useCallback(() => messages.reduce((acc, msg) => {
-		acc[msg.id] = channel.messageReceiptsTracker.deliveredForMessage({
-			msgId: msg.id,
-			timestampMs: msg.created_at.getTime()
-		});
-		return acc;
-	}, {}), [channel, messages]);
-	const calculateForLastOwn = useCallback(() => {
-		if (!lastOwnMessage) return {};
-		return { [lastOwnMessage.id]: channel.messageReceiptsTracker.deliveredForMessage({
-			msgId: lastOwnMessage.id,
-			timestampMs: lastOwnMessage.created_at.getTime()
-		}) };
-	}, [channel, lastOwnMessage]);
-	const [deliveredTo, setDeliveredTo] = useState(returnAllReadData ? calculateForAll : calculateForLastOwn);
-	useEffect(() => {
-		if (!returnAllReadData) return;
-		setDeliveredTo(calculateForAll);
-		return channel.on("message.delivered", () => setDeliveredTo(calculateForAll)).unsubscribe;
-	}, [
-		channel,
-		calculateForAll,
-		returnAllReadData
-	]);
-	useEffect(() => {
-		if (returnAllReadData) return;
-		else setDeliveredTo(calculateForLastOwn);
-		return channel.on("message.delivered", () => setDeliveredTo(calculateForLastOwn)).unsubscribe;
-	}, [
-		channel,
-		calculateForLastOwn,
-		returnAllReadData
-	]);
-	return deliveredTo;
-};
+/** Who has received each rendered message — see {@link useReceiptsByMessageId}. */
+var useLastDeliveredData = (props) => useReceiptsByMessageId({
+	...props,
+	kind: "delivered"
+});
 //#endregion
 export { useLastDeliveredData };
 

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

@@ -1 +1 @@
-{"version":3,"file":"useLastDeliveredData.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useLastDeliveredData.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { Channel, LocalMessage, UserResponse } from 'stream-chat';\n\ntype UseLastDeliveredDataParams = {\n  channel: Channel;\n  messages: LocalMessage[];\n  returnAllReadData: boolean;\n  lastOwnMessage?: LocalMessage;\n};\n\nexport const useLastDeliveredData = (\n  props: UseLastDeliveredDataParams,\n): Record<string, UserResponse[]> => {\n  const { channel, lastOwnMessage, messages, returnAllReadData } = props;\n\n  const calculateForAll = useCallback(\n    () =>\n      messages.reduce(\n        (acc, msg) => {\n          acc[msg.id] = channel.messageReceiptsTracker.deliveredForMessage({\n            msgId: msg.id,\n            timestampMs: msg.created_at.getTime(),\n          });\n          return acc;\n        },\n        {} as Record<string, UserResponse[]>,\n      ),\n    [channel, messages],\n  );\n\n  const calculateForLastOwn = useCallback(() => {\n    if (!lastOwnMessage) return {};\n    return {\n      [lastOwnMessage.id]: channel.messageReceiptsTracker.deliveredForMessage({\n        msgId: lastOwnMessage.id,\n        timestampMs: lastOwnMessage.created_at.getTime(),\n      }),\n    };\n  }, [channel, lastOwnMessage]);\n\n  const [deliveredTo, setDeliveredTo] = useState<Record<string, UserResponse[]>>(\n    returnAllReadData ? calculateForAll : calculateForLastOwn,\n  );\n\n  useEffect(() => {\n    if (!returnAllReadData) return;\n    setDeliveredTo(calculateForAll);\n    return channel.on('message.delivered', () => setDeliveredTo(calculateForAll))\n      .unsubscribe;\n  }, [channel, calculateForAll, returnAllReadData]);\n\n  useEffect(() => {\n    if (returnAllReadData) return;\n    else setDeliveredTo(calculateForLastOwn);\n    return channel.on('message.delivered', () => setDeliveredTo(calculateForLastOwn))\n      .unsubscribe;\n  }, [channel, calculateForLastOwn, returnAllReadData]);\n\n  return deliveredTo;\n};\n"],"mappings":";;AAUA,IAAa,wBACX,UACmC;CACnC,MAAM,EAAE,SAAS,gBAAgB,UAAU,sBAAsB;CAEjE,MAAM,kBAAkB,kBAEpB,SAAS,QACN,KAAK,QAAQ;EACZ,IAAI,IAAI,MAAM,QAAQ,uBAAuB,oBAAoB;GAC/D,OAAO,IAAI;GACX,aAAa,IAAI,WAAW,QAAQ;EACtC,CAAC;EACD,OAAO;CACT,GACA,CAAC,CACH,GACF,CAAC,SAAS,QAAQ,CACpB;CAEA,MAAM,sBAAsB,kBAAkB;EAC5C,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAC7B,OAAO,GACJ,eAAe,KAAK,QAAQ,uBAAuB,oBAAoB;GACtE,OAAO,eAAe;GACtB,aAAa,eAAe,WAAW,QAAQ;EACjD,CAAC,EACH;CACF,GAAG,CAAC,SAAS,cAAc,CAAC;CAE5B,MAAM,CAAC,aAAa,kBAAkB,SACpC,oBAAoB,kBAAkB,mBACxC;CAEA,gBAAgB;EACd,IAAI,CAAC,mBAAmB;EACxB,eAAe,eAAe;EAC9B,OAAO,QAAQ,GAAG,2BAA2B,eAAe,eAAe,CAAC,CAAC,CAC1E;CACL,GAAG;EAAC;EAAS;EAAiB;CAAiB,CAAC;CAEhD,gBAAgB;EACd,IAAI,mBAAmB;OAClB,eAAe,mBAAmB;EACvC,OAAO,QAAQ,GAAG,2BAA2B,eAAe,mBAAmB,CAAC,CAAC,CAC9E;CACL,GAAG;EAAC;EAAS;EAAqB;CAAiB,CAAC;CAEpD,OAAO;AACT"}
+{"version":3,"file":"useLastDeliveredData.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useLastDeliveredData.ts"],"sourcesContent":["import type { Channel, LocalMessage, UserResponse } from 'stream-chat';\n\nimport { useReceiptsByMessageId } from './useReceiptsByMessageId';\n\ntype UseLastDeliveredDataParams = {\n  channel: Channel;\n  messages: LocalMessage[];\n  returnAllReadData: boolean;\n  lastOwnMessage?: LocalMessage;\n};\n\n/** Who has received each rendered message — see {@link useReceiptsByMessageId}. */\nexport const useLastDeliveredData = (\n  props: UseLastDeliveredDataParams,\n): Record<string, UserResponse[]> =>\n  useReceiptsByMessageId({ ...props, kind: 'delivered' });\n"],"mappings":";;;AAYA,IAAa,wBACX,UAEA,uBAAuB;CAAE,GAAG;CAAO,MAAM;AAAY,CAAC"}

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

@@ -1,27 +1,10 @@
-import { useMemo } from "react";
+import { useReceiptsByMessageId } from "./useReceiptsByMessageId.mjs";
 //#region src/components/MessageList/hooks/useLastReadData.ts
-var useLastReadData = (props) => {
-	const { channel, lastOwnMessage, messages, returnAllReadData } = props;
-	return useMemo(() => {
-		if (returnAllReadData) return messages.reduce((acc, msg) => {
-			acc[msg.id] = channel.messageReceiptsTracker.readersForMessage({
-				msgId: msg.id,
-				timestampMs: msg.created_at.getTime()
-			});
-			return acc;
-		}, {});
-		if (!lastOwnMessage) return {};
-		return { [lastOwnMessage.id]: channel.messageReceiptsTracker.readersForMessage({
-			msgId: lastOwnMessage.id,
-			timestampMs: lastOwnMessage.created_at.getTime()
-		}) };
-	}, [
-		channel,
-		lastOwnMessage,
-		messages,
-		returnAllReadData
-	]);
-};
+/** Who has read each rendered message — see {@link useReceiptsByMessageId}. */
+var useLastReadData = (props) => useReceiptsByMessageId({
+	...props,
+	kind: "read"
+});
 //#endregion
 export { useLastReadData };
 

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

@@ -1 +1 @@
-{"version":3,"file":"useLastReadData.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useLastReadData.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Channel, LocalMessage, UserResponse } from 'stream-chat';\n\ntype UseLastReadDataParams = {\n  channel: Channel;\n  messages: LocalMessage[];\n  returnAllReadData: boolean;\n  lastOwnMessage?: LocalMessage;\n};\n\nexport const useLastReadData = (props: UseLastReadDataParams) => {\n  const { channel, lastOwnMessage, messages, returnAllReadData } = props;\n\n  return useMemo(() => {\n    if (returnAllReadData) {\n      return messages.reduce(\n        (acc, msg) => {\n          acc[msg.id] = channel.messageReceiptsTracker.readersForMessage({\n            msgId: msg.id,\n            timestampMs: msg.created_at.getTime(),\n          });\n          return acc;\n        },\n        {} as Record<string, UserResponse[]>,\n      );\n    }\n\n    if (!lastOwnMessage) return {};\n    return {\n      [lastOwnMessage.id]: channel.messageReceiptsTracker.readersForMessage({\n        msgId: lastOwnMessage.id,\n        timestampMs: lastOwnMessage.created_at.getTime(),\n      }),\n    };\n  }, [channel, lastOwnMessage, messages, returnAllReadData]);\n};\n"],"mappings":";;AAUA,IAAa,mBAAmB,UAAiC;CAC/D,MAAM,EAAE,SAAS,gBAAgB,UAAU,sBAAsB;CAEjE,OAAO,cAAc;EACnB,IAAI,mBACF,OAAO,SAAS,QACb,KAAK,QAAQ;GACZ,IAAI,IAAI,MAAM,QAAQ,uBAAuB,kBAAkB;IAC7D,OAAO,IAAI;IACX,aAAa,IAAI,WAAW,QAAQ;GACtC,CAAC;GACD,OAAO;EACT,GACA,CAAC,CACH;EAGF,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAC7B,OAAO,GACJ,eAAe,KAAK,QAAQ,uBAAuB,kBAAkB;GACpE,OAAO,eAAe;GACtB,aAAa,eAAe,WAAW,QAAQ;EACjD,CAAC,EACH;CACF,GAAG;EAAC;EAAS;EAAgB;EAAU;CAAiB,CAAC;AAC3D"}
+{"version":3,"file":"useLastReadData.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useLastReadData.ts"],"sourcesContent":["import type { Channel, LocalMessage, UserResponse } from 'stream-chat';\n\nimport { useReceiptsByMessageId } from './useReceiptsByMessageId';\n\ntype UseLastReadDataParams = {\n  channel: Channel;\n  messages: LocalMessage[];\n  returnAllReadData: boolean;\n  lastOwnMessage?: LocalMessage;\n};\n\n/** Who has read each rendered message — see {@link useReceiptsByMessageId}. */\nexport const useLastReadData = (\n  props: UseLastReadDataParams,\n): Record<string, UserResponse[]> => useReceiptsByMessageId({ ...props, kind: 'read' });\n"],"mappings":";;;AAYA,IAAa,mBACX,UACmC,uBAAuB;CAAE,GAAG;CAAO,MAAM;AAAO,CAAC"}

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

@@ -1,74 +1,104 @@
-import { useChannelActionContext } from "../../../context/ChannelActionContext.mjs";
-import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../../context/ChatContext.mjs";
-import { getChannelConfig } from "../../../utils/getChannelConfig.mjs";
-import { useEffect } from "react";
+import { useThreadContext } from "../../Threads/ThreadContext.mjs";
+import { useMessagePaginator } from "../../../hooks/useMessagePaginator.mjs";
+import { useChannel } from "../../../context/useChannel.mjs";
+import { useCallback, useEffect } from "react";
+import { nowNs } from "stream-chat";
 //#region src/components/MessageList/hooks/useMarkRead.ts
+var readEventsSelector = ({ readEvents }) => ({
+	localUnreadCountEnabled: readEvents.localUnreadCountEnabled,
+	readEventsEnabled: readEvents.enabled
+});
 var hasReadLastMessage = (channel, userId) => {
-	return channel.state.latestMessages.slice(-1)[0]?.id === channel.state.read[userId]?.last_read_message_id;
+	return channel.messagePaginator.headmostItem?.id === channel.state.read[userId]?.last_read_message_id;
 };
 /**
-* Takes care of marking a channel read. The channel is read only if all the following applies:
-* 1. the message list is not rendered in a thread
-* 2. the message list is scrolled to the bottom
-* 3. the channel was not marked unread by the user
-* @param isMessageListScrolledToBottom
-* @param messageListIsThread
-* @param wasChannelMarkedUnread
+* Marks the active message collection (channel or thread) read when the user is caught up at the
+* bottom, and keeps the paginator's unread snapshot (the "Unread messages" separator / "N new"
+* banner) in sync.
 */
-var useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread, wasMarkedUnread }) => {
-	const { client } = useChatContext("useMarkRead");
-	const { markRead, setChannelUnreadUiState } = useChannelActionContext("useMarkRead");
-	const { channel } = useChannelStateContext("useMarkRead");
+var useMarkRead = ({ hasMoreNewer, isMessageListScrolledToBottom, messageListIsThread }) => {
+	const { client } = useChatContext();
+	const channel = useChannel();
+	const { localUnreadCountEnabled, readEventsEnabled } = useStateStore(channel.configState, readEventsSelector);
+	const thread = useThreadContext();
+	const messagePaginator = useMessagePaginator();
+	const isThreadList = !!thread || messageListIsThread;
+	const markRead = useCallback(() => {
+		client.messageDeliveryReporter.throttledMarkRead(thread ?? channel);
+	}, [
+		channel,
+		client.messageDeliveryReporter,
+		thread
+	]);
+	const resetUnreadSnapshot = useCallback(() => {
+		const loadedItems = messagePaginator.state.getLatestValue().items ?? [];
+		const previous = messagePaginator.unreadStateSnapshot.getLatestValue();
+		messagePaginator.unreadStateSnapshot.next({
+			...previous,
+			firstUnreadMessageId: null,
+			lastReadAt: nowNs(),
+			lastReadMessageId: loadedItems[loadedItems.length - 1]?.id ?? previous.lastReadMessageId,
+			unreadCount: 0
+		});
+	}, [messagePaginator]);
+	useEffect(() => {
+		const pushViewingLive = () => messagePaginator.setViewingLive(!document.hidden && isMessageListScrolledToBottom && !hasMoreNewer);
+		pushViewingLive();
+		document.addEventListener("visibilitychange", pushViewingLive);
+		return () => {
+			document.removeEventListener("visibilitychange", pushViewingLive);
+			messagePaginator.setViewingLive(false);
+		};
+	}, [
+		hasMoreNewer,
+		isMessageListScrolledToBottom,
+		messagePaginator
+	]);
 	useEffect(() => {
-		if (!(getChannelConfig(channel)?.read_events || client.options.isLocalUnreadCountEnabled)) return;
-		const shouldMarkRead = () => !document.hidden && !wasMarkedUnread && !messageListIsThread && isMessageListScrolledToBottom && client.user?.id && !hasReadLastMessage(channel, client.user.id);
+		if (!readEventsEnabled && !localUnreadCountEnabled) return;
+		const shouldMarkRead = () => {
+			const wasMarkedUnread = !!messagePaginator.unreadStateSnapshot.getLatestValue().firstUnreadMessageId;
+			const hasUnreadMessages = isThreadList ? (thread?.ownUnreadCount ?? 0) > 0 : !!client.user?.id && !hasReadLastMessage(channel, client.user.id);
+			return messagePaginator.isViewingLive && !wasMarkedUnread && hasUnreadMessages;
+		};
 		const onVisibilityChange = () => {
-			if (shouldMarkRead()) markRead();
+			if (shouldMarkRead()) {
+				resetUnreadSnapshot();
+				markRead();
+			}
 		};
 		const handleMessageNew = (event) => {
-			if (!(!event.message?.parent_id || event.message?.show_in_channel)) return;
-			if (!isMessageListScrolledToBottom || wasMarkedUnread || document.hidden) setChannelUnreadUiState((prev) => {
-				const previousUnreadCount = prev?.unread_messages ?? 0;
-				const previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
-				return {
-					...prev || {},
-					last_read: prev?.last_read ?? (previousUnreadCount === 0 && previousLastMessage?.created_at ? new Date(previousLastMessage.created_at) : /* @__PURE__ */ new Date(0)),
-					unread_messages: previousUnreadCount + 1
-				};
-			});
-			else if (shouldMarkRead()) markRead();
+			const threadUpdated = !!thread && event.message?.parent_id === thread.id;
+			const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
+			if (!(isThreadList ? threadUpdated : mainChannelUpdated)) return;
+			if (shouldMarkRead()) {
+				resetUnreadSnapshot();
+				markRead();
+			}
 		};
-		channel.on("message.new", handleMessageNew);
+		const subscription = channel.on("message.new", handleMessageNew);
 		document.addEventListener("visibilitychange", onVisibilityChange);
 		if (shouldMarkRead()) markRead();
 		return () => {
-			channel.off("message.new", handleMessageNew);
+			subscription.unsubscribe();
 			document.removeEventListener("visibilitychange", onVisibilityChange);
 		};
 	}, [
 		channel,
 		client,
+		hasMoreNewer,
 		isMessageListScrolledToBottom,
 		markRead,
-		messageListIsThread,
-		setChannelUnreadUiState,
-		wasMarkedUnread
+		resetUnreadSnapshot,
+		isThreadList,
+		localUnreadCountEnabled,
+		messagePaginator,
+		readEventsEnabled,
+		thread
 	]);
 };
-function getPreviousLastMessage(messages, newMessage) {
-	if (!newMessage) return;
-	let previousLastMessage;
-	for (let i = messages.length - 1; i >= 0; i--) {
-		const msg = messages[i];
-		if (!msg?.id) break;
-		if (msg.id !== newMessage.id) {
-			previousLastMessage = msg;
-			break;
-		}
-	}
-	return previousLastMessage;
-}
 //#endregion
 export { useMarkRead };
 

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

@@ -1 +1 @@
-{"version":3,"file":"useMarkRead.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useMarkRead.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport {\n  useChannelActionContext,\n  useChannelStateContext,\n  useChatContext,\n} from '../../../context';\nimport type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';\nimport { getChannelConfig } from '../../../utils/getChannelConfig';\n\nconst hasReadLastMessage = (channel: Channel, userId: string) => {\n  const latestMessageIdInChannel = channel.state.latestMessages.slice(-1)[0]?.id;\n  const lastReadMessageIdServer = channel.state.read[userId]?.last_read_message_id;\n  return latestMessageIdInChannel === lastReadMessageIdServer;\n};\n\ntype UseMarkReadParams = {\n  isMessageListScrolledToBottom: boolean;\n  messageListIsThread: boolean;\n  wasMarkedUnread?: boolean;\n};\n\n/**\n * Takes care of marking a channel read. The channel is read only if all the following applies:\n * 1. the message list is not rendered in a thread\n * 2. the message list is scrolled to the bottom\n * 3. the channel was not marked unread by the user\n * @param isMessageListScrolledToBottom\n * @param messageListIsThread\n * @param wasChannelMarkedUnread\n */\nexport const useMarkRead = ({\n  isMessageListScrolledToBottom,\n  messageListIsThread,\n  wasMarkedUnread,\n}: UseMarkReadParams) => {\n  const { client } = useChatContext('useMarkRead');\n  const { markRead, setChannelUnreadUiState } = useChannelActionContext('useMarkRead');\n  const { channel } = useChannelStateContext('useMarkRead');\n\n  useEffect(() => {\n    const unreadNotificationSupported =\n      getChannelConfig(channel)?.read_events || client.options.isLocalUnreadCountEnabled;\n\n    if (!unreadNotificationSupported) return;\n\n    const shouldMarkRead = () =>\n      !document.hidden &&\n      !wasMarkedUnread &&\n      !messageListIsThread &&\n      isMessageListScrolledToBottom &&\n      client.user?.id &&\n      !hasReadLastMessage(channel, client.user.id);\n\n    const onVisibilityChange = () => {\n      if (shouldMarkRead()) markRead();\n    };\n\n    const handleMessageNew = (event: Event) => {\n      const mainChannelUpdated =\n        !event.message?.parent_id || event.message?.show_in_channel;\n\n      // Thread replies that are not shown in the channel must not affect the\n      // main channel's unread UI state (count / notification).\n      if (!mainChannelUpdated) return;\n\n      if (!isMessageListScrolledToBottom || wasMarkedUnread || document.hidden) {\n        setChannelUnreadUiState((prev) => {\n          const previousUnreadCount = prev?.unread_messages ?? 0;\n          const previousLastMessage = getPreviousLastMessage(\n            channel.state.messages,\n            event.message,\n          );\n          return {\n            ...(prev || {}),\n            last_read:\n              prev?.last_read ??\n              (previousUnreadCount === 0 && previousLastMessage?.created_at\n                ? new Date(previousLastMessage.created_at)\n                : new Date(0)), // not having information about the last read message means the whole channel is unread,\n            unread_messages: previousUnreadCount + 1,\n          };\n        });\n      } else if (shouldMarkRead()) {\n        markRead();\n      }\n    };\n\n    channel.on('message.new', handleMessageNew);\n    document.addEventListener('visibilitychange', onVisibilityChange);\n\n    if (shouldMarkRead()) {\n      markRead();\n    }\n\n    return () => {\n      channel.off('message.new', handleMessageNew);\n      document.removeEventListener('visibilitychange', onVisibilityChange);\n    };\n  }, [\n    channel,\n    client,\n    isMessageListScrolledToBottom,\n    markRead,\n    messageListIsThread,\n    setChannelUnreadUiState,\n    wasMarkedUnread,\n  ]);\n};\n\nfunction getPreviousLastMessage(messages: LocalMessage[], newMessage?: MessageResponse) {\n  if (!newMessage) return;\n  let previousLastMessage;\n  for (let i = messages.length - 1; i >= 0; i--) {\n    const msg = messages[i];\n    if (!msg?.id) break;\n    if (msg.id !== newMessage.id) {\n      previousLastMessage = msg;\n      break;\n    }\n  }\n  return previousLastMessage;\n}\n"],"mappings":";;;;;;AASA,IAAM,sBAAsB,SAAkB,WAAmB;CAG/D,OAFiC,QAAQ,MAAM,eAAe,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,OAC5C,QAAQ,MAAM,KAAK,OAAO,EAAE;AAE9D;;;;;;;;;;AAiBA,IAAa,eAAe,EAC1B,+BACA,qBACA,sBACuB;CACvB,MAAM,EAAE,WAAW,eAAe,aAAa;CAC/C,MAAM,EAAE,UAAU,4BAA4B,wBAAwB,aAAa;CACnF,MAAM,EAAE,YAAY,uBAAuB,aAAa;CAExD,gBAAgB;EAId,IAAI,EAFF,iBAAiB,OAAO,CAAC,EAAE,eAAe,OAAO,QAAQ,4BAEzB;EAElC,MAAM,uBACJ,CAAC,SAAS,UACV,CAAC,mBACD,CAAC,uBACD,iCACA,OAAO,MAAM,MACb,CAAC,mBAAmB,SAAS,OAAO,KAAK,EAAE;EAE7C,MAAM,2BAA2B;GAC/B,IAAI,eAAe,GAAG,SAAS;EACjC;EAEA,MAAM,oBAAoB,UAAiB;GAMzC,IAAI,EAJF,CAAC,MAAM,SAAS,aAAa,MAAM,SAAS,kBAIrB;GAEzB,IAAI,CAAC,iCAAiC,mBAAmB,SAAS,QAChE,yBAAyB,SAAS;IAChC,MAAM,sBAAsB,MAAM,mBAAmB;IACrD,MAAM,sBAAsB,uBAC1B,QAAQ,MAAM,UACd,MAAM,OACR;IACA,OAAO;KACL,GAAI,QAAQ,CAAC;KACb,WACE,MAAM,cACL,wBAAwB,KAAK,qBAAqB,aAC/C,IAAI,KAAK,oBAAoB,UAAU,oBACvC,IAAI,KAAK,CAAC;KAChB,iBAAiB,sBAAsB;IACzC;GACF,CAAC;QACI,IAAI,eAAe,GACxB,SAAS;EAEb;EAEA,QAAQ,GAAG,eAAe,gBAAgB;EAC1C,SAAS,iBAAiB,oBAAoB,kBAAkB;EAEhE,IAAI,eAAe,GACjB,SAAS;EAGX,aAAa;GACX,QAAQ,IAAI,eAAe,gBAAgB;GAC3C,SAAS,oBAAoB,oBAAoB,kBAAkB;EACrE;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH;AAEA,SAAS,uBAAuB,UAA0B,YAA8B;CACtF,IAAI,CAAC,YAAY;CACjB,IAAI;CACJ,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,KAAK,GAAG,KAAK;EAC7C,MAAM,MAAM,SAAS;EACrB,IAAI,CAAC,KAAK,IAAI;EACd,IAAI,IAAI,OAAO,WAAW,IAAI;GAC5B,sBAAsB;GACtB;EACF;CACF;CACA,OAAO;AACT"}
+{"version":3,"file":"useMarkRead.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useMarkRead.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\nimport { useChannel, useChatContext } from '../../../context';\nimport { useMessagePaginator } from '../../../hooks';\nimport { useStateStore } from '../../../store';\nimport { useThreadContext } from '../../Threads';\nimport type { Channel, ChannelConfig, EventPayload } from 'stream-chat';\nimport { nowNs } from 'stream-chat';\n\nconst readEventsSelector = ({ readEvents }: ChannelConfig) => ({\n  localUnreadCountEnabled: readEvents.localUnreadCountEnabled,\n  readEventsEnabled: readEvents.enabled,\n});\n\nconst hasReadLastMessage = (channel: Channel, userId: string) => {\n  const latestMessageIdInChannel = channel.messagePaginator.headmostItem?.id;\n  const lastReadMessageIdServer = channel.state.read[userId]?.last_read_message_id;\n  return latestMessageIdInChannel === lastReadMessageIdServer;\n};\n\ntype UseMarkReadParams = {\n  hasMoreNewer: boolean;\n  isMessageListScrolledToBottom: boolean;\n  // todo: remove and infer only from useThreadContext return value - if undefined, not a thread list\n  messageListIsThread: boolean;\n};\n\n/**\n * Marks the active message collection (channel or thread) read when the user is caught up at the\n * bottom, and keeps the paginator's unread snapshot (the \"Unread messages\" separator / \"N new\"\n * banner) in sync.\n */\nexport const useMarkRead = ({\n  hasMoreNewer,\n  isMessageListScrolledToBottom,\n  messageListIsThread,\n}: UseMarkReadParams) => {\n  const { client } = useChatContext();\n  const channel = useChannel();\n  const { localUnreadCountEnabled, readEventsEnabled } = useStateStore(\n    channel.configState,\n    readEventsSelector,\n  );\n  const thread = useThreadContext();\n  const messagePaginator = useMessagePaginator();\n\n  const isThreadList = !!thread || messageListIsThread;\n\n  const markRead = useCallback(() => {\n    client.messageDeliveryReporter.throttledMarkRead(thread ?? channel);\n  }, [channel, client.messageDeliveryReporter, thread]);\n\n  // Advance the frozen unread snapshot the separator/banner render from. The LLC never clears it on\n  // `message.read`, so on a genuine catch-up we clear it ourselves; deliberately NOT called on the\n  // initial open (see the effect below) so the separator persists where the user left off.\n  const resetUnreadSnapshot = useCallback(() => {\n    const loadedItems = messagePaginator.state.getLatestValue().items ?? [];\n    const previous = messagePaginator.unreadStateSnapshot.getLatestValue();\n    messagePaginator.unreadStateSnapshot.next({\n      ...previous,\n      firstUnreadMessageId: null,\n      lastReadAt: nowNs(),\n      lastReadMessageId:\n        loadedItems[loadedItems.length - 1]?.id ?? previous.lastReadMessageId,\n      unreadCount: 0,\n    });\n  }, [messagePaginator]);\n\n  useEffect(() => {\n    // Tell the state layer whether the user is actively viewing the latest messages (tab\n    // foregrounded AND at the bottom AND no newer messages beyond the loaded window). While live,\n    // the LLC skips the own-unread bump on `message.new` so the separator/banner never flash.\n    const pushViewingLive = () =>\n      messagePaginator.setViewingLive(\n        !document.hidden && isMessageListScrolledToBottom && !hasMoreNewer,\n      );\n\n    pushViewingLive();\n    document.addEventListener('visibilitychange', pushViewingLive);\n\n    return () => {\n      document.removeEventListener('visibilitychange', pushViewingLive);\n      messagePaginator.setViewingLive(false);\n    };\n  }, [hasMoreNewer, isMessageListScrolledToBottom, messagePaginator]);\n\n  useEffect(() => {\n    // No read events means no server-side read state - but a channel counting unread locally still\n    // needs the catch-up, and the LLC resets it locally rather than requesting.\n    if (!readEventsEnabled && !localUnreadCountEnabled) return;\n    const shouldMarkRead = () => {\n      const wasMarkedUnread =\n        !!messagePaginator.unreadStateSnapshot.getLatestValue().firstUnreadMessageId;\n\n      const hasUnreadMessages = isThreadList\n        ? (thread?.ownUnreadCount ?? 0) > 0\n        : !!client.user?.id && !hasReadLastMessage(channel, client.user.id);\n\n      return messagePaginator.isViewingLive && !wasMarkedUnread && hasUnreadMessages;\n    };\n\n    const onVisibilityChange = () => {\n      if (shouldMarkRead()) {\n        resetUnreadSnapshot();\n        markRead();\n      }\n    };\n\n    const handleMessageNew = (event: EventPayload<'message.new'>) => {\n      const threadUpdated = !!thread && event.message?.parent_id === thread.id;\n      const mainChannelUpdated =\n        !event.message?.parent_id || event.message?.show_in_channel;\n      const activeCollectionUpdated = isThreadList ? threadUpdated : mainChannelUpdated;\n      if (!activeCollectionUpdated) return;\n\n      if (shouldMarkRead()) {\n        resetUnreadSnapshot();\n        markRead();\n      }\n    };\n\n    const subscription = channel.on('message.new', handleMessageNew);\n    document.addEventListener('visibilitychange', onVisibilityChange);\n\n    if (shouldMarkRead()) {\n      markRead();\n    }\n\n    return () => {\n      subscription.unsubscribe();\n      document.removeEventListener('visibilitychange', onVisibilityChange);\n    };\n  }, [\n    channel,\n    client,\n    hasMoreNewer,\n    isMessageListScrolledToBottom,\n    markRead,\n    resetUnreadSnapshot,\n    isThreadList,\n    localUnreadCountEnabled,\n    messagePaginator,\n    readEventsEnabled,\n    thread,\n  ]);\n};\n"],"mappings":";;;;;;;;AAQA,IAAM,sBAAsB,EAAE,kBAAiC;CAC7D,yBAAyB,WAAW;CACpC,mBAAmB,WAAW;AAChC;AAEA,IAAM,sBAAsB,SAAkB,WAAmB;CAG/D,OAFiC,QAAQ,iBAAiB,cAAc,OACxC,QAAQ,MAAM,KAAK,OAAO,EAAE;AAE9D;;;;;;AAcA,IAAa,eAAe,EAC1B,cACA,+BACA,0BACuB;CACvB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,yBAAyB,sBAAsB,cACrD,QAAQ,aACR,kBACF;CACA,MAAM,SAAS,iBAAiB;CAChC,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,eAAe,CAAC,CAAC,UAAU;CAEjC,MAAM,WAAW,kBAAkB;EACjC,OAAO,wBAAwB,kBAAkB,UAAU,OAAO;CACpE,GAAG;EAAC;EAAS,OAAO;EAAyB;CAAM,CAAC;CAKpD,MAAM,sBAAsB,kBAAkB;EAC5C,MAAM,cAAc,iBAAiB,MAAM,eAAe,CAAC,CAAC,SAAS,CAAC;EACtE,MAAM,WAAW,iBAAiB,oBAAoB,eAAe;EACrE,iBAAiB,oBAAoB,KAAK;GACxC,GAAG;GACH,sBAAsB;GACtB,YAAY,MAAM;GAClB,mBACE,YAAY,YAAY,SAAS,EAAE,EAAE,MAAM,SAAS;GACtD,aAAa;EACf,CAAC;CACH,GAAG,CAAC,gBAAgB,CAAC;CAErB,gBAAgB;EAId,MAAM,wBACJ,iBAAiB,eACf,CAAC,SAAS,UAAU,iCAAiC,CAAC,YACxD;EAEF,gBAAgB;EAChB,SAAS,iBAAiB,oBAAoB,eAAe;EAE7D,aAAa;GACX,SAAS,oBAAoB,oBAAoB,eAAe;GAChE,iBAAiB,eAAe,KAAK;EACvC;CACF,GAAG;EAAC;EAAc;EAA+B;CAAgB,CAAC;CAElE,gBAAgB;EAGd,IAAI,CAAC,qBAAqB,CAAC,yBAAyB;EACpD,MAAM,uBAAuB;GAC3B,MAAM,kBACJ,CAAC,CAAC,iBAAiB,oBAAoB,eAAe,CAAC,CAAC;GAE1D,MAAM,oBAAoB,gBACrB,QAAQ,kBAAkB,KAAK,IAChC,CAAC,CAAC,OAAO,MAAM,MAAM,CAAC,mBAAmB,SAAS,OAAO,KAAK,EAAE;GAEpE,OAAO,iBAAiB,iBAAiB,CAAC,mBAAmB;EAC/D;EAEA,MAAM,2BAA2B;GAC/B,IAAI,eAAe,GAAG;IACpB,oBAAoB;IACpB,SAAS;GACX;EACF;EAEA,MAAM,oBAAoB,UAAuC;GAC/D,MAAM,gBAAgB,CAAC,CAAC,UAAU,MAAM,SAAS,cAAc,OAAO;GACtE,MAAM,qBACJ,CAAC,MAAM,SAAS,aAAa,MAAM,SAAS;GAE9C,IAAI,EAD4B,eAAe,gBAAgB,qBACjC;GAE9B,IAAI,eAAe,GAAG;IACpB,oBAAoB;IACpB,SAAS;GACX;EACF;EAEA,MAAM,eAAe,QAAQ,GAAG,eAAe,gBAAgB;EAC/D,SAAS,iBAAiB,oBAAoB,kBAAkB;EAEhE,IAAI,eAAe,GACjB,SAAS;EAGX,aAAa;GACX,aAAa,YAAY;GACzB,SAAS,oBAAoB,oBAAoB,kBAAkB;EACrE;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}

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

@@ -0,0 +1,71 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMemo } from "react";
+//#region src/components/MessageList/hooks/useReceiptsByMessageId.ts
+var snapshotSelector = (next) => ({
+	deliveredByMessageId: next.deliveredByMessageId,
+	readersByMessageId: next.readersByMessageId,
+	revision: next.revision
+});
+var refOf = (message) => ({
+	msgId: message.id,
+	timestamp: message.created_at
+});
+/**
+* Expands the tracker's cursor buckets into "who has this message" for each rendered message.
+*
+* The tracker stores one entry per user — the message their cursor stopped on. The question the UI
+* asks is the other way round: everyone at or past a given message. Those two differ, and reading
+* the buckets as though they were the answer is what made an older message report less than a newer
+* one, which cannot happen to a cursor that only moves forward.
+*
+* Derived in one reverse pass rather than a query per message, because each answer is the next one
+* plus that message's bucket. Messages with no cursor on them — most of them — keep the array
+* identity of the message after them, so the number of allocations follows the number of readers
+* rather than the length of the list.
+*/
+var expandBuckets = ({ buckets, messages, seed }) => {
+	const result = {};
+	const seen = new Map(seed.map((user) => [user.id, user]));
+	let current = Array.from(seen.values());
+	for (let i = messages.length - 1; i >= 0; i -= 1) {
+		const message = messages[i];
+		let grew = false;
+		for (const user of buckets[message.id] ?? []) {
+			if (seen.has(user.id)) continue;
+			seen.set(user.id, user);
+			grew = true;
+		}
+		if (grew) current = Array.from(seen.values());
+		result[message.id] = current;
+	}
+	return result;
+};
+var useReceiptsByMessageId = ({ channel, kind, lastOwnMessage, messages, returnAllReadData }) => {
+	const trackerSnapshot = useStateStore(channel.messageReceiptsTracker.snapshotStore, snapshotSelector);
+	return useMemo(() => {
+		if (!trackerSnapshot) return {};
+		const tracker = channel.messageReceiptsTracker;
+		const usersForMessage = (ref) => kind === "read" ? tracker.readersForMessage(ref) : tracker.deliveredForMessage(ref);
+		if (!returnAllReadData) {
+			if (!lastOwnMessage) return {};
+			return { [lastOwnMessage.id]: usersForMessage(refOf(lastOwnMessage)) };
+		}
+		if (!messages.length) return {};
+		return expandBuckets({
+			buckets: kind === "read" ? trackerSnapshot.readersByMessageId : trackerSnapshot.deliveredByMessageId,
+			messages,
+			seed: usersForMessage(refOf(messages[messages.length - 1]))
+		});
+	}, [
+		channel,
+		kind,
+		lastOwnMessage,
+		messages,
+		returnAllReadData,
+		trackerSnapshot
+	]);
+};
+//#endregion
+export { useReceiptsByMessageId };
+
+//# sourceMappingURL=useReceiptsByMessageId.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useReceiptsByMessageId.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useReceiptsByMessageId.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type {\n  Channel,\n  LocalMessage,\n  MessageReceiptsSnapshot,\n  MsgRef,\n  UserResponse,\n} from 'stream-chat';\n\nimport { useStateStore } from '../../../store/hooks/useStateStore';\n\nexport type ReceiptKind = 'delivered' | 'read';\n\ntype UseReceiptsByMessageIdParams = {\n  channel: Channel;\n  kind: ReceiptKind;\n  messages: LocalMessage[];\n  returnAllReadData: boolean;\n  lastOwnMessage?: LocalMessage;\n};\n\nconst snapshotSelector = (next: MessageReceiptsSnapshot) => ({\n  deliveredByMessageId: next.deliveredByMessageId,\n  readersByMessageId: next.readersByMessageId,\n  revision: next.revision,\n});\n\nconst refOf = (message: LocalMessage): MsgRef => ({\n  msgId: message.id,\n  timestamp: message.created_at,\n});\n\n/**\n * Expands the tracker's cursor buckets into \"who has this message\" for each rendered message.\n *\n * The tracker stores one entry per user — the message their cursor stopped on. The question the UI\n * asks is the other way round: everyone at or past a given message. Those two differ, and reading\n * the buckets as though they were the answer is what made an older message report less than a newer\n * one, which cannot happen to a cursor that only moves forward.\n *\n * Derived in one reverse pass rather than a query per message, because each answer is the next one\n * plus that message's bucket. Messages with no cursor on them — most of them — keep the array\n * identity of the message after them, so the number of allocations follows the number of readers\n * rather than the length of the list.\n */\nconst expandBuckets = ({\n  buckets,\n  messages,\n  seed,\n}: {\n  buckets: Record<string, UserResponse[]>;\n  messages: LocalMessage[];\n  seed: UserResponse[];\n}): Record<string, UserResponse[]> => {\n  const result: Record<string, UserResponse[]> = {};\n  const seen = new Map<string, UserResponse>(seed.map((user) => [user.id, user]));\n  let current = Array.from(seen.values());\n\n  for (let i = messages.length - 1; i >= 0; i -= 1) {\n    const message = messages[i];\n    let grew = false;\n\n    for (const user of buckets[message.id] ?? []) {\n      if (seen.has(user.id)) continue;\n      seen.set(user.id, user);\n      grew = true;\n    }\n\n    if (grew) current = Array.from(seen.values());\n    result[message.id] = current;\n  }\n\n  return result;\n};\n\nexport const useReceiptsByMessageId = ({\n  channel,\n  kind,\n  lastOwnMessage,\n  messages,\n  returnAllReadData,\n}: UseReceiptsByMessageIdParams): Record<string, UserResponse[]> => {\n  const trackerSnapshot = useStateStore(\n    channel.messageReceiptsTracker.snapshotStore,\n    snapshotSelector,\n  );\n\n  return useMemo(() => {\n    // Nothing has been published yet, so nobody is past anything.\n    if (!trackerSnapshot) return {};\n\n    const tracker = channel.messageReceiptsTracker;\n    const usersForMessage = (ref: MsgRef) =>\n      kind === 'read' ? tracker.readersForMessage(ref) : tracker.deliveredForMessage(ref);\n\n    if (!returnAllReadData) {\n      if (!lastOwnMessage) return {};\n      return { [lastOwnMessage.id]: usersForMessage(refOf(lastOwnMessage)) };\n    }\n\n    if (!messages.length) return {};\n\n    return expandBuckets({\n      buckets:\n        kind === 'read'\n          ? trackerSnapshot.readersByMessageId\n          : trackerSnapshot.deliveredByMessageId,\n      messages,\n      // Whoever is already past the newest rendered message; the buckets below it do the rest.\n      seed: usersForMessage(refOf(messages[messages.length - 1])),\n    });\n  }, [channel, kind, lastOwnMessage, messages, returnAllReadData, trackerSnapshot]);\n};\n"],"mappings":";;;AAqBA,IAAM,oBAAoB,UAAmC;CAC3D,sBAAsB,KAAK;CAC3B,oBAAoB,KAAK;CACzB,UAAU,KAAK;AACjB;AAEA,IAAM,SAAS,aAAmC;CAChD,OAAO,QAAQ;CACf,WAAW,QAAQ;AACrB;;;;;;;;;;;;;;AAeA,IAAM,iBAAiB,EACrB,SACA,UACA,WAKoC;CACpC,MAAM,SAAyC,CAAC;CAChD,MAAM,OAAO,IAAI,IAA0B,KAAK,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;CAC9E,IAAI,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;CAEtC,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG;EAChD,MAAM,UAAU,SAAS;EACzB,IAAI,OAAO;EAEX,KAAK,MAAM,QAAQ,QAAQ,QAAQ,OAAO,CAAC,GAAG;GAC5C,IAAI,KAAK,IAAI,KAAK,EAAE,GAAG;GACvB,KAAK,IAAI,KAAK,IAAI,IAAI;GACtB,OAAO;EACT;EAEA,IAAI,MAAM,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;EAC5C,OAAO,QAAQ,MAAM;CACvB;CAEA,OAAO;AACT;AAEA,IAAa,0BAA0B,EACrC,SACA,MACA,gBACA,UACA,wBACkE;CAClE,MAAM,kBAAkB,cACtB,QAAQ,uBAAuB,eAC/B,gBACF;CAEA,OAAO,cAAc;EAEnB,IAAI,CAAC,iBAAiB,OAAO,CAAC;EAE9B,MAAM,UAAU,QAAQ;EACxB,MAAM,mBAAmB,QACvB,SAAS,SAAS,QAAQ,kBAAkB,GAAG,IAAI,QAAQ,oBAAoB,GAAG;EAEpF,IAAI,CAAC,mBAAmB;GACtB,IAAI,CAAC,gBAAgB,OAAO,CAAC;GAC7B,OAAO,GAAG,eAAe,KAAK,gBAAgB,MAAM,cAAc,CAAC,EAAE;EACvE;EAEA,IAAI,CAAC,SAAS,QAAQ,OAAO,CAAC;EAE9B,OAAO,cAAc;GACnB,SACE,SAAS,SACL,gBAAgB,qBAChB,gBAAgB;GACtB;GAEA,MAAM,gBAAgB,MAAM,SAAS,SAAS,SAAS,EAAE,CAAC;EAC5D,CAAC;CACH,GAAG;EAAC;EAAS;EAAM;EAAgB;EAAU;EAAmB;CAAe,CAAC;AAClF"}

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

@@ -0,0 +1,26 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useThreadContext } from "../../Threads/ThreadContext.mjs";
+import { ThreadHead } from "../../Thread/ThreadHead.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageList/hooks/useThreadHead.tsx
+var parentMessageSelector = ({ parentMessage }) => ({ parentMessage });
+/**
+* The parent message a thread list renders above its replies, or `null` outside a thread.
+*
+* The head belongs to the list rather than to `Thread` because it has to sit inside the scroll
+* container -- a sibling of the list could not be placed there. Style choices stay with the
+* caller; only this structural one is resolved from context.
+*/
+var useThreadHead = () => {
+	const thread = useThreadContext();
+	const { ThreadHead: ThreadHead$1 = ThreadHead } = useComponentContext();
+	const { parentMessage } = useStateStore(thread?.state, parentMessageSelector) ?? {};
+	if (!parentMessage) return null;
+	return /* @__PURE__ */ jsx(ThreadHead$1, { message: parentMessage }, parentMessage.id);
+};
+//#endregion
+export { useThreadHead };
+
+//# sourceMappingURL=useThreadHead.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useThreadHead.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useThreadHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ThreadHead as DefaultThreadHead } from '../../Thread/ThreadHead';\nimport { useComponentContext } from '../../../context';\nimport { useThreadContext } from '../../Threads';\nimport { useStateStore } from '../../../store';\n\nimport type { ThreadState } from 'stream-chat';\n\nconst parentMessageSelector = ({ parentMessage }: ThreadState) => ({ parentMessage });\n\n/**\n * The parent message a thread list renders above its replies, or `null` outside a thread.\n *\n * The head belongs to the list rather than to `Thread` because it has to sit inside the scroll\n * container -- a sibling of the list could not be placed there. Style choices stay with the\n * caller; only this structural one is resolved from context.\n */\nexport const useThreadHead = () => {\n  const thread = useThreadContext();\n  const { ThreadHead = DefaultThreadHead } = useComponentContext();\n  const { parentMessage } = useStateStore(thread?.state, parentMessageSelector) ?? {};\n\n  if (!parentMessage) return null;\n\n  return <ThreadHead key={parentMessage.id} message={parentMessage} />;\n};\n"],"mappings":";;;;;;;AASA,IAAM,yBAAyB,EAAE,qBAAkC,EAAE,cAAc;;;;;;;;AASnF,IAAa,sBAAsB;CACjC,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,YAAA,eAAa,eAAsB,oBAAoB;CAC/D,MAAM,EAAE,kBAAkB,cAAc,QAAQ,OAAO,qBAAqB,KAAK,CAAC;CAElF,IAAI,CAAC,eAAe,OAAO;CAE3B,OAAO,oBAAC,cAAD,EAAmC,SAAS,cAAgB,GAA3C,cAAc,EAA6B;AACrE"}

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

@@ -0,0 +1,37 @@
+//#region src/components/MessageList/messageSourceKey.ts
+/**
+* Identity of the object a message list renders -- a `Channel` or a `Thread` -- as a string usable
+* as a React key.
+*
+* Keyed on the *instance*, not on `cid` or a thread id. Those name a conversation; they do not name
+* the object representing it. Two different `Channel` instances can carry the same `cid` (the
+* client's cache is dropped on `disconnectUser`, an app can hold channels from more than one
+* client, and re-created channels come back as new objects), so keying on the id treats them as the
+* same thing and the list keeps state belonging to an instance nobody uses any more: subscriptions
+* to the previous instance's stores, scroll position, virtualization accounting.
+*
+* The readable prefix is there for React DevTools; the counter is what identifies the instance.
+*/
+var instanceKeys = /* @__PURE__ */ new WeakMap();
+var nextInstanceKey = 0;
+var getInstanceKey = (instance, label) => {
+	const existing = instanceKeys.get(instance);
+	if (existing) return existing;
+	nextInstanceKey += 1;
+	const key = `${label}#${nextInstanceKey}`;
+	instanceKeys.set(instance, key);
+	return key;
+};
+/**
+* Key for the source a message list is bound to.
+*
+* Mirrors `useMessagePaginator()` -- `thread?.messagePaginator ?? channel.messagePaginator` -- so
+* the list resets exactly when the paginator it reads from changes. A thread list bound to the
+* channel would not reset between two threads of the same channel, which is what keying on the
+* channel alone used to do.
+*/
+var getMessageSourceKey = ({ channel, thread }) => thread ? getInstanceKey(thread, `thread:${thread.id}`) : getInstanceKey(channel, channel.cid);
+//#endregion
+export { getMessageSourceKey };
+
+//# sourceMappingURL=messageSourceKey.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messageSourceKey.mjs","names":[],"sources":["../../../../src/components/MessageList/messageSourceKey.ts"],"sourcesContent":["import type { Channel, Thread } from 'stream-chat';\n\n/**\n * Identity of the object a message list renders -- a `Channel` or a `Thread` -- as a string usable\n * as a React key.\n *\n * Keyed on the *instance*, not on `cid` or a thread id. Those name a conversation; they do not name\n * the object representing it. Two different `Channel` instances can carry the same `cid` (the\n * client's cache is dropped on `disconnectUser`, an app can hold channels from more than one\n * client, and re-created channels come back as new objects), so keying on the id treats them as the\n * same thing and the list keeps state belonging to an instance nobody uses any more: subscriptions\n * to the previous instance's stores, scroll position, virtualization accounting.\n *\n * The readable prefix is there for React DevTools; the counter is what identifies the instance.\n */\nconst instanceKeys = new WeakMap<object, string>();\nlet nextInstanceKey = 0;\n\nconst getInstanceKey = (instance: object, label: string): string => {\n  const existing = instanceKeys.get(instance);\n  if (existing) return existing;\n\n  nextInstanceKey += 1;\n  const key = `${label}#${nextInstanceKey}`;\n  instanceKeys.set(instance, key);\n\n  return key;\n};\n\n/**\n * Key for the source a message list is bound to.\n *\n * Mirrors `useMessagePaginator()` -- `thread?.messagePaginator ?? channel.messagePaginator` -- so\n * the list resets exactly when the paginator it reads from changes. A thread list bound to the\n * channel would not reset between two threads of the same channel, which is what keying on the\n * channel alone used to do.\n */\nexport const getMessageSourceKey = ({\n  channel,\n  thread,\n}: {\n  channel: Channel;\n  thread?: Thread;\n}): string =>\n  thread\n    ? getInstanceKey(thread, `thread:${thread.id}`)\n    : getInstanceKey(channel, channel.cid);\n"],"mappings":";;;;;;;;;;;;;;AAeA,IAAM,+BAAe,IAAI,QAAwB;AACjD,IAAI,kBAAkB;AAEtB,IAAM,kBAAkB,UAAkB,UAA0B;CAClE,MAAM,WAAW,aAAa,IAAI,QAAQ;CAC1C,IAAI,UAAU,OAAO;CAErB,mBAAmB;CACnB,MAAM,MAAM,GAAG,MAAM,GAAG;CACxB,aAAa,IAAI,UAAU,GAAG;CAE9B,OAAO;AACT;;;;;;;;;AAUA,IAAa,uBAAuB,EAClC,SACA,aAKA,SACI,eAAe,QAAQ,UAAU,OAAO,IAAI,IAC5C,eAAe,SAAS,QAAQ,GAAG"}