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

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

@@ -1,5 +1,6 @@
-import { getDateString, isDate } from "../../../i18n/utils.mjs";
+import { getDateString } from "../../../i18n/utils.mjs";
 import { activeLabelPart, composeAccessibleLabel, unreadCountLabelPart } from "../../../a11y/accessibleLabel.mjs";
+import { convertTimestampToDate } from "stream-chat";
 //#region src/components/Threads/ThreadList/utils.a11y.ts
 /**
 * The default, named label parts. Each is independently overridable via
@@ -9,22 +10,26 @@ import { activeLabelPart, composeAccessibleLabel, unreadCountLabelPart } from ".
 */
 var defaultThreadListItemLabelParts = {
 	active: activeLabelPart,
-	name: ({ displayTitle, t }) => displayTitle ? t("aria/Chat: {{ channelName }}", { channelName: displayTitle }) : void 0,
+	name: ({ displayTitle, t }) => displayTitle ? t("threadList.chat.ariaLabel", "Chat: {{ channelName }}", { channelName: displayTitle }) : void 0,
 	parentMessage: ({ parentMessagePreview, parentMessageSender, t }) => {
 		if (!parentMessagePreview) return void 0;
-		return t("aria/Thread: {{ messagePreview }}", { messagePreview: parentMessageSender ? `${parentMessageSender}: ${parentMessagePreview}` : parentMessagePreview });
+		return t("threadList.thread.ariaLabel", "Thread: {{ messagePreview }}", { messagePreview: parentMessageSender ? `${parentMessageSender}: ${parentMessagePreview}` : parentMessagePreview });
 	},
-	replyCount: ({ replyCount, t }) => typeof replyCount === "number" && replyCount > 0 ? t("replyCount", { count: replyCount }) : void 0,
+	replyCount: ({ replyCount, t }) => typeof replyCount === "number" && replyCount > 0 ? t("common.replyCount.label", {
+		count: replyCount,
+		defaultValue_one: "1 reply",
+		defaultValue_other: "{{ count }} replies"
+	}) : void 0,
 	time: ({ latestReply, t, tDateTimeParser }) => {
 		const createdAt = latestReply?.created_at;
-		if (!createdAt || !isDate(createdAt)) return void 0;
+		if (createdAt == null) return void 0;
 		const when = getDateString({
-			messageCreatedAt: createdAt.toISOString(),
+			messageCreatedAt: convertTimestampToDate(createdAt)?.toISOString(),
 			t,
 			tDateTimeParser,
-			timestampTranslationKey: "timestamp/ChannelPreviewTimestamp"
+			timestampTranslationKey: "timestamp.ChannelPreviewTimestamp"
 		});
-		return when ? t("aria/Last activity: {{ time }}", { time: String(when) }) : void 0;
+		return when ? t("common.lastActivity.ariaLabel", "Last activity: {{ time }}", { time: String(when) }) : void 0;
 	},
 	unreadCount: unreadCountLabelPart
 };

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

