stream-chat-react 14.11.1 → 14.12.0

package/dist/es/components/Thread/ThreadHeader.mjs

@@ -0,0 +1,88 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useTypingContext } from "../../context/TypingContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { useChannelPreviewInfo } from "../ChannelListItem/hooks/useChannelPreviewInfo.mjs";
+import { TypingIndicatorHeader } from "../TypingIndicator/TypingIndicatorHeader.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useChatViewContext } from "../ChatView/ChatView.mjs";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Thread/ThreadHeader.tsx
+var threadStateSelector = ({ replyCount }) => ({ replyCount });
+/** Fallback when channel has no display title: parent message author (name only). */
+var displayNameFromParentMessage = (message) => message.user?.name ?? void 0;
+/** Subtitle: replyCount, threadDisplayName, defaultSubtitle (name · reply count), and when typing also TypingIndicatorHeader. */
+var ThreadHeaderSubtitle = ({ replyCount, threadDisplayName, threadList }) => {
+	const { t } = useTranslationContext();
+	const { channelConfig, thread } = useChannelStateContext("ThreadHeaderSubtitle");
+	const parentId = useThreadContext()?.id ?? thread?.id;
+	const { client } = useChatContext("ThreadHeaderSubtitle");
+	const { typing = {} } = useTypingContext("ThreadHeaderSubtitle");
+	const typingInThread = Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId);
+	const hasTyping = channelConfig?.typing_events !== false && typingInThread.length > 0;
+	const replyCountText = t("replyCount", { count: replyCount ?? 0 });
+	const defaultSubtitle = threadDisplayName ? `${threadDisplayName} · ${replyCountText}` : replyCountText;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__thread-header-subtitle",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "str-chat__subtitle-content-transition",
+			children: hasTyping ? /* @__PURE__ */ jsx(TypingIndicatorHeader, { threadList }) : /* @__PURE__ */ jsx(Fragment$1, { children: defaultSubtitle })
+		}, hasTyping ? "typing" : "default")
+	});
+};
+var ThreadHeader = (props) => {
+	const { IconXmark } = useComponentContextIcons();
+	const { closeThread, overrideTitle, thread } = props;
+	const { t } = useTranslationContext();
+	const { channel } = useChannelStateContext();
+	const { HeaderStartContent } = useComponentContext();
+	const { activeChatView } = useChatViewContext();
+	const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
+	const threadInstance = useThreadContext();
+	const { replyCount: replyCountThreadInstance } = useStateStore(threadInstance?.state, threadStateSelector) ?? {};
+	const replyCount = threadInstance ? replyCountThreadInstance : thread ? thread.reply_count ?? 0 : 0;
+	const threadDisplayName = overrideTitle ?? channelDisplayTitle ?? displayNameFromParentMessage(thread) ?? void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__thread-header",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__thread-header__start",
+				children: activeChatView === "threads" && HeaderStartContent && /* @__PURE__ */ jsx(HeaderStartContent, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__thread-header-details",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__thread-header-title",
+					children: t("Thread")
+				}), /* @__PURE__ */ jsx(ThreadHeaderSubtitle, {
+					replyCount,
+					threadDisplayName,
+					threadList: true
+				})]
+			}),
+			!threadInstance && /* @__PURE__ */ jsx("div", {
+				className: "str-chat__thread-header__end",
+				children: /* @__PURE__ */ jsx(Button, {
+					appearance: "ghost",
+					"aria-label": t("aria/Close thread"),
+					circular: true,
+					className: "str-chat__close-thread-button",
+					"data-testid": "close-thread-button",
+					onClick: closeThread,
+					size: "md",
+					variant: "secondary",
+					children: /* @__PURE__ */ jsx(IconXmark, {})
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ThreadHeader };
+
+//# sourceMappingURL=ThreadHeader.mjs.map

package/dist/es/components/Thread/ThreadHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadHeader.mjs","names":[],"sources":["../../../../src/components/Thread/ThreadHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useStateStore } from '../../store';\nimport { useChannelPreviewInfo } from '../ChannelListItem/hooks/useChannelPreviewInfo';\nimport { TypingIndicatorHeader } from '../TypingIndicator/TypingIndicatorHeader';\nimport { useThreadContext } from '../Threads';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { useTypingContext } from '../../context/TypingContext';\n\nimport type { LocalMessage } from 'stream-chat';\nimport type { ThreadState } from 'stream-chat';\nimport { Button } from '../Button';\nimport { useChatViewContext } from '../ChatView';\n\nimport { useComponentContextIcons } from '../../context';\nconst threadStateSelector = ({ replyCount }: ThreadState) => ({ replyCount });\n\n/** Fallback when channel has no display title: parent message author (name only). */\nconst displayNameFromParentMessage = (message: LocalMessage): string | undefined =>\n  message.user?.name ?? undefined;\n\n/** Subtitle: replyCount, threadDisplayName, defaultSubtitle (name · reply count), and when typing also TypingIndicatorHeader. */\nconst ThreadHeaderSubtitle = ({\n  replyCount,\n  threadDisplayName,\n  threadList,\n}: {\n  replyCount: number | undefined;\n  threadDisplayName: string | undefined;\n  threadList: boolean;\n}) => {\n  const { t } = useTranslationContext();\n  const { channelConfig, thread } = useChannelStateContext('ThreadHeaderSubtitle');\n  const threadInstance = useThreadContext();\n  const parentId = threadInstance?.id ?? thread?.id;\n  const { client } = useChatContext('ThreadHeaderSubtitle');\n  const { typing = {} } = useTypingContext('ThreadHeaderSubtitle');\n  const typingInThread = Object.values(typing).filter(\n    ({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId,\n  );\n  const hasTyping = channelConfig?.typing_events !== false && typingInThread.length > 0;\n  const replyCountText = t('replyCount', { count: replyCount ?? 0 });\n  const defaultSubtitle = threadDisplayName\n    ? `${threadDisplayName} · ${replyCountText}`\n    : replyCountText;\n  return (\n    <div className='str-chat__thread-header-subtitle'>\n      <span\n        className='str-chat__subtitle-content-transition'\n        key={hasTyping ? 'typing' : 'default'}\n      >\n        {hasTyping ? (\n          <TypingIndicatorHeader threadList={threadList} />\n        ) : (\n          <>{defaultSubtitle}</>\n        )}\n      </span>\n    </div>\n  );\n};\n\nexport type ThreadHeaderProps = {\n  /** Callback for closing the thread */\n  closeThread: (event?: React.BaseSyntheticEvent) => void;\n  /** The thread parent message */\n  thread: LocalMessage;\n  /** Override the thread display title */\n  overrideTitle?: string;\n};\n\nexport const ThreadHeader = (props: ThreadHeaderProps) => {\n  const { IconXmark } = useComponentContextIcons();\n\n  const { closeThread, overrideTitle, thread } = props;\n\n  const { t } = useTranslationContext();\n  const { channel } = useChannelStateContext();\n  const { HeaderStartContent } = useComponentContext();\n  const { activeChatView } = useChatViewContext();\n  const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });\n\n  const threadInstance = useThreadContext();\n  const { replyCount: replyCountThreadInstance } =\n    useStateStore(threadInstance?.state, threadStateSelector) ?? {};\n\n  const replyCount = threadInstance\n    ? replyCountThreadInstance\n    : thread\n      ? (thread.reply_count ?? 0)\n      : 0;\n\n  // Subtitle: channel display title (from parent or hook), with override and fallback to parent message author\n  const threadDisplayName =\n    overrideTitle ??\n    channelDisplayTitle ??\n    displayNameFromParentMessage(thread) ??\n    undefined;\n\n  return (\n    <div className='str-chat__thread-header'>\n      <div className='str-chat__thread-header__start'>\n        {activeChatView === 'threads' && HeaderStartContent && <HeaderStartContent />}\n      </div>\n      <div className='str-chat__thread-header-details'>\n        <div className='str-chat__thread-header-title'>{t('Thread')}</div>\n        <ThreadHeaderSubtitle\n          replyCount={replyCount}\n          threadDisplayName={threadDisplayName}\n          threadList\n        />\n      </div>\n      {!threadInstance && (\n        <div className='str-chat__thread-header__end'>\n          <Button\n            appearance='ghost'\n            aria-label={t('aria/Close thread')}\n            circular\n            className='str-chat__close-thread-button'\n            data-testid='close-thread-button'\n            onClick={closeThread}\n            size='md'\n            variant='secondary'\n          >\n            <IconXmark />\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAM,uBAAuB,EAAE,kBAA+B,EAAE,WAAW;;AAG3E,IAAM,gCAAgC,YACpC,QAAQ,MAAM,QAAQ,KAAA;;AAGxB,IAAM,wBAAwB,EAC5B,YACA,mBACA,iBAKI;CACJ,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,eAAe,WAAW,uBAAuB,sBAAsB;CAE/E,MAAM,WADiB,iBACN,CAAA,EAAgB,MAAM,QAAQ;CAC/C,MAAM,EAAE,WAAW,eAAe,sBAAsB;CACxD,MAAM,EAAE,SAAS,CAAC,MAAM,iBAAiB,sBAAsB;CAC/D,MAAM,iBAAiB,OAAO,OAAO,MAAM,CAAC,CAAC,QAC1C,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,cAAc,QACzE;CACA,MAAM,YAAY,eAAe,kBAAkB,SAAS,eAAe,SAAS;CACpF,MAAM,iBAAiB,EAAE,cAAc,EAAE,OAAO,cAAc,EAAE,CAAC;CACjE,MAAM,kBAAkB,oBACpB,GAAG,kBAAkB,KAAK,mBAC1B;CACJ,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,QAAD;GACE,WAAU;aAGT,YACC,oBAAC,uBAAD,EAAmC,WAAa,CAAA,IAEhD,oBAAA,YAAA,EAAA,UAAG,gBAAkB,CAAA;EAEnB,GAPC,YAAY,WAAW,SAOxB;CACH,CAAA;AAET;AAWA,IAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,cAAc,yBAAyB;CAE/C,MAAM,EAAE,aAAa,eAAe,WAAW;CAE/C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,YAAY,uBAAuB;CAC3C,MAAM,EAAE,uBAAuB,oBAAoB;CACnD,MAAM,EAAE,mBAAmB,mBAAmB;CAC9C,MAAM,EAAE,cAAc,wBAAwB,sBAAsB,EAAE,QAAQ,CAAC;CAE/E,MAAM,iBAAiB,iBAAiB;CACxC,MAAM,EAAE,YAAY,6BAClB,cAAc,gBAAgB,OAAO,mBAAmB,KAAK,CAAC;CAEhE,MAAM,aAAa,iBACf,2BACA,SACG,OAAO,eAAe,IACvB;CAGN,MAAM,oBACJ,iBACA,uBACA,6BAA6B,MAAM,KACnC,KAAA;CAEF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,WAAU;cACZ,mBAAmB,aAAa,sBAAsB,oBAAC,oBAAD,CAAqB,CAAA;GACzE,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eAAiC,EAAE,QAAQ;IAAO,CAAA,GACjE,oBAAC,sBAAD;KACc;KACO;KACnB,YAAA;IACD,CAAA,CACE;;GACJ,CAAC,kBACA,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD;KACE,YAAW;KACX,cAAY,EAAE,mBAAmB;KACjC,UAAA;KACA,WAAU;KACV,eAAY;KACZ,SAAS;KACT,MAAK;KACL,SAAQ;eAER,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA;GACL,CAAA;EAEJ;;AAET"}

package/dist/es/components/Thread/ThreadStart.mjs

@@ -0,0 +1,24 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Thread/ThreadStart.tsx
+var threadStateSelector = ({ replyCount }) => ({ replyCount });
+var ThreadStart = () => {
+	const { thread } = useChannelStateContext("ThreadStart");
+	const { t } = useTranslationContext("ThreadStart");
+	const threadInstance = useThreadContext();
+	const { replyCount: replyCountThreadInstance } = useStateStore(threadInstance?.state, threadStateSelector) ?? {};
+	const replyCount = threadInstance ? replyCountThreadInstance : thread ? thread.reply_count ?? 0 : 0;
+	if (!replyCount) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__thread-start",
+		children: t("replyCount", { count: replyCount })
+	});
+};
+//#endregion
+export { ThreadStart };
+
+//# sourceMappingURL=ThreadStart.mjs.map

package/dist/es/components/Thread/ThreadStart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadStart.mjs","names":[],"sources":["../../../../src/components/Thread/ThreadStart.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useThreadContext } from '../Threads';\nimport { useStateStore } from '../../store';\nimport type { ThreadState } from 'stream-chat';\n\nconst threadStateSelector = ({ replyCount }: ThreadState) => ({\n  replyCount,\n});\n\nexport const ThreadStart = () => {\n  const { thread } = useChannelStateContext('ThreadStart');\n  const { t } = useTranslationContext('ThreadStart');\n  const threadInstance = useThreadContext();\n  const { replyCount: replyCountThreadInstance } =\n    useStateStore(threadInstance?.state, threadStateSelector) ?? {};\n\n  const replyCount = threadInstance\n    ? replyCountThreadInstance\n    : thread\n      ? (thread.reply_count ?? 0)\n      : 0;\n\n  if (!replyCount) return null;\n\n  return (\n    <div className='str-chat__thread-start'>{t('replyCount', { count: replyCount })}</div>\n  );\n};\n"],"mappings":";;;;;;;AAQA,IAAM,uBAAuB,EAAE,kBAA+B,EAC5D,WACF;AAEA,IAAa,oBAAoB;CAC/B,MAAM,EAAE,WAAW,uBAAuB,aAAa;CACvD,MAAM,EAAE,MAAM,sBAAsB,aAAa;CACjD,MAAM,iBAAiB,iBAAiB;CACxC,MAAM,EAAE,YAAY,6BAClB,cAAc,gBAAgB,OAAO,mBAAmB,KAAK,CAAC;CAEhE,MAAM,aAAa,iBACf,2BACA,SACG,OAAO,eAAe,IACvB;CAEN,IAAI,CAAC,YAAY,OAAO;CAExB,OACE,oBAAC,OAAD;EAAK,WAAU;YAA0B,EAAE,cAAc,EAAE,OAAO,WAAW,CAAC;CAAO,CAAA;AAEzF"}

