stream-chat-react 14.11.0 → 14.12.0

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

@@ -0,0 +1,288 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useMessageComposerContext } from "../../context/MessageComposerContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useAriaLiveAnnouncer } from "../Accessibility/useAriaLiveAnnouncer.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { useInteractionAnnouncements } from "../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { useCooldownRemaining } from "../MessageComposer/hooks/useCooldownRemaining.mjs";
+import { useMessageComposerCommands } from "../MessageComposer/hooks/useMessageComposerCommands.mjs";
+import { useMessageComposerHasSendableData } from "../MessageComposer/hooks/useMessageComposerHasSendableData.mjs";
+import { SuggestionList, hasEnabledCommandSuggestions } from "./SuggestionList/SuggestionList.mjs";
+import { useTextareaPlaceholder } from "./hooks/useTextareaPlaceholder.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.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, handleSubmit, maxRows: maxRowsContext, minRows: minRowsContext, onPaste, shouldSubmit: shouldSubmitContext, textareaRef } = useMessageComposerContext();
+	const cooldownRemaining = useCooldownRemaining();
+	const { t } = useTranslationContext("TextareaComposer");
+	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("aria/Message input") : placeholder;
+	const autosizeRows = !text && minRows == null ? 1 : void 0;
+	const textareaStyle = text ? void 0 : {
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	};
+	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();
+			handleSubmit();
+		}
+	}, [
+		focusedItemIndex,
+		handleSubmit,
+		hasSendableData,
+		onKeyDown,
+		shouldSubmit,
+		textareaRef,
+		textComposer
+	]);
+	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 { useMessageComposerHasSendableData } from '../MessageComposer/hooks/useMessageComposerHasSendableData';\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';\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    handleSubmit,\n    maxRows: maxRowsContext,\n    minRows: minRowsContext,\n    onPaste,\n    shouldSubmit: shouldSubmitContext,\n    textareaRef,\n  } = useMessageComposerContext();\n  const cooldownRemaining = useCooldownRemaining();\n\n  const { t } = useTranslationContext('TextareaComposer');\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 ? t('aria/Message input') : 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\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        handleSubmit();\n      }\n    },\n    [\n      focusedItemIndex,\n      handleSubmit,\n      hasSendableData,\n      onKeyDown,\n      shouldSubmit,\n      textareaRef,\n      textComposer,\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,30 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useCooldownRemaining } from "../../MessageComposer/hooks/useCooldownRemaining.mjs";
+import { useMessageComposerController } from "../../MessageComposer/hooks/useMessageComposerController.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("ban-command-args"),
+		giphy: t("giphy-command-args"),
+		mute: t("mute-command-args"),
+		unban: t("unban-command-args"),
+		unmute: t("unmute-command-args")
+	}), [t]);
+	const commandArgs = command?.args && (knownArgsTranslations[command.name ?? ""] ?? t(command.args));
+	const commandPlaceholder = command?.name === "giphy" ? t("Search GIFs") : commandArgs ?? void 0;
+	const defaultPlaceholder = placeholder ?? additionalTextareaProps?.placeholder ?? t("Send a message");
+	if (cooldownRemaining) return t("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';\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('ban-command-args'),\n      giphy: t('giphy-command-args'),\n      mute: t('mute-command-args'),\n      unban: t('unban-command-args'),\n      unmute: t('unmute-command-args'),\n    }),\n    [t],\n  );\n\n  const commandArgs =\n    command?.args && (knownArgsTranslations[command.name ?? ''] ?? t(command.args));\n  const commandPlaceholder =\n    command?.name === 'giphy' ? t('Search GIFs') : (commandArgs ?? undefined);\n\n  const defaultPlaceholder =\n    placeholder ?? additionalTextareaProps?.placeholder ?? t('Send a message');\n\n  if (cooldownRemaining) {\n    return t('Slow mode, wait {{ seconds }}s...', { seconds: cooldownRemaining });\n  }\n\n  return commandPlaceholder ?? defaultPlaceholder;\n};\n"],"mappings":";;;;;;;AAWA,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,kBAAkB;EACzB,OAAO,EAAE,oBAAoB;EAC7B,MAAM,EAAE,mBAAmB;EAC3B,OAAO,EAAE,oBAAoB;EAC7B,QAAQ,EAAE,qBAAqB;CACjC,IACA,CAAC,CAAC,CACJ;CAEA,MAAM,cACJ,SAAS,SAAS,sBAAsB,QAAQ,QAAQ,OAAO,EAAE,QAAQ,IAAI;CAC/E,MAAM,qBACJ,SAAS,SAAS,UAAU,EAAE,aAAa,IAAK,eAAe,KAAA;CAEjE,MAAM,qBACJ,eAAe,yBAAyB,eAAe,EAAE,gBAAgB;CAE3E,IAAI,mBACF,OAAO,EAAE,qCAAqC,EAAE,SAAS,kBAAkB,CAAC;CAG9E,OAAO,sBAAsB;AAC/B"}

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

