@hh.ru/magritte-ui-chat-bubble 1.1.1 → 1.3.0

package/ChatBubble.d.ts

@@ -1,11 +1,15 @@
 import { ChatBubbleErrorAction } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';
+import { ChatBubbleFile } from '@hh.ru/magritte-ui-chat-bubble/File';
 import { ChatBubbleLabel } from '@hh.ru/magritte-ui-chat-bubble/Label';
+import { ChatBubbleMedia } from '@hh.ru/magritte-ui-chat-bubble/Media';
 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;
+    File: typeof ChatBubbleFile;
     Label: typeof ChatBubbleLabel;
+    Media: typeof ChatBubbleMedia;
     Message: typeof ChatBubbleMessage;
     Status: typeof ChatBubbleStatus;
 }

package/ChatBubble.js

@@ -4,7 +4,9 @@ import { forwardRef, useState, useCallback, useRef, useMemo, cloneElement } from
 import classnames from 'classnames';
 import { ButtonDefaultPropsContext } from '@hh.ru/magritte-ui-button';
 import { ChatBubbleErrorAction } from './ErrorAction.js';
+import { ChatBubbleFile } from './File.js';
 import { ChatBubbleLabel } from './Label.js';
+import { ChatBubbleMedia } from './Media.js';
 import { ChatBubbleMessage } from './Message.js';
 import { ChatBubbleStatus } from './Status.js';
 import { Meta } from './internal/Meta.js';
@@ -17,11 +19,14 @@ 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-DKV1cS0i.js';
+import { s as styles } from './chat-bubble-C7KYJOC7.js';
+import '@hh.ru/magritte-ui-cell';
+import '@hh.ru/magritte-ui-link';
+import '@hh.ru/magritte-ui-loader';
 import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-common-use-translation';
 import '@hh.ru/magritte-ui-tooltip';
-import './chat-bubble-CWB30AST.js';
+import './chat-bubble-DvyT8aq-.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);
@@ -42,11 +47,13 @@ const ChatBubble = forwardRef(({ actions, buttons, children, header, errorAction
     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 }) }))] }) }));
+            }), "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", { className: header ? styles.contentWithHeader : undefined, "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.File = ChatBubbleFile;
 ChatBubble.Label = ChatBubbleLabel;
+ChatBubble.Media = ChatBubbleMedia;
 ChatBubble.Message = ChatBubbleMessage;
 ChatBubble.Status = ChatBubbleStatus;
 

package/ChatBubble.js.map

@@ -1 +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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"}
+{"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 { ChatBubbleFile } from '@hh.ru/magritte-ui-chat-bubble/File';\nimport { ChatBubbleLabel } from '@hh.ru/magritte-ui-chat-bubble/Label';\nimport { ChatBubbleMedia } from '@hh.ru/magritte-ui-chat-bubble/Media';\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    File: typeof ChatBubbleFile;\n    Label: typeof ChatBubbleLabel;\n    Media: typeof ChatBubbleMedia;\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\n                                className={header ? styles.contentWithHeader : undefined}\n                                data-qa=\"chat-bubble-content\"\n                            >\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.File = ChatBubbleFile;\nChatBubble.Label = ChatBubbleLabel;\nChatBubble.Media = ChatBubbleMedia;\nChatBubble.Message = ChatBubbleMessage;\nChatBubble.Status = ChatBubbleStatus;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/File.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';
+export type ChatBubbleFileState = 'unloaded' | 'loading' | 'preview' | 'loaded';
+export interface ChatBubbleFileProps extends HTMLAttributes<HTMLDivElement>, ChatBubbleMetaHostProps {
+    /** Имя файла */
+    name?: ReactNode;
+    /**
+     * Строка под именем (например, для размера файла и действия с ним)
+     */
+    description?: ReactNode;
+    /**
+     * Состояние файла
+     * @default loaded
+     */
+    state?: ChatBubbleFileState;
+    /** Url превью файла, показывается в состоянии `preview` */
+    preview?: string;
+    /** alt превью файла */
+    previewAlt?: string;
+    /**
+     * Значение data-qa
+     * @default chat-bubble-file
+     */
+    'data-qa'?: string;
+}
+export declare const ChatBubbleFile: import("react").ForwardRefExoticComponent<ChatBubbleFileProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;

package/File.js

@@ -0,0 +1,26 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
+import { getColors } from './internal/colors.js';
+import { useChatBubbleMode } from './internal/mode.js';
+import { markMetaHost } from './internal/utils.js';
+import { ArrowDownLineOutlinedSize24, DocumentOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { LinkDefaultPropsContext } from '@hh.ru/magritte-ui-link';
+import { Loader } from '@hh.ru/magritte-ui-loader';
+import { s as styles } from './chat-bubble-C7KYJOC7.js';
+
+/** Прикреплённый файл */
+const ChatBubbleFileComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-file', description, meta, name, preview, state = 'loaded', previewAlt, ...props }, ref) => {
+    const colors = getColors(useChatBubbleMode());
+    const isLoading = state === 'loading';
+    // пока файл не скачан, на иконке стрелка
+    const Icon = state === 'unloaded' || isLoading ? ArrowDownLineOutlinedSize24 : DocumentOutlinedSize24;
+    const defaultLinkProps = useMemo(() => ({ ...colors.link, typography: 'label-3-regular', inline: true }), [colors]);
+    return (jsxs("div", { ...props, className: styles.file, "data-qa": dataQa, ref: ref, children: [jsxs(Cell, { align: "center", horPadding: false, vertPadding: false, left: state === 'preview' && preview ? (jsx("img", { className: styles.filePreview, src: preview, alt: previewAlt ?? '' })) : (jsx(Icon, { initialColor: colors.fileIcon, backgroundStyle: colors.fileIconBackground, padding: 12, borderRadius: 8 })), children: [jsx(CellText, { type: "title", style: colors.text, maxLines: 1, "data-qa": "chat-bubble-file-name", children: name }), description && (jsx(CellText, { type: "subtitle", style: colors.secondaryText, maxLines: 1, left: isLoading ? jsx(Loader, { size: 16, color: colors.secondaryIcon }) : undefined, "data-qa": "chat-bubble-file-description", children: jsx(LinkDefaultPropsContext, { props: defaultLinkProps, children: description }) }))] }), meta] }));
+});
+ChatBubbleFileComponent.displayName = 'ChatBubble.File';
+const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);
+
+export { ChatBubbleFile };
+//# sourceMappingURL=File.js.map