package/dist/es/components/Threads/ThreadContext.mjs

@@ -0,0 +1,17 @@
+import { Channel } from "../Channel/Channel.mjs";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Threads/ThreadContext.tsx
+var ThreadContext = createContext(void 0);
+var useThreadContext = () => useContext(ThreadContext);
+var ThreadProvider = ({ children, thread }) => /* @__PURE__ */ jsx(ThreadContext.Provider, {
+	value: thread,
+	children: /* @__PURE__ */ jsx(Channel, {
+		channel: thread?.channel,
+		children
+	})
+});
+//#endregion
+export { ThreadContext, ThreadProvider, useThreadContext };
+
+//# sourceMappingURL=ThreadContext.mjs.map

package/dist/es/components/Threads/ThreadContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadContext.mjs","names":[],"sources":["../../../../src/components/Threads/ThreadContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\n\nimport { Channel } from '../Channel';\n\nimport type { PropsWithChildren } from 'react';\nimport type { Thread } from 'stream-chat';\n\nexport type ThreadContextValue = Thread | undefined;\n\nexport const ThreadContext = createContext<ThreadContextValue>(undefined);\n\nexport const useThreadContext = () => useContext(ThreadContext);\n\nexport const ThreadProvider = ({\n  children,\n  thread,\n}: PropsWithChildren<{ thread?: Thread }>) => (\n  <ThreadContext.Provider value={thread}>\n    <Channel channel={thread?.channel}>{children}</Channel>\n  </ThreadContext.Provider>\n);\n"],"mappings":";;;;AASA,IAAa,gBAAgB,cAAkC,KAAA,CAAS;AAExE,IAAa,yBAAyB,WAAW,aAAa;AAE9D,IAAa,kBAAkB,EAC7B,UACA,aAEA,oBAAC,cAAc,UAAf;CAAwB,OAAO;WAC7B,oBAAC,SAAD;EAAS,SAAS,QAAQ;EAAU;CAAkB,CAAA;AAChC,CAAA"}

