@hh.ru/magritte-ui-chat-bubble 2.0.4 → 3.0.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/Call.js CHANGED
@@ -6,7 +6,7 @@ import { useChatBubbleColors } from './internal/colors.js';
6
6
  import { useChatBubbleMode } from './internal/mode.js';
7
7
  import { markMetaHost } from './internal/utils.js';
8
8
  import { PhoneCrossFilledSize24, PhoneArrowOutFilledSize24, PhoneArrowInFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
9
- import { s as styles } from './chat-bubble-DFDpgd_v.js';
9
+ import { s as styles } from './chat-bubble-CeWxnNlq.js';
10
10
 
11
11
  /** Входящий/исходящий звонок */
12
12
  const ChatBubbleCallComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-call', title, description, meta, state = 'connected', ...props }, ref) => {
package/ChatBubble.js CHANGED
@@ -22,7 +22,7 @@ import { flattenFragments, isMetaHost } from './internal/utils.js';
22
22
  import { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
23
23
  import { Menu } from '@hh.ru/magritte-ui-menu';
24
24
  import { Text } from '@hh.ru/magritte-ui-typography';
25
- import { s as styles } from './chat-bubble-DFDpgd_v.js';
25
+ import { s as styles } from './chat-bubble-CeWxnNlq.js';
26
26
  import '@hh.ru/magritte-ui-cell';
27
27
  import '@hh.ru/magritte-ui-link';
28
28
  import '@hh.ru/magritte-ui-loader';
package/File.js CHANGED
@@ -7,7 +7,7 @@ import { markMetaHost } from './internal/utils.js';
7
7
  import { ExclamationTriangleOutlinedSize16, ArrowDownLineOutlinedSize24, DocumentOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
8
8
  import { LinkDefaultPropsContext } from '@hh.ru/magritte-ui-link';
9
9
  import { Loader } from '@hh.ru/magritte-ui-loader';
10
- import { s as styles } from './chat-bubble-DFDpgd_v.js';
10
+ import { s as styles } from './chat-bubble-CeWxnNlq.js';
11
11
  import './internal/mode.js';
12
12
 
13
13
  /** Прикреплённый файл */
package/Label.js CHANGED
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
3
3
  import { forwardRef } from 'react';
4
4
  import { useChatBubbleColors } from './internal/colors.js';
5
5
  import { Text } from '@hh.ru/magritte-ui-typography';
6
- import { s as styles } from './chat-bubble-DFDpgd_v.js';
6
+ import { s as styles } from './chat-bubble-CeWxnNlq.js';
7
7
  import './internal/mode.js';
8
8
 
9
9
  /**
package/Media.d.ts CHANGED
@@ -14,5 +14,17 @@ export interface ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, Ch
14
14
  * @default chat-bubble-media
15
15
  */
16
16
  'data-qa'?: string;
17
+ /**
18
+ * Ширина превью в пикселях.
19
+ * Задаётся атрибутом, ограничивается стилями компонента, но не переопределяется ими.
20
+ * Передавать вместе с `height`.
21
+ */
22
+ width?: number;
23
+ /**
24
+ * Высота превью в пикселях.
25
+ * Нужна, чтобы вычислить пропорции и зарезервировать место под картинку.
26
+ * Передавать вместе с `width`.
27
+ */
28
+ height?: number;
17
29
  }
18
30
  export declare const ChatBubbleMedia: import("react").ForwardRefExoticComponent<ChatBubbleMediaProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;
package/Media.js CHANGED
@@ -3,13 +3,13 @@ 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-DFDpgd_v.js';
6
+ import { s as styles } from './chat-bubble-CeWxnNlq.js';
7
7
 
8
8
  /**
9
9
  * Медиа в сообщении
10
10
  */
11
- const ChatBubbleMediaComponent = forwardRef(({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, ...props }, ref) => {
12
- return (jsxs("div", { ...props, className: styles.media, "data-qa": dataQa, ref: ref, children: [src && (jsxs(Fragment, { children: [jsx("img", { className: styles.mediaBlur, src: src, alt: "", "aria-hidden": true }), jsx("img", { className: styles.mediaImage, src: src, alt: alt ?? '' })] })), children && jsx("span", { className: styles.mediaContent, children: children }), format && (jsx("span", { className: styles.mediaFormat, "data-qa": "chat-bubble-media-format", children: jsx(Text, { Element: "span", typography: "label-4-regular", style: "constant", children: format }) })), meta && (jsx("span", { className: styles.mediaMeta, "data-qa": "chat-bubble-media-meta", children: meta }))] }));
11
+ const ChatBubbleMediaComponent = forwardRef(({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, width, height, ...props }, ref) => {
12
+ return (jsxs("div", { ...props, className: styles.media, "data-qa": dataQa, ref: ref, children: [src && (jsxs(Fragment, { children: [jsx("img", { className: styles.mediaBlur, src: src, alt: "", "aria-hidden": true }), jsx("img", { className: styles.mediaImage, src: src, alt: alt ?? '', width: width, height: height })] })), children && jsx("span", { className: styles.mediaContent, children: children }), format && (jsx("span", { className: styles.mediaFormat, "data-qa": "chat-bubble-media-format", children: jsx(Text, { Element: "span", typography: "label-4-regular", style: "constant", children: format }) })), meta && (jsx("span", { className: styles.mediaMeta, "data-qa": "chat-bubble-media-meta", children: meta }))] }));
13
13
  });
14
14
  ChatBubbleMediaComponent.displayName = 'ChatBubbleMedia';
15
15
  const ChatBubbleMedia = markMetaHost(ChatBubbleMediaComponent);
package/Media.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Media.js","sources":["src/Media.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, ChatBubbleMetaHostProps {\n /** Url изображения или превью видео */\n src?: string;\n /** Alt изображения */\n alt?: string;\n /** Содержимое поверх превью */\n children?: ReactNode;\n /** Тип медиа (отображается в верхнем левом углу) */\n format?: ReactNode;\n /**\n * Значение data-qa\n * @default chat-bubble-media\n */\n 'data-qa'?: string;\n}\n\n/**\n * Медиа в сообщении\n */\nconst ChatBubbleMediaComponent = forwardRef<HTMLDivElement, ChatBubbleMediaProps>(\n ({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, ...props }, ref) => {\n return (\n <div {...props} className={styles.media} data-qa={dataQa} ref={ref}>\n {src && (\n <>\n <img className={styles.mediaBlur} src={src} alt=\"\" aria-hidden />\n <img className={styles.mediaImage} src={src} alt={alt ?? ''} />\n </>\n )}\n {children && <span className={styles.mediaContent}>{children}</span>}\n {format && (\n <span className={styles.mediaFormat} data-qa=\"chat-bubble-media-format\">\n <Text Element=\"span\" typography=\"label-4-regular\" style=\"constant\">\n {format}\n </Text>\n </span>\n )}\n {meta && (\n <span className={styles.mediaMeta} data-qa=\"chat-bubble-media-meta\">\n {meta}\n </span>\n )}\n </div>\n );\n }\n);\n\nChatBubbleMediaComponent.displayName = 'ChatBubbleMedia';\n\nexport const ChatBubbleMedia = markMetaHost(ChatBubbleMediaComponent);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAuBA;;AAEG;AACH,MAAM,wBAAwB,GAAG,UAAU,CACvC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,mBAAmB,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IAC7F,QACIA,IAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAW,SAAA,EAAA,MAAM,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAC7D,GAAG,KACAA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,EAAE,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe,EACjEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAI,CAAA,CAAA,EAAA,CAChE,CACN,EACA,QAAQ,IAAIA,cAAM,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,EACnE,MAAM,KACHA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,SAAA,EAAU,0BAA0B,EAAA,QAAA,EACnEA,GAAC,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,UAAU,EAAA,QAAA,EAC7D,MAAM,EAAA,CACJ,EACJ,CAAA,CACV,EACA,IAAI,KACDA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAU,SAAA,EAAA,wBAAwB,EAC9D,QAAA,EAAA,IAAI,EACF,CAAA,CACV,CACC,EAAA,CAAA,EACR;AACN,CAAC,CACJ,CAAC;AAEF,wBAAwB,CAAC,WAAW,GAAG,iBAAiB,CAAC;MAE5C,eAAe,GAAG,YAAY,CAAC,wBAAwB;;;;"}
1
+ {"version":3,"file":"Media.js","sources":["src/Media.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, ChatBubbleMetaHostProps {\n /** Url изображения или превью видео */\n src?: string;\n /** Alt изображения */\n alt?: string;\n /** Содержимое поверх превью */\n children?: ReactNode;\n /** Тип медиа (отображается в верхнем левом углу) */\n format?: ReactNode;\n /**\n * Значение data-qa\n * @default chat-bubble-media\n */\n 'data-qa'?: string;\n /**\n * Ширина превью в пикселях.\n * Задаётся атрибутом, ограничивается стилями компонента, но не переопределяется ими.\n * Передавать вместе с `height`.\n */\n width?: number;\n /**\n * Высота превью в пикселях.\n * Нужна, чтобы вычислить пропорции и зарезервировать место под картинку.\n * Передавать вместе с `width`.\n */\n height?: number;\n}\n\n/**\n * Медиа в сообщении\n */\nconst ChatBubbleMediaComponent = forwardRef<HTMLDivElement, ChatBubbleMediaProps>(\n ({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, width, height, ...props }, ref) => {\n return (\n <div {...props} className={styles.media} data-qa={dataQa} ref={ref}>\n {src && (\n <>\n <img className={styles.mediaBlur} src={src} alt=\"\" aria-hidden />\n <img className={styles.mediaImage} src={src} alt={alt ?? ''} width={width} height={height} />\n </>\n )}\n {children && <span className={styles.mediaContent}>{children}</span>}\n {format && (\n <span className={styles.mediaFormat} data-qa=\"chat-bubble-media-format\">\n <Text Element=\"span\" typography=\"label-4-regular\" style=\"constant\">\n {format}\n </Text>\n </span>\n )}\n {meta && (\n <span className={styles.mediaMeta} data-qa=\"chat-bubble-media-meta\">\n {meta}\n </span>\n )}\n </div>\n );\n }\n);\n\nChatBubbleMediaComponent.displayName = 'ChatBubbleMedia';\n\nexport const ChatBubbleMedia = markMetaHost(ChatBubbleMediaComponent);\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAmCA;;AAEG;AACH,MAAM,wBAAwB,GAAG,UAAU,CACvC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,mBAAmB,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC5G,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,SAAA,EAAW,MAAM,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAC7D,GAAG,KACAA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,EAAE,EAAe,aAAA,EAAA,IAAA,EAAA,CAAA,EACjEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA,CAAA,EAAA,CAC9F,CACN,EACA,QAAQ,IAAIA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAAG,QAAA,EAAA,QAAQ,EAAQ,CAAA,EACnE,MAAM,KACHA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,SAAA,EAAU,0BAA0B,EAAA,QAAA,EACnEA,GAAC,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,UAAU,EAC7D,QAAA,EAAA,MAAM,EACJ,CAAA,EAAA,CACJ,CACV,EACA,IAAI,KACDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA,SAAA,EAAU,wBAAwB,EAAA,QAAA,EAC9D,IAAI,EAAA,CACF,CACV,CAAA,EAAA,CACC,EACR;AACN,CAAC,CACJ,CAAC;AAEF,wBAAwB,CAAC,WAAW,GAAG,iBAAiB,CAAC;MAE5C,eAAe,GAAG,YAAY,CAAC,wBAAwB;;;;"}
package/Message.js CHANGED
@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
4
4
  import { useChatBubbleColors } from './internal/colors.js';
5
5
  import { markMetaHost } from './internal/utils.js';
6
6
  import { Text } from '@hh.ru/magritte-ui-typography';
7
- import { s as styles } from './chat-bubble-DFDpgd_v.js';
7
+ import { s as styles } from './chat-bubble-CeWxnNlq.js';
8
8
  import './internal/mode.js';
9
9
 
10
10
  /**
package/Meta.js CHANGED
@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { useTranslation } from '@hh.ru/magritte-common-use-translation';
4
4
  import { getColors } from './internal/colors.js';
5
5
  import { Text } from '@hh.ru/magritte-ui-typography';
6
- import { s as styles } from './chat-bubble-DFDpgd_v.js';
6
+ import { s as styles } from './chat-bubble-CeWxnNlq.js';
7
7
  import './internal/mode.js';
8
8
  import 'react';
9
9
 
@@ -12,12 +12,11 @@ import 'react';
12
12
  * Рендерится внутри последнего элемента контента.
13
13
  * */
14
14
  const Meta = ({ edited, mode, status, time }) => {
15
- const visibleStatus = mode === 'incoming' ? undefined : status;
16
15
  const editedLabel = useTranslation('ChatBubble', 'edited');
17
- if (!time && !visibleStatus && !edited) {
16
+ if (!time && !status && !edited) {
18
17
  return null;
19
18
  }
20
- return (jsxs("span", { className: styles.meta, "data-qa": "chat-bubble-meta", children: [(time || edited) && (jsxs(Text, { Element: "span", typography: "label-4-regular", style: getColors(mode).secondaryText, children: [edited && jsx("span", { className: styles.edited, children: editedLabel }), time && jsx("span", { children: time })] })), visibleStatus] }));
19
+ return (jsxs("span", { className: styles.meta, "data-qa": "chat-bubble-meta", children: [(time || edited) && (jsxs(Text, { Element: "span", typography: "label-4-regular", style: getColors(mode).secondaryText, children: [edited && jsx("span", { className: styles.edited, children: editedLabel }), time && jsx("span", { children: time })] })), status] }));
21
20
  };
22
21
 
23
22
  export { Meta };
package/Meta.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Meta.js","sources":["src/Meta.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface MetaProps {\n mode: ChatBubbleMode;\n status?: ReactNode;\n time?: ReactNode;\n edited?: boolean;\n}\n\n/**\n * Время и статус сообщения\n * Рендерится внутри последнего элемента контента.\n * */\nexport const Meta: FC<MetaProps> = ({ edited, mode, status, time }) => {\n const visibleStatus = mode === 'incoming' ? undefined : status;\n const editedLabel = useTranslation('ChatBubble', 'edited');\n\n if (!time && !visibleStatus && !edited) {\n return null;\n }\n\n return (\n <span className={styles.meta} data-qa=\"chat-bubble-meta\">\n {(time || edited) && (\n <Text Element=\"span\" typography=\"label-4-regular\" style={getColors(mode).secondaryText}>\n {edited && <span className={styles.edited}>{editedLabel}</span>}\n {time && <span>{time}</span>}\n </Text>\n )}\n {visibleStatus}\n </span>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAgBA;;;AAGK;AACE,MAAM,IAAI,GAAkB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAI;AAClE,IAAA,MAAM,aAAa,GAAG,IAAI,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE3D,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,EAAE;AACpC,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,QACIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,SAAA,EAAU,kBAAkB,EAAA,QAAA,EAAA,CACnD,CAAC,IAAI,IAAI,MAAM,MACZA,IAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,aAAa,EACjF,QAAA,EAAA,CAAA,MAAM,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EAAG,WAAW,EAAA,CAAQ,EAC9D,IAAI,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,EAAA,CAAQ,CACzB,EAAA,CAAA,CACV,EACA,aAAa,CACX,EAAA,CAAA,EACT;AACN;;;;"}
1
+ {"version":3,"file":"Meta.js","sources":["src/Meta.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface MetaProps {\n mode: ChatBubbleMode;\n status?: ReactNode;\n time?: ReactNode;\n edited?: boolean;\n}\n\n/**\n * Время и статус сообщения\n * Рендерится внутри последнего элемента контента.\n * */\nexport const Meta: FC<MetaProps> = ({ edited, mode, status, time }) => {\n const editedLabel = useTranslation('ChatBubble', 'edited');\n\n if (!time && !status && !edited) {\n return null;\n }\n\n return (\n <span className={styles.meta} data-qa=\"chat-bubble-meta\">\n {(time || edited) && (\n <Text Element=\"span\" typography=\"label-4-regular\" style={getColors(mode).secondaryText}>\n {edited && <span className={styles.edited}>{editedLabel}</span>}\n {time && <span>{time}</span>}\n </Text>\n )}\n {status}\n </span>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAgBA;;;AAGK;AACE,MAAM,IAAI,GAAkB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAI;IAClE,MAAM,WAAW,GAAG,cAAc,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAE3D,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE;AAC7B,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,QACIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,SAAA,EAAU,kBAAkB,EAAA,QAAA,EAAA,CACnD,CAAC,IAAI,IAAI,MAAM,MACZA,IAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,aAAa,EACjF,QAAA,EAAA,CAAA,MAAM,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EAAG,WAAW,EAAA,CAAQ,EAC9D,IAAI,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,EAAA,CAAQ,CACzB,EAAA,CAAA,CACV,EACA,MAAM,CACJ,EAAA,CAAA,EACT;AACN;;;;"}
package/Reply.js CHANGED
@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { forwardRef } from 'react';
4
4
  import { useChatBubbleColors } from './internal/colors.js';
5
5
  import { Text } from '@hh.ru/magritte-ui-typography';
6
- import { s as styles } from './chat-bubble-DFDpgd_v.js';
6
+ import { s as styles } from './chat-bubble-CeWxnNlq.js';
7
7
  import './internal/mode.js';
8
8
 
9
9
  /**
package/Snippet.js CHANGED
@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { forwardRef } from 'react';
4
4
  import { useChatBubbleColors } from './internal/colors.js';
5
5
  import { Text } from '@hh.ru/magritte-ui-typography';
6
- import { s as styles } from './chat-bubble-DFDpgd_v.js';
6
+ import { s as styles } from './chat-bubble-CeWxnNlq.js';
7
7
  import './internal/mode.js';
8
8
 
9
9
  /**
package/Status.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import { type TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip';
3
3
  /** Статус исходящего сообщения */
4
- export type ChatBubbleStatusValue = 'sending' | 'sent' | 'delivered';
4
+ export type ChatBubbleStatusValue = 'sending' | 'sent' | 'read' | 'deleted';
5
5
  export interface ChatBubbleStatusProps extends Omit<TooltipHoverProps, 'activatorRef' | 'placement' | 'size' | 'children'> {
6
6
  /** Статус отправки. У сообщений от бота не используется — там всегда «видно только вам»
7
7
  * @default sending
package/Status.js CHANGED
@@ -5,14 +5,15 @@ import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
5
5
  import { useTranslation } from '@hh.ru/magritte-common-use-translation';
6
6
  import { getColors } from './internal/colors.js';
7
7
  import { useChatBubbleMode } from './internal/mode.js';
8
- import { EyeOutlinedSize16, ClockOutlinedSize16, CheckOutlinedSize16, CheckDoubleOutlinedSize16 } from '@hh.ru/magritte-ui-icon/icon';
8
+ import { EyeOutlinedSize16, ClockOutlinedSize16, CheckOutlinedSize16, CheckDoubleOutlinedSize16, TrashOutlinedSize16 } 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-DFDpgd_v.js';
10
+ import { s as styles } from './chat-bubble-CeWxnNlq.js';
11
11
 
12
12
  const ICON = {
13
13
  sending: ClockOutlinedSize16,
14
14
  sent: CheckOutlinedSize16,
15
- delivered: CheckDoubleOutlinedSize16,
15
+ read: CheckDoubleOutlinedSize16,
16
+ deleted: TrashOutlinedSize16,
16
17
  };
17
18
  /**
18
19
  * Статус сообщения: иконка и подсказка к ней.
@@ -23,7 +24,12 @@ const ChatBubbleStatus = forwardRef(({ children, 'data-qa': dataQa = 'chat-bubbl
23
24
  const activatorRef = useRef(null);
24
25
  const activator = useMultipleRefs(ref, activatorRef);
25
26
  const isBot = mode === 'bot';
27
+ const isDeleted = value === 'deleted';
26
28
  const label = useTranslation('ChatBubble', isBot ? 'private' : value);
29
+ // пометка об удалении ставится у любого отправителя, остальные статусы — только у своих сообщений
30
+ if (mode === 'incoming' && !isDeleted) {
31
+ return null;
32
+ }
27
33
  // у бота по макету всегда глаз, статус отправки к нему не применяется
28
34
  const Icon = isBot ? EyeOutlinedSize16 : ICON[value];
29
35
  return (jsxs(Fragment, { children: [jsx("span", { ref: activator, className: styles.status, "data-qa": dataQa, "data-status": isBot ? 'private' : value, children: jsx(Icon, { initialColor: colors.statusIcon, "aria-label": label }) }), jsx(TooltipHover, { ...tooltipProps, activatorRef: activatorRef, placement: "top-center", size: "small", children: children ?? label })] }));
package/Status.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Status.js","sources":["src/Status.tsx"],"sourcesContent":["import { forwardRef, useRef, type ReactNode } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport {\n CheckDoubleOutlinedSize16,\n CheckOutlinedSize16,\n ClockOutlinedSize16,\n EyeOutlinedSize16,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { TooltipHover, type TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip';\n\nimport styles from './chat-bubble.less';\n\n/** Статус исходящего сообщения */\nexport type ChatBubbleStatusValue = 'sending' | 'sent' | 'delivered';\n\nconst ICON = {\n sending: ClockOutlinedSize16,\n sent: CheckOutlinedSize16,\n delivered: CheckDoubleOutlinedSize16,\n} as const;\n\nexport interface ChatBubbleStatusProps\n extends Omit<TooltipHoverProps, 'activatorRef' | 'placement' | 'size' | 'children'> {\n /** Статус отправки. У сообщений от бота не используется — там всегда «видно только вам»\n * @default sending\n */\n value?: ChatBubbleStatusValue;\n /** Текст подсказки. По умолчанию берётся из словаря по статусу */\n children?: ReactNode;\n /** Значение data-qa\n * @default chat-bubble-status\n */\n 'data-qa'?: string;\n}\n\n/**\n * Статус сообщения: иконка и подсказка к ней.\n */\nexport const ChatBubbleStatus = forwardRef<HTMLSpanElement, ChatBubbleStatusProps>(\n ({ children, 'data-qa': dataQa = 'chat-bubble-status', value = 'sending', ...tooltipProps }, ref) => {\n const mode = useChatBubbleMode();\n const colors = getColors(mode);\n const activatorRef = useRef<HTMLSpanElement>(null);\n const activator = useMultipleRefs(ref, activatorRef);\n const isBot = mode === 'bot';\n const label = useTranslation('ChatBubble', isBot ? 'private' : value);\n\n // у бота по макету всегда глаз, статус отправки к нему не применяется\n const Icon = isBot ? EyeOutlinedSize16 : ICON[value];\n\n return (\n <>\n <span\n ref={activator}\n className={styles.status}\n data-qa={dataQa}\n data-status={isBot ? 'private' : value}\n >\n <Icon initialColor={colors.statusIcon} aria-label={label} />\n </span>\n <TooltipHover {...tooltipProps} activatorRef={activatorRef} placement=\"top-center\" size=\"small\">\n {children ?? label}\n </TooltipHover>\n </>\n );\n }\n);\n\nChatBubbleStatus.displayName = 'ChatBubbleStatus';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;AAmBA,MAAM,IAAI,GAAG;AACT,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,IAAI,EAAE,mBAAmB;AACzB,IAAA,SAAS,EAAE,yBAAyB;CAC9B,CAAC;AAgBX;;AAEG;AACU,MAAA,gBAAgB,GAAG,UAAU,CACtC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,oBAAoB,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,EAAE,GAAG,KAAI;AAChG,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;AAC/B,IAAA,MAAM,YAAY,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,eAAe,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AACrD,IAAA,MAAM,KAAK,GAAG,IAAI,KAAK,KAAK,CAAC;AAC7B,IAAA,MAAM,KAAK,GAAG,cAAc,CAAC,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,CAAC;;AAGtE,IAAA,MAAM,IAAI,GAAG,KAAK,GAAG,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;AAErD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GACI,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,MAAM,EACf,SAAA,EAAA,MAAM,EACF,aAAA,EAAA,KAAK,GAAG,SAAS,GAAG,KAAK,EAEtC,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,YAAY,EAAE,MAAM,CAAC,UAAU,EAAA,YAAA,EAAc,KAAK,EAAA,CAAI,EACzD,CAAA,EACPA,GAAC,CAAA,YAAY,EAAK,EAAA,GAAA,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAC1F,QAAA,EAAA,QAAQ,IAAI,KAAK,EACP,CAAA,CAAA,EAAA,CAChB,EACL;AACN,CAAC,EACH;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}
1
+ {"version":3,"file":"Status.js","sources":["src/Status.tsx"],"sourcesContent":["import { forwardRef, useRef, type ReactNode } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport {\n CheckDoubleOutlinedSize16,\n CheckOutlinedSize16,\n ClockOutlinedSize16,\n EyeOutlinedSize16,\n TrashOutlinedSize16,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { TooltipHover, type TooltipHoverProps } from '@hh.ru/magritte-ui-tooltip';\n\nimport styles from './chat-bubble.less';\n\n/** Статус исходящего сообщения */\nexport type ChatBubbleStatusValue = 'sending' | 'sent' | 'read' | 'deleted';\n\nconst ICON = {\n sending: ClockOutlinedSize16,\n sent: CheckOutlinedSize16,\n read: CheckDoubleOutlinedSize16,\n deleted: TrashOutlinedSize16,\n} as const;\n\nexport interface ChatBubbleStatusProps\n extends Omit<TooltipHoverProps, 'activatorRef' | 'placement' | 'size' | 'children'> {\n /** Статус отправки. У сообщений от бота не используется — там всегда «видно только вам»\n * @default sending\n */\n value?: ChatBubbleStatusValue;\n /** Текст подсказки. По умолчанию берётся из словаря по статусу */\n children?: ReactNode;\n /** Значение data-qa\n * @default chat-bubble-status\n */\n 'data-qa'?: string;\n}\n\n/**\n * Статус сообщения: иконка и подсказка к ней.\n */\nexport const ChatBubbleStatus = forwardRef<HTMLSpanElement, ChatBubbleStatusProps>(\n ({ children, 'data-qa': dataQa = 'chat-bubble-status', value = 'sending', ...tooltipProps }, ref) => {\n const mode = useChatBubbleMode();\n const colors = getColors(mode);\n const activatorRef = useRef<HTMLSpanElement>(null);\n const activator = useMultipleRefs(ref, activatorRef);\n const isBot = mode === 'bot';\n const isDeleted = value === 'deleted';\n const label = useTranslation('ChatBubble', isBot ? 'private' : value);\n\n // пометка об удалении ставится у любого отправителя, остальные статусы — только у своих сообщений\n if (mode === 'incoming' && !isDeleted) {\n return null;\n }\n\n // у бота по макету всегда глаз, статус отправки к нему не применяется\n const Icon = isBot ? EyeOutlinedSize16 : ICON[value];\n\n return (\n <>\n <span\n ref={activator}\n className={styles.status}\n data-qa={dataQa}\n data-status={isBot ? 'private' : value}\n >\n <Icon initialColor={colors.statusIcon} aria-label={label} />\n </span>\n <TooltipHover {...tooltipProps} activatorRef={activatorRef} placement=\"top-center\" size=\"small\">\n {children ?? label}\n </TooltipHover>\n </>\n );\n }\n);\n\nChatBubbleStatus.displayName = 'ChatBubbleStatus';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;AAoBA,MAAM,IAAI,GAAG;AACT,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,IAAI,EAAE,mBAAmB;AACzB,IAAA,IAAI,EAAE,yBAAyB;AAC/B,IAAA,OAAO,EAAE,mBAAmB;CACtB,CAAC;AAgBX;;AAEG;AACU,MAAA,gBAAgB,GAAG,UAAU,CACtC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,oBAAoB,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,EAAE,GAAG,KAAI;AAChG,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;AAC/B,IAAA,MAAM,YAAY,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,eAAe,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;AACrD,IAAA,MAAM,KAAK,GAAG,IAAI,KAAK,KAAK,CAAC;AAC7B,IAAA,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;AACtC,IAAA,MAAM,KAAK,GAAG,cAAc,CAAC,YAAY,EAAE,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,CAAC;;AAGtE,IAAA,IAAI,IAAI,KAAK,UAAU,IAAI,CAAC,SAAS,EAAE;AACnC,QAAA,OAAO,IAAI,CAAC;KACf;;AAGD,IAAA,MAAM,IAAI,GAAG,KAAK,GAAG,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;AAErD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GACI,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,MAAM,EACf,SAAA,EAAA,MAAM,EACF,aAAA,EAAA,KAAK,GAAG,SAAS,GAAG,KAAK,EAEtC,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,YAAY,EAAE,MAAM,CAAC,UAAU,EAAA,YAAA,EAAc,KAAK,EAAA,CAAI,EACzD,CAAA,EACPA,GAAC,CAAA,YAAY,EAAK,EAAA,GAAA,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAC1F,QAAA,EAAA,QAAQ,IAAI,KAAK,EACP,CAAA,CAAA,EAAA,CAChB,EACL;AACN,CAAC,EACH;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}
package/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 './internal/mode.js';
5
- import { s as styles } from './chat-bubble-DFDpgd_v.js';
5
+ import { s as styles } from './chat-bubble-CeWxnNlq.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';
@@ -0,0 +1,5 @@
1
+ import './index.css';
2
+ var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_3-0-0","chatBubble":"magritte-chat-bubble___ds9CP_3-0-0","outgoing":"magritte-outgoing___3n00o_3-0-0","bot":"magritte-bot___Z6vZA_3-0-0","row":"magritte-row___mQNnt_3-0-0","bubble":"magritte-bubble___NVuDI_3-0-0","with-tail":"magritte-with-tail___IdixJ_3-0-0","withTail":"magritte-with-tail___IdixJ_3-0-0","tail":"magritte-tail___E2hdk_3-0-0","tail-outgoing":"magritte-tail-outgoing___Pn3MI_3-0-0","tailOutgoing":"magritte-tail-outgoing___Pn3MI_3-0-0","buttons":"magritte-buttons___yQqBi_3-0-0","aside":"magritte-aside___bTex-_3-0-0","aside-revealed":"magritte-aside-revealed___CRBl7_3-0-0","asideRevealed":"magritte-aside-revealed___CRBl7_3-0-0","error-text":"magritte-error-text___1ZxWY_3-0-0","errorText":"magritte-error-text___1ZxWY_3-0-0","file":"magritte-file___k2IKy_3-0-0","file-preview":"magritte-file-preview___eJKu8_3-0-0","filePreview":"magritte-file-preview___eJKu8_3-0-0","media":"magritte-media___9jH2k_3-0-0","media-blur":"magritte-media-blur___TbiMa_3-0-0","mediaBlur":"magritte-media-blur___TbiMa_3-0-0","media-image":"magritte-media-image___G-FkF_3-0-0","mediaImage":"magritte-media-image___G-FkF_3-0-0","media-content":"magritte-media-content___n3XbD_3-0-0","mediaContent":"magritte-media-content___n3XbD_3-0-0","media-format":"magritte-media-format___AdfCK_3-0-0","mediaFormat":"magritte-media-format___AdfCK_3-0-0","media-meta":"magritte-media-meta___oSxxr_3-0-0","mediaMeta":"magritte-media-meta___oSxxr_3-0-0","reply":"magritte-reply___-QCK7_3-0-0","reply-preview":"magritte-reply-preview___qvlNT_3-0-0","replyPreview":"magritte-reply-preview___qvlNT_3-0-0","reply-body":"magritte-reply-body___f2xx7_3-0-0","replyBody":"magritte-reply-body___f2xx7_3-0-0","snippet":"magritte-snippet___8k9xb_3-0-0","meta":"magritte-meta___1qhjm_3-0-0","edited":"magritte-edited___m-zmB_3-0-0","status":"magritte-status___dHzCt_3-0-0","message-title":"magritte-message-title___dgBFk_3-0-0","messageTitle":"magritte-message-title___dgBFk_3-0-0","label":"magritte-label___i0Wyt_3-0-0","message":"magritte-message___7TEpw_3-0-0"};
3
+
4
+ export { styles as s };
5
+ //# sourceMappingURL=chat-bubble-CeWxnNlq.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chat-bubble-CeWxnNlq.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
package/index.css CHANGED
@@ -38,7 +38,7 @@
38
38
  --magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1:#90ACC1;
39
39
  --magritte-color-component-chat-bubble-snippet-line-incoming-v25-0-1:#557B96;
40
40
  }
41
- .magritte-chat-bubble___ds9CP_2-0-4{
41
+ .magritte-chat-bubble___ds9CP_3-0-0{
42
42
  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-incoming-v25-0-1);
43
43
  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-incoming-v25-0-1);
44
44
  --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-incoming-v25-0-1);
@@ -49,16 +49,16 @@
49
49
  max-width:calc(100% - 40px);
50
50
  }
51
51
  @media (min-width: 1020px){
52
- body.magritte-old-layout .magritte-chat-bubble___ds9CP_2-0-4{
52
+ body.magritte-old-layout .magritte-chat-bubble___ds9CP_3-0-0{
53
53
  max-width:min(460px, 100%);
54
54
  }
55
55
  }
56
56
  @media (min-width: 1024px){
57
- body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_2-0-4{
57
+ body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_3-0-0{
58
58
  max-width:min(460px, 100%);
59
59
  }
60
60
  }
61
- .magritte-outgoing___3n00o_2-0-4{
61
+ .magritte-outgoing___3n00o_3-0-0{
62
62
  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-outgoing-v25-0-1);
63
63
  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-outgoing-v25-0-1);
64
64
  --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1);
@@ -66,20 +66,20 @@
66
66
  align-items:flex-end;
67
67
  margin-left:auto;
68
68
  }
69
- .magritte-bot___Z6vZA_2-0-4{
69
+ .magritte-bot___Z6vZA_3-0-0{
70
70
  --magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-bot-v25-0-1);
71
71
  --magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-bot-v25-0-1);
72
72
  --magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-bot-v25-0-1);
73
73
  --magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-bot-v25-0-1);
74
74
  }
75
- .magritte-row___mQNnt_2-0-4{
75
+ .magritte-row___mQNnt_3-0-0{
76
76
  display:flex;
77
77
  position:relative;
78
78
  align-items:flex-end;
79
79
  gap:8px;
80
80
  max-width:100%;
81
81
  }
82
- .magritte-bubble___NVuDI_2-0-4{
82
+ .magritte-bubble___NVuDI_3-0-0{
83
83
  position:relative;
84
84
  box-sizing:border-box;
85
85
  min-width:0;
@@ -90,31 +90,31 @@
90
90
  border-radius:20px;
91
91
  overflow-wrap:break-word;
92
92
  }
93
- .magritte-with-tail___IdixJ_2-0-4 .magritte-bubble___NVuDI_2-0-4{
93
+ .magritte-with-tail___IdixJ_3-0-0 .magritte-bubble___NVuDI_3-0-0{
94
94
  border-bottom-left-radius:0;
95
95
  }
96
- .magritte-with-tail___IdixJ_2-0-4.magritte-outgoing___3n00o_2-0-4 .magritte-bubble___NVuDI_2-0-4{
96
+ .magritte-with-tail___IdixJ_3-0-0.magritte-outgoing___3n00o_3-0-0 .magritte-bubble___NVuDI_3-0-0{
97
97
  border-bottom-left-radius:20px;
98
98
  border-bottom-right-radius:0;
99
99
  }
100
- .magritte-tail___E2hdk_2-0-4{
100
+ .magritte-tail___E2hdk_3-0-0{
101
101
  position:absolute;
102
102
  bottom:-1px;
103
103
  left:-7px;
104
104
  }
105
- .magritte-tail-outgoing___Pn3MI_2-0-4{
105
+ .magritte-tail-outgoing___Pn3MI_3-0-0{
106
106
  left:auto;
107
107
  right:-7px;
108
108
  transform:scaleX(-1);
109
109
  }
110
- .magritte-buttons___yQqBi_2-0-4{
110
+ .magritte-buttons___yQqBi_3-0-0{
111
111
  display:grid;
112
112
  grid-template-columns:repeat(2, 1fr);
113
113
  gap:8px;
114
114
  width:100%;
115
115
  margin-top:4px;
116
116
  }
117
- .magritte-aside___bTex-_2-0-4{
117
+ .magritte-aside___bTex-_3-0-0{
118
118
  display:flex;
119
119
  position:absolute;
120
120
  top:0;
@@ -125,33 +125,33 @@
125
125
  opacity:0;
126
126
  transition:opacity var(--magritte-semantic-animation-time-s-duration-v25-0-1) ease-in-out;
127
127
  }
128
- .magritte-aside-revealed___CRBl7_2-0-4{
128
+ .magritte-aside-revealed___CRBl7_3-0-0{
129
129
  opacity:1;
130
130
  }
131
- .magritte-outgoing___3n00o_2-0-4 .magritte-aside___bTex-_2-0-4{
131
+ .magritte-outgoing___3n00o_3-0-0 .magritte-aside___bTex-_3-0-0{
132
132
  left:auto;
133
133
  right:100%;
134
134
  padding-right:8px;
135
135
  padding-left:0;
136
136
  }
137
- .magritte-buttons___yQqBi_2-0-4 > *:last-child:nth-child(odd){
137
+ .magritte-buttons___yQqBi_3-0-0 > *:last-child:nth-child(odd){
138
138
  grid-column:span 2;
139
139
  }
140
- .magritte-error-text___1ZxWY_2-0-4{
140
+ .magritte-error-text___1ZxWY_3-0-0{
141
141
  margin-top:2px;
142
142
  }
143
- .magritte-file___k2IKy_2-0-4{
143
+ .magritte-file___k2IKy_3-0-0{
144
144
  display:flex;
145
145
  align-items:flex-end;
146
146
  }
147
- .magritte-file-preview___eJKu8_2-0-4{
147
+ .magritte-file-preview___eJKu8_3-0-0{
148
148
  display:block;
149
149
  width:48px;
150
150
  height:48px;
151
151
  border-radius:8px;
152
152
  object-fit:cover;
153
153
  }
154
- .magritte-media___9jH2k_2-0-4{
154
+ .magritte-media___9jH2k_3-0-0{
155
155
  display:flex;
156
156
  position:relative;
157
157
  box-sizing:border-box;
@@ -164,18 +164,18 @@
164
164
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-chat-bubble-border-image-v25-0-1);
165
165
  }
166
166
  @media (min-width: 1020px){
167
- body.magritte-old-layout .magritte-media___9jH2k_2-0-4{
167
+ body.magritte-old-layout .magritte-media___9jH2k_3-0-0{
168
168
  max-width:452px;
169
169
  max-height:452px;
170
170
  }
171
171
  }
172
172
  @media (min-width: 1024px){
173
- body:not(.magritte-old-layout) .magritte-media___9jH2k_2-0-4{
173
+ body:not(.magritte-old-layout) .magritte-media___9jH2k_3-0-0{
174
174
  max-width:452px;
175
175
  max-height:452px;
176
176
  }
177
177
  }
178
- .magritte-media-blur___TbiMa_2-0-4{
178
+ .magritte-media-blur___TbiMa_3-0-0{
179
179
  position:absolute;
180
180
  top:-96px;
181
181
  left:-96px;
@@ -185,31 +185,33 @@
185
185
  filter:blur(48px);
186
186
  object-fit:cover;
187
187
  }
188
- .magritte-media-image___G-FkF_2-0-4{
188
+ .magritte-media-image___G-FkF_3-0-0{
189
189
  display:block;
190
190
  position:relative;
191
+ height:auto;
191
192
  max-width:100%;
192
193
  max-height:min(60vh, 452px);
193
194
  margin:auto;
195
+ object-fit:contain;
194
196
  }
195
197
  @media (min-width: 1020px){
196
- body.magritte-old-layout .magritte-media-image___G-FkF_2-0-4{
198
+ body.magritte-old-layout .magritte-media-image___G-FkF_3-0-0{
197
199
  max-height:452px;
198
200
  }
199
201
  }
200
202
  @media (min-width: 1024px){
201
- body:not(.magritte-old-layout) .magritte-media-image___G-FkF_2-0-4{
203
+ body:not(.magritte-old-layout) .magritte-media-image___G-FkF_3-0-0{
202
204
  max-height:452px;
203
205
  }
204
206
  }
205
- .magritte-media-content___n3XbD_2-0-4{
207
+ .magritte-media-content___n3XbD_3-0-0{
206
208
  display:flex;
207
209
  position:absolute;
208
210
  inset:0;
209
211
  align-items:center;
210
212
  justify-content:center;
211
213
  }
212
- .magritte-media-format___AdfCK_2-0-4{
214
+ .magritte-media-format___AdfCK_3-0-0{
213
215
  display:flex;
214
216
  position:absolute;
215
217
  padding:2px 8px;
@@ -219,7 +221,7 @@
219
221
  top:4px;
220
222
  left:4px;
221
223
  }
222
- .magritte-media-meta___oSxxr_2-0-4{
224
+ .magritte-media-meta___oSxxr_3-0-0{
223
225
  --magritte-ui-text-color-override:var(--magritte-color-text-constant-v25-0-1);
224
226
  display:flex;
225
227
  position:absolute;
@@ -231,13 +233,14 @@
231
233
  bottom:4px;
232
234
  align-items:center;
233
235
  }
234
- .magritte-media-meta___oSxxr_2-0-4:empty{
236
+ .magritte-media-meta___oSxxr_3-0-0:empty,
237
+ .magritte-media-meta___oSxxr_3-0-0:has(> :empty){
235
238
  display:none;
236
239
  }
237
- .magritte-media-meta___oSxxr_2-0-4 > span{
240
+ .magritte-media-meta___oSxxr_3-0-0 > span{
238
241
  margin-left:0;
239
242
  }
240
- .magritte-reply___-QCK7_2-0-4{
243
+ .magritte-reply___-QCK7_3-0-0{
241
244
  display:flex;
242
245
  position:relative;
243
246
  padding:8px;
@@ -248,7 +251,7 @@
248
251
  align-items:center;
249
252
  gap:8px;
250
253
  }
251
- .magritte-reply___-QCK7_2-0-4::before{
254
+ .magritte-reply___-QCK7_3-0-0::before{
252
255
  content:'';
253
256
  position:absolute;
254
257
  top:0;
@@ -257,7 +260,7 @@
257
260
  width:4px;
258
261
  background-color:var(--magritte-chat-bubble-snippet-line);
259
262
  }
260
- .magritte-reply-preview___qvlNT_2-0-4{
263
+ .magritte-reply-preview___qvlNT_3-0-0{
261
264
  display:block;
262
265
  flex-shrink:0;
263
266
  width:40px;
@@ -267,12 +270,12 @@
267
270
  outline-offset:-1px;
268
271
  object-fit:cover;
269
272
  }
270
- .magritte-reply-body___f2xx7_2-0-4{
273
+ .magritte-reply-body___f2xx7_3-0-0{
271
274
  display:flex;
272
275
  flex-direction:column;
273
276
  min-width:0;
274
277
  }
275
- .magritte-snippet___8k9xb_2-0-4{
278
+ .magritte-snippet___8k9xb_3-0-0{
276
279
  display:flex;
277
280
  position:relative;
278
281
  padding:8px;
@@ -283,7 +286,7 @@
283
286
  flex-direction:column;
284
287
  gap:2px;
285
288
  }
286
- .magritte-snippet___8k9xb_2-0-4::before{
289
+ .magritte-snippet___8k9xb_3-0-0::before{
287
290
  content:'';
288
291
  position:absolute;
289
292
  top:0;
@@ -292,7 +295,7 @@
292
295
  width:4px;
293
296
  background-color:var(--magritte-chat-bubble-snippet-line);
294
297
  }
295
- .magritte-snippet___8k9xb_2-0-4 img{
298
+ .magritte-snippet___8k9xb_3-0-0 img{
296
299
  display:block;
297
300
  max-width:100%;
298
301
  border-radius:4px;
@@ -300,7 +303,7 @@
300
303
  outline-offset:-1px;
301
304
  margin-top:6px;
302
305
  }
303
- .magritte-meta___1qhjm_2-0-4{
306
+ .magritte-meta___1qhjm_3-0-0{
304
307
  float:right;
305
308
  margin-left:12px;
306
309
  white-space:nowrap;
@@ -313,53 +316,53 @@
313
316
  text-transform:none;
314
317
  text-decoration:none;
315
318
  }
316
- .magritte-edited___m-zmB_2-0-4{
319
+ .magritte-edited___m-zmB_3-0-0{
317
320
  margin-right:4px;
318
321
  }
319
- .magritte-status___dHzCt_2-0-4{
322
+ .magritte-status___dHzCt_3-0-0{
320
323
  display:inline-flex;
321
324
  vertical-align:middle;
322
325
  }
323
- .magritte-status___dHzCt_2-0-4:not(:first-child){
326
+ .magritte-status___dHzCt_3-0-0:not(:first-child){
324
327
  margin-left:4px;
325
328
  }
326
- .magritte-message-title___dgBFk_2-0-4{
329
+ .magritte-message-title___dgBFk_3-0-0{
327
330
  margin-bottom:4px;
328
331
  }
329
- .magritte-label___i0Wyt_2-0-4 + .magritte-media___9jH2k_2-0-4,
330
- .magritte-label___i0Wyt_2-0-4 + .magritte-message___7TEpw_2-0-4,
331
- .magritte-label___i0Wyt_2-0-4 + .magritte-snippet___8k9xb_2-0-4,
332
- .magritte-message___7TEpw_2-0-4 + .magritte-message___7TEpw_2-0-4,
333
- .magritte-bubble___NVuDI_2-0-4 > .magritte-meta___1qhjm_2-0-4{
332
+ .magritte-label___i0Wyt_3-0-0 + .magritte-media___9jH2k_3-0-0,
333
+ .magritte-label___i0Wyt_3-0-0 + .magritte-message___7TEpw_3-0-0,
334
+ .magritte-label___i0Wyt_3-0-0 + .magritte-snippet___8k9xb_3-0-0,
335
+ .magritte-message___7TEpw_3-0-0 + .magritte-message___7TEpw_3-0-0,
336
+ .magritte-bubble___NVuDI_3-0-0 > .magritte-meta___1qhjm_3-0-0{
334
337
  margin-top:4px;
335
338
  }
336
- .magritte-label___i0Wyt_2-0-4 + .magritte-reply___-QCK7_2-0-4,
337
- .magritte-reply___-QCK7_2-0-4 + .magritte-media___9jH2k_2-0-4,
338
- .magritte-reply___-QCK7_2-0-4 + .magritte-message___7TEpw_2-0-4,
339
- .magritte-reply___-QCK7_2-0-4 + .magritte-snippet___8k9xb_2-0-4,
340
- .magritte-media___9jH2k_2-0-4 + .magritte-snippet___8k9xb_2-0-4{
339
+ .magritte-label___i0Wyt_3-0-0 + .magritte-reply___-QCK7_3-0-0,
340
+ .magritte-reply___-QCK7_3-0-0 + .magritte-media___9jH2k_3-0-0,
341
+ .magritte-reply___-QCK7_3-0-0 + .magritte-message___7TEpw_3-0-0,
342
+ .magritte-reply___-QCK7_3-0-0 + .magritte-snippet___8k9xb_3-0-0,
343
+ .magritte-media___9jH2k_3-0-0 + .magritte-snippet___8k9xb_3-0-0{
341
344
  margin-top:8px;
342
345
  }
343
- .magritte-label___i0Wyt_2-0-4 + .magritte-file___k2IKy_2-0-4,
344
- .magritte-reply___-QCK7_2-0-4 + .magritte-file___k2IKy_2-0-4,
345
- .magritte-media___9jH2k_2-0-4 + .magritte-file___k2IKy_2-0-4,
346
- .magritte-media___9jH2k_2-0-4 + .magritte-message___7TEpw_2-0-4,
347
- .magritte-file___k2IKy_2-0-4 + .magritte-message___7TEpw_2-0-4,
348
- .magritte-file___k2IKy_2-0-4 + .magritte-snippet___8k9xb_2-0-4{
346
+ .magritte-label___i0Wyt_3-0-0 + .magritte-file___k2IKy_3-0-0,
347
+ .magritte-reply___-QCK7_3-0-0 + .magritte-file___k2IKy_3-0-0,
348
+ .magritte-media___9jH2k_3-0-0 + .magritte-file___k2IKy_3-0-0,
349
+ .magritte-media___9jH2k_3-0-0 + .magritte-message___7TEpw_3-0-0,
350
+ .magritte-file___k2IKy_3-0-0 + .magritte-message___7TEpw_3-0-0,
351
+ .magritte-file___k2IKy_3-0-0 + .magritte-snippet___8k9xb_3-0-0{
349
352
  margin-top:12px;
350
353
  }
351
- .magritte-message___7TEpw_2-0-4 + .magritte-snippet___8k9xb_2-0-4{
354
+ .magritte-message___7TEpw_3-0-0 + .magritte-snippet___8k9xb_3-0-0{
352
355
  margin-top:16px;
353
356
  }
354
- .magritte-file___k2IKy_2-0-4 + .magritte-file___k2IKy_2-0-4{
357
+ .magritte-file___k2IKy_3-0-0 + .magritte-file___k2IKy_3-0-0{
355
358
  margin-top:24px;
356
359
  }
357
- .magritte-label___i0Wyt_2-0-4{
360
+ .magritte-label___i0Wyt_3-0-0{
358
361
  margin-top:-4px;
359
362
  }
360
- .magritte-bubble___NVuDI_2-0-4 > .magritte-media___9jH2k_2-0-4:first-child{
363
+ .magritte-bubble___NVuDI_3-0-0 > .magritte-media___9jH2k_3-0-0:first-child{
361
364
  margin-top:-8px;
362
365
  }
363
- .magritte-bubble___NVuDI_2-0-4 > .magritte-media___9jH2k_2-0-4:not(:has( ~ :not(.magritte-tail___E2hdk_2-0-4))){
366
+ .magritte-bubble___NVuDI_3-0-0 > .magritte-media___9jH2k_3-0-0:not(:has( ~ :not(.magritte-tail___E2hdk_3-0-0))){
364
367
  margin-bottom:-8px;
365
368
  }
package/index.js CHANGED
@@ -11,7 +11,7 @@ import './internal/colors.js';
11
11
  import './internal/mode.js';
12
12
  import './internal/utils.js';
13
13
  import '@hh.ru/magritte-ui-icon/icon';
14
- import './chat-bubble-DFDpgd_v.js';
14
+ import './chat-bubble-CeWxnNlq.js';
15
15
  import './ErrorAction.js';
16
16
  import './internal/errorMenu.js';
17
17
  import '@hh.ru/magritte-ui-menu';
@@ -8,7 +8,7 @@ const COLORS = {
8
8
  secondaryText: 'secondary',
9
9
  accentText: 'accent',
10
10
  replyTitle: 'accent',
11
- statusIcon: 'constant',
11
+ statusIcon: 'secondary',
12
12
  button: { mode: 'secondary', style: 'neutral' },
13
13
  link: { style: 'accent' },
14
14
  secondaryIcon: 'secondary',
@@ -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 { ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport type { IconColor } from '@hh.ru/magritte-ui-icon';\nimport type { LinkProps } from '@hh.ru/magritte-ui-link';\nimport type { TextStyle } from '@hh.ru/magritte-ui-typography';\n\nexport interface ChatBubbleColors {\n /** Основной текст сообщения, названия файла, текст сниппета */\n text: TextStyle;\n /** Второстепенный текст: время, размер файла */\n secondaryText: TextStyle;\n /** Акцентный текст: имя отправителя */\n accentText: TextStyle;\n /** Автор цитируемого сообщения (у бота акцентный, потому отдельно от accentText) */\n replyTitle: TextStyle;\n /** Иконка статуса, лежит на фоне баббла */\n statusIcon: IconColor;\n /** Кнопки под бабблом */\n button: Pick<ButtonProps, 'mode' | 'style'>;\n /** Ссылка-действие: «Открыть», «Загрузить» */\n link: Pick<LinkProps, 'style' | 'mode'>;\n /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */\n secondaryIcon: IconColor;\n /** Иконка файла */\n fileIcon: IconColor;\n /** Подложка под иконкой файла */\n fileIconBackground: TokenColorBackground;\n}\n\nconst COLORS: Record<ChatBubbleMode, ChatBubbleColors> = {\n incoming: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'accent',\n replyTitle: 'accent',\n statusIcon: 'constant',\n button: { mode: 'secondary', style: 'neutral' },\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'accent',\n },\n outgoing: {\n text: 'constant',\n secondaryText: 'constant',\n accentText: 'constant',\n replyTitle: 'constant',\n statusIcon: 'constant',\n button: { mode: 'primary', style: 'accent' },\n link: { style: 'constant', mode: 'secondary' },\n secondaryIcon: 'constant',\n fileIcon: 'accent',\n fileIconBackground: 'accent-secondary',\n },\n bot: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'special',\n replyTitle: 'accent',\n statusIcon: 'special',\n button: { mode: 'secondary', style: 'special' },\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'special',\n },\n};\n\nexport const getColors = (mode: ChatBubbleMode): ChatBubbleColors => COLORS[mode];\n\n// Для подкомпонентов, которые сидят под mode провайдером\nexport const useChatBubbleColors = (): ChatBubbleColors => COLORS[useChatBubbleMode()];\n"],"names":[],"mappings":";;;AA+BA,MAAM,MAAM,GAA6C;AACrD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,UAAU;QACtB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,QAAQ;AAC/B,KAAA;AACD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;QACtB,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5C,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE;AAC9C,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,kBAAkB,EAAE,kBAAkB;AACzC,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,SAAS;AAChC,KAAA;CACJ,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,IAAoB,KAAuB,MAAM,CAAC,IAAI,EAAE;AAElF;AACO,MAAM,mBAAmB,GAAG,MAAwB,MAAM,CAAC,iBAAiB,EAAE;;;;"}
1
+ {"version":3,"file":"colors.js","sources":["src/internal/colors.ts"],"sourcesContent":["import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';\nimport type { ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport type { IconColor } from '@hh.ru/magritte-ui-icon';\nimport type { LinkProps } from '@hh.ru/magritte-ui-link';\nimport type { TextStyle } from '@hh.ru/magritte-ui-typography';\n\nexport interface ChatBubbleColors {\n /** Основной текст сообщения, названия файла, текст сниппета */\n text: TextStyle;\n /** Второстепенный текст: время, размер файла */\n secondaryText: TextStyle;\n /** Акцентный текст: имя отправителя */\n accentText: TextStyle;\n /** Автор цитируемого сообщения (у бота акцентный, потому отдельно от accentText) */\n replyTitle: TextStyle;\n /** Иконка статуса, лежит на фоне баббла */\n statusIcon: IconColor;\n /** Кнопки под бабблом */\n button: Pick<ButtonProps, 'mode' | 'style'>;\n /** Ссылка-действие: «Открыть», «Загрузить» */\n link: Pick<LinkProps, 'style' | 'mode'>;\n /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */\n secondaryIcon: IconColor;\n /** Иконка файла */\n fileIcon: IconColor;\n /** Подложка под иконкой файла */\n fileIconBackground: TokenColorBackground;\n}\n\nconst COLORS: Record<ChatBubbleMode, ChatBubbleColors> = {\n incoming: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'accent',\n replyTitle: 'accent',\n statusIcon: 'secondary',\n button: { mode: 'secondary', style: 'neutral' },\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'accent',\n },\n outgoing: {\n text: 'constant',\n secondaryText: 'constant',\n accentText: 'constant',\n replyTitle: 'constant',\n statusIcon: 'constant',\n button: { mode: 'primary', style: 'accent' },\n link: { style: 'constant', mode: 'secondary' },\n secondaryIcon: 'constant',\n fileIcon: 'accent',\n fileIconBackground: 'accent-secondary',\n },\n bot: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'special',\n replyTitle: 'accent',\n statusIcon: 'special',\n button: { mode: 'secondary', style: 'special' },\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'special',\n },\n};\n\nexport const getColors = (mode: ChatBubbleMode): ChatBubbleColors => COLORS[mode];\n\n// Для подкомпонентов, которые сидят под mode провайдером\nexport const useChatBubbleColors = (): ChatBubbleColors => COLORS[useChatBubbleMode()];\n"],"names":[],"mappings":";;;AA+BA,MAAM,MAAM,GAA6C;AACrD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,WAAW;QACvB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,QAAQ;AAC/B,KAAA;AACD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;QACtB,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5C,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE;AAC9C,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,kBAAkB,EAAE,kBAAkB;AACzC,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,SAAS;AAChC,KAAA;CACJ,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,IAAoB,KAAuB,MAAM,CAAC,IAAI,EAAE;AAElF;AACO,MAAM,mBAAmB,GAAG,MAAwB,MAAM,CAAC,iBAAiB,EAAE;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-chat-bubble",
3
- "version": "2.0.4",
3
+ "version": "3.0.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -21,7 +21,7 @@
21
21
  "dependencies": {
22
22
  "@hh.ru/magritte-common-mouse": "1.2.0",
23
23
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
24
- "@hh.ru/magritte-common-use-translation": "3.4.0",
24
+ "@hh.ru/magritte-common-use-translation": "3.5.0",
25
25
  "@hh.ru/magritte-design-tokens": "25.0.1",
26
26
  "@hh.ru/magritte-ui-breakpoint": "6.1.1",
27
27
  "@hh.ru/magritte-ui-button": "7.3.3",
@@ -29,7 +29,7 @@
29
29
  "@hh.ru/magritte-ui-icon": "15.1.1",
30
30
  "@hh.ru/magritte-ui-link": "7.2.2",
31
31
  "@hh.ru/magritte-ui-loader": "4.1.2",
32
- "@hh.ru/magritte-ui-menu": "1.0.39",
32
+ "@hh.ru/magritte-ui-menu": "1.0.41",
33
33
  "@hh.ru/magritte-ui-mock-component": "1.1.7",
34
34
  "@hh.ru/magritte-ui-tooltip": "11.0.47",
35
35
  "@hh.ru/magritte-ui-typography": "5.3.12"
@@ -41,5 +41,5 @@
41
41
  "publishConfig": {
42
42
  "access": "public"
43
43
  },
44
- "gitHead": "be15632a9bfe95e7f8fc64513819bd1e3e0c0fdf"
44
+ "gitHead": "e09b73c28a17b73584ecfc0a9dc5b10141d2e305"
45
45
  }
@@ -1,5 +0,0 @@
1
- import './index.css';
2
- var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_2-0-4","chatBubble":"magritte-chat-bubble___ds9CP_2-0-4","outgoing":"magritte-outgoing___3n00o_2-0-4","bot":"magritte-bot___Z6vZA_2-0-4","row":"magritte-row___mQNnt_2-0-4","bubble":"magritte-bubble___NVuDI_2-0-4","with-tail":"magritte-with-tail___IdixJ_2-0-4","withTail":"magritte-with-tail___IdixJ_2-0-4","tail":"magritte-tail___E2hdk_2-0-4","tail-outgoing":"magritte-tail-outgoing___Pn3MI_2-0-4","tailOutgoing":"magritte-tail-outgoing___Pn3MI_2-0-4","buttons":"magritte-buttons___yQqBi_2-0-4","aside":"magritte-aside___bTex-_2-0-4","aside-revealed":"magritte-aside-revealed___CRBl7_2-0-4","asideRevealed":"magritte-aside-revealed___CRBl7_2-0-4","error-text":"magritte-error-text___1ZxWY_2-0-4","errorText":"magritte-error-text___1ZxWY_2-0-4","file":"magritte-file___k2IKy_2-0-4","file-preview":"magritte-file-preview___eJKu8_2-0-4","filePreview":"magritte-file-preview___eJKu8_2-0-4","media":"magritte-media___9jH2k_2-0-4","media-blur":"magritte-media-blur___TbiMa_2-0-4","mediaBlur":"magritte-media-blur___TbiMa_2-0-4","media-image":"magritte-media-image___G-FkF_2-0-4","mediaImage":"magritte-media-image___G-FkF_2-0-4","media-content":"magritte-media-content___n3XbD_2-0-4","mediaContent":"magritte-media-content___n3XbD_2-0-4","media-format":"magritte-media-format___AdfCK_2-0-4","mediaFormat":"magritte-media-format___AdfCK_2-0-4","media-meta":"magritte-media-meta___oSxxr_2-0-4","mediaMeta":"magritte-media-meta___oSxxr_2-0-4","reply":"magritte-reply___-QCK7_2-0-4","reply-preview":"magritte-reply-preview___qvlNT_2-0-4","replyPreview":"magritte-reply-preview___qvlNT_2-0-4","reply-body":"magritte-reply-body___f2xx7_2-0-4","replyBody":"magritte-reply-body___f2xx7_2-0-4","snippet":"magritte-snippet___8k9xb_2-0-4","meta":"magritte-meta___1qhjm_2-0-4","edited":"magritte-edited___m-zmB_2-0-4","status":"magritte-status___dHzCt_2-0-4","message-title":"magritte-message-title___dgBFk_2-0-4","messageTitle":"magritte-message-title___dgBFk_2-0-4","label":"magritte-label___i0Wyt_2-0-4","message":"magritte-message___7TEpw_2-0-4"};
3
-
4
- export { styles as s };
5
- //# sourceMappingURL=chat-bubble-DFDpgd_v.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"chat-bubble-DFDpgd_v.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}