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

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

@@ -1 +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"}
+{"version":3,"file":"ThreadHeader.mjs","names":[],"sources":["../../../../src/components/Thread/ThreadHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useChannel } from '../../context';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useStateStore } from '../../store';\nimport { useChannelPreviewInfo } from '../ChannelListItem/hooks/useChannelPreviewInfo';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { TypingIndicatorHeader } from '../TypingIndicator/TypingIndicatorHeader';\nimport { useThreadContext } from '../Threads';\nimport { useChatContext } from '../../context/ChatContext';\n\nimport type { EventPayload, LocalMessage } from 'stream-chat';\nimport type { TextComposerState, ThreadState } from 'stream-chat';\nimport { WorkspaceNavigationBackButton, WorkspaceNavigationCloseButton } from '../Button';\nimport type { ChannelConfig } from 'stream-chat';\n\nconst typingEventsStateSelector = ({ typingEvents }: ChannelConfig) => ({\n  typingEventsEnabled: typingEvents.enabled,\n});\n\nconst threadStateSelector = ({ parentMessage, replyCount }: ThreadState) => ({\n  parentMessage,\n  replyCount,\n});\nconst textComposerTypingSelector = ({ typing }: TextComposerState) => ({ typing });\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 channel = useChannel();\n  const { typingEventsEnabled } =\n    useStateStore(channel?.configState, typingEventsStateSelector) ?? {};\n  const threadInstance = useThreadContext();\n  const parentId = threadInstance?.id;\n  const { client } = useChatContext();\n  const messageComposer = useMessageComposerController();\n  const { typing = {} } =\n    useStateStore(messageComposer.textComposer?.state, textComposerTypingSelector) ?? {};\n  const typingInThread = (Object.values(typing) as EventPayload<'typing.start'>[]).filter(\n    ({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId,\n  );\n  const hasTyping = typingEventsEnabled !== false && typingInThread.length > 0;\n  const replyCountText = t('common.replyCount.label', {\n    count: replyCount ?? 0,\n    defaultValue_one: '1 reply',\n    defaultValue_other: '{{ count }} replies',\n  });\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  /**\n   * Rendered at the end of the header, after the avatar. Defaults to\n   * `WorkspaceNavigationCloseButton`, the close button of a panel that can be dismissed; a component\n   * passed here replaces it, and can render the button itself to keep it.\n   */\n  EndContent?: React.ComponentType;\n  /**\n   * Rendered at the start of the header. Defaults to `WorkspaceNavigationBackButton`, the back\n   * button of a panel stacked over other content; a component passed here replaces it, and can\n   * render the button itself to keep it.\n   */\n  StartContent?: React.ComponentType;\n  /** Override the thread display title */\n  overrideTitle?: string;\n};\n\nexport const ThreadHeader = ({\n  EndContent = WorkspaceNavigationCloseButton,\n  overrideTitle,\n  StartContent = WorkspaceNavigationBackButton,\n}: ThreadHeaderProps) => {\n  const { t } = useTranslationContext();\n  const channel = useChannel();\n  const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });\n\n  const threadInstance = useThreadContext();\n  const { parentMessage, replyCount: replyCountThreadInstance } =\n    useStateStore(threadInstance?.state, threadStateSelector) ?? {};\n\n  const replyCount = replyCountThreadInstance ?? 0;\n\n  // Subtitle: channel display title, with override and fallback to the parent message author\n  const threadDisplayName =\n    overrideTitle ??\n    channelDisplayTitle ??\n    (parentMessage && displayNameFromParentMessage(parentMessage)) ??\n    undefined;\n\n  return (\n    <div className='str-chat__thread-header'>\n      <div className='str-chat__thread-header__start'>\n        <StartContent />\n      </div>\n      <div className='str-chat__thread-header-details'>\n        <div className='str-chat__thread-header-title'>\n          {t('thread.header.thread.text', 'Thread')}\n        </div>\n        <ThreadHeaderSubtitle\n          replyCount={replyCount}\n          threadDisplayName={threadDisplayName}\n          threadList\n        />\n      </div>\n      <div className='str-chat__thread-header__end'>\n        <EndContent />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAM,6BAA6B,EAAE,oBAAmC,EACtE,qBAAqB,aAAa,QACpC;AAEA,IAAM,uBAAuB,EAAE,eAAe,kBAA+B;CAC3E;CACA;AACF;AACA,IAAM,8BAA8B,EAAE,cAAiC,EAAE,OAAO;;AAGhF,IAAM,gCAAgC,YACpC,QAAQ,MAAM,QAAQ,KAAA;;AAGxB,IAAM,wBAAwB,EAC5B,YACA,mBACA,iBAKI;CACJ,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,EAAE,wBACN,cAFc,WAEA,CAAA,EAAS,aAAa,yBAAyB,KAAK,CAAC;CAErE,MAAM,WADiB,iBACN,CAAA,EAAgB;CACjC,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,EAAE,SAAS,CAAC,MAChB,cAFsB,6BAER,CAAA,CAAgB,cAAc,OAAO,0BAA0B,KAAK,CAAC;CACrF,MAAM,iBAAkB,OAAO,OAAO,MAAM,CAAC,CAAoC,QAC9E,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,cAAc,QACzE;CACA,MAAM,YAAY,wBAAwB,SAAS,eAAe,SAAS;CAC3E,MAAM,iBAAiB,EAAE,2BAA2B;EAClD,OAAO,cAAc;EACrB,kBAAkB;EAClB,oBAAoB;CACtB,CAAC;CACD,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;AAmBA,IAAa,gBAAgB,EAC3B,aAAa,gCACb,eACA,eAAe,oCACQ;CACvB,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,EAAE,cAAc,wBAAwB,sBAAsB,EAAE,SADtD,WACsD,EAAQ,CAAC;CAG/E,MAAM,EAAE,eAAe,YAAY,6BACjC,cAFqB,iBAEP,CAAA,EAAgB,OAAO,mBAAmB,KAAK,CAAC;CAEhE,MAAM,aAAa,4BAA4B;CAG/C,MAAM,oBACJ,iBACA,wBACC,iBAAiB,6BAA6B,aAAa,MAC5D,KAAA;CAEF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,cAAD,CAAe,CAAA;GACZ,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ,EAAE,6BAA6B,QAAQ;IACrC,CAAA,GACL,oBAAC,sBAAD;KACc;KACO;KACnB,YAAA;IACD,CAAA,CACE;;GACL,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,YAAD,CAAa,CAAA;GACV,CAAA;EACF;;AAET"}

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

@@ -1,21 +1,22 @@
-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 { useTranslationContext } from "../../context/TranslationContext.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Thread/ThreadStart.tsx
-var threadStateSelector = ({ replyCount }) => ({ replyCount });
+var threadStartSelector = ({ parentMessage }) => ({ parentMessage });
 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;
+	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("replyCount", { count: replyCount })
+		children: t("common.replyCount.label", {
+			count: parentMessage.reply_count,
+			defaultValue_one: "1 reply",
+			defaultValue_other: "{{ count }} replies"
+		})
 	});
 };
 //#endregion

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

