@pega/cosmos-react-social 3.0.0-dev.2.0 → 3.0.0-dev.21.0

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

@@ -1 +1 @@
-{"version":3,"file":"Message.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba as polishedRgba } from 'polished';\n\nimport { defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledMessageBubbleContent = styled.div``;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledSummaryItem = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img``;\n\nexport const StyledMediaDownloadButton = styled.button``;\n\nexport const StyledMediaLink = styled.a``;\n\nexport const StyledMediaButton = styled(BareButton)``;\n\nexport const StyledMessageMain = styled.div``;\n\nexport const StyledMessageBubble = styled.div``;\n\nexport const StyledMetaInfoContainer = styled.div``;\n\nexport const StyledMetaInfo = styled.span``;\n\nexport const StyledTypingIndicator = styled.div``;\n\nexport const StyledMessageHeader = styled.header``;\nexport const StyledMessageHeaderContent = styled.div``;\nexport const StyledMessageHeaderMeta = styled.div``;\n\ninterface StyledMessageContainerProps {\n  variant: 'sender' | 'receiver' | 'other';\n  messageDirection: 'in' | 'out' | string;\n  typing: boolean;\n}\n\nexport const StyledMessageContainer = styled.div<StyledMessageContainerProps>(\n  ({\n    messageDirection,\n    variant,\n    typing,\n    theme,\n    theme: {\n      base: {\n        palette: {\n          'foreground-color': foregroundColor,\n          'secondary-background': secondaryBackground\n        },\n        transparency: { 'transparent-2': foregroundAlpha }\n      },\n      components: { button }\n    }\n  }) => {\n    const messageHeaderTheme = theme.components.chat.messageBubble[variant].header;\n    const messageContentTheme = theme.components.chat.messageBubble[variant].content;\n    const padding = messageDirection === 'in' ? '0 2rem 0 0' : '0 0 0 2rem';\n    const metaForegroundColor = tryCatch(() => polishedRgba(foregroundColor, foregroundAlpha));\n\n    return css`\n      padding: ${padding};\n      margin-bottom: ${typing ? '0.5rem' : '0'};\n      ${StyledMessageMain} {\n        max-width: 90%;\n      }\n      ${StyledMessageBubble} {\n        max-width: 100%;\n        min-width: 100%;\n        background: ${messageContentTheme['background-color']};\n        border-radius: calc(3 * ${theme.base['border-radius']}) ${theme.base['border-radius']}\n          calc(3 * ${theme.base['border-radius']}) calc(3 * ${theme.base['border-radius']});\n        overflow: hidden;\n        color: ${messageContentTheme['foreground-color']};\n        display: inline-block;\n        width: auto;\n        margin-bottom: 0.25rem;\n\n        label {\n          color: inherit;\n        }\n\n        ${messageDirection === 'in' &&\n        css`\n          border-radius: ${theme.base['border-radius']} calc(3 * ${theme.base['border-radius']})\n            calc(3 * ${theme.base['border-radius']}) calc(3 * ${theme.base['border-radius']});\n        `}\n\n        > ${StyledMessageBubbleContent} {\n          padding: 0.5rem 1rem;\n          word-break: break-word;\n          white-space: pre-wrap;\n          position: relative;\n        }\n\n        > ${StyledMediaList} {\n          color: ${messageContentTheme['foreground-color']};\n          max-width: 100%;\n\n          ${StyledMediaDownloadButton} {\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            color: ${messageContentTheme['foreground-color']};\n            width: ${button.height};\n            height: ${button.height};\n            border: 0.0625rem solid transparent;\n            &:enabled:hover,\n            &:enabled:focus {\n              background: ${messageContentTheme['background-color']};\n              color: ${messageContentTheme['foreground-color']};\n              border: 0.0625rem solid ${messageContentTheme['foreground-color']};\n              border-radius: 50%;\n            }\n            svg {\n              width: 50%;\n              height: 50%;\n            }\n          }\n\n          > ${StyledMediaListItem} {\n            position: relative;\n            ${StyledMediaThumbNail} {\n              max-height: 12rem;\n              width: 100%;\n              object-fit: contain;\n              background-color: ${secondaryBackground};\n            }\n            ${StyledSummaryItem} {\n              padding: 0.5rem 1.5rem;\n              font-size: 0.75rem;\n              margin-top: 0.25rem;\n            }\n            ${StyledSummaryItem}::before {\n              content: '';\n              padding: 0.5rem 0;\n              border-top: 0.0625rem solid ${messageContentTheme['foreground-color']};\n              position: absolute;\n              width: calc(100% - 2rem);\n              left: 1rem;\n              top: 0;\n            }\n            ${StyledMediaThumbNail} + ${StyledSummaryItem}::before {\n              content: none;\n            }\n            svg {\n              font-size: 1.6rem;\n            }\n          }\n        }\n\n        ${StyledMessageHeader} {\n          padding: 0.5rem 1rem;\n          color: ${messageHeaderTheme['foreground-color']};\n          background-color: ${messageHeaderTheme['background-color']};\n        }\n\n        ${StyledMessageHeaderContent} {\n          color: ${messageHeaderTheme['foreground-color']};\n          margin-inline-end: ${theme.base.spacing};\n        }\n        ${StyledMessageHeaderMeta} {\n          > a {\n            color: ${messageHeaderTheme['foreground-color']};\n          }\n        }\n\n        ${StyledMediaLink}, ${StyledMediaButton} {\n          color: ${messageContentTheme['foreground-color']};\n          font-size: inherit;\n          text-decoration: none;\n          font-weight: 700;\n          overflow-x: hidden;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          display: inline-block;\n          max-width: 100%;\n          &:hover {\n            color: ${messageContentTheme['foreground-color']};\n            text-decoration: underline;\n          }\n          &:visited {\n            color: ${messageContentTheme['foreground-color']};\n          }\n          &:focus {\n            box-shadow: ${theme.base.shadow.focus};\n          }\n        }\n      }\n\n      ${StyledMetaInfoContainer} {\n        width: 100%;\n        padding: 0 0.5rem;\n        ${StyledMetaInfo} {\n          margin-bottom: 0.5rem;\n          font-size: 0.7rem;\n          color: ${metaForegroundColor};\n        }\n      }\n      ${StyledTypingIndicator} {\n        width: 4.5rem;\n        position: relative;\n        height: 2rem;\n      }\n    `;\n  }\n);\nStyledMessageContainer.defaultProps = defaultThemeProp;\ninterface StyledBlinkingDotProps {\n  delay?: number;\n}\n\nexport const StyledBlinkingDot = styled.div<StyledBlinkingDotProps>(({ delay = 0, theme }) => {\n  return css`\n    @keyframes Blinking {\n      0% {\n        background: ${theme.base.colors.gray.medium};\n      }\n      100% {\n        background: ${theme.base.colors.gray['extra-light']};\n      }\n    }\n    animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;\n    background: ${theme.base.colors.gray['extra-light']};\n    border-radius: 50%;\n    animation-delay: ${delay}s;\n    height: 0.4rem;\n    width: 0.4rem;\n  `;\n});\nStyledBlinkingDot.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Message.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledMessageBubbleContent = styled.div``;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledSummaryItem = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img``;\n\nexport const StyledMediaDownloadButton = styled.button``;\n\nexport const StyledMediaLink = styled.a``;\n\nexport const StyledMediaButton = styled(BareButton)``;\n\nexport const StyledMessageMain = styled.div``;\n\nexport const StyledMessageBubble = styled.div``;\n\nexport const StyledMetaInfoContainer = styled.div``;\n\nexport const StyledMetaInfo = styled.span``;\n\nexport const StyledTypingIndicator = styled.div``;\n\nexport const StyledMessageHeader = styled.header``;\nexport const StyledMessageHeaderContent = styled.div``;\nexport const StyledMessageHeaderMeta = styled.div``;\n\ninterface StyledMessageContainerProps {\n  variant: 'sender' | 'receiver' | 'other';\n  messageDirection: 'in' | 'out' | string;\n  typing: boolean;\n  hasMessage: boolean;\n}\n\nexport const StyledMessageContainer = styled.div<StyledMessageContainerProps>(\n  ({\n    messageDirection,\n    variant,\n    hasMessage,\n    typing,\n    theme,\n    theme: {\n      base: {\n        palette: {\n          'foreground-color': foregroundColor,\n          'secondary-background': secondaryBackground\n        },\n        transparency: { 'transparent-2': foregroundAlpha }\n      },\n      components: { button }\n    }\n  }) => {\n    const messageHeaderTheme = theme.components.chat.messageBubble[variant].header;\n    const messageContentTheme = theme.components.chat.messageBubble[variant].content;\n    const padding = messageDirection === 'in' ? '0 2rem 0 0' : '0 0 0 2rem';\n    const metaForegroundColor = tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n\n    return css`\n      padding: ${padding};\n      margin-bottom: ${typing ? '0.5rem' : '0'};\n      ${StyledMessageMain} {\n        max-width: 90%;\n      }\n      ${StyledMessageBubble} {\n        max-width: 100%;\n        min-width: 100%;\n        background: ${messageContentTheme['background-color']};\n        border-radius: calc(3 * ${theme.base['border-radius']}) ${theme.base['border-radius']}\n          calc(3 * ${theme.base['border-radius']}) calc(3 * ${theme.base['border-radius']});\n        overflow: hidden;\n        color: ${messageContentTheme['foreground-color']};\n        display: inline-block;\n        width: auto;\n        margin-bottom: 0.25rem;\n\n        label {\n          color: inherit;\n        }\n\n        ${messageDirection === 'in' &&\n        css`\n          border-radius: ${theme.base['border-radius']} calc(3 * ${theme.base['border-radius']})\n            calc(3 * ${theme.base['border-radius']}) calc(3 * ${theme.base['border-radius']});\n        `}\n\n        > ${StyledMessageBubbleContent} {\n          padding: 0.5rem 1rem;\n          word-break: break-word;\n          white-space: pre-wrap;\n          position: relative;\n        }\n\n        > ${StyledMediaList} {\n          color: ${messageContentTheme['foreground-color']};\n          max-width: 100%;\n\n          ${StyledMediaDownloadButton} {\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            color: ${messageContentTheme['foreground-color']};\n            width: ${button.height};\n            height: ${button.height};\n            border: 0.0625rem solid transparent;\n            &:enabled:hover,\n            &:enabled:focus {\n              background: ${messageContentTheme['background-color']};\n              color: ${messageContentTheme['foreground-color']};\n              border: 0.0625rem solid ${messageContentTheme['foreground-color']};\n              border-radius: 50%;\n            }\n            svg {\n              width: 50%;\n              height: 50%;\n            }\n          }\n\n          > ${StyledMediaListItem} {\n            position: relative;\n            ${StyledMediaThumbNail} {\n              max-height: 12rem;\n              width: 100%;\n              object-fit: contain;\n              background-color: ${secondaryBackground};\n            }\n            ${StyledSummaryItem} {\n              padding: 0.5rem 1.5rem;\n              font-size: 0.75rem;\n              margin-top: 0.25rem;\n            }\n            ${StyledSummaryItem}::before {\n              content: '';\n              padding: 0.5rem 0;\n              border-top: 0.0625rem solid ${messageContentTheme['foreground-color']};\n              position: absolute;\n              width: calc(100% - 2rem);\n              left: 1rem;\n              top: 0;\n            }\n            ${StyledMediaThumbNail} + ${StyledSummaryItem}::before {\n              content: none;\n            }\n            svg {\n              font-size: 1.6rem;\n            }\n          }\n\n          ${!hasMessage &&\n          css`\n            > ${StyledMediaListItem}:first-child {\n              > ${StyledSummaryItem}::before {\n                border-top: none;\n              }\n            }\n          `}\n        }\n\n        ${StyledMessageHeader} {\n          padding: 0.5rem 1rem;\n          color: ${messageHeaderTheme['foreground-color']};\n          background-color: ${messageHeaderTheme['background-color']};\n        }\n\n        ${StyledMessageHeaderContent} {\n          color: ${messageHeaderTheme['foreground-color']};\n          margin-inline-end: ${theme.base.spacing};\n        }\n        ${StyledMessageHeaderMeta} {\n          > a {\n            color: ${messageHeaderTheme['foreground-color']};\n          }\n        }\n\n        ${StyledMediaLink}, ${StyledMediaButton} {\n          color: ${messageContentTheme['foreground-color']};\n          font-size: inherit;\n          text-decoration: none;\n          font-weight: 700;\n          overflow-x: hidden;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          display: inline-block;\n          max-width: 100%;\n          &:hover {\n            color: ${messageContentTheme['foreground-color']};\n            text-decoration: underline;\n          }\n          &:visited {\n            color: ${messageContentTheme['foreground-color']};\n          }\n          &:focus {\n            box-shadow: ${theme.base.shadow.focus};\n          }\n        }\n      }\n\n      ${StyledMetaInfoContainer} {\n        width: 100%;\n        padding: 0 0.5rem;\n        ${StyledMetaInfo} {\n          margin-bottom: 0.5rem;\n          font-size: 0.7rem;\n          color: ${metaForegroundColor};\n        }\n      }\n      ${StyledTypingIndicator} {\n        width: 4.5rem;\n        position: relative;\n        height: 2rem;\n      }\n    `;\n  }\n);\nStyledMessageContainer.defaultProps = defaultThemeProp;\ninterface StyledBlinkingDotProps {\n  delay?: number;\n}\n\nexport const StyledBlinkingDot = styled.div<StyledBlinkingDotProps>(({ delay = 0, theme }) => {\n  return css`\n    @keyframes Blinking {\n      0% {\n        background: ${theme.base.colors.gray.medium};\n      }\n      100% {\n        background: ${theme.base.colors.gray['extra-light']};\n      }\n    }\n    animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;\n    background: ${theme.base.colors.gray['extra-light']};\n    border-radius: 50%;\n    animation-delay: ${delay}s;\n    height: 0.4rem;\n    width: 0.4rem;\n  `;\n});\nStyledBlinkingDot.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Chat/MessageList.js

@@ -48,7 +48,7 @@ const ScrollToLatest = props => {
                 scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;
         }
     });
