@pega/cosmos-react-social 5.0.0-dev.9.2 → 6.0.0

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

@@ -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"]}
+{"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"]}

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

@@ -1,5 +1,5 @@
 import type { FunctionComponent, Ref } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardProps, 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>;
@@ -9,14 +9,25 @@ export declare const StyledNotification: import("styled-components").StyledCompo
 export declare const StyledSuggestedReplyIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {
     suggestedReplyCollapsed?: boolean | undefined;
 }, never>;
-export interface SuggestedReply {
+export interface SuggestedReplyItem {
     /** Id for this suggested reply */
     id: string;
     /** Suggested reply message */
     message: string;
-    /** Confidence of this suggested reply */
-    confidence: number;
+    /** type of this suggested reply */
+    type: 'dialog' | 'genAIReply';
 }
+interface ReplyLoadingState extends OmitStrict<SuggestedReplyItem, 'message'> {
+    /** loading until reply is retrieved */
+    loading: boolean;
+}
+interface ReplyErrorState extends SuggestedReplyItem {
+    /** If there are no suggestions from GenAI or if there is an error */
+    errorType: 'noSuggestions' | 'error';
+}
+export type SuggestedReply = SuggestedReplyItem | ReplyLoadingState | ReplyErrorState;
+export declare const isReplyLoadingState: (reply: SuggestedReply) => reply is ReplyLoadingState;
+export declare const isReplyErrorState: (reply: SuggestedReply) => reply is ReplyErrorState;
 export interface SuggestedReplyPickerProps extends Pick<ChatComposerProps, 'onSend' | 'maxLength' | 'disabled'> {
     /** ref to the element */
     ref?: Ref<HTMLDivElement>;

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

@@ -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;AAiBrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAM5D,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;;SAqBpC,CAAC;AAoCF,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,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;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAiNlF,CAAC;AAEL,eAAe,oBAAoB,CAAC"}
+{"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;;SAqBpC,CAAC;AAoCF,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,+BAExD,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,cAAc,6BAEtD,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"}

package/lib/components/Chat/SuggestedReplyPicker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useEffect, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Icon, registerIcon, Button, Text, useI18n, defaultThemeProp, useLiveLog, ExpandCollapse, Alert, useDirection, EmptyState } from '@pega/cosmos-react-core';
+import { Flex, Icon, registerIcon, Button, Text, useI18n, defaultThemeProp, useLiveLog, ExpandCollapse, Alert, useDirection, EmptyState, Progress, hasProp, ErrorState } from '@pega/cosmos-react-core';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 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';
@@ -58,14 +58,27 @@ const StyledSuggestedReplyContainer = styled.div(props => {
   `;
 });
 StyledSuggestedReplyContainer.defaultProps = defaultThemeProp;
+export const isReplyLoadingState = (reply) => {
+    return hasProp(reply, 'loading');
+};
+export const isReplyErrorState = (reply) => {
+    return hasProp(reply, 'errorType');
+};
+const StyledReplyType = styled(Flex)(({ theme, type }) => {
+    return css `
+    color: ${type === 'dialog' ? 'inherit' : theme.base.palette.ai};
+  `;
+});
+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 { announcePolite } = useLiveLog();
     const t = useI18n();
     const { rtl, ltr } = useDirection();
+    const currentReply = replies.find(reply => reply.id === currentReplyId);
+    const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);
     // Allows suggested replies to cycle
     const onSuggestedReplyChange = (mode) => {
-        const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);
         let newReplyIndex = mode === 'prev' ? currentReplyIndex - 1 : currentReplyIndex + 1;
         newReplyIndex = (newReplyIndex + replies.length) % replies.length;
         onReplyChange(replies[newReplyIndex].id);
@@ -75,39 +88,72 @@ const SuggestedReplyPicker = forwardRef(function SuggestedReplyPicker(props, ref
         if (!replies || replies.length === 0 || !currentReplyId) {
             return;
         }
-        const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);
-        announcePolite({
-            message: `${t('suggested_replies_current_of_total', [
-                currentReplyIndex + 1,
-                replies.length
-            ])},
-           ${t('confidence_percentage', [replies[currentReplyIndex]?.confidence])},${replies[currentReplyIndex]?.message}`,
-            type: 'acknowledgement'
-        });
-    }, [currentReplyId]);
+        if (currentReply && !isReplyLoadingState(currentReply))
+            announcePolite({
+                message: `${t('suggested_replies_current_of_total', [
+                    currentReplyIndex + 1,
+                    replies.length
+                ])},${currentReply?.message},${currentReply?.type === 'dialog' ? t('dialog') : t('pega_genAI')}`,
+                type: 'acknowledgement'
+            });
+    }, [currentReply]);
     const onEditAnnouncement = () => {
         announcePolite({
             message: t('suggested_reply_copied_to_input_field'),
             type: 'acknowledgement'
         });
     };
-    return (_jsxs(StyledSuggestedReplyContainer, { ref: ref, ...restProps, children: [_jsx(Flex, { as: StyledSuggestedReplyHeader, container: {
+    const suggestionType = useMemo(() => {
+        if (currentReply && !collapsed) {
+            let iconName = '';
+            let label;
+            if (currentReply.type === 'dialog') {
+                iconName = 'script';
+                label = t('dialog');
+            }
+            else {
+                iconName = 'polaris-solid';
+                label = t('pega_genAI');
+            }
+            return (_jsxs(StyledReplyType, { container: { alignItems: 'center', pad: 1, gap: 0.5 }, type: currentReply.type, children: [_jsx(Icon, { name: iconName, size: 's' }), label] }));
+        }
+        return null;
+    }, [currentReply, collapsed]);
+    const suggestion = useMemo(() => {
+        if (currentReply) {
+            if (isReplyLoadingState(currentReply)) {
+                return (_jsx(Progress, { placement: 'block', message: t('loading'), liveConfig: { contextualLabel: `${t('pega_genAI')} ${t('suggestion')}` } }));
+            }
+            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 null;
+    }, [currentReply]);
+    return (_jsxs(StyledSuggestedReplyContainer, { ref: ref, ...restProps, children: [_jsxs(Flex, { as: StyledSuggestedReplyHeader, container: {
                     justify: 'between',
                     alignContent: 'center'
-                }, children: _jsxs(Flex, { container: {
-                        alignItems: 'center',
-                        gap: 1
-                    }, children: [ltr && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(StyledSuggestedReplyIcon, { name: 'caret-down', suggestedReplyCollapsed: collapsed }) })), _jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(Text, { variant: 'h3', children: t('suggested_replies') }), collapsed && showNotification && _jsx(Alert, { variant: 'urgent' })] }), rtl && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(StyledSuggestedReplyIcon, { name: 'caret-down', suggestedReplyCollapsed: collapsed }) }))] }) }), _jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true, children: _jsxs(Flex, { container: {
+                }, children: [_jsxs(Flex, { container: {
+                            alignItems: 'center',
+                            gap: 1
+                        }, children: [ltr && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(StyledSuggestedReplyIcon, { name: 'caret-down', suggestedReplyCollapsed: collapsed }) })), _jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(Text, { variant: 'h3', children: t('suggested_replies') }), collapsed && showNotification && _jsx(Alert, { variant: 'urgent' })] }), !collapsed && replies?.length > 0 && (_jsx(Text, { variant: 'secondary', children: `- ${currentReplyIndex + 1}/${replies.length}` })), rtl && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(StyledSuggestedReplyIcon, { name: 'caret-down', suggestedReplyCollapsed: collapsed }) }))] }), suggestionType] }), _jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true, children: _jsxs(Flex, { container: {
                         direction: 'column',
                         gap: 1
-                    }, as: StyledSuggestedReplyContent, children: [currentReplyId && replies.length ? (_jsx(Flex, { container: true, as: StyledReply, children: replies.find(reply => reply.id === currentReplyId)?.message })) : (_jsx(EmptyState, { message: t('no_suggestion') })), _jsxs(Flex, { container: {
+                    }, as: StyledSuggestedReplyContent, children: [currentReply && replies.length ? (suggestion) : (_jsx(EmptyState, { message: t('no_suggestion') })), _jsxs(Flex, { container: {
                                 justify: 'center'
                             }, as: StyledRepliesAction, children: [replies.length > 1 && (_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReplyId === undefined || replies.length <= 1, onClick: () => {
                                         onSuggestedReplyChange('prev');
-                                    }, children: _jsx(Icon, { name: 'caret-left' }) })), _jsx(Button, { disabled: disabled || currentReplyId === undefined || !replies || replies.length === 0, onClick: () => {
-                                        const selectedReply = replies.find(reply => reply.id === currentReplyId);
-                                        if (selectedReply) {
-                                            onSelect(selectedReply);
+                                    }, children: _jsx(Icon, { name: 'caret-left' }) })), _jsx(Button, { disabled: disabled ||
+                                        currentReplyId === undefined ||
+                                        !replies ||
+                                        replies.length === 0 ||
+                                        (currentReply && isReplyLoadingState(currentReply) && currentReply.loading) ||
+                                        (currentReply && isReplyErrorState(currentReply) && !!currentReply.errorType), onClick: () => {
+                                        if (currentReply &&
+                                            !isReplyErrorState(currentReply) &&
+                                            !isReplyLoadingState(currentReply)) {
+                                            onSelect(currentReply);
                                             onExpandCollapse();
                                             onEditAnnouncement();
                                         }
@@ -122,10 +168,13 @@ const SuggestedReplyPicker = forwardRef(function SuggestedReplyPicker(props, ref
                                         currentReplyId === undefined ||
                                         !replies ||
                                         replies.length === 0 ||
-                                        (!!maxLength && replies.length > maxLength), onClick: () => {
-                                        const selectedReply = replies.find(reply => reply.id === currentReplyId);
-                                        if (selectedReply) {
-                                            onSend(selectedReply.message);
+                                        (!!maxLength && replies.length > maxLength) ||
+                                        (currentReply && isReplyLoadingState(currentReply) && currentReply.loading) ||
+                                        (currentReply && isReplyErrorState(currentReply) && !!currentReply.errorType), onClick: () => {
+                                        if (currentReply &&
+                                            !isReplyErrorState(currentReply) &&
+                                            !isReplyLoadingState(currentReply)) {
+                                            onSend(currentReply.message);
                                             onExpandCollapse();
                                         }
                                     }, "aria-label": replies.length > 0 && currentReplyId

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

@@ -1 +1 @@
-{"version":3,"file":"SuggestedReplyPicker.js","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,OAAO,EACP,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,KAAK,EACL,YAAY,EACZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,EAAE,WAAW,EAAE,MAAM,qDAAqD,CAAC;AAIlF,YAAY,CAAC,SAAS,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACxD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACxC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAChD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAC/C,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,aAAa,GAAG,CAAC,CAAC;AAExB,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,IAAI,CAAC,CAClD,CAAC,EAAE,uBAAuB,EAAE,KAAK,EAAE,EAAE,EAAE;IACrC,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,EACJ,IAAI,EAAE,EACJ,SAAS,EAAE,EACT,KAAK,EACL,MAAM,EAAE,EAAE,IAAI,EAAE,EACjB,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;6BAEe,KAAK;oCACE,IAAI;QAChC,uBAAuB;QACzB,GAAG,CAAA;6BACoB,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;OAC7C;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACvD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,OAAO,GAAG,CAAA;kCACsB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;wBAC3C,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;QAExD,0BAA0B;iBACjB,KAAK,CAAC,IAAI,CAAC,OAAO;uCACI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAGlE,WAAW;;wCAEuB,KAAK,CAAC,IAAI,CAAC,OAAO;wCAClB,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGpD,2BAA2B;0BACP,KAAK,CAAC,IAAI,CAAC,OAAO;;;UAGlC,WAAW;;iCAEY,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,aAAa;iCACrC,KAAK,CAAC,IAAI,CAAC,OAAO,MAAM,aAAa;;;GAGnE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiC9D,MAAM,oBAAoB,GACxB,UAAU,CAAC,SAAS,oBAAoB,CACtC,KAAiD,EACjD,GAAqC;IAErC,MAAM,EACJ,OAAO,GAAG,EAAE,EACZ,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,aAAa,EACb,MAAM,EACN,SAAS,GAAG,GAAG,EACf,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEpC,oCAAoC;IACpC,MAAM,sBAAsB,GAAG,CAAC,IAAqB,EAAE,EAAE;QACvD,MAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC;QAClF,IAAI,aAAa,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,CAAC;QACpF,aAAa,GAAG,CAAC,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;QAClE,aAAa,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,cAAc,EAAE;YACvD,OAAO;SACR;QACD,MAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC;QAClF,cAAc,CAAC;YACb,OAAO,EAAE,GAAG,CAAC,CAAC,oCAAoC,EAAE;gBAClD,iBAAiB,GAAG,CAAC;gBACrB,OAAO,CAAC,MAAM;aACf,CAAC;aACG,CAAC,CAAC,uBAAuB,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC,IACvE,OAAO,CAAC,iBAAiB,CAAC,EAAE,OAC9B,EAAE;YACF,IAAI,EAAE,iBAAiB;SACxB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,cAAc,CAAC;YACb,OAAO,EAAE,CAAC,CAAC,uCAAuC,CAAC;YACnD,IAAI,EAAE,iBAAiB;SACxB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,6BAA6B,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aACpD,KAAC,IAAI,IACH,EAAE,EAAE,0BAA0B,EAC9B,SAAS,EAAE;oBACT,OAAO,EAAE,SAAS;oBAClB,YAAY,EAAE,QAAQ;iBACvB,YAED,MAAC,IAAI,IACH,SAAS,EAAE;wBACT,UAAU,EAAE,QAAQ;wBACpB,GAAG,EAAE,CAAC;qBACP,aAEA,GAAG,IAAI,CACN,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,gBAClC,CAAC,CACX,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,4BAA4B,CACtE,EACD,IAAI,QACJ,OAAO,EAAE,gBAAgB,YAEzB,KAAC,wBAAwB,IAAC,IAAI,EAAC,YAAY,EAAC,uBAAuB,EAAE,SAAS,GAAI,GAC3E,CACV,EAED,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,aAC3B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAQ,EACjD,SAAS,IAAI,gBAAgB,IAAI,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,GAAG,IACvD,EAEN,GAAG,IAAI,CACN,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,gBAClC,CAAC,CACX,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,4BAA4B,CACtE,EACD,IAAI,QACJ,OAAO,EAAE,gBAAgB,YAEzB,KAAC,wBAAwB,IAAC,IAAI,EAAC,YAAY,EAAC,uBAAuB,EAAE,SAAS,GAAI,GAC3E,CACV,IACI,GACF,EACP,KAAC,cAAc,IAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAE,iBAAiB,kBACxE,MAAC,IAAI,IACH,SAAS,EAAE;wBACT,SAAS,EAAE,QAAQ;wBACnB,GAAG,EAAE,CAAC;qBACP,EACD,EAAE,EAAE,2BAA2B,aAE9B,cAAc,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAClC,KAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,WAAW,YAC5B,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,cAAc,CAAC,EAAE,OAAO,GACvD,CACR,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC,GAAI,CAC5C,EACD,MAAC,IAAI,IACH,SAAS,EAAE;gCACT,OAAO,EAAE,QAAQ;6BAClB,EACD,EAAE,EAAE,mBAAmB,aAEtB,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,KAAC,MAAM,IACL,IAAI,sBACQ,CAAC,CAAC,sBAAsB,CAAC,EACrC,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,cAAc,KAAK,SAAS,IAAI,OAAO,CAAC,MAAM,IAAI,CAAC,EAC7D,OAAO,EAAE,GAAG,EAAE;wCACZ,sBAAsB,CAAC,MAAM,CAAC,CAAC;oCACjC,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACnB,CACV,EACD,KAAC,MAAM,IACL,QAAQ,EACN,QAAQ,IAAI,cAAc,KAAK,SAAS,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAE9E,OAAO,EAAE,GAAG,EAAE;wCACZ,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC;wCACzE,IAAI,aAAa,EAAE;4CACjB,QAAQ,CAAC,aAAa,CAAC,CAAC;4CACxB,gBAAgB,EAAE,CAAC;4CACnB,kBAAkB,EAAE,CAAC;yCACtB;oCACH,CAAC,gBAEC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc;wCAClC,CAAC,CAAC,CAAC,CAAC,uBAAuB,EAAE;4CACzB,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc;gDAClC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,cAAc,CAAC,GAAG,CAAC;gDAC7D,CAAC,CAAC,CAAC;4CACL,OAAO,CAAC,MAAM;yCACf,CAAC;wCACJ,CAAC,CAAC,SAAS,YAGd,CAAC,CAAC,MAAM,CAAC,GACH,EACT,KAAC,MAAM,IACL,QAAQ,EACN,QAAQ;wCACR,cAAc,KAAK,SAAS;wCAC5B,CAAC,OAAO;wCACR,OAAO,CAAC,MAAM,KAAK,CAAC;wCACpB,CAAC,CAAC,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,EAE7C,OAAO,EAAE,GAAG,EAAE;wCACZ,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,cAAc,CAAC,CAAC;wCACzE,IAAI,aAAa,EAAE;4CACjB,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;4CAC9B,gBAAgB,EAAE,CAAC;yCACpB;oCACH,CAAC,gBAEC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc;wCAClC,CAAC,CAAC,CAAC,CAAC,uBAAuB,EAAE;4CACzB,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc;gDAClC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,cAAc,CAAC,GAAG,CAAC;gDAC7D,CAAC,CAAC,CAAC;4CACL,OAAO,CAAC,MAAM;yCACf,CAAC;wCACJ,CAAC,CAAC,SAAS,YAGd,CAAC,CAAC,MAAM,CAAC,GACH,EACR,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,KAAC,MAAM,IACL,IAAI,sBACQ,CAAC,CAAC,sBAAsB,CAAC,EACrC,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;wCACZ,sBAAsB,CAAC,MAAM,CAAC,CAAC;oCACjC,CAAC,EACD,QAAQ,EAAE,cAAc,KAAK,SAAS,IAAI,OAAO,CAAC,MAAM,IAAI,CAAC,YAE7D,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,CACV,IACI,IACF,GACQ,IACa,CACjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,eAAe,oBAAoB,CAAC","sourcesContent":["import { forwardRef, useEffect } 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} from '@pega/cosmos-react-core';\nimport type { ForwardProps } 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, theme }) => {\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);\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 SuggestedReply {\n  /** Id for this suggested reply */\n  id: string;\n  /** Suggested reply message */\n  message: string;\n  /** Confidence of this suggested reply */\n  confidence: number;\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 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    // Allows suggested replies to cycle\n    const onSuggestedReplyChange = (mode: 'prev' | 'next') => {\n      const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);\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      const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);\n      announcePolite({\n        message: `${t('suggested_replies_current_of_total', [\n          currentReplyIndex + 1,\n          replies.length\n        ])},\n           ${t('confidence_percentage', [replies[currentReplyIndex]?.confidence])},${\n          replies[currentReplyIndex]?.message\n        }`,\n        type: 'acknowledgement'\n      });\n    }, [currentReplyId]);\n\n    const onEditAnnouncement = () => {\n      announcePolite({\n        message: t('suggested_reply_copied_to_input_field'),\n        type: 'acknowledgement'\n      });\n    };\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            {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        </Flex>\n        <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n          <Flex\n            container={{\n              direction: 'column',\n              gap: 1\n            }}\n            as={StyledSuggestedReplyContent}\n          >\n            {currentReplyId && replies.length ? (\n              <Flex container as={StyledReply}>\n                {replies.find(reply => reply.id === currentReplyId)?.message}\n              </Flex>\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 || currentReplyId === undefined || !replies || replies.length === 0\n                }\n                onClick={() => {\n                  const selectedReply = replies.find(reply => reply.id === currentReplyId);\n                  if (selectedReply) {\n                    onSelect(selectedReply);\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                }\n                onClick={() => {\n                  const selectedReply = replies.find(reply => reply.id === currentReplyId);\n                  if (selectedReply) {\n                    onSend(selectedReply.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"]}
+{"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, theme }) => {\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);\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"]}

package/lib/components/Chat/index.d.ts

@@ -5,7 +5,7 @@ export type { ChatHeaderProps } from './ChatHeader';
 export { default as ChatBody, NewMessageSeparatorId } from './ChatBody';
 export { default as ChatComposer } from './ChatComposer';
 export type { ChatComposerProps, ChatComposerImperativeHandleProps } from './ChatComposer';
-export { default as SuggestedReplyPicker } from './SuggestedReplyPicker';
+export { default as SuggestedReplyPicker, isReplyErrorState, isReplyLoadingState } from './SuggestedReplyPicker';
 export type { SuggestedReplyPickerProps, SuggestedReply } from './SuggestedReplyPicker';
 export type { AttachmentItemProps, ChatSettingsPanelProps, MediaPageLinks, MessageProps, MessageHeaderProps, ChatBodyProps, ChatBodyListItemProps, ChatBodyHandleValue, TypeIndicatorProps, SystemMessageProps } from './Chat.types';
 export { default as Message } from './Message';

package/lib/components/Chat/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,iCAAiC,EAAE,MAAM,gBAAgB,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxF,YAAY,EACV,mBAAmB,EACnB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,iCAAiC,EAAE,MAAM,gBAAgB,CAAC;AAC3F,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,yBAAyB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxF,YAAY,EACV,mBAAmB,EACnB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/Chat/index.js

@@ -2,7 +2,7 @@ export { default } from './Chat';
 export { default as ChatHeader } from './ChatHeader';
 export { default as ChatBody, NewMessageSeparatorId } from './ChatBody';
 export { default as ChatComposer } from './ChatComposer';
-export { default as SuggestedReplyPicker } from './SuggestedReplyPicker';
+export { default as SuggestedReplyPicker, isReplyErrorState, isReplyLoadingState } from './SuggestedReplyPicker';
 export { default as Message } from './Message';
 export { default as SystemMessage } from './SystemMessage';
 export { default as TypeIndicator } from './TypeIndicator';

package/lib/components/Chat/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAczE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './Chat';\nexport type { ChatProps } from './Chat';\nexport { default as ChatHeader } from './ChatHeader';\nexport type { ChatHeaderProps } from './ChatHeader';\nexport { default as ChatBody, NewMessageSeparatorId } from './ChatBody';\nexport { default as ChatComposer } from './ChatComposer';\nexport type { ChatComposerProps, ChatComposerImperativeHandleProps } from './ChatComposer';\nexport { default as SuggestedReplyPicker } from './SuggestedReplyPicker';\nexport type { SuggestedReplyPickerProps, SuggestedReply } from './SuggestedReplyPicker';\nexport type {\n  AttachmentItemProps,\n  ChatSettingsPanelProps,\n  MediaPageLinks,\n  MessageProps,\n  MessageHeaderProps,\n  ChatBodyProps,\n  ChatBodyListItemProps,\n  ChatBodyHandleValue,\n  TypeIndicatorProps,\n  SystemMessageProps\n} from './Chat.types';\nexport { default as Message } from './Message';\nexport { default as SystemMessage } from './SystemMessage';\nexport { default as TypeIndicator } from './TypeIndicator';\nexport { default as ChatSettingsPanel } from './ChatSettingsPanel';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAchC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './Chat';\nexport type { ChatProps } from './Chat';\nexport { default as ChatHeader } from './ChatHeader';\nexport type { ChatHeaderProps } from './ChatHeader';\nexport { default as ChatBody, NewMessageSeparatorId } from './ChatBody';\nexport { default as ChatComposer } from './ChatComposer';\nexport type { ChatComposerProps, ChatComposerImperativeHandleProps } from './ChatComposer';\nexport {\n  default as SuggestedReplyPicker,\n  isReplyErrorState,\n  isReplyLoadingState\n} from './SuggestedReplyPicker';\nexport type { SuggestedReplyPickerProps, SuggestedReply } from './SuggestedReplyPicker';\nexport type {\n  AttachmentItemProps,\n  ChatSettingsPanelProps,\n  MediaPageLinks,\n  MessageProps,\n  MessageHeaderProps,\n  ChatBodyProps,\n  ChatBodyListItemProps,\n  ChatBodyHandleValue,\n  TypeIndicatorProps,\n  SystemMessageProps\n} from './Chat.types';\nexport { default as Message } from './Message';\nexport { default as SystemMessage } from './SystemMessage';\nexport { default as TypeIndicator } from './TypeIndicator';\nexport { default as ChatSettingsPanel } from './ChatSettingsPanel';\n"]}

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

@@ -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,CA6ElE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"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"}

package/lib/components/Email/ContextMenuPopover.js

@@ -1,31 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import { Popover, Menu, Text, useI18n } from '@pega/cosmos-react-core';
 import { StyledEmailMoreInfoPopover, StyledContextMenuFieldSelector, StyledContextMenu } from './Email.styles';
 const ContextMenuPopover = forwardRef(function ContextMenuPopover({ cursorPosition, contextMenu, targetNode, show }, ref) {
     const t = useI18n();
-    const selection = document.getSelection();
-    const targetElement = targetNode instanceof Element ? targetNode : targetNode?.parentElement;
-    if (targetElement && targetElement.tagName.toLowerCase() === 'mark') {
-        selection?.removeAllRanges();
-    }
-    if (selection && !selection.toString() && targetNode) {
-        const range = document.createRange();
-        range.selectNodeContents(targetNode);
-        selection?.removeAllRanges();
-        selection.addRange(range);
-    }
+    const selectedText = useRef();
     const { onItemClick, items } = contextMenu;
     const onItemSelect = (contextMenuItemId, e) => {
         e.stopPropagation();
         const selectedcontextMenuItem = items.find(({ id }) => id === contextMenuItemId);
-        if (selectedcontextMenuItem && selection) {
+        if (selectedcontextMenuItem && selectedText.current) {
             onItemClick({
                 fieldName: selectedcontextMenuItem.primary,
-                fieldValue: selection.toString()
+                fieldValue: selectedText.current
             });
         }
     };
+    useEffect(() => {
+        const selection = document.getSelection();
+        if (!selection || !targetNode)
+            return;
+        if (targetNode.tagName.toLowerCase() === 'mark') {
+            selection.removeAllRanges();
+        }
+        if (!selection.toString()) {
+            const range = document.createRange();
+            range.selectNodeContents(targetNode);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        if (selection.toString()) {
+            selectedText.current = selection.toString();
+        }
+    }, [show, targetNode]);
     const itemsToRender = items.map(item => {
         return {
             ...item,
@@ -46,7 +53,8 @@ const ContextMenuPopover = forwardRef(function ContextMenuPopover({ cursorPositi
                     y,
                     toJSON: () => { }
                 };
-            }
+            },
+            contextElement: targetNode ?? undefined
         }, show: show, placement: 'bottom', ref: ref, children: _jsx(StyledContextMenu, { children: _jsx(Menu, { ...contextMenu, header: _jsx(Text, { variant: 'h5', children: t('copy_to') }), items: itemsToRender, onItemClick: onItemSelect }) }) }));
 });
 export default ContextMenuPopover;

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuPopover.js","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } 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 selection = document.getSelection();\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 && !selection.toString() && targetNode) {\n      const range = document.createRange();\n      range.selectNodeContents(targetNode as Node);\n      selection?.removeAllRanges();\n      selection.addRange(range);\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 && selection) {\n        onItemClick({\n          fieldName: selectedcontextMenuItem.primary,\n          fieldValue: selection.toString()\n        });\n      }\n    };\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"]}
+{"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      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"]}

package/lib/components/Email/Email.js

@@ -55,7 +55,7 @@ const Email = forwardRef(function Email(props, ref) {
     });
     // Handler for right click on email body
     const onContextMenu = (e) => {
-        if (e.target instanceof HTMLElement && e.target.textContent?.trim()) {
+        if (e.target instanceof Element && e.target.textContent?.trim()) {
             setCurrentTarget({
                 targetNode: e.target,
                 cursorPosition: {