@hh.ru/magritte-ui-chat-input 1.2.2 → 1.2.3

package/internal/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["src/internal/TextInput.tsx"],"sourcesContent":["import {\n    type ForwardedRef,\n    forwardRef,\n    type RefObject,\n    type TextareaHTMLAttributes,\n    type UIEvent,\n    type FocusEventHandler,\n    useCallback,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useSendOnEnter } from '@hh.ru/magritte-ui-chat-input/internal/useSendOnEnter';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\n\nimport styles from '../styles.less';\n\ntype TextInputProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {\n    value: string;\n    maxHeight?: number;\n    layout: 'vertical' | 'horizontal';\n    onSend?: VoidFunction;\n    /** Ширина контейнера; её изменение пере-измеряет layout (перенос текста зависит от ширины) */\n    containerWidth?: number;\n    /** Есть центральный слот - ввод всегда на своём ряду, паддинги spacious */\n    hasCentral: boolean;\n    /** Контролы с обеих сторон - в вертикальном лейауте ввод уезжает на свой ряд, паддинги spacious */\n    hasBothSideControls: boolean;\n};\n\ninterface TextInputState {\n    layout: 'vertical' | 'horizontal';\n    height: number;\n}\n\nconst MIN_HEIGHT = 20;\n\n// допуск на субпиксельные значения скролла\nconst HIDDEN_CONTENT_THRESHOLD = 4;\n\n// вертикальные паддинги ввода - источник правды здесь, ставятся инлайном (в LESS только\n// горизонтальные): фейд и раскладка считают по одним и тем же значениям без чтения стилей из DOM.\n// spacious - ввод на своём ряду (не в нижнем, где контролы), base - все остальные раскладки\nconst VERTICAL_PADDING = {\n    base: { top: 8, bottom: 8 },\n    spacious: { top: 12, bottom: 16 },\n} as const;\n\nconst clamp = (value: number, min: number, max: number) => Math.max(Math.min(max, value), min);\n\nconst useTextInputHeight = ({\n    inputRef,\n    layout,\n    maxHeight,\n    containerWidth,\n    value,\n    onScrollHeightChange,\n}: Pick<TextInputProps, 'layout' | 'maxHeight' | 'value' | 'containerWidth'> & {\n    inputRef: RefObject<HTMLTextAreaElement>;\n    onScrollHeightChange?: VoidFunction;\n}) => {\n    const [currentState, setCurrentState] = useState<TextInputState>(() => ({\n        layout,\n        height: MIN_HEIGHT,\n    }));\n    const prevScrollHeightRef = useRef<number | null>(null);\n\n    useLayoutEffect(() => {\n        const input = inputRef.current;\n        if (!input) {\n            return;\n        }\n\n        // изменение реального scrollHeight (например, рост контента при упоре в maxHeight) —\n        // повод пересчитать зависимое (скроллбар); читаем до измерительных тоглов\n        if (prevScrollHeightRef.current !== null && prevScrollHeightRef.current !== input.scrollHeight) {\n            onScrollHeightChange?.();\n        }\n        prevScrollHeightRef.current = input.scrollHeight;\n\n        // высота контента на ширине конкретного слота: .measure схлопывает высоту и паддинги\n        // (scrollHeight = чистая высота контента), layout-vertical выбирает вертикальный/горизонтальный слот\n        const measureContentHeight = (targetVertical: boolean) => {\n            input.classList.add(styles.measure);\n            input.classList.toggle(styles.layoutVertical, targetVertical);\n            const height = input.scrollHeight;\n            input.classList.toggle(styles.layoutVertical, currentState.layout === 'vertical');\n            input.classList.remove(styles.measure);\n            return height;\n        };\n\n        // лейаут определяется по горизонтальному слоту (влезает ли контент в одну строку). Замер\n        // горизонтального слота — форс-рефлоу, поэтому сначала снимаем заведомо известные случаи:\n        // внешний layout='vertical' и перенос строки в значении гарантируют вертикаль, пустое\n        // значение — горизонталь; замеряем только неоднозначный однострочный случай (перенос по ширине).\n        // Высоту всегда берём на ширине целевого слота — иначе размер меряется на старом месте.\n        let isVertical: boolean;\n        if (layout === 'vertical' || value.includes('\\n')) {\n            isVertical = true;\n        } else if (value === '') {\n            isVertical = false;\n        } else {\n            isVertical = measureContentHeight(false) > MIN_HEIGHT;\n        }\n        const contentHeight = isVertical ? measureContentHeight(true) : MIN_HEIGHT;\n\n        const newState: TextInputState = {\n            layout: isVertical ? 'vertical' : 'horizontal',\n            height: clamp(contentHeight, MIN_HEIGHT, maxHeight ?? contentHeight),\n        };\n\n        if (\n            (Object.keys(currentState) as Array<keyof TextInputState>).some(\n                (key) => currentState[key] !== newState[key]\n            )\n        ) {\n            setCurrentState(newState);\n        }\n        // currentState не должно быть в зависимостях, иначе зациклится обновление\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [layout, maxHeight, value, inputRef, containerWidth]);\n\n    return currentState;\n};\n\nexport const useFocus = <T extends HTMLTextAreaElement = HTMLTextAreaElement>(): {\n    focusHandler: FocusEventHandler<T>;\n    blurHandler: FocusEventHandler<T>;\n    isFocused: boolean;\n} => {\n    const [isFocused, setFocused] = useState(false);\n    const focusHandler = useCallback<FocusEventHandler<T>>((event) => {\n        setFocused(event.target.classList.contains('focus-visible'));\n    }, []);\n\n    const blurHandler = useCallback<FocusEventHandler<T>>(() => {\n        setFocused(false);\n    }, []);\n\n    return { focusHandler, blurHandler, isFocused };\n};\n\nconst TextInputComponent = (\n    {\n        value,\n        maxHeight,\n        layout,\n        onSend,\n        containerWidth,\n        hasCentral,\n        hasBothSideControls,\n        onKeyDown,\n        onScroll,\n        className,\n        style,\n        ...textareaProps\n    }: TextInputProps,\n    forwardedRef: ForwardedRef<HTMLTextAreaElement>\n) => {\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n    const { hasVerticalScroll, verticalScrollbarProps, scrollContainerRef, resizeCallbackRef, hoverContainerCssClass } =\n        useScrollbar({ axis: 'vertical' });\n    const refCallback = useMultipleRefs(inputRef, scrollContainerRef, forwardedRef);\n\n    // ResizeObserver внутри useScrollbar видит только изменения размера textarea:\n    // после упора в maxHeight растет лишь scrollHeight - пересчитываем трек по нему\n    const handleScrollHeightChange = useCallback(() => {\n        resizeCallbackRef.current?.();\n    }, [resizeCallbackRef]);\n\n    const inputParams = useTextInputHeight({\n        inputRef,\n        layout,\n        maxHeight,\n        value,\n        containerWidth,\n        onScrollHeightChange: handleScrollHeightChange,\n    });\n\n    const verticalPadding =\n        hasCentral || (hasBothSideControls && inputParams.layout === 'vertical')\n            ? VERTICAL_PADDING.spacious\n            : VERTICAL_PADDING.base;\n\n    // фейд у краёв показываем, только когда за соответствующим краем есть непроскролленный контент\n    const [hasHiddenTop, setHasHiddenTop] = useState(false);\n    const [hasHiddenBottom, setHasHiddenBottom] = useState(false);\n    const updateFades = useCallback(() => {\n        const input = inputRef.current;\n        if (!input) {\n            return;\n        }\n        // верхний и нижний паддинги - часть скроллируемой области, но контента в них нет:\n        // остаток скролла в их пределах не значит, что текст скрыт\n        const hiddenTop = input.scrollTop - verticalPadding.top;\n        const hiddenBottom = input.scrollHeight - input.scrollTop - input.clientHeight - verticalPadding.bottom;\n        setHasHiddenTop(hiddenTop > HIDDEN_CONTENT_THRESHOLD);\n        setHasHiddenBottom(hiddenBottom > HIDDEN_CONTENT_THRESHOLD);\n    }, [verticalPadding.top, verticalPadding.bottom]);\n\n    // позиция скролла отслеживается через onScroll, здесь - изменения контента, высоты и ширины\n    // контейнера: при упоре в maxHeight высота не меняется, но текст перетекает и за краями\n    // может появиться/исчезнуть скрытый контент\n    useLayoutEffect(() => {\n        updateFades();\n    }, [value, inputParams.height, containerWidth, updateFades]);\n\n    const handleKeyDown = useSendOnEnter({ onSend, onKeyDown });\n    const handleScroll = useCallback(\n        (event: UIEvent<HTMLTextAreaElement>) => {\n            updateFades();\n            onScroll?.(event);\n        },\n        [updateFades, onScroll]\n    );\n\n    const { isFocused, focusHandler, blurHandler } = useFocus();\n\n    return (\n        <div className={classNames(styles.textInputWrapper, hoverContainerCssClass)}>\n            <textarea\n                enterKeyHint=\"enter\"\n                {...textareaProps}\n                onFocus={focusHandler}\n                onBlur={blurHandler}\n                className={classNames(\n                    styles.textInput,\n                    {\n                        [styles.layoutVertical]: inputParams.layout === 'vertical',\n                        [styles.withTopFade]: hasHiddenTop,\n                        [styles.withBottomFade]: hasHiddenBottom,\n                        [styles.textInputFocused]: isFocused,\n                    },\n                    className\n                )}\n                style={{\n                    ...style,\n                    height: inputParams.height,\n                    paddingTop: verticalPadding.top,\n                    paddingBottom: verticalPadding.bottom,\n                }}\n                ref={refCallback}\n                value={value}\n                onKeyDown={handleKeyDown}\n                onScroll={handleScroll}\n                data-qa=\"text-input\"\n            />\n            {hasVerticalScroll && (\n                <div className={styles.scrollbarCell}>\n                    <Scrollbar {...verticalScrollbarProps} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport const TextInput = forwardRef(TextInputComponent);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sources":["src/internal/TextInput.tsx"],"sourcesContent":["import {\n    type ForwardedRef,\n    forwardRef,\n    type RefObject,\n    type TextareaHTMLAttributes,\n    type UIEvent,\n    type FocusEventHandler,\n    useCallback,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useSendOnEnter } from '@hh.ru/magritte-ui-chat-input/internal/useSendOnEnter';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\n\nimport styles from '../styles.less';\n\ntype TextInputProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {\n    value: string;\n    maxHeight?: number;\n    layout: 'vertical' | 'horizontal';\n    onSend?: VoidFunction;\n    /** Ширина контейнера; её изменение пере-измеряет layout (перенос текста зависит от ширины) */\n    containerWidth?: number;\n    /** Есть центральный слот - ввод всегда на своём ряду, паддинги spacious */\n    hasCentral: boolean;\n    /** Контролы с обеих сторон - в вертикальном лейауте ввод уезжает на свой ряд, паддинги spacious */\n    hasBothSideControls: boolean;\n};\n\ninterface TextInputState {\n    layout: 'vertical' | 'horizontal';\n    height: number;\n}\n\nconst MIN_HEIGHT = 20;\n\n// допуск на субпиксельные значения скролла\nconst HIDDEN_CONTENT_THRESHOLD = 4;\n\n// вертикальные паддинги ввода - источник правды здесь, ставятся инлайном (в LESS только\n// горизонтальные): фейд и раскладка считают по одним и тем же значениям без чтения стилей из DOM.\n// spacious - ввод на своём ряду (не в нижнем, где контролы), base - все остальные раскладки\nconst VERTICAL_PADDING = {\n    base: { top: 8, bottom: 8 },\n    spacious: { top: 12, bottom: 16 },\n} as const;\n\nconst clamp = (value: number, min: number, max: number) => Math.max(Math.min(max, value), min);\n\nconst useTextInputHeight = ({\n    inputRef,\n    layout,\n    maxHeight,\n    containerWidth,\n    value,\n    onScrollHeightChange,\n}: Pick<TextInputProps, 'layout' | 'maxHeight' | 'value' | 'containerWidth'> & {\n    inputRef: RefObject<HTMLTextAreaElement>;\n    onScrollHeightChange?: VoidFunction;\n}) => {\n    const [currentState, setCurrentState] = useState<TextInputState>(() => ({\n        layout,\n        height: MIN_HEIGHT,\n    }));\n    const prevScrollHeightRef = useRef<number | null>(null);\n\n    useLayoutEffect(() => {\n        const input = inputRef.current;\n        if (!input) {\n            return;\n        }\n\n        // изменение реального scrollHeight (например, рост контента при упоре в maxHeight) —\n        // повод пересчитать зависимое (скроллбар); читаем до измерительных тоглов\n        if (prevScrollHeightRef.current !== null && prevScrollHeightRef.current !== input.scrollHeight) {\n            onScrollHeightChange?.();\n        }\n        prevScrollHeightRef.current = input.scrollHeight;\n\n        // высота контента на ширине конкретного слота: .measure схлопывает высоту и паддинги\n        // (scrollHeight = чистая высота контента), layout-vertical выбирает вертикальный/горизонтальный слот\n        const measureContentHeight = (targetVertical: boolean) => {\n            input.classList.add(styles.measure);\n            input.classList.toggle(styles.layoutVertical, targetVertical);\n            const height = input.scrollHeight;\n            input.classList.toggle(styles.layoutVertical, currentState.layout === 'vertical');\n            input.classList.remove(styles.measure);\n            return height;\n        };\n\n        // лейаут определяется по горизонтальному слоту (влезает ли контент в одну строку). Замер\n        // горизонтального слота — форс-рефлоу, поэтому сначала снимаем заведомо известные случаи:\n        // внешний layout='vertical' и перенос строки в значении гарантируют вертикаль, пустое\n        // значение — горизонталь; замеряем только неоднозначный однострочный случай (перенос по ширине).\n        // Высоту всегда берём на ширине целевого слота — иначе размер меряется на старом месте.\n        let isVertical: boolean;\n        if (layout === 'vertical' || value.includes('\\n')) {\n            isVertical = true;\n        } else if (value === '') {\n            isVertical = false;\n        } else {\n            isVertical = measureContentHeight(false) > MIN_HEIGHT;\n        }\n        const contentHeight = isVertical ? measureContentHeight(true) : MIN_HEIGHT;\n\n        const newState: TextInputState = {\n            layout: isVertical ? 'vertical' : 'horizontal',\n            height: clamp(contentHeight, MIN_HEIGHT, maxHeight ?? contentHeight),\n        };\n\n        if (\n            (Object.keys(currentState) as Array<keyof TextInputState>).some(\n                (key) => currentState[key] !== newState[key]\n            )\n        ) {\n            setCurrentState(newState);\n        }\n        // currentState не должно быть в зависимостях, иначе зациклится обновление\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [layout, maxHeight, value, inputRef, containerWidth]);\n\n    return currentState;\n};\n\nexport const useFocus = <T extends HTMLTextAreaElement = HTMLTextAreaElement>(): {\n    focusHandler: FocusEventHandler<T>;\n    blurHandler: FocusEventHandler<T>;\n    isFocused: boolean;\n} => {\n    const [isFocused, setFocused] = useState(false);\n    const focusHandler = useCallback<FocusEventHandler<T>>((event) => {\n        setFocused(event.target.classList.contains('focus-visible'));\n    }, []);\n\n    const blurHandler = useCallback<FocusEventHandler<T>>(() => {\n        setFocused(false);\n    }, []);\n\n    return { focusHandler, blurHandler, isFocused };\n};\n\nconst TextInputComponent = (\n    {\n        value,\n        maxHeight,\n        layout,\n        onSend,\n        containerWidth,\n        hasCentral,\n        hasBothSideControls,\n        onKeyDown,\n        onScroll,\n        className,\n        style,\n        ...textareaProps\n    }: TextInputProps,\n    forwardedRef: ForwardedRef<HTMLTextAreaElement>\n) => {\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n    const { hasVerticalScroll, verticalScrollbarProps, scrollContainerRef, resizeCallbackRef, hoverContainerCssClass } =\n        useScrollbar({ axis: 'vertical' });\n    const refCallback = useMultipleRefs(inputRef, scrollContainerRef, forwardedRef);\n\n    // ResizeObserver внутри useScrollbar видит только изменения размера textarea:\n    // после упора в maxHeight растет лишь scrollHeight - пересчитываем трек по нему\n    const handleScrollHeightChange = useCallback(() => {\n        resizeCallbackRef.current?.();\n    }, [resizeCallbackRef]);\n\n    const inputParams = useTextInputHeight({\n        inputRef,\n        layout,\n        maxHeight,\n        value,\n        containerWidth,\n        onScrollHeightChange: handleScrollHeightChange,\n    });\n\n    const verticalPadding =\n        hasCentral || (hasBothSideControls && inputParams.layout === 'vertical')\n            ? VERTICAL_PADDING.spacious\n            : VERTICAL_PADDING.base;\n\n    // фейд у краёв показываем, только когда за соответствующим краем есть непроскролленный контент\n    const [hasHiddenTop, setHasHiddenTop] = useState(false);\n    const [hasHiddenBottom, setHasHiddenBottom] = useState(false);\n    const updateFades = useCallback(() => {\n        const input = inputRef.current;\n        if (!input) {\n            return;\n        }\n        // верхний и нижний паддинги - часть скроллируемой области, но контента в них нет:\n        // остаток скролла в их пределах не значит, что текст скрыт\n        const hiddenTop = input.scrollTop - verticalPadding.top;\n        const hiddenBottom = input.scrollHeight - input.scrollTop - input.clientHeight - verticalPadding.bottom;\n        setHasHiddenTop(hiddenTop > HIDDEN_CONTENT_THRESHOLD);\n        setHasHiddenBottom(hiddenBottom > HIDDEN_CONTENT_THRESHOLD);\n    }, [verticalPadding.top, verticalPadding.bottom]);\n\n    // позиция скролла отслеживается через onScroll, здесь - изменения контента, высоты и ширины\n    // контейнера: при упоре в maxHeight высота не меняется, но текст перетекает и за краями\n    // может появиться/исчезнуть скрытый контент\n    useLayoutEffect(() => {\n        updateFades();\n    }, [value, inputParams.height, containerWidth, updateFades]);\n\n    const handleKeyDown = useSendOnEnter({ onSend, onKeyDown });\n    const handleScroll = useCallback(\n        (event: UIEvent<HTMLTextAreaElement>) => {\n            updateFades();\n            onScroll?.(event);\n        },\n        [updateFades, onScroll]\n    );\n\n    const { isFocused, focusHandler, blurHandler } = useFocus();\n\n    return (\n        <div className={classNames(styles.textInputWrapper, hoverContainerCssClass)}>\n            <textarea\n                enterKeyHint=\"enter\"\n                {...textareaProps}\n                onFocus={focusHandler}\n                onBlur={blurHandler}\n                className={classNames(\n                    styles.textInput,\n                    {\n                        [styles.layoutVertical]: inputParams.layout === 'vertical',\n                        [styles.withTopFade]: hasHiddenTop,\n                        [styles.withBottomFade]: hasHiddenBottom,\n                        [styles.textInputFocused]: isFocused,\n                    },\n                    className\n                )}\n                style={{\n                    ...style,\n                    height: inputParams.height,\n                    paddingTop: verticalPadding.top,\n                    paddingBottom: verticalPadding.bottom,\n                }}\n                ref={refCallback}\n                value={value}\n                onKeyDown={handleKeyDown}\n                onScroll={handleScroll}\n                data-qa=\"text-input\"\n            />\n            {hasVerticalScroll && (\n                <div className={styles.scrollbarCell}>\n                    <Scrollbar {...verticalScrollbarProps} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport const TextInput = forwardRef(TextInputComponent);\n"],"names":[],"mappings":"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"}