@@ -1 +1 @@
-{"version":3,"file":"utils.a11y.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/utils.a11y.ts"],"sourcesContent":["import type { Channel, LocalMessage, StreamChat } from 'stream-chat';\n\nimport type { ChatContextValue } from '../../../context';\nimport type { TranslationContextValue } from '../../../context/TranslationContext';\nimport {\n  type AccessibleLabelConfig,\n  type AccessibleLabelPart,\n  activeLabelPart,\n  composeAccessibleLabel,\n  unreadCountLabelPart,\n} from '../../../a11y/accessibleLabel';\nimport { getDateString, isDate } from '../../../i18n/utils';\n\n/**\n * Everything a label part needs. Gathered by `ThreadListItemUI` from the thread state + contexts and\n * handed to each {@link ThreadListItemLabelPart}.\n */\nexport type ThreadListItemLabelData = {\n  /** Whether the row is the active (currently open) thread. */\n  active?: boolean;\n  /** The channel the thread belongs to. */\n  channel?: Channel;\n  /** Client, used to detect whether a message is the current user's own. */\n  client: StreamChat;\n  /** The channel's display name (the thread row's title). */\n  displayTitle?: string;\n  isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'];\n  /** The most recent reply in the thread. */\n  latestReply?: LocalMessage;\n  /** The message the thread is attached to (its subject); available for custom parts. */\n  parentMessage?: LocalMessage;\n  /**\n   * The parent message's display preview text — the SAME string the visible subtitle shows (from\n   * `useLatestMessagePreview`, covering text/attachment/poll/etc.). Used by the default\n   * `parentMessage` part so the announcement matches what is shown.\n   */\n  parentMessagePreview?: string;\n  /** The parent message's sender prefix, when the visible preview shows one (e.g. \"You\", a name). */\n  parentMessageSender?: string;\n  /** Number of participants in the thread. */\n  participantCount?: number;\n  /** Number of replies in the thread. */\n  replyCount?: number;\n  t: TranslationContextValue['t'];\n  tDateTimeParser: TranslationContextValue['tDateTimeParser'];\n  /** The current user's unread reply count for the thread. */\n  unreadCount?: number;\n  userLanguage?: TranslationContextValue['userLanguage'];\n};\n\n/** Produces one segment of the accessible name; return `undefined`/empty to omit it. */\nexport type ThreadListItemLabelPart = AccessibleLabelPart<ThreadListItemLabelData>;\n\n/**\n * The default, named label parts. Each is independently overridable via\n * {@link ThreadListItemLabelConfig.parts}. The active (currently open) state is announced here (not\n * left to the row's `aria-selected` alone, which is not reliably spoken across screen readers for an\n * option with a custom name); `aria-selected` is kept on the active row for listbox semantics.\n */\nexport const defaultThreadListItemLabelParts = {\n  active: activeLabelPart,\n  name: ({ displayTitle, t }) =>\n    displayTitle\n      ? t('aria/Chat: {{ channelName }}', { channelName: displayTitle })\n      : undefined,\n  // The message the thread is about (shown as the row's subtitle); same preview the subtitle shows.\n  parentMessage: ({ parentMessagePreview, parentMessageSender, t }) => {\n    if (!parentMessagePreview) return undefined;\n    const preview = parentMessageSender\n      ? `${parentMessageSender}: ${parentMessagePreview}`\n      : parentMessagePreview;\n    return t('aria/Thread: {{ messagePreview }}', { messagePreview: preview });\n  },\n  replyCount: ({ replyCount, t }) =>\n    typeof replyCount === 'number' && replyCount > 0\n      ? t('replyCount', { count: replyCount })\n      : undefined,\n  time: ({ latestReply, t, tDateTimeParser }) => {\n    const createdAt = latestReply?.created_at;\n    if (!createdAt || !isDate(createdAt)) return undefined;\n    const when = getDateString({\n      messageCreatedAt: createdAt.toISOString(),\n      t,\n      tDateTimeParser,\n      timestampTranslationKey: 'timestamp/ChannelPreviewTimestamp',\n    });\n    return when ? t('aria/Last activity: {{ time }}', { time: String(when) }) : undefined;\n  },\n  unreadCount: unreadCountLabelPart,\n} satisfies Record<string, ThreadListItemLabelPart>;\n\n/** Default order the parts are assembled in (reading order). */\nexport const DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER = [\n  'name',\n  'active',\n  'unreadCount',\n  'parentMessage',\n  'replyCount',\n  'time',\n] as const;\n\nexport type ThreadListItemLabelConfig = AccessibleLabelConfig<ThreadListItemLabelData>;\n\n/**\n * Composes a single, coherent accessible name for a thread list row from named parts. The default\n * reading order is name (channel) → active → unread → parent message → reply count → last activity.\n *\n * ## Customizing the label\n *\n * The label is generated by `ThreadListItemUI`, which accepts an `accessibleLabelConfig` prop. To\n * customize it, supply your own `ThreadListItemUI` through `ComponentContext` (the same way the\n * component is overridden) and forward the config — no new plumbing:\n *\n * ```tsx\n * const MyThreadListItemUI = (props) => (\n *   <DefaultThreadListItemUI {...props} accessibleLabelConfig={accessibleLabelConfig} />\n * );\n * // <ComponentProvider value={{ ThreadListItemUI: MyThreadListItemUI }}> … </ComponentProvider>\n * ```\n *\n * ### Adding custom parts\n *\n * - {@link ThreadListItemLabelConfig.parts} is merged over {@link defaultThreadListItemLabelParts},\n *   so a new key is *added* and a same-named key *overrides* the default.\n * - A part returns its segment string, or `undefined`/`''` to be omitted.\n * - {@link ThreadListItemLabelConfig.order} decides which parts are included AND their sequence —\n *   **a part not listed in `order` is never rendered**. Spread\n *   {@link DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER} to keep the defaults and insert your own.\n * - Each part receives {@link ThreadListItemLabelData}. Parts call `t`, so provide your own i18n keys\n *   (or return plain strings).\n *\n * ```tsx\n * const accessibleLabelConfig: ThreadListItemLabelConfig = {\n *   parts: {\n *     participants: ({ participantCount, t }) =>\n *       participantCount ? t('{{ count }} participants', { count: participantCount }) : undefined,\n *   },\n *   order: ['name', 'participants', ...DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER.slice(1)],\n * };\n * ```\n *\n * For full control, set {@link ThreadListItemLabelConfig.build} (return the entire string), or write\n * a custom `ThreadListItemUI` that calls this function directly — importing\n * {@link defaultThreadListItemLabelParts} to reuse the built-ins.\n */\nexport const composeThreadListItemAccessibleLabel = (\n  data: ThreadListItemLabelData,\n  config: ThreadListItemLabelConfig = {},\n): string =>\n  composeAccessibleLabel(\n    data,\n    defaultThreadListItemLabelParts,\n    DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER,\n    config,\n  );\n"],"mappings":";;;;;;;;;AA2DA,IAAa,kCAAkC;CAC7C,QAAQ;CACR,OAAO,EAAE,cAAc,QACrB,eACI,EAAE,gCAAgC,EAAE,aAAa,aAAa,CAAC,IAC/D,KAAA;CAEN,gBAAgB,EAAE,sBAAsB,qBAAqB,QAAQ;EACnE,IAAI,CAAC,sBAAsB,OAAO,KAAA;EAIlC,OAAO,EAAE,qCAAqC,EAAE,gBAHhC,sBACZ,GAAG,oBAAoB,IAAI,yBAC3B,qBACoE,CAAC;CAC3E;CACA,aAAa,EAAE,YAAY,QACzB,OAAO,eAAe,YAAY,aAAa,IAC3C,EAAE,cAAc,EAAE,OAAO,WAAW,CAAC,IACrC,KAAA;CACN,OAAO,EAAE,aAAa,GAAG,sBAAsB;EAC7C,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,aAAa,CAAC,OAAO,SAAS,GAAG,OAAO,KAAA;EAC7C,MAAM,OAAO,cAAc;GACzB,kBAAkB,UAAU,YAAY;GACxC;GACA;GACA,yBAAyB;EAC3B,CAAC;EACD,OAAO,OAAO,EAAE,kCAAkC,EAAE,MAAM,OAAO,IAAI,EAAE,CAAC,IAAI,KAAA;CAC9E;CACA,aAAa;AACf;;AAGA,IAAa,uCAAuC;CAClD;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAa,wCACX,MACA,SAAoC,CAAC,MAErC,uBACE,MACA,iCACA,sCACA,MACF"}
+{"version":3,"file":"utils.a11y.mjs","names":[],"sources":["../../../../../src/components/Threads/ThreadList/utils.a11y.ts"],"sourcesContent":["import type { Channel, LocalMessage, StreamChat } from 'stream-chat';\n\nimport type { ChatContextValue } from '../../../context';\nimport type { TranslationContextValue } from '../../../context/TranslationContext';\nimport {\n  type AccessibleLabelConfig,\n  type AccessibleLabelPart,\n  activeLabelPart,\n  composeAccessibleLabel,\n  unreadCountLabelPart,\n} from '../../../a11y/accessibleLabel';\nimport { getDateString } from '../../../i18n/utils';\nimport { convertTimestampToDate } from 'stream-chat';\n\n/**\n * Everything a label part needs. Gathered by `ThreadListItemUI` from the thread state + contexts and\n * handed to each {@link ThreadListItemLabelPart}.\n */\nexport type ThreadListItemLabelData = {\n  /** Whether the row is the active (currently open) thread. */\n  active?: boolean;\n  /** The channel the thread belongs to. */\n  channel?: Channel;\n  /** Client, used to detect whether a message is the current user's own. */\n  client: StreamChat;\n  /** The channel's display name (the thread row's title). */\n  displayTitle?: string;\n  isMessageAIGenerated?: ChatContextValue['isMessageAIGenerated'];\n  /** The most recent reply in the thread. */\n  latestReply?: LocalMessage;\n  /** The message the thread is attached to (its subject); available for custom parts. */\n  parentMessage?: LocalMessage;\n  /**\n   * The parent message's display preview text — the SAME string the visible subtitle shows (from\n   * `useLatestMessagePreview`, covering text/attachment/poll/etc.). Used by the default\n   * `parentMessage` part so the announcement matches what is shown.\n   */\n  parentMessagePreview?: string;\n  /** The parent message's sender prefix, when the visible preview shows one (e.g. \"You\", a name). */\n  parentMessageSender?: string;\n  /** Number of participants in the thread. */\n  participantCount?: number;\n  /** Number of replies in the thread. */\n  replyCount?: number;\n  t: TranslationContextValue['t'];\n  tDateTimeParser: TranslationContextValue['tDateTimeParser'];\n  /** The current user's unread reply count for the thread. */\n  unreadCount?: number;\n  userLanguage?: TranslationContextValue['userLanguage'];\n};\n\n/** Produces one segment of the accessible name; return `undefined`/empty to omit it. */\nexport type ThreadListItemLabelPart = AccessibleLabelPart<ThreadListItemLabelData>;\n\n/**\n * The default, named label parts. Each is independently overridable via\n * {@link ThreadListItemLabelConfig.parts}. The active (currently open) state is announced here (not\n * left to the row's `aria-selected` alone, which is not reliably spoken across screen readers for an\n * option with a custom name); `aria-selected` is kept on the active row for listbox semantics.\n */\nexport const defaultThreadListItemLabelParts = {\n  active: activeLabelPart,\n  name: ({ displayTitle, t }) =>\n    displayTitle\n      ? t('threadList.chat.ariaLabel', 'Chat: {{ channelName }}', {\n          channelName: displayTitle,\n        })\n      : undefined,\n  // The message the thread is about (shown as the row's subtitle); same preview the subtitle shows.\n  parentMessage: ({ parentMessagePreview, parentMessageSender, t }) => {\n    if (!parentMessagePreview) return undefined;\n    const preview = parentMessageSender\n      ? `${parentMessageSender}: ${parentMessagePreview}`\n      : parentMessagePreview;\n    return t('threadList.thread.ariaLabel', 'Thread: {{ messagePreview }}', {\n      messagePreview: preview,\n    });\n  },\n  replyCount: ({ replyCount, t }) =>\n    typeof replyCount === 'number' && replyCount > 0\n      ? t('common.replyCount.label', {\n          count: replyCount,\n          defaultValue_one: '1 reply',\n          defaultValue_other: '{{ count }} replies',\n        })\n      : undefined,\n  time: ({ latestReply, t, tDateTimeParser }) => {\n    const createdAt = latestReply?.created_at;\n    if (createdAt == null) return undefined;\n    const when = getDateString({\n      messageCreatedAt: convertTimestampToDate(createdAt)?.toISOString(),\n      t,\n      tDateTimeParser,\n      timestampTranslationKey: 'timestamp.ChannelPreviewTimestamp',\n    });\n    return when\n      ? t('common.lastActivity.ariaLabel', 'Last activity: {{ time }}', {\n          time: String(when),\n        })\n      : undefined;\n  },\n  unreadCount: unreadCountLabelPart,\n} satisfies Record<string, ThreadListItemLabelPart>;\n\n/** Default order the parts are assembled in (reading order). */\nexport const DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER = [\n  'name',\n  'active',\n  'unreadCount',\n  'parentMessage',\n  'replyCount',\n  'time',\n] as const;\n\nexport type ThreadListItemLabelConfig = AccessibleLabelConfig<ThreadListItemLabelData>;\n\n/**\n * Composes a single, coherent accessible name for a thread list row from named parts. The default\n * reading order is name (channel) → active → unread → parent message → reply count → last activity.\n *\n * ## Customizing the label\n *\n * The label is generated by `ThreadListItemUI`, which accepts an `accessibleLabelConfig` prop. To\n * customize it, supply your own `ThreadListItemUI` through `ComponentContext` (the same way the\n * component is overridden) and forward the config — no new plumbing:\n *\n * ```tsx\n * const MyThreadListItemUI = (props) => (\n *   <DefaultThreadListItemUI {...props} accessibleLabelConfig={accessibleLabelConfig} />\n * );\n * // <ComponentProvider value={{ ThreadListItemUI: MyThreadListItemUI }}> … </ComponentProvider>\n * ```\n *\n * ### Adding custom parts\n *\n * - {@link ThreadListItemLabelConfig.parts} is merged over {@link defaultThreadListItemLabelParts},\n *   so a new key is *added* and a same-named key *overrides* the default.\n * - A part returns its segment string, or `undefined`/`''` to be omitted.\n * - {@link ThreadListItemLabelConfig.order} decides which parts are included AND their sequence —\n *   **a part not listed in `order` is never rendered**. Spread\n *   {@link DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER} to keep the defaults and insert your own.\n * - Each part receives {@link ThreadListItemLabelData}. Parts call `t`, so provide your own i18n keys\n *   (or return plain strings).\n *\n * ```tsx\n * const accessibleLabelConfig: ThreadListItemLabelConfig = {\n *   parts: {\n *     participants: ({ participantCount, t }) =>\n *       participantCount ? t('{{ count }} participants', { count: participantCount }) : undefined,\n *   },\n *   order: ['name', 'participants', ...DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER.slice(1)],\n * };\n * ```\n *\n * For full control, set {@link ThreadListItemLabelConfig.build} (return the entire string), or write\n * a custom `ThreadListItemUI` that calls this function directly — importing\n * {@link defaultThreadListItemLabelParts} to reuse the built-ins.\n */\nexport const composeThreadListItemAccessibleLabel = (\n  data: ThreadListItemLabelData,\n  config: ThreadListItemLabelConfig = {},\n): string =>\n  composeAccessibleLabel(\n    data,\n    defaultThreadListItemLabelParts,\n    DEFAULT_THREAD_LIST_ITEM_LABEL_ORDER,\n    config,\n  );\n"],"mappings":";;;;;;;;;;AA4DA,IAAa,kCAAkC;CAC7C,QAAQ;CACR,OAAO,EAAE,cAAc,QACrB,eACI,EAAE,6BAA6B,2BAA2B,EACxD,aAAa,aACf,CAAC,IACD,KAAA;CAEN,gBAAgB,EAAE,sBAAsB,qBAAqB,QAAQ;EACnE,IAAI,CAAC,sBAAsB,OAAO,KAAA;EAIlC,OAAO,EAAE,+BAA+B,gCAAgC,EACtE,gBAJc,sBACZ,GAAG,oBAAoB,IAAI,yBAC3B,qBAGJ,CAAC;CACH;CACA,aAAa,EAAE,YAAY,QACzB,OAAO,eAAe,YAAY,aAAa,IAC3C,EAAE,2BAA2B;EAC3B,OAAO;EACP,kBAAkB;EAClB,oBAAoB;CACtB,CAAC,IACD,KAAA;CACN,OAAO,EAAE,aAAa,GAAG,sBAAsB;EAC7C,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,MAAM,OAAO,KAAA;EAC9B,MAAM,OAAO,cAAc;GACzB,kBAAkB,uBAAuB,SAAS,CAAC,EAAE,YAAY;GACjE;GACA;GACA,yBAAyB;EAC3B,CAAC;EACD,OAAO,OACH,EAAE,iCAAiC,6BAA6B,EAC9D,MAAM,OAAO,IAAI,EACnB,CAAC,IACD,KAAA;CACN;CACA,aAAa;AACf;;AAGA,IAAa,uCAAuC;CAClD;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAa,wCACX,MACA,SAAoC,CAAC,MAErC,uBACE,MACA,iCACA,sCACA,MACF"}

package/dist/es/components/Threads/hooks/useCloseThread.mjs

@@ -0,0 +1,30 @@
+import { useThreadContext } from "../ThreadContext.mjs";
+import { useWorkspaceNavigation, useWorkspacePanel } from "../../../context/WorkspaceNavigationContext.mjs";
+import { useCallback } from "react";
+//#region src/components/Threads/hooks/useCloseThread.ts
+/**
+* Closes the thread in context: releases the slot it occupies and drops the thread's own claim on
+* the client. Components that close a thread (`ThreadHeader`, custom headers) call this rather
+* than receiving a handler, so they work wherever a `ThreadProvider` is in scope. The panel the
+* caller renders in is passed along, so the right one closes when the thread is open in several.
+*/
+var useCloseThread = () => {
+	const { closeThread } = useWorkspaceNavigation();
+	const panel = useWorkspacePanel();
+	const thread = useThreadContext();
+	return useCallback((options) => {
+		closeThread(thread?.id, {
+			panel,
+			...options
+		});
+		thread?.deactivate();
+	}, [
+		closeThread,
+		panel,
+		thread
+	]);
+};
+//#endregion
+export { useCloseThread };
+
+//# sourceMappingURL=useCloseThread.mjs.map

