@pega/cosmos-react-social 4.0.0-dev.2.0 → 4.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 } from 'polished';\n\nimport {\n  defaultThemeProp,\n  tryCatch,\n  Icon,\n  StyledText,\n  calculateFontSize\n} 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 StyledMediaLink = styled.a``;\n\nexport const StyledMediaButton = styled(BareButton)``;\n\nexport const StyledMessageMain = styled.div``;\n\nexport const StyledMessageBubble = styled.div``;\n\nexport const StyledMetaInfoContainer = styled.div``;\n\nexport const StyledMetaInfo = styled.span``;\n\nexport const StyledStatusInfo = styled.span``;\n\nexport const StyledTypingIndicator = styled.div``;\n\nexport const StyledMessageHeader = styled.header``;\nexport const StyledMessageHeaderContent = styled.div``;\nexport const StyledMessageHeaderMeta = styled.div``;\n\ninterface StyledMessageContainerProps {\n  variant: 'sender' | 'receiver' | 'other';\n  messageDirection: 'in' | 'out' | string;\n  typing: boolean;\n  hasMessage: boolean;\n  status: string;\n}\n\nexport const StyledMessageContainer = styled.div<StyledMessageContainerProps>(\n  ({\n    messageDirection,\n    variant,\n    hasMessage,\n    typing,\n    status,\n    theme,\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        'border-radius': borderRadius,\n        spacing,\n        palette: {\n          'foreground-color': foregroundColor,\n          'secondary-background': secondaryBackground,\n          urgent\n        },\n        transparency: { 'transparent-2': foregroundAlpha }\n      }\n    }\n  }) => {\n    const messageHeaderTheme = theme.components.chat.messageBubble[variant].header;\n    const messageContentTheme = theme.components.chat.messageBubble[variant].content;\n    const metaForegroundColor = tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n    const statusForegroundColor = status === 'undelivered' ? urgent : metaForegroundColor;\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n    return css`\n      ${messageDirection === 'out'\n        ? css`\n            padding-inline-start: calc(4 * ${spacing});\n          `\n        : css`\n            padding-inline-end: calc(4 * ${spacing});\n          `}\n      margin-block-end: ${typing ? spacing : '0'};\n      ${StyledMessageMain} {\n        max-width: 90%;\n      }\n      ${StyledMessageBubble} {\n        background: ${messageContentTheme['background-color']};\n        border-radius: calc(3 * ${borderRadius}) ${borderRadius} calc(3 * ${borderRadius})\n          calc(3 * ${borderRadius});\n        overflow: hidden;\n        color: ${messageContentTheme['foreground-color']};\n        display: inline-block;\n        width: auto;\n        margin-block-end: calc(0.5 * ${spacing});\n\n        label {\n          color: inherit;\n        }\n\n        ${messageDirection === 'in' &&\n        css`\n          border-radius: ${borderRadius} calc(3 * ${borderRadius}) calc(3 * ${borderRadius});\n        `}\n\n        > ${StyledMessageBubbleContent} {\n          padding: ${spacing} calc(2 * ${spacing});\n          word-break: break-word;\n          white-space: pre-wrap;\n          position: relative;\n        }\n\n        > ${StyledMediaList} {\n          color: ${messageContentTheme['foreground-color']};\n          max-width: 100%;\n\n          > ${StyledMediaListItem} {\n            position: relative;\n            ${StyledMediaThumbNail} {\n              max-height: 12rem;\n              width: 100%;\n              object-fit: contain;\n              background-color: ${secondaryBackground};\n            }\n            ${StyledSummaryItem} {\n              padding: ${spacing} calc(3 * ${spacing});\n              font-size: ${fontSizes.xxs};\n              margin-block-start: calc(0.5 * ${spacing});\n            }\n            ${StyledSummaryItem}::before {\n              content: '';\n              padding: ${spacing} 0;\n              border-top: 0.0625rem solid ${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            ${StyledText} {\n              color: ${foregroundColor};\n            }\n          }\n\n          ${!hasMessage &&\n          css`\n            > ${StyledMediaListItem}:first-child {\n              > ${StyledSummaryItem}::before {\n                border-top: none;\n              }\n            }\n          `}\n        }\n\n        ${StyledMessageHeader} {\n          padding: ${spacing} calc(2 * ${spacing});\n          color: ${messageHeaderTheme['foreground-color']};\n          background-color: ${messageHeaderTheme['background-color']};\n        }\n\n        ${StyledMessageHeaderContent} {\n          color: ${messageHeaderTheme['foreground-color']};\n          margin-inline-end: ${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 ${spacing};\n        ${StyledMetaInfo}, ${StyledStatusInfo} {\n          margin-block-end: ${spacing};\n          font-size: 0.7rem;\n          color: ${metaForegroundColor};\n        }\n        ${StyledStatusInfo} {\n          color: ${statusForegroundColor};\n        }\n      }\n      ${StyledTypingIndicator} {\n        width: 4.5rem;\n        position: relative;\n        height: 2rem;\n      }\n    `;\n  }\n);\nStyledMessageContainer.defaultProps = defaultThemeProp;\ninterface StyledBlinkingDotProps {\n  delay?: number;\n}\n\nexport const StyledBlinkingDot = styled.div<StyledBlinkingDotProps>(({ delay = 0, theme }) => {\n  return css`\n    @keyframes Blinking {\n      0% {\n        background: ${theme.base.colors.gray.medium};\n      }\n      100% {\n        background: ${theme.base.colors.gray['extra-light']};\n      }\n    }\n    animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;\n    background: ${theme.base.colors.gray['extra-light']};\n    border-radius: 50%;\n    animation-delay: ${delay}s;\n    height: 0.4rem;\n    width: 0.4rem;\n  `;\n});\nStyledBlinkingDot.defaultProps = defaultThemeProp;\n\nexport const StyledUndeliveredIcon = styled(Icon)(\n  ({\n    theme: {\n      base: {\n        palette: { urgent }\n      }\n    }\n  }) => {\n    return css`\n      flex-shrink: 0;\n      color: ${urgent};\n    `;\n  }\n);\n\nStyledUndeliveredIcon.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, DefaultTheme } from 'styled-components';\nimport { readableColor, rgba, transparentize } from 'polished';\n\nimport {\n  defaultThemeProp,\n  tryCatch,\n  Icon,\n  StyledIcon,\n  StyledText,\n  calculateFontSize\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { MessageProps } from './Chat.types';\n\nexport const StyledMessageBubbleContent = styled.div``;\n\nexport const StyledMediaList = styled.ul``;\n\nexport const StyledMediaListItem = styled.li``;\n\nexport const StyledSummaryItem = styled.div``;\n\nexport const StyledMediaThumbNail = styled.img``;\n\nexport const StyledMediaLink = styled.a``;\n\nexport const StyledMediaButton = styled(BareButton)``;\n\nexport const StyledMessageMain = styled.div``;\n\nexport const StyledMessageBubble = styled.div``;\n\nexport const StyledMetaInfoContainer = styled.div``;\n\nexport const StyledMetaInfo = styled.span``;\n\nexport const StyledStatusInfo = styled.span``;\n\nexport const StyledTypingIndicator = styled.div``;\n\nexport const StyledMessageHeader = styled.header``;\nexport const StyledMessageHeaderContent = styled.div``;\nexport const StyledMessageHeaderMeta = styled.div``;\n\nexport const StyledHeadsetIconBackground = styled.div``;\ninterface StyledMessageContainerProps {\n  senderType: 'customer' | 'agent' | 'bot';\n  direction: 'in' | 'out';\n  typing: boolean;\n  hasMessage: boolean;\n  status: string;\n  agentVariant: number;\n}\n\nexport const StyledHeadset = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n\n    ${StyledHeadsetIconBackground} {\n      position: relative;\n      inset-block-start: calc(-5.25 * ${theme.base.spacing});\n      inset-inline-start: calc(2 * ${theme.base.spacing});\n      height: 1.375rem;\n      width: 1.375rem;\n      background: ${theme.base.palette['primary-background']};\n      border-radius: calc(\n        (${theme.base['border-radius']}) * (${theme.components.button['border-radius']})\n      );\n\n      ${StyledIcon} {\n        position: absolute;\n        width: 2.875rem;\n        height: 0.875rem;\n        inset-inline-start: calc(-1.5 * ${theme.base.spacing});\n        inset-block-start: calc(0.5 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledHeadset.defaultProps = defaultThemeProp;\n\nexport interface MessageBubbleColor {\n  header: string;\n  content: string;\n}\n\nexport const getMessageColors: (\n  theme: DefaultTheme,\n  direction: MessageProps['direction'],\n  senderType: MessageProps['senderType'],\n  agentVariant: MessageProps['agentVariant']\n) => MessageBubbleColor = (theme, direction, senderType, agentVariant = 0) => {\n  const { slate, blue, purple, orange, green, black } = theme.base.colors;\n  const agentMessageColors = [\n    purple['extra-light'],\n    orange['extra-light'],\n    '#C5D1DD',\n    green['extra-light'],\n    '#BBEAEA'\n  ];\n  const outMessageColor = blue.medium;\n  const customerMessageColor = '#E6EEFA';\n  const botMessageColor = slate['extra-dark'];\n\n  if (direction === 'in') {\n    const messageColors: MessageBubbleColor = {\n      header: orange.medium,\n      content: ''\n    };\n    if (senderType === 'agent') {\n      messageColors.content = agentMessageColors[agentVariant % agentMessageColors.length];\n    } else if (senderType === 'bot') {\n      messageColors.content = botMessageColor;\n    } else if (senderType === 'customer') {\n      messageColors.content = customerMessageColor;\n    }\n    return messageColors;\n  }\n  return {\n    header: black,\n    content: outMessageColor\n  };\n};\n\nexport const StyledMessageContainer = styled.li<StyledMessageContainerProps>(\n  ({\n    direction,\n    senderType,\n    hasMessage,\n    typing,\n    status,\n    agentVariant,\n    theme,\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        'border-radius': borderRadius,\n        spacing,\n        palette: {\n          'foreground-color': foregroundColor,\n          'secondary-background': secondaryBackground,\n          urgent\n        },\n        transparency: { 'transparent-2': foregroundAlpha }\n      }\n    }\n  }) => {\n    const { header, content } = getMessageColors(theme, direction, senderType, agentVariant);\n    const metaForegroundColor = tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n    const statusForegroundColor = status === 'undeliverable' ? urgent : metaForegroundColor;\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n    const contrastContentColor = readableColor(content);\n    const contrastHeaderColor = readableColor(header);\n    return css`\n      ${direction === 'out'\n        ? css`\n            padding-inline-start: calc(4 * ${spacing});\n          `\n        : css`\n            padding-inline-end: calc(4 * ${spacing});\n          `}\n      margin-block-end: ${typing ? spacing : '0'};\n\n      :first-child {\n        margin-block-start: ${spacing};\n      }\n\n      ${StyledMessageMain} {\n        max-width: 90%;\n      }\n      ${StyledMessageBubble} {\n        background: ${content};\n        border-radius: calc(3 * ${borderRadius}) ${borderRadius} calc(3 * ${borderRadius})\n          calc(3 * ${borderRadius});\n        overflow: hidden;\n        color: ${contrastContentColor};\n        display: inline-block;\n        width: auto;\n        margin-block-end: calc(0.5 * ${spacing});\n\n        label {\n          color: inherit;\n        }\n\n        ${direction === 'in' &&\n        css`\n          border-radius: ${borderRadius} calc(3 * ${borderRadius}) calc(3 * ${borderRadius});\n        `}\n\n        > ${StyledMessageBubbleContent} {\n          padding: ${spacing} calc(2 * ${spacing});\n          word-break: break-word;\n          white-space: pre-wrap;\n          position: relative;\n        }\n\n        > ${StyledMediaList} {\n          color: ${contrastContentColor};\n          max-width: 100%;\n\n          > ${StyledMediaListItem} {\n            position: relative;\n            ${StyledMediaThumbNail} {\n              max-height: 12rem;\n              width: 100%;\n              object-fit: contain;\n              background-color: ${secondaryBackground};\n            }\n            ${StyledSummaryItem} {\n              padding: ${spacing} calc(3 * ${spacing});\n              font-size: ${fontSizes.xxs};\n              margin-block-start: calc(0.5 * ${spacing});\n            }\n            ${StyledSummaryItem}::before {\n              content: '';\n              padding: ${spacing} 0;\n              border-top: 0.0625rem solid ${contrastContentColor};\n              position: absolute;\n              width: calc(100% - 2rem);\n              left: 1rem;\n              top: 0;\n            }\n            ${StyledMediaThumbNail} + ${StyledSummaryItem}::before {\n              content: none;\n            }\n            svg {\n              font-size: 1.6rem;\n            }\n            ${StyledText} {\n              color: ${foregroundColor};\n            }\n          }\n\n          ${!hasMessage &&\n          css`\n            > ${StyledMediaListItem}:first-child {\n              > ${StyledSummaryItem}::before {\n                border-top: none;\n              }\n            }\n          `}\n        }\n\n        ${StyledMessageHeader} {\n          padding: ${spacing} calc(2 * ${spacing});\n          color: ${contrastHeaderColor};\n          border-block-end: 0.0625rem solid ${transparentize(0.5, theme.base.colors.white)};\n        }\n\n        ${StyledMessageHeaderContent} {\n          color: ${contrastHeaderColor};\n          margin-inline-end: ${spacing};\n        }\n        ${StyledMessageHeaderMeta} {\n          > a {\n            color: ${contrastHeaderColor};\n          }\n        }\n\n        ${StyledMediaLink}, ${StyledMediaButton} {\n          color: ${contrastContentColor};\n          font-size: inherit;\n          text-decoration: none;\n          font-weight: 700;\n          overflow-x: hidden;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          display: inline-block;\n          max-width: 100%;\n          &:hover {\n            color: ${contrastContentColor};\n            text-decoration: underline;\n          }\n          &:visited {\n            color: ${contrastContentColor};\n          }\n          &:focus {\n            box-shadow: ${theme.base.shadow.focus};\n          }\n        }\n      }\n\n      ${StyledMetaInfoContainer} {\n        width: 100%;\n        padding: 0 ${spacing};\n        ${StyledMetaInfo}, ${StyledStatusInfo} {\n          margin-block-end: ${spacing};\n          font-size: 0.7rem;\n          color: ${metaForegroundColor};\n        }\n        ${StyledStatusInfo} {\n          color: ${statusForegroundColor};\n        }\n      }\n      ${StyledTypingIndicator} {\n        width: 4.5rem;\n        position: relative;\n        height: 2rem;\n      }\n    `;\n  }\n);\nStyledMessageContainer.defaultProps = defaultThemeProp;\ninterface StyledBlinkingDotProps {\n  delay?: number;\n}\n\nexport const StyledBlinkingDot = styled.div<StyledBlinkingDotProps>(({ delay = 0, theme }) => {\n  return css`\n    @keyframes Blinking {\n      0% {\n        background: ${theme.base.colors.gray.medium};\n      }\n      100% {\n        background: ${theme.base.colors.gray['extra-light']};\n      }\n    }\n    animation: Blinking calc(4 * ${theme.base.animation.speed}) infinite;\n    background: ${theme.base.colors.gray['extra-light']};\n    border-radius: 50%;\n    animation-delay: ${delay}s;\n    height: 0.4rem;\n    width: 0.4rem;\n  `;\n});\nStyledBlinkingDot.defaultProps = defaultThemeProp;\n\nexport const StyledUndeliveredIcon = styled(Icon)(\n  ({\n    theme: {\n      base: {\n        palette: { urgent }\n      }\n    }\n  }) => {\n    return css`\n      color: ${urgent};\n    `;\n  }\n);\n\nStyledUndeliveredIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFlagIcon = styled(Icon)(({ theme }) => {\n  return css`\n    position: relative;\n    inset-block-start: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledFlagIcon.defaultProps = defaultThemeProp;\n"]}

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

@@ -2,7 +2,12 @@ import { FunctionComponent, Ref } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
 export declare const StyledSuggestedReplyHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSuggestedReplyContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSuggestedReplyIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledReply: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledRepliesAction: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNotification: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSuggestedReplyIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
+    suggestedReplyCollapsed?: boolean | undefined;
+}, never>;
 export interface SuggestedReply {
     /** Id for this suggested reply */
     id: string;
@@ -16,10 +21,20 @@ export interface SuggestedReplyPickerProps {
     ref?: Ref<HTMLDivElement>;
     /** Suggested replies */
     replies?: SuggestedReply[];
+    /** Id of the current reply */
+    currentReplyId?: SuggestedReply['id'];
+    /** Fired when user clicks on left or right buttons
+     *  @param id Id of the new reply
+     */
+    onReplyChange: (id: SuggestedReply['id']) => void;
+    /** Current state of the panel */
+    collapsed: boolean;
+    /** Callback for expand or collapse click */
+    onExpandCollapse: () => void;
     /** Callback for the event when a suggested reply is selected */
     onSelect: (suggestedReply: SuggestedReply) => void;
-    /** Callback for the event close button is clicked */
-    onDismiss: () => void;
+    /** Show notification on picker header */
+    showNotification?: boolean;
 }
 declare const SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps>;
 export default SuggestedReplyPicker;

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

@@ -1 +1 @@
-{"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAuB,MAAM,OAAO,CAAC;AAGjG,OAAO,EAQL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAOjC,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,wBAAwB,yGAAe,CAAC;AAsBrD,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,qDAAqD;IACrD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAsHnF,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAa,MAAM,OAAO,CAAC;AAGvF,OAAO,EAQL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAQjC,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,WAAW,yGAAe,CAAC;AACxC,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAChD,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAI/C,eAAO,MAAM,wBAAwB;;SAqBpC,CAAC;AAoCF,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CA4KnF,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}

package/lib/components/Chat/SuggestedReplyPicker.js

@@ -1,78 +1,117 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Icon, registerIcon, Button, Text, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Flex, Icon, registerIcon, Button, Text, useI18n, defaultThemeProp, useLiveLog, ExpandCollapse, Alert, useDirection, EmptyState } from '@pega/cosmos-react-core';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
 import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
+import { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';
 registerIcon(timesIcon, caretLeftIcon, caretRightIcon);
 export const StyledSuggestedReplyHeader = styled.div ``;
 export const StyledSuggestedReplyContent = styled.div ``;
-export const StyledSuggestedReplyIcon = styled.svg ``;
+export const StyledReply = styled.div ``;
+export const StyledRepliesAction = styled.div ``;
+export const StyledNotification = styled.div ``;
+const maxNumOfLines = 5;
+const minNumOfLines = 2;
+export const StyledSuggestedReplyIcon = styled.svg(({ suggestedReplyCollapsed, theme }) => {
+    const { rtl } = useDirection();
+    const { base: { animation: { speed, timing: { ease } } } } = theme;
+    return css `
+      transition-property: transform;
+      transition-duration: ${speed};
+      transition-timing-function: ${ease};
+      ${suggestedReplyCollapsed &&
+        css `
+        transform: rotateZ(${rtl ? '0deg' : '-90deg'});
+      `}
+    `;
+});
+StyledSuggestedReplyIcon.defaultProps = defaultThemeProp;
 const StyledSuggestedReplyContainer = styled.div(props => {
     const { theme } = props;
     return css `
     border-top: 0.0625rem solid ${theme.base.palette['border-line']};
     background-color: ${theme.base.palette['primary-background']};
+
     > ${StyledSuggestedReplyHeader} {
-      ${StyledSuggestedReplyIcon} {
-        font-size: 1.2rem;
-      }
-      padding: 0.5rem;
+      padding: ${theme.base.spacing};
       border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
     }
-    > ${StyledSuggestedReplyContent} {
-      padding: 1rem;
+
+    ${StyledAlert} {
+      position: relative;
+      inset-block-start: calc(-0.25 * ${theme.base.spacing});
+      inset-inline-start: calc(-0.5 * ${theme.base.spacing});
+    }
+
+    ${StyledSuggestedReplyContent} {
+      padding: calc(2 * ${theme.base.spacing});
+      position: relative;
+
+      > ${StyledReply} {
+        overflow-y: auto;
+        max-height: calc(2.5 * ${theme.base.spacing} * ${maxNumOfLines});
+        min-height: calc(2.5 * ${theme.base.spacing} * ${minNumOfLines});
+      }
     }
   `;
 });
 StyledSuggestedReplyContainer.defaultProps = defaultThemeProp;
 const SuggestedReplyPicker = forwardRef((props, ref) => {
-    const { replies = [], onSelect, onDismiss, ...restProps } = props;
-    const [currentReply, setCurrentReply] = useState(null);
-    useEffect(() => {
-        setCurrentReply(replies.length > 0 ? replies[0] : null);
-    }, [replies]);
+    const { replies = [], collapsed, onExpandCollapse, showNotification, onSelect, currentReplyId, onReplyChange, ...restProps } = props;
+    const { announcePolite } = useLiveLog();
     const t = useI18n();
-    return (_jsxs(StyledSuggestedReplyContainer, { ref: ref, ...restProps, children: [_jsxs(Flex, { as: StyledSuggestedReplyHeader, container: {
+    const { rtl, ltr } = useDirection();
+    // Allows suggested replies to cycle
+    const onSuggestedReplyChange = (mode) => {
+        const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);
+        let newReplyIndex = mode === 'prev' ? currentReplyIndex - 1 : currentReplyIndex + 1;
+        newReplyIndex = (newReplyIndex + replies.length) % replies.length;
+        onReplyChange(replies[newReplyIndex].id);
+    };
+    // SR announcement when current reply changes
+    useEffect(() => {
+        if (!replies || replies.length === 0 || !currentReplyId) {
+            return;
+        }
+        const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);
+        announcePolite({
+            message: `${t('suggested_replies_current_of_total', [
+                currentReplyIndex + 1,
+                replies.length
+            ])},
+           ${t('confidence_percentage', [replies[currentReplyIndex]?.confidence])},${replies[currentReplyIndex]?.message}`,
+            type: 'acknowledgement'
+        });
+    }, [currentReplyId]);
+    return (_jsxs(StyledSuggestedReplyContainer, { ref: ref, ...restProps, children: [_jsx(Flex, { as: StyledSuggestedReplyHeader, container: {
                     justify: 'between',
                     alignContent: 'center'
-                }, children: [_jsxs(Flex, { container: {
-                            alignItems: 'center',
-                            gap: 1
-                        }, 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,
+                }, children: _jsxs(Flex, { container: {
+                        alignItems: 'center',
+                        gap: 1
+                    }, children: [ltr && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(Icon, { name: 'caret-down', suggestedReplyCollapsed: collapsed, as: StyledSuggestedReplyIcon }) })), _jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(Text, { variant: 'h3', children: t('suggested_replies') }), collapsed && showNotification && _jsx(Alert, { variant: 'urgent' })] }), rtl && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(Icon, { name: 'caret-down', suggestedReplyCollapsed: collapsed, as: StyledSuggestedReplyIcon }) }))] }) }), _jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true, children: _jsxs(Flex, { container: {
+                        direction: 'column',
+                        gap: 1
+                    }, as: StyledSuggestedReplyContent, children: [currentReplyId && replies.length ? (_jsx(Flex, { container: true, as: StyledReply, children: replies.find(reply => reply.id === currentReplyId)?.message })) : (_jsx(EmptyState, {})), _jsxs(Flex, { container: {
+                                justify: 'center'
+                            }, as: StyledRepliesAction, children: [replies.length > 1 && (_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReplyId === undefined || replies.length <= 1, onClick: () => {
+                                        onSuggestedReplyChange('prev');
+                                    }, children: _jsx(Icon, { name: 'caret-left' }) })), _jsx(Button, { disabled: currentReplyId === undefined || !replies || replies.length === 0, onClick: () => {
+                                        const selectedReply = replies.find(reply => reply.id === currentReplyId);
+                                        if (selectedReply)
+                                            onSelect(selectedReply);
+                                    }, "aria-label": replies.length > 0 && currentReplyId
+                                        ? t('use_current_template', [
+                                            replies.length > 0 && currentReplyId
+                                                ? replies.findIndex(reply => reply.id === currentReplyId) + 1
+                                                : 0,
                                             replies.length
-                                        ]) }), _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 }), _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 => {
-                                        if (prevCurrentReply) {
-                                            const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);
-                                            if (prevCurrentReplyIndex - 1 >= 0 && replies.length > 0) {
-                                                return replies[prevCurrentReplyIndex - 1];
-                                            }
-                                        }
-                                        return null;
-                                    });
-                                }, children: _jsx(Icon, { name: 'caret-left' }) }), _jsx(Button, { disabled: currentReply === null, onClick: () => {
-                                    if (currentReply) {
-                                        onSelect(currentReply);
-                                    }
-                                }, 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);
-                                            if (prevCurrentReplyIndex + 1 <= replies.length) {
-                                                return replies[prevCurrentReplyIndex + 1];
-                                            }
-                                        }
-                                        return null;
-                                    });
-                                }, children: _jsx(Icon, { name: 'caret-right' }) })] })] })] }));
+                                        ])
+                                        : '', children: t('use') }), replies.length > 1 && (_jsx(Button, { icon: true, "aria-label": t('next_suggested_reply'), variant: 'simple', onClick: () => {
+                                        onSuggestedReplyChange('next');
+                                    }, disabled: currentReplyId === undefined || replies.length <= 1, 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":"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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"]}
+{"version":3,"file":"SuggestedReplyPicker.js","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Icon,\n  registerIcon,\n  Button,\n  Text,\n  useI18n,\n  defaultThemeProp,\n  ForwardProps,\n  useLiveLog,\n  ExpandCollapse,\n  Alert,\n  useDirection,\n  EmptyState\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\n\nregisterIcon(timesIcon, caretLeftIcon, caretRightIcon);\n\nexport const StyledSuggestedReplyHeader = styled.div``;\nexport const StyledSuggestedReplyContent = styled.div``;\nexport const StyledReply = styled.div``;\nexport const StyledRepliesAction = styled.div``;\nexport const StyledNotification = styled.div``;\nconst maxNumOfLines = 5;\nconst minNumOfLines = 2;\n\nexport const StyledSuggestedReplyIcon = styled.svg<{ suggestedReplyCollapsed?: boolean }>(\n  ({ suggestedReplyCollapsed, theme }) => {\n    const { rtl } = useDirection();\n    const {\n      base: {\n        animation: {\n          speed,\n          timing: { ease }\n        }\n      }\n    } = theme;\n    return css`\n      transition-property: transform;\n      transition-duration: ${speed};\n      transition-timing-function: ${ease};\n      ${suggestedReplyCollapsed &&\n      css`\n        transform: rotateZ(${rtl ? '0deg' : '-90deg'});\n      `}\n    `;\n  }\n);\n\nStyledSuggestedReplyIcon.defaultProps = defaultThemeProp;\n\nconst StyledSuggestedReplyContainer = styled.div(props => {\n  const { theme } = props;\n  return css`\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    background-color: ${theme.base.palette['primary-background']};\n\n    > ${StyledSuggestedReplyHeader} {\n      padding: ${theme.base.spacing};\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    ${StyledAlert} {\n      position: relative;\n      inset-block-start: calc(-0.25 * ${theme.base.spacing});\n      inset-inline-start: calc(-0.5 * ${theme.base.spacing});\n    }\n\n    ${StyledSuggestedReplyContent} {\n      padding: calc(2 * ${theme.base.spacing});\n      position: relative;\n\n      > ${StyledReply} {\n        overflow-y: auto;\n        max-height: calc(2.5 * ${theme.base.spacing} * ${maxNumOfLines});\n        min-height: calc(2.5 * ${theme.base.spacing} * ${minNumOfLines});\n      }\n    }\n  `;\n});\n\nStyledSuggestedReplyContainer.defaultProps = defaultThemeProp;\n\nexport interface SuggestedReply {\n  /** Id for this suggested reply */\n  id: string;\n  /** Suggested reply message */\n  message: string;\n  /** Confidence of this suggested reply */\n  confidence: number;\n}\n\nexport interface SuggestedReplyPickerProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Suggested replies */\n  replies?: SuggestedReply[];\n  /** Id of the current reply */\n  currentReplyId?: SuggestedReply['id'];\n  /** Fired when user clicks on left or right buttons\n   *  @param id Id of the new reply\n   */\n  onReplyChange: (id: SuggestedReply['id']) => void;\n  /** Current state of the panel */\n  collapsed: boolean;\n  /** Callback for expand or collapse click */\n  onExpandCollapse: () => void;\n  /** Callback for the event when a suggested reply is selected */\n  onSelect: (suggestedReply: SuggestedReply) => void;\n  /** Show notification on picker header */\n  showNotification?: boolean;\n}\n\nconst SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps> =\n  forwardRef(\n    (props: PropsWithoutRef<SuggestedReplyPickerProps>, ref: SuggestedReplyPickerProps['ref']) => {\n      const {\n        replies = [],\n        collapsed,\n        onExpandCollapse,\n        showNotification,\n        onSelect,\n        currentReplyId,\n        onReplyChange,\n        ...restProps\n      } = props;\n      const { announcePolite } = useLiveLog();\n      const t = useI18n();\n      const { rtl, ltr } = useDirection();\n\n      // Allows suggested replies to cycle\n      const onSuggestedReplyChange = (mode: 'prev' | 'next') => {\n        const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);\n        let newReplyIndex = mode === 'prev' ? currentReplyIndex - 1 : currentReplyIndex + 1;\n        newReplyIndex = (newReplyIndex + replies.length) % replies.length;\n        onReplyChange(replies[newReplyIndex].id);\n      };\n\n      // SR announcement when current reply changes\n      useEffect(() => {\n        if (!replies || replies.length === 0 || !currentReplyId) {\n          return;\n        }\n        const currentReplyIndex = replies.findIndex(reply => reply.id === currentReplyId);\n        announcePolite({\n          message: `${t('suggested_replies_current_of_total', [\n            currentReplyIndex + 1,\n            replies.length\n          ])},\n           ${t('confidence_percentage', [replies[currentReplyIndex]?.confidence])},${\n            replies[currentReplyIndex]?.message\n          }`,\n          type: 'acknowledgement'\n        });\n      }, [currentReplyId]);\n\n      return (\n        <StyledSuggestedReplyContainer ref={ref} {...restProps}>\n          <Flex\n            as={StyledSuggestedReplyHeader}\n            container={{\n              justify: 'between',\n              alignContent: 'center'\n            }}\n          >\n            <Flex\n              container={{\n                alignItems: 'center',\n                gap: 1\n              }}\n            >\n              {ltr && (\n                <Button\n                  variant='simple'\n                  label={collapsed ? t('expand') : t('collapse')}\n                  aria-label={t(\n                    collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n                  )}\n                  icon\n                  onClick={onExpandCollapse}\n                >\n                  <Icon\n                    name='caret-down'\n                    suggestedReplyCollapsed={collapsed}\n                    as={StyledSuggestedReplyIcon}\n                  />\n                </Button>\n              )}\n\n              <Flex container={{ gap: 0.5 }}>\n                <Text variant='h3'>{t('suggested_replies')}</Text>\n                {collapsed && showNotification && <Alert variant='urgent' />}\n              </Flex>\n\n              {rtl && (\n                <Button\n                  variant='simple'\n                  label={collapsed ? t('expand') : t('collapse')}\n                  aria-label={t(\n                    collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n                  )}\n                  icon\n                  onClick={onExpandCollapse}\n                >\n                  <Icon\n                    name='caret-down'\n                    suggestedReplyCollapsed={collapsed}\n                    as={StyledSuggestedReplyIcon}\n                  />\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n          <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n            <Flex\n              container={{\n                direction: 'column',\n                gap: 1\n              }}\n              as={StyledSuggestedReplyContent}\n            >\n              {currentReplyId && replies.length ? (\n                <Flex container as={StyledReply}>\n                  {replies.find(reply => reply.id === currentReplyId)?.message}\n                </Flex>\n              ) : (\n                <EmptyState />\n              )}\n              <Flex\n                container={{\n                  justify: 'center'\n                }}\n                as={StyledRepliesAction}\n              >\n                {replies.length > 1 && (\n                  <Button\n                    icon\n                    aria-label={t('prev_suggested_reply')}\n                    variant='simple'\n                    disabled={currentReplyId === undefined || replies.length <= 1}\n                    onClick={() => {\n                      onSuggestedReplyChange('prev');\n                    }}\n                  >\n                    <Icon name='caret-left' />\n                  </Button>\n                )}\n                <Button\n                  disabled={currentReplyId === undefined || !replies || replies.length === 0}\n                  onClick={() => {\n                    const selectedReply = replies.find(reply => reply.id === currentReplyId);\n                    if (selectedReply) onSelect(selectedReply);\n                  }}\n                  aria-label={\n                    replies.length > 0 && currentReplyId\n                      ? t('use_current_template', [\n                          replies.length > 0 && currentReplyId\n                            ? replies.findIndex(reply => reply.id === currentReplyId) + 1\n                            : 0,\n                          replies.length\n                        ])\n                      : ''\n                  }\n                >\n                  {t('use')}\n                </Button>\n                {replies.length > 1 && (\n                  <Button\n                    icon\n                    aria-label={t('next_suggested_reply')}\n                    variant='simple'\n                    onClick={() => {\n                      onSuggestedReplyChange('next');\n                    }}\n                    disabled={currentReplyId === undefined || replies.length <= 1}\n                  >\n                    <Icon name='caret-right' />\n                  </Button>\n                )}\n              </Flex>\n            </Flex>\n          </ExpandCollapse>\n        </StyledSuggestedReplyContainer>\n      );\n    }\n  );\n\nexport default SuggestedReplyPicker;\n"]}

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

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

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

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

package/lib/components/Chat/SystemMessage.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmC,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAiBjC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,YAAY,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EACnD,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,aAAa,EAAE,EACb,MAAM,EAAE,EACN,OAAO,EAAE,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,EAC3D,EACF,EACF,EACF,EACF,EACD,OAAO,EACR,EAAE,EAAE;IACH,MAAM,4BAA4B,GAChC,OAAO,KAAK,SAAS;QACnB,CAAC,CAAC,yBAAyB;QAC3B,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAC7D,OAAO,GAAG,CAAA;eACC,4BAA4B;;;;;;;sCAOL,4BAA4B;;;;;;;;;;KAU7D,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,GAAG,WAAW,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1E,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;SACrB,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,OAAO,EAAE,OAAO,KACZ,SAAS,aAEZ,SAAS,IAAI,GAAG,SAAS,IAAI,OAAG,OAAO,IACnC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n  Flex,\n  tryCatch,\n  defaultThemeProp,\n  ForwardProps,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nexport interface SystemMessageProps {\n  /** Ref to the container element */\n  ref?: Ref<HTMLDivElement>;\n  /** System message to be displayed */\n  message: ReactNode;\n  /** timestamp of the message(Formatted) */\n  timeStamp?: string;\n  /** variant of this system message\n   * @default \"secondary\"\n   */\n  variant?: 'primary' | 'secondary';\n}\n\ntype SystemMessagePropsWithDefaults = PropsWithDefaults<SystemMessageProps, 'variant'>;\n\nexport const StyledSystemMessage = styled.div<Pick<SystemMessagePropsWithDefaults, 'variant'>>(\n  ({\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor },\n        transparency: { 'transparent-3': foregroundAlpha }\n      },\n      components: {\n        chat: {\n          messageBubble: {\n            sender: {\n              content: { 'background-color': primarySystemMessageColor }\n            }\n          }\n        }\n      }\n    },\n    variant\n  }) => {\n    const systemMessageForeGroundColor =\n      variant === 'primary'\n        ? primarySystemMessageColor\n        : tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n    return css`\n      color: ${systemMessageForeGroundColor};\n      font-size: 0.75rem;\n      padding: 0 0 0.5rem;\n      ::before,\n      ::after {\n        display: inline-flex;\n        content: '';\n        border-top: 0.0625rem solid ${systemMessageForeGroundColor};\n        flex-grow: 1;\n        min-width: 1.5rem;\n      }\n      ::before {\n        margin: 0 0.5rem 0 0;\n      }\n      ::after {\n        margin: 0 0 0 0.5rem;\n      }\n    `;\n  }\n);\n\nStyledSystemMessage.defaultProps = defaultThemeProp;\n\nconst SystemMessage: FunctionComponent<SystemMessageProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SystemMessageProps>, ref: SystemMessageProps['ref']) => {\n    const { message, timeStamp, variant = 'secondary', ...restProps } = props;\n    return (\n      <Flex\n        ref={ref}\n        as={StyledSystemMessage}\n        container={{\n          alignItems: 'center'\n        }}\n        item={{\n          shrink: 0\n        }}\n        variant={variant}\n        {...restProps}\n      >\n        {timeStamp && `${timeStamp}: `} {message}\n      </Flex>\n    );\n  }\n);\n\nexport default SystemMessage;\n"]}
+{"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AACvE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAGhB,OAAO,EACR,MAAM,yBAAyB,CAAC;AAMjC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,YAAY,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAClD,MAAM,EAAE,EACN,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,OAAO,EACR,EACF,EACD,OAAO,EACR,EAAE,EAAE;IACH,MAAM,4BAA4B,GAChC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAC1F,OAAO,GAAG,CAAA;eACC,4BAA4B;;8BAEb,OAAO;;;;;QAK7B,OAAO,KAAK,SAAS;QACvB,GAAG,CAAA;;;;;;;wCAO+B,4BAA4B;;;;;+BAKrC,OAAO;;;iCAGL,OAAO;;OAEjC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,GAAG,WAAW,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GACb,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,2BAA2B,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEhG,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;SAClB,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,OAAO,EAAE,OAAO,gBACJ,SAAS,KACjB,SAAS,aAEZ,SAAS,IAAI,GAAG,SAAS,IAAI,OAAG,OAAO,IACnC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport {\n  Flex,\n  tryCatch,\n  defaultThemeProp,\n  ForwardProps,\n  PropsWithDefaults,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport { SystemMessageProps } from './Chat.types';\n\ntype SystemMessagePropsWithDefaults = PropsWithDefaults<SystemMessageProps, 'variant'>;\n\nexport const StyledSystemMessage = styled.li<Pick<SystemMessagePropsWithDefaults, 'variant'>>(\n  ({\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor },\n        transparency: { 'transparent-3': foregroundAlpha },\n        colors: {\n          blue: { medium }\n        },\n        spacing\n      }\n    },\n    variant\n  }) => {\n    const systemMessageForeGroundColor =\n      variant === 'primary' ? medium : tryCatch(() => rgba(foregroundColor, foregroundAlpha));\n    return css`\n      color: ${systemMessageForeGroundColor};\n      font-size: 0.75rem;\n      padding: 0 0 calc(2 * ${spacing});\n\n      :last-child {\n        padding: 0;\n      }\n      ${variant === 'primary' &&\n      css`\n        text-transform: uppercase;\n        font-weight: bold;\n        ::before,\n        ::after {\n          display: inline-flex;\n          content: '';\n          border-top: 0.0625rem solid ${systemMessageForeGroundColor};\n          flex-grow: 1;\n          min-width: 1.5rem;\n        }\n        ::before {\n          margin-inline-end: ${spacing};\n        }\n        ::after {\n          margin-inline-start: ${spacing};\n        }\n      `}\n    `;\n  }\n);\n\nStyledSystemMessage.defaultProps = defaultThemeProp;\n\nconst SystemMessage: FunctionComponent<SystemMessageProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SystemMessageProps>, ref: SystemMessageProps['ref']) => {\n    const { message, timestamp, variant = 'secondary', ...restProps } = props;\n    const t = useI18n();\n\n    const ariaLabel =\n      timestamp === undefined ? `${message}` : t('chat_message_at_timestamp', [message, timestamp]);\n\n    return (\n      <Flex\n        ref={ref}\n        as={StyledSystemMessage}\n        container={{\n          alignItems: 'center',\n          justify: 'center'\n        }}\n        item={{\n          shrink: 0\n        }}\n        variant={variant}\n        aria-label={ariaLabel}\n        {...restProps}\n      >\n        {timestamp && `${timestamp}: `} {message}\n      </Flex>\n    );\n  }\n);\n\nexport default SystemMessage;\n"]}

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

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

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

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

package/lib/components/Chat/TypeIndicator.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { useI18n } from '@pega/cosmos-react-core';
 import Message from './Message';
 const TypeIndicator = forwardRef((props, ref) => {
-    const { avatarInfo, message, ...restProps } = props;
-    return (_jsx(Message, { variant: 'receiver', direction: 'in', avatarInfo: avatarInfo, typing: true, ref: ref, message: message, ...restProps }));
+    const { avatarInfo, message, senderId, senderType, agentVariant, ...restProps } = props;
+    const t = useI18n();
+    const ariaLabel = t('is_typing', [avatarInfo.name, message || '']);
+    return (_jsx(Message, { ...restProps, senderType: senderType, senderId: senderId, direction: 'in', avatarInfo: avatarInfo, agentVariant: agentVariant, typing: true, ref: ref, message: message, "aria-label": ariaLabel }));
 });
 export default TypeIndicator;
 //# sourceMappingURL=TypeIndicator.js.map

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

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

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

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

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

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

package/lib/components/Chat/index.js

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