@@ -1 +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"}
+{"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

@@ -1,4 +1,3 @@
-import { Channel } from "../Channel/Channel.mjs";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Threads/ThreadContext.tsx
@@ -6,10 +5,7 @@ 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
-	})
+	children
 });
 //#endregion
 export { ThreadContext, ThreadProvider, useThreadContext };

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

@@ -1 +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"}
+{"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

@@ -1,16 +1,17 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../../context/ChatContext.mjs";
 import { useComponentContext } from "../../../context/ComponentContext.mjs";
-import { useStateStore } from "../../../store/hooks/useStateStore.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 { useVirtualizedListboxKeyboardNavigation } from "../../../a11y/hooks/useVirtualizedListboxKeyboardNavigation.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 { NotificationList } from "../../Notifications/NotificationList.mjs";
-import { useCallback, useEffect, useRef, useState } from "react";
+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
@@ -22,6 +23,18 @@ 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();
@@ -34,30 +47,9 @@ var useThreadList = () => {
 		};
 	}, [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 { 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);
@@ -89,7 +81,7 @@ var ThreadList = ({ virtuosoProps }) => {
 			/* @__PURE__ */ jsx(ThreadListHeader, {}),
 			/* @__PURE__ */ jsx(ThreadListUnseenThreadsBanner$1, {}),
 			/* @__PURE__ */ jsx(Virtuoso, {
-				"aria-label": t("aria/Thread list"),
+				"aria-label": t("threadList.threadList.ariaLabel", "Thread list"),
 				atBottomStateChange: (atBottom) => atBottom && client.threads.loadNextPage(),
 				className: "str-chat__thread-list",
 				components: {

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

@@ -1 +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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"}
+{"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

@@ -1,14 +1,14 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 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("ThreadListEmptyPlaceholder");
+	const { t } = useTranslationContext();
 	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") })]
+		children: [/* @__PURE__ */ jsx(IconMessageBubbles, {}), /* @__PURE__ */ jsx("p", { children: t("threadList.empty.text", "Reply to a message to start a thread") })]
 	});
 };
 //#endregion

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

@@ -1 +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"}
+{"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

@@ -1,19 +1,19 @@
 import { useComponentContext } from "../../../context/ComponentContext.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
-import { useThreadsViewContext } from "../../ChatView/ChatView.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 { activeThread } = useThreadsViewContext();
+	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("Threads")
-		}), activeThread && HeaderEndContent && /* @__PURE__ */ jsx(HeaderEndContent, {})]
+			children: t("common.threads.text", "Threads")
+		}), hasActiveThread && HeaderEndContent && /* @__PURE__ */ jsx(HeaderEndContent, {})]
 	});
 };
 //#endregion

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

