@hh.ru/magritte-ui-chat-bubble 1.6.0 → 1.7.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.d.ts +24 -0
- package/Call.js +24 -0
- package/Call.js.map +1 -0
- package/ChatBubble.d.ts +2 -0
- package/ChatBubble.js +8 -6
- package/ChatBubble.js.map +1 -1
- package/File.d.ts +1 -1
- package/File.js +11 -4
- package/File.js.map +1 -1
- package/Label.js +1 -1
- package/Media.js +1 -1
- package/Message.js +1 -1
- package/Meta.d.ts +1 -0
- package/Meta.js +6 -4
- package/Meta.js.map +1 -1
- package/Reply.js +1 -1
- package/Snippet.js +1 -1
- package/Status.js +1 -1
- package/Tail.js +1 -1
- package/chat-bubble-LoILH1vk.js +5 -0
- package/chat-bubble-LoILH1vk.js.map +1 -0
- package/index.css +64 -61
- package/index.d.ts +1 -0
- package/index.js +7 -6
- package/index.js.map +1 -1
- package/index.mock.d.ts +2 -0
- package/index.mock.js +2 -0
- package/index.mock.js.map +1 -1
- package/internal/colors.d.ts +2 -2
- package/internal/colors.js +3 -3
- package/internal/colors.js.map +1 -1
- package/package.json +6 -6
- package/types.d.ts +3 -1
- package/chat-bubble-kJusmHys.js +0 -5
- package/chat-bubble-kJusmHys.js.map +0 -1
package/Call.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
2
|
+
import { type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';
|
|
3
|
+
export type ChatBubbleCallState = 'connected' | 'not-connected';
|
|
4
|
+
type ChatBubbleCallHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;
|
|
5
|
+
export interface ChatBubbleCallProps extends Omit<ChatBubbleCallHelper, 'children' | 'title'> {
|
|
6
|
+
/** Заголовок */
|
|
7
|
+
title?: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Строка под заголовком (например, для длительности звонка)
|
|
10
|
+
*/
|
|
11
|
+
description?: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Состояние звонка
|
|
14
|
+
* @default connected
|
|
15
|
+
*/
|
|
16
|
+
state?: ChatBubbleCallState;
|
|
17
|
+
/**
|
|
18
|
+
* Значение data-qa
|
|
19
|
+
* @default chat-bubble-call
|
|
20
|
+
*/
|
|
21
|
+
'data-qa'?: string;
|
|
22
|
+
}
|
|
23
|
+
export declare const ChatBubbleCall: import("react").ForwardRefExoticComponent<ChatBubbleCallProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;
|
|
24
|
+
export {};
|
package/Call.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
|
|
5
|
+
import { useChatBubbleColors } from './internal/colors.js';
|
|
6
|
+
import { useChatBubbleMode } from './internal/mode.js';
|
|
7
|
+
import { markMetaHost } from './internal/utils.js';
|
|
8
|
+
import { PhoneCrossFilledSize24, PhoneArrowOutFilledSize24, PhoneArrowInFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
9
|
+
import { s as styles } from './chat-bubble-LoILH1vk.js';
|
|
10
|
+
|
|
11
|
+
/** Входящий/исходящий звонок */
|
|
12
|
+
const ChatBubbleCallComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-call', title, description, meta, state = 'connected', ...props }, ref) => {
|
|
13
|
+
const mode = useChatBubbleMode();
|
|
14
|
+
const colors = useChatBubbleColors();
|
|
15
|
+
// у несостоявшегося звонка - крестик в любом режиме, иначе - стрелка по направлению
|
|
16
|
+
const connectedIcon = mode === 'outgoing' ? PhoneArrowOutFilledSize24 : PhoneArrowInFilledSize24;
|
|
17
|
+
const Icon = state === 'connected' ? connectedIcon : PhoneCrossFilledSize24;
|
|
18
|
+
return (jsxs("div", { ...props, className: styles.file, "data-qa": dataQa, ref: ref, children: [jsxs(Cell, { align: "center", horPadding: false, vertPadding: false, left: jsx(Icon, { initialColor: colors.fileIcon, backgroundStyle: colors.fileIconBackground, padding: 12, borderRadius: 8 }), children: [jsx(CellText, { type: "title", style: colors.text, maxLines: 1, "data-qa": "chat-bubble-call-name", children: title }), description && (jsx(CellText, { type: "subtitle", style: state === 'not-connected' && mode === 'incoming' ? 'negative' : colors.secondaryText, maxLines: 1, "data-qa": "chat-bubble-call-description", children: description }))] }), meta] }));
|
|
19
|
+
});
|
|
20
|
+
ChatBubbleCallComponent.displayName = 'ChatBubbleCall';
|
|
21
|
+
const ChatBubbleCall = markMetaHost(ChatBubbleCallComponent);
|
|
22
|
+
|
|
23
|
+
export { ChatBubbleCall };
|
|
24
|
+
//# sourceMappingURL=Call.js.map
|
package/Call.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Call.js","sources":["src/Call.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport {\n PhoneArrowInFilledSize24,\n PhoneArrowOutFilledSize24,\n PhoneCrossFilledSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\n\nimport styles from './chat-bubble.less';\n\nexport type ChatBubbleCallState = 'connected' | 'not-connected';\n\ntype ChatBubbleCallHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;\n\nexport interface ChatBubbleCallProps extends Omit<ChatBubbleCallHelper, 'children' | 'title'> {\n /** Заголовок */\n title?: ReactNode;\n /**\n * Строка под заголовком (например, для длительности звонка)\n */\n description?: ReactNode;\n /**\n * Состояние звонка\n * @default connected\n */\n state?: ChatBubbleCallState;\n /**\n * Значение data-qa\n * @default chat-bubble-call\n */\n 'data-qa'?: string;\n}\n\n/** Входящий/исходящий звонок */\nconst ChatBubbleCallComponent = forwardRef<HTMLDivElement, ChatBubbleCallProps>(\n ({ 'data-qa': dataQa = 'chat-bubble-call', title, description, meta, state = 'connected', ...props }, ref) => {\n const mode = useChatBubbleMode();\n const colors = useChatBubbleColors();\n // у несостоявшегося звонка - крестик в любом режиме, иначе - стрелка по направлению\n const connectedIcon = mode === 'outgoing' ? PhoneArrowOutFilledSize24 : PhoneArrowInFilledSize24;\n const Icon = state === 'connected' ? connectedIcon : PhoneCrossFilledSize24;\n\n return (\n <div {...props} className={styles.file} data-qa={dataQa} ref={ref}>\n <Cell\n align=\"center\"\n horPadding={false}\n vertPadding={false}\n left={\n <Icon\n initialColor={colors.fileIcon}\n backgroundStyle={colors.fileIconBackground}\n padding={12}\n borderRadius={8}\n />\n }\n >\n <CellText type=\"title\" style={colors.text} maxLines={1} data-qa=\"chat-bubble-call-name\">\n {title}\n </CellText>\n {description && (\n <CellText\n type=\"subtitle\"\n style={state === 'not-connected' && mode === 'incoming' ? 'negative' : colors.secondaryText}\n maxLines={1}\n data-qa=\"chat-bubble-call-description\"\n >\n {description}\n </CellText>\n )}\n </Cell>\n {meta}\n </div>\n );\n }\n);\n\nChatBubbleCallComponent.displayName = 'ChatBubbleCall';\n\nexport const ChatBubbleCall = markMetaHost(ChatBubbleCallComponent);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAqCA;AACA,MAAM,uBAAuB,GAAG,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,kBAAkB,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,GAAG,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACzG,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;;AAErC,IAAA,MAAM,aAAa,GAAG,IAAI,KAAK,UAAU,GAAG,yBAAyB,GAAG,wBAAwB,CAAC;AACjG,IAAA,MAAM,IAAI,GAAG,KAAK,KAAK,WAAW,GAAG,aAAa,GAAG,sBAAsB,CAAC;IAE5E,QACIA,IAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAW,SAAA,EAAA,MAAM,EAAE,GAAG,EAAE,GAAG,EAC7D,QAAA,EAAA,CAAAA,IAAA,CAAC,IAAI,EAAA,EACD,KAAK,EAAC,QAAQ,EACd,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,IAAI,EACAC,GAAC,CAAA,IAAI,EACD,EAAA,YAAY,EAAE,MAAM,CAAC,QAAQ,EAC7B,eAAe,EAAE,MAAM,CAAC,kBAAkB,EAC1C,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,CAAC,EACjB,CAAA,EAAA,QAAA,EAAA,CAGNA,GAAC,CAAA,QAAQ,EAAC,EAAA,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAU,SAAA,EAAA,uBAAuB,EAClF,QAAA,EAAA,KAAK,EACC,CAAA,EACV,WAAW,KACRA,GAAA,CAAC,QAAQ,EAAA,EACL,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,KAAK,eAAe,IAAI,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC,aAAa,EAC3F,QAAQ,EAAE,CAAC,EAAA,SAAA,EACH,8BAA8B,EAAA,QAAA,EAErC,WAAW,EAAA,CACL,CACd,CAAA,EAAA,CACE,EACN,IAAI,CACH,EAAA,CAAA,EACR;AACN,CAAC,CACJ,CAAC;AAEF,uBAAuB,CAAC,WAAW,GAAG,gBAAgB,CAAC;MAE1C,cAAc,GAAG,YAAY,CAAC,uBAAuB;;;;"}
|
package/ChatBubble.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ChatBubbleCall } from '@hh.ru/magritte-ui-chat-bubble/Call';
|
|
1
2
|
import { ChatBubbleErrorAction } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';
|
|
2
3
|
import { ChatBubbleFile } from '@hh.ru/magritte-ui-chat-bubble/File';
|
|
3
4
|
import { ChatBubbleLabel } from '@hh.ru/magritte-ui-chat-bubble/Label';
|
|
@@ -8,6 +9,7 @@ import { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';
|
|
|
8
9
|
import { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';
|
|
9
10
|
import type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
|
|
10
11
|
interface ChatBubbleComponents {
|
|
12
|
+
Call: typeof ChatBubbleCall;
|
|
11
13
|
ErrorAction: typeof ChatBubbleErrorAction;
|
|
12
14
|
File: typeof ChatBubbleFile;
|
|
13
15
|
Label: typeof ChatBubbleLabel;
|
package/ChatBubble.js
CHANGED
|
@@ -3,6 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef, useState, useCallback, useRef, useMemo, cloneElement } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { ButtonDefaultPropsContext } from '@hh.ru/magritte-ui-button';
|
|
6
|
+
import { ChatBubbleCall } from './Call.js';
|
|
6
7
|
import { ChatBubbleErrorAction } from './ErrorAction.js';
|
|
7
8
|
import { ChatBubbleFile } from './File.js';
|
|
8
9
|
import { ChatBubbleLabel } from './Label.js';
|
|
@@ -21,36 +22,37 @@ import { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';
|
|
|
21
22
|
import { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
22
23
|
import { Menu } from '@hh.ru/magritte-ui-menu';
|
|
23
24
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
24
|
-
import { s as styles } from './chat-bubble-
|
|
25
|
+
import { s as styles } from './chat-bubble-LoILH1vk.js';
|
|
25
26
|
import '@hh.ru/magritte-ui-cell';
|
|
26
27
|
import '@hh.ru/magritte-ui-link';
|
|
27
28
|
import '@hh.ru/magritte-ui-loader';
|
|
28
|
-
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
29
29
|
import '@hh.ru/magritte-common-use-translation';
|
|
30
|
+
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
30
31
|
import '@hh.ru/magritte-ui-tooltip';
|
|
31
32
|
|
|
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) => {
|
|
33
|
+
const ChatBubble = forwardRef(({ actions, buttons, children, header, edited, errorActions, mode = 'incoming', showTail = false, status, time, error = false, errorText, 'data-qa': dataQa = 'chat-bubble', className, }, ref) => {
|
|
33
34
|
const [menuVisible, setMenuVisible] = useState(false);
|
|
34
35
|
const closeErrorMenu = useCallback(() => setMenuVisible(false), []);
|
|
35
36
|
const activatorMenuRef = useRef(null);
|
|
36
37
|
const colors = getColors(mode);
|
|
37
38
|
const actionsIconProps = useMemo(() => ({ padding: 8, initialColor: colors.actionsIcon }), [colors]);
|
|
38
|
-
const buttonsProps = useMemo(() => ({ size: 'small',
|
|
39
|
+
const buttonsProps = useMemo(() => ({ size: 'small', stretched: true, ...colors.button }), [colors]);
|
|
39
40
|
/**
|
|
40
41
|
* Время отдаём последнему элементу контента
|
|
41
42
|
* Позиция времени меняется, в зависимости от компонента
|
|
42
43
|
* Если последний ребенок не может отрисовать, вставим meta в самый конец
|
|
43
44
|
*/
|
|
44
|
-
const meta = jsx(Meta, { mode: mode, status: status, time: time });
|
|
45
|
+
const meta = jsx(Meta, { mode: mode, status: status, time: time, edited: edited });
|
|
45
46
|
const items = flattenFragments(children);
|
|
46
47
|
const lastIndex = items.length - 1;
|
|
47
48
|
const metaHosted = isMetaHost(items[lastIndex]);
|
|
48
49
|
const content = items.map((child, index) => index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child);
|
|
49
50
|
return (jsx(ChatBubbleModeProvider, { value: mode, children: jsxs("div", { className: classnames(className, styles.chatBubble, styles[mode], {
|
|
50
51
|
[styles.withTail]: showTail,
|
|
51
|
-
}), "data-qa": dataQa, ref: ref, children: [jsxs("div", { className: styles.row, children: [jsxs("div", { className: styles.bubble, children: [header, content, !metaHosted && meta, showTail && jsx(Tail, {})] }), mode === 'outgoing' && error && (jsxs("div", { children: [jsx(ExclamationCircleFilledSize24, { ref: activatorMenuRef, initialColor: "negative", onClick: errorActions ? () => setMenuVisible((visible) => !visible) : undefined, "data-qa": "chat-bubble-error-button", "aria-haspopup": errorActions ? 'menu' : undefined, "aria-expanded": errorActions ? menuVisible : undefined }), errorActions && (jsx(Menu, { activatorRef: activatorMenuRef, onClose: closeErrorMenu, placement: "bottom-right", visible: menuVisible, children: jsx(ChatBubbleErrorMenuProvider, { value: closeErrorMenu, children: errorActions }) }))] }))] }), mode === 'outgoing' && error && errorText && (jsx("div", { className: styles.errorText, "data-qa": "chat-bubble-error-text", children: jsx(Text, { typography: "label-4-regular", style: "negative", maxLines: 2, children: errorText }) })), buttons && (
|
|
52
|
+
}), "data-qa": dataQa, ref: ref, children: [jsxs("div", { className: styles.row, children: [jsxs("div", { className: styles.bubble, children: [header, content, !metaHosted && meta, showTail && jsx(Tail, {})] }), mode === 'outgoing' && error && (jsxs("div", { children: [jsx(ExclamationCircleFilledSize24, { ref: activatorMenuRef, initialColor: "negative", onClick: errorActions ? () => setMenuVisible((visible) => !visible) : undefined, "data-qa": "chat-bubble-error-button", "aria-haspopup": errorActions ? 'menu' : undefined, "aria-expanded": errorActions ? menuVisible : undefined }), errorActions && (jsx(Menu, { activatorRef: activatorMenuRef, onClose: closeErrorMenu, placement: "bottom-right", visible: menuVisible, children: jsx(ChatBubbleErrorMenuProvider, { value: closeErrorMenu, children: errorActions }) }))] }))] }), mode === 'outgoing' && error && errorText && (jsx("div", { className: styles.errorText, "data-qa": "chat-bubble-error-text", children: jsx(Text, { typography: "label-4-regular", style: "negative", maxLines: 2, children: errorText }) })), buttons && (jsx(ButtonDefaultPropsContext, { props: buttonsProps, children: jsx("div", { className: styles.buttons, "data-qa": "chat-bubble-buttons", children: buttons }) })), actions && (jsx(IconDefaultPropsContext, { props: actionsIconProps, children: jsx("div", { className: styles.actions, "data-qa": "chat-bubble-actions", children: actions }) }))] }) }));
|
|
52
53
|
});
|
|
53
54
|
ChatBubble.displayName = 'ChatBubble';
|
|
55
|
+
ChatBubble.Call = ChatBubbleCall;
|
|
54
56
|
ChatBubble.ErrorAction = ChatBubbleErrorAction;
|
|
55
57
|
ChatBubble.File = ChatBubbleFile;
|
|
56
58
|
ChatBubble.Label = ChatBubbleLabel;
|
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 { Meta } from '@hh.ru/magritte-ui-chat-bubble/Meta';\nimport { ChatBubbleReply } from '@hh.ru/magritte-ui-chat-bubble/Reply';\nimport { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\nimport { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';\nimport { Tail } from '@hh.ru/magritte-ui-chat-bubble/Tail';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { ChatBubbleErrorMenuProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { ChatBubbleModeProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { isMetaHost, flattenFragments } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { IconDefaultPropsContext, type IconProps } from '@hh.ru/magritte-ui-icon';\nimport { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Menu } from '@hh.ru/magritte-ui-menu';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface ChatBubbleComponents {\n ErrorAction: typeof ChatBubbleErrorAction;\n File: typeof ChatBubbleFile;\n Label: typeof ChatBubbleLabel;\n Media: typeof ChatBubbleMedia;\n Message: typeof ChatBubbleMessage;\n Reply: typeof ChatBubbleReply;\n Snippet: typeof ChatBubbleSnippet;\n Status: typeof ChatBubbleStatus;\n}\n\nexport const ChatBubble = forwardRef<HTMLDivElement, ChatBubbleProps>(\n (\n {\n actions,\n buttons,\n children,\n header,\n errorActions,\n mode = 'incoming',\n showTail = false,\n status,\n time,\n error = false,\n errorText,\n 'data-qa': dataQa = 'chat-bubble',\n className,\n },\n ref\n ) => {\n const [menuVisible, setMenuVisible] = useState(false);\n const closeErrorMenu = useCallback(() => setMenuVisible(false), []);\n const activatorMenuRef = useRef<SVGElement>(null);\n const colors = getColors(mode);\n const actionsIconProps: Partial<IconProps> = useMemo(\n () => ({ padding: 8, initialColor: colors.actionsIcon }),\n [colors]\n );\n const buttonsProps: Partial<ButtonProps> = useMemo(\n () => ({ size: 'small', mode: 'secondary', style: colors.button, stretched: true }),\n [colors]\n );\n /**\n * Время отдаём последнему элементу контента\n * Позиция времени меняется, в зависимости от компонента\n * Если последний ребенок не может отрисовать, вставим meta в самый конец\n */\n const meta = <Meta mode={mode} status={status} time={time} />;\n const items = flattenFragments(children);\n const lastIndex = items.length - 1;\n const metaHosted = isMetaHost(items[lastIndex]);\n const content = items.map((child, index) =>\n index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child\n );\n return (\n <ChatBubbleModeProvider value={mode}>\n <div\n className={classnames(className, styles.chatBubble, styles[mode], {\n [styles.withTail]: showTail,\n })}\n data-qa={dataQa}\n ref={ref}\n >\n <div className={styles.row}>\n <div className={styles.bubble}>\n {header}\n {content}\n {!metaHosted && meta}\n {showTail && <Tail />}\n </div>\n {mode === 'outgoing' && error && (\n <div>\n <ExclamationCircleFilledSize24\n ref={activatorMenuRef}\n initialColor=\"negative\"\n onClick={errorActions ? () => setMenuVisible((visible) => !visible) : undefined}\n data-qa=\"chat-bubble-error-button\"\n aria-haspopup={errorActions ? 'menu' : undefined}\n aria-expanded={errorActions ? menuVisible : undefined}\n />\n {errorActions && (\n <Menu\n activatorRef={activatorMenuRef}\n onClose={closeErrorMenu}\n placement=\"bottom-right\"\n visible={menuVisible}\n >\n <ChatBubbleErrorMenuProvider value={closeErrorMenu}>\n {errorActions}\n </ChatBubbleErrorMenuProvider>\n </Menu>\n )}\n </div>\n )}\n </div>\n {mode === 'outgoing' && error && errorText && (\n <div className={styles.errorText} data-qa=\"chat-bubble-error-text\">\n <Text typography=\"label-4-regular\" style=\"negative\" maxLines={2}>\n {errorText}\n </Text>\n </div>\n )}\n {buttons && (mode === 'bot' || mode === 'incoming') && (\n <ButtonDefaultPropsContext props={buttonsProps}>\n <div className={styles.buttons} data-qa=\"chat-bubble-buttons\">\n {buttons}\n </div>\n </ButtonDefaultPropsContext>\n )}\n {actions && (\n <IconDefaultPropsContext props={actionsIconProps}>\n <div className={styles.actions} data-qa=\"chat-bubble-actions\">\n {actions}\n </div>\n </IconDefaultPropsContext>\n )}\n </div>\n </ChatBubbleModeProvider>\n );\n }\n) as React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;\n\nChatBubble.displayName = 'ChatBubble';\n\nChatBubble.ErrorAction = ChatBubbleErrorAction;\nChatBubble.File = ChatBubbleFile;\nChatBubble.Label = ChatBubbleLabel;\nChatBubble.Media = ChatBubbleMedia;\nChatBubble.Message = ChatBubbleMessage;\nChatBubble.Reply = ChatBubbleReply;\nChatBubble.Snippet = ChatBubbleSnippet;\nChatBubble.Status = ChatBubbleStatus;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChatBubble.js","sources":["src/ChatBubble.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useCallback, useState, useMemo, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { ButtonDefaultPropsContext, type ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { ChatBubbleCall } from '@hh.ru/magritte-ui-chat-bubble/Call';\nimport { ChatBubbleErrorAction } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';\nimport { ChatBubbleFile } from '@hh.ru/magritte-ui-chat-bubble/File';\nimport { ChatBubbleLabel } from '@hh.ru/magritte-ui-chat-bubble/Label';\nimport { ChatBubbleMedia } from '@hh.ru/magritte-ui-chat-bubble/Media';\nimport { ChatBubbleMessage } from '@hh.ru/magritte-ui-chat-bubble/Message';\nimport { Meta } from '@hh.ru/magritte-ui-chat-bubble/Meta';\nimport { ChatBubbleReply } from '@hh.ru/magritte-ui-chat-bubble/Reply';\nimport { ChatBubbleSnippet } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\nimport { ChatBubbleStatus } from '@hh.ru/magritte-ui-chat-bubble/Status';\nimport { Tail } from '@hh.ru/magritte-ui-chat-bubble/Tail';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { ChatBubbleErrorMenuProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { ChatBubbleModeProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { isMetaHost, flattenFragments } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { IconDefaultPropsContext, type IconProps } from '@hh.ru/magritte-ui-icon';\nimport { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Menu } from '@hh.ru/magritte-ui-menu';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface ChatBubbleComponents {\n Call: typeof ChatBubbleCall;\n ErrorAction: typeof ChatBubbleErrorAction;\n File: typeof ChatBubbleFile;\n Label: typeof ChatBubbleLabel;\n Media: typeof ChatBubbleMedia;\n Message: typeof ChatBubbleMessage;\n Reply: typeof ChatBubbleReply;\n Snippet: typeof ChatBubbleSnippet;\n Status: typeof ChatBubbleStatus;\n}\n\nexport const ChatBubble = forwardRef<HTMLDivElement, ChatBubbleProps>(\n (\n {\n actions,\n buttons,\n children,\n header,\n edited,\n errorActions,\n mode = 'incoming',\n showTail = false,\n status,\n time,\n error = false,\n errorText,\n 'data-qa': dataQa = 'chat-bubble',\n className,\n },\n ref\n ) => {\n const [menuVisible, setMenuVisible] = useState(false);\n const closeErrorMenu = useCallback(() => setMenuVisible(false), []);\n const activatorMenuRef = useRef<SVGElement>(null);\n const colors = getColors(mode);\n const actionsIconProps: Partial<IconProps> = useMemo(\n () => ({ padding: 8, initialColor: colors.actionsIcon }),\n [colors]\n );\n const buttonsProps: Partial<ButtonProps> = useMemo(\n () => ({ size: 'small', stretched: true, ...colors.button }),\n [colors]\n );\n /**\n * Время отдаём последнему элементу контента\n * Позиция времени меняется, в зависимости от компонента\n * Если последний ребенок не может отрисовать, вставим meta в самый конец\n */\n const meta = <Meta mode={mode} status={status} time={time} edited={edited} />;\n const items = flattenFragments(children);\n const lastIndex = items.length - 1;\n const metaHosted = isMetaHost(items[lastIndex]);\n const content = items.map((child, index) =>\n index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child\n );\n return (\n <ChatBubbleModeProvider value={mode}>\n <div\n className={classnames(className, styles.chatBubble, styles[mode], {\n [styles.withTail]: showTail,\n })}\n data-qa={dataQa}\n ref={ref}\n >\n <div className={styles.row}>\n <div className={styles.bubble}>\n {header}\n {content}\n {!metaHosted && meta}\n {showTail && <Tail />}\n </div>\n {mode === 'outgoing' && error && (\n <div>\n <ExclamationCircleFilledSize24\n ref={activatorMenuRef}\n initialColor=\"negative\"\n onClick={errorActions ? () => setMenuVisible((visible) => !visible) : undefined}\n data-qa=\"chat-bubble-error-button\"\n aria-haspopup={errorActions ? 'menu' : undefined}\n aria-expanded={errorActions ? menuVisible : undefined}\n />\n {errorActions && (\n <Menu\n activatorRef={activatorMenuRef}\n onClose={closeErrorMenu}\n placement=\"bottom-right\"\n visible={menuVisible}\n >\n <ChatBubbleErrorMenuProvider value={closeErrorMenu}>\n {errorActions}\n </ChatBubbleErrorMenuProvider>\n </Menu>\n )}\n </div>\n )}\n </div>\n {mode === 'outgoing' && error && errorText && (\n <div className={styles.errorText} data-qa=\"chat-bubble-error-text\">\n <Text typography=\"label-4-regular\" style=\"negative\" maxLines={2}>\n {errorText}\n </Text>\n </div>\n )}\n {buttons && (\n <ButtonDefaultPropsContext props={buttonsProps}>\n <div className={styles.buttons} data-qa=\"chat-bubble-buttons\">\n {buttons}\n </div>\n </ButtonDefaultPropsContext>\n )}\n {actions && (\n <IconDefaultPropsContext props={actionsIconProps}>\n <div className={styles.actions} data-qa=\"chat-bubble-actions\">\n {actions}\n </div>\n </IconDefaultPropsContext>\n )}\n </div>\n </ChatBubbleModeProvider>\n );\n }\n) as React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;\n\nChatBubble.displayName = 'ChatBubble';\n\nChatBubble.Call = ChatBubbleCall;\nChatBubble.ErrorAction = ChatBubbleErrorAction;\nChatBubble.File = ChatBubbleFile;\nChatBubble.Label = ChatBubbleLabel;\nChatBubble.Media = ChatBubbleMedia;\nChatBubble.Message = ChatBubbleMessage;\nChatBubble.Reply = ChatBubbleReply;\nChatBubble.Snippet = ChatBubbleSnippet;\nChatBubble.Status = ChatBubbleStatus;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/File.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
2
2
|
import { type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';
|
|
3
|
-
export type ChatBubbleFileState = 'unloaded' | 'loading' | 'preview' | 'loaded';
|
|
3
|
+
export type ChatBubbleFileState = 'unloaded' | 'loading' | 'preview' | 'loaded' | 'invalid';
|
|
4
4
|
type ChatBubbleFileHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;
|
|
5
5
|
export interface ChatBubbleFileProps extends Omit<ChatBubbleFileHelper, 'children'> {
|
|
6
6
|
/** Имя файла */
|
package/File.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import './index.css';
|
|
2
|
-
import {
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef, useMemo } from 'react';
|
|
4
4
|
import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
|
|
5
5
|
import { useChatBubbleColors } from './internal/colors.js';
|
|
6
6
|
import { markMetaHost } from './internal/utils.js';
|
|
7
|
-
import { ArrowDownLineOutlinedSize24, DocumentOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
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-
|
|
10
|
+
import { s as styles } from './chat-bubble-LoILH1vk.js';
|
|
11
11
|
import './internal/mode.js';
|
|
12
12
|
|
|
13
13
|
/** Прикреплённый файл */
|
|
@@ -17,7 +17,14 @@ const ChatBubbleFileComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-f
|
|
|
17
17
|
// пока файл не скачан, на иконке стрелка
|
|
18
18
|
const Icon = state === 'unloaded' || isLoading ? ArrowDownLineOutlinedSize24 : DocumentOutlinedSize24;
|
|
19
19
|
const defaultLinkProps = useMemo(() => ({ ...colors.link, typography: 'label-3-regular', inline: true }), [colors]);
|
|
20
|
-
|
|
20
|
+
let leftSlot;
|
|
21
|
+
if (isLoading) {
|
|
22
|
+
leftSlot = jsx(Loader, { size: 16, color: colors.secondaryIcon });
|
|
23
|
+
}
|
|
24
|
+
else if (state === 'invalid') {
|
|
25
|
+
leftSlot = jsx(ExclamationTriangleOutlinedSize16, { initialColor: "negative" });
|
|
26
|
+
}
|
|
27
|
+
return (jsxs("div", { ...props, className: styles.file, "data-qa": dataQa, ref: ref, children: [jsxs(Cell, { align: "center", horPadding: false, vertPadding: false, left: state === 'preview' && preview ? (jsx("img", { className: styles.filePreview, src: preview, alt: previewAlt ?? '' })) : (jsx(Icon, { initialColor: colors.fileIcon, backgroundStyle: colors.fileIconBackground, padding: 12, borderRadius: 8 })), children: [jsx(CellText, { type: "title", style: colors.text, maxLines: 1, "data-qa": "chat-bubble-file-name", children: name }), description && (jsx(CellText, { type: "subtitle", style: colors.secondaryText, maxLines: 1, left: leftSlot, "data-qa": "chat-bubble-file-description", children: jsx(LinkDefaultPropsContext, { props: defaultLinkProps, children: description }) }))] }), meta] }));
|
|
21
28
|
});
|
|
22
29
|
ChatBubbleFileComponent.displayName = 'ChatBubbleFile';
|
|
23
30
|
const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);
|
package/File.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.js","sources":["src/File.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, useMemo } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport {
|
|
1
|
+
{"version":3,"file":"File.js","sources":["src/File.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, useMemo } from 'react';\n\nimport { Cell, CellText } from '@hh.ru/magritte-ui-cell';\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { markMetaHost, type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport {\n ArrowDownLineOutlinedSize24,\n DocumentOutlinedSize24,\n ExclamationTriangleOutlinedSize16,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { LinkDefaultPropsContext } from '@hh.ru/magritte-ui-link';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\n\nimport styles from './chat-bubble.less';\n\nexport type ChatBubbleFileState = 'unloaded' | 'loading' | 'preview' | 'loaded' | 'invalid';\n\ntype ChatBubbleFileHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;\n\nexport interface ChatBubbleFileProps extends Omit<ChatBubbleFileHelper, 'children'> {\n /** Имя файла */\n name?: ReactNode;\n /**\n * Строка под именем (например, для размера файла и действия с ним)\n */\n description?: ReactNode;\n /**\n * Состояние файла\n * @default loaded\n */\n state?: ChatBubbleFileState;\n /** Url превью файла, показывается в состоянии `preview` */\n preview?: string;\n /** Alt превью файла */\n previewAlt?: string;\n /**\n * Значение data-qa\n * @default chat-bubble-file\n */\n 'data-qa'?: string;\n}\n\n/** Прикреплённый файл */\nconst ChatBubbleFileComponent = forwardRef<HTMLDivElement, ChatBubbleFileProps>(\n (\n {\n 'data-qa': dataQa = 'chat-bubble-file',\n description,\n meta,\n name,\n preview,\n state = 'loaded',\n previewAlt,\n ...props\n },\n ref\n ) => {\n const colors = useChatBubbleColors();\n const isLoading = state === 'loading';\n // пока файл не скачан, на иконке стрелка\n const Icon = state === 'unloaded' || isLoading ? ArrowDownLineOutlinedSize24 : DocumentOutlinedSize24;\n\n const defaultLinkProps = useMemo(\n () => ({ ...colors.link, typography: 'label-3-regular' as const, inline: true }),\n [colors]\n );\n\n let leftSlot: ReactNode;\n if (isLoading) {\n leftSlot = <Loader size={16} color={colors.secondaryIcon} />;\n } else if (state === 'invalid') {\n leftSlot = <ExclamationTriangleOutlinedSize16 initialColor=\"negative\" />;\n }\n\n return (\n <div {...props} className={styles.file} data-qa={dataQa} ref={ref}>\n <Cell\n align=\"center\"\n horPadding={false}\n vertPadding={false}\n left={\n state === 'preview' && preview ? (\n <img className={styles.filePreview} src={preview} alt={previewAlt ?? ''} />\n ) : (\n <Icon\n initialColor={colors.fileIcon}\n backgroundStyle={colors.fileIconBackground}\n padding={12}\n borderRadius={8}\n />\n )\n }\n >\n <CellText type=\"title\" style={colors.text} maxLines={1} data-qa=\"chat-bubble-file-name\">\n {name}\n </CellText>\n {description && (\n <CellText\n type=\"subtitle\"\n style={colors.secondaryText}\n maxLines={1}\n left={leftSlot}\n data-qa=\"chat-bubble-file-description\"\n >\n <LinkDefaultPropsContext props={defaultLinkProps}>{description}</LinkDefaultPropsContext>\n </CellText>\n )}\n </Cell>\n {meta}\n </div>\n );\n }\n);\n\nChatBubbleFileComponent.displayName = 'ChatBubbleFile';\n\nexport const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AA0CA;AACA,MAAM,uBAAuB,GAAG,UAAU,CACtC,CACI,EACI,SAAS,EAAE,MAAM,GAAG,kBAAkB,EACtC,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,GAAG,QAAQ,EAChB,UAAU,EACV,GAAG,KAAK,EACX,EACD,GAAG,KACH;AACA,IAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AACrC,IAAA,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;;AAEtC,IAAA,MAAM,IAAI,GAAG,KAAK,KAAK,UAAU,IAAI,SAAS,GAAG,2BAA2B,GAAG,sBAAsB,CAAC;AAEtG,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAC5B,OAAO,EAAE,GAAG,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,iBAA0B,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAChF,CAAC,MAAM,CAAC,CACX,CAAC;AAEF,IAAA,IAAI,QAAmB,CAAC;IACxB,IAAI,SAAS,EAAE;AACX,QAAA,QAAQ,GAAGA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,aAAa,GAAI,CAAC;KAChE;AAAM,SAAA,IAAI,KAAK,KAAK,SAAS,EAAE;QAC5B,QAAQ,GAAGA,IAAC,iCAAiC,EAAA,EAAC,YAAY,EAAC,UAAU,GAAG,CAAC;KAC5E;AAED,IAAA,QACIC,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,aAAW,MAAM,EAAE,GAAG,EAAE,GAAG,EAC7D,QAAA,EAAA,CAAAA,IAAA,CAAC,IAAI,EAAA,EACD,KAAK,EAAC,QAAQ,EACd,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,IAAI,EACA,KAAK,KAAK,SAAS,IAAI,OAAO,IAC1BD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,IAAI,EAAE,GAAI,KAE3EA,GAAC,CAAA,IAAI,EACD,EAAA,YAAY,EAAE,MAAM,CAAC,QAAQ,EAC7B,eAAe,EAAE,MAAM,CAAC,kBAAkB,EAC1C,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,CAAC,EAAA,CACjB,CACL,EAGL,QAAA,EAAA,CAAAA,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAU,SAAA,EAAA,uBAAuB,YAClF,IAAI,EAAA,CACE,EACV,WAAW,KACRA,GAAA,CAAC,QAAQ,EAAA,EACL,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,MAAM,CAAC,aAAa,EAC3B,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,QAAQ,EAAA,SAAA,EACN,8BAA8B,EAAA,QAAA,EAEtCA,IAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,gBAAgB,EAAG,QAAA,EAAA,WAAW,EAA2B,CAAA,EAAA,CAClF,CACd,CACE,EAAA,CAAA,EACN,IAAI,CAAA,EAAA,CACH,EACR;AACN,CAAC,CACJ,CAAC;AAEF,uBAAuB,CAAC,WAAW,GAAG,gBAAgB,CAAC;MAE1C,cAAc,GAAG,YAAY,CAAC,uBAAuB;;;;"}
|
package/Label.js
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-
|
|
6
|
+
import { s as styles } from './chat-bubble-LoILH1vk.js';
|
|
7
7
|
import './internal/mode.js';
|
|
8
8
|
|
|
9
9
|
/**
|
package/Media.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { markMetaHost } from './internal/utils.js';
|
|
5
5
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
6
|
-
import { s as styles } from './chat-bubble-
|
|
6
|
+
import { s as styles } from './chat-bubble-LoILH1vk.js';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Медиа в сообщении
|
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-
|
|
7
|
+
import { s as styles } from './chat-bubble-LoILH1vk.js';
|
|
8
8
|
import './internal/mode.js';
|
|
9
9
|
|
|
10
10
|
/**
|
package/Meta.d.ts
CHANGED
package/Meta.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useTranslation } from '@hh.ru/magritte-common-use-translation';
|
|
3
4
|
import { getColors } from './internal/colors.js';
|
|
4
5
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
5
|
-
import { s as styles } from './chat-bubble-
|
|
6
|
+
import { s as styles } from './chat-bubble-LoILH1vk.js';
|
|
6
7
|
import './internal/mode.js';
|
|
7
8
|
import 'react';
|
|
8
9
|
|
|
@@ -10,12 +11,13 @@ import 'react';
|
|
|
10
11
|
* Время и статус сообщения
|
|
11
12
|
* Рендерится внутри последнего элемента контента.
|
|
12
13
|
* */
|
|
13
|
-
const Meta = ({ mode, status, time }) => {
|
|
14
|
+
const Meta = ({ edited, mode, status, time }) => {
|
|
14
15
|
const visibleStatus = mode === 'incoming' ? undefined : status;
|
|
15
|
-
|
|
16
|
+
const editedLabel = useTranslation('ChatBubble', 'edited');
|
|
17
|
+
if (!time && !visibleStatus && !edited) {
|
|
16
18
|
return null;
|
|
17
19
|
}
|
|
18
|
-
return (jsxs("span", { className: styles.meta, "data-qa": "chat-bubble-meta", children: [time && (
|
|
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
21
|
};
|
|
20
22
|
|
|
21
23
|
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 { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface MetaProps {\n mode: ChatBubbleMode;\n status?: ReactNode;\n time?: ReactNode;\n}\n\n/**\n * Время и статус сообщения\n * Рендерится внутри последнего элемента контента.\n * */\nexport const Meta: FC<MetaProps> = ({ mode, status, time }) => {\n const visibleStatus = mode === 'incoming' ? undefined : status;\n\n if (!time && !visibleStatus) {\n return null;\n }\n\n return (\n <span className={styles.meta} data-qa=\"chat-bubble-meta\">\n {time && (\n <Text Element=\"span\" typography=\"label-4-regular\" style={getColors(mode).secondaryText}>\n {time}\n </Text>\n )}\n {visibleStatus}\n </span>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"
|
|
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;;;;"}
|
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-
|
|
6
|
+
import { s as styles } from './chat-bubble-LoILH1vk.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-
|
|
6
|
+
import { s as styles } from './chat-bubble-LoILH1vk.js';
|
|
7
7
|
import './internal/mode.js';
|
|
8
8
|
|
|
9
9
|
/**
|
package/Status.js
CHANGED
|
@@ -7,7 +7,7 @@ import { getColors } from './internal/colors.js';
|
|
|
7
7
|
import { useChatBubbleMode } from './internal/mode.js';
|
|
8
8
|
import { EyeOutlinedSize16, ClockOutlinedSize16, CheckOutlinedSize16, CheckDoubleOutlinedSize16 } from '@hh.ru/magritte-ui-icon/icon';
|
|
9
9
|
import { TooltipHover } from '@hh.ru/magritte-ui-tooltip';
|
|
10
|
-
import { s as styles } from './chat-bubble-
|
|
10
|
+
import { s as styles } from './chat-bubble-LoILH1vk.js';
|
|
11
11
|
|
|
12
12
|
const ICON = {
|
|
13
13
|
sending: ClockOutlinedSize16,
|
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-
|
|
5
|
+
import { s as styles } from './chat-bubble-LoILH1vk.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_1-7-0","chatBubble":"magritte-chat-bubble___ds9CP_1-7-0","outgoing":"magritte-outgoing___3n00o_1-7-0","bot":"magritte-bot___Z6vZA_1-7-0","row":"magritte-row___mQNnt_1-7-0","bubble":"magritte-bubble___NVuDI_1-7-0","with-tail":"magritte-with-tail___IdixJ_1-7-0","withTail":"magritte-with-tail___IdixJ_1-7-0","tail":"magritte-tail___E2hdk_1-7-0","tail-outgoing":"magritte-tail-outgoing___Pn3MI_1-7-0","tailOutgoing":"magritte-tail-outgoing___Pn3MI_1-7-0","buttons":"magritte-buttons___yQqBi_1-7-0","actions":"magritte-actions___I5GSz_1-7-0","error-text":"magritte-error-text___1ZxWY_1-7-0","errorText":"magritte-error-text___1ZxWY_1-7-0","file":"magritte-file___k2IKy_1-7-0","file-preview":"magritte-file-preview___eJKu8_1-7-0","filePreview":"magritte-file-preview___eJKu8_1-7-0","media":"magritte-media___9jH2k_1-7-0","media-blur":"magritte-media-blur___TbiMa_1-7-0","mediaBlur":"magritte-media-blur___TbiMa_1-7-0","media-image":"magritte-media-image___G-FkF_1-7-0","mediaImage":"magritte-media-image___G-FkF_1-7-0","media-content":"magritte-media-content___n3XbD_1-7-0","mediaContent":"magritte-media-content___n3XbD_1-7-0","media-format":"magritte-media-format___AdfCK_1-7-0","mediaFormat":"magritte-media-format___AdfCK_1-7-0","media-meta":"magritte-media-meta___oSxxr_1-7-0","mediaMeta":"magritte-media-meta___oSxxr_1-7-0","reply":"magritte-reply___-QCK7_1-7-0","reply-preview":"magritte-reply-preview___qvlNT_1-7-0","replyPreview":"magritte-reply-preview___qvlNT_1-7-0","reply-body":"magritte-reply-body___f2xx7_1-7-0","replyBody":"magritte-reply-body___f2xx7_1-7-0","snippet":"magritte-snippet___8k9xb_1-7-0","meta":"magritte-meta___1qhjm_1-7-0","edited":"magritte-edited___m-zmB_1-7-0","status":"magritte-status___dHzCt_1-7-0","message-title":"magritte-message-title___dgBFk_1-7-0","messageTitle":"magritte-message-title___dgBFk_1-7-0","label":"magritte-label___i0Wyt_1-7-0","message":"magritte-message___7TEpw_1-7-0"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=chat-bubble-LoILH1vk.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chat-bubble-LoILH1vk.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/index.css
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
--magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1:#90ACC1;
|
|
35
35
|
--magritte-color-component-chat-bubble-snippet-line-incoming-v25-0-1:#557B96;
|
|
36
36
|
}
|
|
37
|
-
.magritte-chat-bubble___ds9CP_1-
|
|
37
|
+
.magritte-chat-bubble___ds9CP_1-7-0{
|
|
38
38
|
--magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-incoming-v25-0-1);
|
|
39
39
|
--magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-incoming-v25-0-1);
|
|
40
40
|
--magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-incoming-v25-0-1);
|
|
@@ -45,16 +45,16 @@
|
|
|
45
45
|
max-width:calc(100% - 40px);
|
|
46
46
|
}
|
|
47
47
|
@media (min-width: 1020px){
|
|
48
|
-
body.magritte-old-layout .magritte-chat-bubble___ds9CP_1-
|
|
48
|
+
body.magritte-old-layout .magritte-chat-bubble___ds9CP_1-7-0{
|
|
49
49
|
max-width:min(460px, 100%);
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
@media (min-width: 1024px){
|
|
53
|
-
body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_1-
|
|
53
|
+
body:not(.magritte-old-layout) .magritte-chat-bubble___ds9CP_1-7-0{
|
|
54
54
|
max-width:min(460px, 100%);
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
|
-
.magritte-outgoing___3n00o_1-
|
|
57
|
+
.magritte-outgoing___3n00o_1-7-0{
|
|
58
58
|
--magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-outgoing-v25-0-1);
|
|
59
59
|
--magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-outgoing-v25-0-1);
|
|
60
60
|
--magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-outgoing-v25-0-1);
|
|
@@ -62,19 +62,19 @@
|
|
|
62
62
|
align-items:flex-end;
|
|
63
63
|
margin-left:auto;
|
|
64
64
|
}
|
|
65
|
-
.magritte-bot___Z6vZA_1-
|
|
65
|
+
.magritte-bot___Z6vZA_1-7-0{
|
|
66
66
|
--magritte-chat-bubble-background:var(--magritte-color-component-chat-bubble-background-bot-v25-0-1);
|
|
67
67
|
--magritte-chat-bubble-border:var(--magritte-color-component-chat-bubble-border-bot-v25-0-1);
|
|
68
68
|
--magritte-chat-bubble-snippet-background:var(--magritte-color-component-chat-bubble-snippet-background-bot-v25-0-1);
|
|
69
69
|
--magritte-chat-bubble-snippet-line:var(--magritte-color-component-chat-bubble-snippet-line-bot-v25-0-1);
|
|
70
70
|
}
|
|
71
|
-
.magritte-row___mQNnt_1-
|
|
71
|
+
.magritte-row___mQNnt_1-7-0{
|
|
72
72
|
display:flex;
|
|
73
73
|
align-items:flex-end;
|
|
74
74
|
gap:8px;
|
|
75
75
|
max-width:100%;
|
|
76
76
|
}
|
|
77
|
-
.magritte-bubble___NVuDI_1-
|
|
77
|
+
.magritte-bubble___NVuDI_1-7-0{
|
|
78
78
|
position:relative;
|
|
79
79
|
box-sizing:border-box;
|
|
80
80
|
min-width:0;
|
|
@@ -85,54 +85,54 @@
|
|
|
85
85
|
border-radius:20px;
|
|
86
86
|
overflow-wrap:break-word;
|
|
87
87
|
}
|
|
88
|
-
.magritte-with-tail___IdixJ_1-
|
|
88
|
+
.magritte-with-tail___IdixJ_1-7-0 .magritte-bubble___NVuDI_1-7-0{
|
|
89
89
|
border-bottom-left-radius:0;
|
|
90
90
|
}
|
|
91
|
-
.magritte-with-tail___IdixJ_1-
|
|
91
|
+
.magritte-with-tail___IdixJ_1-7-0.magritte-outgoing___3n00o_1-7-0 .magritte-bubble___NVuDI_1-7-0{
|
|
92
92
|
border-bottom-left-radius:20px;
|
|
93
93
|
border-bottom-right-radius:0;
|
|
94
94
|
}
|
|
95
|
-
.magritte-tail___E2hdk_1-
|
|
95
|
+
.magritte-tail___E2hdk_1-7-0{
|
|
96
96
|
position:absolute;
|
|
97
97
|
bottom:-1px;
|
|
98
98
|
left:-7px;
|
|
99
99
|
}
|
|
100
|
-
.magritte-tail-outgoing___Pn3MI_1-
|
|
100
|
+
.magritte-tail-outgoing___Pn3MI_1-7-0{
|
|
101
101
|
left:auto;
|
|
102
102
|
right:-7px;
|
|
103
103
|
transform:scaleX(-1);
|
|
104
104
|
}
|
|
105
|
-
.magritte-buttons___yQqBi_1-
|
|
105
|
+
.magritte-buttons___yQqBi_1-7-0{
|
|
106
106
|
display:grid;
|
|
107
107
|
grid-template-columns:repeat(2, 1fr);
|
|
108
108
|
gap:8px;
|
|
109
109
|
width:100%;
|
|
110
110
|
margin-top:4px;
|
|
111
111
|
}
|
|
112
|
-
.magritte-buttons___yQqBi_1-
|
|
112
|
+
.magritte-buttons___yQqBi_1-7-0 > *:last-child:nth-child(odd){
|
|
113
113
|
grid-column:span 2;
|
|
114
114
|
}
|
|
115
|
-
.magritte-actions___I5GSz_1-
|
|
115
|
+
.magritte-actions___I5GSz_1-7-0{
|
|
116
116
|
display:flex;
|
|
117
117
|
flex-wrap:wrap;
|
|
118
118
|
gap:2px;
|
|
119
119
|
margin-top:4px;
|
|
120
120
|
}
|
|
121
|
-
.magritte-error-text___1ZxWY_1-
|
|
121
|
+
.magritte-error-text___1ZxWY_1-7-0{
|
|
122
122
|
margin-top:2px;
|
|
123
123
|
}
|
|
124
|
-
.magritte-file___k2IKy_1-
|
|
124
|
+
.magritte-file___k2IKy_1-7-0{
|
|
125
125
|
display:flex;
|
|
126
126
|
align-items:flex-end;
|
|
127
127
|
}
|
|
128
|
-
.magritte-file-preview___eJKu8_1-
|
|
128
|
+
.magritte-file-preview___eJKu8_1-7-0{
|
|
129
129
|
display:block;
|
|
130
130
|
width:48px;
|
|
131
131
|
height:48px;
|
|
132
132
|
border-radius:8px;
|
|
133
133
|
object-fit:cover;
|
|
134
134
|
}
|
|
135
|
-
.magritte-media___9jH2k_1-
|
|
135
|
+
.magritte-media___9jH2k_1-7-0{
|
|
136
136
|
display:flex;
|
|
137
137
|
position:relative;
|
|
138
138
|
box-sizing:border-box;
|
|
@@ -145,18 +145,18 @@
|
|
|
145
145
|
box-shadow:inset 0 0 0 1px var(--magritte-color-component-chat-bubble-border-image-v25-0-1);
|
|
146
146
|
}
|
|
147
147
|
@media (min-width: 1020px){
|
|
148
|
-
body.magritte-old-layout .magritte-media___9jH2k_1-
|
|
148
|
+
body.magritte-old-layout .magritte-media___9jH2k_1-7-0{
|
|
149
149
|
max-width:452px;
|
|
150
150
|
max-height:452px;
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
@media (min-width: 1024px){
|
|
154
|
-
body:not(.magritte-old-layout) .magritte-media___9jH2k_1-
|
|
154
|
+
body:not(.magritte-old-layout) .magritte-media___9jH2k_1-7-0{
|
|
155
155
|
max-width:452px;
|
|
156
156
|
max-height:452px;
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
|
-
.magritte-media-blur___TbiMa_1-
|
|
159
|
+
.magritte-media-blur___TbiMa_1-7-0{
|
|
160
160
|
position:absolute;
|
|
161
161
|
top:-96px;
|
|
162
162
|
left:-96px;
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
filter:blur(48px);
|
|
167
167
|
object-fit:cover;
|
|
168
168
|
}
|
|
169
|
-
.magritte-media-image___G-FkF_1-
|
|
169
|
+
.magritte-media-image___G-FkF_1-7-0{
|
|
170
170
|
display:block;
|
|
171
171
|
position:relative;
|
|
172
172
|
max-width:100%;
|
|
@@ -174,23 +174,23 @@
|
|
|
174
174
|
margin:auto;
|
|
175
175
|
}
|
|
176
176
|
@media (min-width: 1020px){
|
|
177
|
-
body.magritte-old-layout .magritte-media-image___G-FkF_1-
|
|
177
|
+
body.magritte-old-layout .magritte-media-image___G-FkF_1-7-0{
|
|
178
178
|
max-height:452px;
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
181
|
@media (min-width: 1024px){
|
|
182
|
-
body:not(.magritte-old-layout) .magritte-media-image___G-FkF_1-
|
|
182
|
+
body:not(.magritte-old-layout) .magritte-media-image___G-FkF_1-7-0{
|
|
183
183
|
max-height:452px;
|
|
184
184
|
}
|
|
185
185
|
}
|
|
186
|
-
.magritte-media-content___n3XbD_1-
|
|
186
|
+
.magritte-media-content___n3XbD_1-7-0{
|
|
187
187
|
display:flex;
|
|
188
188
|
position:absolute;
|
|
189
189
|
inset:0;
|
|
190
190
|
align-items:center;
|
|
191
191
|
justify-content:center;
|
|
192
192
|
}
|
|
193
|
-
.magritte-media-format___AdfCK_1-
|
|
193
|
+
.magritte-media-format___AdfCK_1-7-0{
|
|
194
194
|
display:flex;
|
|
195
195
|
position:absolute;
|
|
196
196
|
padding:2px 8px;
|
|
@@ -200,7 +200,7 @@
|
|
|
200
200
|
top:4px;
|
|
201
201
|
left:4px;
|
|
202
202
|
}
|
|
203
|
-
.magritte-media-meta___oSxxr_1-
|
|
203
|
+
.magritte-media-meta___oSxxr_1-7-0{
|
|
204
204
|
--magritte-ui-text-color-override:var(--magritte-color-text-constant-v25-0-1);
|
|
205
205
|
display:flex;
|
|
206
206
|
position:absolute;
|
|
@@ -212,13 +212,13 @@
|
|
|
212
212
|
bottom:4px;
|
|
213
213
|
align-items:center;
|
|
214
214
|
}
|
|
215
|
-
.magritte-media-meta___oSxxr_1-
|
|
215
|
+
.magritte-media-meta___oSxxr_1-7-0:empty{
|
|
216
216
|
display:none;
|
|
217
217
|
}
|
|
218
|
-
.magritte-media-meta___oSxxr_1-
|
|
218
|
+
.magritte-media-meta___oSxxr_1-7-0 > span{
|
|
219
219
|
margin-left:0;
|
|
220
220
|
}
|
|
221
|
-
.magritte-reply___-QCK7_1-
|
|
221
|
+
.magritte-reply___-QCK7_1-7-0{
|
|
222
222
|
display:flex;
|
|
223
223
|
position:relative;
|
|
224
224
|
padding:8px;
|
|
@@ -229,7 +229,7 @@
|
|
|
229
229
|
align-items:center;
|
|
230
230
|
gap:8px;
|
|
231
231
|
}
|
|
232
|
-
.magritte-reply___-QCK7_1-
|
|
232
|
+
.magritte-reply___-QCK7_1-7-0::before{
|
|
233
233
|
content:'';
|
|
234
234
|
position:absolute;
|
|
235
235
|
top:0;
|
|
@@ -238,7 +238,7 @@
|
|
|
238
238
|
width:4px;
|
|
239
239
|
background-color:var(--magritte-chat-bubble-snippet-line);
|
|
240
240
|
}
|
|
241
|
-
.magritte-reply-preview___qvlNT_1-
|
|
241
|
+
.magritte-reply-preview___qvlNT_1-7-0{
|
|
242
242
|
display:block;
|
|
243
243
|
flex-shrink:0;
|
|
244
244
|
width:40px;
|
|
@@ -248,12 +248,12 @@
|
|
|
248
248
|
outline-offset:-1px;
|
|
249
249
|
object-fit:cover;
|
|
250
250
|
}
|
|
251
|
-
.magritte-reply-body___f2xx7_1-
|
|
251
|
+
.magritte-reply-body___f2xx7_1-7-0{
|
|
252
252
|
display:flex;
|
|
253
253
|
flex-direction:column;
|
|
254
254
|
min-width:0;
|
|
255
255
|
}
|
|
256
|
-
.magritte-snippet___8k9xb_1-
|
|
256
|
+
.magritte-snippet___8k9xb_1-7-0{
|
|
257
257
|
display:flex;
|
|
258
258
|
position:relative;
|
|
259
259
|
padding:8px;
|
|
@@ -264,7 +264,7 @@
|
|
|
264
264
|
flex-direction:column;
|
|
265
265
|
gap:2px;
|
|
266
266
|
}
|
|
267
|
-
.magritte-snippet___8k9xb_1-
|
|
267
|
+
.magritte-snippet___8k9xb_1-7-0::before{
|
|
268
268
|
content:'';
|
|
269
269
|
position:absolute;
|
|
270
270
|
top:0;
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
width:4px;
|
|
274
274
|
background-color:var(--magritte-chat-bubble-snippet-line);
|
|
275
275
|
}
|
|
276
|
-
.magritte-snippet___8k9xb_1-
|
|
276
|
+
.magritte-snippet___8k9xb_1-7-0 img{
|
|
277
277
|
display:block;
|
|
278
278
|
max-width:100%;
|
|
279
279
|
border-radius:4px;
|
|
@@ -281,7 +281,7 @@
|
|
|
281
281
|
outline-offset:-1px;
|
|
282
282
|
margin-top:6px;
|
|
283
283
|
}
|
|
284
|
-
.magritte-meta___1qhjm_1-
|
|
284
|
+
.magritte-meta___1qhjm_1-7-0{
|
|
285
285
|
float:right;
|
|
286
286
|
margin-left:12px;
|
|
287
287
|
white-space:nowrap;
|
|
@@ -294,50 +294,53 @@
|
|
|
294
294
|
text-transform:none;
|
|
295
295
|
text-decoration:none;
|
|
296
296
|
}
|
|
297
|
-
.magritte-
|
|
297
|
+
.magritte-edited___m-zmB_1-7-0{
|
|
298
|
+
margin-right:4px;
|
|
299
|
+
}
|
|
300
|
+
.magritte-status___dHzCt_1-7-0{
|
|
298
301
|
display:inline-flex;
|
|
299
302
|
vertical-align:middle;
|
|
300
303
|
}
|
|
301
|
-
.magritte-status___dHzCt_1-
|
|
304
|
+
.magritte-status___dHzCt_1-7-0:not(:first-child){
|
|
302
305
|
margin-left:4px;
|
|
303
306
|
}
|
|
304
|
-
.magritte-message-title___dgBFk_1-
|
|
307
|
+
.magritte-message-title___dgBFk_1-7-0{
|
|
305
308
|
margin-bottom:4px;
|
|
306
309
|
}
|
|
307
|
-
.magritte-label___i0Wyt_1-
|
|
308
|
-
.magritte-label___i0Wyt_1-
|
|
309
|
-
.magritte-label___i0Wyt_1-
|
|
310
|
-
.magritte-message___7TEpw_1-
|
|
311
|
-
.magritte-bubble___NVuDI_1-
|
|
310
|
+
.magritte-label___i0Wyt_1-7-0 + .magritte-media___9jH2k_1-7-0,
|
|
311
|
+
.magritte-label___i0Wyt_1-7-0 + .magritte-message___7TEpw_1-7-0,
|
|
312
|
+
.magritte-label___i0Wyt_1-7-0 + .magritte-snippet___8k9xb_1-7-0,
|
|
313
|
+
.magritte-message___7TEpw_1-7-0 + .magritte-message___7TEpw_1-7-0,
|
|
314
|
+
.magritte-bubble___NVuDI_1-7-0 > .magritte-meta___1qhjm_1-7-0{
|
|
312
315
|
margin-top:4px;
|
|
313
316
|
}
|
|
314
|
-
.magritte-label___i0Wyt_1-
|
|
315
|
-
.magritte-reply___-QCK7_1-
|
|
316
|
-
.magritte-reply___-QCK7_1-
|
|
317
|
-
.magritte-reply___-QCK7_1-
|
|
318
|
-
.magritte-media___9jH2k_1-
|
|
317
|
+
.magritte-label___i0Wyt_1-7-0 + .magritte-reply___-QCK7_1-7-0,
|
|
318
|
+
.magritte-reply___-QCK7_1-7-0 + .magritte-media___9jH2k_1-7-0,
|
|
319
|
+
.magritte-reply___-QCK7_1-7-0 + .magritte-message___7TEpw_1-7-0,
|
|
320
|
+
.magritte-reply___-QCK7_1-7-0 + .magritte-snippet___8k9xb_1-7-0,
|
|
321
|
+
.magritte-media___9jH2k_1-7-0 + .magritte-snippet___8k9xb_1-7-0{
|
|
319
322
|
margin-top:8px;
|
|
320
323
|
}
|
|
321
|
-
.magritte-label___i0Wyt_1-
|
|
322
|
-
.magritte-reply___-QCK7_1-
|
|
323
|
-
.magritte-media___9jH2k_1-
|
|
324
|
-
.magritte-media___9jH2k_1-
|
|
325
|
-
.magritte-file___k2IKy_1-
|
|
326
|
-
.magritte-file___k2IKy_1-
|
|
324
|
+
.magritte-label___i0Wyt_1-7-0 + .magritte-file___k2IKy_1-7-0,
|
|
325
|
+
.magritte-reply___-QCK7_1-7-0 + .magritte-file___k2IKy_1-7-0,
|
|
326
|
+
.magritte-media___9jH2k_1-7-0 + .magritte-file___k2IKy_1-7-0,
|
|
327
|
+
.magritte-media___9jH2k_1-7-0 + .magritte-message___7TEpw_1-7-0,
|
|
328
|
+
.magritte-file___k2IKy_1-7-0 + .magritte-message___7TEpw_1-7-0,
|
|
329
|
+
.magritte-file___k2IKy_1-7-0 + .magritte-snippet___8k9xb_1-7-0{
|
|
327
330
|
margin-top:12px;
|
|
328
331
|
}
|
|
329
|
-
.magritte-message___7TEpw_1-
|
|
332
|
+
.magritte-message___7TEpw_1-7-0 + .magritte-snippet___8k9xb_1-7-0{
|
|
330
333
|
margin-top:16px;
|
|
331
334
|
}
|
|
332
|
-
.magritte-file___k2IKy_1-
|
|
335
|
+
.magritte-file___k2IKy_1-7-0 + .magritte-file___k2IKy_1-7-0{
|
|
333
336
|
margin-top:24px;
|
|
334
337
|
}
|
|
335
|
-
.magritte-label___i0Wyt_1-
|
|
338
|
+
.magritte-label___i0Wyt_1-7-0{
|
|
336
339
|
margin-top:-4px;
|
|
337
340
|
}
|
|
338
|
-
.magritte-bubble___NVuDI_1-
|
|
341
|
+
.magritte-bubble___NVuDI_1-7-0 > .magritte-media___9jH2k_1-7-0:first-child{
|
|
339
342
|
margin-top:-8px;
|
|
340
343
|
}
|
|
341
|
-
.magritte-bubble___NVuDI_1-
|
|
344
|
+
.magritte-bubble___NVuDI_1-7-0 > .magritte-media___9jH2k_1-7-0:not(:has( ~ :not(.magritte-tail___E2hdk_1-7-0))){
|
|
342
345
|
margin-bottom:-8px;
|
|
343
346
|
}
|
package/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { ChatBubble } from '@hh.ru/magritte-ui-chat-bubble/ChatBubble';
|
|
2
2
|
export type { ChatBubbleMode, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
|
|
3
|
+
export type { ChatBubbleCallProps, ChatBubbleCallState } from '@hh.ru/magritte-ui-chat-bubble/Call';
|
|
3
4
|
export type { ChatBubbleErrorActionProps } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';
|
|
4
5
|
export type { ChatBubbleFileProps, ChatBubbleFileState } from '@hh.ru/magritte-ui-chat-bubble/File';
|
|
5
6
|
export type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';
|
package/index.js
CHANGED
|
@@ -4,28 +4,29 @@ import 'react/jsx-runtime';
|
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'classnames';
|
|
6
6
|
import '@hh.ru/magritte-ui-button';
|
|
7
|
-
import './
|
|
8
|
-
import './internal/errorMenu.js';
|
|
9
|
-
import '@hh.ru/magritte-ui-menu';
|
|
10
|
-
import './File.js';
|
|
7
|
+
import './Call.js';
|
|
11
8
|
import '@hh.ru/magritte-ui-cell';
|
|
12
9
|
import './internal/colors.js';
|
|
13
10
|
import './internal/mode.js';
|
|
14
11
|
import './internal/utils.js';
|
|
15
12
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
13
|
+
import './chat-bubble-LoILH1vk.js';
|
|
14
|
+
import './ErrorAction.js';
|
|
15
|
+
import './internal/errorMenu.js';
|
|
16
|
+
import '@hh.ru/magritte-ui-menu';
|
|
17
|
+
import './File.js';
|
|
16
18
|
import '@hh.ru/magritte-ui-link';
|
|
17
19
|
import '@hh.ru/magritte-ui-loader';
|
|
18
|
-
import './chat-bubble-kJusmHys.js';
|
|
19
20
|
import './Label.js';
|
|
20
21
|
import '@hh.ru/magritte-ui-typography';
|
|
21
22
|
import './Media.js';
|
|
22
23
|
import './Message.js';
|
|
23
24
|
import './Meta.js';
|
|
25
|
+
import '@hh.ru/magritte-common-use-translation';
|
|
24
26
|
import './Reply.js';
|
|
25
27
|
import './Snippet.js';
|
|
26
28
|
import './Status.js';
|
|
27
29
|
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
28
|
-
import '@hh.ru/magritte-common-use-translation';
|
|
29
30
|
import '@hh.ru/magritte-ui-tooltip';
|
|
30
31
|
import './Tail.js';
|
|
31
32
|
import '@hh.ru/magritte-ui-icon';
|
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
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export type { ChatBubbleMode, ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';
|
|
2
|
+
export type { ChatBubbleCallProps, ChatBubbleCallState } from '@hh.ru/magritte-ui-chat-bubble/Call';
|
|
2
3
|
export type { ChatBubbleErrorActionProps } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';
|
|
3
4
|
export type { ChatBubbleFileProps, ChatBubbleFileState } from '@hh.ru/magritte-ui-chat-bubble/File';
|
|
4
5
|
export type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';
|
|
@@ -8,6 +9,7 @@ export type { ChatBubbleReplyProps } from '@hh.ru/magritte-ui-chat-bubble/Reply'
|
|
|
8
9
|
export type { ChatBubbleSnippetProps } from '@hh.ru/magritte-ui-chat-bubble/Snippet';
|
|
9
10
|
export type { ChatBubbleStatusProps, ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/Status';
|
|
10
11
|
export declare const ChatBubble: import("react").ForwardRefExoticComponent<Record<string, unknown>> & {
|
|
12
|
+
Call: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
|
|
11
13
|
ErrorAction: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
|
|
12
14
|
File: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
|
|
13
15
|
Label: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
|
package/index.mock.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
|
|
3
3
|
|
|
4
|
+
const Call = mockComponent('ChatBubble.Call');
|
|
4
5
|
const ErrorAction = mockComponent('ChatBubble.ErrorAction', undefined, { withChildren: true });
|
|
5
6
|
const File = mockComponent('ChatBubble.File');
|
|
6
7
|
const Label = mockComponent('ChatBubble.Label', undefined, { withChildren: true });
|
|
@@ -10,6 +11,7 @@ const Reply = mockComponent('ChatBubble.Reply', undefined, { withChildren: true
|
|
|
10
11
|
const Snippet = mockComponent('ChatBubble.Snippet', undefined, { withChildren: true });
|
|
11
12
|
const Status = mockComponent('ChatBubble.Status', undefined, { withChildren: true });
|
|
12
13
|
const ChatBubble = Object.assign(mockComponent('ChatBubble', undefined, { withChildren: true }), {
|
|
14
|
+
Call,
|
|
13
15
|
ErrorAction,
|
|
14
16
|
File,
|
|
15
17
|
Label,
|
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 { ChatBubbleReplyProps } from '@hh.ru/magritte-ui-chat-bubble/Reply';\nexport type { ChatBubbleSnippetProps } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\nexport type { ChatBubbleStatusProps, ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/Status';\n\nconst ErrorAction = mockComponent('ChatBubble.ErrorAction', undefined, { withChildren: true });\nconst File = mockComponent('ChatBubble.File');\nconst Label = mockComponent('ChatBubble.Label', undefined, { withChildren: true });\nconst Media = mockComponent('ChatBubble.Media', undefined, { withChildren: true });\nconst Message = mockComponent('ChatBubble.Message', undefined, { withChildren: true });\nconst Reply = mockComponent('ChatBubble.Reply', undefined, { withChildren: true });\nconst Snippet = mockComponent('ChatBubble.Snippet', undefined, { withChildren: true });\nconst Status = mockComponent('ChatBubble.Status', undefined, { withChildren: true });\n\nexport const ChatBubble = Object.assign(mockComponent('ChatBubble', undefined, { withChildren: true }), {\n ErrorAction,\n File,\n Label,\n Media,\n Message,\n Reply,\n Snippet,\n Status,\n});\n"],"names":[],"mappings":";;
|
|
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 { ChatBubbleCallProps, ChatBubbleCallState } from '@hh.ru/magritte-ui-chat-bubble/Call';\nexport type { ChatBubbleErrorActionProps } from '@hh.ru/magritte-ui-chat-bubble/ErrorAction';\nexport type { ChatBubbleFileProps, ChatBubbleFileState } from '@hh.ru/magritte-ui-chat-bubble/File';\nexport type { ChatBubbleLabelProps } from '@hh.ru/magritte-ui-chat-bubble/Label';\nexport type { ChatBubbleMediaProps } from '@hh.ru/magritte-ui-chat-bubble/Media';\nexport type { ChatBubbleMessageProps } from '@hh.ru/magritte-ui-chat-bubble/Message';\nexport type { ChatBubbleReplyProps } from '@hh.ru/magritte-ui-chat-bubble/Reply';\nexport type { ChatBubbleSnippetProps } from '@hh.ru/magritte-ui-chat-bubble/Snippet';\nexport type { ChatBubbleStatusProps, ChatBubbleStatusValue } from '@hh.ru/magritte-ui-chat-bubble/Status';\n\nconst Call = mockComponent('ChatBubble.Call');\nconst ErrorAction = mockComponent('ChatBubble.ErrorAction', undefined, { withChildren: true });\nconst File = mockComponent('ChatBubble.File');\nconst Label = mockComponent('ChatBubble.Label', undefined, { withChildren: true });\nconst Media = mockComponent('ChatBubble.Media', undefined, { withChildren: true });\nconst Message = mockComponent('ChatBubble.Message', undefined, { withChildren: true });\nconst Reply = mockComponent('ChatBubble.Reply', undefined, { withChildren: true });\nconst Snippet = mockComponent('ChatBubble.Snippet', undefined, { withChildren: true });\nconst Status = mockComponent('ChatBubble.Status', undefined, { withChildren: true });\n\nexport const ChatBubble = Object.assign(mockComponent('ChatBubble', undefined, { withChildren: true }), {\n Call,\n ErrorAction,\n File,\n Label,\n Media,\n Message,\n Reply,\n Snippet,\n Status,\n});\n"],"names":[],"mappings":";;AAaA,MAAM,IAAI,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAC9C,MAAM,WAAW,GAAG,aAAa,CAAC,wBAAwB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AAC/F,MAAM,IAAI,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAC9C,MAAM,KAAK,GAAG,aAAa,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACnF,MAAM,KAAK,GAAG,aAAa,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACnF,MAAM,OAAO,GAAG,aAAa,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACvF,MAAM,KAAK,GAAG,aAAa,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACnF,MAAM,OAAO,GAAG,aAAa,CAAC,oBAAoB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;AACvF,MAAM,MAAM,GAAG,aAAa,CAAC,mBAAmB,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;MAExE,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE;IACpG,IAAI;IACJ,WAAW;IACX,IAAI;IACJ,KAAK;IACL,KAAK;IACL,OAAO;IACP,KAAK;IACL,OAAO;IACP,MAAM;AACT,CAAA;;;;"}
|
package/internal/colors.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ButtonProps } from '@hh.ru/magritte-ui-button';
|
|
3
3
|
import type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';
|
|
4
4
|
import type { IconColor } from '@hh.ru/magritte-ui-icon';
|
|
5
5
|
import type { LinkProps } from '@hh.ru/magritte-ui-link';
|
|
@@ -18,7 +18,7 @@ export interface ChatBubbleColors {
|
|
|
18
18
|
/** Иконки действий, лежат под бабблом на фоне страницы */
|
|
19
19
|
actionsIcon: IconColor;
|
|
20
20
|
/** Кнопки под бабблом */
|
|
21
|
-
button:
|
|
21
|
+
button: Pick<ButtonProps, 'mode' | 'style'>;
|
|
22
22
|
/** Ссылка-действие: «Открыть», «Загрузить» */
|
|
23
23
|
link: Pick<LinkProps, 'style' | 'mode'>;
|
|
24
24
|
/** Иконка рядом со второстепенным текстом: лоадер загрузки файла */
|
package/internal/colors.js
CHANGED
|
@@ -10,7 +10,7 @@ const COLORS = {
|
|
|
10
10
|
replyTitle: 'accent',
|
|
11
11
|
statusIcon: 'constant',
|
|
12
12
|
actionsIcon: 'secondary',
|
|
13
|
-
button: 'neutral',
|
|
13
|
+
button: { mode: 'secondary', style: 'neutral' },
|
|
14
14
|
link: { style: 'accent' },
|
|
15
15
|
secondaryIcon: 'secondary',
|
|
16
16
|
fileIcon: 'constant',
|
|
@@ -23,7 +23,7 @@ const COLORS = {
|
|
|
23
23
|
replyTitle: 'constant',
|
|
24
24
|
statusIcon: 'constant',
|
|
25
25
|
actionsIcon: 'accent',
|
|
26
|
-
button: 'accent',
|
|
26
|
+
button: { mode: 'primary', style: 'accent' },
|
|
27
27
|
link: { style: 'constant', mode: 'secondary' },
|
|
28
28
|
secondaryIcon: 'constant',
|
|
29
29
|
fileIcon: 'accent',
|
|
@@ -36,7 +36,7 @@ const COLORS = {
|
|
|
36
36
|
replyTitle: 'accent',
|
|
37
37
|
statusIcon: 'special',
|
|
38
38
|
actionsIcon: 'special',
|
|
39
|
-
button: 'special',
|
|
39
|
+
button: { mode: 'secondary', style: 'special' },
|
|
40
40
|
link: { style: 'accent' },
|
|
41
41
|
secondaryIcon: 'secondary',
|
|
42
42
|
fileIcon: 'constant',
|
package/internal/colors.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","sources":["src/internal/colors.ts"],"sourcesContent":["import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';\nimport type {
|
|
1
|
+
{"version":3,"file":"colors.js","sources":["src/internal/colors.ts"],"sourcesContent":["import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';\nimport type { ButtonProps } from '@hh.ru/magritte-ui-button';\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport type { IconColor } from '@hh.ru/magritte-ui-icon';\nimport type { LinkProps } from '@hh.ru/magritte-ui-link';\nimport type { TextStyle } from '@hh.ru/magritte-ui-typography';\n\nexport interface ChatBubbleColors {\n /** Основной текст сообщения, названия файла, текст сниппета */\n text: TextStyle;\n /** Второстепенный текст: время, размер файла */\n secondaryText: TextStyle;\n /** Акцентный текст: имя отправителя */\n accentText: TextStyle;\n /** Автор цитируемого сообщения (у бота акцентный, потому отдельно от accentText) */\n replyTitle: TextStyle;\n /** Иконка статуса, лежит на фоне баббла */\n statusIcon: IconColor;\n /** Иконки действий, лежат под бабблом на фоне страницы */\n actionsIcon: IconColor;\n /** Кнопки под бабблом */\n button: Pick<ButtonProps, 'mode' | 'style'>;\n /** Ссылка-действие: «Открыть», «Загрузить» */\n link: Pick<LinkProps, 'style' | 'mode'>;\n /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */\n secondaryIcon: IconColor;\n /** Иконка файла */\n fileIcon: IconColor;\n /** Подложка под иконкой файла */\n fileIconBackground: TokenColorBackground;\n}\n\nconst COLORS: Record<ChatBubbleMode, ChatBubbleColors> = {\n incoming: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'accent',\n replyTitle: 'accent',\n statusIcon: 'constant',\n actionsIcon: 'secondary',\n button: { mode: 'secondary', style: 'neutral' },\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'accent',\n },\n outgoing: {\n text: 'constant',\n secondaryText: 'constant',\n accentText: 'constant',\n replyTitle: 'constant',\n statusIcon: 'constant',\n actionsIcon: 'accent',\n button: { mode: 'primary', style: 'accent' },\n link: { style: 'constant', mode: 'secondary' },\n secondaryIcon: 'constant',\n fileIcon: 'accent',\n fileIconBackground: 'accent-secondary',\n },\n bot: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'special',\n replyTitle: 'accent',\n statusIcon: 'special',\n actionsIcon: 'special',\n button: { mode: 'secondary', style: 'special' },\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'special',\n },\n};\n\nexport const getColors = (mode: ChatBubbleMode): ChatBubbleColors => COLORS[mode];\n\n// Для подкомпонентов, которые сидят под mode провайдером\nexport const useChatBubbleColors = (): ChatBubbleColors => COLORS[useChatBubbleMode()];\n"],"names":[],"mappings":";;;AAiCA,MAAM,MAAM,GAA6C;AACrD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,WAAW,EAAE,WAAW;QACxB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,QAAQ;AAC/B,KAAA;AACD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,WAAW,EAAE,QAAQ;QACrB,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC5C,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE;AAC9C,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,kBAAkB,EAAE,kBAAkB;AACzC,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,WAAW,EAAE,SAAS;QACtB,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/C,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,SAAS;AAChC,KAAA;CACJ,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,IAAoB,KAAuB,MAAM,CAAC,IAAI,EAAE;AAElF;AACO,MAAM,mBAAmB,GAAG,MAAwB,MAAM,CAAC,iBAAiB,EAAE;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-chat-bubble",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -20,17 +20,17 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
|
|
23
|
-
"@hh.ru/magritte-common-use-translation": "3.
|
|
23
|
+
"@hh.ru/magritte-common-use-translation": "3.4.0",
|
|
24
24
|
"@hh.ru/magritte-design-tokens": "25.0.1",
|
|
25
25
|
"@hh.ru/magritte-ui-breakpoint": "6.1.1",
|
|
26
|
-
"@hh.ru/magritte-ui-button": "7.3.
|
|
26
|
+
"@hh.ru/magritte-ui-button": "7.3.2",
|
|
27
27
|
"@hh.ru/magritte-ui-cell": "7.2.39",
|
|
28
28
|
"@hh.ru/magritte-ui-icon": "15.1.0",
|
|
29
29
|
"@hh.ru/magritte-ui-link": "7.2.1",
|
|
30
30
|
"@hh.ru/magritte-ui-loader": "4.1.1",
|
|
31
|
-
"@hh.ru/magritte-ui-menu": "1.0.
|
|
31
|
+
"@hh.ru/magritte-ui-menu": "1.0.37",
|
|
32
32
|
"@hh.ru/magritte-ui-mock-component": "1.1.7",
|
|
33
|
-
"@hh.ru/magritte-ui-tooltip": "11.0.
|
|
33
|
+
"@hh.ru/magritte-ui-tooltip": "11.0.46",
|
|
34
34
|
"@hh.ru/magritte-ui-typography": "5.3.12"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "bbe87c835b11aa2cbb455ff84d2979834e0bd01e"
|
|
44
44
|
}
|
package/types.d.ts
CHANGED
|
@@ -22,8 +22,10 @@ export interface ChatBubbleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
|
|
|
22
22
|
status?: ReactNode;
|
|
23
23
|
/** Дополнительные действия с сообщением: список иконок размера 16px под бабблом */
|
|
24
24
|
actions?: ReactNode;
|
|
25
|
-
/** Кнопки под
|
|
25
|
+
/** Кнопки под бабблом */
|
|
26
26
|
buttons?: ReactNode;
|
|
27
|
+
/** Сообщение было отредактировано */
|
|
28
|
+
edited?: boolean;
|
|
27
29
|
/** Ошибка отправки. Показывается только у исходящего сообщения */
|
|
28
30
|
error?: boolean;
|
|
29
31
|
/** Текст ошибки под сообщением */
|
package/chat-bubble-kJusmHys.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_1-6-0","chatBubble":"magritte-chat-bubble___ds9CP_1-6-0","outgoing":"magritte-outgoing___3n00o_1-6-0","bot":"magritte-bot___Z6vZA_1-6-0","row":"magritte-row___mQNnt_1-6-0","bubble":"magritte-bubble___NVuDI_1-6-0","with-tail":"magritte-with-tail___IdixJ_1-6-0","withTail":"magritte-with-tail___IdixJ_1-6-0","tail":"magritte-tail___E2hdk_1-6-0","tail-outgoing":"magritte-tail-outgoing___Pn3MI_1-6-0","tailOutgoing":"magritte-tail-outgoing___Pn3MI_1-6-0","buttons":"magritte-buttons___yQqBi_1-6-0","actions":"magritte-actions___I5GSz_1-6-0","error-text":"magritte-error-text___1ZxWY_1-6-0","errorText":"magritte-error-text___1ZxWY_1-6-0","file":"magritte-file___k2IKy_1-6-0","file-preview":"magritte-file-preview___eJKu8_1-6-0","filePreview":"magritte-file-preview___eJKu8_1-6-0","media":"magritte-media___9jH2k_1-6-0","media-blur":"magritte-media-blur___TbiMa_1-6-0","mediaBlur":"magritte-media-blur___TbiMa_1-6-0","media-image":"magritte-media-image___G-FkF_1-6-0","mediaImage":"magritte-media-image___G-FkF_1-6-0","media-content":"magritte-media-content___n3XbD_1-6-0","mediaContent":"magritte-media-content___n3XbD_1-6-0","media-format":"magritte-media-format___AdfCK_1-6-0","mediaFormat":"magritte-media-format___AdfCK_1-6-0","media-meta":"magritte-media-meta___oSxxr_1-6-0","mediaMeta":"magritte-media-meta___oSxxr_1-6-0","reply":"magritte-reply___-QCK7_1-6-0","reply-preview":"magritte-reply-preview___qvlNT_1-6-0","replyPreview":"magritte-reply-preview___qvlNT_1-6-0","reply-body":"magritte-reply-body___f2xx7_1-6-0","replyBody":"magritte-reply-body___f2xx7_1-6-0","snippet":"magritte-snippet___8k9xb_1-6-0","meta":"magritte-meta___1qhjm_1-6-0","status":"magritte-status___dHzCt_1-6-0","message-title":"magritte-message-title___dgBFk_1-6-0","messageTitle":"magritte-message-title___dgBFk_1-6-0","label":"magritte-label___i0Wyt_1-6-0","message":"magritte-message___7TEpw_1-6-0"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=chat-bubble-kJusmHys.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chat-bubble-kJusmHys.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|