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

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

@@ -0,0 +1,46 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useFloatingDateSeparatorMessageList } from "./hooks/MessageList/useFloatingDateSeparatorMessageList.mjs";
+import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
+import { useFloatingDateSeparator } from "./hooks/VirtualizedMessageList/useFloatingDateSeparator.mjs";
+import { useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageList/FloatingDateSeparator.tsx
+/**
+* Renders a floating date separator when the user has scrolled past the in-flow date.
+* State is internal so MessageList/VirtualizedMessageList do not re-render when it changes.
+* Use itemsRenderedRef for Virtuoso, listElement for non-virtualized MessageList.
+*/
+var FloatingDateSeparator = (props) => {
+	const { DateSeparator: DateSeparator$1 = DateSeparator } = useComponentContext();
+	const { processedMessages, withDateSeparator } = props;
+	const listElement = "listElement" in props ? props.listElement : null;
+	const useDomMode = listElement != null;
+	const virtuosoResult = useFloatingDateSeparator({
+		processedMessages,
+		withDateSeparator
+	});
+	const domResult = useFloatingDateSeparatorMessageList({
+		listElement,
+		processedMessages,
+		withDateSeparator
+	});
+	const floatingDate = useDomMode ? domResult.floatingDate : virtuosoResult.floatingDate;
+	const showFloatingDate = useDomMode ? domResult.showFloatingDate : virtuosoResult.showFloatingDate;
+	const itemsRenderedRef = "itemsRenderedRef" in props ? props.itemsRenderedRef : null;
+	useLayoutEffect(() => {
+		if (!itemsRenderedRef) return;
+		itemsRenderedRef.current = virtuosoResult.onItemsRendered;
+		return () => {
+			itemsRenderedRef.current = null;
+		};
+	}, [itemsRenderedRef, virtuosoResult.onItemsRendered]);
+	if (!showFloatingDate || !floatingDate || !DateSeparator$1) return null;
+	return /* @__PURE__ */ jsx(DateSeparator$1, {
+		date: floatingDate,
+		floating: true
+	});
+};
+//#endregion
+export { FloatingDateSeparator };
+
+//# sourceMappingURL=FloatingDateSeparator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingDateSeparator.mjs","names":[],"sources":["../../../../src/components/MessageList/FloatingDateSeparator.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport type { RefObject } from 'react';\n\nimport { DateSeparator as DefaultDateSeparator } from '../DateSeparator';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useFloatingDateSeparatorMessageList } from './hooks/MessageList';\nimport { useFloatingDateSeparator } from './hooks/VirtualizedMessageList';\nimport type { RenderedMessage } from './utils';\n\ntype BaseProps = {\n  processedMessages: RenderedMessage[];\n  withDateSeparator: boolean;\n};\n\nexport type FloatingDateSeparatorProps = BaseProps &\n  (\n    | {\n        /** For VirtualizedMessageList: ref the parent calls with visible items */\n        itemsRenderedRef: RefObject<((rendered: RenderedMessage[]) => void) | null>;\n      }\n    | {\n        /** For MessageList: scroll container to query DOM for date separators */\n        listElement: HTMLDivElement | null;\n      }\n  );\n\n/**\n * Renders a floating date separator when the user has scrolled past the in-flow date.\n * State is internal so MessageList/VirtualizedMessageList do not re-render when it changes.\n * Use itemsRenderedRef for Virtuoso, listElement for non-virtualized MessageList.\n */\nexport const FloatingDateSeparator = (props: FloatingDateSeparatorProps) => {\n  const { DateSeparator = DefaultDateSeparator } = useComponentContext();\n  const { processedMessages, withDateSeparator } = props;\n\n  const listElement = 'listElement' in props ? props.listElement : null;\n  const useDomMode = listElement != null;\n\n  const virtuosoResult = useFloatingDateSeparator({\n    processedMessages,\n    withDateSeparator,\n  });\n  const domResult = useFloatingDateSeparatorMessageList({\n    listElement,\n    processedMessages,\n    withDateSeparator,\n  });\n\n  const floatingDate = useDomMode ? domResult.floatingDate : virtuosoResult.floatingDate;\n  const showFloatingDate = useDomMode\n    ? domResult.showFloatingDate\n    : virtuosoResult.showFloatingDate;\n\n  const itemsRenderedRef = 'itemsRenderedRef' in props ? props.itemsRenderedRef : null;\n  useLayoutEffect(() => {\n    if (!itemsRenderedRef) return;\n    itemsRenderedRef.current = virtuosoResult.onItemsRendered;\n    return () => {\n      itemsRenderedRef.current = null;\n    };\n  }, [itemsRenderedRef, virtuosoResult.onItemsRendered]);\n\n  if (!showFloatingDate || !floatingDate || !DateSeparator) return null;\n\n  return <DateSeparator date={floatingDate} floating />;\n};\n"],"mappings":";;;;;;;;;;;;AA+BA,IAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,eAAA,kBAAgB,kBAAyB,oBAAoB;CACrE,MAAM,EAAE,mBAAmB,sBAAsB;CAEjD,MAAM,cAAc,iBAAiB,QAAQ,MAAM,cAAc;CACjE,MAAM,aAAa,eAAe;CAElC,MAAM,iBAAiB,yBAAyB;EAC9C;EACA;CACF,CAAC;CACD,MAAM,YAAY,oCAAoC;EACpD;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAe,aAAa,UAAU,eAAe,eAAe;CAC1E,MAAM,mBAAmB,aACrB,UAAU,mBACV,eAAe;CAEnB,MAAM,mBAAmB,sBAAsB,QAAQ,MAAM,mBAAmB;CAChF,sBAAsB;EACpB,IAAI,CAAC,kBAAkB;EACvB,iBAAiB,UAAU,eAAe;EAC1C,aAAa;GACX,iBAAiB,UAAU;EAC7B;CACF,GAAG,CAAC,kBAAkB,eAAe,eAAe,CAAC;CAErD,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,iBAAe,OAAO;CAEjE,OAAO,oBAAC,iBAAD;EAAe,MAAM;EAAc,UAAA;CAAU,CAAA;AACtD"}

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

@@ -0,0 +1,15 @@
+import { Message } from "../Message/Message.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageList/GiphyPreviewMessage.tsx
+var GiphyPreviewMessage = (props) => {
+	const { message } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: "giphy-preview-message",
+		children: /* @__PURE__ */ jsx(Message, { message })
+	});
+};
+//#endregion
+export { GiphyPreviewMessage };
+
+//# sourceMappingURL=GiphyPreviewMessage.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GiphyPreviewMessage.mjs","names":[],"sources":["../../../../src/components/MessageList/GiphyPreviewMessage.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Message } from '../Message/Message';\nimport type { LocalMessage } from 'stream-chat';\n\nexport type GiphyPreviewMessageProps = {\n  message: LocalMessage;\n};\n\nexport const GiphyPreviewMessage = (props: GiphyPreviewMessageProps) => {\n  const { message } = props;\n\n  return (\n    <div className='giphy-preview-message'>\n      <Message message={message} />\n    </div>\n  );\n};\n"],"mappings":";;;;AASA,IAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,YAAY;CAEpB,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,SAAD,EAAkB,QAAU,CAAA;CACzB,CAAA;AAET"}

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