package/dist/es/components/Threads/hooks/useCloseThread.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseThread.mjs","names":[],"sources":["../../../../../src/components/Threads/hooks/useCloseThread.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { useThreadContext } from '../ThreadContext';\nimport { useWorkspaceNavigation, useWorkspacePanel } from '../../../context';\nimport type { WorkspaceNavigationOptions } from '../../../context';\n\n/**\n * Closes the thread in context: releases the slot it occupies and drops the thread's own claim on\n * the client. Components that close a thread (`ThreadHeader`, custom headers) call this rather\n * than receiving a handler, so they work wherever a `ThreadProvider` is in scope. The panel the\n * caller renders in is passed along, so the right one closes when the thread is open in several.\n */\nexport const useCloseThread = () => {\n  const { closeThread } = useWorkspaceNavigation();\n  const panel = useWorkspacePanel();\n  const thread = useThreadContext();\n\n  return useCallback(\n    (options?: WorkspaceNavigationOptions) => {\n      closeThread(thread?.id, { panel, ...options });\n      // Keeps the thread from staying active when it was opened outside a workspace navigation flow.\n      thread?.deactivate();\n    },\n    [closeThread, panel, thread],\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,uBAAuB;CAClC,MAAM,EAAE,gBAAgB,uBAAuB;CAC/C,MAAM,QAAQ,kBAAkB;CAChC,MAAM,SAAS,iBAAiB;CAEhC,OAAO,aACJ,YAAyC;EACxC,YAAY,QAAQ,IAAI;GAAE;GAAO,GAAG;EAAQ,CAAC;EAE7C,QAAQ,WAAW;CACrB,GACA;EAAC;EAAa;EAAO;CAAM,CAC7B;AACF"}

package/dist/es/components/TypingIndicator/TypingIndicator.mjs

@@ -1,47 +1,53 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../context/ChatContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { useTypingContext } from "../../context/TypingContext.mjs";
-import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.mjs";
 import { AvatarStack } from "../Avatar/AvatarStack.mjs";
 import { extractDisplayInfo } from "../Avatar/utils.mjs";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
 import { TypingIndicatorDots } from "./TypingIndicatorDots.mjs";
 import { useDebouncedTypingActive } from "./hooks/useDebouncedTypingActive.mjs";
 import { getTypingStatusMessage } from "./utils/getTypingStatusMessage.mjs";
-import { useThreadContext } from "../Threads/ThreadContext.mjs";
 import React, { useEffect, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/TypingIndicator/TypingIndicator.tsx
+var typingEventsStateSelector = ({ typingEvents }) => ({ typingEventsEnabled: typingEvents.enabled });
+var textComposerTypingSelector = ({ typing }) => ({ typing });
+var threadParentMessageSelector = ({ parentMessage }) => ({ parentMessage });
 /**
 * TypingIndicator shows avatars of users currently typing and a bubble with animated dots.
-* Renders only for other participants (never the current user), only when scrolled to latest message if isMessageListScrolledToBottom is provided.
-* It must be a child of Channel component.
+* Renders only for other participants (never the current user), only when scrolled to the latest
+* message if `isMessageListScrolledToBottom` is provided. It must be a child of Channel component.
 */
 var UnMemoizedTypingIndicator = (props) => {
-	const { isMessageListScrolledToBottom = true, scrollToBottom, threadList } = props;
+	const { isMessageListScrolledToBottom = true, scrollToBottom } = props;
 	const { AvatarStack: AvatarStack$1 = AvatarStack, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
-	const { channelConfig, thread } = useChannelStateContext("TypingIndicator");
-	const parentId = useThreadContext()?.id ?? thread?.id;
-	const { client } = useChatContext("TypingIndicator");
+	const messageComposer = useMessageComposerController();
+	const { typingEventsEnabled } = useStateStore(messageComposer.channel.configState, typingEventsStateSelector);
+	const { client } = useChatContext();
 	const { t } = useTranslationContext();
-	const { typing = {} } = useTypingContext("TypingIndicator");
-	const typingInChannel = !threadList ? Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id) : [];
-	const typingInThread = threadList ? Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId) : [];
-	const { displayUsers } = useDebouncedTypingActive(threadList ? typingInThread : typingInChannel);
+	const { typing = {} } = useStateStore(messageComposer.textComposer?.state, textComposerTypingSelector) ?? {};
+	const thread = useThreadContext();
+	const isThreadList = !!thread;
+	const { parentMessage } = useStateStore(thread?.state, threadParentMessageSelector) ?? {};
+	const typingEntries = Object.values(typing);
+	const typingInChannel = !isThreadList ? typingEntries.filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id) : [];
+	const typingInThread = isThreadList ? typingEntries.filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentMessage?.id) : [];
+	const { displayUsers } = useDebouncedTypingActive(isThreadList ? typingInThread : typingInChannel);
 	const showIndicator = displayUsers.length > 0;
 	const typingAnnouncement = useMemo(() => getTypingStatusMessage(displayUsers, t), [displayUsers, t]);
 	const displayInfo = useMemo(() => displayUsers.map(extractDisplayInfo$1), [displayUsers, extractDisplayInfo$1]);
 	useEffect(() => {
-		if (showIndicator && isMessageListScrolledToBottom) scrollToBottom();
+		if (showIndicator && isMessageListScrolledToBottom) scrollToBottom?.();
 	}, [
 		scrollToBottom,
 		isMessageListScrolledToBottom,
 		showIndicator
 	]);
-	if (channelConfig?.typing_events === false) return null;
-	if (!showIndicator || !isMessageListScrolledToBottom) return null;
+	if (typingEventsEnabled === false || !showIndicator || !isMessageListScrolledToBottom) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("str-chat__typing-indicator", "str-chat__typing-indicator--with-transition", { "str-chat__typing-indicator--typing": showIndicator }),
 		"data-testid": "typing-indicator",

package/dist/es/components/TypingIndicator/TypingIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TypingIndicator.mjs","names":[],"sources":["../../../../src/components/TypingIndicator/TypingIndicator.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\n\nimport { AvatarStack as DefaultAvatarStack } from '../Avatar';\nimport { TypingIndicatorDots } from './TypingIndicatorDots';\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useTypingContext } from '../../context/TypingContext';\nimport { useThreadContext } from '../Threads';\nimport { VisuallyHidden } from '../VisuallyHidden';\n\nimport { useDebouncedTypingActive } from './hooks/useDebouncedTypingActive';\nimport { getTypingStatusMessage } from './utils/getTypingStatusMessage';\nimport { useComponentContext } from '../../context';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\n\nexport type TypingIndicatorProps = {\n  /** When false, the indicator is not rendered (e.g. when list is not scrolled to bottom). Omit or true to show when typing. */\n  isMessageListScrolledToBottom?: boolean;\n  scrollToBottom: () => void;\n  /** Whether the typing indicator is in a thread */\n  threadList?: boolean;\n};\n\n/**\n * TypingIndicator shows avatars of users currently typing and a bubble with animated dots.\n * Renders only for other participants (never the current user), only when scrolled to latest message if isMessageListScrolledToBottom is provided.\n * It must be a child of Channel component.\n */\nconst UnMemoizedTypingIndicator = (props: TypingIndicatorProps) => {\n  const { isMessageListScrolledToBottom = true, scrollToBottom, threadList } = props;\n\n  const {\n    AvatarStack = DefaultAvatarStack,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n  } = useComponentContext();\n  const { channelConfig, thread } = useChannelStateContext('TypingIndicator');\n  const threadInstance = useThreadContext();\n  const parentId = threadInstance?.id ?? thread?.id;\n  const { client } = useChatContext('TypingIndicator');\n  const { t } = useTranslationContext();\n  const { typing = {} } = useTypingContext('TypingIndicator');\n\n  const typingInChannel = !threadList\n    ? Object.values(typing).filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && !parent_id,\n      )\n    : [];\n\n  const typingInThread = threadList\n    ? Object.values(typing).filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId,\n      )\n    : [];\n\n  const typingUsers = threadList ? typingInThread : typingInChannel;\n  const { displayUsers } = useDebouncedTypingActive(typingUsers);\n  const showIndicator = displayUsers.length > 0;\n  const typingAnnouncement = useMemo(\n    () => getTypingStatusMessage(displayUsers, t),\n    [displayUsers, t],\n  );\n\n  const displayInfo = useMemo(\n    () => displayUsers.map(extractDisplayInfo),\n    [displayUsers, extractDisplayInfo],\n  );\n\n  useEffect(() => {\n    if (showIndicator && isMessageListScrolledToBottom) scrollToBottom();\n  }, [scrollToBottom, isMessageListScrolledToBottom, showIndicator]);\n\n  if (channelConfig?.typing_events === false) {\n    return null;\n  }\n\n  if (!showIndicator || !isMessageListScrolledToBottom) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__typing-indicator',\n        'str-chat__typing-indicator--with-transition',\n        {\n          'str-chat__typing-indicator--typing': showIndicator,\n        },\n      )}\n      data-testid='typing-indicator'\n    >\n      {displayInfo.length > 0 && (\n        <div aria-hidden='true'>\n          <AvatarStack badgeSize='md' displayInfo={displayInfo} size='md' />\n        </div>\n      )}\n      <div aria-hidden='true' className='str-chat__typing-indicator__bubble'>\n        <div className='str-chat__typing-indicator__dots'>\n          <TypingIndicatorDots />\n        </div>\n      </div>\n      <VisuallyHidden>\n        <span\n          aria-atomic='true'\n          aria-live='polite'\n          data-testid='typing-indicator-status'\n          role='status'\n        >\n          {typingAnnouncement}\n        </span>\n      </VisuallyHidden>\n    </div>\n  );\n};\n\nexport const TypingIndicator = React.memo(\n  UnMemoizedTypingIndicator,\n) as typeof UnMemoizedTypingIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,IAAM,6BAA6B,UAAgC;CACjE,MAAM,EAAE,gCAAgC,MAAM,gBAAgB,eAAe;CAE7E,MAAM,EACJ,aAAA,gBAAc,aACd,oBAAA,uBAAqB,uBACnB,oBAAoB;CACxB,MAAM,EAAE,eAAe,WAAW,uBAAuB,iBAAiB;CAE1E,MAAM,WADiB,iBACN,CAAA,EAAgB,MAAM,QAAQ;CAC/C,MAAM,EAAE,WAAW,eAAe,iBAAiB;CACnD,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,SAAS,CAAC,MAAM,iBAAiB,iBAAiB;CAE1D,MAAM,kBAAkB,CAAC,aACrB,OAAO,OAAO,MAAM,CAAC,CAAC,QACnB,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAC5D,IACA,CAAC;CAEL,MAAM,iBAAiB,aACnB,OAAO,OAAO,MAAM,CAAC,CAAC,QACnB,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,cAAc,QACzE,IACA,CAAC;CAGL,MAAM,EAAE,iBAAiB,yBADL,aAAa,iBAAiB,eACW;CAC7D,MAAM,gBAAgB,aAAa,SAAS;CAC5C,MAAM,qBAAqB,cACnB,uBAAuB,cAAc,CAAC,GAC5C,CAAC,cAAc,CAAC,CAClB;CAEA,MAAM,cAAc,cACZ,aAAa,IAAI,oBAAkB,GACzC,CAAC,cAAc,oBAAkB,CACnC;CAEA,gBAAgB;EACd,IAAI,iBAAiB,+BAA+B,eAAe;CACrE,GAAG;EAAC;EAAgB;EAA+B;CAAa,CAAC;CAEjE,IAAI,eAAe,kBAAkB,OACnC,OAAO;CAGT,IAAI,CAAC,iBAAiB,CAAC,+BACrB,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,WAAW,KACT,8BACA,+CACA,EACE,sCAAsC,cACxC,CACF;EACA,eAAY;YARd;GAUG,YAAY,SAAS,KACpB,oBAAC,OAAD;IAAK,eAAY;cACf,oBAAC,eAAD;KAAa,WAAU;KAAkB;KAAa,MAAK;IAAM,CAAA;GAC9D,CAAA;GAEP,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;cAChC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,qBAAD,CAAsB,CAAA;IACnB,CAAA;GACF,CAAA;GACL,oBAAC,gBAAD,EAAA,UACE,oBAAC,QAAD;IACE,eAAY;IACZ,aAAU;IACV,eAAY;IACZ,MAAK;cAEJ;GACG,CAAA,EACQ,CAAA;EACb;;AAET;AAEA,IAAa,kBAAkB,MAAM,KACnC,yBACF"}
+{"version":3,"file":"TypingIndicator.mjs","names":[],"sources":["../../../../src/components/TypingIndicator/TypingIndicator.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\nimport type {\n  ChannelConfig,\n  EventPayload,\n  TextComposerState,\n  ThreadState,\n} from 'stream-chat';\n\nimport { AvatarStack as DefaultAvatarStack } from '../Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../Avatar/utils';\nimport { TypingIndicatorDots } from './TypingIndicatorDots';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { useThreadContext } from '../Threads/ThreadContext';\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../context';\nimport { useStateStore } from '../../store';\n\nimport { useDebouncedTypingActive } from './hooks/useDebouncedTypingActive';\nimport { getTypingStatusMessage } from './utils/getTypingStatusMessage';\n\nconst typingEventsStateSelector = ({ typingEvents }: ChannelConfig) => ({\n  typingEventsEnabled: typingEvents.enabled,\n});\n\nconst textComposerTypingSelector = ({ typing }: TextComposerState) => ({ typing });\n\nconst threadParentMessageSelector = ({ parentMessage }: ThreadState) => ({\n  parentMessage,\n});\n\nexport type TypingIndicatorProps = {\n  /** When false, the indicator is not rendered (e.g. when list is not scrolled to bottom). Omit or true to show when typing. */\n  isMessageListScrolledToBottom?: boolean;\n  /** Scrolls the message list to the latest message; invoked when a typing indicator appears. */\n  scrollToBottom?: () => void;\n};\n\n/**\n * TypingIndicator shows avatars of users currently typing and a bubble with animated dots.\n * Renders only for other participants (never the current user), only when scrolled to the latest\n * message if `isMessageListScrolledToBottom` is provided. It must be a child of Channel component.\n */\nconst UnMemoizedTypingIndicator = (props: TypingIndicatorProps) => {\n  const { isMessageListScrolledToBottom = true, scrollToBottom } = props;\n\n  const {\n    AvatarStack = DefaultAvatarStack,\n    extractDisplayInfo = defaultExtractDisplayInfo,\n  } = useComponentContext();\n  const messageComposer = useMessageComposerController();\n  const { typingEventsEnabled } = useStateStore(\n    messageComposer.channel.configState,\n    typingEventsStateSelector,\n  );\n  const { client } = useChatContext();\n  const { t } = useTranslationContext();\n  const { typing = {} } =\n    useStateStore(messageComposer.textComposer?.state, textComposerTypingSelector) ?? {};\n  const thread = useThreadContext();\n  const isThreadList = !!thread;\n  const { parentMessage } =\n    useStateStore(thread?.state, threadParentMessageSelector) ?? {};\n\n  const typingEntries = Object.values(typing) as EventPayload<\n    'typing.start' | 'typing.stop'\n  >[];\n\n  const typingInChannel = !isThreadList\n    ? typingEntries.filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && !parent_id,\n      )\n    : [];\n\n  const typingInThread = isThreadList\n    ? typingEntries.filter(\n        ({ parent_id, user }) =>\n          user?.id !== client.user?.id && parent_id === parentMessage?.id,\n      )\n    : [];\n\n  const typingUsers = isThreadList ? typingInThread : typingInChannel;\n  const { displayUsers } = useDebouncedTypingActive(typingUsers);\n  const showIndicator = displayUsers.length > 0;\n  const typingAnnouncement = useMemo(\n    () => getTypingStatusMessage(displayUsers, t),\n    [displayUsers, t],\n  );\n\n  const displayInfo = useMemo(\n    () => displayUsers.map(extractDisplayInfo),\n    [displayUsers, extractDisplayInfo],\n  );\n\n  useEffect(() => {\n    if (showIndicator && isMessageListScrolledToBottom) scrollToBottom?.();\n  }, [scrollToBottom, isMessageListScrolledToBottom, showIndicator]);\n\n  if (typingEventsEnabled === false || !showIndicator || !isMessageListScrolledToBottom) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__typing-indicator',\n        'str-chat__typing-indicator--with-transition',\n        {\n          'str-chat__typing-indicator--typing': showIndicator,\n        },\n      )}\n      data-testid='typing-indicator'\n    >\n      {displayInfo.length > 0 && (\n        <div aria-hidden='true'>\n          <AvatarStack badgeSize='md' displayInfo={displayInfo} size='md' />\n        </div>\n      )}\n      <div aria-hidden='true' className='str-chat__typing-indicator__bubble'>\n        <div className='str-chat__typing-indicator__dots'>\n          <TypingIndicatorDots />\n        </div>\n      </div>\n      <VisuallyHidden>\n        <span\n          aria-atomic='true'\n          aria-live='polite'\n          data-testid='typing-indicator-status'\n          role='status'\n        >\n          {typingAnnouncement}\n        </span>\n      </VisuallyHidden>\n    </div>\n  );\n};\n\nexport const TypingIndicator = React.memo(\n  UnMemoizedTypingIndicator,\n) as typeof UnMemoizedTypingIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAM,6BAA6B,EAAE,oBAAmC,EACtE,qBAAqB,aAAa,QACpC;AAEA,IAAM,8BAA8B,EAAE,cAAiC,EAAE,OAAO;AAEhF,IAAM,+BAA+B,EAAE,qBAAkC,EACvE,cACF;;;;;;AAcA,IAAM,6BAA6B,UAAgC;CACjE,MAAM,EAAE,gCAAgC,MAAM,mBAAmB;CAEjE,MAAM,EACJ,aAAA,gBAAc,aACd,oBAAA,uBAAqB,uBACnB,oBAAoB;CACxB,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,wBAAwB,cAC9B,gBAAgB,QAAQ,aACxB,yBACF;CACA,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,SAAS,CAAC,MAChB,cAAc,gBAAgB,cAAc,OAAO,0BAA0B,KAAK,CAAC;CACrF,MAAM,SAAS,iBAAiB;CAChC,MAAM,eAAe,CAAC,CAAC;CACvB,MAAM,EAAE,kBACN,cAAc,QAAQ,OAAO,2BAA2B,KAAK,CAAC;CAEhE,MAAM,gBAAgB,OAAO,OAAO,MAAM;CAI1C,MAAM,kBAAkB,CAAC,eACrB,cAAc,QACX,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAC5D,IACA,CAAC;CAEL,MAAM,iBAAiB,eACnB,cAAc,QACX,EAAE,WAAW,WACZ,MAAM,OAAO,OAAO,MAAM,MAAM,cAAc,eAAe,EACjE,IACA,CAAC;CAGL,MAAM,EAAE,iBAAiB,yBADL,eAAe,iBAAiB,eACS;CAC7D,MAAM,gBAAgB,aAAa,SAAS;CAC5C,MAAM,qBAAqB,cACnB,uBAAuB,cAAc,CAAC,GAC5C,CAAC,cAAc,CAAC,CAClB;CAEA,MAAM,cAAc,cACZ,aAAa,IAAI,oBAAkB,GACzC,CAAC,cAAc,oBAAkB,CACnC;CAEA,gBAAgB;EACd,IAAI,iBAAiB,+BAA+B,iBAAiB;CACvE,GAAG;EAAC;EAAgB;EAA+B;CAAa,CAAC;CAEjE,IAAI,wBAAwB,SAAS,CAAC,iBAAiB,CAAC,+BACtD,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,WAAW,KACT,8BACA,+CACA,EACE,sCAAsC,cACxC,CACF;EACA,eAAY;YARd;GAUG,YAAY,SAAS,KACpB,oBAAC,OAAD;IAAK,eAAY;cACf,oBAAC,eAAD;KAAa,WAAU;KAAkB;KAAa,MAAK;IAAM,CAAA;GAC9D,CAAA;GAEP,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;cAChC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,qBAAD,CAAsB,CAAA;IACnB,CAAA;GACF,CAAA;GACL,oBAAC,gBAAD,EAAA,UACE,oBAAC,QAAD;IACE,eAAY;IACZ,aAAU;IACV,eAAY;IACZ,MAAK;cAEJ;GACG,CAAA,EACQ,CAAA;EACb;;AAET;AAEA,IAAa,kBAAkB,MAAM,KACnC,yBACF"}

package/dist/es/components/TypingIndicator/TypingIndicatorHeader.mjs

@@ -1,31 +1,35 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
 import { useChatContext } from "../../context/ChatContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { useTypingContext } from "../../context/TypingContext.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
 import { TypingIndicatorDots } from "./TypingIndicatorDots.mjs";
 import { useDebouncedTypingActive } from "./hooks/useDebouncedTypingActive.mjs";
 import { getTypingStatusMessage } from "./utils/getTypingStatusMessage.mjs";
-import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/TypingIndicator/TypingIndicatorHeader.tsx
+var typingEventsStateSelector = ({ typingEvents }) => ({ typingEventsEnabled: typingEvents.enabled });
+var textComposerTypingSelector = ({ typing }) => ({ typing });
 /**
 * Inline typing indicator for ChannelHeader or ThreadHeader: text (1/2/3+ people) followed by animated dots.
-* Only shows other participants; respects channelConfig.typing_events.
+* Only shows other participants; respects the channel's resolved `typingEvents.enabled`.
 */
 var TypingIndicatorHeader = (props) => {
 	const { threadList = false } = props;
 	const { t } = useTranslationContext();
-	const { channelConfig, thread } = useChannelStateContext("TypingIndicatorHeader");
-	const parentId = useThreadContext()?.id ?? thread?.id;
-	const { client } = useChatContext("TypingIndicatorHeader");
-	const { typing = {} } = useTypingContext("TypingIndicatorHeader");
-	const typingInChannel = !threadList ? Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id) : [];
-	const typingInThread = threadList ? Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId) : [];
+	const { typingEventsEnabled } = useStateStore(useChannel().configState, typingEventsStateSelector);
+	const parentId = useThreadContext()?.id;
+	const { client } = useChatContext();
+	const { typing = {} } = useStateStore(useMessageComposerController().textComposer?.state, textComposerTypingSelector) ?? {};
+	const typingEntries = Object.values(typing);
+	const typingInChannel = !threadList ? typingEntries.filter(({ parent_id, user }) => user?.id !== client.user?.id && !parent_id) : [];
+	const typingInThread = threadList ? typingEntries.filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId) : [];
 	const { displayUsers } = useDebouncedTypingActive(threadList ? typingInThread : typingInChannel);
 	const label = getTypingStatusMessage(displayUsers, t);
