@pega/cosmos-react-social 4.0.0-dev.9.1 → 4.0.0

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,EAA2C,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjG,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,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AAErG,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,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAErD,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;QACxD,0BAA0B;QAC1B,wBAAwB;;;;uCAIO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;QAEhE,2BAA2B;;;GAGhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAsB9D,MAAM,oBAAoB,GACxB,UAAU,CACR,CAAC,KAAiD,EAAE,GAAqC,EAAE,EAAE;IAC3F,MAAM,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAClE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAE9E,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1D,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,MAAC,6BAA6B,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aACpD,MAAC,IAAI,IACH,EAAE,EAAE,0BAA0B,EAC9B,SAAS,EAAE;oBACT,OAAO,EAAE,SAAS;oBAClB,YAAY,EAAE,QAAQ;iBACvB,aAED,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,UAAU,EAAE,QAAQ;4BACpB,GAAG,EAAE,CAAC;yBACP,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,EAAE,EAAE,wBAAwB,GAAI,EACvD,YAAY,IAAI,CACf,8BACE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YACf,CAAC,CAAC,oCAAoC,EAAE;4CACvC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC;4CACjC,OAAO,CAAC,MAAM;yCACf,CAAC,GACG,EACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YACtB,CAAC,CAAC,uBAAuB,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,GACjD,IACN,CACJ,IACI,EACP,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,SAAS,gBACN,CAAC,CAAC,2BAA2B,CAAC,YAE1C,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,EACP,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,GAAG,EAAE,CAAC;iBACP,EACD,EAAE,EAAE,2BAA2B,aAE9B,YAAY,IAAI,wBAAM,YAAY,CAAC,OAAO,GAAO,EAClD,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,OAAO,EAAE,QAAQ;yBAClB,aAED,KAAC,MAAM,IACL,IAAI,sBACQ,CAAC,CAAC,sBAAsB,CAAC,EACrC,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,YAAY,KAAK,IAAI,IAAI,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,EACtE,OAAO,EAAE,GAAG,EAAE;oCACZ,eAAe,CAAC,gBAAgB,CAAC,EAAE;wCACjC,IAAI,gBAAgB,EAAE;4CACpB,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;4CAChE,IAAI,qBAAqB,GAAG,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;gDACxD,OAAO,OAAO,CAAC,qBAAqB,GAAG,CAAC,CAAC,CAAC;6CAC3C;yCACF;wCACD,OAAO,IAAI,CAAC;oCACd,CAAC,CAAC,CAAC;gCACL,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACnB,EACT,KAAC,MAAM,IACL,QAAQ,EAAE,YAAY,KAAK,IAAI,EAC/B,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,YAAY,EAAE;wCAChB,QAAQ,CAAC,YAAY,CAAC,CAAC;qCACxB;gCACH,CAAC,YAEA,CAAC,CAAC,KAAK,CAAC,GACF,EACT,KAAC,MAAM,IACL,IAAI,sBACQ,CAAC,CAAC,sBAAsB,CAAC,EACrC,OAAO,EAAC,QAAQ,EAChB,QAAQ,EACN,YAAY,KAAK,IAAI,IAAI,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,EAE/E,OAAO,EAAE,GAAG,EAAE;oCACZ,eAAe,CAAC,gBAAgB,CAAC,EAAE;wCACjC,IAAI,gBAAgB,EAAE;4CACpB,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;4CAChE,IAAI,qBAAqB,GAAG,CAAC,IAAI,OAAO,CAAC,MAAM,EAAE;gDAC/C,OAAO,OAAO,CAAC,qBAAqB,GAAG,CAAC,CAAC,CAAC;6CAC3C;yCACF;wCACD,OAAO,IAAI,CAAC;oCACd,CAAC,CAAC,CAAC;gCACL,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,IACJ,IACF,IACuB,CACjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,oBAAoB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect, useState } 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  ForwardProps\n} 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';\n\nregisterIcon(timesIcon, caretLeftIcon, caretRightIcon);\n\nexport const StyledSuggestedReplyHeader = styled.div``;\nexport const StyledSuggestedReplyContent = styled.div``;\nexport const StyledSuggestedReplyIcon = styled.svg``;\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    > ${StyledSuggestedReplyHeader} {\n      ${StyledSuggestedReplyIcon} {\n        font-size: 1.2rem;\n      }\n      padding: 0.5rem;\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n    > ${StyledSuggestedReplyContent} {\n      padding: 1rem;\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  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Suggested replies */\n  replies?: SuggestedReply[];\n  /** Callback for the event when a suggested reply is selected */\n  onSelect: (suggestedReply: SuggestedReply) => void;\n  /** Callback for the event close button is clicked */\n  onDismiss: () => void;\n}\n\nconst SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps> =\n  forwardRef(\n    (props: PropsWithoutRef<SuggestedReplyPickerProps>, ref: SuggestedReplyPickerProps['ref']) => {\n      const { replies = [], onSelect, onDismiss, ...restProps } = props;\n      const [currentReply, setCurrentReply] = useState<SuggestedReply | null>(null);\n\n      useEffect(() => {\n        setCurrentReply(replies.length > 0 ? replies[0] : null);\n      }, [replies]);\n\n      const t = useI18n();\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              <Icon name='bulb-solid' as={StyledSuggestedReplyIcon} />\n              {currentReply && (\n                <>\n                  <Text variant='h3'>\n                    {t('suggested_replies_current_of_total', [\n                      replies.indexOf(currentReply) + 1,\n                      replies.length\n                    ])}\n                  </Text>\n                  <Text variant='secondary'>\n                    {t('confidence_percentage', [currentReply.confidence])}\n                  </Text>\n                </>\n              )}\n            </Flex>\n            <Button\n              icon\n              variant='simple'\n              onClick={onDismiss}\n              aria-label={t('dismiss_suggested_replies')}\n            >\n              <Icon name='times' />\n            </Button>\n          </Flex>\n          <Flex\n            container={{\n              direction: 'column',\n              gap: 1\n            }}\n            as={StyledSuggestedReplyContent}\n          >\n            {currentReply && <div>{currentReply.message}</div>}\n            <Flex\n              container={{\n                justify: 'center'\n              }}\n            >\n              <Button\n                icon\n                aria-label={t('prev_suggested_reply')}\n                variant='simple'\n                disabled={currentReply === null || replies.indexOf(currentReply) === 0}\n                onClick={() => {\n                  setCurrentReply(prevCurrentReply => {\n                    if (prevCurrentReply) {\n                      const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);\n                      if (prevCurrentReplyIndex - 1 >= 0 && replies.length > 0) {\n                        return replies[prevCurrentReplyIndex - 1];\n                      }\n                    }\n                    return null;\n                  });\n                }}\n              >\n                <Icon name='caret-left' />\n              </Button>\n              <Button\n                disabled={currentReply === null}\n                onClick={() => {\n                  if (currentReply) {\n                    onSelect(currentReply);\n                  }\n                }}\n              >\n                {t('use')}\n              </Button>\n              <Button\n                icon\n                aria-label={t('next_suggested_reply')}\n                variant='simple'\n                disabled={\n                  currentReply === null || replies.indexOf(currentReply) === replies.length - 1\n                }\n                onClick={() => {\n                  setCurrentReply(prevCurrentReply => {\n                    if (prevCurrentReply) {\n                      const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);\n                      if (prevCurrentReplyIndex + 1 <= replies.length) {\n                        return replies[prevCurrentReplyIndex + 1];\n                      }\n                    }\n                    return null;\n                  });\n                }}\n              >\n                <Icon name='caret-right' />\n              </Button>\n            </Flex>\n          </Flex>\n        </StyledSuggestedReplyContainer>\n      );\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, FunctionComponent, PropsWithoutRef, Ref, useEffect } 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  ForwardProps,\n  useLiveLog,\n  ExpandCollapse,\n  Alert,\n  useDirection,\n  EmptyState\n} 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 { 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.svg<{ 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 extends Pick<ChatComposerProps, 'onSend' | 'maxLength'> {\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      ...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                <Icon\n                  name='caret-down'\n                  suggestedReplyCollapsed={collapsed}\n                  as={StyledSuggestedReplyIcon}\n                />\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                <Icon\n                  name='caret-down'\n                  suggestedReplyCollapsed={collapsed}\n                  as={StyledSuggestedReplyIcon}\n                />\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={currentReplyId === undefined || !replies || replies.length === 0}\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                  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"]}

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

