@pega/cosmos-react-work 9.5.4 → 9.5.5-2

package/lib/components/AppAnnouncement/AppAnnouncement.d.ts

@@ -11,6 +11,8 @@ export interface AppAnnouncementProps extends BaseProps, NoChildrenProp {
     whatsNewLink?: string;
     /** Content to populate the announcement button. */
     whatsNewText?: string;
+    /** When provided, the heading renders as a link to this URL and the What's new button is hidden. */
+    headingUrl?: string;
     /** An image source for the decorative background. */
     image?: string;
     /**

package/lib/components/AppAnnouncement/AppAnnouncement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAelD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,4BAA4B,6NAiCvC,CAAC;AAIH,eAAO,MAAM,qBAAqB,kRA4EhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CAwD1E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAelD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAaD,eAAO,MAAM,4BAA4B,6NAiCvC,CAAC;AAIH,eAAO,MAAM,qBAAqB,kRA4EhC,CAAC;AAIH,QAAA,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CAwE1E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppAnnouncement/AppAnnouncement.js

@@ -8,6 +8,10 @@ const StyledDismissButton = styled.button `
   font-size: 1.25rem;
   border: none;
 `;
+const StyledHeadingLink = styled(Button) `
+  color: inherit;
+`;
+StyledHeadingLink.defaultProps = defaultThemeProp;
 export const StyledAppAnnouncementContent = styled.div(props => {
     const { theme: { base: { spacing } } } = props;
     return css `
@@ -105,12 +109,13 @@ export const StyledAppAnnouncement = styled.article(props => {
 StyledAppAnnouncement.defaultProps = defaultThemeProp;
 const AppAnnouncement = forwardRef(function AppAnnouncement(props, ref) {
     const t = useI18n();
-    const { heading, description, details, whatsNewLink, whatsNewText = t('app_announcement_whats_new_button_label'), image, onDismiss, ...restProps } = props;
-    return (_jsxs(StyledAppAnnouncement, { ...restProps, ref: ref, image: image, children: [onDismiss && (_jsx(Button, { as: StyledDismissButton, variant: 'simple', icon: true, onClick: onDismiss, "aria-label": t('app_announcement_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }) })), _jsx(Text, { variant: 'h2', children: heading || t('app_announcement_details_list_header') }), _jsxs("div", { children: [_jsxs(StyledAppAnnouncementContent, { children: [description && _jsx(HTML, { as: 'p', content: description }), !!details?.length && (_jsx("ul", { children: details.map((item, index) => {
+    const { heading, description, details, whatsNewLink, whatsNewText = t('app_announcement_whats_new_button_label'), headingUrl, image, onDismiss, ...restProps } = props;
+    const resolvedHeading = heading || t('app_announcement_details_list_header');
+    return (_jsxs(StyledAppAnnouncement, { ...restProps, ref: ref, image: image, children: [onDismiss && (_jsx(Button, { as: StyledDismissButton, variant: 'simple', icon: true, onClick: onDismiss, "aria-label": t('app_announcement_dismiss_button_label_a11y'), children: _jsx(Icon, { name: 'times' }) })), _jsx(Text, { variant: 'h2', children: headingUrl ? (_jsx(StyledHeadingLink, { variant: 'link', href: headingUrl, target: '_blank', rel: 'noopener noreferrer', children: resolvedHeading })) : (resolvedHeading) }), _jsxs("div", { children: [_jsxs(StyledAppAnnouncementContent, { children: [description && _jsx(HTML, { as: 'p', content: description }), !!details?.length && (_jsx("ul", { children: details.map((item, index) => {
                                     return (
                                     // eslint-disable-next-line react/no-array-index-key
                                     _jsx("li", { children: _jsx(HTML, { content: item }) }, index));
-                                }) }))] }), whatsNewLink && (_jsx(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank', children: whatsNewText }))] })] }));
+                                }) }))] }), !headingUrl && whatsNewLink && (_jsx(Button, { variant: 'secondary', href: whatsNewLink, target: '_blank', children: whatsNewText }))] })] }));
 });
 export default AppAnnouncement;
 //# sourceMappingURL=AppAnnouncement.js.map

package/lib/components/AppAnnouncement/AppAnnouncement.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  registerIcon,\n  useI18n,\n  defaultThemeProp,\n  useDirection,\n  calculateForegroundColor,\n  HTML\n} from '@pega/cosmos-react-core';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n  /** Heading text for the announcement. */\n  heading?: string;\n  /** Description text for the announcement. */\n  description?: string;\n  /** Announcement details to be displayed in form of bulleted list. */\n  details?: string[];\n  /** Url to open with What's new link. */\n  whatsNewLink?: string;\n  /** Content to populate the announcement button. */\n  whatsNewText?: string;\n  /** An image source for the decorative background. */\n  image?: string;\n  /**\n   * Whether to fit AppAnnouncement widget in the parent element.\n   */\n  fitToParent?: boolean;\n  /** Callback when user dismisses the announcements. */\n  onDismiss?: () => void;\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n  font-size: 1.25rem;\n  border: none;\n`;\n\nexport const StyledAppAnnouncementContent = styled.div(props => {\n  const {\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    max-height: 12rem;\n    overflow-y: auto;\n    margin-block-start: calc(1.5 * ${spacing});\n    margin-inline: calc(-2 * ${spacing});\n    padding-inline: calc(2 * ${spacing});\n\n    p,\n    ul {\n      line-height: 1.4;\n    }\n\n    ul {\n      padding-inline-start: calc(2 * ${spacing});\n    }\n\n    p + ul {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n\n    li {\n      &:not(:last-child) {\n        margin-block-end: ${spacing};\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncementContent.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncement = styled.article<\n  Pick<AppAnnouncementProps, 'image' | 'fitToParent'>\n>(props => {\n  const {\n    theme: {\n      base: { shadow, spacing },\n      components: {\n        card: { 'border-radius': borderRadius },\n        announcement: { background, 'foreground-color': foregroundColor }\n      }\n    },\n    image\n  } = props;\n\n  const { end } = useDirection();\n  const color = calculateForegroundColor(background, foregroundColor);\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${background};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\n\n    ${props.fitToParent && 'block-size: 100%;'};\n\n    &::after {\n      background: url('${image}') no-repeat;\n      background-position: ${end} bottom;\n      background-size: contain;\n      background-origin: content-box;\n      opacity: 0.2;\n      content: '';\n      display: block;\n      position: absolute;\n      width: 50%;\n      height: 100%;\n      inset-inline-end: 0;\n      bottom: 0;\n      padding: calc(2 * ${spacing});\n    }\n\n    h2 {\n      position: relative;\n      z-index: 2;\n    }\n\n    ${StyledDismissButton} {\n      position: absolute;\n      top: 0.75rem;\n      inset-inline-end: 0.75rem;\n      color: inherit;\n      z-index: 3;\n      &:enabled:hover {\n        background: #ffffff19;\n      }\n      &:enabled:focus {\n        box-shadow: ${shadow.focus};\n      }\n    }\n\n    > div {\n      position: relative;\n      z-index: 2;\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        white-space: normal;\n\n        &:enabled:focus,\n        &:not([disabled]):focus {\n          box-shadow: ${shadow.focus};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n  function AppAnnouncement(\n    props: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) {\n    const t = useI18n();\n    const {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      whatsNewText = t('app_announcement_whats_new_button_label'),\n      image,\n      onDismiss,\n      ...restProps\n    } = props;\n\n    return (\n      <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n        {onDismiss && (\n          <Button\n            as={StyledDismissButton}\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            aria-label={t('app_announcement_dismiss_button_label_a11y')}\n          >\n            <Icon name='times' />\n          </Button>\n        )}\n        <Text variant='h2'>{heading || t('app_announcement_details_list_header')}</Text>\n        <div>\n          <StyledAppAnnouncementContent>\n            {description && <HTML as='p' content={description} />}\n            {!!details?.length && (\n              <ul>\n                {details.map((item, index) => {\n                  return (\n                    // eslint-disable-next-line react/no-array-index-key\n                    <li key={index}>\n                      <HTML content={item} />\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </StyledAppAnnouncementContent>\n          {whatsNewLink && (\n            <Button variant='secondary' href={whatsNewLink} target='_blank'>\n              {whatsNewText}\n            </Button>\n          )}\n        </div>\n      </StyledAppAnnouncement>\n    );\n  }\n);\n\nexport default AppAnnouncement;\n"]}
+{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  registerIcon,\n  useI18n,\n  defaultThemeProp,\n  useDirection,\n  calculateForegroundColor,\n  HTML\n} from '@pega/cosmos-react-core';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp {\n  /** Heading text for the announcement. */\n  heading?: string;\n  /** Description text for the announcement. */\n  description?: string;\n  /** Announcement details to be displayed in form of bulleted list. */\n  details?: string[];\n  /** Url to open with What's new link. */\n  whatsNewLink?: string;\n  /** Content to populate the announcement button. */\n  whatsNewText?: string;\n  /** When provided, the heading renders as a link to this URL and the What's new button is hidden. */\n  headingUrl?: string;\n  /** An image source for the decorative background. */\n  image?: string;\n  /**\n   * Whether to fit AppAnnouncement widget in the parent element.\n   */\n  fitToParent?: boolean;\n  /** Callback when user dismisses the announcements. */\n  onDismiss?: () => void;\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n  font-size: 1.25rem;\n  border: none;\n`;\n\nconst StyledHeadingLink = styled(Button)`\n  color: inherit;\n`;\n\nStyledHeadingLink.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncementContent = styled.div(props => {\n  const {\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    max-height: 12rem;\n    overflow-y: auto;\n    margin-block-start: calc(1.5 * ${spacing});\n    margin-inline: calc(-2 * ${spacing});\n    padding-inline: calc(2 * ${spacing});\n\n    p,\n    ul {\n      line-height: 1.4;\n    }\n\n    ul {\n      padding-inline-start: calc(2 * ${spacing});\n    }\n\n    p + ul {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n\n    li {\n      &:not(:last-child) {\n        margin-block-end: ${spacing};\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncementContent.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncement = styled.article<\n  Pick<AppAnnouncementProps, 'image' | 'fitToParent'>\n>(props => {\n  const {\n    theme: {\n      base: { shadow, spacing },\n      components: {\n        card: { 'border-radius': borderRadius },\n        announcement: { background, 'foreground-color': foregroundColor }\n      }\n    },\n    image\n  } = props;\n\n  const { end } = useDirection();\n  const color = calculateForegroundColor(background, foregroundColor);\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${background};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\n\n    ${props.fitToParent && 'block-size: 100%;'};\n\n    &::after {\n      background: url('${image}') no-repeat;\n      background-position: ${end} bottom;\n      background-size: contain;\n      background-origin: content-box;\n      opacity: 0.2;\n      content: '';\n      display: block;\n      position: absolute;\n      width: 50%;\n      height: 100%;\n      inset-inline-end: 0;\n      bottom: 0;\n      padding: calc(2 * ${spacing});\n    }\n\n    h2 {\n      position: relative;\n      z-index: 2;\n    }\n\n    ${StyledDismissButton} {\n      position: absolute;\n      top: 0.75rem;\n      inset-inline-end: 0.75rem;\n      color: inherit;\n      z-index: 3;\n      &:enabled:hover {\n        background: #ffffff19;\n      }\n      &:enabled:focus {\n        box-shadow: ${shadow.focus};\n      }\n    }\n\n    > div {\n      position: relative;\n      z-index: 2;\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        white-space: normal;\n\n        &:enabled:focus,\n        &:not([disabled]):focus {\n          box-shadow: ${shadow.focus};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n  function AppAnnouncement(\n    props: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) {\n    const t = useI18n();\n    const {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      whatsNewText = t('app_announcement_whats_new_button_label'),\n      headingUrl,\n      image,\n      onDismiss,\n      ...restProps\n    } = props;\n\n    const resolvedHeading = heading || t('app_announcement_details_list_header');\n\n    return (\n      <StyledAppAnnouncement {...restProps} ref={ref} image={image}>\n        {onDismiss && (\n          <Button\n            as={StyledDismissButton}\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            aria-label={t('app_announcement_dismiss_button_label_a11y')}\n          >\n            <Icon name='times' />\n          </Button>\n        )}\n        <Text variant='h2'>\n          {headingUrl ? (\n            <StyledHeadingLink\n              variant='link'\n              href={headingUrl}\n              target='_blank'\n              rel='noopener noreferrer'\n            >\n              {resolvedHeading}\n            </StyledHeadingLink>\n          ) : (\n            resolvedHeading\n          )}\n        </Text>\n        <div>\n          <StyledAppAnnouncementContent>\n            {description && <HTML as='p' content={description} />}\n            {!!details?.length && (\n              <ul>\n                {details.map((item, index) => {\n                  return (\n                    // eslint-disable-next-line react/no-array-index-key\n                    <li key={index}>\n                      <HTML content={item} />\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </StyledAppAnnouncementContent>\n          {!headingUrl && whatsNewLink && (\n            <Button variant='secondary' href={whatsNewLink} target='_blank'>\n              {whatsNewText}\n            </Button>\n          )}\n        </div>\n      </StyledAppAnnouncement>\n    );\n  }\n);\n\nexport default AppAnnouncement;\n"]}

package/lib/components/GenAICoach/GenAICoach.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AAuGA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAmBhF,eAAO,MAAM,SAAS,+CA2GrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;iCAipDyB,eAAe;;;AAQ1C,wBAA6D"}
+{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AA2GA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAyChF,eAAO,MAAM,SAAS,+CA2GrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;iCA81DyB,eAAe;;;AAQ1C,wBAA6D"}

package/lib/components/GenAICoach/GenAICoach.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { getLuminance } from 'polished';
 import { Button, Flex, Icon, MenuButton, Progress, Text, createUID, menuHelpers, useI18n, useSpeechRecognition, useTestIds, useTheme, withTestIds, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, useArrows, useFocusTrap, useLiveLog, useOuterEvent, ThemeOverride, hasProp, getActiveElement, useElement, Actions, useFullscreenContext, useBreakpoint, Grid, useRefMap, VisuallyHiddenText, FileList, Lightbox, FormField, useUID, SpeechToTextButton, Toaster, useToaster, throttle } from '@pega/cosmos-react-core';
 import * as caretUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-up.icon';
@@ -12,19 +12,37 @@ import * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icon
 import * as sendSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/send-solid.icon';
 import * as squareSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/square-solid.icon';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import * as moreAltIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more-alt.icon';
 import * as dockIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/dock.icon';
 import * as undockIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/undock.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 { getGenAICoachTestIds } from './GenAICoach.test-ids';
-import { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
-import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledStopGeneratingButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledGenAIFooter, StyledAgentIcon, StyledActionsContainer, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge, StyledSalutation, StyledComposerWrapper } from './GenAICoach.styles';
+import { getSelectedKeys, isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
+import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledStopGeneratingButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledGenAIFooter, StyledAgentIcon, StyledActionsContainer, StyledHeaderContainer, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge, StyledSalutation, StyledSubHeading, StyledComposerWrapper, StyledBannerSalutationBlock } from './GenAICoach.styles';
 import ActiveCases from './ActiveCases';
 import CaseWorkflow from './CaseWorkflow';
 import ConversationHistory from './ConversationHistory';
 import Questionnaire from './Questionnaire';
 import { GenAIMessage, InitialSuggestedMessage } from '.';
-registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, squareSolidIcon, sendSolidIcon, plusIcon, dockIcon, undockIcon, caretLeftIcon, caretRightIcon);
+registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, squareSolidIcon, sendSolidIcon, plusIcon, dockIcon, undockIcon, caretLeftIcon, caretRightIcon, moreAltIcon);
+const onHeightTransitionEnd = (el, callback) => {
+    const handler = (e) => {
+        if (e.propertyName !== 'height' || e.target !== el)
+            return;
+        el.removeEventListener('transitionend', handler);
+        callback();
+    };
+    el.addEventListener('transitionend', handler);
+    return () => el.removeEventListener('transitionend', handler);
+};
+const buildInitialFormAnswers = (questions = []) => Object.fromEntries(questions.map(question => [
+    question.field,
+    {
+        value: getSelectedKeys(question),
+        questionText: question.questionText
+    }
+]));
 export const AgentIcon = () => {
     const theme = useTheme();
     const uid = useUID();
@@ -38,11 +56,11 @@ export const AISuggestedBadge = () => {
     const t = useI18n();
     return (_jsxs(StyledAISuggestedBadge, { container: { alignItems: 'center', gap: 0.5 }, children: [_jsx(Icon, { name: 'polaris-solid', "aria-hidden": true, size: 'font-size' }), _jsx(Text, { children: t('ai_suggestion') })] }));
 };
-const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef, onFullscreenToggle, isFullscreen, selectedCoach, actionsTestId }) => {
+const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef, onFullscreenToggle, isFullscreen, selectedCoach, actionsTestId, simplifiedAgent }) => {
     const t = useI18n();
     const fullscreenIcon = isFullscreen ? 'dock' : 'undock';
     const extraItems = [
-        ...(allowFullScreen
+        ...(allowFullScreen && !simplifiedAgent
             ? [
                 {
                     id: 'fullscreen',
@@ -69,15 +87,25 @@ const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef,
     const mergedItems = [...(actions?.items ?? []), ...extraItems];
     if (mergedItems.length === 0)
         return null;
+    if (simplifiedAgent) {
+        return (_jsx(MenuButton, { "data-testid": actionsTestId, text: t('actions'), "aria-label": selectedCoach ? t('actions_for', [selectedCoach]) : undefined, iconOnly: true, icon: 'more-alt', variant: 'simple', menu: {
+                items: mergedItems.map(({ text, onClick, ...rest }) => ({
+                    ...rest,
+                    primary: text,
+                    onClick: onClick ? (id, e) => onClick(id, e) : undefined
+                }))
+            } }));
+    }
     return (_jsx(Actions, { ...(actions ?? {}), menuAt: 1, "data-testid": actionsTestId, contextualLabel: selectedCoach, items: mergedItems }));
 };
-const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, onNewChat, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, allowFullScreen = true, isInLandingPageUtilities, stopProcess, voiceToTextProps, salutation, showSalutation = true, isPortalAgent = false, pagePanel, suggestionCardsView, draftMessage, caseWorkflow, activeCases, onStop, isCreatingConversation, conversationError, questionnaireData, onQuestionnaireDismiss, ...restProps }) => {
+const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, onNewChat, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, allowFullScreen = true, isInLandingPageUtilities, stopProcess, voiceToTextProps, salutation, showSalutation = true, isPortalAgent = false, pagePanel, suggestionCardsView, draftMessage, caseWorkflow, activeCases, onStop, isCreatingConversation, conversationError, questionnaireData, onQuestionnaireDismiss, simplifiedAgent = false, subHeading, operatorName, ...restProps }) => {
     const scrollTolerancePx = 2;
     const scrollThresholdPx = 50;
-    const streamBufferLh = 5;
+    const streamBufferLh = simplifiedAgent ? 15 : 5;
     const bufferExtensionLh = 2;
     const scrollThrottleMs = 50;
     const resizeThrottleMs = 33;
+    const bannerTransitionMs = 600;
     const theme = useTheme();
     const t = useI18n();
     const testIds = useTestIds(testId, getGenAICoachTestIds);
@@ -86,9 +114,16 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     const conversationRef = useRef(null);
     const genAICoachRef = useRef(null);
     const [messageEls, getMessageCbRef] = useRefMap();
+    const [showInitialScreen, setShowInitialScreen] = useState(true);
+    const prevExpandedHeightRef = useRef(0);
+    const agentInBanner = simplifiedAgent && variant.placement === 'fullpage';
+    const agentExpanded = simplifiedAgent && messages.length > 0;
     const focusInMessageListRef = useRef(false);
     const mouseTriggeredFocusRef = useRef(false);
     const isUserTriggered = useRef(false);
+    const userInitiatedSendRef = useRef(false);
+    const userInitiatedNewChatRef = useRef(false);
+    const showNextCoachSender = useRef(true);
     const lastFocusedMessageRef = useRef(null);
     const initialFocusedElementRef = useRef(null);
     const inputContainerRef = useRef(null);
@@ -133,6 +168,7 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     const [ctxFullscreen, toggleFullscreen] = useFullscreenContext() ?? [];
     const fullScreen = !!ctxFullscreen;
     const questionnaireKey = questionnaireData?.questions?.map(q => q.field).join(',') ?? '';
+    const initialFormAnswers = useMemo(() => buildInitialFormAnswers(questionnaireData?.questions), [questionnaireData?.questions]);
     const [showScrollToBottom, setShowScrollToBottom] = useState(false);
     const prevFullScreen = usePrevious(fullScreen);
     const prevIsSmallOrAbove = usePrevious(isSmallOrAbove);
@@ -435,6 +471,9 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             isCoachMessageLoading ||
             (latestMessage && isCoachMessage(latestMessage) && latestMessage.isToolConfirmation))
             return;
+        if (simplifiedAgent) {
+            userInitiatedSendRef.current = true;
+        }
         onSend({
             id: createUID(),
             message,
@@ -472,11 +511,33 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             } }));
     }, [coachOptions, selectedCoach, isPortalAgent, pagePanel?.visible]);
     const headerContent = useMemo(() => {
+        if (simplifiedAgent && showInitialScreen)
+            return null;
         return isInUtilities(variant) && variant.state === 'minimized' ? (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'h2', children: selectedCoach }), _jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(Button, { icon: true, label: t('maximize'), "aria-label": t('agent_noun', [t('maximize')]), variant: 'simple', onClick: () => {
                             variant.onStateChange('maximized');
                             isUserTriggered.current = true;
-                        }, children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, _jsxs(Flex, { container: { gap: 0.5 }, as: StyledActionsContainer, children: [activeCases && _jsx(ActiveCases, { activeCases: activeCases }), onNewChat && (_jsx(Button, { icon: true, variant: 'simple', label: t('new_chat'), "aria-label": t('new_chat'), onClick: onNewChat, children: _jsx(Icon, { name: 'plus' }) })), _jsx(HeaderActions, { actions: actions, allowFullScreen: allowFullScreen, variant: variant, isUserTriggeredRef: isUserTriggered, onFullscreenToggle: toggleFullscreen, isFullscreen: fullScreen, selectedCoach: selectedCoach, actionsTestId: testIds.actions }), variant.placement === 'dialog' && !fullScreen && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('close_chat_with_ai'), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] })] }));
-    }, [variant, coachOptions, activeCases, actions, allowFullScreen, onNewChat]);
+                        }, children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, _jsxs(Flex, { container: { gap: 0.5 }, as: StyledActionsContainer, children: [activeCases && _jsx(ActiveCases, { activeCases: activeCases }), simplifiedAgent && (_jsx(HeaderActions, { actions: actions, allowFullScreen: allowFullScreen, variant: variant, isUserTriggeredRef: isUserTriggered, onFullscreenToggle: toggleFullscreen, isFullscreen: fullScreen, selectedCoach: selectedCoach, actionsTestId: testIds.actions, simplifiedAgent: true })), onNewChat && (_jsx(Button, { icon: true, variant: 'simple', label: simplifiedAgent ? t('close') : t('new_chat'), "aria-label": simplifiedAgent ? t('close_chat_with_ai') : t('new_chat'), onClick: () => {
+                                if (simplifiedAgent && genAICoachRef.current) {
+                                    prevExpandedHeightRef.current =
+                                        genAICoachRef.current.getBoundingClientRect().height;
+                                }
+                                userInitiatedNewChatRef.current = true;
+                                if (simplifiedAgent && conversationHistory) {
+                                    conversationHistory.onDismiss();
+                                }
+                                onNewChat?.();
+                            }, children: _jsx(Icon, { name: simplifiedAgent ? 'times' : 'plus' }) })), !simplifiedAgent && (_jsx(HeaderActions, { actions: actions, allowFullScreen: allowFullScreen, variant: variant, isUserTriggeredRef: isUserTriggered, onFullscreenToggle: toggleFullscreen, isFullscreen: fullScreen, selectedCoach: selectedCoach, actionsTestId: testIds.actions })), variant.placement === 'dialog' && !fullScreen && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('close_chat_with_ai'), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] })] }));
+    }, [
+        variant,
+        coachOptions,
+        activeCases,
+        actions,
+        allowFullScreen,
+        onNewChat,
+        simplifiedAgent,
+        showInitialScreen,
+        messages.length
+    ]);
     const getMessageContainingElement = (element) => {
         if (element)
             return Array.from(messageEls.values()).find(el => el && el.contains(element));
@@ -509,9 +570,11 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     useEffect(() => {
         if (questionnaireData) {
             setQuestionnaireDismissed(false);
-            setFormAnswers(undefined);
+            setFormAnswers(initialFormAnswers);
+            return;
         }
-    }, [questionnaireData]);
+        setFormAnswers(undefined);
+    }, [initialFormAnswers, questionnaireData, questionnaireKey]);
     useEffect(() => {
         if (draftMessage !== undefined) {
             setMessage(draftMessage);
@@ -519,9 +582,70 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                 textAreaRef.current?.focus();
         }
     }, [draftMessage, suggestionCardsView]);