@@ -0,0 +1,284 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { DialogManagerProvider } from "../../context/DialogManagerContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useNotificationTarget } from "../Notifications/hooks/useNotificationTarget.mjs";
+import { NotificationList } from "../Notifications/NotificationList.mjs";
+import { useIncomingMessageAnnouncements } from "../Accessibility/hooks/useIncomingMessageAnnouncements.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { EmptyStateIndicator } from "../EmptyStateIndicator/EmptyStateIndicator.mjs";
+import { InfiniteScrollPaginator } from "../InfiniteScrollPaginator/InfiniteScrollPaginator.mjs";
+import { LoadingIndicator } from "../Loading/LoadingIndicator.mjs";
+import { MessageTranslationViewProvider } from "../../context/MessageTranslationViewContext.mjs";
+import { useMessagePaginator } from "../../hooks/useMessagePaginator.mjs";
+import { useEnrichedMessages } from "./hooks/MessageList/useEnrichedMessages.mjs";
+import { useMessageListElements } from "./hooks/MessageList/useMessageListElements.mjs";
+import { useScrollLocationLogic } from "./hooks/MessageList/useScrollLocationLogic.mjs";
+import { MessageListMainPanel } from "./MessageListMainPanel.mjs";
+import { useUnreadMessagesNotification } from "./hooks/MessageList/useUnreadMessagesNotification.mjs";
+import { getMessageSourceKey } from "./messageSourceKey.mjs";
+import { useMarkRead } from "./hooks/useMarkRead.mjs";
+import { NewMessageNotification } from "./NewMessageNotification.mjs";
+import { UnreadMessagesNotification } from "./UnreadMessagesNotification.mjs";
+import { MessageListContextProvider } from "../../context/MessageListContext.mjs";
+import { TypingIndicator } from "../TypingIndicator/TypingIndicator.mjs";
+import { FloatingDateSeparator } from "./FloatingDateSeparator.mjs";
+import { defaultRenderMessages } from "./renderMessages.mjs";
+import { useThreadHead } from "./hooks/useThreadHead.mjs";
+import { useLastOwnMessage } from "./hooks/useLastOwnMessage.mjs";
+import { ScrollToLatestMessageButton } from "./ScrollToLatestMessageButton.mjs";
+import { useCanPaginateReplies } from "./hooks/useCanPaginateReplies.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import React, { createElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageList/MessageList.tsx
+var messagePaginatorStateSelector = (state) => ({
+	hasMoreNewer: state.hasMoreHead,
+	isLoading: state.isLoading,
+	messages: state.items ?? []
+});
+var unreadStateSnapshotSelector = (state) => state;
+var messageFocusSignalSelector = (state) => ({ messageFocusSignal: state.signal });
+var getScrollBehavior = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
+var MessageListWithContext = (props) => {
+	const channel = useChannel();
+	const threadHead = useThreadHead();
+	const { groupStyles, headerPosition, hideDeletedMessages = false, hideNewMessageSeparator = false, internalInfiniteScrollProps: { element: internalListElement = "div", threshold: loadMoreScrollThreshold = 250, ...restInternalInfiniteScrollProps } = {}, maxTimeBetweenGroupedMessages, noGroupByUser = false, reactionDetailsSort, renderMessages = defaultRenderMessages, returnAllReadData = false, reviewProcessedMessage, showUnreadNotificationAlways, sortReactions, suppressAutoscroll: suppressAutoscrollFromProps = false, unsafeHTML = false, withDateSeparator = true } = props;
+	const thread = useThreadContext();
+	const isThreadList = !!thread;
+	const [suppressAutoscrollWhileLoadingOlder, setSuppressAutoscrollWhileLoadingOlder] = React.useState(false);
+	const suppressAutoscroll = suppressAutoscrollFromProps || suppressAutoscrollWhileLoadingOlder;
+	const loadingOlderRef = React.useRef(false);
+	const [listElement, setListElement] = React.useState(null);
+	const { customClasses } = useChatContext();
+	const { EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, MessageListWrapper = "ul", NewMessageNotification: NewMessageNotification$1 = NewMessageNotification, TypingIndicator: TypingIndicator$1 = TypingIndicator, UnreadMessagesNotification: UnreadMessagesNotification$1 = UnreadMessagesNotification } = useComponentContext();
+	const messagePaginator = useMessagePaginator();
+	const { hasMoreNewer, isLoading, messages } = useStateStore(messagePaginator.state, messagePaginatorStateSelector);
+	const channelUnreadUiState = useStateStore(messagePaginator.unreadStateSnapshot, unreadStateSnapshotSelector);
+	const { messageFocusSignal } = useStateStore(messagePaginator.messageFocusSignal, messageFocusSignalSelector);
+	const focusedMessageId = messageFocusSignal?.messageId;
+	const { hasNewMessages, isMessageListScrolledToBottom, onScroll, scrollToBottom, wrapperRect } = useScrollLocationLogic({
+		hasMoreNewer,
+		listElement,
+		loadMoreScrollThreshold,
+		messages,
+		scrolledUpThreshold: props.scrolledUpThreshold,
+		suppressAutoscroll
+	});
+	const { show: showUnreadMessagesNotification } = useUnreadMessagesNotification({
+		isMessageListScrolledToBottom,
+		listElement,
+		showAlways: !!showUnreadNotificationAlways
+	});
+	useMarkRead({
+		hasMoreNewer,
+		isMessageListScrolledToBottom,
+		messageListIsThread: isThreadList
+	});
+	useIncomingMessageAnnouncements({
+		activeThreadId: thread?.id,
+		channel,
+		ownUserId: channel.getClient().user?.id,
+		threadList: isThreadList
+	});
+	const { messageGroupStyles, messages: enrichedMessages } = useEnrichedMessages({
+		channel,
+		groupStyles,
+		headerPosition,
+		hideDeletedMessages,
+		hideNewMessageSeparator,
+		maxTimeBetweenGroupedMessages,
+		messages,
+		noGroupByUser,
+		reviewProcessedMessage,
+		withDateSeparator
+	});
+	const lastOwnMessage = useLastOwnMessage({
+		messages,
+		ownUserId: channel.getClient().user?.id
+	});
+	const elements = useMessageListElements({
+		enrichedMessages,
+		focusedMessageId,
+		internalMessageProps: {
+			additionalMessageComposerProps: props.additionalMessageComposerProps,
+			closeReactionSelectorOnClick: props.closeReactionSelectorOnClick,
+			disableQuotedMessages: props.disableQuotedMessages,
+			formatDate: props.formatDate,
+			messageListRect: wrapperRect,
+			onMentionsClick: props.onMentionsClick,
+			onMentionsHover: props.onMentionsHover,
+			onUserClick: props.onUserClick,
+			onUserHover: props.onUserHover,
+			reactionDetailsSort,
+			renderText: props.renderText,
+			showAvatar: props.showAvatar,
+			sortReactions,
+			unsafeHTML
+		},
+		lastOwnMessage,
+		messageGroupStyles,
+		messages,
+		renderMessages,
+		returnAllReadData
+	});
+	const messageListClass = customClasses?.messageList || "str-chat__message-list";
+	const canPaginateReplies = useCanPaginateReplies();
+	const loadOlderMessages = React.useCallback(async () => {
+		if (loadingOlderRef.current) return;
+		loadingOlderRef.current = true;
+		setSuppressAutoscrollWhileLoadingOlder(true);
+		try {
+			await messagePaginator.toTail();
+		} finally {
+			loadingOlderRef.current = false;
+			setSuppressAutoscrollWhileLoadingOlder(false);
+		}
+	}, [messagePaginator]);
+	const scrollToBottomFromNotification = React.useCallback(() => {
+		if (messagePaginator.hasMoreHead) messagePaginator.jumpToTheLatestMessage();
+		else scrollToBottom({ behavior: getScrollBehavior() });
+	}, [messagePaginator, scrollToBottom]);
+	React.useLayoutEffect(() => {
+		if (!messageFocusSignal || !listElement) return;
+		const { messageId, token } = messageFocusSignal;
+		const findTarget = () => listElement.querySelector(`[data-message-id='${messageId}']`);
+		const centerTarget = (behavior) => findTarget()?.scrollIntoView({
+			behavior,
+			block: "center"
+		});
+		centerTarget(getScrollBehavior());
+		const target = findTarget();
+		if (!target || typeof IntersectionObserver === "undefined" || typeof ResizeObserver === "undefined") {
+			messagePaginator.scheduleMessageFocusSignalClear({ token });
+			return;
+		}
+		let lastWidth = listElement.clientWidth;
+		let lastHeight = listElement.clientHeight;
+		const relayoutObserver = new ResizeObserver(() => {
+			const width = listElement.clientWidth;
+			const height = listElement.clientHeight;
+			if (width === lastWidth && height === lastHeight) return;
+			lastWidth = width;
+			lastHeight = height;
+			centerTarget("auto");
+		});
+		const viewObserver = new IntersectionObserver((entries) => {
+			const entry = entries[entries.length - 1];
+			const rootHeight = listElement.clientHeight || 1;
+			if (!(entry.isIntersecting && (entry.intersectionRatio >= .5 || entry.intersectionRect.height >= rootHeight * .5))) return;
+			messagePaginator.scheduleMessageFocusSignalClear({ token });
+			viewObserver.disconnect();
+			relayoutObserver.disconnect();
+		}, {
+			root: listElement,
+			threshold: [
+				0,
+				.5,
+				1
+			]
+		});
+		viewObserver.observe(target);
+		relayoutObserver.observe(listElement);
+		return () => {
+			viewObserver.disconnect();
+			relayoutObserver.disconnect();
+		};
+	}, [
+		messageFocusSignal,
+		listElement,
+		messagePaginator
+	]);
+	const id = useStableId();
+	const showEmptyStateIndicator = elements.length === 0 && !isThreadList;
+	const dialogManagerId = isThreadList ? `message-list-dialog-manager-thread-${id}` : `message-list-dialog-manager-${id}`;
+	return /* @__PURE__ */ jsx(MessageListContextProvider, {
+		value: {
+			listElement,
+			processedMessages: enrichedMessages,
+			scrollToBottom
+		},
+		children: /* @__PURE__ */ jsx(MessageTranslationViewProvider, { children: /* @__PURE__ */ jsxs(DialogManagerProvider, {
+			id: dialogManagerId,
+			children: [
+				!isThreadList && showUnreadMessagesNotification && /* @__PURE__ */ jsx(UnreadMessagesNotification$1, { unreadCount: channelUnreadUiState?.unreadCount }),
+				/* @__PURE__ */ jsx(FloatingDateSeparator, {
+					listElement,
+					processedMessages: enrichedMessages,
+					withDateSeparator
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: clsx(messageListClass, customClasses?.threadList),
+					onScroll,
+					ref: setListElement,
+					tabIndex: 0,
+					children: [
+						showEmptyStateIndicator ? /* @__PURE__ */ jsx(EmptyStateIndicator$1, { listType: isThreadList ? "thread" : "message" }) : /* @__PURE__ */ jsxs(InfiniteScrollPaginator, {
+							className: "str-chat__message-list-scroll",
+							"data-testid": "reverse-infinite-scroll",
+							element: internalListElement,
+							loadNextOnScrollToBottom: canPaginateReplies ? messagePaginator.toHead : void 0,
+							loadNextOnScrollToTop: canPaginateReplies ? loadOlderMessages : void 0,
+							onScroll,
+							ref: setListElement,
+							threshold: loadMoreScrollThreshold,
+							...restInternalInfiniteScrollProps,
+							children: [
+								threadHead,
+								isLoading && /* @__PURE__ */ jsx("div", {
+									className: "str-chat__list__loading",
+									children: props.loadingMore && /* @__PURE__ */ jsx(LoadingIndicator$1, {})
+								}, "loading-indicator"),
+								/* @__PURE__ */ jsx(MessageListWrapper, {
+									className: "str-chat__ul",
+									children: elements
+								}),
+								/* @__PURE__ */ jsx(TypingIndicator$1, {
+									isMessageListScrolledToBottom,
+									scrollToBottom
+								}),
+								/* @__PURE__ */ jsx("div", {}, "bottom")
+							]
+						}),
+						/* @__PURE__ */ jsx(NewMessageNotification$1, {
+							newMessageCount: channelUnreadUiState?.unreadCount,
+							showNotification: (hasNewMessages || hasMoreNewer) && !isMessageListScrolledToBottom
+						}),
+						messages.length > 0 && /* @__PURE__ */ jsx(ScrollToLatestMessageButton, {
+							isMessageListScrolledToBottom,
+							isNotAtLatestMessageSet: hasMoreNewer && messages.length > 0,
+							onClick: scrollToBottomFromNotification
+						})
+					]
+				})
+			]
+		}) })
+	});
+};
+/**
+* The MessageList component renders a list of Messages.
+* It is a consumer of the following contexts:
+* - `ChannelInstanceContext`
+* - `ChatContext`
+* - `ComponentContext`
+* - `ThreadContext`
+*/
+var MessageList = (props) => {
+	const channel = useChannel();
+	const thread = useThreadContext();
+	const notificationTarget = useNotificationTarget();
+	const { MessageListMainPanel: MessageListMainPanel$1 = MessageListMainPanel, NotificationList: NotificationList$1 = NotificationList } = useComponentContext();
+	return /* @__PURE__ */ jsxs(MessageListMainPanel$1, { children: [/* @__PURE__ */ createElement(MessageListWithContext, {
+		...props,
+		key: getMessageSourceKey({
+			channel,
+			thread
+		})
+	}), /* @__PURE__ */ jsx(NotificationList$1, { panel: notificationTarget })] });
+};
+//#endregion
+export { MessageList };
+
+//# sourceMappingURL=MessageList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.mjs","names":[],"sources":["../../../../src/components/MessageList/MessageList.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React from 'react';\n\nimport {\n  useEnrichedMessages,\n  useMessageListElements,\n  useScrollLocationLogic,\n  useUnreadMessagesNotification,\n} from './hooks/MessageList';\nimport { getMessageSourceKey } from './messageSourceKey';\nimport { useMarkRead } from './hooks/useMarkRead';\n\nimport { NewMessageNotification as DefaultNewMessageNotification } from './NewMessageNotification';\nimport {\n  NotificationList as DefaultNotificationList,\n  useNotificationTarget,\n} from '../Notifications';\nimport { useIncomingMessageAnnouncements } from '../Accessibility';\nimport { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';\n\nimport { DialogManagerProvider, useChannel } from '../../context';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { MessageListContextProvider } from '../../context/MessageListContext';\nimport { MessageTranslationViewProvider } from '../../context/MessageTranslationViewContext';\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';\nimport { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';\nimport { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';\n\nimport { FloatingDateSeparator } from './FloatingDateSeparator';\nimport type { MessageRenderer } from './renderMessages';\nimport { defaultRenderMessages } from './renderMessages';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { useThreadContext } from '../Threads';\nimport { useThreadHead } from './hooks/useThreadHead';\n\nimport type {\n  LocalMessage,\n  MessageFocusSignalState,\n  MessagePaginatorState,\n  TimestampNS,\n  UnreadSnapshotState,\n} from 'stream-chat';\nimport type { GroupStyle, ProcessMessagesParams, RenderedMessage } from './utils';\nimport type { MessageProps } from '../Message/types';\n\nimport { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';\nimport { useLastOwnMessage } from './hooks/useLastOwnMessage';\nimport { useStateStore } from '../../store';\nimport type { InfiniteScrollPaginatorProps } from '../InfiniteScrollPaginator/InfiniteScrollPaginator';\nimport { InfiniteScrollPaginator } from '../InfiniteScrollPaginator/InfiniteScrollPaginator';\nimport { useMessagePaginator } from '../../hooks';\nimport { ScrollToLatestMessageButton } from './ScrollToLatestMessageButton';\nimport { useCanPaginateReplies } from './hooks/useCanPaginateReplies';\n\ntype MessageListWithContextProps = MessageListProps;\n\nconst messagePaginatorStateSelector = (state: MessagePaginatorState) => ({\n  // hasMore: state.hasMoreTail,\n  hasMoreNewer: state.hasMoreHead,\n  isLoading: state.isLoading,\n  messages: state.items ?? [],\n});\n\nconst unreadStateSnapshotSelector = (state: UnreadSnapshotState) => state;\nconst messageFocusSignalSelector = (state: MessageFocusSignalState) => ({\n  messageFocusSignal: state.signal,\n});\n\n// Smooth scrolling for user-initiated scrolls (scroll-to-latest, jump-to-message), honoring the OS\n// \"reduce motion\" preference (WCAG 2.3.3 — `auto` = instant). Read imperatively at scroll time and\n// deliberately NOT via a reactive hook: it must add no render churn to MessageList, which would\n// perturb the paginator's scroll-position handling (initial/streaming autoscroll stays instant).\nconst getScrollBehavior = (): ScrollBehavior =>\n  typeof window !== 'undefined' &&\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches\n    ? 'auto'\n    : 'smooth';\n\nconst MessageListWithContext = (props: MessageListWithContextProps) => {\n  const channel = useChannel();\n  const threadHead = useThreadHead();\n  const {\n    groupStyles,\n    headerPosition,\n    hideDeletedMessages = false,\n    hideNewMessageSeparator = false,\n    internalInfiniteScrollProps: {\n      element: internalListElement = 'div',\n      threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD,\n      ...restInternalInfiniteScrollProps\n    } = {},\n    maxTimeBetweenGroupedMessages,\n    noGroupByUser = false,\n    // messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,\n    reactionDetailsSort,\n    renderMessages = defaultRenderMessages,\n    returnAllReadData = false,\n    reviewProcessedMessage,\n    showUnreadNotificationAlways,\n    sortReactions,\n    suppressAutoscroll: suppressAutoscrollFromProps = false,\n    unsafeHTML = false,\n    withDateSeparator = true,\n  } = props;\n  const thread = useThreadContext();\n  const isThreadList = !!thread;\n  const [suppressAutoscrollWhileLoadingOlder, setSuppressAutoscrollWhileLoadingOlder] =\n    React.useState(false);\n  const suppressAutoscroll =\n    suppressAutoscrollFromProps || suppressAutoscrollWhileLoadingOlder;\n  const loadingOlderRef = React.useRef(false);\n\n  const [listElement, setListElement] = React.useState<HTMLDivElement | null>(null);\n\n  const { customClasses } = useChatContext();\n\n  const {\n    EmptyStateIndicator = DefaultEmptyStateIndicator,\n    LoadingIndicator = DefaultLoadingIndicator,\n    MessageListWrapper = 'ul',\n    NewMessageNotification = DefaultNewMessageNotification,\n    TypingIndicator = DefaultTypingIndicator,\n    UnreadMessagesNotification = DefaultUnreadMessagesNotification,\n  } = useComponentContext();\n  const messagePaginator = useMessagePaginator();\n\n  const { hasMoreNewer, isLoading, messages } = useStateStore(\n    messagePaginator.state,\n    messagePaginatorStateSelector,\n  );\n\n  const channelUnreadUiState = useStateStore(\n    messagePaginator.unreadStateSnapshot,\n    unreadStateSnapshotSelector,\n  );\n  const { messageFocusSignal } = useStateStore(\n    messagePaginator.messageFocusSignal,\n    messageFocusSignalSelector,\n  );\n  const focusedMessageId = messageFocusSignal?.messageId;\n\n  const {\n    hasNewMessages,\n    isMessageListScrolledToBottom,\n    onScroll,\n    scrollToBottom,\n    wrapperRect,\n  } = useScrollLocationLogic({\n    hasMoreNewer,\n    listElement,\n    loadMoreScrollThreshold,\n    messages, // todo: is it correct to base the scroll logic on an array that does not contain date separators or intro?\n    scrolledUpThreshold: props.scrolledUpThreshold,\n    suppressAutoscroll,\n  });\n\n  const { show: showUnreadMessagesNotification } = useUnreadMessagesNotification({\n    isMessageListScrolledToBottom,\n    listElement,\n    showAlways: !!showUnreadNotificationAlways,\n  });\n\n  useMarkRead({\n    hasMoreNewer,\n    isMessageListScrolledToBottom,\n    messageListIsThread: isThreadList,\n  });\n\n  useIncomingMessageAnnouncements({\n    activeThreadId: thread?.id,\n    channel,\n    ownUserId: channel.getClient().user?.id,\n    threadList: isThreadList,\n  });\n\n  // MERGE-RECONCILE: master's useReducedMotionPreference()/scrollBehavior was NOT\n  // re-grafted here — it fed master's scroll logic, which PR #2909 replaced with\n  // messagePaginator-driven scrolling (useScrollLocationLogic). Reconcile if\n  // prefers-reduced-motion scroll behavior is required.\n\n  const { messageGroupStyles, messages: enrichedMessages } = useEnrichedMessages({\n    channel,\n    groupStyles,\n    headerPosition,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    maxTimeBetweenGroupedMessages,\n    messages,\n    noGroupByUser,\n    reviewProcessedMessage,\n    withDateSeparator,\n  });\n\n  const lastOwnMessage = useLastOwnMessage({\n    messages,\n    ownUserId: channel.getClient().user?.id,\n  });\n\n  const elements = useMessageListElements({\n    enrichedMessages,\n    focusedMessageId,\n    internalMessageProps: {\n      // MERGE-RECONCILE: additionalMessageInputProps → additionalMessageComposerProps\n      // (master's MessageInput→MessageComposer rename). Per-action get*Notification props\n      // were removed by master's notification redesign and are no longer drilled here.\n      additionalMessageComposerProps: props.additionalMessageComposerProps,\n      closeReactionSelectorOnClick: props.closeReactionSelectorOnClick,\n      disableQuotedMessages: props.disableQuotedMessages,\n      formatDate: props.formatDate,\n      messageListRect: wrapperRect,\n      onMentionsClick: props.onMentionsClick,\n      onMentionsHover: props.onMentionsHover,\n      onUserClick: props.onUserClick,\n      onUserHover: props.onUserHover,\n      reactionDetailsSort,\n      renderText: props.renderText,\n      // retrySendMessage: props.retrySendMessage,\n      showAvatar: props.showAvatar,\n      sortReactions,\n      unsafeHTML,\n    },\n    lastOwnMessage,\n    messageGroupStyles,\n    messages,\n    renderMessages,\n    returnAllReadData,\n  });\n\n  const messageListClass = customClasses?.messageList || 'str-chat__message-list';\n\n  // An empty thread would otherwise ask for a page at both ends the moment the scroller mounts.\n  const canPaginateReplies = useCanPaginateReplies();\n\n  const loadOlderMessages = React.useCallback(async () => {\n    if (loadingOlderRef.current) return;\n    loadingOlderRef.current = true;\n    setSuppressAutoscrollWhileLoadingOlder(true);\n    try {\n      await messagePaginator.toTail();\n    } finally {\n      loadingOlderRef.current = false;\n      setSuppressAutoscrollWhileLoadingOlder(false);\n    }\n  }, [messagePaginator]);\n\n  const scrollToBottomFromNotification = React.useCallback(() => {\n    if (messagePaginator.hasMoreHead) {\n      // Latest page not loaded — load it; the message-focus signal then drives the smooth scroll\n      // to the latest message via the effect below.\n      messagePaginator.jumpToTheLatestMessage();\n    } else {\n      scrollToBottom({ behavior: getScrollBehavior() });\n    }\n  }, [messagePaginator, scrollToBottom]);\n\n  // Bring a focused message (deep-link / quoted-reply jump, or jump-to-latest) into view and start\n  // its highlight's dismissal only once it is actually viewed.\n  //\n  // The list renders whatever the paginator holds in state, so the target is in the DOM as soon as\n  // the jump resolves — there is nothing to wait for on the data side. What can lag is *visibility*:\n  // the list may be collapsed to zero width (e.g. a thread panel covering the channel when a \"view\n  // in channel\" jump fires), in which case the initial scroll is computed against stale geometry and\n  // the emit-time TTL would burn the highlight before the user ever sees it. So we:\n  //   - re-center on relayout (the reveal resizes the list 0 → full width; a resize is the precise\n  //     signal for \"geometry changed\" and never fires from scrolling, so it can't fight the smooth\n  //     animation below), and\n  //   - measure the dismissal TTL from the moment the message is genuinely on screen (viewed),\n  //     reported by an IntersectionObserver rather than from when the jump resolved.\n  React.useLayoutEffect(() => {\n    if (!messageFocusSignal || !listElement) return;\n    const { messageId, token } = messageFocusSignal;\n\n    const findTarget = () =>\n      listElement.querySelector<HTMLElement>(`[data-message-id='${messageId}']`);\n    const centerTarget = (behavior: ScrollBehavior) =>\n      findTarget()?.scrollIntoView({ behavior, block: 'center' });\n\n    // Initial attempt — smooth (or reduced-motion 'auto') for the common case of a visible list.\n    centerTarget(getScrollBehavior());\n\n    const target = findTarget();\n    if (\n      !target ||\n      typeof IntersectionObserver === 'undefined' ||\n      typeof ResizeObserver === 'undefined'\n    ) {\n      // Can't observe \"viewed\" — start the countdown now so the highlight still clears.\n      messagePaginator.scheduleMessageFocusSignalClear({ token });\n      return;\n    }\n\n    // Re-center on relayout while the jump is active, keyed off an actual change in the list's\n    // measured size rather than \"the observer's Nth callback\". That distinction matters: the reveal\n    // (0 → full width) often coincides with the observer's initial callback, so a \"skip the first\n    // callback\" heuristic would swallow the very resize we need to react to. Comparing sizes also\n    // leaves the common visible-list case untouched — the baseline callback reports no change, so\n    // the initial smooth scroll above is never interrupted by an instant re-center.\n    let lastWidth = listElement.clientWidth;\n    let lastHeight = listElement.clientHeight;\n    const relayoutObserver = new ResizeObserver(() => {\n      const width = listElement.clientWidth;\n      const height = listElement.clientHeight;\n      if (width === lastWidth && height === lastHeight) return;\n      lastWidth = width;\n      lastHeight = height;\n      centerTarget('auto');\n    });\n\n    const viewObserver = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        const rootHeight = listElement.clientHeight || 1;\n        // Viewed = at least half the message is on screen, or (for a message taller than the\n        // viewport) the visible slice fills at least half the viewport.\n        const viewed =\n          entry.isIntersecting &&\n          (entry.intersectionRatio >= 0.5 ||\n            entry.intersectionRect.height >= rootHeight * 0.5);\n        if (!viewed) return;\n        messagePaginator.scheduleMessageFocusSignalClear({ token });\n        viewObserver.disconnect();\n        relayoutObserver.disconnect();\n      },\n      { root: listElement, threshold: [0, 0.5, 1] },\n    );\n\n    viewObserver.observe(target);\n    relayoutObserver.observe(listElement);\n\n    return () => {\n      viewObserver.disconnect();\n      relayoutObserver.disconnect();\n    };\n  }, [messageFocusSignal, listElement, messagePaginator]);\n\n  const id = useStableId();\n\n  const showEmptyStateIndicator = elements.length === 0 && !isThreadList;\n  const dialogManagerId = isThreadList\n    ? `message-list-dialog-manager-thread-${id}`\n    : `message-list-dialog-manager-${id}`;\n\n  return (\n    <MessageListContextProvider\n      value={{\n        listElement,\n        processedMessages: enrichedMessages,\n        scrollToBottom,\n      }}\n    >\n      <MessageTranslationViewProvider>\n        <DialogManagerProvider id={dialogManagerId}>\n          {!isThreadList && showUnreadMessagesNotification && (\n            <UnreadMessagesNotification unreadCount={channelUnreadUiState?.unreadCount} />\n          )}\n          {/*todo: apply styles\n            .str-chat__list {\n              overflow-y: hidden;\n            }\n\n            .str-chat__infinite-scroll-paginator.str-chat__message-list-scroll {\n              height: 100%;\n            }\n            */}\n          <FloatingDateSeparator\n            listElement={listElement}\n            processedMessages={enrichedMessages}\n            withDateSeparator={withDateSeparator}\n          />\n          <div\n            className={clsx(messageListClass, customClasses?.threadList)}\n            onScroll={onScroll}\n            ref={setListElement}\n            tabIndex={0}\n          >\n            {showEmptyStateIndicator ? (\n              <EmptyStateIndicator listType={isThreadList ? 'thread' : 'message'} />\n            ) : (\n              <InfiniteScrollPaginator\n                className='str-chat__message-list-scroll'\n                data-testid='reverse-infinite-scroll'\n                element={internalListElement}\n                loadNextOnScrollToBottom={\n                  canPaginateReplies ? messagePaginator.toHead : undefined\n                }\n                loadNextOnScrollToTop={canPaginateReplies ? loadOlderMessages : undefined}\n                onScroll={onScroll}\n                ref={setListElement}\n                threshold={loadMoreScrollThreshold}\n                {...restInternalInfiniteScrollProps}\n              >\n                {threadHead}\n                {isLoading && (\n                  <div className='str-chat__list__loading' key='loading-indicator'>\n                    {props.loadingMore && <LoadingIndicator />}\n                  </div>\n                )}\n                <MessageListWrapper className='str-chat__ul'>\n                  {elements}\n                </MessageListWrapper>\n                <TypingIndicator\n                  isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n                  scrollToBottom={scrollToBottom}\n                />\n\n                <div key='bottom' />\n              </InfiniteScrollPaginator>\n            )}\n            <NewMessageNotification\n              newMessageCount={channelUnreadUiState?.unreadCount}\n              showNotification={\n                (hasNewMessages || hasMoreNewer) && !isMessageListScrolledToBottom\n              }\n            />\n            {/* An empty list has nothing to jump to — see the matching gate in\n                  VirtualizedMessageList. */}\n            {messages.length > 0 && (\n              <ScrollToLatestMessageButton\n                isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n                isNotAtLatestMessageSet={hasMoreNewer && messages.length > 0}\n                onClick={scrollToBottomFromNotification}\n              />\n            )}\n          </div>\n        </DialogManagerProvider>\n      </MessageTranslationViewProvider>\n    </MessageListContextProvider>\n  );\n};\n\ntype PropsDrilledToMessage =\n  | 'additionalMessageComposerProps'\n  | 'closeReactionSelectorOnClick'\n  | 'disableQuotedMessages'\n  | 'formatDate'\n  | 'onMentionsClick'\n  | 'onMentionsHover'\n  | 'onUserClick'\n  | 'onUserHover'\n  | 'reactionDetailsSort'\n  | 'renderText'\n  // | 'retrySendMessage'\n  | 'showAvatar'\n  | 'sortReactions'\n  | 'unsafeHTML';\n\n// Allow intrinsic element override while keeping div-prop compatibility\ntype InternalPaginatorProps = Partial<\n  Omit<InfiniteScrollPaginatorProps<'div'>, 'element'>\n> & {\n  element?: keyof React.JSX.IntrinsicElements;\n};\n\nexport type MessageListProps = Partial<Pick<MessageProps, PropsDrilledToMessage>> & {\n  // todo: data manipulation - should live in the paginator\n  /** Callback function to set group styles for each message */\n  groupStyles?: (\n    message: RenderedMessage,\n    previousMessage: RenderedMessage,\n    nextMessage: RenderedMessage,\n    noGroupByUser: boolean,\n    maxTimeBetweenGroupedMessages?: number,\n  ) => GroupStyle;\n  /** Whether the list has more items to load */\n  hasMore?: boolean;\n  /**\n   * Position to render HeaderComponent, as a timestamp in the same unit as `message.created_at` —\n   * i.e. unix nanoseconds. Was milliseconds while `created_at` was a `Date`.\n   */\n  headerPosition?: TimestampNS;\n  // todo: data manipulation - should live in MessagePaginator\n  /** Hides the MessageDeleted components from the list, defaults to `false` */\n  hideDeletedMessages?: boolean;\n  // todo: data manipulation - should live in MessagePaginator\n  /** Hides the DateSeparator component when new messages are received in a channel that's watched but not active, defaults to false */\n  hideNewMessageSeparator?: boolean;\n  /** Overrides the default props passed to [InfiniteScrollPaginator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx) */\n  internalInfiniteScrollProps?: InternalPaginatorProps;\n  /** Function called when latest messages should be loaded, after the list has jumped at an earlier message set */\n  jumpToLatestMessage?: () => Promise<void>;\n  /** Whether or not the list is currently loading more items */\n  loadingMore?: boolean;\n  /** Whether or not the list is currently loading newer items */\n  loadingMoreNewer?: boolean;\n  /** Function called when more messages are to be loaded. */\n  // loadMore?: () => Promise<void>;\n  /** Function called when newer messages are to be loaded. */\n  // loadMoreNewer?: () => Promise<void>;\n  /** Maximum time in milliseconds that should occur between messages to still consider them grouped together */\n  maxTimeBetweenGroupedMessages?: number;\n  /** The limit to use when paginating messages */\n  messageLimit?: number;\n  /** The messages to render in the list; defaults to the active message-paginator items. */\n  messages?: LocalMessage[];\n  /** If true, turns off message UI grouping by user */\n  noGroupByUser?: boolean;\n  /** Overrides the way MessageList renders messages */\n  renderMessages?: MessageRenderer;\n  /** If true, `readBy` data supplied to the `Message` components will include all user read states per sent message */\n  returnAllReadData?: boolean;\n  /**\n   * Allows to review changes introduced to messages array on per message basis (e.g. date separator injection before a message).\n   * The array returned from the function is appended to the array of messages that are later rendered into React elements in the `MessageList`.\n   */\n  // todo: have state.pipe() API to allow modifying the state output / emission\n  reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];\n  /**\n   * The pixel threshold under which the message list is considered to be so near to the bottom,\n   * so that if a new message is delivered, the list will be scrolled to the absolute bottom.\n   * Defaults to 200px\n   */\n  scrolledUpThreshold?: number;\n  /**\n   * The floating notification informing about unread messages will be shown when the\n   * UnreadMessagesSeparator is not visible. The default is false, that means the notification\n   * is shown only when viewing unread messages.\n   */\n  showUnreadNotificationAlways?: boolean;\n  /** If true, prevents autoscroll-to-bottom behavior on new messages. */\n  suppressAutoscroll?: boolean;\n  /** Injects date separator components into the list, defaults to `true` */\n  withDateSeparator?: boolean;\n};\n\n/**\n * The MessageList component renders a list of Messages.\n * It is a consumer of the following contexts:\n * - `ChannelInstanceContext`\n * - `ChatContext`\n * - `ComponentContext`\n * - `ThreadContext`\n */\nexport const MessageList = (props: MessageListProps) => {\n  const channel = useChannel();\n  const thread = useThreadContext();\n  const notificationTarget = useNotificationTarget();\n  const {\n    MessageListMainPanel = DefaultMessageListMainPanel,\n    NotificationList = DefaultNotificationList,\n  } = useComponentContext();\n\n  // The panel and the notification area sit *above* the key on purpose.\n  //\n  // Scroll position and the rest of the list's local state belong to whatever it is showing -- a\n  // thread's replies or a channel's messages -- so a different one starts from scratch. A\n  // notification does not: it reports something the user just did, and its countdown and entry\n  // animation have to outlive the switch. Rendering it here keeps the element, its timer and the\n  // panel box it is positioned against whole, without anything having to move.\n  // See specs/notification-list-stable-host/spec.md.\n  return (\n    <MessageListMainPanel>\n      <MessageListWithContext {...props} key={getMessageSourceKey({ channel, thread })} />\n      <NotificationList panel={notificationTarget} />\n    </MessageListMainPanel>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageList/MessageListMainPanel.tsx
+var MESSAGE_LIST_MAIN_PANEL_CLASS = "str-chat__main-panel-inner str-chat__message-list-main-panel";
+var MessageListMainPanel = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: MESSAGE_LIST_MAIN_PANEL_CLASS,
+	children
+});
+//#endregion
+export { MESSAGE_LIST_MAIN_PANEL_CLASS, MessageListMainPanel };
+
+//# sourceMappingURL=MessageListMainPanel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageListMainPanel.mjs","names":[],"sources":["../../../../src/components/MessageList/MessageListMainPanel.tsx"],"sourcesContent":["import React from 'react';\nimport type { PropsWithChildrenOnly } from '../../types/types';\n\nexport const MESSAGE_LIST_MAIN_PANEL_CLASS =\n  'str-chat__main-panel-inner str-chat__message-list-main-panel' as const;\n\nexport const MessageListMainPanel = ({ children }: PropsWithChildrenOnly) => (\n  <div className={MESSAGE_LIST_MAIN_PANEL_CLASS}>{children}</div>\n);\n"],"mappings":";;;AAGA,IAAa,gCACX;AAEF,IAAa,wBAAwB,EAAE,eACrC,oBAAC,OAAD;CAAK,WAAW;CAAgC;AAAc,CAAA"}

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

