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

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

@@ -0,0 +1,25 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Thread/ThreadStart.tsx
+var threadStartSelector = ({ parentMessage }) => ({ parentMessage });
+var ThreadStart = () => {
+	const thread = useThreadContext();
+	const { t } = useTranslationContext();
+	const { parentMessage } = useStateStore(thread?.state, threadStartSelector) ?? {};
+	if (!parentMessage?.reply_count) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__thread-start",
+		children: t("common.replyCount.label", {
+			count: parentMessage.reply_count,
+			defaultValue_one: "1 reply",
+			defaultValue_other: "{{ count }} replies"
+		})
+	});
+};
+//#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 { useTranslationContext } from '../../context/TranslationContext';\nimport { useThreadContext } from '../Threads/ThreadContext';\nimport { useStateStore } from '../../store';\nimport type { ThreadState } from 'stream-chat';\n\nconst threadStartSelector = ({ parentMessage }: ThreadState) => ({\n  parentMessage,\n});\n\nexport const ThreadStart = () => {\n  const thread = useThreadContext();\n  const { t } = useTranslationContext();\n  const { parentMessage } = useStateStore(thread?.state, threadStartSelector) ?? {};\n\n  if (!parentMessage?.reply_count) return null;\n\n  return (\n    <div className='str-chat__thread-start'>\n      {t('common.replyCount.label', {\n        count: parentMessage.reply_count,\n        defaultValue_one: '1 reply',\n        defaultValue_other: '{{ count }} replies',\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAM,uBAAuB,EAAE,qBAAkC,EAC/D,cACF;AAEA,IAAa,oBAAoB;CAC/B,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,kBAAkB,cAAc,QAAQ,OAAO,mBAAmB,KAAK,CAAC;CAEhF,IAAI,CAAC,eAAe,aAAa,OAAO;CAExC,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,EAAE,2BAA2B;GAC5B,OAAO,cAAc;GACrB,kBAAkB;GAClB,oBAAoB;EACtB,CAAC;CACE,CAAA;AAET"}

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

@@ -0,0 +1,13 @@
+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
+});
+//#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 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}>{children}</ThreadContext.Provider>\n);\n"],"mappings":";;;AAOA,IAAa,gBAAgB,cAAkC,KAAA,CAAS;AAExE,IAAa,yBAAyB,WAAW,aAAa;AAE9D,IAAa,kBAAkB,EAC7B,UACA,aAEA,oBAAC,cAAc,UAAf;CAAwB,OAAO;CAAS;AAAiC,CAAA"}

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

