@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 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-C7KYJOC7.js';
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-DvyT8aq-.js';
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-C7KYJOC7.js';
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-C7KYJOC7.js';
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-C7KYJOC7.js';
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-C7KYJOC7.js';
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0 .magritte-bubble___NVuDI_1-3-0{
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-3-0.magritte-outgoing___3n00o_1-3-0 .magritte-bubble___NVuDI_1-3-0{
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-3-0{
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-3-0{
101
+ .magritte-message-title___dgBFk_1-4-0{
85
102
  margin-bottom:4px;
86
103
  }
87
- .magritte-message___7TEpw_1-3-0:not(:first-child){
104
+ .magritte-message___7TEpw_1-4-0:not(:first-child){
88
105
  margin-top:8px;
89
106
  }
90
- .magritte-buttons___yQqBi_1-3-0{
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-3-0 > *:last-child:nth-child(odd){
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-3-0{
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-3-0{
123
+ .magritte-error-text___1ZxWY_1-4-0{
107
124
  margin-top:2px;
108
125
  }
109
- .magritte-file___k2IKy_1-3-0{
126
+ .magritte-file___k2IKy_1-4-0{
110
127
  display:flex;
111
128
  align-items:flex-end;
112
129
  }
113
- .magritte-file___k2IKy_1-3-0 + .magritte-file___k2IKy_1-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0{
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-3-0:empty{
220
+ .magritte-media-meta___oSxxr_1-4-0:empty{
204
221
  display:none;
205
222
  }
206
- .magritte-media-meta___oSxxr_1-3-0 > span{
223
+ .magritte-media-meta___oSxxr_1-4-0 > span{
207
224
  margin-left:0;
208
225
  }
209
- .magritte-content-with-header___wiNKB_1-3-0 > .magritte-file___k2IKy_1-3-0:first-child,
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-status___dHzCt_1-3-0{
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-3-0:not(:first-child){
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-3-0{
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-3-0{
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-3-0{
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-C7KYJOC7.js';
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-DvyT8aq-.js';
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":";;AAUA,MAAM,WAAW,GAAG,aAAa,CAAC,wBAAwB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAC/F,MAAM,IAAI,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAC9C,MAAM,KAAK,GAAG,aAAa,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACnF,MAAM,KAAK,GAAG,aAAa,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACnF,MAAM,OAAO,GAAG,aAAa,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACvF,MAAM,MAAM,GAAG,aAAa,CAAC,mBAAmB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;MAExE,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE;IACpG,WAAW;IACX,IAAI;IACJ,KAAK;IACL,KAAK;IACL,OAAO;IACP,MAAM;AACT,CAAA;;;;"}
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-DvyT8aq-.js';
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-DvyT8aq-.js';
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';
@@ -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;
@@ -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 /** Основной текст сообщения, названия файла */\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;;;;"}
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.0",
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": "a367d4996b3f6b94fc101056fb4ad4f328b2a67b"
43
+ "gitHead": "62e71a0b8833517456a5b94635e409e152ef4734"
44
44
  }
@@ -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":";;;;"}
@@ -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":";;;;"}