@hh.ru/magritte-ui-chat-bubble 1.6.1 → 2.0.0

package/Call.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';
+export type ChatBubbleCallState = 'connected' | 'not-connected';
+type ChatBubbleCallHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;
+export interface ChatBubbleCallProps extends Omit<ChatBubbleCallHelper, 'children' | 'title'> {
+    /** Заголовок */
+    title?: ReactNode;
+    /**
+     * Строка под заголовком (например, для длительности звонка)
+     */
+    description?: ReactNode;
+    /**
+     * Состояние звонка
+     * @default connected
+     */
+    state?: ChatBubbleCallState;
+    /**
+     * Значение data-qa
+     * @default chat-bubble-call
+     */
+    'data-qa'?: string;
+}
+export declare const ChatBubbleCall: import("react").ForwardRefExoticComponent<ChatBubbleCallProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;
+export {};

package/Call.js

@@ -0,0 +1,24 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
+import { useChatBubbleColors } from './internal/colors.js';
+import { useChatBubbleMode } from './internal/mode.js';
+import { markMetaHost } from './internal/utils.js';
+import { PhoneCrossFilledSize24, PhoneArrowOutFilledSize24, PhoneArrowInFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
+
+/** Входящий/исходящий звонок */
+const ChatBubbleCallComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-call', title, description, meta, state = 'connected', ...props }, ref) => {
+    const mode = useChatBubbleMode();
+    const colors = useChatBubbleColors();
+    // у несостоявшегося звонка - крестик в любом режиме, иначе - стрелка по направлению
+    const connectedIcon = mode === 'outgoing' ? PhoneArrowOutFilledSize24 : PhoneArrowInFilledSize24;
+    const Icon = state === 'connected' ? connectedIcon : PhoneCrossFilledSize24;
+    return (jsxs("div", { ...props, className: styles.file, "data-qa": dataQa, ref: ref, children: [jsxs(Cell, { align: "center", horPadding: false, vertPadding: false, left: 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-call-name", children: title }), description && (jsx(CellText, { type: "subtitle", style: state === 'not-connected' && mode === 'incoming' ? 'negative' : colors.secondaryText, maxLines: 1, "data-qa": "chat-bubble-call-description", children: description }))] }), meta] }));
+});
+ChatBubbleCallComponent.displayName = 'ChatBubbleCall';
+const ChatBubbleCall = markMetaHost(ChatBubbleCallComponent);
+
+export { ChatBubbleCall };
+//# sourceMappingURL=Call.js.map

package/Call.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Call.js","sources":["src/Call.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { useChatBubbleColors } 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 {\n    PhoneArrowInFilledSize24,\n    PhoneArrowOutFilledSize24,\n    PhoneCrossFilledSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\n\nimport styles from './chat-bubble.less';\n\nexport type ChatBubbleCallState = 'connected' | 'not-connected';\n\ntype ChatBubbleCallHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;\n\nexport interface ChatBubbleCallProps extends Omit<ChatBubbleCallHelper, 'children' | 'title'> {\n    /** Заголовок */\n    title?: ReactNode;\n    /**\n     * Строка под заголовком (например, для длительности звонка)\n     */\n    description?: ReactNode;\n    /**\n     * Состояние звонка\n     * @default connected\n     */\n    state?: ChatBubbleCallState;\n    /**\n     * Значение data-qa\n     * @default chat-bubble-call\n     */\n    'data-qa'?: string;\n}\n\n/** Входящий/исходящий звонок */\nconst ChatBubbleCallComponent = forwardRef<HTMLDivElement, ChatBubbleCallProps>(\n    ({ 'data-qa': dataQa = 'chat-bubble-call', title, description, meta, state = 'connected', ...props }, ref) => {\n        const mode = useChatBubbleMode();\n        const colors = useChatBubbleColors();\n        // у несостоявшегося звонка - крестик в любом режиме, иначе - стрелка по направлению\n        const connectedIcon = mode === 'outgoing' ? PhoneArrowOutFilledSize24 : PhoneArrowInFilledSize24;\n        const Icon = state === 'connected' ? connectedIcon : PhoneCrossFilledSize24;\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                        <Icon\n                            initialColor={colors.fileIcon}\n                            backgroundStyle={colors.fileIconBackground}\n                            padding={12}\n                            borderRadius={8}\n                        />\n                    }\n                >\n                    <CellText type=\"title\" style={colors.text} maxLines={1} data-qa=\"chat-bubble-call-name\">\n                        {title}\n                    </CellText>\n                    {description && (\n                        <CellText\n                            type=\"subtitle\"\n                            style={state === 'not-connected' && mode === 'incoming' ? 'negative' : colors.secondaryText}\n                            maxLines={1}\n                            data-qa=\"chat-bubble-call-description\"\n                        >\n                            {description}\n                        </CellText>\n                    )}\n                </Cell>\n                {meta}\n            </div>\n        );\n    }\n);\n\nChatBubbleCallComponent.displayName = 'ChatBubbleCall';\n\nexport const ChatBubbleCall = markMetaHost(ChatBubbleCallComponent);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAqCA;AACA,MAAM,uBAAuB,GAAG,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,kBAAkB,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,GAAG,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACzG,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;;AAErC,IAAA,MAAM,aAAa,GAAG,IAAI,KAAK,UAAU,GAAG,yBAAyB,GAAG,wBAAwB,CAAC;AACjG,IAAA,MAAM,IAAI,GAAG,KAAK,KAAK,WAAW,GAAG,aAAa,GAAG,sBAAsB,CAAC;IAE5E,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,EAAA,EACD,KAAK,EAAC,QAAQ,EACd,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,IAAI,EACAC,GAAC,CAAA,IAAI,EACD,EAAA,YAAY,EAAE,MAAM,CAAC,QAAQ,EAC7B,eAAe,EAAE,MAAM,CAAC,kBAAkB,EAC1C,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,CAAC,EACjB,CAAA,EAAA,QAAA,EAAA,CAGNA,GAAC,CAAA,QAAQ,EAAC,EAAA,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAU,SAAA,EAAA,uBAAuB,EAClF,QAAA,EAAA,KAAK,EACC,CAAA,EACV,WAAW,KACRA,GAAA,CAAC,QAAQ,EAAA,EACL,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,KAAK,eAAe,IAAI,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC,aAAa,EAC3F,QAAQ,EAAE,CAAC,EAAA,SAAA,EACH,8BAA8B,EAAA,QAAA,EAErC,WAAW,EAAA,CACL,CACd,CAAA,EAAA,CACE,EACN,IAAI,CACH,EAAA,CAAA,EACR;AACN,CAAC,CACJ,CAAC;AAEF,uBAAuB,CAAC,WAAW,GAAG,gBAAgB,CAAC;MAE1C,cAAc,GAAG,YAAY,CAAC,uBAAuB;;;;"}

package/ChatBubble.d.ts

@@ -1,3 +1,4 @@
+import { ChatBubbleCall } from '@hh.ru/magritte-ui-chat-bubble/Call';
 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';
@@ -8,6 +9,7 @@ import { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';
 import { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';
 import type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
 interface ChatBubbleComponents {
+    Call: typeof ChatBubbleCall;
     ErrorAction: typeof ChatBubbleErrorAction;
     File: typeof ChatBubbleFile;
     Label: typeof ChatBubbleLabel;

package/ChatBubble.js

@@ -1,8 +1,10 @@
 import './index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, useRef, useMemo, cloneElement } from 'react';
+import { forwardRef, useRef, useState, useCallback, useMemo, cloneElement } from 'react';
 import classnames from 'classnames';
+import { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';
 import { ButtonDefaultPropsContext } from '@hh.ru/magritte-ui-button';
+import { ChatBubbleCall } from './Call.js';
 import { ChatBubbleErrorAction } from './ErrorAction.js';
 import { ChatBubbleFile } from './File.js';
 import { ChatBubbleLabel } from './Label.js';
@@ -17,40 +19,45 @@ 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-_dWjtbo3.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.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-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-tooltip';
 
-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 ChatBubble = forwardRef(({ aside, buttons, children, header, edited, errorActions, mode = 'incoming', showTail = false, status, time, error = false, errorText, 'data-qa': dataQa = 'chat-bubble', className, }, ref) => {
+    const rowRef = useRef(null);
+    const activatorMenuRef = useRef(null);
     const [menuVisible, setMenuVisible] = useState(false);
     const closeErrorMenu = useCallback(() => setMenuVisible(false), []);
-    const activatorMenuRef = useRef(null);
+    const [asideShow, setAsideShow] = useState(false);
+    const showAside = useCallback(() => setAsideShow(true), []);
+    const hideAside = useCallback(() => setAsideShow(false), []);
+    // скрываем aside при кликах вне
+    useCloseByClickOutside(rowRef, hideAside, asideShow);
     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]);
+    const buttonsProps = useMemo(() => ({ size: 'small', stretched: true, ...colors.button }), [colors]);
     /**
      * Время отдаём последнему элементу контента
      * Позиция времени меняется, в зависимости от компонента
      * Если последний ребенок не может отрисовать, вставим meta в самый конец
      */
-    const meta = jsx(Meta, { mode: mode, status: status, time: time });
+    const meta = jsx(Meta, { mode: mode, status: status, time: time, edited: edited });
     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, 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, onMouseEnter: aside ? showAside : undefined, onMouseLeave: aside ? hideAside : undefined, onClick: aside ? showAside : undefined, ref: rowRef, children: [jsxs("div", { className: styles.bubble, children: [header, 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 }) }))] })), aside && (jsx("div", { className: classnames(styles.aside, { [styles.asideRevealed]: asideShow }), "data-qa": "chat-bubble-aside", children: aside }))] }), 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 && (jsx(ButtonDefaultPropsContext, { props: buttonsProps, children: jsx("div", { className: styles.buttons, "data-qa": "chat-bubble-buttons", children: buttons }) }))] }) }));
 });
 ChatBubble.displayName = 'ChatBubble';
