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

package/dist/es/components/TextareaComposer/TextareaComposer.mjs

@@ -0,0 +1,290 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useAriaLiveAnnouncer } from "../Accessibility/useAriaLiveAnnouncer.mjs";
+import { useInteractionAnnouncements } from "../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useCooldownRemaining } from "../MessageComposer/hooks/useCooldownRemaining.mjs";
+import { useMessageComposerCommands } from "../MessageComposer/hooks/useMessageComposerCommands.mjs";
+import { useMessageComposerHasSendableData } from "../MessageComposer/hooks/useMessageComposerHasSendableData.mjs";
+import { useMessageComposerSubmitFn } from "../MessageComposer/hooks/useMessageComposerSubmitFn.mjs";
+import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
+import { SuggestionList, hasEnabledCommandSuggestions } from "./SuggestionList/SuggestionList.mjs";
+import { useTextareaPlaceholder } from "./hooks/useTextareaPlaceholder.mjs";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import Textarea from "react-textarea-autosize";
+//#region src/components/TextareaComposer/TextareaComposer.tsx
+var textComposerStateSelector = (state) => ({
+	selection: state.selection,
+	suggestions: state.suggestions,
+	text: state.text
+});
+var searchSourceStateSelector = (state) => ({
+	isLoadingItems: state.isLoading,
+	items: state.items
+});
+var configStateSelector = (state) => ({ enabled: state.text.enabled });
+var messageComposerStateSelector = (state) => ({ quotedMessage: state.quotedMessage });
+var attachmentManagerStateSelector = (state) => ({ attachments: state.attachments });
+/**
+* isComposing prevents double submissions in Korean and other languages.
+* starting point for a read:
+* https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing
+* In the long term, the fix should happen by handling keypress, but changing this has unknown implications.
+*/
+var defaultShouldSubmit = (event) => event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing;
+var shouldBackspaceExitCommandMode = (text) => text.length === 0;
+/**
+* Announces composer-mode changes (e.g. activating the `/giphy` command) via
+* `useAriaLiveAnnouncer`. The live region itself is provided by the nearest
+* {@link AriaLiveOutlet} – the root outlet mounted at `Chat`, or a modal outlet
+* when the composer is rendered inside an `aria-modal` dialog (assistive
+* technologies suppress live regions outside an active modal subtree, so the
+* modal outlet ensures announcements land inside the active scope).
+*/
+var TextareaComposer = (props) => /* @__PURE__ */ jsx(TextareaComposerWithLiveAnnouncements, { ...props });
+var TextareaComposerWithLiveAnnouncements = ({ className, closeSuggestionsOnClickOutside, containerClassName, listClassName, maxRows: maxRowsProp, minRows: minRowsProp, onBlur, onChange, onKeyDown, onScroll, onSelect, placeholder: placeholderProp, shouldSubmit: shouldSubmitProp, ...restTextareaProps }) => {
+	const { AutocompleteSuggestionList = SuggestionList } = useComponentContext();
+	const { additionalTextareaProps, focus, maxRows: maxRowsContext, minRows: minRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef } = useMessageComposerContext();
+	const cooldownRemaining = useCooldownRemaining();
+	const { t } = useTranslationContext();
+	const placeholder = useTextareaPlaceholder({ placeholder: placeholderProp });
+	const announce = useAriaLiveAnnouncer();
+	const { announceInteraction } = useInteractionAnnouncements();
+	const maxRows = maxRowsProp ?? maxRowsContext ?? 10;
+	const minRows = minRowsProp ?? minRowsContext;
+	const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
+	const messageComposer = useMessageComposerController();
+	const hasSendableData = useMessageComposerHasSendableData();
+	const { textComposer } = messageComposer;
+	const { selection, suggestions, text } = useStateStore(textComposer.state, textComposerStateSelector);
+	const ariaLabel = text ? t("textareaComposer.messageInput.ariaLabel", "Message input") : placeholder;
+	const autosizeRows = !text && minRows == null ? 1 : void 0;
+	const textareaStyle = text ? void 0 : {
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	};
+	const submitMessage = useMessageComposerSubmitFn();
+	const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
+	const { quotedMessage } = useStateStore(messageComposer.state, messageComposerStateSelector);
+	const { attachments } = useStateStore(messageComposer.attachmentManager.state, attachmentManagerStateSelector);
+	const { isLoadingItems, items } = useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};
+	const containerRef = useRef(null);
+	const [focusedItemIndex, setFocusedItemIndex] = useState(0);
+	const [activeOptionFromKeyboard, setActiveOptionFromKeyboard] = useState(false);
+	const listboxId = useStableId();
+	const commands = useMessageComposerCommands();
+	const suggestionsOpen = !!(suggestions && items?.length && hasEnabledCommandSuggestions({
+		commands,
+		type: suggestions?.searchSource.type
+	}));
+	const activeDescendantId = suggestionsOpen && activeOptionFromKeyboard ? `${listboxId}-option-${focusedItemIndex}` : void 0;
+	const [isComposing, setIsComposing] = useState(false);
+	const changeHandler = useCallback((e) => {
+		setActiveOptionFromKeyboard(false);
+		if (onChange) {
+			onChange(e);
+			return;
+		}
+		if (!textareaRef.current) return;
+		textComposer.handleChange({
+			selection: {
+				end: textareaRef.current.selectionEnd,
+				start: textareaRef.current.selectionStart
+			},
+			text: e.target.value
+		});
+	}, [
+		onChange,
+		textComposer,
+		textareaRef
+	]);
+	const onCompositionEnd = useCallback(() => {
+		setIsComposing(false);
+	}, []);
+	const onCompositionStart = useCallback(() => {
+		setIsComposing(true);
+	}, []);
+	const keyDownHandler = useCallback((event) => {
+		if (onKeyDown) {
+			onKeyDown(event);
+			return;
+		}
+		const textareaValue = textareaRef.current?.value ?? event.currentTarget.value;
+		if (textComposer.suggestions && textComposer.suggestions.searchSource.items?.length) {
+			if (event.key === "Escape") return textComposer.closeSuggestions();
+			const loadedItems = textComposer.suggestions.searchSource.items;
+			if (event.key === "Enter") {
+				event.preventDefault();
+				const selectedItem = loadedItems[focusedItemIndex];
+				if (selectedItem) textComposer.handleSelect(selectedItem);
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setActiveOptionFromKeyboard(true);
+				setFocusedItemIndex((prev) => {
+					let nextIndex = prev - 1;
+					if (nextIndex < 0) nextIndex = loadedItems.length - 1;
+					return nextIndex;
+				});
+			}
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setActiveOptionFromKeyboard(true);
+				setFocusedItemIndex((prev) => {
+					let nextIndex = prev + 1;
+					if (nextIndex >= loadedItems.length) nextIndex = 0;
+					return nextIndex;
+				});
+			}
+		} else if (textComposer.command && (event.key === "Escape" || event.key === "Backspace" && shouldBackspaceExitCommandMode(textareaValue))) {
+			event.preventDefault();
+			textComposer.clearCommand();
+		} else if (shouldSubmit(event) && textareaRef.current && hasSendableData) {
+			if (event.key === "Enter") event.preventDefault();
+			submitMessage();
+		}
+	}, [
+		focusedItemIndex,
+		hasSendableData,
+		onKeyDown,
+		shouldSubmit,
+		submitMessage,
+		textComposer,
+		textareaRef
+	]);
+	const scrollHandler = useCallback((event) => {
+		if (onScroll) onScroll(event);
+		else textComposer.closeSuggestions();
+	}, [onScroll, textComposer]);
+	const setSelection = useCallback((e) => {
+		onSelect?.(e);
+		textComposer.setSelection({
+			end: e.target.selectionEnd,
+			start: e.target.selectionStart
+		});
+	}, [onSelect, textComposer]);
+	useEffect(() => {
+		if (textComposer.suggestions) setFocusedItemIndex(0);
+	}, [textComposer.suggestions]);
+	useEffect(() => {
+		const suggestionItems = suggestions?.searchSource.items;
+		if (!suggestionItems?.length) return;
+		setFocusedItemIndex((prev) => prev >= suggestionItems.length ? suggestionItems.length - 1 : prev);
+	}, [suggestions?.searchSource.items]);
+	useEffect(() => {
+		const textareaIsFocused = textareaRef.current?.matches(":focus");
+		if (!textareaRef.current || textareaIsFocused || !focus) return;
+		textareaRef.current.focus();
+	}, [
+		attachments,
+		focus,
+		quotedMessage,
+		textareaRef
+	]);
+	useEffect(() => {
+		const pendingFrames = /* @__PURE__ */ new Set();
+		const unsubscribe = textComposer.state.subscribeWithSelector((state) => ({ commandName: state.command?.name ?? null }), ({ commandName }, previous) => {
+			if (!previous) return;
+			if (!commandName || commandName === previous.commandName) return;
+			if (document.activeElement !== textareaRef.current) return;
+			const frame = window.requestAnimationFrame(() => {
+				pendingFrames.delete(frame);
+				const label = textareaRef.current?.placeholder;
+				if (label) announce(label, { priority: "polite" });
+			});
+			pendingFrames.add(frame);
+		});
+		return () => {
+			unsubscribe();
+			pendingFrames.forEach(window.cancelAnimationFrame);
+		};
+	}, [
+		announce,
+		textComposer.state,
+		textareaRef
+	]);
+	const lastMentionCountRef = useRef(null);
+	useEffect(() => {
+		lastMentionCountRef.current = textComposer.state.getLatestValue().mentionedUsers?.length ?? 0;
+		return textComposer.state.subscribeWithSelector((state) => ({ mentionedUsers: state.mentionedUsers }), ({ mentionedUsers }) => {
+			const previousCount = lastMentionCountRef.current ?? mentionedUsers.length;
+			lastMentionCountRef.current = mentionedUsers.length;
+			if (mentionedUsers.length <= previousCount) return;
+			const addedUser = mentionedUsers[mentionedUsers.length - 1];
+			if (!addedUser) return;
+			announceInteraction("user.selected", { user: addedUser.name ?? addedUser.id });
+		});
+	}, [announceInteraction, textComposer.state]);
+	useLayoutEffect(() => {
+		/**
+		* It is important to perform set text and after that the range
+		* to prevent cursor reset to the end of the textarea if doing it in separate effects.
+		*/
+		const textarea = textareaRef.current;
+		if (!textarea || isComposing) return;
+		/**
+		* The textarea value has to be overridden outside the render cycle so that the events like compositionend can be triggered.
+		* If we have overridden the value during the component rendering, the compositionend event would not be triggered, and
+		* it would not be possible to type composed characters (ô).
+		* On the other hand, just removing the value override via prop (value={text}) would not allow us to change the text based on
+		* middleware results (e.g. replace characters with emojis)
+		*/
+		if (textarea.value !== text) textarea.value = text;
+		const length = textarea.value.length;
+		const start = Math.max(0, Math.min(selection.start, length));
+		const end = Math.max(start, Math.min(selection.end, length));
+		if (textarea.selectionStart === start && textarea.selectionEnd === end) return;
+		textarea.setSelectionRange(start, end, "forward");
+	}, [
+		text,
+		selection.start,
+		selection.end,
+		isComposing,
+		textareaRef
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("rta", "str-chat__textarea", containerClassName, { ["rta--loading"]: isLoadingItems }),
+		ref: containerRef,
+		children: [/* @__PURE__ */ jsx(Textarea, {
+			...additionalTextareaProps,
+			...restTextareaProps,
+			"aria-activedescendant": activeDescendantId,
+			"aria-autocomplete": "list",
+			"aria-controls": suggestionsOpen ? listboxId : void 0,
+			"aria-label": ariaLabel,
+			className: clsx("rta__textarea", "str-chat__textarea__textarea str-chat__message-textarea", className),
+			"data-testid": "message-input",
+			disabled: !enabled || !!cooldownRemaining,
+			maxRows: autosizeRows ?? maxRows,
+			minRows: autosizeRows ?? minRows,
+			onBlur,
+			onChange: changeHandler,
+			onCompositionEnd,
+			onCompositionStart,
+			onKeyDown: keyDownHandler,
+			onPaste,
+			onScroll: scrollHandler,
+			onSelect: setSelection,
+			placeholder,
+			ref: (ref) => {
+				textareaRef.current = ref;
+			},
+			style: textareaStyle
+		}), !isComposing && /* @__PURE__ */ jsx(AutocompleteSuggestionList, {
+			className: listClassName,
+			closeOnClickOutside: closeSuggestionsOnClickOutside,
+			focusedItemIndex,
+			listboxId,
+			setFocusedItemIndex
+		})]
+	});
+};
+//#endregion
+export { TextareaComposer, shouldBackspaceExitCommandMode };
+
+//# sourceMappingURL=TextareaComposer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaComposer.mjs","names":[],"sources":["../../../../src/components/TextareaComposer/TextareaComposer.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, {\n  type ChangeEventHandler,\n  type SyntheticEvent,\n  type TextareaHTMLAttributes,\n  type UIEventHandler,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport Textarea from 'react-textarea-autosize';\nimport { useCooldownRemaining } from '../MessageComposer/hooks/useCooldownRemaining';\nimport { useMessageComposerCommands } from '../MessageComposer/hooks/useMessageComposerCommands';\nimport { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController';\nimport type {\n  AttachmentManagerState,\n  MessageComposerConfig,\n  MessageComposerState,\n  SearchSourceState,\n  TextComposerState,\n} from 'stream-chat';\nimport {\n  useComponentContext,\n  useMessageComposerContext,\n  useTranslationContext,\n} from '../../context';\nimport { useStateStore } from '../../store';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport {\n  SuggestionList as DefaultSuggestionList,\n  hasEnabledCommandSuggestions,\n} from './SuggestionList';\nimport { useTextareaPlaceholder } from './hooks/useTextareaPlaceholder';\nimport { useAriaLiveAnnouncer, useInteractionAnnouncements } from '../Accessibility';\nimport { useMessageComposerHasSendableData } from '../MessageComposer/hooks/useMessageComposerHasSendableData';\nimport { useMessageComposerSubmitFn } from '../MessageComposer/hooks/useMessageComposerSubmitFn';\n\nconst textComposerStateSelector = (state: TextComposerState) => ({\n  selection: state.selection,\n  suggestions: state.suggestions,\n  text: state.text,\n});\n\nconst searchSourceStateSelector = (state: SearchSourceState) => ({\n  isLoadingItems: state.isLoading,\n  items: state.items,\n});\n\nconst configStateSelector = (state: MessageComposerConfig) => ({\n  enabled: state.text.enabled,\n});\n\nconst messageComposerStateSelector = (state: MessageComposerState) => ({\n  quotedMessage: state.quotedMessage,\n});\n\nconst attachmentManagerStateSelector = (state: AttachmentManagerState) => ({\n  attachments: state.attachments,\n});\n\n/**\n * isComposing prevents double submissions in Korean and other languages.\n * starting point for a read:\n * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing\n * In the long term, the fix should happen by handling keypress, but changing this has unknown implications.\n */\nconst defaultShouldSubmit = (event: React.KeyboardEvent<HTMLTextAreaElement>) =>\n  event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing;\n\nexport const shouldBackspaceExitCommandMode = (text: string) => text.length === 0;\n\nexport type TextareaComposerProps = Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'style' | 'defaultValue' | 'disabled' | 'value'\n> & {\n  closeSuggestionsOnClickOutside?: boolean;\n  containerClassName?: string;\n  listClassName?: string;\n  maxRows?: number;\n  minRows?: number;\n  shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;\n};\n\n/**\n * Announces composer-mode changes (e.g. activating the `/giphy` command) via\n * `useAriaLiveAnnouncer`. The live region itself is provided by the nearest\n * {@link AriaLiveOutlet} – the root outlet mounted at `Chat`, or a modal outlet\n * when the composer is rendered inside an `aria-modal` dialog (assistive\n * technologies suppress live regions outside an active modal subtree, so the\n * modal outlet ensures announcements land inside the active scope).\n */\nexport const TextareaComposer = (props: TextareaComposerProps) => (\n  <TextareaComposerWithLiveAnnouncements {...props} />\n);\n\nconst TextareaComposerWithLiveAnnouncements = ({\n  className,\n  closeSuggestionsOnClickOutside,\n  containerClassName,\n  listClassName,\n  maxRows: maxRowsProp,\n  minRows: minRowsProp,\n  onBlur,\n  onChange,\n  onKeyDown,\n  onScroll,\n  onSelect,\n  placeholder: placeholderProp,\n  shouldSubmit: shouldSubmitProp,\n  ...restTextareaProps\n}: TextareaComposerProps) => {\n  const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();\n  const {\n    additionalTextareaProps,\n    focus,\n    maxRows: maxRowsContext,\n    minRows: minRowsContext,\n    onPaste,\n    shouldSubmit: shouldSubmitContext,\n    textareaRef,\n  } = useMessageComposerContext();\n  const cooldownRemaining = useCooldownRemaining();\n\n  const { t } = useTranslationContext();\n  const placeholder = useTextareaPlaceholder({ placeholder: placeholderProp });\n  const announce = useAriaLiveAnnouncer();\n  const { announceInteraction } = useInteractionAnnouncements();\n\n  const maxRows = maxRowsProp ?? maxRowsContext ?? 10;\n  const minRows = minRowsProp ?? minRowsContext;\n\n  const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;\n\n  const messageComposer = useMessageComposerController();\n  // Read through the hook rather than off the composer directly, so Enter-to-submit stays in\n  // agreement with the send button.\n  const hasSendableData = useMessageComposerHasSendableData();\n  const { textComposer } = messageComposer;\n  const { selection, suggestions, text } = useStateStore(\n    textComposer.state,\n    textComposerStateSelector,\n  );\n  // Explicit, stable accessible name for the textarea. Naming the field explicitly\n  // prevents it from inheriting an unrelated name from an ancestor (e.g. the\n  // \"Channels, tab panel\" of the ChatView tabpanel) via accessible-name computation.\n  // While the field is empty we expose the visible placeholder as the name so the\n  // announced name matches what the user sees. Once the field has content we switch\n  // to a stable label instead of the placeholder, which may be a command-specific\n  // template (e.g. mention/command args) that would otherwise be re-announced as a\n  // stale name even though the field already holds real content.\n  const ariaLabel = text\n    ? t('textareaComposer.messageInput.ariaLabel', 'Message input')\n    : placeholder;\n\n  // react-textarea-autosize can measure placeholder content as multi-line in narrow layouts,\n  // producing an inflated initial height (e.g. 2 rows) before the user types.\n  // Clamp to a single row only while empty unless the integrator explicitly set minRows.\n  const autosizeRows = !text && minRows == null ? 1 : undefined;\n  const textareaStyle = text\n    ? undefined\n    : ({\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap',\n      } satisfies React.CSSProperties);\n  const submitMessage = useMessageComposerSubmitFn();\n\n  const { enabled } = useStateStore(messageComposer.configState, configStateSelector);\n  const { quotedMessage } = useStateStore(\n    messageComposer.state,\n    messageComposerStateSelector,\n  );\n  const { attachments } = useStateStore(\n    messageComposer.attachmentManager.state,\n    attachmentManagerStateSelector,\n  );\n\n  const { isLoadingItems, items } =\n    useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ?? {};\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [focusedItemIndex, setFocusedItemIndex] = useState(0);\n  // Whether the active option was reached via keyboard navigation (Arrow keys) within the\n  // current suggestion session. Filtering resets `focusedItemIndex` to 0 on every keystroke,\n  // so if we always exposed `aria-activedescendant` the screen reader would re-read the first\n  // option on each character typed. We therefore expose the active option to AT ONLY after the\n  // user actually navigates, and clear it again as soon as they type (see `changeHandler`).\n  // While typing, the debounced polite count (\"N suggestions\") conveys that results changed.\n  const [activeOptionFromKeyboard, setActiveOptionFromKeyboard] = useState(false);\n\n  // Autocomplete wiring. The suggestion list is exposed as a `listbox` whose active\n  // `option` this field tracks. We deliberately do NOT set `role=\"combobox\"`/`aria-expanded`\n  // here: ARIA-in-HTML disallows the `combobox` role on a multiline `<textarea>` (and\n  // `aria-expanded` is not a supported attribute on the implicit `textbox` role), so axe\n  // rejects them. Instead we use the `aria-activedescendant` autocomplete pattern that IS\n  // valid on a textbox — `aria-autocomplete=\"list\"` + `aria-controls` → the listbox +\n  // `aria-activedescendant` → the active option — which screen readers voice on navigation.\n  //\n  // `aria-controls` is set whenever the list is open (so the listbox is discoverable) but\n  // `aria-activedescendant` is set only once the user has navigated with the keyboard — so the\n  // SR announces an option on Arrow nav, not the auto-reset first option on every keystroke.\n  // Both never dangle: \"open\" mirrors the keyboard-navigation gate below (`suggestions` present\n  // + at least one loaded item), which is also what `SuggestionList` renders on. The shared\n  // `listboxId` is owned here because the relationship attributes live on the textarea; it is\n  // passed down to the list, which derives per-option ids as `{listboxId}-option-{index}`.\n  const listboxId = useStableId();\n  const commands = useMessageComposerCommands();\n  const suggestionsOpen = !!(\n    suggestions &&\n    items?.length &&\n    hasEnabledCommandSuggestions({ commands, type: suggestions?.searchSource.type })\n  );\n  const activeDescendantId =\n    suggestionsOpen && activeOptionFromKeyboard\n      ? `${listboxId}-option-${focusedItemIndex}`\n      : undefined;\n\n  const [isComposing, setIsComposing] = useState(false);\n\n  const changeHandler: ChangeEventHandler<HTMLTextAreaElement> = useCallback(\n    (e) => {\n      // Typing re-filters the list and resets the highlight to the first item; stop exposing\n      // the active option to AT until the user navigates again, so the SR does not re-read the\n      // first option on every keystroke.\n      setActiveOptionFromKeyboard(false);\n      if (onChange) {\n        onChange(e);\n        return;\n      }\n      if (!textareaRef.current) return;\n      textComposer.handleChange({\n        selection: {\n          end: textareaRef.current.selectionEnd,\n          start: textareaRef.current.selectionStart,\n        },\n        text: e.target.value,\n      });\n    },\n    [onChange, textComposer, textareaRef],\n  );\n\n  const onCompositionEnd = useCallback(() => {\n    setIsComposing(false);\n  }, []);\n\n  const onCompositionStart = useCallback(() => {\n    setIsComposing(true);\n  }, []);\n\n  const keyDownHandler = useCallback(\n    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n      if (onKeyDown) {\n        onKeyDown(event);\n        return;\n      }\n\n      // use the textarea value directly as the composer state is a step behind\n      const textareaValue = textareaRef.current?.value ?? event.currentTarget.value;\n\n      if (\n        textComposer.suggestions &&\n        textComposer.suggestions.searchSource.items?.length\n      ) {\n        if (event.key === 'Escape') return textComposer.closeSuggestions();\n        // The list renders `searchSource.items` in the SDK's own order (no client re-sort), so\n        // `focusedItemIndex` — which drives `aria-activedescendant` — indexes the same array here;\n        // the option the screen reader announces is the one Enter inserts.\n        const loadedItems = textComposer.suggestions.searchSource.items;\n        if (event.key === 'Enter') {\n          event.preventDefault();\n          const selectedItem = loadedItems[focusedItemIndex];\n          if (selectedItem) {\n            textComposer.handleSelect(selectedItem);\n          }\n        }\n        if (event.key === 'ArrowUp') {\n          event.preventDefault();\n          setActiveOptionFromKeyboard(true);\n          setFocusedItemIndex((prev) => {\n            let nextIndex = prev - 1;\n            if (nextIndex < 0) {\n              nextIndex = loadedItems.length - 1;\n            }\n            return nextIndex;\n          });\n        }\n        if (event.key === 'ArrowDown') {\n          event.preventDefault();\n          setActiveOptionFromKeyboard(true);\n          setFocusedItemIndex((prev) => {\n            let nextIndex = prev + 1;\n            if (nextIndex >= loadedItems.length) {\n              nextIndex = 0;\n            }\n\n            return nextIndex;\n          });\n        }\n      } else if (\n        textComposer.command &&\n        (event.key === 'Escape' ||\n          (event.key === 'Backspace' && shouldBackspaceExitCommandMode(textareaValue)))\n      ) {\n        event.preventDefault();\n        textComposer.clearCommand();\n      } else if (shouldSubmit(event) && textareaRef.current && hasSendableData) {\n        if (event.key === 'Enter') {\n          // prevent adding newline when submitting a message with\n          event.preventDefault();\n        }\n        submitMessage();\n      }\n    },\n    [\n      focusedItemIndex,\n      hasSendableData,\n      onKeyDown,\n      shouldSubmit,\n      submitMessage,\n      textComposer,\n      textareaRef,\n    ],\n  );\n\n  const scrollHandler: UIEventHandler<HTMLTextAreaElement> = useCallback(\n    (event) => {\n      if (onScroll) {\n        onScroll(event);\n      } else {\n        textComposer.closeSuggestions();\n      }\n    },\n    [onScroll, textComposer],\n  );\n\n  const setSelection = useCallback(\n    (e: SyntheticEvent<HTMLTextAreaElement>) => {\n      onSelect?.(e);\n      textComposer.setSelection({\n        end: (e.target as HTMLTextAreaElement).selectionEnd,\n        start: (e.target as HTMLTextAreaElement).selectionStart,\n      });\n    },\n    [onSelect, textComposer],\n  );\n\n  useEffect(() => {\n    if (textComposer.suggestions) {\n      setFocusedItemIndex(0);\n    }\n  }, [textComposer.suggestions]);\n\n  useEffect(() => {\n    const suggestionItems = suggestions?.searchSource.items;\n    if (!suggestionItems?.length) return;\n\n    setFocusedItemIndex((prev) =>\n      prev >= suggestionItems.length ? suggestionItems.length - 1 : prev,\n    );\n  }, [suggestions?.searchSource.items]);\n\n  useEffect(() => {\n    const textareaIsFocused = textareaRef.current?.matches(':focus');\n    if (!textareaRef.current || textareaIsFocused || !focus) return;\n    textareaRef.current.focus();\n  }, [attachments, focus, quotedMessage, textareaRef]);\n\n  // Announce textarea-mode changes (e.g. activating the `/giphy` command) over\n  // the polite live region when the textarea is already focused at the moment\n  // the command activates.\n  //\n  // When focus is elsewhere (e.g. on a command menu item or a suggestion list\n  // item that calls `textareaRef.current.focus()` right after selecting the\n  // command), the subsequent focus shift to the textarea is what causes\n  // assistive tech to re-announce the field with its new accessible name –\n  // announcing here too would duplicate the message.\n  //\n  // We subscribe to the state store synchronously rather than via\n  // `useStateStore` + `useEffect` so that the `document.activeElement` check\n  // runs before any `focus()` call that follows `textComposer.handleSelect`\n  // inside the same event handler (e.g. mouse-click on a suggestion item).\n  //\n  // The announcement itself is deferred to `requestAnimationFrame` so the\n  // textarea DOM node already reflects the command-specific placeholder /\n  // `aria-label` produced by the React render that follows this state change.\n  useEffect(() => {\n    const pendingFrames = new Set<number>();\n    const unsubscribe = textComposer.state.subscribeWithSelector(\n      (state) => ({ commandName: state.command?.name ?? null }),\n      ({ commandName }, previous) => {\n        if (!previous) return;\n        if (!commandName || commandName === previous.commandName) return;\n        if (document.activeElement !== textareaRef.current) return;\n\n        const frame = window.requestAnimationFrame(() => {\n          pendingFrames.delete(frame);\n          const label = textareaRef.current?.placeholder;\n          if (label) announce(label, { priority: 'polite' });\n        });\n        pendingFrames.add(frame);\n      },\n    );\n    return () => {\n      unsubscribe();\n      pendingFrames.forEach(window.cancelAnimationFrame);\n    };\n  }, [announce, textComposer.state, textareaRef]);\n\n  // Announce a one-shot confirmation when a user is picked from the @-mention\n  // autocomplete. Fire only when a *new* user is appended, so unrelated state\n  // changes (text edits, command activation, removing a mention) do not re-trigger.\n  //\n  // Dedupe against a component-instance ref rather than `subscribeWithSelector`'s\n  // per-call `previous`: the listener can be invoked more than once for a single\n  // selection, and `previous` is per-invocation, so two calls both see growth and\n  // announce twice. The shared ref makes the second call observe the already-updated\n  // count and skip — at most one announcement per selection.\n  const lastMentionCountRef = useRef<number | null>(null);\n  useEffect(() => {\n    lastMentionCountRef.current =\n      textComposer.state.getLatestValue().mentionedUsers?.length ?? 0;\n    const unsubscribe = textComposer.state.subscribeWithSelector(\n      (state) => ({ mentionedUsers: state.mentionedUsers }),\n      ({ mentionedUsers }) => {\n        const previousCount = lastMentionCountRef.current ?? mentionedUsers.length;\n        lastMentionCountRef.current = mentionedUsers.length;\n        if (mentionedUsers.length <= previousCount) return;\n        const addedUser = mentionedUsers[mentionedUsers.length - 1];\n        if (!addedUser) return;\n        announceInteraction('user.selected', { user: addedUser.name ?? addedUser.id });\n      },\n    );\n    return unsubscribe;\n  }, [announceInteraction, textComposer.state]);\n\n  useLayoutEffect(() => {\n    /**\n     * It is important to perform set text and after that the range\n     * to prevent cursor reset to the end of the textarea if doing it in separate effects.\n     */\n    const textarea = textareaRef.current;\n    if (!textarea || isComposing) return;\n\n    /**\n     * The textarea value has to be overridden outside the render cycle so that the events like compositionend can be triggered.\n     * If we have overridden the value during the component rendering, the compositionend event would not be triggered, and\n     * it would not be possible to type composed characters (ô).\n     * On the other hand, just removing the value override via prop (value={text}) would not allow us to change the text based on\n     * middleware results (e.g. replace characters with emojis)\n     */\n    if (textarea.value !== text) {\n      textarea.value = text;\n    }\n\n    const length = textarea.value.length;\n    const start = Math.max(0, Math.min(selection.start, length));\n    const end = Math.max(start, Math.min(selection.end, length));\n\n    if (textarea.selectionStart === start && textarea.selectionEnd === end) return;\n\n    textarea.setSelectionRange(start, end, 'forward');\n  }, [text, selection.start, selection.end, isComposing, textareaRef]);\n\n  return (\n    <div\n      className={clsx('rta', 'str-chat__textarea', containerClassName, {\n        ['rta--loading']: isLoadingItems,\n      })}\n      ref={containerRef}\n    >\n      <Textarea\n        {...{ ...additionalTextareaProps, ...restTextareaProps }}\n        aria-activedescendant={activeDescendantId}\n        aria-autocomplete='list'\n        aria-controls={suggestionsOpen ? listboxId : undefined}\n        aria-label={ariaLabel}\n        className={clsx(\n          'rta__textarea',\n          'str-chat__textarea__textarea str-chat__message-textarea',\n          className,\n        )}\n        data-testid='message-input'\n        disabled={!enabled || !!cooldownRemaining}\n        maxRows={autosizeRows ?? maxRows}\n        minRows={autosizeRows ?? minRows}\n        onBlur={onBlur}\n        onChange={changeHandler}\n        onCompositionEnd={onCompositionEnd}\n        onCompositionStart={onCompositionStart}\n        onKeyDown={keyDownHandler}\n        onPaste={onPaste}\n        onScroll={scrollHandler}\n        onSelect={setSelection}\n        placeholder={placeholder}\n        ref={(ref) => {\n          textareaRef.current = ref;\n        }}\n        style={textareaStyle}\n      />\n      {/* todo: X document the layout change for the accessibility purpose (tabIndex) */}\n      {!isComposing && (\n        <AutocompleteSuggestionList\n          className={listClassName}\n          closeOnClickOutside={closeSuggestionsOnClickOutside}\n          focusedItemIndex={focusedItemIndex}\n          listboxId={listboxId}\n          setFocusedItemIndex={setFocusedItemIndex}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/components/TextareaComposer/hooks/useTextareaPlaceholder.mjs

@@ -0,0 +1,31 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { asDynamicKey } from "../../../i18n/utils.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.mjs";
+import { useCooldownRemaining } from "../../MessageComposer/hooks/useCooldownRemaining.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useMemo } from "react";
+//#region src/components/TextareaComposer/hooks/useTextareaPlaceholder.ts
+var textComposerStateSelector = ({ command }) => ({ command });
+var useTextareaPlaceholder = ({ placeholder } = {}) => {
+	const { t } = useTranslationContext();
+	const { additionalTextareaProps } = useMessageComposerContext();
+	const cooldownRemaining = useCooldownRemaining();
+	const { command } = useStateStore(useMessageComposerController().textComposer.state, textComposerStateSelector);
+	const knownArgsTranslations = useMemo(() => ({
+		ban: t("command.ban.args", "[@username] [text]"),
+		giphy: t("command.giphy.args", "[text]"),
+		mute: t("command.mute.args", "[@username]"),
+		unban: t("command.unban.args", "[@username]"),
+		unmute: t("command.unmute.args", "[@username]")
+	}), [t]);
+	const commandArgs = command?.args && (knownArgsTranslations[command.name ?? ""] ?? t(asDynamicKey(command.args)));
+	const commandPlaceholder = command?.name === "giphy" ? t("textareaComposer.textareaPlaceholder.searchGiFs.label", "Search GIFs") : commandArgs ?? void 0;
+	const defaultPlaceholder = placeholder ?? additionalTextareaProps?.placeholder ?? t("textareaComposer.textareaPlaceholder.sendMessage.label", "Send a message");
+	if (cooldownRemaining) return t("textareaComposer.textareaPlaceholder.slowModeWaitS.label", "Slow mode, wait {{ seconds }}s...", { seconds: cooldownRemaining });
+	return commandPlaceholder ?? defaultPlaceholder;
+};
+//#endregion
+export { useTextareaPlaceholder };
+
+//# sourceMappingURL=useTextareaPlaceholder.mjs.map

package/dist/es/components/TextareaComposer/hooks/useTextareaPlaceholder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextareaPlaceholder.mjs","names":[],"sources":["../../../../../src/components/TextareaComposer/hooks/useTextareaPlaceholder.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextComposerState } from 'stream-chat';\nimport { useMessageComposerContext, useTranslationContext } from '../../../context';\nimport { useStateStore } from '../../../store';\nimport { useCooldownRemaining } from '../../MessageComposer/hooks/useCooldownRemaining';\nimport { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController';\nimport { asDynamicKey } from '../../../i18n/utils';\n\ntype UseTextareaPlaceholderProps = {\n  placeholder?: string;\n};\n\nconst textComposerStateSelector = ({ command }: TextComposerState) => ({ command });\n\nexport const useTextareaPlaceholder = ({\n  placeholder,\n}: UseTextareaPlaceholderProps = {}) => {\n  const { t } = useTranslationContext();\n  const { additionalTextareaProps } = useMessageComposerContext();\n  const cooldownRemaining = useCooldownRemaining();\n  const messageComposer = useMessageComposerController();\n  const { command } = useStateStore(\n    messageComposer.textComposer.state,\n    textComposerStateSelector,\n  );\n\n  const knownArgsTranslations = useMemo<Record<string, string>>(\n    () => ({\n      ban: t('command.ban.args', '[@username] [text]'),\n      giphy: t('command.giphy.args', '[text]'),\n      mute: t('command.mute.args', '[@username]'),\n      unban: t('command.unban.args', '[@username]'),\n      unmute: t('command.unmute.args', '[@username]'),\n    }),\n    [t],\n  );\n\n  const commandArgs =\n    command?.args &&\n    (knownArgsTranslations[command.name ?? ''] ?? t(asDynamicKey(command.args)));\n  const commandPlaceholder =\n    command?.name === 'giphy'\n      ? t('textareaComposer.textareaPlaceholder.searchGiFs.label', 'Search GIFs')\n      : (commandArgs ?? undefined);\n\n  const defaultPlaceholder =\n    placeholder ??\n    additionalTextareaProps?.placeholder ??\n    t('textareaComposer.textareaPlaceholder.sendMessage.label', 'Send a message');\n\n  if (cooldownRemaining) {\n    return t(\n      'textareaComposer.textareaPlaceholder.slowModeWaitS.label',\n      'Slow mode, wait {{ seconds }}s...',\n      { seconds: cooldownRemaining },\n    );\n  }\n\n  return commandPlaceholder ?? defaultPlaceholder;\n};\n"],"mappings":";;;;;;;;AAYA,IAAM,6BAA6B,EAAE,eAAkC,EAAE,QAAQ;AAEjF,IAAa,0BAA0B,EACrC,gBAC+B,CAAC,MAAM;CACtC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,4BAA4B,0BAA0B;CAC9D,MAAM,oBAAoB,qBAAqB;CAE/C,MAAM,EAAE,YAAY,cADI,6BAEtB,CAAA,CAAgB,aAAa,OAC7B,yBACF;CAEA,MAAM,wBAAwB,eACrB;EACL,KAAK,EAAE,oBAAoB,oBAAoB;EAC/C,OAAO,EAAE,sBAAsB,QAAQ;EACvC,MAAM,EAAE,qBAAqB,aAAa;EAC1C,OAAO,EAAE,sBAAsB,aAAa;EAC5C,QAAQ,EAAE,uBAAuB,aAAa;CAChD,IACA,CAAC,CAAC,CACJ;CAEA,MAAM,cACJ,SAAS,SACR,sBAAsB,QAAQ,QAAQ,OAAO,EAAE,aAAa,QAAQ,IAAI,CAAC;CAC5E,MAAM,qBACJ,SAAS,SAAS,UACd,EAAE,yDAAyD,aAAa,IACvE,eAAe,KAAA;CAEtB,MAAM,qBACJ,eACA,yBAAyB,eACzB,EAAE,0DAA0D,gBAAgB;CAE9E,IAAI,mBACF,OAAO,EACL,4DACA,qCACA,EAAE,SAAS,kBAAkB,CAC/B;CAGF,OAAO,sBAAsB;AAC/B"}

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

@@ -0,0 +1,103 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { ThreadProvider } from "../Threads/ThreadContext.mjs";
+import { WithAudioPlayback } from "../AudioPlayback/WithAudioPlayback.mjs";
+import { useCallback, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Thread/Thread.tsx
+var repliesStateSelector = ({ replies }) => ({ repliesEnabled: replies.enabled });
+var selector = ({ isStateStale, parentMessage, replyCount }) => ({
+	hasServerSideThread: replyCount > 0,
+	isStateStale,
+	parentMessage
+});
+var messagePaginatorSelector = ({ isLoading, items, lastQueryError }) => ({
+	hasLoadedReplies: items !== void 0,
+	isLoading,
+	lastQueryError
+});
+/**
+* The container for a thread panel: it provides the thread to its subtree, loads it, registers it
+* with the `ThreadManager`, scopes audio playback to it, and renders whatever you compose inside.
+*
+* It renders no UI of its own, the way `Channel` does not -- put the parts you want in as
+* children, and their own props say how they behave:
+*
+* ```tsx
+* <Thread thread={thread}>
+*   <ThreadHeader />
+*   <MessageList withDateSeparator={false} />
+*   <MessageComposer focus />
+* </Thread>
+* ```
+*
+* The parent message is not composed here: a message list renders it above its replies (see
+* `useThreadHead`), because it has to sit inside the list's scroll container.
+*
+* One component: the wrapper that used to sit here existed only to key this subtree on the thread,
+* which rebuilt everything below on a thread switch -- including parts that hold no per-thread
+* state. The reset now lives in the message list, which is what actually carries state scoped to
+* the replies it shows.
+*/
+var Thread = ({ children, thread }) => {
+	const { client, customClasses } = useChatContext();
+	const { repliesEnabled } = useStateStore(thread.channel.configState, repliesStateSelector);
+	const { hasServerSideThread, isStateStale, parentMessage } = useStateStore(thread.state, selector);
+	const { hasLoadedReplies, isLoading, lastQueryError } = useStateStore(thread.messagePaginator.state, messagePaginatorSelector);
+	const isThreadManagedSelector = useCallback(({ threads }) => ({ isThreadManaged: threads.some((managedThread) => managedThread.id === thread.id) }), [thread.id]);
+	const { isThreadManaged } = useStateStore(client.threads.state, isThreadManagedSelector);
+	useEffect(() => {
+		if (isThreadManaged) return;
+		if (!hasServerSideThread) return;
+		if (hasLoadedReplies || isLoading) return;
+		thread.reload();
+	}, [
+		hasLoadedReplies,
+		hasServerSideThread,
+		isLoading,
+		isThreadManaged,
+		thread
+	]);
+	useEffect(() => {
+		if (isStateStale && hasServerSideThread) thread.reload();
+	}, [
+		hasServerSideThread,
+		isStateStale,
+		thread
+	]);
+	useEffect(() => {
+		if (isThreadManaged) return;
+		if (isLoading) return;
+		if (lastQueryError) return;
+		if (!hasLoadedReplies) return;
+		client.threads.state.next((current) => {
+			if (current.threads.some((managedThread) => managedThread.id === thread.id)) return current;
+			return {
+				...current,
+				threads: [thread, ...current.threads]
+			};
+		});
+	}, [
+		client.threads.state,
+		hasLoadedReplies,
+		isLoading,
+		isThreadManaged,
+		lastQueryError,
+		thread
+	]);
+	if (!parentMessage || repliesEnabled === false) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: customClasses?.thread || "str-chat__thread-container str-chat__thread",
+		children: /* @__PURE__ */ jsx(ThreadProvider, {
+			thread,
+			children: /* @__PURE__ */ jsx(WithAudioPlayback, {
+				playbackScope: thread,
+				children
+			})
+		})
+	});
+};
+//#endregion
+export { Thread };
+
+//# sourceMappingURL=Thread.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Thread.mjs","names":[],"sources":["../../../../src/components/Thread/Thread.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport { WithAudioPlayback } from '../AudioPlayback';\n\nimport { useChatContext } from '../../context';\nimport { ThreadProvider } from '../Threads';\nimport { useStateStore } from '../../store';\n\nimport type {\n  LocalMessage,\n  Thread as StreamThread,\n  ThreadManagerState,\n  ThreadState,\n} from 'stream-chat';\nimport type { ChannelConfig } from 'stream-chat';\n\nconst repliesStateSelector = ({ replies }: ChannelConfig) => ({\n  repliesEnabled: replies.enabled,\n});\n\nexport type ThreadProps = PropsWithChildren<{\n  /**\n   * The thread to render. Initialize it before passing it in; `Thread` does not query for it --\n   * it loads the replies of a thread the `ThreadManager` does not already hold.\n   */\n  thread: StreamThread;\n}>;\n\nconst selector = ({ isStateStale, parentMessage, replyCount }: ThreadState) => ({\n  // A thread exists server-side only once its parent has a reply. Selected as a boolean so the\n  // panel does not re-render on every incoming reply -- only on the transition that matters.\n  hasServerSideThread: replyCount > 0,\n  isStateStale,\n  parentMessage,\n});\n\n// Same reasoning: the effects below only ask whether the replies have loaded, never what they are.\nconst messagePaginatorSelector = ({\n  isLoading,\n  items,\n  lastQueryError,\n}: {\n  isLoading: boolean;\n  items: LocalMessage[] | undefined;\n  lastQueryError?: Error;\n}) => ({\n  hasLoadedReplies: items !== undefined,\n  isLoading,\n  lastQueryError,\n});\n\n/**\n * The container for a thread panel: it provides the thread to its subtree, loads it, registers it\n * with the `ThreadManager`, scopes audio playback to it, and renders whatever you compose inside.\n *\n * It renders no UI of its own, the way `Channel` does not -- put the parts you want in as\n * children, and their own props say how they behave:\n *\n * ```tsx\n * <Thread thread={thread}>\n *   <ThreadHeader />\n *   <MessageList withDateSeparator={false} />\n *   <MessageComposer focus />\n * </Thread>\n * ```\n *\n * The parent message is not composed here: a message list renders it above its replies (see\n * `useThreadHead`), because it has to sit inside the list's scroll container.\n *\n * One component: the wrapper that used to sit here existed only to key this subtree on the thread,\n * which rebuilt everything below on a thread switch -- including parts that hold no per-thread\n * state. The reset now lives in the message list, which is what actually carries state scoped to\n * the replies it shows.\n */\nexport const Thread = ({ children, thread }: ThreadProps) => {\n  const { client, customClasses } = useChatContext();\n  const { repliesEnabled } = useStateStore(\n    thread.channel.configState,\n    repliesStateSelector,\n  );\n  // `hasServerSideThread`: reloading a thread whose parent has no reply yet can only 404 --\n  // `Thread.reload()` swallows that and returns without state.\n  //\n  // Deferred, not cancelled: only a successful reload clears `isStateStale`, so a thread that\n  // stays stale reloads via the effect below as soon as the parent reports its first reply -- the\n  // same moment the rest of the UI learns about replies missed while unwatched.\n  const { hasServerSideThread, isStateStale, parentMessage } = useStateStore(\n    thread.state,\n    selector,\n  );\n  const { hasLoadedReplies, isLoading, lastQueryError } = useStateStore(\n    thread.messagePaginator.state,\n    messagePaginatorSelector,\n  );\n\n  const isThreadManagedSelector = useCallback(\n    ({ threads }: ThreadManagerState) => ({\n      isThreadManaged: threads.some((managedThread) => managedThread.id === thread.id),\n    }),\n    [thread.id],\n  );\n  const { isThreadManaged } = useStateStore(\n    client.threads.state,\n    isThreadManagedSelector,\n  );\n\n  // Only an unmanaged thread is loaded here. The `ThreadManager` already loads and refreshes the\n  // ones it holds; an instance from `getThreadAndHydrate()` is registered nowhere, so it has no\n  // other owner.\n  useEffect(() => {\n    if (isThreadManaged) return;\n    if (!hasServerSideThread) return;\n    if (hasLoadedReplies || isLoading) return;\n    void thread.reload();\n  }, [hasLoadedReplies, hasServerSideThread, isLoading, isThreadManaged, thread]);\n\n  // Deliberately a separate effect rather than a branch of the one above: catching up a stale\n  // thread depends on `isStateStale` alone, so it fires once per staleness episode. Merged in, it\n  // would also re-run whenever the load branch's inputs change -- registering the thread flips\n  // `isThreadManaged`, which would request a second reload while the first is still in flight.\n  useEffect(() => {\n    if (isStateStale && hasServerSideThread) {\n      void thread.reload();\n    }\n  }, [hasServerSideThread, isStateStale, thread]);\n\n  useEffect(() => {\n    if (isThreadManaged) return;\n    if (isLoading) return;\n    if (lastQueryError) return;\n    if (!hasLoadedReplies) return;\n\n    client.threads.state.next((current) => {\n      if (current.threads.some((managedThread) => managedThread.id === thread.id)) {\n        return current;\n      }\n      return {\n        ...current,\n        threads: [thread, ...current.threads],\n      };\n    });\n  }, [\n    client.threads.state,\n    hasLoadedReplies,\n    isLoading,\n    isThreadManaged,\n    lastQueryError,\n    thread,\n  ]);\n\n  if (!parentMessage || repliesEnabled === false) return null;\n\n  // The thread owns its audio-player pool (rather than inheriting one from an ambient <Channel>)\n  // because a slot-bound Thread is a sibling of the channel, not nested inside it. Scoping it here\n  // means thread audio stops when the thread closes.\n  return (\n    <div\n      className={customClasses?.thread || 'str-chat__thread-container str-chat__thread'}\n    >\n      <ThreadProvider thread={thread}>\n        <WithAudioPlayback playbackScope={thread}>{children}</WithAudioPlayback>\n      </ThreadProvider>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAiBA,IAAM,wBAAwB,EAAE,eAA8B,EAC5D,gBAAgB,QAAQ,QAC1B;AAUA,IAAM,YAAY,EAAE,cAAc,eAAe,kBAA+B;CAG9E,qBAAqB,aAAa;CAClC;CACA;AACF;AAGA,IAAM,4BAA4B,EAChC,WACA,OACA,sBAKK;CACL,kBAAkB,UAAU,KAAA;CAC5B;CACA;AACF;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,UAAU,EAAE,UAAU,aAA0B;CAC3D,MAAM,EAAE,QAAQ,kBAAkB,eAAe;CACjD,MAAM,EAAE,mBAAmB,cACzB,OAAO,QAAQ,aACf,oBACF;CAOA,MAAM,EAAE,qBAAqB,cAAc,kBAAkB,cAC3D,OAAO,OACP,QACF;CACA,MAAM,EAAE,kBAAkB,WAAW,mBAAmB,cACtD,OAAO,iBAAiB,OACxB,wBACF;CAEA,MAAM,0BAA0B,aAC7B,EAAE,eAAmC,EACpC,iBAAiB,QAAQ,MAAM,kBAAkB,cAAc,OAAO,OAAO,EAAE,EACjF,IACA,CAAC,OAAO,EAAE,CACZ;CACA,MAAM,EAAE,oBAAoB,cAC1B,OAAO,QAAQ,OACf,uBACF;CAKA,gBAAgB;EACd,IAAI,iBAAiB;EACrB,IAAI,CAAC,qBAAqB;EAC1B,IAAI,oBAAoB,WAAW;EACnC,OAAY,OAAO;CACrB,GAAG;EAAC;EAAkB;EAAqB;EAAW;EAAiB;CAAM,CAAC;CAM9E,gBAAgB;EACd,IAAI,gBAAgB,qBAClB,OAAY,OAAO;CAEvB,GAAG;EAAC;EAAqB;EAAc;CAAM,CAAC;CAE9C,gBAAgB;EACd,IAAI,iBAAiB;EACrB,IAAI,WAAW;EACf,IAAI,gBAAgB;EACpB,IAAI,CAAC,kBAAkB;EAEvB,OAAO,QAAQ,MAAM,MAAM,YAAY;GACrC,IAAI,QAAQ,QAAQ,MAAM,kBAAkB,cAAc,OAAO,OAAO,EAAE,GACxE,OAAO;GAET,OAAO;IACL,GAAG;IACH,SAAS,CAAC,QAAQ,GAAG,QAAQ,OAAO;GACtC;EACF,CAAC;CACH,GAAG;EACD,OAAO,QAAQ;EACf;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,iBAAiB,mBAAmB,OAAO,OAAO;CAKvD,OACE,oBAAC,OAAD;EACE,WAAW,eAAe,UAAU;YAEpC,oBAAC,gBAAD;GAAwB;aACtB,oBAAC,mBAAD;IAAmB,eAAe;IAAS;GAA4B,CAAA;EACzD,CAAA;CACb,CAAA;AAET"}

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

@@ -0,0 +1,27 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
+import { ThreadStart } from "./ThreadStart.mjs";
+import { Message } from "../Message/Message.mjs";
+import "react";
+import { convertTimestampToDate } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Thread/ThreadHead.tsx
+var ThreadHead = (props) => {
+	const { ThreadStart: ThreadStart$1 = ThreadStart } = useComponentContext();
+	const parentCreatedAt = convertTimestampToDate(props.message.created_at);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__parent-message-li",
+		children: [
+			parentCreatedAt ? /* @__PURE__ */ jsx(DateSeparator, { date: parentCreatedAt }) : null,
+			/* @__PURE__ */ jsx(Message, {
+				initialMessage: true,
+				...props
+			}),
+			/* @__PURE__ */ jsx(ThreadStart$1, {})
+		]
+	});
+};
+//#endregion
+export { ThreadHead };
+
+//# sourceMappingURL=ThreadHead.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadHead.mjs","names":[],"sources":["../../../../src/components/Thread/ThreadHead.tsx"],"sourcesContent":["import { convertTimestampToDate } from 'stream-chat';\nimport React from 'react';\n\nimport type { MessageProps } from '../Message';\nimport { Message } from '../Message';\nimport { ThreadStart as DefaultThreadStart } from './ThreadStart';\n\nimport { useComponentContext } from '../../context';\nimport { DateSeparator } from '../DateSeparator';\n\nexport const ThreadHead = (props: MessageProps) => {\n  const { ThreadStart = DefaultThreadStart } = useComponentContext();\n  const parentCreatedAt = convertTimestampToDate(props.message.created_at);\n  return (\n    <div className='str-chat__parent-message-li'>\n      {parentCreatedAt ? <DateSeparator date={parentCreatedAt} /> : null}\n      <Message initialMessage {...props} />\n      <ThreadStart />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,cAAc,UAAwB;CACjD,MAAM,EAAE,aAAA,gBAAc,gBAAuB,oBAAoB;CACjE,MAAM,kBAAkB,uBAAuB,MAAM,QAAQ,UAAU;CACvE,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,kBAAkB,oBAAC,eAAD,EAAe,MAAM,gBAAkB,CAAA,IAAI;GAC9D,oBAAC,SAAD;IAAS,gBAAA;IAAe,GAAI;GAAQ,CAAA;GACpC,oBAAC,eAAD,CAAc,CAAA;EACX;;AAET"}

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

@@ -0,0 +1,78 @@
+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 { WorkspaceNavigationBackButton, WorkspaceNavigationCloseButton } from "../Button/WorkspaceNavigationButtons.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
+import { TypingIndicatorHeader } from "../TypingIndicator/TypingIndicatorHeader.mjs";
+import { useChannelPreviewInfo } from "../ChannelListItem/hooks/useChannelPreviewInfo.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Thread/ThreadHeader.tsx
+var typingEventsStateSelector = ({ typingEvents }) => ({ typingEventsEnabled: typingEvents.enabled });
+var threadStateSelector = ({ parentMessage, replyCount }) => ({
+	parentMessage,
+	replyCount
+});
+var textComposerTypingSelector = ({ typing }) => ({ typing });
+/** Fallback when channel has no display title: parent message author (name only). */
+var displayNameFromParentMessage = (message) => message.user?.name ?? void 0;
+/** Subtitle: replyCount, threadDisplayName, defaultSubtitle (name · reply count), and when typing also TypingIndicatorHeader. */
+var ThreadHeaderSubtitle = ({ replyCount, threadDisplayName, threadList }) => {
+	const { t } = useTranslationContext();
+	const { typingEventsEnabled } = useStateStore(useChannel()?.configState, typingEventsStateSelector) ?? {};
+	const parentId = useThreadContext()?.id;
+	const { client } = useChatContext();
+	const { typing = {} } = useStateStore(useMessageComposerController().textComposer?.state, textComposerTypingSelector) ?? {};
+	const typingInThread = Object.values(typing).filter(({ parent_id, user }) => user?.id !== client.user?.id && parent_id === parentId);
+	const hasTyping = typingEventsEnabled !== false && typingInThread.length > 0;
+	const replyCountText = t("common.replyCount.label", {
+		count: replyCount ?? 0,
+		defaultValue_one: "1 reply",
+		defaultValue_other: "{{ count }} replies"
+	});
+	const defaultSubtitle = threadDisplayName ? `${threadDisplayName} · ${replyCountText}` : replyCountText;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__thread-header-subtitle",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "str-chat__subtitle-content-transition",
+			children: hasTyping ? /* @__PURE__ */ jsx(TypingIndicatorHeader, { threadList }) : /* @__PURE__ */ jsx(Fragment$1, { children: defaultSubtitle })
+		}, hasTyping ? "typing" : "default")
+	});
+};
+var ThreadHeader = ({ EndContent = WorkspaceNavigationCloseButton, overrideTitle, StartContent = WorkspaceNavigationBackButton }) => {
+	const { t } = useTranslationContext();
+	const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel: useChannel() });
+	const { parentMessage, replyCount: replyCountThreadInstance } = useStateStore(useThreadContext()?.state, threadStateSelector) ?? {};
+	const replyCount = replyCountThreadInstance ?? 0;
+	const threadDisplayName = overrideTitle ?? channelDisplayTitle ?? (parentMessage && displayNameFromParentMessage(parentMessage)) ?? void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__thread-header",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__thread-header__start",
+				children: /* @__PURE__ */ jsx(StartContent, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__thread-header-details",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__thread-header-title",
+					children: t("thread.header.thread.text", "Thread")
+				}), /* @__PURE__ */ jsx(ThreadHeaderSubtitle, {
+					replyCount,
+					threadDisplayName,
+					threadList: true
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__thread-header__end",
+				children: /* @__PURE__ */ jsx(EndContent, {})
+			})
+		]
+	});
+};
+//#endregion
+export { ThreadHeader };
+
+//# sourceMappingURL=ThreadHeader.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadHeader.mjs","names":[],"sources":["../../../../src/components/Thread/ThreadHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { 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"}