@pega/cosmos-react-social 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Message.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/D,OAAO,EACL,gBAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,UAAU,EACV,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAIlF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEvD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAA,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEhD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAE5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA,EAAE,CAAC;AACnD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAUxD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;;MAGN,2BAA2B;;wCAEO,KAAK,CAAC,IAAI,CAAC,OAAO;qCACrB,KAAK,CAAC,IAAI,CAAC,OAAO;;;oBAGnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;WAEjD,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,eAAe,CAAC;;;QAG9E,UAAU;;;;0CAIwB,KAAK,CAAC,IAAI,CAAC,OAAO;wCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAGvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAO9C,MAAM,CAAC,MAAM,gBAAgB,GAKH,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,GAAG,CAAC,EAAE,EAAE;IAC3E,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;IACxE,MAAM,kBAAkB,GAAG;QACzB,MAAM,CAAC,aAAa,CAAC;QACrB,MAAM,CAAC,aAAa,CAAC;QACrB,SAAS;QACT,KAAK,CAAC,aAAa,CAAC;QACpB,SAAS;KACV,CAAC;IACF,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC;IACpC,MAAM,oBAAoB,GAAG,SAAS,CAAC;IACvC,MAAM,eAAe,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;IAE5C,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,aAAa,GAAuB;YACxC,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,IAAI,UAAU,KAAK,OAAO,EAAE;YAC1B,aAAa,CAAC,OAAO,GAAG,kBAAkB,CAAC,YAAY,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;SACtF;aAAM,IAAI,UAAU,KAAK,KAAK,EAAE;YAC/B,aAAa,CAAC,OAAO,GAAG,eAAe,CAAC;SACzC;aAAM,IAAI,UAAU,KAAK,UAAU,EAAE;YACpC,aAAa,CAAC,OAAO,GAAG,oBAAoB,CAAC;SAC9C;QACD,OAAO,aAAa,CAAC;KACtB;IACD,OAAO;QACL,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,eAAe;KACzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,EAAE,CAC7C,CAAC,EACC,SAAS,EACT,UAAU,EACV,UAAU,EACV,MAAM,EACN,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,eAAe,EAAE,YAAY,EAC7B,OAAO,EACP,OAAO,EAAE,EACP,kBAAkB,EAAE,eAAe,EACnC,sBAAsB,EAAE,mBAAmB,EAC3C,MAAM,EACP,EACD,YAAY,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EACnD,EACF,EACF,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;IACzF,MAAM,mBAAmB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IACnF,MAAM,qBAAqB,GAAG,MAAM,KAAK,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC;IACxF,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,oBAAoB,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACpD,MAAM,mBAAmB,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAClD,OAAO,GAAG,CAAA;QACN,SAAS,KAAK,KAAK;QACnB,CAAC,CAAC,GAAG,CAAA;6CACgC,OAAO;WACzC;QACH,CAAC,CAAC,GAAG,CAAA;2CAC8B,OAAO;WACvC;0BACe,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;;;8BAGlB,OAAO;;;QAG7B,iBAAiB;;;QAGjB,mBAAmB;sBACL,OAAO;kCACK,YAAY,KAAK,YAAY,aAAa,YAAY;qBACnE,YAAY;;iBAEhB,oBAAoB;;;uCAGE,OAAO;;;;;;UAMpC,SAAS,KAAK,IAAI;QACpB,GAAG,CAAA;2BACgB,YAAY,aAAa,YAAY,cAAc,YAAY;SACjF;;YAEG,0BAA0B;qBACjB,OAAO,aAAa,OAAO;;;;;;YAMpC,eAAe;mBACR,oBAAoB;;;cAGzB,mBAAmB;;cAEnB,oBAAoB;;;;kCAIA,mBAAmB;;cAEvC,iBAAiB;yBACN,OAAO,aAAa,OAAO;2BACzB,SAAS,CAAC,GAAG;+CACO,OAAO;;cAExC,iBAAiB;;yBAEN,OAAO;4CACY,oBAAoB;;;;;;cAMlD,oBAAoB,MAAM,iBAAiB;;;;;;cAM3C,UAAU;uBACD,eAAe;;;;YAI1B,CAAC,UAAU;QACb,GAAG,CAAA;gBACG,mBAAmB;kBACjB,iBAAiB;;;;WAIxB;;;UAGD,mBAAmB;qBACR,OAAO,aAAa,OAAO;mBAC7B,mBAAmB;8CACQ,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;;;UAGhF,0BAA0B;mBACjB,mBAAmB;+BACP,OAAO;;UAE5B,uBAAuB;;qBAEZ,mBAAmB;;;;UAI9B,eAAe,KAAK,iBAAiB;mBAC5B,oBAAoB;;;;;;;;;;;qBAWlB,oBAAoB;;;;qBAIpB,oBAAoB;;;0BAGf,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;QAKzC,uBAAuB;;qBAEV,OAAO;UAClB,cAAc,KAAK,gBAAgB;8BACf,OAAO;;mBAElB,mBAAmB;;UAE5B,gBAAgB;mBACP,qBAAqB;;;QAGhC,qBAAqB;;;;;KAKxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAKvD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3F,OAAO,GAAG,CAAA;;;sBAGU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;;;sBAG7B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;mCAGxB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;kBAC3C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;uBAEhC,KAAK;;;GAGzB,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC/C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,MAAM,EAAE,EACpB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;eACC,MAAM;KAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;oCAEwB,KAAK,CAAC,IAAI,CAAC,OAAO;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css, 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