package/internal/VoiceRecord.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import { type ChatInputButtonAria } from '@hh.ru/magritte-ui-chat-input/types';
+import { type ChatInputButtonAria } from '../types';
 export type VoiceRecordMode = 'recording' | 'processing';
 export interface VoiceRecordProps {
     mode: VoiceRecordMode;

package/internal/VoiceRecord.js

@@ -9,37 +9,79 @@ import { FOCUS_PRIORITY } from './focusGroup.js';
 import { CrossOutlinedSize24, CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { Loader } from '@hh.ru/magritte-ui-loader';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from '../styles-CHMi0EYL.js';
+import { s as styles } from '../styles-hEUo5BXU.js';
 import './useHasSound.js';
 
 const formatDuration = (totalSeconds) => {
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
 };
 const useElapsedSeconds = (startedAt, active) => {
-    const [elapsedSeconds, setElapsedSeconds] = useState(0);
-    useEffect(() => {
-        if (!active || startedAt === null) {
-            setElapsedSeconds(0);
-            return undefined;
-        }
-        const update = () => setElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)));
-        update();
-        const intervalId = setInterval(update, 1000);
-        return () => clearInterval(intervalId);
-    }, [startedAt, active]);
-    return elapsedSeconds;
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
+  useEffect(() => {
+    if (!active || startedAt === null) {
+      setElapsedSeconds(0);
+      return void 0;
+    }
+    const update = () => setElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1e3)));
+    update();
+    const intervalId = setInterval(update, 1e3);
+    return () => clearInterval(intervalId);
+  }, [startedAt, active]);
+  return elapsedSeconds;
 };
