@pega/cosmos-react-work 9.0.0-build.9.9 → 9.0.0

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

@@ -1,37 +1,120 @@
-import styled, { css } from 'styled-components';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import { useContext } from 'react';
-import { mix } from 'polished';
-import { AppShellContext, Button, FileList, Flex, MenuButton, StyledEmptyState, StyledErrorState, StyledIcon, StyledText, SummaryItem, Text, calculateFontSize, defaultThemeProp, tryCatch } from '@pega/cosmos-react-core';
+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';
+import { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';
+import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+import { StyledFullscreenButton } from '@pega/cosmos-react-core/lib/components/Fullscreen/FullscreenButton';
 import { StyledFormField } from '@pega/cosmos-react-core/lib/components/FormField/FormField';
+import { StyledHeader, StyledSelectionCard, StyledSingleField, StyledTileContent } from '@pega/cosmos-react-core/lib/components/SelectionCard/SelectionCard.styles';
 import { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/RichTextEditor.styles';
-import { StyledProgress } from '@pega/cosmos-react-core/lib/components/Progress/Progress.styles';
-import { resizeDrawerMaxWidth } from '@pega/cosmos-react-core/lib/styles/constants';
+import { StyledProgress, StyledProgressRing } from '@pega/cosmos-react-core/lib/components/Progress/Progress.styles';
+import { resizeDrawerMaxWidth, portalAgentMinWidth, portalAgentDefaultWidth } from '@pega/cosmos-react-core/lib/styles/constants';
+import { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';
+import { RichTextViewer } from '@pega/cosmos-react-rte';
+import { StepMarker, StyledStepText } from '@pega/cosmos-react-core/lib/components/MultiStepForm/FormProgress.styles';
+import { StyledResizeHandle } from '@pega/cosmos-react-core/lib/components/Drawer/ResizeHandle';
+import { StyledStages } from '../Stages/Stages.styles';
 import { isInUtilities } from './GenAICoach.utils';
-export const StyledMessageWrapper = styled.li ``;
-const maxWidthMessage = '46rem';
+const maxWidthMessage = '62.5rem';
 export const StyledComposerSection = styled.div ``;
-export const StyledGenAICoachContainer = styled.div(({ theme: { base: { palette, 'z-index': zIndex, spacing, breakpoints }, components: { card: { 'border-radius': borderRadius } } }, variant }) => {
+export const StyledGenAIFormControl = styled(FormControl)(({ theme, focused }) => {
+    return css `
+    overflow: hidden;
+
+    ${focused &&
+        css `
+      &:not([disabled]) {
+        border-color: ${theme.components['form-control'][':focus']['border-color']};
+        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
+      }
+
+      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {
+        border-color: transparent;
+      }
+    `}
+  `;
+});
+StyledGenAIFormControl.defaultProps = defaultThemeProp;
+export const StyledComposerWrapper = styled.div(({ theme, focused, hasQuestionnaire }) => {
+    const { 'border-radius': formControlBorderRadius, 'border-width': formControlBorderWidth } = theme.components['form-control'];
+    const { 'border-radius': baseBorderRadius, palette } = theme.base;
+    const borderRadius = `calc(${formControlBorderRadius} * ${baseBorderRadius})`;
+    const borderWidth = formControlBorderWidth ?? '0.0625rem';
+    return css `
+      ${hasQuestionnaire &&
+        css `
+        border: ${borderWidth} solid ${palette['border-line']};
+        border-radius: ${borderRadius};
+        overflow: hidden;
+
+        ${focused &&
+            css `
+          border-color: ${theme.components['form-control'][':focus']['border-color']};
+          box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
+        `}
+
+        ${StyledGenAIFormControl} {
+          border: none;
+          border-radius: 0;
+          box-shadow: none;
+          overflow: visible;
+        }
+      `}
+    `;
+});
+StyledComposerWrapper.defaultProps = defaultThemeProp;
+export const StyledMessagesContainer = styled.div(({ theme: { base: { spacing } }, withSuggestionCards }) => {
+    return css `
+      margin-block-end: calc(0.5 * ${spacing});
+      min-height: 0;
+      overflow-y: auto;
+      ${withSuggestionCards &&
+        css `
+        overflow-y: visible;
+        margin-block-end: 0;
+        padding-block-start: 0;
+        flex-shrink: 0;
+      `}
+    `;
+});
+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 }) => {
     const { previewActive } = useContext(AppShellContext);
+    const foregroundColorForAgent = calculateForegroundColor(agentBackground, agentForegroundColor);
     return css `
-      background: ${palette['primary-background']};
+      background: ${agentBackground};
+      color: ${foregroundColorForAgent};
       min-width: var(--utilities-drawer-min-width);
-      border-radius: ${borderRadius};
+      border-radius: ${cardBorderRadius};
+      transition: height ${animation.speed} ${animation.timing.ease};
+
+      ${variant.placement === 'dialog' &&
+        css `
+        border-radius: calc(${formControlBorderRadius} * ${baseBorderRadius});
+      `}
+
       ${isInUtilities(variant) &&
+        !fullScreen &&
         css `
         min-height: 3rem;
         max-width: 31.25rem;
         box-shadow: 0 -1rem 1rem ${palette['app-background']};
-        border-radius: ${borderRadius} ${borderRadius} 0 0;
+        border-radius: ${cardBorderRadius} ${cardBorderRadius} 0 0;
         position: fixed;
-        inset-block-end: 0;
+        inset-block-end: var(--appshell-bottom-offset, 0);
         inset-inline-end: calc(2 * ${spacing});
         z-index: calc(${zIndex.drawer} + 1);
         width: 25rem;
 
         ${previewActive &&
             css `
-          @media (min-width: ${breakpoints.xl}) {
+          @media (min-width: ${breakpoints.md}) {
             margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});
           }
         `}
@@ -47,12 +130,40 @@ export const StyledGenAICoachContainer = styled.div(({ theme: { base: { palette,
         FIXME: This is a stopgap to address issue in Android web views via React Native where VH units do not work
       */
       ${((isInUtilities(variant) && variant.state === 'maximized') || !isInUtilities(variant)) &&
+        !fullScreen &&
         css `
         height: calc(0.85 * var(--case-view-height, 95vh));
         @media (pointer: coarse) and (max-width: ${breakpoints.md}) {
           height: 40rem;
         }
       `}
+
+      ${variant.placement === 'fullpage' &&
+        css `
+        height: var(--content-height-in-view, 100vh);
+      `}
+
+      ${isCompact &&
+        css `
+        height: 100%;
+        max-height: var(--content-height-in-view, 100vh);
+
+        ${StyledMessagesContainer} {
+          margin-block-end: 0;
+        }
+      `}
+
+      ${fullScreen &&
+        css `
+        height: 100vh;
+        border-radius: 0;
+      `}
+
+      ${isPortalAgent &&
+        css `
+        height: calc(100vh - var(--appshell-offset, 0vh));
+        border-radius: 0;
+      `}
     `;
 });
 StyledGenAICoachContainer.defaultProps = defaultThemeProp;
@@ -70,14 +181,13 @@ export const StyledGenAIOptionsMenu = styled(MenuButton)(({ theme: { base: { 'fo
   `;
 });
 StyledGenAIOptionsMenu.defaultProps = defaultThemeProp;
-export const StyledSuggestions = styled(MenuButton)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, palette: { ai } } } }) => {
-    const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);
+export const StyledMenuSuggestions = styled(MenuButton)(({ theme: { base: { 'border-radius': baseBorderRadius, spacing }, components: { button: { 'border-radius': borderRadius } } } }) => {
     return css `
-    color: ${ai};
-    font-size: ${buttonFontSize};
+    padding: calc(0.75 * ${spacing});
+    border-radius: calc(${baseBorderRadius} * ${borderRadius});
   `;
 });
-StyledSuggestions.defaultProps = defaultThemeProp;
+StyledMenuSuggestions.defaultProps = defaultThemeProp;
 export const StyledDisclaimerText = styled(Text)(({ inFullPage, theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing } } }) => {
     const systemFontSize = calculateFontSize(fontSize, fontScale).xs;
     return css `
@@ -91,21 +201,11 @@ export const StyledDisclaimerText = styled(Text)(({ inFullPage, theme: { base: {
   `;
 });
 StyledDisclaimerText.defaultProps = defaultThemeProp;
-export const StyledMessagesContainer = styled.div(({ theme: { base: { spacing } } }) => {
-    return css `
-      margin-block-end: calc(2 * ${spacing});
-      height: 100%;
-      overflow-y: auto;
-    `;
-});
-StyledMessagesContainer.defaultProps = defaultThemeProp;
-export const StyledFlexWrapper = styled.div(({ theme: { base: { spacing } } }) => {
-    return css `
-      margin-block-start: ${spacing};
-      height: 100%;
-      overflow-y: auto;
-    `;
-});
+export const StyledFlexWrapper = styled.div `
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+`;
 StyledFlexWrapper.defaultProps = defaultThemeProp;
 export const StyledGridContainer = styled.div(({ theme: { base }, conversationHistory }) => {
     return css `
@@ -113,22 +213,24 @@ export const StyledGridContainer = styled.div(({ theme: { base }, conversationHi
       min-height: 0;
       ${conversationHistory &&
         css `
-        border: 0.0625rem solid ${base.palette['border-line']};
         margin: calc(2 * ${base.spacing});
         border-radius: ${base['border-radius']};
       `}
     `;
 });
 StyledGridContainer.defaultProps = defaultThemeProp;
-export const StyledInitialMessageContainer = styled.div(({ theme: { base: { spacing } } }) => {
+export const StyledInitialMessageContainer = styled.div(() => {
     return css `
-      margin-block: calc(2 * ${spacing});
-    `;
+    ${StyledFormField} {
+      width: 100%;
+      max-width: ${maxWidthMessage};
+    }
+  `;
 });
 StyledInitialMessageContainer.defaultProps = defaultThemeProp;
 export const StyledInputContainer = styled(Flex)(({ theme: { base: { spacing } } }) => {
     return css `
-    margin-block-end: calc(2 * ${spacing});
+    margin-block-end: ${spacing};
     margin-inline: calc(2 * ${spacing});
     align-items: center;
 
@@ -139,15 +241,36 @@ export const StyledInputContainer = styled(Flex)(({ theme: { base: { spacing } }
   `;
 });
 StyledInputContainer.defaultProps = defaultThemeProp;
-export const StyledSuggestion = styled(Button)(({ theme: { base: { spacing } } }) => {
+export const StyledStickyComposer = styled.div(({ theme: { base: { spacing }, components: { agent: { background: agentBackground } } } }) => {
+    return css `
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      flex-shrink: 0;
+      background: ${agentBackground};
+      padding-block: calc(2 * ${spacing});
+
+      ${StyledInputContainer} {
+        margin-block-end: 0;
+      }
+    `;
+});
+StyledStickyComposer.defaultProps = defaultThemeProp;
+export const StyledSuggestion = styled(Button)(({ theme: { base: { 'border-radius': borderRadius, spacing } } }) => {
     return css `
     width: fit-content;
+    max-width: 100%;
     padding: ${spacing};
     white-space: normal;
     word-break: break-word;
+    text-align: start;
+    border-start-start-radius: calc(1.25 * ${borderRadius});
+    border-start-end-radius: calc(0.5 * ${borderRadius});
+    border-end-start-radius: calc(1.25 * ${borderRadius});
+    border-end-end-radius: calc(1.25 * ${borderRadius});
+
     & + & {
       margin-inline-start: 0;
-      text-align: left;
     }
   `;
 });
@@ -158,59 +281,65 @@ export const StyledSuggestionsContainer = styled.div(({ theme: { base: { spacing
     `;
 });
 StyledSuggestionsContainer.defaultProps = defaultThemeProp;
-export const StyledTimeStamp = styled(Text)(() => {
-    return css `
-    display: flex;
-    align-items: center;
-  `;
-});
-StyledTimeStamp.defaultProps = defaultThemeProp;
 export const StyledMessage = styled.p(({ theme }) => {
     return css `
     margin-block-start: calc(0.5 * ${theme.base.spacing});
+    width: 100%;
+    min-width: 0;
     overflow-wrap: break-word;
+
     ${StyledEditorContainer} {
       padding: 0;
+
+      span {
+        animation: ${animations.reveal} 1s forwards;
+      }
     }
   `;
 });
 StyledMessage.defaultProps = defaultThemeProp;
-export const StyledUserMessage = styled.li(({ theme: { base: { 'border-radius': borderRadius, spacing, palette: { 'secondary-background': secondaryBackground } } } }) => {
+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 `
       overflow-wrap: break-word;
-      background: ${secondaryBackground};
+      background: ${userMessageBackground};
+      color: ${foregroundColorForUserMessage};
       margin-inline-start: calc(4 * ${spacing});
       margin-block-end: calc(0.5 * ${spacing});
       padding: calc(0.5 * ${spacing});
-      border-start-start-radius: min(calc(3 * ${borderRadius}), 1.5rem);
-      border-start-end-radius: min(${borderRadius}, 0.5rem);
-      border-end-start-radius: min(calc(3 * ${borderRadius}), 1.5rem);
-      border-end-end-radius: min(calc(3 * ${borderRadius}), 1.5rem);
+      border-start-start-radius: calc(1.25 * ${borderRadius});
+      border-start-end-radius: calc(0.5 * ${borderRadius});
+      border-end-start-radius: calc(1.25 * ${borderRadius});
+      border-end-end-radius: calc(1.25 * ${borderRadius});
     `;
 });
 StyledUserMessage.defaultProps = defaultThemeProp;
-export const StyledSuggestedMessage = styled.div(({ theme }) => {
+export const StyledSystemMessage = styled.li(({ stopped, theme: { base: { spacing, 'font-size': fontSize, 'font-scale': fontScale, 'font-weight': fontWeight, palette } } }) => {
+    const systemFontSize = calculateFontSize(fontSize, fontScale).xs;
     return css `
-    column-gap: calc(2 * ${theme.base.spacing});
-    min-height: 2rem;
-    max-width: calc(0.8 * ${maxWidthMessage});
-    width: 100%;
-    text-align: left;
-    border: 0.0625rem solid ${theme.base.palette['border-line']};
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
-    padding-inline-end: calc(2 * ${theme.base.spacing});
-    cursor: pointer;
-    &:hover,
-    &:focus {
-      border: 0.0625rem solid ${theme.base.palette.interactive};
-    }
-    ${StyledCardContent} {
-      padding-inline: calc(2 * ${theme.base.spacing});
-      padding-block: calc(1.5 * ${theme.base.spacing});
-    }
-  `;
+      display: flex;
+      align-items: center;
+      gap: ${spacing};
+      overflow-wrap: break-word;
+      font-size: ${systemFontSize};
+      color: ${palette['foreground-color']};
+      opacity: 0.7;
+      margin-block: calc(2 * ${spacing});
+      ${stopped &&
+        css `
+        font-weight: ${fontWeight.normal};
+      `}
+
+      &::before,
+      &::after {
+        content: '';
+        flex: 1;
+        border-block-start: 0.0625rem solid ${palette['foreground-color']};
+        opacity: 0.7;
+      }
+    `;
 });
-StyledSuggestedMessage.defaultProps = defaultThemeProp;
+StyledSystemMessage.defaultProps = defaultThemeProp;
 export const StyledMessagesList = styled.ul(({ theme: { base: { shadow, spacing } } }) => {
     return css `
       padding-block-start: ${spacing};
@@ -218,13 +347,18 @@ export const StyledMessagesList = styled.ul(({ theme: { base: { shadow, spacing
       align-self: center;
       max-width: ${maxWidthMessage};
       width: 100%;
+      margin-block-start: auto;
+      min-height: var(--stream-buffer, auto);
+
       & > li {
-        max-width: calc(0.8 * ${maxWidthMessage});
+        max-width: calc(100% - calc(4.5 * ${spacing}));
       }
+
       & > li[from='user'] {
         margin-inline-start: auto;
         margin-block-end: ${spacing};
       }
+
       & > li[type='message'] {
         &:focus-visible {
           outline: none;
@@ -232,22 +366,39 @@ export const StyledMessagesList = styled.ul(({ theme: { base: { shadow, spacing
         }
         margin-block-end: ${spacing};
       }
+
+      & > ${StyledSystemMessage} {
+        max-width: 100%;
+      }
+
+      & > li:has(${StyledSuggestionsContainer}) {
+        max-width: 100%;
+      }
     `;
 });
 StyledMessagesList.defaultProps = defaultThemeProp;
-export const StyledHistoryContainer = styled(Flex)(({ theme, inFullPage }) => css `
+export const StyledHistoryContainer = styled(Flex)(({ theme, inFullPage }) => {
+    const { background, 'foreground-color': foregroundColor } = theme.components.agent.history;
+    const foreground = calculateForegroundColor(background, foregroundColor);
+    return css `
     height: 100%;
     min-height: 0;
-    ${inFullPage &&
-    css `
-      border-inline-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    background: ${background};
+    color: ${foreground};
+    border-radius: ${theme.components.card['border-radius']};
+    box-shadow: ${theme.base.shadow.low};
+
+    ${!inFullPage &&
+        css `
+      margin-inline: calc(1.5 * ${theme.base.spacing});
     `}
 
     ${StyledEmptyState}, ${StyledErrorState} {
       justify-content: flex-start;
       padding-inline: calc(2 * ${theme.base.spacing});
     }
-  `);
+  `;
+});
 StyledHistoryContainer.defaultProps = defaultThemeProp;
 export const StyledList = styled(Flex)(({ theme }) => css `
     height: 100%;
@@ -255,19 +406,28 @@ export const StyledList = styled(Flex)(({ theme }) => css `
     margin-block-end: calc(2 * ${theme.base.spacing});
   `);
 StyledList.defaultProps = defaultThemeProp;
+export const StyledInnerList = styled.ul(({ theme }) => css `
+    padding-inline: calc(2 * ${theme.base.spacing});
+
+    ${StyledText} {
+      font-weight: ${theme.base['font-weight'].normal};
+    }
+  `);
+StyledInnerList.defaultProps = defaultThemeProp;
 export const StyledHistorySummaryListItem = styled(SummaryItem)(({ theme }) => {
     const hoverColor = tryCatch(() => mix(0.95, theme.base.palette['primary-background'], theme.base.palette.interactive));
     return css `
     padding-inline: calc(2 * ${theme.base.spacing});
     padding-block: ${theme.base.spacing};
-    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
 
     &:hover {
       background-color: ${hoverColor};
+      border-radius: calc(3 * ${theme.base.spacing});
       cursor: pointer;
     }
     &[aria-selected='true'] {
-      background-color: ${hoverColor};
+      background-color: ${theme.components.agent.history.item['selected-background']};
+      border-radius: calc(3 * ${theme.base.spacing});
     }
     &:focus {
       border: 0.0625rem solid ${theme.base.palette.interactive};
@@ -285,7 +445,6 @@ export const StyledGroupHeader = styled.div(({ theme }) => {
     padding-inline: calc(2 * ${theme.base.spacing});
     padding-block-start: calc(2 * ${theme.base.spacing});
     padding-block-end: calc(0.5 * ${theme.base.spacing});
-    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
     font-weight: ${theme.base['font-weight']['semi-bold']};
   `;
 });
@@ -314,4 +473,630 @@ export const StyledGuidedSuggestions = styled(MenuButton) `
     justify-content: center;
   }
 `;
+export const StyledAgentIcon = styled.svg `
+  width: 3rem;
+  height: 3rem;
+`;
+StyledAgentIcon.defaultProps = defaultThemeProp;
+export const StyledGenAITextArea = styled(TextArea)(({ theme: { components } }) => {
+    return css `
+    border: none;
+    box-shadow: none;
+    min-height: calc(1.75 * ${components.input.height});
+    max-height: 6rem;
+    overflow-y: auto;
+    padding-block-end: 0;
+    &:focus:not([disabled]) {
+      border: none;
+      box-shadow: none;
+      background-color: transparent;
+    }
+  `;
+});
+StyledGenAITextArea.defaultProps = defaultThemeProp;
+export const StyledSendButton = styled(Button)(({ theme: { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { 'border-radius': formControlBorderRadius } } } }) => {
+    return css `
+    border-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});
+    margin-inline-start: auto;
+  `;
+});
+StyledSendButton.defaultProps = defaultThemeProp;
+export const StyledStopGeneratingButton = styled(Button)(({ theme: { base: { 'border-radius': baseBorderRadius }, components: { 'form-control': { 'border-radius': formControlBorderRadius } } } }) => {
+    return css `
+    border-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});
+    margin-inline-start: auto;
+  `;
+});
+StyledStopGeneratingButton.defaultProps = defaultThemeProp;
+export const StyledInitialMessageGrid = styled.div `
+  max-width: ${maxWidthMessage};
+  width: 100%;
+`;
+export const StyledInitialMessageButton = styled(Button)(({ theme: { base: { spacing } } }) => {
+    return css `
+    white-space: normal;
+    text-align: left;
+    min-width: unset;
+    padding-block: ${spacing};
+    padding-inline: calc(2 * ${spacing});
+    align-items: start;
+
+    & + & {
+      margin-inline-start: 0;
+    }
+  `;
+});
+StyledInitialMessageButton.defaultProps = defaultThemeProp;
+export const StyledInitialMessageText = styled.span `
+  ${lineClamp(3)};
+`;
+export const StyledGenAIAvatar = styled(Avatar)(({ theme: { components: { agent: { 'coach-message': { avatar: { background: avatarBackground } } } } } }) => {
+    return css `
+    background: ${avatarBackground};
+  `;
+});
+StyledGenAIAvatar.defaultProps = defaultThemeProp;
+export const StyledGenAIFooter = styled.div `
+  width: 100%;
+  max-width: ${maxWidthMessage};
+`;
+export const StyledToolMessage = styled.p(({ theme: { base: { spacing, palette: { 'border-line': borderLine } } } }) => {
+    return css `
+      border-block-end: 0.125rem solid ${borderLine};
+      padding: calc(2 * ${spacing});
+    `;
+});
+StyledToolMessage.defaultProps = defaultThemeProp;
+export const StyledToolMessageContainer = styled.div(({ theme: { base: { spacing, 'border-radius': borderRadius, palette: { 'border-line': borderLine } } } }) => {
+    return css `
+      border: 0.125rem solid ${borderLine};
+      border-radius: min(calc(2 * ${borderRadius}), 1rem);
+      margin-block: ${spacing};
+    `;
+});
+StyledToolMessageContainer.defaultProps = defaultThemeProp;
+export const StyledConfirmationMsg = styled(RichTextViewer)(({ theme: { base, components: { 'form-control': { ':read-only': { 'background-color': readOnlyBackgroundColor } } } } }) => `
+  padding: 0;
+  background-color: ${readOnlyBackgroundColor};
+  border-radius: calc(0.5 * ${base['border-radius']});
+`);
+StyledConfirmationMsg.defaultProps = defaultThemeProp;
+export const StyledActionsContainer = styled.div(() => css `
+    margin-inline-start: auto;
+
+    && button {
+      margin-inline-start: 0;
+    }
+  `);
+StyledActionsContainer.defaultProps = defaultThemeProp;
+export const StyledScrollButton = styled(Button)(({ theme }) => {
+    return css `
+    position: absolute;
+    bottom: calc(var(--composer-height, 0rem) + calc(5 * ${theme.base.spacing}));
+    width: fit-content;
+    align-self: center;
+    z-index: 1;
+    box-shadow: ${theme.base.shadow.high};
+  `;
+});
+StyledScrollButton.defaultProps = defaultThemeProp;
+export const ProgressAngleStyle = createGlobalStyle `
+  @property --angle {
+    syntax: "<angle>";
+    inherits: true;
+    initial-value: 0deg;
+  }
+`;
+export const StyledProgressContainer = styled.div(({ theme }) => {
+    const aiColor = isSolidColor(theme.base.palette.ai)
+        ? theme.base.palette.ai
+        : theme.base.colors.purple.dark;
+    const aiTransparent = transparentize(0.85, aiColor);
+    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;
+      }
+    }
+  `;
+});
+StyledProgressContainer.defaultProps = defaultThemeProp;
+export const StyledProgressContent = styled.div(({ theme }) => {
+    return css `
+    background: ${theme.components.agent.background};
+    border-radius: calc(2 * ${theme.base.spacing});
+    border-start-start-radius: calc(0.5 * ${theme.base.spacing});
+    padding: calc(2 * ${theme.base.spacing});
+
+    ${StyledProgressRing} {
+      width: ${theme.components.icon.size.s};
+    }
+  `;
+});
+StyledProgressContent.defaultProps = defaultThemeProp;
+export const StyledProgressText = styled(Text)(({ theme }) => {
+    return css `
+    color: ${theme.base.palette.ai};
+  `;
+});
+StyledProgressText.defaultProps = defaultThemeProp;
+export const StyledActionContainer = styled(Flex) `
+  && {
+    display: flex;
+  }
+
+  && > button:first-child:not(:last-child) {
+    margin-inline-end: 0;
+  }
+  margin-inline-end: auto;
+`;
+export const StyledToolCandidatesModal = styled(Modal)(({ theme }) => {
+    return css `
+    max-width: ${theme.base['content-width'].xl};
+  `;
+});
+StyledToolCandidatesModal.defaultProps = defaultThemeProp;
+export const StyledPortalSplitContainer = styled.div `
+  container-type: inline-size;
+  container-name: portal-split;
+  display: flex;
+  width: 100%;
+  height: calc(100dvh - var(--appshell-offset, 0));
+  min-height: calc(100dvh - var(--appshell-offset, 0));
+`;
+StyledPortalSplitContainer.defaultProps = defaultThemeProp;
+const portalAgentRegionBasis = (agentVisible, mainVisible) => {
+    if (!agentVisible)
+        return '0%';
+    if (!mainVisible)
+        return '100%';
+    return `clamp(${portalAgentMinWidth}, var(--region-a-width, ${portalAgentDefaultWidth}), calc(100% - ${portalAgentMinWidth}))`;
+};
+export const StyledPortalAgentRegion = styled.aside(({ agentVisible, mainVisible, theme }) => css `
+    flex: 0 0 ${portalAgentRegionBasis(agentVisible, mainVisible)};
+    min-width: 0;
+    transition: flex-basis calc(${theme.base.animation.speed} / 2)
+      ${theme.base.animation.timing.ease};
+    will-change: flex-basis;
+    border-inline-end: 0.0625rem solid ${theme.base.palette['border-line']};
+
+    @container portal-split (min-width: ${theme.base.breakpoints.xl}) {
+      ${agentVisible &&
+    mainVisible &&
+    css `
+        flex-basis: clamp(
+          ${portalAgentMinWidth},
+          var(--region-a-width, 25%),
+          calc(100% - ${portalAgentMinWidth})
+        );
+      `}
+    }
+
+    ${!agentVisible &&
+    css `
+      overflow: hidden;
+    `}
+  `);
+StyledPortalAgentRegion.defaultProps = defaultThemeProp;
+export const StyledPortalMainRegion = styled.div `
+  --appshell-sticky-offset: 0;
+  flex: 1 1 0%;
+  overflow: auto;
+  min-width: 0;
+  min-height: inherit;
+  contain: style;
+
+  &[inert] {
+    display: none;
+  }
+`;
+StyledPortalMainRegion.defaultProps = defaultThemeProp;
+export const StyledPortalSeparator = styled.div `
+  position: relative;
+  flex-shrink: 0;
+  align-self: stretch;
+
+  ${StyledResizeHandle} {
+    z-index: 1;
+  }
+`;
+StyledPortalSeparator.defaultProps = defaultThemeProp;
+export const StyledSuggestionCardsView = styled.div(({ theme: { base: { spacing, 'font-size': fontSize, 'font-scale': fontScale, 'font-weight': fontWeight, transparency, 'content-width': contentWidth }, components: { 'form-control': { 'border-color': formControlBorderColor } } } }) => {
+    const cardFontSize = calculateFontSize(fontSize, fontScale).xxs;
+    const columnTrack = `clamp(2.5rem, var(--tile-col-track, 2.5rem), 5rem) minmax(20ch, ${contentWidth.sm}) 1fr`;
+    const singleCardSize = `calc(${contentWidth.sm} + 8.875rem)`;
+    return css `
+      max-width: 95rem;
+      width: 100%;
+      margin-inline: auto;
+
+      [data-testid='gallery'] {
+        min-height: 0;
+        max-height: none;
+      }
+
+      .bContainer {
+        height: auto !important;
+      }
+
+      && .grid-container {
+        position: static;
+        gap: calc(2 * ${spacing});
+        grid-auto-rows: minmax(2.75rem, 1fr);
+
+        @container (min-width: calc(1.25 * ${singleCardSize})) {
+          grid-template-columns: repeat(2, ${columnTrack});
+        }
+
+        @container (min-width: calc(2 * ${singleCardSize})) {
+          grid-template-columns: repeat(3, ${columnTrack});
+        }
+
+        @container (min-width: calc(3 * ${singleCardSize})) {
+          grid-template-columns: repeat(4, ${columnTrack});
+        }
+      }
+
+      && ${StyledCard} {
+        background: transparent;
+      }
+
+      ${StyledFullscreenButton} {
+        display: none;
+      }
+
+      ${StyledHeader} {
+        ${StyledText} {
+          font-size: ${cardFontSize};
+        }
+      }
+
+      ${StyledSingleField} {
+        font-size: ${cardFontSize};
+        opacity: ${transparency['transparent-2']};
+      }
+
+      ${StyledSelectionCard} {
+        border-color: ${formControlBorderColor};
+
+        &:focus,
+        &:not([data-main-focus]):focus-within {
+          border-color: transparent;
+        }
+
+        ${StyledTileContent} {
+          font-size: ${cardFontSize};
+          font-weight: ${fontWeight['semi-bold']};
+        }
+      }
+    `;
+});
+StyledSuggestionCardsView.defaultProps = defaultThemeProp;
+export const StyledAISuggestedBadge = styled(Flex)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, transparency } } }) => {
+    const systemFontSize = calculateFontSize(fontSize, fontScale).xxs;
+    return css `
+    ${StyledText} {
+      font-size: ${systemFontSize};
+    }
+    opacity: ${transparency['transparent-2']};
+  `;
+});
+StyledAISuggestedBadge.defaultProps = defaultThemeProp;
+export const StyledSuggestionCardsBottomHalf = styled(Flex)(({ theme: { base: { spacing } } }) => {
+    return css `
+    min-height: 50%;
+    flex-shrink: 0;
+    margin-block-start: calc(2.5 * ${spacing});
+  `;
+});
+StyledSuggestionCardsBottomHalf.defaultProps = defaultThemeProp;
+export const StyledCaseWorkflowBanner = styled(Flex)(({ theme }) => {
+    const background = theme.components['case-view'].header.background;
+    const foreground = calculateForegroundColor(background, theme.components['case-view'].header['foreground-color']);
+    return css `
+    @keyframes case-header-fade-in {
+      from {
+        opacity: 0;
+        transform: translateY(calc(${theme.base.spacing} * -1.5)) scale(0.98);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+    margin-inline: calc(2 * ${theme.base.spacing});
+    margin-block: ${theme.base.spacing} 0;
+    padding: calc(${theme.base.spacing} * 0.75) ${theme.base.spacing};
+    background: ${background};
+    color: ${foreground};
+    border-radius: ${theme.base['border-radius']};
+    box-shadow: ${theme.base.shadow.low};
+    animation: case-header-fade-in ${theme.base.animation.speed} ${theme.base.animation.timing.ease}
+      both;
+  `;
+});
+StyledCaseWorkflowBanner.defaultProps = defaultThemeProp;
+export const StyledCaseLaunchButton = styled(Button)(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: ${theme.base.spacing};
+    min-width: 0;
+    flex: 1 1 0;
+    padding: 0 calc(${theme.base.spacing} * 0.5);
+    font-size: ${fontSize.s};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+    text-align: start;
+  `;
+});
+StyledCaseLaunchButton.defaultProps = defaultThemeProp;
+export const StyledCaseIconWrapper = styled.span `
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+
+  ${StyledIconShape} {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+`;
+StyledCaseIconWrapper.defaultProps = defaultThemeProp;
+export const StyledCaseTitleText = styled.span `
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1 1 0;
+`;
+StyledCaseTitleText.defaultProps = defaultThemeProp;
+export const StyledProgressLabel = styled.span(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    flex: 0 1 auto;
+    max-width: 40%;
+    margin-inline-start: auto;
+    font-size: ${fontSize.xxs};
+    font-weight: ${theme.base['font-weight'].normal};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  `;
+});
+StyledProgressLabel.defaultProps = defaultThemeProp;
+export const StyledWorkflowInfoDialog = styled(InfoDialog)(({ theme }) => {
+    return css `
+    width: ${theme.base['content-width'].sm};
+    max-height: 80vh;
+  `;
+});
+StyledWorkflowInfoDialog.defaultProps = defaultThemeProp;
+export const StyledStageList = styled.ol(({ theme }) => {
+    return css `
+    list-style: none;
+    padding: calc(${theme.base.spacing} * 0.5);
+    overflow-y: auto;
+    min-height: 0;
+
+    > li:not(:last-child) {
+      margin-block-end: calc(${theme.base.spacing} * 0.5);
+    }
+  `;
+});
+StyledStageList.defaultProps = defaultThemeProp;
+export const StyledStageButton = styled(Button)(({ theme, expanded }) => {
+    return css `
+    width: 100%;
+    justify-content: start;
+    color: ${theme.base.palette['foreground-color']};
+    gap: calc(${theme.base.spacing} * 0.5);
+
+    ${StyledIcon} {
+      transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+      flex-shrink: 0;
+      transform: rotateZ(${expanded ? '0deg' : '-90deg'});
+    }
+  `;
+});
+StyledStageButton.defaultProps = defaultThemeProp;
+export const StyledStepsContainer = styled.div(({ theme, stageStatus }) => {
+    const isInactive = stageStatus === 'completed' || stageStatus === 'not-started';
+    const { m: stepMarkerSize } = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    padding-inline-start: calc(${theme.base.spacing} * 2);
+    padding-block: calc(${theme.base.spacing} * 0.5);
+
+    ${isInactive &&
+        css `
+      ${StepMarker}[aria-current='step']::before {
+        width: ${stepMarkerSize};
+        height: ${stepMarkerSize};
+      }
+
+      ${StyledStepText} {
+        font-weight: ${theme.base['font-weight'].normal};
+        font-size: inherit;
+      }
+    `}
+
+    ${stageStatus === 'not-started' &&
+        css `
+      ${StepMarker}[aria-current='step']::before {
+        background: ${theme.base.palette['primary-background']};
+        border: calc(2 * ${theme.components['form-control']['border-width']}) solid
+          ${theme.components['form-control']['border-color']};
+      }
+    `}
+  `;
+});
+StyledStepsContainer.defaultProps = defaultThemeProp;
+export const StyledCaseViewIcon = styled(Icon)(({ theme, foreground, background }) => {
+    const meetsContrast = foreground && background
+        ? tryCatch(() => meetsContrastGuidelines(foreground, background).AA, () => false)
+        : true;
+    return css `
+    --brand-accent: ${theme.base.palette['brand-accent']};
+    --gradient-start: oklch(from var(--brand-accent) calc(l - 0.3) calc(c * 1.5) h);
+    --gradient-mid: oklch(from var(--brand-accent) l c h);
+    --gradient-end: oklch(from var(--brand-accent) calc(l + 0.5) calc(c * 1.5) h);
+
+    ${!meetsContrast
+        ? css `
+          color: inherit;
+          background: transparent;
+        `
+        : null}
+
+    ${theme.components['case-view'].icon.color !== 'auto'
+        ? css `
+          color: ${theme.components['case-view'].icon.color};
+        `
+        : null}
+
+    ${theme.components['case-view'].icon.background !== 'auto'
+        ? css `
+          background: ${theme.components['case-view'].icon.background};
+        `
+        : null}
+
+    ${theme.components['case-view'].icon['box-shadow'] !== 'auto'
+        ? css `
+          box-shadow: ${theme.components['case-view'].icon['box-shadow']};
+        `
+        : null}
+  `;
+});
+StyledCaseViewIcon.defaultProps = defaultThemeProp;
+export const StyledCaseViewImage = styled(Image) `
+  max-height: 100%;
+`;
+StyledCaseViewImage.defaultProps = defaultThemeProp;
+export const StyledActiveCaseButton = styled.button(({ theme }) => {
+    const background = theme.components['case-view'].header.background;
+    const foreground = calculateForegroundColor(background, theme.components['case-view'].header['foreground-color']);
+    const hoverBg = tryCatch(() => darken(0.05, background), () => background);
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: ${fontSize.xs};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+    padding: calc(${theme.base.spacing} * 0.5) ${theme.base.spacing};
+    border-radius: ${theme.base['border-radius']};
+    background: ${background};
+    color: ${foreground};
+    box-shadow: ${theme.base.shadow.low};
+
+    &:hover {
+      background: ${hoverBg};
+    }
+
+    &:focus-visible {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `;
+});
+StyledActiveCaseButton.defaultProps = defaultThemeProp;
+export const StyledActiveCasesList = styled(Flex)(({ theme }) => {
+    return css `
+    overflow-y: auto;
+    padding: calc(${theme.base.spacing} * 0.5) calc(${theme.base.spacing} * 0.5);
+    min-height: 0;
+  `;
+});
+StyledActiveCasesList.defaultProps = defaultThemeProp;
+export const StyledActiveCaseName = styled(Button)(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    justify-content: start;
+    font-size: ${fontSize.s};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+    padding: 0;
+    width: 100%;
+    text-align: start;
+  `;
+});
+StyledActiveCaseName.defaultProps = defaultThemeProp;
+export const StyledActiveCaseStages = styled.div(({ theme }) => {
+    return css `
+    ${StyledStages} {
+      border: ${theme.components.button['border-width']} solid ${theme.base.palette['border-line']};
+    }
+  `;
+});
+StyledActiveCaseStages.defaultProps = defaultThemeProp;
+export const StyledSalutation = styled(Text)(({ theme }) => {
+    return css `
+    text-align: center;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    font-size: clamp(1.5rem, 1.333rem + 0.052vw, 2rem);
+    font-weight: ${theme.base['font-weight'].bold};
+  `;
+});
+StyledSalutation.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 `
+      width: 100%;
+      border: none;
+      border-block-end: 0.0625rem solid ${borderLine};
+      border-radius: 0;
+      background: ${background};
+      color: ${foreground};
+
+      &&& ${StyledCardHeader} {
+        padding-block-start: ${spacing};
+        padding-inline-end: ${spacing};
+      }
+
+      &&& ${StyledCardFooter} {
+        padding-block-end: ${spacing};
+      }
+
+      &&& ${StyledCardContent} {
+        padding-block-end: ${spacing};
+      }
+    `;
+});
+StyledQuestionnaireCard.defaultProps = defaultThemeProp;
+export const StyledQuestionBlock = styled.fieldset `
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  /* Let radio/checkbox labels stretch so the ComboBox can fill available width */
+  label {
+    width: 100%;
+  }
+`;
+StyledQuestionBlock.defaultProps = defaultThemeProp;
+export const StyledComboBoxWrapper = styled.div `
+  min-width: 12rem;
+  flex: 1;
+`;
+StyledComboBoxWrapper.defaultProps = defaultThemeProp;
 //# sourceMappingURL=GenAICoach.styles.js.map