@@ -0,0 +1,8 @@
+import React, { useContext } from "react";
+//#region src/components/Thread/LegacyThreadContext.ts
+var LegacyThreadContext = React.createContext({ legacyThread: void 0 });
+var useLegacyThreadContext = () => useContext(LegacyThreadContext);
+//#endregion
+export { LegacyThreadContext, useLegacyThreadContext };
+
+//# sourceMappingURL=LegacyThreadContext.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyThreadContext.mjs","names":[],"sources":["../../../../src/components/Thread/LegacyThreadContext.ts"],"sourcesContent":["import React, { useContext } from 'react';\nimport type { LocalMessage } from 'stream-chat';\n\nexport const LegacyThreadContext = React.createContext<{\n  legacyThread: LocalMessage | undefined;\n}>({ legacyThread: undefined });\n\nexport const useLegacyThreadContext = () => useContext(LegacyThreadContext);\n"],"mappings":";;AAGA,IAAa,sBAAsB,MAAM,cAEtC,EAAE,cAAc,KAAA,EAAU,CAAC;AAE9B,IAAa,+BAA+B,WAAW,mBAAmB"}

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

@@ -0,0 +1,106 @@
+import { useChannelActionContext } from "../../context/ChannelActionContext.mjs";
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { MESSAGE_ACTIONS } from "../Message/utils.mjs";
+import { LegacyThreadContext } from "./LegacyThreadContext.mjs";
+import { MessageComposer } from "../MessageComposer/MessageComposer.mjs";
+import { ThreadHeader } from "./ThreadHeader.mjs";
+import { ThreadHead } from "./ThreadHead.mjs";
+import { MessageList } from "../MessageList/MessageList.mjs";
+import { VirtualizedMessageList } from "../MessageList/VirtualizedMessageList.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { createElement, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Thread/Thread.tsx
+/**
+* The Thread component renders a parent Message with a list of replies
+*/
+var Thread = (props) => {
+	const { channel, channelConfig, thread } = useChannelStateContext("Thread");
+	const threadInstance = useThreadContext();
+	if (!thread && !threadInstance) return null;
+	if (channelConfig?.replies === false) return null;
+	return /* @__PURE__ */ createElement(ThreadInner, {
+		...props,
+		key: `thread-${(thread ?? threadInstance)?.id}-${channel?.cid}`
+	});
+};
+var selector = (nextValue) => ({
+	isLoadingNext: nextValue.pagination.isLoadingNext,
+	isLoadingPrev: nextValue.pagination.isLoadingPrev,
+	parentMessage: nextValue.parentMessage,
+	replies: nextValue.replies
+});
+var ThreadInner = (props) => {
+	const { additionalMessageComposerProps, additionalMessageListProps, additionalParentMessageProps, additionalVirtualizedMessageListProps, autoFocus = true, enableDateSeparator = false, Message: PropMessage, messageActions = Object.keys(MESSAGE_ACTIONS), virtualized } = props;
+	const threadInstance = useThreadContext();
+	const { thread, threadHasMore, threadLoadingMore, threadMessages = [], threadSuppressAutoscroll } = useChannelStateContext("Thread");
+	const { closeThread, loadMoreThread } = useChannelActionContext("Thread");
+	const { customClasses } = useChatContext("Thread");
+	const { Message: ContextMessage, ThreadHead: ThreadHead$1 = ThreadHead, ThreadHeader: ThreadHeader$1 = ThreadHeader, VirtualMessage } = useComponentContext("Thread");
+	const { isLoadingNext, isLoadingPrev, parentMessage, replies } = useStateStore(threadInstance?.state, selector) ?? {};
+	const MessageUIComponent = PropMessage || additionalMessageListProps?.Message || (virtualized && VirtualMessage ? VirtualMessage : ContextMessage);
+	const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
+	useEffect(() => {
+		if (threadInstance) return;
+		if ((thread?.reply_count ?? 0) > 0) loadMoreThread();
+	}, [
+		thread,
+		loadMoreThread,
+		threadInstance
+	]);
+	const threadProps = threadInstance ? {
+		loadingMore: isLoadingPrev,
+		loadingMoreNewer: isLoadingNext,
+		loadMore: threadInstance.loadPrevPage,
+		loadMoreNewer: threadInstance.loadNextPage,
+		messages: replies
+	} : {
+		hasMore: threadHasMore,
+		loadingMore: threadLoadingMore,
+		loadMore: loadMoreThread,
+		messages: threadMessages
+	};
+	const messageAsThread = thread ?? parentMessage;
+	if (!messageAsThread) return null;
+	const threadClass = customClasses?.thread || clsx("str-chat__thread-container str-chat__thread", { "str-chat__thread--virtualized": virtualized });
+	const head = /* @__PURE__ */ jsx(ThreadHead$1, {
+		message: messageAsThread,
+		Message: MessageUIComponent,
+		...additionalParentMessageProps
+	}, messageAsThread.id);
+	return /* @__PURE__ */ jsx(LegacyThreadContext.Provider, {
+		value: { legacyThread: thread ?? void 0 },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: threadClass,
+			children: [
+				/* @__PURE__ */ jsx(ThreadHeader$1, {
+					closeThread,
+					thread: messageAsThread
+				}),
+				/* @__PURE__ */ jsx(ThreadMessageList, {
+					disableDateSeparator: !enableDateSeparator,
+					head,
+					Message: MessageUIComponent,
+					messageActions,
+					suppressAutoscroll: threadSuppressAutoscroll,
+					threadList: true,
+					...threadProps,
+					...virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps
+				}),
+				/* @__PURE__ */ jsx(MessageComposer, {
+					focus: autoFocus,
+					parent: thread ?? parentMessage,
+					...additionalMessageComposerProps
+				})
+			]
+		})
+	});
+};
+//#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, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { LegacyThreadContext } from './LegacyThreadContext';\nimport { MESSAGE_ACTIONS } from '../Message';\nimport type { MessageComposerProps } from '../MessageComposer';\nimport { MessageComposer } from '../MessageComposer';\nimport type { MessageListProps, VirtualizedMessageListProps } from '../MessageList';\nimport { MessageList, VirtualizedMessageList } from '../MessageList';\nimport { ThreadHeader as DefaultThreadHeader } from './ThreadHeader';\nimport { ThreadHead as DefaultThreadHead } from '../Thread/ThreadHead';\n\nimport {\n  useChannelActionContext,\n  useChannelStateContext,\n  useChatContext,\n  useComponentContext,\n} from '../../context';\nimport { useThreadContext } from '../Threads';\nimport { useStateStore } from '../../store';\n\nimport type { MessageProps, MessageUIComponentProps } from '../Message/types';\nimport type { MessageActionsArray } from '../Message/utils';\nimport type { ThreadState } from 'stream-chat';\n\nexport type ThreadProps = {\n  /** Additional props for `MessageComposer` component: [available props](https://getstream.io/chat/docs/sdk/react/message-composer-components/message_composer/#props) */\n  additionalMessageComposerProps?: MessageComposerProps;\n  /** Additional props for `MessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/message_list/#props) */\n  additionalMessageListProps?: MessageListProps;\n  /** Additional props for `Message` component of the parent message: [available props](https://getstream.io/chat/docs/sdk/react/message-components/message/#props) */\n  additionalParentMessageProps?: Partial<MessageProps>;\n  /** Additional props for `VirtualizedMessageList` component: [available props](https://getstream.io/chat/docs/sdk/react/core-components/virtualized_list/#props) */\n  additionalVirtualizedMessageListProps?: VirtualizedMessageListProps;\n  /** If true, focuses the `MessageComposer` component on opening a thread */\n  autoFocus?: boolean;\n  /** Injects date separator components into `Thread`, defaults to `false`. To be passed to the underlying `MessageList` or `VirtualizedMessageList` components */\n  enableDateSeparator?: boolean;\n  /** Custom thread message UI component used to override the default `Message` value stored in `ComponentContext` */\n  Message?: React.ComponentType<MessageUIComponentProps>;\n  /** Array of allowed message actions (ex: ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply']). To disable all actions, provide an empty array. */\n  messageActions?: MessageActionsArray;\n  /** If true, render the `VirtualizedMessageList` instead of the standard `MessageList` component */\n  virtualized?: boolean;\n};\n\n/**\n * The Thread component renders a parent Message with a list of replies\n */\nexport const Thread = (props: ThreadProps) => {\n  const { channel, channelConfig, thread } = useChannelStateContext('Thread');\n  const threadInstance = useThreadContext();\n\n  if (!thread && !threadInstance) return null;\n  if (channelConfig?.replies === false) return null;\n\n  // the wrapper ensures a key variable is set and the component recreates on thread switch\n  return (\n    // FIXME: TS is having trouble here as at least one of the two would always be defined\n    <ThreadInner\n      {...props}\n      key={`thread-${(thread ?? threadInstance)?.id}-${channel?.cid}`}\n    />\n  );\n};\n\nconst selector = (nextValue: ThreadState) => ({\n  isLoadingNext: nextValue.pagination.isLoadingNext,\n  isLoadingPrev: nextValue.pagination.isLoadingPrev,\n  parentMessage: nextValue.parentMessage,\n  replies: nextValue.replies,\n});\n\nconst ThreadInner = (props: ThreadProps & { key: string }) => {\n  const {\n    additionalMessageComposerProps,\n    additionalMessageListProps,\n    additionalParentMessageProps,\n    additionalVirtualizedMessageListProps,\n    autoFocus = true,\n    enableDateSeparator = false,\n    Message: PropMessage,\n    messageActions = Object.keys(MESSAGE_ACTIONS),\n    virtualized,\n  } = props;\n  const threadInstance = useThreadContext();\n\n  const {\n    thread,\n    threadHasMore,\n    threadLoadingMore,\n    threadMessages = [],\n    threadSuppressAutoscroll,\n  } = useChannelStateContext('Thread');\n  const { closeThread, loadMoreThread } = useChannelActionContext('Thread');\n  const { customClasses } = useChatContext('Thread');\n  const {\n    Message: ContextMessage,\n    ThreadHead = DefaultThreadHead,\n    ThreadHeader = DefaultThreadHeader,\n    VirtualMessage,\n  } = useComponentContext('Thread');\n\n  const { isLoadingNext, isLoadingPrev, parentMessage, replies } =\n    useStateStore(threadInstance?.state, selector) ?? {};\n\n  const ThreadMessage = PropMessage || additionalMessageListProps?.Message;\n  const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;\n  const MessageUIComponent = ThreadMessage || FallbackMessage;\n\n  const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;\n\n  useEffect(() => {\n    if (threadInstance) return;\n\n    if ((thread?.reply_count ?? 0) > 0) {\n      // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options\n      loadMoreThread();\n    }\n  }, [thread, loadMoreThread, threadInstance]);\n\n  const threadProps: Pick<\n    VirtualizedMessageListProps,\n    | 'hasMoreNewer'\n    | 'loadMoreNewer'\n    | 'loadingMoreNewer'\n    | 'hasMore'\n    | 'loadMore'\n    | 'loadingMore'\n    | 'messages'\n  > = threadInstance\n    ? {\n        loadingMore: isLoadingPrev,\n        loadingMoreNewer: isLoadingNext,\n        loadMore: threadInstance.loadPrevPage,\n        loadMoreNewer: threadInstance.loadNextPage,\n        messages: replies,\n      }\n    : {\n        hasMore: threadHasMore,\n        loadingMore: threadLoadingMore,\n        loadMore: loadMoreThread,\n        messages: threadMessages,\n      };\n\n  const messageAsThread = thread ?? parentMessage;\n\n  if (!messageAsThread) return null;\n\n  const threadClass =\n    customClasses?.thread ||\n    clsx('str-chat__thread-container str-chat__thread', {\n      'str-chat__thread--virtualized': virtualized,\n    });\n\n  const head = (\n    <ThreadHead\n      key={messageAsThread.id}\n      message={messageAsThread}\n      Message={MessageUIComponent}\n      {...additionalParentMessageProps}\n    />\n  );\n\n  return (\n    // Thread component needs a context which we can use for message composer\n    <LegacyThreadContext.Provider\n      value={{\n        legacyThread: thread ?? undefined,\n      }}\n    >\n      <div className={threadClass}>\n        <ThreadHeader closeThread={closeThread} thread={messageAsThread} />\n        <ThreadMessageList\n          disableDateSeparator={!enableDateSeparator}\n          head={head}\n          Message={MessageUIComponent}\n          messageActions={messageActions}\n          suppressAutoscroll={threadSuppressAutoscroll}\n          threadList\n          {...threadProps}\n          {...(virtualized\n            ? additionalVirtualizedMessageListProps\n            : additionalMessageListProps)}\n        />\n        <MessageComposer\n          focus={autoFocus}\n          parent={thread ?? parentMessage}\n          {...additionalMessageComposerProps}\n        />\n      </div>\n    </LegacyThreadContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiDA,IAAa,UAAU,UAAuB;CAC5C,MAAM,EAAE,SAAS,eAAe,WAAW,uBAAuB,QAAQ;CAC1E,MAAM,iBAAiB,iBAAiB;CAExC,IAAI,CAAC,UAAU,CAAC,gBAAgB,OAAO;CACvC,IAAI,eAAe,YAAY,OAAO,OAAO;CAG7C,OAEE,8BAAC,aAAD;EACE,GAAI;EACJ,KAAK,WAAW,UAAU,eAAA,EAAiB,GAAG,GAAG,SAAS;CAC3D,CAAA;AAEL;AAEA,IAAM,YAAY,eAA4B;CAC5C,eAAe,UAAU,WAAW;CACpC,eAAe,UAAU,WAAW;CACpC,eAAe,UAAU;CACzB,SAAS,UAAU;AACrB;AAEA,IAAM,eAAe,UAAyC;CAC5D,MAAM,EACJ,gCACA,4BACA,8BACA,uCACA,YAAY,MACZ,sBAAsB,OACtB,SAAS,aACT,iBAAiB,OAAO,KAAK,eAAe,GAC5C,gBACE;CACJ,MAAM,iBAAiB,iBAAiB;CAExC,MAAM,EACJ,QACA,eACA,mBACA,iBAAiB,CAAC,GAClB,6BACE,uBAAuB,QAAQ;CACnC,MAAM,EAAE,aAAa,mBAAmB,wBAAwB,QAAQ;CACxE,MAAM,EAAE,kBAAkB,eAAe,QAAQ;CACjD,MAAM,EACJ,SAAS,gBACT,YAAA,eAAa,YACb,cAAA,iBAAe,cACf,mBACE,oBAAoB,QAAQ;CAEhC,MAAM,EAAE,eAAe,eAAe,eAAe,YACnD,cAAc,gBAAgB,OAAO,QAAQ,KAAK,CAAC;CAIrD,MAAM,qBAFgB,eAAe,4BAA4B,YACzC,eAAe,iBAAiB,iBAAiB;CAGzE,MAAM,oBAAoB,cAAc,yBAAyB;CAEjE,gBAAgB;EACd,IAAI,gBAAgB;EAEpB,KAAK,QAAQ,eAAe,KAAK,GAE/B,eAAe;CAEnB,GAAG;EAAC;EAAQ;EAAgB;CAAc,CAAC;CAE3C,MAAM,cASF,iBACA;EACE,aAAa;EACb,kBAAkB;EAClB,UAAU,eAAe;EACzB,eAAe,eAAe;EAC9B,UAAU;CACZ,IACA;EACE,SAAS;EACT,aAAa;EACb,UAAU;EACV,UAAU;CACZ;CAEJ,MAAM,kBAAkB,UAAU;CAElC,IAAI,CAAC,iBAAiB,OAAO;CAE7B,MAAM,cACJ,eAAe,UACf,KAAK,+CAA+C,EAClD,iCAAiC,YACnC,CAAC;CAEH,MAAM,OACJ,oBAAC,cAAD;EAEE,SAAS;EACT,SAAS;EACT,GAAI;CACL,GAJM,gBAAgB,EAItB;CAGH,OAEE,oBAAC,oBAAoB,UAArB;EACE,OAAO,EACL,cAAc,UAAU,KAAA,EAC1B;YAEA,qBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,oBAAC,gBAAD;KAA2B;KAAa,QAAQ;IAAkB,CAAA;IAClE,oBAAC,mBAAD;KACE,sBAAsB,CAAC;KACjB;KACN,SAAS;KACO;KAChB,oBAAoB;KACpB,YAAA;KACA,GAAI;KACJ,GAAK,cACD,wCACA;IACL,CAAA;IACD,oBAAC,iBAAD;KACE,OAAO;KACP,QAAQ,UAAU;KAClB,GAAI;IACL,CAAA;GACE;;CACuB,CAAA;AAElC"}

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

