stream-chat-react 14.11.0 → 14.12.0

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

@@ -0,0 +1,32 @@
+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("{{count}} new messages", { count: newMessageCount }) : t("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('{{count}} new messages', { count: newMessageCount })\n      : t('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,0BAA0B,EAAE,OAAO,gBAAgB,CAAC,IACtD,EAAE,eAAe;CAEvB,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,78 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { Badge } from "../Badge/Badge.mjs";
+import React, { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageList/ScrollToLatestMessageButton.tsx
+var UnMemoizedScrollToLatestMessageButton = (props) => {
+	const { isMessageListScrolledToBottom, isNotAtLatestMessageSet = false, onClick, threadList } = props;
+	const { channel: activeChannel, client } = useChatContext();
+	const { thread } = useChannelStateContext();
+	const { t } = useTranslationContext();
+	const { IconArrowDown } = useComponentContextIcons();
+	const [countUnread, setCountUnread] = useState(activeChannel?.countUnread() || 0);
+	const [replyCount, setReplyCount] = useState(thread?.reply_count || 0);
+	const observedEvent = threadList ? "message.updated" : "message.new";
+	useEffect(() => {
+		const handleEvent = (event) => {
+			const newMessageInAnotherChannel = event.cid !== activeChannel?.cid;
+			const newMessageIsMine = event.user?.id === client.user?.id;
+			const isThreadOpen = !!thread;
+			const newMessageIsReply = !!event.message?.parent_id;
+			if (isMessageListScrolledToBottom || newMessageInAnotherChannel || newMessageIsMine || isThreadOpen && !threadList && newMessageIsReply) return;
+			if (event.type === "message.new") setCountUnread((prev) => prev + 1);
+			else if (event.message?.id === thread?.id) {
+				const newReplyCount = event.message?.reply_count || 0;
+				setCountUnread(() => newReplyCount - replyCount);
+			}
+		};
+		client.on(observedEvent, handleEvent);
+		return () => {
+			client.off(observedEvent, handleEvent);
+		};
+	}, [
+		activeChannel,
+		client,
+		isMessageListScrolledToBottom,
+		observedEvent,
+		replyCount,
+		thread,
+		threadList
+	]);
+	useEffect(() => {
+		if (isMessageListScrolledToBottom) {
+			setCountUnread(0);
+			setReplyCount(thread?.reply_count || 0);
+		}
+	}, [isMessageListScrolledToBottom, thread]);
+	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("aria/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  useChannelStateContext,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\n\nimport type { Event } 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  threadList?: boolean;\n};\n\nconst UnMemoizedScrollToLatestMessageButton = (\n  props: ScrollToLatestMessageButtonProps,\n) => {\n  const {\n    isMessageListScrolledToBottom,\n    isNotAtLatestMessageSet = false,\n    onClick,\n    threadList,\n  } = props;\n\n  const { channel: activeChannel, client } = useChatContext();\n  const { thread } = useChannelStateContext();\n  const { t } = useTranslationContext();\n  const { IconArrowDown } = useComponentContextIcons();\n  const [countUnread, setCountUnread] = useState(activeChannel?.countUnread() || 0);\n  const [replyCount, setReplyCount] = useState(thread?.reply_count || 0);\n  const observedEvent = threadList ? 'message.updated' : 'message.new';\n\n  useEffect(() => {\n    const handleEvent = (event: Event) => {\n      const newMessageInAnotherChannel = event.cid !== activeChannel?.cid;\n      const newMessageIsMine = event.user?.id === client.user?.id;\n\n      const isThreadOpen = !!thread;\n      const newMessageIsReply = !!event.message?.parent_id;\n      const dontIncreaseMainListCounterOnNewReply =\n        isThreadOpen && !threadList && 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 === thread?.id) {\n        const newReplyCount = event.message?.reply_count || 0;\n        setCountUnread(() => newReplyCount - replyCount);\n      }\n    };\n    client.on(observedEvent, handleEvent);\n\n    return () => {\n      client.off(observedEvent, handleEvent);\n    };\n  }, [\n    activeChannel,\n    client,\n    isMessageListScrolledToBottom,\n    observedEvent,\n    replyCount,\n    thread,\n    threadList,\n  ]);\n\n  useEffect(() => {\n    if (isMessageListScrolledToBottom) {\n      setCountUnread(0);\n      setReplyCount(thread?.reply_count || 0);\n    }\n  }, [isMessageListScrolledToBottom, thread]);\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('aria/Jump to latest message')}\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":";;;;;;;;;AAqBA,IAAM,yCACJ,UACG;CACH,MAAM,EACJ,+BACA,0BAA0B,OAC1B,SACA,eACE;CAEJ,MAAM,EAAE,SAAS,eAAe,WAAW,eAAe;CAC1D,MAAM,EAAE,WAAW,uBAAuB;CAC1C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,MAAM,CAAC,aAAa,kBAAkB,SAAS,eAAe,YAAY,KAAK,CAAC;CAChF,MAAM,CAAC,YAAY,iBAAiB,SAAS,QAAQ,eAAe,CAAC;CACrE,MAAM,gBAAgB,aAAa,oBAAoB;CAEvD,gBAAgB;EACd,MAAM,eAAe,UAAiB;GACpC,MAAM,6BAA6B,MAAM,QAAQ,eAAe;GAChE,MAAM,mBAAmB,MAAM,MAAM,OAAO,OAAO,MAAM;GAEzD,MAAM,eAAe,CAAC,CAAC;GACvB,MAAM,oBAAoB,CAAC,CAAC,MAAM,SAAS;GAI3C,IACE,iCACA,8BACA,oBALA,gBAAgB,CAAC,cAAc,mBAQ/B;GAGF,IAAI,MAAM,SAAS,eAEjB,gBAAgB,SAAS,OAAO,CAAC;QAC5B,IAAI,MAAM,SAAS,OAAO,QAAQ,IAAI;IAC3C,MAAM,gBAAgB,MAAM,SAAS,eAAe;IACpD,qBAAqB,gBAAgB,UAAU;GACjD;EACF;EACA,OAAO,GAAG,eAAe,WAAW;EAEpC,aAAa;GACX,OAAO,IAAI,eAAe,WAAW;EACvC;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,gBAAgB;EACd,IAAI,+BAA+B;GACjC,eAAe,CAAC;GAChB,cAAc,QAAQ,eAAe,CAAC;EACxC;CACF,GAAG,CAAC,+BAA+B,MAAM,CAAC;CAE1C,IAAI,iCAAiC,CAAC,yBAAyB,OAAO;CAEtE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,6BAA6B;GAC3C,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,33 @@
+import { useChannelActionContext } from "../../context/ChannelActionContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageList/UnreadMessagesNotification.tsx
+var UnreadMessagesNotification = ({ queryMessageLimit, showCount = true, unreadCount }) => {
+	const { IconArrowUp, IconXmark } = useComponentContextIcons();
+	const { jumpToFirstUnreadMessage, markRead } = useChannelActionContext();
+	const { t } = useTranslationContext("UnreadMessagesNotification");
+	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: () => jumpToFirstUnreadMessage(queryMessageLimit),
+			variant: "secondary",
+			children: [/* @__PURE__ */ jsx(IconArrowUp, {}), unreadCount && showCount ? t("{{count}} unread", { count: unreadCount }) : t("Unread messages")]
+		}), /* @__PURE__ */ jsx(Button, {
+			appearance: "outline",
+			"aria-label": t("aria/Mark messages as read"),
+			onClick: () => markRead(),
+			variant: "secondary",
+			children: /* @__PURE__ */ jsx(IconXmark, {})
+		})]
+	});
+};
+//#endregion
+export { UnreadMessagesNotification };
+
+//# sourceMappingURL=UnreadMessagesNotification.mjs.map

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  useChannelActionContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { Button } from '../Button';\nimport clsx from 'clsx';\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  /**\n   * The count of unread messages to be displayed if enabled.\n   */\n  unreadCount?: number;\n};\n\nexport const UnreadMessagesNotification = ({\n  queryMessageLimit,\n  showCount = true,\n  unreadCount,\n}: UnreadMessagesNotificationProps) => {\n  const { IconArrowUp, IconXmark } = useComponentContextIcons();\n\n  const { jumpToFirstUnreadMessage, markRead } = useChannelActionContext();\n  const { t } = useTranslationContext('UnreadMessagesNotification');\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={() => jumpToFirstUnreadMessage(queryMessageLimit)}\n        variant='secondary'\n      >\n        <IconArrowUp />\n        {unreadCount && showCount\n          ? t('{{count}} unread', { count: unreadCount })\n          : t('Unread messages')}\n      </Button>\n      <Button\n        appearance='outline'\n        aria-label={t('aria/Mark messages as read')}\n        onClick={() => markRead()}\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAwBA,IAAa,8BAA8B,EACzC,mBACA,YAAY,MACZ,kBACqC;CACrC,MAAM,EAAE,aAAa,cAAc,yBAAyB;CAE5D,MAAM,EAAE,0BAA0B,aAAa,wBAAwB;CACvE,MAAM,EAAE,MAAM,sBAAsB,4BAA4B;CAEhE,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,0CAA0C,EACxD,sDAAsD,eAAe,UACvE,CAAC;EACD,eAAY;YAJd,CAME,qBAAC,QAAD;GACE,YAAW;GACX,eAAe,yBAAyB,iBAAiB;GACzD,SAAQ;aAHV,CAKE,oBAAC,aAAD,CAAc,CAAA,GACb,eAAe,YACZ,EAAE,oBAAoB,EAAE,OAAO,YAAY,CAAC,IAC5C,EAAE,iBAAiB,CACjB;MACR,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,4BAA4B;GAC1C,eAAe,SAAS;GACxB,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}

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

