@hh.ru/magritte-ui-chat-bubble 1.5.1 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ChatBubble.js +4 -5
- package/ChatBubble.js.map +1 -1
- package/ErrorAction.js +1 -1
- package/ErrorAction.js.map +1 -1
- package/File.d.ts +4 -2
- package/File.js +5 -5
- package/File.js.map +1 -1
- package/Label.js +6 -5
- package/Label.js.map +1 -1
- package/Media.d.ts +2 -2
- package/Media.js +2 -2
- package/Media.js.map +1 -1
- package/Message.js +5 -5
- package/Message.js.map +1 -1
- package/{internal/Meta.js → Meta.js} +5 -3
- package/Meta.js.map +1 -0
- package/Reply.d.ts +1 -1
- package/Reply.js +4 -4
- package/Reply.js.map +1 -1
- package/Snippet.js +5 -5
- package/Snippet.js.map +1 -1
- package/Status.js +2 -2
- package/Status.js.map +1 -1
- package/{internal/Tail.js → Tail.js} +3 -3
- package/Tail.js.map +1 -0
- package/chat-bubble-kJusmHys.js +5 -0
- package/chat-bubble-kJusmHys.js.map +1 -0
- package/index.css +100 -90
- package/index.js +3 -4
- package/index.js.map +1 -1
- package/internal/colors.d.ts +1 -0
- package/internal/colors.js +6 -1
- package/internal/colors.js.map +1 -1
- package/package.json +2 -2
- package/types.d.ts +2 -2
- package/chat-bubble-BSNa94vA.js +0 -5
- package/chat-bubble-BSNa94vA.js.map +0 -1
- package/chat-bubble-fnws1moq.js +0 -5
- package/chat-bubble-fnws1moq.js.map +0 -1
- package/internal/Meta.js.map +0 -1
- package/internal/Tail.js.map +0 -1
- /package/{internal/Meta.d.ts → Meta.d.ts} +0 -0
- /package/{internal/Tail.d.ts → Tail.d.ts} +0 -0
package/ChatBubble.js
CHANGED
|
@@ -8,11 +8,11 @@ import { ChatBubbleFile } from './File.js';
|
|
|
8
8
|
import { ChatBubbleLabel } from './Label.js';
|
|
9
9
|
import { ChatBubbleMedia } from './Media.js';
|
|
10
10
|
import { ChatBubbleMessage } from './Message.js';
|
|
11
|
+
import { Meta } from './Meta.js';
|
|
11
12
|
import { ChatBubbleReply } from './Reply.js';
|
|
12
13
|
import { ChatBubbleSnippet } from './Snippet.js';
|
|
13
14
|
import { ChatBubbleStatus } from './Status.js';
|
|
14
|
-
import {
|
|
15
|
-
import { Tail } from './internal/Tail.js';
|
|
15
|
+
import { Tail } from './Tail.js';
|
|
16
16
|
import { getColors } from './internal/colors.js';
|
|
17
17
|
import { ChatBubbleErrorMenuProvider } from './internal/errorMenu.js';
|
|
18
18
|
import { ChatBubbleModeProvider } from './internal/mode.js';
|
|
@@ -21,14 +21,13 @@ import { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';
|
|
|
21
21
|
import { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
22
22
|
import { Menu } from '@hh.ru/magritte-ui-menu';
|
|
23
23
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
24
|
-
import { s as styles } from './chat-bubble-
|
|
24
|
+
import { s as styles } from './chat-bubble-kJusmHys.js';
|
|
25
25
|
import '@hh.ru/magritte-ui-cell';
|
|
26
26
|
import '@hh.ru/magritte-ui-link';
|
|
27
27
|
import '@hh.ru/magritte-ui-loader';
|
|
28
28
|
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
29
29
|
import '@hh.ru/magritte-common-use-translation';
|
|
30
30
|
import '@hh.ru/magritte-ui-tooltip';
|
|
31
|
-
import './chat-bubble-BSNa94vA.js';
|
|
32
31
|
|
|
33
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) => {
|
|
34
33
|
const [menuVisible, setMenuVisible] = useState(false);
|
|
@@ -49,7 +48,7 @@ const ChatBubble = forwardRef(({ actions, buttons, children, header, errorAction
|
|
|
49
48
|
const content = items.map((child, index) => index === lastIndex && isMetaHost(child) ? cloneElement(child, { meta }) : child);
|
|
50
49
|
return (jsx(ChatBubbleModeProvider, { value: mode, children: jsxs("div", { className: classnames(className, styles.chatBubble, styles[mode], {
|
|
51
50
|
[styles.withTail]: showTail,
|
|
52
|
-
}), "data-qa": dataQa, ref: ref, children: [jsxs("div", { className: styles.row, children: [jsxs("div", { className: styles.bubble, children: [header
|
|
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 && (mode === 'bot' || mode === 'incoming') && (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 }) }))] }) }));
|
|
53
52
|
});
|
|
54
53
|
ChatBubble.displayName = 'ChatBubble';
|
|
55
54
|
ChatBubble.ErrorAction = ChatBubbleErrorAction;
|
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 { 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 { Meta } from '@hh.ru/magritte-ui-chat-bubble/internal/Meta';\nimport { Tail } from '@hh.ru/magritte-ui-chat-bubble/internal/Tail';\nimport { getColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { ChatBubbleErrorMenuProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { ChatBubbleModeProvider } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\nimport { isMetaHost, flattenFragments } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';\nimport type { ChatBubbleProps } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport { IconDefaultPropsContext, type IconProps } from '@hh.ru/magritte-ui-icon';\nimport { ExclamationCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Menu } from '@hh.ru/magritte-ui-menu';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\ninterface ChatBubbleComponents {\n ErrorAction: typeof ChatBubbleErrorAction;\n File: typeof ChatBubbleFile;\n Label: typeof ChatBubbleLabel;\n Media: typeof ChatBubbleMedia;\n Message: typeof ChatBubbleMessage;\n 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 <div className={styles.header} data-qa=\"chat-bubble-header\">\n {header}\n </div>\n )}\n <div\n className={header ? styles.contentWithHeader : undefined}\n data-qa=\"chat-bubble-content\"\n >\n {content}\n {!metaHosted && meta}\n </div>\n {showTail && <Tail />}\n </div>\n {mode === 'outgoing' && error && (\n <div>\n <ExclamationCircleFilledSize24\n ref={activatorMenuRef}\n initialColor=\"negative\"\n onClick={errorActions ? () => setMenuVisible((visible) => !visible) : undefined}\n data-qa=\"chat-bubble-error-button\"\n aria-haspopup={errorActions ? 'menu' : undefined}\n aria-expanded={errorActions ? menuVisible : undefined}\n />\n {errorActions && (\n <Menu\n activatorRef={activatorMenuRef}\n onClose={closeErrorMenu}\n placement=\"bottom-right\"\n visible={menuVisible}\n >\n <ChatBubbleErrorMenuProvider value={closeErrorMenu}>\n {errorActions}\n </ChatBubbleErrorMenuProvider>\n </Menu>\n )}\n </div>\n )}\n </div>\n {mode === 'outgoing' && error && errorText && (\n <div className={styles.errorText} data-qa=\"chat-bubble-error-text\">\n <Text typography=\"label-4-regular\" style=\"negative\" maxLines={2}>\n {errorText}\n </Text>\n </div>\n )}\n {buttons && (mode === 'bot' || mode === 'incoming') && (\n <ButtonDefaultPropsContext props={buttonsProps}>\n <div className={styles.buttons} data-qa=\"chat-bubble-buttons\">\n {buttons}\n </div>\n </ButtonDefaultPropsContext>\n )}\n {actions && (\n <IconDefaultPropsContext props={actionsIconProps}>\n <div className={styles.actions} data-qa=\"chat-bubble-actions\">\n {actions}\n </div>\n </IconDefaultPropsContext>\n )}\n </div>\n </ChatBubbleModeProvider>\n );\n }\n) as React.ForwardRefExoticComponent<ChatBubbleProps & React.RefAttributes<HTMLDivElement>> & ChatBubbleComponents;\n\nChatBubble.displayName = 'ChatBubble';\n\nChatBubble.ErrorAction = ChatBubbleErrorAction;\nChatBubble.File = ChatBubbleFile;\nChatBubble.Label = ChatBubbleLabel;\nChatBubble.Media = ChatBubbleMedia;\nChatBubble.Message = ChatBubbleMessage;\nChatBubble.Reply = ChatBubbleReply;\nChatBubble.Snippet = ChatBubbleSnippet;\nChatBubble.Status = ChatBubbleStatus;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqCa,UAAU,GAAG,UAAU,CAChC,CACI,EACI,OAAO,EACP,OAAO,EACP,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,IAAI,GAAG,UAAU,EACjB,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,IAAI,EACJ,KAAK,GAAG,KAAK,EACb,SAAS,EACT,SAAS,EAAE,MAAM,GAAG,aAAa,EACjC,SAAS,GACZ,EACD,GAAG,KACH;IACA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtD,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;AACpE,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAa,IAAI,CAAC,CAAC;AAClD,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,gBAAgB,GAAuB,OAAO,CAChD,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC,EACxD,CAAC,MAAM,CAAC,CACX,CAAC;AACF,IAAA,MAAM,YAAY,GAAyB,OAAO,CAC9C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EACnF,CAAC,MAAM,CAAC,CACX,CAAC;AACF;;;;AAIG;AACH,IAAA,MAAM,IAAI,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AAC9D,IAAA,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AACzC,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KACnC,KAAK,KAAK,SAAS,IAAI,UAAU,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,KAAK,CACnF,CAAC;IACF,QACIA,IAAC,sBAAsB,EAAA,EAAC,KAAK,EAAE,IAAI,EAC/B,QAAA,EAAAC,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE;AAC9D,gBAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ;AAC9B,aAAA,CAAC,EACO,SAAA,EAAA,MAAM,EACf,GAAG,EAAE,GAAG,EAER,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,GAAG,EACtB,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EAAA,CACxB,MAAM,KACHD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAU,SAAA,EAAA,oBAAoB,EACtD,QAAA,EAAA,MAAM,EACL,CAAA,CACT,EACDC,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC,iBAAiB,GAAG,SAAS,EAChD,SAAA,EAAA,qBAAqB,EAE5B,QAAA,EAAA,CAAA,OAAO,EACP,CAAC,UAAU,IAAI,IAAI,CAAA,EAAA,CAClB,EACL,QAAQ,IAAID,GAAC,CAAA,IAAI,EAAG,EAAA,CAAA,CAAA,EAAA,CACnB,EACL,IAAI,KAAK,UAAU,IAAI,KAAK,KACzBC,IACI,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,GAAA,CAAC,6BAA6B,EAAA,EAC1B,GAAG,EAAE,gBAAgB,EACrB,YAAY,EAAC,UAAU,EACvB,OAAO,EAAE,YAAY,GAAG,MAAM,cAAc,CAAC,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,SAAS,EAAA,SAAA,EACvE,0BAA0B,EAAA,eAAA,EACnB,YAAY,GAAG,MAAM,GAAG,SAAS,mBACjC,YAAY,GAAG,WAAW,GAAG,SAAS,EACvD,CAAA,EACD,YAAY,KACTA,GAAA,CAAC,IAAI,EAAA,EACD,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,cAAc,EACvB,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,WAAW,EAEpB,QAAA,EAAAA,GAAA,CAAC,2BAA2B,EAAA,EAAC,KAAK,EAAE,cAAc,EAAA,QAAA,EAC7C,YAAY,EAAA,CACa,GAC3B,CACV,CAAA,EAAA,CACC,CACT,CAAA,EAAA,CACC,EACL,IAAI,KAAK,UAAU,IAAI,KAAK,IAAI,SAAS,KACtCA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAAA,SAAA,EAAU,wBAAwB,EAAA,QAAA,EAC9DA,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,EAAA,QAAA,EAC1D,SAAS,EAAA,CACP,EACL,CAAA,CACT,EACA,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,UAAU,CAAC,KAC/CA,GAAA,CAAC,yBAAyB,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EAC1CA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,SAAA,EAAU,qBAAqB,EAAA,QAAA,EACxD,OAAO,EAAA,CACN,EACkB,CAAA,CAC/B,EACA,OAAO,KACJA,GAAC,CAAA,uBAAuB,EAAC,EAAA,KAAK,EAAE,gBAAgB,EAAA,QAAA,EAC5CA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,aAAU,qBAAqB,EAAA,QAAA,EACxD,OAAO,EAAA,CACN,EACgB,CAAA,CAC7B,CACC,EAAA,CAAA,EAAA,CACe,EAC3B;AACN,CAAC,EAC8G;AAEnH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,UAAU,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAC/C,UAAU,CAAC,IAAI,GAAG,cAAc,CAAC;AACjC,UAAU,CAAC,KAAK,GAAG,eAAe,CAAC;AACnC,UAAU,CAAC,KAAK,GAAG,eAAe,CAAC;AACnC,UAAU,CAAC,OAAO,GAAG,iBAAiB,CAAC;AACvC,UAAU,CAAC,KAAK,GAAG,eAAe,CAAC;AACnC,UAAU,CAAC,OAAO,GAAG,iBAAiB,CAAC;AACvC,UAAU,CAAC,MAAM,GAAG,gBAAgB;;;;"}
|
|
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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"}
|
package/ErrorAction.js
CHANGED
|
@@ -15,7 +15,7 @@ const ChatBubbleErrorAction = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-err
|
|
|
15
15
|
};
|
|
16
16
|
return jsx(Menu.Item, { ...props, "data-qa": dataQa, onClick: handleClick, ref: ref });
|
|
17
17
|
});
|
|
18
|
-
ChatBubbleErrorAction.displayName = '
|
|
18
|
+
ChatBubbleErrorAction.displayName = 'ChatBubbleErrorAction';
|
|
19
19
|
|
|
20
20
|
export { ChatBubbleErrorAction };
|
|
21
21
|
//# sourceMappingURL=ErrorAction.js.map
|
package/ErrorAction.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorAction.js","sources":["src/ErrorAction.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent } from 'react';\n\nimport { useChatBubbleErrorMenuClose } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { Menu, type MenuItemProps } from '@hh.ru/magritte-ui-menu';\n\nexport interface ChatBubbleErrorActionProps\n extends Pick<MenuItemProps, 'children' | 'disabled' | 'icon' | 'style' | 'subtitle' | 'onClick'> {\n /** Значение data-qa\n * @default chat-bubble-error-action\n */\n 'data-qa'?: string;\n}\n\n/**\n * Пункт меню, которое открывается по нажатию на иконку ошибки отправки.\n */\nexport const ChatBubbleErrorAction = forwardRef<HTMLDivElement, ChatBubbleErrorActionProps>(\n ({ 'data-qa': dataQa = 'chat-bubble-error-action', onClick, ...props }, ref) => {\n const close = useChatBubbleErrorMenuClose();\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n close();\n };\n\n return <Menu.Item {...props} data-qa={dataQa} onClick={handleClick} ref={ref} />;\n }\n);\n\nChatBubbleErrorAction.displayName = '
|
|
1
|
+
{"version":3,"file":"ErrorAction.js","sources":["src/ErrorAction.tsx"],"sourcesContent":["import { forwardRef, type MouseEvent } from 'react';\n\nimport { useChatBubbleErrorMenuClose } from '@hh.ru/magritte-ui-chat-bubble/internal/errorMenu';\nimport { Menu, type MenuItemProps } from '@hh.ru/magritte-ui-menu';\n\nexport interface ChatBubbleErrorActionProps\n extends Pick<MenuItemProps, 'children' | 'disabled' | 'icon' | 'style' | 'subtitle' | 'onClick'> {\n /** Значение data-qa\n * @default chat-bubble-error-action\n */\n 'data-qa'?: string;\n}\n\n/**\n * Пункт меню, которое открывается по нажатию на иконку ошибки отправки.\n */\nexport const ChatBubbleErrorAction = forwardRef<HTMLDivElement, ChatBubbleErrorActionProps>(\n ({ 'data-qa': dataQa = 'chat-bubble-error-action', onClick, ...props }, ref) => {\n const close = useChatBubbleErrorMenuClose();\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n close();\n };\n\n return <Menu.Item {...props} data-qa={dataQa} onClick={handleClick} ref={ref} />;\n }\n);\n\nChatBubbleErrorAction.displayName = 'ChatBubbleErrorAction';\n"],"names":["_jsx"],"mappings":";;;;;AAaA;;AAEG;MACU,qBAAqB,GAAG,UAAU,CAC3C,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,0BAA0B,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC3E,IAAA,MAAM,KAAK,GAAG,2BAA2B,EAAE,CAAC;AAE5C,IAAA,MAAM,WAAW,GAAG,CAAC,KAAiC,KAAI;AACtD,QAAA,OAAO,GAAG,KAAK,CAAC,CAAC;AACjB,QAAA,KAAK,EAAE,CAAC;AACZ,KAAC,CAAC;AAEF,IAAA,OAAOA,IAAC,IAAI,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAW,SAAA,EAAA,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AACrF,CAAC,EACH;AAEF,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}
|
package/File.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
2
2
|
import { type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/internal/utils';
|
|
3
3
|
export type ChatBubbleFileState = 'unloaded' | 'loading' | 'preview' | 'loaded';
|
|
4
|
-
|
|
4
|
+
type ChatBubbleFileHelper = HTMLAttributes<HTMLDivElement> & ChatBubbleMetaHostProps;
|
|
5
|
+
export interface ChatBubbleFileProps extends Omit<ChatBubbleFileHelper, 'children'> {
|
|
5
6
|
/** Имя файла */
|
|
6
7
|
name?: ReactNode;
|
|
7
8
|
/**
|
|
@@ -15,7 +16,7 @@ export interface ChatBubbleFileProps extends HTMLAttributes<HTMLDivElement>, Cha
|
|
|
15
16
|
state?: ChatBubbleFileState;
|
|
16
17
|
/** Url превью файла, показывается в состоянии `preview` */
|
|
17
18
|
preview?: string;
|
|
18
|
-
/**
|
|
19
|
+
/** Alt превью файла */
|
|
19
20
|
previewAlt?: string;
|
|
20
21
|
/**
|
|
21
22
|
* Значение data-qa
|
|
@@ -24,3 +25,4 @@ export interface ChatBubbleFileProps extends HTMLAttributes<HTMLDivElement>, Cha
|
|
|
24
25
|
'data-qa'?: string;
|
|
25
26
|
}
|
|
26
27
|
export declare const ChatBubbleFile: import("react").ForwardRefExoticComponent<ChatBubbleFileProps & import("react").RefAttributes<HTMLDivElement>> & import("@hh.ru/magritte-ui-chat-bubble/internal/utils").MetaHostComponent;
|
|
28
|
+
export {};
|
package/File.js
CHANGED
|
@@ -2,24 +2,24 @@ import './index.css';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef, useMemo } from 'react';
|
|
4
4
|
import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
|
|
5
|
-
import {
|
|
6
|
-
import { useChatBubbleMode } from './internal/mode.js';
|
|
5
|
+
import { useChatBubbleColors } from './internal/colors.js';
|
|
7
6
|
import { markMetaHost } from './internal/utils.js';
|
|
8
7
|
import { ArrowDownLineOutlinedSize24, DocumentOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
9
8
|
import { LinkDefaultPropsContext } from '@hh.ru/magritte-ui-link';
|
|
10
9
|
import { Loader } from '@hh.ru/magritte-ui-loader';
|
|
11
|
-
import { s as styles } from './chat-bubble-
|
|
10
|
+
import { s as styles } from './chat-bubble-kJusmHys.js';
|
|
11
|
+
import './internal/mode.js';
|
|
12
12
|
|
|
13
13
|
/** Прикреплённый файл */
|
|
14
14
|
const ChatBubbleFileComponent = forwardRef(({ 'data-qa': dataQa = 'chat-bubble-file', description, meta, name, preview, state = 'loaded', previewAlt, ...props }, ref) => {
|
|
15
|
-
const colors =
|
|
15
|
+
const colors = useChatBubbleColors();
|
|
16
16
|
const isLoading = state === 'loading';
|
|
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
|
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: isLoading ? jsx(Loader, { size: 16, color: colors.secondaryIcon }) : undefined, "data-qa": "chat-bubble-file-description", children: jsx(LinkDefaultPropsContext, { props: defaultLinkProps, children: description }) }))] }), meta] }));
|
|
21
21
|
});
|
|
22
|
-
ChatBubbleFileComponent.displayName = '
|
|
22
|
+
ChatBubbleFileComponent.displayName = 'ChatBubbleFile';
|
|
23
23
|
const ChatBubbleFile = markMetaHost(ChatBubbleFileComponent);
|
|
24
24
|
|
|
25
25
|
export { ChatBubbleFile };
|
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 {
|
|
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 { ArrowDownLineOutlinedSize24, DocumentOutlinedSize24 } 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';\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 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={isLoading ? <Loader size={16} color={colors.secondaryIcon} /> : undefined}\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":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAsCA;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,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,EACD,EAAA,KAAK,EAAC,QAAQ,EACd,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,IAAI,EACA,KAAK,KAAK,SAAS,IAAI,OAAO,IAC1BC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,IAAI,EAAE,GAAI,KAE3EA,GAAC,CAAA,IAAI,IACD,YAAY,EAAE,MAAM,CAAC,QAAQ,EAC7B,eAAe,EAAE,MAAM,CAAC,kBAAkB,EAC1C,OAAO,EAAE,EAAE,EACX,YAAY,EAAE,CAAC,EACjB,CAAA,CACL,aAGLA,GAAC,CAAA,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,aAAU,uBAAuB,EAAA,QAAA,EAClF,IAAI,EAAA,CACE,EACV,WAAW,KACRA,GAAC,CAAA,QAAQ,IACL,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,MAAM,CAAC,aAAa,EAC3B,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,SAAS,GAAGA,GAAA,CAAC,MAAM,EAAC,EAAA,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,aAAa,GAAI,GAAG,SAAS,aACvE,8BAA8B,EAAA,QAAA,EAEtCA,IAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,gBAAgB,YAAG,WAAW,EAAA,CAA2B,GAClF,CACd,CAAA,EAAA,CACE,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
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import { useChatBubbleMode } from './internal/mode.js';
|
|
4
|
+
import { useChatBubbleColors } from './internal/colors.js';
|
|
6
5
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
6
|
+
import { s as styles } from './chat-bubble-kJusmHys.js';
|
|
7
|
+
import './internal/mode.js';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* Заголовок сообщения.
|
|
10
11
|
*/
|
|
11
12
|
const ChatBubbleLabel = forwardRef(({ children, ...props }, ref) => {
|
|
12
|
-
const colors =
|
|
13
|
-
return (jsx("div", { ...props, "data-qa": "chat-bubble-label", ref: ref, children: jsx(Text, { typography: "subtitle-2-semibold", style: colors.accentText, maxLines: 1, children: children }) }));
|
|
13
|
+
const colors = useChatBubbleColors();
|
|
14
|
+
return (jsx("div", { ...props, className: styles.label, "data-qa": "chat-bubble-label", ref: ref, children: jsx(Text, { typography: "subtitle-2-semibold", style: colors.accentText, maxLines: 1, children: children }) }));
|
|
14
15
|
});
|
|
15
|
-
ChatBubbleLabel.displayName = '
|
|
16
|
+
ChatBubbleLabel.displayName = 'ChatBubbleLabel';
|
|
16
17
|
|
|
17
18
|
export { ChatBubbleLabel };
|
|
18
19
|
//# sourceMappingURL=Label.js.map
|
package/Label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sources":["src/Label.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"Label.js","sources":["src/Label.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from 'react';\n\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleLabelProps extends HTMLAttributes<HTMLDivElement> {\n /** Имя отправителя */\n children?: ReactNode;\n}\n\n/**\n * Заголовок сообщения.\n */\nexport const ChatBubbleLabel = forwardRef<HTMLDivElement, ChatBubbleLabelProps>(({ children, ...props }, ref) => {\n const colors = useChatBubbleColors();\n\n return (\n <div {...props} className={styles.label} data-qa=\"chat-bubble-label\" ref={ref}>\n <Text typography=\"subtitle-2-semibold\" style={colors.accentText} maxLines={1}>\n {children}\n </Text>\n </div>\n );\n});\n\nChatBubbleLabel.displayName = 'ChatBubbleLabel';\n"],"names":["_jsx"],"mappings":";;;;;;;AAYA;;AAEG;AACU,MAAA,eAAe,GAAG,UAAU,CAAuC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAC5G,IAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,IAAA,QACIA,GAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,SAAA,EAAU,mBAAmB,EAAC,GAAG,EAAE,GAAG,YACzEA,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAE,MAAM,CAAC,UAAU,EAAE,QAAQ,EAAE,CAAC,EAAA,QAAA,EACvE,QAAQ,EACN,CAAA,EAAA,CACL,EACR;AACN,CAAC,EAAE;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
|
package/Media.d.ts
CHANGED
|
@@ -3,11 +3,11 @@ import { type ChatBubbleMetaHostProps } from '@hh.ru/magritte-ui-chat-bubble/int
|
|
|
3
3
|
export interface ChatBubbleMediaProps extends HTMLAttributes<HTMLDivElement>, ChatBubbleMetaHostProps {
|
|
4
4
|
/** Url изображения или превью видео */
|
|
5
5
|
src?: string;
|
|
6
|
-
/**
|
|
6
|
+
/** Alt изображения */
|
|
7
7
|
alt?: string;
|
|
8
8
|
/** Содержимое поверх превью */
|
|
9
9
|
children?: ReactNode;
|
|
10
|
-
/**
|
|
10
|
+
/** Тип медиа (отображается в верхнем левом углу) */
|
|
11
11
|
format?: ReactNode;
|
|
12
12
|
/**
|
|
13
13
|
* Значение data-qa
|
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-kJusmHys.js';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Медиа в сообщении
|
|
@@ -11,7 +11,7 @@ import { s as styles } from './chat-bubble-fnws1moq.js';
|
|
|
11
11
|
const ChatBubbleMediaComponent = forwardRef(({ alt, children, 'data-qa': dataQa = 'chat-bubble-media', meta, src, format, ...props }, ref) => {
|
|
12
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 }))] }));
|
|
13
13
|
});
|
|
14
|
-
ChatBubbleMediaComponent.displayName = '
|
|
14
|
+
ChatBubbleMediaComponent.displayName = 'ChatBubbleMedia';
|
|
15
15
|
const ChatBubbleMedia = markMetaHost(ChatBubbleMediaComponent);
|
|
16
16
|
|
|
17
17
|
export { ChatBubbleMedia };
|
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 /**
|
|
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;;;;"}
|
package/Message.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import { useChatBubbleMode } from './internal/mode.js';
|
|
4
|
+
import { useChatBubbleColors } from './internal/colors.js';
|
|
6
5
|
import { markMetaHost } from './internal/utils.js';
|
|
7
6
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
8
|
-
import { s as styles } from './chat-bubble-
|
|
7
|
+
import { s as styles } from './chat-bubble-kJusmHys.js';
|
|
8
|
+
import './internal/mode.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Текстовая часть сообщения.
|
|
12
12
|
* Время встаёт в одну строку с последней строкой текста (иначе переносится под текст)
|
|
13
13
|
*/
|
|
14
14
|
const ChatBubbleMessageComponent = forwardRef(({ children, meta, title, ...props }, ref) => {
|
|
15
|
-
const colors =
|
|
15
|
+
const colors = useChatBubbleColors();
|
|
16
16
|
return (jsxs("div", { ...props, className: styles.message, "data-qa": "chat-bubble-message", ref: ref, children: [title && (jsx("div", { className: styles.messageTitle, "data-qa": "chat-bubble-message-title", children: jsx(Text, { Element: "span", typography: "subtitle-2-semibold", style: colors.text, children: title }) })), jsx(Text, { Element: "span", typography: "label-3-regular", style: colors.text, children: children }), meta] }));
|
|
17
17
|
});
|
|
18
|
-
ChatBubbleMessageComponent.displayName = '
|
|
18
|
+
ChatBubbleMessageComponent.displayName = 'ChatBubbleMessage';
|
|
19
19
|
const ChatBubbleMessage = markMetaHost(ChatBubbleMessageComponent);
|
|
20
20
|
|
|
21
21
|
export { ChatBubbleMessage };
|
package/Message.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.js","sources":["src/Message.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"Message.js","sources":["src/Message.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { markMetaHost, 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 ChatBubbleMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, ChatBubbleMetaHostProps {\n /** Опциональный заголовок над текстом */\n title?: ReactNode;\n /** Текст сообщения */\n children?: ReactNode;\n}\n\n/**\n * Текстовая часть сообщения.\n * Время встаёт в одну строку с последней строкой текста (иначе переносится под текст)\n */\nconst ChatBubbleMessageComponent = forwardRef<HTMLDivElement, ChatBubbleMessageProps>(\n ({ children, meta, title, ...props }, ref) => {\n const colors = useChatBubbleColors();\n\n return (\n <div {...props} className={styles.message} data-qa=\"chat-bubble-message\" ref={ref}>\n {title && (\n <div className={styles.messageTitle} data-qa=\"chat-bubble-message-title\">\n <Text Element=\"span\" typography=\"subtitle-2-semibold\" style={colors.text}>\n {title}\n </Text>\n </div>\n )}\n <Text Element=\"span\" typography=\"label-3-regular\" style={colors.text}>\n {children}\n </Text>\n {meta}\n </div>\n );\n }\n);\n\nChatBubbleMessageComponent.displayName = 'ChatBubbleMessage';\n\nexport const ChatBubbleMessage = markMetaHost(ChatBubbleMessageComponent);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAeA;;;AAGG;AACH,MAAM,0BAA0B,GAAG,UAAU,CACzC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACzC,IAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,aAAU,qBAAqB,EAAC,GAAG,EAAE,GAAG,EAC5E,QAAA,EAAA,CAAA,KAAK,KACFC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,SAAA,EAAU,2BAA2B,EAAA,QAAA,EACpEA,IAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EACnE,KAAK,EAAA,CACH,GACL,CACT,EACDA,GAAC,CAAA,IAAI,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAC/D,QAAQ,EACN,CAAA,EACN,IAAI,CAAA,EAAA,CACH,EACR;AACN,CAAC,CACJ,CAAC;AAEF,0BAA0B,CAAC,WAAW,GAAG,mBAAmB,CAAC;MAEhD,iBAAiB,GAAG,YAAY,CAAC,0BAA0B;;;;"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import '
|
|
1
|
+
import './index.css';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { getColors } from './colors.js';
|
|
3
|
+
import { getColors } from './internal/colors.js';
|
|
4
4
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
5
|
-
import { s as styles } from '
|
|
5
|
+
import { s as styles } from './chat-bubble-kJusmHys.js';
|
|
6
|
+
import './internal/mode.js';
|
|
7
|
+
import 'react';
|
|
6
8
|
|
|
7
9
|
/**
|
|
8
10
|
* Время и статус сообщения
|
package/Meta.js.map
ADDED
|
@@ -0,0 +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":";;;;;;;AAcA;;;AAGK;AACE,MAAM,IAAI,GAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAI;AAC1D,IAAA,MAAM,aAAa,GAAG,IAAI,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAE/D,IAAA,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;AACzB,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,QACIA,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAU,SAAA,EAAA,kBAAkB,EACnD,QAAA,EAAA,CAAA,IAAI,KACDC,GAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,aAAa,EAAA,QAAA,EACjF,IAAI,EACF,CAAA,CACV,EACA,aAAa,CAAA,EAAA,CACX,EACT;AACN;;;;"}
|
package/Reply.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export interface ChatBubbleReplyProps extends Omit<HTMLAttributes<HTMLDivElement
|
|
|
4
4
|
title?: ReactNode;
|
|
5
5
|
/** Url миниатюры вложения */
|
|
6
6
|
preview?: string;
|
|
7
|
-
/**
|
|
7
|
+
/** Alt миниатюры */
|
|
8
8
|
previewAlt?: string;
|
|
9
9
|
/** Текст цитируемого сообщения */
|
|
10
10
|
children?: ReactNode;
|
package/Reply.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import { useChatBubbleMode } from './internal/mode.js';
|
|
4
|
+
import { useChatBubbleColors } from './internal/colors.js';
|
|
6
5
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
7
|
-
import { s as styles } from './chat-bubble-
|
|
6
|
+
import { s as styles } from './chat-bubble-kJusmHys.js';
|
|
7
|
+
import './internal/mode.js';
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* Цитата сообщения, на которое отвечают (ставится в слот `header`)
|
|
11
11
|
*/
|
|
12
12
|
const ChatBubbleReply = forwardRef(({ children, 'data-qa': dataQa = 'chat-bubble-reply', preview, previewAlt, title, ...props }, ref) => {
|
|
13
|
-
const colors =
|
|
13
|
+
const colors = useChatBubbleColors();
|
|
14
14
|
return (jsxs("div", { ...props, className: styles.reply, "data-qa": dataQa, ref: ref, children: [preview && jsx("img", { className: styles.replyPreview, src: preview, alt: previewAlt ?? '' }), jsxs("span", { className: styles.replyBody, children: [title && (jsx(Text, { typography: "subtitle-2-semibold", style: colors.replyTitle, maxLines: 1, "data-qa": "chat-bubble-reply-title", children: title })), children && (jsx(Text, { typography: "label-3-regular", style: colors.text, maxLines: 1, "data-qa": "chat-bubble-reply-text", children: children }))] })] }));
|
|
15
15
|
});
|
|
16
16
|
ChatBubbleReply.displayName = 'ChatBubbleReply';
|
package/Reply.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reply.js","sources":["src/Reply.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"Reply.js","sources":["src/Reply.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleReplyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Автор цитируемого сообщения */\n title?: ReactNode;\n /** Url миниатюры вложения */\n preview?: string;\n /** Alt миниатюры */\n previewAlt?: string;\n /** Текст цитируемого сообщения */\n children?: ReactNode;\n /**\n * Значение data-qa\n * @default chat-bubble-reply\n */\n 'data-qa'?: string;\n}\n\n/**\n * Цитата сообщения, на которое отвечают (ставится в слот `header`)\n */\nexport const ChatBubbleReply = forwardRef<HTMLDivElement, ChatBubbleReplyProps>(\n ({ children, 'data-qa': dataQa = 'chat-bubble-reply', preview, previewAlt, title, ...props }, ref) => {\n const colors = useChatBubbleColors();\n\n return (\n <div {...props} className={styles.reply} data-qa={dataQa} ref={ref}>\n {preview && <img className={styles.replyPreview} src={preview} alt={previewAlt ?? ''} />}\n <span className={styles.replyBody}>\n {title && (\n <Text\n typography=\"subtitle-2-semibold\"\n style={colors.replyTitle}\n maxLines={1}\n data-qa=\"chat-bubble-reply-title\"\n >\n {title}\n </Text>\n )}\n {children && (\n <Text\n typography=\"label-3-regular\"\n style={colors.text}\n maxLines={1}\n data-qa=\"chat-bubble-reply-text\"\n >\n {children}\n </Text>\n )}\n </span>\n </div>\n );\n }\n);\n\nChatBubbleReply.displayName = 'ChatBubbleReply';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAuBA;;AAEG;AACI,MAAM,eAAe,GAAG,UAAU,CACrC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,mBAAmB,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACjG,IAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;IAErC,QACIA,iBAAS,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,SAAA,EAAW,MAAM,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAC7D,OAAO,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,IAAI,EAAE,EAAA,CAAI,EACxFD,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,EAC5B,QAAA,EAAA,CAAA,KAAK,KACFC,GAAC,CAAA,IAAI,IACD,UAAU,EAAC,qBAAqB,EAChC,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,QAAQ,EAAE,CAAC,EAAA,SAAA,EACH,yBAAyB,EAEhC,QAAA,EAAA,KAAK,GACH,CACV,EACA,QAAQ,KACLA,GAAA,CAAC,IAAI,EACD,EAAA,UAAU,EAAC,iBAAiB,EAC5B,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,QAAQ,EAAE,CAAC,EAAA,SAAA,EACH,wBAAwB,EAE/B,QAAA,EAAA,QAAQ,GACN,CACV,CAAA,EAAA,CACE,CACL,EAAA,CAAA,EACR;AACN,CAAC,EACH;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
|
package/Snippet.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import { useChatBubbleMode } from './internal/mode.js';
|
|
4
|
+
import { useChatBubbleColors } from './internal/colors.js';
|
|
6
5
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
7
|
-
import { s as styles } from './chat-bubble-
|
|
6
|
+
import { s as styles } from './chat-bubble-kJusmHys.js';
|
|
7
|
+
import './internal/mode.js';
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* Сниппет: дополнительная информация к сообщению
|
|
11
11
|
*/
|
|
12
12
|
const ChatBubbleSnippetComponent = forwardRef(({ children, 'data-qa': dataQa = 'chat-bubble-snippet', message, subtitle, title, ...props }, ref) => {
|
|
13
|
-
const colors =
|
|
13
|
+
const colors = useChatBubbleColors();
|
|
14
14
|
return (jsxs("div", { ...props, className: styles.snippet, "data-qa": dataQa, ref: ref, children: [title && (jsx(Text, { typography: "subtitle-3-semibold", style: colors.text, "data-qa": "chat-bubble-snippet-title", children: title })), subtitle && (jsx(Text, { typography: "subtitle-3-semibold", style: colors.text, maxLines: 2, "data-qa": "chat-bubble-snippet-subtitle", children: subtitle })), message && (jsx(Text, { typography: "label-4-regular", style: colors.text, "data-qa": "chat-bubble-snippet-message", children: message })), children] }));
|
|
15
15
|
});
|
|
16
|
-
ChatBubbleSnippetComponent.displayName = '
|
|
16
|
+
ChatBubbleSnippetComponent.displayName = 'ChatBubbleSnippet';
|
|
17
17
|
const ChatBubbleSnippet = ChatBubbleSnippetComponent;
|
|
18
18
|
|
|
19
19
|
export { ChatBubbleSnippet };
|
package/Snippet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snippet.js","sources":["src/Snippet.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"Snippet.js","sources":["src/Snippet.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { useChatBubbleColors } from '@hh.ru/magritte-ui-chat-bubble/internal/colors';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-bubble.less';\n\nexport interface ChatBubbleSnippetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Заголовок сниппета */\n title?: ReactNode;\n /** Подзаголовок сниппета */\n subtitle?: ReactNode;\n /** Описание под заголовками */\n message?: ReactNode;\n /** Содержимое под текстом (превью, карта, кастомный контент) */\n children?: ReactNode;\n /**\n * Значение data-qa\n * @default chat-bubble-snippet\n */\n 'data-qa'?: string;\n}\n\n/**\n * Сниппет: дополнительная информация к сообщению\n */\nconst ChatBubbleSnippetComponent = forwardRef<HTMLDivElement, ChatBubbleSnippetProps>(\n ({ children, 'data-qa': dataQa = 'chat-bubble-snippet', message, subtitle, title, ...props }, ref) => {\n const colors = useChatBubbleColors();\n\n return (\n <div {...props} className={styles.snippet} data-qa={dataQa} ref={ref}>\n {title && (\n <Text typography=\"subtitle-3-semibold\" style={colors.text} data-qa=\"chat-bubble-snippet-title\">\n {title}\n </Text>\n )}\n {subtitle && (\n <Text\n typography=\"subtitle-3-semibold\"\n style={colors.text}\n maxLines={2}\n data-qa=\"chat-bubble-snippet-subtitle\"\n >\n {subtitle}\n </Text>\n )}\n {message && (\n <Text typography=\"label-4-regular\" style={colors.text} data-qa=\"chat-bubble-snippet-message\">\n {message}\n </Text>\n )}\n {children}\n </div>\n );\n }\n);\n\nChatBubbleSnippetComponent.displayName = 'ChatBubbleSnippet';\n\nexport const ChatBubbleSnippet = ChatBubbleSnippetComponent;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAuBA;;AAEG;AACH,MAAM,0BAA0B,GAAG,UAAU,CACzC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,qBAAqB,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACjG,IAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,IAAA,QACIA,IAAS,CAAA,KAAA,EAAA,EAAA,GAAA,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,aAAW,MAAM,EAAE,GAAG,EAAE,GAAG,aAC/D,KAAK,KACFC,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,qBAAqB,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAA,SAAA,EAAU,2BAA2B,EACzF,QAAA,EAAA,KAAK,GACH,CACV,EACA,QAAQ,KACLA,IAAC,IAAI,EAAA,EACD,UAAU,EAAC,qBAAqB,EAChC,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,QAAQ,EAAE,CAAC,EAAA,SAAA,EACH,8BAA8B,EAErC,QAAA,EAAA,QAAQ,GACN,CACV,EACA,OAAO,KACJA,IAAC,IAAI,EAAA,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,aAAU,6BAA6B,EAAA,QAAA,EACvF,OAAO,EACL,CAAA,CACV,EACA,QAAQ,CAAA,EAAA,CACP,EACR;AACN,CAAC,CACJ,CAAC;AAEF,0BAA0B,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEtD,MAAM,iBAAiB,GAAG;;;;"}
|
package/Status.js
CHANGED
|
@@ -7,7 +7,7 @@ import { getColors } from './internal/colors.js';
|
|
|
7
7
|
import { useChatBubbleMode } from './internal/mode.js';
|
|
8
8
|
import { EyeOutlinedSize16, ClockOutlinedSize16, CheckOutlinedSize16, CheckDoubleOutlinedSize16 } from '@hh.ru/magritte-ui-icon/icon';
|
|
9
9
|
import { TooltipHover } from '@hh.ru/magritte-ui-tooltip';
|
|
10
|
-
import { s as styles } from './chat-bubble-
|
|
10
|
+
import { s as styles } from './chat-bubble-kJusmHys.js';
|
|
11
11
|
|
|
12
12
|
const ICON = {
|
|
13
13
|
sending: ClockOutlinedSize16,
|
|
@@ -28,7 +28,7 @@ const ChatBubbleStatus = forwardRef(({ children, 'data-qa': dataQa = 'chat-bubbl
|
|
|
28
28
|
const Icon = isBot ? EyeOutlinedSize16 : ICON[value];
|
|
29
29
|
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 })] }));
|
|
30
30
|
});
|
|
31
|
-
ChatBubbleStatus.displayName = '
|
|
31
|
+
ChatBubbleStatus.displayName = 'ChatBubbleStatus';
|
|
32
32
|
|
|
33
33
|
export { ChatBubbleStatus };
|
|
34
34
|
//# sourceMappingURL=Status.js.map
|
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 = '
|
|
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,8 +1,8 @@
|
|
|
1
|
-
import '
|
|
1
|
+
import './index.css';
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
|
-
import { useChatBubbleMode } from './mode.js';
|
|
5
|
-
import { s as styles } from '
|
|
4
|
+
import { useChatBubbleMode } from './internal/mode.js';
|
|
5
|
+
import { s as styles } from './chat-bubble-kJusmHys.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
|
|
8
8
|
const OUTLINE = 'M6.5 0C6.5 7.5 5.2 11.8 1.6 13.4C0.9 13.9 0.6 14.5 1.1 14.5H7';
|
package/Tail.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tail.js","sources":["src/Tail.tsx"],"sourcesContent":["import { type FC } from 'react';\nimport classnames from 'classnames';\n\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\n\nimport styles from './chat-bubble.less';\n\nconst 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';\n\n/** Хвост сообщения */\nexport const Tail: FC = () => {\n const mode = useChatBubbleMode();\n\n return (\n <svg\n className={classnames(styles.tail, { [styles.tailOutgoing]: mode === 'outgoing' })}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"7\"\n height=\"15\"\n viewBox=\"0 0 7 15\"\n fill=\"none\"\n aria-hidden\n focusable=\"false\"\n >\n {/* Заливка заходит под границу баббла и перекрывает её в месте стыка */}\n <path d={`${OUTLINE}V0Z`} fill=\"var(--magritte-chat-bubble-background)\" />\n <path d={OUTLINE} stroke=\"var(--magritte-chat-bubble-border)\" strokeWidth=\"1\" />\n </svg>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAOA,MAAM,OAAO,GAAG,+DAA+D,CAAC;AAEhF;AACO,MAAM,IAAI,GAAO,MAAK;AACzB,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AAEjC,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,GAAG,IAAI,KAAK,UAAU,EAAE,CAAC,EAClF,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EAAA,aAAA,EAAA,IAAA,EAEX,SAAS,EAAC,OAAO,EAGjB,QAAA,EAAA,CAAAC,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAE,CAAA,EAAG,OAAO,CAAA,GAAA,CAAK,EAAE,IAAI,EAAC,wCAAwC,EAAA,CAAG,EAC1EA,GAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,EAAC,oCAAoC,EAAC,WAAW,EAAC,GAAG,EAAG,CAAA,CAAA,EAAA,CAC9E,EACR;AACN;;;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chat-bubble-kJusmHys.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-6-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-6-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-6-0{
|
|
54
54
|
max-width:min(460px, 100%);
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
|
-
.magritte-outgoing___3n00o_1-
|
|
57
|
+
.magritte-outgoing___3n00o_1-6-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-6-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-6-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-6-0{
|
|
78
78
|
position:relative;
|
|
79
79
|
box-sizing:border-box;
|
|
80
80
|
min-width:0;
|
|
@@ -85,83 +85,78 @@
|
|
|
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-6-0 .magritte-bubble___NVuDI_1-6-0{
|
|
89
89
|
border-bottom-left-radius:0;
|
|
90
90
|
}
|
|
91
|
-
.magritte-with-tail___IdixJ_1-
|
|
91
|
+
.magritte-with-tail___IdixJ_1-6-0.magritte-outgoing___3n00o_1-6-0 .magritte-bubble___NVuDI_1-6-0{
|
|
92
92
|
border-bottom-left-radius:20px;
|
|
93
93
|
border-bottom-right-radius:0;
|
|
94
94
|
}
|
|
95
|
-
.magritte-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
margin-bottom:4px;
|
|
100
|
-
}
|
|
101
|
-
.magritte-message-title___dgBFk_1-5-1{
|
|
102
|
-
margin-bottom:4px;
|
|
95
|
+
.magritte-tail___E2hdk_1-6-0{
|
|
96
|
+
position:absolute;
|
|
97
|
+
bottom:-1px;
|
|
98
|
+
left:-7px;
|
|
103
99
|
}
|
|
104
|
-
.magritte-
|
|
105
|
-
|
|
100
|
+
.magritte-tail-outgoing___Pn3MI_1-6-0{
|
|
101
|
+
left:auto;
|
|
102
|
+
right:-7px;
|
|
103
|
+
transform:scaleX(-1);
|
|
106
104
|
}
|
|
107
|
-
.magritte-buttons___yQqBi_1-
|
|
105
|
+
.magritte-buttons___yQqBi_1-6-0{
|
|
108
106
|
display:grid;
|
|
109
107
|
grid-template-columns:repeat(2, 1fr);
|
|
110
108
|
gap:8px;
|
|
111
109
|
width:100%;
|
|
112
110
|
margin-top:4px;
|
|
113
111
|
}
|
|
114
|
-
.magritte-buttons___yQqBi_1-
|
|
112
|
+
.magritte-buttons___yQqBi_1-6-0 > *:last-child:nth-child(odd){
|
|
115
113
|
grid-column:span 2;
|
|
116
114
|
}
|
|
117
|
-
.magritte-actions___I5GSz_1-
|
|
115
|
+
.magritte-actions___I5GSz_1-6-0{
|
|
118
116
|
display:flex;
|
|
119
117
|
flex-wrap:wrap;
|
|
120
118
|
gap:2px;
|
|
121
119
|
margin-top:4px;
|
|
122
120
|
}
|
|
123
|
-
.magritte-error-text___1ZxWY_1-
|
|
121
|
+
.magritte-error-text___1ZxWY_1-6-0{
|
|
124
122
|
margin-top:2px;
|
|
125
123
|
}
|
|
126
|
-
.magritte-file___k2IKy_1-
|
|
124
|
+
.magritte-file___k2IKy_1-6-0{
|
|
127
125
|
display:flex;
|
|
128
126
|
align-items:flex-end;
|
|
129
127
|
}
|
|
130
|
-
.magritte-
|
|
131
|
-
margin-top:12px;
|
|
132
|
-
}
|
|
133
|
-
.magritte-file-preview___eJKu8_1-5-1{
|
|
128
|
+
.magritte-file-preview___eJKu8_1-6-0{
|
|
134
129
|
display:block;
|
|
135
130
|
width:48px;
|
|
136
131
|
height:48px;
|
|
137
132
|
border-radius:8px;
|
|
138
133
|
object-fit:cover;
|
|
139
134
|
}
|
|
140
|
-
.magritte-media___9jH2k_1-
|
|
135
|
+
.magritte-media___9jH2k_1-6-0{
|
|
141
136
|
display:flex;
|
|
142
137
|
position:relative;
|
|
143
138
|
box-sizing:border-box;
|
|
144
139
|
min-width:120px;
|
|
145
140
|
min-height:120px;
|
|
146
141
|
max-height:min(60vh, 452px);
|
|
147
|
-
margin
|
|
142
|
+
margin:0 -8px;
|
|
148
143
|
border-radius:16px;
|
|
149
144
|
overflow:hidden;
|
|
150
145
|
box-shadow:inset 0 0 0 1px var(--magritte-color-component-chat-bubble-border-image-v25-0-1);
|
|
151
146
|
}
|
|
152
147
|
@media (min-width: 1020px){
|
|
153
|
-
body.magritte-old-layout .magritte-media___9jH2k_1-
|
|
148
|
+
body.magritte-old-layout .magritte-media___9jH2k_1-6-0{
|
|
154
149
|
max-width:452px;
|
|
155
150
|
max-height:452px;
|
|
156
151
|
}
|
|
157
152
|
}
|
|
158
153
|
@media (min-width: 1024px){
|
|
159
|
-
body:not(.magritte-old-layout) .magritte-media___9jH2k_1-
|
|
154
|
+
body:not(.magritte-old-layout) .magritte-media___9jH2k_1-6-0{
|
|
160
155
|
max-width:452px;
|
|
161
156
|
max-height:452px;
|
|
162
157
|
}
|
|
163
158
|
}
|
|
164
|
-
.magritte-media-blur___TbiMa_1-
|
|
159
|
+
.magritte-media-blur___TbiMa_1-6-0{
|
|
165
160
|
position:absolute;
|
|
166
161
|
top:-96px;
|
|
167
162
|
left:-96px;
|
|
@@ -171,7 +166,7 @@
|
|
|
171
166
|
filter:blur(48px);
|
|
172
167
|
object-fit:cover;
|
|
173
168
|
}
|
|
174
|
-
.magritte-media-image___G-FkF_1-
|
|
169
|
+
.magritte-media-image___G-FkF_1-6-0{
|
|
175
170
|
display:block;
|
|
176
171
|
position:relative;
|
|
177
172
|
max-width:100%;
|
|
@@ -179,66 +174,62 @@
|
|
|
179
174
|
margin:auto;
|
|
180
175
|
}
|
|
181
176
|
@media (min-width: 1020px){
|
|
182
|
-
body.magritte-old-layout .magritte-media-image___G-FkF_1-
|
|
177
|
+
body.magritte-old-layout .magritte-media-image___G-FkF_1-6-0{
|
|
183
178
|
max-height:452px;
|
|
184
179
|
}
|
|
185
180
|
}
|
|
186
181
|
@media (min-width: 1024px){
|
|
187
|
-
body:not(.magritte-old-layout) .magritte-media-image___G-FkF_1-
|
|
182
|
+
body:not(.magritte-old-layout) .magritte-media-image___G-FkF_1-6-0{
|
|
188
183
|
max-height:452px;
|
|
189
184
|
}
|
|
190
185
|
}
|
|
191
|
-
.magritte-media-content___n3XbD_1-
|
|
186
|
+
.magritte-media-content___n3XbD_1-6-0{
|
|
192
187
|
display:flex;
|
|
193
188
|
position:absolute;
|
|
194
189
|
inset:0;
|
|
195
190
|
align-items:center;
|
|
196
191
|
justify-content:center;
|
|
197
192
|
}
|
|
198
|
-
.magritte-media-format___AdfCK_1-
|
|
193
|
+
.magritte-media-format___AdfCK_1-6-0{
|
|
199
194
|
display:flex;
|
|
200
195
|
position:absolute;
|
|
201
|
-
top:4px;
|
|
202
|
-
left:4px;
|
|
203
196
|
padding:2px 8px;
|
|
204
197
|
background-color:var(--magritte-color-background-overlay-v25-0-1);
|
|
205
198
|
border-radius:12px;
|
|
206
199
|
backdrop-filter:blur(24px);
|
|
200
|
+
top:4px;
|
|
201
|
+
left:4px;
|
|
207
202
|
}
|
|
208
|
-
.magritte-media-meta___oSxxr_1-
|
|
203
|
+
.magritte-media-meta___oSxxr_1-6-0{
|
|
209
204
|
--magritte-ui-text-color-override:var(--magritte-color-text-constant-v25-0-1);
|
|
210
205
|
display:flex;
|
|
211
206
|
position:absolute;
|
|
212
|
-
right:4px;
|
|
213
|
-
bottom:4px;
|
|
214
|
-
align-items:center;
|
|
215
207
|
padding:2px 8px;
|
|
216
208
|
background-color:var(--magritte-color-background-overlay-v25-0-1);
|
|
217
209
|
border-radius:12px;
|
|
218
210
|
backdrop-filter:blur(24px);
|
|
211
|
+
right:4px;
|
|
212
|
+
bottom:4px;
|
|
213
|
+
align-items:center;
|
|
219
214
|
}
|
|
220
|
-
.magritte-media-meta___oSxxr_1-
|
|
215
|
+
.magritte-media-meta___oSxxr_1-6-0:empty{
|
|
221
216
|
display:none;
|
|
222
217
|
}
|
|
223
|
-
.magritte-media-meta___oSxxr_1-
|
|
218
|
+
.magritte-media-meta___oSxxr_1-6-0 > span{
|
|
224
219
|
margin-left:0;
|
|
225
220
|
}
|
|
226
|
-
.magritte-
|
|
227
|
-
margin-bottom:12px;
|
|
228
|
-
}
|
|
229
|
-
.magritte-reply___-QCK7_1-5-1{
|
|
221
|
+
.magritte-reply___-QCK7_1-6-0{
|
|
230
222
|
display:flex;
|
|
231
223
|
position:relative;
|
|
232
|
-
align-items:center;
|
|
233
224
|
padding:8px;
|
|
234
|
-
gap:8px;
|
|
235
225
|
padding-left:12px;
|
|
236
226
|
background-color:var(--magritte-chat-bubble-snippet-background);
|
|
237
227
|
border-radius:8px;
|
|
238
|
-
margin-bottom:4px;
|
|
239
228
|
overflow:hidden;
|
|
229
|
+
align-items:center;
|
|
230
|
+
gap:8px;
|
|
240
231
|
}
|
|
241
|
-
.magritte-reply___-QCK7_1-
|
|
232
|
+
.magritte-reply___-QCK7_1-6-0::before{
|
|
242
233
|
content:'';
|
|
243
234
|
position:absolute;
|
|
244
235
|
top:0;
|
|
@@ -247,7 +238,7 @@
|
|
|
247
238
|
width:4px;
|
|
248
239
|
background-color:var(--magritte-chat-bubble-snippet-line);
|
|
249
240
|
}
|
|
250
|
-
.magritte-reply-preview___qvlNT_1-
|
|
241
|
+
.magritte-reply-preview___qvlNT_1-6-0{
|
|
251
242
|
display:block;
|
|
252
243
|
flex-shrink:0;
|
|
253
244
|
width:40px;
|
|
@@ -257,26 +248,23 @@
|
|
|
257
248
|
outline-offset:-1px;
|
|
258
249
|
object-fit:cover;
|
|
259
250
|
}
|
|
260
|
-
.magritte-reply-body___f2xx7_1-
|
|
251
|
+
.magritte-reply-body___f2xx7_1-6-0{
|
|
261
252
|
display:flex;
|
|
262
253
|
flex-direction:column;
|
|
263
254
|
min-width:0;
|
|
264
255
|
}
|
|
265
|
-
.magritte-snippet___8k9xb_1-
|
|
256
|
+
.magritte-snippet___8k9xb_1-6-0{
|
|
266
257
|
display:flex;
|
|
267
258
|
position:relative;
|
|
268
|
-
flex-direction:column;
|
|
269
|
-
gap:2px;
|
|
270
259
|
padding:8px;
|
|
271
260
|
padding-left:12px;
|
|
272
261
|
background-color:var(--magritte-chat-bubble-snippet-background);
|
|
273
262
|
border-radius:8px;
|
|
274
263
|
overflow:hidden;
|
|
264
|
+
flex-direction:column;
|
|
265
|
+
gap:2px;
|
|
275
266
|
}
|
|
276
|
-
.magritte-snippet___8k9xb_1-
|
|
277
|
-
margin-bottom:4px;
|
|
278
|
-
}
|
|
279
|
-
.magritte-snippet___8k9xb_1-5-1::before{
|
|
267
|
+
.magritte-snippet___8k9xb_1-6-0::before{
|
|
280
268
|
content:'';
|
|
281
269
|
position:absolute;
|
|
282
270
|
top:0;
|
|
@@ -285,7 +273,7 @@
|
|
|
285
273
|
width:4px;
|
|
286
274
|
background-color:var(--magritte-chat-bubble-snippet-line);
|
|
287
275
|
}
|
|
288
|
-
.magritte-snippet___8k9xb_1-
|
|
276
|
+
.magritte-snippet___8k9xb_1-6-0 img{
|
|
289
277
|
display:block;
|
|
290
278
|
max-width:100%;
|
|
291
279
|
border-radius:4px;
|
|
@@ -293,32 +281,7 @@
|
|
|
293
281
|
outline-offset:-1px;
|
|
294
282
|
margin-top:6px;
|
|
295
283
|
}
|
|
296
|
-
.magritte-
|
|
297
|
-
margin-top:8px;
|
|
298
|
-
}
|
|
299
|
-
.magritte-status___dHzCt_1-5-1{
|
|
300
|
-
display:inline-flex;
|
|
301
|
-
vertical-align:middle;
|
|
302
|
-
}
|
|
303
|
-
.magritte-status___dHzCt_1-5-1:not(:first-child){
|
|
304
|
-
margin-left:4px;
|
|
305
|
-
}
|
|
306
|
-
.magritte-content-with-header___wiNKB_1-5-1 > .magritte-file___k2IKy_1-5-1:first-child,
|
|
307
|
-
.magritte-content-with-header___wiNKB_1-5-1 > .magritte-media___9jH2k_1-5-1:first-child{
|
|
308
|
-
margin-top:8px;
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
.magritte-tail___-1lJ0_1-5-1{
|
|
312
|
-
position:absolute;
|
|
313
|
-
bottom:-1px;
|
|
314
|
-
left:-7px;
|
|
315
|
-
}
|
|
316
|
-
.magritte-tail_outgoing___cnyh3_1-5-1{
|
|
317
|
-
left:auto;
|
|
318
|
-
right:-7px;
|
|
319
|
-
transform:scaleX(-1);
|
|
320
|
-
}
|
|
321
|
-
.magritte-meta___HT7lp_1-5-1{
|
|
284
|
+
.magritte-meta___1qhjm_1-6-0{
|
|
322
285
|
float:right;
|
|
323
286
|
margin-left:12px;
|
|
324
287
|
white-space:nowrap;
|
|
@@ -331,3 +294,50 @@
|
|
|
331
294
|
text-transform:none;
|
|
332
295
|
text-decoration:none;
|
|
333
296
|
}
|
|
297
|
+
.magritte-status___dHzCt_1-6-0{
|
|
298
|
+
display:inline-flex;
|
|
299
|
+
vertical-align:middle;
|
|
300
|
+
}
|
|
301
|
+
.magritte-status___dHzCt_1-6-0:not(:first-child){
|
|
302
|
+
margin-left:4px;
|
|
303
|
+
}
|
|
304
|
+
.magritte-message-title___dgBFk_1-6-0{
|
|
305
|
+
margin-bottom:4px;
|
|
306
|
+
}
|
|
307
|
+
.magritte-label___i0Wyt_1-6-0 + .magritte-media___9jH2k_1-6-0,
|
|
308
|
+
.magritte-label___i0Wyt_1-6-0 + .magritte-message___7TEpw_1-6-0,
|
|
309
|
+
.magritte-label___i0Wyt_1-6-0 + .magritte-snippet___8k9xb_1-6-0,
|
|
310
|
+
.magritte-message___7TEpw_1-6-0 + .magritte-message___7TEpw_1-6-0,
|
|
311
|
+
.magritte-bubble___NVuDI_1-6-0 > .magritte-meta___1qhjm_1-6-0{
|
|
312
|
+
margin-top:4px;
|
|
313
|
+
}
|
|
314
|
+
.magritte-label___i0Wyt_1-6-0 + .magritte-reply___-QCK7_1-6-0,
|
|
315
|
+
.magritte-reply___-QCK7_1-6-0 + .magritte-media___9jH2k_1-6-0,
|
|
316
|
+
.magritte-reply___-QCK7_1-6-0 + .magritte-message___7TEpw_1-6-0,
|
|
317
|
+
.magritte-reply___-QCK7_1-6-0 + .magritte-snippet___8k9xb_1-6-0,
|
|
318
|
+
.magritte-media___9jH2k_1-6-0 + .magritte-snippet___8k9xb_1-6-0{
|
|
319
|
+
margin-top:8px;
|
|
320
|
+
}
|
|
321
|
+
.magritte-label___i0Wyt_1-6-0 + .magritte-file___k2IKy_1-6-0,
|
|
322
|
+
.magritte-reply___-QCK7_1-6-0 + .magritte-file___k2IKy_1-6-0,
|
|
323
|
+
.magritte-media___9jH2k_1-6-0 + .magritte-file___k2IKy_1-6-0,
|
|
324
|
+
.magritte-media___9jH2k_1-6-0 + .magritte-message___7TEpw_1-6-0,
|
|
325
|
+
.magritte-file___k2IKy_1-6-0 + .magritte-message___7TEpw_1-6-0,
|
|
326
|
+
.magritte-file___k2IKy_1-6-0 + .magritte-snippet___8k9xb_1-6-0{
|
|
327
|
+
margin-top:12px;
|
|
328
|
+
}
|
|
329
|
+
.magritte-message___7TEpw_1-6-0 + .magritte-snippet___8k9xb_1-6-0{
|
|
330
|
+
margin-top:16px;
|
|
331
|
+
}
|
|
332
|
+
.magritte-file___k2IKy_1-6-0 + .magritte-file___k2IKy_1-6-0{
|
|
333
|
+
margin-top:24px;
|
|
334
|
+
}
|
|
335
|
+
.magritte-label___i0Wyt_1-6-0{
|
|
336
|
+
margin-top:-4px;
|
|
337
|
+
}
|
|
338
|
+
.magritte-bubble___NVuDI_1-6-0 > .magritte-media___9jH2k_1-6-0:first-child{
|
|
339
|
+
margin-top:-8px;
|
|
340
|
+
}
|
|
341
|
+
.magritte-bubble___NVuDI_1-6-0 > .magritte-media___9jH2k_1-6-0:not(:has( ~ :not(.magritte-tail___E2hdk_1-6-0))){
|
|
342
|
+
margin-bottom:-8px;
|
|
343
|
+
}
|
package/index.js
CHANGED
|
@@ -15,19 +15,18 @@ import './internal/utils.js';
|
|
|
15
15
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
16
16
|
import '@hh.ru/magritte-ui-link';
|
|
17
17
|
import '@hh.ru/magritte-ui-loader';
|
|
18
|
-
import './chat-bubble-
|
|
18
|
+
import './chat-bubble-kJusmHys.js';
|
|
19
19
|
import './Label.js';
|
|
20
20
|
import '@hh.ru/magritte-ui-typography';
|
|
21
21
|
import './Media.js';
|
|
22
22
|
import './Message.js';
|
|
23
|
+
import './Meta.js';
|
|
23
24
|
import './Reply.js';
|
|
24
25
|
import './Snippet.js';
|
|
25
26
|
import './Status.js';
|
|
26
27
|
import '@hh.ru/magritte-common-use-multiple-refs';
|
|
27
28
|
import '@hh.ru/magritte-common-use-translation';
|
|
28
29
|
import '@hh.ru/magritte-ui-tooltip';
|
|
29
|
-
import './
|
|
30
|
-
import './chat-bubble-BSNa94vA.js';
|
|
31
|
-
import './internal/Tail.js';
|
|
30
|
+
import './Tail.js';
|
|
32
31
|
import '@hh.ru/magritte-ui-icon';
|
|
33
32
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/internal/colors.d.ts
CHANGED
package/internal/colors.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import './../index.css';
|
|
2
|
+
import { useChatBubbleMode } from './mode.js';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
2
5
|
const COLORS = {
|
|
3
6
|
incoming: {
|
|
4
7
|
text: 'primary',
|
|
@@ -41,6 +44,8 @@ const COLORS = {
|
|
|
41
44
|
},
|
|
42
45
|
};
|
|
43
46
|
const getColors = (mode) => COLORS[mode];
|
|
47
|
+
// Для подкомпонентов, которые сидят под mode провайдером
|
|
48
|
+
const useChatBubbleColors = () => COLORS[useChatBubbleMode()];
|
|
44
49
|
|
|
45
|
-
export { getColors };
|
|
50
|
+
export { getColors, useChatBubbleColors };
|
|
46
51
|
//# sourceMappingURL=colors.js.map
|
package/internal/colors.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","sources":["src/internal/colors.ts"],"sourcesContent":["import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';\nimport type { ButtonStyle } from '@hh.ru/magritte-ui-button';\nimport type { ChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/types';\nimport type { IconColor } from '@hh.ru/magritte-ui-icon';\nimport type { LinkProps } from '@hh.ru/magritte-ui-link';\nimport type { TextStyle } from '@hh.ru/magritte-ui-typography';\n\nexport interface ChatBubbleColors {\n /** Основной текст сообщения, названия файла, текст сниппета */\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: ButtonStyle;\n /** Ссылка-действие: «Открыть», «Загрузить» */\n link: Pick<LinkProps, 'style' | 'mode'>;\n /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */\n secondaryIcon: IconColor;\n /** Иконка файла */\n fileIcon: IconColor;\n /** Подложка под иконкой файла */\n fileIconBackground: TokenColorBackground;\n}\n\nconst COLORS: Record<ChatBubbleMode, ChatBubbleColors> = {\n incoming: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'accent',\n replyTitle: 'accent',\n statusIcon: 'constant',\n actionsIcon: 'secondary',\n button: 'neutral',\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'accent',\n },\n outgoing: {\n text: 'constant',\n secondaryText: 'constant',\n accentText: 'constant',\n replyTitle: 'constant',\n statusIcon: 'constant',\n actionsIcon: 'accent',\n button: 'accent',\n link: { style: 'constant', mode: 'secondary' },\n secondaryIcon: 'constant',\n fileIcon: 'accent',\n fileIconBackground: 'accent-secondary',\n },\n bot: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'special',\n replyTitle: 'accent',\n statusIcon: 'special',\n actionsIcon: 'special',\n button: 'special',\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'special',\n },\n};\n\nexport const getColors = (mode: ChatBubbleMode): ChatBubbleColors => COLORS[mode];\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"colors.js","sources":["src/internal/colors.ts"],"sourcesContent":["import type { TokenColorBackground } from '@hh.ru/magritte-design-tokens/types';\nimport type { ButtonStyle } from '@hh.ru/magritte-ui-button';\nimport { 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: ButtonStyle;\n /** Ссылка-действие: «Открыть», «Загрузить» */\n link: Pick<LinkProps, 'style' | 'mode'>;\n /** Иконка рядом со второстепенным текстом: лоадер загрузки файла */\n secondaryIcon: IconColor;\n /** Иконка файла */\n fileIcon: IconColor;\n /** Подложка под иконкой файла */\n fileIconBackground: TokenColorBackground;\n}\n\nconst COLORS: Record<ChatBubbleMode, ChatBubbleColors> = {\n incoming: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'accent',\n replyTitle: 'accent',\n statusIcon: 'constant',\n actionsIcon: 'secondary',\n button: 'neutral',\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'accent',\n },\n outgoing: {\n text: 'constant',\n secondaryText: 'constant',\n accentText: 'constant',\n replyTitle: 'constant',\n statusIcon: 'constant',\n actionsIcon: 'accent',\n button: 'accent',\n link: { style: 'constant', mode: 'secondary' },\n secondaryIcon: 'constant',\n fileIcon: 'accent',\n fileIconBackground: 'accent-secondary',\n },\n bot: {\n text: 'primary',\n secondaryText: 'secondary',\n accentText: 'special',\n replyTitle: 'accent',\n statusIcon: 'special',\n actionsIcon: 'special',\n button: 'special',\n link: { style: 'accent' },\n secondaryIcon: 'secondary',\n fileIcon: 'constant',\n fileIconBackground: 'special',\n },\n};\n\nexport const getColors = (mode: ChatBubbleMode): ChatBubbleColors => COLORS[mode];\n\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;AACxB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,QAAQ;AAC/B,KAAA;AACD,IAAA,QAAQ,EAAE;AACN,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,WAAW,EAAE,QAAQ;AACrB,QAAA,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE;AAC9C,QAAA,aAAa,EAAE,UAAU;AACzB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,kBAAkB,EAAE,kBAAkB;AACzC,KAAA;AACD,IAAA,GAAG,EAAE;AACD,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;AACzB,QAAA,aAAa,EAAE,WAAW;AAC1B,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,kBAAkB,EAAE,SAAS;AAChC,KAAA;CACJ,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,IAAoB,KAAuB,MAAM,CAAC,IAAI,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.6.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "b18b8ac9f326bb5990880afd7e2cf8939781639d"
|
|
44
44
|
}
|
package/types.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ export interface ChatBubbleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
|
|
|
12
12
|
*/
|
|
13
13
|
header?: ReactNode;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
15
|
+
* Показывать ли хвост у баббла
|
|
16
16
|
* @default false
|
|
17
17
|
*/
|
|
18
18
|
showTail?: boolean;
|
|
@@ -34,7 +34,7 @@ export interface ChatBubbleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
|
|
|
34
34
|
errorActions?: ReactNode;
|
|
35
35
|
/**
|
|
36
36
|
* Содержимое сообщения
|
|
37
|
-
* -
|
|
37
|
+
* - `ChatBubble.Message`
|
|
38
38
|
* - `ChatBubble.Media`
|
|
39
39
|
* - `ChatBubble.File`
|
|
40
40
|
* - `ChatBubble.Snippet`
|
package/chat-bubble-BSNa94vA.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"tail":"magritte-tail___-1lJ0_1-5-1","tail_outgoing":"magritte-tail_outgoing___cnyh3_1-5-1","tailOutgoing":"magritte-tail_outgoing___cnyh3_1-5-1","meta":"magritte-meta___HT7lp_1-5-1"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=chat-bubble-BSNa94vA.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chat-bubble-BSNa94vA.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/chat-bubble-fnws1moq.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"chat-bubble":"magritte-chat-bubble___ds9CP_1-5-1","chatBubble":"magritte-chat-bubble___ds9CP_1-5-1","outgoing":"magritte-outgoing___3n00o_1-5-1","bot":"magritte-bot___Z6vZA_1-5-1","row":"magritte-row___mQNnt_1-5-1","bubble":"magritte-bubble___NVuDI_1-5-1","with-tail":"magritte-with-tail___IdixJ_1-5-1","withTail":"magritte-with-tail___IdixJ_1-5-1","header":"magritte-header___Px2to_1-5-1","message-title":"magritte-message-title___dgBFk_1-5-1","messageTitle":"magritte-message-title___dgBFk_1-5-1","message":"magritte-message___7TEpw_1-5-1","buttons":"magritte-buttons___yQqBi_1-5-1","actions":"magritte-actions___I5GSz_1-5-1","error-text":"magritte-error-text___1ZxWY_1-5-1","errorText":"magritte-error-text___1ZxWY_1-5-1","file":"magritte-file___k2IKy_1-5-1","file-preview":"magritte-file-preview___eJKu8_1-5-1","filePreview":"magritte-file-preview___eJKu8_1-5-1","media":"magritte-media___9jH2k_1-5-1","media-blur":"magritte-media-blur___TbiMa_1-5-1","mediaBlur":"magritte-media-blur___TbiMa_1-5-1","media-image":"magritte-media-image___G-FkF_1-5-1","mediaImage":"magritte-media-image___G-FkF_1-5-1","media-content":"magritte-media-content___n3XbD_1-5-1","mediaContent":"magritte-media-content___n3XbD_1-5-1","media-format":"magritte-media-format___AdfCK_1-5-1","mediaFormat":"magritte-media-format___AdfCK_1-5-1","media-meta":"magritte-media-meta___oSxxr_1-5-1","mediaMeta":"magritte-media-meta___oSxxr_1-5-1","reply":"magritte-reply___-QCK7_1-5-1","reply-preview":"magritte-reply-preview___qvlNT_1-5-1","replyPreview":"magritte-reply-preview___qvlNT_1-5-1","reply-body":"magritte-reply-body___f2xx7_1-5-1","replyBody":"magritte-reply-body___f2xx7_1-5-1","snippet":"magritte-snippet___8k9xb_1-5-1","status":"magritte-status___dHzCt_1-5-1","content-with-header":"magritte-content-with-header___wiNKB_1-5-1","contentWithHeader":"magritte-content-with-header___wiNKB_1-5-1"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=chat-bubble-fnws1moq.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chat-bubble-fnws1moq.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/internal/Meta.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Meta.js","sources":["src/internal/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":";;;;;AAcA;;;AAGK;AACE,MAAM,IAAI,GAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAI;AAC1D,IAAA,MAAM,aAAa,GAAG,IAAI,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAE/D,IAAA,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;AACzB,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,QACIA,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAU,SAAA,EAAA,kBAAkB,EACnD,QAAA,EAAA,CAAA,IAAI,KACDC,GAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,aAAa,EAAA,QAAA,EACjF,IAAI,EACF,CAAA,CACV,EACA,aAAa,CAAA,EAAA,CACX,EACT;AACN;;;;"}
|
package/internal/Tail.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tail.js","sources":["src/internal/Tail.tsx"],"sourcesContent":["import { type FC } from 'react';\nimport classnames from 'classnames';\n\nimport { useChatBubbleMode } from '@hh.ru/magritte-ui-chat-bubble/internal/mode';\n\nimport styles from './chat-bubble.less';\n\nconst 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';\n\n/** Хвост сообщения */\nexport const Tail: FC = () => {\n const mode = useChatBubbleMode();\n\n return (\n <svg\n className={classnames(styles.tail, { [styles.tailOutgoing]: mode === 'outgoing' })}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"7\"\n height=\"15\"\n viewBox=\"0 0 7 15\"\n fill=\"none\"\n aria-hidden\n focusable=\"false\"\n >\n {/* Заливка заходит под границу баббла и перекрывает её в месте стыка */}\n <path d={`${OUTLINE}V0Z`} fill=\"var(--magritte-chat-bubble-background)\" />\n <path d={OUTLINE} stroke=\"var(--magritte-chat-bubble-border)\" strokeWidth=\"1\" />\n </svg>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAOA,MAAM,OAAO,GAAG,+DAA+D,CAAC;AAEhF;AACO,MAAM,IAAI,GAAO,MAAK;AACzB,IAAA,MAAM,IAAI,GAAG,iBAAiB,EAAE,CAAC;AAEjC,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,GAAG,IAAI,KAAK,UAAU,EAAE,CAAC,EAClF,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EAAA,aAAA,EAAA,IAAA,EAEX,SAAS,EAAC,OAAO,EAGjB,QAAA,EAAA,CAAAC,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAE,CAAA,EAAG,OAAO,CAAA,GAAA,CAAK,EAAE,IAAI,EAAC,wCAAwC,EAAA,CAAG,EAC1EA,GAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAE,OAAO,EAAE,MAAM,EAAC,oCAAoC,EAAC,WAAW,EAAC,GAAG,EAAG,CAAA,CAAA,EAAA,CAC9E,EACR;AACN;;;;"}
|
|
File without changes
|
|
File without changes
|