package/File.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"File.js","sources":["src/File.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, useMemo } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport { ArrowDownLineOutlinedSize24, DocumentOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { LinkDefaultPropsContext } from '@hh.ru/magritte-ui-link';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\n\nimport styles from './chat-bubble.less';\n\nexport type ChatBubbleFileState = 'unloaded' | 'loading' | 'preview' | 'loaded';\n\nexport interface ChatBubbleFileProps extends HTMLAttributes<HTMLDivElement>, ChatBubbleMetaHostProps {\n    /** Имя файла */\n    name?: ReactNode;\n    /**\n     * Строка под именем (например, для размера файла и действия с ним)\n     */\n    description?: ReactNode;\n    /**\n     * Состояние файла\n     * @default loaded\n     */\n    state?: ChatBubbleFileState;\n    /** Url превью файла, показывается в состоянии `preview` */\n    preview?: string;\n    /** alt превью файла */\n    previewAlt?: string;\n    /**\n     * Значение data-qa\n     * @default chat-bubble-file\n     */\n    'data-qa'?: string;\n}\n\n/** Прикреплённый файл */\nconst ChatBubbleFileComponent = forwardRef<HTMLDivElement, ChatBubbleFileProps>(\n    (\n        {\n            'data-qa': dataQa = 'chat-bubble-file',\n            description,\n            meta,\n            name,\n            preview,\n            state = 'loaded',\n            previewAlt,\n            ...props\n        },\n        ref\n    ) => {\n        const colors = getColors(useChatBubbleMode());\n        const isLoading = state === 'loading';\n        // пока файл не скачан, на иконке стрелка\n        const Icon = state === 'unloaded' || isLoading ? ArrowDownLineOutlinedSize24 : DocumentOutlinedSize24;\n\n        const defaultLinkProps = useMemo(\n            () => ({ ...colors.link, typography: 'label-3-regular' as const, inline: true }),\n            [colors]\n        );\n\n        return (\n            <div {...props} className={styles.file} data-qa={dataQa} ref={ref}>\n                <Cell\n                    align=\"center\"\n                    horPadding={false}\n                    vertPadding={false}\n                    left={\n                        state === 'preview' && preview ? (\n                            <img className={styles.filePreview} src={preview} alt={previewAlt ?? ''} />\n                        ) : (\n                            <Icon\n                                initialColor={colors.fileIcon}\n                                backgroundStyle={colors.fileIconBackground}\n                                padding={12}\n                                borderRadius={8}\n                            />\n                        )\n                    }\n                >\n                    <CellText type=\"title\" style={colors.text} maxLines={1} data-qa=\"chat-bubble-file-name\">\n                        {name}\n                    </CellText>\n                    {description && (\n                        <CellText\n                            type=\"subtitle\"\n                            style={colors.secondaryText}\n                            maxLines={1}\n                            left={isLoading ? <Loader size={16} color={colors.secondaryIcon} /> : undefined}\n                            data-qa=\"chat-bubble-file-description\"\n                        >\n                            <LinkDefaultPropsContext props={defaultLinkProps}>{description}</LinkDefaultPropsContext>\n                        </CellText>\n                    )}\n                </Cell>\n                {meta}\n            </div>\n        );\n    }\n);\n\nChatBubbleFileComponent.displayName = 'ChatBubble.File';\n\nexport const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAqCA;AACA,MAAM,uBAAuB,GAAG,UAAU,CACtC,CACI,EACI,SAAS,EAAE,MAAM,GAAG,kBAAkB,EACtC,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,GAAG,QAAQ,EAChB,UAAU,EACV,GAAG,KAAK,EACX,EACD,GAAG,KACH;AACA,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9C,IAAA,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;;AAEtC,IAAA,MAAM,IAAI,GAAG,KAAK,KAAK,UAAU,IAAI,SAAS,GAAG,2BAA2B,GAAG,sBAAsB,CAAC;AAEtG,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAC5B,OAAO,EAAE,GAAG,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,iBAA0B,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAChF,CAAC,MAAM,CAAC,CACX,CAAC;AAEF,IAAA,QACIA,IAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAW,SAAA,EAAA,MAAM,EAAE,GAAG,EAAE,GAAG,EAC7D,QAAA,EAAA,CAAAA,IAAA,CAAC,IAAI,EACD,EAAA,KAAK,EAAC,QAAQ,EACd,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,IAAI,EACA,KAAK,KAAK,SAAS,IAAI,OAAO,IAC1BC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,IAAI,EAAE,GAAI,KAE3EA,GAAC,CAAA,IAAI,IACD,YAAY,EAAE,MAAM,CAAC,QAAQ,EAC7B,eAAe,EAAE,MAAM,CAAC,kBAAkB,EAC1C,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,CAAC,EACjB,CAAA,CACL,aAGLA,GAAC,CAAA,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,aAAU,uBAAuB,EAAA,QAAA,EAClF,IAAI,EAAA,CACE,EACV,WAAW,KACRA,GAAC,CAAA,QAAQ,IACL,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,MAAM,CAAC,aAAa,EAC3B,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,SAAS,GAAGA,GAAA,CAAC,MAAM,EAAC,EAAA,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,aAAa,GAAI,GAAG,SAAS,aACvE,8BAA8B,EAAA,QAAA,EAEtCA,IAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,gBAAgB,YAAG,WAAW,EAAA,CAA2B,GAClF,CACd,CAAA,EAAA,CACE,EACN,IAAI,CAAA,EAAA,CACH,EACR;AACN,CAAC,CACJ,CAAC;AAEF,uBAAuB,CAAC,WAAW,GAAG,iBAAiB,CAAC;MAE3C,cAAc,GAAG,YAAY,CAAC,uBAAuB;;;;"}

