@hh.ru/magritte-ui-chat-bubble 1.1.0

package/ChatBubble.d.ts

@@ -0,0 +1,13 @@
+import { ChatBubbleErrorAction } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';
+import { ChatBubbleLabel } from '@hh.ru/magritte-ui-chat-bubble/Label';
+import { ChatBubbleMessage } from '@hh.ru/magritte-ui-chat-bubble/Message';
+import { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';
+import type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
+interface ChatBubbleComponents {
+    ErrorAction: typeof ChatBubbleErrorAction;
+    Label: typeof ChatBubbleLabel;
+    Message: typeof ChatBubbleMessage;
+    Status: typeof ChatBubbleStatus;
+}
+export declare const ChatBubble: React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;
+export {};

package/ChatBubble.js

@@ -0,0 +1,54 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useCallback, useRef, useMemo, cloneElement } from 'react';
+import classnames from 'classnames';
+import { ButtonDefaultPropsContext } from '@hh.ru/magritte-ui-button';
+import { ChatBubbleErrorAction } from './ErrorAction.js';
+import { ChatBubbleLabel } from './Label.js';
+import { ChatBubbleMessage } from './Message.js';
+import { ChatBubbleStatus } from './Status.js';
+import { Meta } from './internal/Meta.js';
+import { Tail } from './internal/Tail.js';
+import { getColors } from './internal/colors.js';
+import { ChatBubbleErrorMenuProvider } from './internal/errorMenu.js';
+import { ChatBubbleModeProvider } from './internal/mode.js';
+import { flattenFragments, isMetaHost } from './internal/utils.js';
+import { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';
+import { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { Menu } from '@hh.ru/magritte-ui-menu';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { s as styles } from './chat-bubble-Djyvds6I.js';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-common-use-translation';
+import '@hh.ru/magritte-ui-tooltip';
+import './chat-bubble-B2HOuNTb.js';
+
+const ChatBubble = forwardRef(({ actions, buttons, children, header, errorActions, mode = 'incoming', showTail = false, status, time, error = false, errorText, 'data-qa': dataQa = 'chat-bubble', className, }, ref) => {
+    const [menuVisible, setMenuVisible] = useState(false);
+    const closeErrorMenu = useCallback(() => setMenuVisible(false), []);
+    const activatorMenuRef = useRef(null);
+    const colors = getColors(mode);
+    const actionsIconProps = useMemo(() => ({ padding: 8, initialColor: colors.actionsIcon }), [colors]);
+    const buttonsProps = useMemo(() => ({ size: 'small', mode: 'secondary', style: colors.button, stretched: true }), [colors]);
+    /**
+     * Время отдаём последнему элементу контента
+     * Позиция времени меняется, в зависимости от компонента
+     * Если последний ребенок не может отрисовать, вставим meta в самый конец
+     */
+    const meta = jsx(Meta, { mode: mode, status: status, time: time });
+    const items = flattenFragments(children);
+    const lastIndex = items.length - 1;
+    const metaHosted = isMetaHost(items[lastIndex]);
+    const content = items.map((child, index) => index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child);
+    return (jsx(ChatBubbleModeProvider, { value: mode, children: jsxs("div", { className: classnames(className, styles.chatBubble, styles[mode], {
+                [styles.withTail]: showTail,
+            }), "data-qa": dataQa, ref: ref, children: [jsxs("div", { className: styles.row, children: [jsxs("div", { className: styles.bubble, children: [header && (jsx("div", { className: styles.header, "data-qa": "chat-bubble-header", children: header })), jsxs("div", { "data-qa": "chat-bubble-content", children: [content, !metaHosted && meta] }), showTail && jsx(Tail, {})] }), mode === 'outgoing' && error && (jsxs("div", { children: [jsx(ExclamationCircleFilledSize24, { ref: activatorMenuRef, initialColor: "negative", onClick: errorActions ? () => setMenuVisible((visible) => !visible) : undefined, "data-qa": "chat-bubble-error-button", "aria-haspopup": errorActions ? 'menu' : undefined, "aria-expanded": errorActions ? menuVisible : undefined }), errorActions && (jsx(Menu, { activatorRef: activatorMenuRef, onClose: closeErrorMenu, placement: "bottom-right", visible: menuVisible, children: jsx(ChatBubbleErrorMenuProvider, { value: closeErrorMenu, children: errorActions }) }))] }))] }), mode === 'outgoing' && error && errorText && (jsx("div", { className: styles.errorText, "data-qa": "chat-bubble-error-text", children: jsx(Text, { typography: "label-4-regular", style: "negative", maxLines: 2, children: errorText }) })), buttons && (mode === 'bot' || mode === 'incoming') && (jsx(ButtonDefaultPropsContext, { props: buttonsProps, children: jsx("div", { className: styles.buttons, "data-qa": "chat-bubble-buttons", children: buttons }) })), actions && (jsx(IconDefaultPropsContext, { props: actionsIconProps, children: jsx("div", { className: styles.actions, "data-qa": "chat-bubble-actions", children: actions }) }))] }) }));
+});
+ChatBubble.displayName = 'ChatBubble';
+ChatBubble.ErrorAction = ChatBubbleErrorAction;
+ChatBubble.Label = ChatBubbleLabel;
+ChatBubble.Message = ChatBubbleMessage;
+ChatBubble.Status = ChatBubbleStatus;
+
+export { ChatBubble };
+//# sourceMappingURL=ChatBubble.js.map

package/ChatBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.js","sources":["src/ChatBubble.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useCallback, useState, useMemo, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { ButtonDefaultPropsContext, type ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { ChatBubbleErrorAction } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';\nimport { ChatBubbleLabel } from '@hh.ru/magritte-ui-chat-bubble/Label';\nimport { ChatBubbleMessage } from '@hh.ru/magritte-ui-chat-bubble/Message';\nimport { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';\nimport { Meta } from '@hh.ru/magritte-ui-chat-bubble/internal/Meta';\nimport { Tail } from '@hh.ru/magritte-ui-chat-bubble/internal/Tail';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { ChatBubbleErrorMenuProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { ChatBubbleModeProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { isMetaHost, flattenFragments } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { IconDefaultPropsContext, type IconProps } from '@hh.ru/magritte-ui-icon';\nimport { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Menu } from '@hh.ru/magritte-ui-menu';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface ChatBubbleComponents {\n    ErrorAction: typeof ChatBubbleErrorAction;\n    Label: typeof ChatBubbleLabel;\n    Message: typeof ChatBubbleMessage;\n    Status: typeof ChatBubbleStatus;\n}\n\nexport const ChatBubble = forwardRef<HTMLDivElement, ChatBubbleProps>(\n    (\n        {\n            actions,\n            buttons,\n            children,\n            header,\n            errorActions,\n            mode = 'incoming',\n            showTail = false,\n            status,\n            time,\n            error = false,\n            errorText,\n            'data-qa': dataQa = 'chat-bubble',\n            className,\n        },\n        ref\n    ) => {\n        const [menuVisible, setMenuVisible] = useState(false);\n        const closeErrorMenu = useCallback(() => setMenuVisible(false), []);\n        const activatorMenuRef = useRef<SVGElement>(null);\n        const colors = getColors(mode);\n        const actionsIconProps: Partial<IconProps> = useMemo(\n            () => ({ padding: 8, initialColor: colors.actionsIcon }),\n            [colors]\n        );\n        const buttonsProps: Partial<ButtonProps> = useMemo(\n            () => ({ size: 'small', mode: 'secondary', style: colors.button, stretched: true }),\n            [colors]\n        );\n        /**\n         * Время отдаём последнему элементу контента\n         * Позиция времени меняется, в зависимости от компонента\n         * Если последний ребенок не может отрисовать, вставим meta в самый конец\n         */\n        const meta = <Meta mode={mode} status={status} time={time} />;\n        const items = flattenFragments(children);\n        const lastIndex = items.length - 1;\n        const metaHosted = isMetaHost(items[lastIndex]);\n        const content = items.map((child, index) =>\n            index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child\n        );\n        return (\n            <ChatBubbleModeProvider value={mode}>\n                <div\n                    className={classnames(className, styles.chatBubble, styles[mode], {\n                        [styles.withTail]: showTail,\n                    })}\n                    data-qa={dataQa}\n                    ref={ref}\n                >\n                    <div className={styles.row}>\n                        <div className={styles.bubble}>\n                            {header && (\n                                <div className={styles.header} data-qa=\"chat-bubble-header\">\n                                    {header}\n                                </div>\n                            )}\n                            <div data-qa=\"chat-bubble-content\">\n                                {content}\n                                {!metaHosted && meta}\n                            </div>\n                            {showTail && <Tail />}\n                        </div>\n                        {mode === 'outgoing' && error && (\n                            <div>\n                                <ExclamationCircleFilledSize24\n                                    ref={activatorMenuRef}\n                                    initialColor=\"negative\"\n                                    onClick={errorActions ? () => setMenuVisible((visible) => !visible) : undefined}\n                                    data-qa=\"chat-bubble-error-button\"\n                                    aria-haspopup={errorActions ? 'menu' : undefined}\n                                    aria-expanded={errorActions ? menuVisible : undefined}\n                                />\n                                {errorActions && (\n                                    <Menu\n                                        activatorRef={activatorMenuRef}\n                                        onClose={closeErrorMenu}\n                                        placement=\"bottom-right\"\n                                        visible={menuVisible}\n                                    >\n                                        <ChatBubbleErrorMenuProvider value={closeErrorMenu}>\n                                            {errorActions}\n                                        </ChatBubbleErrorMenuProvider>\n                                    </Menu>\n                                )}\n                            </div>\n                        )}\n                    </div>\n                    {mode === 'outgoing' && error && errorText && (\n                        <div className={styles.errorText} data-qa=\"chat-bubble-error-text\">\n                            <Text typography=\"label-4-regular\" style=\"negative\" maxLines={2}>\n                                {errorText}\n                            </Text>\n                        </div>\n                    )}\n                    {buttons && (mode === 'bot' || mode === 'incoming') && (\n                        <ButtonDefaultPropsContext props={buttonsProps}>\n                            <div className={styles.buttons} data-qa=\"chat-bubble-buttons\">\n                                {buttons}\n                            </div>\n                        </ButtonDefaultPropsContext>\n                    )}\n                    {actions && (\n                        <IconDefaultPropsContext props={actionsIconProps}>\n                            <div className={styles.actions} data-qa=\"chat-bubble-actions\">\n                                {actions}\n                            </div>\n                        </IconDefaultPropsContext>\n                    )}\n                </div>\n            </ChatBubbleModeProvider>\n        );\n    }\n) as React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;\n\nChatBubble.displayName = 'ChatBubble';\n\nChatBubble.ErrorAction = ChatBubbleErrorAction;\nChatBubble.Label = ChatBubbleLabel;\nChatBubble.Message = ChatBubbleMessage;\nChatBubble.Status = ChatBubbleStatus;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/ErrorAction.d.ts

@@ -0,0 +1,11 @@
+import { type MenuItemProps } from '@hh.ru/magritte-ui-menu';
+export interface ChatBubbleErrorActionProps extends Pick<MenuItemProps, 'children' | 'disabled' | 'icon' | 'style' | 'subtitle' | 'onClick'> {
+    /** Значение data-qa
+     * @default chat-bubble-error-action
+     */
+    'data-qa'?: string;
+}
+/**
+ * Пункт меню, которое открывается по нажатию на иконку ошибки отправки.
+ */
+export declare const ChatBubbleErrorAction: import("react").ForwardRefExoticComponent<ChatBubbleErrorActionProps & import("react").RefAttributes<HTMLDivElement>>;

package/ErrorAction.js

@@ -0,0 +1,21 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useChatBubbleErrorMenuClose } from './internal/errorMenu.js';
+import { Menu } from '@hh.ru/magritte-ui-menu';
+
+/**
+ * Пункт меню, которое открывается по нажатию на иконку ошибки отправки.
+ */
+const ChatBubbleErrorAction = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-error-action', onClick, ...props }, ref) => {
+    const close = useChatBubbleErrorMenuClose();
+    const handleClick = (event) => {
+        onClick?.(event);
+        close();
+    };
+    return jsx(Menu.Item, { ...props, "data-qa": dataQa, onClick: handleClick, ref: ref });
+});
+ChatBubbleErrorAction.displayName = 'ChatBubble.ErrorAction';
+
+export { ChatBubbleErrorAction };
+//# sourceMappingURL=ErrorAction.js.map

package/ErrorAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorAction.js","sources":["src/ErrorAction.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent } from 'react';\n\nimport { useChatBubbleErrorMenuClose } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { Menu, type MenuItemProps } from '@hh.ru/magritte-ui-menu';\n\nexport interface ChatBubbleErrorActionProps\n    extends Pick<MenuItemProps, 'children' | 'disabled' | 'icon' | 'style' | 'subtitle' | 'onClick'> {\n    /** Значение data-qa\n     * @default chat-bubble-error-action\n     */\n    'data-qa'?: string;\n}\n\n/**\n * Пункт меню, которое открывается по нажатию на иконку ошибки отправки.\n */\nexport const ChatBubbleErrorAction = forwardRef<HTMLDivElement, ChatBubbleErrorActionProps>(\n    ({ 'data-qa': dataQa = 'chat-bubble-error-action', onClick, ...props }, ref) => {\n        const close = useChatBubbleErrorMenuClose();\n\n        const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n            onClick?.(event);\n            close();\n        };\n\n        return <Menu.Item {...props} data-qa={dataQa} onClick={handleClick} ref={ref} />;\n    }\n);\n\nChatBubbleErrorAction.displayName = 'ChatBubble.ErrorAction';\n"],"names":["_jsx"],"mappings":";;;;;AAaA;;AAEG;MACU,qBAAqB,GAAG,UAAU,CAC3C,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,0BAA0B,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC3E,IAAA,MAAM,KAAK,GAAG,2BAA2B,EAAE,CAAC;AAE5C,IAAA,MAAM,WAAW,GAAG,CAAC,KAAiC,KAAI;AACtD,QAAA,OAAO,GAAG,KAAK,CAAC,CAAC;AACjB,QAAA,KAAK,EAAE,CAAC;AACZ,KAAC,CAAC;AAEF,IAAA,OAAOA,IAAC,IAAI,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAW,SAAA,EAAA,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AACrF,CAAC,EACH;AAEF,qBAAqB,CAAC,WAAW,GAAG,wBAAwB;;;;"}

package/Label.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface ChatBubbleLabelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Имя отправителя */
+    children?: ReactNode;
+}
+/**
+ * Заголовок сообщения.
+ */
+export declare const ChatBubbleLabel: import("react").ForwardRefExoticComponent<ChatBubbleLabelProps & import("react").RefAttributes<HTMLDivElement>>;

package/Label.js

@@ -0,0 +1,18 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { getColors } from './internal/colors.js';
+import { useChatBubbleMode } from './internal/mode.js';
+import { Text } from '@hh.ru/magritte-ui-typography';
+
+/**
+ * Заголовок сообщения.
+ */
+const ChatBubbleLabel = forwardRef(({ children, ...props }, ref) => {
+    const colors = getColors(useChatBubbleMode());
+    return (jsx("div", { ...props, "data-qa": "chat-bubble-label", ref: ref, children: jsx(Text, { typography: "subtitle-2-semibold", style: colors.accentText, maxLines: 1, children: children }) }));
+});
+ChatBubbleLabel.displayName = 'ChatBubble.Label';
+
+export { ChatBubbleLabel };
+//# sourceMappingURL=Label.js.map

package/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["src/Label.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from 'react';\n\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nexport interface ChatBubbleLabelProps extends HTMLAttributes<HTMLDivElement> {\n    /** Имя отправителя */\n    children?: ReactNode;\n}\n\n/**\n * Заголовок сообщения.\n */\nexport const ChatBubbleLabel = forwardRef<HTMLDivElement, ChatBubbleLabelProps>(({ children, ...props }, ref) => {\n    const colors = getColors(useChatBubbleMode());\n\n    return (\n        <div {...props} data-qa=\"chat-bubble-label\" ref={ref}>\n            <Text typography=\"subtitle-2-semibold\" style={colors.accentText} maxLines={1}>\n                {children}\n            </Text>\n        </div>\n    );\n});\n\nChatBubbleLabel.displayName = 'ChatBubble.Label';\n"],"names":["_jsx"],"mappings":";;;;;;AAWA;;AAEG;AACU,MAAA,eAAe,GAAG,UAAU,CAAuC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC5G,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAE9C,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAA,SAAA,EAAU,mBAAmB,EAAC,GAAG,EAAE,GAAG,EAAA,QAAA,EAChDA,GAAC,CAAA,IAAI,IAAC,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAE,MAAM,CAAC,UAAU,EAAE,QAAQ,EAAE,CAAC,EACvE,QAAA,EAAA,QAAQ,EACN,CAAA,EAAA,CACL,EACR;AACN,CAAC,EAAE;AAEH,eAAe,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/Message.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';
+export interface ChatBubbleMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, ChatBubbleMetaHostProps {
+    /** Опциональный заголовок над текстом */
+    title?: ReactNode;
+    /** Текст сообщения */
+    children?: ReactNode;
+}
+export declare const ChatBubbleMessage: import("react").ForwardRefExoticComponent<ChatBubbleMessageProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;

package/Message.js

@@ -0,0 +1,22 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { getColors } from './internal/colors.js';
+import { useChatBubbleMode } from './internal/mode.js';
+import { markMetaHost } from './internal/utils.js';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { s as styles } from './chat-bubble-Djyvds6I.js';
+
+/**
+ * Текстовая часть сообщения.
+ * Время встаёт в одну строку с последней строкой текста (иначе переносится под текст)
+ */
+const ChatBubbleMessageComponent = forwardRef(({ children, meta, title, ...props }, ref) => {
+    const colors = getColors(useChatBubbleMode());
+    return (jsxs("div", { ...props, className: styles.message, "data-qa": "chat-bubble-message", ref: ref, children: [title && (jsx("div", { className: styles.messageTitle, "data-qa": "chat-bubble-message-title", children: jsx(Text, { Element: "span", typography: "subtitle-2-semibold", style: colors.text, children: title }) })), jsx(Text, { Element: "span", typography: "label-3-regular", style: colors.text, children: children }), meta] }));
+});
+ChatBubbleMessageComponent.displayName = 'ChatBubble.Message';
+const ChatBubbleMessage = markMetaHost(ChatBubbleMessageComponent);
+
+export { ChatBubbleMessage };
+//# sourceMappingURL=Message.js.map

package/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sources":["src/Message.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { markMetaHost, ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, ChatBubbleMetaHostProps {\n    /** Опциональный заголовок над текстом */\n    title?: ReactNode;\n    /** Текст сообщения */\n    children?: ReactNode;\n}\n\n/**\n * Текстовая часть сообщения.\n * Время встаёт в одну строку с последней строкой текста (иначе переносится под текст)\n */\nconst ChatBubbleMessageComponent = forwardRef<HTMLDivElement, ChatBubbleMessageProps>(\n    ({ children, meta, title, ...props }, ref) => {\n        const colors = getColors(useChatBubbleMode());\n\n        return (\n            <div {...props} className={styles.message} data-qa=\"chat-bubble-message\" ref={ref}>\n                {title && (\n                    <div className={styles.messageTitle} data-qa=\"chat-bubble-message-title\">\n                        <Text Element=\"span\" typography=\"subtitle-2-semibold\" style={colors.text}>\n                            {title}\n                        </Text>\n                    </div>\n                )}\n                <Text Element=\"span\" typography=\"label-3-regular\" style={colors.text}>\n                    {children}\n                </Text>\n                {meta}\n            </div>\n        );\n    }\n);\n\nChatBubbleMessageComponent.displayName = 'ChatBubble.Message';\n\nexport const ChatBubbleMessage = markMetaHost(ChatBubbleMessageComponent);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAgBA;;;AAGG;AACH,MAAM,0BAA0B,GAAG,UAAU,CACzC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACzC,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAE9C,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,aAAU,qBAAqB,EAAC,GAAG,EAAE,GAAG,EAC5E,QAAA,EAAA,CAAA,KAAK,KACFC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,SAAA,EAAU,2BAA2B,EAAA,QAAA,EACpEA,IAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EACnE,KAAK,EAAA,CACH,GACL,CACT,EACDA,GAAC,CAAA,IAAI,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAC/D,QAAQ,EACN,CAAA,EACN,IAAI,CAAA,EAAA,CACH,EACR;AACN,CAAC,CACJ,CAAC;AAEF,0BAA0B,CAAC,WAAW,GAAG,oBAAoB,CAAC;MAEjD,iBAAiB,GAAG,YAAY,CAAC,0BAA0B;;;;"}

package/Status.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import type { ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/types';
+import { type TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip';
+export interface ChatBubbleStatusProps extends Omit<TooltipHoverProps, 'activatorRef' | 'placement' | 'size' | 'children'> {
+    /** Статус отправки. У сообщений от бота не используется — там всегда «видно только вам»
+     * @default sending
+     */
+    value?: ChatBubbleStatusValue;
+    /** Текст подсказки. По умолчанию берётся из словаря по статусу */
+    children?: ReactNode;
+    /** Значение data-qa
+     * @default chat-bubble-status
+     */
+    'data-qa'?: string;
+}
+/**
+ * Статус сообщения: иконка и подсказка к ней.
+ */
+export declare const ChatBubbleStatus: import("react").ForwardRefExoticComponent<ChatBubbleStatusProps & import("react").RefAttributes<HTMLSpanElement>>;

package/Status.js

@@ -0,0 +1,34 @@
+import './index.css';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { useTranslation } from '@hh.ru/magritte-common-use-translation';
+import { getColors } from './internal/colors.js';
+import { useChatBubbleMode } from './internal/mode.js';
+import { EyeOutlinedSize16, ClockOutlinedSize16, CheckOutlinedSize16, CheckDoubleOutlinedSize16 } from '@hh.ru/magritte-ui-icon/icon';
+import { TooltipHover } from '@hh.ru/magritte-ui-tooltip';
+import { s as styles } from './chat-bubble-Djyvds6I.js';
+
+const ICON = {
+    sending: ClockOutlinedSize16,
+    sent: CheckOutlinedSize16,
+    delivered: CheckDoubleOutlinedSize16,
+};
+/**
+ * Статус сообщения: иконка и подсказка к ней.
+ */
+const ChatBubbleStatus = forwardRef(({ children, 'data-qa': dataQa = 'chat-bubble-status', value = 'sending', ...tooltipProps }, ref) => {
+    const mode = useChatBubbleMode();
+    const colors = getColors(mode);
+    const activatorRef = useRef(null);
+    const activator = useMultipleRefs(ref, activatorRef);
+    const isBot = mode === 'bot';
+    const label = useTranslation('ChatBubble', isBot ? 'private' : value);
+    // у бота по макету всегда глаз, статус отправки к нему не применяется
+    const Icon = isBot ? EyeOutlinedSize16 : ICON[value];
+    return (jsxs(Fragment, { children: [jsx("span", { ref: activator, className: styles.status, "data-qa": dataQa, "data-status": isBot ? 'private' : value, children: jsx(Icon, { initialColor: colors.statusIcon, "aria-label": label }) }), jsx(TooltipHover, { ...tooltipProps, activatorRef: activatorRef, placement: "top-center", size: "small", children: children ?? label })] }));
+});
+ChatBubbleStatus.displayName = 'ChatBubble.Status';
+
+export { ChatBubbleStatus };
+//# sourceMappingURL=Status.js.map

package/Status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Status.js","sources":["src/Status.tsx"],"sourcesContent":["import { forwardRef, useRef, type ReactNode } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport type { ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport {\n    CheckDoubleOutlinedSize16,\n    CheckOutlinedSize16,\n    ClockOutlinedSize16,\n    EyeOutlinedSize16,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { TooltipHover, type TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip';\n\nimport styles from './chat-bubble.less';\n\nconst ICON = {\n    sending: ClockOutlinedSize16,\n    sent: CheckOutlinedSize16,\n    delivered: CheckDoubleOutlinedSize16,\n} as const;\n\nexport interface ChatBubbleStatusProps\n    extends Omit<TooltipHoverProps, 'activatorRef' | 'placement' | 'size' | 'children'> {\n    /** Статус отправки. У сообщений от бота не используется — там всегда «видно только вам»\n     * @default sending\n     */\n    value?: ChatBubbleStatusValue;\n    /** Текст подсказки. По умолчанию берётся из словаря по статусу */\n    children?: ReactNode;\n    /** Значение data-qa\n     * @default chat-bubble-status\n     */\n    'data-qa'?: string;\n}\n\n/**\n * Статус сообщения: иконка и подсказка к ней.\n */\nexport const ChatBubbleStatus = forwardRef<HTMLSpanElement, ChatBubbleStatusProps>(\n    ({ children, 'data-qa': dataQa = 'chat-bubble-status', value = 'sending', ...tooltipProps }, ref) => {\n        const mode = useChatBubbleMode();\n        const colors = getColors(mode);\n        const activatorRef = useRef<HTMLSpanElement>(null);\n        const activator = useMultipleRefs(ref, activatorRef);\n        const isBot = mode === 'bot';\n        const label = useTranslation('ChatBubble', isBot ? 'private' : value);\n\n        // у бота по макету всегда глаз, статус отправки к нему не применяется\n        const Icon = isBot ? EyeOutlinedSize16 : ICON[value];\n\n        return (\n            <>\n                <span\n                    ref={activator}\n                    className={styles.status}\n                    data-qa={dataQa}\n                    data-status={isBot ? 'private' : value}\n                >\n                    <Icon initialColor={colors.statusIcon} aria-label={label} />\n                </span>\n                <TooltipHover {...tooltipProps} activatorRef={activatorRef} placement=\"top-center\" size=\"small\">\n                    {children ?? label}\n                </TooltipHover>\n            </>\n        );\n    }\n);\n\nChatBubbleStatus.displayName = 'ChatBubble.Status';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;AAiBA,MAAM,IAAI,GAAG;AACT,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,IAAI,EAAE,mBAAmB;AACzB,IAAA,SAAS,EAAE,yBAAyB;CAC9B,CAAC;AAgBX;;AAEG;AACU,MAAA,gBAAgB,GAAG,UAAU,CACtC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,oBAAoB,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,EAAE,GAAG,KAAI;AAChG,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;AAC/B,IAAA,MAAM,YAAY,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,eAAe,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AACrD,IAAA,MAAM,KAAK,GAAG,IAAI,KAAK,KAAK,CAAC;AAC7B,IAAA,MAAM,KAAK,GAAG,cAAc,CAAC,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,CAAC;;AAGtE,IAAA,MAAM,IAAI,GAAG,KAAK,GAAG,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;AAErD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GACI,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,MAAM,EACf,SAAA,EAAA,MAAM,EACF,aAAA,EAAA,KAAK,GAAG,SAAS,GAAG,KAAK,EAEtC,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,YAAY,EAAE,MAAM,CAAC,UAAU,EAAA,YAAA,EAAc,KAAK,EAAA,CAAI,EACzD,CAAA,EACPA,GAAC,CAAA,YAAY,EAAK,EAAA,GAAA,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAC1F,QAAA,EAAA,QAAQ,IAAI,KAAK,EACP,CAAA,CAAA,EAAA,CAChB,EACL;AACN,CAAC,EACH;AAEF,gBAAgB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/chat-bubble-B2HOuNTb.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"tail":"magritte-tail___-1lJ0_1-1-0","tail_outgoing":"magritte-tail_outgoing___cnyh3_1-1-0","tailOutgoing":"magritte-tail_outgoing___cnyh3_1-1-0","meta":"magritte-meta___HT7lp_1-1-0"};
+
+export { styles as s };
+//# sourceMappingURL=chat-bubble-B2HOuNTb.js.map

package/chat-bubble-B2HOuNTb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-bubble-B2HOuNTb.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/chat-bubble-Djyvds6I.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_1-1-0","chatBubble":"magritte-chat-bubble___ds9CP_1-1-0","outgoing":"magritte-outgoing___3n00o_1-1-0","bot":"magritte-bot___Z6vZA_1-1-0","row":"magritte-row___mQNnt_1-1-0","bubble":"magritte-bubble___NVuDI_1-1-0","with-tail":"magritte-with-tail___IdixJ_1-1-0","withTail":"magritte-with-tail___IdixJ_1-1-0","header":"magritte-header___Px2to_1-1-0","message-title":"magritte-message-title___dgBFk_1-1-0","messageTitle":"magritte-message-title___dgBFk_1-1-0","message":"magritte-message___7TEpw_1-1-0","buttons":"magritte-buttons___yQqBi_1-1-0","actions":"magritte-actions___I5GSz_1-1-0","error-text":"magritte-error-text___1ZxWY_1-1-0","errorText":"magritte-error-text___1ZxWY_1-1-0","status":"magritte-status___dHzCt_1-1-0"};
+
+export { styles as s };
+//# sourceMappingURL=chat-bubble-Djyvds6I.js.map

package/chat-bubble-Djyvds6I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-bubble-Djyvds6I.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/index.css

@@ -0,0 +1,134 @@
+:root{
+  --magritte-color-component-chat-bubble-background-incoming-v25-0-1:#F4F6FB;
+  --magritte-color-component-chat-bubble-background-outgoing-v25-0-1:#0070ff;
+  --magritte-color-component-chat-bubble-background-bot-v25-0-1:#f9f7ff;
+  --magritte-color-component-chat-bubble-border-incoming-v25-0-1:#EEF1F7;
+  --magritte-color-component-chat-bubble-border-outgoing-v25-0-1:#0d63e3;
+  --magritte-color-component-chat-bubble-border-bot-v25-0-1:#f3eeff;
+}
+
+.magritte-night-theme{
+  --magritte-color-component-chat-bubble-background-incoming-v25-0-1:#262626;
+  --magritte-color-component-chat-bubble-background-outgoing-v25-0-1:#2b7fff;
+  --magritte-color-component-chat-bubble-background-bot-v25-0-1:#312F47;
+  --magritte-color-component-chat-bubble-border-incoming-v25-0-1:#303030;
+  --magritte-color-component-chat-bubble-border-outgoing-v25-0-1:#0070ff;
+  --magritte-color-component-chat-bubble-border-bot-v25-0-1:#403A59;
+}
+
+.magritte-zp-day-theme{
+  --magritte-color-component-chat-bubble-background-outgoing-v25-0-1:#7195AF;
+  --magritte-color-component-chat-bubble-border-outgoing-v25-0-1:#557B96;
+}
+.magritte-chat-bubble___ds9CP_1-1-0{
+  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-incoming-v25-0-1);
+  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-incoming-v25-0-1);
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  max-width:calc(100% - 40px);
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-chat-bubble___ds9CP_1-1-0{
+    max-width:min(460px, 100%);
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_1-1-0{
+    max-width:min(460px, 100%);
+  }
+}
+.magritte-outgoing___3n00o_1-1-0{
+  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-outgoing-v25-0-1);
+  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-outgoing-v25-0-1);
+  align-items:flex-end;
+  margin-left:auto;
+}
+.magritte-bot___Z6vZA_1-1-0{
+  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-bot-v25-0-1);
+  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-bot-v25-0-1);
+}
+.magritte-row___mQNnt_1-1-0{
+  display:flex;
+  align-items:flex-end;
+  gap:8px;
+  max-width:100%;
+}
+.magritte-bubble___NVuDI_1-1-0{
+  position:relative;
+  box-sizing:border-box;
+  min-width:0;
+  max-width:100%;
+  padding:12px;
+  background-color:var(--magritte-chat-bubble-background);
+  border:1px solid var(--magritte-chat-bubble-border);
+  border-radius:20px;
+  overflow-wrap:break-word;
+}
+.magritte-with-tail___IdixJ_1-1-0 .magritte-bubble___NVuDI_1-1-0{
+  border-bottom-left-radius:0;
+}
+.magritte-with-tail___IdixJ_1-1-0.magritte-outgoing___3n00o_1-1-0 .magritte-bubble___NVuDI_1-1-0{
+  border-bottom-left-radius:20px;
+  border-bottom-right-radius:0;
+}
+.magritte-header___Px2to_1-1-0{
+  display:flex;
+  flex-direction:column;
+  gap:4px;
+  margin-bottom:4px;
+}
+.magritte-message-title___dgBFk_1-1-0{
+  margin-bottom:4px;
+}
+.magritte-message___7TEpw_1-1-0:not(:first-child){
+  margin-top:8px;
+}
+.magritte-buttons___yQqBi_1-1-0{
+  display:grid;
+  grid-template-columns:repeat(2, 1fr);
+  gap:8px;
+  width:100%;
+  margin-top:4px;
+}
+.magritte-buttons___yQqBi_1-1-0 > *:last-child:nth-child(odd){
+  grid-column:span 2;
+}
+.magritte-actions___I5GSz_1-1-0{
+  display:flex;
+  flex-wrap:wrap;
+  gap:2px;
+  margin-top:4px;
+}
+.magritte-error-text___1ZxWY_1-1-0{
+  margin-top:2px;
+}
+.magritte-status___dHzCt_1-1-0{
+  display:inline-flex;
+  vertical-align:middle;
+  margin-left:4px;
+}
+
+.magritte-tail___-1lJ0_1-1-0{
+  position:absolute;
+  bottom:-1px;
+  left:-7px;
+}
+.magritte-tail_outgoing___cnyh3_1-1-0{
+  left:auto;
+  right:-7px;
+  transform:scaleX(-1);
+}
+.magritte-meta___HT7lp_1-1-0{
+  float:right;
+  margin-left:12px;
+  white-space:nowrap;
+  font-family:"hh sans";
+  font-weight:400;
+  line-height:20px;
+  font-size:14px;
+  letter-spacing:0.005em;
+  text-indent:0px;
+  text-transform:none;
+  text-decoration:none;
+}

package/index.d.ts

@@ -0,0 +1,6 @@
+export { ChatBubble } from '@hh.ru/magritte-ui-chat-bubble/ChatBubble';
+export type { ChatBubbleMode, ChatBubbleStatusValue, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
+export type { ChatBubbleErrorActionProps } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';
+export type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';
+export type { ChatBubbleMessageProps } from '@hh.ru/magritte-ui-chat-bubble/Message';
+export type { ChatBubbleStatusProps } from '@hh.ru/magritte-ui-chat-bubble/Status';

package/index.js

@@ -0,0 +1,26 @@
+import './index.css';
+export { ChatBubble } from './ChatBubble.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-ui-button';
+import './ErrorAction.js';
+import './internal/errorMenu.js';
+import '@hh.ru/magritte-ui-menu';
+import './Label.js';
+import './internal/colors.js';
+import './internal/mode.js';
+import '@hh.ru/magritte-ui-typography';
+import './Message.js';
+import './internal/utils.js';
+import './chat-bubble-Djyvds6I.js';
+import './Status.js';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import '@hh.ru/magritte-common-use-translation';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-tooltip';
+import './internal/Meta.js';
+import './chat-bubble-B2HOuNTb.js';
+import './internal/Tail.js';
+import '@hh.ru/magritte-ui-icon';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/index.mock.d.ts

@@ -0,0 +1,11 @@
+export type { ChatBubbleMode, ChatBubbleStatusValue, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
+export type { ChatBubbleErrorActionProps } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';
+export type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';
+export type { ChatBubbleMessageProps } from '@hh.ru/magritte-ui-chat-bubble/Message';
+export type { ChatBubbleStatusProps } from '@hh.ru/magritte-ui-chat-bubble/Status';
+export declare const ChatBubble: import("react").ForwardRefExoticComponent<Record<string, unknown>> & {
+    ErrorAction: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
+    Label: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
+    Message: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
+    Status: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
+};

package/index.mock.js

@@ -0,0 +1,16 @@
+import './index.css';
+import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
+
+const ErrorAction = mockComponent('ChatBubble.ErrorAction', undefined, { withChildren: true });
+const Label = mockComponent('ChatBubble.Label', undefined, { withChildren: true });
+const Message = mockComponent('ChatBubble.Message', undefined, { withChildren: true });
+const Status = mockComponent('ChatBubble.Status', undefined, { withChildren: true });
+const ChatBubble = Object.assign(mockComponent('ChatBubble', undefined, { withChildren: true }), {
+    ErrorAction,
+    Label,
+    Message,
+    Status,
+});
+
+export { ChatBubble };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["src/index.mock.ts"],"sourcesContent":["import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport type { ChatBubbleMode, ChatBubbleStatusValue, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';\nexport type { ChatBubbleErrorActionProps } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';\nexport type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';\nexport type { ChatBubbleMessageProps } from '@hh.ru/magritte-ui-chat-bubble/Message';\nexport type { ChatBubbleStatusProps } from '@hh.ru/magritte-ui-chat-bubble/Status';\n\nconst ErrorAction = mockComponent('ChatBubble.ErrorAction', undefined, { withChildren: true });\nconst Label = mockComponent('ChatBubble.Label', undefined, { withChildren: true });\nconst Message = mockComponent('ChatBubble.Message', undefined, { withChildren: true });\nconst Status = mockComponent('ChatBubble.Status', undefined, { withChildren: true });\n\nexport const ChatBubble = Object.assign(mockComponent('ChatBubble', undefined, { withChildren: true }), {\n    ErrorAction,\n    Label,\n    Message,\n    Status,\n});\n"],"names":[],"mappings":";;AAQA,MAAM,WAAW,GAAG,aAAa,CAAC,wBAAwB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAC/F,MAAM,KAAK,GAAG,aAAa,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACnF,MAAM,OAAO,GAAG,aAAa,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACvF,MAAM,MAAM,GAAG,aAAa,CAAC,mBAAmB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;MAExE,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE;IACpG,WAAW;IACX,KAAK;IACL,OAAO;IACP,MAAM;AACT,CAAA;;;;"}

package/internal/Meta.d.ts

@@ -0,0 +1,13 @@
+import { type FC, type ReactNode } from 'react';
+import type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';
+interface MetaProps {
+    mode: ChatBubbleMode;
+    status?: ReactNode;
+    time?: ReactNode;
+}
+/**
+ * Время и статус сообщения
+ * Рендерится внутри последнего элемента контента.
+ * */
+export declare const Meta: FC<MetaProps>;
+export {};

package/internal/Meta.js

@@ -0,0 +1,20 @@
+import './../index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColors } from './colors.js';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { s as styles } from '../chat-bubble-B2HOuNTb.js';
+
+/**
+ * Время и статус сообщения
+ * Рендерится внутри последнего элемента контента.
+ * */
+const Meta = ({ mode, status, time }) => {
+    const visibleStatus = mode === 'incoming' ? undefined : status;
+    if (!time && !visibleStatus) {
+        return null;
+    }
+    return (jsxs("span", { className: styles.meta, "data-qa": "chat-bubble-meta", children: [time && (jsx(Text, { Element: "span", typography: "label-4-regular", style: getColors(mode).secondaryText, children: time })), visibleStatus] }));
+};
+
+export { Meta };
+//# sourceMappingURL=Meta.js.map

package/internal/Meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meta.js","sources":["src/internal/Meta.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\n\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface MetaProps {\n    mode: ChatBubbleMode;\n    status?: ReactNode;\n    time?: ReactNode;\n}\n\n/**\n * Время и статус сообщения\n * Рендерится внутри последнего элемента контента.\n * */\nexport const Meta: FC<MetaProps> = ({ mode, status, time }) => {\n    const visibleStatus = mode === 'incoming' ? undefined : status;\n\n    if (!time && !visibleStatus) {\n        return null;\n    }\n\n    return (\n        <span className={styles.meta} data-qa=\"chat-bubble-meta\">\n            {time && (\n                <Text Element=\"span\" typography=\"label-4-regular\" style={getColors(mode).secondaryText}>\n                    {time}\n                </Text>\n            )}\n            {visibleStatus}\n        </span>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAcA;;;AAGK;AACE,MAAM,IAAI,GAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAI;AAC1D,IAAA,MAAM,aAAa,GAAG,IAAI,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAE/D,IAAA,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;AACzB,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,QACIA,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAU,SAAA,EAAA,kBAAkB,EACnD,QAAA,EAAA,CAAA,IAAI,KACDC,GAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,aAAa,EAAA,QAAA,EACjF,IAAI,EACF,CAAA,CACV,EACA,aAAa,CAAA,EAAA,CACX,EACT;AACN;;;;"}

package/internal/Tail.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+/** Хвост сообщения */
+export declare const Tail: FC;

package/internal/Tail.js

@@ -0,0 +1,16 @@
+import './../index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { useChatBubbleMode } from './mode.js';
+import { s as styles } from '../chat-bubble-B2HOuNTb.js';
+import 'react';
+
+const OUTLINE = 'M6.5 0C6.5 7.5 5.2 11.8 1.6 13.4C0.9 13.9 0.6 14.5 1.1 14.5H7';
+/** Хвост сообщения */
+const Tail = () => {
+    const mode = useChatBubbleMode();
+    return (jsxs("svg", { className: classnames(styles.tail, { [styles.tailOutgoing]: mode === 'outgoing' }), xmlns: "http://www.w3.org/2000/svg", width: "7", height: "15", viewBox: "0 0 7 15", fill: "none", "aria-hidden": true, focusable: "false", children: [jsx("path", { d: `${OUTLINE}V0Z`, fill: "var(--magritte-chat-bubble-background)" }), jsx("path", { d: OUTLINE, stroke: "var(--magritte-chat-bubble-border)", strokeWidth: "1" })] }));
+};
+
+export { Tail };
+//# sourceMappingURL=Tail.js.map

package/internal/Tail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tail.js","sources":["src/internal/Tail.tsx"],"sourcesContent":["import { type FC } from 'react';\nimport classnames from 'classnames';\n\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\n\nimport styles from './chat-bubble.less';\n\nconst OUTLINE = 'M6.5 0C6.5 7.5 5.2 11.8 1.6 13.4C0.9 13.9 0.6 14.5 1.1 14.5H7';\n\n/** Хвост сообщения */\nexport const Tail: FC = () => {\n    const mode = useChatBubbleMode();\n\n    return (\n        <svg\n            className={classnames(styles.tail, { [styles.tailOutgoing]: mode === 'outgoing' })}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"7\"\n            height=\"15\"\n            viewBox=\"0 0 7 15\"\n            fill=\"none\"\n            aria-hidden\n            focusable=\"false\"\n        >\n            {/* Заливка заходит под границу баббла и перекрывает её в месте стыка */}\n            <path d={`${OUTLINE}V0Z`} fill=\"var(--magritte-chat-bubble-background)\" />\n            <path d={OUTLINE} stroke=\"var(--magritte-chat-bubble-border)\" strokeWidth=\"1\" />\n        </svg>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAOA,MAAM,OAAO,GAAG,+DAA+D,CAAC;AAEhF;AACO,MAAM,IAAI,GAAO,MAAK;AACzB,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AAEjC,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,GAAG,IAAI,KAAK,UAAU,EAAE,CAAC,EAClF,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EAAA,aAAA,EAAA,IAAA,EAEX,SAAS,EAAC,OAAO,EAGjB,QAAA,EAAA,CAAAC,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAE,CAAA,EAAG,OAAO,CAAA,GAAA,CAAK,EAAE,IAAI,EAAC,wCAAwC,EAAA,CAAG,EAC1EA,GAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,EAAC,oCAAoC,EAAC,WAAW,EAAC,GAAG,EAAG,CAAA,CAAA,EAAA,CAC9E,EACR;AACN;;;;"}

package/internal/colors.d.ts

@@ -0,0 +1,19 @@
+import type { ButtonStyle } from '@hh.ru/magritte-ui-button';
+import type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';
+import type { IconColor } from '@hh.ru/magritte-ui-icon';
+import type { TextStyle } from '@hh.ru/magritte-ui-typography';
+export interface ChatBubbleColors {
+    /** Основной текст сообщения */
+    text: TextStyle;
+    /** Второстепенный текст: время, размер файла, описание сниппета */
+    secondaryText: TextStyle;
+    /** Акцентный текст: имя отправителя, автор цитаты, заголовок сниппета */
+    accentText: TextStyle;
+    /** Иконка статуса, лежит на фоне баббла */
+    statusIcon: IconColor;
+    /** Иконки действий, лежат под бабблом на фоне страницы */
+    actionsIcon: IconColor;
+    /** Кнопки под бабблом */
+    button: ButtonStyle;
+}
+export declare const getColors: (mode: ChatBubbleMode) => ChatBubbleColors;

package/internal/colors.js

@@ -0,0 +1,31 @@
+import './../index.css';
+const COLORS = {
+    incoming: {
+        text: 'primary',
+        secondaryText: 'secondary',
+        accentText: 'accent',
+        statusIcon: 'constant',
+        actionsIcon: 'secondary',
+        button: 'neutral',
+    },
+    outgoing: {
+        text: 'constant',
+        secondaryText: 'constant',
+        accentText: 'constant',
+        statusIcon: 'constant',
+        actionsIcon: 'accent',
+        button: 'accent',
+    },
+    bot: {
+        text: 'primary',
+        secondaryText: 'secondary',
+        accentText: 'special',
+        statusIcon: 'special',
+        actionsIcon: 'special',
+        button: 'special',
+    },
+};
+const getColors = (mode) => COLORS[mode];
+
+export { getColors };
+//# sourceMappingURL=colors.js.map

package/internal/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["src/internal/colors.ts"],"sourcesContent":["import type { ButtonStyle } from '@hh.ru/magritte-ui-button';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport type { IconColor } from '@hh.ru/magritte-ui-icon';\nimport type { TextStyle } from '@hh.ru/magritte-ui-typography';\n\nexport interface ChatBubbleColors {\n    /** Основной текст сообщения */\n    text: TextStyle;\n    /** Второстепенный текст: время, размер файла, описание сниппета */\n    secondaryText: TextStyle;\n    /** Акцентный текст: имя отправителя, автор цитаты, заголовок сниппета */\n    accentText: TextStyle;\n    /** Иконка статуса, лежит на фоне баббла */\n    statusIcon: IconColor;\n    /** Иконки действий, лежат под бабблом на фоне страницы */\n    actionsIcon: IconColor;\n    /** Кнопки под бабблом */\n    button: ButtonStyle;\n}\n\nconst COLORS: Record<ChatBubbleMode, ChatBubbleColors> = {\n    incoming: {\n        text: 'primary',\n        secondaryText: 'secondary',\n        accentText: 'accent',\n        statusIcon: 'constant',\n        actionsIcon: 'secondary',\n        button: 'neutral',\n    },\n    outgoing: {\n        text: 'constant',\n        secondaryText: 'constant',\n        accentText: 'constant',\n        statusIcon: 'constant',\n        actionsIcon: 'accent',\n        button: 'accent',\n    },\n    bot: {\n        text: 'primary',\n        secondaryText: 'secondary',\n        accentText: 'special',\n        statusIcon: 'special',\n        actionsIcon: 'special',\n        button: 'special',\n    },\n};\n\nexport const getColors = (mode: ChatBubbleMode): ChatBubbleColors => COLORS[mode];\n"],"names":[],"mappings":"AAoBA,MAAM,MAAM,GAA6C;AACrD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,WAAW,EAAE,WAAW;AACxB,QAAA,MAAM,EAAE,SAAS;AACpB,KAAA;AACD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,MAAM,EAAE,QAAQ;AACnB,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,MAAM,EAAE,SAAS;AACpB,KAAA;CACJ,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,IAAoB,KAAuB,MAAM,CAAC,IAAI;;;;"}

package/internal/errorMenu.d.ts

@@ -0,0 +1,2 @@
+export declare const ChatBubbleErrorMenuProvider: import("react").Provider<VoidFunction>;
+export declare const useChatBubbleErrorMenuClose: () => VoidFunction;

package/internal/errorMenu.js

@@ -0,0 +1,10 @@
+import './../index.css';
+import { createContext, useContext } from 'react';
+
+const noop = () => undefined;
+const ChatBubbleErrorMenuContext = createContext(noop);
+const ChatBubbleErrorMenuProvider = ChatBubbleErrorMenuContext.Provider;
+const useChatBubbleErrorMenuClose = () => useContext(ChatBubbleErrorMenuContext);
+
+export { ChatBubbleErrorMenuProvider, useChatBubbleErrorMenuClose };
+//# sourceMappingURL=errorMenu.js.map

package/internal/errorMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errorMenu.js","sources":["src/internal/errorMenu.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nconst noop = () => undefined;\n\nconst ChatBubbleErrorMenuContext = createContext<VoidFunction>(noop);\n\nexport const ChatBubbleErrorMenuProvider = ChatBubbleErrorMenuContext.Provider;\n\nexport const useChatBubbleErrorMenuClose = (): VoidFunction => useContext(ChatBubbleErrorMenuContext);\n"],"names":[],"mappings":";;AAEA,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC;AAE7B,MAAM,0BAA0B,GAAG,aAAa,CAAe,IAAI,CAAC,CAAC;AAExD,MAAA,2BAA2B,GAAG,0BAA0B,CAAC,SAAS;AAElE,MAAA,2BAA2B,GAAG,MAAoB,UAAU,CAAC,0BAA0B;;;;"}

package/internal/mode.d.ts

@@ -0,0 +1,4 @@
+import type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';
+/** Прокидывает режим баббла в подкомпоненты: от него зависят цвета текста и иконок. */
+export declare const ChatBubbleModeProvider: import("react").Provider<ChatBubbleMode>;
+export declare const useChatBubbleMode: () => ChatBubbleMode;

package/internal/mode.js

@@ -0,0 +1,10 @@
+import './../index.css';
+import { createContext, useContext } from 'react';
+
+const ChatBubbleModeContext = createContext('incoming');
+/** Прокидывает режим баббла в подкомпоненты: от него зависят цвета текста и иконок. */
+const ChatBubbleModeProvider = ChatBubbleModeContext.Provider;
+const useChatBubbleMode = () => useContext(ChatBubbleModeContext);
+
+export { ChatBubbleModeProvider, useChatBubbleMode };
+//# sourceMappingURL=mode.js.map

package/internal/mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode.js","sources":["src/internal/mode.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\n\nconst ChatBubbleModeContext = createContext<ChatBubbleMode>('incoming');\n\n/** Прокидывает режим баббла в подкомпоненты: от него зависят цвета текста и иконок. */\nexport const ChatBubbleModeProvider = ChatBubbleModeContext.Provider;\n\nexport const useChatBubbleMode = (): ChatBubbleMode => useContext(ChatBubbleModeContext);\n"],"names":[],"mappings":";;AAIA,MAAM,qBAAqB,GAAG,aAAa,CAAiB,UAAU,CAAC,CAAC;AAExE;AACa,MAAA,sBAAsB,GAAG,qBAAqB,CAAC,SAAS;AAExD,MAAA,iBAAiB,GAAG,MAAsB,UAAU,CAAC,qBAAqB;;;;"}

package/internal/utils.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement, type ReactNode } from 'react';
+/** Помечает подкомпонент как умеющий принять слот времени и статуса */
+export interface ChatBubbleMetaHostProps {
+    meta?: ReactNode;
+}
+export interface MetaHostComponent {
+    hostsMeta: true;
+}
+export declare const markMetaHost: <T extends object>(component: T) => T & MetaHostComponent;
+export declare const isMetaHost: (node: ReactNode) => node is ReactElement<ChatBubbleMetaHostProps>;
+export declare const flattenFragments: (children: ReactNode, keyPrefix?: string) => ReactNode[];

package/internal/utils.js

@@ -0,0 +1,18 @@
+import './../index.css';
+import { isValidElement, Children, Fragment, cloneElement } from 'react';
+
+const markMetaHost = (component) => Object.assign(component, { hostsMeta: true });
+const isMetaHost = (node) => isValidElement(node) && typeof node.type === 'object' && 'hostsMeta' in node.type;
+const flattenFragments = (children, keyPrefix = '') => Children.toArray(children).flatMap((child) => {
+    if (!isValidElement(child)) {
+        return child;
+    }
+    const key = `${keyPrefix}${String(child.key)}`;
+    if (child.type === Fragment) {
+        return flattenFragments(child.props.children, key);
+    }
+    return keyPrefix ? cloneElement(child, { key }) : child;
+});
+
+export { flattenFragments, isMetaHost, markMetaHost };
+//# sourceMappingURL=utils.js.map

package/internal/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["src/internal/utils.ts"],"sourcesContent":["import { Children, Fragment, cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';\n\n/** Помечает подкомпонент как умеющий принять слот времени и статуса */\nexport interface ChatBubbleMetaHostProps {\n    meta?: ReactNode;\n}\n\nexport interface MetaHostComponent {\n    hostsMeta: true;\n}\n\nexport const markMetaHost = <T extends object>(component: T): T & MetaHostComponent =>\n    Object.assign(component, { hostsMeta: true } as const);\n\nexport const isMetaHost = (node: ReactNode): node is ReactElement<ChatBubbleMetaHostProps> =>\n    isValidElement(node) && typeof node.type === 'object' && 'hostsMeta' in (node.type as object);\n\nexport const flattenFragments = (children: ReactNode, keyPrefix = ''): ReactNode[] =>\n    Children.toArray(children).flatMap((child) => {\n        if (!isValidElement(child)) {\n            return child;\n        }\n\n        const key = `${keyPrefix}${String(child.key)}`;\n\n        if (child.type === Fragment) {\n            return flattenFragments((child.props as { children?: ReactNode }).children, key);\n        }\n\n        return keyPrefix ? cloneElement(child, { key }) : child;\n    });\n"],"names":[],"mappings":";;MAWa,YAAY,GAAG,CAAmB,SAAY,KACvD,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,EAAW,EAAE;AAE9C,MAAA,UAAU,GAAG,CAAC,IAAe,KACtC,cAAc,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,WAAW,IAAK,IAAI,CAAC,KAAgB;AAErF,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;AAED,IAAA,MAAM,GAAG,GAAG,CAAG,EAAA,SAAS,CAAG,EAAA,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA,CAAE,CAAC;AAE/C,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;QACzB,OAAO,gBAAgB,CAAE,KAAK,CAAC,KAAkC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;KACpF;AAED,IAAA,OAAO,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC;AAC5D,CAAC;;;;"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@hh.ru/magritte-ui-chat-bubble",
+  "version": "1.1.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-check": "yarn root:stylelint-check $(pwd)",
+    "eslint-check": "yarn root:eslint-check $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)",
+    "watch": "yarn root:watch $(pwd)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
+    "@hh.ru/magritte-common-use-translation": "3.3.0",
+    "@hh.ru/magritte-design-tokens": "25.0.1",
+    "@hh.ru/magritte-ui-breakpoint": "6.1.1",
+    "@hh.ru/magritte-ui-button": "7.3.0",
+    "@hh.ru/magritte-ui-icon": "15.0.3",
+    "@hh.ru/magritte-ui-menu": "1.0.32",
+    "@hh.ru/magritte-ui-mock-component": "1.1.7",
+    "@hh.ru/magritte-ui-tooltip": "11.0.44",
+    "@hh.ru/magritte-ui-typography": "5.3.12"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "ca6dd4b6ab147bf47045aa7608e7b6f60df53749"
+}

package/types.d.ts

@@ -0,0 +1,50 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Тип сообщения */
+export type ChatBubbleMode = 'incoming' | 'outgoing' | 'bot';
+/** Статус исходящего сообщения */
+export type ChatBubbleStatusValue = 'sending' | 'sent' | 'delivered';
+export interface ChatBubbleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Тип сообщения по отправителю
+     * @default incoming
+     */
+    mode?: ChatBubbleMode;
+    /**
+     * Верхняя часть сообщения: `ChatBubble.Label` и/или `ChatBubble.Reply`
+     */
+    header?: ReactNode;
+    /**
+     * Хвостик у баббла (показывается у одиночного сообщения/у последнего в группе)
+     * @default false
+     */
+    showTail?: boolean;
+    /** Время отправки */
+    time?: ReactNode;
+    /** Статус сообщения: `ChatBubble.Status`. У входящих сообщений статусов нет */
+    status?: ReactNode;
+    /** Дополнительные действия с сообщением: список иконок размера 16px под бабблом */
+    actions?: ReactNode;
+    /** Кнопки под бабблом. Доступны только у входящих сообщений и сообщений от бота */
+    buttons?: ReactNode;
+    /** Ошибка отправки. Показывается только у исходящего сообщения */
+    error?: boolean;
+    /** Текст ошибки под сообщением */
+    errorText?: ReactNode;
+    /**
+     * Действия для исправления ошибки: список `ChatBubble.ErrorAction`.
+     */
+    errorActions?: ReactNode;
+    /**
+     * Содержимое сообщения
+     * - текст и/или `ChatBubble.Reactions`
+     * - `ChatBubble.Media`
+     * - `ChatBubble.File`
+     * - `ChatBubble.Snippet`
+     */
+    children?: ReactNode;
+    /**
+     * Значение data-qa на корневом элементе
+     * @default chat-bubble
+     */
+    'data-qa'?: string;
+}

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}