-	if (channelConfig?.typing_events === false || displayUsers.length === 0) return null;
+	if (typingEventsEnabled === false || displayUsers.length === 0) return null;
 	return /* @__PURE__ */ jsxs("span", {
 		className: clsx("str-chat__typing-indicator-header", { "str-chat__typing-indicator-header--thread": threadList }),
 		"data-testid": "typing-indicator-header",

package/dist/es/components/TypingIndicator/TypingIndicatorHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TypingIndicatorHeader.mjs","names":[],"sources":["../../../../src/components/TypingIndicator/TypingIndicatorHeader.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TypingIndicatorDots } from './TypingIndicatorDots';\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useTypingContext } from '../../context/TypingContext';\nimport { useThreadContext } from '../Threads';\n\nimport { useDebouncedTypingActive } from './hooks/useDebouncedTypingActive';\nimport { getTypingStatusMessage } from './utils/getTypingStatusMessage';\n\nexport type TypingIndicatorHeaderProps = {\n  /** When true, show typing in the current thread only; when false, show typing in the channel. */\n  threadList?: boolean;\n};\n\n/**\n * Inline typing indicator for ChannelHeader or ThreadHeader: text (1/2/3+ people) followed by animated dots.\n * Only shows other participants; respects channelConfig.typing_events.\n */\nexport const TypingIndicatorHeader = (props: TypingIndicatorHeaderProps) => {\n  const { threadList = false } = props;\n\n  const { t } = useTranslationContext();\n  const { channelConfig, thread } = useChannelStateContext('TypingIndicatorHeader');\n  const threadInstance = useThreadContext();\n  const parentId = threadInstance?.id ?? thread?.id;\n  const { client } = useChatContext('TypingIndicatorHeader');\n  const { typing = {} } = useTypingContext('TypingIndicatorHeader');\n\n  const typingInChannel = !threadList\n    ? Object.values(typing).filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && !parent_id,\n      )\n    : [];\n\n  const typingInThread = threadList\n    ? Object.values(typing).filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId,\n      )\n    : [];\n\n  const typingUsers = threadList ? typingInThread : typingInChannel;\n  const { displayUsers } = useDebouncedTypingActive(typingUsers);\n  const label = getTypingStatusMessage(displayUsers, t);\n\n  if (channelConfig?.typing_events === false || displayUsers.length === 0) {\n    return null;\n  }\n\n  return (\n    <span\n      className={clsx('str-chat__typing-indicator-header', {\n        'str-chat__typing-indicator-header--thread': threadList,\n      })}\n      data-testid='typing-indicator-header'\n    >\n      <span className='str-chat__typing-indicator-header__text'>{label}</span>\n      <span className='str-chat__typing-indicator__dots str-chat__typing-indicator-header__dots'>\n        <TypingIndicatorDots />\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,aAAa,UAAU;CAE/B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,eAAe,WAAW,uBAAuB,uBAAuB;CAEhF,MAAM,WADiB,iBACN,CAAA,EAAgB,MAAM,QAAQ;CAC/C,MAAM,EAAE,WAAW,eAAe,uBAAuB;CACzD,MAAM,EAAE,SAAS,CAAC,MAAM,iBAAiB,uBAAuB;CAEhE,MAAM,kBAAkB,CAAC,aACrB,OAAO,OAAO,MAAM,CAAC,CAAC,QACnB,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAC5D,IACA,CAAC;CAEL,MAAM,iBAAiB,aACnB,OAAO,OAAO,MAAM,CAAC,CAAC,QACnB,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,cAAc,QACzE,IACA,CAAC;CAGL,MAAM,EAAE,iBAAiB,yBADL,aAAa,iBAAiB,eACW;CAC7D,MAAM,QAAQ,uBAAuB,cAAc,CAAC;CAEpD,IAAI,eAAe,kBAAkB,SAAS,aAAa,WAAW,GACpE,OAAO;CAGT,OACE,qBAAC,QAAD;EACE,WAAW,KAAK,qCAAqC,EACnD,6CAA6C,WAC/C,CAAC;EACD,eAAY;YAJd,CAME,oBAAC,QAAD;GAAM,WAAU;aAA2C;EAAY,CAAA,GACvE,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,qBAAD,CAAsB,CAAA;EAClB,CAAA,CACF;;AAEV"}
+{"version":3,"file":"TypingIndicatorHeader.mjs","names":[],"sources":["../../../../src/components/TypingIndicator/TypingIndicatorHeader.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TypingIndicatorDots } from './TypingIndicatorDots';\nimport { useChannel } from '../../context';\nimport { useChatContext } from '../../context/ChatContext';\nimport { useTranslationContext } from '../../context/TranslationContext';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport { useStateStore } from '../../store';\nimport { useThreadContext } from '../Threads';\nimport type { EventPayload, TextComposerState } from 'stream-chat';\n\nimport { useDebouncedTypingActive } from './hooks/useDebouncedTypingActive';\nimport { getTypingStatusMessage } from './utils/getTypingStatusMessage';\nimport type { ChannelConfig } from 'stream-chat';\n\nconst typingEventsStateSelector = ({ typingEvents }: ChannelConfig) => ({\n  typingEventsEnabled: typingEvents.enabled,\n});\n\nconst textComposerTypingSelector = ({ typing }: TextComposerState) => ({ typing });\n\nexport type TypingIndicatorHeaderProps = {\n  /** When true, show typing in the current thread only; when false, show typing in the channel. */\n  threadList?: boolean;\n};\n\n/**\n * Inline typing indicator for ChannelHeader or ThreadHeader: text (1/2/3+ people) followed by animated dots.\n * Only shows other participants; respects the channel's resolved `typingEvents.enabled`.\n */\nexport const TypingIndicatorHeader = (props: TypingIndicatorHeaderProps) => {\n  const { threadList = false } = props;\n\n  const { t } = useTranslationContext();\n  const channel = useChannel();\n  const { typingEventsEnabled } = useStateStore(\n    channel.configState,\n    typingEventsStateSelector,\n  );\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\n  const typingEntries = Object.values(typing) as EventPayload<\n    'typing.start' | 'typing.stop'\n  >[];\n\n  const typingInChannel = !threadList\n    ? typingEntries.filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && !parent_id,\n      )\n    : [];\n\n  const typingInThread = threadList\n    ? typingEntries.filter(\n        ({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId,\n      )\n    : [];\n\n  const typingUsers = threadList ? typingInThread : typingInChannel;\n  const { displayUsers } = useDebouncedTypingActive(typingUsers);\n  const label = getTypingStatusMessage(displayUsers, t);\n\n  if (typingEventsEnabled === false || displayUsers.length === 0) {\n    return null;\n  }\n\n  return (\n    <span\n      className={clsx('str-chat__typing-indicator-header', {\n        'str-chat__typing-indicator-header--thread': threadList,\n      })}\n      data-testid='typing-indicator-header'\n    >\n      <span className='str-chat__typing-indicator-header__text'>{label}</span>\n      <span className='str-chat__typing-indicator__dots str-chat__typing-indicator-header__dots'>\n        <TypingIndicatorDots />\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,6BAA6B,EAAE,oBAAmC,EACtE,qBAAqB,aAAa,QACpC;AAEA,IAAM,8BAA8B,EAAE,cAAiC,EAAE,OAAO;;;;;AAWhF,IAAa,yBAAyB,UAAsC;CAC1E,MAAM,EAAE,aAAa,UAAU;CAE/B,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,EAAE,wBAAwB,cADhB,WAEd,CAAA,CAAQ,aACR,yBACF;CAEA,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;CAErF,MAAM,gBAAgB,OAAO,OAAO,MAAM;CAI1C,MAAM,kBAAkB,CAAC,aACrB,cAAc,QACX,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,CAAC,SAC5D,IACA,CAAC;CAEL,MAAM,iBAAiB,aACnB,cAAc,QACX,EAAE,WAAW,WAAW,MAAM,OAAO,OAAO,MAAM,MAAM,cAAc,QACzE,IACA,CAAC;CAGL,MAAM,EAAE,iBAAiB,yBADL,aAAa,iBAAiB,eACW;CAC7D,MAAM,QAAQ,uBAAuB,cAAc,CAAC;CAEpD,IAAI,wBAAwB,SAAS,aAAa,WAAW,GAC3D,OAAO;CAGT,OACE,qBAAC,QAAD;EACE,WAAW,KAAK,qCAAqC,EACnD,6CAA6C,WAC/C,CAAC;EACD,eAAY;YAJd,CAME,oBAAC,QAAD;GAAM,WAAU;aAA2C;EAAY,CAAA,GACvE,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,qBAAD,CAAsB,CAAA;EAClB,CAAA,CACF;;AAEV"}

package/dist/es/components/TypingIndicator/hooks/useDebouncedTypingActive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDebouncedTypingActive.mjs","names":[],"sources":["../../../../../src/components/TypingIndicator/hooks/useDebouncedTypingActive.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ChannelState } from 'stream-chat';\n\nconst DEFAULT_HIDE_DELAY_MS = 2000;\n\nexport type TypingEntry = ChannelState['typing'][string];\n\n/**\n * Derive a stable key from typing users so that the effect only runs when the\n * actual set of users (by id) changes, not on every render due to new array\n * references.\n *\n * Important: callers must pass entries where `user` is an object with an `id`\n * field (not a plain string). If `user?.id` is undefined for every entry the\n * key degenerates to an empty string, the memo returns a new array each time\n * it is \"invalidated\" by React, and `setDisplayUsers` in the effect below will\n * loop infinitely because it always receives a fresh reference.\n */\nconst useStableTypingUsers = (typingUsers: readonly TypingEntry[]) => {\n  const key = typingUsers\n    .map((entry) => entry.user?.id ?? '')\n    .sort()\n    .join(',');\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useMemo(() => [...typingUsers], [key]);\n};\n\n/**\n * Debounces hiding the typing indicator: when typing users go to zero, keep showing for delayMs\n * to avoid flicker when typing stops and starts again quickly. Returns the list to display\n * (current typers or last non-empty list during the debounce period). Show the indicator\n * when displayUsers.length > 0.\n */\nexport function useDebouncedTypingActive(\n  typingUsers: readonly TypingEntry[],\n  delayMs: number = DEFAULT_HIDE_DELAY_MS,\n): { displayUsers: TypingEntry[] } {\n  const stableTypingUsers = useStableTypingUsers(typingUsers);\n  const [displayUsers, setDisplayUsers] = useState<TypingEntry[]>([]);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hadTypersRef = useRef(false);\n\n  useEffect(() => {\n    if (stableTypingUsers.length > 0) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n      hadTypersRef.current = true;\n      setDisplayUsers(stableTypingUsers);\n      return;\n    }\n\n    if (stableTypingUsers.length === 0 && hadTypersRef.current && !timerRef.current) {\n      timerRef.current = setTimeout(() => {\n        timerRef.current = null;\n        hadTypersRef.current = false;\n        setDisplayUsers([]);\n      }, delayMs);\n    }\n  }, [stableTypingUsers, delayMs]);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    [],\n  );\n\n  return { displayUsers };\n}\n"],"mappings":";;AAGA,IAAM,wBAAwB;;;;;;;;;;;;AAe9B,IAAM,wBAAwB,gBAAwC;CAOpE,OAAO,cAAc,CAAC,GAAG,WAAW,GAAG,CAN3B,YACT,KAAK,UAAU,MAAM,MAAM,MAAM,EAAE,CAAC,CACpC,KAAK,CAAC,CACN,KAAK,GAGgC,CAAG,CAAC;AAC9C;;;;;;;AAQA,SAAgB,yBACd,aACA,UAAkB,uBACe;CACjC,MAAM,oBAAoB,qBAAqB,WAAW;CAC1D,MAAM,CAAC,cAAc,mBAAmB,SAAwB,CAAC,CAAC;CAClE,MAAM,WAAW,OAA6C,IAAI;CAClE,MAAM,eAAe,OAAO,KAAK;CAEjC,gBAAgB;EACd,IAAI,kBAAkB,SAAS,GAAG;GAChC,IAAI,SAAS,SAAS;IACpB,aAAa,SAAS,OAAO;IAC7B,SAAS,UAAU;GACrB;GACA,aAAa,UAAU;GACvB,gBAAgB,iBAAiB;GACjC;EACF;EAEA,IAAI,kBAAkB,WAAW,KAAK,aAAa,WAAW,CAAC,SAAS,SACtE,SAAS,UAAU,iBAAiB;GAClC,SAAS,UAAU;GACnB,aAAa,UAAU;GACvB,gBAAgB,CAAC,CAAC;EACpB,GAAG,OAAO;CAEd,GAAG,CAAC,mBAAmB,OAAO,CAAC;CAE/B,sBACc;EACV,IAAI,SAAS,SAAS,aAAa,SAAS,OAAO;CACrD,GACA,CAAC,CACH;CAEA,OAAO,EAAE,aAAa;AACxB"}
+{"version":3,"file":"useDebouncedTypingActive.mjs","names":[],"sources":["../../../../../src/components/TypingIndicator/hooks/useDebouncedTypingActive.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { EventPayload } from 'stream-chat';\n\nconst DEFAULT_HIDE_DELAY_MS = 2000;\n\nexport type TypingEntry = EventPayload<'typing.start' | 'typing.stop'>;\n\n/**\n * Derive a stable key from typing users so that the effect only runs when the\n * actual set of users (by id) changes, not on every render due to new array\n * references.\n *\n * Important: callers must pass entries where `user` is an object with an `id`\n * field (not a plain string). If `user?.id` is undefined for every entry the\n * key degenerates to an empty string, the memo returns a new array each time\n * it is \"invalidated\" by React, and `setDisplayUsers` in the effect below will\n * loop infinitely because it always receives a fresh reference.\n */\nconst useStableTypingUsers = (typingUsers: readonly TypingEntry[]) => {\n  const key = typingUsers\n    .map((entry) => entry.user?.id ?? '')\n    .sort()\n    .join(',');\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useMemo(() => [...typingUsers], [key]);\n};\n\n/**\n * Debounces hiding the typing indicator: when typing users go to zero, keep showing for delayMs\n * to avoid flicker when typing stops and starts again quickly. Returns the list to display\n * (current typers or last non-empty list during the debounce period). Show the indicator\n * when displayUsers.length > 0.\n */\nexport function useDebouncedTypingActive(\n  typingUsers: readonly TypingEntry[],\n  delayMs: number = DEFAULT_HIDE_DELAY_MS,\n): { displayUsers: TypingEntry[] } {\n  const stableTypingUsers = useStableTypingUsers(typingUsers);\n  const [displayUsers, setDisplayUsers] = useState<TypingEntry[]>([]);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hadTypersRef = useRef(false);\n\n  useEffect(() => {\n    if (stableTypingUsers.length > 0) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n      hadTypersRef.current = true;\n      setDisplayUsers(stableTypingUsers);\n      return;\n    }\n\n    if (stableTypingUsers.length === 0 && hadTypersRef.current && !timerRef.current) {\n      timerRef.current = setTimeout(() => {\n        timerRef.current = null;\n        hadTypersRef.current = false;\n        setDisplayUsers([]);\n      }, delayMs);\n    }\n  }, [stableTypingUsers, delayMs]);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    [],\n  );\n\n  return { displayUsers };\n}\n"],"mappings":";;AAGA,IAAM,wBAAwB;;;;;;;;;;;;AAe9B,IAAM,wBAAwB,gBAAwC;CAOpE,OAAO,cAAc,CAAC,GAAG,WAAW,GAAG,CAN3B,YACT,KAAK,UAAU,MAAM,MAAM,MAAM,EAAE,CAAC,CACpC,KAAK,CAAC,CACN,KAAK,GAGgC,CAAG,CAAC;AAC9C;;;;;;;AAQA,SAAgB,yBACd,aACA,UAAkB,uBACe;CACjC,MAAM,oBAAoB,qBAAqB,WAAW;CAC1D,MAAM,CAAC,cAAc,mBAAmB,SAAwB,CAAC,CAAC;CAClE,MAAM,WAAW,OAA6C,IAAI;CAClE,MAAM,eAAe,OAAO,KAAK;CAEjC,gBAAgB;EACd,IAAI,kBAAkB,SAAS,GAAG;GAChC,IAAI,SAAS,SAAS;IACpB,aAAa,SAAS,OAAO;IAC7B,SAAS,UAAU;GACrB;GACA,aAAa,UAAU;GACvB,gBAAgB,iBAAiB;GACjC;EACF;EAEA,IAAI,kBAAkB,WAAW,KAAK,aAAa,WAAW,CAAC,SAAS,SACtE,SAAS,UAAU,iBAAiB;GAClC,SAAS,UAAU;GACnB,aAAa,UAAU;GACvB,gBAAgB,CAAC,CAAC;EACpB,GAAG,OAAO;CAEd,GAAG,CAAC,mBAAmB,OAAO,CAAC;CAE/B,sBACc;EACV,IAAI,SAAS,SAAS,aAAa,SAAS,OAAO;CACrD,GACA,CAAC,CACH;CAEA,OAAO,EAAE,aAAa;AACxB"}

