@pega/cosmos-react-work 10.0.0-build.4.25 → 10.0.0-build.4.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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;AAiBlD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACX,MAAM,yBAAyB,CAAC;AAOjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACjF,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,kRAwGhC,CAAC;;;;AAsFH,wBAAuE"}
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;AAiBlD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACX,MAAM,yBAAyB,CAAC;AAOjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACjF,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,kRAkGhC,CAAC;;;;AAsFH,wBAAuE"}
@@ -44,7 +44,7 @@ export const StyledAppAnnouncementContent = styled.div(props => {
44
44
  });
45
45
  StyledAppAnnouncementContent.defaultProps = defaultThemeProp;
46
46
  export const StyledAppAnnouncement = styled.article(props => {
47
- const { theme: { base: { shadow, spacing, 'content-width': contentWidth }, components: { card: { 'border-radius': borderRadius }, announcement: { background, 'foreground-color': foregroundColor } } }, image } = props;
47
+ const { theme: { base: { shadow, spacing }, components: { card: { 'border-radius': borderRadius }, announcement: { background, 'foreground-color': foregroundColor } } }, image } = props;
48
48
  const { end } = useDirection();
49
49
  const color = calculateForegroundColor(background, foregroundColor);
50
50
  return css `
@@ -76,12 +76,6 @@ export const StyledAppAnnouncement = styled.article(props => {
76
76
  align-self: flex-start;
77
77
  }
78
78
  }
79
-
80
- @container dynamic-layout-item (block-size <= ${contentWidth.sm}) {
81
- ${StyledAppAnnouncementContent} {
82
- overflow-y: unset;
83
- }
84
- }
85
79
  `};
86
80
 
87
81
  &::after {
@@ -1 +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 useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport { getAppAnnouncementTestIds } from './AppAnnouncement.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp, TestIdProp {\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, 'content-width': contentWidth },\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 &&\n css`\n min-block-size: 100%;\n display: flex;\n flex-direction: column;\n\n > div {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n\n ${StyledAppAnnouncementContent} {\n flex: 1;\n min-height: 0;\n max-height: none;\n }\n\n ${StyledButton} {\n align-self: flex-start;\n }\n }\n\n @container dynamic-layout-item (block-size <= ${contentWidth.sm}) {\n ${StyledAppAnnouncementContent} {\n overflow-y: unset;\n }\n }\n `};\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-visible {\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-visible,\n &:not([disabled]):focus-visible {\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 testId,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getAppAnnouncementTestIds);\n\n const resolvedHeading = heading || t('app_announcement_details_list_header');\n\n return (\n <StyledAppAnnouncement data-testid={testIds.root} {...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' data-testid={testIds.heading}>\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} data-testid={testIds.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\n variant='secondary'\n href={whatsNewLink}\n target='_blank'\n data-testid={testIds.whatsNew}\n >\n {whatsNewText}\n </Button>\n )}\n </div>\n </StyledAppAnnouncement>\n );\n }\n);\n\nexport default withTestIds(AppAnnouncement, getAppAnnouncementTestIds);\n"]}
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 useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n TestIdProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport { getAppAnnouncementTestIds } from './AppAnnouncement.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp, TestIdProp {\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 &&\n css`\n min-block-size: 100%;\n display: flex;\n flex-direction: column;\n\n > div {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n\n ${StyledAppAnnouncementContent} {\n flex: 1;\n min-height: 0;\n max-height: none;\n }\n\n ${StyledButton} {\n align-self: flex-start;\n }\n }\n `};\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-visible {\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-visible,\n &:not([disabled]):focus-visible {\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 testId,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getAppAnnouncementTestIds);\n\n const resolvedHeading = heading || t('app_announcement_details_list_header');\n\n return (\n <StyledAppAnnouncement data-testid={testIds.root} {...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' data-testid={testIds.heading}>\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} data-testid={testIds.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\n variant='secondary'\n href={whatsNewLink}\n target='_blank'\n data-testid={testIds.whatsNew}\n >\n {whatsNewText}\n </Button>\n )}\n </div>\n </StyledAppAnnouncement>\n );\n }\n);\n\nexport default withTestIds(AppAnnouncement, getAppAnnouncementTestIds);\n"]}
@@ -2,7 +2,7 @@ import { type GenAICoachProps } from '.';
2
2
  export declare const AgentIcon: () => import("react/jsx-runtime").JSX.Element;
