@pega/cosmos-react-social 5.0.0-dev.11.0 → 5.0.0-dev.12.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/lib/components/Chat/Chat.types.d.ts +7 -3
- package/lib/components/Chat/Chat.types.d.ts.map +1 -1
- package/lib/components/Chat/Chat.types.js.map +1 -1
- package/lib/components/Chat/Message.d.ts.map +1 -1
- package/lib/components/Chat/Message.js +6 -4
- package/lib/components/Chat/Message.js.map +1 -1
- package/lib/components/Chat/Message.styles.d.ts +5 -2
- package/lib/components/Chat/Message.styles.d.ts.map +1 -1
- package/lib/components/Chat/Message.styles.js +21 -7
- package/lib/components/Chat/Message.styles.js.map +1 -1
- package/lib/components/Email/ContextMenuPopover.d.ts.map +1 -1
- package/lib/components/Email/ContextMenuPopover.js +22 -14
- package/lib/components/Email/ContextMenuPopover.js.map +1 -1
- package/lib/components/Feed/FeedRichText.js +1 -1
- package/lib/components/Feed/FeedRichText.js.map +1 -1
- package/package.json +4 -4
|
@@ -32,13 +32,17 @@ export type ColorTheme = [
|
|
|
32
32
|
keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>,
|
|
33
33
|
'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark'
|
|
34
34
|
];
|
|
35
|
-
export interface MediaPageLinks
|
|
35
|
+
export interface MediaPageLinks {
|
|
36
36
|
/** Unique id for this push link */
|
|
37
37
|
id: string;
|
|
38
|
+
/** Title of the content */
|
|
39
|
+
title: string;
|
|
40
|
+
/** Href for external links */
|
|
41
|
+
href?: LinkProps['href'];
|
|
42
|
+
/** Callback provided to perform on click */
|
|
43
|
+
onTitleClick?: () => void;
|
|
38
44
|
/** A string to be used as an image src for a thumbnail. */
|
|
39
45
|
thumbnail?: AttachmentItemProps['thumbnail'];
|
|
40
|
-
/** Additional information about the linked resource. */
|
|
41
|
-
title?: string;
|
|
42
46
|
}
|
|
43
47
|
export type MessageHeaderProps = {
|
|
44
48
|
/** message header content */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,KAAK,EACV,SAAS,EACT,MAAM,EACN,cAAc,EACd,UAAU,EACV,SAAS,EACT,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6KAA6K;IAC7K,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,aAAa,GAAG,wBAAwB,CAAC;AAEtF,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY;CAC3D,CAAC;AAEF,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Chat.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.types.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chat.types.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"AAgKA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,OAA8B,EACG,EAAE;IACnC,OAAO,OAAO,CAAC,IAAI,KAAK,SAAS,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EACS,EAAE;IACzC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EACQ,EAAE;IACxC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;AACnC,CAAC,CAAC","sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { DefaultTheme } from 'styled-components';\n\nimport type {\n BaseProps,\n Action,\n NoChildrenProp,\n OmitStrict,\n LinkProps,\n AvatarProps\n} from '@pega/cosmos-react-core';\n\nexport interface AttachmentItemProps extends BaseProps {\n /** Unique Id for this attachment */\n id: string;\n /** Name of the attachment. */\n name: string;\n /**\n * A Cosmos icon name identifier to use for a attachment. Will serve as a fallback to a broken thumbnail.\n * @default 'document-doc'\n */\n icon?: string;\n /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n thumbnail?: string;\n /** Additional information about the attachment. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */\n meta?: string;\n /** When passed, previews the attachment on click */\n onPreview?: (id: string) => void;\n /** Actions list for the attachment */\n actions?: Action[];\n /** When passed, this will render a single icon button or within a MenuButton if onDelete is defined. */\n onDelete?: (id: string) => void;\n}\n\nexport type UserAvailability = 'available' | 'unavailable' | 'temporarilyUnavailable';\n\nexport interface ChatSettingsPanelProps extends NoChildrenProp {\n status?: UserAvailability;\n label: string;\n onClick: () => void;\n}\n\nexport type ColorTheme = [\n keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>,\n 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark'\n];\n\nexport interface MediaPageLinks {\n /** Unique id for this push link */\n id: string;\n /** Title of the content */\n title: string;\n /** Href for external links */\n href?: LinkProps['href'];\n /** Callback provided to perform on click */\n onTitleClick?: () => void;\n /** A string to be used as an image src for a thumbnail. */\n thumbnail?: AttachmentItemProps['thumbnail'];\n}\n\nexport type MessageHeaderProps = {\n /** message header content */\n content?: ReactNode;\n /** meta data */\n meta?: ReactNode;\n};\n\nexport interface MessageProps {\n /** Message to be displayed */\n message?: string;\n /** Attachment list */\n attachments?: AttachmentItemProps[];\n /** Message page push links list */\n mediaPageLinks?: MediaPageLinks[];\n /** timestamp of the message(Formatted) */\n timestamp?: string;\n /** Incoming message/ outgoing message */\n direction: 'in' | 'out';\n /** Avatar information, can be image and name */\n avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n /** Message status */\n status?: 'delivered' | 'opened' | 'undeliverable' | 'sent';\n /** Indicates if this message is being currently typed */\n typing?: boolean;\n /** Message header */\n messageHeader?: MessageHeaderProps;\n /** Sender type */\n senderType: 'customer' | 'agent' | 'bot';\n /** Sender ID, will be helpful in deciding the colour */\n senderId: string;\n /** Number used to determine the color of agent's message */\n agentVariant?: number;\n /** ref to the message wrapper */\n ref?: Ref<HTMLLIElement>;\n}\n\nexport interface TypeIndicatorProps\n extends Pick<MessageProps, 'ref' | 'message' | 'senderId' | 'senderType' | 'agentVariant'> {\n /** Avatar information, can be image and name */\n avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;\n}\n\nexport interface SystemMessageProps extends Pick<MessageProps, 'ref' | 'timestamp'> {\n /** System message to be displayed */\n message: string;\n /** variant of this system message\n * @default 'secondary'\n */\n variant?: 'primary' | 'secondary';\n}\n\nexport interface ChatBodyHandleValue {\n isScrolledToLatest: () => boolean;\n scrollToLatestMessage: () => void;\n scrollToNewMessage: () => void;\n}\n\nexport interface ChatBodyProps {\n /** Transcripts */\n transcripts: {\n /** Unique id of a chat session */\n id: string;\n /** Messages in a chat session */\n messages: ChatBodyListItemProps[];\n }[];\n /** Live chat messages */\n liveChat: ChatBodyListItemProps[];\n /** Total unread messages */\n unreadMessageCount?: number;\n /** on scroll to button */\n onScrollToButtonClick?: () => void;\n /** Indicates if the data is being currently loading */\n loading?: boolean;\n /** Offset of the row item that need to trigger the load more callback */\n offset?: number;\n /** Callback to fetch more rows */\n loadMore?: () => void;\n /** Imperative handle */\n handle?: Ref<ChatBodyHandleValue>;\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n}\n\ntype MessageListItemProps = OmitStrict<MessageProps, 'agentVariant' | 'typing'> & {\n type: 'message';\n id: string;\n};\n\ntype SystemMessageListItemProps = SystemMessageProps & { type: 'system'; id: string };\n\ntype TypeIndicatorListItemPops = OmitStrict<TypeIndicatorProps, 'agentVariant'> & {\n type: 'typing';\n id: string;\n};\n\nexport type ChatBodyListItemProps =\n | MessageListItemProps\n | SystemMessageListItemProps\n | TypeIndicatorListItemPops;\n\nexport const isMessageListItem = (\n message: ChatBodyListItemProps\n): message is MessageListItemProps => {\n return message.type === 'message';\n};\n\nexport const isSystemMessageListItem = (\n message: ChatBodyListItemProps\n): message is SystemMessageListItemProps => {\n return message.type === 'system';\n};\n\nexport const isTypeIndicatorListItem = (\n message: ChatBodyListItemProps\n): message is TypeIndicatorListItemPops => {\n return message.type === 'typing';\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAgB5E,OAAO,KAAK,EAAsB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAKhF,OAAO,KAAK,EAAE,YAAY,EAAuB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAgB5E,OAAO,KAAK,EAAsB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAKhF,OAAO,KAAK,EAAE,YAAY,EAAuB,MAAM,cAAc,CAAC;AA4FtE,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAsO1D,CAAC;AAEH,eAAe,OAAO,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { Avatar, Flex, Icon, registerIcon, SummaryItem, Image, EmojiDisplay, use
|
|
|
5
5
|
import * as documentDocIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/document-doc.icon';
|
|
6
6
|
import * as chainUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain-up.icon';
|
|
7
7
|
import * as flagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';
|
|
8
|
-
import { StyledMessageContainer, StyledMessageMain, StyledMessageBubble, StyledMessageBubbleContent, StyledMediaList, StyledMediaListItem, StyledMediaThumbNail,
|
|
8
|
+
import { StyledMessageContainer, StyledMessageMain, StyledMessageBubble, StyledMessageBubbleContent, StyledMediaList, StyledMediaListItem, StyledMediaThumbNail, StyledMediaMessage, StyledMediaLink, StyledMetaInfoContainer, StyledMetaInfo, StyledBlinkingDot, StyledMediaButton, StyledMessageHeader, StyledMessageHeaderContent, StyledMessageHeaderMeta, StyledUndeliveredIcon, StyledStatusInfo, StyledHeadset, getMessageColors, StyledFlagIcon, StyledHeadsetIconBackground, StyledMediaContent } from './Message.styles';
|
|
9
9
|
registerIcon(documentDocIcon, chainUpIcon, flagWaveSolidIcon);
|
|
10
10
|
const Attachment = (props) => {
|
|
11
11
|
const { id, icon, name, meta, actions = [], onPreview, thumbnail } = props;
|
|
@@ -28,7 +28,7 @@ const Attachment = (props) => {
|
|
|
28
28
|
e.preventDefault();
|
|
29
29
|
e.stopPropagation();
|
|
30
30
|
onPreview?.(id);
|
|
31
|
-
}, alt: name })), _jsx(SummaryItem, { as:
|
|
31
|
+
}, alt: name })), _jsx(SummaryItem, { as: StyledMediaMessage, primary: _jsx(StyledMediaButton, { onClick: (e) => {
|
|
32
32
|
e.preventDefault();
|
|
33
33
|
e.stopPropagation();
|
|
34
34
|
onPreview?.(id);
|
|
@@ -83,10 +83,12 @@ const Message = forwardRef(function Message(props, ref) {
|
|
|
83
83
|
}, children: [_jsxs(StyledMessageBubble, { children: [messageHeader && (_jsxs(Flex, { container: { gap: 0.5, justify: 'between' }, as: StyledMessageHeader, children: [_jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(StyledFlagIcon, { name: 'flag-wave-solid' }), _jsx(StyledMessageHeaderContent, { children: messageHeader.content })] }), _jsx(StyledMessageHeaderMeta, { children: messageHeader.meta })] })), message && (_jsx(StyledMessageBubbleContent, { children: _jsx(EmojiDisplay, { content: message, size: 20 }) })), (attachments.length > 0 || mediaPageLinks.length > 0) && (_jsxs(StyledMediaList, { children: [attachments.map(attachment => {
|
|
84
84
|
return _createElement(Attachment, { ...attachment, key: attachment.id });
|
|
85
85
|
}), mediaPageLinks.map(pagePushLink => {
|
|
86
|
-
const { id, href, title, thumbnail } = pagePushLink;
|
|
86
|
+
const { id, href, title, thumbnail, onTitleClick } = pagePushLink;
|
|
87
87
|
return (_jsxs(Flex, { as: StyledMediaListItem, container: {
|
|
88
88
|
direction: 'column'
|
|
89
|
-
}, children: [thumbnail &&
|
|
89
|
+
}, children: [thumbnail && _jsx(Image, { as: StyledMediaThumbNail, src: thumbnail, alt: title }), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, as: StyledMediaMessage, children: [_jsx(Icon, { name: 'book-open' }), _jsx(Flex, { container: true, as: StyledMediaContent, children: href ? (_jsx(StyledMediaLink, { "aria-label": title, href: href, target: '_blank', rel: 'noreferrer', children: title })) : (_jsx(_Fragment, { children: onTitleClick && (_jsx(StyledMediaButton, { variant: 'link', onClick: () => {
|
|
90
|
+
onTitleClick();
|
|
91
|
+
}, children: title })) })) })] })] }, id));
|
|
90
92
|
})] }))] }), status === 'undeliverable' && message && direction === 'out' && (_jsx(StyledUndeliveredIcon, { name: 'warn-solid' }))] }), !typing && (_jsxs(Flex, { as: StyledMetaInfoContainer, container: {
|
|
91
93
|
justify: messageMetaJustify,
|
|
92
94
|
gap: 1.5
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, MouseEvent } from 'react';\n\nimport {\n Avatar,\n Flex,\n Icon,\n registerIcon,\n SummaryItem,\n Image,\n EmojiDisplay,\n useI18n,\n Actions,\n Tooltip,\n useTheme,\n useElement\n} from '@pega/cosmos-react-core';\nimport type { FlexContainerProps, ForwardProps } from '@pega/cosmos-react-core';\nimport * as documentDocIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/document-doc.icon';\nimport * as chainUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain-up.icon';\nimport * as flagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';\n\nimport type { MessageProps, AttachmentItemProps } from './Chat.types';\nimport {\n StyledMessageContainer,\n StyledMessageMain,\n StyledMessageBubble,\n StyledMessageBubbleContent,\n StyledMediaList,\n StyledMediaListItem,\n StyledMediaThumbNail,\n StyledSummaryItem,\n StyledMediaLink,\n StyledMetaInfoContainer,\n StyledMetaInfo,\n StyledBlinkingDot,\n StyledMediaButton,\n StyledMessageHeader,\n StyledMessageHeaderContent,\n StyledMessageHeaderMeta,\n StyledUndeliveredIcon,\n StyledStatusInfo,\n StyledHeadset,\n getMessageColors,\n StyledFlagIcon,\n StyledHeadsetIconBackground\n} from './Message.styles';\n\nregisterIcon(documentDocIcon, chainUpIcon, flagWaveSolidIcon);\n\nconst Attachment = (props: AttachmentItemProps) => {\n const { id, icon, name, meta, actions = [], onPreview, thumbnail } = props;\n const actionRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n const listener = (e: KeyboardEvent) => {\n if (\n (e.target as HTMLButtonElement)?.getAttribute('aria-expanded') === 'true' &&\n ['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp'].includes(e.key)\n ) {\n e.stopPropagation();\n }\n };\n\n actionRef.current?.addEventListener('keydown', listener);\n\n return () => {\n actionRef.current?.removeEventListener('keydown', listener);\n };\n }, [actions]);\n\n return (\n <Flex\n key={id}\n as={StyledMediaListItem}\n container={{\n direction: 'column'\n }}\n >\n {thumbnail && (\n <Image\n as={StyledMediaThumbNail}\n src={thumbnail}\n onClick={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onPreview?.(id);\n }}\n alt={name}\n />\n )}\n\n <SummaryItem\n as={StyledSummaryItem}\n primary={\n <StyledMediaButton\n onClick={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onPreview?.(id);\n }}\n >\n {name}\n </StyledMediaButton>\n }\n secondary={meta}\n visual={<Icon name={icon || 'document-doc'} />}\n actions={<Actions ref={actionRef} items={actions} iconOnly />}\n />\n </Flex>\n );\n};\n\nconst Message: FunctionComponent<MessageProps & ForwardProps> = forwardRef(function Message(\n props: PropsWithoutRef<MessageProps>,\n ref: MessageProps['ref']\n) {\n const {\n message,\n direction,\n avatarInfo,\n timestamp,\n attachments = [],\n mediaPageLinks = [],\n status,\n typing,\n messageHeader,\n senderType,\n senderId,\n agentVariant,\n ...restProps\n } = props;\n\n const t = useI18n();\n const theme = useTheme();\n const [avatarRef, setAvatarRef] = useElement();\n const { content: messageBubbleBackgroundColor } = useMemo(\n () => getMessageColors(theme, direction, senderType, agentVariant),\n [theme, direction, senderType, agentVariant]\n );\n\n let messageMetaJustify: FlexContainerProps['justify'] = 'between';\n if (timestamp && !status) {\n messageMetaJustify = 'start';\n } else if (!timestamp && status) {\n messageMetaJustify = 'end';\n }\n\n const renderAvatar = useMemo(() => {\n if (direction !== 'in' || (senderType !== 'bot' && !avatarInfo)) {\n return null;\n }\n\n if (senderType === 'agent') {\n return (\n <>\n <StyledHeadset>\n <Avatar\n name={avatarInfo!.name}\n size='m'\n shape='circle'\n imageSrc={avatarInfo!.imageSrc}\n ref={setAvatarRef}\n backgroundColor={messageBubbleBackgroundColor}\n />\n <StyledHeadsetIconBackground>\n <Icon name='headset' />\n </StyledHeadsetIconBackground>\n </StyledHeadset>\n <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n {avatarInfo!.name}\n </Tooltip>\n </>\n );\n }\n\n return (\n <>\n <Avatar\n name={avatarInfo ? avatarInfo.name : t('bot')}\n size='m'\n shape='circle'\n icon={!avatarInfo?.imageSrc && senderType === 'bot' ? 'robot-solid' : undefined}\n imageSrc={avatarInfo?.imageSrc}\n ref={setAvatarRef}\n backgroundColor={messageBubbleBackgroundColor}\n />\n <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n {avatarInfo ? avatarInfo.name : t('bot')}\n </Tooltip>\n </>\n );\n }, [avatarInfo, senderType, direction, avatarRef]);\n\n let ariaLabel: string | undefined;\n const sender = avatarInfo ? avatarInfo.name : senderType;\n\n ariaLabel = t('sender_replied_message', [sender, message || '']);\n if (attachments.length > 0) ariaLabel = t('chat_attachments', [ariaLabel, attachments.length]);\n if (mediaPageLinks.length > 0) ariaLabel = t('chat_links', [ariaLabel, mediaPageLinks.length]);\n if (timestamp) ariaLabel = t('chat_message_at_timestamp', [ariaLabel, timestamp]);\n if (status && direction === 'out') ariaLabel += ` ${t('chat_message_status', [status])}`;\n\n return (\n <Flex\n as={StyledMessageContainer}\n ref={ref}\n container={{\n gap: 1.5,\n direction: direction === 'in' ? 'row' : 'row-reverse'\n }}\n item={{\n shrink: 0\n }}\n hasMessage={!!message}\n direction={direction}\n senderType={senderType}\n typing={typing}\n messageHeader={messageHeader}\n status={status}\n agentVariant={agentVariant}\n aria-label={ariaLabel}\n {...restProps}\n >\n {renderAvatar}\n <Flex\n container={{\n direction: 'column',\n alignItems: direction === 'in' ? 'start' : 'end',\n justify: 'center'\n }}\n as={StyledMessageMain}\n >\n <Flex\n container={{\n direction: direction === 'in' ? 'row' : 'row-reverse',\n alignItems: 'center',\n gap: 0.5\n }}\n >\n <StyledMessageBubble>\n {messageHeader && (\n <Flex container={{ gap: 0.5, justify: 'between' }} as={StyledMessageHeader}>\n <Flex container={{ gap: 0.5 }}>\n <StyledFlagIcon name='flag-wave-solid' />\n <StyledMessageHeaderContent>{messageHeader.content}</StyledMessageHeaderContent>\n </Flex>\n\n <StyledMessageHeaderMeta>{messageHeader.meta}</StyledMessageHeaderMeta>\n </Flex>\n )}\n\n {message && (\n <StyledMessageBubbleContent>\n <EmojiDisplay content={message} size={20} />\n </StyledMessageBubbleContent>\n )}\n\n {(attachments.length > 0 || mediaPageLinks.length > 0) && (\n <StyledMediaList>\n {attachments.map(attachment => {\n return <Attachment {...attachment} key={attachment.id} />;\n })}\n\n {mediaPageLinks.map(pagePushLink => {\n const { id, href, title, thumbnail } = pagePushLink;\n return (\n <Flex\n as={StyledMediaListItem}\n key={id}\n container={{\n direction: 'column'\n }}\n >\n {thumbnail && (\n <Image as={StyledMediaThumbNail} src={thumbnail} alt={title || href} />\n )}\n <SummaryItem\n as={StyledSummaryItem}\n primary={\n <StyledMediaLink\n aria-label={title}\n href={href}\n target='_blank'\n rel='noreferrer'\n >\n {href}\n </StyledMediaLink>\n }\n visual={<Icon name='chain-up' />}\n />\n </Flex>\n );\n })}\n </StyledMediaList>\n )}\n </StyledMessageBubble>\n\n {status === 'undeliverable' && message && direction === 'out' && (\n <StyledUndeliveredIcon name='warn-solid' />\n )}\n </Flex>\n\n {!typing && (\n <Flex\n as={StyledMetaInfoContainer}\n container={{\n justify: messageMetaJustify,\n gap: 1.5\n }}\n >\n {timestamp && <StyledMetaInfo>{timestamp}</StyledMetaInfo>}\n {status && direction === 'out' && <StyledStatusInfo>{t(status)}</StyledStatusInfo>}\n </Flex>\n )}\n\n {typing && (\n <Flex\n container={{\n gap: 0.25\n }}\n >\n <StyledBlinkingDot delay={0} />\n <StyledBlinkingDot delay={0.25} />\n <StyledBlinkingDot delay={0.5} />\n </Flex>\n )}\n </Flex>\n </Flex>\n );\n});\n\nexport default Message;\n"]}
|
|
1
|
+
{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, MouseEvent } from 'react';\n\nimport {\n Avatar,\n Flex,\n Icon,\n registerIcon,\n SummaryItem,\n Image,\n EmojiDisplay,\n useI18n,\n Actions,\n Tooltip,\n useTheme,\n useElement\n} from '@pega/cosmos-react-core';\nimport type { FlexContainerProps, ForwardProps } from '@pega/cosmos-react-core';\nimport * as documentDocIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/document-doc.icon';\nimport * as chainUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain-up.icon';\nimport * as flagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';\n\nimport type { MessageProps, AttachmentItemProps } from './Chat.types';\nimport {\n StyledMessageContainer,\n StyledMessageMain,\n StyledMessageBubble,\n StyledMessageBubbleContent,\n StyledMediaList,\n StyledMediaListItem,\n StyledMediaThumbNail,\n StyledMediaMessage,\n StyledMediaLink,\n StyledMetaInfoContainer,\n StyledMetaInfo,\n StyledBlinkingDot,\n StyledMediaButton,\n StyledMessageHeader,\n StyledMessageHeaderContent,\n StyledMessageHeaderMeta,\n StyledUndeliveredIcon,\n StyledStatusInfo,\n StyledHeadset,\n getMessageColors,\n StyledFlagIcon,\n StyledHeadsetIconBackground,\n StyledMediaContent\n} from './Message.styles';\n\nregisterIcon(documentDocIcon, chainUpIcon, flagWaveSolidIcon);\n\nconst Attachment = (props: AttachmentItemProps) => {\n const { id, icon, name, meta, actions = [], onPreview, thumbnail } = props;\n const actionRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n const listener = (e: KeyboardEvent) => {\n if (\n (e.target as HTMLButtonElement)?.getAttribute('aria-expanded') === 'true' &&\n ['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp'].includes(e.key)\n ) {\n e.stopPropagation();\n }\n };\n\n actionRef.current?.addEventListener('keydown', listener);\n\n return () => {\n actionRef.current?.removeEventListener('keydown', listener);\n };\n }, [actions]);\n\n return (\n <Flex\n key={id}\n as={StyledMediaListItem}\n container={{\n direction: 'column'\n }}\n >\n {thumbnail && (\n <Image\n as={StyledMediaThumbNail}\n src={thumbnail}\n onClick={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onPreview?.(id);\n }}\n alt={name}\n />\n )}\n\n <SummaryItem\n as={StyledMediaMessage}\n primary={\n <StyledMediaButton\n onClick={(e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onPreview?.(id);\n }}\n >\n {name}\n </StyledMediaButton>\n }\n secondary={meta}\n visual={<Icon name={icon || 'document-doc'} />}\n actions={<Actions ref={actionRef} items={actions} iconOnly />}\n />\n </Flex>\n );\n};\n\nconst Message: FunctionComponent<MessageProps & ForwardProps> = forwardRef(function Message(\n props: PropsWithoutRef<MessageProps>,\n ref: MessageProps['ref']\n) {\n const {\n message,\n direction,\n avatarInfo,\n timestamp,\n attachments = [],\n mediaPageLinks = [],\n status,\n typing,\n messageHeader,\n senderType,\n senderId,\n agentVariant,\n ...restProps\n } = props;\n\n const t = useI18n();\n const theme = useTheme();\n const [avatarRef, setAvatarRef] = useElement();\n const { content: messageBubbleBackgroundColor } = useMemo(\n () => getMessageColors(theme, direction, senderType, agentVariant),\n [theme, direction, senderType, agentVariant]\n );\n\n let messageMetaJustify: FlexContainerProps['justify'] = 'between';\n if (timestamp && !status) {\n messageMetaJustify = 'start';\n } else if (!timestamp && status) {\n messageMetaJustify = 'end';\n }\n\n const renderAvatar = useMemo(() => {\n if (direction !== 'in' || (senderType !== 'bot' && !avatarInfo)) {\n return null;\n }\n\n if (senderType === 'agent') {\n return (\n <>\n <StyledHeadset>\n <Avatar\n name={avatarInfo!.name}\n size='m'\n shape='circle'\n imageSrc={avatarInfo!.imageSrc}\n ref={setAvatarRef}\n backgroundColor={messageBubbleBackgroundColor}\n />\n <StyledHeadsetIconBackground>\n <Icon name='headset' />\n </StyledHeadsetIconBackground>\n </StyledHeadset>\n <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n {avatarInfo!.name}\n </Tooltip>\n </>\n );\n }\n\n return (\n <>\n <Avatar\n name={avatarInfo ? avatarInfo.name : t('bot')}\n size='m'\n shape='circle'\n icon={!avatarInfo?.imageSrc && senderType === 'bot' ? 'robot-solid' : undefined}\n imageSrc={avatarInfo?.imageSrc}\n ref={setAvatarRef}\n backgroundColor={messageBubbleBackgroundColor}\n />\n <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n {avatarInfo ? avatarInfo.name : t('bot')}\n </Tooltip>\n </>\n );\n }, [avatarInfo, senderType, direction, avatarRef]);\n\n let ariaLabel: string | undefined;\n const sender = avatarInfo ? avatarInfo.name : senderType;\n\n ariaLabel = t('sender_replied_message', [sender, message || '']);\n if (attachments.length > 0) ariaLabel = t('chat_attachments', [ariaLabel, attachments.length]);\n if (mediaPageLinks.length > 0) ariaLabel = t('chat_links', [ariaLabel, mediaPageLinks.length]);\n if (timestamp) ariaLabel = t('chat_message_at_timestamp', [ariaLabel, timestamp]);\n if (status && direction === 'out') ariaLabel += ` ${t('chat_message_status', [status])}`;\n\n return (\n <Flex\n as={StyledMessageContainer}\n ref={ref}\n container={{\n gap: 1.5,\n direction: direction === 'in' ? 'row' : 'row-reverse'\n }}\n item={{\n shrink: 0\n }}\n hasMessage={!!message}\n direction={direction}\n senderType={senderType}\n typing={typing}\n messageHeader={messageHeader}\n status={status}\n agentVariant={agentVariant}\n aria-label={ariaLabel}\n {...restProps}\n >\n {renderAvatar}\n <Flex\n container={{\n direction: 'column',\n alignItems: direction === 'in' ? 'start' : 'end',\n justify: 'center'\n }}\n as={StyledMessageMain}\n >\n <Flex\n container={{\n direction: direction === 'in' ? 'row' : 'row-reverse',\n alignItems: 'center',\n gap: 0.5\n }}\n >\n <StyledMessageBubble>\n {messageHeader && (\n <Flex container={{ gap: 0.5, justify: 'between' }} as={StyledMessageHeader}>\n <Flex container={{ gap: 0.5 }}>\n <StyledFlagIcon name='flag-wave-solid' />\n <StyledMessageHeaderContent>{messageHeader.content}</StyledMessageHeaderContent>\n </Flex>\n\n <StyledMessageHeaderMeta>{messageHeader.meta}</StyledMessageHeaderMeta>\n </Flex>\n )}\n\n {message && (\n <StyledMessageBubbleContent>\n <EmojiDisplay content={message} size={20} />\n </StyledMessageBubbleContent>\n )}\n\n {(attachments.length > 0 || mediaPageLinks.length > 0) && (\n <StyledMediaList>\n {attachments.map(attachment => {\n return <Attachment {...attachment} key={attachment.id} />;\n })}\n\n {mediaPageLinks.map(pagePushLink => {\n const { id, href, title, thumbnail, onTitleClick } = pagePushLink;\n return (\n <Flex\n as={StyledMediaListItem}\n key={id}\n container={{\n direction: 'column'\n }}\n >\n {thumbnail && <Image as={StyledMediaThumbNail} src={thumbnail} alt={title} />}\n\n <Flex container={{ gap: 1, alignItems: 'center' }} as={StyledMediaMessage}>\n <Icon name='book-open' />\n <Flex container as={StyledMediaContent}>\n {href ? (\n <StyledMediaLink\n aria-label={title}\n href={href}\n target='_blank'\n rel='noreferrer'\n >\n {title}\n </StyledMediaLink>\n ) : (\n <>\n {onTitleClick && (\n <StyledMediaButton\n variant='link'\n onClick={() => {\n onTitleClick();\n }}\n >\n {title}\n </StyledMediaButton>\n )}\n </>\n )}\n </Flex>\n </Flex>\n </Flex>\n );\n })}\n </StyledMediaList>\n )}\n </StyledMessageBubble>\n\n {status === 'undeliverable' && message && direction === 'out' && (\n <StyledUndeliveredIcon name='warn-solid' />\n )}\n </Flex>\n\n {!typing && (\n <Flex\n as={StyledMetaInfoContainer}\n container={{\n justify: messageMetaJustify,\n gap: 1.5\n }}\n >\n {timestamp && <StyledMetaInfo>{timestamp}</StyledMetaInfo>}\n {status && direction === 'out' && <StyledStatusInfo>{t(status)}</StyledStatusInfo>}\n </Flex>\n )}\n\n {typing && (\n <Flex\n container={{\n gap: 0.25\n }}\n >\n <StyledBlinkingDot delay={0} />\n <StyledBlinkingDot delay={0.25} />\n <StyledBlinkingDot delay={0.5} />\n </Flex>\n )}\n </Flex>\n </Flex>\n );\n});\n\nexport default Message;\n"]}
|
|
@@ -4,9 +4,11 @@ import type { MessageProps } from './Chat.types';
|
|
|
4
4
|
export declare const StyledMessageBubbleContent: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
5
5
|
export declare const StyledMediaList: import("styled-components").StyledComponent<"ul", DefaultTheme, {}, never>;
|
|
6
6
|
export declare const StyledMediaListItem: import("styled-components").StyledComponent<"li", DefaultTheme, {}, never>;
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const StyledMediaMessage: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
8
8
|
export declare const StyledMediaThumbNail: import("styled-components").StyledComponent<"img", DefaultTheme, {}, never>;
|
|
9
|
-
export declare const StyledMediaLink: import("styled-components").StyledComponent<"
|
|
9
|
+
export declare const StyledMediaLink: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").LinkProps & import("@pega/cosmos-react-core").ForwardProps> & {
|
|
10
|
+
getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["preview-popover", "preview", "new-tab"]>;
|
|
11
|
+
}, DefaultTheme, {}, never>;
|
|
10
12
|
export declare const StyledMediaButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
|
|
11
13
|
export declare const StyledMessageMain: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
12
14
|
export declare const StyledMessageBubble: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
@@ -18,6 +20,7 @@ export declare const StyledMessageHeader: import("styled-components").StyledComp
|
|
|
18
20
|
export declare const StyledMessageHeaderContent: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
19
21
|
export declare const StyledMessageHeaderMeta: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
20
22
|
export declare const StyledHeadsetIconBackground: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
23
|
+
export declare const StyledMediaContent: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
|
|
21
24
|
interface StyledMessageContainerProps {
|
|
22
25
|
senderType: 'customer' | 'agent' | 'bot';
|
|
23
26
|
direction: 'in' | 'out';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAetD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AAEvD,eAAO,MAAM,eAAe,4EAAc,CAAC;AAE3C,eAAO,MAAM,mBAAmB,4EAAc,CAAC;AAE/C,eAAO,MAAM,kBAAkB,6EAAe,CAAC;AAE/C,eAAO,MAAM,oBAAoB,6EAAe,CAAC;AAEjD,eAAO,MAAM,eAAe;;2BAAiB,CAAC;AAE9C,eAAO,MAAM,iBAAiB,8OAAuB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,6EAAe,CAAC;AAE9C,eAAO,MAAM,mBAAmB,6EAAe,CAAC;AAEhD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,cAAc,8EAAgB,CAAC;AAE5C,eAAO,MAAM,gBAAgB,8EAAgB,CAAC;AAE9C,eAAO,MAAM,qBAAqB,6EAAe,CAAC;AAElD,eAAO,MAAM,mBAAmB,gFAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AACvD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,2BAA2B,6EAAe,CAAC;AAExD,eAAO,MAAM,kBAAkB,6EAAe,CAAC;AAE/C,UAAU,2BAA2B;IACnC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACzC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,6EAwBxB,CAAC;AAIH,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,CAC7B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,EACpC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,EACtC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KACvC,kBA+BJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,qGAgMlC,CAAC;AAEF,UAAU,sBAAsB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,iGAiB5B,CAAC;AAGH,eAAO,MAAM,qBAAqB,8JAYjC,CAAC;AAIF,eAAO,MAAM,cAAc,8JAKzB,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
2
|
import { readableColor, rgba, transparentize } from 'polished';
|
|
3
|
-
import { defaultThemeProp, tryCatch, Icon, StyledIcon, StyledText, calculateFontSize } from '@pega/cosmos-react-core';
|
|
3
|
+
import { defaultThemeProp, tryCatch, Icon, StyledIcon, StyledText, calculateFontSize, Link, StyledLink } from '@pega/cosmos-react-core';
|
|
4
4
|
import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
|
|
5
5
|
export const StyledMessageBubbleContent = styled.div ``;
|
|
6
6
|
export const StyledMediaList = styled.ul ``;
|
|
7
7
|
export const StyledMediaListItem = styled.li ``;
|
|
8
|
-
export const
|
|
8
|
+
export const StyledMediaMessage = styled.div ``;
|
|
9
9
|
export const StyledMediaThumbNail = styled.img ``;
|
|
10
|
-
export const StyledMediaLink = styled
|
|
10
|
+
export const StyledMediaLink = styled(Link) ``;
|
|
11
11
|
export const StyledMediaButton = styled(BareButton) ``;
|
|
12
12
|
export const StyledMessageMain = styled.div ``;
|
|
13
13
|
export const StyledMessageBubble = styled.div ``;
|
|
@@ -19,6 +19,7 @@ export const StyledMessageHeader = styled.header ``;
|
|
|
19
19
|
export const StyledMessageHeaderContent = styled.div ``;
|
|
20
20
|
export const StyledMessageHeaderMeta = styled.div ``;
|
|
21
21
|
export const StyledHeadsetIconBackground = styled.div ``;
|
|
22
|
+
export const StyledMediaContent = styled.div ``;
|
|
22
23
|
export const StyledHeadset = styled.div(({ theme }) => {
|
|
23
24
|
return css `
|
|
24
25
|
position: relative;
|
|
@@ -140,12 +141,12 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
|
|
|
140
141
|
object-fit: contain;
|
|
141
142
|
background-color: ${secondaryBackground};
|
|
142
143
|
}
|
|
143
|
-
${
|
|
144
|
+
${StyledMediaMessage} {
|
|
144
145
|
padding: ${spacing} calc(3 * ${spacing});
|
|
145
146
|
font-size: ${fontSizes.xxs};
|
|
146
147
|
margin-block-start: calc(0.5 * ${spacing});
|
|
147
148
|
}
|
|
148
|
-
${
|
|
149
|
+
${StyledMediaMessage}::before {
|
|
149
150
|
content: '';
|
|
150
151
|
padding: ${spacing} 0;
|
|
151
152
|
border-top: 0.0625rem solid ${contrastContentColor};
|
|
@@ -154,7 +155,7 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
|
|
|
154
155
|
left: 1rem;
|
|
155
156
|
top: 0;
|
|
156
157
|
}
|
|
157
|
-
${StyledMediaThumbNail} + ${
|
|
158
|
+
${StyledMediaThumbNail} + ${StyledMediaMessage}::before {
|
|
158
159
|
content: none;
|
|
159
160
|
}
|
|
160
161
|
svg {
|
|
@@ -163,12 +164,15 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
|
|
|
163
164
|
${StyledText} {
|
|
164
165
|
color: ${foregroundColor};
|
|
165
166
|
}
|
|
167
|
+
${StyledLink} {
|
|
168
|
+
color: ${contrastContentColor};
|
|
169
|
+
}
|
|
166
170
|
}
|
|
167
171
|
|
|
168
172
|
${!hasMessage &&
|
|
169
173
|
css `
|
|
170
174
|
> ${StyledMediaListItem}:first-child {
|
|
171
|
-
> ${
|
|
175
|
+
> ${StyledMediaMessage}::before {
|
|
172
176
|
border-top: none;
|
|
173
177
|
}
|
|
174
178
|
}
|
|
@@ -202,6 +206,7 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
|
|
|
202
206
|
text-overflow: ellipsis;
|
|
203
207
|
display: inline-block;
|
|
204
208
|
max-width: 100%;
|
|
209
|
+
|
|
205
210
|
&:hover {
|
|
206
211
|
color: ${contrastContentColor};
|
|
207
212
|
text-decoration: underline;
|
|
@@ -232,6 +237,15 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
|
|
|
232
237
|
position: relative;
|
|
233
238
|
height: 2rem;
|
|
234
239
|
}
|
|
240
|
+
|
|
241
|
+
${StyledMediaContent} {
|
|
242
|
+
padding-block-end: calc(0.5 * ${spacing});
|
|
243
|
+
|
|
244
|
+
${StyledMediaLink}, ${StyledMediaButton} {
|
|
245
|
+
word-break: break-word;
|
|
246
|
+
white-space: pre-wrap;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
235
249
|
`;
|
|
236
250
|
});
|
|
237
251
|
StyledMessageContainer.defaultProps = defaultThemeProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { readableColor, rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n tryCatch,\n Icon,\n StyledIcon,\n StyledText,\n calculateFontSize\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport type { MessageProps } from './Chat.types';\n\nexport const StyledMessageBubbleContent = styled.div``;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledSummaryItem = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img``;\n\nexport const StyledMediaLink = styled.a``;\n\nexport const StyledMediaButton = styled(BareButton)``;\n\nexport const StyledMessageMain = styled.div``;\n\nexport const StyledMessageBubble = styled.div``;\n\nexport const StyledMetaInfoContainer = styled.div``;\n\nexport const StyledMetaInfo = styled.span``;\n\nexport const StyledStatusInfo = styled.span``;\n\nexport const StyledTypingIndicator = styled.div``;\n\nexport const StyledMessageHeader = styled.header``;\nexport const StyledMessageHeaderContent = styled.div``;\nexport const StyledMessageHeaderMeta = styled.div``;\n\nexport const StyledHeadsetIconBackground = styled.div``;\ninterface StyledMessageContainerProps {\n senderType: 'customer' | 'agent' | 'bot';\n direction: 'in' | 'out';\n typing: boolean;\n hasMessage: boolean;\n status: string;\n agentVariant: number;\n}\n\nexport const StyledHeadset = styled.div(({ theme }) => {\n return css`\n position: relative;\n\n ${StyledHeadsetIconBackground} {\n position: relative;\n inset-block-start: calc(-5.25 * ${theme.base.spacing});\n inset-inline-start: calc(2 * ${theme.base.spacing});\n height: 1.375rem;\n width: 1.375rem;\n background: ${theme.base.palette['primary-background']};\n border-radius: calc(\n (${theme.base['border-radius']}) * (${theme.components.button['border-radius']})\n );\n\n ${StyledIcon} {\n position: absolute;\n width: 2.875rem;\n height: 0.875rem;\n inset-inline-start: calc(-1.5 * ${theme.base.spacing});\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledHeadset.defaultProps = defaultThemeProp;\n\nexport interface MessageBubbleColor {\n header: string;\n content: string;\n}\n\nexport const getMessageColors: (\n theme: DefaultTheme,\n direction: MessageProps['direction'],\n senderType: MessageProps['senderType'],\n agentVariant: MessageProps['agentVariant']\n) => MessageBubbleColor = (theme, direction, senderType, agentVariant = 0) => {\n const { slate, blue, purple, orange, green, black } = theme.base.colors;\n const agentMessageColors = [\n purple['extra-light'],\n orange['extra-light'],\n '#C5D1DD',\n green['extra-light'],\n '#BBEAEA'\n ];\n const outMessageColor = blue.medium;\n const customerMessageColor = '#E6EEFA';\n const botMessageColor = slate['extra-dark'];\n\n if (direction === 'in') {\n const messageColors: MessageBubbleColor = {\n header: orange.medium,\n content: ''\n };\n if (senderType === 'agent') {\n messageColors.content = agentMessageColors[agentVariant % agentMessageColors.length];\n } else if (senderType === 'bot') {\n messageColors.content = botMessageColor;\n } else if (senderType === 'customer') {\n messageColors.content = customerMessageColor;\n }\n return messageColors;\n }\n return {\n header: black,\n content: outMessageColor\n };\n};\n\nexport const StyledMessageContainer = styled.li<StyledMessageContainerProps>(\n ({\n direction,\n senderType,\n hasMessage,\n typing,\n status,\n agentVariant,\n theme,\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'border-radius': borderRadius,\n spacing,\n palette: {\n 'foreground-color': foregroundColor,\n 'secondary-background': secondaryBackground,\n urgent\n },\n transparency: { 'transparent-2': foregroundAlpha }\n }\n }\n }) => {\n const { header, content } = getMessageColors(theme, direction, senderType, agentVariant);\n const metaForegroundColor = tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n const statusForegroundColor = status === 'undeliverable' ? urgent : metaForegroundColor;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const contrastContentColor = readableColor(content);\n const contrastHeaderColor = readableColor(header);\n return css`\n ${direction === 'out'\n ? css`\n padding-inline-start: calc(4 * ${spacing});\n `\n : css`\n padding-inline-end: calc(4 * ${spacing});\n `}\n margin-block-end: ${typing ? spacing : '0'};\n\n :first-child {\n margin-block-start: ${spacing};\n }\n\n ${StyledMessageMain} {\n max-width: 90%;\n }\n ${StyledMessageBubble} {\n background: ${content};\n border-radius: calc(3 * ${borderRadius}) ${borderRadius} calc(3 * ${borderRadius})\n calc(3 * ${borderRadius});\n overflow: hidden;\n color: ${contrastContentColor};\n display: inline-block;\n width: auto;\n margin-block-end: calc(0.5 * ${spacing});\n\n label {\n color: inherit;\n }\n\n ${direction === 'in' &&\n css`\n border-radius: ${borderRadius} calc(3 * ${borderRadius}) calc(3 * ${borderRadius});\n `}\n\n > ${StyledMessageBubbleContent} {\n padding: ${spacing} calc(2 * ${spacing});\n word-break: break-word;\n white-space: pre-wrap;\n position: relative;\n }\n\n > ${StyledMediaList} {\n color: ${contrastContentColor};\n max-width: 100%;\n\n > ${StyledMediaListItem} {\n position: relative;\n ${StyledMediaThumbNail} {\n max-height: 12rem;\n width: 100%;\n object-fit: contain;\n background-color: ${secondaryBackground};\n }\n ${StyledSummaryItem} {\n padding: ${spacing} calc(3 * ${spacing});\n font-size: ${fontSizes.xxs};\n margin-block-start: calc(0.5 * ${spacing});\n }\n ${StyledSummaryItem}::before {\n content: '';\n padding: ${spacing} 0;\n border-top: 0.0625rem solid ${contrastContentColor};\n position: absolute;\n width: calc(100% - 2rem);\n left: 1rem;\n top: 0;\n }\n ${StyledMediaThumbNail} + ${StyledSummaryItem}::before {\n content: none;\n }\n svg {\n font-size: 1.6rem;\n }\n ${StyledText} {\n color: ${foregroundColor};\n }\n }\n\n ${!hasMessage &&\n css`\n > ${StyledMediaListItem}:first-child {\n > ${StyledSummaryItem}::before {\n border-top: none;\n }\n }\n `}\n }\n\n ${StyledMessageHeader} {\n padding: ${spacing} calc(2 * ${spacing});\n color: ${contrastHeaderColor};\n border-block-end: 0.0625rem solid ${transparentize(0.5, theme.base.colors.white)};\n }\n\n ${StyledMessageHeaderContent} {\n color: ${contrastHeaderColor};\n margin-inline-end: ${spacing};\n }\n ${StyledMessageHeaderMeta} {\n > a {\n color: ${contrastHeaderColor};\n }\n }\n\n ${StyledMediaLink}, ${StyledMediaButton} {\n color: ${contrastContentColor};\n font-size: inherit;\n text-decoration: none;\n font-weight: 700;\n overflow-x: hidden;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n max-width: 100%;\n &:hover {\n color: ${contrastContentColor};\n text-decoration: underline;\n }\n &:visited {\n color: ${contrastContentColor};\n }\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n\n ${StyledMetaInfoContainer} {\n width: 100%;\n padding: 0 ${spacing};\n ${StyledMetaInfo}, ${StyledStatusInfo} {\n margin-block-end: ${spacing};\n font-size: 0.7rem;\n color: ${metaForegroundColor};\n }\n ${StyledStatusInfo} {\n color: ${statusForegroundColor};\n }\n }\n ${StyledTypingIndicator} {\n width: 4.5rem;\n position: relative;\n height: 2rem;\n }\n `;\n }\n);\nStyledMessageContainer.defaultProps = defaultThemeProp;\ninterface StyledBlinkingDotProps {\n delay?: number;\n}\n\nexport const StyledBlinkingDot = styled.div<StyledBlinkingDotProps>(({ delay = 0, theme }) => {\n return css`\n @keyframes Blinking {\n 0% {\n background: ${theme.base.colors.gray.medium};\n }\n 100% {\n background: ${theme.base.colors.gray['extra-light']};\n }\n }\n animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;\n background: ${theme.base.colors.gray['extra-light']};\n border-radius: 50%;\n animation-delay: ${delay}s;\n height: 0.4rem;\n width: 0.4rem;\n `;\n});\nStyledBlinkingDot.defaultProps = defaultThemeProp;\n\nexport const StyledUndeliveredIcon = styled(Icon)(\n ({\n theme: {\n base: {\n palette: { urgent }\n }\n }\n }) => {\n return css`\n color: ${urgent};\n `;\n }\n);\n\nStyledUndeliveredIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFlagIcon = styled(Icon)(({ theme }) => {\n return css`\n position: relative;\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledFlagIcon.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"Message.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { readableColor, rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n tryCatch,\n Icon,\n StyledIcon,\n StyledText,\n calculateFontSize,\n Link,\n StyledLink\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport type { MessageProps } from './Chat.types';\n\nexport const StyledMessageBubbleContent = styled.div``;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledMediaMessage = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img``;\n\nexport const StyledMediaLink = styled(Link)``;\n\nexport const StyledMediaButton = styled(BareButton)``;\n\nexport const StyledMessageMain = styled.div``;\n\nexport const StyledMessageBubble = styled.div``;\n\nexport const StyledMetaInfoContainer = styled.div``;\n\nexport const StyledMetaInfo = styled.span``;\n\nexport const StyledStatusInfo = styled.span``;\n\nexport const StyledTypingIndicator = styled.div``;\n\nexport const StyledMessageHeader = styled.header``;\nexport const StyledMessageHeaderContent = styled.div``;\nexport const StyledMessageHeaderMeta = styled.div``;\n\nexport const StyledHeadsetIconBackground = styled.div``;\n\nexport const StyledMediaContent = styled.div``;\n\ninterface StyledMessageContainerProps {\n senderType: 'customer' | 'agent' | 'bot';\n direction: 'in' | 'out';\n typing: boolean;\n hasMessage: boolean;\n status: string;\n agentVariant: number;\n}\n\nexport const StyledHeadset = styled.div(({ theme }) => {\n return css`\n position: relative;\n\n ${StyledHeadsetIconBackground} {\n position: relative;\n inset-block-start: calc(-5.25 * ${theme.base.spacing});\n inset-inline-start: calc(2 * ${theme.base.spacing});\n height: 1.375rem;\n width: 1.375rem;\n background: ${theme.base.palette['primary-background']};\n border-radius: calc(\n (${theme.base['border-radius']}) * (${theme.components.button['border-radius']})\n );\n\n ${StyledIcon} {\n position: absolute;\n width: 2.875rem;\n height: 0.875rem;\n inset-inline-start: calc(-1.5 * ${theme.base.spacing});\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledHeadset.defaultProps = defaultThemeProp;\n\nexport interface MessageBubbleColor {\n header: string;\n content: string;\n}\n\nexport const getMessageColors: (\n theme: DefaultTheme,\n direction: MessageProps['direction'],\n senderType: MessageProps['senderType'],\n agentVariant: MessageProps['agentVariant']\n) => MessageBubbleColor = (theme, direction, senderType, agentVariant = 0) => {\n const { slate, blue, purple, orange, green, black } = theme.base.colors;\n const agentMessageColors = [\n purple['extra-light'],\n orange['extra-light'],\n '#C5D1DD',\n green['extra-light'],\n '#BBEAEA'\n ];\n const outMessageColor = blue.medium;\n const customerMessageColor = '#E6EEFA';\n const botMessageColor = slate['extra-dark'];\n\n if (direction === 'in') {\n const messageColors: MessageBubbleColor = {\n header: orange.medium,\n content: ''\n };\n if (senderType === 'agent') {\n messageColors.content = agentMessageColors[agentVariant % agentMessageColors.length];\n } else if (senderType === 'bot') {\n messageColors.content = botMessageColor;\n } else if (senderType === 'customer') {\n messageColors.content = customerMessageColor;\n }\n return messageColors;\n }\n return {\n header: black,\n content: outMessageColor\n };\n};\n\nexport const StyledMessageContainer = styled.li<StyledMessageContainerProps>(\n ({\n direction,\n senderType,\n hasMessage,\n typing,\n status,\n agentVariant,\n theme,\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'border-radius': borderRadius,\n spacing,\n palette: {\n 'foreground-color': foregroundColor,\n 'secondary-background': secondaryBackground,\n urgent\n },\n transparency: { 'transparent-2': foregroundAlpha }\n }\n }\n }) => {\n const { header, content } = getMessageColors(theme, direction, senderType, agentVariant);\n const metaForegroundColor = tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n const statusForegroundColor = status === 'undeliverable' ? urgent : metaForegroundColor;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const contrastContentColor = readableColor(content);\n const contrastHeaderColor = readableColor(header);\n return css`\n ${direction === 'out'\n ? css`\n padding-inline-start: calc(4 * ${spacing});\n `\n : css`\n padding-inline-end: calc(4 * ${spacing});\n `}\n margin-block-end: ${typing ? spacing : '0'};\n\n :first-child {\n margin-block-start: ${spacing};\n }\n\n ${StyledMessageMain} {\n max-width: 90%;\n }\n ${StyledMessageBubble} {\n background: ${content};\n border-radius: calc(3 * ${borderRadius}) ${borderRadius} calc(3 * ${borderRadius})\n calc(3 * ${borderRadius});\n overflow: hidden;\n color: ${contrastContentColor};\n display: inline-block;\n width: auto;\n margin-block-end: calc(0.5 * ${spacing});\n\n label {\n color: inherit;\n }\n\n ${direction === 'in' &&\n css`\n border-radius: ${borderRadius} calc(3 * ${borderRadius}) calc(3 * ${borderRadius});\n `}\n\n > ${StyledMessageBubbleContent} {\n padding: ${spacing} calc(2 * ${spacing});\n word-break: break-word;\n white-space: pre-wrap;\n position: relative;\n }\n\n > ${StyledMediaList} {\n color: ${contrastContentColor};\n max-width: 100%;\n\n > ${StyledMediaListItem} {\n position: relative;\n ${StyledMediaThumbNail} {\n max-height: 12rem;\n width: 100%;\n object-fit: contain;\n background-color: ${secondaryBackground};\n }\n ${StyledMediaMessage} {\n padding: ${spacing} calc(3 * ${spacing});\n font-size: ${fontSizes.xxs};\n margin-block-start: calc(0.5 * ${spacing});\n }\n ${StyledMediaMessage}::before {\n content: '';\n padding: ${spacing} 0;\n border-top: 0.0625rem solid ${contrastContentColor};\n position: absolute;\n width: calc(100% - 2rem);\n left: 1rem;\n top: 0;\n }\n ${StyledMediaThumbNail} + ${StyledMediaMessage}::before {\n content: none;\n }\n svg {\n font-size: 1.6rem;\n }\n ${StyledText} {\n color: ${foregroundColor};\n }\n ${StyledLink} {\n color: ${contrastContentColor};\n }\n }\n\n ${!hasMessage &&\n css`\n > ${StyledMediaListItem}:first-child {\n > ${StyledMediaMessage}::before {\n border-top: none;\n }\n }\n `}\n }\n\n ${StyledMessageHeader} {\n padding: ${spacing} calc(2 * ${spacing});\n color: ${contrastHeaderColor};\n border-block-end: 0.0625rem solid ${transparentize(0.5, theme.base.colors.white)};\n }\n\n ${StyledMessageHeaderContent} {\n color: ${contrastHeaderColor};\n margin-inline-end: ${spacing};\n }\n ${StyledMessageHeaderMeta} {\n > a {\n color: ${contrastHeaderColor};\n }\n }\n\n ${StyledMediaLink}, ${StyledMediaButton} {\n color: ${contrastContentColor};\n font-size: inherit;\n text-decoration: none;\n font-weight: 700;\n overflow-x: hidden;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n max-width: 100%;\n\n &:hover {\n color: ${contrastContentColor};\n text-decoration: underline;\n }\n &:visited {\n color: ${contrastContentColor};\n }\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n }\n\n ${StyledMetaInfoContainer} {\n width: 100%;\n padding: 0 ${spacing};\n ${StyledMetaInfo}, ${StyledStatusInfo} {\n margin-block-end: ${spacing};\n font-size: 0.7rem;\n color: ${metaForegroundColor};\n }\n ${StyledStatusInfo} {\n color: ${statusForegroundColor};\n }\n }\n ${StyledTypingIndicator} {\n width: 4.5rem;\n position: relative;\n height: 2rem;\n }\n\n ${StyledMediaContent} {\n padding-block-end: calc(0.5 * ${spacing});\n\n ${StyledMediaLink}, ${StyledMediaButton} {\n word-break: break-word;\n white-space: pre-wrap;\n }\n }\n `;\n }\n);\nStyledMessageContainer.defaultProps = defaultThemeProp;\ninterface StyledBlinkingDotProps {\n delay?: number;\n}\n\nexport const StyledBlinkingDot = styled.div<StyledBlinkingDotProps>(({ delay = 0, theme }) => {\n return css`\n @keyframes Blinking {\n 0% {\n background: ${theme.base.colors.gray.medium};\n }\n 100% {\n background: ${theme.base.colors.gray['extra-light']};\n }\n }\n animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;\n background: ${theme.base.colors.gray['extra-light']};\n border-radius: 50%;\n animation-delay: ${delay}s;\n height: 0.4rem;\n width: 0.4rem;\n `;\n});\nStyledBlinkingDot.defaultProps = defaultThemeProp;\n\nexport const StyledUndeliveredIcon = styled(Icon)(\n ({\n theme: {\n base: {\n palette: { urgent }\n }\n }\n }) => {\n return css`\n color: ${urgent};\n `;\n }\n);\n\nStyledUndeliveredIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFlagIcon = styled(Icon)(({ theme }) => {\n return css`\n position: relative;\n inset-block-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledFlagIcon.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuPopover.d.ts","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAS5E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAE7D,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,
|
|
1
|
+
{"version":3,"file":"ContextMenuPopover.d.ts","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAS5E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAE7D,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAwFlE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,31 +1,39 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
2
|
+
import { forwardRef, useEffect, useRef } from 'react';
|
|
3
3
|
import { Popover, Menu, Text, useI18n } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledEmailMoreInfoPopover, StyledContextMenuFieldSelector, StyledContextMenu } from './Email.styles';
|
|
5
5
|
const ContextMenuPopover = forwardRef(function ContextMenuPopover({ cursorPosition, contextMenu, targetNode, show }, ref) {
|
|
6
6
|
const t = useI18n();
|
|
7
|
-
const
|
|
8
|
-
const targetElement = targetNode instanceof Element ? targetNode : targetNode?.parentElement;
|
|
9
|
-
if (targetElement && targetElement.tagName.toLowerCase() === 'mark') {
|
|
10
|
-
selection?.removeAllRanges();
|
|
11
|
-
}
|
|
12
|
-
if (selection && !selection.toString() && targetNode) {
|
|
13
|
-
const range = document.createRange();
|
|
14
|
-
range.selectNodeContents(targetNode);
|
|
15
|
-
selection?.removeAllRanges();
|
|
16
|
-
selection.addRange(range);
|
|
17
|
-
}
|
|
7
|
+
const selectedText = useRef();
|
|
18
8
|
const { onItemClick, items } = contextMenu;
|
|
19
9
|
const onItemSelect = (contextMenuItemId, e) => {
|
|
20
10
|
e.stopPropagation();
|
|
21
11
|
const selectedcontextMenuItem = items.find(({ id }) => id === contextMenuItemId);
|
|
22
|
-
if (selectedcontextMenuItem &&
|
|
12
|
+
if (selectedcontextMenuItem && selectedText.current) {
|
|
23
13
|
onItemClick({
|
|
24
14
|
fieldName: selectedcontextMenuItem.primary,
|
|
25
|
-
fieldValue:
|
|
15
|
+
fieldValue: selectedText.current
|
|
26
16
|
});
|
|
27
17
|
}
|
|
28
18
|
};
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
const selection = document.getSelection();
|
|
21
|
+
if (!selection || !targetNode)
|
|
22
|
+
return;
|
|
23
|
+
const targetElement = targetNode instanceof Element ? targetNode : targetNode.parentElement;
|
|
24
|
+
if (targetElement && targetElement.tagName.toLowerCase() === 'mark') {
|
|
25
|
+
selection.removeAllRanges();
|
|
26
|
+
}
|
|
27
|
+
if (!selection.toString()) {
|
|
28
|
+
const range = document.createRange();
|
|
29
|
+
range.selectNodeContents(targetNode);
|
|
30
|
+
selection.removeAllRanges();
|
|
31
|
+
selection.addRange(range);
|
|
32
|
+
}
|
|
33
|
+
if (selection.toString()) {
|
|
34
|
+
selectedText.current = selection.toString();
|
|
35
|
+
}
|
|
36
|
+
}, [show, targetNode]);
|
|
29
37
|
const itemsToRender = items.map(item => {
|
|
30
38
|
return {
|
|
31
39
|
...item,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuPopover.js","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenuPopover.js","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, MouseEvent, PropsWithoutRef } from 'react';\n\nimport { Popover, Menu, Text, useI18n } from '@pega/cosmos-react-core';\n\nimport {\n StyledEmailMoreInfoPopover,\n StyledContextMenuFieldSelector,\n StyledContextMenu\n} from './Email.styles';\nimport type { ContextMenuPopoverProps } from './Email.types';\n\nconst ContextMenuPopover: FunctionComponent<ContextMenuPopoverProps> = forwardRef(\n function ContextMenuPopover(\n { cursorPosition, contextMenu, targetNode, show }: PropsWithoutRef<ContextMenuPopoverProps>,\n ref: ContextMenuPopoverProps['ref']\n ) {\n const t = useI18n();\n const selectedText = useRef<string>();\n\n const { onItemClick, items } = contextMenu;\n const onItemSelect = (contextMenuItemId: string, e: MouseEvent) => {\n e.stopPropagation();\n const selectedcontextMenuItem = items.find(({ id }) => id === contextMenuItemId);\n\n if (selectedcontextMenuItem && selectedText.current) {\n onItemClick({\n fieldName: selectedcontextMenuItem.primary,\n fieldValue: selectedText.current\n });\n }\n };\n\n useEffect(() => {\n const selection = document.getSelection();\n\n if (!selection || !targetNode) return;\n\n const targetElement = targetNode instanceof Element ? targetNode : targetNode.parentElement;\n if (targetElement && targetElement.tagName.toLowerCase() === 'mark') {\n selection.removeAllRanges();\n }\n\n if (!selection.toString()) {\n const range = document.createRange();\n range.selectNodeContents(targetNode);\n selection.removeAllRanges();\n selection.addRange(range);\n }\n\n if (selection.toString()) {\n selectedText.current = selection.toString();\n }\n }, [show, targetNode]);\n\n const itemsToRender = items.map(item => {\n return {\n ...item,\n visual: item.selected ? (\n <StyledContextMenuFieldSelector selected />\n ) : (\n <StyledContextMenuFieldSelector />\n )\n };\n });\n\n return (\n <Popover\n as={StyledEmailMoreInfoPopover}\n target={{\n getBoundingClientRect: () => {\n const { x, y } = cursorPosition;\n return {\n width: 0,\n height: 0,\n top: y,\n right: x,\n bottom: y,\n left: x,\n x,\n y,\n toJSON: () => {}\n };\n }\n }}\n show={show}\n placement='bottom'\n ref={ref}\n >\n <StyledContextMenu>\n <Menu\n {...contextMenu}\n header={<Text variant='h5'>{t('copy_to')}</Text>}\n items={itemsToRender}\n onItemClick={onItemSelect}\n />\n </StyledContextMenu>\n </Popover>\n );\n }\n);\n\nexport default ContextMenuPopover;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeedRichText.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, forwardRef, useState, useRef } from 'react';\nimport type { FC, Ref } from 'react';\n\nimport { cap, Icon, useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { getXMLAttributes, RichTextEditor } from '@pega/cosmos-react-rte';\nimport type { RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { MentionButtonConfig } from '../MentionButton';\nimport { HashtagButtonConfig } from '../HashtagButton';\nimport { AutopilotConfig } from '../Autopilot';\n\nimport { FeedContext } from './Feed.context';\nimport type { FeedRichTextProps } from './Feed.types';\n\nconst FeedRichText: FC<FeedRichTextProps & ForwardProps> = forwardRef(function FeedRichText(\n props: FeedRichTextProps,\n ref: Ref<RichTextEditorState>\n) {\n const { height = { min: 'auto' }, ...restProps } = props;\n const {\n autopilotInfo: { id: autopilotId, label: autopilotLabel },\n searchTypes = [],\n onSearch,\n searchResults = [],\n showSearchResults\n } = useContext(FeedContext);\n const [triggerType, setTriggerType] = useState<'mention' | 'tag'>('mention');\n const [showMentionType, setShowMentionType] = useState(false);\n const searchType = useRef('');\n const t = useI18n();\n\n const onDecoSearch = (event: { search: string; trigger: string }) => {\n const trigger = event.trigger === '@' ? 'mention' : 'tag';\n setTriggerType(trigger);\n if (trigger === 'mention' && event.search === '') {\n setShowMentionType(true);\n } else {\n setShowMentionType(false);\n onSearch?.({\n type: trigger,\n search: event.search,\n mentionType: searchType.current\n });\n }\n };\n\n const typesMenu = {\n onItemActive: (id: string) => {\n searchType.current = id;\n },\n onItemClick: (id: string) => {\n searchType.current = id;\n setShowMentionType(false);\n\n if (id !== autopilotId) {\n onSearch?.({ type: 'mention', search: '', mentionType: id });\n }\n },\n items: searchTypes.map(type => {\n return {\n id: type,\n primary: type === autopilotId ? autopilotLabel : cap(type),\n visual: <Icon name={type === autopilotId ? 'polaris' : type} />\n };\n })\n };\n\n const searchMenu =\n searchResults.length && showSearchResults\n ? {\n header: triggerType === 'mention' ? t('mention_type', [searchType.current]) : '',\n items: searchResults.map(res => {\n return { ...res, href: undefined };\n })\n }\n : undefined;\n\n const getSearchAttributes = (xmlElement: string, searchResult: string) => {\n switch (xmlElement) {\n case 'pega-mention': {\n const attributes = getXMLAttributes(searchResult);\n\n if (!attributes) return;\n return {\n markdown: searchResult,\n component: MentionButtonConfig.component,\n props: attributes,\n text: attributes.text\n };\n }\n case 'pega-tag': {\n const attributes = getXMLAttributes(searchResult);\n\n if (!attributes) return;\n return {\n markdown: searchResult,\n component: HashtagButtonConfig.component,\n props: attributes,\n text: attributes.tag\n };\n }\n case 'pega-autopilot': {\n const attributes = getXMLAttributes(searchResult);\n\n if (!attributes) return;\n return {\n markdown: searchResult,\n component: AutopilotConfig.component,\n props: attributes,\n text: autopilotLabel\n };\n }\n default:\n }\n };\n\n return (\n <RichTextEditor\n {...restProps}\n markdownOnly\n ref={ref}\n height={height}\n searchTriggers={[\n { trigger: '@', regex: String.raw`(?:\\S+(?:[^\\n\\S][^@#\\s]\\S*)*[^\\n\\S]?|)` },\n { trigger: '#', regex: String.raw`[^\\s,]*` }\n ]}\n getSearchItemReplacement={(id: string) => {\n if (id === autopilotId) {\n return {\n markdown: AutopilotConfig.inject(),\n component: AutopilotConfig.component,\n props: {},\n text: autopilotLabel\n };\n }\n\n const item = searchResults?.find(({ id: itemId }) => itemId === id);\n\n if (!item) return undefined;\n\n return {\n markdown:\n triggerType === 'mention'\n ? MentionButtonConfig.inject({\n id: item.id,\n type: searchType.current,\n text: item.primary,\n href: item.href\n })\n : HashtagButtonConfig.inject({ tag: item.id }),\n component:\n triggerType === 'mention'\n ? MentionButtonConfig.component\n : HashtagButtonConfig.component,\n props:\n triggerType === 'mention'\n ? {\n id: item.id,\n text: item.primary,\n type: searchType.current,\n tabIndex: -1\n }\n : { tag: item.primary, tabIndex: -1 },\n text: item.primary\n };\n }}\n searchRenderers={[\n {\n type: MentionButtonConfig.type,\n xmlElement: MentionButtonConfig.xmlElement,\n regexPattern: MentionButtonConfig.regexPattern,\n getSearchAttributes\n },\n {\n type: HashtagButtonConfig.type,\n xmlElement: HashtagButtonConfig.xmlElement,\n regexPattern: HashtagButtonConfig.regexPattern,\n getSearchAttributes\n },\n {\n type: AutopilotConfig.type,\n xmlElement: AutopilotConfig.xmlElement,\n regexPattern: AutopilotConfig.regexPattern,\n getSearchAttributes\n }\n ]}\n onSearch={onDecoSearch}\n menu={showMentionType ? typesMenu : searchMenu}\n />\n );\n});\n\nexport default FeedRichText;\n"]}
|
|
1
|
+
{"version":3,"file":"FeedRichText.js","sourceRoot":"","sources":["../../../src/components/Feed/FeedRichText.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, forwardRef, useState, useRef } from 'react';\nimport type { FC, Ref } from 'react';\n\nimport { cap, Icon, useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { getXMLAttributes, RichTextEditor } from '@pega/cosmos-react-rte';\nimport type { RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { MentionButtonConfig } from '../MentionButton';\nimport { HashtagButtonConfig } from '../HashtagButton';\nimport { AutopilotConfig } from '../Autopilot';\n\nimport { FeedContext } from './Feed.context';\nimport type { FeedRichTextProps } from './Feed.types';\n\nconst FeedRichText: FC<FeedRichTextProps & ForwardProps> = forwardRef(function FeedRichText(\n props: FeedRichTextProps,\n ref: Ref<RichTextEditorState>\n) {\n const { height = { min: 'auto' }, ...restProps } = props;\n const {\n autopilotInfo: { id: autopilotId, label: autopilotLabel },\n searchTypes = [],\n onSearch,\n searchResults = [],\n showSearchResults\n } = useContext(FeedContext);\n const [triggerType, setTriggerType] = useState<'mention' | 'tag'>('mention');\n const [showMentionType, setShowMentionType] = useState(false);\n const searchType = useRef('');\n const t = useI18n();\n\n const onDecoSearch = (event: { search: string; trigger: string }) => {\n const trigger = event.trigger === '@' ? 'mention' : 'tag';\n setTriggerType(trigger);\n if (trigger === 'mention' && event.search === '') {\n setShowMentionType(true);\n } else {\n setShowMentionType(false);\n onSearch?.({\n type: trigger,\n search: event.search,\n mentionType: searchType.current\n });\n }\n };\n\n const typesMenu = {\n onItemActive: (id: string) => {\n searchType.current = id;\n },\n onItemClick: (id: string) => {\n searchType.current = id;\n setShowMentionType(false);\n\n if (id !== autopilotId) {\n onSearch?.({ type: 'mention', search: '', mentionType: id });\n }\n },\n items: searchTypes.map(type => {\n return {\n id: type,\n primary: type === autopilotId ? autopilotLabel : cap(type),\n visual: <Icon name={type === autopilotId ? 'polaris' : type} />\n };\n })\n };\n\n const searchMenu =\n searchResults.length && showSearchResults\n ? {\n header: triggerType === 'mention' ? t('mention_type', [searchType.current]) : '',\n items: searchResults.map(res => {\n return { ...res, href: undefined };\n })\n }\n : undefined;\n\n const getSearchAttributes = (xmlElement: string, searchResult: string) => {\n switch (xmlElement) {\n case 'pega-mention': {\n const attributes = getXMLAttributes(searchResult);\n\n if (!attributes) return;\n return {\n markdown: searchResult,\n component: MentionButtonConfig.component,\n props: attributes,\n text: attributes.text\n };\n }\n case 'pega-tag': {\n const attributes = getXMLAttributes(searchResult);\n\n if (!attributes) return;\n return {\n markdown: searchResult,\n component: HashtagButtonConfig.component,\n props: attributes,\n text: attributes.tag\n };\n }\n case 'pega-autopilot': {\n const attributes = getXMLAttributes(searchResult);\n\n if (!attributes) return;\n return {\n markdown: searchResult,\n component: AutopilotConfig.component,\n props: attributes,\n text: autopilotLabel\n };\n }\n default:\n }\n };\n\n return (\n <RichTextEditor\n {...restProps}\n markdownOnly\n ref={ref}\n height={height}\n searchTriggers={[\n { trigger: '@', regex: String.raw`(?:\\S+(?:[^\\n\\S][^@#\\s]\\S*)*[^\\n\\S]?|)` },\n { trigger: '#', regex: String.raw`[^\\s,]*` }\n ]}\n getSearchItemReplacement={(id: string) => {\n if (id === autopilotId) {\n return {\n markdown: AutopilotConfig.inject(),\n component: AutopilotConfig.component,\n props: { tabIndex: -1 },\n text: autopilotLabel\n };\n }\n\n const item = searchResults?.find(({ id: itemId }) => itemId === id);\n\n if (!item) return undefined;\n\n return {\n markdown:\n triggerType === 'mention'\n ? MentionButtonConfig.inject({\n id: item.id,\n type: searchType.current,\n text: item.primary,\n href: item.href\n })\n : HashtagButtonConfig.inject({ tag: item.id }),\n component:\n triggerType === 'mention'\n ? MentionButtonConfig.component\n : HashtagButtonConfig.component,\n props:\n triggerType === 'mention'\n ? {\n id: item.id,\n text: item.primary,\n type: searchType.current,\n tabIndex: -1\n }\n : { tag: item.primary, tabIndex: -1 },\n text: item.primary\n };\n }}\n searchRenderers={[\n {\n type: MentionButtonConfig.type,\n xmlElement: MentionButtonConfig.xmlElement,\n regexPattern: MentionButtonConfig.regexPattern,\n getSearchAttributes\n },\n {\n type: HashtagButtonConfig.type,\n xmlElement: HashtagButtonConfig.xmlElement,\n regexPattern: HashtagButtonConfig.regexPattern,\n getSearchAttributes\n },\n {\n type: AutopilotConfig.type,\n xmlElement: AutopilotConfig.xmlElement,\n regexPattern: AutopilotConfig.regexPattern,\n getSearchAttributes\n }\n ]}\n onSearch={onDecoSearch}\n menu={showMentionType ? typesMenu : searchMenu}\n />\n );\n});\n\nexport default FeedRichText;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-social",
|
|
3
|
-
"version": "5.0.0-dev.
|
|
3
|
+
"version": "5.0.0-dev.12.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
"build": "tsc -b tsconfig.build.json"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@pega/cosmos-react-core": "5.0.0-dev.
|
|
25
|
-
"@pega/cosmos-react-rte": "5.0.0-dev.
|
|
26
|
-
"@pega/cosmos-react-work": "5.0.0-dev.
|
|
24
|
+
"@pega/cosmos-react-core": "5.0.0-dev.12.0",
|
|
25
|
+
"@pega/cosmos-react-rte": "5.0.0-dev.12.0",
|
|
26
|
+
"@pega/cosmos-react-work": "5.0.0-dev.12.0",
|
|
27
27
|
"@types/parse5": "^6.0.0",
|
|
28
28
|
"@types/react": "^17.0.62",
|
|
29
29
|
"@types/react-dom": "^17.0.20",
|