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

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadMessagesNotification.mjs","names":[],"sources":["../../../../src/components/MessageList/UnreadMessagesNotification.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useChannel,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { useMessagePaginator } from '../../hooks';\nimport { Button } from '../Button';\nimport clsx from 'clsx';\nimport { useThreadContext } from '../Threads';\nimport type { UnreadSnapshotState } from 'stream-chat';\nimport { useStateStore } from '../../store';\n\nexport type UnreadMessagesNotificationProps = {\n  /**\n   * Configuration parameter to determine the message page size, when jumping to the first unread message.\n   */\n  queryMessageLimit?: number;\n  /**\n   * Configuration parameter to determine, whether the unread count is to be shown on the component. Enabled by default.\n   */\n  showCount?: boolean;\n  // todo: maybe remove?\n  unreadCount?: number;\n};\n\nconst unreadStateSnapshotSelector = (state: UnreadSnapshotState) => ({\n  unreadCount: state.unreadCount,\n});\n\nexport const UnreadMessagesNotification = ({\n  queryMessageLimit,\n  showCount = true,\n}: UnreadMessagesNotificationProps) => {\n  const { IconArrowUp, IconXmark } = useComponentContextIcons();\n  // todo: move into a hook dedicated to unread count from the snapshot\n  const channel = useChannel();\n  const { client } = useChatContext();\n  const thread = useThreadContext();\n  const messagePaginator = useMessagePaginator();\n  const { unreadCount } = useStateStore(\n    messagePaginator.unreadStateSnapshot,\n    unreadStateSnapshotSelector,\n  );\n\n  const { t } = useTranslationContext();\n\n  return (\n    <div\n      className={clsx('str-chat__unread-messages-notification', {\n        'str-chat__unread-messages-notification--with-count': unreadCount && showCount,\n      })}\n      data-testid='unread-messages-notification'\n    >\n      <Button\n        appearance='outline'\n        onClick={() =>\n          messagePaginator.jumpToTheFirstUnreadMessage({\n            pageSize: queryMessageLimit,\n          })\n        }\n        variant='secondary'\n      >\n        <IconArrowUp />\n        {unreadCount && showCount\n          ? t('messageList.unreadMessagesNotification.unread.text', {\n              count: unreadCount,\n              defaultValue_one: '{{count}} unread',\n              defaultValue_other: '{{count}} unread',\n            })\n          : t(\n              'messageList.unreadMessagesNotification.unreadMessages.text',\n              'Unread messages',\n            )}\n      </Button>\n      <Button\n        appearance='outline'\n        aria-label={t(\n          'messageList.unreadMessagesNotification.markMessagesRead.ariaLabel',\n          'Mark messages as read',\n        )}\n        onClick={() => {\n          messagePaginator.clearUnreadSnapshot();\n          client.messageDeliveryReporter.throttledMarkRead(thread ?? channel);\n        }}\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA2BA,IAAM,+BAA+B,WAAgC,EACnE,aAAa,MAAM,YACrB;AAEA,IAAa,8BAA8B,EACzC,mBACA,YAAY,WACyB;CACrC,MAAM,EAAE,aAAa,cAAc,yBAAyB;CAE5D,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,SAAS,iBAAiB;CAChC,MAAM,mBAAmB,oBAAoB;CAC7C,MAAM,EAAE,gBAAgB,cACtB,iBAAiB,qBACjB,2BACF;CAEA,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,0CAA0C,EACxD,sDAAsD,eAAe,UACvE,CAAC;EACD,eAAY;YAJd,CAME,qBAAC,QAAD;GACE,YAAW;GACX,eACE,iBAAiB,4BAA4B,EAC3C,UAAU,kBACZ,CAAC;GAEH,SAAQ;aAPV,CASE,oBAAC,aAAD,CAAc,CAAA,GACb,eAAe,YACZ,EAAE,sDAAsD;IACtD,OAAO;IACP,kBAAkB;IAClB,oBAAoB;GACtB,CAAC,IACD,EACE,8DACA,iBACF,CACE;MACR,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EACV,qEACA,uBACF;GACA,eAAe;IACb,iBAAiB,oBAAoB;IACrC,OAAO,wBAAwB,kBAAkB,UAAU,OAAO;GACpE;GACA,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}

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

@@ -0,0 +1,44 @@
+import { useChatContext } from "../../context/ChatContext.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";
+//#region src/components/MessageList/UnreadMessagesSeparator.tsx
+var UNREAD_MESSAGE_SEPARATOR_CLASS = "str-chat__unread-messages-separator";
+var UnreadMessagesSeparator = ({ showCount = true, unreadCount }) => {
+	const { IconXmark } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const channel = useChannel();
+	const { client } = useChatContext();
+	const messagePaginator = useMessagePaginator();
+	return /* @__PURE__ */ jsxs("div", {
+		className: UNREAD_MESSAGE_SEPARATOR_CLASS,
+		"data-testid": "unread-messages-separator",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__unread-messages-separator__text",
+			children: 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: "ghost",
+			"aria-label": t("messageList.unreadMessagesNotification.markMessagesRead.ariaLabel", "Mark messages as read"),
+			circular: true,
+			onClick: () => {
+				client.messageDeliveryReporter.throttledMarkRead(channel);
+				messagePaginator.clearUnreadSnapshot();
+			},
+			size: "sm",
+			variant: "secondary",
+			children: /* @__PURE__ */ jsx(IconXmark, {})
+		})]
+	});
+};
+//#endregion
+export { UNREAD_MESSAGE_SEPARATOR_CLASS, UnreadMessagesSeparator };
+
+//# sourceMappingURL=UnreadMessagesSeparator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadMessagesSeparator.mjs","names":[],"sources":["../../../../src/components/MessageList/UnreadMessagesSeparator.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useChannel,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { Button } from '../Button';\nimport { useMessagePaginator } from '../../hooks';\n\nexport const UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator';\n\nexport type UnreadMessagesSeparatorProps = {\n  /**\n   * Configuration parameter to determine, whether the unread count is to be shown on the component. Enabled by default.\n   */\n  showCount?: boolean;\n  /**\n   * The count of unread messages to be displayed if enabled.\n   */\n  unreadCount?: number;\n};\n\nexport const UnreadMessagesSeparator = ({\n  showCount = true,\n  unreadCount,\n}: UnreadMessagesSeparatorProps) => {\n  const { IconXmark } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const channel = useChannel();\n  const { client } = useChatContext();\n  const messagePaginator = useMessagePaginator();\n  return (\n    <div\n      className={UNREAD_MESSAGE_SEPARATOR_CLASS}\n      data-testid='unread-messages-separator'\n    >\n      <div className={'str-chat__unread-messages-separator__text'}>\n        {unreadCount && showCount\n          ? t('messageList.unreadMessagesNotification.unread.text', {\n              count: unreadCount,\n              defaultValue_one: '{{count}} unread',\n              defaultValue_other: '{{count}} unread',\n            })\n          : t(\n              'messageList.unreadMessagesNotification.unreadMessages.text',\n              'Unread messages',\n            )}\n      </div>\n      <Button\n        appearance='ghost'\n        aria-label={t(\n          'messageList.unreadMessagesNotification.markMessagesRead.ariaLabel',\n          'Mark messages as read',\n        )}\n        circular\n        onClick={() => {\n          client.messageDeliveryReporter.throttledMarkRead(channel);\n          messagePaginator.clearUnreadSnapshot();\n        }}\n        size='sm'\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAUA,IAAa,iCAAiC;AAa9C,IAAa,2BAA2B,EACtC,YAAY,MACZ,kBACkC;CAClC,MAAM,EAAE,cAAc,yBAAyB;CAC/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,mBAAmB,oBAAoB;CAC7C,OACE,qBAAC,OAAD;EACE,WAAW;EACX,eAAY;YAFd,CAIE,oBAAC,OAAD;GAAK,WAAW;aACb,eAAe,YACZ,EAAE,sDAAsD;IACtD,OAAO;IACP,kBAAkB;IAClB,oBAAoB;GACtB,CAAC,IACD,EACE,8DACA,iBACF;EACD,CAAA,GACL,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EACV,qEACA,uBACF;GACA,UAAA;GACA,eAAe;IACb,OAAO,wBAAwB,kBAAkB,OAAO;IACxD,iBAAiB,oBAAoB;GACvC;GACA,MAAK;GACL,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}

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