3
3
  export declare const AISuggestedBadge: () => import("react/jsx-runtime").JSX.Element;
4
4
  declare const _default: ((props: GenAICoachProps) => import("react/jsx-runtime").JSX.Element) & {
5
- getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["user-message", "coach-message", "system-message", "actions", "attachments"]>;
5
+ getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["user-message", "coach-message", "system-message", "actions", "attachments", "agent-mode", "model-selector"]>;
6
6
  };
7
7
  export default _default;
8
8
  //# sourceMappingURL=GenAICoach.d.ts.map
@@ -1 +1 @@
1
- {"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;iCAk2DyB,eAAe;;;AAQ1C,wBAA6D"}
1
+ {"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AA6GA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAyChF,eAAO,MAAM,SAAS,+CA2GrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;iCAk7DyB,eAAe;;;AAQ1C,wBAA6D"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
3
3
  import { getLuminance } from 'polished';
4
- 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';
4
+ 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, Tooltip } from '@pega/cosmos-react-core';
5
5
  import * as caretUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-up.icon';
6
6
  import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
7
7
  import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
@@ -19,7 +19,7 @@ import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icon
19
19
  import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
20
20
  import { getGenAICoachTestIds } from './GenAICoach.test-ids';
21
21
  import { getSelectedKeys, isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
22
- 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';
22
+ 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, StyledComposerSelector } from './GenAICoach.styles';
23
23
  import ActiveCases from './ActiveCases';
24
24
  import CaseWorkflow from './CaseWorkflow';
25
25
  import ConversationHistory from './ConversationHistory';
@@ -98,7 +98,7 @@ const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef,
98
98
  }
99
99
  return (_jsx(Actions, { ...(actions ?? {}), menuAt: 1, "data-testid": actionsTestId, contextualLabel: selectedCoach, items: mergedItems }));
100
100
  };
101
- 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 }) => {
101
+ 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, agentModeProps, modelSelectorProps, ...restProps }) => {
102
102
  const scrollTolerancePx = 2;
103
103
  const scrollThresholdPx = 50;
104
104
  const streamBufferLh = simplifiedAgent ? 15 : 5;
@@ -131,6 +131,8 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
131
131
  const messageContainerRef = useRef(null);
132
132
  const textAreaRef = useRef(null);
133
133
  const [suggestionMenuButton, setSuggestionMenuButton] = useElement(null);
134
+ const [agentModeButtonEl, setAgentModeButtonEl] = useElement(null);
135
+ const [modelSelectorButtonEl, setModelSelectorButtonEl] = useElement(null);
134
136
  const isGeneratingResponse = useRef(false);
135
137
  const focusTextArea = useRef(false);
136
138
  const historyViewRef = useRef(null);
@@ -440,6 +442,28 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
440
442
  return coachOptions[0].primary;
441
443
  }
442
444
  }, [coachOptions]);
