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

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

@@ -0,0 +1,70 @@
+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.
+* When the first visible item is a message (not a date separator), we've scrolled past its
+* date separator — find that separator's date.
+*/
+function getFloatingDateForFirstMessage(firstMessage, processedMessages, firstMessageIndex) {
+	if (isIntroMessage(firstMessage)) return null;
+	for (let i = firstMessageIndex - 1; i >= 0; i -= 1) {
+		const item = processedMessages[i];
+		if (isDateSeparatorMessage(item)) return item.date;
+	}
+	const created = firstMessage.created_at;
+	if (created != null) {
+		const d = nsToDate(created);
+		return isNaN(d.getTime()) ? null : d;
+	}
+	return null;
+}
+function getFloatingDateForFirstItem(firstItem, processedMessages, firstItemIndex) {
+	if (isDateSeparatorMessage(firstItem)) return firstItem.date;
+	return getFloatingDateForFirstMessage(firstItem, processedMessages, firstItemIndex);
+}
+/**
+* Controls the floating date separator as a sticky "current section" label.
+* It follows the date separator represented by the first visible item.
+*/
+var HIDDEN_STATE = {
+	date: null,
+	visible: false
+};
+var useFloatingDateSeparator = ({ processedMessages, withDateSeparator }) => {
+	const [state, setState] = useState(HIDDEN_STATE);
+	const onItemsRendered = useCallback((rendered) => {
+		if (!withDateSeparator || processedMessages.length === 0) {
+			setState(HIDDEN_STATE);
+			return;
+		}
+		const valid = rendered.filter((m) => m != null);
+		if (valid.length === 0) {
+			setState(HIDDEN_STATE);
+			return;
+		}
+		const first = valid[0];
+		const firstIndex = processedMessages.findIndex((m) => m.id === first.id);
+		const date = firstIndex >= 0 ? getFloatingDateForFirstItem(first, processedMessages, firstIndex) : null;
+		const visible = date !== null;
+		setState((prev) => {
+			const prevTime = prev.date?.getTime() ?? null;
+			const nextTime = date?.getTime() ?? null;
+			if (prev.visible === visible && prevTime === nextTime) return prev;
+			return {
+				date,
+				visible
+			};
+		});
+	}, [withDateSeparator, processedMessages]);
+	return {
+		floatingDate: state.date,
+		onItemsRendered,
+		showFloatingDate: !!state.date && state.visible
+	};
+};
+//#endregion
+export { useFloatingDateSeparator };
+
+//# sourceMappingURL=useFloatingDateSeparator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingDateSeparator.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useFloatingDateSeparator.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { RenderedMessage } from '../../utils';\nimport { isDateSeparatorMessage, isIntroMessage } from '../../utils';\nimport type { LocalMessage } from 'stream-chat';\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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGiphyPreview.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useChatContext } from '../../../../context/ChatContext';\n\nimport type { 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/useMessageSetKey.mjs

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

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

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

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