@@ -0,0 +1,42 @@
+import { FunctionComponent, Ref } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { ChatComposerProps } from './ChatComposer';
+export declare const StyledSuggestedReplyHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSuggestedReplyContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+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<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {
+    suggestedReplyCollapsed?: boolean | undefined;
+}, never>;
+export interface SuggestedReply {
+    /** Id for this suggested reply */
+    id: string;
+    /** Suggested reply message */
+    message: string;
+    /** Confidence of this suggested reply */
+    confidence: number;
+}
+export interface SuggestedReplyPickerProps extends Pick<ChatComposerProps, 'onSend' | 'maxLength' | 'disabled'> {
+    /** ref to the element */
+    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;
+    /** Show notification on picker header */
+    showNotification?: boolean;
+}
+declare const SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps>;
+export default SuggestedReplyPicker;
+//# sourceMappingURL=SuggestedReplyPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"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;AAMjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAInD,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,WAAW,yGAAe,CAAC;AACxC,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAChD,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAI/C,eAAO,MAAM,wBAAwB;;SAqBpC,CAAC;AAoCF,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;IACpE,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAiNlF,CAAC;AAEL,eAAe,oBAAoB,CAAC"}

package/lib/components/Chat/SuggestedReplyPicker.js

@@ -0,0 +1,143 @@
+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, 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 StyledReply = styled.div ``;
+export const StyledRepliesAction = styled.div ``;
+export const StyledNotification = styled.div ``;
+const maxNumOfLines = 5;
+const minNumOfLines = 2;
+export const StyledSuggestedReplyIcon = styled(Icon)(({ 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} {
+      padding: ${theme.base.spacing};
+      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+    }
+
+    ${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(function SuggestedReplyPicker(props, ref) {
+    const { replies = [], collapsed, onExpandCollapse, showNotification, onSelect, currentReplyId, onReplyChange, onSend, maxLength = 256, disabled = false, ...restProps } = props;
+    const { announcePolite } = useLiveLog();
+    const t = useI18n();
+    const { rtl, ltr } = useDirection();
+    // 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]);
+    const onEditAnnouncement = () => {
+        announcePolite({
+            message: t('suggested_reply_copied_to_input_field'),
+            type: 'acknowledgement'
+        });
+    };
+    return (_jsxs(StyledSuggestedReplyContainer, { ref: ref, ...restProps, children: [_jsx(Flex, { as: StyledSuggestedReplyHeader, container: {
+                    justify: 'between',
+                    alignContent: 'center'
+                }, children: _jsxs(Flex, { container: {
+                        alignItems: 'center',
+                        gap: 1
+                    }, children: [ltr && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(StyledSuggestedReplyIcon, { name: 'caret-down', suggestedReplyCollapsed: collapsed }) })), _jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(Text, { variant: 'h3', children: t('suggested_replies') }), collapsed && showNotification && _jsx(Alert, { variant: 'urgent' })] }), rtl && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(StyledSuggestedReplyIcon, { name: 'caret-down', suggestedReplyCollapsed: collapsed }) }))] }) }), _jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true, children: _jsxs(Flex, { container: {
+                        direction: 'column',
+                        gap: 1
+                    }, as: StyledSuggestedReplyContent, children: [currentReplyId && replies.length ? (_jsx(Flex, { container: true, as: StyledReply, children: replies.find(reply => reply.id === currentReplyId)?.message })) : (_jsx(EmptyState, { message: t('no_suggestion') })), _jsxs(Flex, { container: {
+                                justify: 'center'
+                            }, as: StyledRepliesAction, children: [replies.length > 1 && (_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReplyId === undefined || replies.length <= 1, onClick: () => {
+                                        onSuggestedReplyChange('prev');
+                                    }, children: _jsx(Icon, { name: 'caret-left' }) })), _jsx(Button, { disabled: disabled || currentReplyId === undefined || !replies || replies.length === 0, onClick: () => {
+                                        const selectedReply = replies.find(reply => reply.id === currentReplyId);
+                                        if (selectedReply) {
+                                            onSelect(selectedReply);
+                                            onExpandCollapse();
+                                            onEditAnnouncement();
+                                        }
+                                    }, "aria-label": replies.length > 0 && currentReplyId
+                                        ? t('edit_current_template', [
+                                            replies.length > 0 && currentReplyId
+                                                ? replies.findIndex(reply => reply.id === currentReplyId) + 1
+                                                : 0,
+                                            replies.length
+                                        ])
+                                        : undefined, children: t('edit') }), _jsx(Button, { disabled: disabled ||
+                                        currentReplyId === undefined ||
+                                        !replies ||
+                                        replies.length === 0 ||
+                                        (!!maxLength && replies.length > maxLength), onClick: () => {
+                                        const selectedReply = replies.find(reply => reply.id === currentReplyId);
+                                        if (selectedReply) {
+                                            onSend(selectedReply.message);
+                                            onExpandCollapse();
+                                        }
+                                    }, "aria-label": replies.length > 0 && currentReplyId
+                                        ? t('send_current_template', [
+                                            replies.length > 0 && currentReplyId
+                                                ? replies.findIndex(reply => reply.id === currentReplyId) + 1
+                                                : 0,
+                                            replies.length
+                                        ])
+                                        : undefined, children: t('send') }), 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

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

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

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps, PropsWithDefaults } from '@pega/cosmos-react-core';
+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

@@ -0,0 +1 @@
+{"version":3,"file":"SystemMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAIvE,OAAO,EAIL,YAAY,EACZ,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,KAAK,8BAA8B,GAAG,iBAAiB,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;AAEvF,eAAO,MAAM,mBAAmB,qJA6C/B,CAAC;AAIF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA8BvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Chat/SystemMessage.js

@@ -0,0 +1,50 @@
+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, 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 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(function SystemMessage(props, ref) {
+    const { message, timestamp, variant = 'secondary', ...restProps } = props;
+    const t = useI18n();
+    const ariaLabel = timestamp === undefined ? `${message}` : t('chat_message_at_timestamp', [message, timestamp]);
+    return (_jsxs(Flex, { ref: ref, as: StyledSystemMessage, container: {
+            alignItems: 'center',
+            justify: 'center'
+        }, item: {
+            shrink: 0
+        }, variant: variant, "aria-label": ariaLabel, ...restProps, children: [timestamp && `${timestamp}: `, " ", message] }));
+});
+export default SystemMessage;
+//# sourceMappingURL=SystemMessage.js.map

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

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

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"TypeIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Chat/TypeIndicator.js

@@ -0,0 +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(function TypeIndicator(props, ref) {
+    const { avatarInfo, message, senderId, senderType, agentVariant, ...restProps } = props;
+    const t = useI18n();
+    const ariaLabel = t('is_typing', [avatarInfo.name, message || '']);
+    return (_jsx(Message, { ...restProps, senderType: senderType, senderId: senderId, direction: 'in', avatarInfo: avatarInfo, agentVariant: agentVariant, typing: true, ref: ref, message: message, "aria-label": ariaLabel }));
+});
+export default TypeIndicator;
+//# sourceMappingURL=TypeIndicator.js.map