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

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

@@ -1 +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":";;;;;;;;;;;;;;;;;;AAsCA,IAAM,6BAA6B,WAA8B;CAC/D,WAAW,MAAM;CACjB,aAAa,MAAM;CACnB,MAAM,MAAM;AACd;AAEA,IAAM,6BAA6B,WAA8B;CAC/D,gBAAgB,MAAM;CACtB,OAAO,MAAM;AACf;AAEA,IAAM,uBAAuB,WAAkC,EAC7D,SAAS,MAAM,KAAK,QACtB;AAEA,IAAM,gCAAgC,WAAiC,EACrE,eAAe,MAAM,cACvB;AAEA,IAAM,kCAAkC,WAAmC,EACzE,aAAa,MAAM,YACrB;;;;;;;AAQA,IAAM,uBAAuB,UAC3B,MAAM,QAAQ,WAAW,CAAC,MAAM,YAAY,CAAC,MAAM,YAAY;AAEjE,IAAa,kCAAkC,SAAiB,KAAK,WAAW;;;;;;;;;AAsBhF,IAAa,oBAAoB,UAC/B,oBAAC,uCAAD,EAAuC,GAAI,MAAQ,CAAA;AAGrD,IAAM,yCAAyC,EAC7C,WACA,gCACA,oBACA,eACA,SAAS,aACT,SAAS,aACT,QACA,UACA,WACA,UACA,UACA,aAAa,iBACb,cAAc,kBACd,GAAG,wBACwB;CAC3B,MAAM,EAAE,6BAA6B,mBAA0B,oBAAoB;CACnF,MAAM,EACJ,yBACA,OACA,cACA,SAAS,gBACT,SAAS,gBACT,SACA,cAAc,qBACd,gBACE,0BAA0B;CAC9B,MAAM,oBAAoB,qBAAqB;CAE/C,MAAM,EAAE,MAAM,sBAAsB,kBAAkB;CACtD,MAAM,cAAc,uBAAuB,EAAE,aAAa,gBAAgB,CAAC;CAC3E,MAAM,WAAW,qBAAqB;CACtC,MAAM,EAAE,wBAAwB,4BAA4B;CAE5D,MAAM,UAAU,eAAe,kBAAkB;CACjD,MAAM,UAAU,eAAe;CAE/B,MAAM,eAAe,oBAAoB,uBAAuB;CAEhE,MAAM,kBAAkB,6BAA6B;CAGrD,MAAM,kBAAkB,kCAAkC;CAC1D,MAAM,EAAE,iBAAiB;CACzB,MAAM,EAAE,WAAW,aAAa,SAAS,cACvC,aAAa,OACb,yBACF;CASA,MAAM,YAAY,OAAO,EAAE,oBAAoB,IAAI;CAKnD,MAAM,eAAe,CAAC,QAAQ,WAAW,OAAO,IAAI,KAAA;CACpD,MAAM,gBAAgB,OAClB,KAAA,IACC;EACC,UAAU;EACV,cAAc;EACd,YAAY;CACd;CAEJ,MAAM,EAAE,YAAY,cAAc,gBAAgB,aAAa,mBAAmB;CAClF,MAAM,EAAE,kBAAkB,cACxB,gBAAgB,OAChB,4BACF;CACA,MAAM,EAAE,gBAAgB,cACtB,gBAAgB,kBAAkB,OAClC,8BACF;CAEA,MAAM,EAAE,gBAAgB,UACtB,cAAc,aAAa,aAAa,OAAO,yBAAyB,KAAK,CAAC;CAEhF,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,CAAC;CAO1D,MAAM,CAAC,0BAA0B,+BAA+B,SAAS,KAAK;CAiB9E,MAAM,YAAY,YAAY;CAC9B,MAAM,WAAW,2BAA2B;CAC5C,MAAM,kBAAkB,CAAC,EACvB,eACA,OAAO,UACP,6BAA6B;EAAE;EAAU,MAAM,aAAa,aAAa;CAAK,CAAC;CAEjF,MAAM,qBACJ,mBAAmB,2BACf,GAAG,UAAU,UAAU,qBACvB,KAAA;CAEN,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,gBAAyD,aAC5D,MAAM;EAIL,4BAA4B,KAAK;EACjC,IAAI,UAAU;GACZ,SAAS,CAAC;GACV;EACF;EACA,IAAI,CAAC,YAAY,SAAS;EAC1B,aAAa,aAAa;GACxB,WAAW;IACT,KAAK,YAAY,QAAQ;IACzB,OAAO,YAAY,QAAQ;GAC7B;GACA,MAAM,EAAE,OAAO;EACjB,CAAC;CACH,GACA;EAAC;EAAU;EAAc;CAAW,CACtC;CAEA,MAAM,mBAAmB,kBAAkB;EACzC,eAAe,KAAK;CACtB,GAAG,CAAC,CAAC;CAEL,MAAM,qBAAqB,kBAAkB;EAC3C,eAAe,IAAI;CACrB,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAiB,aACpB,UAAoD;EACnD,IAAI,WAAW;GACb,UAAU,KAAK;GACf;EACF;EAGA,MAAM,gBAAgB,YAAY,SAAS,SAAS,MAAM,cAAc;EAExE,IACE,aAAa,eACb,aAAa,YAAY,aAAa,OAAO,QAC7C;GACA,IAAI,MAAM,QAAQ,UAAU,OAAO,aAAa,iBAAiB;GAIjE,MAAM,cAAc,aAAa,YAAY,aAAa;GAC1D,IAAI,MAAM,QAAQ,SAAS;IACzB,MAAM,eAAe;IACrB,MAAM,eAAe,YAAY;IACjC,IAAI,cACF,aAAa,aAAa,YAAY;GAE1C;GACA,IAAI,MAAM,QAAQ,WAAW;IAC3B,MAAM,eAAe;IACrB,4BAA4B,IAAI;IAChC,qBAAqB,SAAS;KAC5B,IAAI,YAAY,OAAO;KACvB,IAAI,YAAY,GACd,YAAY,YAAY,SAAS;KAEnC,OAAO;IACT,CAAC;GACH;GACA,IAAI,MAAM,QAAQ,aAAa;IAC7B,MAAM,eAAe;IACrB,4BAA4B,IAAI;IAChC,qBAAqB,SAAS;KAC5B,IAAI,YAAY,OAAO;KACvB,IAAI,aAAa,YAAY,QAC3B,YAAY;KAGd,OAAO;IACT,CAAC;GACH;EACF,OAAO,IACL,aAAa,YACZ,MAAM,QAAQ,YACZ,MAAM,QAAQ,eAAe,+BAA+B,aAAa,IAC5E;GACA,MAAM,eAAe;GACrB,aAAa,aAAa;EAC5B,OAAO,IAAI,aAAa,KAAK,KAAK,YAAY,WAAW,iBAAiB;GACxE,IAAI,MAAM,QAAQ,SAEhB,MAAM,eAAe;GAEvB,aAAa;EACf;CACF,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,gBAAqD,aACxD,UAAU;EACT,IAAI,UACF,SAAS,KAAK;OAEd,aAAa,iBAAiB;CAElC,GACA,CAAC,UAAU,YAAY,CACzB;CAEA,MAAM,eAAe,aAClB,MAA2C;EAC1C,WAAW,CAAC;EACZ,aAAa,aAAa;GACxB,KAAM,EAAE,OAA+B;GACvC,OAAQ,EAAE,OAA+B;EAC3C,CAAC;CACH,GACA,CAAC,UAAU,YAAY,CACzB;CAEA,gBAAgB;EACd,IAAI,aAAa,aACf,oBAAoB,CAAC;CAEzB,GAAG,CAAC,aAAa,WAAW,CAAC;CAE7B,gBAAgB;EACd,MAAM,kBAAkB,aAAa,aAAa;EAClD,IAAI,CAAC,iBAAiB,QAAQ;EAE9B,qBAAqB,SACnB,QAAQ,gBAAgB,SAAS,gBAAgB,SAAS,IAAI,IAChE;CACF,GAAG,CAAC,aAAa,aAAa,KAAK,CAAC;CAEpC,gBAAgB;EACd,MAAM,oBAAoB,YAAY,SAAS,QAAQ,QAAQ;EAC/D,IAAI,CAAC,YAAY,WAAW,qBAAqB,CAAC,OAAO;EACzD,YAAY,QAAQ,MAAM;CAC5B,GAAG;EAAC;EAAa;EAAO;EAAe;CAAW,CAAC;CAoBnD,gBAAgB;EACd,MAAM,gCAAgB,IAAI,IAAY;EACtC,MAAM,cAAc,aAAa,MAAM,uBACpC,WAAW,EAAE,aAAa,MAAM,SAAS,QAAQ,KAAK,KACtD,EAAE,eAAe,aAAa;GAC7B,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,eAAe,gBAAgB,SAAS,aAAa;GAC1D,IAAI,SAAS,kBAAkB,YAAY,SAAS;GAEpD,MAAM,QAAQ,OAAO,4BAA4B;IAC/C,cAAc,OAAO,KAAK;IAC1B,MAAM,QAAQ,YAAY,SAAS;IACnC,IAAI,OAAO,SAAS,OAAO,EAAE,UAAU,SAAS,CAAC;GACnD,CAAC;GACD,cAAc,IAAI,KAAK;EACzB,CACF;EACA,aAAa;GACX,YAAY;GACZ,cAAc,QAAQ,OAAO,oBAAoB;EACnD;CACF,GAAG;EAAC;EAAU,aAAa;EAAO;CAAW,CAAC;CAW9C,MAAM,sBAAsB,OAAsB,IAAI;CACtD,gBAAgB;EACd,oBAAoB,UAClB,aAAa,MAAM,eAAe,CAAC,CAAC,gBAAgB,UAAU;EAYhE,OAXoB,aAAa,MAAM,uBACpC,WAAW,EAAE,gBAAgB,MAAM,eAAe,KAClD,EAAE,qBAAqB;GACtB,MAAM,gBAAgB,oBAAoB,WAAW,eAAe;GACpE,oBAAoB,UAAU,eAAe;GAC7C,IAAI,eAAe,UAAU,eAAe;GAC5C,MAAM,YAAY,eAAe,eAAe,SAAS;GACzD,IAAI,CAAC,WAAW;GAChB,oBAAoB,iBAAiB,EAAE,MAAM,UAAU,QAAQ,UAAU,GAAG,CAAC;EAC/E,CAEK;CACT,GAAG,CAAC,qBAAqB,aAAa,KAAK,CAAC;CAE5C,sBAAsB;;;;;EAKpB,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,YAAY,aAAa;;;;;;;;EAS9B,IAAI,SAAS,UAAU,MACrB,SAAS,QAAQ;EAGnB,MAAM,SAAS,SAAS,MAAM;EAC9B,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,OAAO,MAAM,CAAC;EAC3D,MAAM,MAAM,KAAK,IAAI,OAAO,KAAK,IAAI,UAAU,KAAK,MAAM,CAAC;EAE3D,IAAI,SAAS,mBAAmB,SAAS,SAAS,iBAAiB,KAAK;EAExE,SAAS,kBAAkB,OAAO,KAAK,SAAS;CAClD,GAAG;EAAC;EAAM,UAAU;EAAO,UAAU;EAAK;EAAa;CAAW,CAAC;CAEnE,OACE,qBAAC,OAAD;EACE,WAAW,KAAK,OAAO,sBAAsB,oBAAoB,GAC9D,iBAAiB,eACpB,CAAC;EACD,KAAK;YAJP,CAME,oBAAC,UAAD;GACQ,GAAG;GAAyB,GAAG;GACrC,yBAAuB;GACvB,qBAAkB;GAClB,iBAAe,kBAAkB,YAAY,KAAA;GAC7C,cAAY;GACZ,WAAW,KACT,iBACA,2DACA,SACF;GACA,eAAY;GACZ,UAAU,CAAC,WAAW,CAAC,CAAC;GACxB,SAAS,gBAAgB;GACzB,SAAS,gBAAgB;GACjB;GACR,UAAU;GACQ;GACE;GACpB,WAAW;GACF;GACT,UAAU;GACV,UAAU;GACG;GACb,MAAM,QAAQ;IACZ,YAAY,UAAU;GACxB;GACA,OAAO;EACR,CAAA,GAEA,CAAC,eACA,oBAAC,4BAAD;GACE,WAAW;GACX,qBAAqB;GACH;GACP;GACU;EACtB,CAAA,CAEA;;AAET"}
+{"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

@@ -1,8 +1,9 @@
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
-import { useMessageComposerContext } from "../../../context/MessageComposerContext.mjs";
+import { asDynamicKey } from "../../../i18n/utils.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
-import { useCooldownRemaining } from "../../MessageComposer/hooks/useCooldownRemaining.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 });
@@ -12,16 +13,16 @@ var useTextareaPlaceholder = ({ placeholder } = {}) => {
 	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")
+		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(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 });
+	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

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

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

@@ -1,102 +1,99 @@
-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";
+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 Thread component renders a parent Message with a list of replies
+* 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 = (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;
+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 (threadInstance) return;
-		if ((thread?.reply_count ?? 0) > 0) loadMoreThread();
+		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]
+			};
+		});
 	}, [
-		thread,
-		loadMoreThread,
-		threadInstance
+		client.threads.state,
+		hasLoadedReplies,
+		isLoading,
+		isThreadManaged,
+		lastQueryError,
+		thread
 	]);