@@ -0,0 +1,112 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useVirtualizedListboxKeyboardNavigation } from "../../../a11y/hooks/useVirtualizedListboxKeyboardNavigation.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { NotificationList } from "../../Notifications/NotificationList.mjs";
+import { LoadingChannels } from "../../Loading/LoadingChannels.mjs";
+import { ThreadListItem } from "./ThreadListItem.mjs";
+import { ThreadListEmptyPlaceholder } from "./ThreadListEmptyPlaceholder.mjs";
+import { ThreadListUnseenThreadsBanner } from "./ThreadListUnseenThreadsBanner.mjs";
+import { useThreadHighlighting } from "./useThreadHighlighting.mjs";
+import { ThreadListLoadingIndicator } from "./ThreadListLoadingIndicator.mjs";
+import { ThreadListHeader } from "./ThreadListHeader.mjs";
+import { useCallback, useEffect, useRef } 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 { pagination } = client.threads.state.getLatestValue();
+		client.threads.state.partialNext({
+			isThreadOrderStale: false,
+			pagination: {
+				...pagination,
+				nextCursor: null
+			},
+			ready: false,
+			threads: [],
+			unseenThreadIds: []
+		});
+		client.threads.reload({ force: true });
+		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 ThreadList = ({ virtuosoProps }) => {
+	const { client } = useChatContext();
+	const { t } = useTranslationContext();
+	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("threadList.threadList.ariaLabel", "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 } from 'react';\nimport type { ComputeItemKey, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';\nimport { Virtuoso } from 'react-virtuoso';\nimport type { Thread, 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 { useThreadHighlighting } from './useThreadHighlighting';\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    // Reset derived pagination inputs before initial reload so the first mount requests\n    // the default first page size, rather than a limit inferred from cached/unseen threads.\n    const { pagination } = client.threads.state.getLatestValue();\n    client.threads.state.partialNext({\n      isThreadOrderStale: false,\n      pagination: {\n        ...pagination,\n        nextCursor: null,\n      },\n      ready: false,\n      threads: [],\n      unseenThreadIds: [],\n    });\n    void client.threads.reload({ force: true });\n\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\nexport const ThreadList = ({ virtuosoProps }: ThreadListProps) => {\n  const { client } = useChatContext();\n  const { t } = useTranslationContext();\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('threadList.threadList.ariaLabel', '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":";;;;;;;;;;;;;;;;;AAqBA,IAAM,YAAY,eAAmC;CACnD,WAAW,UAAU,WAAW;CAChC,SAAS,UAAU;AACrB;AAEA,IAAM,kBAAmD,GAAG,SAAS,KAAK;AAM1E,IAAa,sBAAsB;CACjC,MAAM,EAAE,WAAW,eAAe;CAElC,gBAAgB;EAGd,MAAM,EAAE,eAAe,OAAO,QAAQ,MAAM,eAAe;EAC3D,OAAO,QAAQ,MAAM,YAAY;GAC/B,oBAAoB;GACpB,YAAY;IACV,GAAG;IACH,YAAY;GACd;GACA,OAAO;GACP,SAAS,CAAC;GACV,iBAAiB,CAAC;EACpB,CAAC;EACD,OAAY,QAAQ,OAAO,EAAE,OAAO,KAAK,CAAC;EAE1C,MAAM,+BAA+B;GACnC,IAAI,SAAS,oBAAoB,WAC/B,OAAO,QAAQ,SAAS;GAE1B,IAAI,SAAS,oBAAoB,UAC/B,OAAO,QAAQ,WAAW;EAE9B;EAEA,uBAAuB;EAEvB,SAAS,iBAAiB,oBAAoB,sBAAsB;EACpE,aAAa;GACX,OAAO,QAAQ,WAAW;GAC1B,SAAS,oBAAoB,oBAAoB,sBAAsB;EACzE;CACF,GAAG,CAAC,MAAM,CAAC;AACb;AAEA,IAAa,cAAc,EAAE,oBAAqC;CAChE,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,kBAAkB,8BAA8B,kBAChD,4BAAA,+BAA6B,4BAC7B,gBAAA,mBAAiB,gBACjB,4BAAA,+BAA6B,4BAC7B,+BAAA,kCAAgC,kCAC9B,oBAAoB;CACxB,MAAM,EAAE,WAAW,YAAY,cAAc,OAAO,QAAQ,OAAO,QAAQ;CAE3E,MAAM,kBAAkB,sBAAsB,OAAO,OAAO;CAM5D,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,cAAc,OAA2B,IAAI;CAMnD,MAAM,EAAE,cAAc,wCAAwC;EAC5D,YAAY,WAAW,OAAO;EAC9B,iBAAiB;EACjB,OAAO;EACP;EACA,qBAT0B,aAAa,OAAe,eAA2B;GACjF,YAAY,SAAS,eAAe;IAAE,MAAM;IAAY;GAAM,CAAC;EACjE,GAAG,CAAC,CAOF;CACF,CAAC;CAED,cAAc;CAEd,IAAI,aAAa,CAAC,QAAQ,QACxB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,iBAAD,CAAkB,CAAA;EACf,CAAA,CACF;;CAIT,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,kBAAD,CAAmB,CAAA;GAEnB,oBAAC,iCAAD,CAAgC,CAAA;GAChC,oBAAC,UAAD;IACE,cAAY,EAAE,mCAAmC,aAAa;IAC9D,sBAAsB,aAAa,YAAY,OAAO,QAAQ,aAAa;IAC3E,WAAU;IACV,YAAY;KACV,kBAAkB;KAClB,QAAQ;IACV;IACgB;IAChB,MAAM;IACN,cAAc,GAAG,WACf,oBAAC,kBAAD;KACU;KACR,uBAAuB,EACrB,mBAAmB,gBAAgB,OAAO,IAC5C;IACD,CAAA;IAEH,YAAY,UACV,UAAU,KAAoD;IAEhE,KAAK;IACL,MAAK;IACL,cAAc,OAAO;KACnB,YAAY,UAAU,cAAc,cAAc,KAAK;IACzD;IAGA,GAAI;GACL,CAAA;GACD,oBAAC,6BAAD,EAA6B,OAAM,cAAe,CAAA;EAC/C;;AAET"}

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

@@ -0,0 +1,17 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.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();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__thread-list-empty-placeholder",
+		children: [/* @__PURE__ */ jsx(IconMessageBubbles, {}), /* @__PURE__ */ jsx("p", { children: t("threadList.empty.text", "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  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__thread-list-empty-placeholder'>\n      <IconMessageBubbles />\n      <p>{t('threadList.empty.text', 'Reply to a message to start a thread')}</p>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAIA,IAAa,mCAAmC;CAC9C,MAAM,EAAE,uBAAuB,yBAAyB;CACxD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,oBAAD,CAAqB,CAAA,GACrB,oBAAC,KAAD,EAAA,UAAI,EAAE,yBAAyB,sCAAsC,EAAK,CAAA,CACvE;;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 { useWorkspaceNavigation } from "../../../context/WorkspaceNavigationContext.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 hasActiveThread = useWorkspaceNavigation().openThreads.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__thread-list__header",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__thread-list__header__title",
+			children: t("common.threads.text", "Threads")
+		}), hasActiveThread && 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 {\n  useComponentContext,\n  useTranslationContext,\n  useWorkspaceNavigation,\n} from '../../../context';\n\nexport const ThreadListHeader = () => {\n  const { t } = useTranslationContext();\n  const { HeaderEndContent } = useComponentContext();\n  // A thread is \"active\" when one is open in the workspace.\n  const hasActiveThread = useWorkspaceNavigation().openThreads.length > 0;\n  return (\n    <div className='str-chat__thread-list__header'>\n      <div className='str-chat__thread-list__header__title'>\n        {t('common.threads.text', 'Threads')}\n      </div>\n      {hasActiveThread && HeaderEndContent && <HeaderEndContent />}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,yBAAyB;CACpC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,qBAAqB,oBAAoB;CAEjD,MAAM,kBAAkB,uBAAuB,CAAC,CAAC,YAAY,SAAS;CACtE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,EAAE,uBAAuB,SAAS;EAChC,CAAA,GACJ,mBAAmB,oBAAoB,oBAAC,kBAAD,CAAmB,CAAA,CACxD;;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 { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Timestamp } from "../../Message/Timestamp.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 { useInteractionAnnouncements } from "../../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { useLatestMessagePreview } from "../../SummarizedMessagePreview/hooks/useLatestMessagePreview.mjs";
+import { SummarizedMessagePreview } from "../../SummarizedMessagePreview/SummarizedMessagePreview.mjs";
+import { useChannelPreviewInfo } from "../../ChannelListItem/hooks/useChannelPreviewInfo.mjs";
+import { composeThreadListItemAccessibleLabel } from "./utils.a11y.mjs";
+import { useThreadListItemContext } from "./ThreadListItem.mjs";
+import { useWorkspaceNavigation } from "../../../context/WorkspaceNavigationContext.mjs";
+import { useCallback, useEffect, useMemo } from "react";
+import { convertTimestampToDate } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Threads/ThreadList/ThreadListItemUI.tsx
+var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props }) => {
+	const { onClick: onClickFromProps, ...buttonProps } = props;
+	const { client, isMessageAIGenerated } = useChatContext();
+	const thread = useThreadListItemContext();
+	const selector = useCallback((nextValue) => ({
+		channel: nextValue.channel,
+		deletedAt: nextValue.deletedAt,
+		ownUnreadMessageCount: client.userID && nextValue.read[client.userID]?.unreadMessageCount || 0,
+		parentMessage: nextValue.parentMessage,
+		participants: nextValue.participants,
+		replyCount: nextValue.replyCount
+	}), [client]);
+	const { channel, deletedAt, ownUnreadMessageCount, parentMessage, participants, replyCount } = useStateStore(thread.state, selector);
+	const latestReplySelector = useCallback((state) => ({ latestReply: state.lastMessage }), []);
+	const { latestReply } = useStateStore(thread.messagePaginator.aggregateState, latestReplySelector);
+	const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
+	const { t, tDateTimeParser, userLanguage } = useTranslationContext();
+	const { announceInteraction } = useInteractionAnnouncements();
+	const { isThreadActive, openThread } = useWorkspaceNavigation();
+	const { AvatarStack: AvatarStack$1 = AvatarStack, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const isSelected = isThreadActive(thread.id);
+	const { senderName: parentMessageSender, text: parentMessagePreview } = useLatestMessagePreview({
+		latestMessage: parentMessage,
+		participantCount: participants?.length
+	});
+	const accessibleLabel = useMemo(() => composeThreadListItemAccessibleLabel({
+		active: isSelected,
+		channel,
+		client,
+		displayTitle: channelDisplayTitle,
+		isMessageAIGenerated,
+		latestReply: latestReply ?? void 0,
+		parentMessage: parentMessage ?? void 0,
+		parentMessagePreview: parentMessage ? parentMessagePreview : void 0,
+		parentMessageSender: parentMessage ? parentMessageSender : void 0,
+		participantCount: participants?.length,
+		replyCount,
+		t,
+		tDateTimeParser,
+		unreadCount: ownUnreadMessageCount,
+		userLanguage
+	}, accessibleLabelConfig), [
+		accessibleLabelConfig,
+		channel,
+		channelDisplayTitle,
+		client,
+		isMessageAIGenerated,
+		isSelected,
+		latestReply,
+		ownUnreadMessageCount,
+		parentMessage,
+		parentMessagePreview,
+		parentMessageSender,
+		participants,
+		replyCount,
+		t,
+		tDateTimeParser,
+		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": isSelected,
+			className: clsx("str-chat__thread-list-item", { "str-chat__thread-list-item--highlighted": typeof resetHighlighting !== "undefined" }),
+			"data-thread-id": thread.id,
+			onClick: (event) => {
+				openThread(thread, { additive: event.ctrlKey || event.metaKey });
+				if (!isSelected && channelDisplayTitle) announceInteraction("thread.opened", { name: channelDisplayTitle });
+				onClickFromProps?.(event);
+			},
+			role: "option",
+			...buttonProps,
+			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("common.replyCount.label", {
+									count: replyCount,
+									defaultValue_one: "1 reply",
+									defaultValue_other: "{{ count }} replies"
+								})
+							})]
+						}), /* @__PURE__ */ jsx(Timestamp, {
+							customClass: "str-chat__thread-list-item__timestamp",
+							timestamp: convertTimestampToDate(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 { convertTimestampToDate } from 'stream-chat';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\n\nimport type { MessagePaginatorAggregateState, ThreadState } from 'stream-chat';\n\nimport { Timestamp } from '../../Message/Timestamp';\nimport {\n  Avatar,\n  type AvatarProps,\n  AvatarStack as DefaultAvatarStack,\n} from '../../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../Avatar/utils';\nimport { useInteractionAnnouncements } from '../../Accessibility';\nimport { useChannelPreviewInfo } from '../../ChannelListItem';\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n  useWorkspaceNavigation,\n} from '../../../context';\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';\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 { onClick: onClickFromProps, ...buttonProps } = props;\n  const { client, isMessageAIGenerated } = useChatContext();\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const thread = useThreadListItemContext()!;\n\n  const selector = useCallback(\n    (nextValue: ThreadState) => ({\n      channel: nextValue.channel,\n      deletedAt: nextValue.deletedAt,\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    ownUnreadMessageCount,\n    parentMessage,\n    participants,\n    replyCount,\n  } = useStateStore(thread.state, selector);\n\n  // Replies live in the thread's message paginator. The latest reply is tracked on the paginator's\n  // `aggregateState` (advanced on every ingest), NOT derived from the pagination `state`: a reply\n  // arriving via WS lands in the head interval, which is not the active window here, so the\n  // pagination store would not emit. `aggregateState` is written directly on each advance, so this\n  // subscription stays reactive.\n  const latestReplySelector = useCallback(\n    (state: MessagePaginatorAggregateState) => ({ latestReply: state.lastMessage }),\n    [],\n  );\n\n  const { latestReply } = useStateStore(\n    thread.messagePaginator.aggregateState,\n    latestReplySelector,\n  );\n\n  const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });\n  const { t, tDateTimeParser, userLanguage } = useTranslationContext();\n  const { announceInteraction } = useInteractionAnnouncements();\n  const { isThreadActive, openThread } = useWorkspaceNavigation();\n  const {\n    AvatarStack = DefaultAvatarStack,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n  } = useComponentContext();\n  const isSelected = isThreadActive(thread.id);\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: isSelected,\n          channel,\n          client,\n          displayTitle: channelDisplayTitle,\n          isMessageAIGenerated,\n          latestReply: latestReply ?? undefined,\n          parentMessage: parentMessage ?? undefined,\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      channel,\n      channelDisplayTitle,\n      client,\n      isMessageAIGenerated,\n      isSelected,\n      latestReply,\n      ownUnreadMessageCount,\n      parentMessage,\n      parentMessagePreview,\n      parentMessageSender,\n      participants,\n      replyCount,\n      t,\n      tDateTimeParser,\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={isSelected}\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={(event) => {\n          // ⌘/ctrl-click opens the thread beside the current one; a plain click replaces it.\n          void openThread(thread, { additive: event.ctrlKey || event.metaKey });\n          // Confirm the opened thread to assistive tech, debounced in the registry so it lands after\n          // the thread composer's focus announcement rather than competing with it. Skip when the\n          // row is already the active thread (re-selecting announces nothing new).\n          if (!isSelected && channelDisplayTitle) {\n            announceInteraction('thread.opened', { name: channelDisplayTitle });\n          }\n          onClickFromProps?.(event);\n        }}\n        role='option'\n        {...buttonProps}\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('common.replyCount.label', {\n                  count: replyCount,\n                  defaultValue_one: '1 reply',\n                  defaultValue_other: '{{ count }} replies',\n                })}\n              </span>\n            </div>\n            <Timestamp\n              customClass='str-chat__thread-list-item__timestamp'\n              timestamp={convertTimestampToDate(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 { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../context/ComponentContext.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,34 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { LoadingIndicator } from "../../Loading/LoadingIndicator.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.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("threadList.unseenBanner.unreadThreads", {
+			count: unseenThreadIds.length,
+			defaultValue_one: "{{ count }} unread thread",
+			defaultValue_other: "{{ count }} unread threads"
+		}) })] }), isLoading && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LoadingIndicator, {}), /* @__PURE__ */ jsx("span", { children: t("threadList.unseenBanner.loading", "Loading...") })] })]
+	});
+};
+//#endregion
+export { ThreadListUnseenThreadsBanner };
+
+//# sourceMappingURL=ThreadListUnseenThreadsBanner.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadListUnseenThreadsBanner.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport type { ThreadManagerState } from 'stream-chat';\n\nimport {\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../context';\nimport { useStateStore } from '../../../store';\nimport { LoadingIndicator } from '../../Loading';\n\nconst selector = (nextValue: ThreadManagerState) => ({\n  isLoading: nextValue.pagination.isLoading,\n  unseenThreadIds: nextValue.unseenThreadIds,\n});\n\nexport const ThreadListUnseenThreadsBanner = () => {\n  const { IconRefresh } = useComponentContextIcons();\n  const { client } = useChatContext();\n  const { t } = useTranslationContext();\n  const { isLoading, unseenThreadIds } = useStateStore(client.threads.state, selector);\n\n  if (!unseenThreadIds.length) return null;\n\n  return (\n    <button\n      className={clsx('str-chat__unseen-threads-banner', {\n        'str-chat__unseen-threads-banner--loading': isLoading,\n      })}\n      disabled={isLoading}\n      onClick={() => client.threads.reload()}\n    >\n      {!isLoading && (\n        <>\n          <IconRefresh />\n          <span>\n            {t('threadList.unseenBanner.unreadThreads', {\n              count: unseenThreadIds.length,\n              defaultValue_one: '{{ count }} unread thread',\n              defaultValue_other: '{{ count }} unread threads',\n            })}\n          </span>\n        </>\n      )}\n      {isLoading && (\n        <>\n          <LoadingIndicator />\n          <span>{t('threadList.unseenBanner.loading', 'Loading...')}</span>\n        </>\n      )}\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,IAAM,YAAY,eAAmC;CACnD,WAAW,UAAU,WAAW;CAChC,iBAAiB,UAAU;AAC7B;AAEA,IAAa,sCAAsC;CACjD,MAAM,EAAE,gBAAgB,yBAAyB;CACjD,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAW,oBAAoB,cAAc,OAAO,QAAQ,OAAO,QAAQ;CAEnF,IAAI,CAAC,gBAAgB,QAAQ,OAAO;CAEpC,OACE,qBAAC,UAAD;EACE,WAAW,KAAK,mCAAmC,EACjD,4CAA4C,UAC9C,CAAC;EACD,UAAU;EACV,eAAe,OAAO,QAAQ,OAAO;YALvC,CAOG,CAAC,aACA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD,CAAc,CAAA,GACd,oBAAC,QAAD,EAAA,UACG,EAAE,yCAAyC;GAC1C,OAAO,gBAAgB;GACvB,kBAAkB;GAClB,oBAAoB;EACtB,CAAC,EACG,CAAA,CACN,EAAA,CAAA,GAEH,aACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,oBAAC,QAAD,EAAA,UAAO,EAAE,mCAAmC,YAAY,EAAQ,CAAA,CAChE,EAAA,CAAA,CAEE;;AAEZ"}

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

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/components/Threads/ThreadList/useThreadHighlighting.ts
+/**
+* The threads to flash as newly arrived, as a map of id to a callback that ends the flash.
+*
+* Arrival is taken from the manager's `unseenThreadIds`, which is appended to only when a thread
+* the list does not hold receives a message. Diffing the threads array instead would call every
+* thread that merely *appeared* new -- so the whole first page would flash on load, and so would
+* each page while scrolling, neither of which is an arrival.
+*
+* The ids have to be remembered as they are reported, because `reload()` clears `unseenThreadIds`
+* in the same update that puts those threads into the list: by the time they are on screen the
+* manager no longer calls them unseen.
+*/
+var useThreadHighlighting = (threadManager) => {
+	const [threadsToHighlight, setThreadsToHighlight] = useState({});
+	const awaitingArrival = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		const unsubscribeUnseen = threadManager.state.subscribeWithSelector((state) => ({ unseenThreadIds: state.unseenThreadIds }), ({ unseenThreadIds }) => {
+			unseenThreadIds.forEach((id) => awaitingArrival.current.add(id));
+		});
+		const unsubscribeThreads = threadManager.state.subscribeWithSelector((state) => ({ threads: state.threads }), ({ threads }) => {
+			if (!awaitingArrival.current.size) return;
+			const arrived = threads.filter(({ id }) => awaitingArrival.current.has(id));
+			if (!arrived.length) return;
+			arrived.forEach(({ id }) => awaitingArrival.current.delete(id));
+			setThreadsToHighlight((current) => {
+				const next = { ...current };
+				for (const { id } of arrived) next[id] = () => setThreadsToHighlight((pv) => {
+					const copy = { ...pv };
+					delete copy[id];
+					return copy;
+				});
+				return next;
+			});
+		});
+		return () => {
+			unsubscribeUnseen();
+			unsubscribeThreads();
+		};
+	}, [threadManager]);
+	return threadsToHighlight;
+};
+//#endregion
+export { useThreadHighlighting };
+
+//# sourceMappingURL=useThreadHighlighting.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useThreadHighlighting.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/useThreadHighlighting.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { ThreadManager } from 'stream-chat';\n\n/**\n * The threads to flash as newly arrived, as a map of id to a callback that ends the flash.\n *\n * Arrival is taken from the manager's `unseenThreadIds`, which is appended to only when a thread\n * the list does not hold receives a message. Diffing the threads array instead would call every\n * thread that merely *appeared* new -- so the whole first page would flash on load, and so would\n * each page while scrolling, neither of which is an arrival.\n *\n * The ids have to be remembered as they are reported, because `reload()` clears `unseenThreadIds`\n * in the same update that puts those threads into the list: by the time they are on screen the\n * manager no longer calls them unseen.\n */\nexport const useThreadHighlighting = (threadManager: ThreadManager) => {\n  const [threadsToHighlight, setThreadsToHighlight] = useState<\n    Record<string, () => void>\n  >({});\n  const awaitingArrival = useRef(new Set<string>());\n\n  useEffect(() => {\n    const unsubscribeUnseen = threadManager.state.subscribeWithSelector(\n      (state) => ({ unseenThreadIds: state.unseenThreadIds }),\n      ({ unseenThreadIds }) => {\n        unseenThreadIds.forEach((id) => awaitingArrival.current.add(id));\n      },\n    );\n\n    const unsubscribeThreads = threadManager.state.subscribeWithSelector(\n      (state) => ({ threads: state.threads }),\n      ({ threads }) => {\n        if (!awaitingArrival.current.size) return;\n\n        const arrived = threads.filter(({ id }) => awaitingArrival.current.has(id));\n        if (!arrived.length) return;\n\n        arrived.forEach(({ id }) => awaitingArrival.current.delete(id));\n\n        // Merged, not replaced: a second arrival while the first is still flashing must not cut\n        // the first one short.\n        setThreadsToHighlight((current) => {\n          const next = { ...current };\n          for (const { id } of arrived) {\n            next[id] = () =>\n              setThreadsToHighlight((pv) => {\n                const copy = { ...pv };\n                delete copy[id];\n                return copy;\n              });\n          }\n          return next;\n        });\n      },\n    );\n\n    return () => {\n      unsubscribeUnseen();\n      unsubscribeThreads();\n    };\n  }, [threadManager]);\n\n  return threadsToHighlight;\n};\n"],"mappings":";;;;;;;;;;;;;;AAeA,IAAa,yBAAyB,kBAAiC;CACrE,MAAM,CAAC,oBAAoB,yBAAyB,SAElD,CAAC,CAAC;CACJ,MAAM,kBAAkB,uBAAO,IAAI,IAAY,CAAC;CAEhD,gBAAgB;EACd,MAAM,oBAAoB,cAAc,MAAM,uBAC3C,WAAW,EAAE,iBAAiB,MAAM,gBAAgB,KACpD,EAAE,sBAAsB;GACvB,gBAAgB,SAAS,OAAO,gBAAgB,QAAQ,IAAI,EAAE,CAAC;EACjE,CACF;EAEA,MAAM,qBAAqB,cAAc,MAAM,uBAC5C,WAAW,EAAE,SAAS,MAAM,QAAQ,KACpC,EAAE,cAAc;GACf,IAAI,CAAC,gBAAgB,QAAQ,MAAM;GAEnC,MAAM,UAAU,QAAQ,QAAQ,EAAE,SAAS,gBAAgB,QAAQ,IAAI,EAAE,CAAC;GAC1E,IAAI,CAAC,QAAQ,QAAQ;GAErB,QAAQ,SAAS,EAAE,SAAS,gBAAgB,QAAQ,OAAO,EAAE,CAAC;GAI9D,uBAAuB,YAAY;IACjC,MAAM,OAAO,EAAE,GAAG,QAAQ;IAC1B,KAAK,MAAM,EAAE,QAAQ,SACnB,KAAK,YACH,uBAAuB,OAAO;KAC5B,MAAM,OAAO,EAAE,GAAG,GAAG;KACrB,OAAO,KAAK;KACZ,OAAO;IACT,CAAC;IAEL,OAAO;GACT,CAAC;EACH,CACF;EAEA,aAAa;GACX,kBAAkB;GAClB,mBAAmB;EACrB;CACF,GAAG,CAAC,aAAa,CAAC;CAElB,OAAO;AACT"}