@@ -0,0 +1,36 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageList/NewMessageNotification.tsx
+var UnMemoizedNewMessageNotification = (props) => {
+	const { newMessageCount = 0, showNotification } = props;
+	const { t } = useTranslationContext();
+	const { NewMessageNotification: CustomNewMessageNotification } = useComponentContext();
+	if (!showNotification) return null;
+	const label = newMessageCount > 0 ? t("common.newMessages.label", {
+		count: newMessageCount,
+		defaultValue_one: "{{count}} new message",
+		defaultValue_other: "{{count}} new messages"
+	}) : t("messageList.newMessageNotification.newMessages.label", "New Messages!");
+	if (CustomNewMessageNotification) return /* @__PURE__ */ jsx(CustomNewMessageNotification, {
+		...props,
+		label
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__new-message-notification",
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-atomic": "true",
+			"aria-live": "polite",
+			className: "str-chat__message-notification__label",
+			"data-testid": "message-notification",
+			role: "status",
+			children: label
+		})
+	});
+};
+var NewMessageNotification = React.memo(UnMemoizedNewMessageNotification);
+//#endregion
+export { NewMessageNotification };
+
+//# sourceMappingURL=NewMessageNotification.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NewMessageNotification.mjs","names":[],"sources":["../../../../src/components/MessageList/NewMessageNotification.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\n\nexport type NewMessageNotificationProps = {\n  /** Pre-computed label text (passed to custom override) */\n  label?: string;\n  /** Controls the notification display */\n  showNotification?: boolean;\n  /** Number of new messages since user scrolled up (optional; when provided shows \"{{count}} new messages\") */\n  newMessageCount?: number;\n};\n\nconst UnMemoizedNewMessageNotification = (props: NewMessageNotificationProps) => {\n  const { newMessageCount = 0, showNotification } = props;\n\n  const { t } = useTranslationContext();\n\n  const { NewMessageNotification: CustomNewMessageNotification } = useComponentContext();\n\n  if (!showNotification) return null;\n\n  const label =\n    newMessageCount > 0\n      ? t('common.newMessages.label', {\n          count: newMessageCount,\n          defaultValue_one: '{{count}} new message',\n          defaultValue_other: '{{count}} new messages',\n        })\n      : t('messageList.newMessageNotification.newMessages.label', 'New Messages!');\n\n  if (CustomNewMessageNotification) {\n    return <CustomNewMessageNotification {...props} label={label} />;\n  }\n\n  return (\n    <div className='str-chat__new-message-notification'>\n      <div\n        aria-atomic='true'\n        aria-live='polite'\n        className='str-chat__message-notification__label'\n        data-testid='message-notification'\n        role='status'\n      >\n        {label}\n      </div>\n    </div>\n  );\n};\n\nexport const NewMessageNotification = React.memo(\n  UnMemoizedNewMessageNotification,\n) as typeof UnMemoizedNewMessageNotification;\n"],"mappings":";;;;;AAcA,IAAM,oCAAoC,UAAuC;CAC/E,MAAM,EAAE,kBAAkB,GAAG,qBAAqB;CAElD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,EAAE,wBAAwB,iCAAiC,oBAAoB;CAErF,IAAI,CAAC,kBAAkB,OAAO;CAE9B,MAAM,QACJ,kBAAkB,IACd,EAAE,4BAA4B;EAC5B,OAAO;EACP,kBAAkB;EAClB,oBAAoB;CACtB,CAAC,IACD,EAAE,wDAAwD,eAAe;CAE/E,IAAI,8BACF,OAAO,oBAAC,8BAAD;EAA8B,GAAI;EAAc;CAAQ,CAAA;CAGjE,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GACE,eAAY;GACZ,aAAU;GACV,WAAU;GACV,eAAY;GACZ,MAAK;aAEJ;EACE,CAAA;CACF,CAAA;AAET;AAEA,IAAa,yBAAyB,MAAM,KAC1C,gCACF"}

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

