@pega/cosmos-react-work 9.9.0 → 9.10.1

package/lib/components/GenAICoach/GenAICoach.styles.js

@@ -1,4 +1,4 @@
-import styled, { createGlobalStyle, css } from 'styled-components';
+import styled, { createGlobalStyle, css, keyframes } from 'styled-components';
 import { useContext } from 'react';
 import { mix, darken, meetsContrastGuidelines, transparentize } from 'polished';
 import { AppShellContext, Button, FileList, Flex, FormControl, Icon, Image, MenuButton, InfoDialog, StyledEmptyState, StyledErrorState, StyledIcon, StyledText, SummaryItem, Text, TextArea, calculateFontSize, calculateForegroundColor, defaultThemeProp, isSolidColor, tryCatch, Avatar, Fullscreen, animations, Modal, StyledIconShape } from '@pega/cosmos-react-core';
@@ -18,7 +18,6 @@ import { StepMarker, StyledStepText } from '@pega/cosmos-react-core/lib/componen
 import { StyledResizeHandle } from '@pega/cosmos-react-core/lib/components/Drawer/ResizeHandle';
 import { StyledStages } from '../Stages/Stages.styles';
 import { isInUtilities } from './GenAICoach.utils';
-const maxWidthMessage = '62.5rem';
 export const StyledComposerSection = styled.div ``;
 export const StyledGenAIFormControl = styled(FormControl)(({ theme, focused }) => {
     return css `
@@ -84,7 +83,14 @@ StyledMessagesContainer.defaultProps = defaultThemeProp;
 export const StyledFullscreenWrapper = styled(Fullscreen) `
   height: 100%;
 `;
-export const StyledGenAICoachContainer = styled.div(({ theme: { base: { palette, 'z-index': zIndex, spacing, breakpoints, animation, 'border-radius': baseBorderRadius }, components: { card: { 'border-radius': cardBorderRadius }, agent: { background: agentBackground, 'foreground-color': agentForegroundColor }, 'form-control': { 'border-radius': formControlBorderRadius } } }, variant, fullScreen, isCompact, isPortalAgent }) => {
+export const StyledHeaderContainer = styled(Flex)(({ theme }) => {
+    return css `
+    border-block-end: 0.0625rem solid
+      ${transparentize(0.88, theme.components.agent['foreground-color'])};
+  `;
+});
+StyledHeaderContainer.defaultProps = defaultThemeProp;
+export const StyledGenAICoachContainer = styled.div(({ theme: { base: { palette, 'z-index': zIndex, spacing, breakpoints, animation, 'border-radius': baseBorderRadius }, components: { card: { 'border-radius': cardBorderRadius }, agent: { background: agentBackground, 'foreground-color': agentForegroundColor }, 'form-control': { 'border-radius': formControlBorderRadius } } }, variant, fullScreen, isCompact, isPortalAgent, simplifiedAgent }) => {
     const { previewActive } = useContext(AppShellContext);
     const foregroundColorForAgent = calculateForegroundColor(agentBackground, agentForegroundColor);
     return css `
@@ -93,6 +99,14 @@ export const StyledGenAICoachContainer = styled.div(({ theme: { base: { palette,
       min-width: var(--utilities-drawer-min-width);
       border-radius: ${cardBorderRadius};
       transition: height ${animation.speed} ${animation.timing.ease};
+      ${simplifiedAgent
+        ? css `
+            --message-container-width: 40rem;
+            --messages-list-margin-start: 0;
+          `
+        : css `
+            --message-container-width: 62.5rem;
+          `}
 
       ${variant.placement === 'dialog' &&
         css `
@@ -140,13 +154,22 @@ export const StyledGenAICoachContainer = styled.div(({ theme: { base: { palette,
 
       ${variant.placement === 'fullpage' &&
         css `
-        height: var(--content-height-in-view, 100vh);
+        ${simplifiedAgent
+            ? css `
+              transition: height 0.6s cubic-bezier(0.4, 0, 0.6, 1);
+              height: var(--content-height-in-agent, var(--content-height-in-view, 100vh));
+            `
+            : css `
+              height: var(--content-height-in-view, 100vh);
+            `}
       `}
 
       ${isCompact &&
         css `
-        height: 100%;
-        max-height: var(--content-height-in-view, 100vh);
+        height: ${simplifiedAgent ? 'var(--compact-height, auto)' : '100%'};
+        max-height: ${simplifiedAgent
+            ? 'var(--content-height-in-agent, var(--content-height-in-view, 100vh))'
+            : 'var(--content-height-in-view, 100vh)'};
 
         ${StyledMessagesContainer} {
           margin-block-end: 0;
@@ -164,10 +187,16 @@ export const StyledGenAICoachContainer = styled.div(({ theme: { base: { palette,
         height: calc(100vh - var(--appshell-offset, 0vh));
         border-radius: 0;
       `}
+
+      ${StyledErrorState} {
+        ${StyledText} {
+          color: ${agentForegroundColor};
+        }
+      }
     `;
 });
 StyledGenAICoachContainer.defaultProps = defaultThemeProp;
-export const StyledGenAIOptionsMenu = styled(MenuButton)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, 'font-weight': fontWeight, palette: { ai } } } }) => {
+export const StyledGenAIOptionsMenu = styled(MenuButton)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, 'font-weight': fontWeight }, components: { agent: { ai } } } }) => {
     const { l } = calculateFontSize(fontSize, fontScale);
     return css `
     color: inherit;
@@ -213,11 +242,17 @@ export const StyledDisclaimerText = styled(Text)(({ inFullPage, theme: { base: {
   `;
 });
 StyledDisclaimerText.defaultProps = defaultThemeProp;
-export const StyledFlexWrapper = styled.div `
-  height: 100%;
-  overflow-y: auto;
-  position: relative;
-`;
+export const StyledFlexWrapper = styled.div(({ isExpanded }) => css `
+    height: ${isExpanded ? 'auto' : '100%'};
+    overflow-y: auto;
+    position: relative;
+
+    ${isExpanded &&
+    css `
+      flex: 1 1 0;
+      min-height: 0;
+    `}
+  `);
 StyledFlexWrapper.defaultProps = defaultThemeProp;
 export const StyledGridContainer = styled.div(({ theme: { base }, conversationHistory }) => {
     return css `
@@ -235,11 +270,23 @@ export const StyledInitialMessageContainer = styled.div(() => {
     return css `
     ${StyledFormField} {
       width: 100%;
-      max-width: ${maxWidthMessage};
+      max-width: var(--message-container-width);
     }
   `;
 });
 StyledInitialMessageContainer.defaultProps = defaultThemeProp;
+export const StyledBannerSalutationBlock = styled.div(({ isExpanded }) => css `
+    transition:
+      opacity 0.45s ease,
+      transform 0.45s ease;
+    ${isExpanded &&
+    css `
+      opacity: 0;
+      transform: translateY(-1.5rem);
+      pointer-events: none;
+    `}
+  `);
+StyledBannerSalutationBlock.defaultProps = defaultThemeProp;
 export const StyledInputContainer = styled(Flex)(({ theme: { base: { spacing } } }) => {
     return css `
     margin-block-end: ${spacing};
@@ -248,7 +295,7 @@ export const StyledInputContainer = styled(Flex)(({ theme: { base: { spacing } }
 
     ${StyledFormField}, ${StyledComposerSection} {
       width: 100%;
-      max-width: ${maxWidthMessage};
+      max-width: var(--message-container-width);
     }
   `;
 });
@@ -293,13 +340,18 @@ export const StyledSuggestionsContainer = styled.div(({ theme: { base: { spacing
     `;
 });
 StyledSuggestionsContainer.defaultProps = defaultThemeProp;
-export const StyledMessage = styled.p(({ theme }) => {
+export const StyledMessage = styled.p(({ theme, simplified }) => {
     return css `
     margin-block-start: calc(0.5 * ${theme.base.spacing});
     width: 100%;
     min-width: 0;
     overflow-wrap: break-word;
 
+    ${simplified &&
+        css `
+      padding-inline-start: calc(2.5rem + ${theme.base.spacing});
+    `}
+
     ${StyledEditorContainer} {
       padding: 0;
 
@@ -310,6 +362,14 @@ export const StyledMessage = styled.p(({ theme }) => {
   `;
 });
 StyledMessage.defaultProps = defaultThemeProp;
+export const StyledMessageSender = styled(Text)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, 'font-weight': fontWeight } } }) => {
+    return css `
+    font-size: ${calculateFontSize(fontSize, fontScale).xl};
+    font-weight: ${fontWeight['semi-bold']};
+    opacity: 0.7;
+  `;
+});
+StyledMessageSender.defaultProps = defaultThemeProp;
 export const StyledUserMessage = styled.li(({ theme: { base: { 'border-radius': borderRadius, spacing }, components: { agent: { 'user-message': { background: userMessageBackground, 'foreground-color': userMessageForegroundColor } } } } }) => {
     const foregroundColorForUserMessage = calculateForegroundColor(userMessageBackground, userMessageForegroundColor);
     return css `
@@ -326,15 +386,16 @@ export const StyledUserMessage = styled.li(({ theme: { base: { 'border-radius':
     `;
 });
 StyledUserMessage.defaultProps = defaultThemeProp;
-export const StyledSystemMessage = styled.li(({ stopped, theme: { base: { spacing, 'font-size': fontSize, 'font-scale': fontScale, 'font-weight': fontWeight, palette } } }) => {
+export const StyledSystemMessage = styled.li(({ stopped, theme: { base: { spacing, 'font-size': fontSize, 'font-scale': fontScale, 'font-weight': fontWeight }, components: { agent: { 'foreground-color': agentForegroundColor, background: agentBackground } } } }) => {
     const systemFontSize = calculateFontSize(fontSize, fontScale).xs;
+    const foregroundColorForSystemMessage = calculateForegroundColor(agentBackground, agentForegroundColor);
     return css `
       display: flex;
       align-items: center;
       gap: ${spacing};
       overflow-wrap: break-word;
       font-size: ${systemFontSize};
-      color: ${palette['foreground-color']};
+      color: ${foregroundColorForSystemMessage};
       opacity: 0.7;
       margin-block: calc(2 * ${spacing});
       ${stopped &&
@@ -346,20 +407,20 @@ export const StyledSystemMessage = styled.li(({ stopped, theme: { base: { spacin
       &::after {
         content: '';
         flex: 1;
-        border-block-start: 0.0625rem solid ${palette['foreground-color']};
+        border-block-start: 0.0625rem solid ${foregroundColorForSystemMessage};
         opacity: 0.7;
       }
     `;
 });
 StyledSystemMessage.defaultProps = defaultThemeProp;
-export const StyledMessagesList = styled.ul(({ theme: { base: { shadow, spacing } } }) => {
+export const StyledMessagesList = styled.ul(({ theme: { base: { shadow, spacing } }, simplified }) => {
     return css `
-      padding-block-start: ${spacing};
+      padding-block-start: ${simplified ? `calc(4 * ${spacing})` : spacing};
       list-style-type: none;
       align-self: center;
-      max-width: ${maxWidthMessage};
+      max-width: var(--message-container-width);
       width: 100%;
-      margin-block-start: auto;
+      margin-block-start: var(--messages-list-margin-start, auto);
       min-height: var(--stream-buffer, auto);
 
       & > li {
@@ -427,7 +488,7 @@ export const StyledInnerList = styled.ul(({ theme }) => css `
   `);
 StyledInnerList.defaultProps = defaultThemeProp;
 export const StyledHistorySummaryListItem = styled(SummaryItem)(({ theme }) => {
-    const hoverColor = tryCatch(() => mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    const hoverColor = tryCatch(() => mix(0.95, theme.components.agent.history.background, theme.base.palette.interactive));
     return css `
     padding-inline: calc(2 * ${theme.base.spacing});
     padding-block: ${theme.base.spacing};
@@ -480,7 +541,7 @@ export const StyledAttachmentsList = styled(FileList)(({ theme }) => {
 StyledAttachmentsList.defaultProps = defaultThemeProp;
 export const StyledGuidedSuggestions = styled(MenuButton) `
   width: 100%;
-  max-width: ${maxWidthMessage};
+  max-width: var(--message-container-width);
   > span {
     justify-content: center;
   }
@@ -490,7 +551,7 @@ export const StyledAgentIcon = styled.svg `
   height: 3rem;
 `;
 StyledAgentIcon.defaultProps = defaultThemeProp;
-export const StyledGenAITextArea = styled(TextArea)(({ theme: { components } }) => {
+export const StyledGenAITextArea = styled(TextArea)(({ theme: { components, base }, simplified }) => {
     return css `
     border: none;
     box-shadow: none;
@@ -498,6 +559,10 @@ export const StyledGenAITextArea = styled(TextArea)(({ theme: { components } })
     max-height: 6rem;
     overflow-y: auto;
     padding-block-end: 0;
+    ${simplified &&
+        css `
+      padding: calc(2 * ${base.spacing});
+    `}
     &:focus:not([disabled]) {
       border: none;
       box-shadow: none;
@@ -506,22 +571,24 @@ export const StyledGenAITextArea = styled(TextArea)(({ theme: { components } })
   `;
 });
 StyledGenAITextArea.defaultProps = defaultThemeProp;
-export const StyledSendButton = styled(Button)(({ theme: { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { 'border-radius': formControlBorderRadius } } } }) => {
+export const StyledSendButton = styled(Button)(({ theme: { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { 'border-radius': formControlBorderRadius } } }, simplified }) => {
+    const radiusMultiplier = simplified ? 0.5 : 1;
     return css `
-    border-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});
+    border-radius: calc(${baseBorderRadius} * ${formControlBorderRadius} * ${radiusMultiplier});
     margin-inline-start: auto;
   `;
 });
 StyledSendButton.defaultProps = defaultThemeProp;
-export const StyledStopGeneratingButton = styled(Button)(({ theme: { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { 'border-radius': formControlBorderRadius } } } }) => {
+export const StyledStopGeneratingButton = styled(Button)(({ theme: { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { 'border-radius': formControlBorderRadius } } }, simplified }) => {
+    const radiusMultiplier = simplified ? 0.5 : 1;
     return css `
-    border-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});
+    border-radius: calc(${baseBorderRadius} * ${formControlBorderRadius} * ${radiusMultiplier});
     margin-inline-start: auto;
   `;
 });
 StyledStopGeneratingButton.defaultProps = defaultThemeProp;
 export const StyledInitialMessageGrid = styled.div `
-  max-width: ${maxWidthMessage};
+  max-width: var(--message-container-width);
   width: 100%;
 `;
 export const StyledInitialMessageButton = styled(Button)(({ theme: { base: { spacing } } }) => {
@@ -542,15 +609,16 @@ StyledInitialMessageButton.defaultProps = defaultThemeProp;
 export const StyledInitialMessageText = styled.span `
   ${lineClamp(3)};
 `;
-export const StyledGenAIAvatar = styled(Avatar)(({ theme: { components: { agent: { 'coach-message': { avatar: { background: avatarBackground } } } } } }) => {
+export const StyledGenAIAvatar = styled(Avatar)(({ theme: { components: { agent: { 'coach-message': { avatar: { background: avatarBackground, 'foreground-color': avatarForegroundColor } } } } } }) => {
     return css `
     background: ${avatarBackground};
+    color: ${avatarForegroundColor};
   `;
 });
 StyledGenAIAvatar.defaultProps = defaultThemeProp;
 export const StyledGenAIFooter = styled.div `
   width: 100%;
-  max-width: ${maxWidthMessage};
+  max-width: var(--message-container-width);
 `;
 export const StyledToolMessage = styled.p(({ theme: { base: { spacing, palette: { 'border-line': borderLine } } } }) => {
     return css `
@@ -593,41 +661,52 @@ export const StyledScrollButton = styled(Button)(({ theme }) => {
 });
 StyledScrollButton.defaultProps = defaultThemeProp;
 export const ProgressAngleStyle = createGlobalStyle `
-  @property --angle {
+  @property --progress-border-angle {
     syntax: "<angle>";
-    inherits: true;
+    inherits: false;
     initial-value: 0deg;
   }
 `;
+const progressBorderSpin = keyframes `
+  to { --progress-border-angle: 360deg; }
+`;
 export const StyledProgressContainer = styled.div(({ theme }) => {
-    const aiColor = isSolidColor(theme.base.palette.ai)
-        ? theme.base.palette.ai
+    const aiColor = isSolidColor(theme.components.agent.ai)
+        ? theme.components.agent.ai
         : theme.base.colors.purple.dark;
     const aiTransparent = transparentize(0.85, aiColor);
+    const borderWidth = '0.0625rem';
     return css `
     position: relative;
-    isolation: isolate;
     border-radius: calc(2 * ${theme.base.spacing});
     border-start-start-radius: calc(0.5 * ${theme.base.spacing});
-    border: calc(0.125 * ${theme.base.spacing}) solid transparent;
-    background:
-      linear-gradient(${aiTransparent} 0 0) padding-box,
-      conic-gradient(
-          from var(--angle) in oklab,
-          ${aiTransparent} 0%,
-          ${aiTransparent} 10%,
-          ${aiColor} 50%,
-          ${aiTransparent} 90%,
-          ${aiTransparent} 100%
-        )
-        border-box;
-    animation: spin 1s ease-in-out infinite;
     width: fit-content;
 
-    @keyframes spin {
-      to {
-        --angle: 360deg;
-      }
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -${borderWidth};
+      border-radius: calc(1.875 * ${theme.base.spacing} + ${borderWidth});
+      border-start-start-radius: calc(0.375 * ${theme.base.spacing} + ${borderWidth});
+      padding: ${borderWidth};
+      background: conic-gradient(
+        from var(--progress-border-angle, 0deg) in oklab,
+        ${aiTransparent} 0%,
+        ${aiTransparent} 10%,
+        ${aiColor} 50%,
+        ${aiTransparent} 90%,
+        ${aiTransparent} 100%
+      );
+      -webkit-mask:
+        linear-gradient(#000000 0 0) content-box,
+        linear-gradient(#000000 0 0);
+      -webkit-mask-composite: xor;
+      mask:
+        linear-gradient(#000000 0 0) content-box,
+        linear-gradient(#000000 0 0);
+      mask-composite: exclude;
+      pointer-events: none;
+      animation: ${progressBorderSpin} 1.25s linear infinite;
     }
   `;
 });
@@ -647,7 +726,7 @@ export const StyledProgressContent = styled.div(({ theme }) => {
 StyledProgressContent.defaultProps = defaultThemeProp;
 export const StyledProgressText = styled(Text)(({ theme }) => {
     return css `
-    color: ${theme.base.palette.ai};
+    color: ${theme.components.agent.ai};
   `;
 });
 StyledProgressText.defaultProps = defaultThemeProp;
@@ -1060,16 +1139,28 @@ export const StyledActiveCaseStages = styled.div(({ theme }) => {
   `;
 });
 StyledActiveCaseStages.defaultProps = defaultThemeProp;
-export const StyledSalutation = styled(Text)(({ theme }) => {
+export const StyledSalutation = styled(Text)(({ theme, simplified }) => {
     return css `
     text-align: center;
     overflow-wrap: break-word;
     word-break: break-word;
-    font-size: clamp(1.5rem, 1.333rem + 0.052vw, 2rem);
+    font-size: ${simplified
+        ? 'clamp(2.5rem, 2rem + 1vw, 3.5rem)'
+        : 'clamp(1.5rem, 1.333rem + 0.052vw, 2rem)'};
     font-weight: ${theme.base['font-weight'].bold};
   `;
 });
 StyledSalutation.defaultProps = defaultThemeProp;
+export const StyledSubHeading = styled(Text)(({ theme }) => {
+    const { xxl } = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    text-align: center;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    font-size: ${xxl};
+  `;
+});
+StyledSubHeading.defaultProps = defaultThemeProp;
 export const StyledQuestionnaireCard = styled.article(({ theme: { base: { spacing, palette: { 'border-line': borderLine } }, components: { agent: { questionnaire: { background, 'foreground-color': foregroundColor } } } } }) => {
     const foreground = calculateForegroundColor(background, foregroundColor);
     return css `