package/dist/es/components/Threads/ThreadList/ThreadList.mjs

@@ -0,0 +1,120 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { LoadingChannels } from "../../Loading/LoadingChannels.mjs";
+import { useVirtualizedListboxKeyboardNavigation } from "../../../a11y/hooks/useVirtualizedListboxKeyboardNavigation.mjs";
+import { ThreadListItem } from "./ThreadListItem.mjs";
+import { ThreadListEmptyPlaceholder } from "./ThreadListEmptyPlaceholder.mjs";
+import { ThreadListUnseenThreadsBanner } from "./ThreadListUnseenThreadsBanner.mjs";
+import { ThreadListLoadingIndicator } from "./ThreadListLoadingIndicator.mjs";
+import { ThreadListHeader } from "./ThreadListHeader.mjs";
+import { NotificationList } from "../../Notifications/NotificationList.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Virtuoso } from "react-virtuoso";
+//#region src/components/Threads/ThreadList/ThreadList.tsx
+var selector = (nextValue) => ({
+	isLoading: nextValue.pagination.isLoading,
+	threads: nextValue.threads
+});
+var computeItemKey = (_, item) => item.id;
+var useThreadList = () => {
+	const { client } = useChatContext();
+	useEffect(() => {
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === "visible") client.threads.activate();
+			if (document.visibilityState === "hidden") client.threads.deactivate();
+		};
+		handleVisibilityChange();
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		return () => {
+			client.threads.deactivate();
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+		};
+	}, [client]);
+};
+var useThreadHighlighting = (threadManager) => {
+	const [threadsToHighlight, setThreadsToHighlight] = useState({});
+	useEffect(() => {
+		return threadManager.state.subscribeWithSelector((state) => state.threads, (nextThreads, previousThreads) => {
+			if (!previousThreads) return;
+			const resetByThreadId = {};
+			for (const thread of nextThreads) {
+				if (previousThreads.includes(thread)) continue;
+				resetByThreadId[thread.id] = () => {
+					setThreadsToHighlight((pv) => {
+						const copy = { ...pv };
+						delete copy[thread.id];
+						return copy;
+					});
+				};
+			}
+			setThreadsToHighlight(resetByThreadId);
+		});
+	});
+	return threadsToHighlight;
+};
+var ThreadList = ({ virtuosoProps }) => {
+	const { client } = useChatContext();
+	const { t } = useTranslationContext("ThreadList");
+	const { NotificationList: NotificationListFromContext = NotificationList, ThreadListEmptyPlaceholder: ThreadListEmptyPlaceholder$1 = ThreadListEmptyPlaceholder, ThreadListItem: ThreadListItem$1 = ThreadListItem, ThreadListLoadingIndicator: ThreadListLoadingIndicator$1 = ThreadListLoadingIndicator, ThreadListUnseenThreadsBanner: ThreadListUnseenThreadsBanner$1 = ThreadListUnseenThreadsBanner } = useComponentContext();
+	const { isLoading, threads } = useStateStore(client.threads.state, selector);
+	const resetByThreadId = useThreadHighlighting(client.threads);
+	const virtuosoRef = useRef(null);
+	const scrollerRef = useRef(null);
+	const { onKeyDown } = useVirtualizedListboxKeyboardNavigation({
+		getItemId: (thread) => thread.id,
+		itemIdAttribute: "data-thread-id",
+		items: threads,
+		scrollerRef,
+		scrollIndexIntoView: useCallback((index, onRendered) => {
+			virtuosoRef.current?.scrollIntoView({
+				done: onRendered,
+				index
+			});
+		}, [])
+	});
+	useThreadList();
+	if (isLoading && !threads.length) return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__thread-list-container",
+		children: [/* @__PURE__ */ jsx(ThreadListHeader, {}), /* @__PURE__ */ jsx("div", {
+			className: "str-chat__thread-list str-chat__thread-list--loading",
+			children: /* @__PURE__ */ jsx(LoadingChannels, {})
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__thread-list-container",
+		children: [
+			/* @__PURE__ */ jsx(ThreadListHeader, {}),
+			/* @__PURE__ */ jsx(ThreadListUnseenThreadsBanner$1, {}),
+			/* @__PURE__ */ jsx(Virtuoso, {
+				"aria-label": t("aria/Thread list"),
+				atBottomStateChange: (atBottom) => atBottom && client.threads.loadNextPage(),
+				className: "str-chat__thread-list",
+				components: {
+					EmptyPlaceholder: ThreadListEmptyPlaceholder$1,
+					Footer: ThreadListLoadingIndicator$1
+				},
+				computeItemKey,
+				data: threads,
+				itemContent: (_, thread) => /* @__PURE__ */ jsx(ThreadListItem$1, {
+					thread,
+					threadListItemUIProps: { resetHighlighting: resetByThreadId[thread.id] }
+				}),
+				onKeyDown: (event) => onKeyDown(event),
+				ref: virtuosoRef,
+				role: "listbox",
+				scrollerRef: (el) => {
+					scrollerRef.current = el instanceof HTMLElement ? el : null;
+				},
+				...virtuosoProps
+			}),
+			/* @__PURE__ */ jsx(NotificationListFromContext, { panel: "thread-list" })
+		]
+	});
+};
+//#endregion
+export { ThreadList, useThreadList };
+
+//# sourceMappingURL=ThreadList.mjs.map

package/dist/es/components/Threads/ThreadList/ThreadList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadList.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/ThreadList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ComputeItemKey, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';\nimport { Virtuoso } from 'react-virtuoso';\nimport type { Thread, ThreadManager, ThreadManagerState } from 'stream-chat';\n\nimport { useVirtualizedListboxKeyboardNavigation } from '../../../a11y/hooks/useVirtualizedListboxKeyboardNavigation';\nimport { ThreadListItem as DefaultThreadListItem } from './ThreadListItem';\nimport { ThreadListEmptyPlaceholder as DefaultThreadListEmptyPlaceholder } from './ThreadListEmptyPlaceholder';\nimport { ThreadListUnseenThreadsBanner as DefaultThreadListUnseenThreadsBanner } from './ThreadListUnseenThreadsBanner';\nimport { ThreadListLoadingIndicator as DefaultThreadListLoadingIndicator } from './ThreadListLoadingIndicator';\nimport { LoadingChannels } from '../../Loading';\nimport { NotificationList } from '../../Notifications';\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../../context';\nimport { useStateStore } from '../../../store';\nimport { ThreadListHeader } from './ThreadListHeader';\n\nconst selector = (nextValue: ThreadManagerState) => ({\n  isLoading: nextValue.pagination.isLoading,\n  threads: nextValue.threads,\n});\n\nconst computeItemKey: ComputeItemKey<Thread, unknown> = (_, item) => item.id;\n\ntype ThreadListProps = {\n  virtuosoProps?: VirtuosoProps<Thread, unknown>;\n};\n\nexport const useThreadList = () => {\n  const { client } = useChatContext();\n\n  useEffect(() => {\n    const handleVisibilityChange = () => {\n      if (document.visibilityState === 'visible') {\n        client.threads.activate();\n      }\n      if (document.visibilityState === 'hidden') {\n        client.threads.deactivate();\n      }\n    };\n\n    handleVisibilityChange();\n\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    return () => {\n      client.threads.deactivate();\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n    };\n  }, [client]);\n};\n\nconst useThreadHighlighting = (threadManager: ThreadManager) => {\n  const [threadsToHighlight, setThreadsToHighlight] = useState<\n    Record<string, () => void>\n  >({});\n\n  useEffect(() => {\n    const unsubscribe = threadManager.state.subscribeWithSelector(\n      (state) => state.threads,\n      (nextThreads, previousThreads) => {\n        if (!previousThreads) return;\n\n        const resetByThreadId: Record<string, () => void> = {};\n\n        for (const thread of nextThreads) {\n          if (previousThreads.includes(thread)) continue;\n\n          resetByThreadId[thread.id] = () => {\n            setThreadsToHighlight((pv) => {\n              const copy = { ...pv };\n              delete copy[thread.id];\n              return copy;\n            });\n          };\n        }\n\n        setThreadsToHighlight(resetByThreadId);\n      },\n    );\n\n    return unsubscribe;\n  });\n\n  return threadsToHighlight;\n};\n\nexport const ThreadList = ({ virtuosoProps }: ThreadListProps) => {\n  const { client } = useChatContext();\n  const { t } = useTranslationContext('ThreadList');\n  const {\n    NotificationList: NotificationListFromContext = NotificationList,\n    ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder,\n    ThreadListItem = DefaultThreadListItem,\n    ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator,\n    ThreadListUnseenThreadsBanner = DefaultThreadListUnseenThreadsBanner,\n  } = useComponentContext();\n  const { isLoading, threads } = useStateStore(client.threads.state, selector);\n\n  const resetByThreadId = useThreadHighlighting(client.threads);\n\n  // Keyboard roving for the thread list (a `role=\"listbox\"` of `role=\"option\"` rows, no row actions\n  // → ArrowUp/Down/Home/End only). The list is virtualized, so only a window of rows exists in the\n  // DOM at a time; `useVirtualizedListboxKeyboardNavigation` indexes into the full `threads` array\n  // and drives Virtuoso's `scrollIntoView` to bring off-window rows into existence before focusing.\n  const virtuosoRef = useRef<VirtuosoHandle>(null);\n  const scrollerRef = useRef<HTMLElement | null>(null);\n\n  const scrollIndexIntoView = useCallback((index: number, onRendered: () => void) => {\n    virtuosoRef.current?.scrollIntoView({ done: onRendered, index });\n  }, []);\n\n  const { onKeyDown } = useVirtualizedListboxKeyboardNavigation({\n    getItemId: (thread) => thread.id,\n    itemIdAttribute: 'data-thread-id',\n    items: threads,\n    scrollerRef,\n    scrollIndexIntoView,\n  });\n\n  useThreadList();\n\n  if (isLoading && !threads.length) {\n    return (\n      <div className='str-chat__thread-list-container'>\n        <ThreadListHeader />\n        <div className='str-chat__thread-list str-chat__thread-list--loading'>\n          <LoadingChannels />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className='str-chat__thread-list-container'>\n      <ThreadListHeader />\n      {/* TODO: allow re-load on stale ThreadManager state */}\n      <ThreadListUnseenThreadsBanner />\n      <Virtuoso\n        aria-label={t('aria/Thread list')}\n        atBottomStateChange={(atBottom) => atBottom && client.threads.loadNextPage()}\n        className='str-chat__thread-list'\n        components={{\n          EmptyPlaceholder: ThreadListEmptyPlaceholder,\n          Footer: ThreadListLoadingIndicator,\n        }}\n        computeItemKey={computeItemKey}\n        data={threads}\n        itemContent={(_, thread) => (\n          <ThreadListItem\n            thread={thread}\n            threadListItemUIProps={{\n              resetHighlighting: resetByThreadId[thread.id],\n            }}\n          />\n        )}\n        onKeyDown={(event) =>\n          onKeyDown(event as unknown as React.KeyboardEvent<HTMLElement>)\n        }\n        ref={virtuosoRef}\n        role='listbox'\n        scrollerRef={(el) => {\n          scrollerRef.current = el instanceof HTMLElement ? el : null;\n        }}\n        // TODO: handle visibility (for a button that scrolls to the unread thread)\n        // itemsRendered={(items) => console.log({ items })}\n        {...virtuosoProps}\n      />\n      <NotificationListFromContext panel='thread-list' />\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/Threads/ThreadList/ThreadListEmptyPlaceholder.mjs

@@ -0,0 +1,17 @@
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx
+var ThreadListEmptyPlaceholder = () => {
+	const { IconMessageBubbles } = useComponentContextIcons();
+	const { t } = useTranslationContext("ThreadListEmptyPlaceholder");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__thread-list-empty-placeholder",
+		children: [/* @__PURE__ */ jsx(IconMessageBubbles, {}), /* @__PURE__ */ jsx("p", { children: t("Reply to a message to start a thread") })]
+	});
+};
+//#endregion
+export { ThreadListEmptyPlaceholder };
+
+//# sourceMappingURL=ThreadListEmptyPlaceholder.mjs.map