package/Media.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';
+export interface ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, ChatBubbleMetaHostProps {
+    /** Url изображения или превью видео */
+    src?: string;
+    /** alt изображения */
+    alt?: string;
+    /** Содержимое поверх превью */
+    children?: ReactNode;
+    /** тип медиа (отображается в верхнем левом углу) */
+    format?: ReactNode;
+    /**
+     * Значение data-qa
+     * @default chat-bubble-media
+     */
+    'data-qa'?: string;
+}
+export declare const ChatBubbleMedia: import("react").ForwardRefExoticComponent<ChatBubbleMediaProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;

package/Media.js

@@ -0,0 +1,18 @@
+import './index.css';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { markMetaHost } from './internal/utils.js';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { s as styles } from './chat-bubble-C7KYJOC7.js';
+
+/**
+ * Медиа в сообщении
+ */
+const ChatBubbleMediaComponent = forwardRef(({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, ...props }, ref) => {
+    return (jsxs("div", { ...props, className: styles.media, "data-qa": dataQa, ref: ref, children: [src && (jsxs(Fragment, { children: [jsx("img", { className: styles.mediaBlur, src: src, alt: "", "aria-hidden": true }), jsx("img", { className: styles.mediaImage, src: src, alt: alt ?? '' })] })), children && jsx("span", { className: styles.mediaContent, children: children }), format && (jsx("span", { className: styles.mediaFormat, "data-qa": "chat-bubble-media-format", children: jsx(Text, { Element: "span", typography: "label-4-regular", style: "constant", children: format }) })), meta && (jsx("span", { className: styles.mediaMeta, "data-qa": "chat-bubble-media-meta", children: meta }))] }));
+});
+ChatBubbleMediaComponent.displayName = 'ChatBubble.Media';
+const ChatBubbleMedia = markMetaHost(ChatBubbleMediaComponent);
+
+export { ChatBubbleMedia };
+//# sourceMappingURL=Media.js.map