+    useLayoutEffect(() => {
+        if (!agentInBanner ||
+            !genAICoachRef.current ||
+            messages.length !== 0 ||
+            (loading && conversationHistory))
+            return;
+        const el = genAICoachRef.current;
+        const currentHeight = el.getBoundingClientRect().height;
+        const storedHeight = parseFloat(el.style.getPropertyValue('--compact-height')) || 0;
+        if (storedHeight > 0 && Math.abs(currentHeight - storedHeight) > scrollTolerancePx)
+            return;
+        el.style.removeProperty('--compact-height');
+        const naturalHeight = el.getBoundingClientRect().height;
+        el.style.setProperty('--compact-height', `${naturalHeight}px`);
+    });
+    useLayoutEffect(() => {
+        if (!agentInBanner || messages.length !== 0)
+            return;
+        if (!userInitiatedNewChatRef.current || !genAICoachRef.current)
+            return;
+        userInitiatedNewChatRef.current = false;
+        const el = genAICoachRef.current;
+        const fromHeight = prevExpandedHeightRef.current;
+        const toHeight = parseFloat(el.style.getPropertyValue('--compact-height')) || 0;
+        if (!fromHeight || !toHeight)
+            return;
+        el.style.height = `${fromHeight}px`;
+        el.style.transition = 'none';
+        const removeListener = onHeightTransitionEnd(el, () => {
+            el.style.removeProperty('height');
+            prevExpandedHeightRef.current = 0;
+        });
+        const rafId = requestAnimationFrame(() => {
+            el.getBoundingClientRect();
+            el.style.removeProperty('transition');
+            el.style.height = `${toHeight}px`;
+        });
+        return () => {
+            cancelAnimationFrame(rafId);
+            removeListener();
+        };
+    }, [messages.length, agentInBanner]);
     useEffect(() => {
-        setFormAnswers(undefined);
-    }, [questionnaireKey]);
+        if (!agentInBanner)
+            return;
+        if (messages.length === 0) {
+            if (!(loading && conversationHistory)) {
+                setShowInitialScreen(true);
+            }
+            userInitiatedSendRef.current = false;
+            return;
+        }
+        if (!showInitialScreen)
+            return;
+        if (!userInitiatedSendRef.current) {
+            setShowInitialScreen(false);
+            return;
+        }
+        const timer = setTimeout(() => {
+            setShowInitialScreen(false);
+            userInitiatedSendRef.current = false;
+        }, bannerTransitionMs);
+        return () => clearTimeout(timer);
+    }, [messages.length, agentInBanner, showInitialScreen]);
     useEffect(() => {
         if (isUserTriggered.current) {
             if (isInUtilities(variant) &&
@@ -711,10 +835,10 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                     if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
                         setFocused(false);
                     }
-                }, children: [questionnaireData && !questionnaireDismissed && !questionnaireData.inline && (_jsx(Questionnaire, { data: questionnaireData, onChange: handleFormChange, onCancel: handleFormCancel }, questionnaireKey)), _jsx(FormField, { label: t('message_pega_gen_ai_coach'), labelHidden: true, labelFor: composerId, info: conversationError || undefined, status: conversationError ? 'error' : undefined, children: _jsx(StyledGenAIFormControl, { focused: (!questionnaireData || questionnaireDismissed) && focused, status: conversationError ? 'error' : undefined, children: _jsxs(Flex, { container: { direction: 'column', gap: 0.25 }, children: [_jsx(StyledGenAITextArea, { id: composerId, ref: textAreaRef, value: interimMessage ? `${message}${interimMessage}` : message, placeholder: t('write_message'), onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: () => {
+                }, children: [questionnaireData && !questionnaireDismissed && !questionnaireData.inline && (_jsx(Questionnaire, { data: questionnaireData, onChange: handleFormChange, onCancel: handleFormCancel }, questionnaireKey)), _jsx(FormField, { label: t('message_pega_gen_ai_coach'), labelHidden: true, labelFor: composerId, info: conversationError || undefined, status: conversationError ? 'error' : undefined, children: _jsx(StyledGenAIFormControl, { focused: (!questionnaireData || questionnaireDismissed) && focused, status: conversationError ? 'error' : undefined, children: _jsxs(Flex, { container: { direction: 'column', gap: 0.25 }, children: [_jsx(StyledGenAITextArea, { id: composerId, ref: textAreaRef, value: interimMessage ? `${message}${interimMessage}` : message, placeholder: simplifiedAgent ? t('ask_anything', [selectedCoach ?? '']) : t('write_message'), onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: () => {
                                             if (active)
                                                 stop();
-                                        }, autoResize: true }), _jsxs(Flex, { container: {
+                                        }, autoResize: true, simplified: simplifiedAgent }), _jsxs(Flex, { container: {
                                             direction: 'row',
                                             justify: 'between',
                                             gap: 1,
@@ -756,13 +880,13 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                                     return (_jsx(StyledStopGeneratingButton, { variant: 'primary', icon: true, label: t('stop'), "aria-label": t('stop'), onClick: () => {
                                                             textAreaRef.current?.focus();
                                                             onStopFn?.();
-                                                        }, children: _jsx(Icon, { name: 'square-solid' }) }));
+                                                        }, simplified: simplifiedAgent, children: _jsx(Icon, { name: 'square-solid' }) }));
                                                 }
                                                 const isLoading = latestMessage &&
                                                     isCoachMessage(latestMessage) &&
                                                     latestMessage.loading &&
                                                     !latestMessage.error;
-                                                const sendButton = (_jsx(StyledSendButton, { variant: 'primary', onClick: isCreatingConversation ? undefined : handleSendMessage, icon: true, label: t('send'), "aria-label": t('send_message'), children: _jsx(Icon, { name: 'send-solid' }) }));
+                                                const sendButton = (_jsx(StyledSendButton, { variant: 'primary', onClick: isCreatingConversation ? undefined : handleSendMessage, icon: true, label: t('send'), "aria-label": t('send_message'), simplified: simplifiedAgent, children: _jsx(Icon, { name: 'send-solid' }) }));
                                                 if (isLoading) {
                                                     if (isCreatingConversation) {
                                                         return sendButton;
@@ -779,28 +903,35 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     const isCompact = variant.placement === 'fullpage' &&
         !fullScreen &&
         !isInLandingPageUtilities &&
-        messages.length === 0;
+        messages.length === 0 &&
+        !(simplifiedAgent && loading && conversationHistory);
     const fullPageAndInitialScreen = (fullScreen || (variant.placement === 'fullpage' && !isInLandingPageUtilities)) &&
         messages.length === 0;
-    const renderTextArea = fullPageAndInitialScreen ? null : genAIFooter;
-    const GenAICoachElement = (_jsx(_Fragment, { children: ((isInUtilities(variant) && variant.state !== 'minimized') || !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledFlexWrapper, children: [caseWorkflow && _jsx(CaseWorkflow, { ...caseWorkflow }), _jsx(Flex, { as: StyledMessagesContainer, ref: setMessageContainerRef, withSuggestionCards: !loading && !error && messages.length === 0 && !!suggestionCardsView, container: loading || error
+    const renderTextArea = agentInBanner || !fullPageAndInitialScreen ? genAIFooter : null;
+    const GenAICoachElement = (_jsx(_Fragment, { children: ((isInUtilities(variant) && variant.state !== 'minimized') || !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledFlexWrapper, isExpanded: agentInBanner && agentExpanded, children: [caseWorkflow && _jsx(CaseWorkflow, { ...caseWorkflow }), _jsx(Flex, { as: StyledMessagesContainer, ref: setMessageContainerRef, withSuggestionCards: !loading && !error && messages.length === 0 && !!suggestionCardsView, container: loading || error
                         ? { direction: 'column', pad: [0, 2], justify: 'center' }
                         : { direction: 'column', pad: [0, 2] }, ...(!loading && !error && messages.length === 0 && suggestionCardsView
                         ? {}
-                        : { item: { grow: 1 } }), onScroll: updateScrollStateOnScrollEvent, children: loading || error ? (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, children: loading ? (_jsx(Progress, { variant: 'ring', placement: 'block', message: typeof loading === 'string' ? loading : t('loading') })) : (_jsx(ErrorState, { message: error })) })) : (_jsx(_Fragment, { children: messages.length === 0 ? (_jsxs(Flex, { as: StyledInitialMessageContainer, container: {
+                        : { item: { grow: 1 } }), onScroll: updateScrollStateOnScrollEvent, children: loading || error ? (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, children: loading ? (_jsx(ThemeOverride, { theme: {
+                                base: {
+                                    palette: {
+                                        'primary-background': theme.components.agent.background
+                                    }
+                                }
+                            }, children: _jsx(Progress, { variant: 'ring', placement: 'block', message: typeof loading === 'string' ? loading : t('loading') }) })) : (_jsx(ErrorState, { message: error })) })) : (_jsx(_Fragment, { children: (agentInBanner ? showInitialScreen : messages.length === 0) ? (_jsxs(Flex, { as: StyledInitialMessageContainer, container: {
                                 justify: suggestionCardsView ? undefined : 'center',
                                 direction: 'column',
                                 alignItems: 'center',
-                                gap: 4,
-                                pad: [6, 0, 2, 0]
+                                gap: simplifiedAgent ? 2 : 4,
+                                pad: simplifiedAgent ? [0, 0, 2, 0] : [6, 0, 2, 0]
                             }, ...(suggestionCardsView ? {} : { item: { grow: 1 } }), children: [((isInUtilities(variant) && variant.state === 'maximized') ||
                                     !isInUtilities(variant)) &&
                                     showSalutation && (_jsxs(Flex, { container: {
                                         direction: 'column',
                                         alignItems: 'center',
-                                        gap: 2,
-                                        pad: [0, 2]
-                                    }, children: [_jsx(AgentIcon, {}), _jsx(Text, { variant: 'h3', as: StyledSalutation, children: salutation ?? t('welcome_text') })] })), initialSuggestedMessages && initialSuggestedMessages.length > 0 && (_jsx(Grid, { as: StyledInitialMessageGrid, container: { cols: getGridColumns(), gap: 1.5 }, children: initialSuggestedMessages.map(initialSuggestedMessage => (_jsx(InitialSuggestedMessage, { ...initialSuggestedMessage, onSend: initialMessage => {
+                                        gap: simplifiedAgent ? 2.5 : 2,
+                                        pad: simplifiedAgent ? [0, 2, 1, 2] : [0, 2]
+                                    }, as: simplifiedAgent ? StyledBannerSalutationBlock : undefined, isExpanded: agentExpanded, children: [!simplifiedAgent && _jsx(AgentIcon, {}), _jsx(StyledSalutation, { variant: simplifiedAgent ? 'h1' : 'h3', simplified: simplifiedAgent, children: salutation ?? t('welcome_text') }), simplifiedAgent && (_jsx(StyledSubHeading, { variant: 'primary', as: 'p', children: subHeading ?? t('what_can_i_help_you_with') }))] })), initialSuggestedMessages && initialSuggestedMessages.length > 0 && (_jsx(Grid, { as: StyledInitialMessageGrid, container: { cols: getGridColumns(), gap: 1.5 }, children: initialSuggestedMessages.map(initialSuggestedMessage => (_jsx(InitialSuggestedMessage, { ...initialSuggestedMessage, onSend: initialMessage => {
                                             if (guidedMode) {
                                                 onSend({
                                                     id: initialMessage.id,
@@ -812,7 +943,11 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                             }
                                             isUserTriggered.current = true;
                                             textAreaRef.current?.focus();
-                                        }, testId: initialSuggestedMessage.id }))) })), fullPageAndInitialScreen && !guidedMode && !suggestionCardsView && genAIFooter] })) : (_jsx(Flex, { as: StyledMessagesList, ref: conversationRef, "aria-label": `${t('conversation')} ${t('view')}`, container: { direction: 'column' }, onMouseDown: (e) => {
+                                        }, testId: initialSuggestedMessage.id }))) })), fullPageAndInitialScreen &&
+                                    !guidedMode &&
+                                    !suggestionCardsView &&
+                                    !agentInBanner &&
+                                    genAIFooter] })) : (_jsx(Flex, { as: StyledMessagesList, ref: conversationRef, simplified: simplifiedAgent, "aria-label": `${t('conversation')} ${t('view')}`, container: { direction: 'column' }, onMouseDown: (e) => {
                                 mouseTriggeredFocusRef.current = true;
                                 const target = e.target instanceof Element ? e.target : null;
                                 const clickedMessage = getMessageContainingElement(target);
@@ -904,11 +1039,13 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                     }
                                 }
                             }, children: messages.map(item => {
-                                const messageProps = isCoachMessage(item)
-                                    ? {
+                                let messageProps;
+                                if (isCoachMessage(item)) {
+                                    messageProps = {
                                         ...item,
                                         suggestions: latestMessage?.id === item.id ? item.suggestions : undefined,
                                         onSend,
+                                        showSenderInfo: simplifiedAgent ? showNextCoachSender.current : undefined,
                                         onSubmit: item.isToolConfirmation
                                             ? (tools) => {
                                                 onSend({
@@ -918,13 +1055,21 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                                 });
                                             }
                                             : undefined
-                                    }
-                                    : item;
+                                    };
+                                    showNextCoachSender.current = false;
+                                }
+                                else if (isUserMessage(item) && simplifiedAgent) {
+                                    showNextCoachSender.current = true;
+                                    messageProps = { ...item, userName: operatorName };
+                                }
+                                else {
+                                    messageProps = item;
+                                }
                                 return (_jsx(GenAIMessage, { ...messageProps, ref: getMessageCbRef(item.id), testId: item.id, announceInteraction: !focusInMessageListRef.current, onAnimationCursorUpdate: animatedTillCursor => {
                                         if (isCoachMessage(item)) {
                                             setAnimationInitialCursorPos(animatedTillCursor);
                                         }
-                                    }, ...(prevFullScreen !== fullScreen ? { animationInitialCursorPos } : {}) }));
+                                    }, simplifiedAgent: simplifiedAgent, ...(prevFullScreen !== fullScreen ? { animationInitialCursorPos } : {}) }));
                             }) })) })) }), showScrollToBottom && (_jsx(StyledScrollButton, { ref: scrollButtonRef, icon: true, onClick: handleScrollToBottomClick, ariaLabel: t('scroll_to_latest_message'), onKeyDown: focusLastMessageLi, children: _jsx(Icon, { name: 'caret-down' }) })), !loading && messages.length === 0 && suggestionCardsView ? (_jsxs(_Fragment, { children: [((isInUtilities(variant) && variant.state !== 'minimized') ||
                             !isInUtilities(variant)) &&
                             !guidedMode && (_jsx(StyledStickyComposer, { children: _jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, ref: setInputContainerRef, children: _jsx(StyledComposerSection, { children: genAIFooter }) }) })), _jsx(Flex, { container: { direction: 'column' }, as: StyledSuggestionCardsBottomHalf, children: _jsx(StyledSuggestionCardsView, { ref: setSuggestionCardsViewRef, children: suggestionCardsView }) })] })) : (((isInUtilities(variant) && variant.state !== 'minimized') ||
@@ -994,7 +1139,11 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             focusTextArea.current = true;
             conversationHistory.onDismiss();
         }, inFullPage: !condition, ref: historyViewRef }));
-    return (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, fullScreen: fullScreen, isCompact: isCompact, isPortalAgent: isPortalAgent, ref: genAICoachRef, children: [_jsx(Flex, { container: { justify: 'between', alignItems: 'center', pad: [1.5, 2, 0.5] }, children: headerContent }), condition ? (_jsx(_Fragment, { children: conversationHistory ? historyView : GenAICoachElement })) : (_jsxs(Grid, { container: { gap: 0.5, cols: '2fr 3fr' }, as: StyledGridContainer, conversationHistory: !!conversationHistory, children: [historyView, GenAICoachElement] })), lightboxPreviewProps && _jsx(Lightbox, { ...lightboxPreviewProps })] }));
+    return (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, fullScreen: fullScreen, isCompact: isCompact, isPortalAgent: isPortalAgent, simplifiedAgent: simplifiedAgent, ref: genAICoachRef, children: [_jsx(Flex, { as: agentExpanded ? StyledHeaderContainer : undefined, container: {
+                    justify: 'between',
+                    alignItems: 'center',
+                    pad: simplifiedAgent ? [0, 2, 0.5] : [1.5, 2, 0.5]
+                }, children: headerContent }), condition ? (_jsx(_Fragment, { children: conversationHistory ? historyView : GenAICoachElement })) : (_jsxs(Grid, { container: { gap: 0.5, cols: '2fr 3fr' }, as: StyledGridContainer, conversationHistory: !!conversationHistory, children: [historyView, GenAICoachElement] })), lightboxPreviewProps && _jsx(Lightbox, { ...lightboxPreviewProps })] }));
 };
 const GenAICoach = (props) => (_jsx(Toaster, { children: _jsx(StyledFullscreenWrapper, { children: _jsx(GenAICoachContent, { ...props }) }) }));
 export default withTestIds(GenAICoach, getGenAICoachTestIds);