npm - @pega/cosmos-react-social - Versions diffs - 8.0.0-build.9.0 → 8.0.0 - Mend

@pega/cosmos-react-social 8.0.0-build.9.0 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (212) hide show

package/lib/components/Chat/Message.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Message.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,IAAI,EACJ,UAAU,EACV,aAAa,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAIlF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEvD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE7C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEhD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAE5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA,EAAE,CAAC;AACnD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAExD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;CAElD,CAAC;AAWF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;;MAGN,2BAA2B;;wCAEO,KAAK,CAAC,IAAI,CAAC,OAAO;qCACrB,KAAK,CAAC,IAAI,CAAC,OAAO;;;oBAGnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;WAEjD,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,eAAe,CAAC;;;QAG9E,UAAU;;;;0CAIwB,KAAK,CAAC,IAAI,CAAC,OAAO;wCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAO9C,MAAM,CAAC,MAAM,gBAAgB,GAKH,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,GAAG,CAAC,EAAE,EAAE;IAC3E,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;IACxE,MAAM,kBAAkB,GAAG;QACzB,MAAM,CAAC,aAAa,CAAC;QACrB,MAAM,CAAC,aAAa,CAAC;QACrB,SAAS;QACT,KAAK,CAAC,aAAa,CAAC;QACpB,SAAS;KACV,CAAC;IACF,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC;IACpC,MAAM,oBAAoB,GAAG,SAAS,CAAC;IACvC,MAAM,eAAe,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;IAE5C,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;QACvB,MAAM,aAAa,GAAuB;YACxC,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,IAAI,UAAU,KAAK,OAAO,EAAE,CAAC;YAC3B,aAAa,CAAC,OAAO,GAAG,kBAAkB,CAAC,YAAY,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACvF,CAAC;aAAM,IAAI,UAAU,KAAK,KAAK,EAAE,CAAC;YAChC,aAAa,CAAC,OAAO,GAAG,eAAe,CAAC;QAC1C,CAAC;aAAM,IAAI,UAAU,KAAK,UAAU,EAAE,CAAC;YACrC,aAAa,CAAC,OAAO,GAAG,oBAAoB,CAAC;QAC/C,CAAC;QACD,OAAO,aAAa,CAAC;IACvB,CAAC;IACD,OAAO;QACL,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,eAAe;KACzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,EAAE,CAC7C,CAAC,EACC,SAAS,EACT,UAAU,EACV,UAAU,EACV,MAAM,EACN,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,eAAe,EAAE,YAAY,EAC7B,OAAO,EACP,OAAO,EAAE,EACP,kBAAkB,EAAE,eAAe,EACnC,sBAAsB,EAAE,mBAAmB,EAC3C,MAAM,EACP,EACD,YAAY,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EACnD,EACF,EACF,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;IACzF,MAAM,mBAAmB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IACnF,MAAM,qBAAqB,GAAG,MAAM,KAAK,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC;IACxF,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,oBAAoB,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACpD,MAAM,mBAAmB,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAClD,OAAO,GAAG,CAAA;QACN,SAAS,KAAK,KAAK;QACnB,CAAC,CAAC,GAAG,CAAA;6CACgC,OAAO;WACzC;QACH,CAAC,CAAC,GAAG,CAAA;2CAC8B,OAAO;WACvC;0BACe,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;;;8BAGlB,OAAO;;;QAG7B,iBAAiB;;;QAGjB,mBAAmB;sBACL,OAAO;kCACK,YAAY,KAAK,YAAY,aAAa,YAAY;qBACnE,YAAY;;iBAEhB,oBAAoB;;;uCAGE,OAAO;;;;;;UAMpC,SAAS,KAAK,IAAI;QACpB,GAAG,CAAA;2BACgB,YAAY,aAAa,YAAY,cAAc,YAAY;SACjF;;YAEG,0BAA0B;qBACjB,OAAO,aAAa,OAAO;;;;;;YAMpC,eAAe;mBACR,oBAAoB;;;cAGzB,mBAAmB;;cAEnB,oBAAoB;;;;kCAIA,mBAAmB;;cAEvC,kBAAkB;yBACP,OAAO,aAAa,OAAO;2BACzB,SAAS,CAAC,GAAG;+CACO,OAAO;;cAExC,kBAAkB;;yBAEP,OAAO;4CACY,oBAAoB;;;;;;cAMlD,oBAAoB,MAAM,kBAAkB;;;;;;cAM5C,UAAU;uBACD,eAAe;;cAExB,UAAU;uBACD,oBAAoB;;;;YAI/B,CAAC,UAAU;QACb,GAAG,CAAA;gBACG,mBAAmB;kBACjB,kBAAkB;;;;WAIzB;;;UAGD,mBAAmB;qBACR,OAAO,aAAa,OAAO;mBAC7B,mBAAmB;8CACQ,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;;;UAGhF,0BAA0B;mBACjB,mBAAmB;+BACP,OAAO;;UAE5B,uBAAuB;;qBAEZ,mBAAmB;;;;UAI9B,eAAe,KAAK,iBAAiB;mBAC5B,oBAAoB;;;;;;;;;;;qBAWlB,oBAAoB;;;;qBAIpB,oBAAoB;;;0BAGf,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;QAKzC,uBAAuB;;qBAEV,OAAO;UAClB,cAAc,KAAK,gBAAgB;8BACf,OAAO;;mBAElB,mBAAmB;;UAE5B,gBAAgB;mBACP,qBAAqB;;;QAGhC,qBAAqB;;;;;;QAMrB,kBAAkB;wCACc,OAAO;;UAErC,eAAe,KAAK,iBAAiB;;;;;KAK1C,CAAC;AACJ,CAAC,CACF,CAAC;AACF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAKvD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;;;sBAGU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;;;sBAG7B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;mCAGxB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;kBAC3C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;uBAEhC,KAAK;;;GAGzB,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EACjD,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,MAAM,EAAE,EACpB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;aACC,MAAM;GAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;oCAEwB,KAAK,CAAC,IAAI,CAAC,OAAO;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n tryCatch,\n Icon,\n StyledIcon,\n StyledText,\n calculateFontSize,\n Link,\n StyledLink,\n readableColor\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 cursor: pointer;\n`;\n\nexport const StyledMediaLink = styled(Link)``;\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\nexport const StyledMediaButton = styled(BareButton)`\n text-align: start;\n`;\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 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 theme: {\n base: {\n palette: { urgent }\n }\n }\n}) => {\n return css`\n color: ${urgent};\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 { rgba, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n tryCatch,\n Icon,\n StyledIcon,\n StyledText,\n calculateFontSize,\n Link,\n StyledLink,\n readableColor\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/RichTextEditor.styles';\n\nimport type { MessageProps } from './Chat.types';\n\nexport const StyledMessageBubbleContent = styled.div`\n ${StyledEditorContainer} {\n padding: 0;\n a {\n color: inherit;\n }\n }\n`;\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 cursor: pointer;\n`;\n\nexport const StyledMediaLink = styled(Link)``;\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\nexport const StyledMediaButton = styled(BareButton)`\n text-align: start;\n`;\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: min(calc(3 * ${borderRadius}), 1.5rem) min(${borderRadius}, 0.5rem)\n min(calc(3 * ${borderRadius}), 1.5rem) min(calc(3 * ${borderRadius}), 1.5rem);\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 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 theme: {\n base: {\n palette: { urgent }\n }\n }\n}) => {\n return css`\n color: ${urgent};\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"]}

package/lib/components/Chat/SuggestedReplyPicker.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref } from 'react';
-import type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';
+import type { Ref } from 'react';
+import type { ForwardRefForwardPropsComponent, OmitStrict } from '@pega/cosmos-react-core';
 import type { ChatComposerProps } from './ChatComposer';
 export declare const StyledSuggestedReplyHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSuggestedReplyContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -48,6 +48,6 @@ export interface SuggestedReplyPickerProps extends Pick<ChatComposerProps, 'onSe
     /** Show notification on picker header */
     showNotification?: boolean;
 }