-	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
-				})
-			]
+	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
+			})
 		})
 	});
 };

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

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

@@ -1,19 +1,20 @@
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { ThreadStart } from "./ThreadStart.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("ThreadHead");
+	const { ThreadStart: ThreadStart$1 = ThreadStart } = useComponentContext();
+	const parentCreatedAt = convertTimestampToDate(props.message.created_at);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__parent-message-li",
 		children: [
-			/* @__PURE__ */ jsx(DateSeparator, { date: props.message.created_at }),
+			parentCreatedAt ? /* @__PURE__ */ jsx(DateSeparator, { date: parentCreatedAt }) : null,
 			/* @__PURE__ */ jsx(Message, {
 				initialMessage: true,
-				threadList: true,
 				...props
 			}),
 			/* @__PURE__ */ jsx(ThreadStart$1, {})

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

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

@@ -1,31 +1,37 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
-import { useChatContext } from "../../context/ChatContext.mjs";
-import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { useTypingContext } from "../../context/TypingContext.mjs";
-import { Button } from "../Button/Button.mjs";
-import { useChannelPreviewInfo } from "../ChannelListItem/hooks/useChannelPreviewInfo.mjs";
+import { WorkspaceNavigationBackButton, WorkspaceNavigationCloseButton } from "../Button/WorkspaceNavigationButtons.mjs";
+import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
 import { TypingIndicatorHeader } from "../TypingIndicator/TypingIndicatorHeader.mjs";
-import { useThreadContext } from "../Threads/ThreadContext.mjs";
-import { useChatViewContext } from "../ChatView/ChatView.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 threadStateSelector = ({ replyCount }) => ({ replyCount });
+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 { channelConfig, thread } = useChannelStateContext("ThreadHeaderSubtitle");
-	const parentId = useThreadContext()?.id ?? thread?.id;
-	const { client } = useChatContext("ThreadHeaderSubtitle");
-	const { typing = {} } = useTypingContext("ThreadHeaderSubtitle");
+	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 = channelConfig?.typing_events !== false && typingInThread.length > 0;
-	const replyCountText = t("replyCount", { count: replyCount ?? 0 });
+	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",
@@ -35,49 +41,33 @@ var ThreadHeaderSubtitle = ({ replyCount, threadDisplayName, threadList }) => {
 		}, hasTyping ? "typing" : "default")
 	});
 };