package/Media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.js","sources":["src/Media.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { markMetaHost, type 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 ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, ChatBubbleMetaHostProps {\n    /** Url изображения или превью видео */\n    src?: string;\n    /** alt изображения */\n    alt?: string;\n    /** Содержимое поверх превью */\n    children?: ReactNode;\n    /** тип медиа (отображается в верхнем левом углу) */\n    format?: ReactNode;\n    /**\n     * Значение data-qa\n     * @default chat-bubble-media\n     */\n    'data-qa'?: string;\n}\n\n/**\n * Медиа в сообщении\n */\nconst ChatBubbleMediaComponent = forwardRef<HTMLDivElement, ChatBubbleMediaProps>(\n    ({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, ...props }, ref) => {\n        return (\n            <div {...props} className={styles.media} data-qa={dataQa} ref={ref}>\n                {src && (\n                    <>\n                        <img className={styles.mediaBlur} src={src} alt=\"\" aria-hidden />\n                        <img className={styles.mediaImage} src={src} alt={alt ?? ''} />\n                    </>\n                )}\n                {children && <span className={styles.mediaContent}>{children}</span>}\n                {format && (\n                    <span className={styles.mediaFormat} data-qa=\"chat-bubble-media-format\">\n                        <Text Element=\"span\" typography=\"label-4-regular\" style=\"constant\">\n                            {format}\n                        </Text>\n                    </span>\n                )}\n                {meta && (\n                    <span className={styles.mediaMeta} data-qa=\"chat-bubble-media-meta\">\n                        {meta}\n                    </span>\n                )}\n            </div>\n        );\n    }\n);\n\nChatBubbleMediaComponent.displayName = 'ChatBubble.Media';\n\nexport const ChatBubbleMedia = markMetaHost(ChatBubbleMediaComponent);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAuBA;;AAEG;AACH,MAAM,wBAAwB,GAAG,UAAU,CACvC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,mBAAmB,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IAC7F,QACIA,IAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAW,SAAA,EAAA,MAAM,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAC7D,GAAG,KACAA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,EAAE,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe,EACjEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAI,CAAA,CAAA,EAAA,CAChE,CACN,EACA,QAAQ,IAAIA,cAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,EACnE,MAAM,KACHA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,SAAA,EAAU,0BAA0B,EAAA,QAAA,EACnEA,GAAC,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,UAAU,EAAA,QAAA,EAC7D,MAAM,EAAA,CACJ,EACJ,CAAA,CACV,EACA,IAAI,KACDA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAU,SAAA,EAAA,wBAAwB,EAC9D,QAAA,EAAA,IAAI,EACF,CAAA,CACV,CACC,EAAA,CAAA,EACR;AACN,CAAC,CACJ,CAAC;AAEF,wBAAwB,CAAC,WAAW,GAAG,kBAAkB,CAAC;MAE7C,eAAe,GAAG,YAAY,CAAC,wBAAwB;;;;"}

package/Message.js

@@ -5,7 +5,7 @@ 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-DKV1cS0i.js';
+import { s as styles } from './chat-bubble-C7KYJOC7.js';
 
 /**
  * Текстовая часть сообщения.

package/Status.d.ts

@@ -1,6 +1,7 @@
 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 type ChatBubbleStatusValue = 'sending' | 'sent' | 'delivered';
 export interface ChatBubbleStatusProps extends Omit<TooltipHoverProps, 'activatorRef' | 'placement' | 'size' | 'children'> {
     /** Статус отправки. У сообщений от бота не используется — там всегда «видно только вам»
      * @default sending

package/Status.js

@@ -7,7 +7,7 @@ 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-DKV1cS0i.js';
+import { s as styles } from './chat-bubble-C7KYJOC7.js';
 
 const ICON = {
     sending: ClockOutlinedSize16,

package/Status.js.map

@@ -1 +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;;;;"}
+{"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 {\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\n/** Статус исходящего сообщения */\nexport type ChatBubbleStatusValue = 'sending' | 'sent' | 'delivered';\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":";;;;;;;;;;AAmBA,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-C7KYJOC7.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_1-3-0","chatBubble":"magritte-chat-bubble___ds9CP_1-3-0","outgoing":"magritte-outgoing___3n00o_1-3-0","bot":"magritte-bot___Z6vZA_1-3-0","row":"magritte-row___mQNnt_1-3-0","bubble":"magritte-bubble___NVuDI_1-3-0","with-tail":"magritte-with-tail___IdixJ_1-3-0","withTail":"magritte-with-tail___IdixJ_1-3-0","header":"magritte-header___Px2to_1-3-0","message-title":"magritte-message-title___dgBFk_1-3-0","messageTitle":"magritte-message-title___dgBFk_1-3-0","message":"magritte-message___7TEpw_1-3-0","buttons":"magritte-buttons___yQqBi_1-3-0","actions":"magritte-actions___I5GSz_1-3-0","error-text":"magritte-error-text___1ZxWY_1-3-0","errorText":"magritte-error-text___1ZxWY_1-3-0","file":"magritte-file___k2IKy_1-3-0","file-preview":"magritte-file-preview___eJKu8_1-3-0","filePreview":"magritte-file-preview___eJKu8_1-3-0","media":"magritte-media___9jH2k_1-3-0","media-blur":"magritte-media-blur___TbiMa_1-3-0","mediaBlur":"magritte-media-blur___TbiMa_1-3-0","media-image":"magritte-media-image___G-FkF_1-3-0","mediaImage":"magritte-media-image___G-FkF_1-3-0","media-content":"magritte-media-content___n3XbD_1-3-0","mediaContent":"magritte-media-content___n3XbD_1-3-0","media-format":"magritte-media-format___AdfCK_1-3-0","mediaFormat":"magritte-media-format___AdfCK_1-3-0","media-meta":"magritte-media-meta___oSxxr_1-3-0","mediaMeta":"magritte-media-meta___oSxxr_1-3-0","content-with-header":"magritte-content-with-header___wiNKB_1-3-0","contentWithHeader":"magritte-content-with-header___wiNKB_1-3-0","status":"magritte-status___dHzCt_1-3-0"};
+
+export { styles as s };
+//# sourceMappingURL=chat-bubble-C7KYJOC7.js.map

package/chat-bubble-C7KYJOC7.js.map

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

package/chat-bubble-DvyT8aq-.js

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

package/chat-bubble-DvyT8aq-.js.map

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

package/index.css

@@ -1,10 +1,13 @@
 :root{
+  --magritte-color-background-overlay-v25-0-1:#20262bad;
+  --magritte-color-text-constant-v25-0-1:#ffffff;
   --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-color-component-chat-bubble-border-image-v25-0-1:#0000001a;
 }
 
 .magritte-night-theme{
@@ -20,7 +23,7 @@
   --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-1{
+.magritte-chat-bubble___ds9CP_1-3-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;
@@ -29,32 +32,32 @@
   max-width:calc(100% - 40px);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-chat-bubble___ds9CP_1-1-1{
+  body.magritte-old-layout .magritte-chat-bubble___ds9CP_1-3-0{
     max-width:min(460px, 100%);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_1-1-1{
+  body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_1-3-0{
     max-width:min(460px, 100%);
   }
 }
-.magritte-outgoing___3n00o_1-1-1{
+.magritte-outgoing___3n00o_1-3-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-1{
+.magritte-bot___Z6vZA_1-3-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-1{
+.magritte-row___mQNnt_1-3-0{
   display:flex;
   align-items:flex-end;
   gap:8px;
   max-width:100%;
 }
-.magritte-bubble___NVuDI_1-1-1{
+.magritte-bubble___NVuDI_1-3-0{
   position:relative;
   box-sizing:border-box;
   min-width:0;
@@ -65,61 +68,170 @@
   border-radius:20px;
   overflow-wrap:break-word;
 }
-.magritte-with-tail___IdixJ_1-1-1 .magritte-bubble___NVuDI_1-1-1{
+.magritte-with-tail___IdixJ_1-3-0 .magritte-bubble___NVuDI_1-3-0{
   border-bottom-left-radius:0;
 }
-.magritte-with-tail___IdixJ_1-1-1.magritte-outgoing___3n00o_1-1-1 .magritte-bubble___NVuDI_1-1-1{
+.magritte-with-tail___IdixJ_1-3-0.magritte-outgoing___3n00o_1-3-0 .magritte-bubble___NVuDI_1-3-0{
   border-bottom-left-radius:20px;
   border-bottom-right-radius:0;
 }
-.magritte-header___Px2to_1-1-1{
+.magritte-header___Px2to_1-3-0{
   display:flex;
   flex-direction:column;
   gap:4px;
   margin-bottom:4px;
 }
-.magritte-message-title___dgBFk_1-1-1{
+.magritte-message-title___dgBFk_1-3-0{
   margin-bottom:4px;
 }
-.magritte-message___7TEpw_1-1-1:not(:first-child){
+.magritte-message___7TEpw_1-3-0:not(:first-child){
   margin-top:8px;
 }
-.magritte-buttons___yQqBi_1-1-1{
+.magritte-buttons___yQqBi_1-3-0{
   display:grid;
   grid-template-columns:repeat(2, 1fr);
   gap:8px;
   width:100%;
   margin-top:4px;
 }
-.magritte-buttons___yQqBi_1-1-1 > *:last-child:nth-child(odd){
+.magritte-buttons___yQqBi_1-3-0 > *:last-child:nth-child(odd){
   grid-column:span 2;
 }
-.magritte-actions___I5GSz_1-1-1{
+.magritte-actions___I5GSz_1-3-0{
   display:flex;
   flex-wrap:wrap;
   gap:2px;
   margin-top:4px;
 }
-.magritte-error-text___1ZxWY_1-1-1{
+.magritte-error-text___1ZxWY_1-3-0{
   margin-top:2px;
 }
-.magritte-status___dHzCt_1-1-1{
+.magritte-file___k2IKy_1-3-0{
+  display:flex;
+  align-items:flex-end;
+}
+.magritte-file___k2IKy_1-3-0 + .magritte-file___k2IKy_1-3-0{
+  margin-top:12px;
+}
+.magritte-file-preview___eJKu8_1-3-0{
+  display:block;
+  width:48px;
+  height:48px;
+  border-radius:8px;
+  object-fit:cover;
+}
+.magritte-media___9jH2k_1-3-0{
+  display:flex;
+  position:relative;
+  box-sizing:border-box;
+  min-width:120px;
+  min-height:120px;
+  max-height:min(60vh, 452px);
+  margin:-8px;
+  border-radius:16px;
+  overflow:hidden;
+  box-shadow:inset 0 0 0 1px var(--magritte-color-component-chat-bubble-border-image-v25-0-1);
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-media___9jH2k_1-3-0{
+    max-width:452px;
+    max-height:452px;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-media___9jH2k_1-3-0{
+    max-width:452px;
+    max-height:452px;
+  }
+}
+.magritte-media-blur___TbiMa_1-3-0{
+  position:absolute;
+  top:-96px;
+  left:-96px;
+  width:calc(100% + 96px * 2);
+  height:calc(100% + 96px * 2);
+  opacity:0.5;
+  filter:blur(48px);
+  object-fit:cover;
+}
+.magritte-media-image___G-FkF_1-3-0{
+  display:block;
+  position:relative;
+  max-width:100%;
+  max-height:min(60vh, 452px);
+  margin:auto;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-media-image___G-FkF_1-3-0{
+    max-height:452px;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-media-image___G-FkF_1-3-0{
+    max-height:452px;
+  }
+}
+.magritte-media-content___n3XbD_1-3-0{
+  display:flex;
+  position:absolute;
+  inset:0;
+  align-items:center;
+  justify-content:center;
+}
+.magritte-media-format___AdfCK_1-3-0{
+  display:flex;
+  position:absolute;
+  top:4px;
+  left:4px;
+  padding:2px 8px;
+  background-color:var(--magritte-color-background-overlay-v25-0-1);
+  border-radius:12px;
+  backdrop-filter:blur(24px);
+}
+.magritte-media-meta___oSxxr_1-3-0{
+  --magritte-ui-text-color-override:var(--magritte-color-text-constant-v25-0-1);
+  display:flex;
+  position:absolute;
+  right:4px;
+  bottom:4px;
+  align-items:center;
+  padding:2px 8px;
+  background-color:var(--magritte-color-background-overlay-v25-0-1);
+  border-radius:12px;
+  backdrop-filter:blur(24px);
+}
+.magritte-media-meta___oSxxr_1-3-0:empty{
+  display:none;
+}
+.magritte-media-meta___oSxxr_1-3-0 > span{
+  margin-left:0;
+}
+.magritte-content-with-header___wiNKB_1-3-0 > .magritte-file___k2IKy_1-3-0:first-child,
+.magritte-content-with-header___wiNKB_1-3-0 > .magritte-media___9jH2k_1-3-0:first-child{
+  margin-top:8px;
+}
+.magritte-media___9jH2k_1-3-0:not(:last-child){
+  margin-bottom:12px;
+}
+.magritte-status___dHzCt_1-3-0{
   display:inline-flex;
   vertical-align:middle;
+}
+.magritte-status___dHzCt_1-3-0:not(:first-child){
   margin-left:4px;
 }
 
-.magritte-tail___-1lJ0_1-1-1{
+.magritte-tail___-1lJ0_1-3-0{
   position:absolute;
   bottom:-1px;
   left:-7px;
 }
-.magritte-tail_outgoing___cnyh3_1-1-1{
+.magritte-tail_outgoing___cnyh3_1-3-0{
   left:auto;
   right:-7px;
   transform:scaleX(-1);
 }
-.magritte-meta___HT7lp_1-1-1{
+.magritte-meta___HT7lp_1-3-0{
   float:right;
   margin-left:12px;
   white-space:nowrap;

package/index.d.ts

@@ -1,6 +1,8 @@
 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 { ChatBubbleMode, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
 export type { ChatBubbleErrorActionProps } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';
+export type { ChatBubbleFileProps, ChatBubbleFileState } from '@hh.ru/magritte-ui-chat-bubble/File';
 export type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';
+export type { ChatBubbleMediaProps } from '@hh.ru/magritte-ui-chat-bubble/Media';
 export type { ChatBubbleMessageProps } from '@hh.ru/magritte-ui-chat-bubble/Message';
-export type { ChatBubbleStatusProps } from '@hh.ru/magritte-ui-chat-bubble/Status';
+export type { ChatBubbleStatusProps, ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/Status';

package/index.js

@@ -7,20 +7,25 @@ import '@hh.ru/magritte-ui-button';
 import './ErrorAction.js';
 import './internal/errorMenu.js';
 import '@hh.ru/magritte-ui-menu';
-import './Label.js';
+import './File.js';
+import '@hh.ru/magritte-ui-cell';
 import './internal/colors.js';
 import './internal/mode.js';
+import './internal/utils.js';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-link';
+import '@hh.ru/magritte-ui-loader';
+import './chat-bubble-C7KYJOC7.js';
+import './Label.js';
 import '@hh.ru/magritte-ui-typography';
+import './Media.js';
 import './Message.js';
-import './internal/utils.js';
-import './chat-bubble-DKV1cS0i.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-CWB30AST.js';
+import './chat-bubble-DvyT8aq-.js';
 import './internal/Tail.js';
 import '@hh.ru/magritte-ui-icon';
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/index.mock.d.ts

@@ -1,11 +1,15 @@
-export type { ChatBubbleMode, ChatBubbleStatusValue, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
+export type { ChatBubbleMode, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
 export type { ChatBubbleErrorActionProps } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';
+export type { ChatBubbleFileProps, ChatBubbleFileState } from '@hh.ru/magritte-ui-chat-bubble/File';
 export type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';
+export type { ChatBubbleMediaProps } from '@hh.ru/magritte-ui-chat-bubble/Media';
 export type { ChatBubbleMessageProps } from '@hh.ru/magritte-ui-chat-bubble/Message';
-export type { ChatBubbleStatusProps } from '@hh.ru/magritte-ui-chat-bubble/Status';
+export type { ChatBubbleStatusProps, ChatBubbleStatusValue } 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>>;
+    File: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
     Label: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
+    Media: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
     Message: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
     Status: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
 };

package/index.mock.js

@@ -2,12 +2,16 @@ import './index.css';
 import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
 
 const ErrorAction = mockComponent('ChatBubble.ErrorAction', undefined, { withChildren: true });
+const File = mockComponent('ChatBubble.File');
 const Label = mockComponent('ChatBubble.Label', undefined, { withChildren: true });
+const Media = mockComponent('ChatBubble.Media', 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,
+    File,
     Label,
+    Media,
     Message,
     Status,
 });

package/index.mock.js.map

@@ -1 +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;;;;"}
+{"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, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';\nexport type { ChatBubbleErrorActionProps } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';\nexport type { ChatBubbleFileProps, ChatBubbleFileState } from '@hh.ru/magritte-ui-chat-bubble/File';\nexport type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';\nexport type { ChatBubbleMediaProps } from '@hh.ru/magritte-ui-chat-bubble/Media';\nexport type { ChatBubbleMessageProps } from '@hh.ru/magritte-ui-chat-bubble/Message';\nexport type { ChatBubbleStatusProps, ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/Status';\n\nconst ErrorAction = mockComponent('ChatBubble.ErrorAction', undefined, { withChildren: true });\nconst File = mockComponent('ChatBubble.File');\nconst Label = mockComponent('ChatBubble.Label', undefined, { withChildren: true });\nconst Media = mockComponent('ChatBubble.Media', 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    File,\n    Label,\n    Media,\n    Message,\n    Status,\n});\n"],"names":[],"mappings":";;AAUA,MAAM,WAAW,GAAG,aAAa,CAAC,wBAAwB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAC/F,MAAM,IAAI,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAC9C,MAAM,KAAK,GAAG,aAAa,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACnF,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,IAAI;IACJ,KAAK;IACL,KAAK;IACL,OAAO;IACP,MAAM;AACT,CAAA;;;;"}

package/internal/Meta.js

@@ -2,7 +2,7 @@ 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-CWB30AST.js';
+import { s as styles } from '../chat-bubble-DvyT8aq-.js';
 
 /**
  * Время и статус сообщения

package/internal/Tail.js

@@ -2,7 +2,7 @@ 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-CWB30AST.js';
+import { s as styles } from '../chat-bubble-DvyT8aq-.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';

package/internal/colors.d.ts

@@ -1,9 +1,11 @@
+import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';
 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 { LinkProps } from '@hh.ru/magritte-ui-link';
 import type { TextStyle } from '@hh.ru/magritte-ui-typography';
 export interface ChatBubbleColors {
-    /** Основной текст сообщения */
+    /** Основной текст сообщения, названия файла */
     text: TextStyle;
     /** Второстепенный текст: время, размер файла, описание сниппета */
     secondaryText: TextStyle;
@@ -15,5 +17,13 @@ export interface ChatBubbleColors {
     actionsIcon: IconColor;
     /** Кнопки под бабблом */
     button: ButtonStyle;
+    /** Ссылка-действие: «Открыть», «Загрузить» */
+    link: Pick<LinkProps, 'style' | 'mode'>;
+    /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */
+    secondaryIcon: IconColor;
+    /** Иконка файла */
+    fileIcon: IconColor;
+    /** Подложка под иконкой файла */
+    fileIconBackground: TokenColorBackground;
 }
 export declare const getColors: (mode: ChatBubbleMode) => ChatBubbleColors;

package/internal/colors.js

@@ -7,6 +7,10 @@ const COLORS = {
         statusIcon: 'constant',
         actionsIcon: 'secondary',
         button: 'neutral',
+        link: { style: 'accent' },
+        secondaryIcon: 'secondary',
+        fileIcon: 'constant',
+        fileIconBackground: 'accent',
     },
     outgoing: {
         text: 'constant',
@@ -15,6 +19,10 @@ const COLORS = {
         statusIcon: 'constant',
         actionsIcon: 'accent',
         button: 'accent',
+        link: { style: 'constant', mode: 'secondary' },
+        secondaryIcon: 'constant',
+        fileIcon: 'accent',
+        fileIconBackground: 'accent-secondary',
     },
     bot: {
         text: 'primary',
@@ -23,6 +31,10 @@ const COLORS = {
         statusIcon: 'special',
         actionsIcon: 'special',
         button: 'special',
+        link: { style: 'accent' },
+        secondaryIcon: 'secondary',
+        fileIcon: 'constant',
+        fileIconBackground: 'special',
     },
 };
 const getColors = (mode) => COLORS[mode];

package/internal/colors.js.map

@@ -1 +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;;;;"}
+{"version":3,"file":"colors.js","sources":["src/internal/colors.ts"],"sourcesContent":["import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';\nimport 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 { LinkProps } from '@hh.ru/magritte-ui-link';\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    link: Pick<LinkProps, 'style' | 'mode'>;\n    /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */\n    secondaryIcon: IconColor;\n    /** Иконка файла */\n    fileIcon: IconColor;\n    /** Подложка под иконкой файла */\n    fileIconBackground: TokenColorBackground;\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        link: { style: 'accent' },\n        secondaryIcon: 'secondary',\n        fileIcon: 'constant',\n        fileIconBackground: 'accent',\n    },\n    outgoing: {\n        text: 'constant',\n        secondaryText: 'constant',\n        accentText: 'constant',\n        statusIcon: 'constant',\n        actionsIcon: 'accent',\n        button: 'accent',\n        link: { style: 'constant', mode: 'secondary' },\n        secondaryIcon: 'constant',\n        fileIcon: 'accent',\n        fileIconBackground: 'accent-secondary',\n    },\n    bot: {\n        text: 'primary',\n        secondaryText: 'secondary',\n        accentText: 'special',\n        statusIcon: 'special',\n        actionsIcon: 'special',\n        button: 'special',\n        link: { style: 'accent' },\n        secondaryIcon: 'secondary',\n        fileIcon: 'constant',\n        fileIconBackground: 'special',\n    },\n};\n\nexport const getColors = (mode: ChatBubbleMode): ChatBubbleColors => COLORS[mode];\n"],"names":[],"mappings":"AA8BA,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;AACjB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,QAAQ;AAC/B,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;QAChB,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE;AAC9C,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,kBAAkB,EAAE,kBAAkB;AACzC,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;AACjB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,SAAS;AAChC,KAAA;CACJ,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,IAAoB,KAAuB,MAAM,CAAC,IAAI;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-chat-bubble",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -24,8 +24,11 @@
     "@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-cell": "7.2.38",
     "@hh.ru/magritte-ui-icon": "15.0.3",
-    "@hh.ru/magritte-ui-menu": "1.0.33",
+    "@hh.ru/magritte-ui-link": "7.2.0",
+    "@hh.ru/magritte-ui-loader": "4.1.0",
+    "@hh.ru/magritte-ui-menu": "1.0.35",
     "@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"
@@ -37,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f50fc3a4db7ad150969c506d53c343fac7c6ef77"
+  "gitHead": "a367d4996b3f6b94fc101056fb4ad4f328b2a67b"
 }

package/types.d.ts

@@ -1,8 +1,6 @@
 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'> {
     /**
      * Тип сообщения по отправителю

package/chat-bubble-CWB30AST.js

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

package/chat-bubble-CWB30AST.js.map

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

package/chat-bubble-DKV1cS0i.js

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

package/chat-bubble-DKV1cS0i.js.map

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