-    return _jsx(_Fragment, {}, void 0);
+    return _jsx(_Fragment, {});
 };
 const MessageList = forwardRef((props, ref) => {
     const { messages, unReadMessageCount = 0, onScrollToButtonClick, ...restProps } = props;
@@ -102,7 +102,7 @@ const MessageList = forwardRef((props, ref) => {
                                 scrollToLatestMessage();
                             }
                             onScrollToButtonClick?.();
-                        }, icon: unReadMessageCount === 0, children: [_jsx(Icon, { name: 'caret-down' }, void 0), unReadMessageCount > 0 && _jsxs(_Fragment, { children: ["\u00A0 ", t('new_messages')] }, void 0)] }, void 0)), _jsx(RepeatingView, { as: StyledMessageList, container: { direction: 'column' }, ref: conversationRef, rows: messages, onScroll: debounce(onMessageListScroll, 100), ...restProps, children: (item) => {
+                        }, icon: unReadMessageCount === 0, children: [_jsx(Icon, { name: 'caret-down' }), unReadMessageCount > 0 && _jsxs(_Fragment, { children: ["\u00A0 ", t('new_messages')] })] })), _jsx(RepeatingView, { as: StyledMessageList, container: { direction: 'column' }, ref: conversationRef, rows: messages, onScroll: debounce(onMessageListScroll, 100), ...restProps, children: (item) => {
                             const { id, type, ...messageListItemRestProps } = item;
                             if (type === 'message') {
                                 return _jsx(Message, { ...messageListItemRestProps }, id);
@@ -117,7 +117,7 @@ const MessageList = forwardRef((props, ref) => {
                             if (type === 'typing') {
                                 return (_jsx(TypeIndicator, { ...messageListItemRestProps }, id));
                             }
-                        } }, void 0)] }, void 0), isScrolledToLatest() && _jsx(ScrollToLatest, { scrollContainerRef: conversationRef }, void 0)] }, void 0));
+                        } })] }), isScrolledToLatest() && _jsx(ScrollToLatest, { scrollContainerRef: conversationRef })] }));
 });
 export default MessageList;
 //# sourceMappingURL=MessageList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../../src/components/Chat/MessageList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  forwardRef,\n  Ref,\n  useImperativeHandle,\n  useRef,\n  useCallback,\n  useState,\n  useLayoutEffect,\n  RefObject\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledButton,\n  useI18n,\n  debounce,\n  defaultThemeProp,\n  ForwardProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport RepeatingView, {\n  RepeatingViewProps,\n  RepeatingViewRow,\n  StyledRepeatingView,\n  StyledRepeatingViewItem,\n  StyledRepeatingViewUL\n} from './RepeatingView';\nimport Message, { MessageProps } from './Message';\nimport SystemMessage, { SystemMessageProps } from './SystemMessage';\nimport TypeIndicator, { TypeIndicatorProps } from './TypeIndicator';\n\nregisterIcon(caretDownIcon);\n\nexport interface MessageListImperativeHandleProps {\n  isScrolledToLatest: () => boolean;\n  scrollToLatestMessage: () => void;\n  scrollToNewMessage: () => void;\n}\n\nexport type MessageListItemProps =\n  | (MessageProps & { type: 'message'; id: RepeatingViewRow['id'] })\n  | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] })\n  | (TypeIndicatorProps & { type: 'typing'; id: RepeatingViewRow['id'] });\n\nexport interface MessageListProps\n  extends OmitStrict<RepeatingViewProps, 'children' | 'rows' | 'ref'> {\n  /** Messages Data array */\n  messages: MessageListItemProps[];\n  /** ref to the message list */\n  ref?: Ref<MessageListImperativeHandleProps>;\n  /** Total unread messages */\n  unReadMessageCount?: number;\n  /** on scroll to button */\n  onScrollToButtonClick?: () => void;\n}\n\nconst StyledMessageList = styled.div``;\n\nexport const NewMessageSeparatorId = 'new-message-separator';\n\nconst StyledMessageListContainer = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { high: shadowHigh },\n        colors: { white }\n      }\n    }\n  } = props;\n  return css`\n    position: relative;\n    overflow-y: hidden;\n    > ${StyledMessageList} {\n      overflow-y: auto;\n    }\n    > ${StyledButton} {\n      position: absolute;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      box-shadow: ${shadowHigh};\n      z-index: 1;\n      background-color: ${white};\n    }\n    ${StyledRepeatingView} {\n      overflow-y: hidden;\n    }\n    ${StyledRepeatingViewUL} {\n      padding: 1rem;\n    }\n\n    ${StyledRepeatingViewItem} {\n      padding: 0.125rem 0;\n    }\n  `;\n});\n\nStyledMessageListContainer.defaultProps = defaultThemeProp;\n\nconst ScrollToLatest: FunctionComponent<{\n  scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n  const { scrollContainerRef } = props;\n  useLayoutEffect(() => {\n    if (scrollContainerRef.current) {\n      scrollContainerRef.current.scrollTop =\n        scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n    }\n  });\n  return <></>;\n};\n\nconst MessageList: FunctionComponent<MessageListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MessageListProps>, ref: MessageListProps['ref']) => {\n    const { messages, unReadMessageCount = 0, onScrollToButtonClick, ...restProps } = props;\n\n    const t = useI18n();\n\n    const conversationRef = useRef<HTMLUListElement>(null);\n\n    const isScrolledToLatest: MessageListImperativeHandleProps['isScrolledToLatest'] =\n      useCallback(() => {\n        return conversationRef.current\n          ? conversationRef.current.scrollHeight -\n              conversationRef.current.scrollTop -\n              conversationRef.current.offsetHeight <=\n              30\n          : true;\n      }, [conversationRef.current]);\n\n    const scrollToLatestMessage: MessageListImperativeHandleProps['scrollToLatestMessage'] =\n      useCallback(() => {\n        if (conversationRef.current) {\n          conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n        }\n      }, [conversationRef.current]);\n\n    const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);\n\n    const onMessageListScroll = useCallback(() => {\n      setDisplayScrollToLatest(!isScrolledToLatest());\n    }, [isScrolledToLatest()]);\n\n    const scrollToNewMessage: MessageListImperativeHandleProps['scrollToNewMessage'] =\n      useCallback(() => {\n        if (conversationRef.current) {\n          setDisplayScrollToLatest(false);\n          const newMessageIndicatorEle = conversationRef.current.querySelector<HTMLElement>(\n            '[data-new-message-separator]'\n          );\n          if (newMessageIndicatorEle) {\n            conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n          } else {\n            conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n          }\n        }\n      }, [conversationRef.current]);\n\n    useImperativeHandle<MessageListImperativeHandleProps, MessageListImperativeHandleProps>(\n      ref,\n      () => ({\n        isScrolledToLatest,\n        scrollToLatestMessage,\n        scrollToNewMessage\n      }),\n      [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]\n    );\n\n    return (\n      <>\n        <Flex\n          as={StyledMessageListContainer}\n          item={{\n            grow: 1\n          }}\n          container={{\n            direction: 'column'\n          }}\n          {...restProps}\n        >\n          {(unReadMessageCount > 0 || displayScrollLatest) && (\n            <Button\n              aria-label={\n                unReadMessageCount > 0\n                  ? t('scroll_to_unread_messages')\n                  : t('scroll_to_latest_message')\n              }\n              onClick={() => {\n                if (unReadMessageCount > 0) {\n                  scrollToNewMessage();\n                } else {\n                  scrollToLatestMessage();\n                }\n                onScrollToButtonClick?.();\n              }}\n              icon={unReadMessageCount === 0}\n            >\n              <Icon name='caret-down' />\n              {unReadMessageCount > 0 && <>&nbsp; {t('new_messages')}</>}\n            </Button>\n          )}\n          <RepeatingView\n            as={StyledMessageList}\n            container={{ direction: 'column' }}\n            ref={conversationRef}\n            rows={messages}\n            onScroll={debounce(onMessageListScroll, 100)}\n            {...restProps}\n          >\n            {(item: RepeatingViewRow) => {\n              const { id, type, ...messageListItemRestProps } = item as MessageListItemProps;\n              if (type === 'message') {\n                return <Message key={id} {...(messageListItemRestProps as MessageProps)} />;\n              }\n\n              if (type === 'system') {\n                const extraProps: Record<string, string> = {};\n                if (id === NewMessageSeparatorId) {\n                  extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n                }\n                return (\n                  <SystemMessage\n                    key={id}\n                    {...(messageListItemRestProps as SystemMessageProps)}\n                    {...extraProps}\n                  />\n                );\n              }\n              if (type === 'typing') {\n                return (\n                  <TypeIndicator key={id} {...(messageListItemRestProps as TypeIndicatorProps)} />\n                );\n              }\n            }}\n          </RepeatingView>\n        </Flex>\n        {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n      </>\n    );\n  }\n);\n\nexport default MessageList;\n"]}