@@ -0,0 +1,33 @@
+import { useChannelActionContext } from "../../context/ChannelActionContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.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("UnreadMessagesSeparator");
+	const { markRead } = useChannelActionContext();
+	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("{{count}} unread", { count: unreadCount }) : t("Unread messages")
+		}), /* @__PURE__ */ jsx(Button, {
+			appearance: "ghost",
+			"aria-label": t("aria/Mark messages as read"),
+			circular: true,
+			onClick: () => markRead(),
+			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  useChannelActionContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { Button } from '../Button';\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\n  const { t } = useTranslationContext('UnreadMessagesSeparator');\n  const { markRead } = useChannelActionContext();\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('{{count}} unread', { count: unreadCount })\n          : t('Unread messages')}\n      </div>\n      <Button\n        appearance='ghost'\n        aria-label={t('aria/Mark messages as read')}\n        circular\n        onClick={() => markRead()}\n        size='sm'\n        variant='secondary'\n      >\n        <IconXmark />\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAQA,IAAa,iCAAiC;AAa9C,IAAa,2BAA2B,EACtC,YAAY,MACZ,kBACkC;CAClC,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,EAAE,MAAM,sBAAsB,yBAAyB;CAC7D,MAAM,EAAE,aAAa,wBAAwB;CAC7C,OACE,qBAAC,OAAD;EACE,WAAW;EACX,eAAY;YAFd,CAIE,oBAAC,OAAD;GAAK,WAAW;aACb,eAAe,YACZ,EAAE,oBAAoB,EAAE,OAAO,YAAY,CAAC,IAC5C,EAAE,iBAAiB;EACpB,CAAA,GACL,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,4BAA4B;GAC1C,UAAA;GACA,eAAe,SAAS;GACxB,MAAK;GACL,SAAQ;aAER,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,CACL;;AAET"}

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

@@ -0,0 +1,339 @@
+import { useChannelActionContext } from "../../context/ChannelActionContext.mjs";
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { DialogManagerProvider } from "../../context/DialogManagerContext.mjs";
+import { MessageTranslationViewProvider } from "../../context/MessageTranslationViewContext.mjs";
+import { VirtualizedMessageListContextProvider } from "../../context/VirtualizedMessageListContext.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
+import { MessageUI } from "../Message/MessageUI.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 { useMarkRead } from "./hooks/useMarkRead.mjs";
+import { NewMessageNotification } from "./NewMessageNotification.mjs";
+import { UnreadMessagesNotification } from "./UnreadMessagesNotification.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 { useLastOwnMessage } from "./hooks/useLastOwnMessage.mjs";
+import { useReducedMotionPreference } from "./hooks/useReducedMotionPreference.mjs";
+import { ScrollToLatestMessageButton } from "./ScrollToLatestMessageButton.mjs";
+import { EmptyPlaceholder, Header, Item, calculateFirstItemIndex, calculateItemIndex, makeItemsRenderedHandler, messageRenderer } from "./VirtualizedMessageListComponents.mjs";
+import { useNotificationTarget } from "../Notifications/hooks/useNotificationTarget.mjs";
+import { NotificationList } from "../Notifications/NotificationList.mjs";
+import { useIncomingMessageAnnouncements } from "../Accessibility/hooks/useIncomingMessageAnnouncements.mjs";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Virtuoso } from "react-virtuoso";
+//#region src/components/MessageList/VirtualizedMessageList.tsx
+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, highlightedMessageId) {
+	if (highlightedMessageId) {
+		const index = findMessageIndex(messages, highlightedMessageId);
+		if (index !== -1) return {
+			align: "center",
+			index
+		};
+	}
+	return messages.length - 1;
+}
+var VirtualizedMessageListWithContext = (props) => {
+	const { additionalMessageComposerProps, additionalVirtuosoProps = {}, channel, channelUnreadUiState, closeReactionSelectorOnClick, customMessageRenderer, defaultItemHeight, disableDateSeparator = true, formatDate, groupStyles, hasMoreNewer, head, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, jumpToLatestMessage, loadingMore, loadMore, loadMoreNewer, maxTimeBetweenGroupedMessages, Message: MessageUIComponentFromProps, messageActions, messageLimit = 25, messages, openThread, overscan = 0, reactionDetailsSort, renderText, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showAvatar, showUnreadNotificationAlways, sortReactions, stickToBottomScrollBehavior = "smooth", suppressAutoscroll, thread, threadList } = props;
+	const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } = additionalVirtuosoProps;
+	useCaptureResizeObserverExceededError();
+	const { DateSeparator: DateSeparator$1 = DateSeparator, GiphyPreviewMessage: GiphyPreviewMessage$1 = GiphyPreviewMessage, MessageListMainPanel: MessageListMainPanel$1 = MessageListMainPanel, MessageSystem = EventComponent, NewMessageNotification: NewMessageNotification$1 = NewMessageNotification, NotificationList: NotificationList$1 = NotificationList, ScrollToLatestMessageButton: ScrollToLatestMessageButton$1 = ScrollToLatestMessageButton, TypingIndicator, UnreadMessagesNotification: UnreadMessagesNotification$1 = UnreadMessagesNotification, UnreadMessagesSeparator: UnreadMessagesSeparator$1 = UnreadMessagesSeparator, VirtualMessage: MessageUIComponentFromContext = MessageUI } = useComponentContext("VirtualizedMessageList");
+	const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;
+	const { client, customClasses } = useChatContext("VirtualizedMessageList");
+	const effectiveStickToBottomScrollBehavior = useReducedMotionPreference() ? "auto" : stickToBottomScrollBehavior;
+	const notificationTarget = useNotificationTarget();
+	const virtuoso = useRef(null);
+	const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
+	const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } = useUnreadMessagesNotificationVirtualized({
+		lastRead: channelUnreadUiState?.last_read,
+		showAlways: !!showUnreadNotificationAlways,
+		unreadCount: channelUnreadUiState?.unread_messages ?? 0
+	});
+	const { giphyPreviewMessage, setGiphyPreviewMessage } = useGiphyPreview(separateGiphyPreview);
+	const processedMessages = useMemo(() => {
+		if (typeof messages === "undefined") return [];
+		if (disableDateSeparator && !hideDeletedMessages && hideNewMessageSeparator && !separateGiphyPreview) return messages;
+		return processMessages({
+			enableDateSeparator: !disableDateSeparator,
+			hideDeletedMessages,
+			hideNewMessageSeparator,
+			lastRead,
+			messages,
+			reviewProcessedMessage,
+			setGiphyPreviewMessage,
+			userId: client.userID || ""
+		});
+	}, [
+		disableDateSeparator,
+		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, hasMoreNewer);
+	useMarkRead({
+		isMessageListScrolledToBottom,
+		messageListIsThread: !!threadList,
+		wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id
+	});
+	const scrollToBottom = useCallback(async () => {
+		if (hasMoreNewer) {
+			await jumpToLatestMessage();
+			return;
+		}
+		if (virtuoso.current) virtuoso.current.scrollToIndex(processedMessages.length - 1);
+		setNewMessagesNotification(false);
+	}, [
+		virtuoso,
+		processedMessages,
+		setNewMessagesNotification,
+		processedMessages.length,
+		hasMoreNewer,
+		jumpToLatestMessage
+	]);
+	useScrollToBottomOnNewMessage({
+		messages,
+		scrollToBottom,
+		scrollToLatestMessageOnFocus
+	});
+	const numItemsPrepended = usePrependedMessagesCount(processedMessages, !disableDateSeparator);
+	const { messageSetKey } = useMessageSetKey({ messages });
+	const shouldForceScrollToBottom = useShouldForceScrollToBottom(processedMessages, client.userID);
+	useIncomingMessageAnnouncements({
+		activeThreadId: thread?.id,
+		channel,
+		ownUserId: client.userID,
+		threadList
+	});
+	const handleItemsRendered = useMemo(() => makeItemsRenderedHandler([toggleShowUnreadMessagesNotification, (rendered) => floatingDateItemsRenderedRef.current?.(rendered)], processedMessages), [processedMessages, toggleShowUnreadMessagesNotification]);
+	const followOutput = (isAtBottom) => {
+		if (hasMoreNewer || suppressAutoscroll) return false;
+		if (shouldForceScrollToBottom()) return isAtBottom ? effectiveStickToBottomScrollBehavior : "auto";
+		return isAtBottom ? effectiveStickToBottomScrollBehavior : false;
+	};
+	const computeItemKey = useCallback((index, _, { numItemsPrepended, processedMessages }) => processedMessages[calculateItemIndex(index, numItemsPrepended)].id, []);
+	const atBottomStateChange = (isAtBottom) => {
+		atBottom.current = isAtBottom;
+		setIsMessageListScrolledToBottom(isAtBottom);
+		if (isAtBottom) {
+			loadMoreNewer?.(messageLimit);
+			setNewMessagesNotification?.(false);
+		}
+	};
+	const atTopStateChange = (isAtTop) => {
+		if (isAtTop) loadMore?.(messageLimit);
+	};
+	useEffect(() => {
+		let scrollTimeout;
+		if (highlightedMessageId) {
+			const index = findMessageIndex(processedMessages, highlightedMessageId);
+			if (index !== -1) scrollTimeout = setTimeout(() => {
+				virtuoso.current?.scrollToIndex({
+					align: "center",
+					index
+				});
+			}, 0);
+		}
+		return () => {
+			clearTimeout(scrollTimeout);
+		};
+	}, [highlightedMessageId, processedMessages]);
+	const id = useStableId();
+	if (!processedMessages) return null;
+	const dialogManagerId = threadList ? `virtualized-message-list-dialog-manager-thread-${id}` : `virtualized-message-list-dialog-manager-${id}`;
+	return /* @__PURE__ */ jsx(VirtualizedMessageListContextProvider, {
+		value: { scrollToBottom },
+		children: /* @__PURE__ */ jsxs(MessageTranslationViewProvider, { children: [/* @__PURE__ */ jsxs(MessageListMainPanel$1, { children: [/* @__PURE__ */ jsxs(DialogManagerProvider, {
+			id: dialogManagerId,
+			children: [!threadList && showUnreadMessagesNotification && /* @__PURE__ */ jsx(UnreadMessagesNotification$1, { unreadCount: channelUnreadUiState?.unread_messages }), /* @__PURE__ */ jsxs("div", {
+				className: customClasses?.virtualizedMessageList || "str-chat__virtual-list",
+				children: [
+					/* @__PURE__ */ jsx(FloatingDateSeparator, {
+						disableDateSeparator,
+						itemsRenderedRef: floatingDateItemsRenderedRef,
+						processedMessages
+					}),
+					/* @__PURE__ */ jsx(Virtuoso, {
+						atBottomStateChange,
+						atBottomThreshold: 100,
+						atTopStateChange,
+						atTopThreshold: 100,
+						className: "str-chat__message-list-scroll",
+						components: {
+							EmptyPlaceholder,
+							Header,
+							Item,
+							...TypingIndicator && { Footer: () => isMessageListScrolledToBottom ? /* @__PURE__ */ jsx(TypingIndicator, {
+								isMessageListScrolledToBottom,
+								scrollToBottom,
+								threadList
+							}) : null },
+							...virtuosoComponentsFromProps
+						},
+						computeItemKey,
+						context: {
+							additionalMessageComposerProps,
+							closeReactionSelectorOnClick,
+							customClasses,
+							customMessageRenderer,
+							DateSeparator: DateSeparator$1,
+							firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
+							formatDate,
+							head,
+							lastOwnMessage,
+							lastReadDate: channelUnreadUiState?.last_read,
+							lastReadMessageId: channelUnreadUiState?.last_read_message_id,
+							lastReceivedMessageId,
+							loadingMore,
+							Message: MessageUIComponent,
+							messageActions,
+							messageGroupStyles,
+							MessageSystem,
+							numItemsPrepended,
+							openThread,
+							ownMessagesDeliveredToOthers,
+							ownMessagesReadByOthers,
+							processedMessages,
+							reactionDetailsSort,
+							renderText,
+							returnAllReadData,
+							shouldGroupByUser,
+							showAvatar,
+							sortReactions,
+							threadList,
+							unreadMessageCount: channelUnreadUiState?.unread_messages,
+							UnreadMessagesSeparator: UnreadMessagesSeparator$1,
+							virtuosoRef: virtuoso
+						},
+						firstItemIndex: calculateFirstItemIndex(numItemsPrepended),
+						followOutput,
+						increaseViewportBy: {
+							bottom: 200,
+							top: 0
+						},
+						initialTopMostItemIndex: calculateInitialTopMostItemIndex(processedMessages, highlightedMessageId),
+						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?.unread_messages,
+						showNotification: newMessagesNotification || hasMoreNewer
+					}),
+					/* @__PURE__ */ jsx(ScrollToLatestMessageButton$1, {
+						isMessageListScrolledToBottom,
+						isNotAtLatestMessageSet: hasMoreNewer,
+						onClick: scrollToBottom,
+						threadList
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx(NotificationList$1, { panel: notificationTarget })] }), giphyPreviewMessage && /* @__PURE__ */ jsx(GiphyPreviewMessage$1, { message: giphyPreviewMessage })] })
+	});
+};
+/**
+* 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 { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext("VirtualizedMessageList");
+	const { channel, channelUnreadUiState, hasMore, hasMoreNewer, highlightedMessageId, loadingMore, loadingMoreNewer, messages: contextMessages, notifications, read, suppressAutoscroll, thread } = useChannelStateContext("VirtualizedMessageList");
+	const messages = props.messages || contextMessages;
+	return /* @__PURE__ */ jsx(VirtualizedMessageListWithContext, {
+		channel,
+		channelUnreadUiState: props.channelUnreadUiState ?? channelUnreadUiState,
+		hasMore: !!hasMore,
+		hasMoreNewer: !!hasMoreNewer,
+		highlightedMessageId,
+		jumpToLatestMessage,
+		loadingMore: !!loadingMore,
+		loadingMoreNewer: !!loadingMoreNewer,
+		loadMore,
+		loadMoreNewer,
+		messages,
+		notifications,
+		read,
+		suppressAutoscroll,
+		thread,
+		...props
+	});
+}
+//#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';\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, MessageUIComponentProps } from '../Message';\nimport { MessageUI } 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  ScrollToLatestMessageButton as DefaultScrollToLatestMessageButton,\n  UnreadMessagesSeparator as DefaultUnreadMessagesSeparator,\n} from '../MessageList';\nimport { DateSeparator as DefaultDateSeparator } from '../DateSeparator';\nimport { EventComponent as DefaultMessageSystem } from '../EventComponent';\nimport {\n  NotificationList as DefaultNotificationList,\n  useNotificationTarget,\n} from '../Notifications';\n\nimport { DialogManagerProvider } from '../../context';\nimport type { ChannelActionContextValue } from '../../context/ChannelActionContext';\nimport { useChannelActionContext } from '../../context/ChannelActionContext';\nimport type {\n  ChannelNotifications,\n  ChannelStateContextValue,\n} from '../../context/ChannelStateContext';\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\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';\n\nimport type {\n  Channel,\n  LocalMessage,\n  ChannelState as StreamChannelState,\n  UserResponse,\n} from 'stream-chat';\nimport type { UnknownType } from '../../types/types';\nimport { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { useLastDeliveredData } from './hooks/useLastDeliveredData';\nimport { useLastOwnMessage } from './hooks/useLastOwnMessage';\nimport { useReducedMotionPreference } from './hooks/useReducedMotionPreference';\nimport { useIncomingMessageAnnouncements } from '../Accessibility';\n\ntype PropsDrilledToMessage =\n  | 'additionalMessageComposerProps'\n  | 'formatDate'\n  | 'messageActions'\n  | 'openThread'\n  | 'reactionDetailsSort'\n  | 'renderText'\n  | 'showAvatar'\n  | 'sortReactions';\n\ntype VirtualizedMessageListPropsForContext =\n  | PropsDrilledToMessage\n  | 'closeReactionSelectorOnClick'\n  | 'customMessageRenderer'\n  | 'head'\n  | 'loadingMore'\n  | 'Message'\n  | 'returnAllReadData'\n  | 'shouldGroupByUser'\n  | 'threadList';\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    /** Latest received message id in the current channel */\n    lastReceivedMessageId: string | null | undefined;\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;\n    lastReadDate?: Date;\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;\n    /** The number of unread messages in the current channel. */\n    unreadMessageCount?: number;\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  notifications: ChannelNotifications;\n  read?: StreamChannelState['read'];\n  thread?: ChannelStateContextValue['thread'];\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  highlightedMessageId: string | undefined,\n) {\n  if (highlightedMessageId) {\n    const index = findMessageIndex(messages, highlightedMessageId);\n    if (index !== -1) {\n      return { align: 'center', index } as const;\n    }\n  }\n  return messages.length - 1;\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    disableDateSeparator = true,\n    formatDate,\n    groupStyles,\n    hasMoreNewer,\n    head,\n    hideDeletedMessages = false,\n    hideNewMessageSeparator = false,\n    highlightedMessageId,\n    jumpToLatestMessage,\n    loadingMore,\n    loadMore,\n    loadMoreNewer,\n    maxTimeBetweenGroupedMessages,\n    Message: MessageUIComponentFromProps,\n    messageActions,\n    messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE,\n    messages,\n    openThread,\n    // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component\n    overscan = 0,\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,\n    thread,\n    threadList,\n  } = props;\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    MessageListMainPanel = DefaultMessageListMainPanel,\n    MessageSystem = DefaultMessageSystem,\n    NewMessageNotification = DefaultNewMessageNotification,\n    NotificationList = DefaultNotificationList,\n    ScrollToLatestMessageButton = DefaultScrollToLatestMessageButton,\n    TypingIndicator,\n    UnreadMessagesNotification = DefaultUnreadMessagesNotification,\n    UnreadMessagesSeparator = DefaultUnreadMessagesSeparator,\n    VirtualMessage: MessageUIComponentFromContext = MessageUI,\n  } = useComponentContext('VirtualizedMessageList');\n  const MessageUIComponent = MessageUIComponentFromProps || MessageUIComponentFromContext;\n\n  const { client, customClasses } = useChatContext('VirtualizedMessageList');\n  const prefersReducedMotion = useReducedMotionPreference();\n  const effectiveStickToBottomScrollBehavior = prefersReducedMotion\n    ? 'auto'\n    : stickToBottomScrollBehavior;\n  const notificationTarget = useNotificationTarget();\n\n  const virtuoso = useRef<VirtuosoHandle>(null);\n\n  const lastRead = useMemo(() => channel.lastRead?.(), [channel]);\n\n  const { show: showUnreadMessagesNotification, toggleShowUnreadMessagesNotification } =\n    useUnreadMessagesNotificationVirtualized({\n      lastRead: channelUnreadUiState?.last_read,\n      showAlways: !!showUnreadNotificationAlways,\n      unreadCount: channelUnreadUiState?.unread_messages ?? 0,\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      disableDateSeparator &&\n      !hideDeletedMessages &&\n      hideNewMessageSeparator &&\n      !separateGiphyPreview\n    ) {\n      return messages;\n    }\n\n    return processMessages({\n      enableDateSeparator: !disableDateSeparator,\n      hideDeletedMessages,\n      hideNewMessageSeparator,\n      lastRead,\n      messages,\n      reviewProcessedMessage,\n      setGiphyPreviewMessage,\n      userId: client.userID || '',\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    disableDateSeparator,\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, hasMoreNewer);\n\n  useMarkRead({\n    isMessageListScrolledToBottom,\n    messageListIsThread: !!threadList,\n    wasMarkedUnread: !!channelUnreadUiState?.first_unread_message_id,\n  });\n\n  const scrollToBottom = useCallback(async () => {\n    if (hasMoreNewer) {\n      await jumpToLatestMessage();\n      return;\n    }\n\n    if (virtuoso.current) {\n      virtuoso.current.scrollToIndex(processedMessages.length - 1);\n    }\n\n    setNewMessagesNotification(false);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\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    !disableDateSeparator,\n  );\n\n  const { messageSetKey } = useMessageSetKey({ messages });\n\n  const shouldForceScrollToBottom = useShouldForceScrollToBottom(\n    processedMessages,\n    client.userID,\n  );\n\n  useIncomingMessageAnnouncements({\n    activeThreadId: thread?.id,\n    channel,\n    ownUserId: client.userID,\n    threadList,\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 (hasMoreNewer || suppressAutoscroll) {\n      return false;\n    }\n\n    if (shouldForceScrollToBottom()) {\n      return isAtBottom ? effectiveStickToBottomScrollBehavior : 'auto';\n    }\n    // a message from another user has been received - don't scroll to bottom unless already there\n    return isAtBottom ? effectiveStickToBottomScrollBehavior : 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 atBottomStateChange = (isAtBottom: boolean) => {\n    atBottom.current = isAtBottom;\n    setIsMessageListScrolledToBottom(isAtBottom);\n\n    if (isAtBottom) {\n      loadMoreNewer?.(messageLimit);\n      setNewMessagesNotification?.(false);\n    }\n  };\n  const atTopStateChange = (isAtTop: boolean) => {\n    if (isAtTop) {\n      loadMore?.(messageLimit);\n    }\n  };\n\n  useEffect(() => {\n    let scrollTimeout: ReturnType<typeof setTimeout>;\n    if (highlightedMessageId) {\n      const index = findMessageIndex(processedMessages, highlightedMessageId);\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  }, [highlightedMessageId, processedMessages]);\n\n  const id = useStableId();\n\n  if (!processedMessages) return null;\n\n  const dialogManagerId = threadList\n    ? `virtualized-message-list-dialog-manager-thread-${id}`\n    : `virtualized-message-list-dialog-manager-${id}`;\n\n  return (\n    <VirtualizedMessageListContextProvider value={{ scrollToBottom }}>\n      <MessageTranslationViewProvider>\n        <MessageListMainPanel>\n          <DialogManagerProvider id={dialogManagerId}>\n            {!threadList && showUnreadMessagesNotification && (\n              <UnreadMessagesNotification\n                unreadCount={channelUnreadUiState?.unread_messages}\n              />\n            )}\n            <div\n              className={\n                customClasses?.virtualizedMessageList || 'str-chat__virtual-list'\n              }\n            >\n              <FloatingDateSeparator\n                disableDateSeparator={disableDateSeparator}\n                itemsRenderedRef={floatingDateItemsRenderedRef}\n                processedMessages={processedMessages}\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                  ...(TypingIndicator && {\n                    Footer: () =>\n                      isMessageListScrolledToBottom ? (\n                        <TypingIndicator\n                          isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n                          scrollToBottom={scrollToBottom}\n                          threadList={threadList}\n                        />\n                      ) : null,\n                  }),\n                  ...virtuosoComponentsFromProps,\n                }}\n                computeItemKey={computeItemKey}\n                context={{\n                  additionalMessageComposerProps,\n                  closeReactionSelectorOnClick,\n                  customClasses,\n                  customMessageRenderer,\n                  DateSeparator,\n                  firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,\n                  formatDate,\n                  head,\n                  lastOwnMessage,\n                  lastReadDate: channelUnreadUiState?.last_read,\n                  lastReadMessageId: channelUnreadUiState?.last_read_message_id,\n                  lastReceivedMessageId,\n                  loadingMore,\n                  Message: MessageUIComponent,\n                  messageActions,\n                  messageGroupStyles,\n                  MessageSystem,\n                  numItemsPrepended,\n                  openThread,\n                  ownMessagesDeliveredToOthers,\n                  ownMessagesReadByOthers,\n                  processedMessages,\n                  reactionDetailsSort,\n                  renderText,\n                  returnAllReadData,\n                  shouldGroupByUser,\n                  showAvatar,\n                  sortReactions,\n                  threadList,\n                  unreadMessageCount: channelUnreadUiState?.unread_messages,\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                  highlightedMessageId,\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?.unread_messages}\n                showNotification={newMessagesNotification || hasMoreNewer}\n              />\n              <ScrollToLatestMessageButton\n                isMessageListScrolledToBottom={isMessageListScrolledToBottom}\n                isNotAtLatestMessageSet={hasMoreNewer}\n                onClick={scrollToBottom}\n                threadList={threadList}\n              />\n            </div>\n          </DialogManagerProvider>\n          <NotificationList panel={notificationTarget} />\n        </MessageListMainPanel>\n        {giphyPreviewMessage && <GiphyPreviewMessage message={giphyPreviewMessage} />}\n      </MessageTranslationViewProvider>\n    </VirtualizedMessageListContextProvider>\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  channelUnreadUiState?: ChannelStateContextValue['channelUnreadUiState'];\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  /** Disables the injection of date separator components in MessageList, defaults to `true` */\n  disableDateSeparator?: boolean;\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  /**\n   * @deprecated Use additionalVirtuosoProps.components.Header to override default component rendered above the list ove messages.\n   * Element to be rendered at the top of the thread message list. By default, these are the Message and ThreadStart components\n   */\n  head?: React.ReactElement;\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  /** The id of the message to highlight and center */\n  highlightedMessageId?: string;\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, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */\n  loadMore?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);\n  /** Function called when new messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */\n  loadMoreNewer?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);\n  /** Maximum time in milliseconds that should occur between messages to still consider them grouped together */\n  maxTimeBetweenGroupedMessages?: number;\n  /** Custom UI component to display a message, defaults to and accepts same props as [MessageUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageUI.tsx) */\n  Message?: React.ComponentType<MessageUIComponentProps>;\n  /** The limit to use when paginating messages */\n  messageLimit?: number;\n  /** Optional prop to override the messages available from [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/) */\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 `MessageComposer`, 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. Reduced-motion users are always treated as `\"auto\"`. */\n  stickToBottomScrollBehavior?: 'smooth' | 'auto';\n  /** stops the list from autoscrolling when new messages are loaded */\n  suppressAutoscroll?: boolean;\n  /** If true, indicates the message list is a thread  */\n  threadList?: 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 { jumpToLatestMessage, loadMore, loadMoreNewer } = useChannelActionContext(\n    'VirtualizedMessageList',\n  );\n  const {\n    channel,\n    channelUnreadUiState,\n    hasMore,\n    hasMoreNewer,\n    highlightedMessageId,\n    loadingMore,\n    loadingMoreNewer,\n    messages: contextMessages,\n    notifications,\n    read,\n    suppressAutoscroll,\n    thread,\n  } = useChannelStateContext('VirtualizedMessageList');\n\n  const messages = props.messages || contextMessages;\n\n  return (\n    <VirtualizedMessageListWithContext\n      channel={channel}\n      channelUnreadUiState={props.channelUnreadUiState ?? channelUnreadUiState}\n      hasMore={!!hasMore}\n      hasMoreNewer={!!hasMoreNewer}\n      highlightedMessageId={highlightedMessageId}\n      jumpToLatestMessage={jumpToLatestMessage}\n      loadingMore={!!loadingMore}\n      loadingMoreNewer={!!loadingMoreNewer}\n      loadMore={loadMore}\n      loadMoreNewer={loadMoreNewer}\n      messages={messages}\n      notifications={notifications}\n      read={read}\n      suppressAutoscroll={suppressAutoscroll}\n      thread={thread}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}