@@ -1,19 +1,8 @@
-import { FunctionComponent, ReactNode, Ref } from 'react';
+import { FunctionComponent } from 'react';
 import { ForwardProps, PropsWithDefaults } from '@pega/cosmos-react-core';
-export interface SystemMessageProps {
-    /** Ref to the container element */
-    ref?: Ref<HTMLDivElement>;
-    /** System message to be displayed */
-    message: ReactNode;
-    /** timestamp of the message(Formatted) */
-    timeStamp?: string;
-    /** variant of this system message
-     * @default "secondary"
-     */
-    variant?: 'primary' | 'secondary';
-}
-declare type SystemMessagePropsWithDefaults = PropsWithDefaults<SystemMessageProps, 'variant'>;
-export declare const StyledSystemMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<SystemMessagePropsWithDefaults, "variant">, never>;
+import { 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>;
 export default SystemMessage;
 //# sourceMappingURL=SystemMessage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAIL,YAAY,EACZ,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,kBAAkB;IACjC,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,qCAAqC;IACrC,OAAO,EAAE,SAAS,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC;AAED,aAAK,8BAA8B,GAAG,iBAAiB,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;AAEvF,eAAO,MAAM,mBAAmB,sJA2C/B,CAAC;AAIF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SystemMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAIvE,OAAO,EAIL,YAAY,EACZ,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,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"}

package/lib/components/Chat/SystemMessage.js

@@ -2,39 +2,49 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
-import { Flex, tryCatch, defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledSystemMessage = styled.div(({ theme: { base: { palette: { 'foreground-color': foregroundColor }, transparency: { 'transparent-3': foregroundAlpha } }, components: { chat: { messageBubble: { sender: { content: { 'background-color': primarySystemMessageColor } } } } } }, variant }) => {
-    const systemMessageForeGroundColor = variant === 'primary'
-        ? primarySystemMessageColor
-        : tryCatch(() => rgba(foregroundColor, foregroundAlpha));
+import { Flex, tryCatch, defaultThemeProp, useI18n } from '@pega/cosmos-react-core';
+export const StyledSystemMessage = styled.li(({ theme: { base: { palette: { 'foreground-color': foregroundColor }, transparency: { 'transparent-3': foregroundAlpha }, colors: { blue: { medium } }, spacing } }, variant }) => {
+    const systemMessageForeGroundColor = variant === 'primary' ? medium : tryCatch(() => rgba(foregroundColor, foregroundAlpha));
     return css `
       color: ${systemMessageForeGroundColor};
       font-size: 0.75rem;
-      padding: 0 0 0.5rem;
-      ::before,
-      ::after {
-        display: inline-flex;
-        content: '';
-        border-top: 0.0625rem solid ${systemMessageForeGroundColor};
-        flex-grow: 1;
-        min-width: 1.5rem;
-      }
-      ::before {
-        margin: 0 0.5rem 0 0;
-      }
-      ::after {
-        margin: 0 0 0 0.5rem;
+      padding: 0 0 calc(2 * ${spacing});
+
+      :last-child {
+        padding: 0;
       }
+      ${variant === 'primary' &&
+        css `
+        text-transform: uppercase;
+        font-weight: bold;
+        ::before,
+        ::after {
+          display: inline-flex;
+          content: '';
+          border-top: 0.0625rem solid ${systemMessageForeGroundColor};
+          flex-grow: 1;
+          min-width: 1.5rem;
+        }
+        ::before {
+          margin-inline-end: ${spacing};
+        }
+        ::after {
+          margin-inline-start: ${spacing};
+        }
+      `}
     `;
 });
 StyledSystemMessage.defaultProps = defaultThemeProp;
-const SystemMessage = forwardRef((props, ref) => {
-    const { message, timeStamp, variant = 'secondary', ...restProps } = props;
+const SystemMessage = forwardRef(function SystemMessage(props, ref) {
+    const { message, timestamp, variant = 'secondary', ...restProps } = props;
+    const t = useI18n();
+    const ariaLabel = timestamp === undefined ? `${message}` : t('chat_message_at_timestamp', [message, timestamp]);
     return (_jsxs(Flex, { ref: ref, as: StyledSystemMessage, container: {
-            alignItems: 'center'
+            alignItems: 'center',
+            justify: 'center'
         }, item: {
             shrink: 0
-        }, variant: variant, ...restProps, children: [timeStamp && `${timeStamp}: `, " ", message] }));
+        }, variant: variant, "aria-label": ariaLabel, ...restProps, children: [timestamp && `${timestamp}: `, " ", message] }));
 });
 export default SystemMessage;
 //# sourceMappingURL=SystemMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmC,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAiBjC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,YAAY,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EACnD,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,aAAa,EAAE,EACb,MAAM,EAAE,EACN,OAAO,EAAE,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,EAC3D,EACF,EACF,EACF,EACF,EACD,OAAO,EACR,EAAE,EAAE;IACH,MAAM,4BAA4B,GAChC,OAAO,KAAK,SAAS;QACnB,CAAC,CAAC,yBAAyB;QAC3B,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAC7D,OAAO,GAAG,CAAA;eACC,4BAA4B;;;;;;;sCAOL,4BAA4B;;;;;;;;;;KAU7D,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,GAAG,WAAW,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1E,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;SACrB,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,OAAO,EAAE,OAAO,KACZ,SAAS,aAEZ,SAAS,IAAI,GAAG,SAAS,IAAI,OAAG,OAAO,IACnC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n  Flex,\n  tryCatch,\n  defaultThemeProp,\n  ForwardProps,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nexport interface SystemMessageProps {\n  /** Ref to the container element */\n  ref?: Ref<HTMLDivElement>;\n  /** System message to be displayed */\n  message: ReactNode;\n  /** timestamp of the message(Formatted) */\n  timeStamp?: string;\n  /** variant of this system message\n   * @default \"secondary\"\n   */\n  variant?: 'primary' | 'secondary';\n}\n\ntype SystemMessagePropsWithDefaults = PropsWithDefaults<SystemMessageProps, 'variant'>;\n\nexport const StyledSystemMessage = styled.div<Pick<SystemMessagePropsWithDefaults, 'variant'>>(\n  ({\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor },\n        transparency: { 'transparent-3': foregroundAlpha }\n      },\n      components: {\n        chat: {\n          messageBubble: {\n            sender: {\n              content: { 'background-color': primarySystemMessageColor }\n            }\n          }\n        }\n      }\n    },\n    variant\n  }) => {\n    const systemMessageForeGroundColor =\n      variant === 'primary'\n        ? primarySystemMessageColor\n        : tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n    return css`\n      color: ${systemMessageForeGroundColor};\n      font-size: 0.75rem;\n      padding: 0 0 0.5rem;\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: 0 0.5rem 0 0;\n      }\n      ::after {\n        margin: 0 0 0 0.5rem;\n      }\n    `;\n  }\n);\n\nStyledSystemMessage.defaultProps = defaultThemeProp;\n\nconst SystemMessage: FunctionComponent<SystemMessageProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SystemMessageProps>, ref: SystemMessageProps['ref']) => {\n    const { message, timeStamp, variant = 'secondary', ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledSystemMessage}\n        container={{\n          alignItems: 'center'\n        }}\n        item={{\n          shrink: 0\n        }}\n        variant={variant}\n        {...restProps}\n      >\n        {timeStamp && `${timeStamp}: `} {message}\n      </Flex>\n    );\n  }\n);\n\nexport default SystemMessage;\n"]}
+{"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AACvE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAGhB,OAAO,EACR,MAAM,yBAAyB,CAAC;AAMjC,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 { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n  Flex,\n  tryCatch,\n  defaultThemeProp,\n  ForwardProps,\n  PropsWithDefaults,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport { 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"]}

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

@@ -1,13 +1,6 @@
-import { FunctionComponent, Ref } from 'react';
-import { AvatarProps, ForwardProps } from '@pega/cosmos-react-core';
-export interface TypeIndicatorProps {
-    /** ref to the element */
-    ref?: Ref<HTMLDivElement>;
-    /** Avatar information, can be image and name */
-    avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;
-    /** Type ahead message */
-    message?: string;
-}
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { TypeIndicatorProps } from './Chat.types';
 declare const TypeIndicator: FunctionComponent<TypeIndicatorProps & ForwardProps>;
 export default TypeIndicator;
 //# sourceMappingURL=TypeIndicator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TypeIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIpE,MAAM,WAAW,kBAAkB;IACjC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gDAAgD;IAChD,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;IACnD,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAevE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TypeIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Chat/TypeIndicator.js

@@ -1,9 +1,12 @@
 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((props, ref) => {
-    const { avatarInfo, message, ...restProps } = props;
-    return (_jsx(Message, { variant: 'receiver', direction: 'in', avatarInfo: avatarInfo, typing: true, ref: ref, message: message, ...restProps }));
+const TypeIndicator = forwardRef(function TypeIndicator(props, ref) {
+    const { avatarInfo, message, senderId, senderType, agentVariant, ...restProps } = props;
+    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 }));
 });
 export default TypeIndicator;
 //# sourceMappingURL=TypeIndicator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TypeIndicator.js","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAI5E,OAAO,OAAO,MAAM,WAAW,CAAC;AAWhC,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,CACL,KAAC,OAAO,IACN,OAAO,EAAC,UAAU,EAClB,SAAS,EAAC,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,MAAM,QACN,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,KACZ,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\n\nimport { AvatarProps, ForwardProps } from '@pega/cosmos-react-core';\n\nimport Message from './Message';\n\nexport interface TypeIndicatorProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Avatar information, can be image and name */\n  avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;\n  /** Type ahead message */\n  message?: string;\n}\n\nconst TypeIndicator: FunctionComponent<TypeIndicatorProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TypeIndicatorProps>, ref: TypeIndicatorProps['ref']) => {\n    const { avatarInfo, message, ...restProps } = props;\n    return (\n      <Message\n        variant='receiver'\n        direction='in'\n        avatarInfo={avatarInfo}\n        typing\n        ref={ref}\n        message={message}\n        {...restProps}\n      />\n    );\n  }\n);\n\nexport default TypeIndicator;\n"]}