-const VoiceRecord = ({ mode, stream, startedAt, processingLabel, onComplete, onCancel, completeButtonProps, cancelButtonProps, 'data-qa': dataQa, }) => {
-    const isProcessing = mode === 'processing';
-    const elapsedSeconds = useElapsedSeconds(startedAt, !isProcessing);
-    const completeLabel = useTranslation('ChatInput', 'completeRecord');
-    const cancelLabel = useTranslation('ChatInput', 'cancelRecord');
-    const processingTrl = useTranslation('ChatInput', 'processingLabel');
-    return (jsxs("div", { className: styles.voiceRecord, "data-qa": dataQa, children: [jsxs("div", { className: styles.voiceRecordLeft, children: [jsx(VoiceRecordIndicator, { stream: stream }), jsx(Text, { typography: "label-3-regular", style: "tertiary", ellipsis: true, children: isProcessing ? (processingLabel ?? processingTrl) : formatDuration(elapsedSeconds) })] }), jsx("div", { className: classNames(styles.voiceRecordRight, { [styles.voiceProcessing]: isProcessing }), children: isProcessing ? (jsx(Loader, { size: 24, color: "secondary" })) : (jsxs(Fragment, { children: [jsx(FocusTarget, { priority: FOCUS_PRIORITY.voiceCancel, children: jsx(CrossOutlinedSize24, { "aria-label": cancelLabel, "data-qa": "record-cancel", ...cancelButtonProps, borderRadius: 12, padding: 8, initialColor: "secondary", onClick: onCancel }) }), jsx(FocusTarget, { priority: FOCUS_PRIORITY.voiceComplete, children: jsx(CheckOutlinedSize24, { "aria-label": completeLabel, "data-qa": "record-complete", ...completeButtonProps, borderRadius: 12, padding: 8, initialColor: "inverse", backgroundStyle: "constant", onClick: onComplete }) })] })) })] }));
+const VoiceRecord = ({
+  mode,
+  stream,
+  startedAt,
+  processingLabel,
+  onComplete,
+  onCancel,
+  completeButtonProps,
+  cancelButtonProps,
+  "data-qa": dataQa
+}) => {
+  const isProcessing = mode === "processing";
+  const elapsedSeconds = useElapsedSeconds(startedAt, !isProcessing);
+  const completeLabel = useTranslation("ChatInput", "completeRecord");
+  const cancelLabel = useTranslation("ChatInput", "cancelRecord");
+  const processingTrl = useTranslation("ChatInput", "processingLabel");
+  return /* @__PURE__ */ jsxs("div", { className: styles.voiceRecord, "data-qa": dataQa, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.voiceRecordLeft, children: [
+      /* @__PURE__ */ jsx(VoiceRecordIndicator, { stream }),
+      /* @__PURE__ */ jsx(Text, { typography: "label-3-regular", style: "tertiary", ellipsis: true, children: isProcessing ? processingLabel ?? processingTrl : formatDuration(elapsedSeconds) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: classNames(styles.voiceRecordRight, { [styles.voiceProcessing]: isProcessing }), children: isProcessing ? /* @__PURE__ */ jsx(Loader, { size: 24, color: "secondary" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(FocusTarget, { priority: FOCUS_PRIORITY.voiceCancel, children: /* @__PURE__ */ jsx(
+        CrossOutlinedSize24,
+        {
+          "aria-label": cancelLabel,
+          "data-qa": "record-cancel",
+          ...cancelButtonProps,
+          borderRadius: 12,
+          padding: 8,
+          initialColor: "secondary",
+          onClick: onCancel
+        }
+      ) }),
+      /* @__PURE__ */ jsx(FocusTarget, { priority: FOCUS_PRIORITY.voiceComplete, children: /* @__PURE__ */ jsx(
+        CheckOutlinedSize24,
+        {
+          "aria-label": completeLabel,
+          "data-qa": "record-complete",
+          ...completeButtonProps,
+          borderRadius: 12,
+          padding: 8,
+          initialColor: "inverse",
+          backgroundStyle: "constant",
+          onClick: onComplete
+        }
+      ) })
+    ] }) })
+  ] });
 };