445
+ const selectedAgentModeLabel = useMemo(() => {
446
+ if (!agentModeProps)
447
+ return '';
448
+ const selected = menuHelpers.getSelected(agentModeProps.modes)[0];
449
+ if (selected)
450
+ return selected.primary;
451
+ if (agentModeProps.modes[0]) {
452
+ if (isMenuGroupProps(agentModeProps.modes[0])) {
453
+ return agentModeProps.modes[0].items[0].primary;
454
+ }
455
+ return agentModeProps.modes[0].primary;
456
+ }
457
+ return '';
458
+ }, [agentModeProps]);
459
+ const selectedModelLabel = useMemo(() => {
460
+ if (!modelSelectorProps)
461
+ return '';
462
+ return menuHelpers
463
+ .getSelected(modelSelectorProps.options)
464
+ .map(s => s.primary)
465
+ .join(' · ');
466
+ }, [modelSelectorProps]);
443
467
  const onResult = useCallback(value => {
444
468
  pendingResult.current = false;
445
469
  setMessage(prevMessage => {
@@ -842,9 +866,9 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
842
866
  }, autoResize: true, simplified: simplifiedAgent }), _jsxs(Flex, { container: {
843
867
  direction: 'row',
844
868
  justify: 'between',
845
- gap: 1,
869
+ gap: 2,
846
870
  pad: [undefined, 1, 1, 1]
847
- }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [!(messages.length === 0 && suggestionCardsView) && suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'simple', icon: 'chat-typing', iconOnly: true, as: StyledMenuSuggestions, menu: {
871
+ }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, item: { grow: 1, shrink: 1, basis: '0%' }, children: [!(messages.length === 0 && suggestionCardsView) && suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'simple', icon: 'chat-typing', iconOnly: true, as: StyledMenuSuggestions, menu: {
848
872
  items: suggestions,
849
873
  onItemClick: id => {
850
874
  const selected = menuHelpers.getItem(suggestions, id);
@@ -858,7 +882,16 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
858
882
  fileUploadInputRef.current.value = '';
859
883
  }
860
884
  fileUploadInputRef.current?.click();
861
- }, variant: 'simple', label: t('add_attachment'), children: _jsx(Icon, { name: 'paper-clip' }) }), _jsx(StyledInput, { type: 'file', ref: fileUploadInputRef, onChange: onFileChange, multiple: false, "data-testid": testIds.attachments })] }))] }), (() => {
885
+ }, variant: 'simple', label: t('add_attachment'), children: _jsx(Icon, { name: 'paper-clip' }) }), _jsx(StyledInput, { type: 'file', ref: fileUploadInputRef, onChange: onFileChange, multiple: false, "data-testid": testIds.attachments })] })), agentModeProps && agentModeProps.modes.length > 0 && (_jsxs(_Fragment, { children: [_jsx(StyledComposerSelector, { ref: setAgentModeButtonEl, text: selectedAgentModeLabel, "aria-label": t('agent_mode_selector', [selectedAgentModeLabel]), variant: 'simple', "data-testid": testIds.agentMode, menu: {
886
+ mode: 'single-select',
887
+ items: agentModeProps.modes,
888
+ onItemClick: agentModeProps.onAgentModeChange
889
+ }, showArrow: true }), agentModeButtonEl && selectedAgentModeLabel && (_jsx(Tooltip, { target: agentModeButtonEl, smart: true, showDelay: 'none', hideDelay: 'none', children: selectedAgentModeLabel }))] })), modelSelectorProps && modelSelectorProps.options.length > 0 && (_jsxs(_Fragment, { children: [_jsx(StyledComposerSelector, { ref: setModelSelectorButtonEl, text: selectedModelLabel, "aria-label": t('model_selector_button', [selectedModelLabel]), variant: 'simple', "data-testid": testIds.modelSelector, menu: {
890
+ mode: 'single-select',
891
+ variant: 'flyout',
892
+ items: modelSelectorProps.options,
893
+ onItemClick: modelSelectorProps.onModelChange
894
+ }, showArrow: true }), modelSelectorButtonEl && selectedModelLabel && (_jsx(Tooltip, { target: modelSelectorButtonEl, smart: true, showDelay: 'none', hideDelay: 'none', children: selectedModelLabel }))] }))] }), (() => {
862
895
  if (active && pendingResult.current) {
863
896
  return (_jsxs(Flex, { container: {
864
897
  gap: 1,