@@ -0,0 +1,45 @@
+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
+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
+	*/
+	const didMount = useRef(false);
+	const lastMessageId = useRef("");
+	const atBottom = useRef(false);
+	useEffect(() => {
+		if (hasMoreNewer) {
+			setNewMessagesNotification(true);
+			return;
+		}
+		if (!messages?.length) return;
+		const lastMessage = messages[messages.length - 1];
+		const prevMessageId = lastMessageId.current;
+		lastMessageId.current = lastMessage.id || "";
+		if (lastMessage.id === prevMessageId) return;
+		if (atBottom.current) return;
+		if (lastMessage.user?.id !== currentUserId && didMount.current) setNewMessagesNotification(true);
+		didMount.current = true;
+	}, [
+		currentUserId,
+		messages,
+		hasMoreNewer
+	]);
+	return {
+		atBottom,
+		isMessageListScrolledToBottom,
+		newMessagesNotification,
+		setIsMessageListScrolledToBottom,
+		setNewMessagesNotification
+	};
+}
+//#endregion
+export { useNewMessageNotification };
+
+//# sourceMappingURL=useNewMessageNotification.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNewMessageNotification.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useNewMessageNotification.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { LocalMessage, 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/usePrependMessagesCount.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePrependMessagesCount.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport type { RenderedMessage } from '../../utils';\nimport { isLocalMessage } from '../../utils';\n\nconst STATUSES_EXCLUDED_FROM_PREPEND = {\n  failed: true,\n  sending: true,\n} as const as Record<string, boolean>;\n\nexport function usePrependedMessagesCount(\n  messages: RenderedMessage[],\n  hasDateSeparator: boolean,\n) {\n  const firstRealMessageIndex = hasDateSeparator ? 1 : 0;\n  const firstMessageOnFirstLoadedPage = useRef<RenderedMessage>(undefined);\n  const previousFirstMessageOnFirstLoadedPage = useRef<RenderedMessage>(undefined);\n  const previousNumItemsPrepended = useRef(0);\n\n  const numItemsPrepended = useMemo(() => {\n    if (!messages || !messages.length) {\n      previousNumItemsPrepended.current = 0;\n      return 0;\n    }\n\n    const currentFirstMessage = messages?.[firstRealMessageIndex];\n\n    const noNewMessages =\n      currentFirstMessage?.id === previousFirstMessageOnFirstLoadedPage.current?.id;\n\n    // This is possible only, when sending messages very quickly (basically single char messages submitted like a crazy) in empty channel (first page)\n    // Optimistic UI update, when sending messages, can lead to a situation, when\n    // the order of the messages changes for a moment. This can happen, when a user\n    // sends multiple messages withing few milliseconds. E.g. we send a message A\n    // then message B. At first we have message array with both messages of status \"sending\"\n    // then response for message A is received with a new - later - created_at timestamp\n    // this leads to rearrangement of 1.B (\"sending\"), 2.A (\"received\"). Still firstMessageOnFirstLoadedPage.current\n    // points to message A, but now this message has index 1 => previousNumItemsPrepended.current === 1\n    // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message\n    // at non-existent index. Therefore, we ignore messages of status \"sending\" / \"failed\" in order they are\n    // not considered as prepended messages.\n    const currentFirstMessageStatus = isLocalMessage(currentFirstMessage)\n      ? currentFirstMessage.status\n      : undefined;\n    const firstMsgMovedAfterMessagesInExcludedStatus = !!(\n      currentFirstMessageStatus &&\n      STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessageStatus]\n    );\n\n    if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) {\n      return previousNumItemsPrepended.current;\n    }\n\n    if (!firstMessageOnFirstLoadedPage.current) {\n      firstMessageOnFirstLoadedPage.current = currentFirstMessage;\n    }\n    previousFirstMessageOnFirstLoadedPage.current = currentFirstMessage;\n    // if new messages were prepended, find out how many\n    // start with this number because there cannot be fewer prepended items than before\n    for (\n      let prependedMessageCount = previousNumItemsPrepended.current;\n      prependedMessageCount < messages.length;\n      prependedMessageCount += 1\n    ) {\n      const messageIsFirstOnFirstLoadedPage =\n        messages[prependedMessageCount].id === firstMessageOnFirstLoadedPage.current?.id;\n\n      if (messageIsFirstOnFirstLoadedPage) {\n        previousNumItemsPrepended.current = prependedMessageCount - firstRealMessageIndex;\n        return previousNumItemsPrepended.current;\n      }\n    }\n\n    // if no match has found, we have jumped - reset the prepended item count.\n    firstMessageOnFirstLoadedPage.current = currentFirstMessage;\n    previousNumItemsPrepended.current = 0;\n    return 0;\n    // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)\n    // that's why the second dependency is necessary\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [firstRealMessageIndex, messages, messages?.length]);\n\n  return numItemsPrepended;\n}\n"],"mappings":";;;AAIA,IAAM,iCAAiC;CACrC,QAAQ;CACR,SAAS;AACX;AAEA,SAAgB,0BACd,UACA,kBACA;CACA,MAAM,wBAAwB,mBAAmB,IAAI;CACrD,MAAM,gCAAgC,OAAwB,KAAA,CAAS;CACvE,MAAM,wCAAwC,OAAwB,KAAA,CAAS;CAC/E,MAAM,4BAA4B,OAAO,CAAC;CAiE1C,OA/D0B,cAAc;EACtC,IAAI,CAAC,YAAY,CAAC,SAAS,QAAQ;GACjC,0BAA0B,UAAU;GACpC,OAAO;EACT;EAEA,MAAM,sBAAsB,WAAW;EAEvC,MAAM,gBACJ,qBAAqB,OAAO,sCAAsC,SAAS;EAa7E,MAAM,4BAA4B,eAAe,mBAAmB,IAChE,oBAAoB,SACpB,KAAA;EACJ,MAAM,6CAA6C,CAAC,EAClD,6BACA,+BAA+B;EAGjC,IAAI,iBAAiB,4CACnB,OAAO,0BAA0B;EAGnC,IAAI,CAAC,8BAA8B,SACjC,8BAA8B,UAAU;EAE1C,sCAAsC,UAAU;EAGhD,KACE,IAAI,wBAAwB,0BAA0B,SACtD,wBAAwB,SAAS,QACjC,yBAAyB,GAKzB,IAFE,SAAS,sBAAsB,CAAC,OAAO,8BAA8B,SAAS,IAE3C;GACnC,0BAA0B,UAAU,wBAAwB;GAC5D,OAAO,0BAA0B;EACnC;EAIF,8BAA8B,UAAU;EACxC,0BAA0B,UAAU;EACpC,OAAO;CAIT,GAAG;EAAC;EAAuB;EAAU,UAAU;CAAM,CAE9C;AACT"}

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

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts
+var useScrollToBottomOnNewMessage = ({ messages, scrollToBottom, scrollToLatestMessageOnFocus }) => {
+	const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] = useState(false);
+	const scrollToBottomIfConfigured = useRef(void 0);
+	scrollToBottomIfConfigured.current = (event) => {
+		if (!scrollToLatestMessageOnFocus || !newMessagesReceivedInBackground || event.target !== window) return;
+		setTimeout(scrollToBottom, 100);
+	};
+	useEffect(() => {
+		setNewMessagesReceivedInBackground(true);
+	}, [messages]);
+	useEffect(() => {
+		const handleFocus = (event) => {
+			scrollToBottomIfConfigured.current?.(event);
+		};
+		const handleBlur = () => {
+			setNewMessagesReceivedInBackground(false);
+		};
+		if (typeof window !== "undefined") {
+			window.addEventListener("focus", handleFocus);
+			window.addEventListener("blur", handleBlur);
+		}
+		return () => {
+			window.removeEventListener("focus", handleFocus);
+			window.removeEventListener("blur", handleBlur);
+		};
+	}, []);
+};
+//#endregion
+export { useScrollToBottomOnNewMessage };
+
+//# sourceMappingURL=useScrollToBottomOnNewMessage.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollToBottomOnNewMessage.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { RenderedMessage } from '../../utils';\n\ntype UseScrollToBottomOnNewMessageParams = {\n  scrollToBottom: () => void;\n  messages?: RenderedMessage[];\n  /** When `true`, the list will scroll to the latest message when the window regains focus */\n  scrollToLatestMessageOnFocus?: boolean;\n};\n\nexport const useScrollToBottomOnNewMessage = ({\n  messages,\n  scrollToBottom,\n  scrollToLatestMessageOnFocus,\n}: UseScrollToBottomOnNewMessageParams) => {\n  const [newMessagesReceivedInBackground, setNewMessagesReceivedInBackground] =\n    useState(false);\n\n  const scrollToBottomIfConfigured = useRef<(e: Event) => void>(undefined);\n\n  scrollToBottomIfConfigured.current = (event: Event) => {\n    if (\n      !scrollToLatestMessageOnFocus ||\n      !newMessagesReceivedInBackground ||\n      event.target !== window\n    ) {\n      return;\n    }\n\n    setTimeout(scrollToBottom, 100);\n  };\n\n  useEffect(() => {\n    setNewMessagesReceivedInBackground(true);\n  }, [messages]);\n\n  useEffect(() => {\n    const handleFocus = (event: Event) => {\n      scrollToBottomIfConfigured.current?.(event);\n    };\n\n    const handleBlur = () => {\n      setNewMessagesReceivedInBackground(false);\n    };\n\n    if (typeof window !== 'undefined') {\n      window.addEventListener('focus', handleFocus);\n      window.addEventListener('blur', handleBlur);\n    }\n\n    return () => {\n      window.removeEventListener('focus', handleFocus);\n      window.removeEventListener('blur', handleBlur);\n    };\n  }, []);\n};\n"],"mappings":";;AAUA,IAAa,iCAAiC,EAC5C,UACA,gBACA,mCACyC;CACzC,MAAM,CAAC,iCAAiC,sCACtC,SAAS,KAAK;CAEhB,MAAM,6BAA6B,OAA2B,KAAA,CAAS;CAEvE,2BAA2B,WAAW,UAAiB;EACrD,IACE,CAAC,gCACD,CAAC,mCACD,MAAM,WAAW,QAEjB;EAGF,WAAW,gBAAgB,GAAG;CAChC;CAEA,gBAAgB;EACd,mCAAmC,IAAI;CACzC,GAAG,CAAC,QAAQ,CAAC;CAEb,gBAAgB;EACd,MAAM,eAAe,UAAiB;GACpC,2BAA2B,UAAU,KAAK;EAC5C;EAEA,MAAM,mBAAmB;GACvB,mCAAmC,KAAK;EAC1C;EAEA,IAAI,OAAO,WAAW,aAAa;GACjC,OAAO,iBAAiB,SAAS,WAAW;GAC5C,OAAO,iBAAiB,QAAQ,UAAU;EAC5C;EAEA,aAAa;GACX,OAAO,oBAAoB,SAAS,WAAW;GAC/C,OAAO,oBAAoB,QAAQ,UAAU;EAC/C;CACF,GAAG,CAAC,CAAC;AACP"}

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

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+//#region src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts
+function useShouldForceScrollToBottom(messages, currentUserId) {
+	const lastFocusedOwnMessage = useRef("");
+	const initialFocusRegistered = useRef(false);
+	function recheckForNewOwnMessage() {
+		if (messages && messages.length > 0) {
+			const lastMessage = messages[messages.length - 1];
+			if (lastMessage.user?.id === currentUserId && lastFocusedOwnMessage.current !== lastMessage.id) {
+				lastFocusedOwnMessage.current = lastMessage.id;
+				return true;
+			}
+		}
+		return false;
+	}
+	useEffect(() => {
+		if (messages && messages.length && !initialFocusRegistered.current) {
+			initialFocusRegistered.current = true;
+			recheckForNewOwnMessage();
+		}
+	}, [messages, messages?.length]);
+	return recheckForNewOwnMessage;
+}
+//#endregion
+export { useShouldForceScrollToBottom };
+
+//# sourceMappingURL=useShouldForceScrollToBottom.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useShouldForceScrollToBottom.mjs","names":[],"sources":["../../../../../../src/components/MessageList/hooks/VirtualizedMessageList/useShouldForceScrollToBottom.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { RenderedMessage } from '../../utils';\nimport type { LocalMessage } from 'stream-chat';\n\nexport function useShouldForceScrollToBottom(\n  messages: RenderedMessage[],\n  currentUserId?: string,\n) {\n  const lastFocusedOwnMessage = useRef('');\n  const initialFocusRegistered = useRef(false);\n\n  function recheckForNewOwnMessage() {\n    if (messages && messages.length > 0) {\n      const lastMessage = messages[messages.length - 1];\n\n      if (\n        (lastMessage as LocalMessage).user?.id === currentUserId &&\n        lastFocusedOwnMessage.current !== lastMessage.id\n      ) {\n        lastFocusedOwnMessage.current = lastMessage.id;\n        return true;\n      }\n    }\n    return false;\n  }\n\n  useEffect(() => {\n    if (messages && messages.length && !initialFocusRegistered.current) {\n      initialFocusRegistered.current = true;\n      recheckForNewOwnMessage();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [messages, messages?.length]);\n\n  return recheckForNewOwnMessage;\n}\n"],"mappings":";;AAIA,SAAgB,6BACd,UACA,eACA;CACA,MAAM,wBAAwB,OAAO,EAAE;CACvC,MAAM,yBAAyB,OAAO,KAAK;CAE3C,SAAS,0BAA0B;EACjC,IAAI,YAAY,SAAS,SAAS,GAAG;GACnC,MAAM,cAAc,SAAS,SAAS,SAAS;GAE/C,IACG,YAA6B,MAAM,OAAO,iBAC3C,sBAAsB,YAAY,YAAY,IAC9C;IACA,sBAAsB,UAAU,YAAY;IAC5C,OAAO;GACT;EACF;EACA,OAAO;CACT;CAEA,gBAAgB;EACd,IAAI,YAAY,SAAS,UAAU,CAAC,uBAAuB,SAAS;GAClE,uBAAuB,UAAU;GACjC,wBAAwB;EAC1B;CAEF,GAAG,CAAC,UAAU,UAAU,MAAM,CAAC;CAE/B,OAAO;AACT"}

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