-VoiceRecord.displayName = 'ChatInput.VoiceRecord';
+VoiceRecord.displayName = "ChatInput.VoiceRecord";
 
 export { VoiceRecord };
 //# sourceMappingURL=VoiceRecord.js.map

package/internal/VoiceRecord.js.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceRecord.js","sources":["src/internal/VoiceRecord.tsx"],"sourcesContent":["import { type FC, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { FocusTarget } from '@hh.ru/magritte-ui-chat-input/internal/FocusTarget';\nimport { VoiceRecordIndicator } from '@hh.ru/magritte-ui-chat-input/internal/VoiceRecordIndicator';\nimport { FOCUS_PRIORITY } from '@hh.ru/magritte-ui-chat-input/internal/focusGroup';\nimport { type ChatInputButtonAria } from '@hh.ru/magritte-ui-chat-input/types';\nimport { CheckOutlinedSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../styles.less';\n\nexport type VoiceRecordMode = 'recording' | 'processing';\n\n// чисто презентационный блок: всё состояние (режим, таймер) приходит пропсами\n// из сессии записи (useVoiceRecordSession), кнопки только дёргают колбэки\nexport interface VoiceRecordProps {\n    mode: VoiceRecordMode;\n    /** Живой стрим микрофона во время записи (null в обработке) — индикатор по нему определяет,\n     * есть ли сейчас звук */\n    stream: MediaStream | null;\n    /** Метка старта записи (`Date.now()`); `null` вне записи. Таймер `mm:ss` тикаем локально,\n     * чтобы посекундное обновление не ререндерило корень ChatInput */\n    startedAt: number | null;\n    /** Текст в состоянии обработки (вместо таймера), например «Обрабатываю запись» */\n    processingLabel?: string;\n    /** Нажата кнопка подтверждения (check) */\n    onComplete: VoidFunction;\n    /** Нажата кнопка отмены (cross) */\n    onCancel: VoidFunction;\n    /** aria/data-qa пропсы кнопки подтверждения (галочка) */\n    completeButtonProps?: ChatInputButtonAria;\n    /** aria/data-qa пропсы кнопки отмены (крестик) */\n    cancelButtonProps?: ChatInputButtonAria;\n    'data-qa'?: string;\n}\n\nconst formatDuration = (totalSeconds: number): string => {\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n};\n\nconst useElapsedSeconds = (startedAt: number | null, active: boolean): number => {\n    const [elapsedSeconds, setElapsedSeconds] = useState(0);\n\n    useEffect(() => {\n        if (!active || startedAt === null) {\n            setElapsedSeconds(0);\n            return undefined;\n        }\n        const update = () => setElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)));\n        update();\n        const intervalId = setInterval(update, 1000);\n        return () => clearInterval(intervalId);\n    }, [startedAt, active]);\n\n    return elapsedSeconds;\n};\n\nexport const VoiceRecord: FC<VoiceRecordProps> = ({\n    mode,\n    stream,\n    startedAt,\n    processingLabel,\n    onComplete,\n    onCancel,\n    completeButtonProps,\n    cancelButtonProps,\n    'data-qa': dataQa,\n}) => {\n    const isProcessing = mode === 'processing';\n    const elapsedSeconds = useElapsedSeconds(startedAt, !isProcessing);\n    const completeLabel = useTranslation('ChatInput', 'completeRecord');\n    const cancelLabel = useTranslation('ChatInput', 'cancelRecord');\n    const processingTrl = useTranslation('ChatInput', 'processingLabel');\n\n    return (\n        <div className={styles.voiceRecord} data-qa={dataQa}>\n            <div className={styles.voiceRecordLeft}>\n                <VoiceRecordIndicator stream={stream} />\n                <Text typography=\"label-3-regular\" style=\"tertiary\" ellipsis>\n                    {isProcessing ? (processingLabel ?? processingTrl) : formatDuration(elapsedSeconds)}\n                </Text>\n            </div>\n            <div className={classNames(styles.voiceRecordRight, { [styles.voiceProcessing]: isProcessing })}>\n                {isProcessing ? (\n                    <Loader size={24} color=\"secondary\" />\n                ) : (\n                    <>\n                        <FocusTarget priority={FOCUS_PRIORITY.voiceCancel}>\n                            <CrossOutlinedSize24\n                                aria-label={cancelLabel}\n                                data-qa=\"record-cancel\"\n                                {...cancelButtonProps}\n                                borderRadius={12}\n                                padding={8}\n                                initialColor=\"secondary\"\n                                onClick={onCancel}\n                            />\n                        </FocusTarget>\n                        <FocusTarget priority={FOCUS_PRIORITY.voiceComplete}>\n                            <CheckOutlinedSize24\n                                aria-label={completeLabel}\n                                data-qa=\"record-complete\"\n                                {...completeButtonProps}\n                                borderRadius={12}\n                                padding={8}\n                                initialColor=\"inverse\"\n                                backgroundStyle=\"constant\"\n                                onClick={onComplete}\n                            />\n                        </FocusTarget>\n                    </>\n                )}\n            </div>\n        </div>\n    );\n};\n\nVoiceRecord.displayName = 'ChatInput.VoiceRecord';\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"VoiceRecord.js","sources":["src/internal/VoiceRecord.tsx"],"sourcesContent":["import { type FC, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { FocusTarget } from '@hh.ru/magritte-ui-chat-input/internal/FocusTarget';\nimport { VoiceRecordIndicator } from '@hh.ru/magritte-ui-chat-input/internal/VoiceRecordIndicator';\nimport { FOCUS_PRIORITY } from '@hh.ru/magritte-ui-chat-input/internal/focusGroup';\nimport { type ChatInputButtonAria } from '@hh.ru/magritte-ui-chat-input/types';\nimport { CheckOutlinedSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../styles.less';\n\nexport type VoiceRecordMode = 'recording' | 'processing';\n\n// чисто презентационный блок: всё состояние (режим, таймер) приходит пропсами\n// из сессии записи (useVoiceRecordSession), кнопки только дёргают колбэки\nexport interface VoiceRecordProps {\n    mode: VoiceRecordMode;\n    /** Живой стрим микрофона во время записи (null в обработке) — индикатор по нему определяет,\n     * есть ли сейчас звук */\n    stream: MediaStream | null;\n    /** Метка старта записи (`Date.now()`); `null` вне записи. Таймер `mm:ss` тикаем локально,\n     * чтобы посекундное обновление не ререндерило корень ChatInput */\n    startedAt: number | null;\n    /** Текст в состоянии обработки (вместо таймера), например «Обрабатываю запись» */\n    processingLabel?: string;\n    /** Нажата кнопка подтверждения (check) */\n    onComplete: VoidFunction;\n    /** Нажата кнопка отмены (cross) */\n    onCancel: VoidFunction;\n    /** aria/data-qa пропсы кнопки подтверждения (галочка) */\n    completeButtonProps?: ChatInputButtonAria;\n    /** aria/data-qa пропсы кнопки отмены (крестик) */\n    cancelButtonProps?: ChatInputButtonAria;\n    'data-qa'?: string;\n}\n\nconst formatDuration = (totalSeconds: number): string => {\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n};\n\nconst useElapsedSeconds = (startedAt: number | null, active: boolean): number => {\n    const [elapsedSeconds, setElapsedSeconds] = useState(0);\n\n    useEffect(() => {\n        if (!active || startedAt === null) {\n            setElapsedSeconds(0);\n            return undefined;\n        }\n        const update = () => setElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)));\n        update();\n        const intervalId = setInterval(update, 1000);\n        return () => clearInterval(intervalId);\n    }, [startedAt, active]);\n\n    return elapsedSeconds;\n};\n\nexport const VoiceRecord: FC<VoiceRecordProps> = ({\n    mode,\n    stream,\n    startedAt,\n    processingLabel,\n    onComplete,\n    onCancel,\n    completeButtonProps,\n    cancelButtonProps,\n    'data-qa': dataQa,\n}) => {\n    const isProcessing = mode === 'processing';\n    const elapsedSeconds = useElapsedSeconds(startedAt, !isProcessing);\n    const completeLabel = useTranslation('ChatInput', 'completeRecord');\n    const cancelLabel = useTranslation('ChatInput', 'cancelRecord');\n    const processingTrl = useTranslation('ChatInput', 'processingLabel');\n\n    return (\n        <div className={styles.voiceRecord} data-qa={dataQa}>\n            <div className={styles.voiceRecordLeft}>\n                <VoiceRecordIndicator stream={stream} />\n                <Text typography=\"label-3-regular\" style=\"tertiary\" ellipsis>\n                    {isProcessing ? (processingLabel ?? processingTrl) : formatDuration(elapsedSeconds)}\n                </Text>\n            </div>\n            <div className={classNames(styles.voiceRecordRight, { [styles.voiceProcessing]: isProcessing })}>\n                {isProcessing ? (\n                    <Loader size={24} color=\"secondary\" />\n                ) : (\n                    <>\n                        <FocusTarget priority={FOCUS_PRIORITY.voiceCancel}>\n                            <CrossOutlinedSize24\n                                aria-label={cancelLabel}\n                                data-qa=\"record-cancel\"\n                                {...cancelButtonProps}\n                                borderRadius={12}\n                                padding={8}\n                                initialColor=\"secondary\"\n                                onClick={onCancel}\n                            />\n                        </FocusTarget>\n                        <FocusTarget priority={FOCUS_PRIORITY.voiceComplete}>\n                            <CheckOutlinedSize24\n                                aria-label={completeLabel}\n                                data-qa=\"record-complete\"\n                                {...completeButtonProps}\n                                borderRadius={12}\n                                padding={8}\n                                initialColor=\"inverse\"\n                                backgroundStyle=\"constant\"\n                                onClick={onComplete}\n                            />\n                        </FocusTarget>\n                    </>\n                )}\n            </div>\n        </div>\n    );\n};\n\nVoiceRecord.displayName = 'ChatInput.VoiceRecord';\n"],"names":[],"mappings":"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"}

package/internal/VoiceRecordIndicator.js

@@ -2,21 +2,34 @@ import './../index.css';
 import { jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { useHasSound } from './useHasSound.js';
-import { s as styles } from '../styles-CHMi0EYL.js';
+import { s as styles } from '../styles-hEUo5BXU.js';
 import 'react';
 
 const TARGET_HEIGHT = [2, 11, 22, 22, 22, 11, 22, 11, 6, 2];
 const PHASE_SHIFT = [240, 120, 40, 210, 70, 180, 20, 150, 90, 260];
 const VoiceRecordIndicator = ({ stream }) => {
-    const hasSound = useHasSound(stream);
-    return (jsx("div", { className: classNames(styles.voiceRecordIndicator, {
-            [styles.voiceRecordIndicatorHasSound]: hasSound,
-        }), children: TARGET_HEIGHT.map((targetHeight, index) => (jsx("div", { className: styles.voiceRecordIndicatorBar, style: {
-                '--target-height': targetHeight,
-                animationDelay: `${-PHASE_SHIFT[index]}ms`,
-            } }, index))) }));
+  const hasSound = useHasSound(stream);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(styles.voiceRecordIndicator, {
+        [styles.voiceRecordIndicatorHasSound]: hasSound
+      }),
+      children: TARGET_HEIGHT.map((targetHeight, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.voiceRecordIndicatorBar,
+          style: {
+            "--target-height": targetHeight,
+            animationDelay: `${-PHASE_SHIFT[index]}ms`
+          }
+        },
+        index
+      ))
+    }
+  );
 };