+{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../../src/components/Chat/MessageList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  forwardRef,\n  Ref,\n  useImperativeHandle,\n  useRef,\n  useCallback,\n  useState,\n  useLayoutEffect,\n  RefObject\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  registerIcon,\n  StyledButton,\n  useI18n,\n  debounce,\n  defaultThemeProp,\n  ForwardProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport RepeatingView, {\n  RepeatingViewProps,\n  RepeatingViewRow,\n  StyledRepeatingView,\n  StyledRepeatingViewItem,\n  StyledRepeatingViewUL\n} from './RepeatingView';\nimport Message, { MessageProps } from './Message';\nimport SystemMessage, { SystemMessageProps } from './SystemMessage';\nimport TypeIndicator, { TypeIndicatorProps } from './TypeIndicator';\n\nregisterIcon(caretDownIcon);\n\nexport interface MessageListImperativeHandleProps {\n  isScrolledToLatest: () => boolean;\n  scrollToLatestMessage: () => void;\n  scrollToNewMessage: () => void;\n}\n\nexport type MessageListItemProps =\n  | (MessageProps & { type: 'message'; id: RepeatingViewRow['id'] })\n  | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] })\n  | (TypeIndicatorProps & { type: 'typing'; id: RepeatingViewRow['id'] });\n\nexport interface MessageListProps\n  extends OmitStrict<RepeatingViewProps, 'children' | 'rows' | 'ref'> {\n  /** Messages Data array */\n  messages: MessageListItemProps[];\n  /** ref to the message list */\n  ref?: Ref<MessageListImperativeHandleProps>;\n  /** Total unread messages */\n  unReadMessageCount?: number;\n  /** on scroll to button */\n  onScrollToButtonClick?: () => void;\n}\n\nconst StyledMessageList = styled.div``;\n\nexport const NewMessageSeparatorId = 'new-message-separator';\n\nconst StyledMessageListContainer = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { high: shadowHigh },\n        colors: { white }\n      }\n    }\n  } = props;\n  return css`\n    position: relative;\n    overflow-y: hidden;\n    > ${StyledMessageList} {\n      overflow-y: auto;\n    }\n    > ${StyledButton} {\n      position: absolute;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      box-shadow: ${shadowHigh};\n      z-index: 1;\n      background-color: ${white};\n    }\n    ${StyledRepeatingView} {\n      overflow-y: hidden;\n    }\n    ${StyledRepeatingViewUL} {\n      padding: 1rem;\n    }\n\n    ${StyledRepeatingViewItem} {\n      padding: 0.125rem 0;\n    }\n  `;\n});\n\nStyledMessageListContainer.defaultProps = defaultThemeProp;\n\nconst ScrollToLatest: FunctionComponent<{\n  scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n  const { scrollContainerRef } = props;\n  useLayoutEffect(() => {\n    if (scrollContainerRef.current) {\n      scrollContainerRef.current.scrollTop =\n        scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n    }\n  });\n  return <></>;\n};\n\nconst MessageList: FunctionComponent<MessageListProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<MessageListProps>, ref: MessageListProps['ref']) => {\n    const { messages, unReadMessageCount = 0, onScrollToButtonClick, ...restProps } = props;\n\n    const t = useI18n();\n\n    const conversationRef = useRef<HTMLUListElement>(null);\n\n    const isScrolledToLatest: MessageListImperativeHandleProps['isScrolledToLatest'] =\n      useCallback(() => {\n        return conversationRef.current\n          ? conversationRef.current.scrollHeight -\n              conversationRef.current.scrollTop -\n              conversationRef.current.offsetHeight <=\n              30\n          : true;\n      }, [conversationRef.current]);\n\n    const scrollToLatestMessage: MessageListImperativeHandleProps['scrollToLatestMessage'] =\n      useCallback(() => {\n        if (conversationRef.current) {\n          conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n        }\n      }, [conversationRef.current]);\n\n    const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);\n\n    const onMessageListScroll = useCallback(() => {\n      setDisplayScrollToLatest(!isScrolledToLatest());\n    }, [isScrolledToLatest()]);\n\n    const scrollToNewMessage: MessageListImperativeHandleProps['scrollToNewMessage'] =\n      useCallback(() => {\n        if (conversationRef.current) {\n          setDisplayScrollToLatest(false);\n          const newMessageIndicatorEle = conversationRef.current.querySelector<HTMLElement>(\n            '[data-new-message-separator]'\n          );\n          if (newMessageIndicatorEle) {\n            conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n          } else {\n            conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n          }\n        }\n      }, [conversationRef.current]);\n\n    useImperativeHandle<MessageListImperativeHandleProps, MessageListImperativeHandleProps>(\n      ref,\n      () => ({\n        isScrolledToLatest,\n        scrollToLatestMessage,\n        scrollToNewMessage\n      }),\n      [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]\n    );\n\n    return (\n      <>\n        <Flex\n          as={StyledMessageListContainer}\n          item={{\n            grow: 1\n          }}\n          container={{\n            direction: 'column'\n          }}\n          {...restProps}\n        >\n          {(unReadMessageCount > 0 || displayScrollLatest) && (\n            <Button\n              aria-label={\n                unReadMessageCount > 0\n                  ? t('scroll_to_unread_messages')\n                  : t('scroll_to_latest_message')\n              }\n              onClick={() => {\n                if (unReadMessageCount > 0) {\n                  scrollToNewMessage();\n                } else {\n                  scrollToLatestMessage();\n                }\n                onScrollToButtonClick?.();\n              }}\n              icon={unReadMessageCount === 0}\n            >\n              <Icon name='caret-down' />\n              {unReadMessageCount > 0 && <>&nbsp; {t('new_messages')}</>}\n            </Button>\n          )}\n          <RepeatingView\n            as={StyledMessageList}\n            container={{ direction: 'column' }}\n            ref={conversationRef}\n            rows={messages}\n            onScroll={debounce(onMessageListScroll, 100)}\n            {...restProps}\n          >\n            {(item: RepeatingViewRow) => {\n              const { id, type, ...messageListItemRestProps } = item as MessageListItemProps;\n              if (type === 'message') {\n                return <Message key={id} {...(messageListItemRestProps as MessageProps)} />;\n              }\n\n              if (type === 'system') {\n                const extraProps: Record<string, string> = {};\n                if (id === NewMessageSeparatorId) {\n                  extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n                }\n                return (\n                  <SystemMessage\n                    key={id}\n                    {...(messageListItemRestProps as SystemMessageProps)}\n                    {...extraProps}\n                  />\n                );\n              }\n              if (type === 'typing') {\n                return (\n                  <TypeIndicator key={id} {...(messageListItemRestProps as TypeIndicatorProps)} />\n                );\n              }\n            }}\n          </RepeatingView>\n        </Flex>\n        {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n      </>\n    );\n  }\n);\n\nexport default MessageList;\n"]}

package/lib/components/Chat/RepeatingView.js

@@ -41,7 +41,7 @@ const RepeatingView = forwardRef((props, ref) => {
                 }, as: StyledRepeatingViewUL, ref: listRef, children: [rows.map(row => {
                         const { ariaLabel, ...rowRestProps } = row;
                         return (_jsx(StyledRepeatingViewItem, { "aria-label": ariaLabel, tabIndex: 0, children: renderer(rowRestProps) }, row.id));
-                    }), isLoading && (_jsx(StyledRepeatingViewItem, { children: _jsx(Progress, { placement: 'inline' }, void 0) }, 'loader'))] }, void 0), !isLoading && rows.length === 0 && emptyView && (_jsx(StyledEmptyView, { children: emptyView }, void 0))] }, void 0));
+                    }), isLoading && (_jsx(StyledRepeatingViewItem, { children: _jsx(Progress, { placement: 'inline' }) }, 'loader'))] }), !isLoading && rows.length === 0 && emptyView && (_jsx(StyledEmptyView, { children: emptyView }))] }));
 });
 export default RepeatingView;
 //# sourceMappingURL=RepeatingView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RepeatingView.js","sourceRoot":"","sources":["../../../src/components/Chat/RepeatingView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsC,UAAU,EAAkB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAyBjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;oBAGQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAK7C,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMxC,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EACJ,QAAQ,EAAE,QAAQ,EAClB,MAAM,GAAG,CAAC,CAAC,EACX,QAAQ,EACR,OAAO,EAAE,SAAS,GAAG,KAAK,EAC1B,IAAI,GAAG,EAAE,EACT,SAAS,EACT,eAAe,GAAG,eAAe,EACjC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,mBAAmB,CACjB,OAAO,EACP,MAAM,EACN,GAAG,EAAE;QACH,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,EACD,aAAa,CACd,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;SAClB,EACD,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,mBAAmB,KACnB,SAAS,aAEb,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;oBACT,SAAS,EAAE,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;iBAC7E,EACD,EAAE,EAAE,qBAAqB,EACzB,GAAG,EAAE,OAAO,aAEX,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBACd,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,GAAG,GAAG,CAAC;wBAC3C,OAAO,CACL,KAAC,uBAAuB,kBAAa,SAAS,EAAE,QAAQ,EAAE,CAAC,YACxD,QAAQ,CAAC,YAAY,CAAC,IADyC,GAAG,CAAC,EAAE,CAE9C,CAC3B,CAAC;oBACJ,CAAC,CAAC,EACD,SAAS,IAAI,CACZ,KAAC,uBAAuB,cACtB,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,WAAG,IADJ,QAAQ,CAEX,CAC3B,YACI,EACN,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,IAAI,CAC/C,KAAC,eAAe,cAAE,SAAS,WAAmB,CAC/C,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Progress,\n  useItemIntersection,\n  useConsolidatedRef,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface RepeatingViewRow {\n  id: string | number;\n  ariaLabel?: string;\n}\n\nexport interface RepeatingViewProps {\n  /** ref to the list element */\n  ref?: Ref<HTMLUListElement>;\n  /** Callback to render the view */\n  children: (row: RepeatingViewRow) => ReactNode;\n  /** Data rows */\n  rows?: RepeatingViewRow[];\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n  /** Offset of the row item that need to trigger the load more callback */\n  offset?: number;\n  /** Callback to fetch more rows */\n  loadMore?: () => void;\n  /** UI that needs to be shown when list is empty */\n  emptyView?: ReactNode;\n  /** Scroll direction */\n  scrollDirection?: 'top-to-bottom' | 'bottom-to-top';\n}\nexport const StyledRepeatingViewItem = styled.li(({ theme }) => {\n  return css`\n    outline: none;\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\nStyledRepeatingViewItem.defaultProps = defaultThemeProp;\n\nexport const StyledRepeatingViewUL = styled.ul`\n  list-style-type: none;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n`;\n\nexport const StyledRepeatingView = styled.div`\n  position: relative;\n`;\n\nexport const StyledEmptyView = styled.div`\n  position: absolute;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n`;\n\nconst RepeatingView: FunctionComponent<RepeatingViewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RepeatingViewProps>, ref: RepeatingViewProps['ref']) => {\n    const {\n      children: renderer,\n      offset = -1,\n      loadMore,\n      loading: isLoading = false,\n      rows = [],\n      emptyView,\n      scrollDirection = 'top-to-bottom',\n      ...restProps\n    } = props;\n\n    const listRef = useConsolidatedRef(ref);\n    useItemIntersection(\n      listRef,\n      offset,\n      () => {\n        loadMore?.();\n      },\n      ':scope > li'\n    );\n\n    return (\n      <Flex\n        container={{\n          alignItems: 'center',\n          justify: 'center'\n        }}\n        tabindex={0}\n        as={StyledRepeatingView}\n        {...restProps}\n      >\n        <Flex\n          {...restProps}\n          container={{\n            direction: scrollDirection === 'top-to-bottom' ? 'column' : 'column-reverse'\n          }}\n          as={StyledRepeatingViewUL}\n          ref={listRef}\n        >\n          {rows.map(row => {\n            const { ariaLabel, ...rowRestProps } = row;\n            return (\n              <StyledRepeatingViewItem aria-label={ariaLabel} tabIndex={0} key={row.id}>\n                {renderer(rowRestProps)}\n              </StyledRepeatingViewItem>\n            );\n          })}\n          {isLoading && (\n            <StyledRepeatingViewItem key='loader'>\n              <Progress placement='inline' />\n            </StyledRepeatingViewItem>\n          )}\n        </Flex>\n        {!isLoading && rows.length === 0 && emptyView && (\n          <StyledEmptyView>{emptyView}</StyledEmptyView>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default RepeatingView;\n"]}
+{"version":3,"file":"RepeatingView.js","sourceRoot":"","sources":["../../../src/components/Chat/RepeatingView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsC,UAAU,EAAkB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAyBjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;oBAGQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAK7C,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMxC,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EACJ,QAAQ,EAAE,QAAQ,EAClB,MAAM,GAAG,CAAC,CAAC,EACX,QAAQ,EACR,OAAO,EAAE,SAAS,GAAG,KAAK,EAC1B,IAAI,GAAG,EAAE,EACT,SAAS,EACT,eAAe,GAAG,eAAe,EACjC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,mBAAmB,CACjB,OAAO,EACP,MAAM,EACN,GAAG,EAAE;QACH,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,EACD,aAAa,CACd,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;SAClB,EACD,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,mBAAmB,KACnB,SAAS,aAEb,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;oBACT,SAAS,EAAE,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;iBAC7E,EACD,EAAE,EAAE,qBAAqB,EACzB,GAAG,EAAE,OAAO,aAEX,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBACd,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,GAAG,GAAG,CAAC;wBAC3C,OAAO,CACL,KAAC,uBAAuB,kBAAa,SAAS,EAAE,QAAQ,EAAE,CAAC,YACxD,QAAQ,CAAC,YAAY,CAAC,IADyC,GAAG,CAAC,EAAE,CAE9C,CAC3B,CAAC;oBACJ,CAAC,CAAC,EACD,SAAS,IAAI,CACZ,KAAC,uBAAuB,cACtB,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,IADJ,QAAQ,CAEX,CAC3B,IACI,EACN,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,IAAI,CAC/C,KAAC,eAAe,cAAE,SAAS,GAAmB,CAC/C,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Progress,\n  useItemIntersection,\n  useConsolidatedRef,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface RepeatingViewRow {\n  id: string | number;\n  ariaLabel?: string;\n}\n\nexport interface RepeatingViewProps {\n  /** ref to the list element */\n  ref?: Ref<HTMLUListElement>;\n  /** Callback to render the view */\n  children: (row: RepeatingViewRow) => ReactNode;\n  /** Data rows */\n  rows?: RepeatingViewRow[];\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n  /** Offset of the row item that need to trigger the load more callback */\n  offset?: number;\n  /** Callback to fetch more rows */\n  loadMore?: () => void;\n  /** UI that needs to be shown when list is empty */\n  emptyView?: ReactNode;\n  /** Scroll direction */\n  scrollDirection?: 'top-to-bottom' | 'bottom-to-top';\n}\nexport const StyledRepeatingViewItem = styled.li(({ theme }) => {\n  return css`\n    outline: none;\n    &:focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\nStyledRepeatingViewItem.defaultProps = defaultThemeProp;\n\nexport const StyledRepeatingViewUL = styled.ul`\n  list-style-type: none;\n  overflow-y: auto;\n  height: 100%;\n  width: 100%;\n`;\n\nexport const StyledRepeatingView = styled.div`\n  position: relative;\n`;\n\nexport const StyledEmptyView = styled.div`\n  position: absolute;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n`;\n\nconst RepeatingView: FunctionComponent<RepeatingViewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RepeatingViewProps>, ref: RepeatingViewProps['ref']) => {\n    const {\n      children: renderer,\n      offset = -1,\n      loadMore,\n      loading: isLoading = false,\n      rows = [],\n      emptyView,\n      scrollDirection = 'top-to-bottom',\n      ...restProps\n    } = props;\n\n    const listRef = useConsolidatedRef(ref);\n    useItemIntersection(\n      listRef,\n      offset,\n      () => {\n        loadMore?.();\n      },\n      ':scope > li'\n    );\n\n    return (\n      <Flex\n        container={{\n          alignItems: 'center',\n          justify: 'center'\n        }}\n        tabindex={0}\n        as={StyledRepeatingView}\n        {...restProps}\n      >\n        <Flex\n          {...restProps}\n          container={{\n            direction: scrollDirection === 'top-to-bottom' ? 'column' : 'column-reverse'\n          }}\n          as={StyledRepeatingViewUL}\n          ref={listRef}\n        >\n          {rows.map(row => {\n            const { ariaLabel, ...rowRestProps } = row;\n            return (\n              <StyledRepeatingViewItem aria-label={ariaLabel} tabIndex={0} key={row.id}>\n                {renderer(rowRestProps)}\n              </StyledRepeatingViewItem>\n            );\n          })}\n          {isLoading && (\n            <StyledRepeatingViewItem key='loader'>\n              <Progress placement='inline' />\n            </StyledRepeatingViewItem>\n          )}\n        </Flex>\n        {!isLoading && rows.length === 0 && emptyView && (\n          <StyledEmptyView>{emptyView}</StyledEmptyView>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default RepeatingView;\n"]}

package/lib/components/Chat/SuggestedReplyPicker.js

@@ -40,13 +40,13 @@ const SuggestedReplyPicker = forwardRef((props, ref) => {
                 }, children: [_jsxs(Flex, { container: {
                             alignItems: 'center',
                             gap: 1
-                        }, children: [_jsx(Icon, { name: 'bulb-solid', as: StyledSuggestedReplyIcon }, void 0), currentReply && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'h3', children: t('suggested_replies_current_of_total', [
+                        }, children: [_jsx(Icon, { name: 'bulb-solid', as: StyledSuggestedReplyIcon }), currentReply && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'h3', children: t('suggested_replies_current_of_total', [
                                             replies.indexOf(currentReply) + 1,
                                             replies.length
-                                        ]) }, void 0), _jsx(Text, { variant: 'secondary', children: t('confidence_percentage', [currentReply.confidence]) }, void 0)] }, void 0))] }, void 0), _jsx(Button, { icon: true, variant: 'simple', onClick: onDismiss, "aria-label": t('dismiss_suggested_replies'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), _jsxs(Flex, { container: {
+                                        ]) }), _jsx(Text, { variant: 'secondary', children: t('confidence_percentage', [currentReply.confidence]) })] }))] }), _jsx(Button, { icon: true, variant: 'simple', onClick: onDismiss, "aria-label": t('dismiss_suggested_replies'), children: _jsx(Icon, { name: 'times' }) })] }), _jsxs(Flex, { container: {
                     direction: 'column',
                     gap: 1
-                }, as: StyledSuggestedReplyContent, children: [currentReply && _jsx("div", { children: currentReply.message }, void 0), _jsxs(Flex, { container: {
+                }, as: StyledSuggestedReplyContent, children: [currentReply && _jsx("div", { children: currentReply.message }), _jsxs(Flex, { container: {
                             justify: 'center'
                         }, children: [_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.indexOf(currentReply) === 0, onClick: () => {
                                     setCurrentReply(prevCurrentReply => {
@@ -58,11 +58,11 @@ const SuggestedReplyPicker = forwardRef((props, ref) => {
                                         }
                                         return null;
                                     });
-                                }, children: _jsx(Icon, { name: 'caret-left' }, void 0) }, void 0), _jsx(Button, { disabled: currentReply === null, onClick: () => {
+                                }, children: _jsx(Icon, { name: 'caret-left' }) }), _jsx(Button, { disabled: currentReply === null, onClick: () => {
                                     if (currentReply) {
                                         onSelect(currentReply);
                                     }
-                                }, children: t('use') }, void 0), _jsx(Button, { icon: true, "aria-label": t('next_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.indexOf(currentReply) === replies.length - 1, onClick: () => {
+                                }, children: t('use') }), _jsx(Button, { icon: true, "aria-label": t('next_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.indexOf(currentReply) === replies.length - 1, onClick: () => {
                                     setCurrentReply(prevCurrentReply => {
                                         if (prevCurrentReply) {
                                             const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);
@@ -72,7 +72,7 @@ const SuggestedReplyPicker = forwardRef((props, ref) => {
                                         }
                                         return null;
                                     });
-                                }, children: _jsx(Icon, { name: 'caret-right' }, void 0) }, void 0)] }, void 0)] }, void 0)] }, void 0));
+                                }, children: _jsx(Icon, { name: 'caret-right' }) })] })] })] }));
 });
 export default SuggestedReplyPicker;
 //# sourceMappingURL=SuggestedReplyPicker.js.map

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,WAAI,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,WACG,EACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YACtB,CAAC,CAAC,uBAAuB,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,WACjD,YACN,CACJ,YACI,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,WAAG,WACd,YACJ,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,WAAO,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,WAAG,WACnB,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,WACF,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,WAAG,WACpB,YACJ,YACF,YACuB,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, 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"]}

package/lib/components/Chat/SystemMessage.js

@@ -1,12 +1,12 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { rgba as polishedRgba } from 'polished';
+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(() => polishedRgba(foregroundColor, foregroundAlpha));
+        : tryCatch(() => rgba(foregroundColor, foregroundAlpha));
     return css `
       color: ${systemMessageForeGroundColor};
       font-size: 0.75rem;
@@ -34,7 +34,7 @@ const SystemMessage = forwardRef((props, ref) => {
             alignItems: 'center'
         }, item: {
             shrink: 0
-        }, variant: variant, ...restProps, children: [timeStamp && `${timeStamp}: `, " ", message] }, void 0));
+        }, variant: variant, ...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,IAAI,YAAY,EAAE,MAAM,UAAU,CAAC;AAEhD,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,YAAY,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IACrE,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,YACnC,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 as polishedRgba } 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(() => polishedRgba(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,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"]}

package/lib/components/Chat/TranscriptMessage.js

@@ -39,9 +39,9 @@ const TranscriptMessage = forwardRef((props, ref) => {
             alignItems: 'start'
         }, item: {
             shrink: 0
-        }, ref: ref, as: StyledTranscriptMessage, ...restProps, children: [_jsx(Text, { as: StyledTranscriptTimeStamp, variant: 'secondary', children: timeStamp }, void 0), avatarInfo ? (_jsx(Avatar, { name: avatarInfo.name, size: 's', shape: 'circle', imageSrc: avatarInfo.imageSrc }, void 0)) : (_jsx(Icon, { as: StyledTranscriptIcon, name: iconMapping[variant] }, void 0)), _jsxs(Flex, { item: {
+        }, ref: ref, as: StyledTranscriptMessage, ...restProps, children: [_jsx(Text, { as: StyledTranscriptTimeStamp, variant: 'secondary', children: timeStamp }), avatarInfo ? (_jsx(Avatar, { name: avatarInfo.name, size: 's', shape: 'circle', imageSrc: avatarInfo.imageSrc })) : (_jsx(Icon, { as: StyledTranscriptIcon, name: iconMapping[variant] })), _jsxs(Flex, { item: {
                     grow: 1
-                }, children: [transcriptHeader && transcriptHeader.content && (_jsxs(StyledTranscriptHeader, { children: [_jsx(StyledTranscriptHeaderContent, { children: transcriptHeader.content }, void 0), transcriptHeader.meta] }, void 0)), _jsx(EmojiDisplay, { content: message, size: 20 }, void 0)] }, void 0)] }, void 0));
+                }, children: [transcriptHeader && transcriptHeader.content && (_jsxs(StyledTranscriptHeader, { children: [_jsx(StyledTranscriptHeaderContent, { children: transcriptHeader.content }), transcriptHeader.meta] })), _jsx(EmojiDisplay, { content: message, size: 20 })] })] }));
 });
 export default TranscriptMessage;
 //# sourceMappingURL=TranscriptMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TranscriptMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/TranscriptMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EAEJ,MAAM,EACN,YAAY,EACZ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAwBjC,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,YAAY;IAClB,GAAG,EAAE,aAAa;IAClB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAEhD,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAA,EAAE,CAAC;AAE/C,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAEpD,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CACxC,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,UAAU,EAAE,EACV,OAAO,EAAE,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,EAC1D,EACF,EACF,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,oBAAoB;iBACX,mBAAmB;;;QAG5B,yBAAyB;;;QAGzB,sBAAsB;;;QAGtB,6BAA6B;;;KAGhC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CAAC,KAA8C,EAAE,GAAkC,EAAE,EAAE;IACrF,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1F,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;YACN,UAAU,EAAE,OAAO;SACpB,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,uBAAuB,KACvB,SAAS,aAEb,KAAC,IAAI,IAAC,EAAE,EAAE,yBAAyB,EAAE,OAAO,EAAC,WAAW,YACrD,SAAS,WACL,EACN,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,MAAM,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,UAAU,CAAC,QAAQ,WAAI,CACzF,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,WAAI,CAC/D,EACD,MAAC,IAAI,IACH,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;iBACR,aAEA,gBAAgB,IAAI,gBAAgB,CAAC,OAAO,IAAI,CAC/C,MAAC,sBAAsB,eACrB,KAAC,6BAA6B,cAC3B,gBAAgB,CAAC,OAAO,WACK,EAC/B,gBAAgB,CAAC,IAAI,YACC,CAC1B,EACD,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,WAAI,YACvC,YACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Text,\n  Icon,\n  AvatarProps,\n  Avatar,\n  EmojiDisplay,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport type TranscriptHeaderProps = {\n  /** transcript header content */\n  content?: ReactNode;\n  /** meta data */\n  meta?: ReactNode;\n};\n\nexport interface TranscriptMessageProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Timestamp */\n  timeStamp: string;\n  /** Transcript content */\n  message: ReactNode;\n  /** Variant of transcript item */\n  variant: 'user' | 'bot' | 'question';\n  /** Avatar information, can be image and name */\n  avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n  /** Transcript header */\n  transcriptHeader?: TranscriptHeaderProps;\n}\n\nconst iconMapping = {\n  user: 'user-solid',\n  bot: 'robot-solid',\n  question: 'help'\n};\n\nconst StyledTranscriptIcon = styled.svg``;\n\nconst StyledTranscriptTimeStamp = styled.span``;\n\nconst StyledTranscriptHeader = styled.header``;\n\nconst StyledTranscriptHeaderContent = styled.span``;\n\nconst StyledTranscriptMessage = styled.div(\n  ({\n    theme: {\n      components: {\n        chat: {\n          transcript: {\n            message: { 'icon-foreground-color': iconForegroundColor }\n          }\n        }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      line-height: 1rem;\n      padding: 0 0 0.25rem;\n      ${StyledTranscriptIcon} {\n        color: ${iconForegroundColor};\n        flex-shrink: 0;\n      }\n      ${StyledTranscriptTimeStamp} {\n        flex-shrink: 0;\n      }\n      ${StyledTranscriptHeader} {\n        margin-bottom: 0.25rem;\n      }\n      ${StyledTranscriptHeaderContent} {\n        margin-right: 0.5rem;\n      }\n    `;\n  }\n);\nStyledTranscriptMessage.defaultProps = defaultThemeProp;\n\nconst TranscriptMessage: FunctionComponent<TranscriptMessageProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TranscriptMessageProps>, ref: TranscriptMessageProps['ref']) => {\n    const { variant, transcriptHeader, message, timeStamp, avatarInfo, ...restProps } = props;\n\n    return (\n      <Flex\n        container={{\n          gap: 2,\n          alignItems: 'start'\n        }}\n        item={{\n          shrink: 0\n        }}\n        ref={ref}\n        as={StyledTranscriptMessage}\n        {...restProps}\n      >\n        <Text as={StyledTranscriptTimeStamp} variant='secondary'>\n          {timeStamp}\n        </Text>\n        {avatarInfo ? (\n          <Avatar name={avatarInfo.name} size='s' shape='circle' imageSrc={avatarInfo.imageSrc} />\n        ) : (\n          <Icon as={StyledTranscriptIcon} name={iconMapping[variant]} />\n        )}\n        <Flex\n          item={{\n            grow: 1\n          }}\n        >\n          {transcriptHeader && transcriptHeader.content && (\n            <StyledTranscriptHeader>\n              <StyledTranscriptHeaderContent>\n                {transcriptHeader.content}\n              </StyledTranscriptHeaderContent>\n              {transcriptHeader.meta}\n            </StyledTranscriptHeader>\n          )}\n          <EmojiDisplay content={message} size={20} />\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default TranscriptMessage;\n"]}
+{"version":3,"file":"TranscriptMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/TranscriptMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EAEJ,MAAM,EACN,YAAY,EACZ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAwBjC,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,YAAY;IAClB,GAAG,EAAE,aAAa;IAClB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAEhD,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAA,EAAE,CAAC;AAE/C,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAEpD,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CACxC,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,UAAU,EAAE,EACV,OAAO,EAAE,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,EAC1D,EACF,EACF,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,oBAAoB;iBACX,mBAAmB;;;QAG5B,yBAAyB;;;QAGzB,sBAAsB;;;QAGtB,6BAA6B;;;KAGhC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CAAC,KAA8C,EAAE,GAAkC,EAAE,EAAE;IACrF,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1F,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;YACN,UAAU,EAAE,OAAO;SACpB,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,uBAAuB,KACvB,SAAS,aAEb,KAAC,IAAI,IAAC,EAAE,EAAE,yBAAyB,EAAE,OAAO,EAAC,WAAW,YACrD,SAAS,GACL,EACN,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,MAAM,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,UAAU,CAAC,QAAQ,GAAI,CACzF,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,GAAI,CAC/D,EACD,MAAC,IAAI,IACH,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;iBACR,aAEA,gBAAgB,IAAI,gBAAgB,CAAC,OAAO,IAAI,CAC/C,MAAC,sBAAsB,eACrB,KAAC,6BAA6B,cAC3B,gBAAgB,CAAC,OAAO,GACK,EAC/B,gBAAgB,CAAC,IAAI,IACC,CAC1B,EACD,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,GAAI,IACvC,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Text,\n  Icon,\n  AvatarProps,\n  Avatar,\n  EmojiDisplay,\n  defaultThemeProp,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport type TranscriptHeaderProps = {\n  /** transcript header content */\n  content?: ReactNode;\n  /** meta data */\n  meta?: ReactNode;\n};\n\nexport interface TranscriptMessageProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Timestamp */\n  timeStamp: string;\n  /** Transcript content */\n  message: ReactNode;\n  /** Variant of transcript item */\n  variant: 'user' | 'bot' | 'question';\n  /** Avatar information, can be image and name */\n  avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n  /** Transcript header */\n  transcriptHeader?: TranscriptHeaderProps;\n}\n\nconst iconMapping = {\n  user: 'user-solid',\n  bot: 'robot-solid',\n  question: 'help'\n};\n\nconst StyledTranscriptIcon = styled.svg``;\n\nconst StyledTranscriptTimeStamp = styled.span``;\n\nconst StyledTranscriptHeader = styled.header``;\n\nconst StyledTranscriptHeaderContent = styled.span``;\n\nconst StyledTranscriptMessage = styled.div(\n  ({\n    theme: {\n      components: {\n        chat: {\n          transcript: {\n            message: { 'icon-foreground-color': iconForegroundColor }\n          }\n        }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      line-height: 1rem;\n      padding: 0 0 0.25rem;\n      ${StyledTranscriptIcon} {\n        color: ${iconForegroundColor};\n        flex-shrink: 0;\n      }\n      ${StyledTranscriptTimeStamp} {\n        flex-shrink: 0;\n      }\n      ${StyledTranscriptHeader} {\n        margin-bottom: 0.25rem;\n      }\n      ${StyledTranscriptHeaderContent} {\n        margin-right: 0.5rem;\n      }\n    `;\n  }\n);\nStyledTranscriptMessage.defaultProps = defaultThemeProp;\n\nconst TranscriptMessage: FunctionComponent<TranscriptMessageProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TranscriptMessageProps>, ref: TranscriptMessageProps['ref']) => {\n    const { variant, transcriptHeader, message, timeStamp, avatarInfo, ...restProps } = props;\n\n    return (\n      <Flex\n        container={{\n          gap: 2,\n          alignItems: 'start'\n        }}\n        item={{\n          shrink: 0\n        }}\n        ref={ref}\n        as={StyledTranscriptMessage}\n        {...restProps}\n      >\n        <Text as={StyledTranscriptTimeStamp} variant='secondary'>\n          {timeStamp}\n        </Text>\n        {avatarInfo ? (\n          <Avatar name={avatarInfo.name} size='s' shape='circle' imageSrc={avatarInfo.imageSrc} />\n        ) : (\n          <Icon as={StyledTranscriptIcon} name={iconMapping[variant]} />\n        )}\n        <Flex\n          item={{\n            grow: 1\n          }}\n        >\n          {transcriptHeader && transcriptHeader.content && (\n            <StyledTranscriptHeader>\n              <StyledTranscriptHeaderContent>\n                {transcriptHeader.content}\n              </StyledTranscriptHeaderContent>\n              {transcriptHeader.meta}\n            </StyledTranscriptHeader>\n          )}\n          <EmojiDisplay content={message} size={20} />\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default TranscriptMessage;\n"]}

package/lib/components/Chat/TypeIndicator.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 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 }, void 0));
+    return (_jsx(Message, { variant: 'receiver', direction: 'in', avatarInfo: avatarInfo, typing: true, ref: ref, message: message, ...restProps }));
 });
 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,WACb,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,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"]}

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