package/dist/es/components/TypingIndicator/utils/getTypingStatusMessage.mjs

@@ -5,9 +5,13 @@
 var getTypingStatusMessage = (displayUsers, t) => {
 	const namedUsers = displayUsers.map(({ user }) => user?.name?.trim() || user?.id || "").filter(Boolean);
 	const count = displayUsers.length;
-	if (count === 1 && namedUsers.length === 1) return t("{{ typing }} is typing", { typing: namedUsers[0] });
-	if (count === 2 && namedUsers.length === 2) return t("{{ typing }} are typing", { typing: `${namedUsers[0]} and ${namedUsers[1]}` });
-	return t("{{ count }} people are typing", { count });
+	if (count === 1 && namedUsers.length === 1) return t("typing.singleUser", "{{ typing }} is typing", { typing: namedUsers[0] });
+	if (count === 2 && namedUsers.length === 2) return t("typing.twoUsers", "{{ typing }} are typing", { typing: `${namedUsers[0]} and ${namedUsers[1]}` });
+	return t("typing.manyUsers", {
+		count,
+		defaultValue_one: "{{ count }} person is typing",
+		defaultValue_other: "{{ count }} people are typing"
+	});
 };
 //#endregion
 export { getTypingStatusMessage };

package/dist/es/components/TypingIndicator/utils/getTypingStatusMessage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getTypingStatusMessage.mjs","names":[],"sources":["../../../../../src/components/TypingIndicator/utils/getTypingStatusMessage.ts"],"sourcesContent":["import type { TypingEntry } from '../hooks/useDebouncedTypingActive';\n\ntype TranslationFunction = (\n  key: string,\n  options?: Record<string, number | string>,\n) => string;\n\n/**\n * Build a localized typing-status message for screen-reader and inline indicator text.\n */\nexport const getTypingStatusMessage = (\n  displayUsers: readonly TypingEntry[],\n  t: TranslationFunction,\n) => {\n  const namedUsers = displayUsers\n    .map(({ user }) => user?.name?.trim() || user?.id || '')\n    .filter(Boolean);\n  const count = displayUsers.length;\n\n  if (count === 1 && namedUsers.length === 1) {\n    return t('{{ typing }} is typing', { typing: namedUsers[0] });\n  }\n\n  if (count === 2 && namedUsers.length === 2) {\n    return t('{{ typing }} are typing', {\n      typing: `${namedUsers[0]} and ${namedUsers[1]}`,\n    });\n  }\n\n  return t('{{ count }} people are typing', { count });\n};\n"],"mappings":";;;;AAUA,IAAa,0BACX,cACA,MACG;CACH,MAAM,aAAa,aAChB,KAAK,EAAE,WAAW,MAAM,MAAM,KAAK,KAAK,MAAM,MAAM,EAAE,CAAC,CACvD,OAAO,OAAO;CACjB,MAAM,QAAQ,aAAa;CAE3B,IAAI,UAAU,KAAK,WAAW,WAAW,GACvC,OAAO,EAAE,0BAA0B,EAAE,QAAQ,WAAW,GAAG,CAAC;CAG9D,IAAI,UAAU,KAAK,WAAW,WAAW,GACvC,OAAO,EAAE,2BAA2B,EAClC,QAAQ,GAAG,WAAW,GAAG,OAAO,WAAW,KAC7C,CAAC;CAGH,OAAO,EAAE,iCAAiC,EAAE,MAAM,CAAC;AACrD"}
+{"version":3,"file":"getTypingStatusMessage.mjs","names":[],"sources":["../../../../../src/components/TypingIndicator/utils/getTypingStatusMessage.ts"],"sourcesContent":["import type { TranslationContextValue } from '../../../context/TranslationContext';\nimport type { TypingEntry } from '../hooks/useDebouncedTypingActive';\n\n/**\n * Build a localized typing-status message for screen-reader and inline indicator text.\n */\nexport const getTypingStatusMessage = (\n  displayUsers: readonly TypingEntry[],\n  t: TranslationContextValue['t'],\n) => {\n  const namedUsers = displayUsers\n    .map(({ user }) => user?.name?.trim() || user?.id || '')\n    .filter(Boolean);\n  const count = displayUsers.length;\n\n  if (count === 1 && namedUsers.length === 1) {\n    return t('typing.singleUser', '{{ typing }} is typing', { typing: namedUsers[0] });\n  }\n\n  if (count === 2 && namedUsers.length === 2) {\n    return t('typing.twoUsers', '{{ typing }} are typing', {\n      typing: `${namedUsers[0]} and ${namedUsers[1]}`,\n    });\n  }\n\n  return t('typing.manyUsers', {\n    count,\n    defaultValue_one: '{{ count }} person is typing',\n    defaultValue_other: '{{ count }} people are typing',\n  });\n};\n"],"mappings":";;;;AAMA,IAAa,0BACX,cACA,MACG;CACH,MAAM,aAAa,aAChB,KAAK,EAAE,WAAW,MAAM,MAAM,KAAK,KAAK,MAAM,MAAM,EAAE,CAAC,CACvD,OAAO,OAAO;CACjB,MAAM,QAAQ,aAAa;CAE3B,IAAI,UAAU,KAAK,WAAW,WAAW,GACvC,OAAO,EAAE,qBAAqB,0BAA0B,EAAE,QAAQ,WAAW,GAAG,CAAC;CAGnF,IAAI,UAAU,KAAK,WAAW,WAAW,GACvC,OAAO,EAAE,mBAAmB,2BAA2B,EACrD,QAAQ,GAAG,WAAW,GAAG,OAAO,WAAW,KAC7C,CAAC;CAGH,OAAO,EAAE,oBAAoB;EAC3B;EACA,kBAAkB;EAClB,oBAAoB;CACtB,CAAC;AACH"}

