@pega/cosmos-react-work 7.0.0-build.22.16 → 7.0.0-build.22.18

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":"UtilitySummaryItemDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAQlG,KAAK,6BAA6B,GAAG,cAAc,CACjD,KAAK,EACL;IACE,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,QAAA,MAAM,wBAAwB,uIAyC5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}
1
+ {"version":3,"file":"UtilitySummaryItemDialog.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4DAA4D,CAAC;AAQlG,KAAK,6BAA6B,GAAG,cAAc,CACjD,KAAK,EACL;IACE,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CACF,CAAC;AAEF,QAAA,MAAM,wBAAwB,uIA2C5B,CAAC;AAEH,eAAe,wBAAwB,CAAC"}
@@ -18,7 +18,6 @@ const UtilitySummaryItemDialog = forwardRef(function UtilitySummaryItemDialog({
18
18
  });
19
19
  useEscape(() => {
20
20
  onDismiss?.();
21
- target.focus();
22
21
  }, dialogRef);
23
22
  useFocusTrap(dialogRef, false);
24
23
  useEffect(() => {
@@ -28,6 +27,9 @@ const UtilitySummaryItemDialog = forwardRef(function UtilitySummaryItemDialog({
28
27
  else if (dialogRef.current) {
29
28
  focusHeadingOrContainer(dialogRef.current);
30
29
  }
30
+ return () => {
31
+ target.focus();
32
+ };
31
33
  }, []);
32
34
  const { start } = useDirection();
33
35
  return (_jsx(StyledUtilitySummaryItemDialog, { ref: dialogRef, target: target, arrow: true, placement: `${start}-start`, children: children }));
@@ -1 +1 @@
1
- {"version":3,"file":"UtilitySummaryItemDialog.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,aAAa,EACb,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEpD,CAAC;AAEF,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/D,MAAM,wBAAwB,GAAG,UAAU,CAGzC,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,GAAG;IACtE,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE;QAClD,qEAAqE;QACrE,IAAK,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;YAClD,OAAO;SACR;QACD,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,EAAE,CAAC;QACd,MAAM,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,IAAI,UAAU,CAAC,CAAC,CAAC;YAAE,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACpC,IAAI,SAAS,CAAC,OAAO,EAAE;YAC1B,uBAAuB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;SAC5C;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,KAAC,8BAA8B,IAC7B,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,GAAG,KAAK,QAAQ,YAE1B,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n defaultThemeProp,\n focusHeadingOrContainer,\n useConsolidatedRef,\n useDirection,\n useFocusTrap,\n useEscape,\n useOuterEvent,\n getFocusables\n} from '@pega/cosmos-react-core';\nimport type { RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nconst StyledUtilitySummaryItemDialog = styled(Dialog)`\n width: 25rem;\n`;\n\nStyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;\n\ntype UtilitySummaryItemDialogProps = WithAttributes<\n 'div',\n {\n target: BaseDialogProps['target'];\n onDismiss?: () => void;\n }\n>;\n\nconst UtilitySummaryItemDialog = forwardRef<\n RefElement<UtilitySummaryItemDialogProps>,\n PropsWithoutRef<UtilitySummaryItemDialogProps>\n>(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {\n const dialogRef = useConsolidatedRef(ref);\n\n useOuterEvent('mousedown', [dialogRef, target], e => {\n // FIXME: This targets the modal backdrop. We need a better solution.\n if ((e.target as Element).closest('[opacity=\"1\"]')) {\n return;\n }\n onDismiss?.();\n });\n\n useEscape(() => {\n onDismiss?.();\n target.focus();\n }, dialogRef);\n\n useFocusTrap(dialogRef, false);\n\n useEffect(() => {\n const focusables = getFocusables(dialogRef);\n if (focusables[0]) focusables[0].focus();\n else if (dialogRef.current) {\n focusHeadingOrContainer(dialogRef.current);\n }\n }, []);\n\n const { start } = useDirection();\n\n return (\n <StyledUtilitySummaryItemDialog\n ref={dialogRef}\n target={target}\n arrow\n placement={`${start}-start`}\n >\n {children}\n </StyledUtilitySummaryItemDialog>\n );\n});\n\nexport default UtilitySummaryItemDialog;\n"]}
1
+ {"version":3,"file":"UtilitySummaryItemDialog.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitySummaryItemDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,aAAa,EACb,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,MAAM,MAAM,sDAAsD,CAAC;AAG1E,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEpD,CAAC;AAEF,8BAA8B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU/D,MAAM,wBAAwB,GAAG,UAAU,CAGzC,SAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,GAAG;IACtE,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE;QAClD,qEAAqE;QACrE,IAAK,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;YAClD,OAAO;SACR;QACD,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,EAAE,SAAS,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,IAAI,UAAU,CAAC,CAAC,CAAC;YAAE,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACpC,IAAI,SAAS,CAAC,OAAO,EAAE;YAC1B,uBAAuB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;SAC5C;QACD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjC,OAAO,CACL,KAAC,8BAA8B,IAC7B,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,GAAG,KAAK,QAAQ,YAE1B,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,wBAAwB,CAAC","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n defaultThemeProp,\n focusHeadingOrContainer,\n useConsolidatedRef,\n useDirection,\n useFocusTrap,\n useEscape,\n useOuterEvent,\n getFocusables\n} from '@pega/cosmos-react-core';\nimport type { RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport Dialog from '@pega/cosmos-react-core/lib/components/Dialog/Dialog';\nimport type { BaseDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nconst StyledUtilitySummaryItemDialog = styled(Dialog)`\n width: 25rem;\n`;\n\nStyledUtilitySummaryItemDialog.defaultProps = defaultThemeProp;\n\ntype UtilitySummaryItemDialogProps = WithAttributes<\n 'div',\n {\n target: BaseDialogProps['target'];\n onDismiss?: () => void;\n }\n>;\n\nconst UtilitySummaryItemDialog = forwardRef<\n RefElement<UtilitySummaryItemDialogProps>,\n PropsWithoutRef<UtilitySummaryItemDialogProps>\n>(function UtilitySummaryItemDialog({ children, target, onDismiss }, ref) {\n const dialogRef = useConsolidatedRef(ref);\n\n useOuterEvent('mousedown', [dialogRef, target], e => {\n // FIXME: This targets the modal backdrop. We need a better solution.\n if ((e.target as Element).closest('[opacity=\"1\"]')) {\n return;\n }\n onDismiss?.();\n });\n\n useEscape(() => {\n onDismiss?.();\n }, dialogRef);\n\n useFocusTrap(dialogRef, false);\n\n useEffect(() => {\n const focusables = getFocusables(dialogRef);\n if (focusables[0]) focusables[0].focus();\n else if (dialogRef.current) {\n focusHeadingOrContainer(dialogRef.current);\n }\n return () => {\n target.focus();\n };\n }, []);\n\n const { start } = useDirection();\n\n return (\n <StyledUtilitySummaryItemDialog\n ref={dialogRef}\n target={target}\n arrow\n placement={`${start}-start`}\n >\n {children}\n </StyledUtilitySummaryItemDialog>\n );\n});\n\nexport default UtilitySummaryItemDialog;\n"]}
@@ -1,5 +1,5 @@
1
1
  import type { FunctionComponent } from 'react';
2
- import type { GenAICoachProps } from './GenAICoach.types';
2
+ import { type GenAICoachProps } from '.';
3
3
  declare const _default: FunctionComponent<GenAICoachProps> & {
4
4
  getTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
5
5
  };
@@ -1 +1 @@
1
- {"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAqC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;;;;AAsa1D,wBAA6D"}
1
+ {"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAyD5D,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;;;;AA8hBhF,wBAA6D"}
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
3
- import { Button, Flex, Grid, Icon, MenuButton, Progress, Text, TextArea, createUID, menuHelpers, useBreakpoint, useI18n, useTestIds, useTheme, withTestIds, Card, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, Tooltip, useElement } from '@pega/cosmos-react-core';
3
+ import { Button, Flex, Grid, Icon, MenuButton, Progress, Text, TextArea, createUID, menuHelpers, useBreakpoint, useI18n, useTestIds, useTheme, withTestIds, Card, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, Tooltip, useElement, useArrows, focusableSelector, useLiveLog, useOuterEvent } from '@pega/cosmos-react-core';
4
4
  import * as caretUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-up.icon';
5
5
  import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
6
6
  import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
@@ -8,24 +8,30 @@ import * as minusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mi
8
8
  import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
9
9
  import CaseViewContext from '../CaseView/CaseView.context';
10
10
  import { getGenAICoachTestIds } from './GenAICoach.test-ids';
11
- import { StyledChatButton, StyledCloseButton, StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMessageWrapper, StyledStarterMessage, StyledSuggestions, StyledStarterMessageCard } from './GenAICoach.styles';
12
11
  import { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
12
+ import { StyledChatButton, StyledCloseButton, StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledStarterMessage, StyledSuggestions, StyledStarterMessageCard, StyledMessagesList } from './GenAICoach.styles';
13
13
  import { GenAIMessage, InitialSuggestedMessage } from '.';
14
14
  registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon);
15
15
  const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, starterMessage, variant, onOpen, ...restProps }) => {
16
+ const theme = useTheme();
17
+ const t = useI18n();
16
18
  const elementRef = useRef(null);
17
19
  const conversationRef = useRef(null);
18
20
  const genAICoachRef = useRef(null);
19
21
  const [starterMessageElement, setStarterMessageElement] = useElement(null);
22
+ const focusInMessageListRef = useRef(false);
23
+ const lastFocusedMessageRef = useRef(null);
24
+ const initialFocusedElementRef = useRef(null);
25
+ const messageContainerRef = useRef(null);
20
26
  const textAreaRef = useRef(null);
21
27
  const [message, setMessage] = useState('');
22
28
  const [coachOptions, setCoachOptions] = useState(coachOptionsProps);
29
+ const [arrowKey, setArrowKey] = useState(null);
23
30
  const smOrAbove = useBreakpoint('sm', { breakpointRef: genAICoachRef });
24
- const previousMessages = usePrevious(messages);
25
- const theme = useTheme();
26
- const t = useI18n();
27
31
  const { setGenAIHeight, aboveLG } = useContext(CaseViewContext);
32
+ const previousMessages = usePrevious(messages);
28
33
  const testIds = useTestIds(testId, getGenAICoachTestIds);
34
+ const { announcePolite } = useLiveLog();
29
35
  const onCoachChange = (id) => {
30
36
  setCoachOptions(cur => {
31
37
  return cur.map(coach => {
@@ -62,11 +68,6 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
62
68
  const handleTextAreaChange = useCallback((e) => {
63
69
  setMessage(e.currentTarget.value);
64
70
  }, [setMessage]);
65
- const scrollToBottom = () => {
66
- if (conversationRef.current) {
67
- conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
68
- }
69
- };
70
71
  const renderCoachOptions = useMemo(() => {
71
72
  if (coachOptions.length === 0 || !selectedCoach) {
72
73
  return null;
@@ -83,6 +84,14 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
83
84
  const headerContent = useMemo(() => {
84
85
  return isInUtilities(variant) && variant.state === 'docked' ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid', color: theme.base.palette.ai }), _jsx(Text, { variant: 'h3', children: selectedCoach })] }), _jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(Button, { icon: true, label: t('maximize'), "aria-label": t('maximize_gen_ai', [t('coach', ['Pega Gen AI'])]), variant: 'simple', onClick: () => variant.onStateChange('maximized'), children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, isInUtilities(variant) && (_jsx(Button, { icon: true, label: t('minimize'), "aria-label": t('minimize_gen_ai', [t('coach', ['Pega Gen AI'])]), variant: 'simple', onClick: () => variant.onStateChange('docked'), children: _jsx(Icon, { name: 'minus' }) })), variant.placement === 'dialog' && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('close_gen_ai', [t('coach', ['Pega Gen AI'])]), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] }));
85
86
  }, [variant, coachOptions]);
87
+ const setLastFocusableElement = () => {
88
+ focusInMessageListRef.current = false;
89
+ lastFocusedMessageRef.current = conversationRef?.current?.querySelector(':focus') || null;
90
+ if (lastFocusedMessageRef.current &&
91
+ lastFocusedMessageRef.current?.tagName.toLowerCase() !== 'li') {
92
+ lastFocusedMessageRef.current = lastFocusedMessageRef.current.closest('li[type="message"]');
93
+ }
94
+ };
86
95
  const onResize = () => {
87
96
  if (genAICoachRef.current) {
88
97
  const height = genAICoachRef.current.clientHeight;
@@ -93,18 +102,19 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
93
102
  if (isInUtilities(variant)) {
94
103
  onResize();
95
104
  }
96
- }, [variant]);
97
- useEffect(() => {
98
- onResize();
99
105
  if (variant.placement !== 'fullpage') {
100
106
  textAreaRef.current?.focus();
107
+ elementRef.current = null;
101
108
  }
109
+ }, [variant]);
110
+ useEffect(() => {
111
+ onResize();
102
112
  if (isInUtilities(variant) &&
103
113
  variant.state === 'docked' &&
104
114
  getFocusables(genAICoachRef).length > 0) {
105
115
  getFocusables(genAICoachRef)[0].focus();
106
116
  }
107
- }, [textAreaRef.current]);
117
+ }, []);
108
118
  useEffect(() => {
109
119
  onOpen?.();
110
120
  window.addEventListener('resize', onResize);
@@ -116,15 +126,53 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
116
126
  if (isInUtilities(variant) && variant.state !== 'maximized' && messages.length > 0) {
117
127
  variant.onStateChange('maximized');
118
128
  }
119
- if (messages.length > 0 && previousMessages?.length !== messages.length) {
129
+ if (messages.length > 0 && previousMessages && previousMessages?.length < messages.length) {
120
130
  setTimeout(() => {
121
- scrollToBottom();
131
+ conversationRef.current?.lastElementChild?.scrollIntoView({
132
+ behavior: 'smooth',
133
+ block: 'start'
134
+ });
122
135
  }, 0);
123
- if (isUserMessage(messages[messages.length - 1]))
136
+ if (isUserMessage(messages[messages.length - 1])) {
124
137
  textAreaRef.current?.focus();
138
+ setLastFocusableElement();
139
+ elementRef.current = null;
140
+ setArrowKey(null);
141
+ }
142
+ else {
143
+ announcePolite({ message: t('coach', [`${t('new_message')} ${t('from')}`]) });
144
+ }
125
145
  }
126
146
  }, [messages]);
127
- return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, starterMessage: starterMessage, ref: genAICoachRef, aboveLG: aboveLG, ...restProps, children: [_jsx(Flex, { container: { justify: 'between', alignItems: 'center', pad: 1 }, children: headerContent }), ((isInUtilities(variant) && variant.state !== 'docked') || !isInUtilities(variant)) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledMessagesContainer, ref: conversationRef, container: starterMessage || loading || error
147
+ /** Supports arrow key behaviors */
148
+ useEffect(() => {
149
+ const focusables = getFocusables(elementRef);
150
+ if (arrowKey === 'ArrowRight') {
151
+ focusables[0]?.focus();
152
+ }
153
+ else if (arrowKey === 'ArrowLeft') {
154
+ focusables[focusables.length - 1]?.focus();
155
+ }
156
+ }, [arrowKey, elementRef.current]);
157
+ useArrows(conversationRef, {
158
+ cycle: true,
159
+ selector: ':scope > li',
160
+ dir: 'up-down',
161
+ allowTabFocus: true,
162
+ initialFocusElement: initialFocusedElementRef.current
163
+ }, [messages, initialFocusedElementRef.current]);
164
+ useArrows(elementRef, {
165
+ cycle: true,
166
+ selector: `li ${focusableSelector}`,
167
+ dir: 'left-right',
168
+ allowTabFocus: true,
169
+ updateTabIndex: false
170
+ }, [messages, elementRef.current, arrowKey]);
171
+ useOuterEvent('mousedown', [conversationRef.current], () => {
172
+ setArrowKey(null);
173
+ focusInMessageListRef.current = false;
174
+ });
175
+ return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, starterMessage: starterMessage, ref: genAICoachRef, aboveLG: aboveLG, ...restProps, children: [_jsx(Flex, { container: { justify: 'between', alignItems: 'center', pad: 1 }, children: headerContent }), ((isInUtilities(variant) && variant.state !== 'docked') || !isInUtilities(variant)) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledMessagesContainer, ref: messageContainerRef, container: starterMessage || loading || error
128
176
  ? { direction: 'column', pad: [0, 2], justify: 'center' }
129
177
  : { direction: 'column', pad: [0, 2] }, item: { grow: 1 }, 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 ? (_jsx(_Fragment, { children: starterMessage ? (_jsxs(Card, { container: { alignItems: 'center', pad: 1, justify: 'between' }, item: { grow: 0 }, as: StyledStarterMessageCard, children: [_jsx(StyledStarterMessage, { ref: setStarterMessageElement, children: starterMessage.message }), starterMessage.message && starterMessageElement && (_jsx(Tooltip, { target: starterMessageElement, smart: true, children: starterMessage.message })), _jsx(StyledCloseButton, { icon: true, label: t('close'), "aria-label": `${t('close')} ${t('starter_message')}`, variant: 'simple', onClick: starterMessage.onClose, children: _jsx(Icon, { name: 'times' }) })] })) : (_jsxs(Flex, { as: StyledInitialMessageContainer, container: {
130
178
  justify: 'center',
@@ -133,24 +181,92 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
133
181
  }, item: { grow: 1 }, children: [((isInUtilities(variant) && variant.state === 'maximized') ||
134
182
  !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 2 }, children: [_jsx(Icon, { name: 'polaris-solid', size: 'l', color: theme.base.palette.ai }), _jsx(Text, { variant: 'h2', children: t('welcome_text') })] })), _jsx(Grid, { container: { cols: smOrAbove ? 'repeat(2, 1fr)' : '1fr', gap: 1.5 }, children: initialSuggestedMessages?.map(initialSuggestedMessage => (_jsx(InitialSuggestedMessage, { ...initialSuggestedMessage, onSend: initialMessage => {
135
183
  onSend(initialMessage);
136
- }, testId: initialSuggestedMessage.id }))) })] })) })) : (_jsx(_Fragment, { children: messages.map(item => {
184
+ }, testId: initialSuggestedMessage.id }))) })] })) })) : (_jsx(Flex, { as: StyledMessagesList, ref: conversationRef, container: { direction: 'column' }, onFocus: () => {
185
+ if (!focusInMessageListRef.current) {
186
+ if (lastFocusedMessageRef.current) {
187
+ lastFocusedMessageRef.current.focus();
188
+ }
189
+ else {
190
+ /** Focus on the latest message if the chat message list was never focused */
191
+ const lastChild = conversationRef.current && conversationRef.current.lastElementChild;
192
+ if (lastChild instanceof HTMLElement) {
193
+ lastChild.focus();
194
+ }
195
+ }
196
+ }
197
+ focusInMessageListRef.current = true;
198
+ setArrowKey(null);
199
+ }, onKeyDown: (e) => {
200
+ if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
201
+ setArrowKey(e.key);
202
+ elementRef.current = null;
203
+ }
204
+ else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
205
+ const currentElement = conversationRef.current?.querySelector('li:focus');
206
+ if (currentElement && currentElement instanceof HTMLElement) {
207
+ elementRef.current = currentElement;
208
+ }
209
+ else {
210
+ elementRef.current =
211
+ conversationRef.current
212
+ ?.querySelector(':focus')
213
+ ?.closest('li[type="message"]') || null;
214
+ }
215
+ initialFocusedElementRef.current = elementRef.current;
216
+ if (currentElement && getFocusables(currentElement).length > 0) {
217
+ setArrowKey(e.key);
218
+ }
219
+ }
220
+ else if (e.key === 'Tab') {
221
+ setLastFocusableElement();
222
+ if (e.shiftKey) {
223
+ const prevElement = conversationRef.current?.parentElement?.previousElementSibling;
224
+ if (prevElement) {
225
+ const focusables = getFocusables(prevElement);
226
+ if (focusables.length) {
227
+ e.preventDefault();
228
+ focusables[focusables.length - 1].focus();
229
+ }
230
+ }
231
+ }
232
+ else {
233
+ const nextElement = conversationRef.current?.parentElement?.nextElementSibling;
234
+ if (nextElement) {
235
+ const focusables = getFocusables(nextElement);
236
+ if (focusables.length) {
237
+ e.preventDefault();
238
+ focusables[0].focus();
239
+ }
240
+ }
241
+ }
242
+ setArrowKey(null);
243
+ }
244
+ }, children: messages.map(item => {
137
245
  const messageProps = isCoachMessage(item)
138
246
  ? {
139
247
  ...item,
140
248
  onSend
141
249
  }
142
250
  : item;
143
- return (_jsx(StyledMessageWrapper, { ref: elementRef, children: _jsx(GenAIMessage, { ...messageProps, testId: item.id }) }));
251
+ return _jsx(GenAIMessage, { ...messageProps, testId: item.id });
144
252
  }) })) })) }), !starterMessage &&