@@ -0,0 +1,83 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Badge } from "../Badge/Badge.mjs";
+import { Button } from "../Button/Button.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import React, { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageList/ScrollToLatestMessageButton.tsx
+var threadStateSelector = ({ parentMessage }) => ({ parentMessage });
+var UnMemoizedScrollToLatestMessageButton = (props) => {
+	const { IconArrowDown } = useComponentContextIcons();
+	const { isMessageListScrolledToBottom, isNotAtLatestMessageSet = false, onClick } = props;
+	const { client } = useChatContext();
+	const channel = useChannel();
+	const thread = useThreadContext();
+	const isThreadList = !!thread;
+	const { parentMessage } = useStateStore(thread?.state, threadStateSelector) ?? {};
+	const { t } = useTranslationContext();
+	const [countUnread, setCountUnread] = useState(channel.countUnread() || 0);
+	const [replyCount, setReplyCount] = useState(parentMessage?.reply_count || 0);
+	const observedEvent = isThreadList ? "message.updated" : "message.new";
+	useEffect(() => {
+		const handleEvent = (event) => {
+			const newMessageInAnotherChannel = event.cid !== channel?.cid;
+			const newMessageIsMine = event.user?.id === client.user?.id;
+			const newMessageIsReply = !!event.message?.parent_id;
+			if (isMessageListScrolledToBottom || newMessageInAnotherChannel || newMessageIsMine || channel && !isThreadList && newMessageIsReply) return;
+			if (event.type === "message.new") setCountUnread((prev) => prev + 1);
+			else if (event.message?.id === parentMessage?.id) {
+				const newReplyCount = event.message?.reply_count || 0;
+				setCountUnread(() => newReplyCount - replyCount);
+			}
+		};
+		const subscription = client.on(observedEvent, handleEvent);
+		return () => {
+			subscription.unsubscribe();
+		};
+	}, [
+		channel,
+		client,
+		isMessageListScrolledToBottom,
+		observedEvent,
+		parentMessage,
+		replyCount,
+		isThreadList
+	]);
+	useEffect(() => {
+		if (isMessageListScrolledToBottom) {
+			setCountUnread(0);
+			setReplyCount(parentMessage?.reply_count || 0);
+		}
+	}, [isMessageListScrolledToBottom, parentMessage]);
+	if (isMessageListScrolledToBottom && !isNotAtLatestMessageSet) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__jump-to-latest-message",
+		children: [/* @__PURE__ */ jsx(Button, {
+			appearance: "ghost",
+			"aria-label": t("messageList.scrollLatestMessage.jumpLatestMessage.ariaLabel", "Jump to latest message"),
+			"aria-live": "polite",
+			circular: true,
+			className: "str-chat__jump-to-latest-message__button",
+			"data-testid": "scroll-to-latest-message-button",
+			onClick,
+			size: "md",
+			variant: "secondary",
+			children: /* @__PURE__ */ jsx(IconArrowDown, {})
+		}), countUnread > 0 && /* @__PURE__ */ jsx(Badge, {
+			className: "str-chat__jump-to-latest__unread-count",
+			"data-testid": "unread-message-notification-counter",
+			size: "md",
+			variant: "primary",
+			children: countUnread
+		})]
+	});
+};
+var ScrollToLatestMessageButton = React.memo(UnMemoizedScrollToLatestMessageButton);
+//#endregion
+export { ScrollToLatestMessageButton };
+
+//# sourceMappingURL=ScrollToLatestMessageButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToLatestMessageButton.mjs","names":[],"sources":["../../../../src/components/MessageList/ScrollToLatestMessageButton.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport {\n  useChannel,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { useThreadContext } from '../Threads/ThreadContext';\nimport { useStateStore } from '../../store';\n\nimport type { EventPayload, ThreadState } from 'stream-chat';\nimport { Badge } from '../Badge';\nimport { Button } from '../Button';\n\nexport type ScrollToLatestMessageButtonProps = {\n  /** When true, user has jumped to an older message set and newer messages can be loaded */\n  isNotAtLatestMessageSet?: boolean;\n  isMessageListScrolledToBottom?: boolean;\n  onClick: React.MouseEventHandler;\n};\n\nconst threadStateSelector = ({ parentMessage }: ThreadState) => ({\n  parentMessage,\n});\n\nconst UnMemoizedScrollToLatestMessageButton = (\n  props: ScrollToLatestMessageButtonProps,\n) => {\n  const { IconArrowDown } = useComponentContextIcons();\n  const {\n    isMessageListScrolledToBottom,\n    isNotAtLatestMessageSet = false,\n    onClick,\n  } = props;\n\n  const { client } = useChatContext();\n  const channel = useChannel();\n  const thread = useThreadContext();\n  const isThreadList = !!thread;\n  const { parentMessage } = useStateStore(thread?.state, threadStateSelector) ?? {};\n  const { t } = useTranslationContext();\n  const [countUnread, setCountUnread] = useState(channel.countUnread() || 0);\n  const [replyCount, setReplyCount] = useState(parentMessage?.reply_count || 0);\n  const observedEvent = isThreadList ? 'message.updated' : 'message.new';\n\n  useEffect(() => {\n    const handleEvent = (event: EventPayload<'message.new' | 'message.updated'>) => {\n      const newMessageInAnotherChannel = event.cid !== channel?.cid;\n      const newMessageIsMine = event.user?.id === client.user?.id;\n\n      const newMessageIsReply = !!event.message?.parent_id;\n      const dontIncreaseMainListCounterOnNewReply =\n        channel && !isThreadList && newMessageIsReply;\n\n      if (\n        isMessageListScrolledToBottom ||\n        newMessageInAnotherChannel ||\n        newMessageIsMine ||\n        dontIncreaseMainListCounterOnNewReply\n      ) {\n        return;\n      }\n\n      if (event.type === 'message.new') {\n        // cannot rely on channel.countUnread because active channel is automatically marked read\n        setCountUnread((prev) => prev + 1);\n      } else if (event.message?.id === parentMessage?.id) {\n        const newReplyCount = event.message?.reply_count || 0;\n        setCountUnread(() => newReplyCount - replyCount);\n      }\n    };\n    const subscription = client.on(observedEvent, handleEvent);\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [\n    channel,\n    client,\n    isMessageListScrolledToBottom,\n    observedEvent,\n    parentMessage,\n    replyCount,\n    isThreadList,\n  ]);\n\n  useEffect(() => {\n    if (isMessageListScrolledToBottom) {\n      setCountUnread(0);\n      setReplyCount(parentMessage?.reply_count || 0);\n    }\n  }, [isMessageListScrolledToBottom, parentMessage]);\n\n  if (isMessageListScrolledToBottom && !isNotAtLatestMessageSet) return null;\n\n  return (\n    <div className='str-chat__jump-to-latest-message'>\n      <Button\n        appearance='ghost'\n        aria-label={t(\n          'messageList.scrollLatestMessage.jumpLatestMessage.ariaLabel',\n          'Jump to latest message',\n        )}\n        aria-live='polite'\n        circular\n        className='str-chat__jump-to-latest-message__button'\n        data-testid='scroll-to-latest-message-button'\n        onClick={onClick}\n        size='md'\n        variant='secondary'\n      >\n        <IconArrowDown />\n      </Button>\n      {countUnread > 0 && (\n        <Badge\n          className='str-chat__jump-to-latest__unread-count'\n          data-testid='unread-message-notification-counter'\n          size='md'\n          variant='primary'\n        >\n          {countUnread}\n        </Badge>\n      )}\n    </div>\n  );\n};\n\nexport const ScrollToLatestMessageButton = React.memo(\n  UnMemoizedScrollToLatestMessageButton,\n) as typeof UnMemoizedScrollToLatestMessageButton;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAM,uBAAuB,EAAE,qBAAkC,EAC/D,cACF;AAEA,IAAM,yCACJ,UACG;CACH,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,EACJ,+BACA,0BAA0B,OAC1B,YACE;CAEJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,UAAU,WAAW;CAC3B,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,CAAC,CAAC;CACvB,MAAM,EAAE,kBAAkB,cAAc,QAAQ,OAAO,mBAAmB,KAAK,CAAC;CAChF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,CAAC,aAAa,kBAAkB,SAAS,QAAQ,YAAY,KAAK,CAAC;CACzE,MAAM,CAAC,YAAY,iBAAiB,SAAS,eAAe,eAAe,CAAC;CAC5E,MAAM,gBAAgB,eAAe,oBAAoB;CAEzD,gBAAgB;EACd,MAAM,eAAe,UAA2D;GAC9E,MAAM,6BAA6B,MAAM,QAAQ,SAAS;GAC1D,MAAM,mBAAmB,MAAM,MAAM,OAAO,OAAO,MAAM;GAEzD,MAAM,oBAAoB,CAAC,CAAC,MAAM,SAAS;GAI3C,IACE,iCACA,8BACA,oBALA,WAAW,CAAC,gBAAgB,mBAQ5B;GAGF,IAAI,MAAM,SAAS,eAEjB,gBAAgB,SAAS,OAAO,CAAC;QAC5B,IAAI,MAAM,SAAS,OAAO,eAAe,IAAI;IAClD,MAAM,gBAAgB,MAAM,SAAS,eAAe;IACpD,qBAAqB,gBAAgB,UAAU;GACjD;EACF;EACA,MAAM,eAAe,OAAO,GAAG,eAAe,WAAW;EAEzD,aAAa;GACX,aAAa,YAAY;EAC3B;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,IAAI,+BAA+B;GACjC,eAAe,CAAC;GAChB,cAAc,eAAe,eAAe,CAAC;EAC/C;CACF,GAAG,CAAC,+BAA+B,aAAa,CAAC;CAEjD,IAAI,iCAAiC,CAAC,yBAAyB,OAAO;CAEtE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EACV,+DACA,wBACF;GACA,aAAU;GACV,UAAA;GACA,WAAU;GACV,eAAY;GACH;GACT,MAAK;GACL,SAAQ;aAER,oBAAC,eAAD,CAAgB,CAAA;EACV,CAAA,GACP,cAAc,KACb,oBAAC,OAAD;GACE,WAAU;GACV,eAAY;GACZ,MAAK;GACL,SAAQ;aAEP;EACI,CAAA,CAEN;;AAET;AAEA,IAAa,8BAA8B,MAAM,KAC/C,qCACF"}

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

