@hh.ru/magritte-ui-chat-bubble 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ChatBubble.d.ts +2 -0
- package/ChatBubble.js +4 -2
- package/ChatBubble.js.map +1 -1
- package/File.js +1 -1
- package/Media.js +1 -1
- package/Message.js +1 -1
- package/Snippet.d.ts +17 -0
- package/Snippet.js +20 -0
- package/Snippet.js.map +1 -0
- package/Status.js +1 -1
- package/chat-bubble-BEqoLjma.js +5 -0
- package/chat-bubble-BEqoLjma.js.map +1 -0
- package/chat-bubble-C4Yvxp5H.js +5 -0
- package/chat-bubble-C4Yvxp5H.js.map +1 -0
- package/index.css +92 -41
- package/index.d.ts +1 -0
- package/index.js +3 -2
- package/index.js.map +1 -1
- package/index.mock.d.ts +2 -0
- package/index.mock.js +2 -0
- package/index.mock.js.map +1 -1
- package/internal/Meta.js +1 -1
- package/internal/Tail.js +1 -1
- package/internal/colors.d.ts +3 -3
- package/internal/colors.js.map +1 -1
- package/package.json +2 -2
- package/chat-bubble-C7KYJOC7.js +0 -5
- package/chat-bubble-C7KYJOC7.js.map +0 -1
- package/chat-bubble-DvyT8aq-.js +0 -5
- package/chat-bubble-DvyT8aq-.js.map +0 -1
package/ChatBubble.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { ChatBubbleFile } from '@hh.ru/magritte-ui-chat-bubble/File';
|
|
|
3
3
|
import { ChatBubbleLabel } from '@hh.ru/magritte-ui-chat-bubble/Label';
|
|
4
4
|
import { ChatBubbleMedia } from '@hh.ru/magritte-ui-chat-bubble/Media';
|
|
5
5
|
import { ChatBubbleMessage } from '@hh.ru/magritte-ui-chat-bubble/Message';
|
|
6
|
+
import { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';
|
|
6
7
|
import { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';
|
|
7
8
|
import type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
|
|
8
9
|
interface ChatBubbleComponents {
|
|
@@ -11,6 +12,7 @@ interface ChatBubbleComponents {
|
|
|
11
12
|
Label: typeof ChatBubbleLabel;
|
|
12
13
|
Media: typeof ChatBubbleMedia;
|
|
13
14
|
Message: typeof ChatBubbleMessage;
|
|
15
|
+
Snippet: typeof ChatBubbleSnippet;
|
|
14
16
|
Status: typeof ChatBubbleStatus;
|
|
15
17
|
}
|
|
16
18
|
export declare const ChatBubble: React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;
|
package/ChatBubble.js
CHANGED
|
@@ -8,6 +8,7 @@ import { ChatBubbleFile } from './File.js';
|
|
|
8
8
|
import { ChatBubbleLabel } from './Label.js';
|
|
9
9
|
import { ChatBubbleMedia } from './Media.js';
|
|
10
10
|
import { ChatBubbleMessage } from './Message.js';
|
|
11
|
+
import { ChatBubbleSnippet } from './Snippet.js';
|
|
11
12
|
import { ChatBubbleStatus } from './Status.js';
|
|
12
13
|
import { Meta } from './internal/Meta.js';
|
|
13
14
|
import { Tail } from './internal/Tail.js';
|
|
@@ -19,14 +20,14 @@ import { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';
|
|
|
19
20
|
import { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
20
21
|
import { Menu } from '@hh.ru/magritte-ui-menu';
|
|
21
22
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
22
|
-
import { s as styles } from './chat-bubble-
|
|
23
|
+
import { s as styles } from './chat-bubble-C4Yvxp5H.js';
|
|
23
24
|
import '@hh.ru/magritte-ui-cell';
|
|
24
25
|
import '@hh.ru/magritte-ui-link';
|
|
25
26
|
import '@hh.ru/magritte-ui-loader';
|
|
26
27
|
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
27
28
|
import '@hh.ru/magritte-common-use-translation';
|
|
28
29
|
import '@hh.ru/magritte-ui-tooltip';
|
|
29
|
-
import './chat-bubble-
|
|
30
|
+
import './chat-bubble-BEqoLjma.js';
|
|
30
31
|
|
|
31
32
|
const ChatBubble = forwardRef(({ actions, buttons, children, header, errorActions, mode = 'incoming', showTail = false, status, time, error = false, errorText, 'data-qa': dataQa = 'chat-bubble', className, }, ref) => {
|
|
32
33
|
const [menuVisible, setMenuVisible] = useState(false);
|
|
@@ -55,6 +56,7 @@ ChatBubble.File = ChatBubbleFile;
|
|
|
55
56
|
ChatBubble.Label = ChatBubbleLabel;
|
|
56
57
|
ChatBubble.Media = ChatBubbleMedia;
|
|
57
58
|
ChatBubble.Message = ChatBubbleMessage;
|
|
59
|
+
ChatBubble.Snippet = ChatBubbleSnippet;
|
|
58
60
|
ChatBubble.Status = ChatBubbleStatus;
|
|
59
61
|
|
|
60
62
|
export { ChatBubble };
|
package/ChatBubble.js.map
CHANGED
|
@@ -1 +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 { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';\nimport { Meta } from '@hh.ru/magritte-ui-chat-bubble/internal/Meta';\nimport { Tail } from '@hh.ru/magritte-ui-chat-bubble/internal/Tail';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { ChatBubbleErrorMenuProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { ChatBubbleModeProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { isMetaHost, flattenFragments } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { IconDefaultPropsContext, type IconProps } from '@hh.ru/magritte-ui-icon';\nimport { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Menu } from '@hh.ru/magritte-ui-menu';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface ChatBubbleComponents {\n ErrorAction: typeof ChatBubbleErrorAction;\n File: typeof ChatBubbleFile;\n Label: typeof ChatBubbleLabel;\n Media: typeof ChatBubbleMedia;\n Message: typeof ChatBubbleMessage;\n Status: typeof ChatBubbleStatus;\n}\n\nexport const ChatBubble = forwardRef<HTMLDivElement, ChatBubbleProps>(\n (\n {\n actions,\n buttons,\n children,\n header,\n errorActions,\n mode = 'incoming',\n showTail = false,\n status,\n time,\n error = false,\n errorText,\n 'data-qa': dataQa = 'chat-bubble',\n className,\n },\n ref\n ) => {\n const [menuVisible, setMenuVisible] = useState(false);\n const closeErrorMenu = useCallback(() => setMenuVisible(false), []);\n const activatorMenuRef = useRef<SVGElement>(null);\n const colors = getColors(mode);\n const actionsIconProps: Partial<IconProps> = useMemo(\n () => ({ padding: 8, initialColor: colors.actionsIcon }),\n [colors]\n );\n const buttonsProps: Partial<ButtonProps> = useMemo(\n () => ({ size: 'small', mode: 'secondary', style: colors.button, stretched: true }),\n [colors]\n );\n /**\n * Время отдаём последнему элементу контента\n * Позиция времени меняется, в зависимости от компонента\n * Если последний ребенок не может отрисовать, вставим meta в самый конец\n */\n const meta = <Meta mode={mode} status={status} time={time} />;\n const items = flattenFragments(children);\n const lastIndex = items.length - 1;\n const metaHosted = isMetaHost(items[lastIndex]);\n const content = items.map((child, index) =>\n index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child\n );\n return (\n <ChatBubbleModeProvider value={mode}>\n <div\n className={classnames(className, styles.chatBubble, styles[mode], {\n [styles.withTail]: showTail,\n })}\n data-qa={dataQa}\n ref={ref}\n >\n <div className={styles.row}>\n <div className={styles.bubble}>\n {header && (\n <div className={styles.header} data-qa=\"chat-bubble-header\">\n {header}\n </div>\n )}\n <div\n className={header ? styles.contentWithHeader : undefined}\n data-qa=\"chat-bubble-content\"\n >\n {content}\n {!metaHosted && meta}\n </div>\n {showTail && <Tail />}\n </div>\n {mode === 'outgoing' && error && (\n <div>\n <ExclamationCircleFilledSize24\n ref={activatorMenuRef}\n initialColor=\"negative\"\n onClick={errorActions ? () => setMenuVisible((visible) => !visible) : undefined}\n data-qa=\"chat-bubble-error-button\"\n aria-haspopup={errorActions ? 'menu' : undefined}\n aria-expanded={errorActions ? menuVisible : undefined}\n />\n {errorActions && (\n <Menu\n activatorRef={activatorMenuRef}\n onClose={closeErrorMenu}\n placement=\"bottom-right\"\n visible={menuVisible}\n >\n <ChatBubbleErrorMenuProvider value={closeErrorMenu}>\n {errorActions}\n </ChatBubbleErrorMenuProvider>\n </Menu>\n )}\n </div>\n )}\n </div>\n {mode === 'outgoing' && error && errorText && (\n <div className={styles.errorText} data-qa=\"chat-bubble-error-text\">\n <Text typography=\"label-4-regular\" style=\"negative\" maxLines={2}>\n {errorText}\n </Text>\n </div>\n )}\n {buttons && (mode === 'bot' || mode === 'incoming') && (\n <ButtonDefaultPropsContext props={buttonsProps}>\n <div className={styles.buttons} data-qa=\"chat-bubble-buttons\">\n {buttons}\n </div>\n </ButtonDefaultPropsContext>\n )}\n {actions && (\n <IconDefaultPropsContext props={actionsIconProps}>\n <div className={styles.actions} data-qa=\"chat-bubble-actions\">\n {actions}\n </div>\n </IconDefaultPropsContext>\n )}\n </div>\n </ChatBubbleModeProvider>\n );\n }\n) as React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;\n\nChatBubble.displayName = 'ChatBubble';\n\nChatBubble.ErrorAction = ChatBubbleErrorAction;\nChatBubble.File = ChatBubbleFile;\nChatBubble.Label = ChatBubbleLabel;\nChatBubble.Media = ChatBubbleMedia;\nChatBubble.Message = ChatBubbleMessage;\nChatBubble.Status = ChatBubbleStatus;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
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 { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\nimport { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';\nimport { Meta } from '@hh.ru/magritte-ui-chat-bubble/internal/Meta';\nimport { Tail } from '@hh.ru/magritte-ui-chat-bubble/internal/Tail';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { ChatBubbleErrorMenuProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { ChatBubbleModeProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { isMetaHost, flattenFragments } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { IconDefaultPropsContext, type IconProps } from '@hh.ru/magritte-ui-icon';\nimport { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Menu } from '@hh.ru/magritte-ui-menu';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface ChatBubbleComponents {\n ErrorAction: typeof ChatBubbleErrorAction;\n File: typeof ChatBubbleFile;\n Label: typeof ChatBubbleLabel;\n Media: typeof ChatBubbleMedia;\n Message: typeof ChatBubbleMessage;\n 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 <div className={styles.header} data-qa=\"chat-bubble-header\">\n {header}\n </div>\n )}\n <div\n className={header ? styles.contentWithHeader : undefined}\n data-qa=\"chat-bubble-content\"\n >\n {content}\n {!metaHosted && meta}\n </div>\n {showTail && <Tail />}\n </div>\n {mode === 'outgoing' && error && (\n <div>\n <ExclamationCircleFilledSize24\n ref={activatorMenuRef}\n initialColor=\"negative\"\n onClick={errorActions ? () => setMenuVisible((visible) => !visible) : undefined}\n data-qa=\"chat-bubble-error-button\"\n aria-haspopup={errorActions ? 'menu' : undefined}\n aria-expanded={errorActions ? menuVisible : undefined}\n />\n {errorActions && (\n <Menu\n activatorRef={activatorMenuRef}\n onClose={closeErrorMenu}\n placement=\"bottom-right\"\n visible={menuVisible}\n >\n <ChatBubbleErrorMenuProvider value={closeErrorMenu}>\n {errorActions}\n </ChatBubbleErrorMenuProvider>\n </Menu>\n )}\n </div>\n )}\n </div>\n {mode === 'outgoing' && error && errorText && (\n <div className={styles.errorText} data-qa=\"chat-bubble-error-text\">\n <Text typography=\"label-4-regular\" style=\"negative\" maxLines={2}>\n {errorText}\n </Text>\n </div>\n )}\n {buttons && (mode === 'bot' || mode === 'incoming') && (\n <ButtonDefaultPropsContext props={buttonsProps}>\n <div className={styles.buttons} data-qa=\"chat-bubble-buttons\">\n {buttons}\n </div>\n </ButtonDefaultPropsContext>\n )}\n {actions && (\n <IconDefaultPropsContext props={actionsIconProps}>\n <div className={styles.actions} data-qa=\"chat-bubble-actions\">\n {actions}\n </div>\n </IconDefaultPropsContext>\n )}\n </div>\n </ChatBubbleModeProvider>\n );\n }\n) as React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;\n\nChatBubble.displayName = 'ChatBubble';\n\nChatBubble.ErrorAction = ChatBubbleErrorAction;\nChatBubble.File = ChatBubbleFile;\nChatBubble.Label = ChatBubbleLabel;\nChatBubble.Media = ChatBubbleMedia;\nChatBubble.Message = ChatBubbleMessage;\nChatBubble.Snippet = ChatBubbleSnippet;\nChatBubble.Status = ChatBubbleStatus;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/File.js
CHANGED
|
@@ -8,7 +8,7 @@ import { markMetaHost } from './internal/utils.js';
|
|
|
8
8
|
import { ArrowDownLineOutlinedSize24, DocumentOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
9
9
|
import { LinkDefaultPropsContext } from '@hh.ru/magritte-ui-link';
|
|
10
10
|
import { Loader } from '@hh.ru/magritte-ui-loader';
|
|
11
|
-
import { s as styles } from './chat-bubble-
|
|
11
|
+
import { s as styles } from './chat-bubble-C4Yvxp5H.js';
|
|
12
12
|
|
|
13
13
|
/** Прикреплённый файл */
|
|
14
14
|
const ChatBubbleFileComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-file', description, meta, name, preview, state = 'loaded', previewAlt, ...props }, ref) => {
|
package/Media.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { markMetaHost } from './internal/utils.js';
|
|
5
5
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
6
|
-
import { s as styles } from './chat-bubble-
|
|
6
|
+
import { s as styles } from './chat-bubble-C4Yvxp5H.js';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Медиа в сообщении
|
package/Message.js
CHANGED
|
@@ -5,7 +5,7 @@ import { getColors } from './internal/colors.js';
|
|
|
5
5
|
import { useChatBubbleMode } from './internal/mode.js';
|
|
6
6
|
import { markMetaHost } from './internal/utils.js';
|
|
7
7
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
8
|
-
import { s as styles } from './chat-bubble-
|
|
8
|
+
import { s as styles } from './chat-bubble-C4Yvxp5H.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Текстовая часть сообщения.
|
package/Snippet.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
2
|
+
export interface ChatBubbleSnippetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
3
|
+
/** Заголовок сниппета */
|
|
4
|
+
title?: ReactNode;
|
|
5
|
+
/** Подзаголовок сниппета */
|
|
6
|
+
subtitle?: ReactNode;
|
|
7
|
+
/** Описание под заголовками */
|
|
8
|
+
message?: ReactNode;
|
|
9
|
+
/** Содержимое под текстом (превью, карта, кастомный контент) */
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Значение data-qa
|
|
13
|
+
* @default chat-bubble-snippet
|
|
14
|
+
*/
|
|
15
|
+
'data-qa'?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const ChatBubbleSnippet: import("react").ForwardRefExoticComponent<ChatBubbleSnippetProps & import("react").RefAttributes<HTMLDivElement>>;
|
package/Snippet.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { getColors } from './internal/colors.js';
|
|
5
|
+
import { useChatBubbleMode } from './internal/mode.js';
|
|
6
|
+
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
7
|
+
import { s as styles } from './chat-bubble-C4Yvxp5H.js';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Сниппет: дополнительная информация к сообщению
|
|
11
|
+
*/
|
|
12
|
+
const ChatBubbleSnippetComponent = forwardRef(({ children, 'data-qa': dataQa = 'chat-bubble-snippet', message, subtitle, title, ...props }, ref) => {
|
|
13
|
+
const colors = getColors(useChatBubbleMode());
|
|
14
|
+
return (jsxs("div", { ...props, className: styles.snippet, "data-qa": dataQa, ref: ref, children: [title && (jsx(Text, { typography: "subtitle-3-semibold", style: colors.text, "data-qa": "chat-bubble-snippet-title", children: title })), subtitle && (jsx(Text, { typography: "subtitle-3-semibold", style: colors.text, maxLines: 2, "data-qa": "chat-bubble-snippet-subtitle", children: subtitle })), message && (jsx(Text, { typography: "label-4-regular", style: colors.text, "data-qa": "chat-bubble-snippet-message", children: message })), children] }));
|
|
15
|
+
});
|
|
16
|
+
ChatBubbleSnippetComponent.displayName = 'ChatBubble.Snippet';
|
|
17
|
+
const ChatBubbleSnippet = ChatBubbleSnippetComponent;
|
|
18
|
+
|
|
19
|
+
export { ChatBubbleSnippet };
|
|
20
|
+
//# sourceMappingURL=Snippet.js.map
|
package/Snippet.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Snippet.js","sources":["src/Snippet.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleSnippetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Заголовок сниппета */\n title?: ReactNode;\n /** Подзаголовок сниппета */\n subtitle?: ReactNode;\n /** Описание под заголовками */\n message?: ReactNode;\n /** Содержимое под текстом (превью, карта, кастомный контент) */\n children?: ReactNode;\n /**\n * Значение data-qa\n * @default chat-bubble-snippet\n */\n 'data-qa'?: string;\n}\n\n/**\n * Сниппет: дополнительная информация к сообщению\n */\nconst ChatBubbleSnippetComponent = forwardRef<HTMLDivElement, ChatBubbleSnippetProps>(\n ({ children, 'data-qa': dataQa = 'chat-bubble-snippet', message, subtitle, title, ...props }, ref) => {\n const colors = getColors(useChatBubbleMode());\n\n return (\n <div {...props} className={styles.snippet} data-qa={dataQa} ref={ref}>\n {title && (\n <Text typography=\"subtitle-3-semibold\" style={colors.text} data-qa=\"chat-bubble-snippet-title\">\n {title}\n </Text>\n )}\n {subtitle && (\n <Text\n typography=\"subtitle-3-semibold\"\n style={colors.text}\n maxLines={2}\n data-qa=\"chat-bubble-snippet-subtitle\"\n >\n {subtitle}\n </Text>\n )}\n {message && (\n <Text typography=\"label-4-regular\" style={colors.text} data-qa=\"chat-bubble-snippet-message\">\n {message}\n </Text>\n )}\n {children}\n </div>\n );\n }\n);\n\nChatBubbleSnippetComponent.displayName = 'ChatBubble.Snippet';\n\nexport const ChatBubbleSnippet = ChatBubbleSnippetComponent;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAwBA;;AAEG;AACH,MAAM,0BAA0B,GAAG,UAAU,CACzC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,qBAAqB,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACjG,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAE9C,IAAA,QACIA,IAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,aAAW,MAAM,EAAE,GAAG,EAAE,GAAG,aAC/D,KAAK,KACFC,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAA,SAAA,EAAU,2BAA2B,EACzF,QAAA,EAAA,KAAK,GACH,CACV,EACA,QAAQ,KACLA,IAAC,IAAI,EAAA,EACD,UAAU,EAAC,qBAAqB,EAChC,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,QAAQ,EAAE,CAAC,EAAA,SAAA,EACH,8BAA8B,EAErC,QAAA,EAAA,QAAQ,GACN,CACV,EACA,OAAO,KACJA,IAAC,IAAI,EAAA,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,aAAU,6BAA6B,EAAA,QAAA,EACvF,OAAO,EACL,CAAA,CACV,EACA,QAAQ,CAAA,EAAA,CACP,EACR;AACN,CAAC,CACJ,CAAC;AAEF,0BAA0B,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAEvD,MAAM,iBAAiB,GAAG;;;;"}
|
package/Status.js
CHANGED
|
@@ -7,7 +7,7 @@ import { getColors } from './internal/colors.js';
|
|
|
7
7
|
import { useChatBubbleMode } from './internal/mode.js';
|
|
8
8
|
import { EyeOutlinedSize16, ClockOutlinedSize16, CheckOutlinedSize16, CheckDoubleOutlinedSize16 } from '@hh.ru/magritte-ui-icon/icon';
|
|
9
9
|
import { TooltipHover } from '@hh.ru/magritte-ui-tooltip';
|
|
10
|
-
import { s as styles } from './chat-bubble-
|
|
10
|
+
import { s as styles } from './chat-bubble-C4Yvxp5H.js';
|
|
11
11
|
|
|
12
12
|
const ICON = {
|
|
13
13
|
sending: ClockOutlinedSize16,
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
var styles = {"tail":"magritte-tail___-1lJ0_1-4-0","tail_outgoing":"magritte-tail_outgoing___cnyh3_1-4-0","tailOutgoing":"magritte-tail_outgoing___cnyh3_1-4-0","meta":"magritte-meta___HT7lp_1-4-0"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=chat-bubble-BEqoLjma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chat-bubble-BEqoLjma.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_1-4-0","chatBubble":"magritte-chat-bubble___ds9CP_1-4-0","outgoing":"magritte-outgoing___3n00o_1-4-0","bot":"magritte-bot___Z6vZA_1-4-0","row":"magritte-row___mQNnt_1-4-0","bubble":"magritte-bubble___NVuDI_1-4-0","with-tail":"magritte-with-tail___IdixJ_1-4-0","withTail":"magritte-with-tail___IdixJ_1-4-0","header":"magritte-header___Px2to_1-4-0","message-title":"magritte-message-title___dgBFk_1-4-0","messageTitle":"magritte-message-title___dgBFk_1-4-0","message":"magritte-message___7TEpw_1-4-0","buttons":"magritte-buttons___yQqBi_1-4-0","actions":"magritte-actions___I5GSz_1-4-0","error-text":"magritte-error-text___1ZxWY_1-4-0","errorText":"magritte-error-text___1ZxWY_1-4-0","file":"magritte-file___k2IKy_1-4-0","file-preview":"magritte-file-preview___eJKu8_1-4-0","filePreview":"magritte-file-preview___eJKu8_1-4-0","media":"magritte-media___9jH2k_1-4-0","media-blur":"magritte-media-blur___TbiMa_1-4-0","mediaBlur":"magritte-media-blur___TbiMa_1-4-0","media-image":"magritte-media-image___G-FkF_1-4-0","mediaImage":"magritte-media-image___G-FkF_1-4-0","media-content":"magritte-media-content___n3XbD_1-4-0","mediaContent":"magritte-media-content___n3XbD_1-4-0","media-format":"magritte-media-format___AdfCK_1-4-0","mediaFormat":"magritte-media-format___AdfCK_1-4-0","media-meta":"magritte-media-meta___oSxxr_1-4-0","mediaMeta":"magritte-media-meta___oSxxr_1-4-0","snippet":"magritte-snippet___8k9xb_1-4-0","status":"magritte-status___dHzCt_1-4-0","content-with-header":"magritte-content-with-header___wiNKB_1-4-0","contentWithHeader":"magritte-content-with-header___wiNKB_1-4-0"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=chat-bubble-C4Yvxp5H.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chat-bubble-C4Yvxp5H.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/index.css
CHANGED
|
@@ -8,6 +8,12 @@
|
|
|
8
8
|
--magritte-color-component-chat-bubble-border-outgoing-v25-0-1:#0d63e3;
|
|
9
9
|
--magritte-color-component-chat-bubble-border-bot-v25-0-1:#f3eeff;
|
|
10
10
|
--magritte-color-component-chat-bubble-border-image-v25-0-1:#0000001a;
|
|
11
|
+
--magritte-color-component-chat-bubble-snippet-background-incoming-v25-0-1:#EEF1F7;
|
|
12
|
+
--magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1:#2b7fff;
|
|
13
|
+
--magritte-color-component-chat-bubble-snippet-background-bot-v25-0-1:#f3eeff;
|
|
14
|
+
--magritte-color-component-chat-bubble-snippet-line-incoming-v25-0-1:#0070ff;
|
|
15
|
+
--magritte-color-component-chat-bubble-snippet-line-outgoing-v25-0-1:#f3f9ff;
|
|
16
|
+
--magritte-color-component-chat-bubble-snippet-line-bot-v25-0-1:#9054ea;
|
|
11
17
|
}
|
|
12
18
|
|
|
13
19
|
.magritte-night-theme{
|
|
@@ -17,47 +23,58 @@
|
|
|
17
23
|
--magritte-color-component-chat-bubble-border-incoming-v25-0-1:#303030;
|
|
18
24
|
--magritte-color-component-chat-bubble-border-outgoing-v25-0-1:#0070ff;
|
|
19
25
|
--magritte-color-component-chat-bubble-border-bot-v25-0-1:#403A59;
|
|
26
|
+
--magritte-color-component-chat-bubble-snippet-background-incoming-v25-0-1:#303030;
|
|
27
|
+
--magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1:#468ffd;
|
|
28
|
+
--magritte-color-component-chat-bubble-snippet-background-bot-v25-0-1:#403A59;
|
|
20
29
|
}
|
|
21
30
|
|
|
22
31
|
.magritte-zp-day-theme{
|
|
23
32
|
--magritte-color-component-chat-bubble-background-outgoing-v25-0-1:#7195AF;
|
|
24
33
|
--magritte-color-component-chat-bubble-border-outgoing-v25-0-1:#557B96;
|
|
34
|
+
--magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1:#90ACC1;
|
|
35
|
+
--magritte-color-component-chat-bubble-snippet-line-incoming-v25-0-1:#557B96;
|
|
25
36
|
}
|
|
26
|
-
.magritte-chat-bubble___ds9CP_1-
|
|
37
|
+
.magritte-chat-bubble___ds9CP_1-4-0{
|
|
27
38
|
--magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-incoming-v25-0-1);
|
|
28
39
|
--magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-incoming-v25-0-1);
|
|
40
|
+
--magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-incoming-v25-0-1);
|
|
41
|
+
--magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-incoming-v25-0-1);
|
|
29
42
|
display:flex;
|
|
30
43
|
flex-direction:column;
|
|
31
44
|
align-items:flex-start;
|
|
32
45
|
max-width:calc(100% - 40px);
|
|
33
46
|
}
|
|
34
47
|
@media (min-width: 1020px){
|
|
35
|
-
body.magritte-old-layout .magritte-chat-bubble___ds9CP_1-
|
|
48
|
+
body.magritte-old-layout .magritte-chat-bubble___ds9CP_1-4-0{
|
|
36
49
|
max-width:min(460px, 100%);
|
|
37
50
|
}
|
|
38
51
|
}
|
|
39
52
|
@media (min-width: 1024px){
|
|
40
|
-
body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_1-
|
|
53
|
+
body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_1-4-0{
|
|
41
54
|
max-width:min(460px, 100%);
|
|
42
55
|
}
|
|
43
56
|
}
|
|
44
|
-
.magritte-outgoing___3n00o_1-
|
|
57
|
+
.magritte-outgoing___3n00o_1-4-0{
|
|
45
58
|
--magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-outgoing-v25-0-1);
|
|
46
59
|
--magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-outgoing-v25-0-1);
|
|
60
|
+
--magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1);
|
|
61
|
+
--magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-outgoing-v25-0-1);
|
|
47
62
|
align-items:flex-end;
|
|
48
63
|
margin-left:auto;
|
|
49
64
|
}
|
|
50
|
-
.magritte-bot___Z6vZA_1-
|
|
65
|
+
.magritte-bot___Z6vZA_1-4-0{
|
|
51
66
|
--magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-bot-v25-0-1);
|
|
52
67
|
--magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-bot-v25-0-1);
|
|
68
|
+
--magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-bot-v25-0-1);
|
|
69
|
+
--magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-bot-v25-0-1);
|
|
53
70
|
}
|
|
54
|
-
.magritte-row___mQNnt_1-
|
|
71
|
+
.magritte-row___mQNnt_1-4-0{
|
|
55
72
|
display:flex;
|
|
56
73
|
align-items:flex-end;
|
|
57
74
|
gap:8px;
|
|
58
75
|
max-width:100%;
|
|
59
76
|
}
|
|
60
|
-
.magritte-bubble___NVuDI_1-
|
|
77
|
+
.magritte-bubble___NVuDI_1-4-0{
|
|
61
78
|
position:relative;
|
|
62
79
|
box-sizing:border-box;
|
|
63
80
|
min-width:0;
|
|
@@ -68,59 +85,59 @@
|
|
|
68
85
|
border-radius:20px;
|
|
69
86
|
overflow-wrap:break-word;
|
|
70
87
|
}
|
|
71
|
-
.magritte-with-tail___IdixJ_1-
|
|
88
|
+
.magritte-with-tail___IdixJ_1-4-0 .magritte-bubble___NVuDI_1-4-0{
|
|
72
89
|
border-bottom-left-radius:0;
|
|
73
90
|
}
|
|
74
|
-
.magritte-with-tail___IdixJ_1-
|
|
91
|
+
.magritte-with-tail___IdixJ_1-4-0.magritte-outgoing___3n00o_1-4-0 .magritte-bubble___NVuDI_1-4-0{
|
|
75
92
|
border-bottom-left-radius:20px;
|
|
76
93
|
border-bottom-right-radius:0;
|
|
77
94
|
}
|
|
78
|
-
.magritte-header___Px2to_1-
|
|
95
|
+
.magritte-header___Px2to_1-4-0{
|
|
79
96
|
display:flex;
|
|
80
97
|
flex-direction:column;
|
|
81
98
|
gap:4px;
|
|
82
99
|
margin-bottom:4px;
|
|
83
100
|
}
|
|
84
|
-
.magritte-message-title___dgBFk_1-
|
|
101
|
+
.magritte-message-title___dgBFk_1-4-0{
|
|
85
102
|
margin-bottom:4px;
|
|
86
103
|
}
|
|
87
|
-
.magritte-message___7TEpw_1-
|
|
104
|
+
.magritte-message___7TEpw_1-4-0:not(:first-child){
|
|
88
105
|
margin-top:8px;
|
|
89
106
|
}
|
|
90
|
-
.magritte-buttons___yQqBi_1-
|
|
107
|
+
.magritte-buttons___yQqBi_1-4-0{
|
|
91
108
|
display:grid;
|
|
92
109
|
grid-template-columns:repeat(2, 1fr);
|
|
93
110
|
gap:8px;
|
|
94
111
|
width:100%;
|
|
95
112
|
margin-top:4px;
|
|
96
113
|
}
|
|
97
|
-
.magritte-buttons___yQqBi_1-
|
|
114
|
+
.magritte-buttons___yQqBi_1-4-0 > *:last-child:nth-child(odd){
|
|
98
115
|
grid-column:span 2;
|
|
99
116
|
}
|
|
100
|
-
.magritte-actions___I5GSz_1-
|
|
117
|
+
.magritte-actions___I5GSz_1-4-0{
|
|
101
118
|
display:flex;
|
|
102
119
|
flex-wrap:wrap;
|
|
103
120
|
gap:2px;
|
|
104
121
|
margin-top:4px;
|
|
105
122
|
}
|
|
106
|
-
.magritte-error-text___1ZxWY_1-
|
|
123
|
+
.magritte-error-text___1ZxWY_1-4-0{
|
|
107
124
|
margin-top:2px;
|
|
108
125
|
}
|
|
109
|
-
.magritte-file___k2IKy_1-
|
|
126
|
+
.magritte-file___k2IKy_1-4-0{
|
|
110
127
|
display:flex;
|
|
111
128
|
align-items:flex-end;
|
|
112
129
|
}
|
|
113
|
-
.magritte-file___k2IKy_1-
|
|
130
|
+
.magritte-file___k2IKy_1-4-0 + .magritte-file___k2IKy_1-4-0{
|
|
114
131
|
margin-top:12px;
|
|
115
132
|
}
|
|
116
|
-
.magritte-file-preview___eJKu8_1-
|
|
133
|
+
.magritte-file-preview___eJKu8_1-4-0{
|
|
117
134
|
display:block;
|
|
118
135
|
width:48px;
|
|
119
136
|
height:48px;
|
|
120
137
|
border-radius:8px;
|
|
121
138
|
object-fit:cover;
|
|
122
139
|
}
|
|
123
|
-
.magritte-media___9jH2k_1-
|
|
140
|
+
.magritte-media___9jH2k_1-4-0{
|
|
124
141
|
display:flex;
|
|
125
142
|
position:relative;
|
|
126
143
|
box-sizing:border-box;
|
|
@@ -133,18 +150,18 @@
|
|
|
133
150
|
box-shadow:inset 0 0 0 1px var(--magritte-color-component-chat-bubble-border-image-v25-0-1);
|
|
134
151
|
}
|
|
135
152
|
@media (min-width: 1020px){
|
|
136
|
-
body.magritte-old-layout .magritte-media___9jH2k_1-
|
|
153
|
+
body.magritte-old-layout .magritte-media___9jH2k_1-4-0{
|
|
137
154
|
max-width:452px;
|
|
138
155
|
max-height:452px;
|
|
139
156
|
}
|
|
140
157
|
}
|
|
141
158
|
@media (min-width: 1024px){
|
|
142
|
-
body:not(.magritte-old-layout) .magritte-media___9jH2k_1-
|
|
159
|
+
body:not(.magritte-old-layout) .magritte-media___9jH2k_1-4-0{
|
|
143
160
|
max-width:452px;
|
|
144
161
|
max-height:452px;
|
|
145
162
|
}
|
|
146
163
|
}
|
|
147
|
-
.magritte-media-blur___TbiMa_1-
|
|
164
|
+
.magritte-media-blur___TbiMa_1-4-0{
|
|
148
165
|
position:absolute;
|
|
149
166
|
top:-96px;
|
|
150
167
|
left:-96px;
|
|
@@ -154,7 +171,7 @@
|
|
|
154
171
|
filter:blur(48px);
|
|
155
172
|
object-fit:cover;
|
|
156
173
|
}
|
|
157
|
-
.magritte-media-image___G-FkF_1-
|
|
174
|
+
.magritte-media-image___G-FkF_1-4-0{
|
|
158
175
|
display:block;
|
|
159
176
|
position:relative;
|
|
160
177
|
max-width:100%;
|
|
@@ -162,23 +179,23 @@
|
|
|
162
179
|
margin:auto;
|
|
163
180
|
}
|
|
164
181
|
@media (min-width: 1020px){
|
|
165
|
-
body.magritte-old-layout .magritte-media-image___G-FkF_1-
|
|
182
|
+
body.magritte-old-layout .magritte-media-image___G-FkF_1-4-0{
|
|
166
183
|
max-height:452px;
|
|
167
184
|
}
|
|
168
185
|
}
|
|
169
186
|
@media (min-width: 1024px){
|
|
170
|
-
body:not(.magritte-old-layout) .magritte-media-image___G-FkF_1-
|
|
187
|
+
body:not(.magritte-old-layout) .magritte-media-image___G-FkF_1-4-0{
|
|
171
188
|
max-height:452px;
|
|
172
189
|
}
|
|
173
190
|
}
|
|
174
|
-
.magritte-media-content___n3XbD_1-
|
|
191
|
+
.magritte-media-content___n3XbD_1-4-0{
|
|
175
192
|
display:flex;
|
|
176
193
|
position:absolute;
|
|
177
194
|
inset:0;
|
|
178
195
|
align-items:center;
|
|
179
196
|
justify-content:center;
|
|
180
197
|
}
|
|
181
|
-
.magritte-media-format___AdfCK_1-
|
|
198
|
+
.magritte-media-format___AdfCK_1-4-0{
|
|
182
199
|
display:flex;
|
|
183
200
|
position:absolute;
|
|
184
201
|
top:4px;
|
|
@@ -188,7 +205,7 @@
|
|
|
188
205
|
border-radius:12px;
|
|
189
206
|
backdrop-filter:blur(24px);
|
|
190
207
|
}
|
|
191
|
-
.magritte-media-meta___oSxxr_1-
|
|
208
|
+
.magritte-media-meta___oSxxr_1-4-0{
|
|
192
209
|
--magritte-ui-text-color-override:var(--magritte-color-text-constant-v25-0-1);
|
|
193
210
|
display:flex;
|
|
194
211
|
position:absolute;
|
|
@@ -200,38 +217,72 @@
|
|
|
200
217
|
border-radius:12px;
|
|
201
218
|
backdrop-filter:blur(24px);
|
|
202
219
|
}
|
|
203
|
-
.magritte-media-meta___oSxxr_1-
|
|
220
|
+
.magritte-media-meta___oSxxr_1-4-0:empty{
|
|
204
221
|
display:none;
|
|
205
222
|
}
|
|
206
|
-
.magritte-media-meta___oSxxr_1-
|
|
223
|
+
.magritte-media-meta___oSxxr_1-4-0 > span{
|
|
207
224
|
margin-left:0;
|
|
208
225
|
}
|
|
209
|
-
.magritte-
|
|
210
|
-
.magritte-content-with-header___wiNKB_1-3-0 > .magritte-media___9jH2k_1-3-0:first-child{
|
|
211
|
-
margin-top:8px;
|
|
212
|
-
}
|
|
213
|
-
.magritte-media___9jH2k_1-3-0:not(:last-child){
|
|
226
|
+
.magritte-media___9jH2k_1-4-0:not(:last-child){
|
|
214
227
|
margin-bottom:12px;
|
|
215
228
|
}
|
|
216
|
-
.magritte-
|
|
229
|
+
.magritte-snippet___8k9xb_1-4-0{
|
|
230
|
+
display:flex;
|
|
231
|
+
position:relative;
|
|
232
|
+
flex-direction:column;
|
|
233
|
+
gap:2px;
|
|
234
|
+
padding:8px;
|
|
235
|
+
padding-left:12px;
|
|
236
|
+
background-color:var(--magritte-chat-bubble-snippet-background);
|
|
237
|
+
border-radius:8px;
|
|
238
|
+
overflow:hidden;
|
|
239
|
+
}
|
|
240
|
+
.magritte-snippet___8k9xb_1-4-0:not(:last-child){
|
|
241
|
+
margin-bottom:4px;
|
|
242
|
+
}
|
|
243
|
+
.magritte-snippet___8k9xb_1-4-0::before{
|
|
244
|
+
content:'';
|
|
245
|
+
position:absolute;
|
|
246
|
+
top:0;
|
|
247
|
+
bottom:0;
|
|
248
|
+
left:0;
|
|
249
|
+
width:4px;
|
|
250
|
+
background-color:var(--magritte-chat-bubble-snippet-line);
|
|
251
|
+
}
|
|
252
|
+
.magritte-snippet___8k9xb_1-4-0 img{
|
|
253
|
+
display:block;
|
|
254
|
+
max-width:100%;
|
|
255
|
+
border-radius:4px;
|
|
256
|
+
outline:1px solid var(--magritte-color-component-chat-bubble-border-image-v25-0-1);
|
|
257
|
+
outline-offset:-1px;
|
|
258
|
+
margin-top:6px;
|
|
259
|
+
}
|
|
260
|
+
.magritte-snippet___8k9xb_1-4-0:not(:first-child){
|
|
261
|
+
margin-top:8px;
|
|
262
|
+
}
|
|
263
|
+
.magritte-status___dHzCt_1-4-0{
|
|
217
264
|
display:inline-flex;
|
|
218
265
|
vertical-align:middle;
|
|
219
266
|
}
|
|
220
|
-
.magritte-status___dHzCt_1-
|
|
267
|
+
.magritte-status___dHzCt_1-4-0:not(:first-child){
|
|
221
268
|
margin-left:4px;
|
|
222
269
|
}
|
|
270
|
+
.magritte-content-with-header___wiNKB_1-4-0 > .magritte-file___k2IKy_1-4-0:first-child,
|
|
271
|
+
.magritte-content-with-header___wiNKB_1-4-0 > .magritte-media___9jH2k_1-4-0:first-child{
|
|
272
|
+
margin-top:8px;
|
|
273
|
+
}
|
|
223
274
|
|
|
224
|
-
.magritte-tail___-1lJ0_1-
|
|
275
|
+
.magritte-tail___-1lJ0_1-4-0{
|
|
225
276
|
position:absolute;
|
|
226
277
|
bottom:-1px;
|
|
227
278
|
left:-7px;
|
|
228
279
|
}
|
|
229
|
-
.magritte-tail_outgoing___cnyh3_1-
|
|
280
|
+
.magritte-tail_outgoing___cnyh3_1-4-0{
|
|
230
281
|
left:auto;
|
|
231
282
|
right:-7px;
|
|
232
283
|
transform:scaleX(-1);
|
|
233
284
|
}
|
|
234
|
-
.magritte-meta___HT7lp_1-
|
|
285
|
+
.magritte-meta___HT7lp_1-4-0{
|
|
235
286
|
float:right;
|
|
236
287
|
margin-left:12px;
|
|
237
288
|
white-space:nowrap;
|
package/index.d.ts
CHANGED
|
@@ -5,4 +5,5 @@ export type { ChatBubbleFileProps, ChatBubbleFileState } from '@hh.ru/magritte-u
|
|
|
5
5
|
export type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';
|
|
6
6
|
export type { ChatBubbleMediaProps } from '@hh.ru/magritte-ui-chat-bubble/Media';
|
|
7
7
|
export type { ChatBubbleMessageProps } from '@hh.ru/magritte-ui-chat-bubble/Message';
|
|
8
|
+
export type { ChatBubbleSnippetProps } from '@hh.ru/magritte-ui-chat-bubble/Snippet';
|
|
8
9
|
export type { ChatBubbleStatusProps, ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/Status';
|
package/index.js
CHANGED
|
@@ -15,17 +15,18 @@ import './internal/utils.js';
|
|
|
15
15
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
16
16
|
import '@hh.ru/magritte-ui-link';
|
|
17
17
|
import '@hh.ru/magritte-ui-loader';
|
|
18
|
-
import './chat-bubble-
|
|
18
|
+
import './chat-bubble-C4Yvxp5H.js';
|
|
19
19
|
import './Label.js';
|
|
20
20
|
import '@hh.ru/magritte-ui-typography';
|
|
21
21
|
import './Media.js';
|
|
22
22
|
import './Message.js';
|
|
23
|
+
import './Snippet.js';
|
|
23
24
|
import './Status.js';
|
|
24
25
|
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
25
26
|
import '@hh.ru/magritte-common-use-translation';
|
|
26
27
|
import '@hh.ru/magritte-ui-tooltip';
|
|
27
28
|
import './internal/Meta.js';
|
|
28
|
-
import './chat-bubble-
|
|
29
|
+
import './chat-bubble-BEqoLjma.js';
|
|
29
30
|
import './internal/Tail.js';
|
|
30
31
|
import '@hh.ru/magritte-ui-icon';
|
|
31
32
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/index.mock.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export type { ChatBubbleFileProps, ChatBubbleFileState } from '@hh.ru/magritte-u
|
|
|
4
4
|
export type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';
|
|
5
5
|
export type { ChatBubbleMediaProps } from '@hh.ru/magritte-ui-chat-bubble/Media';
|
|
6
6
|
export type { ChatBubbleMessageProps } from '@hh.ru/magritte-ui-chat-bubble/Message';
|
|
7
|
+
export type { ChatBubbleSnippetProps } from '@hh.ru/magritte-ui-chat-bubble/Snippet';
|
|
7
8
|
export type { ChatBubbleStatusProps, ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/Status';
|
|
8
9
|
export declare const ChatBubble: import("react").ForwardRefExoticComponent<Record<string, unknown>> & {
|
|
9
10
|
ErrorAction: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
|
|
@@ -11,5 +12,6 @@ export declare const ChatBubble: import("react").ForwardRefExoticComponent<Recor
|
|
|
11
12
|
Label: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
|
|
12
13
|
Media: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
|
|
13
14
|
Message: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
|
|
15
|
+
Snippet: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
|
|
14
16
|
Status: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
|
|
15
17
|
};
|
package/index.mock.js
CHANGED
|
@@ -6,6 +6,7 @@ const File = mockComponent('ChatBubble.File');
|
|
|
6
6
|
const Label = mockComponent('ChatBubble.Label', undefined, { withChildren: true });
|
|
7
7
|
const Media = mockComponent('ChatBubble.Media', undefined, { withChildren: true });
|
|
8
8
|
const Message = mockComponent('ChatBubble.Message', undefined, { withChildren: true });
|
|
9
|
+
const Snippet = mockComponent('ChatBubble.Snippet', undefined, { withChildren: true });
|
|
9
10
|
const Status = mockComponent('ChatBubble.Status', undefined, { withChildren: true });
|
|
10
11
|
const ChatBubble = Object.assign(mockComponent('ChatBubble', undefined, { withChildren: true }), {
|
|
11
12
|
ErrorAction,
|
|
@@ -13,6 +14,7 @@ const ChatBubble = Object.assign(mockComponent('ChatBubble', undefined, { withCh
|
|
|
13
14
|
Label,
|
|
14
15
|
Media,
|
|
15
16
|
Message,
|
|
17
|
+
Snippet,
|
|
16
18
|
Status,
|
|
17
19
|
});
|
|
18
20
|
|
package/index.mock.js.map
CHANGED
|
@@ -1 +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 { ChatBubbleStatusProps, ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/Status';\n\nconst ErrorAction = mockComponent('ChatBubble.ErrorAction', undefined, { withChildren: true });\nconst File = mockComponent('ChatBubble.File');\nconst Label = mockComponent('ChatBubble.Label', undefined, { withChildren: true });\nconst Media = mockComponent('ChatBubble.Media', undefined, { withChildren: true });\nconst Message = mockComponent('ChatBubble.Message', undefined, { withChildren: true });\nconst Status = mockComponent('ChatBubble.Status', undefined, { withChildren: true });\n\nexport const ChatBubble = Object.assign(mockComponent('ChatBubble', undefined, { withChildren: true }), {\n ErrorAction,\n File,\n Label,\n Media,\n Message,\n Status,\n});\n"],"names":[],"mappings":";;
|
|
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 { 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 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 Snippet,\n Status,\n});\n"],"names":[],"mappings":";;AAWA,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,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,OAAO;IACP,MAAM;AACT,CAAA;;;;"}
|
package/internal/Meta.js
CHANGED
|
@@ -2,7 +2,7 @@ import './../index.css';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { getColors } from './colors.js';
|
|
4
4
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
5
|
-
import { s as styles } from '../chat-bubble-
|
|
5
|
+
import { s as styles } from '../chat-bubble-BEqoLjma.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Время и статус сообщения
|
package/internal/Tail.js
CHANGED
|
@@ -2,7 +2,7 @@ import './../index.css';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { useChatBubbleMode } from './mode.js';
|
|
5
|
-
import { s as styles } from '../chat-bubble-
|
|
5
|
+
import { s as styles } from '../chat-bubble-BEqoLjma.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
|
|
8
8
|
const OUTLINE = 'M6.5 0C6.5 7.5 5.2 11.8 1.6 13.4C0.9 13.9 0.6 14.5 1.1 14.5H7';
|
package/internal/colors.d.ts
CHANGED
|
@@ -5,11 +5,11 @@ import type { IconColor } from '@hh.ru/magritte-ui-icon';
|
|
|
5
5
|
import type { LinkProps } from '@hh.ru/magritte-ui-link';
|
|
6
6
|
import type { TextStyle } from '@hh.ru/magritte-ui-typography';
|
|
7
7
|
export interface ChatBubbleColors {
|
|
8
|
-
/** Основной текст сообщения, названия
|
|
8
|
+
/** Основной текст сообщения, названия файла, текст сниппета */
|
|
9
9
|
text: TextStyle;
|
|
10
|
-
/** Второстепенный текст: время, размер
|
|
10
|
+
/** Второстепенный текст: время, размер файла */
|
|
11
11
|
secondaryText: TextStyle;
|
|
12
|
-
/** Акцентный текст: имя отправителя, автор
|
|
12
|
+
/** Акцентный текст: имя отправителя, автор цитаты */
|
|
13
13
|
accentText: TextStyle;
|
|
14
14
|
/** Иконка статуса, лежит на фоне баббла */
|
|
15
15
|
statusIcon: IconColor;
|
package/internal/colors.js.map
CHANGED
|
@@ -1 +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 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 /** Основной текст сообщения, названия
|
|
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 type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport type { IconColor } from '@hh.ru/magritte-ui-icon';\nimport type { LinkProps } from '@hh.ru/magritte-ui-link';\nimport type { TextStyle } from '@hh.ru/magritte-ui-typography';\n\nexport interface ChatBubbleColors {\n /** Основной текст сообщения, названия файла, текст сниппета */\n text: TextStyle;\n /** Второстепенный текст: время, размер файла */\n secondaryText: TextStyle;\n /** Акцентный текст: имя отправителя, автор цитаты */\n accentText: TextStyle;\n /** Иконка статуса, лежит на фоне баббла */\n statusIcon: IconColor;\n /** Иконки действий, лежат под бабблом на фоне страницы */\n actionsIcon: IconColor;\n /** Кнопки под бабблом */\n button: ButtonStyle;\n /** Ссылка-действие: «Открыть», «Загрузить» */\n link: Pick<LinkProps, 'style' | 'mode'>;\n /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */\n secondaryIcon: IconColor;\n /** Иконка файла */\n fileIcon: IconColor;\n /** Подложка под иконкой файла */\n fileIconBackground: TokenColorBackground;\n}\n\nconst COLORS: Record<ChatBubbleMode, ChatBubbleColors> = {\n incoming: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'accent',\n statusIcon: 'constant',\n actionsIcon: 'secondary',\n button: 'neutral',\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'accent',\n },\n outgoing: {\n text: 'constant',\n secondaryText: 'constant',\n accentText: 'constant',\n statusIcon: 'constant',\n actionsIcon: 'accent',\n button: 'accent',\n link: { style: 'constant', mode: 'secondary' },\n secondaryIcon: 'constant',\n fileIcon: 'accent',\n fileIconBackground: 'accent-secondary',\n },\n bot: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'special',\n statusIcon: 'special',\n actionsIcon: 'special',\n button: 'special',\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'special',\n },\n};\n\nexport const getColors = (mode: ChatBubbleMode): ChatBubbleColors => COLORS[mode];\n"],"names":[],"mappings":"AA8BA,MAAM,MAAM,GAA6C;AACrD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,WAAW,EAAE,WAAW;AACxB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,QAAQ;AAC/B,KAAA;AACD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE;AAC9C,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,kBAAkB,EAAE,kBAAkB;AACzC,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,SAAS;AAChC,KAAA;CACJ,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,IAAoB,KAAuB,MAAM,CAAC,IAAI;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-chat-bubble",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "62e71a0b8833517456a5b94635e409e152ef4734"
|
|
44
44
|
}
|
package/chat-bubble-C7KYJOC7.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_1-3-0","chatBubble":"magritte-chat-bubble___ds9CP_1-3-0","outgoing":"magritte-outgoing___3n00o_1-3-0","bot":"magritte-bot___Z6vZA_1-3-0","row":"magritte-row___mQNnt_1-3-0","bubble":"magritte-bubble___NVuDI_1-3-0","with-tail":"magritte-with-tail___IdixJ_1-3-0","withTail":"magritte-with-tail___IdixJ_1-3-0","header":"magritte-header___Px2to_1-3-0","message-title":"magritte-message-title___dgBFk_1-3-0","messageTitle":"magritte-message-title___dgBFk_1-3-0","message":"magritte-message___7TEpw_1-3-0","buttons":"magritte-buttons___yQqBi_1-3-0","actions":"magritte-actions___I5GSz_1-3-0","error-text":"magritte-error-text___1ZxWY_1-3-0","errorText":"magritte-error-text___1ZxWY_1-3-0","file":"magritte-file___k2IKy_1-3-0","file-preview":"magritte-file-preview___eJKu8_1-3-0","filePreview":"magritte-file-preview___eJKu8_1-3-0","media":"magritte-media___9jH2k_1-3-0","media-blur":"magritte-media-blur___TbiMa_1-3-0","mediaBlur":"magritte-media-blur___TbiMa_1-3-0","media-image":"magritte-media-image___G-FkF_1-3-0","mediaImage":"magritte-media-image___G-FkF_1-3-0","media-content":"magritte-media-content___n3XbD_1-3-0","mediaContent":"magritte-media-content___n3XbD_1-3-0","media-format":"magritte-media-format___AdfCK_1-3-0","mediaFormat":"magritte-media-format___AdfCK_1-3-0","media-meta":"magritte-media-meta___oSxxr_1-3-0","mediaMeta":"magritte-media-meta___oSxxr_1-3-0","content-with-header":"magritte-content-with-header___wiNKB_1-3-0","contentWithHeader":"magritte-content-with-header___wiNKB_1-3-0","status":"magritte-status___dHzCt_1-3-0"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=chat-bubble-C7KYJOC7.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chat-bubble-C7KYJOC7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/chat-bubble-DvyT8aq-.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"tail":"magritte-tail___-1lJ0_1-3-0","tail_outgoing":"magritte-tail_outgoing___cnyh3_1-3-0","tailOutgoing":"magritte-tail_outgoing___cnyh3_1-3-0","meta":"magritte-meta___HT7lp_1-3-0"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=chat-bubble-DvyT8aq-.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chat-bubble-DvyT8aq-.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|