+{"version":3,"file":"TypeIndicator.js","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEhE,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 { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\n\nimport { ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nimport Message from './Message';\nimport { 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"]}

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

@@ -1,15 +1,15 @@
-export { default, ChatProps } from './Chat';
-export { default as ChatHeader, ChatHeaderProps } from './ChatHeader';
-export { default as ChatBody, ChatBodyProps } from './ChatBody';
-export { default as ChatComposer, ChatComposerProps, ChatComposerImperativeHandleProps } from './ChatComposer';
-export { default as ChatTranscript, ChatTranscriptProps, ChatTranscriptItem } from './ChatTranscript';
-export { default as MessageList, MessageListItemProps, MessageListProps, MessageListImperativeHandleProps, NewMessageSeparatorId } from './MessageList';
-export { default as SuggestedReplyPicker, SuggestedReplyPickerProps, SuggestedReply } from './SuggestedReplyPicker';
-export { AttachmentItemProps, ChatSettingsPanelProps } from './Chat.types';
-export { default as Message, MediaPageLinks, MessageProps } from './Message';
-export { default as SystemMessage, SystemMessageProps } from './SystemMessage';
-export { default as TypeIndicator, TypeIndicatorProps } from './TypeIndicator';
-export { default as TranscriptMessage, TranscriptMessageProps } from './TranscriptMessage';
-export { default as RepeatingView, StyledRepeatingViewItem, StyledRepeatingView, RepeatingViewRow, RepeatingViewProps } from './RepeatingView';
+export { default } from './Chat';
+export type { ChatProps } from './Chat';
+export { default as ChatHeader } from './ChatHeader';
+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 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';
+export { default as SystemMessage } from './SystemMessage';
+export { default as TypeIndicator } from './TypeIndicator';
 export { default as ChatSettingsPanel } from './ChatSettingsPanel';
 //# sourceMappingURL=index.d.ts.map

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,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,iBAAiB,EACjB,iCAAiC,EAClC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,oBAAoB,EACpB,gBAAgB,EAChB,gCAAgC,EAChC,qBAAqB,EACtB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,yBAAyB,EACzB,cAAc,EACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,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,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"}

package/lib/components/Chat/index.js

@@ -1,14 +1,10 @@
 export { default } from './Chat';
 export { default as ChatHeader } from './ChatHeader';
-export { default as ChatBody } from './ChatBody';
+export { default as ChatBody, NewMessageSeparatorId } from './ChatBody';
 export { default as ChatComposer } from './ChatComposer';
-export { default as ChatTranscript } from './ChatTranscript';
-export { default as MessageList, NewMessageSeparatorId } from './MessageList';
 export { default as SuggestedReplyPicker } from './SuggestedReplyPicker';
 export { default as Message } from './Message';
 export { default as SystemMessage } from './SystemMessage';
 export { default as TypeIndicator } from './TypeIndicator';
-export { default as TranscriptMessage } from './TranscriptMessage';
-export { default as RepeatingView, StyledRepeatingViewItem, StyledRepeatingView } from './RepeatingView';
 export { default as ChatSettingsPanel } from './ChatSettingsPanel';
 //# sourceMappingURL=index.js.map

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,EAAa,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAmB,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAChE,OAAO,EACL,OAAO,IAAI,YAAY,EAGxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,OAAO,IAAI,cAAc,EAG1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,WAAW,EAItB,qBAAqB,EACtB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,OAAO,IAAI,oBAAoB,EAGhC,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAgC,MAAM,WAAW,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAsB,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAsB,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAA0B,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,uBAAuB,EACvB,mBAAmB,EAGpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default, ChatProps } from './Chat';\nexport { default as ChatHeader, ChatHeaderProps } from './ChatHeader';\nexport { default as ChatBody, ChatBodyProps } from './ChatBody';\nexport {\n  default as ChatComposer,\n  ChatComposerProps,\n  ChatComposerImperativeHandleProps\n} from './ChatComposer';\nexport {\n  default as ChatTranscript,\n  ChatTranscriptProps,\n  ChatTranscriptItem\n} from './ChatTranscript';\nexport {\n  default as MessageList,\n  MessageListItemProps,\n  MessageListProps,\n  MessageListImperativeHandleProps,\n  NewMessageSeparatorId\n} from './MessageList';\nexport {\n  default as SuggestedReplyPicker,\n  SuggestedReplyPickerProps,\n  SuggestedReply\n} from './SuggestedReplyPicker';\nexport { AttachmentItemProps, ChatSettingsPanelProps } from './Chat.types';\nexport { default as Message, MediaPageLinks, MessageProps } from './Message';\nexport { default as SystemMessage, SystemMessageProps } from './SystemMessage';\nexport { default as TypeIndicator, TypeIndicatorProps } from './TypeIndicator';\nexport { default as TranscriptMessage, TranscriptMessageProps } from './TranscriptMessage';\nexport {\n  default as RepeatingView,\n  StyledRepeatingViewItem,\n  StyledRepeatingView,\n  RepeatingViewRow,\n  RepeatingViewProps\n} from './RepeatingView';\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,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"]}