package/dist/es/components/Threads/ThreadList/ThreadListEmptyPlaceholder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListEmptyPlaceholder.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\n\nexport const ThreadListEmptyPlaceholder = () => {\n  const { IconMessageBubbles } = useComponentContextIcons();\n\n  const { t } = useTranslationContext('ThreadListEmptyPlaceholder');\n\n  return (\n    <div className='str-chat__thread-list-empty-placeholder'>\n      <IconMessageBubbles />\n      <p>{t('Reply to a message to start a thread')}</p>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAIA,IAAa,mCAAmC;CAC9C,MAAM,EAAE,uBAAuB,yBAAyB;CAExD,MAAM,EAAE,MAAM,sBAAsB,4BAA4B;CAEhE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,oBAAD,CAAqB,CAAA,GACrB,oBAAC,KAAD,EAAA,UAAI,EAAE,sCAAsC,EAAK,CAAA,CAC9C;;AAET"}

package/dist/es/components/Threads/ThreadList/ThreadListHeader.mjs

@@ -0,0 +1,22 @@
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useThreadsViewContext } from "../../ChatView/ChatView.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Threads/ThreadList/ThreadListHeader.tsx
+var ThreadListHeader = () => {
+	const { t } = useTranslationContext();
+	const { HeaderEndContent } = useComponentContext();
+	const { activeThread } = useThreadsViewContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__thread-list__header",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__thread-list__header__title",
+			children: t("Threads")
+		}), activeThread && HeaderEndContent && /* @__PURE__ */ jsx(HeaderEndContent, {})]
+	});
+};
+//#endregion
+export { ThreadListHeader };
+
+//# sourceMappingURL=ThreadListHeader.mjs.map

package/dist/es/components/Threads/ThreadList/ThreadListHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListHeader.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/ThreadListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentContext, useTranslationContext } from '../../../context';\nimport { useThreadsViewContext } from '../../ChatView';\n\nexport const ThreadListHeader = () => {\n  const { t } = useTranslationContext();\n  const { HeaderEndContent } = useComponentContext();\n  const { activeThread } = useThreadsViewContext();\n  return (\n    <div className='str-chat__thread-list__header'>\n      <div className='str-chat__thread-list__header__title'>{t('Threads')}</div>\n      {activeThread && HeaderEndContent && <HeaderEndContent />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAIA,IAAa,yBAAyB;CACpC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,qBAAqB,oBAAoB;CACjD,MAAM,EAAE,iBAAiB,sBAAsB;CAC/C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aAAwC,EAAE,SAAS;EAAO,CAAA,GACxE,gBAAgB,oBAAoB,oBAAC,kBAAD,CAAmB,CAAA,CACrD;;AAET"}

package/dist/es/components/Threads/ThreadList/ThreadListItem.mjs

@@ -0,0 +1,18 @@
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { ThreadListItemUI } from "./ThreadListItemUI.mjs";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Threads/ThreadList/ThreadListItem.tsx
+var ThreadListItemContext = createContext(void 0);
+var useThreadListItemContext = () => useContext(ThreadListItemContext);
+var ThreadListItem = ({ thread, threadListItemUIProps }) => {
+	const { ThreadListItemUI: ThreadListItemUI$1 = ThreadListItemUI } = useComponentContext();
+	return /* @__PURE__ */ jsx(ThreadListItemContext.Provider, {
+		value: thread,
+		children: /* @__PURE__ */ jsx(ThreadListItemUI$1, { ...threadListItemUIProps })
+	});
+};
+//#endregion
+export { ThreadListItem, useThreadListItemContext };
+
+//# sourceMappingURL=ThreadListItem.mjs.map

package/dist/es/components/Threads/ThreadList/ThreadListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListItem.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/ThreadListItem.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\n\nimport type { Thread } from 'stream-chat';\n\nimport { useComponentContext } from '../../../context';\nimport { ThreadListItemUI as DefaultThreadListItemUI } from './ThreadListItemUI';\n\nimport type { ThreadListItemUIProps } from './ThreadListItemUI';\n\nexport type ThreadListItemProps = {\n  thread: Thread;\n  threadListItemUIProps?: ThreadListItemUIProps;\n};\n\nconst ThreadListItemContext = createContext<Thread | undefined>(undefined);\n\nexport const useThreadListItemContext = () => useContext(ThreadListItemContext);\n\nexport const ThreadListItem = ({\n  thread,\n  threadListItemUIProps,\n}: ThreadListItemProps) => {\n  const { ThreadListItemUI = DefaultThreadListItemUI } = useComponentContext();\n\n  return (\n    <ThreadListItemContext.Provider value={thread}>\n      <ThreadListItemUI {...threadListItemUIProps} />\n    </ThreadListItemContext.Provider>\n  );\n};\n"],"mappings":";;;;;AAcA,IAAM,wBAAwB,cAAkC,KAAA,CAAS;AAEzE,IAAa,iCAAiC,WAAW,qBAAqB;AAE9E,IAAa,kBAAkB,EAC7B,QACA,4BACyB;CACzB,MAAM,EAAE,kBAAA,qBAAmB,qBAA4B,oBAAoB;CAE3E,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;YACrC,oBAAC,oBAAD,EAAkB,GAAI,sBAAwB,CAAA;CAChB,CAAA;AAEpC"}

package/dist/es/components/Threads/ThreadList/ThreadListItemUI.mjs

@@ -0,0 +1,160 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Avatar } from "../../Avatar/Avatar.mjs";
+import { Badge } from "../../Badge/Badge.mjs";
+import { AvatarStack } from "../../Avatar/AvatarStack.mjs";
+import { extractDisplayInfo } from "../../Avatar/utils.mjs";
+import { Timestamp } from "../../Message/Timestamp.mjs";
+import { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { useChannelPreviewInfo } from "../../ChannelListItem/hooks/useChannelPreviewInfo.mjs";
+import { useLatestMessagePreview } from "../../SummarizedMessagePreview/hooks/useLatestMessagePreview.mjs";
+import { SummarizedMessagePreview } from "../../SummarizedMessagePreview/SummarizedMessagePreview.mjs";
+import { composeThreadListItemAccessibleLabel } from "./utils.a11y.mjs";
+import { useThreadListItemContext } from "./ThreadListItem.mjs";
+import { useThreadsViewContext } from "../../ChatView/ChatView.mjs";
+import { useCallback, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Threads/ThreadList/ThreadListItemUI.tsx
+var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props }) => {
+	const { client, isMessageAIGenerated } = useChatContext();
+	const thread = useThreadListItemContext();
+	const { AvatarStack: AvatarStack$1 = AvatarStack, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const selector = useCallback((nextValue) => ({
+		channel: nextValue.channel,
+		deletedAt: nextValue.deletedAt,
+		latestReply: nextValue.replies.at(-1),
+		ownUnreadMessageCount: client.userID && nextValue.read[client.userID]?.unreadMessageCount || 0,
+		parentMessage: nextValue.parentMessage,
+		participants: nextValue.participants,
+		replyCount: nextValue.replyCount
+	}), [client]);
+	const { channel, deletedAt, latestReply, ownUnreadMessageCount, parentMessage, participants, replyCount } = useStateStore(thread.state, selector);
+	const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
+	const { t, tDateTimeParser, userLanguage } = useTranslationContext("ThreadListItemUI");
+	const { announceInteraction } = useInteractionAnnouncements();
+	const { activeThread, setActiveThread } = useThreadsViewContext();
+	const onSelectThread = useCallback(() => {
+		if (activeThread === thread) return;
+		setActiveThread(thread);
+		if (channelDisplayTitle) announceInteraction("thread.opened", { name: channelDisplayTitle });
+	}, [
+		activeThread,
+		announceInteraction,
+		channelDisplayTitle,
+		setActiveThread,
+		thread
+	]);
+	const { senderName: parentMessageSender, text: parentMessagePreview } = useLatestMessagePreview({
+		latestMessage: parentMessage,
+		participantCount: participants?.length
+	});
+	const accessibleLabel = useMemo(() => composeThreadListItemAccessibleLabel({
+		active: activeThread === thread,
+		channel,
+		client,
+		displayTitle: channelDisplayTitle,
+		isMessageAIGenerated,
+		latestReply,
+		parentMessage,
+		parentMessagePreview: parentMessage ? parentMessagePreview : void 0,
+		parentMessageSender: parentMessage ? parentMessageSender : void 0,
+		participantCount: participants?.length,
+		replyCount,
+		t,
+		tDateTimeParser,
+		unreadCount: ownUnreadMessageCount,
+		userLanguage
+	}, accessibleLabelConfig), [
+		accessibleLabelConfig,
+		activeThread,
+		channel,
+		channelDisplayTitle,
+		client,
+		isMessageAIGenerated,
+		latestReply,
+		ownUnreadMessageCount,
+		parentMessage,
+		parentMessagePreview,
+		parentMessageSender,
+		participants,
+		replyCount,
+		t,
+		tDateTimeParser,
+		thread,
+		userLanguage
+	]);
+	const avatarProps = deletedAt ? void 0 : {
+		imageUrl: latestReply?.user?.image,
+		userName: latestReply?.user?.name || latestReply?.user?.id
+	};
+	const displayInfo = useMemo(() => {
+		if (!participants) return [];
+		return participants.slice(0, 3).map(extractDisplayInfo$1);
+	}, [extractDisplayInfo$1, participants]);
+	useEffect(() => {
+		if (!resetHighlighting) return;
+		const reset = resetHighlighting;
+		const timeout = setTimeout(() => {
+			reset();
+		}, 2e3);
+		return () => clearTimeout(timeout);
+	}, [resetHighlighting]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__thread-list-item-container",
+		children: /* @__PURE__ */ jsxs("button", {
+			"aria-label": accessibleLabel,
+			"aria-selected": activeThread === thread,
+			className: clsx("str-chat__thread-list-item", { "str-chat__thread-list-item--highlighted": typeof resetHighlighting !== "undefined" }),
+			"data-thread-id": thread.id,
+			onClick: onSelectThread,
+			role: "option",
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(Avatar, {
+					size: "xl",
+					...avatarProps
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "str-chat__thread-list-item__content",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "str-chat__thread-list-item__content-leading",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "str-chat__thread-list-item__title",
+							children: channelDisplayTitle
+						}), /* @__PURE__ */ jsx(SummarizedMessagePreview, {
+							latestMessage: parentMessage,
+							participantCount: participants?.length
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "str-chat__thread-list-item__content-trailing",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "str-chat__thread-list-item__reply-information",
+							children: [/* @__PURE__ */ jsx(AvatarStack$1, {
+								displayInfo,
+								size: "sm"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "str-chat__thread-list-item__reply-count",
+								children: t("replyCount", { count: replyCount })
+							})]
+						}), /* @__PURE__ */ jsx(Timestamp, {
+							customClass: "str-chat__thread-list-item__timestamp",
+							timestamp: latestReply?.created_at
+						})]
+					})]
+				}),
+				ownUnreadMessageCount > 0 && /* @__PURE__ */ jsx(Badge, {
+					size: "md",
+					variant: "primary",
+					children: ownUnreadMessageCount
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { ThreadListItemUI };
+
+//# sourceMappingURL=ThreadListItemUI.mjs.map

package/dist/es/components/Threads/ThreadList/ThreadListItemUI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListItemUI.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/ThreadListItemUI.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\n\nimport type { ThreadState } from 'stream-chat';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { Timestamp } from '../../Message/Timestamp';\nimport {\n  Avatar,\n  type AvatarProps,\n  AvatarStack as DefaultAvatarStack,\n} from '../../Avatar';\nimport { useInteractionAnnouncements } from '../../Accessibility';\nimport { useChannelPreviewInfo } from '../../ChannelListItem';\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../../context';\nimport { useThreadsViewContext } from '../../ChatView';\nimport { useThreadListItemContext } from './ThreadListItem';\nimport { useStateStore } from '../../../store';\nimport { Badge } from '../../Badge';\nimport {\n  SummarizedMessagePreview,\n  useLatestMessagePreview,\n} from '../../SummarizedMessagePreview';\nimport {\n  composeThreadListItemAccessibleLabel,\n  type ThreadListItemLabelConfig,\n} from './utils.a11y';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../Avatar/utils';\n\nexport type ThreadListItemUIProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Configures the row's composed accessible name (the `aria-label`). Override individual parts, the\n   * order, the separator, or supply a full `build`. See `composeThreadListItemAccessibleLabel`.\n   */\n  accessibleLabelConfig?: ThreadListItemLabelConfig;\n  resetHighlighting?: () => void;\n};\n\nexport const ThreadListItemUI = ({\n  accessibleLabelConfig,\n  resetHighlighting,\n  ...props\n}: ThreadListItemUIProps) => {\n  const { client, isMessageAIGenerated } = useChatContext();\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const thread = useThreadListItemContext()!;\n  const {\n    AvatarStack = DefaultAvatarStack,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n  } = useComponentContext();\n\n  const selector = useCallback(\n    (nextValue: ThreadState) => ({\n      channel: nextValue.channel,\n      deletedAt: nextValue.deletedAt,\n      latestReply: nextValue.replies.at(-1),\n      ownUnreadMessageCount:\n        (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,\n      parentMessage: nextValue.parentMessage,\n      participants: nextValue.participants,\n      replyCount: nextValue.replyCount,\n    }),\n    [client],\n  );\n\n  const {\n    channel,\n    deletedAt,\n    latestReply,\n    ownUnreadMessageCount,\n    parentMessage,\n    participants,\n    replyCount,\n  } = useStateStore(thread.state, selector);\n\n  const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });\n  const { t, tDateTimeParser, userLanguage } = useTranslationContext('ThreadListItemUI');\n  const { announceInteraction } = useInteractionAnnouncements();\n\n  const { activeThread, setActiveThread } = useThreadsViewContext();\n\n  const onSelectThread = useCallback(() => {\n    if (activeThread === thread) return;\n    setActiveThread(thread);\n    // Confirm the opened thread to assistive tech, debounced in the registry so it lands after the\n    // thread composer's focus announcement rather than competing with it.\n    if (channelDisplayTitle) {\n      announceInteraction('thread.opened', { name: channelDisplayTitle });\n    }\n  }, [activeThread, announceInteraction, channelDisplayTitle, setActiveThread, thread]);\n\n  // Reuse the SAME preview the visible subtitle renders (text + sender, all message kinds), so the\n  // announced parent message matches what is shown.\n  const { senderName: parentMessageSender, text: parentMessagePreview } =\n    useLatestMessagePreview({\n      latestMessage: parentMessage,\n      participantCount: participants?.length,\n    });\n\n  const accessibleLabel = useMemo(\n    () =>\n      composeThreadListItemAccessibleLabel(\n        {\n          active: activeThread === thread,\n          channel,\n          client,\n          displayTitle: channelDisplayTitle,\n          isMessageAIGenerated,\n          latestReply,\n          parentMessage,\n          parentMessagePreview: parentMessage ? parentMessagePreview : undefined,\n          parentMessageSender: parentMessage ? parentMessageSender : undefined,\n          participantCount: participants?.length,\n          replyCount,\n          t,\n          tDateTimeParser,\n          unreadCount: ownUnreadMessageCount,\n          userLanguage,\n        },\n        accessibleLabelConfig,\n      ),\n    [\n      accessibleLabelConfig,\n      activeThread,\n      channel,\n      channelDisplayTitle,\n      client,\n      isMessageAIGenerated,\n      latestReply,\n      ownUnreadMessageCount,\n      parentMessage,\n      parentMessagePreview,\n      parentMessageSender,\n      participants,\n      replyCount,\n      t,\n      tDateTimeParser,\n      thread,\n      userLanguage,\n    ],\n  );\n\n  const avatarProps: Partial<AvatarProps> | undefined = deletedAt\n    ? undefined\n    : ({\n        imageUrl: latestReply?.user?.image,\n        userName: latestReply?.user?.name || latestReply?.user?.id,\n      } as const);\n\n  const displayInfo = useMemo(() => {\n    if (!participants) return [];\n\n    return participants.slice(0, 3).map(extractDisplayInfo);\n  }, [extractDisplayInfo, participants]);\n\n  useEffect(() => {\n    if (!resetHighlighting) return;\n\n    const reset = resetHighlighting;\n\n    const timeout = setTimeout(() => {\n      reset();\n    }, 2000);\n\n    return () => clearTimeout(timeout);\n  }, [resetHighlighting]);\n\n  return (\n    <div className='str-chat__thread-list-item-container'>\n      <button\n        aria-label={accessibleLabel}\n        aria-selected={activeThread === thread}\n        className={clsx('str-chat__thread-list-item', {\n          'str-chat__thread-list-item--highlighted':\n            typeof resetHighlighting !== 'undefined',\n        })}\n        data-thread-id={thread.id}\n        onClick={onSelectThread}\n        role='option'\n        {...props}\n      >\n        <Avatar size='xl' {...avatarProps} />\n        <div className='str-chat__thread-list-item__content'>\n          <div className='str-chat__thread-list-item__content-leading'>\n            <span className='str-chat__thread-list-item__title'>\n              {channelDisplayTitle}\n            </span>\n            <SummarizedMessagePreview\n              latestMessage={parentMessage}\n              participantCount={participants?.length}\n            />\n          </div>\n          <div className='str-chat__thread-list-item__content-trailing'>\n            <div className='str-chat__thread-list-item__reply-information'>\n              <AvatarStack displayInfo={displayInfo} size='sm' />\n              <span className='str-chat__thread-list-item__reply-count'>\n                {t('replyCount', { count: replyCount })}\n              </span>\n            </div>\n            <Timestamp\n              customClass='str-chat__thread-list-item__timestamp'\n              timestamp={latestReply?.created_at}\n            />\n          </div>\n        </div>\n        {ownUnreadMessageCount > 0 && (\n          <Badge size='md' variant='primary'>\n            {ownUnreadMessageCount}\n          </Badge>\n        )}\n      </button>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/Threads/ThreadList/ThreadListLoadingIndicator.mjs

@@ -0,0 +1,22 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { LoadingIndicator } from "../../Loading/LoadingIndicator.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Threads/ThreadList/ThreadListLoadingIndicator.tsx
+var selector = (nextValue) => ({ isLoadingNext: nextValue.pagination.isLoadingNext });
+var ThreadListLoadingIndicator = () => {
+	const { LoadingIndicator: LoadingIndicator$1 = LoadingIndicator } = useComponentContext();
+	const { client } = useChatContext();
+	const { isLoadingNext } = useStateStore(client.threads.state, selector);
+	if (!isLoadingNext) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__thread-list-loading-indicator",
+		children: /* @__PURE__ */ jsx(LoadingIndicator$1, {})
+	});
+};
+//#endregion
+export { ThreadListLoadingIndicator };
+
+//# sourceMappingURL=ThreadListLoadingIndicator.mjs.map

