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

package/Call.js

@@ -6,7 +6,7 @@ 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-LoILH1vk.js';
+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) => {

package/ChatBubble.js

@@ -1,7 +1,8 @@
 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';
@@ -18,11 +19,10 @@ 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-LoILH1vk.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';
@@ -30,12 +30,17 @@ 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, edited, 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', stretched: true, ...colors.button }), [colors]);
     /**
      * Время отдаём последнему элементу контента
@@ -49,7 +54,7 @@ const ChatBubble = forwardRef(({ actions, buttons, children, header, edited, err
     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 && (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;

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 { 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 { 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    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            actions,\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 [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', 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 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 && (\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.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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"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAuCa,UAAU,GAAG,UAAU,CAChC,CACI,EACI,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,MAAM,EACN,YAAY,EACZ,IAAI,GAAG,UAAU,EACjB,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,IAAI,EACJ,KAAK,GAAG,KAAK,EACb,SAAS,EACT,SAAS,EAAE,MAAM,GAAG,aAAa,EACjC,SAAS,GACZ,EACD,GAAG,KACH;AACA,IAAA,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC5C,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAa,IAAI,CAAC,CAAC;IAElD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtD,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAEpE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAClD,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC5D,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;;AAG7D,IAAA,sBAAsB,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAErD,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;AAC/B,IAAA,MAAM,YAAY,GAAyB,OAAO,CAC9C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAC5D,CAAC,MAAM,CAAC,CACX,CAAC;AACF;;;;AAIG;IACH,MAAM,IAAI,GAAGA,GAAC,CAAA,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,CAAC;AAC9E,IAAA,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AACzC,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KACnC,KAAK,KAAK,SAAS,IAAI,UAAU,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,KAAK,CACnF,CAAC;IACF,QACIA,IAAC,sBAAsB,EAAA,EAAC,KAAK,EAAE,IAAI,EAC/B,QAAA,EAAAC,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;AAC9D,gBAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,aAAA,CAAC,EACO,SAAA,EAAA,MAAM,EACf,GAAG,EAAE,GAAG,EAER,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,MAAM,CAAC,GAAG,EACrB,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,EAC3C,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,EAC3C,OAAO,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,EACtC,GAAG,EAAE,MAAM,EAEX,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,QAAA,EAAA,CAAA,MAAM,EACN,OAAO,EACP,CAAC,UAAU,IAAI,IAAI,EACnB,QAAQ,IAAID,GAAA,CAAC,IAAI,EAAA,EAAA,CAAG,CACnB,EAAA,CAAA,EACL,IAAI,KAAK,UAAU,IAAI,KAAK,KACzBC,IACI,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAC,6BAA6B,EAAA,EAC1B,GAAG,EAAE,gBAAgB,EACrB,YAAY,EAAC,UAAU,EACvB,OAAO,EAAE,YAAY,GAAG,MAAM,cAAc,CAAC,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,SAAS,EAAA,SAAA,EACvE,0BAA0B,EAAA,eAAA,EACnB,YAAY,GAAG,MAAM,GAAG,SAAS,EACjC,eAAA,EAAA,YAAY,GAAG,WAAW,GAAG,SAAS,EAAA,CACvD,EACD,YAAY,KACTA,GAAC,CAAA,IAAI,EACD,EAAA,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,cAAc,EACvB,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,WAAW,EAAA,QAAA,EAEpBA,GAAC,CAAA,2BAA2B,IAAC,KAAK,EAAE,cAAc,EAAA,QAAA,EAC7C,YAAY,EAAA,CACa,EAC3B,CAAA,CACV,CACC,EAAA,CAAA,CACT,EACA,KAAK,KACFA,GACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC,EAAA,SAAA,EAClE,mBAAmB,EAE1B,QAAA,EAAA,KAAK,EACJ,CAAA,CACT,CACC,EAAA,CAAA,EACL,IAAI,KAAK,UAAU,IAAI,KAAK,IAAI,SAAS,KACtCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAU,SAAA,EAAA,wBAAwB,EAC9D,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAC,EAAA,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,EAAA,QAAA,EAC1D,SAAS,EAAA,CACP,EACL,CAAA,CACT,EACA,OAAO,KACJA,GAAC,CAAA,yBAAyB,EAAC,EAAA,KAAK,EAAE,YAAY,EAAA,QAAA,EAC1CA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,aAAU,qBAAqB,EAAA,QAAA,EACxD,OAAO,EAAA,CACN,EACkB,CAAA,CAC/B,CACC,EAAA,CAAA,EAAA,CACe,EAC3B;AACN,CAAC,EAC8G;AAEnH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,UAAU,CAAC,IAAI,GAAG,cAAc,CAAC;AACjC,UAAU,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAC/C,UAAU,CAAC,IAAI,GAAG,cAAc,CAAC;AACjC,UAAU,CAAC,KAAK,GAAG,eAAe,CAAC;AACnC,UAAU,CAAC,KAAK,GAAG,eAAe,CAAC;AACnC,UAAU,CAAC,OAAO,GAAG,iBAAiB,CAAC;AACvC,UAAU,CAAC,KAAK,GAAG,eAAe,CAAC;AACnC,UAAU,CAAC,OAAO,GAAG,iBAAiB,CAAC;AACvC,UAAU,CAAC,MAAM,GAAG,gBAAgB;;;;"}

package/File.js

@@ -7,7 +7,7 @@ import { markMetaHost } from './internal/utils.js';
 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-LoILH1vk.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
 import './internal/mode.js';
 
 /** Прикреплённый файл */

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-LoILH1vk.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-LoILH1vk.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-LoILH1vk.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
 import './internal/mode.js';
 
 /**

package/Meta.js

@@ -3,7 +3,7 @@ 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-LoILH1vk.js';
+import { s as styles } from './chat-bubble-C7c7YGmG.js';
 import './internal/mode.js';
 import 'react';
 

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-LoILH1vk.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-LoILH1vk.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-LoILH1vk.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-LoILH1vk.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-7-0{
+.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-7-0{
+  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-7-0{
+  body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_2-0-0{
     max-width:min(460px, 100%);
   }
 }
-.magritte-outgoing___3n00o_1-7-0{
+.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-7-0{
+.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-7-0{
+.magritte-row___mQNnt_2-0-0{
   display:flex;
+  position:relative;
   align-items:flex-end;
   gap:8px;
   max-width:100%;
 }
-.magritte-bubble___NVuDI_1-7-0{
+.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-7-0 .magritte-bubble___NVuDI_1-7-0{
+.magritte-with-tail___IdixJ_2-0-0 .magritte-bubble___NVuDI_2-0-0{
   border-bottom-left-radius:0;
 }
-.magritte-with-tail___IdixJ_1-7-0.magritte-outgoing___3n00o_1-7-0 .magritte-bubble___NVuDI_1-7-0{
+.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-7-0{
+.magritte-tail___E2hdk_2-0-0{
   position:absolute;
   bottom:-1px;
   left:-7px;
 }
-.magritte-tail-outgoing___Pn3MI_1-7-0{
+.magritte-tail-outgoing___Pn3MI_2-0-0{
   left:auto;
   right:-7px;
   transform:scaleX(-1);
 }
-.magritte-buttons___yQqBi_1-7-0{
+.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-7-0 > *:last-child:nth-child(odd){
-  grid-column:span 2;
-}
-.magritte-actions___I5GSz_1-7-0{
+.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-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_1-7-0{
+.magritte-error-text___1ZxWY_2-0-0{
   margin-top:2px;
 }
-.magritte-file___k2IKy_1-7-0{
+.magritte-file___k2IKy_2-0-0{
   display:flex;
   align-items:flex-end;
 }
-.magritte-file-preview___eJKu8_1-7-0{
+.magritte-file-preview___eJKu8_2-0-0{
   display:block;
   width:48px;
   height:48px;
   border-radius:8px;
   object-fit:cover;
 }
-.magritte-media___9jH2k_1-7-0{
+.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-7-0{
+  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-7-0{
+  body:not(.magritte-old-layout) .magritte-media___9jH2k_2-0-0{
     max-width:452px;
     max-height:452px;
   }
 }
-.magritte-media-blur___TbiMa_1-7-0{
+.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-7-0{
+.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-7-0{
+  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-7-0{
+  body:not(.magritte-old-layout) .magritte-media-image___G-FkF_2-0-0{
     max-height:452px;
   }
 }
-.magritte-media-content___n3XbD_1-7-0{
+.magritte-media-content___n3XbD_2-0-0{
   display:flex;
   position:absolute;
   inset:0;
   align-items:center;
   justify-content:center;
 }
-.magritte-media-format___AdfCK_1-7-0{
+.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-7-0{
+.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-7-0:empty{
+.magritte-media-meta___oSxxr_2-0-0:empty{
   display:none;
 }
-.magritte-media-meta___oSxxr_1-7-0 > span{
+.magritte-media-meta___oSxxr_2-0-0 > span{
   margin-left:0;
 }
-.magritte-reply___-QCK7_1-7-0{
+.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-7-0::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-7-0{
+.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-7-0{
+.magritte-reply-body___f2xx7_2-0-0{
   display:flex;
   flex-direction:column;
   min-width:0;
 }
-.magritte-snippet___8k9xb_1-7-0{
+.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-7-0::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-7-0 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-7-0{
+.magritte-meta___1qhjm_2-0-0{
   float:right;
   margin-left:12px;
   white-space:nowrap;
@@ -294,53 +313,53 @@
   text-transform:none;
   text-decoration:none;
 }
-.magritte-edited___m-zmB_1-7-0{
+.magritte-edited___m-zmB_2-0-0{
   margin-right:4px;
 }
-.magritte-status___dHzCt_1-7-0{
+.magritte-status___dHzCt_2-0-0{
   display:inline-flex;
   vertical-align:middle;
 }
-.magritte-status___dHzCt_1-7-0:not(:first-child){
+.magritte-status___dHzCt_2-0-0:not(:first-child){
   margin-left:4px;
 }
-.magritte-message-title___dgBFk_1-7-0{
+.magritte-message-title___dgBFk_2-0-0{
   margin-bottom:4px;
 }
-.magritte-label___i0Wyt_1-7-0 + .magritte-media___9jH2k_1-7-0,
-.magritte-label___i0Wyt_1-7-0 + .magritte-message___7TEpw_1-7-0,
-.magritte-label___i0Wyt_1-7-0 + .magritte-snippet___8k9xb_1-7-0,
-.magritte-message___7TEpw_1-7-0 + .magritte-message___7TEpw_1-7-0,
-.magritte-bubble___NVuDI_1-7-0 > .magritte-meta___1qhjm_1-7-0{
+.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-7-0 + .magritte-reply___-QCK7_1-7-0,
-.magritte-reply___-QCK7_1-7-0 + .magritte-media___9jH2k_1-7-0,
-.magritte-reply___-QCK7_1-7-0 + .magritte-message___7TEpw_1-7-0,
-.magritte-reply___-QCK7_1-7-0 + .magritte-snippet___8k9xb_1-7-0,
-.magritte-media___9jH2k_1-7-0 + .magritte-snippet___8k9xb_1-7-0{
+.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-7-0 + .magritte-file___k2IKy_1-7-0,
-.magritte-reply___-QCK7_1-7-0 + .magritte-file___k2IKy_1-7-0,
-.magritte-media___9jH2k_1-7-0 + .magritte-file___k2IKy_1-7-0,
-.magritte-media___9jH2k_1-7-0 + .magritte-message___7TEpw_1-7-0,
-.magritte-file___k2IKy_1-7-0 + .magritte-message___7TEpw_1-7-0,
-.magritte-file___k2IKy_1-7-0 + .magritte-snippet___8k9xb_1-7-0{
+.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-7-0 + .magritte-snippet___8k9xb_1-7-0{
+.magritte-message___7TEpw_2-0-0 + .magritte-snippet___8k9xb_2-0-0{
   margin-top:16px;
 }
-.magritte-file___k2IKy_1-7-0 + .magritte-file___k2IKy_1-7-0{
+.magritte-file___k2IKy_2-0-0 + .magritte-file___k2IKy_2-0-0{
   margin-top:24px;
 }
-.magritte-label___i0Wyt_1-7-0{
+.magritte-label___i0Wyt_2-0-0{
   margin-top:-4px;
 }
-.magritte-bubble___NVuDI_1-7-0 > .magritte-media___9jH2k_1-7-0:first-child{
+.magritte-bubble___NVuDI_2-0-0 > .magritte-media___9jH2k_2-0-0:first-child{
   margin-top:-8px;
 }
-.magritte-bubble___NVuDI_1-7-0 > .magritte-media___9jH2k_1-7-0:not(:has( ~ :not(.magritte-tail___E2hdk_1-7-0))){
+.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.js

@@ -3,6 +3,7 @@ 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 './Call.js';
 import '@hh.ru/magritte-ui-cell';
@@ -10,7 +11,7 @@ import './internal/colors.js';
 import './internal/mode.js';
 import './internal/utils.js';
 import '@hh.ru/magritte-ui-icon/icon';
-import './chat-bubble-LoILH1vk.js';
+import './chat-bubble-C7c7YGmG.js';
 import './ErrorAction.js';
 import './internal/errorMenu.js';
 import '@hh.ru/magritte-ui-menu';
@@ -29,5 +30,4 @@ import './Status.js';
 import '@hh.ru/magritte-common-use-multiple-refs';
 import '@hh.ru/magritte-ui-tooltip';
 import './Tail.js';
-import '@hh.ru/magritte-ui-icon';
 //# sourceMappingURL=index.js.map

package/internal/colors.d.ts

@@ -15,8 +15,6 @@ export interface ChatBubbleColors {
     replyTitle: TextStyle;
     /** Иконка статуса, лежит на фоне баббла */
     statusIcon: IconColor;
-    /** Иконки действий, лежат под бабблом на фоне страницы */
-    actionsIcon: IconColor;
     /** Кнопки под бабблом */
     button: Pick<ButtonProps, 'mode' | 'style'>;
     /** Ссылка-действие: «Открыть», «Загрузить» */

package/internal/colors.js

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

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 { 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    actionsIcon: 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        actionsIcon: 'secondary',\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        actionsIcon: 'accent',\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        actionsIcon: '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":";;;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;QACxB,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;AACtB,QAAA,WAAW,EAAE,QAAQ;QACrB,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;AACrB,QAAA,WAAW,EAAE,SAAS;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,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.7.0",
+  "version": "2.0.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -19,6 +19,7 @@
     "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.4.0",
     "@hh.ru/magritte-design-tokens": "25.0.1",
@@ -40,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bbe87c835b11aa2cbb455ff84d2979834e0bd01e"
+  "gitHead": "7851a979c2a202a7fecc4c673dd6b72d959b58b4"
 }

package/types.d.ts

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

package/chat-bubble-LoILH1vk.js

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

package/chat-bubble-LoILH1vk.js.map

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