-var ThreadHeader = (props) => {
-	const { IconXmark } = useComponentContextIcons();
-	const { closeThread, overrideTitle, thread } = props;
+var ThreadHeader = ({ EndContent = WorkspaceNavigationCloseButton, overrideTitle, StartContent = WorkspaceNavigationBackButton }) => {
 	const { t } = useTranslationContext();
-	const { channel } = useChannelStateContext();
-	const { HeaderStartContent } = useComponentContext();
-	const { activeChatView } = useChatViewContext();
-	const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
-	const threadInstance = useThreadContext();
-	const { replyCount: replyCountThreadInstance } = useStateStore(threadInstance?.state, threadStateSelector) ?? {};
-	const replyCount = threadInstance ? replyCountThreadInstance : thread ? thread.reply_count ?? 0 : 0;
-	const threadDisplayName = overrideTitle ?? channelDisplayTitle ?? displayNameFromParentMessage(thread) ?? void 0;
+	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: activeChatView === "threads" && HeaderStartContent && /* @__PURE__ */ jsx(HeaderStartContent, {})
+				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")
+					children: t("thread.header.thread.text", "Thread")
 				}), /* @__PURE__ */ jsx(ThreadHeaderSubtitle, {
 					replyCount,
 					threadDisplayName,
 					threadList: true
 				})]
 			}),
-			!threadInstance && /* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsx("div", {
 				className: "str-chat__thread-header__end",
-				children: /* @__PURE__ */ jsx(Button, {
-					appearance: "ghost",
-					"aria-label": t("aria/Close thread"),
-					circular: true,
-					className: "str-chat__close-thread-button",
-					"data-testid": "close-thread-button",
-					onClick: closeThread,
-					size: "md",
-					variant: "secondary",
-					children: /* @__PURE__ */ jsx(IconXmark, {})
-				})
+				children: /* @__PURE__ */ jsx(EndContent, {})
 			})
 		]
 	});