@@ -1 +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"}
+{"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/ThreadListItemUI.mjs

@@ -1,64 +1,57 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 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 { 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 { 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 { useChannelPreviewInfo } from "../../ChannelListItem/hooks/useChannelPreviewInfo.mjs";
 import { composeThreadListItemAccessibleLabel } from "./utils.a11y.mjs";
 import { useThreadListItemContext } from "./ThreadListItem.mjs";
-import { useThreadsViewContext } from "../../ChatView/ChatView.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 { 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 { 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("ThreadListItemUI");
+	const { t, tDateTimeParser, userLanguage } = useTranslationContext();
 	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 { 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: activeThread === thread,
+		active: isSelected,
 		channel,
 		client,
 		displayTitle: channelDisplayTitle,
 		isMessageAIGenerated,
-		latestReply,
-		parentMessage,
+		latestReply: latestReply ?? void 0,
+		parentMessage: parentMessage ?? void 0,
 		parentMessagePreview: parentMessage ? parentMessagePreview : void 0,
 		parentMessageSender: parentMessage ? parentMessageSender : void 0,
 		participantCount: participants?.length,
@@ -69,11 +62,11 @@ var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props })
 		userLanguage
 	}, accessibleLabelConfig), [
 		accessibleLabelConfig,
-		activeThread,
 		channel,
 		channelDisplayTitle,
 		client,
 		isMessageAIGenerated,
+		isSelected,
 		latestReply,
 		ownUnreadMessageCount,
 		parentMessage,
@@ -83,7 +76,6 @@ var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props })
 		replyCount,
 		t,
 		tDateTimeParser,
-		thread,
 		userLanguage
 	]);
 	const avatarProps = deletedAt ? void 0 : {
@@ -106,12 +98,16 @@ var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props })
 		className: "str-chat__thread-list-item-container",
 		children: /* @__PURE__ */ jsxs("button", {
 			"aria-label": accessibleLabel,
-			"aria-selected": activeThread === thread,
+			"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: onSelectThread,
+			onClick: (event) => {
+				openThread(thread, { additive: event.ctrlKey || event.metaKey });
+				if (!isSelected && channelDisplayTitle) announceInteraction("thread.opened", { name: channelDisplayTitle });
+				onClickFromProps?.(event);
+			},
 			role: "option",
-			...props,
+			...buttonProps,
 			children: [
 				/* @__PURE__ */ jsx(Avatar, {
 					size: "xl",
@@ -137,11 +133,15 @@ var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props })
 								size: "sm"
 							}), /* @__PURE__ */ jsx("span", {
 								className: "str-chat__thread-list-item__reply-count",
-								children: t("replyCount", { count: replyCount })
+								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: latestReply?.created_at
+							timestamp: convertTimestampToDate(latestReply?.created_at)
 						})]
 					})]
 				}),

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

@@ -1 +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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"}
+{"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

@@ -1,6 +1,6 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 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";

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

@@ -1,8 +1,8 @@
-import { useChatContext } from "../../../context/ChatContext.mjs";
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 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";
@@ -21,7 +21,11 @@ var ThreadListUnseenThreadsBanner = () => {
 		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") })] })]
+		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

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

@@ -1 +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\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('ThreadListUnseenThreadsBanner/unreadThreads', {\n              count: unseenThreadIds.length,\n            })}\n          </span>\n        </>\n      )}\n      {isLoading && (\n        <>\n          <LoadingIndicator />\n          <span>{t('ThreadListUnseenThreadsBanner/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;CAEjD,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,+CAA+C,EAChD,OAAO,gBAAgB,OACzB,CAAC,EACG,CAAA,CACN,EAAA,CAAA,GAEH,aACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,oBAAC,QAAD,EAAA,UAAO,EAAE,uCAAuC,EAAQ,CAAA,CACxD,EAAA,CAAA,CAEE;;AAEZ"}
+{"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"}