@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'react';
+import { ContextMenuPopoverProps } from './Email.types';
+declare const ContextMenuPopover: FunctionComponent<ContextMenuPopoverProps>;
+export default ContextMenuPopover;
+//# sourceMappingURL=ContextMenuPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuPopover.d.ts","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AASnF,OAAO,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAyElE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/Email/ContextMenuPopover.js

@@ -0,0 +1,50 @@
+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 t = useI18n();
+    const selection = document.getSelection();
+    if (selection && !selection.toString() && targetNode) {
+        const range = document.createRange();
+        range.selectNodeContents(targetNode);
+        selection?.removeAllRanges();
+        selection.addRange(range);
+    }
+    const { onItemClick, items } = contextMenu;
+    const onItemSelect = (contextMenuItemId, e) => {
+        e.stopPropagation();
+        const selectedcontextMenuItem = items.find(({ id }) => id === contextMenuItemId);
+        if (selectedcontextMenuItem && selection) {
+            onItemClick({
+                fieldName: selectedcontextMenuItem.primary,
+                fieldValue: selection.toString()
+            });
+            selection.removeAllRanges();
+        }
+    };
+    const itemsToRender = items.map(item => {
+        return {
+            ...item,
+            visual: item.selected ? (_jsx(StyledContextMenuFieldSelector, { selected: true })) : (_jsx(StyledContextMenuFieldSelector, {}))
+        };
+    });
+    return (_jsx(Popover, { as: StyledEmailMoreInfoPopover, target: {
+            getBoundingClientRect: () => {
+                const { x, y } = cursorPosition;
+                return {
+                    width: 0,
+                    height: 0,
+                    top: y,
+                    right: x,
+                    bottom: y,
+                    left: x,
+                    x,
+                    y,
+                    toJSON: () => { }
+                };
+            }
+        }, show: show, placement: 'bottom', ref: ref, children: _jsx(StyledContextMenu, { children: _jsx(Menu, { ...contextMenu, header: _jsx(Text, { variant: 'h5', children: t('copy_to') }), items: itemsToRender, onItemClick: onItemSelect }) }) }));
+});
+export default ContextMenuPopover;
+//# sourceMappingURL=ContextMenuPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuPopover.js","sourceRoot":"","sources":["../../../src/components/Email/ContextMenuPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiC,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EACL,0BAA0B,EAC1B,8BAA8B,EAC9B,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AAGxB,MAAM,kBAAkB,GAA+C,UAAU,CAC/E,CACE,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,IAAI,EAA4C,EAC3F,GAAmC,EACnC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,QAAQ,CAAC,YAAY,EAAE,CAAC;IAE1C,IAAI,SAAS,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,UAAU,EAAE;QACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QACrC,KAAK,CAAC,kBAAkB,CAAC,UAAkB,CAAC,CAAC;QAC7C,SAAS,EAAE,eAAe,EAAE,CAAC;QAC7B,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KAC3B;IACD,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC;IAC3C,MAAM,YAAY,GAAG,CAAC,iBAAyB,EAAE,CAAa,EAAE,EAAE;QAChE,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,uBAAuB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,iBAAiB,CAAC,CAAC;QAEjF,IAAI,uBAAuB,IAAI,SAAS,EAAE;YACxC,WAAW,CAAC;gBACV,SAAS,EAAE,uBAAuB,CAAC,OAAO;gBAC1C,UAAU,EAAE,SAAS,CAAC,QAAQ,EAAE;aACjC,CAAC,CAAC;YACH,SAAS,CAAC,eAAe,EAAE,CAAC;SAC7B;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACrC,OAAO;YACL,GAAG,IAAI;YACP,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACtB,KAAC,8BAA8B,IAAC,QAAQ,SAAG,CAC5C,CAAC,CAAC,CAAC,CACF,KAAC,8BAA8B,KAAG,CACnC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,OAAO,IACN,EAAE,EAAE,0BAA0B,EAC9B,MAAM,EAAE;YACN,qBAAqB,EAAE,GAAG,EAAE;gBAC1B,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,cAAc,CAAC;gBAChC,OAAO;oBACL,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,GAAG,EAAE,CAAC;oBACN,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,IAAI,EAAE,CAAC;oBACP,CAAC;oBACD,CAAC;oBACD,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC;iBACjB,CAAC;YACJ,CAAC;SACF,EACD,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE,GAAG,YAER,KAAC,iBAAiB,cAChB,KAAC,IAAI,OACC,WAAW,EACf,MAAM,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,SAAS,CAAC,GAAQ,EAChD,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,YAAY,GACzB,GACgB,GACZ,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","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    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        selection.removeAllRanges();\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,EAKlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAqBb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAa,UAAU,EAAE,MAAM,eAAe,CAAC;AA8CtD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAiVvD,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,EAwBb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAa,UAAU,EAAiC,MAAM,eAAe,CAAC;AA+CrF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAodvD,CAAC;AAEF,eAAe,KAAK,CAAC"}