@@ -0,0 +1,26 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { ThreadStart } from "./ThreadStart.mjs";
+import { DateSeparator } from "../DateSeparator/DateSeparator.mjs";
+import { Message } from "../Message/Message.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Thread/ThreadHead.tsx
+var ThreadHead = (props) => {
+	const { ThreadStart: ThreadStart$1 = ThreadStart } = useComponentContext("ThreadHead");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__parent-message-li",
+		children: [
+			/* @__PURE__ */ jsx(DateSeparator, { date: props.message.created_at }),
+			/* @__PURE__ */ jsx(Message, {
+				initialMessage: true,
+				threadList: 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 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('ThreadHead');\n  return (\n    <div className='str-chat__parent-message-li'>\n      <DateSeparator date={props.message.created_at} />\n      <Message initialMessage threadList {...props} />\n      <ThreadStart />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAa,cAAc,UAAwB;CACjD,MAAM,EAAE,aAAA,gBAAc,gBAAuB,oBAAoB,YAAY;CAC7E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,eAAD,EAAe,MAAM,MAAM,QAAQ,WAAa,CAAA;GAChD,oBAAC,SAAD;IAAS,gBAAA;IAAe,YAAA;IAAW,GAAI;GAAQ,CAAA;GAC/C,oBAAC,eAAD,CAAc,CAAA;EACX;;AAET"}