package/dist/es/components/VideoPlayer/VideoThumbnail.mjs

@@ -1,7 +1,7 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "../Button/Button.mjs";
 import { BaseImage } from "../BaseImage/BaseImage.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -16,7 +16,7 @@ var VideoThumbnail = ({ className, onPlay, ...imageProps }) => {
 			...imageProps
 		}), onPlay ? /* @__PURE__ */ jsx(Button, {
 			appearance: "solid",
-			"aria-label": t("Play video"),
+			"aria-label": t("videoPlayer.videoThumbnail.playVideo.ariaLabel", "Play video"),
 			circular: true,
 			className: clsx("str-chat__message-attachment__video-thumbnail__play-indicator"),
 			onClick: onPlay,

package/dist/es/components/VideoPlayer/VideoThumbnail.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VideoThumbnail.mjs","names":[],"sources":["../../../../src/components/VideoPlayer/VideoThumbnail.tsx"],"sourcesContent":["import { BaseImage, type BaseImageProps } from '../BaseImage';\nimport { Button } from '../Button';\nimport clsx from 'clsx';\nimport React from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport type VideoThumbnailProps = BaseImageProps & {\n  onPlay?: () => void;\n};\n\nexport const VideoThumbnail = ({\n  className,\n  onPlay,\n  ...imageProps\n}: VideoThumbnailProps) => {\n  const { IconPlayFill } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__message-attachment__video-thumbnail'>\n      <BaseImage\n        className={clsx('str-chat__message-attachment__video-thumbnail-image', className)}\n        {...imageProps}\n      />\n      {onPlay ? (\n        <Button\n          appearance='solid'\n          aria-label={t('Play video')}\n          circular\n          className={clsx(\n            'str-chat__message-attachment__video-thumbnail__play-indicator',\n          )}\n          onClick={onPlay}\n          size='lg'\n          variant='secondary'\n        >\n          <IconPlayFill />\n        </Button>\n      ) : (\n        <div className='str-chat__message-attachment__video-thumbnail__play-indicator'>\n          <IconPlayFill />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,kBAAkB,EAC7B,WACA,QACA,GAAG,iBACsB;CACzB,MAAM,EAAE,iBAAiB,yBAAyB;CAElD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,WAAD;GACE,WAAW,KAAK,uDAAuD,SAAS;GAChF,GAAI;EACL,CAAA,GACA,SACC,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,YAAY;GAC1B,UAAA;GACA,WAAW,KACT,+DACF;GACA,SAAS;GACT,MAAK;GACL,SAAQ;aAER,oBAAC,cAAD,CAAe,CAAA;EACT,CAAA,IAER,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,cAAD,CAAe,CAAA;EACZ,CAAA,CAEJ;;AAET"}
+{"version":3,"file":"VideoThumbnail.mjs","names":[],"sources":["../../../../src/components/VideoPlayer/VideoThumbnail.tsx"],"sourcesContent":["import { BaseImage, type BaseImageProps } from '../BaseImage';\nimport { Button } from '../Button';\nimport clsx from 'clsx';\nimport React from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport type VideoThumbnailProps = BaseImageProps & {\n  onPlay?: () => void;\n};\n\nexport const VideoThumbnail = ({\n  className,\n  onPlay,\n  ...imageProps\n}: VideoThumbnailProps) => {\n  const { IconPlayFill } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__message-attachment__video-thumbnail'>\n      <BaseImage\n        className={clsx('str-chat__message-attachment__video-thumbnail-image', className)}\n        {...imageProps}\n      />\n      {onPlay ? (\n        <Button\n          appearance='solid'\n          aria-label={t('videoPlayer.videoThumbnail.playVideo.ariaLabel', 'Play video')}\n          circular\n          className={clsx(\n            'str-chat__message-attachment__video-thumbnail__play-indicator',\n          )}\n          onClick={onPlay}\n          size='lg'\n          variant='secondary'\n        >\n          <IconPlayFill />\n        </Button>\n      ) : (\n        <div className='str-chat__message-attachment__video-thumbnail__play-indicator'>\n          <IconPlayFill />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,kBAAkB,EAC7B,WACA,QACA,GAAG,iBACsB;CACzB,MAAM,EAAE,iBAAiB,yBAAyB;CAClD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,WAAD;GACE,WAAW,KAAK,uDAAuD,SAAS;GAChF,GAAI;EACL,CAAA,GACA,SACC,oBAAC,QAAD;GACE,YAAW;GACX,cAAY,EAAE,kDAAkD,YAAY;GAC5E,UAAA;GACA,WAAW,KACT,+DACF;GACA,SAAS;GACT,MAAK;GACL,SAAQ;aAER,oBAAC,cAAD,CAAe,CAAA;EACT,CAAA,IAER,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,cAAD,CAAe,CAAA;EACZ,CAAA,CAEJ;;AAET"}

package/dist/es/context/AttachmentContext.mjs

@@ -0,0 +1,16 @@
+import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration } from "../components/Attachment/attachment-sizing.mjs";
+import React from "react";
+//#region src/context/AttachmentContext.tsx
+var defaultAttachmentContextValue = {
+	giphyVersion: "fixed_height",
+	imageAttachmentSizeHandler: getImageAttachmentConfiguration,
+	shouldGenerateVideoThumbnail: true,
+	videoAttachmentSizeHandler: getVideoAttachmentConfiguration
+};
+var AttachmentContext = React.createContext(defaultAttachmentContextValue);
+var AttachmentContextProvider = AttachmentContext.Provider;
+var useAttachmentContext = () => React.useContext(AttachmentContext);
+//#endregion
+export { AttachmentContextProvider, defaultAttachmentContextValue, useAttachmentContext };
+
+//# sourceMappingURL=AttachmentContext.mjs.map

package/dist/es/context/AttachmentContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentContext.mjs","names":[],"sources":["../../../src/context/AttachmentContext.tsx"],"sourcesContent":["import React from 'react';\nimport type { GiphyVersions } from 'stream-chat';\nimport type {\n  ImageAttachmentSizeHandler,\n  VideoAttachmentSizeHandler,\n} from '../components/Attachment/Attachment';\nimport {\n  getImageAttachmentConfiguration,\n  getVideoAttachmentConfiguration,\n} from '../components/Attachment/attachment-sizing';\n\nexport type ImageAttachmentConfiguration = {\n  url: string;\n};\nexport type VideoAttachmentConfiguration = ImageAttachmentConfiguration & {\n  thumbUrl?: string;\n};\n\nexport type AttachmentContextValue = {\n  giphyVersion: GiphyVersions;\n  imageAttachmentSizeHandler: ImageAttachmentSizeHandler;\n  shouldGenerateVideoThumbnail: boolean;\n  videoAttachmentSizeHandler: VideoAttachmentSizeHandler;\n};\n\nexport const defaultAttachmentContextValue: AttachmentContextValue = {\n  giphyVersion: 'fixed_height',\n  imageAttachmentSizeHandler: getImageAttachmentConfiguration,\n  shouldGenerateVideoThumbnail: true,\n  videoAttachmentSizeHandler: getVideoAttachmentConfiguration,\n};\n\nconst AttachmentContext = React.createContext<AttachmentContextValue>(\n  defaultAttachmentContextValue,\n);\n\nexport const AttachmentContextProvider = AttachmentContext.Provider;\n\nexport const useAttachmentContext = () => React.useContext(AttachmentContext);\n"],"mappings":";;;AAyBA,IAAa,gCAAwD;CACnE,cAAc;CACd,4BAA4B;CAC5B,8BAA8B;CAC9B,4BAA4B;AAC9B;AAEA,IAAM,oBAAoB,MAAM,cAC9B,6BACF;AAEA,IAAa,4BAA4B,kBAAkB;AAE3D,IAAa,6BAA6B,MAAM,WAAW,iBAAiB"}

package/dist/es/context/ChannelInstanceContext.mjs

@@ -0,0 +1,17 @@
+import React, { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/context/ChannelInstanceContext.tsx
+var ChannelInstanceContext = React.createContext(void 0);
+var ChannelInstanceProvider = ({ children, value }) => /* @__PURE__ */ jsx(ChannelInstanceContext.Provider, {
+	value,
+	children
+});
+/**
+* Non-throwing counterpart to {@link useChannel}: returns an empty object outside a `Channel`
+* subtree, for callers that only need to know whether a channel is in scope.
+*/
+var useChannelInstanceContext = () => useContext(ChannelInstanceContext) ?? {};
+//#endregion
+export { ChannelInstanceContext, ChannelInstanceProvider, useChannelInstanceContext };
+
+//# sourceMappingURL=ChannelInstanceContext.mjs.map

package/dist/es/context/ChannelInstanceContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelInstanceContext.mjs","names":[],"sources":["../../../src/context/ChannelInstanceContext.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { useContext } from 'react';\nimport type { Channel } from 'stream-chat';\n\nexport type ChannelInstanceContextValue = {\n  channel: Channel;\n};\n\nexport const ChannelInstanceContext = React.createContext<\n  ChannelInstanceContextValue | undefined\n>(undefined);\n\nexport const ChannelInstanceProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: ChannelInstanceContextValue;\n}>) => (\n  <ChannelInstanceContext.Provider value={value}>\n    {children}\n  </ChannelInstanceContext.Provider>\n);\n\n/**\n * Non-throwing counterpart to {@link useChannel}: returns an empty object outside a `Channel`\n * subtree, for callers that only need to know whether a channel is in scope.\n */\nexport const useChannelInstanceContext = (): Partial<ChannelInstanceContextValue> =>\n  useContext(ChannelInstanceContext) ?? {};\n"],"mappings":";;;AAQA,IAAa,yBAAyB,MAAM,cAE1C,KAAA,CAAS;AAEX,IAAa,2BAA2B,EACtC,UACA,YAIA,oBAAC,uBAAuB,UAAxB;CAAwC;CACrC;AAC8B,CAAA;;;;;AAOnC,IAAa,kCACX,WAAW,sBAAsB,KAAK,CAAC"}

package/dist/es/context/ChannelListContext.mjs

@@ -3,17 +3,14 @@ import { jsx } from "react/jsx-runtime";
 //#region src/context/ChannelListContext.tsx
 var ChannelListContext = createContext(void 0);
 /**
-* Context provider for components rendered within the `ChannelList`
+* Context provider exposing the primary channel paginator to components rendered within the
+* channel list (e.g. search results, member actions, notification targeting).
 */
 var ChannelListContextProvider = ({ children, value }) => /* @__PURE__ */ jsx(ChannelListContext.Provider, {
 	value,
 	children
 });
-var useChannelListContext = () => {
-	const contextValue = useContext(ChannelListContext);
-	if (!contextValue) return {};
-	return contextValue;
-};
+var useChannelListContext = () => useContext(ChannelListContext) ?? {};
 //#endregion
 export { ChannelListContext, ChannelListContextProvider, useChannelListContext };
 

package/dist/es/context/ChannelListContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelListContext.mjs","names":[],"sources":["../../../src/context/ChannelListContext.tsx"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react';\nimport React, { createContext, useContext } from 'react';\n\nimport type { Channel } from 'stream-chat';\n\nexport type ChannelListContextValue = {\n  /**\n   * State representing the array of loaded channels.\n   * Channels query is executed by default only by ChannelList component in the SDK.\n   */\n  channels: Channel[];\n  /**\n   * Indicator for channel pagination to determine whether more items can be loaded\n   */\n  hasNextPage: boolean;\n  /**\n   * Pagination function to load more channels\n   */\n  loadNextPage(): Promise<void>;\n  /**\n   * Sets the list of Channel objects to be rendered by ChannelList component.\n   */\n  setChannels: Dispatch<SetStateAction<Channel[]>>;\n};\n\nexport const ChannelListContext = createContext<ChannelListContextValue | undefined>(\n  undefined,\n);\n\n/**\n * Context provider for components rendered within the `ChannelList`\n */\nexport const ChannelListContextProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: ChannelListContextValue;\n}>) => (\n  <ChannelListContext.Provider value={value as unknown as ChannelListContextValue}>\n    {children}\n  </ChannelListContext.Provider>\n);\n\nexport const useChannelListContext = () => {\n  const contextValue = useContext(ChannelListContext);\n\n  if (!contextValue) {\n    return {} as ChannelListContextValue;\n  }\n\n  return contextValue as unknown as ChannelListContextValue;\n};\n"],"mappings":";;;AAyBA,IAAa,qBAAqB,cAChC,KAAA,CACF;;;;AAKA,IAAa,8BAA8B,EACzC,UACA,YAIA,oBAAC,mBAAmB,UAApB;CAAoC;CACjC;AAC0B,CAAA;AAG/B,IAAa,8BAA8B;CACzC,MAAM,eAAe,WAAW,kBAAkB;CAElD,IAAI,CAAC,cACH,OAAO,CAAC;CAGV,OAAO;AACT"}
+{"version":3,"file":"ChannelListContext.mjs","names":[],"sources":["../../../src/context/ChannelListContext.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport React, { createContext, useContext } from 'react';\n\nimport type { ChannelPaginator } from 'stream-chat';\n\nexport type ChannelListContextValue = {\n  /**\n   * The primary channel paginator held by the `ChannelManager` on `ChatContext`.\n   * Read the loaded channels reactively with `useStateStore(paginator.state, …)`, load the next\n   * page with `paginator.next()`, and mutate the loaded list (e.g. prepend a just-opened channel)\n   * via `paginator.setItems({ valueOrFactory })`. Undefined when rendered outside a channel list.\n   */\n  paginator?: ChannelPaginator;\n};\n\nexport const ChannelListContext = createContext<ChannelListContextValue | undefined>(\n  undefined,\n);\n\n/**\n * Context provider exposing the primary channel paginator to components rendered within the\n * channel list (e.g. search results, member actions, notification targeting).\n */\nexport const ChannelListContextProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: ChannelListContextValue;\n}>) => (\n  <ChannelListContext.Provider value={value}>{children}</ChannelListContext.Provider>\n);\n\nexport const useChannelListContext = (): ChannelListContextValue =>\n  useContext(ChannelListContext) ?? {};\n"],"mappings":";;;AAeA,IAAa,qBAAqB,cAChC,KAAA,CACF;;;;;AAMA,IAAa,8BAA8B,EACzC,UACA,YAIA,oBAAC,mBAAmB,UAApB;CAAoC;CAAQ;AAAsC,CAAA;AAGpF,IAAa,8BACX,WAAW,kBAAkB,KAAK,CAAC"}