@@ -0,0 +1,48 @@
+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`.
+* Therefore, the `UnreadMessagesNotification` component is rendered based on timestamps.
+* If the there are unread messages in the channel and the `VirtualizedMessageList` renders
+* 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 showAlways
+*/
+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 = 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);
+	}, [
+		lastReadAt,
+		showAlways,
+		unreadCount
+	]);
+	useEffect(() => {
+		if (!unreadCount) setShow(false);
+	}, [unreadCount]);
+	return {
+		show,
+		toggleShowUnreadMessagesNotification
+	};
+};
+//#endregion
+export { useUnreadMessagesNotificationVirtualized };
+
+//# sourceMappingURL=useUnreadMessagesNotificationVirtualized.mjs.map

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

@@ -0,0 +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, 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

@@ -0,0 +1,11 @@
+import { useReceiptsByMessageId } from "./useReceiptsByMessageId.mjs";
+//#region src/components/MessageList/hooks/useLastDeliveredData.ts
+/** Who has received each rendered message — see {@link useReceiptsByMessageId}. */
+var useLastDeliveredData = (props) => useReceiptsByMessageId({
+	...props,
+	kind: "delivered"
+});
+//#endregion
+export { useLastDeliveredData };
+
+//# sourceMappingURL=useLastDeliveredData.mjs.map

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

@@ -0,0 +1 @@
+{"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/useLastOwnMessage.mjs

@@ -0,0 +1,8 @@
+import { findReverse } from "../../../utils/findReverse.mjs";
+import { useMemo } from "react";
+//#region src/components/MessageList/hooks/useLastOwnMessage.ts
+var useLastOwnMessage = ({ messages, ownUserId }) => useMemo(() => messages && findReverse(messages, (msg) => (msg.user && msg.user.id) === ownUserId), [messages, ownUserId]);
+//#endregion
+export { useLastOwnMessage };
+
+//# sourceMappingURL=useLastOwnMessage.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLastOwnMessage.mjs","names":[],"sources":["../../../../../src/components/MessageList/hooks/useLastOwnMessage.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { findReverse } from '../../../utils/findReverse';\nimport type { LocalMessage } from 'stream-chat';\n\n// fixme: we should be able to retrieve last own message quickly from the LLC. Should be done when refactoring the LLC Channel state to reactive.\nexport const useLastOwnMessage = ({\n  messages,\n  ownUserId,\n}: {\n  messages?: LocalMessage[];\n  ownUserId?: string;\n}) =>\n  useMemo(\n    () =>\n      messages && findReverse(messages, (msg) => (msg.user && msg.user.id) === ownUserId),\n    [messages, ownUserId],\n  );\n"],"mappings":";;;AAKA,IAAa,qBAAqB,EAChC,UACA,gBAKA,cAEI,YAAY,YAAY,WAAW,SAAS,IAAI,QAAQ,IAAI,KAAK,QAAQ,SAAS,GACpF,CAAC,UAAU,SAAS,CACtB"}

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

@@ -0,0 +1,11 @@
+import { useReceiptsByMessageId } from "./useReceiptsByMessageId.mjs";
+//#region src/components/MessageList/hooks/useLastReadData.ts
+/** Who has read each rendered message — see {@link useReceiptsByMessageId}. */
+var useLastReadData = (props) => useReceiptsByMessageId({
+	...props,
+	kind: "read"
+});
+//#endregion
+export { useLastReadData };
+
+//# sourceMappingURL=useLastReadData.mjs.map

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

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

@@ -0,0 +1,105 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+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.messagePaginator.headmostItem?.id === channel.state.read[userId]?.last_read_message_id;
+};
+/**
+* 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 = ({ 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 (!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()) {
+				resetUnreadSnapshot();
+				markRead();
+			}
+		};
+		const handleMessageNew = (event) => {
+			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();
+			}
+		};
+		const subscription = channel.on("message.new", handleMessageNew);
+		document.addEventListener("visibilitychange", onVisibilityChange);
+		if (shouldMarkRead()) markRead();
+		return () => {
+			subscription.unsubscribe();
+			document.removeEventListener("visibilitychange", onVisibilityChange);
+		};
+	}, [
+		channel,
+		client,
+		hasMoreNewer,
+		isMessageListScrolledToBottom,
+		markRead,
+		resetUnreadSnapshot,
+		isThreadList,
+		localUnreadCountEnabled,
+		messagePaginator,
+		readEventsEnabled,
+		thread
+	]);
+};
+//#endregion
+export { useMarkRead };
+
+//# sourceMappingURL=useMarkRead.mjs.map

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

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