@pega/cosmos-react-work 9.0.0-build.24.0 → 9.0.0-build.24.1
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.
- package/lib/components/GenAICoach/ActiveCases.d.ts +5 -0
- package/lib/components/GenAICoach/ActiveCases.d.ts.map +1 -0
- package/lib/components/GenAICoach/ActiveCases.js +42 -0
- package/lib/components/GenAICoach/ActiveCases.js.map +1 -0
- package/lib/components/GenAICoach/CaseWorkflow.d.ts +5 -0
- package/lib/components/GenAICoach/CaseWorkflow.d.ts.map +1 -0
- package/lib/components/GenAICoach/CaseWorkflow.js +100 -0
- package/lib/components/GenAICoach/CaseWorkflow.js.map +1 -0
- package/lib/components/GenAICoach/GenAICoach.d.ts +1 -1
- package/lib/components/GenAICoach/GenAICoach.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.js +18 -6
- package/lib/components/GenAICoach/GenAICoach.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts +759 -0
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.js +211 -2
- package/lib/components/GenAICoach/GenAICoach.styles.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.types.d.ts +37 -3
- package/lib/components/GenAICoach/GenAICoach.types.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.types.js.map +1 -1
- package/lib/components/GenAICoach/index.d.ts +1 -1
- package/lib/components/GenAICoach/index.d.ts.map +1 -1
- package/lib/components/GenAICoach/index.js.map +1 -1
- package/lib/components/Stages/Stages.d.ts.map +1 -1
- package/lib/components/Stages/Stages.js +16 -13
- package/lib/components/Stages/Stages.js.map +1 -1
- package/lib/components/Stages/Stages.styles.d.ts +4 -1
- package/lib/components/Stages/Stages.styles.d.ts.map +1 -1
- package/lib/components/Stages/Stages.styles.js +49 -27
- package/lib/components/Stages/Stages.styles.js.map +1 -1
- package/lib/components/Stages/Stages.types.d.ts +5 -0
- package/lib/components/Stages/Stages.types.d.ts.map +1 -1
- package/lib/components/Stages/Stages.types.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
|
|
2
|
+
import type { ActiveCasesProps } from './GenAICoach.types';
|
|
3
|
+
declare const ActiveCases: ForwardRefForwardPropsComponent<ActiveCasesProps>;
|
|
4
|
+
export default ActiveCases;
|
|
5
|
+
//# sourceMappingURL=ActiveCases.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActiveCases.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/ActiveCases.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAM/E,OAAO,KAAK,EAAE,gBAAgB,EAAkB,MAAM,oBAAoB,CAAC;AA2B3E,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAwElE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useCallback, forwardRef } from 'react';
|
|
3
|
+
import { Icon, Count, Flex, InfoDialog, useI18n, useElement, useConsolidatedRef, registerIcon } from '@pega/cosmos-react-core';
|
|
4
|
+
import * as caseIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/case.icon';
|
|
5
|
+
import Stages from '../Stages';
|
|
6
|
+
import { StyledActiveCaseButton, StyledActiveCasesList, StyledActiveCaseName, StyledActiveCaseStages } from './GenAICoach.styles';
|
|
7
|
+
registerIcon(caseIcon);
|
|
8
|
+
const toStageProps = (bannerStages) => bannerStages.map(s => ({
|
|
9
|
+
id: s.id,
|
|
10
|
+
name: s.name,
|
|
11
|
+
completed: s.completed ?? false,
|
|
12
|
+
steps: s.steps?.map((step) => ({
|
|
13
|
+
id: step.id,
|
|
14
|
+
name: step.name,
|
|
15
|
+
completed: step.completed ?? false
|
|
16
|
+
}))
|
|
17
|
+
}));
|
|
18
|
+
const findCurrentStageId = (bannerStages) => bannerStages.find(s => s.current)?.id ?? bannerStages[0]?.id ?? '';
|
|
19
|
+
const ActiveCases = forwardRef(function ActiveCases({ activeCases, ...restProps }, ref) {
|
|
20
|
+
const t = useI18n();
|
|
21
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
22
|
+
const [triggerEl, setTriggerEl] = useElement();
|
|
23
|
+
const triggerRef = useConsolidatedRef(ref, setTriggerEl);
|
|
24
|
+
const label = t('active_cases');
|
|
25
|
+
const toggleDialog = useCallback(() => {
|
|
26
|
+
setIsOpen(prev => !prev);
|
|
27
|
+
}, []);
|
|
28
|
+
const dismissDialog = useCallback(() => {
|
|
29
|
+
setIsOpen(false);
|
|
30
|
+
}, []);
|
|
31
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: StyledActiveCaseButton, ...restProps, ref: triggerRef, type: 'button', onClick: toggleDialog, "aria-expanded": isOpen, "aria-label": t('active_cases_trigger', [activeCases.length]), children: [_jsx(Icon, { name: 'case' }), label, _jsx(Count, { children: activeCases.length })] }), isOpen && triggerEl && (_jsx(InfoDialog, { heading: label, target: triggerEl, onDismiss: dismissDialog, children: _jsx(StyledActiveCasesList, { container: { direction: 'column', gap: 4 }, children: activeCases.map(caseItem => {
|
|
32
|
+
const stageProps = toStageProps(caseItem.stages);
|
|
33
|
+
const currentId = findCurrentStageId(caseItem.stages);
|
|
34
|
+
const handleCaseClick = e => {
|
|
35
|
+
dismissDialog();
|
|
36
|
+
caseItem.onHeadingClick?.(e);
|
|
37
|
+
};
|
|
38
|
+
return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(StyledActiveCaseName, { variant: 'link', onClick: handleCaseClick, children: caseItem.heading }), _jsx(StyledActiveCaseStages, { children: _jsx(Stages, { stages: stageProps, current: currentId, readOnly: true }) })] }, caseItem.id));
|
|
39
|
+
}) }) }))] }));
|
|
40
|
+
});
|
|
41
|
+
export default ActiveCases;
|
|
42
|
+
//# sourceMappingURL=ActiveCases.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActiveCases.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/ActiveCases.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useCallback, forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Icon,\n Count,\n Flex,\n InfoDialog,\n useI18n,\n useElement,\n useConsolidatedRef,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport * as caseIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/case.icon';\n\nimport Stages from '../Stages';\nimport type { StageProps, StepProps } from '../Stages/Stages.types';\n\nimport type { ActiveCasesProps, ActiveCaseItem } from './GenAICoach.types';\nimport {\n StyledActiveCaseButton,\n StyledActiveCasesList,\n StyledActiveCaseName,\n StyledActiveCaseStages\n} from './GenAICoach.styles';\n\nregisterIcon(caseIcon);\n\nconst toStageProps = (bannerStages: ActiveCaseItem['stages']): StageProps[] =>\n bannerStages.map(s => ({\n id: s.id,\n name: s.name,\n completed: s.completed ?? false,\n steps: s.steps?.map(\n (step): StepProps => ({\n id: step.id,\n name: step.name,\n completed: step.completed ?? false\n })\n )\n }));\n\nconst findCurrentStageId = (bannerStages: ActiveCaseItem['stages']): string =>\n bannerStages.find(s => s.current)?.id ?? bannerStages[0]?.id ?? '';\n\nconst ActiveCases: ForwardRefForwardPropsComponent<ActiveCasesProps> = forwardRef(\n function ActiveCases(\n { activeCases, ...restProps }: PropsWithoutRef<ActiveCasesProps>,\n ref: ActiveCasesProps['ref']\n ) {\n const t = useI18n();\n\n const [isOpen, setIsOpen] = useState(false);\n\n const [triggerEl, setTriggerEl] = useElement<HTMLButtonElement>();\n\n const triggerRef = useConsolidatedRef<HTMLButtonElement>(ref, setTriggerEl);\n\n const label = t('active_cases');\n\n const toggleDialog = useCallback(() => {\n setIsOpen(prev => !prev);\n }, []);\n\n const dismissDialog = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n return (\n <>\n <Flex\n container={{ alignItems: 'center', gap: 1 }}\n as={StyledActiveCaseButton}\n {...restProps}\n ref={triggerRef}\n type='button'\n onClick={toggleDialog}\n aria-expanded={isOpen}\n aria-label={t('active_cases_trigger', [activeCases.length])}\n >\n <Icon name='case' />\n\n {label}\n\n <Count>{activeCases.length}</Count>\n </Flex>\n\n {isOpen && triggerEl && (\n <InfoDialog heading={label} target={triggerEl} onDismiss={dismissDialog}>\n <StyledActiveCasesList container={{ direction: 'column', gap: 4 }}>\n {activeCases.map(caseItem => {\n const stageProps = toStageProps(caseItem.stages);\n const currentId = findCurrentStageId(caseItem.stages);\n\n const handleCaseClick: ActiveCaseItem['onHeadingClick'] = e => {\n dismissDialog();\n caseItem.onHeadingClick?.(e);\n };\n\n return (\n <Flex key={caseItem.id} container={{ direction: 'column', gap: 1 }}>\n <StyledActiveCaseName variant='link' onClick={handleCaseClick}>\n {caseItem.heading}\n </StyledActiveCaseName>\n\n <StyledActiveCaseStages>\n <Stages stages={stageProps} current={currentId} readOnly />\n </StyledActiveCaseStages>\n </Flex>\n );\n })}\n </StyledActiveCasesList>\n </InfoDialog>\n )}\n </>\n );\n }\n);\n\nexport default ActiveCases;\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
|
|
2
|
+
import type { CaseWorkflowProps } from './GenAICoach.types';
|
|
3
|
+
declare const CaseWorkflow: ForwardRefForwardPropsComponent<CaseWorkflowProps>;
|
|
4
|
+
export default CaseWorkflow;
|
|
5
|
+
//# sourceMappingURL=CaseWorkflow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CaseWorkflow.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/CaseWorkflow.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAM/E,OAAO,KAAK,EAAE,iBAAiB,EAA0B,MAAM,oBAAoB,CAAC;AA2CpF,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CA2LpE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useCallback, forwardRef, useMemo, useEffect } from 'react';
|
|
3
|
+
import { parseToHsl } from 'polished';
|
|
4
|
+
import { Icon, Button, Tooltip, ExpandCollapse, useConsolidatedRef, useElement, useI18n, useTheme, tryCatch, StyledIconShape, registerIcon } from '@pega/cosmos-react-core';
|
|
5
|
+
import * as chevronIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chevron.icon';
|
|
6
|
+
import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
|
|
7
|
+
import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
|
|
8
|
+
import VerticalFormProgress from '@pega/cosmos-react-core/lib/components/MultiStepForm/VerticalFormProgress';
|
|
9
|
+
import { StyledCaseWorkflowBanner, StyledCaseIdentity, StyledCaseIconWrapper, StyledCaseTitle, StyledCaseTitleText, StyledWorkflowControls, StyledProgressLabel, StyledWorkflowInfoDialog, StyledStageList, StyledStageButton, StyledStepsContainer, StyledCaseViewIcon, StyledCaseViewImage } from './GenAICoach.styles';
|
|
10
|
+
registerIcon(chevronIcon, timesIcon, caretDownIcon);
|
|
11
|
+
const getEffectiveCurrentStepId = (stage) => {
|
|
12
|
+
const { steps } = stage;
|
|
13
|
+
if (!steps || steps.length === 0)
|
|
14
|
+
return undefined;
|
|
15
|
+
if (stage.current && stage.currentStepId)
|
|
16
|
+
return stage.currentStepId;
|
|
17
|
+
if (stage.completed)
|
|
18
|
+
return steps[steps.length - 1].id;
|
|
19
|
+
return steps[0].id;
|
|
20
|
+
};
|
|
21
|
+
const getCurrentStageAndStep = (stages) => {
|
|
22
|
+
const stage = stages.find(s => s.current);
|
|
23
|
+
if (!stage)
|
|
24
|
+
return undefined;
|
|
25
|
+
const step = stage.currentStepId
|
|
26
|
+
? stage.steps?.find(s => s.id === stage.currentStepId)
|
|
27
|
+
: undefined;
|
|
28
|
+
return { stageName: stage.name, stepName: step?.name };
|
|
29
|
+
};
|
|
30
|
+
const CaseWorkflow = forwardRef(function CaseWorkflow({ heading, icon, stages, onHeadingClick, ...restProps }, ref) {
|
|
31
|
+
const t = useI18n();
|
|
32
|
+
const theme = useTheme();
|
|
33
|
+
const rootRef = useConsolidatedRef(ref);
|
|
34
|
+
const [workflowBtnEl, setWorkflowBtnEl] = useElement();
|
|
35
|
+
const [titleEl, setTitleEl] = useElement();
|
|
36
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
37
|
+
const [hasBrokenImage, setHasBrokenImage] = useState();
|
|
38
|
+
const currentStageId = stages.find(s => s.current)?.id;
|
|
39
|
+
const [expandedStages, setExpandedStages] = useState(() => {
|
|
40
|
+
const initial = new Set();
|
|
41
|
+
if (currentStageId)
|
|
42
|
+
initial.add(currentStageId);
|
|
43
|
+
return initial;
|
|
44
|
+
});
|
|
45
|
+
const toggleStage = useCallback((stageId) => {
|
|
46
|
+
setExpandedStages(prev => {
|
|
47
|
+
const next = new Set(prev);
|
|
48
|
+
if (next.has(stageId)) {
|
|
49
|
+
next.delete(stageId);
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
next.add(stageId);
|
|
53
|
+
}
|
|
54
|
+
return next;
|
|
55
|
+
});
|
|
56
|
+
}, []);
|
|
57
|
+
const toggleDialog = useCallback(() => {
|
|
58
|
+
setIsOpen(prev => !prev);
|
|
59
|
+
}, []);
|
|
60
|
+
const closeDialog = useCallback(() => {
|
|
61
|
+
setIsOpen(false);
|
|
62
|
+
}, []);
|
|
63
|
+
const iconForeground = theme.components['case-view'].icon.color !== 'auto'
|
|
64
|
+
? theme.components['case-view'].icon.color
|
|
65
|
+
: theme.components['case-view'].header['foreground-color'];
|
|
66
|
+
const iconBackground = useMemo(() => {
|
|
67
|
+
if (theme.components['case-view'].icon.background !== 'auto') {
|
|
68
|
+
return theme.components['case-view'].icon.background;
|
|
69
|
+
}
|
|
70
|
+
return tryCatch(() => {
|
|
71
|
+
const { lightness } = parseToHsl(theme.components['case-view'].header['background-color']);
|
|
72
|
+
return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';
|
|
73
|
+
}, () => 'transparent');
|
|
74
|
+
}, [theme]);
|
|
75
|
+
const showIcon = !!icon && !hasBrokenImage;
|
|
76
|
+
const currentInfo = getCurrentStageAndStep(stages);
|
|
77
|
+
const stageStepLabel = currentInfo
|
|
78
|
+
? `${currentInfo.stageName}${currentInfo.stepName ? `: ${currentInfo.stepName}` : ''}`
|
|
79
|
+
: undefined;
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
setHasBrokenImage(undefined);
|
|
82
|
+
}, [typeof icon === 'string' ? icon : icon?.href]);
|
|
83
|
+
return (_jsxs(_Fragment, { children: [_jsxs(StyledCaseWorkflowBanner, { container: { alignItems: 'center', justify: 'between', gap: 0.75 }, ...restProps, ref: rootRef, children: [_jsxs(StyledCaseIdentity, { container: { alignItems: 'center', gap: 0.75 }, children: [showIcon && (_jsx(StyledCaseIconWrapper, { children: typeof icon === 'string' ? (_jsx(StyledCaseViewIcon, { name: icon, foreground: iconForeground, background: iconBackground })) : (_jsx(StyledIconShape, { background: iconBackground, children: _jsx(StyledCaseViewImage, { src: icon?.href, alt: t('case_image'), onLoad: () => {
|
|
84
|
+
setHasBrokenImage(false);
|
|
85
|
+
}, onError: () => {
|
|
86
|
+
setHasBrokenImage(true);
|
|
87
|
+
} }) })) })), _jsx(StyledCaseTitle, { ref: setTitleEl, variant: 'link', onClick: onHeadingClick, children: _jsx(StyledCaseTitleText, { children: heading }) })] }), _jsxs(StyledWorkflowControls, { container: { alignItems: 'center', gap: 0.5 }, item: { shrink: 0 }, children: [stageStepLabel && _jsx(StyledProgressLabel, { children: stageStepLabel }), _jsx(Button, { ref: setWorkflowBtnEl, icon: true, variant: 'simple', onClick: toggleDialog, "aria-expanded": isOpen, label: t('workflow'), "aria-label": t('open_noun', [t('workflow')]), children: _jsx(Icon, { name: 'chevron' }) })] }), isOpen && workflowBtnEl && (_jsx(StyledWorkflowInfoDialog, { heading: heading, target: workflowBtnEl, onDismiss: closeDialog, children: _jsx(StyledStageList, { children: stages.map(stage => {
|
|
88
|
+
const isExpanded = expandedStages.has(stage.id);
|
|
89
|
+
const hasSteps = Array.isArray(stage.steps) && stage.steps.length > 0;
|
|
90
|
+
const effectiveStepId = getEffectiveCurrentStepId(stage);
|
|
91
|
+
let stageStatus = 'not-started';
|
|
92
|
+
if (stage.completed)
|
|
93
|
+
stageStatus = 'completed';
|
|
94
|
+
else if (stage.current)
|
|
95
|
+
stageStatus = 'active';
|
|
96
|
+
return (_jsxs("li", { children: [_jsxs(StyledStageButton, { onClick: () => toggleStage(stage.id), "aria-expanded": isExpanded, expanded: isExpanded, variant: 'simple', children: [_jsx(Icon, { name: 'caret-down' }), stage.name] }), hasSteps && effectiveStepId && (_jsx(ExpandCollapse, { collapsed: !isExpanded, nullWhenCollapsed: true, children: _jsx(StyledStepsContainer, { stageStatus: stageStatus, children: _jsx(VerticalFormProgress, { steps: stage.steps ?? [], currentStepId: effectiveStepId }) }) }))] }, stage.id));
|
|
97
|
+
}) }) }))] }), titleEl && (_jsx(Tooltip, { target: titleEl, smart: true, showDelay: 'none', hideDelay: 'none', children: heading }))] }));
|
|
98
|
+
});
|
|
99
|
+
export default CaseWorkflow;
|
|
100
|
+
//# sourceMappingURL=CaseWorkflow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CaseWorkflow.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/CaseWorkflow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useCallback, forwardRef, useMemo, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport { parseToHsl } from 'polished';\n\nimport {\n Icon,\n Button,\n Tooltip,\n ExpandCollapse,\n useConsolidatedRef,\n useElement,\n useI18n,\n useTheme,\n tryCatch,\n StyledIconShape,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport * as chevronIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chevron.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 VerticalFormProgress from '@pega/cosmos-react-core/lib/components/MultiStepForm/VerticalFormProgress';\n\nimport type { CaseWorkflowProps, CaseWorkflowStageProps } from './GenAICoach.types';\nimport {\n StyledCaseWorkflowBanner,\n StyledCaseIdentity,\n StyledCaseIconWrapper,\n StyledCaseTitle,\n StyledCaseTitleText,\n StyledWorkflowControls,\n StyledProgressLabel,\n StyledWorkflowInfoDialog,\n StyledStageList,\n StyledStageButton,\n StyledStepsContainer,\n StyledCaseViewIcon,\n StyledCaseViewImage\n} from './GenAICoach.styles';\n\nregisterIcon(chevronIcon, timesIcon, caretDownIcon);\n\nconst getEffectiveCurrentStepId = (stage: CaseWorkflowStageProps): string | undefined => {\n const { steps } = stage;\n\n if (!steps || steps.length === 0) return undefined;\n\n if (stage.current && stage.currentStepId) return stage.currentStepId;\n\n if (stage.completed) return steps[steps.length - 1].id;\n\n return steps[0].id;\n};\n\nconst getCurrentStageAndStep = (stages: CaseWorkflowStageProps[]) => {\n const stage = stages.find(s => s.current);\n\n if (!stage) return undefined;\n\n const step = stage.currentStepId\n ? stage.steps?.find(s => s.id === stage.currentStepId)\n : undefined;\n\n return { stageName: stage.name, stepName: step?.name };\n};\n\nconst CaseWorkflow: ForwardRefForwardPropsComponent<CaseWorkflowProps> = forwardRef(\n function CaseWorkflow(\n { heading, icon, stages, onHeadingClick, ...restProps }: PropsWithoutRef<CaseWorkflowProps>,\n ref: CaseWorkflowProps['ref']\n ) {\n const t = useI18n();\n const theme = useTheme();\n\n const rootRef = useConsolidatedRef(ref);\n\n const [workflowBtnEl, setWorkflowBtnEl] = useElement<HTMLButtonElement>();\n const [titleEl, setTitleEl] = useElement<HTMLButtonElement | HTMLAnchorElement>();\n\n const [isOpen, setIsOpen] = useState(false);\n const [hasBrokenImage, setHasBrokenImage] = useState<boolean | undefined>();\n\n const currentStageId = stages.find(s => s.current)?.id;\n const [expandedStages, setExpandedStages] = useState<Set<string>>(() => {\n const initial = new Set<string>();\n if (currentStageId) initial.add(currentStageId);\n return initial;\n });\n\n const toggleStage = useCallback((stageId: string) => {\n setExpandedStages(prev => {\n const next = new Set(prev);\n if (next.has(stageId)) {\n next.delete(stageId);\n } else {\n next.add(stageId);\n }\n return next;\n });\n }, []);\n\n const toggleDialog = useCallback(() => {\n setIsOpen(prev => !prev);\n }, []);\n\n const closeDialog = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const iconForeground =\n theme.components['case-view'].icon.color !== 'auto'\n ? theme.components['case-view'].icon.color\n : theme.components['case-view'].header['foreground-color'];\n\n const iconBackground = useMemo(() => {\n if (theme.components['case-view'].icon.background !== 'auto') {\n return theme.components['case-view'].icon.background;\n }\n return tryCatch(\n () => {\n const { lightness } = parseToHsl(\n theme.components['case-view'].header['background-color']\n );\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n },\n () => 'transparent'\n );\n }, [theme]);\n\n const showIcon = !!icon && !hasBrokenImage;\n\n const currentInfo = getCurrentStageAndStep(stages);\n\n const stageStepLabel = currentInfo\n ? `${currentInfo.stageName}${currentInfo.stepName ? `: ${currentInfo.stepName}` : ''}`\n : undefined;\n\n useEffect(() => {\n setHasBrokenImage(undefined);\n }, [typeof icon === 'string' ? icon : icon?.href]);\n\n return (\n <>\n <StyledCaseWorkflowBanner\n container={{ alignItems: 'center', justify: 'between', gap: 0.75 }}\n {...restProps}\n ref={rootRef}\n >\n <StyledCaseIdentity container={{ alignItems: 'center', gap: 0.75 }}>\n {showIcon && (\n <StyledCaseIconWrapper>\n {typeof icon === 'string' ? (\n <StyledCaseViewIcon\n name={icon}\n foreground={iconForeground}\n background={iconBackground}\n />\n ) : (\n <StyledIconShape background={iconBackground}>\n <StyledCaseViewImage\n src={icon?.href}\n alt={t('case_image')}\n onLoad={() => {\n setHasBrokenImage(false);\n }}\n onError={() => {\n setHasBrokenImage(true);\n }}\n />\n </StyledIconShape>\n )}\n </StyledCaseIconWrapper>\n )}\n\n <StyledCaseTitle ref={setTitleEl} variant='link' onClick={onHeadingClick}>\n <StyledCaseTitleText>{heading}</StyledCaseTitleText>\n </StyledCaseTitle>\n </StyledCaseIdentity>\n\n <StyledWorkflowControls\n container={{ alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 0 }}\n >\n {stageStepLabel && <StyledProgressLabel>{stageStepLabel}</StyledProgressLabel>}\n\n <Button\n ref={setWorkflowBtnEl}\n icon\n variant='simple'\n onClick={toggleDialog}\n aria-expanded={isOpen}\n label={t('workflow')}\n aria-label={t('open_noun', [t('workflow')])}\n >\n <Icon name='chevron' />\n </Button>\n </StyledWorkflowControls>\n\n {isOpen && workflowBtnEl && (\n <StyledWorkflowInfoDialog\n heading={heading}\n target={workflowBtnEl}\n onDismiss={closeDialog}\n >\n <StyledStageList>\n {stages.map(stage => {\n const isExpanded = expandedStages.has(stage.id);\n const hasSteps = Array.isArray(stage.steps) && stage.steps.length > 0;\n const effectiveStepId = getEffectiveCurrentStepId(stage);\n\n let stageStatus: 'active' | 'completed' | 'not-started' = 'not-started';\n if (stage.completed) stageStatus = 'completed';\n else if (stage.current) stageStatus = 'active';\n\n return (\n <li key={stage.id}>\n <StyledStageButton\n onClick={() => toggleStage(stage.id)}\n aria-expanded={isExpanded}\n expanded={isExpanded}\n variant='simple'\n >\n <Icon name='caret-down' />\n\n {stage.name}\n </StyledStageButton>\n\n {hasSteps && effectiveStepId && (\n <ExpandCollapse collapsed={!isExpanded} nullWhenCollapsed>\n <StyledStepsContainer stageStatus={stageStatus}>\n <VerticalFormProgress\n steps={stage.steps ?? []}\n currentStepId={effectiveStepId}\n />\n </StyledStepsContainer>\n </ExpandCollapse>\n )}\n </li>\n );\n })}\n </StyledStageList>\n </StyledWorkflowInfoDialog>\n )}\n </StyledCaseWorkflowBanner>\n\n {titleEl && (\n <Tooltip target={titleEl} smart showDelay='none' hideDelay='none'>\n {heading}\n </Tooltip>\n )}\n </>\n );\n }\n);\n\nexport default CaseWorkflow;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
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
|
-
declare const _default: (({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages, onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode, actions, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, allowFullScreen, isInLandingPageUtilities, stopProcess, voiceToTextProps, salutation, showSalutation, isPortalAgent, pagePanel, suggestionCardsView, draftMessage, ...restProps }: GenAICoachProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
4
|
+
declare const _default: (({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages, onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode, actions, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, allowFullScreen, isInLandingPageUtilities, stopProcess, voiceToTextProps, salutation, showSalutation, isPortalAgent, pagePanel, suggestionCardsView, draftMessage, caseWorkflow, activeCases, ...restProps }: GenAICoachProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
5
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"]>;
|
|
6
6
|
};
|
|
7
7
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AA8FA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAchF,eAAO,MAAM,SAAS,+CAmDrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;+gBAmCC,eAAe;;;AAizClB,wBAA6D"}
|
|
@@ -13,6 +13,8 @@ import * as squareSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/ic
|
|
|
13
13
|
import { getGenAICoachTestIds } from './GenAICoach.test-ids';
|
|
14
14
|
import { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
|
|
15
15
|
import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledGenAIFooter, StyledAgentIcon, StyledStopButton, StyledActionsContainer, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge } from './GenAICoach.styles';
|
|
16
|
+
import ActiveCases from './ActiveCases';
|
|
17
|
+
import CaseWorkflow from './CaseWorkflow';
|
|
16
18
|
import ConversationHistory from './ConversationHistory';
|
|
17
19
|
import { GenAIMessage, InitialSuggestedMessage } from '.';
|
|
18
20
|
registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, squareSolidIcon, sendSolidIcon);
|
|
@@ -27,7 +29,7 @@ export const AISuggestedBadge = () => {
|
|
|
27
29
|
const t = useI18n();
|
|
28
30
|
return (_jsxs(StyledAISuggestedBadge, { container: { alignItems: 'center', gap: 0.5 }, children: [_jsx(Icon, { name: 'polaris-solid', "aria-hidden": true }), _jsx(Text, { children: t('ai_suggestion') })] }));
|
|
29
31
|
};
|
|
30
|
-
const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, allowFullScreen = true, isInLandingPageUtilities, stopProcess, voiceToTextProps, salutation, showSalutation = true, isPortalAgent = false, pagePanel, suggestionCardsView, draftMessage, ...restProps }) => {
|
|
32
|
+
const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, allowFullScreen = true, isInLandingPageUtilities, stopProcess, voiceToTextProps, salutation, showSalutation = true, isPortalAgent = false, pagePanel, suggestionCardsView, draftMessage, caseWorkflow, activeCases, ...restProps }) => {
|
|
31
33
|
const scrollTolerancePx = 2;
|
|
32
34
|
const scrollThresholdPx = 50;
|
|
33
35
|
const streamBufferLh = 20;
|
|
@@ -351,11 +353,11 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
|
|
|
351
353
|
return isInUtilities(variant) && variant.state === 'minimized' ? (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'h2', children: selectedCoach }), _jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(Button, { icon: true, label: t('maximize'), "aria-label": t('agent_noun', [t('maximize')]), variant: 'simple', onClick: () => {
|
|
352
354
|
variant.onStateChange('maximized');
|
|
353
355
|
isUserTriggered.current = true;
|
|
354
|
-
}, children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, _jsxs(Flex, { container:
|
|
356
|
+
}, children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, _jsxs(Flex, { container: { gap: 0.5 }, as: StyledActionsContainer, children: [isInUtilities(variant) && !fullScreen && (_jsx(Button, { icon: true, label: t('minimize'), "aria-label": t('agent_noun', [t('minimize')]), variant: 'simple', onClick: () => {
|
|
355
357
|
variant.onStateChange('minimized');
|
|
356
358
|
isUserTriggered.current = true;
|
|
357
|
-
}, children: _jsx(Icon, { name: 'minus' }) })), allowFullScreen && _jsx(FullscreenButton, { onClick: () => setFullScreen(prev => !prev) }), actions && (_jsx(Actions, { "data-testid": testIds.actions, contextualLabel: selectedCoach, ...actions })), variant.placement === 'dialog' && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('close_chat_with_ai'), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] })] }));
|
|
358
|
-
}, [variant, coachOptions, fullScreen]);
|
|
359
|
+
}, children: _jsx(Icon, { name: 'minus' }) })), activeCases && _jsx(ActiveCases, { activeCases: activeCases }), allowFullScreen && _jsx(FullscreenButton, { onClick: () => setFullScreen(prev => !prev) }), actions && (_jsx(Actions, { "data-testid": testIds.actions, contextualLabel: selectedCoach, ...actions })), variant.placement === 'dialog' && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('close_chat_with_ai'), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] })] }));
|
|
360
|
+
}, [variant, coachOptions, fullScreen, activeCases]);
|
|
359
361
|
const getMessageContainingElement = (element) => {
|
|
360
362
|
if (element)
|
|
361
363
|
return Array.from(messageEls.values()).find(el => el && el.contains(element));
|
|
@@ -420,6 +422,11 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
|
|
|
420
422
|
}
|
|
421
423
|
}
|
|
422
424
|
}, [messages]);
|
|
425
|
+
useEffect(() => {
|
|
426
|
+
if (!isLatestAgentMessageStreaming)
|
|
427
|
+
return;
|
|
428
|
+
announcePolite({ type: 'status', message: t('generating_response') });
|
|
429
|
+
}, [isLatestAgentMessageStreaming]);
|
|
423
430
|
useEffect(() => {
|
|
424
431
|
const scrollState = scrollStateRef.current;
|
|
425
432
|
const wasStreaming = scrollState.isStreamingActive;
|
|
@@ -490,6 +497,11 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
|
|
|
490
497
|
suggestionMenuButton.focus();
|
|
491
498
|
}
|
|
492
499
|
}, [suggestionMenuButton]);
|
|
500
|
+
useEffect(() => {
|
|
501
|
+
if (messages.length === 0 || loading || error) {
|
|
502
|
+
setShowScrollToBottom(false);
|
|
503
|
+
}
|
|
504
|
+
}, [messages.length, loading, error]);
|
|
493
505
|
/** Supports arrow key behaviors */
|
|
494
506
|
useEffect(() => {
|
|
495
507
|
const focusables = getFocusables(elementRef);
|
|
@@ -589,7 +601,7 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
|
|
|
589
601
|
const fullPageAndInitialScreen = (fullScreen || (variant.placement === 'fullpage' && !isInLandingPageUtilities)) &&
|
|
590
602
|
messages.length === 0;
|
|
591
603
|
const renderTextArea = fullPageAndInitialScreen ? null : genAIFooter;
|
|
592
|
-
const GenAICoachElement = (_jsx(_Fragment, { children: ((isInUtilities(variant) && variant.state !== 'minimized') || !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledFlexWrapper, children: [_jsx(Flex, { as: StyledMessagesContainer, ref: setMessageContainerRef, withSuggestionCards: !loading && !error && messages.length === 0 && !!suggestionCardsView, container: loading || error
|
|
604
|
+
const GenAICoachElement = (_jsx(_Fragment, { children: ((isInUtilities(variant) && variant.state !== 'minimized') || !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledFlexWrapper, children: [caseWorkflow && _jsx(CaseWorkflow, { ...caseWorkflow }), _jsx(Flex, { as: StyledMessagesContainer, ref: setMessageContainerRef, withSuggestionCards: !loading && !error && messages.length === 0 && !!suggestionCardsView, container: loading || error
|
|
593
605
|
? { direction: 'column', pad: [0, 2], justify: 'center' }
|
|
594
606
|
: { direction: 'column', pad: [0, 2] }, ...(!loading && !error && messages.length === 0 && suggestionCardsView
|
|
595
607
|
? {}
|
|
@@ -609,7 +621,7 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
|
|
|
609
621
|
});
|
|
610
622
|
}
|
|
611
623
|
else {
|
|
612
|
-
setMessage(initialMessage.message);
|
|
624
|
+
setMessage(initialMessage.message ?? '');
|
|
613
625
|
}
|
|
614
626
|
isUserTriggered.current = true;
|
|
615
627
|
textAreaRef.current?.focus();
|