-VoiceRecordIndicator.displayName = 'VoiceRecordIndicator';
+VoiceRecordIndicator.displayName = "VoiceRecordIndicator";
 
 export { VoiceRecordIndicator };
 //# sourceMappingURL=VoiceRecordIndicator.js.map

package/internal/VoiceRecordIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceRecordIndicator.js","sources":["src/internal/VoiceRecordIndicator.tsx"],"sourcesContent":["import { type CSSProperties, type FC } from 'react';\nimport classNames from 'classnames';\n\nimport { useHasSound } from '@hh.ru/magritte-ui-chat-input/internal/useHasSound';\n\nimport styles from '../styles.less';\n\nconst TARGET_HEIGHT = [2, 11, 22, 22, 22, 11, 22, 11, 6, 2];\nconst PHASE_SHIFT = [240, 120, 40, 210, 70, 180, 20, 150, 90, 260];\n\nexport const VoiceRecordIndicator: FC<{ stream: MediaStream | null }> = ({ stream }) => {\n    const hasSound = useHasSound(stream);\n\n    return (\n        <div\n            className={classNames(styles.voiceRecordIndicator, {\n                [styles.voiceRecordIndicatorHasSound]: hasSound,\n            })}\n        >\n            {TARGET_HEIGHT.map((targetHeight, index) => (\n                <div\n                    key={index}\n                    className={styles.voiceRecordIndicatorBar}\n                    style={\n                        {\n                            '--target-height': targetHeight,\n                            animationDelay: `${-PHASE_SHIFT[index]}ms`,\n                        } as CSSProperties\n                    }\n                />\n            ))}\n        </div>\n    );\n};\n\nVoiceRecordIndicator.displayName = 'VoiceRecordIndicator';\n"],"names":["_jsx"],"mappings":";;;;;;AAOA,MAAM,aAAa,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5D,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;MAEtD,oBAAoB,GAAuC,CAAC,EAAE,MAAM,EAAE,KAAI;AACnF,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,QACIA,aACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,EAAE;AAC/C,YAAA,CAAC,MAAM,CAAC,4BAA4B,GAAG,QAAQ;SAClD,CAAC,EAAA,QAAA,EAED,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,MACnCA,aAEI,SAAS,EAAE,MAAM,CAAC,uBAAuB,EACzC,KAAK,EACD;AACI,gBAAA,iBAAiB,EAAE,YAAY;AAC/B,gBAAA,cAAc,EAAE,CAAG,EAAA,CAAC,WAAW,CAAC,KAAK,CAAC,CAAI,EAAA,CAAA;AAC5B,aAAA,EAAA,EANjB,KAAK,CAQZ,CACL,CAAC,EAAA,CACA,EACR;AACN,EAAE;AAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB;;;;"}
+{"version":3,"file":"VoiceRecordIndicator.js","sources":["src/internal/VoiceRecordIndicator.tsx"],"sourcesContent":["import { type CSSProperties, type FC } from 'react';\nimport classNames from 'classnames';\n\nimport { useHasSound } from '@hh.ru/magritte-ui-chat-input/internal/useHasSound';\n\nimport styles from '../styles.less';\n\nconst TARGET_HEIGHT = [2, 11, 22, 22, 22, 11, 22, 11, 6, 2];\nconst PHASE_SHIFT = [240, 120, 40, 210, 70, 180, 20, 150, 90, 260];\n\nexport const VoiceRecordIndicator: FC<{ stream: MediaStream | null }> = ({ stream }) => {\n    const hasSound = useHasSound(stream);\n\n    return (\n        <div\n            className={classNames(styles.voiceRecordIndicator, {\n                [styles.voiceRecordIndicatorHasSound]: hasSound,\n            })}\n        >\n            {TARGET_HEIGHT.map((targetHeight, index) => (\n                <div\n                    key={index}\n                    className={styles.voiceRecordIndicatorBar}\n                    style={\n                        {\n                            '--target-height': targetHeight,\n                            animationDelay: `${-PHASE_SHIFT[index]}ms`,\n                        } as CSSProperties\n                    }\n                />\n            ))}\n        </div>\n    );\n};\n\nVoiceRecordIndicator.displayName = 'VoiceRecordIndicator';\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,aAAA,GAAgB,CAAC,CAAA,EAAG,EAAI,EAAA,EAAA,EAAI,EAAI,EAAA,EAAA,EAAI,EAAI,EAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAC1D,MAAM,WAAA,GAAc,CAAC,GAAA,EAAK,GAAK,EAAA,EAAA,EAAI,GAAK,EAAA,EAAA,EAAI,GAAK,EAAA,EAAA,EAAI,GAAK,EAAA,EAAA,EAAI,GAAG,CAAA,CAAA;AAE1D,MAAM,oBAA2D,GAAA,CAAC,EAAE,MAAA,EAAa,KAAA;AACpF,EAAM,MAAA,QAAA,GAAW,YAAY,MAAM,CAAA,CAAA;AAEnC,EACI,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAW,UAAW,CAAA,MAAA,CAAO,oBAAsB,EAAA;AAAA,QAC/C,CAAC,MAAO,CAAA,4BAA4B,GAAG,QAAA;AAAA,OAC1C,CAAA;AAAA,MAEA,QAAc,EAAA,aAAA,CAAA,GAAA,CAAI,CAAC,YAAA,EAAc,KAC9B,qBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEG,WAAW,MAAO,CAAA,uBAAA;AAAA,UAClB,KACI,EAAA;AAAA,YACI,iBAAmB,EAAA,YAAA;AAAA,YACnB,cAAgB,EAAA,CAAA,EAAG,CAAC,WAAA,CAAY,KAAK,CAAC,CAAA,EAAA,CAAA;AAAA,WAC1C;AAAA,SAAA;AAAA,QANC,KAAA;AAAA,OASZ,CAAA;AAAA,KAAA;AAAA,GACL,CAAA;AAER,EAAA;AAEA,oBAAA,CAAqB,WAAc,GAAA,sBAAA;;;;"}

package/internal/flattenFragments.js

@@ -1,19 +1,15 @@
 import './../index.css';
 import { Children, isValidElement, Fragment, cloneElement } from 'react';
 
-/** Раскрывает фрагменты в плоский список детей. Children.toArray сохраняет ключи детей —
- * их можно перенести на обёртку, чтобы удаление элемента из середины не сдвигало стейт соседей.
- * Внутренний Children.toArray нумерует детей фрагмента заново (.0, .1), поэтому к их ключам
- * добавляется ключ фрагмента — иначе они совпадут с ключами соседей фрагмента */
-const flattenFragments = (children, keyPrefix = '') => Children.toArray(children).flatMap((child) => {
-    if (!isValidElement(child)) {
-        return child;
-    }
-    const key = `${keyPrefix}${child.key}`;
-    if (child.type === Fragment) {
-        return flattenFragments(child.props.children, key);
-    }
-    return keyPrefix ? cloneElement(child, { key }) : child;
+const flattenFragments = (children, keyPrefix = "") => Children.toArray(children).flatMap((child) => {
+  if (!isValidElement(child)) {
+    return child;
+  }
+  const key = `${keyPrefix}${child.key}`;
+  if (child.type === Fragment) {
+    return flattenFragments(child.props.children, key);
+  }
+  return keyPrefix ? cloneElement(child, { key }) : child;
 });
 
 export { flattenFragments };

package/internal/flattenFragments.js.map

@@ -1 +1 @@
-{"version":3,"file":"flattenFragments.js","sources":["src/internal/flattenFragments.ts"],"sourcesContent":["import { Children, cloneElement, Fragment, isValidElement, type PropsWithChildren, type ReactNode } from 'react';\n\n/** Раскрывает фрагменты в плоский список детей. Children.toArray сохраняет ключи детей —\n * их можно перенести на обёртку, чтобы удаление элемента из середины не сдвигало стейт соседей.\n * Внутренний Children.toArray нумерует детей фрагмента заново (.0, .1), поэтому к их ключам\n * добавляется ключ фрагмента — иначе они совпадут с ключами соседей фрагмента */\nexport const flattenFragments = (children: ReactNode, keyPrefix = ''): ReactNode[] =>\n    Children.toArray(children).flatMap((child) => {\n        if (!isValidElement(child)) {\n            return child;\n        }\n        const key = `${keyPrefix}${child.key}`;\n        if (child.type === Fragment) {\n            return flattenFragments((child.props as PropsWithChildren).children, key);\n        }\n        return keyPrefix ? cloneElement(child, { key }) : child;\n    });\n"],"names":[],"mappings":";;AAEA;;;AAGiF;AACpE,MAAA,gBAAgB,GAAG,CAAC,QAAmB,EAAE,SAAS,GAAG,EAAE,KAChE,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACzC,IAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;AACxB,QAAA,OAAO,KAAK,CAAC;KAChB;IACD,MAAM,GAAG,GAAG,CAAG,EAAA,SAAS,GAAG,KAAK,CAAC,GAAG,CAAA,CAAE,CAAC;AACvC,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;QACzB,OAAO,gBAAgB,CAAE,KAAK,CAAC,KAA2B,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;KAC7E;AACD,IAAA,OAAO,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC;AAC5D,CAAC;;;;"}
+{"version":3,"file":"flattenFragments.js","sources":["src/internal/flattenFragments.ts"],"sourcesContent":["import { Children, cloneElement, Fragment, isValidElement, type PropsWithChildren, type ReactNode } from 'react';\n\n/** Раскрывает фрагменты в плоский список детей. Children.toArray сохраняет ключи детей —\n * их можно перенести на обёртку, чтобы удаление элемента из середины не сдвигало стейт соседей.\n * Внутренний Children.toArray нумерует детей фрагмента заново (.0, .1), поэтому к их ключам\n * добавляется ключ фрагмента — иначе они совпадут с ключами соседей фрагмента */\nexport const flattenFragments = (children: ReactNode, keyPrefix = ''): ReactNode[] =>\n    Children.toArray(children).flatMap((child) => {\n        if (!isValidElement(child)) {\n            return child;\n        }\n        const key = `${keyPrefix}${child.key}`;\n        if (child.type === Fragment) {\n            return flattenFragments((child.props as PropsWithChildren).children, key);\n        }\n        return keyPrefix ? cloneElement(child, { key }) : child;\n    });\n"],"names":[],"mappings":";;AAMa,MAAA,gBAAA,GAAmB,CAAC,QAAA,EAAqB,SAAY,GAAA,EAAA,KAC9D,QAAS,CAAA,OAAA,CAAQ,QAAQ,CAAA,CAAE,OAAQ,CAAA,CAAC,KAAU,KAAA;AAC1C,EAAI,IAAA,CAAC,cAAe,CAAA,KAAK,CAAG,EAAA;AACxB,IAAO,OAAA,KAAA,CAAA;AAAA,GACX;AACA,EAAA,MAAM,GAAM,GAAA,CAAA,EAAG,SAAS,CAAA,EAAG,MAAM,GAAG,CAAA,CAAA,CAAA;AACpC,EAAI,IAAA,KAAA,CAAM,SAAS,QAAU,EAAA;AACzB,IAAA,OAAO,gBAAkB,CAAA,KAAA,CAAM,KAA4B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAAA,GAC5E;AACA,EAAA,OAAO,YAAY,YAAa,CAAA,KAAA,EAAO,EAAE,GAAA,EAAK,CAAI,GAAA,KAAA,CAAA;AACtD,CAAC;;;;"}

package/internal/focusGroup.js

@@ -1,35 +1,25 @@
 import './../index.css';
-// Roving tabindex для кнопок ChatInput (см. useRovingFocusGroup). Приоритет обхода задаётся
-// data-атрибутом на контейнере: либо на обёртке-маркере вокруг наших кнопок (FocusTarget), либо
-// прямо на div-е слота — тогда он распространяется на все фокусабельные элементы приложения внутри.
-// Для элемента действует ближайший контейнер-предок, поэтому send/voice внутри слота обгоняют
-// «прочие» кнопки этого же слота.
-const FOCUS_PRIORITY_ATTR = 'data-magritte-chat-input-focus-priority';
-/** Атрибут приоритета для спреда на существующий хост-элемент (слотовый div и т.п.);
- * там, где хоста нет (иконки-кнопки), — обёртка FocusTarget */
+const FOCUS_PRIORITY_ATTR = "data-magritte-chat-input-focus-priority";
 const focusPriorityProps = (priority) => ({
-    [FOCUS_PRIORITY_ATTR]: priority,
+  [FOCUS_PRIORITY_ATTR]: priority
 });
-// Значения статические, без деления на режимы: неактивный слой режима всегда под aria-hidden
-// (ModeTransition ставит его синхронно со сменой режима), а такие элементы из обхода исключаются —
-// поэтому наборы текстового и голосового режимов никогда не встречаются в одном списке
 const FOCUS_PRIORITY = {
-    /** Кнопка отправки — первая среди кнопок текстового режима */
-    send: 1,
-    /** Кнопка записи голоса — сразу после отправки */
-    voice: 2,
-    /** «Прочие» кнопки правого слота */
-    rightSlot: 3,
-    /** «Прочие» кнопки левого слота */
-    leftSlot: 4,
-    /** Кнопки центрального слота */
-    centralSlot: 5,
-    /** Интерактив внутри превью */
-    previewSlot: 6,
-    /** Подтверждение записи (галочка) — первая в слое записи */
-    voiceComplete: 1,
-    /** Отмена записи (крестик) */
-    voiceCancel: 2,
+  /** Кнопка отправки — первая среди кнопок текстового режима */
+  send: 1,
+  /** Кнопка записи голоса — сразу после отправки */
+  voice: 2,
+  /** «Прочие» кнопки правого слота */
+  rightSlot: 3,
+  /** «Прочие» кнопки левого слота */
+  leftSlot: 4,
+  /** Кнопки центрального слота */
+  centralSlot: 5,
+  /** Интерактив внутри превью */
+  previewSlot: 6,
+  /** Подтверждение записи (галочка) — первая в слое записи */
+  voiceComplete: 1,
+  /** Отмена записи (крестик) */
+  voiceCancel: 2
 };
 
 export { FOCUS_PRIORITY, FOCUS_PRIORITY_ATTR, focusPriorityProps };

package/internal/focusGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusGroup.js","sources":["src/internal/focusGroup.ts"],"sourcesContent":["// Roving tabindex для кнопок ChatInput (см. useRovingFocusGroup). Приоритет обхода задаётся\n// data-атрибутом на контейнере: либо на обёртке-маркере вокруг наших кнопок (FocusTarget), либо\n// прямо на div-е слота — тогда он распространяется на все фокусабельные элементы приложения внутри.\n// Для элемента действует ближайший контейнер-предок, поэтому send/voice внутри слота обгоняют\n// «прочие» кнопки этого же слота.\n\nexport const FOCUS_PRIORITY_ATTR = 'data-magritte-chat-input-focus-priority';\n\n/** Атрибут приоритета для спреда на существующий хост-элемент (слотовый div и т.п.);\n * там, где хоста нет (иконки-кнопки), — обёртка FocusTarget */\nexport const focusPriorityProps = (priority: number): Record<string, number> => ({\n    [FOCUS_PRIORITY_ATTR]: priority,\n});\n\n// Значения статические, без деления на режимы: неактивный слой режима всегда под aria-hidden\n// (ModeTransition ставит его синхронно со сменой режима), а такие элементы из обхода исключаются —\n// поэтому наборы текстового и голосового режимов никогда не встречаются в одном списке\nexport const FOCUS_PRIORITY = {\n    /** Кнопка отправки — первая среди кнопок текстового режима */\n    send: 1,\n    /** Кнопка записи голоса — сразу после отправки */\n    voice: 2,\n    /** «Прочие» кнопки правого слота */\n    rightSlot: 3,\n    /** «Прочие» кнопки левого слота */\n    leftSlot: 4,\n    /** Кнопки центрального слота */\n    centralSlot: 5,\n    /** Интерактив внутри превью */\n    previewSlot: 6,\n    /** Подтверждение записи (галочка) — первая в слое записи */\n    voiceComplete: 1,\n    /** Отмена записи (крестик) */\n    voiceCancel: 2,\n} as const;\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB,GAAG,0CAA0C;AAE7E;AAC+D;MAClD,kBAAkB,GAAG,CAAC,QAAgB,MAA8B;IAC7E,CAAC,mBAAmB,GAAG,QAAQ;AAClC,CAAA,EAAE;AAEH;AACA;AACA;AACa,MAAA,cAAc,GAAG;;AAE1B,IAAA,IAAI,EAAE,CAAC;;AAEP,IAAA,KAAK,EAAE,CAAC;;AAER,IAAA,SAAS,EAAE,CAAC;;AAEZ,IAAA,QAAQ,EAAE,CAAC;;AAEX,IAAA,WAAW,EAAE,CAAC;;AAEd,IAAA,WAAW,EAAE,CAAC;;AAEd,IAAA,aAAa,EAAE,CAAC;;AAEhB,IAAA,WAAW,EAAE,CAAC;;;;;"}
+{"version":3,"file":"focusGroup.js","sources":["src/internal/focusGroup.ts"],"sourcesContent":["// Roving tabindex для кнопок ChatInput (см. useRovingFocusGroup). Приоритет обхода задаётся\n// data-атрибутом на контейнере: либо на обёртке-маркере вокруг наших кнопок (FocusTarget), либо\n// прямо на div-е слота — тогда он распространяется на все фокусабельные элементы приложения внутри.\n// Для элемента действует ближайший контейнер-предок, поэтому send/voice внутри слота обгоняют\n// «прочие» кнопки этого же слота.\n\nexport const FOCUS_PRIORITY_ATTR = 'data-magritte-chat-input-focus-priority';\n\n/** Атрибут приоритета для спреда на существующий хост-элемент (слотовый div и т.п.);\n * там, где хоста нет (иконки-кнопки), — обёртка FocusTarget */\nexport const focusPriorityProps = (priority: number): Record<string, number> => ({\n    [FOCUS_PRIORITY_ATTR]: priority,\n});\n\n// Значения статические, без деления на режимы: неактивный слой режима всегда под aria-hidden\n// (ModeTransition ставит его синхронно со сменой режима), а такие элементы из обхода исключаются —\n// поэтому наборы текстового и голосового режимов никогда не встречаются в одном списке\nexport const FOCUS_PRIORITY = {\n    /** Кнопка отправки — первая среди кнопок текстового режима */\n    send: 1,\n    /** Кнопка записи голоса — сразу после отправки */\n    voice: 2,\n    /** «Прочие» кнопки правого слота */\n    rightSlot: 3,\n    /** «Прочие» кнопки левого слота */\n    leftSlot: 4,\n    /** Кнопки центрального слота */\n    centralSlot: 5,\n    /** Интерактив внутри превью */\n    previewSlot: 6,\n    /** Подтверждение записи (галочка) — первая в слое записи */\n    voiceComplete: 1,\n    /** Отмена записи (крестик) */\n    voiceCancel: 2,\n} as const;\n"],"names":[],"mappings":"AAMO,MAAM,mBAAsB,GAAA,0CAAA;AAItB,MAAA,kBAAA,GAAqB,CAAC,QAA8C,MAAA;AAAA,EAC7E,CAAC,mBAAmB,GAAG,QAAA;AAC3B,CAAA,EAAA;AAKO,MAAM,cAAiB,GAAA;AAAA;AAAA,EAE1B,IAAM,EAAA,CAAA;AAAA;AAAA,EAEN,KAAO,EAAA,CAAA;AAAA;AAAA,EAEP,SAAW,EAAA,CAAA;AAAA;AAAA,EAEX,QAAU,EAAA,CAAA;AAAA;AAAA,EAEV,WAAa,EAAA,CAAA;AAAA;AAAA,EAEb,WAAa,EAAA,CAAA;AAAA;AAAA,EAEb,aAAe,EAAA,CAAA;AAAA;AAAA,EAEf,WAAa,EAAA,CAAA;AACjB;;;;"}

package/internal/useHasSound.js

@@ -1,76 +1,61 @@
 import './../index.css';
 import { useState, useEffect } from 'react';
 
-// Порог RMS, выше которого считаем, что звук есть (речь по RMS обычно ~0.1+, шумовой пол — ниже)
 const SOUND_RMS_THRESHOLD = 0.02;
-// Сколько держим флаг «звук есть» после последнего громкого кадра — чтобы паузы между словами
-// не роняли индикатор в тишину и он не мигал
 const RELEASE_MS = 350;
-// Период опроса громкости: флаг булев с гистерезисом RELEASE_MS, детализация кадра дисплея тут
-// не нужна — 100 мс дают запас в ~3.5 замера на окно удержания при кратно меньшей нагрузке, чем rAF
 const SAMPLE_INTERVAL_MS = 100;
 const getAudioContextConstructor = () => {
-    if (typeof window === 'undefined') {
-        return null;
-    }
-    const scoped = window;
-    return scoped.AudioContext ?? scoped.webkitAudioContext ?? null;
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const scoped = window;
+  return scoped.AudioContext ?? scoped.webkitAudioContext ?? null;
 };
-/**
- * Флаг «в стриме микрофона сейчас есть звук». Пока стрим есть — держит rAF-цикл и читает
- * RMS через AnalyserNode, сравнивая с порогом (флаг ещё RELEASE_MS удерживается после последнего
- * громкого кадра, чтобы не мигать на паузах между словами). Ререндер только на смене флага.
- * Треки стрима не трогаем — ими владеет сессия записи (`useVoiceRecordSession`), только читаем.
- */
 const useHasSound = (stream) => {
-    const [hasSound, setHasSound] = useState(false);
-    useEffect(() => {
-        const AudioCtx = getAudioContextConstructor();
-        if (!stream || !AudioCtx || stream.getAudioTracks().length === 0) {
-            return undefined;
-        }
-        const audioContext = new AudioCtx();
-        // ctx может стартовать в suspended (autoplay policy); старт всегда из клика по микрофону,
-        // так что resume безопасен и обычно сразу переводит в running
-        void audioContext.resume();
-        const source = audioContext.createMediaStreamSource(stream);
-        const analyser = audioContext.createAnalyser();
-        analyser.fftSize = 256;
-        source.connect(analyser);
-        // Web Audio API принимает данные только в типизированный массив
-        // oxlint-disable-next-line magritte/no-restricted-syntax
-        const buffer = new Uint8Array(analyser.fftSize);
-        let lastLoudAt = 0;
-        let current = false;
-        const tick = () => {
-            analyser.getByteTimeDomainData(buffer);
-            let sumSquares = 0;
-            for (let i = 0; i < buffer.length; i += 1) {
-                const sample = (buffer[i] - 128) / 128;
-                sumSquares += sample * sample;
-            }
-            const rms = Math.sqrt(sumSquares / buffer.length);
-            const now = performance.now();
-            if (rms > SOUND_RMS_THRESHOLD) {
-                lastLoudAt = now;
-            }
-            const next = now - lastLoudAt < RELEASE_MS;
-            if (next !== current) {
-                current = next;
-                setHasSound(next);
-            }
-        };
-        tick();
-        const intervalId = setInterval(tick, SAMPLE_INTERVAL_MS);
-        return () => {
-            clearInterval(intervalId);
-            source.disconnect();
-            analyser.disconnect();
-            void audioContext.close();
-            setHasSound(false);
-        };
-    }, [stream]);
-    return hasSound;
+  const [hasSound, setHasSound] = useState(false);
+  useEffect(() => {
+    const AudioCtx = getAudioContextConstructor();
+    if (!stream || !AudioCtx || stream.getAudioTracks().length === 0) {
+      return void 0;
+    }
+    const audioContext = new AudioCtx();
+    void audioContext.resume();
+    const source = audioContext.createMediaStreamSource(stream);
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = 256;
+    source.connect(analyser);
+    const buffer = new Uint8Array(analyser.fftSize);
+    let lastLoudAt = 0;
+    let current = false;
+    const tick = () => {
+      analyser.getByteTimeDomainData(buffer);
+      let sumSquares = 0;
+      for (let i = 0; i < buffer.length; i += 1) {
+        const sample = (buffer[i] - 128) / 128;
+        sumSquares += sample * sample;
+      }
+      const rms = Math.sqrt(sumSquares / buffer.length);
+      const now = performance.now();
+      if (rms > SOUND_RMS_THRESHOLD) {
+        lastLoudAt = now;
+      }
+      const next = now - lastLoudAt < RELEASE_MS;
+      if (next !== current) {
+        current = next;
+        setHasSound(next);
+      }
+    };
+    tick();
+    const intervalId = setInterval(tick, SAMPLE_INTERVAL_MS);
+    return () => {
+      clearInterval(intervalId);
+      source.disconnect();
+      analyser.disconnect();
+      void audioContext.close();
+      setHasSound(false);
+    };
+  }, [stream]);
+  return hasSound;
 };
 
 export { useHasSound };