-declare const SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps>;
+declare const SuggestedReplyPicker: ForwardRefForwardPropsComponent<SuggestedReplyPickerProps>;
 export default SuggestedReplyPicker;
 //# sourceMappingURL=SuggestedReplyPicker.d.ts.map

package/lib/components/Chat/SuggestedReplyPicker.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,~~EAAE,iBAAiB,~~EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAoBrE~~,OAAO,KAAK,EAAE,~~YAAY,~~EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;~~AAMxE~~,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,WAAW,yGAAe,CAAC;AACxC,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAChD,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAI/C,eAAO,MAAM,wBAAwB;8BAA4C,OAAO;SAsBtF,CAAC;AAoCH,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;CAC/B;AAED,UAAU,iBAAkB,SAAQ,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC;IAC3E,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,eAAgB,SAAQ,kBAAkB;IAClD,qEAAqE;IACrE,SAAS,EAAE,eAAe,GAAG,OAAO,CAAC;CACtC;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,eAAe,CAAC;AAEtF,eAAO,MAAM,mBAAmB,UAAW,cAAc,KAAG,KAAK,IAAI,iBAEpE,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,cAAc,KAAG,KAAK,IAAI,eAElE,CAAC;AAEF,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;IACpE,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAUD,QAAA,MAAM,oBAAoB,EAAE,~~iBAAiB,~~CAAC,yBAAyB,~~GAAG~~,~~YAAY,CA8RlF,~~CAAC;~~AAEL~~,eAAe,oBAAoB,CAAC"}
1	+ {"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAoBlD,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAO3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,WAAW,yGAAe,CAAC;AACxC,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAChD,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAI/C,eAAO,MAAM,wBAAwB;8BAA4C,OAAO;SAsBtF,CAAC;AAoCH,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;CAC/B;AAED,UAAU,iBAAkB,SAAQ,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC;IAC3E,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,eAAgB,SAAQ,kBAAkB;IAClD,qEAAqE;IACrE,SAAS,EAAE,eAAe,GAAG,OAAO,CAAC;CACtC;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,eAAe,CAAC;AAEtF,eAAO,MAAM,mBAAmB,UAAW,cAAc,KAAG,KAAK,IAAI,iBAEpE,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,cAAc,KAAG,KAAK,IAAI,eAElE,CAAC;AAEF,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;IACpE,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAUD,QAAA,MAAM,oBAAoB,EAAE,+BAA+B,CAAC,yBAAyB,CA8RpF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/Chat/SuggestedReplyPicker.js CHANGED Viewed

@@ -6,6 +6,7 @@ import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/ti
 import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
 import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
 import { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';
+import { RichTextViewer } from '@pega/cosmos-react-rte';
 registerIcon(timesIcon, caretLeftIcon, caretRightIcon);
 export const StyledSuggestedReplyHeader = styled.div ``;
 export const StyledSuggestedReplyContent = styled.div ``;
@@ -70,8 +71,7 @@ const StyledReplyType = styled(Flex)(({ theme, type }) => {
   `;
 });
 StyledReplyType.defaultProps = defaultThemeProp;
-const SuggestedReplyPicker = forwardRef(function SuggestedReplyPicker(props, ref) {
-    const { replies = [], collapsed, onExpandCollapse, showNotification, onSelect, currentReplyId, onReplyChange, onSend, maxLength = 256, disabled = false, ...restProps } = props;
+const SuggestedReplyPicker = forwardRef(function SuggestedReplyPicker({ replies = [], collapsed, onExpandCollapse, showNotification, onSelect, currentReplyId, onReplyChange, onSend, maxLength = 256, disabled = false, ...restProps }, ref) {
     const { announcePolite } = useLiveLog();
     const t = useI18n();
     const { rtl, ltr } = useDirection();
@@ -127,7 +127,7 @@ const SuggestedReplyPicker = forwardRef(function SuggestedReplyPicker(props, ref
             if (isReplyErrorState(currentReply)) {
                 return (_jsx(Flex, { container: { justify: 'center' }, children: currentReply.errorType === 'noSuggestions' ? (_jsx(EmptyState, { message: currentReply.message })) : (_jsx(ErrorState, { message: currentReply.message })) }));
             }
-            return (_jsx(Flex, { container: true, as: StyledReply, children: currentReply.message }));
+            return (_jsx(Flex, { container: true, as: StyledReply, children: _jsx(RichTextViewer, { type: 'markdown', content: currentReply.message }) }));
         }
         return null;
     }, [currentReply]);

package/lib/components/Chat/SuggestedReplyPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SuggestedReplyPicker.js","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Icon,\n registerIcon,\n Button,\n Text,\n useI18n,\n defaultThemeProp,\n useLiveLog,\n ExpandCollapse,\n Alert,\n useDirection,\n EmptyState,\n Progress,\n hasProp,\n ErrorState\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\n\nimport type { ChatComposerProps } from './ChatComposer';\n\nregisterIcon(timesIcon, caretLeftIcon, caretRightIcon);\n\nexport const StyledSuggestedReplyHeader = styled.div``;\nexport const StyledSuggestedReplyContent = styled.div``;\nexport const StyledReply = styled.div``;\nexport const StyledRepliesAction = styled.div``;\nexport const StyledNotification = styled.div``;\nconst maxNumOfLines = 5;\nconst minNumOfLines = 2;\n\nexport const StyledSuggestedReplyIcon = styled(Icon)<{ suggestedReplyCollapsed?: boolean }>(({\n suggestedReplyCollapsed,\n theme\n}) => {\n const { rtl } = useDirection();\n const {\n base: {\n animation: {\n speed,\n timing: { ease }\n }\n }\n } = theme;\n return css`\n transition-property: transform;\n transition-duration: ${speed};\n transition-timing-function: ${ease};\n ${suggestedReplyCollapsed &&\n css`\n transform: rotateZ(${rtl ? '0deg' : '-90deg'});\n `}\n `;\n});\n\nStyledSuggestedReplyIcon.defaultProps = defaultThemeProp;\n\nconst StyledSuggestedReplyContainer = styled.div(props => {\n const { theme } = props;\n return css`\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n\n > ${StyledSuggestedReplyHeader} {\n padding: ${theme.base.spacing};\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n\n ${StyledAlert} {\n position: relative;\n inset-block-start: calc(-0.25 * ${theme.base.spacing});\n inset-inline-start: calc(-0.5 * ${theme.base.spacing});\n }\n\n ${StyledSuggestedReplyContent} {\n padding: calc(2 * ${theme.base.spacing});\n position: relative;\n\n > ${StyledReply} {\n overflow-y: auto;\n max-height: calc(2.5 * ${theme.base.spacing} * ${maxNumOfLines});\n min-height: calc(2.5 * ${theme.base.spacing} * ${minNumOfLines});\n }\n }\n `;\n});\n\nStyledSuggestedReplyContainer.defaultProps = defaultThemeProp;\n\nexport interface SuggestedReplyItem {\n /** Id for this suggested reply /\n id: string;\n /* Suggested reply message /\n message: string;\n /* type of this suggested reply /\n type: 'dialog' \| 'genAIReply';\n}\n\ninterface ReplyLoadingState extends OmitStrict<SuggestedReplyItem, 'message'> {\n /* loading until reply is retrieved /\n loading: boolean;\n}\n\ninterface ReplyErrorState extends SuggestedReplyItem {\n /* If there are no suggestions from GenAI or if there is an error /\n errorType: 'noSuggestions' \| 'error';\n}\n\nexport type SuggestedReply = SuggestedReplyItem \| ReplyLoadingState \| ReplyErrorState;\n\nexport const isReplyLoadingState = (reply: SuggestedReply): reply is ReplyLoadingState => {\n return hasProp(reply, 'loading');\n};\n\nexport const isReplyErrorState = (reply: SuggestedReply): reply is ReplyErrorState => {\n return hasProp(reply, 'errorType');\n};\n\nexport interface SuggestedReplyPickerProps\n extends Pick<ChatComposerProps, 'onSend' \| 'maxLength' \| 'disabled'> {\n /* ref to the element /\n ref?: Ref<HTMLDivElement>;\n /* Suggested replies /\n replies?: SuggestedReply[];\n /* Id of the current reply /\n currentReplyId?: SuggestedReply['id'];\n /* Fired when user clicks on left or right buttons\n * @param id Id of the new reply\n /\n onReplyChange: (id: SuggestedReply['id']) => void;\n /* Current state of the panel /\n collapsed: boolean;\n /* Callback for expand or collapse click /\n onExpandCollapse: () => void;\n /* Callback for the event when a suggested reply is selected /\n onSelect: (suggestedReply: SuggestedReply) => void;\n /* Show notification on picker header */\n showNotification?: boolean;\n}\n\nconst StyledReplyType = styled(Flex)(({ theme, type }) => {\n return css`\n color: ${type === 'dialog' ? 'inherit' : theme.base.palette.ai};\n `;\n});\n\nStyledReplyType.defaultProps = defaultThemeProp;\n\nconst SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps> =\n forwardRef(function SuggestedReplyPicker(\n props: PropsWithoutRef<SuggestedReplyPickerProps>,\n ref: SuggestedReplyPickerProps['ref']\n ) {\n const {\n replies = [],\n collapsed,\n onExpandCollapse,\n showNotification,\n onSelect,\n currentReplyId,\n onReplyChange,\n onSend,\n maxLength = 256,\n disabled = false,\n ...restProps\n } = props;\n const { announcePolite } = useLiveLog();\n const t = useI18n();\n const { rtl, ltr } = useDirection();\n\n const currentReply = replies.find(reply => reply.id === currentReplyId);\n const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);\n\n // Allows suggested replies to cycle\n const onSuggestedReplyChange = (mode: 'prev' \| 'next') => {\n let newReplyIndex = mode === 'prev' ? currentReplyIndex - 1 : currentReplyIndex + 1;\n newReplyIndex = (newReplyIndex + replies.length) % replies.length;\n onReplyChange(replies[newReplyIndex].id);\n };\n\n // SR announcement when current reply changes\n useEffect(() => {\n if (!replies \|\| replies.length === 0 \|\| !currentReplyId) {\n return;\n }\n if (currentReply && !isReplyLoadingState(currentReply))\n announcePolite({\n message: `${t('suggested_replies_current_of_total', [\n currentReplyIndex + 1,\n replies.length\n ])},${currentReply?.message},${\n currentReply?.type === 'dialog' ? t('dialog') : t('pega_genAI')\n }`,\n type: 'acknowledgement'\n });\n }, [currentReply]);\n\n const onEditAnnouncement = () => {\n announcePolite({\n message: t('suggested_reply_copied_to_input_field'),\n type: 'acknowledgement'\n });\n };\n\n const suggestionType = useMemo(() => {\n if (currentReply && !collapsed) {\n let iconName = '';\n let label;\n if (currentReply.type === 'dialog') {\n iconName = 'script';\n label = t('dialog');\n } else {\n iconName = 'polaris-solid';\n label = t('pega_genAI');\n }\n\n return (\n <StyledReplyType\n container={{ alignItems: 'center', pad: 1, gap: 0.5 }}\n type={currentReply.type}\n >\n <Icon name={iconName} size='s' />\n {label}\n </StyledReplyType>\n );\n }\n\n return null;\n }, [currentReply, collapsed]);\n\n const suggestion = useMemo(() => {\n if (currentReply) {\n if (isReplyLoadingState(currentReply)) {\n return (\n <Progress\n placement='block'\n message={t('loading')}\n liveConfig={{ contextualLabel: `${t('pega_genAI')} ${t('suggestion')}` }}\n />\n );\n }\n\n if (isReplyErrorState(currentReply)) {\n return (\n <Flex container={{ justify: 'center' }}>\n {currentReply.errorType === 'noSuggestions' ? (\n <EmptyState message={currentReply.message} />\n ) : (\n <ErrorState message={currentReply.message} />\n )}\n </Flex>\n );\n }\n\n return (\n <Flex container as={StyledReply}>\n {currentReply.message}\n </Flex>\n );\n }\n\n return null;\n }, [currentReply]);\n\n return (\n <StyledSuggestedReplyContainer ref={ref} {...restProps}>\n <Flex\n as={StyledSuggestedReplyHeader}\n container={{\n justify: 'between',\n alignContent: 'center'\n }}\n >\n <Flex\n container={{\n alignItems: 'center',\n gap: 1\n }}\n >\n {ltr && (\n <Button\n variant='simple'\n label={collapsed ? t('expand') : t('collapse')}\n aria-label={t(\n collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n )}\n icon\n onClick={onExpandCollapse}\n >\n <StyledSuggestedReplyIcon name='caret-down' suggestedReplyCollapsed={collapsed} />\n </Button>\n )}\n\n <Flex container={{ gap: 0.5 }}>\n <Text variant='h3'>{t('suggested_replies')}</Text>\n {collapsed && showNotification && <Alert variant='urgent' />}\n </Flex>\n\n {!collapsed && replies?.length > 0 && (\n <Text variant='secondary'>{`- ${currentReplyIndex + 1}/${replies.length}`}</Text>\n )}\n\n {rtl && (\n <Button\n variant='simple'\n label={collapsed ? t('expand') : t('collapse')}\n aria-label={t(\n collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n )}\n icon\n onClick={onExpandCollapse}\n >\n <StyledSuggestedReplyIcon name='caret-down' suggestedReplyCollapsed={collapsed} />\n </Button>\n )}\n </Flex>\n {suggestionType}\n </Flex>\n <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n <Flex\n container={{\n direction: 'column',\n gap: 1\n }}\n as={StyledSuggestedReplyContent}\n >\n {currentReply && replies.length ? (\n suggestion\n ) : (\n <EmptyState message={t('no_suggestion')} />\n )}\n <Flex\n container={{\n justify: 'center'\n }}\n as={StyledRepliesAction}\n >\n {replies.length > 1 && (\n <Button\n icon\n aria-label={t('prev_suggested_reply')}\n variant='simple'\n disabled={currentReplyId === undefined \|\| replies.length <= 1}\n onClick={() => {\n onSuggestedReplyChange('prev');\n }}\n >\n <Icon name='caret-left' />\n </Button>\n )}\n <Button\n disabled={\n disabled \|\|\n currentReplyId === undefined \|\|\n !replies \|\|\n replies.length === 0 \|\|\n (currentReply && isReplyLoadingState(currentReply) && currentReply.loading) \|\|\n (currentReply && isReplyErrorState(currentReply) && !!currentReply.errorType)\n }\n onClick={() => {\n if (\n currentReply &&\n !isReplyErrorState(currentReply) &&\n !isReplyLoadingState(currentReply)\n ) {\n onSelect(currentReply);\n onExpandCollapse();\n onEditAnnouncement();\n }\n }}\n aria-label={\n replies.length > 0 && currentReplyId\n ? t('edit_current_template', [\n replies.length > 0 && currentReplyId\n ? replies.findIndex(reply => reply.id === currentReplyId) + 1\n : 0,\n replies.length\n ])\n : undefined\n }\n >\n {t('edit')}\n </Button>\n <Button\n disabled={\n disabled \|\|\n currentReplyId === undefined \|\|\n !replies \|\|\n replies.length === 0 \|\|\n (!!maxLength && replies.length > maxLength) \|\|\n (currentReply && isReplyLoadingState(currentReply) && currentReply.loading) \|\|\n (currentReply && isReplyErrorState(currentReply) && !!currentReply.errorType)\n }\n onClick={() => {\n if (\n currentReply &&\n !isReplyErrorState(currentReply) &&\n !isReplyLoadingState(currentReply)\n ) {\n onSend(currentReply.message);\n onExpandCollapse();\n }\n }}\n aria-label={\n replies.length > 0 && currentReplyId\n ? t('send_current_template', [\n replies.length > 0 && currentReplyId\n ? replies.findIndex(reply => reply.id === currentReplyId) + 1\n : 0,\n replies.length\n ])\n : undefined\n }\n >\n {t('send')}\n </Button>\n {replies.length > 1 && (\n <Button\n icon\n aria-label={t('next_suggested_reply')}\n variant='simple'\n onClick={() => {\n onSuggestedReplyChange('next');\n }}\n disabled={currentReplyId === undefined \|\| replies.length <= 1}\n >\n <Icon name='caret-right' />\n </Button>\n )}\n </Flex>\n </Flex>\n </ExpandCollapse>\n </StyledSuggestedReplyContainer>\n );\n });\n\nexport default SuggestedReplyPicker;\n"]}
1	+ {"version":3,"file":"SuggestedReplyPicker.js","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Icon,\n registerIcon,\n Button,\n Text,\n useI18n,\n defaultThemeProp,\n useLiveLog,\n ExpandCollapse,\n Alert,\n useDirection,\n EmptyState,\n Progress,\n hasProp,\n ErrorState\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, OmitStrict } from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport type { ChatComposerProps } from './ChatComposer';\n\nregisterIcon(timesIcon, caretLeftIcon, caretRightIcon);\n\nexport const StyledSuggestedReplyHeader = styled.div``;\nexport const StyledSuggestedReplyContent = styled.div``;\nexport const StyledReply = styled.div``;\nexport const StyledRepliesAction = styled.div``;\nexport const StyledNotification = styled.div``;\nconst maxNumOfLines = 5;\nconst minNumOfLines = 2;\n\nexport const StyledSuggestedReplyIcon = styled(Icon)<{ suggestedReplyCollapsed?: boolean }>(({\n suggestedReplyCollapsed,\n theme\n}) => {\n const { rtl } = useDirection();\n const {\n base: {\n animation: {\n speed,\n timing: { ease }\n }\n }\n } = theme;\n return css`\n transition-property: transform;\n transition-duration: ${speed};\n transition-timing-function: ${ease};\n ${suggestedReplyCollapsed &&\n css`\n transform: rotateZ(${rtl ? '0deg' : '-90deg'});\n `}\n `;\n});\n\nStyledSuggestedReplyIcon.defaultProps = defaultThemeProp;\n\nconst StyledSuggestedReplyContainer = styled.div(props => {\n const { theme } = props;\n return css`\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n\n > ${StyledSuggestedReplyHeader} {\n padding: ${theme.base.spacing};\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n\n ${StyledAlert} {\n position: relative;\n inset-block-start: calc(-0.25 * ${theme.base.spacing});\n inset-inline-start: calc(-0.5 * ${theme.base.spacing});\n }\n\n ${StyledSuggestedReplyContent} {\n padding: calc(2 * ${theme.base.spacing});\n position: relative;\n\n > ${StyledReply} {\n overflow-y: auto;\n max-height: calc(2.5 * ${theme.base.spacing} * ${maxNumOfLines});\n min-height: calc(2.5 * ${theme.base.spacing} * ${minNumOfLines});\n }\n }\n `;\n});\n\nStyledSuggestedReplyContainer.defaultProps = defaultThemeProp;\n\nexport interface SuggestedReplyItem {\n /** Id for this suggested reply /\n id: string;\n /* Suggested reply message /\n message: string;\n /* type of this suggested reply /\n type: 'dialog' \| 'genAIReply';\n}\n\ninterface ReplyLoadingState extends OmitStrict<SuggestedReplyItem, 'message'> {\n /* loading until reply is retrieved /\n loading: boolean;\n}\n\ninterface ReplyErrorState extends SuggestedReplyItem {\n /* If there are no suggestions from GenAI or if there is an error /\n errorType: 'noSuggestions' \| 'error';\n}\n\nexport type SuggestedReply = SuggestedReplyItem \| ReplyLoadingState \| ReplyErrorState;\n\nexport const isReplyLoadingState = (reply: SuggestedReply): reply is ReplyLoadingState => {\n return hasProp(reply, 'loading');\n};\n\nexport const isReplyErrorState = (reply: SuggestedReply): reply is ReplyErrorState => {\n return hasProp(reply, 'errorType');\n};\n\nexport interface SuggestedReplyPickerProps\n extends Pick<ChatComposerProps, 'onSend' \| 'maxLength' \| 'disabled'> {\n /* ref to the element /\n ref?: Ref<HTMLDivElement>;\n /* Suggested replies /\n replies?: SuggestedReply[];\n /* Id of the current reply /\n currentReplyId?: SuggestedReply['id'];\n /* Fired when user clicks on left or right buttons\n * @param id Id of the new reply\n /\n onReplyChange: (id: SuggestedReply['id']) => void;\n /* Current state of the panel /\n collapsed: boolean;\n /* Callback for expand or collapse click /\n onExpandCollapse: () => void;\n /* Callback for the event when a suggested reply is selected /\n onSelect: (suggestedReply: SuggestedReply) => void;\n /* Show notification on picker header */\n showNotification?: boolean;\n}\n\nconst StyledReplyType = styled(Flex)(({ theme, type }) => {\n return css`\n color: ${type === 'dialog' ? 'inherit' : theme.base.palette.ai};\n `;\n});\n\nStyledReplyType.defaultProps = defaultThemeProp;\n\nconst SuggestedReplyPicker: ForwardRefForwardPropsComponent<SuggestedReplyPickerProps> = forwardRef(\n function SuggestedReplyPicker(\n {\n replies = [],\n collapsed,\n onExpandCollapse,\n showNotification,\n onSelect,\n currentReplyId,\n onReplyChange,\n onSend,\n maxLength = 256,\n disabled = false,\n ...restProps\n }: PropsWithoutRef<SuggestedReplyPickerProps>,\n ref: SuggestedReplyPickerProps['ref']\n ) {\n const { announcePolite } = useLiveLog();\n const t = useI18n();\n const { rtl, ltr } = useDirection();\n\n const currentReply = replies.find(reply => reply.id === currentReplyId);\n const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);\n\n // Allows suggested replies to cycle\n const onSuggestedReplyChange = (mode: 'prev' \| 'next') => {\n let newReplyIndex = mode === 'prev' ? currentReplyIndex - 1 : currentReplyIndex + 1;\n newReplyIndex = (newReplyIndex + replies.length) % replies.length;\n onReplyChange(replies[newReplyIndex].id);\n };\n\n // SR announcement when current reply changes\n useEffect(() => {\n if (!replies \|\| replies.length === 0 \|\| !currentReplyId) {\n return;\n }\n if (currentReply && !isReplyLoadingState(currentReply))\n announcePolite({\n message: `${t('suggested_replies_current_of_total', [\n currentReplyIndex + 1,\n replies.length\n ])},${currentReply?.message},${\n currentReply?.type === 'dialog' ? t('dialog') : t('pega_genAI')\n }`,\n type: 'acknowledgement'\n });\n }, [currentReply]);\n\n const onEditAnnouncement = () => {\n announcePolite({\n message: t('suggested_reply_copied_to_input_field'),\n type: 'acknowledgement'\n });\n };\n\n const suggestionType = useMemo(() => {\n if (currentReply && !collapsed) {\n let iconName = '';\n let label;\n if (currentReply.type === 'dialog') {\n iconName = 'script';\n label = t('dialog');\n } else {\n iconName = 'polaris-solid';\n label = t('pega_genAI');\n }\n\n return (\n <StyledReplyType\n container={{ alignItems: 'center', pad: 1, gap: 0.5 }}\n type={currentReply.type}\n >\n <Icon name={iconName} size='s' />\n {label}\n </StyledReplyType>\n );\n }\n\n return null;\n }, [currentReply, collapsed]);\n\n const suggestion = useMemo(() => {\n if (currentReply) {\n if (isReplyLoadingState(currentReply)) {\n return (\n <Progress\n placement='block'\n message={t('loading')}\n liveConfig={{ contextualLabel: `${t('pega_genAI')} ${t('suggestion')}` }}\n />\n );\n }\n\n if (isReplyErrorState(currentReply)) {\n return (\n <Flex container={{ justify: 'center' }}>\n {currentReply.errorType === 'noSuggestions' ? (\n <EmptyState message={currentReply.message} />\n ) : (\n <ErrorState message={currentReply.message} />\n )}\n </Flex>\n );\n }\n\n return (\n <Flex container as={StyledReply}>\n <RichTextViewer type='markdown' content={currentReply.message} />\n </Flex>\n );\n }\n\n return null;\n }, [currentReply]);\n\n return (\n <StyledSuggestedReplyContainer ref={ref} {...restProps}>\n <Flex\n as={StyledSuggestedReplyHeader}\n container={{\n justify: 'between',\n alignContent: 'center'\n }}\n >\n <Flex\n container={{\n alignItems: 'center',\n gap: 1\n }}\n >\n {ltr && (\n <Button\n variant='simple'\n label={collapsed ? t('expand') : t('collapse')}\n aria-label={t(\n collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n )}\n icon\n onClick={onExpandCollapse}\n >\n <StyledSuggestedReplyIcon name='caret-down' suggestedReplyCollapsed={collapsed} />\n </Button>\n )}\n\n <Flex container={{ gap: 0.5 }}>\n <Text variant='h3'>{t('suggested_replies')}</Text>\n {collapsed && showNotification && <Alert variant='urgent' />}\n </Flex>\n\n {!collapsed && replies?.length > 0 && (\n <Text variant='secondary'>{`- ${currentReplyIndex + 1}/${replies.length}`}</Text>\n )}\n\n {rtl && (\n <Button\n variant='simple'\n label={collapsed ? t('expand') : t('collapse')}\n aria-label={t(\n collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n )}\n icon\n onClick={onExpandCollapse}\n >\n <StyledSuggestedReplyIcon name='caret-down' suggestedReplyCollapsed={collapsed} />\n </Button>\n )}\n </Flex>\n {suggestionType}\n </Flex>\n <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n <Flex\n container={{\n direction: 'column',\n gap: 1\n }}\n as={StyledSuggestedReplyContent}\n >\n {currentReply && replies.length ? (\n suggestion\n ) : (\n <EmptyState message={t('no_suggestion')} />\n )}\n <Flex\n container={{\n justify: 'center'\n }}\n as={StyledRepliesAction}\n >\n {replies.length > 1 && (\n <Button\n icon\n aria-label={t('prev_suggested_reply')}\n variant='simple'\n disabled={currentReplyId === undefined \|\| replies.length <= 1}\n onClick={() => {\n onSuggestedReplyChange('prev');\n }}\n >\n <Icon name='caret-left' />\n </Button>\n )}\n <Button\n disabled={\n disabled \|\|\n currentReplyId === undefined \|\|\n !replies \|\|\n replies.length === 0 \|\|\n (currentReply && isReplyLoadingState(currentReply) && currentReply.loading) \|\|\n (currentReply && isReplyErrorState(currentReply) && !!currentReply.errorType)\n }\n onClick={() => {\n if (\n currentReply &&\n !isReplyErrorState(currentReply) &&\n !isReplyLoadingState(currentReply)\n ) {\n onSelect(currentReply);\n onExpandCollapse();\n onEditAnnouncement();\n }\n }}\n aria-label={\n replies.length > 0 && currentReplyId\n ? t('edit_current_template', [\n replies.length > 0 && currentReplyId\n ? replies.findIndex(reply => reply.id === currentReplyId) + 1\n : 0,\n replies.length\n ])\n : undefined\n }\n >\n {t('edit')}\n </Button>\n <Button\n disabled={\n disabled \|\|\n currentReplyId === undefined \|\|\n !replies \|\|\n replies.length === 0 \|\|\n (!!maxLength && replies.length > maxLength) \|\|\n (currentReply && isReplyLoadingState(currentReply) && currentReply.loading) \|\|\n (currentReply && isReplyErrorState(currentReply) && !!currentReply.errorType)\n }\n onClick={() => {\n if (\n currentReply &&\n !isReplyErrorState(currentReply) &&\n !isReplyLoadingState(currentReply)\n ) {\n onSend(currentReply.message);\n onExpandCollapse();\n }\n }}\n aria-label={\n replies.length > 0 && currentReplyId\n ? t('send_current_template', [\n replies.length > 0 && currentReplyId\n ? replies.findIndex(reply => reply.id === currentReplyId) + 1\n : 0,\n replies.length\n ])\n : undefined\n }\n >\n {t('send')}\n </Button>\n {replies.length > 1 && (\n <Button\n icon\n aria-label={t('next_suggested_reply')}\n variant='simple'\n onClick={() => {\n onSuggestedReplyChange('next');\n }}\n disabled={currentReplyId === undefined \|\| replies.length <= 1}\n >\n <Icon name='caret-right' />\n </Button>\n )}\n </Flex>\n </Flex>\n </ExpandCollapse>\n </StyledSuggestedReplyContainer>\n );\n }\n);\n\nexport default SuggestedReplyPicker;\n"]}

package/lib/components/Chat/SystemMessage.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps, PropsWithDefaults } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent, PropsWithDefaults } from '@pega/cosmos-react-core';
 import type { SystemMessageProps } from './Chat.types';
 type SystemMessagePropsWithDefaults = PropsWithDefaults<SystemMessageProps, 'variant'>;
 export declare const StyledSystemMessage: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, Pick<SystemMessagePropsWithDefaults, "variant">, never>;
-declare const SystemMessage: FunctionComponent<SystemMessageProps & ForwardProps>;
+declare const SystemMessage: ForwardRefForwardPropsComponent<SystemMessageProps>;
 export default SystemMessage;
 //# sourceMappingURL=SystemMessage.d.ts.map

package/lib/components/Chat/SystemMessage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SystemMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,~~iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAKhE,OAAO,KAAK,~~EAAE,~~YAAY,EAAE,~~iBAAiB,EAAE,MAAM,yBAAyB,CAAC;~~AAE/E~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,KAAK,8BAA8B,GAAG,iBAAiB,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;AAEvF,eAAO,MAAM,mBAAmB,qJA6C/B,CAAC;AAIF,QAAA,MAAM,aAAa,EAAE,~~iBAAiB,~~CAAC,kBAAkB,~~GAAG~~,~~YAAY,CA8BvE,~~CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"SystemMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,+BAA+B,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAElG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,KAAK,8BAA8B,GAAG,iBAAiB,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;AAEvF,eAAO,MAAM,mBAAmB,qJA6C/B,CAAC;AAIF,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAkCtE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Chat/SystemMessage.js CHANGED Viewed

@@ -35,8 +35,7 @@ export const StyledSystemMessage = styled.li(({ theme: { base: { palette: { 'for
     `;
 });
 StyledSystemMessage.defaultProps = defaultThemeProp;
-const SystemMessage = forwardRef(function SystemMessage(props, ref) {
-    const { message, timestamp, variant = 'secondary', ...restProps } = props;
+const SystemMessage = forwardRef(function SystemMessage({ message, timestamp, variant = 'secondary', ...restProps }, ref) {
     const t = useI18n();
     const ariaLabel = timestamp === undefined ? `${message}` : t('chat_message_at_timestamp', [message, timestamp]);
     return (_jsxs(Flex, { ref: ref, as: StyledSystemMessage, container: {

package/lib/components/Chat/SystemMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAOpF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,YAAY,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAClD,MAAM,EAAE,EACN,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,OAAO,EACR,EACF,EACD,OAAO,EACR,EAAE,EAAE;IACH,MAAM,4BAA4B,GAChC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAC1F,OAAO,GAAG,CAAA;eACC,4BAA4B;;8BAEb,OAAO;;;;;QAK7B,OAAO,KAAK,SAAS;QACvB,GAAG,CAAA;;;;;;;wCAO+B,4BAA4B;;;;;+BAKrC,OAAO;;;iCAGL,OAAO;;OAEjC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,aAAa,~~GAAyD~~,UAAU,~~CACpF~~,SAAS,aAAa,CACpB,~~KAA0C~~,~~EAC1C,GAA8B;IAE9B,MAAM,EAAE,~~OAAO,~~EAAE~~,SAAS,~~EAAE~~,OAAO,GAAG,WAAW,~~EAAE~~,GAAG,SAAS,~~EAAE~~,~~GAAG~~,~~KAAK,CAAC~~;~~IAC1E~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GACb,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,2BAA2B,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhG,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;SAClB,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,OAAO,EAAE,OAAO,gBACJ,SAAS,KACjB,SAAS,aAEZ,SAAS,IAAI,GAAG,SAAS,IAAI,OAAG,OAAO,IACnC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ~~FunctionComponent,~~ PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { Flex, tryCatch, defaultThemeProp, useI18n } from '@pega/cosmos-react-core';\nimport type { ~~ForwardProps~~, PropsWithDefaults } from '@pega/cosmos-react-core';\n\nimport type { SystemMessageProps } from './Chat.types';\n\ntype SystemMessagePropsWithDefaults = PropsWithDefaults<SystemMessageProps, 'variant'>;\n\nexport const StyledSystemMessage = styled.li<Pick<SystemMessagePropsWithDefaults, 'variant'>>(\n ({\n theme: {\n base: {\n palette: { 'foreground-color': foregroundColor },\n transparency: { 'transparent-3': foregroundAlpha },\n colors: {\n blue: { medium }\n },\n spacing\n }\n },\n variant\n }) => {\n const systemMessageForeGroundColor =\n variant === 'primary' ? medium : tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n return css`\n color: ${systemMessageForeGroundColor};\n font-size: 0.75rem;\n padding: 0 0 calc(2 * ${spacing});\n\n :last-child {\n padding: 0;\n }\n ${variant === 'primary' &&\n css`\n text-transform: uppercase;\n font-weight: bold;\n ::before,\n ::after {\n display: inline-flex;\n content: '';\n border-top: 0.0625rem solid ${systemMessageForeGroundColor};\n flex-grow: 1;\n min-width: 1.5rem;\n }\n ::before {\n margin-inline-end: ${spacing};\n }\n ::after {\n margin-inline-start: ${spacing};\n }\n `}\n `;\n }\n);\n\nStyledSystemMessage.defaultProps = defaultThemeProp;\n\nconst SystemMessage: ~~FunctionComponent~~<SystemMessageProps ~~& ForwardProps~~> = forwardRef(\n function SystemMessage(\n ~~props~~: PropsWithoutRef<SystemMessageProps>,\n ref: SystemMessageProps['ref']\n ) {\n const ~~{ message, timestamp, variant = 'secondary', ...restProps } = props;\n const~~ t = useI18n();\n\n const ariaLabel =\n timestamp === undefined ? `${message}` : t('chat_message_at_timestamp', [message, timestamp]);\n\n return (\n <Flex\n ref={ref}\n as={StyledSystemMessage}\n container={{\n alignItems: 'center',\n justify: 'center'\n }}\n item={{\n shrink: 0\n }}\n variant={variant}\n aria-label={ariaLabel}\n {...restProps}\n >\n {timestamp && `${timestamp}: `} {message}\n </Flex>\n );\n }\n);\n\nexport default SystemMessage;\n"]}
1	+ {"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAOpF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,YAAY,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAClD,MAAM,EAAE,EACN,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,OAAO,EACR,EACF,EACD,OAAO,EACR,EAAE,EAAE;IACH,MAAM,4BAA4B,GAChC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAC1F,OAAO,GAAG,CAAA;eACC,4BAA4B;;8BAEb,OAAO;;;;;QAK7B,OAAO,KAAK,SAAS;QACvB,GAAG,CAAA;;;;;;;wCAO+B,4BAA4B;;;;;+BAKrC,OAAO;;;iCAGL,OAAO;;OAEjC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,aAAa,GAAwD,UAAU,CACnF,SAAS,aAAa,CACpB,EACE,OAAO,EACP,SAAS,EACT,OAAO,GAAG,WAAW,EACrB,GAAG,SAAS,EACwB,EACtC,GAA8B;IAE9B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GACb,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,2BAA2B,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhG,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;SAClB,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,OAAO,EAAE,OAAO,gBACJ,SAAS,KACjB,SAAS,aAEZ,SAAS,IAAI,GAAG,SAAS,IAAI,OAAG,OAAO,IACnC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { Flex, tryCatch, defaultThemeProp, useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, PropsWithDefaults } from '@pega/cosmos-react-core';\n\nimport type { SystemMessageProps } from './Chat.types';\n\ntype SystemMessagePropsWithDefaults = PropsWithDefaults<SystemMessageProps, 'variant'>;\n\nexport const StyledSystemMessage = styled.li<Pick<SystemMessagePropsWithDefaults, 'variant'>>(\n ({\n theme: {\n base: {\n palette: { 'foreground-color': foregroundColor },\n transparency: { 'transparent-3': foregroundAlpha },\n colors: {\n blue: { medium }\n },\n spacing\n }\n },\n variant\n }) => {\n const systemMessageForeGroundColor =\n variant === 'primary' ? medium : tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n return css`\n color: ${systemMessageForeGroundColor};\n font-size: 0.75rem;\n padding: 0 0 calc(2 * ${spacing});\n\n :last-child {\n padding: 0;\n }\n ${variant === 'primary' &&\n css`\n text-transform: uppercase;\n font-weight: bold;\n ::before,\n ::after {\n display: inline-flex;\n content: '';\n border-top: 0.0625rem solid ${systemMessageForeGroundColor};\n flex-grow: 1;\n min-width: 1.5rem;\n }\n ::before {\n margin-inline-end: ${spacing};\n }\n ::after {\n margin-inline-start: ${spacing};\n }\n `}\n `;\n }\n);\n\nStyledSystemMessage.defaultProps = defaultThemeProp;\n\nconst SystemMessage: ForwardRefForwardPropsComponent<SystemMessageProps> = forwardRef(\n function SystemMessage(\n {\n message,\n timestamp,\n variant = 'secondary',\n ...restProps\n }: PropsWithoutRef<SystemMessageProps>,\n ref: SystemMessageProps['ref']\n ) {\n const t = useI18n();\n\n const ariaLabel =\n timestamp === undefined ? `${message}` : t('chat_message_at_timestamp', [message, timestamp]);\n\n return (\n <Flex\n ref={ref}\n as={StyledSystemMessage}\n container={{\n alignItems: 'center',\n justify: 'center'\n }}\n item={{\n shrink: 0\n }}\n variant={variant}\n aria-label={ariaLabel}\n {...restProps}\n >\n {timestamp && `${timestamp}: `} {message}\n </Flex>\n );\n }\n);\n\nexport default SystemMessage;\n"]}

package/lib/components/Chat/TypeIndicator.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { TypeIndicatorProps } from './Chat.types';
-declare const TypeIndicator: FunctionComponent<TypeIndicatorProps & ForwardProps>;
+declare const TypeIndicator: ForwardRefForwardPropsComponent<TypeIndicatorProps>;
 export default TypeIndicator;
 //# sourceMappingURL=TypeIndicator.d.ts.map

package/lib/components/Chat/TypeIndicator.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TypeIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,~~iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,~~EAAE,~~YAAY,EAAE,~~MAAM,yBAAyB,CAAC;~~AAG5D~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,QAAA,MAAM,aAAa,EAAE,~~iBAAiB,~~CAAC,kBAAkB,~~GAAG~~,~~YAAY,CAwBvE,~~CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"TypeIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAG/E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CA8BtE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Chat/TypeIndicator.js CHANGED Viewed

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useI18n } from '@pega/cosmos-react-core';
 import Message from './Message';
-const TypeIndicator = forwardRef(function TypeIndicator(props, ref) {
-    const { avatarInfo, message, senderId, senderType, agentVariant, ...restProps } = props;
+const TypeIndicator = forwardRef(function TypeIndicator({ avatarInfo, message, senderId, senderType, agentVariant, ...restProps }, ref) {
     const t = useI18n();
     const ariaLabel = t('is_typing', [avatarInfo.name, message || '']);
     return (_jsx(Message, { ...restProps, senderType: senderType, senderId: senderId, direction: 'in', avatarInfo: avatarInfo, agentVariant: agentVariant, typing: true, ref: ref, message: message, "aria-label": ariaLabel }));

package/lib/components/Chat/TypeIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TypeIndicator.js","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlD,OAAO,OAAO,MAAM,WAAW,CAAC;AAGhC,MAAM,aAAa,~~GAAyD~~,UAAU,~~CACpF~~,SAAS,aAAa,CACpB,~~KAA0C~~,~~EAC1C,GAA8B;IAE9B,MAAM,EAAE,~~UAAU,~~EAAE~~,OAAO,~~EAAE~~,QAAQ,~~EAAE~~,UAAU,~~EAAE~~,YAAY,~~EAAE~~,GAAG,SAAS,~~EAAE~~,~~GAAG~~,~~KAAK,CAAC~~;~~IACxF~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC;IACnE,OAAO,CACL,KAAC,OAAO,OACF,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,MAAM,QACN,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,gBACJ,SAAS,GACrB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ~~FunctionComponent,~~ PropsWithoutRef } from 'react';\n\nimport { useI18n } from '@pega/cosmos-react-core';\nimport type { ~~ForwardProps~~ } from '@pega/cosmos-react-core';\n\nimport Message from './Message';\nimport type { TypeIndicatorProps } from './Chat.types';\n\nconst TypeIndicator: ~~FunctionComponent~~<TypeIndicatorProps ~~& ForwardProps~~> = forwardRef(\n function TypeIndicator(\n ~~props~~: PropsWithoutRef<TypeIndicatorProps>,\n ref: TypeIndicatorProps['ref']\n ) {\n const ~~{ avatarInfo, message, senderId, senderType, agentVariant, ...restProps } = props;\n const~~ t = useI18n();\n\n const ariaLabel = t('is_typing', [avatarInfo.name, message \|\| '']);\n return (\n <Message\n {...restProps}\n senderType={senderType}\n senderId={senderId}\n direction='in'\n avatarInfo={avatarInfo}\n agentVariant={agentVariant}\n typing\n ref={ref}\n message={message}\n aria-label={ariaLabel}\n />\n );\n }\n);\n\nexport default TypeIndicator;\n"]}
1	+ {"version":3,"file":"TypeIndicator.js","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlD,OAAO,OAAO,MAAM,WAAW,CAAC;AAGhC,MAAM,aAAa,GAAwD,UAAU,CACnF,SAAS,aAAa,CACpB,EACE,UAAU,EACV,OAAO,EACP,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,GAAG,SAAS,EACwB,EACtC,GAA8B;IAE9B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC;IACnE,OAAO,CACL,KAAC,OAAO,OACF,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,MAAM,QACN,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,gBACJ,SAAS,GACrB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport Message from './Message';\nimport type { TypeIndicatorProps } from './Chat.types';\n\nconst TypeIndicator: ForwardRefForwardPropsComponent<TypeIndicatorProps> = forwardRef(\n function TypeIndicator(\n {\n avatarInfo,\n message,\n senderId,\n senderType,\n agentVariant,\n ...restProps\n }: PropsWithoutRef<TypeIndicatorProps>,\n ref: TypeIndicatorProps['ref']\n ) {\n const t = useI18n();\n\n const ariaLabel = t('is_typing', [avatarInfo.name, message \|\| '']);\n return (\n <Message\n {...restProps}\n senderType={senderType}\n senderId={senderId}\n direction='in'\n avatarInfo={avatarInfo}\n agentVariant={agentVariant}\n typing\n ref={ref}\n message={message}\n aria-label={ariaLabel}\n />\n );\n }\n);\n\nexport default TypeIndicator;\n"]}

package/lib/components/Email/ContextMenuPopover.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
-import type { FunctionComponent } from 'react';
 import type { ContextMenuPopoverProps } from './Email.types';
-declare const ContextMenuPopover: FunctionComponent<ContextMenuPopoverProps>;
+declare const ContextMenuPopover: import("react").ForwardRefExoticComponent<Omit<ContextMenuPopoverProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default ContextMenuPopover;
 //# sourceMappingURL=ContextMenuPopover.d.ts.map

package/lib/components/Email/ContextMenuPopover.d.ts.map CHANGED Viewed

	@@ -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,CAwFlE,CAAC~~;~~AAEF~~,eAAe,kBAAkB,CAAC"}
1	+ {"version":3,"file":"ContextMenuPopover.d.ts","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAE7D,QAAA,MAAM,kBAAkB,iIAsFtB,CAAC;AAEH,eAAe,kBAAkB,CAAC"}

package/lib/components/Email/ContextMenuPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuPopover.js","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EACL,0BAA0B,EAC1B,8BAA8B,EAC9B,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AAGxB,MAAM,kBAAkB,~~GAA+C~~,UAAU,~~CAC/E~~,SAAS,kBAAkB,~~CACzB~~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~~CACF~~,CAAC;~~AAEF~~,eAAe,kBAAkB,CAAC","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 if (targetNode.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 contextElement: targetNode ?? undefined\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	+ {"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 { 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 = forwardRef(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 if (targetNode.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 contextElement: targetNode ?? undefined\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\nexport default ContextMenuPopover;\n"]}

package/lib/components/Email/Email.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { EmailProps } from './Email.types';
 import './EmailEntity';
-declare const Email: FunctionComponent<EmailProps & ForwardProps>;
+declare const Email: ForwardRefForwardPropsComponent<EmailProps>;
 export default Email;
 //# sourceMappingURL=Email.d.ts.map

package/lib/components/Email/Email.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Email.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"~~AASA~~,OAAO,KAAK,~~EAAE~~,~~iBAAiB~~,~~EAA0C,~~MAAM,~~OAAO,CAAC;AA8BvF,OAAO,KAAK,EAAE,YAAY,EAAsC,MAAM,~~yBAAyB,CAAC;~~AAIhG~~,OAAO,KAAK,EAAa,UAAU,EAAiC,MAAM,eAAe,CAAC;AAiB1F,OAAO,eAAe,CAAC;~~AAiCvB~~,QAAA,MAAM,KAAK,EAAE,~~iBAAiB,~~CAAC,UAAU,~~GAAG~~,~~YAAY,CAuftD,~~CAAC;AAEH,eAAe,KAAK,CAAC"}
1	+ {"version":3,"file":"Email.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EACV,+BAA+B,EAGhC,MAAM,yBAAyB,CAAC;AAMjC,OAAO,KAAK,EAAa,UAAU,EAAiC,MAAM,eAAe,CAAC;AAiB1F,OAAO,eAAe,CAAC;AAmCvB,QAAA,MAAM,KAAK,EAAE,+BAA+B,CAAC,UAAU,CA+frD,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/components/Email/Email.js CHANGED Viewed

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, Fragment, useRef, useState, useMemo, useEffect, useImperativeHandle } from 'react';
-import { Text, SummaryItem, Avatar, Flex, EmailDisplay, Button, Icon, Sentiment, useOuterEvent, Popover, useElement, CardContent, useI18n, useBreakpoint, DateTimeDisplay, useConfiguration, MetaList, useScrollToggle, Status, Banner, useTheme, useEscape, HTML, Progress, getIntlDateTimeFormatFromCache, FileDisplayList } from '@pega/cosmos-react-core';
+import { Text, SummaryItem, Avatar, Flex, EmailDisplay, Button, Icon, Sentiment, useOuterEvent, Popover, useElement, CardContent, useI18n, useBreakpoint, DateTimeDisplay, useConfiguration, MetaList, useScrollToggle, Status, Banner, useTheme, useEscape, HTML, Progress, getIntlDateTimeFormatFromCache, FileDisplayList, registerIcon } from '@pega/cosmos-react-core';
 import { RichTextViewer } from '@pega/cosmos-react-rte';
+import * as ArrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
+import * as ArrowMicroUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-up.icon';
 import ContextMenuPopover from './ContextMenuPopover';
 import { StyledEmail, StyledEmailDisplay, StyledEmailHeader, StyledFromEmailDisplay, StyledEmailMoreInfoButton, StyledEmailMoreInfoPopover, StyledEmailPrimaryFieldValueList, StyledEmailBody, StyledEmailSecondaryFieldValueList, StyledSuggestedRepliesButton, StyledSuggestedRepliesMenuButton, StyledForwardedContentToggle, StyledEmailActions } from './Email.styles';
 import highlightEntities from './utils/EntityHighlighter';
 import './EmailEntity';
+registerIcon(ArrowMicroUpIcon, ArrowMicroDownIcon);
 const EmailDisplayList = ({ emailUsers, showEmailAddress, showShortName }) => {
     return (_jsx(_Fragment, { children: emailUsers.map(({ emailAddress, fullName, shortName }, i) => (_jsxs(Fragment, { children: [i === 0 ? '' : '; ', _jsx(EmailDisplay, { value: emailAddress, displayText: `${showShortName ? shortName : fullName}${showEmailAddress ? ` <${emailAddress}>` : ''}`, variant: 'text', as: StyledEmailDisplay })] }, emailAddress))) }));
 };
@@ -100,7 +103,7 @@ const Email = forwardRef(function Email(props, ref) {
         emailMoreInfoFields.push({
             id: 'date',
             name: t('date'),
-            value: (_jsxs(Text, { children: [`${getIntlDateTimeFormatFromCache(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp })] }))
+            value: (_jsxs(Text, { children: [`${getIntlDateTimeFormatFromCache(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', value: timeStamp })] }))
         });
     }
     useOuterEvent('mousedown', [emailMoreInfoPopover, emailMoreInfoBtnRef], () => {
@@ -171,7 +174,7 @@ const Email = forwardRef(function Email(props, ref) {
     const emailMetaListItems = [
         _jsxs(Text, { variant: 'secondary', children: [`${t('to')}: `, _jsx(EmailDisplayList, { emailUsers: to.slice(0, OVERFLOW_TO_EMAIL_COUNT), showShortName: true }), to.length > OVERFLOW_TO_EMAIL_COUNT &&
                     `; +${t('more_count', [to.length - OVERFLOW_TO_EMAIL_COUNT])}`] }),
-        _jsxs(Text, { variant: 'secondary', children: [`${getIntlDateTimeFormatFromCache(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', format: 'short', value: timeStamp })] })
+        _jsxs(Text, { variant: 'secondary', children: [`${getIntlDateTimeFormatFromCache(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `, _jsx(DateTimeDisplay, { variant: 'datetime', value: timeStamp })] })
     ];
     useEffect(() => {
         if (contextMenuPopoverOpen)
@@ -227,7 +230,11 @@ const Email = forwardRef(function Email(props, ref) {
                                 alignItems: 'start'
                             }, children: [_jsx(MetaList, { items: isMediumOrAbove ? emailMetaListItems : [emailMetaListItems[0]] }), _jsx(Button, { icon: true, variant: 'simple', as: StyledEmailMoreInfoButton, ref: setEmailMoreInfoBtnRef, onClick: () => {
                                         setShowEmailMoreInfo(prev => !prev);
-                                    }, label: t('show_more'), children: _jsx(Icon, { name: 'arrow-micro-down' }) }), _jsx(Popover, { as: StyledEmailMoreInfoPopover, show: showEmailMoreInfo, ref: setEmailMoreInfoPopover, target: emailMoreInfoBtnRef, placement: 'bottom', children: _jsx(CardContent, { children: _jsx(StyledEmailPrimaryFieldValueList, { fields: emailMoreInfoFields }) }) })] }), !isMediumOrAbove && timeStamp && emailMetaListItems[1], status && !isSmallOrAbove && (_jsx(Flex, { container: { pad: [0.5, 0, 0] }, children: _jsx(Status, { variant: status === 'draft' ? 'pending' : 'urgent', children: status === 'draft' ? t('draft', [], { count: 1 }) : t(status) }) }))] }), actions: _jsxs(Flex, { as: StyledEmailActions, container: {
+                                    }, onBlur: (e) => {
+                                        if (e.relatedTarget && !emailMoreInfoPopover?.contains(e.relatedTarget)) {
+                                            setShowEmailMoreInfo(false);
+                                        }
+                                    }, label: showEmailMoreInfo ? t('show_less') : t('show_more'), "aria-label": `${showEmailMoreInfo ? t('show_less') : t('show_more')} - ${t('mailing_details')}`, children: _jsx(Icon, { name: showEmailMoreInfo ? 'arrow-micro-up' : 'arrow-micro-down' }) }), _jsx(Popover, { as: StyledEmailMoreInfoPopover, show: showEmailMoreInfo, ref: setEmailMoreInfoPopover, target: emailMoreInfoBtnRef, placement: 'bottom', portal: false, children: _jsx(CardContent, { children: _jsx(StyledEmailPrimaryFieldValueList, { fields: emailMoreInfoFields }) }) })] }), !isMediumOrAbove && timeStamp && emailMetaListItems[1], status && !isSmallOrAbove && (_jsx(Flex, { container: { pad: [0.5, 0, 0] }, children: _jsx(Status, { variant: status === 'draft' ? 'pending' : 'urgent', children: status === 'draft' ? t('draft', [], { count: 1 }) : t(status) }) }))] }), actions: _jsxs(Flex, { as: StyledEmailActions, container: {
                         pad: 1,
                         alignItems: 'center'
                     }, children: [...actions] }) }), banner && _jsx(Banner, { variant: 'urgent', ...banner }), _jsxs(Flex, { container: {