+ChatBubble.Call = ChatBubbleCall;
 ChatBubble.ErrorAction = ChatBubbleErrorAction;
 ChatBubble.File = ChatBubbleFile;
 ChatBubble.Label = ChatBubbleLabel;

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 { 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 { Meta } from '@hh.ru/magritte-ui-chat-bubble/Meta';\nimport { ChatBubbleReply } from '@hh.ru/magritte-ui-chat-bubble/Reply';\nimport { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\nimport { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';\nimport { Tail } from '@hh.ru/magritte-ui-chat-bubble/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    Reply: typeof ChatBubbleReply;\n    Snippet: typeof ChatBubbleSnippet;\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                            {content}\n                            {!metaHosted && meta}\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.Reply = ChatBubbleReply;\nChatBubble.Snippet = ChatBubbleSnippet;\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 { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';\nimport { ButtonDefaultPropsContext, type ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { ChatBubbleCall } from '@hh.ru/magritte-ui-chat-bubble/Call';\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 { Meta } from '@hh.ru/magritte-ui-chat-bubble/Meta';\nimport { ChatBubbleReply } from '@hh.ru/magritte-ui-chat-bubble/Reply';\nimport { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\nimport { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';\nimport { Tail } from '@hh.ru/magritte-ui-chat-bubble/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 { 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    Call: typeof ChatBubbleCall;\n    ErrorAction: typeof ChatBubbleErrorAction;\n    File: typeof ChatBubbleFile;\n    Label: typeof ChatBubbleLabel;\n    Media: typeof ChatBubbleMedia;\n    Message: typeof ChatBubbleMessage;\n    Reply: typeof ChatBubbleReply;\n    Snippet: typeof ChatBubbleSnippet;\n    Status: typeof ChatBubbleStatus;\n}\n\nexport const ChatBubble = forwardRef<HTMLDivElement, ChatBubbleProps>(\n    (\n        {\n            aside,\n            buttons,\n            children,\n            header,\n            edited,\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 rowRef = useRef<HTMLDivElement>(null);\n        const activatorMenuRef = useRef<SVGElement>(null);\n\n        const [menuVisible, setMenuVisible] = useState(false);\n        const closeErrorMenu = useCallback(() => setMenuVisible(false), []);\n\n        const [asideShow, setAsideShow] = useState(false);\n        const showAside = useCallback(() => setAsideShow(true), []);\n        const hideAside = useCallback(() => setAsideShow(false), []);\n\n        // скрываем aside при кликах вне\n        useCloseByClickOutside(rowRef, hideAside, asideShow);\n\n        const colors = getColors(mode);\n        const buttonsProps: Partial<ButtonProps> = useMemo(\n            () => ({ size: 'small', stretched: true, ...colors.button }),\n            [colors]\n        );\n        /**\n         * Время отдаём последнему элементу контента\n         * Позиция времени меняется, в зависимости от компонента\n         * Если последний ребенок не может отрисовать, вставим meta в самый конец\n         */\n        const meta = <Meta mode={mode} status={status} time={time} edited={edited} />;\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\n                        className={styles.row}\n                        onMouseEnter={aside ? showAside : undefined}\n                        onMouseLeave={aside ? hideAside : undefined}\n                        onClick={aside ? showAside : undefined}\n                        ref={rowRef}\n                    >\n                        <div className={styles.bubble}>\n                            {header}\n                            {content}\n                            {!metaHosted && meta}\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                        {aside && (\n                            <div\n                                className={classnames(styles.aside, { [styles.asideRevealed]: asideShow })}\n                                data-qa=\"chat-bubble-aside\"\n                            >\n                                {aside}\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 && (\n                        <ButtonDefaultPropsContext props={buttonsProps}>\n                            <div className={styles.buttons} data-qa=\"chat-bubble-buttons\">\n                                {buttons}\n                            </div>\n                        </ButtonDefaultPropsContext>\n                    )}\n                </div>\n            </ChatBubbleModeProvider>\n        );\n    }\n) as React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;\n\nChatBubble.displayName = 'ChatBubble';\n\nChatBubble.Call = ChatBubbleCall;\nChatBubble.ErrorAction = ChatBubbleErrorAction;\nChatBubble.File = ChatBubbleFile;\nChatBubble.Label = ChatBubbleLabel;\nChatBubble.Media = ChatBubbleMedia;\nChatBubble.Message = ChatBubbleMessage;\nChatBubble.Reply = ChatBubbleReply;\nChatBubble.Snippet = ChatBubbleSnippet;\nChatBubble.Status = ChatBubbleStatus;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/File.d.ts

@@ -1,6 +1,6 @@
 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 type ChatBubbleFileState = 'unloaded' | 'loading' | 'preview' | 'loaded' | 'invalid';
 type ChatBubbleFileHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;
 export interface ChatBubbleFileProps extends Omit<ChatBubbleFileHelper, 'children'> {
     /** Имя файла */

package/File.js

@@ -1,13 +1,13 @@
 import './index.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
 import { useChatBubbleColors } from './internal/colors.js';
 import { markMetaHost } from './internal/utils.js';
-import { ArrowDownLineOutlinedSize24, DocumentOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { ExclamationTriangleOutlinedSize16, 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-_dWjtbo3.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
 import './internal/mode.js';
 
 /** Прикреплённый файл */
@@ -17,7 +17,14 @@ const ChatBubbleFileComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-f
     // пока файл не скачан, на иконке стрелка
     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] }));
+    let leftSlot;
+    if (isLoading) {
+        leftSlot = jsx(Loader, { size: 16, color: colors.secondaryIcon });
+    }
+    else if (state === 'invalid') {
+        leftSlot = jsx(ExclamationTriangleOutlinedSize16, { initialColor: "negative" });
+    }
+    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: leftSlot, "data-qa": "chat-bubble-file-description", children: jsx(LinkDefaultPropsContext, { props: defaultLinkProps, children: description }) }))] }), meta] }));
 });
 ChatBubbleFileComponent.displayName = 'ChatBubbleFile';
 const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);

package/File.js.map

@@ -1 +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 { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\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\ntype ChatBubbleFileHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;\n\nexport interface ChatBubbleFileProps extends Omit<ChatBubbleFileHelper, 'children'> {\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 = useChatBubbleColors();\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 = 'ChatBubbleFile';\n\nexport const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAsCA;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,mBAAmB,EAAE,CAAC;AACrC,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,gBAAgB,CAAC;MAE1C,cAAc,GAAG,YAAY,CAAC,uBAAuB;;;;"}
+{"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 { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport {\n    ArrowDownLineOutlinedSize24,\n    DocumentOutlinedSize24,\n    ExclamationTriangleOutlinedSize16,\n} 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' | 'invalid';\n\ntype ChatBubbleFileHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;\n\nexport interface ChatBubbleFileProps extends Omit<ChatBubbleFileHelper, 'children'> {\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 = useChatBubbleColors();\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        let leftSlot: ReactNode;\n        if (isLoading) {\n            leftSlot = <Loader size={16} color={colors.secondaryIcon} />;\n        } else if (state === 'invalid') {\n            leftSlot = <ExclamationTriangleOutlinedSize16 initialColor=\"negative\" />;\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={leftSlot}\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 = 'ChatBubbleFile';\n\nexport const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AA0CA;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,mBAAmB,EAAE,CAAC;AACrC,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,IAAI,QAAmB,CAAC;IACxB,IAAI,SAAS,EAAE;AACX,QAAA,QAAQ,GAAGA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,aAAa,GAAI,CAAC;KAChE;AAAM,SAAA,IAAI,KAAK,KAAK,SAAS,EAAE;QAC5B,QAAQ,GAAGA,IAAC,iCAAiC,EAAA,EAAC,YAAY,EAAC,UAAU,GAAG,CAAC;KAC5E;AAED,IAAA,QACIC,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,aAAW,MAAM,EAAE,GAAG,EAAE,GAAG,EAC7D,QAAA,EAAA,CAAAA,IAAA,CAAC,IAAI,EAAA,EACD,KAAK,EAAC,QAAQ,EACd,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,IAAI,EACA,KAAK,KAAK,SAAS,IAAI,OAAO,IAC1BD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,IAAI,EAAE,GAAI,KAE3EA,GAAC,CAAA,IAAI,EACD,EAAA,YAAY,EAAE,MAAM,CAAC,QAAQ,EAC7B,eAAe,EAAE,MAAM,CAAC,kBAAkB,EAC1C,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,CAAC,EAAA,CACjB,CACL,EAGL,QAAA,EAAA,CAAAA,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAU,SAAA,EAAA,uBAAuB,YAClF,IAAI,EAAA,CACE,EACV,WAAW,KACRA,GAAA,CAAC,QAAQ,EAAA,EACL,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,MAAM,CAAC,aAAa,EAC3B,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,QAAQ,EAAA,SAAA,EACN,8BAA8B,EAAA,QAAA,EAEtCA,IAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,gBAAgB,EAAG,QAAA,EAAA,WAAW,EAA2B,CAAA,EAAA,CAClF,CACd,CACE,EAAA,CAAA,EACN,IAAI,CAAA,EAAA,CACH,EACR;AACN,CAAC,CACJ,CAAC;AAEF,uBAAuB,CAAC,WAAW,GAAG,gBAAgB,CAAC;MAE1C,cAAc,GAAG,YAAY,CAAC,uBAAuB;;;;"}

package/Label.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useChatBubbleColors } from './internal/colors.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-_dWjtbo3.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
 import './internal/mode.js';
 
 /**

package/Media.js

@@ -3,7 +3,7 @@ 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-_dWjtbo3.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
 
 /**
  * Медиа в сообщении

package/Message.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { useChatBubbleColors } from './internal/colors.js';
 import { markMetaHost } from './internal/utils.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-_dWjtbo3.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
 import './internal/mode.js';
 
 /**

package/Meta.d.ts

@@ -4,6 +4,7 @@ interface MetaProps {
     mode: ChatBubbleMode;
     status?: ReactNode;
     time?: ReactNode;
+    edited?: boolean;
 }
 /**
  * Время и статус сообщения

package/Meta.js

@@ -1,8 +1,9 @@
 import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslation } from '@hh.ru/magritte-common-use-translation';
 import { getColors } from './internal/colors.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-_dWjtbo3.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
 import './internal/mode.js';
 import 'react';
 
@@ -10,12 +11,13 @@ import 'react';
  * Время и статус сообщения
  * Рендерится внутри последнего элемента контента.
  * */
-const Meta = ({ mode, status, time }) => {
+const Meta = ({ edited, mode, status, time }) => {
     const visibleStatus = mode === 'incoming' ? undefined : status;
-    if (!time && !visibleStatus) {
+    const editedLabel = useTranslation('ChatBubble', 'edited');
+    if (!time && !visibleStatus && !edited) {
         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] }));
+    return (jsxs("span", { className: styles.meta, "data-qa": "chat-bubble-meta", children: [(time || edited) && (jsxs(Text, { Element: "span", typography: "label-4-regular", style: getColors(mode).secondaryText, children: [edited && jsx("span", { className: styles.edited, children: editedLabel }), time && jsx("span", { children: time })] })), visibleStatus] }));
 };
 
 export { Meta };

package/Meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"Meta.js","sources":["src/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;;;;"}
+{"version":3,"file":"Meta.js","sources":["src/Meta.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\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    edited?: boolean;\n}\n\n/**\n * Время и статус сообщения\n * Рендерится внутри последнего элемента контента.\n * */\nexport const Meta: FC<MetaProps> = ({ edited, mode, status, time }) => {\n    const visibleStatus = mode === 'incoming' ? undefined : status;\n    const editedLabel = useTranslation('ChatBubble', 'edited');\n\n    if (!time && !visibleStatus && !edited) {\n        return null;\n    }\n\n    return (\n        <span className={styles.meta} data-qa=\"chat-bubble-meta\">\n            {(time || edited) && (\n                <Text Element=\"span\" typography=\"label-4-regular\" style={getColors(mode).secondaryText}>\n                    {edited && <span className={styles.edited}>{editedLabel}</span>}\n                    {time && <span>{time}</span>}\n                </Text>\n            )}\n            {visibleStatus}\n        </span>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAgBA;;;AAGK;AACE,MAAM,IAAI,GAAkB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAI;AAClE,IAAA,MAAM,aAAa,GAAG,IAAI,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE3D,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,EAAE;AACpC,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,QACIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,SAAA,EAAU,kBAAkB,EAAA,QAAA,EAAA,CACnD,CAAC,IAAI,IAAI,MAAM,MACZA,IAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,aAAa,EACjF,QAAA,EAAA,CAAA,MAAM,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EAAG,WAAW,EAAA,CAAQ,EAC9D,IAAI,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,EAAA,CAAQ,CACzB,EAAA,CAAA,CACV,EACA,aAAa,CACX,EAAA,CAAA,EACT;AACN;;;;"}

package/Reply.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useChatBubbleColors } from './internal/colors.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-_dWjtbo3.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
 import './internal/mode.js';
 
 /**

package/Snippet.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useChatBubbleColors } from './internal/colors.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from './chat-bubble-_dWjtbo3.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
 import './internal/mode.js';
 
 /**

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

package/Tail.js

@@ -2,7 +2,7 @@ import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { useChatBubbleMode } from './internal/mode.js';
-import { s as styles } from './chat-bubble-_dWjtbo3.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.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/chat-bubble-C7c7YGmG.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_2-0-0","chatBubble":"magritte-chat-bubble___ds9CP_2-0-0","outgoing":"magritte-outgoing___3n00o_2-0-0","bot":"magritte-bot___Z6vZA_2-0-0","row":"magritte-row___mQNnt_2-0-0","bubble":"magritte-bubble___NVuDI_2-0-0","with-tail":"magritte-with-tail___IdixJ_2-0-0","withTail":"magritte-with-tail___IdixJ_2-0-0","tail":"magritte-tail___E2hdk_2-0-0","tail-outgoing":"magritte-tail-outgoing___Pn3MI_2-0-0","tailOutgoing":"magritte-tail-outgoing___Pn3MI_2-0-0","buttons":"magritte-buttons___yQqBi_2-0-0","aside":"magritte-aside___bTex-_2-0-0","aside-revealed":"magritte-aside-revealed___CRBl7_2-0-0","asideRevealed":"magritte-aside-revealed___CRBl7_2-0-0","error-text":"magritte-error-text___1ZxWY_2-0-0","errorText":"magritte-error-text___1ZxWY_2-0-0","file":"magritte-file___k2IKy_2-0-0","file-preview":"magritte-file-preview___eJKu8_2-0-0","filePreview":"magritte-file-preview___eJKu8_2-0-0","media":"magritte-media___9jH2k_2-0-0","media-blur":"magritte-media-blur___TbiMa_2-0-0","mediaBlur":"magritte-media-blur___TbiMa_2-0-0","media-image":"magritte-media-image___G-FkF_2-0-0","mediaImage":"magritte-media-image___G-FkF_2-0-0","media-content":"magritte-media-content___n3XbD_2-0-0","mediaContent":"magritte-media-content___n3XbD_2-0-0","media-format":"magritte-media-format___AdfCK_2-0-0","mediaFormat":"magritte-media-format___AdfCK_2-0-0","media-meta":"magritte-media-meta___oSxxr_2-0-0","mediaMeta":"magritte-media-meta___oSxxr_2-0-0","reply":"magritte-reply___-QCK7_2-0-0","reply-preview":"magritte-reply-preview___qvlNT_2-0-0","replyPreview":"magritte-reply-preview___qvlNT_2-0-0","reply-body":"magritte-reply-body___f2xx7_2-0-0","replyBody":"magritte-reply-body___f2xx7_2-0-0","snippet":"magritte-snippet___8k9xb_2-0-0","meta":"magritte-meta___1qhjm_2-0-0","edited":"magritte-edited___m-zmB_2-0-0","status":"magritte-status___dHzCt_2-0-0","message-title":"magritte-message-title___dgBFk_2-0-0","messageTitle":"magritte-message-title___dgBFk_2-0-0","label":"magritte-label___i0Wyt_2-0-0","message":"magritte-message___7TEpw_2-0-0"};
+
+export { styles as s };
+//# sourceMappingURL=chat-bubble-C7c7YGmG.js.map

package/chat-bubble-C7c7YGmG.js.map

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

package/index.css

@@ -16,6 +16,10 @@
   --magritte-color-component-chat-bubble-snippet-line-bot-v25-0-1:#9054ea;
 }
 
+:root{
+  --magritte-semantic-animation-time-s-duration-v25-0-1:200ms;
+}
+
 .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;
@@ -34,7 +38,7 @@
   --magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1:#90ACC1;
   --magritte-color-component-chat-bubble-snippet-line-incoming-v25-0-1:#557B96;
 }
-.magritte-chat-bubble___ds9CP_1-6-1{
+.magritte-chat-bubble___ds9CP_2-0-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);
   --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-incoming-v25-0-1);
@@ -45,16 +49,16 @@
   max-width:calc(100% - 40px);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-chat-bubble___ds9CP_1-6-1{
+  body.magritte-old-layout .magritte-chat-bubble___ds9CP_2-0-0{
     max-width:min(460px, 100%);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_1-6-1{
+  body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_2-0-0{
     max-width:min(460px, 100%);
   }
 }
-.magritte-outgoing___3n00o_1-6-1{
+.magritte-outgoing___3n00o_2-0-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);
   --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1);
@@ -62,19 +66,20 @@
   align-items:flex-end;
   margin-left:auto;
 }
-.magritte-bot___Z6vZA_1-6-1{
+.magritte-bot___Z6vZA_2-0-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-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-bot-v25-0-1);
   --magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-bot-v25-0-1);
 }
-.magritte-row___mQNnt_1-6-1{
+.magritte-row___mQNnt_2-0-0{
   display:flex;
+  position:relative;
   align-items:flex-end;
   gap:8px;
   max-width:100%;
 }
-.magritte-bubble___NVuDI_1-6-1{
+.magritte-bubble___NVuDI_2-0-0{
   position:relative;
   box-sizing:border-box;
   min-width:0;
@@ -85,54 +90,68 @@
   border-radius:20px;
   overflow-wrap:break-word;
 }
-.magritte-with-tail___IdixJ_1-6-1 .magritte-bubble___NVuDI_1-6-1{
+.magritte-with-tail___IdixJ_2-0-0 .magritte-bubble___NVuDI_2-0-0{
   border-bottom-left-radius:0;
 }
-.magritte-with-tail___IdixJ_1-6-1.magritte-outgoing___3n00o_1-6-1 .magritte-bubble___NVuDI_1-6-1{
+.magritte-with-tail___IdixJ_2-0-0.magritte-outgoing___3n00o_2-0-0 .magritte-bubble___NVuDI_2-0-0{
   border-bottom-left-radius:20px;
   border-bottom-right-radius:0;
 }
-.magritte-tail___E2hdk_1-6-1{
+.magritte-tail___E2hdk_2-0-0{
   position:absolute;
   bottom:-1px;
   left:-7px;
 }
-.magritte-tail-outgoing___Pn3MI_1-6-1{
+.magritte-tail-outgoing___Pn3MI_2-0-0{
   left:auto;
   right:-7px;
   transform:scaleX(-1);
 }
-.magritte-buttons___yQqBi_1-6-1{
+.magritte-buttons___yQqBi_2-0-0{
   display:grid;
   grid-template-columns:repeat(2, 1fr);
   gap:8px;
   width:100%;
   margin-top:4px;
 }
-.magritte-buttons___yQqBi_1-6-1 > *:last-child:nth-child(odd){
-  grid-column:span 2;
-}
-.magritte-actions___I5GSz_1-6-1{
+.magritte-aside___bTex-_2-0-0{
   display:flex;
-  flex-wrap:wrap;
-  gap:2px;
-  margin-top:4px;
+  position:absolute;
+  top:0;
+  bottom:0;
+  left:100%;
+  align-items:flex-start;
+  padding-left:8px;
+  opacity:0;
+  transition:opacity var(--magritte-semantic-animation-time-s-duration-v25-0-1) ease-in-out;
 }
-.magritte-error-text___1ZxWY_1-6-1{
+.magritte-aside-revealed___CRBl7_2-0-0{
+  opacity:1;
+}
+.magritte-outgoing___3n00o_2-0-0 .magritte-aside___bTex-_2-0-0{
+  left:auto;
+  right:100%;
+  padding-right:8px;
+  padding-left:0;
+}
+.magritte-buttons___yQqBi_2-0-0 > *:last-child:nth-child(odd){
+  grid-column:span 2;
+}
+.magritte-error-text___1ZxWY_2-0-0{
   margin-top:2px;
 }
-.magritte-file___k2IKy_1-6-1{
+.magritte-file___k2IKy_2-0-0{
   display:flex;
   align-items:flex-end;
 }
-.magritte-file-preview___eJKu8_1-6-1{
+.magritte-file-preview___eJKu8_2-0-0{
   display:block;
   width:48px;
   height:48px;
   border-radius:8px;
   object-fit:cover;
 }
-.magritte-media___9jH2k_1-6-1{
+.magritte-media___9jH2k_2-0-0{
   display:flex;
   position:relative;
   box-sizing:border-box;
@@ -145,18 +164,18 @@
   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-6-1{
+  body.magritte-old-layout .magritte-media___9jH2k_2-0-0{
     max-width:452px;
     max-height:452px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media___9jH2k_1-6-1{
+  body:not(.magritte-old-layout) .magritte-media___9jH2k_2-0-0{
     max-width:452px;
     max-height:452px;
   }
 }
-.magritte-media-blur___TbiMa_1-6-1{
+.magritte-media-blur___TbiMa_2-0-0{
   position:absolute;
   top:-96px;
   left:-96px;
@@ -166,7 +185,7 @@
   filter:blur(48px);
   object-fit:cover;
 }
-.magritte-media-image___G-FkF_1-6-1{
+.magritte-media-image___G-FkF_2-0-0{
   display:block;
   position:relative;
   max-width:100%;
@@ -174,23 +193,23 @@
   margin:auto;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-media-image___G-FkF_1-6-1{
+  body.magritte-old-layout .magritte-media-image___G-FkF_2-0-0{
     max-height:452px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media-image___G-FkF_1-6-1{
+  body:not(.magritte-old-layout) .magritte-media-image___G-FkF_2-0-0{
     max-height:452px;
   }
 }
-.magritte-media-content___n3XbD_1-6-1{
+.magritte-media-content___n3XbD_2-0-0{
   display:flex;
   position:absolute;
   inset:0;
   align-items:center;
   justify-content:center;
 }
-.magritte-media-format___AdfCK_1-6-1{
+.magritte-media-format___AdfCK_2-0-0{
   display:flex;
   position:absolute;
   padding:2px 8px;
@@ -200,7 +219,7 @@
   top:4px;
   left:4px;
 }
-.magritte-media-meta___oSxxr_1-6-1{
+.magritte-media-meta___oSxxr_2-0-0{
   --magritte-ui-text-color-override:var(--magritte-color-text-constant-v25-0-1);
   display:flex;
   position:absolute;
@@ -212,13 +231,13 @@
   bottom:4px;
   align-items:center;
 }
-.magritte-media-meta___oSxxr_1-6-1:empty{
+.magritte-media-meta___oSxxr_2-0-0:empty{
   display:none;
 }
-.magritte-media-meta___oSxxr_1-6-1 > span{
+.magritte-media-meta___oSxxr_2-0-0 > span{
   margin-left:0;
 }
-.magritte-reply___-QCK7_1-6-1{
+.magritte-reply___-QCK7_2-0-0{
   display:flex;
   position:relative;
   padding:8px;
@@ -229,7 +248,7 @@
   align-items:center;
   gap:8px;
 }
-.magritte-reply___-QCK7_1-6-1::before{
+.magritte-reply___-QCK7_2-0-0::before{
   content:'';
   position:absolute;
   top:0;
@@ -238,7 +257,7 @@
   width:4px;
   background-color:var(--magritte-chat-bubble-snippet-line);
 }
-.magritte-reply-preview___qvlNT_1-6-1{
+.magritte-reply-preview___qvlNT_2-0-0{
   display:block;
   flex-shrink:0;
   width:40px;
@@ -248,12 +267,12 @@
   outline-offset:-1px;
   object-fit:cover;
 }
-.magritte-reply-body___f2xx7_1-6-1{
+.magritte-reply-body___f2xx7_2-0-0{
   display:flex;
   flex-direction:column;
   min-width:0;
 }
-.magritte-snippet___8k9xb_1-6-1{
+.magritte-snippet___8k9xb_2-0-0{
   display:flex;
   position:relative;
   padding:8px;
@@ -264,7 +283,7 @@
   flex-direction:column;
   gap:2px;
 }
-.magritte-snippet___8k9xb_1-6-1::before{
+.magritte-snippet___8k9xb_2-0-0::before{
   content:'';
   position:absolute;
   top:0;
@@ -273,7 +292,7 @@
   width:4px;
   background-color:var(--magritte-chat-bubble-snippet-line);
 }
-.magritte-snippet___8k9xb_1-6-1 img{
+.magritte-snippet___8k9xb_2-0-0 img{
   display:block;
   max-width:100%;
   border-radius:4px;
@@ -281,7 +300,7 @@
   outline-offset:-1px;
   margin-top:6px;
 }
-.magritte-meta___1qhjm_1-6-1{
+.magritte-meta___1qhjm_2-0-0{
   float:right;
   margin-left:12px;
   white-space:nowrap;
@@ -294,50 +313,53 @@
   text-transform:none;
   text-decoration:none;
 }
-.magritte-status___dHzCt_1-6-1{
+.magritte-edited___m-zmB_2-0-0{
+  margin-right:4px;
+}
+.magritte-status___dHzCt_2-0-0{
   display:inline-flex;
   vertical-align:middle;
 }
-.magritte-status___dHzCt_1-6-1:not(:first-child){
+.magritte-status___dHzCt_2-0-0:not(:first-child){
   margin-left:4px;
 }
-.magritte-message-title___dgBFk_1-6-1{
+.magritte-message-title___dgBFk_2-0-0{
   margin-bottom:4px;
 }
-.magritte-label___i0Wyt_1-6-1 + .magritte-media___9jH2k_1-6-1,
-.magritte-label___i0Wyt_1-6-1 + .magritte-message___7TEpw_1-6-1,
-.magritte-label___i0Wyt_1-6-1 + .magritte-snippet___8k9xb_1-6-1,
-.magritte-message___7TEpw_1-6-1 + .magritte-message___7TEpw_1-6-1,
-.magritte-bubble___NVuDI_1-6-1 > .magritte-meta___1qhjm_1-6-1{
+.magritte-label___i0Wyt_2-0-0 + .magritte-media___9jH2k_2-0-0,
+.magritte-label___i0Wyt_2-0-0 + .magritte-message___7TEpw_2-0-0,
+.magritte-label___i0Wyt_2-0-0 + .magritte-snippet___8k9xb_2-0-0,
+.magritte-message___7TEpw_2-0-0 + .magritte-message___7TEpw_2-0-0,
+.magritte-bubble___NVuDI_2-0-0 > .magritte-meta___1qhjm_2-0-0{
   margin-top:4px;
 }
-.magritte-label___i0Wyt_1-6-1 + .magritte-reply___-QCK7_1-6-1,
-.magritte-reply___-QCK7_1-6-1 + .magritte-media___9jH2k_1-6-1,
-.magritte-reply___-QCK7_1-6-1 + .magritte-message___7TEpw_1-6-1,
-.magritte-reply___-QCK7_1-6-1 + .magritte-snippet___8k9xb_1-6-1,
-.magritte-media___9jH2k_1-6-1 + .magritte-snippet___8k9xb_1-6-1{
+.magritte-label___i0Wyt_2-0-0 + .magritte-reply___-QCK7_2-0-0,
+.magritte-reply___-QCK7_2-0-0 + .magritte-media___9jH2k_2-0-0,
+.magritte-reply___-QCK7_2-0-0 + .magritte-message___7TEpw_2-0-0,
+.magritte-reply___-QCK7_2-0-0 + .magritte-snippet___8k9xb_2-0-0,
+.magritte-media___9jH2k_2-0-0 + .magritte-snippet___8k9xb_2-0-0{
   margin-top:8px;
 }
-.magritte-label___i0Wyt_1-6-1 + .magritte-file___k2IKy_1-6-1,
-.magritte-reply___-QCK7_1-6-1 + .magritte-file___k2IKy_1-6-1,
-.magritte-media___9jH2k_1-6-1 + .magritte-file___k2IKy_1-6-1,
-.magritte-media___9jH2k_1-6-1 + .magritte-message___7TEpw_1-6-1,
-.magritte-file___k2IKy_1-6-1 + .magritte-message___7TEpw_1-6-1,
-.magritte-file___k2IKy_1-6-1 + .magritte-snippet___8k9xb_1-6-1{
+.magritte-label___i0Wyt_2-0-0 + .magritte-file___k2IKy_2-0-0,
+.magritte-reply___-QCK7_2-0-0 + .magritte-file___k2IKy_2-0-0,
+.magritte-media___9jH2k_2-0-0 + .magritte-file___k2IKy_2-0-0,
+.magritte-media___9jH2k_2-0-0 + .magritte-message___7TEpw_2-0-0,
+.magritte-file___k2IKy_2-0-0 + .magritte-message___7TEpw_2-0-0,
+.magritte-file___k2IKy_2-0-0 + .magritte-snippet___8k9xb_2-0-0{
   margin-top:12px;
 }
-.magritte-message___7TEpw_1-6-1 + .magritte-snippet___8k9xb_1-6-1{
+.magritte-message___7TEpw_2-0-0 + .magritte-snippet___8k9xb_2-0-0{
   margin-top:16px;
 }
-.magritte-file___k2IKy_1-6-1 + .magritte-file___k2IKy_1-6-1{
+.magritte-file___k2IKy_2-0-0 + .magritte-file___k2IKy_2-0-0{
   margin-top:24px;
 }
-.magritte-label___i0Wyt_1-6-1{
+.magritte-label___i0Wyt_2-0-0{
   margin-top:-4px;
 }
-.magritte-bubble___NVuDI_1-6-1 > .magritte-media___9jH2k_1-6-1:first-child{
+.magritte-bubble___NVuDI_2-0-0 > .magritte-media___9jH2k_2-0-0:first-child{
   margin-top:-8px;
 }
-.magritte-bubble___NVuDI_1-6-1 > .magritte-media___9jH2k_1-6-1:not(:has( ~ :not(.magritte-tail___E2hdk_1-6-1))){
+.magritte-bubble___NVuDI_2-0-0 > .magritte-media___9jH2k_2-0-0:not(:has( ~ :not(.magritte-tail___E2hdk_2-0-0))){
   margin-bottom:-8px;
 }

package/index.d.ts

@@ -1,5 +1,6 @@
 export { ChatBubble } from '@hh.ru/magritte-ui-chat-bubble/ChatBubble';
 export type { ChatBubbleMode, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
+export type { ChatBubbleCallProps, ChatBubbleCallState } from '@hh.ru/magritte-ui-chat-bubble/Call';
 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';

package/index.js

@@ -3,30 +3,31 @@ export { ChatBubble } from './ChatBubble.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
+import '@hh.ru/magritte-common-mouse';
 import '@hh.ru/magritte-ui-button';
-import './ErrorAction.js';
-import './internal/errorMenu.js';
-import '@hh.ru/magritte-ui-menu';
-import './File.js';
+import './Call.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 './chat-bubble-C7c7YGmG.js';
+import './ErrorAction.js';
+import './internal/errorMenu.js';
+import '@hh.ru/magritte-ui-menu';
+import './File.js';
 import '@hh.ru/magritte-ui-link';
 import '@hh.ru/magritte-ui-loader';
-import './chat-bubble-_dWjtbo3.js';
 import './Label.js';
 import '@hh.ru/magritte-ui-typography';
 import './Media.js';
 import './Message.js';
 import './Meta.js';
+import '@hh.ru/magritte-common-use-translation';
 import './Reply.js';
 import './Snippet.js';
 import './Status.js';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-common-use-translation';
 import '@hh.ru/magritte-ui-tooltip';
 import './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,4 +1,5 @@
 export type { ChatBubbleMode, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
+export type { ChatBubbleCallProps, ChatBubbleCallState } from '@hh.ru/magritte-ui-chat-bubble/Call';
 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';
@@ -8,6 +9,7 @@ export type { ChatBubbleReplyProps } from '@hh.ru/magritte-ui-chat-bubble/Reply'
 export type { ChatBubbleSnippetProps } from '@hh.ru/magritte-ui-chat-bubble/Snippet';
 export type { ChatBubbleStatusProps, ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/Status';
 export declare const ChatBubble: import("react").ForwardRefExoticComponent<Record<string, unknown>> & {
+    Call: 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>>;

package/index.mock.js

@@ -1,6 +1,7 @@
 import './index.css';
 import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
 
+const Call = mockComponent('ChatBubble.Call');
 const ErrorAction = mockComponent('ChatBubble.ErrorAction', undefined, { withChildren: true });
 const File = mockComponent('ChatBubble.File');
 const Label = mockComponent('ChatBubble.Label', undefined, { withChildren: true });
@@ -10,6 +11,7 @@ const Reply = mockComponent('ChatBubble.Reply', undefined, { withChildren: true
 const Snippet = mockComponent('ChatBubble.Snippet', undefined, { withChildren: true });
 const Status = mockComponent('ChatBubble.Status', undefined, { withChildren: true });
 const ChatBubble = Object.assign(mockComponent('ChatBubble', undefined, { withChildren: true }), {
+    Call,
     ErrorAction,
     File,
     Label,

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, 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 { ChatBubbleReplyProps } from '@hh.ru/magritte-ui-chat-bubble/Reply';\nexport type { ChatBubbleSnippetProps } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\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 Reply = mockComponent('ChatBubble.Reply', undefined, { withChildren: true });\nconst Snippet = mockComponent('ChatBubble.Snippet', 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    Reply,\n    Snippet,\n    Status,\n});\n"],"names":[],"mappings":";;AAYA,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,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,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 { ChatBubbleCallProps, ChatBubbleCallState } from '@hh.ru/magritte-ui-chat-bubble/Call';\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 { ChatBubbleReplyProps } from '@hh.ru/magritte-ui-chat-bubble/Reply';\nexport type { ChatBubbleSnippetProps } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\nexport type { ChatBubbleStatusProps, ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/Status';\n\nconst Call = mockComponent('ChatBubble.Call');\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 Reply = mockComponent('ChatBubble.Reply', undefined, { withChildren: true });\nconst Snippet = mockComponent('ChatBubble.Snippet', undefined, { withChildren: true });\nconst Status = mockComponent('ChatBubble.Status', undefined, { withChildren: true });\n\nexport const ChatBubble = Object.assign(mockComponent('ChatBubble', undefined, { withChildren: true }), {\n    Call,\n    ErrorAction,\n    File,\n    Label,\n    Media,\n    Message,\n    Reply,\n    Snippet,\n    Status,\n});\n"],"names":[],"mappings":";;AAaA,MAAM,IAAI,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAC9C,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,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,IAAI;IACJ,WAAW;IACX,IAAI;IACJ,KAAK;IACL,KAAK;IACL,OAAO;IACP,KAAK;IACL,OAAO;IACP,MAAM;AACT,CAAA;;;;"}

package/internal/colors.d.ts

@@ -1,5 +1,5 @@
 import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';
-import type { ButtonStyle } from '@hh.ru/magritte-ui-button';
+import type { ButtonProps } 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';
@@ -15,10 +15,8 @@ export interface ChatBubbleColors {
     replyTitle: TextStyle;
     /** Иконка статуса, лежит на фоне баббла */
     statusIcon: IconColor;
-    /** Иконки действий, лежат под бабблом на фоне страницы */
-    actionsIcon: IconColor;
     /** Кнопки под бабблом */
-    button: ButtonStyle;
+    button: Pick<ButtonProps, 'mode' | 'style'>;
     /** Ссылка-действие: «Открыть», «Загрузить» */
     link: Pick<LinkProps, 'style' | 'mode'>;
     /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */

package/internal/colors.js

@@ -9,8 +9,7 @@ const COLORS = {
         accentText: 'accent',
         replyTitle: 'accent',
         statusIcon: 'constant',
-        actionsIcon: 'secondary',
-        button: 'neutral',
+        button: { mode: 'secondary', style: 'neutral' },
         link: { style: 'accent' },
         secondaryIcon: 'secondary',
         fileIcon: 'constant',
@@ -22,8 +21,7 @@ const COLORS = {
         accentText: 'constant',
         replyTitle: 'constant',
         statusIcon: 'constant',
-        actionsIcon: 'accent',
-        button: 'accent',
+        button: { mode: 'primary', style: 'accent' },
         link: { style: 'constant', mode: 'secondary' },
         secondaryIcon: 'constant',
         fileIcon: 'accent',
@@ -35,8 +33,7 @@ const COLORS = {
         accentText: 'special',
         replyTitle: 'accent',
         statusIcon: 'special',
-        actionsIcon: 'special',
-        button: 'special',
+        button: { mode: 'secondary', style: 'special' },
         link: { style: 'accent' },
         secondaryIcon: 'secondary',
         fileIcon: 'constant',

package/internal/colors.js.map

@@ -1 +1 @@
-{"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 { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\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    /** Автор цитируемого сообщения (у бота акцентный, потому отдельно от accentText) */\n    replyTitle: 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        replyTitle: '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        replyTitle: '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        replyTitle: 'accent',\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\n// Для подкомпонентов, которые сидят под mode провайдером\nexport const useChatBubbleColors = (): ChatBubbleColors => COLORS[useChatBubbleMode()];\n"],"names":[],"mappings":";;;AAiCA,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,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,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,QAAQ;AACpB,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,EAAE;AAElF;AACO,MAAM,mBAAmB,GAAG,MAAwB,MAAM,CAAC,iBAAiB,EAAE;;;;"}
+{"version":3,"file":"colors.js","sources":["src/internal/colors.ts"],"sourcesContent":["import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';\nimport type { ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\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    /** Автор цитируемого сообщения (у бота акцентный, потому отдельно от accentText) */\n    replyTitle: TextStyle;\n    /** Иконка статуса, лежит на фоне баббла */\n    statusIcon: IconColor;\n    /** Кнопки под бабблом */\n    button: Pick<ButtonProps, 'mode' | 'style'>;\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        replyTitle: 'accent',\n        statusIcon: 'constant',\n        button: { mode: 'secondary', style: '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        replyTitle: 'constant',\n        statusIcon: 'constant',\n        button: { mode: 'primary', style: '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        replyTitle: 'accent',\n        statusIcon: 'special',\n        button: { mode: 'secondary', style: '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\n// Для подкомпонентов, которые сидят под mode провайдером\nexport const useChatBubbleColors = (): ChatBubbleColors => COLORS[useChatBubbleMode()];\n"],"names":[],"mappings":";;;AA+BA,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,QAAQ;AACpB,QAAA,UAAU,EAAE,UAAU;QACtB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,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,UAAU,EAAE,UAAU;QACtB,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5C,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,QAAQ;AACpB,QAAA,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,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,EAAE;AAElF;AACO,MAAM,mBAAmB,GAAG,MAAwB,MAAM,CAAC,iBAAiB,EAAE;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-chat-bubble",
-  "version": "1.6.1",
+  "version": "2.0.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -19,18 +19,19 @@
     "watch": "yarn root:watch $(pwd)"
   },
   "dependencies": {
+    "@hh.ru/magritte-common-mouse": "1.2.0",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
-    "@hh.ru/magritte-common-use-translation": "3.3.0",
+    "@hh.ru/magritte-common-use-translation": "3.4.0",
     "@hh.ru/magritte-design-tokens": "25.0.1",
     "@hh.ru/magritte-ui-breakpoint": "6.1.1",
-    "@hh.ru/magritte-ui-button": "7.3.1",
+    "@hh.ru/magritte-ui-button": "7.3.2",
     "@hh.ru/magritte-ui-cell": "7.2.39",
     "@hh.ru/magritte-ui-icon": "15.1.0",
     "@hh.ru/magritte-ui-link": "7.2.1",
     "@hh.ru/magritte-ui-loader": "4.1.1",
-    "@hh.ru/magritte-ui-menu": "1.0.36",
+    "@hh.ru/magritte-ui-menu": "1.0.37",
     "@hh.ru/magritte-ui-mock-component": "1.1.7",
-    "@hh.ru/magritte-ui-tooltip": "11.0.45",
+    "@hh.ru/magritte-ui-tooltip": "11.0.46",
     "@hh.ru/magritte-ui-typography": "5.3.12"
   },
   "peerDependencies": {
@@ -40,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b2634396c1dee5a4b041bd4b5639f7086a9e8428"
+  "gitHead": "7851a979c2a202a7fecc4c673dd6b72d959b58b4"
 }

package/types.d.ts

@@ -20,10 +20,10 @@ export interface ChatBubbleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
     time?: ReactNode;
     /** Статус сообщения: `ChatBubble.Status`. У входящих сообщений статусов нет */
     status?: ReactNode;
-    /** Дополнительные действия с сообщением: список иконок размера 16px под бабблом */
-    actions?: ReactNode;
-    /** Кнопки под бабблом. Доступны только у входящих сообщений и сообщений от бота */
+    /** Кнопки под бабблом */
     buttons?: ReactNode;
+    /** Сообщение было отредактировано */
+    edited?: boolean;
     /** Ошибка отправки. Показывается только у исходящего сообщения */
     error?: boolean;
     /** Текст ошибки под сообщением */
@@ -32,6 +32,8 @@ export interface ChatBubbleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
      * Действия для исправления ошибки: список `ChatBubble.ErrorAction`.
      */
     errorActions?: ReactNode;
+    /** Слот сбоку от баббла, напротив хвоста сообщения */
+    aside?: ReactNode;
     /**
      * Содержимое сообщения
      * - `ChatBubble.Message`

package/chat-bubble-_dWjtbo3.js

@@ -1,5 +0,0 @@
-import './index.css';
-var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_1-6-1","chatBubble":"magritte-chat-bubble___ds9CP_1-6-1","outgoing":"magritte-outgoing___3n00o_1-6-1","bot":"magritte-bot___Z6vZA_1-6-1","row":"magritte-row___mQNnt_1-6-1","bubble":"magritte-bubble___NVuDI_1-6-1","with-tail":"magritte-with-tail___IdixJ_1-6-1","withTail":"magritte-with-tail___IdixJ_1-6-1","tail":"magritte-tail___E2hdk_1-6-1","tail-outgoing":"magritte-tail-outgoing___Pn3MI_1-6-1","tailOutgoing":"magritte-tail-outgoing___Pn3MI_1-6-1","buttons":"magritte-buttons___yQqBi_1-6-1","actions":"magritte-actions___I5GSz_1-6-1","error-text":"magritte-error-text___1ZxWY_1-6-1","errorText":"magritte-error-text___1ZxWY_1-6-1","file":"magritte-file___k2IKy_1-6-1","file-preview":"magritte-file-preview___eJKu8_1-6-1","filePreview":"magritte-file-preview___eJKu8_1-6-1","media":"magritte-media___9jH2k_1-6-1","media-blur":"magritte-media-blur___TbiMa_1-6-1","mediaBlur":"magritte-media-blur___TbiMa_1-6-1","media-image":"magritte-media-image___G-FkF_1-6-1","mediaImage":"magritte-media-image___G-FkF_1-6-1","media-content":"magritte-media-content___n3XbD_1-6-1","mediaContent":"magritte-media-content___n3XbD_1-6-1","media-format":"magritte-media-format___AdfCK_1-6-1","mediaFormat":"magritte-media-format___AdfCK_1-6-1","media-meta":"magritte-media-meta___oSxxr_1-6-1","mediaMeta":"magritte-media-meta___oSxxr_1-6-1","reply":"magritte-reply___-QCK7_1-6-1","reply-preview":"magritte-reply-preview___qvlNT_1-6-1","replyPreview":"magritte-reply-preview___qvlNT_1-6-1","reply-body":"magritte-reply-body___f2xx7_1-6-1","replyBody":"magritte-reply-body___f2xx7_1-6-1","snippet":"magritte-snippet___8k9xb_1-6-1","meta":"magritte-meta___1qhjm_1-6-1","status":"magritte-status___dHzCt_1-6-1","message-title":"magritte-message-title___dgBFk_1-6-1","messageTitle":"magritte-message-title___dgBFk_1-6-1","label":"magritte-label___i0Wyt_1-6-1","message":"magritte-message___7TEpw_1-6-1"};
-
-export { styles as s };
-//# sourceMappingURL=chat-bubble-_dWjtbo3.js.map

package/chat-bubble-_dWjtbo3.js.map

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