@@ -0,0 +1,49 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { useMessagePaginator } from "../../hooks/useMessagePaginator.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageList/UnreadMessagesNotification.tsx
+var unreadStateSnapshotSelector = (state) => ({ unreadCount: state.unreadCount });
+var UnreadMessagesNotification = ({ queryMessageLimit, showCount = true }) => {
+	const { IconArrowUp, IconXmark } = useComponentContextIcons();
+	const channel = useChannel();
+	const { client } = useChatContext();
+	const thread = useThreadContext();
+	const messagePaginator = useMessagePaginator();
+	const { unreadCount } = useStateStore(messagePaginator.unreadStateSnapshot, unreadStateSnapshotSelector);
+	const { t } = useTranslationContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__unread-messages-notification", { "str-chat__unread-messages-notification--with-count": unreadCount && showCount }),
+		"data-testid": "unread-messages-notification",
+		children: [/* @__PURE__ */ jsxs(Button, {
+			appearance: "outline",
+			onClick: () => messagePaginator.jumpToTheFirstUnreadMessage({ pageSize: queryMessageLimit }),
+			variant: "secondary",
+			children: [/* @__PURE__ */ jsx(IconArrowUp, {}), unreadCount && showCount ? t("messageList.unreadMessagesNotification.unread.text", {
+				count: unreadCount,
+				defaultValue_one: "{{count}} unread",
+				defaultValue_other: "{{count}} unread"
+			}) : t("messageList.unreadMessagesNotification.unreadMessages.text", "Unread messages")]
+		}), /* @__PURE__ */ jsx(Button, {
+			appearance: "outline",
+			"aria-label": t("messageList.unreadMessagesNotification.markMessagesRead.ariaLabel", "Mark messages as read"),
+			onClick: () => {
+				messagePaginator.clearUnreadSnapshot();
+				client.messageDeliveryReporter.throttledMarkRead(thread ?? channel);
+			},
+			variant: "secondary",
+			children: /* @__PURE__ */ jsx(IconXmark, {})
+		})]
+	});
+};
+//#endregion
+export { UnreadMessagesNotification };
+
+//# sourceMappingURL=UnreadMessagesNotification.mjs.map