package/dist/es/components/Threads/ThreadList/ThreadListLoadingIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListLoadingIndicator.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/ThreadListLoadingIndicator.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { ThreadManagerState } from 'stream-chat';\n\nimport { LoadingIndicator as DefaultLoadingIndicator } from '../../Loading';\nimport { useChatContext, useComponentContext } from '../../../context';\nimport { useStateStore } from '../../../store';\n\nconst selector = (nextValue: ThreadManagerState) => ({\n  isLoadingNext: nextValue.pagination.isLoadingNext,\n});\n\nexport const ThreadListLoadingIndicator = () => {\n  const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext();\n  const { client } = useChatContext();\n  const { isLoadingNext } = useStateStore(client.threads.state, selector);\n\n  if (!isLoadingNext) return null;\n\n  return (\n    <div className='str-chat__thread-list-loading-indicator'>\n      <LoadingIndicator />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAQA,IAAM,YAAY,eAAmC,EACnD,eAAe,UAAU,WAAW,cACtC;AAEA,IAAa,mCAAmC;CAC9C,MAAM,EAAE,kBAAA,qBAAmB,qBAA4B,oBAAoB;CAC3E,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,kBAAkB,cAAc,OAAO,QAAQ,OAAO,QAAQ;CAEtE,IAAI,CAAC,eAAe,OAAO;CAE3B,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,oBAAD,CAAmB,CAAA;CAChB,CAAA;AAET"}

package/dist/es/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.mjs

@@ -0,0 +1,30 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { LoadingIndicator } from "../../Loading/LoadingIndicator.mjs";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
+var selector = (nextValue) => ({
+	isLoading: nextValue.pagination.isLoading,
+	unseenThreadIds: nextValue.unseenThreadIds
+});
+var ThreadListUnseenThreadsBanner = () => {
+	const { IconRefresh } = useComponentContextIcons();
+	const { client } = useChatContext();
+	const { t } = useTranslationContext();
+	const { isLoading, unseenThreadIds } = useStateStore(client.threads.state, selector);
+	if (!unseenThreadIds.length) return null;
+	return /* @__PURE__ */ jsxs("button", {
+		className: clsx("str-chat__unseen-threads-banner", { "str-chat__unseen-threads-banner--loading": isLoading }),
+		disabled: isLoading,
+		onClick: () => client.threads.reload(),
+		children: [!isLoading && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconRefresh, {}), /* @__PURE__ */ jsx("span", { children: t("ThreadListUnseenThreadsBanner/unreadThreads", { count: unseenThreadIds.length }) })] }), isLoading && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LoadingIndicator, {}), /* @__PURE__ */ jsx("span", { children: t("ThreadListUnseenThreadsBanner/loading") })] })]
+	});
+};
+//#endregion
+export { ThreadListUnseenThreadsBanner };
+
+//# sourceMappingURL=ThreadListUnseenThreadsBanner.mjs.map