145
253
  ((isInUtilities(variant) &&
146
254
  variant.state !== 'docked' &&
147
255
  variant.state !== 'minimized') ||
148
- !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledInputContainer, children: [_jsx(TextArea, { ref: textAreaRef, label: t('message_pega_gen_ai_coach', [selectedCoach || '']), value: message, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, autoResize: false }), _jsxs(Flex, { container: { direction: 'row', gap: 2, justify: 'end', pad: 1 }, children: [suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'text', as: StyledSuggestions, icon: 'polaris-solid', menu: {
256
+ !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledInputContainer, children: [_jsx(TextArea, { ref: textAreaRef, label: t('message_pega_gen_ai_coach', [selectedCoach || '']), value: message, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, autoResize: false }), _jsxs(Flex, { container: {
257
+ direction: 'row',
258
+ gap: 2,
259
+ justify: 'end',
260
+ pad: 1
261
+ }, children: [suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'text', as: StyledSuggestions, icon: 'polaris-solid', menu: {
149
262
  items: suggestions,
150
263
  onItemClick: id => {
151
264
  const selected = menuHelpers.getItem(suggestions, id);
152
265
  if (selected)
153
- onSend({ id: selected.id, message: selected.primary });
266
+ onSend({
267
+ id: selected.id,
268
+ message: selected.primary
269
+ });
154
270
  }
155
271
  } })), _jsx(Button, { variant: 'primary', onClick: message
156
272
  ? () => {
@@ -167,7 +283,10 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
167
283
  if (isInUtilities(variant))
168
284
  variant.onStateChange('maximized');
169
285
  if (starterMessage && starterMessage.message) {
170
- onSend({ id: starterMessage.id, message: starterMessage.message });
286
+ onSend({
287
+ id: starterMessage.id,
288
+ message: starterMessage.message
289
+ });
171
290
  }
172
291
  }, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid' }), t('start_chat')] }) }))] }))] }));
173
292
  };
@@ -1 +1 @@
1
- {"version":3,"file":"GenAICoach.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ChangeEvent, FunctionComponent } from 'react';\n\nimport {\n Button,\n Flex,\n Grid,\n Icon,\n MenuButton,\n Progress,\n Text,\n TextArea,\n createUID,\n menuHelpers,\n useBreakpoint,\n useI18n,\n useTestIds,\n useTheme,\n withTestIds,\n Card,\n registerIcon,\n usePrevious,\n getFocusables,\n isMenuGroupProps,\n ErrorState,\n Tooltip,\n useElement\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps, MenuProps } from '@pega/cosmos-react-core';\nimport * as caretUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-up.icon';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as minusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/minus.icon';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\n\nimport CaseViewContext from '../CaseView/CaseView.context';\n\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport type { GenAICoachProps } from './GenAICoach.types';\nimport {\n StyledChatButton,\n StyledCloseButton,\n StyledMessagesContainer,\n StyledDisclaimerText,\n StyledGenAICoachContainer,\n StyledGenAIOptionsMenu,\n StyledInitialMessageContainer,\n StyledInputContainer,\n StyledMessageWrapper,\n StyledStarterMessage,\n StyledSuggestions,\n StyledStarterMessageCard\n} from './GenAICoach.styles';\nimport { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';\n\nimport { GenAIMessage, InitialSuggestedMessage } from '.';\n\nregisterIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon);\n\nconst GenAICoach: FunctionComponent<GenAICoachProps> = ({\n testId,\n coachOptions: coachOptionsProps,\n onCoachChange: onCoachChangeProp,\n messages = [],\n onSend,\n initialSuggestedMessages,\n suggestions,\n loading,\n error,\n starterMessage,\n variant,\n onOpen,\n ...restProps\n}) => {\n const elementRef = useRef<HTMLLIElement>(null);\n const conversationRef = useRef<HTMLUListElement>(null);\n const genAICoachRef = useRef<HTMLElement>(null);\n const [starterMessageElement, setStarterMessageElement] = useElement<HTMLDivElement>(null);\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n const [message, setMessage] = useState('');\n const [coachOptions, setCoachOptions] = useState<MenuProps['items']>(coachOptionsProps);\n\n const smOrAbove = useBreakpoint('sm', { breakpointRef: genAICoachRef });\n const previousMessages = usePrevious(messages);\n const theme = useTheme();\n const t = useI18n();\n const { setGenAIHeight, aboveLG } = useContext(CaseViewContext);\n\n const testIds = useTestIds(testId, getGenAICoachTestIds);\n\n const onCoachChange = (id: MenuItemProps['id']) => {\n setCoachOptions(cur => {\n return cur.map(coach => {\n return {\n ...coach,\n selected: coach.id === id\n };\n });\n });\n onCoachChangeProp?.(id);\n };\n\n const selectedCoach = useMemo(() => {\n const selected = menuHelpers.getSelected(coachOptions)[0];\n if (selected) return selected.primary;\n\n if (coachOptions[0]) {\n if (isMenuGroupProps(coachOptions[0])) {\n return coachOptions[0].items[0].primary;\n }\n return coachOptions[0].primary;\n }\n }, [coachOptions]);\n\n const handleEnterKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n onSend({\n id: createUID(),\n message\n });\n setMessage('');\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [message]\n );\n\n const handleTextAreaChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n setMessage(e.currentTarget.value);\n },\n [setMessage]\n );\n\n const scrollToBottom = () => {\n if (conversationRef.current) {\n conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n }\n };\n\n const renderCoachOptions = useMemo(() => {\n if (coachOptions.length === 0 || !selectedCoach) {\n return null;\n }\n if (coachOptions.length === 1) {\n return (\n <Flex container={{ gap: 1 }}>\n <Icon name='polaris-solid' color={theme.base.palette.ai} />\n <Text variant='h3'>{selectedCoach}</Text>\n </Flex>\n );\n }\n return (\n <MenuButton\n text={selectedCoach}\n variant='text'\n as={StyledGenAIOptionsMenu}\n icon='polaris-solid'\n menu={{\n mode: 'single-select',\n items: coachOptions,\n onItemClick: onCoachChange\n }}\n />\n );\n }, [coachOptions, selectedCoach]);\n\n const headerContent = useMemo(() => {\n return isInUtilities(variant) && variant.state === 'docked' ? (\n <>\n <Flex container={{ gap: 1 }}>\n <Icon name='polaris-solid' color={theme.base.palette.ai} />\n <Text variant='h3'>{selectedCoach}</Text>\n </Flex>\n <Flex container={{ alignItems: 'center' }}>\n <Button\n icon\n label={t('maximize')}\n aria-label={t('maximize_gen_ai', [t('coach', ['Pega Gen AI'])])}\n variant='simple'\n onClick={() => variant.onStateChange('maximized')}\n >\n <Icon name='caret-up' />\n </Button>\n </Flex>\n </>\n ) : (\n <>\n {renderCoachOptions}\n\n {isInUtilities(variant) && (\n <Button\n icon\n label={t('minimize')}\n aria-label={t('minimize_gen_ai', [t('coach', ['Pega Gen AI'])])}\n variant='simple'\n onClick={() => variant.onStateChange('docked')}\n >\n <Icon name='minus' />\n </Button>\n )}\n {variant.placement === 'dialog' && (\n <Button\n icon\n label={t('close')}\n aria-label={t('close_gen_ai', [t('coach', ['Pega Gen AI'])])}\n variant='simple'\n onClick={variant.onClose}\n >\n <Icon name='times' />\n </Button>\n )}\n </>\n );\n }, [variant, coachOptions]);\n\n const onResize = () => {\n if (genAICoachRef.current) {\n const height = genAICoachRef.current.clientHeight;\n setGenAIHeight?.(height);\n }\n };\n\n useEffect(() => {\n if (isInUtilities(variant)) {\n onResize();\n }\n }, [variant]);\n\n useEffect(() => {\n onResize();\n if (variant.placement !== 'fullpage') {\n textAreaRef.current?.focus();\n }\n if (\n isInUtilities(variant) &&\n variant.state === 'docked' &&\n getFocusables(genAICoachRef).length > 0\n ) {\n getFocusables(genAICoachRef)[0].focus();\n }\n }, [textAreaRef.current]);\n\n useEffect(() => {\n onOpen?.();\n window.addEventListener('resize', onResize);\n\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, []);\n\n useEffect(() => {\n if (isInUtilities(variant) && variant.state !== 'maximized' && messages.length > 0) {\n variant.onStateChange('maximized');\n }\n if (messages.length > 0 && previousMessages?.length !== messages.length) {\n setTimeout(() => {\n scrollToBottom();\n }, 0);\n if (isUserMessage(messages[messages.length - 1])) textAreaRef.current?.focus();\n }\n }, [messages]);\n\n return (\n <Flex\n container={{ direction: 'column' }}\n as={StyledGenAICoachContainer}\n data-testid={testIds.root}\n variant={variant}\n starterMessage={starterMessage}\n ref={genAICoachRef}\n aboveLG={aboveLG}\n {...restProps}\n >\n <Flex container={{ justify: 'between', alignItems: 'center', pad: 1 }}>{headerContent}</Flex>\n {((isInUtilities(variant) && variant.state !== 'docked') || !isInUtilities(variant)) && (\n <>\n <Flex\n as={StyledMessagesContainer}\n ref={conversationRef}\n container={\n starterMessage || loading || error\n ? { direction: 'column', pad: [0, 2], justify: 'center' }\n : { direction: 'column', pad: [0, 2] }\n }\n item={{ grow: 1 }}\n >\n {loading || error ? (\n <Flex container={{ justify: 'center', alignItems: 'center' }}>\n {loading ? (\n <Progress\n variant='ring'\n placement='block'\n message={typeof loading === 'string' ? loading : t('loading')}\n />\n ) : (\n <ErrorState message={error} />\n )}\n </Flex>\n ) : (\n <>\n {messages.length === 0 ? (\n <>\n {starterMessage ? (\n <Card\n container={{ alignItems: 'center', pad: 1, justify: 'between' }}\n item={{ grow: 0 }}\n as={StyledStarterMessageCard}\n >\n <StyledStarterMessage ref={setStarterMessageElement}>\n {starterMessage.message}\n </StyledStarterMessage>\n {starterMessage.message && starterMessageElement && (\n <Tooltip target={starterMessageElement} smart>\n {starterMessage.message}\n </Tooltip>\n )}\n\n <StyledCloseButton\n icon\n label={t('close')}\n aria-label={`${t('close')} ${t('starter_message')}`}\n variant='simple'\n onClick={starterMessage.onClose}\n >\n <Icon name='times' />\n </StyledCloseButton>\n </Card>\n ) : (\n <Flex\n as={StyledInitialMessageContainer}\n container={{\n justify: 'center',\n direction: 'column',\n gap: 8\n }}\n item={{ grow: 1 }}\n >\n {((isInUtilities(variant) && variant.state === 'maximized') ||\n !isInUtilities(variant)) && (\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 2 }}>\n <Icon name='polaris-solid' size='l' color={theme.base.palette.ai} />\n <Text variant='h2'>{t('welcome_text')}</Text>\n </Flex>\n )}\n <Grid container={{ cols: smOrAbove ? 'repeat(2, 1fr)' : '1fr', gap: 1.5 }}>\n {initialSuggestedMessages?.map(initialSuggestedMessage => (\n <InitialSuggestedMessage\n {...initialSuggestedMessage}\n onSend={initialMessage => {\n onSend(initialMessage);\n }}\n testId={initialSuggestedMessage.id}\n />\n ))}\n </Grid>\n </Flex>\n )}\n </>\n ) : (\n <>\n {messages.map(item => {\n const messageProps = isCoachMessage(item)\n ? {\n ...item,\n onSend\n }\n : item;\n\n return (\n <StyledMessageWrapper ref={elementRef}>\n <GenAIMessage {...messageProps} testId={item.id} />\n </StyledMessageWrapper>\n );\n })}\n </>\n )}\n </>\n )}\n </Flex>\n\n {!starterMessage &&\n ((isInUtilities(variant) &&\n variant.state !== 'docked' &&\n variant.state !== 'minimized') ||\n !isInUtilities(variant)) && (\n <Flex container={{ direction: 'column' }} as={StyledInputContainer}>\n <TextArea\n ref={textAreaRef}\n label={t('message_pega_gen_ai_coach', [selectedCoach || ''])}\n value={message}\n onKeyDown={handleEnterKeyDown}\n onChange={handleTextAreaChange}\n autoResize={false}\n />\n <Flex container={{ direction: 'row', gap: 2, justify: 'end', pad: 1 }}>\n {suggestions && (\n <MenuButton\n text={t('suggestions')}\n variant='text'\n as={StyledSuggestions}\n icon='polaris-solid'\n menu={{\n items: suggestions,\n onItemClick: id => {\n const selected = menuHelpers.getItem(suggestions, id);\n if (selected) onSend({ id: selected.id, message: selected.primary });\n }\n }}\n />\n )}\n <Button\n variant='primary'\n onClick={\n message\n ? () => {\n onSend({\n id: createUID(),\n message\n });\n setMessage('');\n }\n : undefined\n }\n >\n {t('send')}\n </Button>\n </Flex>\n <StyledDisclaimerText>{t('ai_disclaimer')}</StyledDisclaimerText>\n </Flex>\n )}\n {!loading &&\n !error &&\n messages.length === 0 &&\n ((isInUtilities(variant) && variant.state === 'minimized') || starterMessage) && (\n <StyledChatButton\n icon\n onClick={() => {\n if (isInUtilities(variant)) variant.onStateChange('maximized');\n if (starterMessage && starterMessage.message) {\n onSend({ id: starterMessage.id, message: starterMessage.message });\n }\n }}\n >\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='polaris-solid' />\n {t('start_chat')}\n </Flex>\n </StyledChatButton>\n )}\n </>\n )}\n </Flex>\n );\n};\n\nexport default withTestIds(GenAICoach, getGenAICoachTestIds);\n"]}
1
+ {"version":3,"file":"GenAICoach.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ChangeEvent, FunctionComponent } from 'react';\n\nimport {\n Button,\n Flex,\n Grid,\n Icon,\n MenuButton,\n Progress,\n Text,\n TextArea,\n createUID,\n menuHelpers,\n useBreakpoint,\n useI18n,\n useTestIds,\n useTheme,\n withTestIds,\n Card,\n registerIcon,\n usePrevious,\n getFocusables,\n isMenuGroupProps,\n ErrorState,\n Tooltip,\n useElement,\n useArrows,\n focusableSelector,\n useLiveLog,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps, MenuProps } from '@pega/cosmos-react-core';\nimport * as caretUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-up.icon';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as minusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/minus.icon';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\n\nimport CaseViewContext from '../CaseView/CaseView.context';\n\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';\nimport {\n StyledChatButton,\n StyledCloseButton,\n StyledMessagesContainer,\n StyledDisclaimerText,\n StyledGenAICoachContainer,\n StyledGenAIOptionsMenu,\n StyledInitialMessageContainer,\n StyledInputContainer,\n StyledStarterMessage,\n StyledSuggestions,\n StyledStarterMessageCard,\n StyledMessagesList\n} from './GenAICoach.styles';\n\nimport { GenAIMessage, InitialSuggestedMessage, type GenAICoachProps } from '.';\n\nregisterIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon);\n\nconst GenAICoach: FunctionComponent<GenAICoachProps> = ({\n testId,\n coachOptions: coachOptionsProps,\n onCoachChange: onCoachChangeProp,\n messages = [],\n onSend,\n initialSuggestedMessages,\n suggestions,\n loading,\n error,\n starterMessage,\n variant,\n onOpen,\n ...restProps\n}) => {\n const theme = useTheme();\n const t = useI18n();\n const elementRef = useRef<HTMLElement | null>(null);\n const conversationRef = useRef<HTMLUListElement>(null);\n const genAICoachRef = useRef<HTMLElement>(null);\n const [starterMessageElement, setStarterMessageElement] = useElement<HTMLDivElement>(null);\n const focusInMessageListRef = useRef(false);\n const lastFocusedMessageRef = useRef<HTMLElement | null>(null);\n const initialFocusedElementRef = useRef<HTMLElement | null>(null);\n const messageContainerRef = useRef<HTMLDivElement>(null);\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n const [message, setMessage] = useState('');\n const [coachOptions, setCoachOptions] = useState<MenuProps['items']>(coachOptionsProps);\n const [arrowKey, setArrowKey] = useState<\n 'ArrowRight' | 'ArrowLeft' | 'ArrowUp' | 'ArrowDown' | null\n >(null);\n\n const smOrAbove = useBreakpoint('sm', { breakpointRef: genAICoachRef });\n const { setGenAIHeight, aboveLG } = useContext(CaseViewContext);\n const previousMessages = usePrevious(messages);\n const testIds = useTestIds(testId, getGenAICoachTestIds);\n const { announcePolite } = useLiveLog();\n\n const onCoachChange = (id: MenuItemProps['id']) => {\n setCoachOptions(cur => {\n return cur.map(coach => {\n return {\n ...coach,\n selected: coach.id === id\n };\n });\n });\n onCoachChangeProp?.(id);\n };\n\n const selectedCoach = useMemo(() => {\n const selected = menuHelpers.getSelected(coachOptions)[0];\n if (selected) return selected.primary;\n\n if (coachOptions[0]) {\n if (isMenuGroupProps(coachOptions[0])) {\n return coachOptions[0].items[0].primary;\n }\n return coachOptions[0].primary;\n }\n }, [coachOptions]);\n\n const handleEnterKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n onSend({\n id: createUID(),\n message\n });\n setMessage('');\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [message]\n );\n\n const handleTextAreaChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n setMessage(e.currentTarget.value);\n },\n [setMessage]\n );\n\n const renderCoachOptions = useMemo(() => {\n if (coachOptions.length === 0 || !selectedCoach) {\n return null;\n }\n if (coachOptions.length === 1) {\n return (\n <Flex container={{ gap: 1 }}>\n <Icon name='polaris-solid' color={theme.base.palette.ai} />\n <Text variant='h3'>{selectedCoach}</Text>\n </Flex>\n );\n }\n return (\n <MenuButton\n text={selectedCoach}\n variant='text'\n as={StyledGenAIOptionsMenu}\n icon='polaris-solid'\n menu={{\n mode: 'single-select',\n items: coachOptions,\n onItemClick: onCoachChange\n }}\n />\n );\n }, [coachOptions, selectedCoach]);\n\n const headerContent = useMemo(() => {\n return isInUtilities(variant) && variant.state === 'docked' ? (\n <>\n <Flex container={{ gap: 1 }}>\n <Icon name='polaris-solid' color={theme.base.palette.ai} />\n <Text variant='h3'>{selectedCoach}</Text>\n </Flex>\n <Flex container={{ alignItems: 'center' }}>\n <Button\n icon\n label={t('maximize')}\n aria-label={t('maximize_gen_ai', [t('coach', ['Pega Gen AI'])])}\n variant='simple'\n onClick={() => variant.onStateChange('maximized')}\n >\n <Icon name='caret-up' />\n </Button>\n </Flex>\n </>\n ) : (\n <>\n {renderCoachOptions}\n\n {isInUtilities(variant) && (\n <Button\n icon\n label={t('minimize')}\n aria-label={t('minimize_gen_ai', [t('coach', ['Pega Gen AI'])])}\n variant='simple'\n onClick={() => variant.onStateChange('docked')}\n >\n <Icon name='minus' />\n </Button>\n )}\n {variant.placement === 'dialog' && (\n <Button\n icon\n label={t('close')}\n aria-label={t('close_gen_ai', [t('coach', ['Pega Gen AI'])])}\n variant='simple'\n onClick={variant.onClose}\n >\n <Icon name='times' />\n </Button>\n )}\n </>\n );\n }, [variant, coachOptions]);\n\n const setLastFocusableElement = () => {\n focusInMessageListRef.current = false;\n lastFocusedMessageRef.current = conversationRef?.current?.querySelector(':focus') || null;\n if (\n lastFocusedMessageRef.current &&\n lastFocusedMessageRef.current?.tagName.toLowerCase() !== 'li'\n ) {\n lastFocusedMessageRef.current = lastFocusedMessageRef.current.closest('li[type=\"message\"]');\n }\n };\n\n const onResize = () => {\n if (genAICoachRef.current) {\n const height = genAICoachRef.current.clientHeight;\n setGenAIHeight?.(height);\n }\n };\n\n useEffect(() => {\n if (isInUtilities(variant)) {\n onResize();\n }\n if (variant.placement !== 'fullpage') {\n textAreaRef.current?.focus();\n elementRef.current = null;\n }\n }, [variant]);\n\n useEffect(() => {\n onResize();\n if (\n isInUtilities(variant) &&\n variant.state === 'docked' &&\n getFocusables(genAICoachRef).length > 0\n ) {\n getFocusables(genAICoachRef)[0].focus();\n }\n }, []);\n\n useEffect(() => {\n onOpen?.();\n window.addEventListener('resize', onResize);\n\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, []);\n\n useEffect(() => {\n if (isInUtilities(variant) && variant.state !== 'maximized' && messages.length > 0) {\n variant.onStateChange('maximized');\n }\n if (messages.length > 0 && previousMessages && previousMessages?.length < messages.length) {\n setTimeout(() => {\n conversationRef.current?.lastElementChild?.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }, 0);\n if (isUserMessage(messages[messages.length - 1])) {\n textAreaRef.current?.focus();\n setLastFocusableElement();\n elementRef.current = null;\n setArrowKey(null);\n } else {\n announcePolite({ message: t('coach', [`${t('new_message')} ${t('from')}`]) });\n }\n }\n }, [messages]);\n\n /** Supports arrow key behaviors */\n useEffect(() => {\n const focusables = getFocusables(elementRef);\n if (arrowKey === 'ArrowRight') {\n focusables[0]?.focus();\n } else if (arrowKey === 'ArrowLeft') {\n focusables[focusables.length - 1]?.focus();\n }\n }, [arrowKey, elementRef.current]);\n\n useArrows(\n conversationRef,\n {\n cycle: true,\n selector: ':scope > li',\n dir: 'up-down',\n allowTabFocus: true,\n initialFocusElement: initialFocusedElementRef.current\n },\n [messages, initialFocusedElementRef.current]\n );\n\n useArrows(\n elementRef,\n {\n cycle: true,\n selector: `li ${focusableSelector}`,\n dir: 'left-right',\n allowTabFocus: true,\n updateTabIndex: false\n },\n [messages, elementRef.current, arrowKey]\n );\n\n useOuterEvent('mousedown', [conversationRef.current], () => {\n setArrowKey(null);\n focusInMessageListRef.current = false;\n });\n\n return (\n <Flex\n container={{ direction: 'column' }}\n as={StyledGenAICoachContainer}\n data-testid={testIds.root}\n variant={variant}\n starterMessage={starterMessage}\n ref={genAICoachRef}\n aboveLG={aboveLG}\n {...restProps}\n >\n <Flex container={{ justify: 'between', alignItems: 'center', pad: 1 }}>{headerContent}</Flex>\n {((isInUtilities(variant) && variant.state !== 'docked') || !isInUtilities(variant)) && (\n <>\n <Flex\n as={StyledMessagesContainer}\n ref={messageContainerRef}\n container={\n starterMessage || loading || error\n ? { direction: 'column', pad: [0, 2], justify: 'center' }\n : { direction: 'column', pad: [0, 2] }\n }\n item={{ grow: 1 }}\n >\n {loading || error ? (\n <Flex container={{ justify: 'center', alignItems: 'center' }}>\n {loading ? (\n <Progress\n variant='ring'\n placement='block'\n message={typeof loading === 'string' ? loading : t('loading')}\n />\n ) : (\n <ErrorState message={error} />\n )}\n </Flex>\n ) : (\n <>\n {messages.length === 0 ? (\n <>\n {starterMessage ? (\n <Card\n container={{ alignItems: 'center', pad: 1, justify: 'between' }}\n item={{ grow: 0 }}\n as={StyledStarterMessageCard}\n >\n <StyledStarterMessage ref={setStarterMessageElement}>\n {starterMessage.message}\n </StyledStarterMessage>\n {starterMessage.message && starterMessageElement && (\n <Tooltip target={starterMessageElement} smart>\n {starterMessage.message}\n </Tooltip>\n )}\n\n <StyledCloseButton\n icon\n label={t('close')}\n aria-label={`${t('close')} ${t('starter_message')}`}\n variant='simple'\n onClick={starterMessage.onClose}\n >\n <Icon name='times' />\n </StyledCloseButton>\n </Card>\n ) : (\n <Flex\n as={StyledInitialMessageContainer}\n container={{\n justify: 'center',\n direction: 'column',\n gap: 8\n }}\n item={{ grow: 1 }}\n >\n {((isInUtilities(variant) && variant.state === 'maximized') ||\n !isInUtilities(variant)) && (\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 2 }}>\n <Icon name='polaris-solid' size='l' color={theme.base.palette.ai} />\n <Text variant='h2'>{t('welcome_text')}</Text>\n </Flex>\n )}\n <Grid container={{ cols: smOrAbove ? 'repeat(2, 1fr)' : '1fr', gap: 1.5 }}>\n {initialSuggestedMessages?.map(initialSuggestedMessage => (\n <InitialSuggestedMessage\n {...initialSuggestedMessage}\n onSend={initialMessage => {\n onSend(initialMessage);\n }}\n testId={initialSuggestedMessage.id}\n />\n ))}\n </Grid>\n </Flex>\n )}\n </>\n ) : (\n <Flex\n as={StyledMessagesList}\n ref={conversationRef}\n container={{ direction: 'column' }}\n onFocus={() => {\n if (!focusInMessageListRef.current) {\n if (lastFocusedMessageRef.current) {\n lastFocusedMessageRef.current.focus();\n } else {\n /** Focus on the latest message if the chat message list was never focused */\n const lastChild =\n conversationRef.current && conversationRef.current.lastElementChild;\n if (lastChild instanceof HTMLElement) {\n lastChild.focus();\n }\n }\n }\n focusInMessageListRef.current = true;\n setArrowKey(null);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n setArrowKey(e.key);\n elementRef.current = null;\n } else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {\n const currentElement = conversationRef.current?.querySelector('li:focus');\n if (currentElement && currentElement instanceof HTMLElement) {\n elementRef.current = currentElement;\n } else {\n elementRef.current =\n conversationRef.current\n ?.querySelector(':focus')\n ?.closest('li[type=\"message\"]') || null;\n }\n initialFocusedElementRef.current = elementRef.current;\n\n if (currentElement && getFocusables(currentElement).length > 0) {\n setArrowKey(e.key);\n }\n } else if (e.key === 'Tab') {\n setLastFocusableElement();\n if (e.shiftKey) {\n const prevElement =\n conversationRef.current?.parentElement?.previousElementSibling;\n if (prevElement) {\n const focusables = getFocusables(prevElement);\n if (focusables.length) {\n e.preventDefault();\n focusables[focusables.length - 1].focus();\n }\n }\n } else {\n const nextElement =\n conversationRef.current?.parentElement?.nextElementSibling;\n if (nextElement) {\n const focusables = getFocusables(nextElement);\n if (focusables.length) {\n e.preventDefault();\n focusables[0].focus();\n }\n }\n }\n setArrowKey(null);\n }\n }}\n >\n {messages.map(item => {\n const messageProps = isCoachMessage(item)\n ? {\n ...item,\n onSend\n }\n : item;\n\n return <GenAIMessage {...messageProps} testId={item.id} />;\n })}\n </Flex>\n )}\n </>\n )}\n </Flex>\n\n {!starterMessage &&\n ((isInUtilities(variant) &&\n variant.state !== 'docked' &&\n variant.state !== 'minimized') ||\n !isInUtilities(variant)) && (\n <Flex container={{ direction: 'column' }} as={StyledInputContainer}>\n <TextArea\n ref={textAreaRef}\n label={t('message_pega_gen_ai_coach', [selectedCoach || ''])}\n value={message}\n onKeyDown={handleEnterKeyDown}\n onChange={handleTextAreaChange}\n autoResize={false}\n />\n <Flex\n container={{\n direction: 'row',\n gap: 2,\n justify: 'end',\n pad: 1\n }}\n >\n {suggestions && (\n <MenuButton\n text={t('suggestions')}\n variant='text'\n as={StyledSuggestions}\n icon='polaris-solid'\n menu={{\n items: suggestions,\n onItemClick: id => {\n const selected = menuHelpers.getItem(suggestions, id);\n if (selected)\n onSend({\n id: selected.id,\n message: selected.primary\n });\n }\n }}\n />\n )}\n <Button\n variant='primary'\n onClick={\n message\n ? () => {\n onSend({\n id: createUID(),\n message\n });\n setMessage('');\n }\n : undefined\n }\n >\n {t('send')}\n </Button>\n </Flex>\n <StyledDisclaimerText>{t('ai_disclaimer')}</StyledDisclaimerText>\n </Flex>\n )}\n {!loading &&\n !error &&\n messages.length === 0 &&\n ((isInUtilities(variant) && variant.state === 'minimized') || starterMessage) && (\n <StyledChatButton\n icon\n onClick={() => {\n if (isInUtilities(variant)) variant.onStateChange('maximized');\n if (starterMessage && starterMessage.message) {\n onSend({\n id: starterMessage.id,\n message: starterMessage.message\n });\n }\n }}\n >\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name='polaris-solid' />\n {t('start_chat')}\n </Flex>\n </StyledChatButton>\n )}\n </>\n )}\n </Flex>\n );\n};\n\nexport default withTestIds(GenAICoach, getGenAICoachTestIds);\n"]}
@@ -14,7 +14,7 @@ export declare const StyledSuggestions: import("styled-components").StyledCompon
14
14
  getTestIds: (testIdProp?: string | null | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
15
15
  }, import("styled-components").DefaultTheme, {}, never>;
16
16
  export declare const StyledDisclaimerText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
17
- export declare const StyledMessagesContainer: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
17
+ export declare const StyledMessagesContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
18
18
  export declare const StyledStarterMessageCard: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
19
19
  export declare const StyledStarterMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
20
20
  export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
@@ -26,4 +26,5 @@ export declare const StyledSuggestionsContainer: import("styled-components").Sty
26
26
  export declare const StyledTimeStamp: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
27
27
  export declare const StyledMessage: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
28
28
  export declare const StyledSuggestedMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
29
+ export declare const StyledMessagesList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
29
30
  //# sourceMappingURL=GenAICoach.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"GenAICoach.styles.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.styles.ts"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAEvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,oBAAoB,wGAAc,CAAC;AAEhD,eAAO,MAAM,yBAAyB;aAC3B,eAAe,CAAC,SAAS,CAAC;oBACnB,eAAe,CAAC,gBAAgB,CAAC;aACxC,oBAAoB,CAAC,SAAS,CAAC;SA0EzC,CAAC;AAIF,eAAO,MAAM,sBAAsB;;uDAqBjC,CAAC;AAIH,eAAO,MAAM,iBAAiB;;uDAc5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,mOAW/B,CAAC;AAIH,eAAO,MAAM,uBAAuB,wGAgBnC,CAAC;AAIF,eAAO,MAAM,wBAAwB,yGAWpC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,qOAE7B,CAAC;AAIF,eAAO,MAAM,6BAA6B,yGAUzC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAWhC,CAAC;AAIF,eAAO,MAAM,gBAAgB,qOAuB3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,qOAS3B,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAUtC,CAAC;AAIF,eAAO,MAAM,eAAe,mOAK1B,CAAC;AAIH,eAAO,MAAM,aAAa,uGAQxB,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAcjC,CAAC"}
1
+ {"version":3,"file":"GenAICoach.styles.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.styles.ts"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAEvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,oBAAoB,wGAAc,CAAC;AAEhD,eAAO,MAAM,yBAAyB;aAC3B,eAAe,CAAC,SAAS,CAAC;oBACnB,eAAe,CAAC,gBAAgB,CAAC;aACxC,oBAAoB,CAAC,SAAS,CAAC;SA0EzC,CAAC;AAIF,eAAO,MAAM,sBAAsB;;uDAqBjC,CAAC;AAIH,eAAO,MAAM,iBAAiB;;uDAc5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,mOAW/B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAWnC,CAAC;AAIF,eAAO,MAAM,wBAAwB,yGAWpC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,qOAE7B,CAAC;AAIF,eAAO,MAAM,6BAA6B,yGAUzC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAWhC,CAAC;AAIF,eAAO,MAAM,gBAAgB,qOAuB3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,qOAa3B,CAAC;AAIH,eAAO,MAAM,0BAA0B,yGAUtC,CAAC;AAIF,eAAO,MAAM,eAAe,mOAK1B,CAAC;AAIH,eAAO,MAAM,aAAa,uGAQxB,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAcjC,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGAkB9B,CAAC"}
@@ -98,15 +98,10 @@ export const StyledDisclaimerText = styled(Text)(({ theme: { base: { 'font-size'
98
98
  `;
99
99
  });
100
100
  StyledDisclaimerText.defaultProps = defaultThemeProp;
101
- export const StyledMessagesContainer = styled.ul(({ theme: { base: { spacing } } }) => {
101
+ export const StyledMessagesContainer = styled.div(({ theme: { base: { spacing } } }) => {
102
102
  return css `
103
- list-style-type: none;
104
103
  margin-block-end: calc(2 * ${spacing});
105
104
  overflow-y: auto;
106
-
107
- ${StyledMessageWrapper} {
108
- padding-block: ${spacing};
109
- }
110
105
  `;
111
106
  });
112
107
  StyledMessagesContainer.defaultProps = defaultThemeProp;
@@ -155,13 +150,13 @@ export const StyledChatButton = styled(Button)(({ theme: { base: { palette: { ai
155
150
  `;
156
151
  });
157
152
  StyledChatButton.defaultProps = defaultThemeProp;
158
- export const StyledSuggestion = styled(Button)(({ theme }) => {
153
+ export const StyledSuggestion = styled(Button)(({ theme: { base: { spacing } } }) => {
159
154
  return css `
160
155
  width: fit-content;
161
156
  & + & {
162
157
  margin-inline-start: 0;
163
158
  text-align: left;
164
- padding: ${theme.base.spacing};
159
+ padding: ${spacing};
165
160
  }
166
161
  `;
167
162
  });
@@ -205,4 +200,18 @@ export const StyledSuggestedMessage = styled.div(({ theme }) => {
205
200
  `;
206
201
  });
207
202
  StyledSuggestedMessage.defaultProps = defaultThemeProp;
203
+ export const StyledMessagesList = styled.ul(({ theme: { base: { shadow, spacing } } }) => {
204
+ return css `
205
+ padding-block-start: ${spacing};
206
+ list-style-type: none;
207
+ & > li[type='message'] {
208
+ &:focus-visible {
209
+ outline: none;
210
+ box-shadow: ${shadow.focus};
211
+ }
212
+ margin-block-end: ${spacing};
213
+ }
214
+ `;
215
+ });
216
+ StyledMessagesList.defaultProps = defaultThemeProp;
208
217
  //# sourceMappingURL=GenAICoach.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"GenAICoach.styles.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { useContext } from 'react';\n\nimport {\n AppShellContext,\n Button,\n MenuButton,\n StyledIcon,\n StyledText,\n Text,\n calculateFontSize,\n defaultThemeProp,\n getHoverColors\n} from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/RichTextEditor.styles';\n\nimport type { CaseViewContextValue } from '../CaseView/CaseView.types';\n\nimport type { GenAICoachProps } from './GenAICoach.types';\nimport { isInUtilities } from './GenAICoach.utils';\n\nexport const StyledMessageWrapper = styled.li``;\n\nexport const StyledGenAICoachContainer = styled.div<{\n variant: GenAICoachProps['variant'];\n starterMessage: GenAICoachProps['starterMessage'];\n aboveLG: CaseViewContextValue['aboveLG'];\n}>(\n ({\n theme: {\n base: { palette, 'z-index': zIndex, spacing, breakpoints },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n variant,\n aboveLG,\n starterMessage\n }) => {\n const { previewActive } = useContext(AppShellContext);\n\n return css`\n background: ${palette['primary-background']};\n min-width: var(--utilities-drawer-min-width);\n border-radius: ${borderRadius};\n ${isInUtilities(variant) &&\n css`\n min-height: 3rem;\n max-width: 31.25rem;\n box-shadow: 0 -1rem 1rem ${palette['app-background']};\n position: fixed;\n inset-block-end: calc(2 * ${spacing});\n inset-inline-end: calc(2 * ${spacing});\n z-index: calc(${zIndex.drawer} + 1);\n ${aboveLG\n ? css`\n width: 25rem;\n `\n : css`\n width: calc(var(--utilities-drawer-width) - 2rem);\n `}\n\n ${previewActive &&\n css`\n @media (min-width: ${breakpoints.xl}) {\n margin-inline-end: clamp(21.875rem, (100vw - 31.25rem) / 10 + 21.875rem, 31.25rem);\n }\n `}\n\n ${(variant.state === 'minimized' || starterMessage) &&\n css`\n max-height: 20rem;\n height: 20rem;\n `}\n\n ${variant.state === 'docked' &&\n css`\n height: 3rem;\n `}\n\n\n &::after {\n content: '';\n height: calc(2 * ${spacing});\n width: 100%;\n background: ${palette['app-background']};\n position: fixed;\n inset-block-end: 0;\n z-index: calc(${zIndex.drawer} + 1);\n }\n `}\n\n /** 85 percent of Utilities height */\n ${!starterMessage &&\n ((isInUtilities(variant) && variant.state === 'maximized') || !isInUtilities(variant)) &&\n css`\n height: calc(0.85 * var(--case-view-height, 95vh));\n `}\n `;\n }\n);\n\nStyledGenAICoachContainer.defaultProps = defaultThemeProp;\n\nexport const StyledGenAIOptionsMenu = styled(MenuButton)(({\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'font-weight': fontWeight,\n palette: { ai }\n }\n }\n}) => {\n const { l } = calculateFontSize(fontSize, fontScale);\n return css`\n color: inherit;\n ${StyledIcon}:first-child {\n color: ${ai};\n }\n ${StyledText} {\n font-weight: ${fontWeight['semi-bold']};\n font-size: ${l};\n }\n `;\n});\n\nStyledGenAIOptionsMenu.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestions = styled(MenuButton)(({\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { ai }\n }\n }\n}) => {\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n return css`\n color: ${ai};\n font-size: ${buttonFontSize};\n `;\n});\n\nStyledSuggestions.defaultProps = defaultThemeProp;\n\nexport const StyledDisclaimerText = styled(Text)(({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }\n }\n}) => {\n const systemFontSize = calculateFontSize(fontSize, fontScale).xs;\n return css`\n font-size: ${systemFontSize};\n margin-block-start: ${spacing};\n opacity: 0.7;\n `;\n});\n\nStyledDisclaimerText.defaultProps = defaultThemeProp;\n\nexport const StyledMessagesContainer = styled.ul(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n list-style-type: none;\n margin-block-end: calc(2 * ${spacing});\n overflow-y: auto;\n\n ${StyledMessageWrapper} {\n padding-block: ${spacing};\n }\n `;\n }\n);\n\nStyledMessagesContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStarterMessageCard = styled.div(\n ({\n theme: {\n base: { palette, 'border-radius': borderRadius }\n }\n }) => {\n return css`\n border: 0.0625rem solid ${palette['border-line']};\n border-radius: calc(0.5 * ${borderRadius});\n `;\n }\n);\n\nStyledStarterMessageCard.defaultProps = defaultThemeProp;\n\nexport const StyledStarterMessage = styled.div`\n ${lineClamp(10)}\n`;\n\nexport const StyledCloseButton = styled(Button)`\n align-self: flex-start;\n`;\n\nStyledCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInitialMessageContainer = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n margin-block: calc(2 * ${spacing});\n `;\n }\n);\n\nStyledInitialMessageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledInputContainer = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n margin-block-end: calc(2 * ${spacing});\n margin-inline: calc(2 * ${spacing});\n `;\n }\n);\n\nStyledInputContainer.defaultProps = defaultThemeProp;\n\nexport const StyledChatButton = styled(Button)(({\n theme: {\n base: {\n palette: { ai, 'primary-background': primaryBackground },\n spacing\n }\n }\n}) => {\n const hoverColors = getHoverColors(ai);\n return css`\n background-color: ${ai};\n color: ${primaryBackground};\n border: none;\n margin: ${spacing};\n &:hover {\n background-color: ${hoverColors.background};\n color: ${hoverColors.foreground};\n border: none;\n }\n &:focus {\n border: none;\n }\n `;\n});\n\nStyledChatButton.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestion = styled(Button)(({ theme }) => {\n return css`\n width: fit-content;\n & + & {\n margin-inline-start: 0;\n text-align: left;\n padding: ${theme.base.spacing};\n }\n `;\n});\n\nStyledSuggestion.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestionsContainer = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n margin-block-start: calc(1.5 * ${spacing});\n `;\n }\n);\n\nStyledSuggestionsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledTimeStamp = styled(Text)(() => {\n return css`\n display: flex;\n align-items: center;\n `;\n});\n\nStyledTimeStamp.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.p(({ theme }) => {\n return css`\n margin-block-start: calc(0.5 * ${theme.base.spacing});\n overflow-wrap: break-word;\n ${StyledEditorContainer} {\n padding: 0;\n }\n `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestedMessage = styled.div(({ theme }) => {\n return css`\n column-gap: calc(2 * ${theme.base.spacing});\n min-height: 2rem;\n text-align: left;\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n padding-inline-end: calc(2 * ${theme.base.spacing});\n cursor: pointer;\n &:hover,\n &:focus {\n border: 0.0625rem solid ${theme.base.palette.interactive};\n }\n `;\n});\n\nStyledSuggestedMessage.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"GenAICoach.styles.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { useContext } from 'react';\n\nimport {\n AppShellContext,\n Button,\n MenuButton,\n StyledIcon,\n StyledText,\n Text,\n calculateFontSize,\n defaultThemeProp,\n getHoverColors\n} from '@pega/cosmos-react-core';\nimport { lineClamp } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/RichTextEditor.styles';\n\nimport type { CaseViewContextValue } from '../CaseView/CaseView.types';\n\nimport type { GenAICoachProps } from './GenAICoach.types';\nimport { isInUtilities } from './GenAICoach.utils';\n\nexport const StyledMessageWrapper = styled.li``;\n\nexport const StyledGenAICoachContainer = styled.div<{\n variant: GenAICoachProps['variant'];\n starterMessage: GenAICoachProps['starterMessage'];\n aboveLG: CaseViewContextValue['aboveLG'];\n}>(\n ({\n theme: {\n base: { palette, 'z-index': zIndex, spacing, breakpoints },\n components: {\n card: { 'border-radius': borderRadius }\n }\n },\n variant,\n aboveLG,\n starterMessage\n }) => {\n const { previewActive } = useContext(AppShellContext);\n\n return css`\n background: ${palette['primary-background']};\n min-width: var(--utilities-drawer-min-width);\n border-radius: ${borderRadius};\n ${isInUtilities(variant) &&\n css`\n min-height: 3rem;\n max-width: 31.25rem;\n box-shadow: 0 -1rem 1rem ${palette['app-background']};\n position: fixed;\n inset-block-end: calc(2 * ${spacing});\n inset-inline-end: calc(2 * ${spacing});\n z-index: calc(${zIndex.drawer} + 1);\n ${aboveLG\n ? css`\n width: 25rem;\n `\n : css`\n width: calc(var(--utilities-drawer-width) - 2rem);\n `}\n\n ${previewActive &&\n css`\n @media (min-width: ${breakpoints.xl}) {\n margin-inline-end: clamp(21.875rem, (100vw - 31.25rem) / 10 + 21.875rem, 31.25rem);\n }\n `}\n\n ${(variant.state === 'minimized' || starterMessage) &&\n css`\n max-height: 20rem;\n height: 20rem;\n `}\n\n ${variant.state === 'docked' &&\n css`\n height: 3rem;\n `}\n\n\n &::after {\n content: '';\n height: calc(2 * ${spacing});\n width: 100%;\n background: ${palette['app-background']};\n position: fixed;\n inset-block-end: 0;\n z-index: calc(${zIndex.drawer} + 1);\n }\n `}\n\n /** 85 percent of Utilities height */\n ${!starterMessage &&\n ((isInUtilities(variant) && variant.state === 'maximized') || !isInUtilities(variant)) &&\n css`\n height: calc(0.85 * var(--case-view-height, 95vh));\n `}\n `;\n }\n);\n\nStyledGenAICoachContainer.defaultProps = defaultThemeProp;\n\nexport const StyledGenAIOptionsMenu = styled(MenuButton)(({\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'font-weight': fontWeight,\n palette: { ai }\n }\n }\n}) => {\n const { l } = calculateFontSize(fontSize, fontScale);\n return css`\n color: inherit;\n ${StyledIcon}:first-child {\n color: ${ai};\n }\n ${StyledText} {\n font-weight: ${fontWeight['semi-bold']};\n font-size: ${l};\n }\n `;\n});\n\nStyledGenAIOptionsMenu.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestions = styled(MenuButton)(({\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n palette: { ai }\n }\n }\n}) => {\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n return css`\n color: ${ai};\n font-size: ${buttonFontSize};\n `;\n});\n\nStyledSuggestions.defaultProps = defaultThemeProp;\n\nexport const StyledDisclaimerText = styled(Text)(({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }\n }\n}) => {\n const systemFontSize = calculateFontSize(fontSize, fontScale).xs;\n return css`\n font-size: ${systemFontSize};\n margin-block-start: ${spacing};\n opacity: 0.7;\n `;\n});\n\nStyledDisclaimerText.defaultProps = defaultThemeProp;\n\nexport const StyledMessagesContainer = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n margin-block-end: calc(2 * ${spacing});\n overflow-y: auto;\n `;\n }\n);\n\nStyledMessagesContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStarterMessageCard = styled.div(\n ({\n theme: {\n base: { palette, 'border-radius': borderRadius }\n }\n }) => {\n return css`\n border: 0.0625rem solid ${palette['border-line']};\n border-radius: calc(0.5 * ${borderRadius});\n `;\n }\n);\n\nStyledStarterMessageCard.defaultProps = defaultThemeProp;\n\nexport const StyledStarterMessage = styled.div`\n ${lineClamp(10)}\n`;\n\nexport const StyledCloseButton = styled(Button)`\n align-self: flex-start;\n`;\n\nStyledCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInitialMessageContainer = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n margin-block: calc(2 * ${spacing});\n `;\n }\n);\n\nStyledInitialMessageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledInputContainer = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n margin-block-end: calc(2 * ${spacing});\n margin-inline: calc(2 * ${spacing});\n `;\n }\n);\n\nStyledInputContainer.defaultProps = defaultThemeProp;\n\nexport const StyledChatButton = styled(Button)(({\n theme: {\n base: {\n palette: { ai, 'primary-background': primaryBackground },\n spacing\n }\n }\n}) => {\n const hoverColors = getHoverColors(ai);\n return css`\n background-color: ${ai};\n color: ${primaryBackground};\n border: none;\n margin: ${spacing};\n &:hover {\n background-color: ${hoverColors.background};\n color: ${hoverColors.foreground};\n border: none;\n }\n &:focus {\n border: none;\n }\n `;\n});\n\nStyledChatButton.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestion = styled(Button)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n width: fit-content;\n & + & {\n margin-inline-start: 0;\n text-align: left;\n padding: ${spacing};\n }\n `;\n});\n\nStyledSuggestion.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestionsContainer = styled.div(\n ({\n theme: {\n base: { spacing }\n }\n }) => {\n return css`\n margin-block-start: calc(1.5 * ${spacing});\n `;\n }\n);\n\nStyledSuggestionsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledTimeStamp = styled(Text)(() => {\n return css`\n display: flex;\n align-items: center;\n `;\n});\n\nStyledTimeStamp.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.p(({ theme }) => {\n return css`\n margin-block-start: calc(0.5 * ${theme.base.spacing});\n overflow-wrap: break-word;\n ${StyledEditorContainer} {\n padding: 0;\n }\n `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestedMessage = styled.div(({ theme }) => {\n return css`\n column-gap: calc(2 * ${theme.base.spacing});\n min-height: 2rem;\n text-align: left;\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n padding-inline-end: calc(2 * ${theme.base.spacing});\n cursor: pointer;\n &:hover,\n &:focus {\n border: 0.0625rem solid ${theme.base.palette.interactive};\n }\n `;\n});\n\nStyledSuggestedMessage.defaultProps = defaultThemeProp;\n\nexport const StyledMessagesList = styled.ul(\n ({\n theme: {\n base: { shadow, spacing }\n }\n }) => {\n return css`\n padding-block-start: ${spacing};\n list-style-type: none;\n & > li[type='message'] {\n &:focus-visible {\n outline: none;\n box-shadow: ${shadow.focus};\n }\n margin-block-end: ${spacing};\n }\n `;\n }\n);\n\nStyledMessagesList.defaultProps = defaultThemeProp;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"GenAIMessage.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAiB/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAO5D,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA+DtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"GenAIMessage.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAiB/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAO5D,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAwFtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -10,15 +10,23 @@ const GenAIMessage = function GenAIMessage(props) {
10
10
  const testIds = useTestIds(props.testId, getGenAICoachTestIds);
11
11
  const theme = useTheme();
12
12
  const t = useI18n();
13
+ const { message, ...restProps } = props;
14
+ let ariaLabel = message;
13
15
  if (isCoachMessage(props)) {
14
- const { coachName, message, suggestions, onSend, loading, error } = props;
15
- return (_jsxs(Flex, { container: { direction: 'column' }, "data-testid": testIds.root, children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid', color: theme.base.palette.ai, size: 's' }), _jsx(Text, { as: 'span', variant: 'h4', children: coachName })] }), _jsx(StyledMessage, { children: loading || error ? (_jsx(_Fragment, { children: loading ? (_jsx(Progress, { variant: 'ellipsis', placement: 'inline' })) : (_jsx(ErrorState, { message: error })) })) : (_jsxs(_Fragment, { children: [message && _jsx(RichTextViewer, { content: message, type: 'markdown' }), suggestions && (_jsx(Flex, { as: StyledSuggestionsContainer, container: { direction: 'column', gap: 1 }, children: suggestions.map(({ id, message: prompt }) => {
16
+ const { coachName, suggestions, onSend, loading, error } = props;
17
+ ariaLabel =
18
+ suggestions && suggestions.length > 0
19
+ ? `${t('sender_replied_message', [coachName, message || ''])} ${t('suggestions_in_message', [suggestions.length])}`
20
+ : t('sender_replied_message', [coachName, message || '']);
21
+ return (_jsxs(Flex, { as: 'li', "data-testid": testIds.root, ...restProps, container: { direction: 'column', pad: [1, 0] }, type: 'message', "aria-label": ariaLabel, children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid', color: theme.base.palette.ai, size: 's' }), _jsx(Text, { as: 'span', variant: 'h4', children: coachName })] }), _jsx(StyledMessage, { children: loading || error ? (_jsx(_Fragment, { children: loading ? (_jsx(Progress, { variant: 'ellipsis', placement: 'inline' })) : (_jsx(ErrorState, { message: error })) })) : (_jsxs(_Fragment, { children: [message && _jsx(RichTextViewer, { content: message, type: 'markdown' }), suggestions && (_jsx(Flex, { as: StyledSuggestionsContainer, container: { direction: 'column', gap: 1 }, children: suggestions.map(({ id, message: prompt }) => {
16
22
  return (_jsx(Button, { as: StyledSuggestion, onClick: onSend ? () => onSend({ id, message: prompt }) : undefined, children: prompt }, id));
17
23
  }) }))] })) })] }));
18
24
  }
19
25
  if (isUserMessage(props)) {
20
- const { message } = props;
21
- return (_jsxs(Flex, { container: { direction: 'column' }, "data-testid": testIds.root, children: [_jsx(Text, { as: 'span', variant: 'h4', children: t('you') }), _jsx(StyledMessage, { children: message && _jsx(RichTextViewer, { content: message, type: 'markdown' }) })] }));
26
+ if (message) {
27
+ ariaLabel = t('you_asked', [message]);
28
+ }
29
+ return (_jsxs(Flex, { as: 'li', "data-testid": testIds.root, ...restProps, container: { direction: 'column', pad: [1, 0] }, type: 'message', "aria-label": ariaLabel, children: [_jsx(Text, { as: 'span', variant: 'h4', children: t('you') }), _jsx(StyledMessage, { children: message && _jsx(RichTextViewer, { content: message, type: 'markdown' }) })] }));
22
30
  }
23
31
  return null;
24
32
  };
@@ -1 +1 @@
1
- {"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport {\n Button,\n Flex,\n Icon,\n Progress,\n registerIcon,\n useI18n,\n useTheme,\n Text,\n useTestIds,\n ErrorState\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport type { GenAIMessageProps } from './GenAICoach.types';\nimport { StyledMessage, StyledSuggestion, StyledSuggestionsContainer } from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\n\nregisterIcon(polarisSolidIcon);\n\nconst GenAIMessage: FunctionComponent<GenAIMessageProps> = function GenAIMessage(props) {\n const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n const theme = useTheme();\n const t = useI18n();\n if (isCoachMessage(props)) {\n const { coachName, message, suggestions, onSend, loading, error } = props;\n return (\n <Flex container={{ direction: 'column' }} data-testid={testIds.root}>\n <Flex container={{ gap: 1 }}>\n <Icon name='polaris-solid' color={theme.base.palette.ai} size='s' />\n <Text as='span' variant='h4'>\n {coachName}\n </Text>\n </Flex>\n <StyledMessage>\n {loading || error ? (\n <>\n {loading ? (\n <Progress variant='ellipsis' placement='inline' />\n ) : (\n <ErrorState message={error} />\n )}\n </>\n ) : (\n <>\n {message && <RichTextViewer content={message} type='markdown' />}\n {suggestions && (\n <Flex as={StyledSuggestionsContainer} container={{ direction: 'column', gap: 1 }}>\n {suggestions.map(({ id, message: prompt }) => {\n return (\n <Button\n as={StyledSuggestion}\n onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n key={id}\n >\n {prompt}\n </Button>\n );\n })}\n </Flex>\n )}\n </>\n )}\n </StyledMessage>\n </Flex>\n );\n }\n\n if (isUserMessage(props)) {\n const { message } = props;\n return (\n <Flex container={{ direction: 'column' }} data-testid={testIds.root}>\n <Text as='span' variant='h4'>\n {t('you')}\n </Text>\n <StyledMessage>\n {message && <RichTextViewer content={message} type='markdown' />}\n </StyledMessage>\n </Flex>\n );\n }\n\n return null;\n};\n\nexport default GenAIMessage;\n"]}
1
+ {"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport {\n Button,\n Flex,\n Icon,\n Progress,\n registerIcon,\n useI18n,\n useTheme,\n Text,\n useTestIds,\n ErrorState\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nimport type { GenAIMessageProps } from './GenAICoach.types';\nimport { StyledMessage, StyledSuggestion, StyledSuggestionsContainer } from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\n\nregisterIcon(polarisSolidIcon);\n\nconst GenAIMessage: FunctionComponent<GenAIMessageProps> = function GenAIMessage(props) {\n const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n const theme = useTheme();\n const t = useI18n();\n\n const { message, ...restProps } = props;\n let ariaLabel = message;\n\n if (isCoachMessage(props)) {\n const { coachName, suggestions, onSend, loading, error } = props;\n ariaLabel =\n suggestions && suggestions.length > 0\n ? `${t('sender_replied_message', [coachName, message || ''])} ${t('suggestions_in_message', [suggestions.length])}`\n : t('sender_replied_message', [coachName, message || '']);\n\n return (\n <Flex\n as='li'\n data-testid={testIds.root}\n {...restProps}\n container={{ direction: 'column', pad: [1, 0] }}\n type='message'\n aria-label={ariaLabel}\n >\n <Flex container={{ gap: 1 }}>\n <Icon name='polaris-solid' color={theme.base.palette.ai} size='s' />\n <Text as='span' variant='h4'>\n {coachName}\n </Text>\n </Flex>\n <StyledMessage>\n {loading || error ? (\n <>\n {loading ? (\n <Progress variant='ellipsis' placement='inline' />\n ) : (\n <ErrorState message={error} />\n )}\n </>\n ) : (\n <>\n {message && <RichTextViewer content={message} type='markdown' />}\n {suggestions && (\n <Flex as={StyledSuggestionsContainer} container={{ direction: 'column', gap: 1 }}>\n {suggestions.map(({ id, message: prompt }) => {\n return (\n <Button\n as={StyledSuggestion}\n onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n key={id}\n >\n {prompt}\n </Button>\n );\n })}\n </Flex>\n )}\n </>\n )}\n </StyledMessage>\n </Flex>\n );\n }\n\n if (isUserMessage(props)) {\n if (message) {\n ariaLabel = t('you_asked', [message]);\n }\n return (\n <Flex\n as='li'\n data-testid={testIds.root}\n {...restProps}\n container={{ direction: 'column', pad: [1, 0] }}\n type='message'\n aria-label={ariaLabel}\n >\n <Text as='span' variant='h4'>\n {t('you')}\n </Text>\n <StyledMessage>\n {message && <RichTextViewer content={message} type='markdown' />}\n </StyledMessage>\n </Flex>\n );\n }\n\n return null;\n};\n\nexport default GenAIMessage;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-work",
3
- "version": "7.0.0-build.22.16",
3
+ "version": "7.0.0-build.22.18",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,8 +19,8 @@
19
19
  "build": "tsc -b tsconfig.build.json"
20
20
  },
21
21
  "dependencies": {
22
- "@pega/cosmos-react-core": "7.0.0-build.22.16",
23
- "@pega/cosmos-react-rte": "7.0.0-build.22.16",
22
+ "@pega/cosmos-react-core": "7.0.0-build.22.18",
23
+ "@pega/cosmos-react-rte": "7.0.0-build.22.18",
24
24
  "@types/react": "^17.0.62",
25
25
  "@types/react-dom": "^17.0.20",
26
26
  "@types/styled-components": "^5.1.26",