package/dist/es/context/ChatContext.mjs

@@ -1,3 +1,4 @@
+import { requireContext } from "./requireContext.mjs";
 import React, { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/context/ChatContext.tsx
@@ -6,14 +7,7 @@ var ChatProvider = ({ children, value }) => /* @__PURE__ */ jsx(ChatContext.Prov
 	value,
 	children
 });
-var useChatContext = (componentName) => {
-	const contextValue = useContext(ChatContext);
-	if (!contextValue) {
-		console.warn(`The useChatContext hook was called outside of the ChatContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`);
-		return {};
-	}
-	return contextValue;
-};
+var useChatContext = () => requireContext(useContext(ChatContext), "useChatContext", "Chat");
 //#endregion
 export { ChatContext, ChatProvider, useChatContext };
 

package/dist/es/context/ChatContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.mjs","names":[],"sources":["../../../src/context/ChatContext.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\nimport type {\n  AppSettingsAPIResponse,\n  Channel,\n  Mute,\n  SearchController,\n} from 'stream-chat';\n\nimport type { ChatProps } from '../components/Chat/Chat';\nimport type { ChannelsQueryState } from '../components/Chat/hooks/useChannelsQueryState';\n\ntype CSSClasses =\n  | 'chat'\n  | 'chatContainer'\n  | 'channel'\n  | 'channelList'\n  | 'message'\n  | 'messageList'\n  | 'thread'\n  | 'threadList'\n  | 'virtualMessage'\n  | 'virtualizedMessageList';\n\nexport type CustomClasses = Partial<Record<CSSClasses, string>>;\n\ntype ChannelConfId = string; // e.g.: \"messaging:general\"\n\nexport type ChatContextValue = {\n  /**\n   * Indicates, whether a channels query has been triggered within ChannelList by its channels pagination controller.\n   */\n  channelsQueryState: ChannelsQueryState;\n  getAppSettings: () => Promise<AppSettingsAPIResponse> | null;\n  latestMessageDatesByChannels: Record<ChannelConfId, Date>;\n  mutes: Array<Mute>;\n  /** Instance of SearchController class that allows to control all the search operations. */\n  searchController: SearchController;\n  /**\n   * Sets active channel to be rendered within Channel component.\n   * @param newChannel\n   * @param watchers\n   * @param event\n   */\n  setActiveChannel: (\n    newChannel?: Channel,\n    watchers?: { limit?: number; offset?: number },\n    event?: React.BaseSyntheticEvent,\n  ) => void;\n  useImageFlagEmojisOnWindows: boolean;\n  /**\n   * Active channel used to render the contents of the Channel component.\n   */\n  channel?: Channel;\n  /**\n   * Object through which custom classes can be set for main container components of the SDK.\n   */\n  customClasses?: CustomClasses;\n} & Partial<Pick<ChatProps, 'isMessageAIGenerated'>> &\n  Required<Pick<ChatProps, 'theme' | 'client'>>;\n\nexport const ChatContext = React.createContext<ChatContextValue | undefined>(undefined);\n\nexport const ChatProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: ChatContextValue;\n}>) => (\n  <ChatContext.Provider value={value as unknown as ChatContextValue}>\n    {children}\n  </ChatContext.Provider>\n);\n\nexport const useChatContext = (componentName?: string) => {\n  const contextValue = useContext(ChatContext);\n\n  if (!contextValue) {\n    console.warn(\n      `The useChatContext hook was called outside of the ChatContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`,\n    );\n\n    return {} as ChatContextValue;\n  }\n\n  return contextValue as unknown as ChatContextValue;\n};\n"],"mappings":";;;AA6DA,IAAa,cAAc,MAAM,cAA4C,KAAA,CAAS;AAEtF,IAAa,gBAAgB,EAC3B,UACA,YAIA,oBAAC,YAAY,UAAb;CAA6B;CAC1B;AACmB,CAAA;AAGxB,IAAa,kBAAkB,kBAA2B;CACxD,MAAM,eAAe,WAAW,WAAW;CAE3C,IAAI,CAAC,cAAc;EACjB,QAAQ,KACN,kLAAkL,cAAc,YAClM;EAEA,OAAO,CAAC;CACV;CAEA,OAAO;AACT"}
+{"version":3,"file":"ChatContext.mjs","names":[],"sources":["../../../src/context/ChatContext.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport type { PropsWithChildren } from 'react';\nimport type {\n  ChannelManager,\n  SearchController,\n  StreamChat,\n  UserMuteResponse,\n} from 'stream-chat';\n\nimport type { ChatProps } from '../components/Chat/Chat';\nimport { requireContext } from './requireContext';\n\ntype CSSClasses =\n  | 'chat'\n  | 'chatContainer'\n  | 'channel'\n  | 'channelList'\n  | 'message'\n  | 'messageList'\n  | 'thread'\n  | 'threadList'\n  | 'virtualMessage'\n  | 'virtualizedMessageList';\n\nexport type CustomClasses = Partial<Record<CSSClasses, string>>;\n\nexport type ChatContextValue = {\n  /**\n   * The client's `ChannelManager` (`client.channelManager`) — used to query and manage channels\n   * across one or more channel lists (the channel-list data source + cross-list ownership). The\n   * lists themselves are registered on it by the application\n   * (`client.channelManager.insertPaginator({ paginator })`); the SDK creates none.\n   */\n  channelManager: ChannelManager;\n  getAppSettings: () => ReturnType<StreamChat['getAppSettings']> | null;\n  /** Users muted by the current user. */\n  mutes: Array<UserMuteResponse>;\n  /** Instance of SearchController class that allows to control all the search operations. */\n  searchController: SearchController;\n  useImageFlagEmojisOnWindows: boolean;\n  /**\n   * Object through which custom classes can be set for main container components of the SDK.\n   */\n  customClasses?: CustomClasses;\n} & Partial<Pick<ChatProps, 'isMessageAIGenerated'>> &\n  Required<Pick<ChatProps, 'theme' | 'client'>>;\n\nexport const ChatContext = React.createContext<ChatContextValue | undefined>(undefined);\n\nexport const ChatProvider = ({\n  children,\n  value,\n}: PropsWithChildren<{\n  value: ChatContextValue;\n}>) => (\n  <ChatContext.Provider value={value as unknown as ChatContextValue}>\n    {children}\n  </ChatContext.Provider>\n);\n\nexport const useChatContext = () =>\n  requireContext(useContext(ChatContext), 'useChatContext', 'Chat');\n"],"mappings":";;;;AA+CA,IAAa,cAAc,MAAM,cAA4C,KAAA,CAAS;AAEtF,IAAa,gBAAgB,EAC3B,UACA,YAIA,oBAAC,YAAY,UAAb;CAA6B;CAC1B;AACmB,CAAA;AAGxB,IAAa,uBACX,eAAe,WAAW,WAAW,GAAG,kBAAkB,MAAM"}

package/dist/es/context/ComponentContext.mjs

@@ -6,7 +6,7 @@ var ComponentProvider = ({ children, value }) => /* @__PURE__ */ jsx(ComponentCo
 	value,
 	children
 });
-var useComponentContext = (_componentName) => useContext(ComponentContext);
+var useComponentContext = () => useContext(ComponentContext);
 //#endregion
 export { ComponentContext, ComponentProvider, useComponentContext };