@@ -0,0 +1,358 @@
+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 { MessageTranslationViewProvider } from "../../context/MessageTranslationViewContext.mjs";
+import { useMessagePaginator } from "../../hooks/useMessagePaginator.mjs";
+import { GiphyPreviewMessage } from "./GiphyPreviewMessage.mjs";
+import { getGroupStyles, getLastReceived, processMessages } from "./utils.mjs";
+import { useLastReadData } from "./hooks/useLastReadData.mjs";
+import { useLastDeliveredData } from "./hooks/useLastDeliveredData.mjs";
+import { MessageListMainPanel } from "./MessageListMainPanel.mjs";
+import { UnreadMessagesSeparator } from "./UnreadMessagesSeparator.mjs";
+import { getMessageSourceKey } from "./messageSourceKey.mjs";
+import { useMarkRead } from "./hooks/useMarkRead.mjs";
+import { NewMessageNotification } from "./NewMessageNotification.mjs";
+import { UnreadMessagesNotification } from "./UnreadMessagesNotification.mjs";
+import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
+import { useGiphyPreview } from "./hooks/VirtualizedMessageList/useGiphyPreview.mjs";
+import { useMessageSetKey } from "./hooks/VirtualizedMessageList/useMessageSetKey.mjs";
+import { useNewMessageNotification } from "./hooks/VirtualizedMessageList/useNewMessageNotification.mjs";
+import { usePrependedMessagesCount } from "./hooks/VirtualizedMessageList/usePrependMessagesCount.mjs";
+import { useScrollToBottomOnNewMessage } from "./hooks/VirtualizedMessageList/useScrollToBottomOnNewMessage.mjs";
+import { useShouldForceScrollToBottom } from "./hooks/VirtualizedMessageList/useShouldForceScrollToBottom.mjs";
+import { useUnreadMessagesNotificationVirtualized } from "./hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.mjs";
+import { FloatingDateSeparator } from "./FloatingDateSeparator.mjs";
+import { EventComponent } from "../EventComponent/EventComponent.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 { EmptyPlaceholder, Header, Item, calculateFirstItemIndex, calculateItemIndex, makeItemsRenderedHandler, messageRenderer } from "./VirtualizedMessageListComponents.mjs";
+import { VirtualizedMessageListContextProvider } from "../../context/VirtualizedMessageListContext.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { WithComponents } from "../../context/WithComponents.mjs";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Virtuoso } from "react-virtuoso";
+//#region src/components/MessageList/VirtualizedMessageList.tsx
+var channelReadSelector = (nextValue) => ({ read: nextValue.read });
+function captureResizeObserverExceededError(e) {
+	if (e.message === "ResizeObserver loop completed with undelivered notifications." || e.message === "ResizeObserver loop limit exceeded") e.stopImmediatePropagation();
+}
+function useCaptureResizeObserverExceededError() {
+	useEffect(() => {
+		window.addEventListener("error", captureResizeObserverExceededError);
+		return () => {
+			window.removeEventListener("error", captureResizeObserverExceededError);
+		};
+	}, []);
+}
+function fractionalItemSize(element) {
+	return element.getBoundingClientRect().height;
+}
+function findMessageIndex(messages, id) {
+	return messages.findIndex((message) => message.id === id);
+}
+function calculateInitialTopMostItemIndex(messages, focusedMessageId) {
+	if (focusedMessageId) {
+		const index = findMessageIndex(messages, focusedMessageId);
+		if (index !== -1) return {
+			align: "center",
+			index
+		};
+	}
+	return messages.length - 1;
+}
+var unreadStateSnapshotSelector = (state) => state;
+var messageFocusSignalSelector = (state) => ({ messageFocusSignal: state.signal });
+var messagePaginatorStateSelector = (state) => ({
+	hasMoreNewer: state.hasMoreHead,
+	isLoading: state.isLoading,
+	messages: state.items ?? []
+});
+var VirtualizedMessageListWithContext = (props) => {
+	const { additionalMessageComposerProps, additionalVirtuosoProps = {}, channel, closeReactionSelectorOnClick, customMessageRenderer, defaultItemHeight, formatDate, groupStyles, hideDeletedMessages = false, hideNewMessageSeparator = false, maxTimeBetweenGroupedMessages, overscan = 0, reactionDetailsSort, renderText, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showAvatar, showUnreadNotificationAlways, sortReactions, stickToBottomScrollBehavior = "smooth", suppressAutoscroll: suppressAutoscrollFromProps = false, withDateSeparator = false } = props;
+	const thread = useThreadContext();
+	const isThreadList = !!thread;
+	const threadHead = useThreadHead();
+	const [suppressAutoscrollWhileLoadingOlder, setSuppressAutoscrollWhileLoadingOlder] = React.useState(false);
+	const suppressAutoscroll = suppressAutoscrollFromProps || suppressAutoscrollWhileLoadingOlder;
+	const loadingOlderRef = useRef(false);
+	const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } = additionalVirtuosoProps;
+	useCaptureResizeObserverExceededError();
+	const { DateSeparator: DateSeparator$1 = DateSeparator, GiphyPreviewMessage: GiphyPreviewMessage$1 = GiphyPreviewMessage, MessageSystem = EventComponent, NewMessageNotification: NewMessageNotification$1 = NewMessageNotification, TypingIndicator, UnreadMessagesNotification: UnreadMessagesNotification$1 = UnreadMessagesNotification, UnreadMessagesSeparator: UnreadMessagesSeparator$1 = UnreadMessagesSeparator, VirtualMessage } = useComponentContext();
+	const virtualMessageOverrides = useMemo(() => ({ MessageUI: VirtualMessage }), [VirtualMessage]);
+	const { client, customClasses } = useChatContext();
+	const messagePaginator = useMessagePaginator();
+	const { hasMoreNewer, isLoading, messages } = useStateStore(messagePaginator.state, messagePaginatorStateSelector);
+	const { messageFocusSignal } = useStateStore(messagePaginator.messageFocusSignal, messageFocusSignalSelector);
+	const channelUnreadUiState = useStateStore(messagePaginator.unreadStateSnapshot, unreadStateSnapshotSelector);
+	const focusedMessageId = messageFocusSignal?.messageId;
+	const virtuoso = useRef(null);
+	const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
+	const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } = useUnreadMessagesNotificationVirtualized({ showAlways: !!showUnreadNotificationAlways });
+	const { giphyPreviewMessage, setGiphyPreviewMessage } = useGiphyPreview(separateGiphyPreview);
+	const processedMessages = useMemo(() => {
+		if (typeof messages === "undefined") return [];
+		if (!withDateSeparator && !hideDeletedMessages && hideNewMessageSeparator && !separateGiphyPreview) return messages;
+		return processMessages({
+			hideDeletedMessages,
+			hideNewMessageSeparator,
+			lastRead,
+			messages,
+			reviewProcessedMessage,
+			setGiphyPreviewMessage,
+			userId: client.userID || "",
+			withDateSeparator
+		});
+	}, [
+		withDateSeparator,
+		hideDeletedMessages,
+		hideNewMessageSeparator,
+		lastRead,
+		messages,
+		messages?.length,
+		client.userID
+	]);
+	/**
+	* This indirection via a ref is needed because Virtuoso’s itemsRendered is set at render time,
+	* while FloatingDateSeparator lives in a child component that may run its hooks in a different order.
+	* Using a ref lets the parent provide the callback to Virtuoso while the child keeps ownership
+	* of the actual handler implementation.
+	*/
+	const floatingDateItemsRenderedRef = useRef(null);
+	const lastOwnMessage = useLastOwnMessage({
+		messages,
+		ownUserId: client.user?.id
+	});
+	const ownMessagesReadByOthers = useLastReadData({
+		channel,
+		lastOwnMessage,
+		messages: messages || [],
+		returnAllReadData
+	});
+	const ownMessagesDeliveredToOthers = useLastDeliveredData({
+		channel,
+		lastOwnMessage,
+		messages: messages || [],
+		returnAllReadData
+	});
+	const lastReceivedMessageId = useMemo(() => getLastReceived(processedMessages), [processedMessages]);
+	const groupStylesFn = groupStyles || getGroupStyles;
+	const messageGroupStyles = useMemo(() => processedMessages.reduce((acc, message, i) => {
+		const style = groupStylesFn(message, processedMessages[i - 1], processedMessages[i + 1], !shouldGroupByUser, maxTimeBetweenGroupedMessages);
+		if (style && message.id) acc[message.id] = style;
+		return acc;
+	}, {}), [
+		maxTimeBetweenGroupedMessages,
+		processedMessages.length,
+		shouldGroupByUser,
+		groupStylesFn
+	]);
+	const { atBottom, isMessageListScrolledToBottom, newMessagesNotification, setIsMessageListScrolledToBottom, setNewMessagesNotification } = useNewMessageNotification(processedMessages, client.userID);
+	useMarkRead({
+		hasMoreNewer,
+		isMessageListScrolledToBottom,
+		messageListIsThread: isThreadList
+	});
+	useIncomingMessageAnnouncements({
+		activeThreadId: thread?.id,
+		channel,
+		ownUserId: channel.getClient().user?.id,
+		threadList: isThreadList
+	});
+	const scrollToBottom = useCallback(async () => {
+		if (messagePaginator.hasMoreHead) await messagePaginator.jumpToTheLatestMessage();
+		else if (virtuoso.current) virtuoso.current.scrollToIndex(processedMessages.length - 1);
+		setNewMessagesNotification(false);
+	}, [
+		messagePaginator,
+		virtuoso,
+		processedMessages,
+		setNewMessagesNotification
+	]);
+	useScrollToBottomOnNewMessage({
+		messages,
+		scrollToBottom,
+		scrollToLatestMessageOnFocus
+	});
+	const numItemsPrepended = usePrependedMessagesCount(processedMessages, withDateSeparator);
+	const { messageSetKey } = useMessageSetKey({ messages });
+	const shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
+	const handleItemsRendered = useMemo(() => makeItemsRenderedHandler([toggleShowUnreadMessagesNotification, (rendered) => floatingDateItemsRenderedRef.current?.(rendered)], processedMessages), [processedMessages, toggleShowUnreadMessagesNotification]);
+	const followOutput = (isAtBottom) => {
+		if (messagePaginator.hasMoreHead || suppressAutoscroll) return false;
+		if (shouldForceScrollToBottom()) return isAtBottom ? stickToBottomScrollBehavior : "auto";
+		return isAtBottom ? stickToBottomScrollBehavior : false;
+	};
+	const computeItemKey = useCallback((index, _, { numItemsPrepended, processedMessages }) => processedMessages[calculateItemIndex(index, numItemsPrepended)].id, []);
+	const canPaginateReplies = useCanPaginateReplies();
+	const atBottomStateChange = (isAtBottom) => {
+		atBottom.current = isAtBottom;
+		setIsMessageListScrolledToBottom(isAtBottom);
+		if (isAtBottom) {
+			if (canPaginateReplies) messagePaginator.toHead();
+			setNewMessagesNotification?.(false);
+		}
+	};
+	const atTopStateChange = (isAtTop) => {
+		if (isAtTop) {
+			if (!canPaginateReplies) return;
+			if (loadingOlderRef.current) return;
+			loadingOlderRef.current = true;
+			setSuppressAutoscrollWhileLoadingOlder(true);
+			messagePaginator.toTail().finally(() => {
+				loadingOlderRef.current = false;
+				setSuppressAutoscrollWhileLoadingOlder(false);
+			});
+		}
+	};
+	useEffect(() => {
+		let scrollTimeout;
+		if (focusedMessageId) {
+			const index = findMessageIndex(processedMessages, focusedMessageId);
+			if (index !== -1) scrollTimeout = setTimeout(() => {
+				virtuoso.current?.scrollToIndex({
+					align: "center",
+					index
+				});
+			}, 0);
+		}
+		return () => {
+			clearTimeout(scrollTimeout);
+		};
+	}, [focusedMessageId, processedMessages]);
+	const id = useStableId();
+	if (!processedMessages) return null;
+	const dialogManagerId = isThreadList ? `virtualized-message-list-dialog-manager-thread-${id}` : `virtualized-message-list-dialog-manager-${id}`;
+	const list = /* @__PURE__ */ jsx(VirtualizedMessageListContextProvider, {
+		value: { scrollToBottom },
+		children: /* @__PURE__ */ jsxs(MessageTranslationViewProvider, { children: [
+			/* @__PURE__ */ jsxs(DialogManagerProvider, {
+				id: dialogManagerId,
+				children: [!isThreadList && showUnreadMessagesNotification && /* @__PURE__ */ jsx(UnreadMessagesNotification$1, { unreadCount: channelUnreadUiState?.unreadCount }), /* @__PURE__ */ jsxs("div", {
+					className: customClasses?.virtualizedMessageList || "str-chat__virtual-list",
+					children: [
+						/* @__PURE__ */ jsx(FloatingDateSeparator, {
+							itemsRenderedRef: floatingDateItemsRenderedRef,
+							processedMessages,
+							withDateSeparator
+						}),
+						/* @__PURE__ */ jsx(Virtuoso, {
+							atBottomStateChange,
+							atBottomThreshold: 100,
+							atTopStateChange,
+							atTopThreshold: 100,
+							className: "str-chat__message-list-scroll",
+							components: {
+								EmptyPlaceholder,
+								Header,
+								Item,
+								...virtuosoComponentsFromProps
+							},
+							computeItemKey,
+							context: {
+								additionalMessageComposerProps,
+								channel,
+								closeReactionSelectorOnClick,
+								customClasses,
+								customMessageRenderer,
+								DateSeparator: DateSeparator$1,
+								firstUnreadMessageId: channelUnreadUiState?.firstUnreadMessageId,
+								focusedMessageId,
+								formatDate,
+								head: threadHead,
+								lastOwnMessage,
+								lastReadDate: channelUnreadUiState?.lastReadAt,
+								lastReadMessageId: channelUnreadUiState?.lastReadMessageId,
+								lastReceivedMessageId,
+								loadingMore: isLoading,
+								messageGroupStyles,
+								MessageSystem,
+								numItemsPrepended,
+								ownMessagesDeliveredToOthers,
+								ownMessagesReadByOthers,
+								processedMessages,
+								reactionDetailsSort,
+								renderText,
+								returnAllReadData,
+								shouldGroupByUser,
+								showAvatar,
+								sortReactions,
+								unreadMessageCount: channelUnreadUiState?.unreadCount,
+								UnreadMessagesSeparator: UnreadMessagesSeparator$1,
+								virtuosoRef: virtuoso
+							},
+							firstItemIndex: calculateFirstItemIndex(numItemsPrepended),
+							followOutput,
+							increaseViewportBy: {
+								bottom: 200,
+								top: 0
+							},
+							initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, focusedMessageId),
+							itemContent: messageRenderer,
+							itemSize: fractionalItemSize,
+							itemsRendered: handleItemsRendered,
+							overscan,
+							ref: virtuoso,
+							style: { overflowX: "hidden" },
+							totalCount: processedMessages.length,
+							...overridingVirtuosoProps,
+							...scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {},
+							...defaultItemHeight ? { defaultItemHeight } : {}
+						}, messageSetKey),
+						/* @__PURE__ */ jsx(NewMessageNotification$1, {
+							newMessageCount: channelUnreadUiState?.unreadCount,
+							showNotification: (newMessagesNotification || hasMoreNewer) && !isMessageListScrolledToBottom
+						}),
+						messages.length > 0 && /* @__PURE__ */ jsx(ScrollToLatestMessageButton, {
+							isMessageListScrolledToBottom,
+							isNotAtLatestMessageSet: hasMoreNewer && messages.length > 0,
+							onClick: scrollToBottom
+						})
+					]
+				})]
+			}),
+			TypingIndicator && /* @__PURE__ */ jsx(TypingIndicator, {
+				isMessageListScrolledToBottom,
+				scrollToBottom
+			}),
+			giphyPreviewMessage && /* @__PURE__ */ jsx(GiphyPreviewMessage$1, { message: giphyPreviewMessage })
+		] })
+	});
+	return VirtualMessage ? /* @__PURE__ */ jsx(WithComponents, {
+		overrides: virtualMessageOverrides,
+		children: list
+	}) : list;
+};
+/**
+* The VirtualizedMessageList component renders a list of messages in a virtualized list.
+* It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx).
+*/
+function VirtualizedMessageList(props) {
+	const channel = useChannel();
+	const thread = useThreadContext();
+	const notificationTarget = useNotificationTarget();
+	const { MessageListMainPanel: MessageListMainPanel$1 = MessageListMainPanel, NotificationList: NotificationList$1 = NotificationList } = useComponentContext();
+	const { read } = useStateStore(channel?.state, channelReadSelector) ?? {};
+	const messages = props.messages;
+	return /* @__PURE__ */ jsxs(MessageListMainPanel$1, { children: [/* @__PURE__ */ jsx(VirtualizedMessageListWithContext, {
+		channel,
+		messages,
+		read,
+		...props
+	}, getMessageSourceKey({
+		channel,
+		thread
+	})), /* @__PURE__ */ jsx(NotificationList$1, { panel: notificationTarget })] });
+}
+//#endregion
+export { VirtualizedMessageList };
+
+//# sourceMappingURL=VirtualizedMessageList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedMessageList.mjs","names":[],"sources":["../../../../src/components/MessageList/VirtualizedMessageList.tsx"],"sourcesContent":["import type { RefObject } from 'react';\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { FloatingDateSeparator } from './FloatingDateSeparator';\nimport type {\n  ComputeItemKey,\n  ScrollSeekConfiguration,\n  ScrollSeekPlaceholderProps,\n  VirtuosoHandle,\n  VirtuosoProps,\n} from 'react-virtuoso';\nimport { Virtuoso } from 'react-virtuoso';\n\nimport { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';\nimport { useLastReadData } from './hooks';\nimport {\n  useGiphyPreview,\n  useMessageSetKey,\n  useNewMessageNotification,\n  usePrependedMessagesCount,\n  useScrollToBottomOnNewMessage,\n  useShouldForceScrollToBottom,\n  useUnreadMessagesNotificationVirtualized,\n} from './hooks/VirtualizedMessageList';\nimport { useMarkRead } from './hooks/useMarkRead';\n\nimport {\n  NotificationList as DefaultNotificationList,\n  useNotificationTarget,\n} from '../Notifications';\nimport { useIncomingMessageAnnouncements } from '../Accessibility';\nimport { NewMessageNotification as DefaultNewMessageNotification } from './NewMessageNotification';\nimport { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';\nimport type { GroupStyle, ProcessMessagesParams, RenderedMessage } from './utils';\nimport { getGroupStyles, getLastReceived, processMessages } from './utils';\nimport type { MessageProps } from '../Message';\nimport { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';\nimport {\n  calculateFirstItemIndex,\n  calculateItemIndex,\n  EmptyPlaceholder,\n  Header,\n  Item,\n  makeItemsRenderedHandler,\n  messageRenderer,\n} from './VirtualizedMessageListComponents';\n\nimport {\n  UnreadMessagesSeparator as DefaultUnreadMessagesSeparator,\n  ScrollToLatestMessageButton,\n} from '../MessageList';\nimport { DateSeparator as DefaultDateSeparator } from '../DateSeparator';\nimport { EventComponent as DefaultMessageSystem } from '../EventComponent';\n\nimport { DialogManagerProvider, useChannel, WithComponents } from '../../context';\nimport type { ChatContextValue } from '../../context/ChatContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport type { ComponentContextValue } from '../../context/ComponentContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { MessageTranslationViewProvider } from '../../context/MessageTranslationViewContext';\nimport { VirtualizedMessageListContextProvider } from '../../context/VirtualizedMessageListContext';\nimport { getMessageSourceKey } from './messageSourceKey';\nimport { useStateStore } from '../../store';\nimport { useThreadContext } from '../Threads';\nimport { useThreadHead } from './hooks/useThreadHead';\nimport { useMessagePaginator } from '../../hooks';\n\nimport type {\n  Channel,\n  LocalMessage,\n  MessageFocusSignalState,\n  MessagePaginatorState,\n  ChannelState as StreamChannelState,\n  TimestampNS,\n  UnreadSnapshotState,\n  UserResponse,\n} from 'stream-chat';\nimport type { UnknownType } from '../../types/types';\nimport { useCanPaginateReplies } from './hooks/useCanPaginateReplies';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { useLastDeliveredData } from './hooks/useLastDeliveredData';\nimport { useLastOwnMessage } from './hooks/useLastOwnMessage';\n\ntype PropsDrilledToMessage =\n  | 'additionalMessageComposerProps'\n  | 'formatDate'\n  | 'reactionDetailsSort'\n  | 'renderText'\n  | 'showAvatar'\n  | 'sortReactions';\n\ntype VirtualizedMessageListPropsForContext =\n  | PropsDrilledToMessage\n  | 'closeReactionSelectorOnClick'\n  | 'customMessageRenderer'\n  // | 'loadingMore'\n  | 'returnAllReadData'\n  | 'shouldGroupByUser';\n\n/**\n * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions)\n */\nexport type VirtuosoContext = Required<\n  Pick<\n    ComponentContextValue,\n    'DateSeparator' | 'MessageSystem' | 'UnreadMessagesSeparator'\n  >\n> &\n  Pick<VirtualizedMessageListProps, VirtualizedMessageListPropsForContext> &\n  Pick<ChatContextValue, 'customClasses'> & {\n    channel: Channel;\n    /** The thread parent message rendered above the replies, or null outside a thread. */\n    head: React.ReactElement | null;\n    /** Latest received message id in the current channel */\n    lastReceivedMessageId: string | null | undefined;\n    loadingMore: boolean;\n    /** Object mapping between the message ID and a string representing the position in the group of a sequence of messages posted by the same user. */\n    messageGroupStyles: Record<string, GroupStyle>;\n    /** Number of messages prepended before the first page of messages. This is needed to calculate the virtual position in the virtual list. */\n    numItemsPrepended: number;\n    /** Mapping of message ID of own messages to the array of users, who were delivered the given message */\n    ownMessagesDeliveredToOthers: Record<string, UserResponse[]>;\n    /** Mapping of message ID of own messages to the array of users, who read the given message */\n    ownMessagesReadByOthers: Record<string, UserResponse[]>;\n    /** The original message list enriched with date separators, omitted deleted messages or giphy previews. */\n    processedMessages: RenderedMessage[];\n    /** Instance of VirtuosoHandle object providing the API to navigate in the virtualized list by various scroll actions. */\n    virtuosoRef: RefObject<VirtuosoHandle | null>;\n    /** Latest own message in currently displayed message set. */\n    lastOwnMessage?: LocalMessage;\n    /** Message id which was marked as unread. ALl the messages following this message are considered unrea.  */\n    firstUnreadMessageId: string | null;\n    /** Unix nanoseconds, as `messagePaginator.unreadStateSnapshot.lastReadAt` carries it. */\n    lastReadDate: TimestampNS | null;\n    /**\n     * The ID of the last message considered read by the current user in the current channel.\n     * All the messages following this message are considered unread.\n     */\n    lastReadMessageId: string | null;\n    /** The number of unread messages in the current channel. */\n    unreadMessageCount: number;\n    /** Message id currently targeted by paginator focus signal. */\n    focusedMessageId?: string | null;\n  };\n\ntype VirtualizedMessageListWithContextProps = VirtualizedMessageListProps & {\n  channel: Channel;\n  // hasMore: boolean;\n  // hasMoreNewer: boolean;\n  // jumpToLatestMessage: () => Promise<void>;\n  // loadingMore: boolean;\n  // loadingMoreNewer: boolean;\n  read?: StreamChannelState['read'];\n};\n\nconst channelReadSelector = (nextValue: { read: StreamChannelState['read'] }) => ({\n  read: nextValue.read,\n});\n\nfunction captureResizeObserverExceededError(e: ErrorEvent) {\n  if (\n    e.message === 'ResizeObserver loop completed with undelivered notifications.' ||\n    e.message === 'ResizeObserver loop limit exceeded'\n  ) {\n    e.stopImmediatePropagation();\n  }\n}\n\nfunction useCaptureResizeObserverExceededError() {\n  useEffect(() => {\n    window.addEventListener('error', captureResizeObserverExceededError);\n    return () => {\n      window.removeEventListener('error', captureResizeObserverExceededError);\n    };\n  }, []);\n}\n\nfunction fractionalItemSize(element: HTMLElement) {\n  return element.getBoundingClientRect().height;\n}\n\nfunction findMessageIndex(messages: RenderedMessage[], id: string) {\n  return messages.findIndex((message) => message.id === id);\n}\n\nfunction calculateInitialTopMostItemIndex(\n  messages: RenderedMessage[],\n  focusedMessageId: string | undefined,\n) {\n  if (focusedMessageId) {\n    const index = findMessageIndex(messages, focusedMessageId);\n    if (index !== -1) {\n      return { align: 'center', index } as const;\n    }\n  }\n  return messages.length - 1;\n}\n\nconst unreadStateSnapshotSelector = (state: UnreadSnapshotState) => state;\nconst messageFocusSignalSelector = (state: MessageFocusSignalState) => ({\n  messageFocusSignal: state.signal,\n});\n\nconst messagePaginatorStateSelector = (state: MessagePaginatorState) => ({\n  hasMoreNewer: state.hasMoreHead,\n  isLoading: state.isLoading,\n  messages: state.items ?? [],\n});\n\nconst VirtualizedMessageListWithContext = (\n  props: VirtualizedMessageListWithContextProps,\n) => {\n  const {\n    additionalMessageComposerProps,\n    additionalVirtuosoProps = {},\n    channel,\n    // channelUnreadUiState,\n    closeReactionSelectorOnClick,\n    customMessageRenderer,\n    defaultItemHeight,\n    formatDate,\n    groupStyles,\n    hideDeletedMessages = false,\n    // hasMoreNewer,\n    hideNewMessageSeparator = false,\n    maxTimeBetweenGroupedMessages,\n    // jumpToLatestMessage,\n    // loadingMore,\n    // loadMore,\n    // loadMoreNewer,\n    overscan = 0,\n    // messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,\n    // messages,\n    // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component\n    reactionDetailsSort,\n    renderText,\n    returnAllReadData = false,\n    reviewProcessedMessage,\n    scrollSeekPlaceHolder,\n    scrollToLatestMessageOnFocus = false,\n    separateGiphyPreview = false,\n    shouldGroupByUser = false,\n    showAvatar,\n    showUnreadNotificationAlways,\n    sortReactions,\n    stickToBottomScrollBehavior = 'smooth',\n    suppressAutoscroll: suppressAutoscrollFromProps = false,\n    withDateSeparator = false,\n  } = props;\n  const thread = useThreadContext();\n  const isThreadList = !!thread;\n  const threadHead = useThreadHead();\n  const [suppressAutoscrollWhileLoadingOlder, setSuppressAutoscrollWhileLoadingOlder] =\n    React.useState(false);\n  const suppressAutoscroll =\n    suppressAutoscrollFromProps || suppressAutoscrollWhileLoadingOlder;\n  const loadingOlderRef = useRef(false);\n\n  const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } =\n    additionalVirtuosoProps;\n\n  // Stops errors generated from react-virtuoso to bubble up\n  // to Sentry or other tracking tools.\n  useCaptureResizeObserverExceededError();\n\n  const {\n    DateSeparator = DefaultDateSeparator,\n    GiphyPreviewMessage = DefaultGiphyPreviewMessage,\n    MessageSystem = DefaultMessageSystem,\n    NewMessageNotification = DefaultNewMessageNotification,\n    TypingIndicator,\n    UnreadMessagesNotification = DefaultUnreadMessagesNotification,\n    UnreadMessagesSeparator = DefaultUnreadMessagesSeparator,\n    VirtualMessage,\n  } = useComponentContext();\n  // `VirtualMessage` overrides `MessageUI` for the messages this list renders, so it is\n  // applied to this subtree's `ComponentContext` rather than drilled down to each `Message`.\n  // Memoized so the provider does not hand every consumer below a new value each render.\n  const virtualMessageOverrides = useMemo(\n    () => ({ MessageUI: VirtualMessage }),\n    [VirtualMessage],\n  );\n\n  const { client, customClasses } = useChatContext();\n  const messagePaginator = useMessagePaginator();\n\n  const { hasMoreNewer, isLoading, messages } = useStateStore(\n    messagePaginator.state,\n    messagePaginatorStateSelector,\n  );\n  const { messageFocusSignal } = useStateStore(\n    messagePaginator.messageFocusSignal,\n    messageFocusSignalSelector,\n  );\n\n  const channelUnreadUiState = useStateStore(\n    messagePaginator.unreadStateSnapshot,\n    unreadStateSnapshotSelector,\n  );\n  const focusedMessageId = messageFocusSignal?.messageId;\n\n  const virtuoso = useRef<VirtuosoHandle>(null);\n\n  const lastRead = useMemo(() => channel.lastRead?.(), [channel]);\n\n  const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } =\n    useUnreadMessagesNotificationVirtualized({\n      showAlways: !!showUnreadNotificationAlways,\n    });\n\n  const { giphyPreviewMessage, setGiphyPreviewMessage } =\n    useGiphyPreview(separateGiphyPreview);\n\n  const processedMessages = useMemo(() => {\n    if (typeof messages === 'undefined') {\n      return [];\n    }\n\n    if (\n      !withDateSeparator &&\n      !hideDeletedMessages &&\n      hideNewMessageSeparator &&\n      !separateGiphyPreview\n    ) {\n      return messages;\n    }\n\n    return processMessages({\n      hideDeletedMessages,\n      hideNewMessageSeparator,\n      lastRead,\n      messages,\n      reviewProcessedMessage,\n      setGiphyPreviewMessage,\n      userId: client.userID || '',\n      withDateSeparator,\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    withDateSeparator,\n    hideDeletedMessages,\n    hideNewMessageSeparator,\n    lastRead,\n    messages,\n    messages?.length,\n    client.userID,\n  ]);\n\n  /**\n   * This indirection via a ref is needed because Virtuoso’s itemsRendered is set at render time,\n   * while FloatingDateSeparator lives in a child component that may run its hooks in a different order.\n   * Using a ref lets the parent provide the callback to Virtuoso while the child keeps ownership\n   * of the actual handler implementation.\n   */\n  const floatingDateItemsRenderedRef = useRef<\n    ((rendered: RenderedMessage[]) => void) | null\n  >(null);\n\n  const lastOwnMessage = useLastOwnMessage({ messages, ownUserId: client.user?.id });\n\n  // get the mapping of own messages to array of users who read them\n  const ownMessagesReadByOthers = useLastReadData({\n    channel,\n    lastOwnMessage,\n    messages: messages || [],\n    returnAllReadData,\n  });\n\n  const ownMessagesDeliveredToOthers = useLastDeliveredData({\n    channel,\n    lastOwnMessage,\n    messages: messages || [],\n    returnAllReadData,\n  });\n\n  const lastReceivedMessageId = useMemo(\n    () => getLastReceived(processedMessages),\n    [processedMessages],\n  );\n\n  const groupStylesFn = groupStyles || getGroupStyles;\n  const messageGroupStyles = useMemo(\n    () =>\n      processedMessages.reduce<Record<string, GroupStyle>>((acc, message, i) => {\n        const style = groupStylesFn(\n          message,\n          processedMessages[i - 1],\n          processedMessages[i + 1],\n          !shouldGroupByUser,\n          maxTimeBetweenGroupedMessages,\n        );\n        if (style && message.id) acc[message.id] = style;\n        return acc;\n      }, {}),\n    // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      maxTimeBetweenGroupedMessages,\n      processedMessages.length,\n      shouldGroupByUser,\n      groupStylesFn,\n    ],\n  );\n\n  const {\n    atBottom,\n    isMessageListScrolledToBottom,\n    newMessagesNotification,\n    setIsMessageListScrolledToBottom,\n    setNewMessagesNotification,\n  } = useNewMessageNotification(processedMessages, client.userID);\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  const scrollToBottom = useCallback(async () => {\n    if (messagePaginator.hasMoreHead) {\n      await messagePaginator.jumpToTheLatestMessage();\n    } else if (virtuoso.current) {\n      virtuoso.current.scrollToIndex(processedMessages.length - 1);\n    }\n\n    setNewMessagesNotification(false);\n  }, [\n    messagePaginator,\n    virtuoso,\n    processedMessages,\n    setNewMessagesNotification,\n    // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage\n    // processedMessages.length,\n    // hasMoreNewer,\n    // jumpToLatestMessage,\n  ]);\n\n  useScrollToBottomOnNewMessage({\n    messages,\n    scrollToBottom,\n    scrollToLatestMessageOnFocus,\n  });\n\n  const numItemsPrepended = usePrependedMessagesCount(\n    processedMessages,\n    withDateSeparator,\n  );\n\n  const { messageSetKey } = useMessageSetKey({ messages });\n\n  const shouldForceScrollToBottom = useShouldForceScrollToBottom(\n    processedMessages,\n    client.userID,\n  );\n\n  const handleItemsRendered = useMemo(\n    () =>\n      makeItemsRenderedHandler(\n        [\n          toggleShowUnreadMessagesNotification,\n          (rendered) => floatingDateItemsRenderedRef.current?.(rendered),\n        ],\n        processedMessages,\n      ),\n    [processedMessages, toggleShowUnreadMessagesNotification],\n  );\n  const followOutput = (isAtBottom: boolean) => {\n    if (messagePaginator.hasMoreHead || suppressAutoscroll) {\n      return false;\n    }\n\n    if (shouldForceScrollToBottom()) {\n      return isAtBottom ? stickToBottomScrollBehavior : 'auto';\n    }\n    // a message from another user has been received - don't scroll to bottom unless already there\n    return isAtBottom ? stickToBottomScrollBehavior : false;\n  };\n\n  const computeItemKey = useCallback<ComputeItemKey<UnknownType, VirtuosoContext>>(\n    (index, _, { numItemsPrepended, processedMessages }) =>\n      processedMessages[calculateItemIndex(index, numItemsPrepended)].id,\n    [],\n  );\n\n  const canPaginateReplies = useCanPaginateReplies();\n\n  const atBottomStateChange = (isAtBottom: boolean) => {\n    atBottom.current = isAtBottom;\n    setIsMessageListScrolledToBottom(isAtBottom);\n\n    if (isAtBottom) {\n      // An empty thread is at both ends at once, so Virtuoso reports both on mount — see\n      // `useCanPaginateReplies` for why that must not become a request.\n      if (canPaginateReplies) messagePaginator.toHead();\n      // loadMoreNewer?.(messageLimit);\n      setNewMessagesNotification?.(false);\n    }\n  };\n  const atTopStateChange = (isAtTop: boolean) => {\n    if (isAtTop) {\n      if (!canPaginateReplies) return;\n      if (loadingOlderRef.current) return;\n      loadingOlderRef.current = true;\n      setSuppressAutoscrollWhileLoadingOlder(true);\n      void messagePaginator.toTail().finally(() => {\n        loadingOlderRef.current = false;\n        setSuppressAutoscrollWhileLoadingOlder(false);\n      });\n    }\n  };\n\n  useEffect(() => {\n    let scrollTimeout: ReturnType<typeof setTimeout>;\n    if (focusedMessageId) {\n      const index = findMessageIndex(processedMessages, focusedMessageId);\n      if (index !== -1) {\n        scrollTimeout = setTimeout(() => {\n          virtuoso.current?.scrollToIndex({ align: 'center', index });\n        }, 0);\n      }\n    }\n    return () => {\n      clearTimeout(scrollTimeout);\n    };\n  }, [focusedMessageId, processedMessages]);\n\n  const id = useStableId();\n\n  if (!processedMessages) return null;\n\n  const dialogManagerId = isThreadList\n    ? `virtualized-message-list-dialog-manager-thread-${id}`\n    : `virtualized-message-list-dialog-manager-${id}`;\n\n  const list = (\n    <VirtualizedMessageListContextProvider value={{ scrollToBottom }}>\n      <MessageTranslationViewProvider>\n        <DialogManagerProvider id={dialogManagerId}>\n          {!isThreadList && showUnreadMessagesNotification && (\n            <UnreadMessagesNotification unreadCount={channelUnreadUiState?.unreadCount} />\n          )}\n          <div\n            className={customClasses?.virtualizedMessageList || 'str-chat__virtual-list'}\n          >\n            <FloatingDateSeparator\n              itemsRenderedRef={floatingDateItemsRenderedRef}\n              processedMessages={processedMessages}\n              withDateSeparator={withDateSeparator}\n            />\n            <Virtuoso<UnknownType, VirtuosoContext>\n              atBottomStateChange={atBottomStateChange}\n              atBottomThreshold={100}\n              atTopStateChange={atTopStateChange}\n              atTopThreshold={100}\n              className='str-chat__message-list-scroll'\n              components={{\n                EmptyPlaceholder,\n                Header,\n                Item,\n                ...virtuosoComponentsFromProps,\n              }}\n              computeItemKey={computeItemKey}\n              context={{\n                additionalMessageComposerProps,\n                channel,\n                closeReactionSelectorOnClick,\n                customClasses,\n                customMessageRenderer,\n                DateSeparator,\n                firstUnreadMessageId: channelUnreadUiState?.firstUnreadMessageId,\n                focusedMessageId,\n                formatDate,\n                head: threadHead,\n                lastOwnMessage,\n                lastReadDate: channelUnreadUiState?.lastReadAt,\n                lastReadMessageId: channelUnreadUiState?.lastReadMessageId,\n                lastReceivedMessageId,\n                loadingMore: isLoading,\n                messageGroupStyles,\n                MessageSystem,\n                numItemsPrepended,\n                ownMessagesDeliveredToOthers,\n                ownMessagesReadByOthers,\n                processedMessages,\n                reactionDetailsSort,\n                renderText,\n                returnAllReadData,\n                shouldGroupByUser,\n                showAvatar,\n                sortReactions,\n                unreadMessageCount: channelUnreadUiState?.unreadCount,\n                UnreadMessagesSeparator,\n                virtuosoRef: virtuoso,\n              }}\n              firstItemIndex={calculateFirstItemIndex(numItemsPrepended)}\n              followOutput={followOutput}\n              increaseViewportBy={{ bottom: 200, top: 0 }}\n              initialTopMostItemIndex={calculateInitialTopMostItemIndex(\n                processedMessages,\n                focusedMessageId,\n              )}\n              itemContent={messageRenderer}\n              itemSize={fractionalItemSize}\n              itemsRendered={handleItemsRendered}\n              key={messageSetKey}\n              overscan={overscan}\n              ref={virtuoso}\n              style={{ overflowX: 'hidden' }}\n              totalCount={processedMessages.length}\n              {...overridingVirtuosoProps}\n              {...(scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {})}\n              {...(defaultItemHeight ? { defaultItemHeight } : {})}\n            />\n            <NewMessageNotification\n              newMessageCount={channelUnreadUiState?.unreadCount}\n              showNotification={\n                (newMessagesNotification || hasMoreNewer) &&\n                !isMessageListScrolledToBottom\n              }\n            />\n            {/* An empty list has nothing to jump to. Gate on the message count rather than on\n                  scroll position alone: a list with no content can legitimately report \"not at\n                  bottom\", which would otherwise render a dead affordance. */}\n            {messages.length > 0 && (\n              <ScrollToLatestMessageButton\n                isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n                isNotAtLatestMessageSet={hasMoreNewer && messages.length > 0}\n                onClick={scrollToBottom}\n              />\n            )}\n          </div>\n        </DialogManagerProvider>\n        {TypingIndicator && (\n          <TypingIndicator\n            isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n            scrollToBottom={scrollToBottom}\n          />\n        )}\n        {giphyPreviewMessage && <GiphyPreviewMessage message={giphyPreviewMessage} />}\n      </MessageTranslationViewProvider>\n    </VirtualizedMessageListContextProvider>\n  );\n\n  // Only wrap when there is something to override, so the common case adds no provider.\n  return VirtualMessage ? (\n    <WithComponents overrides={virtualMessageOverrides}>{list}</WithComponents>\n  ) : (\n    list\n  );\n};\n\nexport type VirtualizedMessageListProps = Partial<\n  Pick<MessageProps, PropsDrilledToMessage>\n> & {\n  /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */\n  additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext>;\n  /** If true, picking a reaction from the `ReactionSelector` component will close the selector */\n  closeReactionSelectorOnClick?: boolean;\n  /** Custom render function, if passed, certain UI props are ignored */\n  customMessageRenderer?: (\n    messageList: RenderedMessage[],\n    index: number,\n  ) => React.ReactElement;\n  /** @deprecated Use additionalVirtuosoProps.defaultItemHeight instead. Will be removed with next major release - `v11.0.0`.\n   * If set, the default item height is used for the calculation of the total list height. Use if you expect messages with a lot of height variance\n   * */\n  defaultItemHeight?: number;\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 or not the list has more items to load */\n  // hasMore?: boolean;\n  // /** Whether or not the list has newer items to load */\n  // hasMoreNewer?: boolean;\n  /** Hides the `MessageDeleted` components from the list, defaults to `false` */\n  hideDeletedMessages?: boolean;\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  // /** 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 new 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  /** Optional prop to override the messages available from the active message paginator. */\n  messages?: LocalMessage[];\n  /**\n   * @deprecated Use additionalVirtuosoProps.overscan instead. Will be removed with next major release - `v11.0.0`.\n   * The amount of extra content the list should render in addition to what's necessary to fill in the viewport\n   */\n  overscan?: number;\n  /** Keep track of read receipts for each message sent by the user. When disabled, only the last own message delivery / read status is rendered. */\n  returnAllReadData?: boolean;\n  /**\n   * Allows to review changes introduced to messages array on per message basis (e.g. date separator injected 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 `VirtualizedMessageList`.\n   */\n  reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];\n  /**\n   * @deprecated Pass additionalVirtuosoProps.scrollSeekConfiguration and specify the placeholder in additionalVirtuosoProps.components.ScrollSeekPlaceholder instead.  Will be removed with next major release - `v11.0.0`.\n   * Performance improvement by showing placeholders if user scrolls fast through list.\n   * it can be used like this:\n   * ```\n   *  {\n   *    enter: (velocity) => Math.abs(velocity) > 120,\n   *    exit: (velocity) => Math.abs(velocity) < 40,\n   *    change: () => null,\n   *    placeholder: ({index, height})=> <div style={{height: height + \"px\"}}>{index}</div>,\n   *  }\n   *  ```\n   */\n  scrollSeekPlaceHolder?: ScrollSeekConfiguration & {\n    placeholder: React.ComponentType<ScrollSeekPlaceholderProps>;\n  };\n  /** When `true`, the list will scroll to the latest message when the window regains focus */\n  scrollToLatestMessageOnFocus?: boolean;\n  /** If true, the Giphy preview will render as a separate component above the `MessageInput`, rather than inline with the other messages in the list */\n  separateGiphyPreview?: boolean;\n  /** If true, group messages belonging to the same user, otherwise show each message individually */\n  shouldGroupByUser?: boolean;\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  /** The scrollTo behavior when new messages appear. Use `\"smooth\"` for regular chat channels, and `\"auto\"` (which results in instant scroll to bottom) if you expect high throughput. */\n  stickToBottomScrollBehavior?: 'smooth' | 'auto';\n  /** If true, prevents autoscroll-to-bottom behavior on new messages. */\n  suppressAutoscroll?: boolean;\n  /** Injects date separator components into the list, defaults to `false` */\n  withDateSeparator?: boolean;\n};\n\n/**\n * The VirtualizedMessageList component renders a list of messages in a virtualized list.\n * It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx).\n */\nexport function VirtualizedMessageList(props: VirtualizedMessageListProps) {\n  const channel = useChannel();\n  const thread = useThreadContext();\n  const notificationTarget = useNotificationTarget();\n  const {\n    MessageListMainPanel = DefaultMessageListMainPanel,\n    NotificationList = DefaultNotificationList,\n  } = useComponentContext();\n\n  const { read } = useStateStore(channel?.state, channelReadSelector) ?? {};\n\n  const messages = props.messages; // || contextMessages;\n\n  // See the note in `MessageList`: the panel and the notification area sit above the key, so a\n  // notification keeps its element, its countdown and its box across a switch. Here it also puts\n  // them above `VirtualizedMessageListWithContext`'s `if (!processedMessages) return null`, which\n  // would otherwise take the notification area down with the list.\n  // todo: finalize the props shape for VirtualizedMessageList\n  return (\n    <MessageListMainPanel>\n      <VirtualizedMessageListWithContext\n        channel={channel}\n        // See the note in MessageList: this list's local state -- Virtuoso's scroll offset above all\n        // -- is scoped to whatever it is showing, a thread's replies or a channel's messages.\n        key={getMessageSourceKey({ channel, thread })}\n        // channelUnreadUiState={props.channelUnreadUiState ?? channelUnreadUiState}\n        // hasMore={!!hasMore}\n        // hasMoreNewer={!!hasMoreNewer}\n        // jumpToLatestMessage={jumpToLatestMessage}\n        // loadingMore={!!loadingMore}\n        // loadingMoreNewer={!!loadingMoreNewer}\n        // loadMore={loadMore}\n        // loadMoreNewer={loadMoreNewer}\n        messages={messages}\n        read={read}\n        {...props}\n      />\n      <NotificationList panel={notificationTarget} />\n    </MessageListMainPanel>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,93 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { EmptyStateIndicator } from "../EmptyStateIndicator/EmptyStateIndicator.mjs";
+import { LoadingIndicator } from "../Loading/LoadingIndicator.mjs";
+import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from "./utils.mjs";
+import { Message } from "../Message/Message.mjs";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import throttle from "lodash.throttle";
+//#region src/components/MessageList/VirtualizedMessageListComponents.tsx
+var PREPEND_OFFSET = 10 ** 7;
+function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
+	return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
+}
+function calculateFirstItemIndex(numItemsPrepended) {
+	return PREPEND_OFFSET - numItemsPrepended;
+}
+var makeItemsRenderedHandler = (renderedItemsActions, processedMessages) => throttle((items) => {
+	const renderedMessages = items.map((item) => {
+		if (!item.originalIndex) return void 0;
+		return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];
+	}).filter((msg) => !!msg);
+	renderedItemsActions.forEach((action) => action(renderedMessages));
+}, 200);
+var Item = ({ context, ...props }) => {
+	if (!context) return /* @__PURE__ */ jsx(Fragment$1, {});
+	const message = context.processedMessages[calculateItemIndex(props["data-item-index"], context.numItemsPrepended)];
+	const groupStyles = context.messageGroupStyles[message.id];
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: context?.customClasses?.virtualMessage || clsx("str-chat__virtual-list-message-wrapper str-chat__li", { [`str-chat__li--${groupStyles}`]: groupStyles })
+	});
+};
+var Header = ({ context }) => {
+	const { LoadingIndicator: LoadingIndicator$1 = LoadingIndicator } = useComponentContext();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [context?.head, context?.loadingMore && LoadingIndicator$1 && /* @__PURE__ */ jsx("div", {
+		className: "str-chat__virtual-list__loading",
+		children: /* @__PURE__ */ jsx(LoadingIndicator$1, {})
+	})] });
+};
+var EmptyPlaceholder = ({ context }) => {
+	const isThreadList = !!useThreadContext();
+	const { EmptyStateIndicator: EmptyStateIndicator$1 = EmptyStateIndicator } = useComponentContext();
+	if (typeof context?.processedMessages !== "undefined" && context.processedMessages.length > 0) return null;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: EmptyStateIndicator$1 && /* @__PURE__ */ jsx(EmptyStateIndicator$1, { listType: isThreadList ? "thread" : "message" }) });
+};
+var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
+	const { additionalMessageComposerProps, channel, closeReactionSelectorOnClick, customMessageRenderer, DateSeparator, firstUnreadMessageId, focusedMessageId, formatDate, lastOwnMessage, lastReadDate, lastReadMessageId, lastReceivedMessageId, messageGroupStyles, MessageSystem, numItemsPrepended, ownMessagesDeliveredToOthers, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, renderText, returnAllReadData, showAvatar, sortReactions, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef } = virtuosoContext;
+	const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
+	if (customMessageRenderer) return customMessageRenderer(messageList, streamMessageIndex);
+	const message = messageList[streamMessageIndex];
+	if (!message || isIntroMessage(message)) return /* @__PURE__ */ jsx("div", { style: { height: "1px" } });
+	if (isDateSeparatorMessage(message)) return DateSeparator ? /* @__PURE__ */ jsx(DateSeparator, {
+		date: message.date,
+		unread: message.unread
+	}) : null;
+	if (message.type === "system") return MessageSystem ? /* @__PURE__ */ jsx(MessageSystem, { message }) : null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [getIsFirstUnreadMessage({
+		channel,
+		firstUnreadMessageId,
+		isFirstMessage: streamMessageIndex === 0,
+		lastReadAt: lastReadDate,
+		lastReadMessageId,
+		message,
+		previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : void 0,
+		unreadCount: unreadMessageCount
+	}) && /* @__PURE__ */ jsx("div", {
+		className: "str-chat__unread-messages-separator-wrapper",
+		children: /* @__PURE__ */ jsx(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })
+	}), /* @__PURE__ */ jsx(Message, {
+		additionalMessageComposerProps,
+		autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom,
+		closeReactionSelectorOnClick,
+		deliveredTo: ownMessagesDeliveredToOthers[message.id] || [],
+		formatDate,
+		groupStyles: [messageGroupStyles[message.id] ?? ""],
+		highlighted: focusedMessageId === message.id,
+		lastOwnMessage,
+		lastReceivedId: lastReceivedMessageId,
+		message,
+		reactionDetailsSort,
+		readBy: ownMessagesReadByOthers[message.id] || [],
+		renderText,
+		returnAllReadData,
+		showAvatar,
+		sortReactions
+	})] });
+};
+//#endregion
+export { EmptyPlaceholder, Header, Item, calculateFirstItemIndex, calculateItemIndex, makeItemsRenderedHandler, messageRenderer };
+
+//# sourceMappingURL=VirtualizedMessageListComponents.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedMessageListComponents.mjs","names":[],"sources":["../../../../src/components/MessageList/VirtualizedMessageListComponents.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport throttle from 'lodash.throttle';\nimport React from 'react';\nimport type { ItemProps, ListItem } from 'react-virtuoso';\n\nimport { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';\nimport { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';\nimport { Message } from '../Message';\n\nimport { useComponentContext } from '../../context';\nimport type { GroupStyle, RenderedMessage } from './utils';\nimport { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';\nimport type { VirtuosoContext } from './VirtualizedMessageList';\nimport type { UnknownType } from '../../types/types';\nimport { useThreadContext } from '../Threads';\n\nconst PREPEND_OFFSET = 10 ** 7;\n\nexport function calculateItemIndex(virtuosoIndex: number, numItemsPrepended: number) {\n  return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;\n}\n\nexport function calculateFirstItemIndex(numItemsPrepended: number) {\n  return PREPEND_OFFSET - numItemsPrepended;\n}\n\nexport const makeItemsRenderedHandler = (\n  renderedItemsActions: Array<(msg: RenderedMessage[]) => void>,\n  processedMessages: RenderedMessage[],\n) =>\n  throttle((items: ListItem<UnknownType>[]) => {\n    const renderedMessages = items\n      .map((item) => {\n        if (!item.originalIndex) return undefined;\n        return processedMessages[calculateItemIndex(item.originalIndex, PREPEND_OFFSET)];\n      })\n      .filter((msg) => !!msg);\n    renderedItemsActions.forEach((action) =>\n      action(renderedMessages as RenderedMessage[]),\n    );\n  }, 200);\n\ntype CommonVirtuosoComponentProps = {\n  context?: VirtuosoContext;\n};\n// using 'display: inline-block'\n// traps CSS margins of the item elements, preventing incorrect item measurements\nexport const Item = ({ context, ...props }: ItemProps & CommonVirtuosoComponentProps) => {\n  if (!context) return <></>;\n\n  const message =\n    context.processedMessages[\n      calculateItemIndex(props['data-item-index'], context.numItemsPrepended)\n    ];\n  const groupStyles: GroupStyle = context.messageGroupStyles[message.id];\n\n  return (\n    <div\n      {...props}\n      className={\n        context?.customClasses?.virtualMessage ||\n        clsx('str-chat__virtual-list-message-wrapper str-chat__li', {\n          [`str-chat__li--${groupStyles}`]: groupStyles,\n        })\n      }\n    />\n  );\n};\nexport const Header = ({ context }: CommonVirtuosoComponentProps) => {\n  const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext();\n\n  return (\n    <>\n      {context?.head}\n      {context?.loadingMore && LoadingIndicator && (\n        <div className='str-chat__virtual-list__loading'>\n          <LoadingIndicator />\n        </div>\n      )}\n    </>\n  );\n};\nexport const EmptyPlaceholder = ({ context }: CommonVirtuosoComponentProps) => {\n  const thread = useThreadContext();\n  const isThreadList = !!thread;\n  const { EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext();\n  // prevent showing that there are no messages if there actually are messages (for some reason virtuoso decides to render empty placeholder first, even though it has the totalCount prop > 0)\n  if (\n    typeof context?.processedMessages !== 'undefined' &&\n    context.processedMessages.length > 0\n  )\n    return null;\n\n  return (\n    <>\n      {EmptyStateIndicator && (\n        <EmptyStateIndicator listType={isThreadList ? 'thread' : 'message'} />\n      )}\n    </>\n  );\n};\n\nexport const messageRenderer = (\n  virtuosoIndex: number,\n  _data: UnknownType,\n  virtuosoContext: VirtuosoContext,\n) => {\n  const {\n    additionalMessageComposerProps,\n    channel,\n    closeReactionSelectorOnClick,\n    customMessageRenderer,\n    DateSeparator,\n    firstUnreadMessageId,\n    focusedMessageId,\n    formatDate,\n    lastOwnMessage,\n    lastReadDate,\n    lastReadMessageId,\n    lastReceivedMessageId,\n    messageGroupStyles,\n    MessageSystem,\n    numItemsPrepended,\n    ownMessagesDeliveredToOthers,\n    ownMessagesReadByOthers,\n    processedMessages: messageList,\n    reactionDetailsSort,\n    renderText,\n    returnAllReadData,\n    showAvatar,\n    sortReactions,\n    unreadMessageCount = 0,\n    UnreadMessagesSeparator,\n    virtuosoRef,\n  } = virtuosoContext;\n\n  const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);\n\n  if (customMessageRenderer) {\n    return customMessageRenderer(messageList, streamMessageIndex);\n  }\n\n  const message = messageList[streamMessageIndex];\n\n  if (!message || isIntroMessage(message)) return <div style={{ height: '1px' }}></div>; // returning null or zero height breaks the virtuoso\n\n  if (isDateSeparatorMessage(message)) {\n    return DateSeparator ? (\n      <DateSeparator date={message.date} unread={message.unread} />\n    ) : null;\n  }\n\n  if (message.type === 'system') {\n    return MessageSystem ? <MessageSystem message={message} /> : null;\n  }\n\n  const isFirstUnreadMessage = getIsFirstUnreadMessage({\n    channel,\n    firstUnreadMessageId,\n    isFirstMessage: streamMessageIndex === 0,\n    lastReadAt: lastReadDate,\n    lastReadMessageId,\n    message,\n    previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : undefined,\n    unreadCount: unreadMessageCount,\n  });\n\n  return (\n    <>\n      {isFirstUnreadMessage && (\n        <div className='str-chat__unread-messages-separator-wrapper'>\n          <UnreadMessagesSeparator unreadCount={unreadMessageCount} />\n        </div>\n      )}\n      <Message\n        additionalMessageComposerProps={additionalMessageComposerProps}\n        autoscrollToBottom={virtuosoRef.current?.autoscrollToBottom}\n        closeReactionSelectorOnClick={closeReactionSelectorOnClick}\n        deliveredTo={ownMessagesDeliveredToOthers[message.id] || []}\n        formatDate={formatDate}\n        groupStyles={[messageGroupStyles[message.id] ?? '']}\n        highlighted={focusedMessageId === message.id}\n        lastOwnMessage={lastOwnMessage}\n        lastReceivedId={lastReceivedMessageId}\n        message={message}\n        reactionDetailsSort={reactionDetailsSort}\n        readBy={ownMessagesReadByOthers[message.id] || []}\n        renderText={renderText}\n        returnAllReadData={returnAllReadData}\n        showAvatar={showAvatar}\n        sortReactions={sortReactions}\n      />\n    </>\n  );\n};\n"],"mappings":"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"}