package/lib/components/Email/ContextMenuPopover.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Popover, Menu, Text, useI18n } from '@pega/cosmos-react-core';
 import { StyledEmailMoreInfoPopover, StyledContextMenuFieldSelector, StyledContextMenu } from './Email.styles';
-const ContextMenuPopover = forwardRef(({ cursorPosition, contextMenu, targetNode, show }, ref) => {
+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;

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 { FunctionComponent, MouseEvent, forwardRef, 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 { ContextMenuPopoverProps } from './Email.types';\n\nconst ContextMenuPopover: FunctionComponent<ContextMenuPopoverProps> = forwardRef(\n  (\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 { FunctionComponent, MouseEvent, forwardRef, 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 { 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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Email.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EA2Bb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAa,UAAU,EAAiC,MAAM,eAAe,CAAC;AAiBrF,OAAO,eAAe,CAAC;AAiCvB,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAofvD,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Email.d.ts","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EA2Bb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAa,UAAU,EAAiC,MAAM,eAAe,CAAC;AAiBrF,OAAO,eAAe,CAAC;AAiCvB,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAmftD,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/components/Email/Email.js

@@ -12,7 +12,7 @@ const EmailDisplayList = ({ emailUsers, showEmailAddress, showShortName }) => {
 };
 const OVERFLOW_TO_EMAIL_COUNT = 2;
 const OVERFLOW_EMAIL_SUGGESTION_COUNT = 2;
-const Email = forwardRef((props, ref) => {
+const Email = forwardRef(function Email(props, ref) {
     const { id, from, to = [], cc = [], bcc = [], timeStamp, sentiment, subject, forwardedContent, attachments = [], suggestions = [], entityHighlightMapping = [], onReply, onForward, onReplyAll, onEditDraft, onDeleteDraft, onSuggestionClick, contextMenu, status, banner, body, ...restProps } = props;
     const t = useI18n();
     const theme = useTheme();

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

@@ -1 +1 @@
-{"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  useRef,\n  useState,\n  useMemo,\n  useEffect,\n  MouseEvent,\n  useImperativeHandle\n} from 'react';\n\nimport {\n  ForwardProps,\n  Text,\n  SummaryItem,\n  Avatar,\n  Flex,\n  EmailDisplay,\n  Button,\n  Icon,\n  FieldValueListProps,\n  Sentiment,\n  useOuterEvent,\n  Popover,\n  useElement,\n  CardContent,\n  useI18n,\n  FileDisplay,\n  useBreakpoint,\n  DateTimeDisplay,\n  useConfiguration,\n  MetaList,\n  MetaListProps,\n  useScrollToggle,\n  Status,\n  Banner,\n  useTheme,\n  useEscape,\n  HTML\n} from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport ContextMenuPopover from './ContextMenuPopover';\nimport { EmailUser, EmailProps, TargetProps, ContextMenuProps } from './Email.types';\nimport {\n  StyledEmail,\n  StyledEmailDisplay,\n  StyledEmailHeader,\n  StyledFromEmailDisplay,\n  StyledEmailMoreInfoButton,\n  StyledEmailMoreInfoPopover,\n  StyledEmailPrimaryFieldValueList,\n  StyledEmailBody,\n  StyledEmailSecondaryFieldValueList,\n  StyledSuggestedRepliesButton,\n  StyledSuggestedRepliesMenuButton,\n  StyledForwardedContentToggle,\n  StyledEmailActions\n} from './Email.styles';\nimport highlightEntities from './utils/EntityHighlighter';\nimport './EmailEntity';\n\nconst EmailDisplayList = ({\n  emailUsers,\n  showEmailAddress,\n  showShortName\n}: {\n  emailUsers: EmailUser[];\n  showEmailAddress?: boolean;\n  showShortName?: boolean;\n}) => {\n  return (\n    <>\n      {emailUsers.map(({ emailAddress, fullName, shortName }, i) => (\n        <Fragment key={emailAddress}>\n          {i === 0 ? '' : '; '}\n          <EmailDisplay\n            value={emailAddress}\n            displayText={`${showShortName ? shortName : fullName}${\n              showEmailAddress ? ` <${emailAddress}>` : ''\n            }`}\n            variant='text'\n            as={StyledEmailDisplay}\n          />\n        </Fragment>\n      ))}\n    </>\n  );\n};\n\nconst OVERFLOW_TO_EMAIL_COUNT = 2;\nconst OVERFLOW_EMAIL_SUGGESTION_COUNT = 2;\n\nconst Email: FunctionComponent<EmailProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<EmailProps>, ref: EmailProps['ref']) => {\n    const {\n      id,\n      from,\n      to = [],\n      cc = [],\n      bcc = [],\n      timeStamp,\n      sentiment,\n      subject,\n      forwardedContent,\n      attachments = [],\n      suggestions = [],\n      entityHighlightMapping = [],\n      onReply,\n      onForward,\n      onReplyAll,\n      onEditDraft,\n      onDeleteDraft,\n      onSuggestionClick,\n      contextMenu,\n      status,\n      banner,\n      body,\n      ...restProps\n    } = props;\n    const t = useI18n();\n    const theme = useTheme();\n\n    const [emailMoreInfoBtnRef, setEmailMoreInfoBtnRef] = useElement<HTMLButtonElement>(null);\n    const [showEmailMoreInfo, setShowEmailMoreInfo] = useState(false);\n    const [showForwardedContent, setShowForwardedContent] = useState(false);\n    const [emailMoreInfoPopover, setEmailMoreInfoPopover] = useElement<HTMLDivElement>(null);\n    const emailMoreInfoFields: FieldValueListProps['fields'] = [];\n    // Only way to set this is through imperative handle\n    const [contextMenuItems, setContextMenuItems] = useState<ContextMenuProps['items']>([]);\n    const [contextMenuLoading, setContextMenuLoading] = useState<boolean>(false);\n\n    const [contextMenuPopoverOpen, setContextMenuPopoverOpen] = useState(false);\n    const { disableScroll, enableScroll } = useScrollToggle();\n    const [contextMenuPopoverEl, setContextMenuPopoverEl] = useElement<HTMLElement>();\n\n    useImperativeHandle(contextMenu?.handle, () => ({\n      setItems: (ctxMenuItems: ContextMenuProps['items']) => {\n        setContextMenuItems(ctxMenuItems || []);\n      },\n      setLoading(loading) {\n        setContextMenuLoading(loading);\n      },\n      setOpen(visible) {\n        setContextMenuPopoverOpen(visible);\n      }\n    }));\n\n    const headerRef = useRef<HTMLDivElement>(null);\n    const isSmallOrAbove = useBreakpoint('sm', {\n      breakpointRef: headerRef,\n      themeProp: 'content-width'\n    });\n    const { locale } = useConfiguration();\n    const [currentTarget, setCurrentTarget] = useState<TargetProps | undefined>();\n\n    useOuterEvent('mousedown', [contextMenuPopoverEl], () => {\n      if (contextMenuPopoverOpen) setContextMenuPopoverOpen(false);\n    });\n\n    // Handler for right click on email body\n    const onContextMenu = (e: MouseEvent<HTMLDivElement>) => {\n      if (e.target instanceof HTMLElement && e.target.textContent?.trim()) {\n        setCurrentTarget({\n          targetNode: e.target,\n          cursorPosition: {\n            x: e.pageX - window.scrollX,\n            y: e.pageY - window.scrollY\n          }\n        });\n      }\n      contextMenu?.onContextMenu(id, e);\n    };\n\n    const onItemClick: ContextMenuProps['onItemClick'] = (selectedValue: {\n      fieldName: string;\n      fieldValue: string;\n    }) => {\n      setContextMenuPopoverOpen(false);\n      contextMenu?.onItemClick(selectedValue);\n    };\n\n    if (from) {\n      emailMoreInfoFields.push({\n        id: 'from',\n        name: t('from'),\n        value: from.emailAddress\n      });\n    }\n\n    if (to.length > 0) {\n      emailMoreInfoFields.push({\n        id: 'to',\n        name: t('to'),\n        value: <EmailDisplayList emailUsers={to} showEmailAddress />\n      });\n    }\n\n    if (cc.length > 0) {\n      emailMoreInfoFields.push({\n        id: 'cc',\n        name: 'CC',\n        value: <EmailDisplayList emailUsers={cc} showEmailAddress />\n      });\n    }\n\n    if (bcc.length > 0) {\n      emailMoreInfoFields.push({\n        id: 'BCC',\n        name: 'BCC',\n        value: <EmailDisplayList emailUsers={bcc} showEmailAddress />\n      });\n    }\n\n    if (timeStamp) {\n      emailMoreInfoFields.push({\n        id: 'date',\n        name: t('date'),\n        value: (\n          <Text>\n            {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n              new Date(timeStamp)\n            )}, `}\n            <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n          </Text>\n        )\n      });\n    }\n\n    useOuterEvent('mousedown', [emailMoreInfoPopover], () => {\n      setShowEmailMoreInfo(false);\n    });\n\n    useEscape(() => {\n      setShowEmailMoreInfo(false);\n    });\n\n    const secondaryFields: FieldValueListProps['fields'] = [];\n\n    if (attachments.length > 0) {\n      secondaryFields.push({\n        id: 'attachments',\n        name: '',\n        value: (\n          <Flex container={{ gap: 1, wrap: 'wrap' }}>\n            {attachments.map(attachmentProps => (\n              <FileDisplay {...attachmentProps} key={attachmentProps.value} />\n            ))}\n          </Flex>\n        )\n      });\n    }\n\n    if (suggestions.length > 0) {\n      secondaryFields.push({\n        id: 'suggested_replies',\n        name: '',\n        value: (\n          <Flex container={{ wrap: 'wrap' }}>\n            {suggestions\n              .slice(0, OVERFLOW_EMAIL_SUGGESTION_COUNT)\n              .map(({ id: suggestionId, title }) => (\n                <StyledSuggestedRepliesButton\n                  variant='secondary'\n                  key={suggestionId}\n                  onClick={() => {\n                    onSuggestionClick?.(id, suggestionId);\n                  }}\n                >\n                  {title}\n                </StyledSuggestedRepliesButton>\n              ))}\n            {suggestions.length > OVERFLOW_EMAIL_SUGGESTION_COUNT && (\n              <StyledSuggestedRepliesMenuButton\n                text={t('other_responses')}\n                key='other_responses'\n                variant='secondary'\n                menu={{\n                  items: suggestions\n                    .slice(OVERFLOW_EMAIL_SUGGESTION_COUNT)\n                    .map(({ id: suggestionId, title }) => {\n                      return {\n                        primary: title,\n                        id: suggestionId,\n                        onClick: () => {\n                          onSuggestionClick?.(id, suggestionId);\n                        }\n                      };\n                    })\n                }}\n              />\n            )}\n          </Flex>\n        )\n      });\n    }\n\n    let renderedBody: ReactNode = body;\n\n    renderedBody = useMemo(() => {\n      // Apply entity highlighting only on string body\n      if (typeof body === 'string') {\n        let bodyString = body;\n\n        if (subject) {\n          bodyString = `<div style=\"font-weight: ${theme.base['font-weight']['semi-bold']}\">${t(\n            'subject_label',\n            [subject]\n          )}</div><br>${body}`;\n        }\n\n        if (entityHighlightMapping) {\n          bodyString = highlightEntities(bodyString, entityHighlightMapping);\n        }\n\n        return (\n          <>\n            <HTML\n              content={bodyString}\n              customTags={['pega-email-entity']}\n              aria-label={t('unique_entities', [entityHighlightMapping?.length ?? 0], {\n                count: entityHighlightMapping?.length ?? 0\n              })}\n              role='group'\n            />\n\n            {contextMenu && currentTarget && (\n              <ContextMenuPopover\n                cursorPosition={currentTarget.cursorPosition}\n                contextMenu={{\n                  ...contextMenu,\n                  items: contextMenuItems,\n                  loading: contextMenuLoading,\n                  onItemClick\n                }}\n                targetNode={currentTarget.targetNode}\n                show={contextMenuPopoverOpen}\n                ref={setContextMenuPopoverEl}\n              />\n            )}\n          </>\n        );\n      }\n    }, [\n      currentTarget,\n      contextMenu,\n      contextMenuPopoverOpen,\n      contextMenuItems,\n      contextMenuLoading,\n      entityHighlightMapping\n    ]);\n\n    const emailMetaListItems: MetaListProps['items'] = [\n      <Text variant='secondary'>\n        {`${t('to')}: `}\n        <EmailDisplayList emailUsers={to.slice(0, OVERFLOW_TO_EMAIL_COUNT)} showShortName />\n        {to.length > OVERFLOW_TO_EMAIL_COUNT &&\n          `; +${t('more_count', [to.length - OVERFLOW_TO_EMAIL_COUNT])}`}\n      </Text>,\n      <Text variant='secondary'>\n        {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `}\n        <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n      </Text>\n    ];\n\n    useEffect(() => {\n      if (contextMenuPopoverOpen) disableScroll();\n      else enableScroll();\n    }, [contextMenuPopoverOpen]);\n\n    const actions = useMemo(() => {\n      const applicableActions: ReactNode[] = [];\n      if (status !== 'draft') {\n        if (onReply) {\n          applicableActions.push(\n            <Button\n              variant='simple'\n              icon\n              label={t('reply')}\n              onClick={() => {\n                onReply?.(id);\n              }}\n            >\n              <Icon name='reply' />\n            </Button>\n          );\n        }\n        if (onReplyAll) {\n          applicableActions.push(\n            <Button\n              icon\n              variant='simple'\n              label={t('reply_all')}\n              onClick={() => {\n                onReplyAll?.(id);\n              }}\n            >\n              <Icon name='reply-all' />\n            </Button>\n          );\n        }\n        if (onForward) {\n          applicableActions.push(\n            <Button\n              variant='simple'\n              icon\n              label={t('forward')}\n              onClick={() => {\n                onForward?.(id);\n              }}\n            >\n              <Icon name='forward' />\n            </Button>\n          );\n        }\n      }\n      if (status === 'draft') {\n        if (onEditDraft) {\n          applicableActions.push(\n            <Button\n              variant='simple'\n              icon\n              label={t('edit')}\n              onClick={() => {\n                onEditDraft?.(id);\n              }}\n            >\n              <Icon name='pencil' />\n            </Button>\n          );\n        }\n        if (onDeleteDraft) {\n          applicableActions.push(\n            <Button\n              variant='simple'\n              icon\n              label={t('delete')}\n              onClick={() => {\n                onDeleteDraft?.(id);\n              }}\n            >\n              <Icon name='trash' />\n            </Button>\n          );\n        }\n      }\n      return applicableActions;\n    }, [status, onEditDraft, onDeleteDraft, onReply, onReplyAll, onForward]);\n\n    return (\n      <Flex\n        as={StyledEmail}\n        container={{\n          direction: 'column',\n          gap: 1\n        }}\n        ref={ref}\n        {...restProps}\n      >\n        <SummaryItem\n          as={StyledEmailHeader}\n          visual={<Avatar {...from.avatarProps} name={from.fullName} />}\n          ref={headerRef}\n          primary={\n            <Flex\n              container={{\n                gap: 1,\n                alignItems: 'center'\n              }}\n            >\n              <StyledFromEmailDisplay\n                value={from.emailAddress}\n                displayText={from.fullName}\n                variant='text'\n              />\n              {sentiment && <Sentiment {...sentiment} labelHidden />}\n              {status && isSmallOrAbove && (\n                <Status variant={status === 'draft' ? 'pending' : 'urgent'}>\n                  {/* Passing mock count so that translation engine select correct form of draft,\n                   with [](second argument) as empty so that count is not shown */}\n                  {status === 'draft' ? t('draft', [], { count: 1 }) : t(status)}\n                </Status>\n              )}\n            </Flex>\n          }\n          secondary={\n            <Flex\n              container={{\n                gap: 0,\n                alignItems: 'start',\n                direction: 'column'\n              }}\n            >\n              <Flex\n                container={{\n                  gap: 0,\n                  alignItems: 'start'\n                }}\n              >\n                <MetaList items={isSmallOrAbove ? emailMetaListItems : [emailMetaListItems[0]]} />\n\n                <Button\n                  icon\n                  variant='simple'\n                  as={StyledEmailMoreInfoButton}\n                  ref={setEmailMoreInfoBtnRef}\n                  onClick={() => {\n                    setShowEmailMoreInfo(true);\n                  }}\n                  label={t('show_more')}\n                >\n                  <Icon name='arrow-micro-down' />\n                </Button>\n                <Popover\n                  as={StyledEmailMoreInfoPopover}\n                  show={showEmailMoreInfo}\n                  ref={setEmailMoreInfoPopover}\n                  target={emailMoreInfoBtnRef}\n                  placement='bottom'\n                >\n                  <CardContent>\n                    <StyledEmailPrimaryFieldValueList fields={emailMoreInfoFields} />\n                  </CardContent>\n                </Popover>\n              </Flex>\n              {!isSmallOrAbove && timeStamp && emailMetaListItems[1]}\n              {status && !isSmallOrAbove && (\n                <Flex container={{ pad: [0.5, 0, 0] }}>\n                  <Status variant={status === 'draft' ? 'pending' : 'urgent'}>\n                    {/* Passing mock count so that translation engine select correct form of draft,\n                        with [](second argument) as empty so that count is not shown */}\n                    {status === 'draft' ? t('draft', [], { count: 1 }) : t(status)}\n                  </Status>\n                </Flex>\n              )}\n            </Flex>\n          }\n          actions={\n            <Flex\n              as={StyledEmailActions}\n              container={{\n                pad: 1,\n                alignItems: 'center'\n              }}\n            >\n              {...actions}\n            </Flex>\n          }\n        />\n        {banner && <Banner variant='urgent' {...banner} />}\n        <Flex\n          container={{\n            direction: 'column',\n            gap: 2,\n            pad: [0, 2]\n          }}\n          onContextMenu={contextMenu ? onContextMenu : undefined}\n        >\n          {/* Attach the handler only when context menu enabled by providing the prop */}\n          <StyledEmailBody>{renderedBody}</StyledEmailBody>\n          {forwardedContent && forwardedContent.length > 0 && (\n            <>\n              <StyledForwardedContentToggle\n                variant='simple'\n                icon\n                onClick={() => {\n                  setShowForwardedContent(prev => !prev);\n                }}\n                label={\n                  showForwardedContent\n                    ? t('collapse_forwarded_message')\n                    : t('expand_forwarded_message')\n                }\n                compact\n              >\n                <Icon name='more-alt' />\n              </StyledForwardedContentToggle>\n              {showForwardedContent && <RichTextViewer content={forwardedContent} type='html' />}\n            </>\n          )}\n        </Flex>\n        {secondaryFields.length > 0 && (\n          <Flex\n            container={{\n              pad: [0, 2]\n            }}\n          >\n            <StyledEmailSecondaryFieldValueList fields={secondaryFields} />\n          </Flex>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default Email;\n"]}
+{"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../src/components/Email/Email.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  Fragment,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  useRef,\n  useState,\n  useMemo,\n  useEffect,\n  MouseEvent,\n  useImperativeHandle\n} from 'react';\n\nimport {\n  ForwardProps,\n  Text,\n  SummaryItem,\n  Avatar,\n  Flex,\n  EmailDisplay,\n  Button,\n  Icon,\n  FieldValueListProps,\n  Sentiment,\n  useOuterEvent,\n  Popover,\n  useElement,\n  CardContent,\n  useI18n,\n  FileDisplay,\n  useBreakpoint,\n  DateTimeDisplay,\n  useConfiguration,\n  MetaList,\n  MetaListProps,\n  useScrollToggle,\n  Status,\n  Banner,\n  useTheme,\n  useEscape,\n  HTML\n} from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport ContextMenuPopover from './ContextMenuPopover';\nimport { EmailUser, EmailProps, TargetProps, ContextMenuProps } from './Email.types';\nimport {\n  StyledEmail,\n  StyledEmailDisplay,\n  StyledEmailHeader,\n  StyledFromEmailDisplay,\n  StyledEmailMoreInfoButton,\n  StyledEmailMoreInfoPopover,\n  StyledEmailPrimaryFieldValueList,\n  StyledEmailBody,\n  StyledEmailSecondaryFieldValueList,\n  StyledSuggestedRepliesButton,\n  StyledSuggestedRepliesMenuButton,\n  StyledForwardedContentToggle,\n  StyledEmailActions\n} from './Email.styles';\nimport highlightEntities from './utils/EntityHighlighter';\nimport './EmailEntity';\n\nconst EmailDisplayList = ({\n  emailUsers,\n  showEmailAddress,\n  showShortName\n}: {\n  emailUsers: EmailUser[];\n  showEmailAddress?: boolean;\n  showShortName?: boolean;\n}) => {\n  return (\n    <>\n      {emailUsers.map(({ emailAddress, fullName, shortName }, i) => (\n        <Fragment key={emailAddress}>\n          {i === 0 ? '' : '; '}\n          <EmailDisplay\n            value={emailAddress}\n            displayText={`${showShortName ? shortName : fullName}${\n              showEmailAddress ? ` <${emailAddress}>` : ''\n            }`}\n            variant='text'\n            as={StyledEmailDisplay}\n          />\n        </Fragment>\n      ))}\n    </>\n  );\n};\n\nconst OVERFLOW_TO_EMAIL_COUNT = 2;\nconst OVERFLOW_EMAIL_SUGGESTION_COUNT = 2;\n\nconst Email: FunctionComponent<EmailProps & ForwardProps> = forwardRef(function Email(\n  props: PropsWithoutRef<EmailProps>,\n  ref: EmailProps['ref']\n) {\n  const {\n    id,\n    from,\n    to = [],\n    cc = [],\n    bcc = [],\n    timeStamp,\n    sentiment,\n    subject,\n    forwardedContent,\n    attachments = [],\n    suggestions = [],\n    entityHighlightMapping = [],\n    onReply,\n    onForward,\n    onReplyAll,\n    onEditDraft,\n    onDeleteDraft,\n    onSuggestionClick,\n    contextMenu,\n    status,\n    banner,\n    body,\n    ...restProps\n  } = props;\n  const t = useI18n();\n  const theme = useTheme();\n\n  const [emailMoreInfoBtnRef, setEmailMoreInfoBtnRef] = useElement<HTMLButtonElement>(null);\n  const [showEmailMoreInfo, setShowEmailMoreInfo] = useState(false);\n  const [showForwardedContent, setShowForwardedContent] = useState(false);\n  const [emailMoreInfoPopover, setEmailMoreInfoPopover] = useElement<HTMLDivElement>(null);\n  const emailMoreInfoFields: FieldValueListProps['fields'] = [];\n  // Only way to set this is through imperative handle\n  const [contextMenuItems, setContextMenuItems] = useState<ContextMenuProps['items']>([]);\n  const [contextMenuLoading, setContextMenuLoading] = useState<boolean>(false);\n\n  const [contextMenuPopoverOpen, setContextMenuPopoverOpen] = useState(false);\n  const { disableScroll, enableScroll } = useScrollToggle();\n  const [contextMenuPopoverEl, setContextMenuPopoverEl] = useElement<HTMLElement>();\n\n  useImperativeHandle(contextMenu?.handle, () => ({\n    setItems: (ctxMenuItems: ContextMenuProps['items']) => {\n      setContextMenuItems(ctxMenuItems || []);\n    },\n    setLoading(loading) {\n      setContextMenuLoading(loading);\n    },\n    setOpen(visible) {\n      setContextMenuPopoverOpen(visible);\n    }\n  }));\n\n  const headerRef = useRef<HTMLDivElement>(null);\n  const isSmallOrAbove = useBreakpoint('sm', {\n    breakpointRef: headerRef,\n    themeProp: 'content-width'\n  });\n  const { locale } = useConfiguration();\n  const [currentTarget, setCurrentTarget] = useState<TargetProps | undefined>();\n\n  useOuterEvent('mousedown', [contextMenuPopoverEl], () => {\n    if (contextMenuPopoverOpen) setContextMenuPopoverOpen(false);\n  });\n\n  // Handler for right click on email body\n  const onContextMenu = (e: MouseEvent<HTMLDivElement>) => {\n    if (e.target instanceof HTMLElement && e.target.textContent?.trim()) {\n      setCurrentTarget({\n        targetNode: e.target,\n        cursorPosition: {\n          x: e.pageX - window.scrollX,\n          y: e.pageY - window.scrollY\n        }\n      });\n    }\n    contextMenu?.onContextMenu(id, e);\n  };\n\n  const onItemClick: ContextMenuProps['onItemClick'] = (selectedValue: {\n    fieldName: string;\n    fieldValue: string;\n  }) => {\n    setContextMenuPopoverOpen(false);\n    contextMenu?.onItemClick(selectedValue);\n  };\n\n  if (from) {\n    emailMoreInfoFields.push({\n      id: 'from',\n      name: t('from'),\n      value: from.emailAddress\n    });\n  }\n\n  if (to.length > 0) {\n    emailMoreInfoFields.push({\n      id: 'to',\n      name: t('to'),\n      value: <EmailDisplayList emailUsers={to} showEmailAddress />\n    });\n  }\n\n  if (cc.length > 0) {\n    emailMoreInfoFields.push({\n      id: 'cc',\n      name: 'CC',\n      value: <EmailDisplayList emailUsers={cc} showEmailAddress />\n    });\n  }\n\n  if (bcc.length > 0) {\n    emailMoreInfoFields.push({\n      id: 'BCC',\n      name: 'BCC',\n      value: <EmailDisplayList emailUsers={bcc} showEmailAddress />\n    });\n  }\n\n  if (timeStamp) {\n    emailMoreInfoFields.push({\n      id: 'date',\n      name: t('date'),\n      value: (\n        <Text>\n          {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `}\n          <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n        </Text>\n      )\n    });\n  }\n\n  useOuterEvent('mousedown', [emailMoreInfoPopover], () => {\n    setShowEmailMoreInfo(false);\n  });\n\n  useEscape(() => {\n    setShowEmailMoreInfo(false);\n  });\n\n  const secondaryFields: FieldValueListProps['fields'] = [];\n\n  if (attachments.length > 0) {\n    secondaryFields.push({\n      id: 'attachments',\n      name: '',\n      value: (\n        <Flex container={{ gap: 1, wrap: 'wrap' }}>\n          {attachments.map(attachmentProps => (\n            <FileDisplay {...attachmentProps} key={attachmentProps.value} />\n          ))}\n        </Flex>\n      )\n    });\n  }\n\n  if (suggestions.length > 0) {\n    secondaryFields.push({\n      id: 'suggested_replies',\n      name: '',\n      value: (\n        <Flex container={{ wrap: 'wrap' }}>\n          {suggestions\n            .slice(0, OVERFLOW_EMAIL_SUGGESTION_COUNT)\n            .map(({ id: suggestionId, title }) => (\n              <StyledSuggestedRepliesButton\n                variant='secondary'\n                key={suggestionId}\n                onClick={() => {\n                  onSuggestionClick?.(id, suggestionId);\n                }}\n              >\n                {title}\n              </StyledSuggestedRepliesButton>\n            ))}\n          {suggestions.length > OVERFLOW_EMAIL_SUGGESTION_COUNT && (\n            <StyledSuggestedRepliesMenuButton\n              text={t('other_responses')}\n              key='other_responses'\n              variant='secondary'\n              menu={{\n                items: suggestions\n                  .slice(OVERFLOW_EMAIL_SUGGESTION_COUNT)\n                  .map(({ id: suggestionId, title }) => {\n                    return {\n                      primary: title,\n                      id: suggestionId,\n                      onClick: () => {\n                        onSuggestionClick?.(id, suggestionId);\n                      }\n                    };\n                  })\n              }}\n            />\n          )}\n        </Flex>\n      )\n    });\n  }\n\n  let renderedBody: ReactNode = body;\n\n  renderedBody = useMemo(() => {\n    // Apply entity highlighting only on string body\n    if (typeof body === 'string') {\n      let bodyString = body;\n\n      if (subject) {\n        bodyString = `<div style=\"font-weight: ${theme.base['font-weight']['semi-bold']}\">${t(\n          'subject_label',\n          [subject]\n        )}</div><br>${body}`;\n      }\n\n      if (entityHighlightMapping) {\n        bodyString = highlightEntities(bodyString, entityHighlightMapping);\n      }\n\n      return (\n        <>\n          <HTML\n            content={bodyString}\n            customTags={['pega-email-entity']}\n            aria-label={t('unique_entities', [entityHighlightMapping?.length ?? 0], {\n              count: entityHighlightMapping?.length ?? 0\n            })}\n            role='group'\n          />\n\n          {contextMenu && currentTarget && (\n            <ContextMenuPopover\n              cursorPosition={currentTarget.cursorPosition}\n              contextMenu={{\n                ...contextMenu,\n                items: contextMenuItems,\n                loading: contextMenuLoading,\n                onItemClick\n              }}\n              targetNode={currentTarget.targetNode}\n              show={contextMenuPopoverOpen}\n              ref={setContextMenuPopoverEl}\n            />\n          )}\n        </>\n      );\n    }\n  }, [\n    currentTarget,\n    contextMenu,\n    contextMenuPopoverOpen,\n    contextMenuItems,\n    contextMenuLoading,\n    entityHighlightMapping\n  ]);\n\n  const emailMetaListItems: MetaListProps['items'] = [\n    <Text variant='secondary'>\n      {`${t('to')}: `}\n      <EmailDisplayList emailUsers={to.slice(0, OVERFLOW_TO_EMAIL_COUNT)} showShortName />\n      {to.length > OVERFLOW_TO_EMAIL_COUNT &&\n        `; +${t('more_count', [to.length - OVERFLOW_TO_EMAIL_COUNT])}`}\n    </Text>,\n    <Text variant='secondary'>\n      {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(new Date(timeStamp))}, `}\n      <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n    </Text>\n  ];\n\n  useEffect(() => {\n    if (contextMenuPopoverOpen) disableScroll();\n    else enableScroll();\n  }, [contextMenuPopoverOpen]);\n\n  const actions = useMemo(() => {\n    const applicableActions: ReactNode[] = [];\n    if (status !== 'draft') {\n      if (onReply) {\n        applicableActions.push(\n          <Button\n            variant='simple'\n            icon\n            label={t('reply')}\n            onClick={() => {\n              onReply?.(id);\n            }}\n          >\n            <Icon name='reply' />\n          </Button>\n        );\n      }\n      if (onReplyAll) {\n        applicableActions.push(\n          <Button\n            icon\n            variant='simple'\n            label={t('reply_all')}\n            onClick={() => {\n              onReplyAll?.(id);\n            }}\n          >\n            <Icon name='reply-all' />\n          </Button>\n        );\n      }\n      if (onForward) {\n        applicableActions.push(\n          <Button\n            variant='simple'\n            icon\n            label={t('forward')}\n            onClick={() => {\n              onForward?.(id);\n            }}\n          >\n            <Icon name='forward' />\n          </Button>\n        );\n      }\n    }\n    if (status === 'draft') {\n      if (onEditDraft) {\n        applicableActions.push(\n          <Button\n            variant='simple'\n            icon\n            label={t('edit')}\n            onClick={() => {\n              onEditDraft?.(id);\n            }}\n          >\n            <Icon name='pencil' />\n          </Button>\n        );\n      }\n      if (onDeleteDraft) {\n        applicableActions.push(\n          <Button\n            variant='simple'\n            icon\n            label={t('delete')}\n            onClick={() => {\n              onDeleteDraft?.(id);\n            }}\n          >\n            <Icon name='trash' />\n          </Button>\n        );\n      }\n    }\n    return applicableActions;\n  }, [status, onEditDraft, onDeleteDraft, onReply, onReplyAll, onForward]);\n\n  return (\n    <Flex\n      as={StyledEmail}\n      container={{\n        direction: 'column',\n        gap: 1\n      }}\n      ref={ref}\n      {...restProps}\n    >\n      <SummaryItem\n        as={StyledEmailHeader}\n        visual={<Avatar {...from.avatarProps} name={from.fullName} />}\n        ref={headerRef}\n        primary={\n          <Flex\n            container={{\n              gap: 1,\n              alignItems: 'center'\n            }}\n          >\n            <StyledFromEmailDisplay\n              value={from.emailAddress}\n              displayText={from.fullName}\n              variant='text'\n            />\n            {sentiment && <Sentiment {...sentiment} labelHidden />}\n            {status && isSmallOrAbove && (\n              <Status variant={status === 'draft' ? 'pending' : 'urgent'}>\n                {/* Passing mock count so that translation engine select correct form of draft,\n                   with [](second argument) as empty so that count is not shown */}\n                {status === 'draft' ? t('draft', [], { count: 1 }) : t(status)}\n              </Status>\n            )}\n          </Flex>\n        }\n        secondary={\n          <Flex\n            container={{\n              gap: 0,\n              alignItems: 'start',\n              direction: 'column'\n            }}\n          >\n            <Flex\n              container={{\n                gap: 0,\n                alignItems: 'start'\n              }}\n            >\n              <MetaList items={isSmallOrAbove ? emailMetaListItems : [emailMetaListItems[0]]} />\n\n              <Button\n                icon\n                variant='simple'\n                as={StyledEmailMoreInfoButton}\n                ref={setEmailMoreInfoBtnRef}\n                onClick={() => {\n                  setShowEmailMoreInfo(true);\n                }}\n                label={t('show_more')}\n              >\n                <Icon name='arrow-micro-down' />\n              </Button>\n              <Popover\n                as={StyledEmailMoreInfoPopover}\n                show={showEmailMoreInfo}\n                ref={setEmailMoreInfoPopover}\n                target={emailMoreInfoBtnRef}\n                placement='bottom'\n              >\n                <CardContent>\n                  <StyledEmailPrimaryFieldValueList fields={emailMoreInfoFields} />\n                </CardContent>\n              </Popover>\n            </Flex>\n            {!isSmallOrAbove && timeStamp && emailMetaListItems[1]}\n            {status && !isSmallOrAbove && (\n              <Flex container={{ pad: [0.5, 0, 0] }}>\n                <Status variant={status === 'draft' ? 'pending' : 'urgent'}>\n                  {/* Passing mock count so that translation engine select correct form of draft,\n                        with [](second argument) as empty so that count is not shown */}\n                  {status === 'draft' ? t('draft', [], { count: 1 }) : t(status)}\n                </Status>\n              </Flex>\n            )}\n          </Flex>\n        }\n        actions={\n          <Flex\n            as={StyledEmailActions}\n            container={{\n              pad: 1,\n              alignItems: 'center'\n            }}\n          >\n            {...actions}\n          </Flex>\n        }\n      />\n      {banner && <Banner variant='urgent' {...banner} />}\n      <Flex\n        container={{\n          direction: 'column',\n          gap: 2,\n          pad: [0, 2]\n        }}\n        onContextMenu={contextMenu ? onContextMenu : undefined}\n      >\n        {/* Attach the handler only when context menu enabled by providing the prop */}\n        <StyledEmailBody>{renderedBody}</StyledEmailBody>\n        {forwardedContent && forwardedContent.length > 0 && (\n          <>\n            <StyledForwardedContentToggle\n              variant='simple'\n              icon\n              onClick={() => {\n                setShowForwardedContent(prev => !prev);\n              }}\n              label={\n                showForwardedContent\n                  ? t('collapse_forwarded_message')\n                  : t('expand_forwarded_message')\n              }\n              compact\n            >\n              <Icon name='more-alt' />\n            </StyledForwardedContentToggle>\n            {showForwardedContent && <RichTextViewer content={forwardedContent} type='html' />}\n          </>\n        )}\n      </Flex>\n      {secondaryFields.length > 0 && (\n        <Flex\n          container={{\n            pad: [0, 2]\n          }}\n        >\n          <StyledEmailSecondaryFieldValueList fields={secondaryFields} />\n        </Flex>\n      )}\n    </Flex>\n  );\n});\n\nexport default Email;\n"]}

package/lib/components/Email/Email.styles.d.ts

@@ -3,17 +3,25 @@ import { EmailEntityProps, EmailShellProps } from './Email.types';
 export declare const StyledEmailMoreInfoButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSuggestedRepliesButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSuggestedRepliesMenuButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-core").MenuButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSuggestedRepliesMenuButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-core").MenuButtonProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFromEmailDisplay: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").EmailDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailDisplay: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledEmailPrimaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledEmailSecondaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailPrimaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmailSecondaryFieldValueList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailMoreInfoPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSecondarySeparator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmail: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledEmailEntity: import("styled-components").StyledComponent<"mark", import("styled-components").DefaultTheme, EmailEntityProps, never>;
-export declare const StyledEntityList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEntityList: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldValueListProps & import("@pega/cosmos-react-core").ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledForwardedContentToggle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLoadMore: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledContextMenuFieldSelector: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {