@pega/cosmos-react-work 9.17.2 → 9.19.0
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/CaseView/CaseView.styles.d.ts.map +1 -1
- package/lib/components/CaseView/CaseView.styles.js +4 -3
- package/lib/components/CaseView/CaseView.styles.js.map +1 -1
- package/lib/components/GenAICoach/ActiveCases.d.ts.map +1 -1
- package/lib/components/GenAICoach/ActiveCases.js +2 -1
- package/lib/components/GenAICoach/ActiveCases.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.js +1 -1
- package/lib/components/GenAICoach/GenAICoach.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts +188 -0
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.js +47 -2
- package/lib/components/GenAICoach/GenAICoach.styles.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.types.d.ts +15 -1
- 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/GenAIMessage.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAIMessage.js +42 -6
- package/lib/components/GenAICoach/GenAIMessage.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/InteractionNotification/InteractionNotification.d.ts +4 -2
- package/lib/components/InteractionNotification/InteractionNotification.d.ts.map +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.js +2 -2
- package/lib/components/InteractionNotification/InteractionNotification.js.map +1 -1
- package/lib/components/Stages/Stages.styles.d.ts.map +1 -1
- package/lib/components/Stages/Stages.styles.js +84 -20
- package/lib/components/Stages/Stages.styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, forwardRef, useEffect, useMemo, useRef } from 'react';
|
|
2
|
+
import { createContext, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { readableColor, transparentize } from 'polished';
|
|
4
|
-
import { Avatar, Button, Flex, Progress, registerIcon, useI18n, useTestIds, ErrorState, markdownToPlainText, Actions, Icon, useModalManager, ThemeOverride, useTheme, calculateForegroundColor } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Avatar, Button, Flex, Progress, SelectionCardDisplay, Text, registerIcon, useI18n, useTestIds, ErrorState, markdownToPlainText, Actions, Icon, useModalManager, ThemeOverride, useTheme, calculateForegroundColor } from '@pega/cosmos-react-core';
|
|
5
5
|
import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
|
|
6
6
|
import * as brainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/brain.icon';
|
|
7
|
+
import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
|
|
8
|
+
import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
|
|
7
9
|
import { RichTextViewer } from '@pega/cosmos-react-rte';
|
|
8
10
|
import { useAnimatedText } from '@pega/cosmos-react-core';
|
|
9
|
-
import { StyledActionsContainer, StyledAttachmentsList, StyledGenAIAvatar, StyledMessageSender, StyledMessage, StyledSuggestion, StyledSuggestionsContainer, StyledSystemMessage, StyledUserMessage } from './GenAICoach.styles';
|
|
11
|
+
import { StyledActionsContainer, StyledAttachmentsList, StyledImageChoiceNavBar, StyledGenAIAvatar, StyledMessageSender, StyledMessage, StyledSelectionCardGrid, StyledSelectionCardImageName, StyledSelectionCardImageNumber, StyledSuggestion, StyledSuggestionsContainer, StyledSystemMessage, StyledUserMessage } from './GenAICoach.styles';
|
|
10
12
|
import { getGenAICoachTestIds } from './GenAICoach.test-ids';
|
|
11
13
|
import { isCoachMessage, isUserMessage } from './GenAICoach.utils';
|
|
12
14
|
import GenAIMessageProgress from './GenAIMessageProgress';
|
|
13
15
|
import ToolConfirmationMessage from './ToolConfirmationMessage';
|
|
14
16
|
import GenAIMessageFeedbackButtons from './GenAIMessageFeedback';
|
|
15
17
|
import ToolCandidates from './ToolCandidates';
|
|
16
|
-
registerIcon(polarisSolidIcon, brainIcon);
|
|
18
|
+
registerIcon(polarisSolidIcon, brainIcon, caretLeftIcon, caretRightIcon);
|
|
17
19
|
/** Metadata Context */
|
|
18
20
|
export const StreamingContext = createContext({
|
|
19
21
|
isStreamingMessage: false
|
|
@@ -27,6 +29,39 @@ const LoadingContent = ({ message, markdownMap, progressSteps, progressStepsComp
|
|
|
27
29
|
}
|
|
28
30
|
return _jsx(GenAIMessageProgress, { messages: progressSteps, completedSteps: progressStepsCompleted });
|
|
29
31
|
};
|
|
32
|
+
const SelectionCardGridRenderer = ({ imageChoices, onSend }) => {
|
|
33
|
+
const [selectedId, setSelectedId] = useState(null);
|
|
34
|
+
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
|
35
|
+
const [canScrollRight, setCanScrollRight] = useState(false);
|
|
36
|
+
const scrollRef = useRef(null);
|
|
37
|
+
const t = useI18n();
|
|
38
|
+
const isReadOnly = imageChoices.readOnly ?? selectedId !== null;
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
const el = scrollRef.current;
|
|
41
|
+
if (el)
|
|
42
|
+
setCanScrollRight(el.scrollWidth > el.clientWidth);
|
|
43
|
+
}, []);
|
|
44
|
+
const onScroll = ({ currentTarget: el }) => {
|
|
45
|
+
setCanScrollLeft(el.scrollLeft > 0);
|
|
46
|
+
setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
|
|
47
|
+
};
|
|
48
|
+
const flexibleImages = imageChoices.items.some(item => item.image?.size === 'flexible');
|
|
49
|
+
const scrollLeft = () => scrollRef.current?.scrollBy({
|
|
50
|
+
left: -(scrollRef.current.clientWidth * 0.75),
|
|
51
|
+
behavior: 'smooth'
|
|
52
|
+
});
|
|
53
|
+
const scrollRight = () => scrollRef.current?.scrollBy({ left: scrollRef.current.clientWidth * 0.75, behavior: 'smooth' });
|
|
54
|
+
const cards = imageChoices.items.map(({ id, label, image, fields }, idx) => {
|
|
55
|
+
const composedLabel = (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(StyledSelectionCardImageNumber, { children: t('agent_image', [idx + 1]) }), _jsx(StyledSelectionCardImageName, { children: label })] }));
|
|
56
|
+
return (_jsx(SelectionCardDisplay, { label: composedLabel, image: image, fields: fields, readOnly: isReadOnly, onClick: !isReadOnly
|
|
57
|
+
? () => {
|
|
58
|
+
setSelectedId(id);
|
|
59
|
+
onSend?.({ id, message: label });
|
|
60
|
+
}
|
|
61
|
+
: undefined }, id));
|
|
62
|
+
});
|
|
63
|
+
return (_jsxs(_Fragment, { children: [imageChoices.label && _jsx(Text, { variant: 'h4', children: imageChoices.label }), _jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Flex, { as: StyledSelectionCardGrid, flexibleImages: flexibleImages, ref: scrollRef, onScroll: onScroll, container: { wrap: 'nowrap', gap: 1 }, children: cards }), _jsxs(Flex, { as: StyledImageChoiceNavBar, container: { justify: 'end', gap: 0.5 }, children: [_jsx(Button, { icon: true, "aria-label": t('pagination_prev'), disabled: !canScrollLeft, onClick: scrollLeft, children: _jsx(Icon, { name: 'caret-left' }) }), _jsx(Button, { icon: true, "aria-label": t('pagination_next'), disabled: !canScrollRight, onClick: scrollRight, children: _jsx(Icon, { name: 'caret-right' }) })] })] })] }));
|
|
64
|
+
};
|
|
30
65
|
const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
31
66
|
const testIds = useTestIds(props.testId, getGenAICoachTestIds);
|
|
32
67
|
const t = useI18n();
|
|
@@ -91,7 +126,7 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
91
126
|
return { isStreamingMessage, isStreamingInProgress: isCoachMessage(props) && props.loading };
|
|
92
127
|
}, [isStreamingMessage, props]);
|
|
93
128
|
if (isCoachMessage(props)) {
|
|
94
|
-
const { id: messageId, coachName, isCustom, suggestions, onSend, loading, error, feedback, markdownMap, messageActions, showSenderInfo } = props;
|
|
129
|
+
const { id: messageId, coachName, isCustom, suggestions, imageChoices, onSend, loading, error, feedback, markdownMap, messageActions, showSenderInfo } = props;
|
|
95
130
|
const agentBackground = theme.components.agent.background;
|
|
96
131
|
const agentForeground = calculateForegroundColor(agentBackground, theme.components.agent['foreground-color']);
|
|
97
132
|
const { reaction } = feedback ?? {};
|
|
@@ -109,6 +144,7 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
109
144
|
? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`
|
|
110
145
|
: feedbackAriaLabel;
|
|
111
146
|
const hasInteractiveContent = !!(suggestions?.length ||
|
|
147
|
+
imageChoices?.items.length ||
|
|
112
148
|
feedback ||
|
|
113
149
|
messageActions ||
|
|
114
150
|
toolState?.renderCandidatesTable);
|
|
@@ -133,7 +169,7 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
133
169
|
alignItems: 'center'
|
|
134
170
|
}, as: StyledActionsContainer, children: [!isCustom && feedback && (_jsx(GenAIMessageFeedbackButtons, { messageId: messageId, feedback: feedback })), !isCustom && onViewToolsConsidered && (_jsx(Button, { label: t('semantic_discovery_results'), variant: 'simple', icon: true, compact: true, onClick: onClickToolsConsidered, children: _jsx(Icon, { name: 'brain' }) })), messageActions && _jsx(Actions, { ...messageActions })] })), suggestions && suggestions.length > 0 && (_jsx(Flex, { as: StyledSuggestionsContainer, container: { gap: 1, justify: 'end', wrap: 'wrap' }, children: suggestions.map(({ id, message: prompt, selected }) => {
|
|
135
171
|
return (_jsx(Button, { as: StyledSuggestion, onClick: onSend ? () => onSend({ id, message: prompt }) : undefined, variant: selected ? 'primary' : undefined, children: prompt }, id));
|
|
136
|
-
}) }))] }))] }));
|
|
172
|
+
}) })), imageChoices && imageChoices.items.length > 0 && (_jsx(SelectionCardGridRenderer, { imageChoices: imageChoices, onSend: onSend }))] }))] }));
|
|
137
173
|
return (_jsx(ThemeOverride, { theme: {
|
|
138
174
|
base: {
|
|
139
175
|
palette: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, forwardRef, useEffect, useMemo, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport { readableColor, transparentize } from 'polished';\n\nimport {\n Avatar,\n Button,\n Flex,\n Progress,\n registerIcon,\n useI18n,\n useTestIds,\n ErrorState,\n markdownToPlainText,\n type ForwardRefForwardPropsComponent,\n Actions,\n Icon,\n useModalManager,\n ThemeOverride,\n useTheme,\n calculateForegroundColor\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport * as brainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/brain.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { CoachLoadingContentProps, GenAIMessageProps } from './GenAICoach.types';\nimport {\n StyledActionsContainer,\n StyledAttachmentsList,\n StyledGenAIAvatar,\n StyledMessageSender,\n StyledMessage,\n StyledSuggestion,\n StyledSuggestionsContainer,\n StyledSystemMessage,\n StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\nimport ToolConfirmationMessage from './ToolConfirmationMessage';\nimport GenAIMessageFeedbackButtons from './GenAIMessageFeedback';\nimport ToolCandidates from './ToolCandidates';\n\nregisterIcon(polarisSolidIcon, brainIcon);\n\ntype StreamingContextProps = {\n isStreamingMessage?: boolean;\n isStreamingInProgress?: boolean;\n};\n\n/** Metadata Context */\nexport const StreamingContext = createContext<StreamingContextProps | undefined>({\n isStreamingMessage: false\n});\n\nconst LoadingContent = ({\n message,\n markdownMap,\n progressSteps,\n progressStepsCompleted\n}: CoachLoadingContentProps) => {\n if (!progressSteps?.length) {\n return <GenAIMessageProgress messages={message ? [message] : undefined} />;\n }\n\n if (message) {\n return (\n <>\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n <Progress variant='ellipsis' placement='inline' />\n </>\n );\n }\n\n return <GenAIMessageProgress messages={progressSteps} completedSteps={progressStepsCompleted} />;\n};\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n const t = useI18n();\n const { create } = useModalManager();\n const theme = useTheme();\n\n const modalMethodsRef = useRef<ReturnType<typeof create> | null>(null);\n\n const { message, announceInteraction, simplifiedAgent, ...restProps } = props;\n const isStringMessage = typeof message === 'string';\n const rawPlainTextMessage = isStringMessage ? markdownToPlainText(message ?? '') : '';\n\n let fallbackAriaLabel = '';\n if (isCoachMessage(props)) {\n fallbackAriaLabel = t('agent_message');\n } else if (isUserMessage(props)) {\n fallbackAriaLabel = t('user_message');\n }\n const plainTextMessage = rawPlainTextMessage || fallbackAriaLabel;\n let ariaLabel = plainTextMessage;\n\n const toolCandidates = isCoachMessage(props) ? props.toolCandidates : undefined;\n\n const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n const {\n text: streamingMessage,\n isAnimationDone: isStreamingDone,\n animatedTillCursor\n } = useAnimatedText({\n text: isStringMessage ? message : '',\n allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n enabled: isStringMessage && enableStreaming,\n tokenizeMarkdown: true,\n cursorStartIndex:\n isCoachMessage(props) && props.animationInitialCursorPos\n ? props.animationInitialCursorPos\n : undefined\n });\n\n useEffect(() => {\n if (isCoachMessage(props) && props.onAnimationCursorUpdate) {\n props.onAnimationCursorUpdate(animatedTillCursor);\n }\n }, [animatedTillCursor]);\n\n useEffect(() => {\n if (isStreamingMessage && props.onStreamingUpdate) {\n props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n }\n }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n useEffect(() => {\n if (isCoachMessage(props) && toolCandidates && modalMethodsRef.current) {\n modalMethodsRef.current.update({\n loading: toolCandidates.toolState?.loading,\n error: toolCandidates.toolState?.error,\n renderCandidatesTable: toolCandidates.toolState?.renderCandidatesTable\n });\n }\n }, [toolCandidates]);\n\n useEffect(() => {\n return () => {\n const modalMethods = modalMethodsRef.current;\n\n if (!modalMethods) {\n return;\n }\n\n modalMethods.dismiss();\n modalMethods.unmount();\n };\n }, []);\n\n const streamingContext: StreamingContextProps = useMemo(() => {\n return { isStreamingMessage, isStreamingInProgress: isCoachMessage(props) && props.loading };\n }, [isStreamingMessage, props]);\n\n if (isCoachMessage(props)) {\n const {\n id: messageId,\n coachName,\n isCustom,\n suggestions,\n onSend,\n loading,\n error,\n feedback,\n markdownMap,\n messageActions,\n showSenderInfo\n } = props;\n const agentBackground = theme.components.agent.background;\n const agentForeground = calculateForegroundColor(\n agentBackground,\n theme.components.agent['foreground-color']\n );\n\n const { reaction } = feedback ?? {};\n const { toolState, onViewToolsConsidered } = toolCandidates ?? {};\n\n let selectedFeedbackResponse;\n\n let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n if (!isCustom && feedback && reaction) {\n selectedFeedbackResponse = t('selected_noun', [\n reaction === 'liked' ? t('good_response') : t('bad_response')\n ]);\n\n feedbackAriaLabel = `${feedbackAriaLabel} ${selectedFeedbackResponse}`;\n }\n\n ariaLabel =\n suggestions && suggestions.length > 0\n ? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`\n : feedbackAriaLabel;\n\n const hasInteractiveContent = !!(\n suggestions?.length ||\n feedback ||\n messageActions ||\n toolState?.renderCandidatesTable\n );\n\n if (announceInteraction && hasInteractiveContent) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const onClickToolsConsidered = () => {\n modalMethodsRef.current = create(ToolCandidates, {\n loading: toolState?.loading,\n error: toolState?.error,\n renderCandidatesTable: toolState?.renderCandidatesTable\n });\n\n onViewToolsConsidered?.(messageId);\n };\n\n const streamingContent = isStreamingMessage && (\n <>\n {message ? (\n <>\n <StreamingContext.Provider value={streamingContext}>\n {isStringMessage ? (\n <RichTextViewer\n content={isStreamingMessage ? streamingMessage : message}\n type='markdown'\n markdownMap={markdownMap}\n />\n ) : (\n message\n )}\n </StreamingContext.Provider>\n\n {loading && <Progress variant='ellipsis' placement='inline' />}\n </>\n ) : (\n (loading || props.progressSteps?.length) && (\n <GenAIMessageProgress\n messages={props.progressSteps?.length ? props.progressSteps : undefined}\n completedSteps={\n props.progressSteps?.length ? props.progressStepsCompleted : undefined\n }\n />\n )\n )}\n </>\n );\n\n const messageContent = (\n <StyledMessage simplified={simplifiedAgent && !showSenderInfo}>\n {/* Streaming loader and content */}\n {streamingContent}\n\n {loading || error ? (\n <>\n {loading && !isStreamingMessage && (\n <LoadingContent\n message={isStringMessage ? message : undefined}\n markdownMap={markdownMap}\n progressSteps={props.progressSteps}\n progressStepsCompleted={props.progressStepsCompleted}\n />\n )}\n {error && <ErrorState message={error} />}\n </>\n ) : (\n <>\n {/* Non streaming content */}\n {!isStreamingMessage &&\n message &&\n (isStringMessage ? (\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n ) : (\n message\n ))}\n\n {props.isToolConfirmation && <ToolConfirmationMessage {...props} />}\n\n {((!isCustom && (feedback || onViewToolsConsidered)) || messageActions) && (\n <Flex\n container={{\n direction: 'row',\n gap: 1,\n pad: [1, undefined],\n alignItems: 'center'\n }}\n as={StyledActionsContainer}\n >\n {!isCustom && feedback && (\n <GenAIMessageFeedbackButtons messageId={messageId} feedback={feedback} />\n )}\n\n {!isCustom && onViewToolsConsidered && (\n <Button\n label={t('semantic_discovery_results')}\n variant='simple'\n icon\n compact\n onClick={onClickToolsConsidered}\n >\n <Icon name='brain' />\n </Button>\n )}\n\n {messageActions && <Actions {...messageActions} />}\n </Flex>\n )}\n\n {suggestions && suggestions.length > 0 && (\n <Flex\n as={StyledSuggestionsContainer}\n container={{ gap: 1, justify: 'end', wrap: 'wrap' }}\n >\n {suggestions.map(({ id, message: prompt, selected }) => {\n return (\n <Button\n as={StyledSuggestion}\n onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n key={id}\n variant={selected ? 'primary' : undefined}\n >\n {prompt}\n </Button>\n );\n })}\n </Flex>\n )}\n </>\n )}\n </StyledMessage>\n );\n\n return (\n <ThemeOverride\n theme={{\n base: {\n palette: {\n 'foreground-color': agentForeground,\n ...(simplifiedAgent && {\n 'secondary-background': transparentize(0.7, readableColor(agentForeground))\n })\n }\n }\n }}\n >\n <Flex\n as='li'\n data-testid={testIds.coachMessage}\n {...restProps}\n container={{ direction: 'row', pad: [1, 0], gap: 1 }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {simplifiedAgent ? (\n <>\n {showSenderInfo && (\n <StyledGenAIAvatar size='l' name={coachName ?? t('agent')} icon='polaris-solid' />\n )}\n <Flex item={{ grow: 1 }} container={{ direction: 'column', gap: 0.75 }}>\n {coachName && showSenderInfo && (\n <StyledMessageSender variant='primary'>{coachName}</StyledMessageSender>\n )}\n {messageContent}\n </Flex>\n </>\n ) : (\n messageContent\n )}\n </Flex>\n </ThemeOverride>\n );\n }\n\n if (isUserMessage(props)) {\n if (plainTextMessage) {\n ariaLabel = t('you_asked', [plainTextMessage]);\n }\n\n if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const attachmentsAndMessage = (\n <>\n {props.attachments && props.attachments.length > 0 && (\n <StyledAttachmentsList type='display' items={props.attachments} />\n )}\n {props.message && <RichTextViewer content={props.message} type='markdown' />}\n </>\n );\n\n if (!simplifiedAgent) {\n return (\n <StyledUserMessage\n data-testid={testIds.userMessage}\n {...restProps}\n // @ts-expect-error FIXME: Need to validate if we can remove message, and double 'as'\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {attachmentsAndMessage}\n </StyledUserMessage>\n );\n }\n\n return (\n <Flex\n as='li'\n data-testid={testIds.userMessage}\n {...restProps}\n container={{ direction: 'row', gap: 1, justify: 'end', alignItems: 'start' }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n <Flex container={{ direction: 'column', alignItems: 'end', gap: 0.75 }}>\n {props.userName !== undefined && (\n <StyledMessageSender variant='primary'>\n {props.userName.split(' ')[0] || t('you')}\n </StyledMessageSender>\n )}\n <StyledUserMessage as='div'>{attachmentsAndMessage}</StyledUserMessage>\n </Flex>\n {props.userName && <Avatar name={props.userName} size='l' shape='circle' />}\n </Flex>\n );\n }\n\n if (props.from === 'system') {\n const displayMessage = props.stopped && !message ? t('generation_stopped') : message;\n const systemAriaLabel = typeof displayMessage === 'string' ? displayMessage : ariaLabel;\n return (\n <StyledSystemMessage\n stopped={props.stopped}\n data-testid={testIds.userMessage}\n aria-label={systemAriaLabel}\n ref={ref}\n >\n {displayMessage}\n </StyledSystemMessage>\n );\n }\n\n return null;\n }\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 { createContext, forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport type { PropsWithoutRef, UIEvent } from 'react';\nimport { readableColor, transparentize } from 'polished';\n\nimport {\n Avatar,\n Button,\n Flex,\n Progress,\n SelectionCardDisplay,\n Text,\n registerIcon,\n useI18n,\n useTestIds,\n ErrorState,\n markdownToPlainText,\n type ForwardRefForwardPropsComponent,\n Actions,\n Icon,\n useModalManager,\n ThemeOverride,\n useTheme,\n calculateForegroundColor\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport * as brainIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/brain.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type {\n CoachLoadingContentProps,\n GenAICoachProps,\n GenAIMessageProps,\n ImageChoicesConfig\n} from './GenAICoach.types';\nimport {\n StyledActionsContainer,\n StyledAttachmentsList,\n StyledImageChoiceNavBar,\n StyledGenAIAvatar,\n StyledMessageSender,\n StyledMessage,\n StyledSelectionCardGrid,\n StyledSelectionCardImageName,\n StyledSelectionCardImageNumber,\n StyledSuggestion,\n StyledSuggestionsContainer,\n StyledSystemMessage,\n StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\nimport ToolConfirmationMessage from './ToolConfirmationMessage';\nimport GenAIMessageFeedbackButtons from './GenAIMessageFeedback';\nimport ToolCandidates from './ToolCandidates';\n\nregisterIcon(polarisSolidIcon, brainIcon, caretLeftIcon, caretRightIcon);\n\ntype StreamingContextProps = {\n isStreamingMessage?: boolean;\n isStreamingInProgress?: boolean;\n};\n\n/** Metadata Context */\nexport const StreamingContext = createContext<StreamingContextProps | undefined>({\n isStreamingMessage: false\n});\n\nconst LoadingContent = ({\n message,\n markdownMap,\n progressSteps,\n progressStepsCompleted\n}: CoachLoadingContentProps) => {\n if (!progressSteps?.length) {\n return <GenAIMessageProgress messages={message ? [message] : undefined} />;\n }\n\n if (message) {\n return (\n <>\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n <Progress variant='ellipsis' placement='inline' />\n </>\n );\n }\n\n return <GenAIMessageProgress messages={progressSteps} completedSteps={progressStepsCompleted} />;\n};\n\nconst SelectionCardGridRenderer = ({\n imageChoices,\n onSend\n}: {\n imageChoices: ImageChoicesConfig;\n onSend?: GenAICoachProps['onSend'];\n}) => {\n const [selectedId, setSelectedId] = useState<string | null>(null);\n const [canScrollLeft, setCanScrollLeft] = useState(false);\n const [canScrollRight, setCanScrollRight] = useState(false);\n const scrollRef = useRef<HTMLDivElement>(null);\n const t = useI18n();\n\n const isReadOnly = imageChoices.readOnly ?? selectedId !== null;\n\n useEffect(() => {\n const el = scrollRef.current;\n if (el) setCanScrollRight(el.scrollWidth > el.clientWidth);\n }, []);\n\n const onScroll = ({ currentTarget: el }: UIEvent<HTMLDivElement>) => {\n setCanScrollLeft(el.scrollLeft > 0);\n setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);\n };\n\n const flexibleImages = imageChoices.items.some(item => item.image?.size === 'flexible');\n\n const scrollLeft = () =>\n scrollRef.current?.scrollBy({\n left: -(scrollRef.current.clientWidth * 0.75),\n behavior: 'smooth'\n });\n const scrollRight = () =>\n scrollRef.current?.scrollBy({ left: scrollRef.current.clientWidth * 0.75, behavior: 'smooth' });\n\n const cards = imageChoices.items.map(({ id, label, image, fields }, idx) => {\n const composedLabel = (\n <Flex container={{ direction: 'column', gap: 1 }}>\n <StyledSelectionCardImageNumber>\n {t('agent_image', [idx + 1])}\n </StyledSelectionCardImageNumber>\n <StyledSelectionCardImageName>{label}</StyledSelectionCardImageName>\n </Flex>\n );\n\n return (\n <SelectionCardDisplay\n key={id}\n label={composedLabel}\n image={image}\n fields={fields}\n readOnly={isReadOnly}\n onClick={\n !isReadOnly\n ? () => {\n setSelectedId(id);\n onSend?.({ id, message: label });\n }\n : undefined\n }\n />\n );\n });\n\n return (\n <>\n {imageChoices.label && <Text variant='h4'>{imageChoices.label}</Text>}\n <Flex container={{ direction: 'column' }}>\n <Flex\n as={StyledSelectionCardGrid}\n flexibleImages={flexibleImages}\n ref={scrollRef}\n onScroll={onScroll}\n container={{ wrap: 'nowrap', gap: 1 }}\n >\n {cards}\n </Flex>\n <Flex as={StyledImageChoiceNavBar} container={{ justify: 'end', gap: 0.5 }}>\n <Button\n icon\n aria-label={t('pagination_prev')}\n disabled={!canScrollLeft}\n onClick={scrollLeft}\n >\n <Icon name='caret-left' />\n </Button>\n <Button\n icon\n aria-label={t('pagination_next')}\n disabled={!canScrollRight}\n onClick={scrollRight}\n >\n <Icon name='caret-right' />\n </Button>\n </Flex>\n </Flex>\n </>\n );\n};\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n const t = useI18n();\n const { create } = useModalManager();\n const theme = useTheme();\n\n const modalMethodsRef = useRef<ReturnType<typeof create> | null>(null);\n\n const { message, announceInteraction, simplifiedAgent, ...restProps } = props;\n const isStringMessage = typeof message === 'string';\n const rawPlainTextMessage = isStringMessage ? markdownToPlainText(message ?? '') : '';\n\n let fallbackAriaLabel = '';\n if (isCoachMessage(props)) {\n fallbackAriaLabel = t('agent_message');\n } else if (isUserMessage(props)) {\n fallbackAriaLabel = t('user_message');\n }\n const plainTextMessage = rawPlainTextMessage || fallbackAriaLabel;\n let ariaLabel = plainTextMessage;\n\n const toolCandidates = isCoachMessage(props) ? props.toolCandidates : undefined;\n\n const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n const {\n text: streamingMessage,\n isAnimationDone: isStreamingDone,\n animatedTillCursor\n } = useAnimatedText({\n text: isStringMessage ? message : '',\n allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n enabled: isStringMessage && enableStreaming,\n tokenizeMarkdown: true,\n cursorStartIndex:\n isCoachMessage(props) && props.animationInitialCursorPos\n ? props.animationInitialCursorPos\n : undefined\n });\n\n useEffect(() => {\n if (isCoachMessage(props) && props.onAnimationCursorUpdate) {\n props.onAnimationCursorUpdate(animatedTillCursor);\n }\n }, [animatedTillCursor]);\n\n useEffect(() => {\n if (isStreamingMessage && props.onStreamingUpdate) {\n props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n }\n }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n useEffect(() => {\n if (isCoachMessage(props) && toolCandidates && modalMethodsRef.current) {\n modalMethodsRef.current.update({\n loading: toolCandidates.toolState?.loading,\n error: toolCandidates.toolState?.error,\n renderCandidatesTable: toolCandidates.toolState?.renderCandidatesTable\n });\n }\n }, [toolCandidates]);\n\n useEffect(() => {\n return () => {\n const modalMethods = modalMethodsRef.current;\n\n if (!modalMethods) {\n return;\n }\n\n modalMethods.dismiss();\n modalMethods.unmount();\n };\n }, []);\n\n const streamingContext: StreamingContextProps = useMemo(() => {\n return { isStreamingMessage, isStreamingInProgress: isCoachMessage(props) && props.loading };\n }, [isStreamingMessage, props]);\n\n if (isCoachMessage(props)) {\n const {\n id: messageId,\n coachName,\n isCustom,\n suggestions,\n imageChoices,\n onSend,\n loading,\n error,\n feedback,\n markdownMap,\n messageActions,\n showSenderInfo\n } = props;\n const agentBackground = theme.components.agent.background;\n const agentForeground = calculateForegroundColor(\n agentBackground,\n theme.components.agent['foreground-color']\n );\n\n const { reaction } = feedback ?? {};\n const { toolState, onViewToolsConsidered } = toolCandidates ?? {};\n\n let selectedFeedbackResponse;\n\n let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n if (!isCustom && feedback && reaction) {\n selectedFeedbackResponse = t('selected_noun', [\n reaction === 'liked' ? t('good_response') : t('bad_response')\n ]);\n\n feedbackAriaLabel = `${feedbackAriaLabel} ${selectedFeedbackResponse}`;\n }\n\n ariaLabel =\n suggestions && suggestions.length > 0\n ? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`\n : feedbackAriaLabel;\n\n const hasInteractiveContent = !!(\n suggestions?.length ||\n imageChoices?.items.length ||\n feedback ||\n messageActions ||\n toolState?.renderCandidatesTable\n );\n\n if (announceInteraction && hasInteractiveContent) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const onClickToolsConsidered = () => {\n modalMethodsRef.current = create(ToolCandidates, {\n loading: toolState?.loading,\n error: toolState?.error,\n renderCandidatesTable: toolState?.renderCandidatesTable\n });\n\n onViewToolsConsidered?.(messageId);\n };\n\n const streamingContent = isStreamingMessage && (\n <>\n {message ? (\n <>\n <StreamingContext.Provider value={streamingContext}>\n {isStringMessage ? (\n <RichTextViewer\n content={isStreamingMessage ? streamingMessage : message}\n type='markdown'\n markdownMap={markdownMap}\n />\n ) : (\n message\n )}\n </StreamingContext.Provider>\n\n {loading && <Progress variant='ellipsis' placement='inline' />}\n </>\n ) : (\n (loading || props.progressSteps?.length) && (\n <GenAIMessageProgress\n messages={props.progressSteps?.length ? props.progressSteps : undefined}\n completedSteps={\n props.progressSteps?.length ? props.progressStepsCompleted : undefined\n }\n />\n )\n )}\n </>\n );\n\n const messageContent = (\n <StyledMessage simplified={simplifiedAgent && !showSenderInfo}>\n {/* Streaming loader and content */}\n {streamingContent}\n\n {loading || error ? (\n <>\n {loading && !isStreamingMessage && (\n <LoadingContent\n message={isStringMessage ? message : undefined}\n markdownMap={markdownMap}\n progressSteps={props.progressSteps}\n progressStepsCompleted={props.progressStepsCompleted}\n />\n )}\n {error && <ErrorState message={error} />}\n </>\n ) : (\n <>\n {/* Non streaming content */}\n {!isStreamingMessage &&\n message &&\n (isStringMessage ? (\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n ) : (\n message\n ))}\n\n {props.isToolConfirmation && <ToolConfirmationMessage {...props} />}\n\n {((!isCustom && (feedback || onViewToolsConsidered)) || messageActions) && (\n <Flex\n container={{\n direction: 'row',\n gap: 1,\n pad: [1, undefined],\n alignItems: 'center'\n }}\n as={StyledActionsContainer}\n >\n {!isCustom && feedback && (\n <GenAIMessageFeedbackButtons messageId={messageId} feedback={feedback} />\n )}\n\n {!isCustom && onViewToolsConsidered && (\n <Button\n label={t('semantic_discovery_results')}\n variant='simple'\n icon\n compact\n onClick={onClickToolsConsidered}\n >\n <Icon name='brain' />\n </Button>\n )}\n\n {messageActions && <Actions {...messageActions} />}\n </Flex>\n )}\n\n {suggestions && suggestions.length > 0 && (\n <Flex\n as={StyledSuggestionsContainer}\n container={{ gap: 1, justify: 'end', wrap: 'wrap' }}\n >\n {suggestions.map(({ id, message: prompt, selected }) => {\n return (\n <Button\n as={StyledSuggestion}\n onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n key={id}\n variant={selected ? 'primary' : undefined}\n >\n {prompt}\n </Button>\n );\n })}\n </Flex>\n )}\n\n {imageChoices && imageChoices.items.length > 0 && (\n <SelectionCardGridRenderer imageChoices={imageChoices} onSend={onSend} />\n )}\n </>\n )}\n </StyledMessage>\n );\n\n return (\n <ThemeOverride\n theme={{\n base: {\n palette: {\n 'foreground-color': agentForeground,\n ...(simplifiedAgent && {\n 'secondary-background': transparentize(0.7, readableColor(agentForeground))\n })\n }\n }\n }}\n >\n <Flex\n as='li'\n data-testid={testIds.coachMessage}\n {...restProps}\n container={{ direction: 'row', pad: [1, 0], gap: 1 }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {simplifiedAgent ? (\n <>\n {showSenderInfo && (\n <StyledGenAIAvatar size='l' name={coachName ?? t('agent')} icon='polaris-solid' />\n )}\n <Flex item={{ grow: 1 }} container={{ direction: 'column', gap: 0.75 }}>\n {coachName && showSenderInfo && (\n <StyledMessageSender variant='primary'>{coachName}</StyledMessageSender>\n )}\n {messageContent}\n </Flex>\n </>\n ) : (\n messageContent\n )}\n </Flex>\n </ThemeOverride>\n );\n }\n\n if (isUserMessage(props)) {\n if (plainTextMessage) {\n ariaLabel = t('you_asked', [plainTextMessage]);\n }\n\n if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const attachmentsAndMessage = (\n <>\n {props.attachments && props.attachments.length > 0 && (\n <StyledAttachmentsList type='display' items={props.attachments} />\n )}\n {props.message && <RichTextViewer content={props.message} type='markdown' />}\n </>\n );\n\n if (!simplifiedAgent) {\n return (\n <StyledUserMessage\n data-testid={testIds.userMessage}\n {...restProps}\n // @ts-expect-error FIXME: Need to validate if we can remove message, and double 'as'\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {attachmentsAndMessage}\n </StyledUserMessage>\n );\n }\n\n return (\n <Flex\n as='li'\n data-testid={testIds.userMessage}\n {...restProps}\n container={{ direction: 'row', gap: 1, justify: 'end', alignItems: 'start' }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n <Flex container={{ direction: 'column', alignItems: 'end', gap: 0.75 }}>\n {props.userName !== undefined && (\n <StyledMessageSender variant='primary'>\n {props.userName.split(' ')[0] || t('you')}\n </StyledMessageSender>\n )}\n <StyledUserMessage as='div'>{attachmentsAndMessage}</StyledUserMessage>\n </Flex>\n {props.userName && <Avatar name={props.userName} size='l' shape='circle' />}\n </Flex>\n );\n }\n\n if (props.from === 'system') {\n const displayMessage = props.stopped && !message ? t('generation_stopped') : message;\n const systemAriaLabel = typeof displayMessage === 'string' ? displayMessage : ariaLabel;\n return (\n <StyledSystemMessage\n stopped={props.stopped}\n data-testid={testIds.userMessage}\n aria-label={systemAriaLabel}\n ref={ref}\n >\n {displayMessage}\n </StyledSystemMessage>\n );\n }\n\n return null;\n }\n);\n\nexport default GenAIMessage;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default, AgentIcon } from './GenAICoach';
|
|
2
2
|
export { default as PortalAgentSplitView } from './PortalAgentSplitView';
|
|
3
|
-
export type { GenAICoachProps, GenAIMessageProps, UserMessageProps, CoachMessageProps, MessageProps, UtilitiesGenAICoachProps, SendMessageProps, State, ActiveCaseItem, CaseWorkflowProps, CaseWorkflowStageProps, CaseDetails, QuestionnaireConfig } from './GenAICoach.types';
|
|
3
|
+
export type { GenAICoachProps, GenAIMessageProps, UserMessageProps, CoachMessageProps, MessageProps, UtilitiesGenAICoachProps, SendMessageProps, State, ActiveCaseItem, CaseWorkflowProps, CaseWorkflowStageProps, CaseDetails, QuestionnaireConfig, ImageChoicesConfig, ImageChoiceItem } from './GenAICoach.types';
|
|
4
4
|
export { default as GenAIMessage, StreamingContext } from './GenAIMessage';
|
|
5
5
|
export { default as InitialSuggestedMessage } from './InitialSuggestedMessage';
|
|
6
6
|
export { isUserMessage, isCoachMessage } from './GenAICoach.utils';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,EACxB,gBAAgB,EAChB,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,sBAAsB,EACtB,WAAW,EACX,mBAAmB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,EACxB,gBAAgB,EAChB,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAkBzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default, AgentIcon } from './GenAICoach';\nexport { default as PortalAgentSplitView } from './PortalAgentSplitView';\nexport type {\n GenAICoachProps,\n GenAIMessageProps,\n UserMessageProps,\n CoachMessageProps,\n MessageProps,\n UtilitiesGenAICoachProps,\n SendMessageProps,\n State,\n ActiveCaseItem,\n CaseWorkflowProps,\n CaseWorkflowStageProps,\n CaseDetails,\n QuestionnaireConfig,\n ImageChoicesConfig,\n ImageChoiceItem\n} from './GenAICoach.types';\nexport { default as GenAIMessage, StreamingContext } from './GenAIMessage';\nexport { default as InitialSuggestedMessage } from './InitialSuggestedMessage';\nexport { isUserMessage, isCoachMessage } from './GenAICoach.utils';\nexport { AISuggestedBadge } from './GenAICoach';\n"]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import type { Ref } from 'react';
|
|
1
|
+
import type { Ref, MouseEvent } from 'react';
|
|
2
2
|
import type { StatusProps, ForwardRefForwardPropsComponent, FieldValueListProps, NoChildrenProp, RequireAtLeastOne, LinkProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import type { CountdownButtonProps } from './CountdownButton';
|
|
4
|
-
interface InfoText extends Partial<Pick<LinkProps, 'href' | 'onPreview'
|
|
4
|
+
interface InfoText extends Partial<Pick<LinkProps, 'href' | 'onPreview'> & {
|
|
5
|
+
onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
|
|
6
|
+
}> {
|
|
5
7
|
/** Visually hidden description for accessibility purposes. */
|
|
6
8
|
description: string;
|
|
7
9
|
/** Information text. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA4B9D,OAAO,KAAK,EACV,WAAW,EACX,+BAA+B,EAC/B,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACV,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,UAAU,QACR,SAAQ,OAAO,CACb,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC,GAAG;IACtC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACtD,CACF;IACD,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,kFAAkF;AAClF,KAAK,kBAAkB,GACnB,CAAC,MAAM,IAAI,CAAC,GACZ;IACE,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEN,MAAM,MAAM,4BAA4B,GAAG,iBAAiB,CAC1D,cAAc,GAAG;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC,GAAG,CACE;IACE,wEAAwE;IACxE,WAAW,EAAE,QAAQ,CAAC;IACtB,yFAAyF;IACzF,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,gFAAgF;IAChF,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB,GACD;IACE,wEAAwE;IACxE,WAAW,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACJ,EACH,UAAU,GAAG,WAAW,CACzB,CAAC;AAyHF,QAAA,MAAM,uBAAuB,EAAE,+BAA+B,CAAC,4BAA4B,CAqHvF,CAAC;AAEL,eAAe,uBAAuB,CAAC"}
|
|
@@ -78,9 +78,9 @@ registerAction({
|
|
|
78
78
|
});
|
|
79
79
|
const NotificationText = ({ content, variant = 'h5' }) => {
|
|
80
80
|
const isString = typeof content === 'string';
|
|
81
|
-
const { text, href, onPreview } = isString ? { text: content } : content;
|
|
81
|
+
const { text, href, onPreview, onClick } = isString ? { text: content } : content;
|
|
82
82
|
const textElement = (_jsx(Text, { variant: variant, as: 'span', children: text }));
|
|
83
|
-
const contentElement = href ? (_jsx(Link, { href: href, previewable: !!onPreview, onPreview: onPreview, hideNewTabIcon: true, children: textElement })) : (textElement);
|
|
83
|
+
const contentElement = href ? (_jsx(Link, { href: href, previewable: !!onPreview, onPreview: onPreview, hideNewTabIcon: true, onClick: onClick, children: textElement })) : (textElement);
|
|
84
84
|
return isString ? (textElement) : (_jsxs("div", { children: [_jsx(VisuallyHiddenText, { children: `${content.description} - ` }), contentElement] }));
|
|
85
85
|
};
|
|
86
86
|
const InteractionNotification = forwardRef(function InteractionNotification({ icon, title, primaryText, secondaryText, tertiaryText, status, fields, incomingNotificationTimeout, onAccept, onDismiss }, ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n Status,\n Text,\n defaultThemeProp,\n Flex,\n StyledText,\n FieldValueList,\n StyledFieldValueList,\n useI18n,\n useDirection,\n Icon,\n StyledLabel,\n useLiveLog,\n registerAction,\n useShortcut,\n useConsolidatedRef,\n useEscape,\n CardFooter,\n VisuallyHiddenText,\n Link\n} from '@pega/cosmos-react-core';\nimport type {\n StatusProps,\n ForwardRefForwardPropsComponent,\n FieldValueListProps,\n NoChildrenProp,\n RequireAtLeastOne,\n LinkProps\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\ninterface InfoText extends Partial<Pick<LinkProps, 'href' | 'onPreview'>> {\n /** Visually hidden description for accessibility purposes. */\n description: string;\n /** Information text. */\n text: string;\n}\n\n/** A simple callback or an object to customize notification button properties. */\ntype NotificationAction =\n | (() => void)\n | {\n /** Custom label for the button. */\n text?: string;\n /** Handler invoked when the button is clicked. */\n handler: () => void;\n };\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n NoChildrenProp & {\n /** Ref to Component. */\n ref?: Ref<HTMLDivElement>;\n /** Name of the icon used in header. */\n icon: string;\n /** Interaction title. */\n title: string;\n /** Represents the current status of interaction. */\n status: { variant: StatusProps['variant']; text: string };\n /** Information structured as field values to be displayed below main section. */\n fields?: FieldValueListProps['fields'];\n /** Timeout definition */\n incomingNotificationTimeout?: {\n startTime: CountdownButtonProps['startTime'];\n answerTimeout: CountdownButtonProps['timeout'];\n onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n };\n /** Callback when accept button is clicked. */\n onAccept?: NotificationAction;\n /** Callback when dismiss button is clicked. */\n onDismiss?: NotificationAction;\n } & (\n | {\n /** Primary information of the notification. For example caller name. */\n primaryText: InfoText;\n /** Secondary information of the notification. For example phone number of the caller. */\n secondaryText?: InfoText;\n /** Tertiary information of the notification. For example role of the caller. */\n tertiaryText?: InfoText;\n }\n | {\n /** Primary information of the notification. For example caller name. */\n primaryText: string;\n /** Secondary information of the notification. For example phone number of the caller. */\n secondaryText?: string;\n /** Tertiary information of the notification. For example role of the caller. */\n tertiaryText?: string;\n }\n ),\n 'onAccept' | 'onDismiss'\n>;\n\ninterface NotificationTextProps {\n /** Information of the notification. */\n content: InfoText | string;\n /** Heading variant for the notification text. */\n variant?: 'h1' | 'h5';\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n const { rtl } = useDirection();\n return css`\n position: fixed;\n inset-block-start: calc(2 * ${base.spacing});\n inset-inline-end: calc(2 * ${base.spacing});\n width: min(calc(100% - 2rem), ${base['content-width'].md});\n max-height: calc(100vh - 2rem);\n z-index: ${base['z-index'].backdrop - 1};\n color: ${base.colors.white};\n animation: SlideIn calc(4 * ${base.animation.speed});\n padding: calc(0.75 * ${base.spacing}) 0;\n box-shadow: ${base.shadow.low};\n\n &&& {\n background-color: ${base.colors.slate['extra-dark']};\n }\n\n @keyframes SlideIn {\n 0% {\n ${rtl\n ? css`\n transform: translateX(calc(-100% - 1rem));\n `\n : css`\n transform: translateX(calc(100% + 1rem));\n `}\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\n overflow: auto;\n\n ${StyledText} {\n color: inherit;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n }\n }\n\n ${StyledFieldValueList} {\n border-block-start: solid 0.0625rem ${base.palette['border-line']};\n padding-block-start: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledLabel} {\n color: ${base.colors.white};\n }\n }\n\n @media (min-width: calc(${base.breakpoints.md})) {\n inset-block-start: calc(8 * ${base.spacing});\n max-height: initial;\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\n\nconst NotificationText = ({ content, variant = 'h5' }: NotificationTextProps) => {\n const isString = typeof content === 'string';\n const { text, href, onPreview } = isString ? { text: content } : content;\n\n const textElement = (\n <Text variant={variant} as='span'>\n {text}\n </Text>\n );\n\n const contentElement = href ? (\n <Link href={href} previewable={!!onPreview} onPreview={onPreview} hideNewTabIcon>\n {textElement}\n </Link>\n ) : (\n textElement\n );\n\n return isString ? (\n textElement\n ) : (\n <div>\n <VisuallyHiddenText>{`${content.description} - `}</VisuallyHiddenText>\n {contentElement}\n </div>\n );\n};\n\nconst InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps> =\n forwardRef(function InteractionNotification(\n {\n icon,\n title,\n primaryText,\n secondaryText,\n tertiaryText,\n status,\n fields,\n incomingNotificationTimeout,\n onAccept,\n onDismiss\n }: PropsWithoutRef<InteractionNotificationProps>,\n ref: InteractionNotificationProps['ref']\n ) {\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const containerRef = useConsolidatedRef(ref);\n const returnRef = useRef<HTMLElement>();\n const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n const onAcceptHandler = typeof onAccept === 'function' ? onAccept : onAccept?.handler;\n const onDismissHandler = typeof onDismiss === 'function' ? onDismiss : onDismiss?.handler;\n const acceptLabel = typeof onAccept !== 'function' ? onAccept?.text : t('accept');\n const dismissLabel = typeof onDismiss !== 'function' ? onDismiss?.text : undefined;\n\n const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n if (containerRef.current) {\n returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n acceptButtonRef.current?.focus();\n }\n });\n const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () =>\n onDismissHandler?.()\n );\n\n useEscape(\n () => {\n returnRef.current?.focus();\n onDismissHandler?.();\n },\n containerRef.current,\n [onDismissHandler]\n );\n\n useEffect(() => {\n announceAssertive({\n message: `${title} ${\n typeof primaryText === 'string' ? primaryText : primaryText.description\n } ${t('status')} ${status.text}. ${\n goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n }${\n dismissBinding && onDismissHandler\n ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n : ''\n }`,\n type: 'alert'\n });\n }, []);\n\n const acceptButton = incomingNotificationTimeout ? (\n <CountdownButton\n variant='primary'\n onClick={onAcceptHandler}\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismissHandler}\n ref={acceptButtonRef}\n >\n {acceptLabel}\n </CountdownButton>\n ) : (\n <Button variant='primary' onClick={onAcceptHandler} ref={acceptButtonRef}>\n {acceptLabel}\n </Button>\n );\n\n return (\n <StyledInteractionNotification\n ref={containerRef}\n data-app-region\n role='alertdialog'\n aria-label={title}\n >\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name={icon} />\n <Text variant='h2'>{title}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ gap: 2 }}>\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <NotificationText content={primaryText} variant='h1' />\n {secondaryText && <NotificationText content={secondaryText} />}\n {tertiaryText && <NotificationText content={tertiaryText} />}\n <Status variant={status.variant}>{status.text}</Status>\n </Flex>\n {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n </CardContent>\n\n {onAcceptHandler ? (\n <CardFooter justify={onDismissHandler ? 'between' : 'end'}>\n {onDismissHandler && (\n <Button onClick={onDismissHandler}>{dismissLabel ?? t('decline')}</Button>\n )}\n {acceptButton}\n </CardFooter>\n ) : (\n <CardFooter justify='end'>\n <Button variant='primary' onClick={onDismissHandler}>\n {dismissLabel ?? t('close')}\n </Button>\n </CardFooter>\n )}\n </StyledInteractionNotification>\n );\n });\n\nexport default InteractionNotification;\n"]}
|
|
1
|
+
{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n Status,\n Text,\n defaultThemeProp,\n Flex,\n StyledText,\n FieldValueList,\n StyledFieldValueList,\n useI18n,\n useDirection,\n Icon,\n StyledLabel,\n useLiveLog,\n registerAction,\n useShortcut,\n useConsolidatedRef,\n useEscape,\n CardFooter,\n VisuallyHiddenText,\n Link\n} from '@pega/cosmos-react-core';\nimport type {\n StatusProps,\n ForwardRefForwardPropsComponent,\n FieldValueListProps,\n NoChildrenProp,\n RequireAtLeastOne,\n LinkProps\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\ninterface InfoText\n extends Partial<\n Pick<LinkProps, 'href' | 'onPreview'> & {\n onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;\n }\n > {\n /** Visually hidden description for accessibility purposes. */\n description: string;\n /** Information text. */\n text: string;\n}\n\n/** A simple callback or an object to customize notification button properties. */\ntype NotificationAction =\n | (() => void)\n | {\n /** Custom label for the button. */\n text?: string;\n /** Handler invoked when the button is clicked. */\n handler: () => void;\n };\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n NoChildrenProp & {\n /** Ref to Component. */\n ref?: Ref<HTMLDivElement>;\n /** Name of the icon used in header. */\n icon: string;\n /** Interaction title. */\n title: string;\n /** Represents the current status of interaction. */\n status: { variant: StatusProps['variant']; text: string };\n /** Information structured as field values to be displayed below main section. */\n fields?: FieldValueListProps['fields'];\n /** Timeout definition */\n incomingNotificationTimeout?: {\n startTime: CountdownButtonProps['startTime'];\n answerTimeout: CountdownButtonProps['timeout'];\n onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n };\n /** Callback when accept button is clicked. */\n onAccept?: NotificationAction;\n /** Callback when dismiss button is clicked. */\n onDismiss?: NotificationAction;\n } & (\n | {\n /** Primary information of the notification. For example caller name. */\n primaryText: InfoText;\n /** Secondary information of the notification. For example phone number of the caller. */\n secondaryText?: InfoText;\n /** Tertiary information of the notification. For example role of the caller. */\n tertiaryText?: InfoText;\n }\n | {\n /** Primary information of the notification. For example caller name. */\n primaryText: string;\n /** Secondary information of the notification. For example phone number of the caller. */\n secondaryText?: string;\n /** Tertiary information of the notification. For example role of the caller. */\n tertiaryText?: string;\n }\n ),\n 'onAccept' | 'onDismiss'\n>;\n\ninterface NotificationTextProps {\n /** Information of the notification. */\n content: InfoText | string;\n /** Heading variant for the notification text. */\n variant?: 'h1' | 'h5';\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n const { rtl } = useDirection();\n return css`\n position: fixed;\n inset-block-start: calc(2 * ${base.spacing});\n inset-inline-end: calc(2 * ${base.spacing});\n width: min(calc(100% - 2rem), ${base['content-width'].md});\n max-height: calc(100vh - 2rem);\n z-index: ${base['z-index'].backdrop - 1};\n color: ${base.colors.white};\n animation: SlideIn calc(4 * ${base.animation.speed});\n padding: calc(0.75 * ${base.spacing}) 0;\n box-shadow: ${base.shadow.low};\n\n &&& {\n background-color: ${base.colors.slate['extra-dark']};\n }\n\n @keyframes SlideIn {\n 0% {\n ${rtl\n ? css`\n transform: translateX(calc(-100% - 1rem));\n `\n : css`\n transform: translateX(calc(100% + 1rem));\n `}\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\n overflow: auto;\n\n ${StyledText} {\n color: inherit;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n }\n }\n\n ${StyledFieldValueList} {\n border-block-start: solid 0.0625rem ${base.palette['border-line']};\n padding-block-start: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledLabel} {\n color: ${base.colors.white};\n }\n }\n\n @media (min-width: calc(${base.breakpoints.md})) {\n inset-block-start: calc(8 * ${base.spacing});\n max-height: initial;\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\n\nconst NotificationText = ({ content, variant = 'h5' }: NotificationTextProps) => {\n const isString = typeof content === 'string';\n const { text, href, onPreview, onClick } = isString ? { text: content } : content;\n\n const textElement = (\n <Text variant={variant} as='span'>\n {text}\n </Text>\n );\n\n const contentElement = href ? (\n <Link\n href={href}\n previewable={!!onPreview}\n onPreview={onPreview}\n hideNewTabIcon\n onClick={onClick}\n >\n {textElement}\n </Link>\n ) : (\n textElement\n );\n\n return isString ? (\n textElement\n ) : (\n <div>\n <VisuallyHiddenText>{`${content.description} - `}</VisuallyHiddenText>\n {contentElement}\n </div>\n );\n};\n\nconst InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps> =\n forwardRef(function InteractionNotification(\n {\n icon,\n title,\n primaryText,\n secondaryText,\n tertiaryText,\n status,\n fields,\n incomingNotificationTimeout,\n onAccept,\n onDismiss\n }: PropsWithoutRef<InteractionNotificationProps>,\n ref: InteractionNotificationProps['ref']\n ) {\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const containerRef = useConsolidatedRef(ref);\n const returnRef = useRef<HTMLElement>();\n const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n const onAcceptHandler = typeof onAccept === 'function' ? onAccept : onAccept?.handler;\n const onDismissHandler = typeof onDismiss === 'function' ? onDismiss : onDismiss?.handler;\n const acceptLabel = typeof onAccept !== 'function' ? onAccept?.text : t('accept');\n const dismissLabel = typeof onDismiss !== 'function' ? onDismiss?.text : undefined;\n\n const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n if (containerRef.current) {\n returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n acceptButtonRef.current?.focus();\n }\n });\n const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () =>\n onDismissHandler?.()\n );\n\n useEscape(\n () => {\n returnRef.current?.focus();\n onDismissHandler?.();\n },\n containerRef.current,\n [onDismissHandler]\n );\n\n useEffect(() => {\n announceAssertive({\n message: `${title} ${\n typeof primaryText === 'string' ? primaryText : primaryText.description\n } ${t('status')} ${status.text}. ${\n goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n }${\n dismissBinding && onDismissHandler\n ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n : ''\n }`,\n type: 'alert'\n });\n }, []);\n\n const acceptButton = incomingNotificationTimeout ? (\n <CountdownButton\n variant='primary'\n onClick={onAcceptHandler}\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismissHandler}\n ref={acceptButtonRef}\n >\n {acceptLabel}\n </CountdownButton>\n ) : (\n <Button variant='primary' onClick={onAcceptHandler} ref={acceptButtonRef}>\n {acceptLabel}\n </Button>\n );\n\n return (\n <StyledInteractionNotification\n ref={containerRef}\n data-app-region\n role='alertdialog'\n aria-label={title}\n >\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name={icon} />\n <Text variant='h2'>{title}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ gap: 2 }}>\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <NotificationText content={primaryText} variant='h1' />\n {secondaryText && <NotificationText content={secondaryText} />}\n {tertiaryText && <NotificationText content={tertiaryText} />}\n <Status variant={status.variant}>{status.text}</Status>\n </Flex>\n {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n </CardContent>\n\n {onAcceptHandler ? (\n <CardFooter justify={onDismissHandler ? 'between' : 'end'}>\n {onDismissHandler && (\n <Button onClick={onDismissHandler}>{dismissLabel ?? t('decline')}</Button>\n )}\n {acceptButton}\n </CardFooter>\n ) : (\n <CardFooter justify='end'>\n <Button variant='primary' onClick={onDismissHandler}>\n {dismissLabel ?? t('close')}\n </Button>\n </CardFooter>\n )}\n </StyledInteractionNotification>\n );\n });\n\nexport default InteractionNotification;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Stages.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAiJnD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6NAmF9B,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,YAAY;aAAwB,YAAY;YAoD3D,CAAC;AAIH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,6NA6B1B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;eAA4B,OAAO;YAe9D,CAAC;AAsDH;;;GAGG;AACH,eAAO,MAAM,WAAW;YACd,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;aACT,YAAY;YA6EtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,uBAAuB,kaAiBlC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,eAAe;;;gBAA8B,OAAO;kLAIhE,CAAC;AAwZF;;;GAGG;AACH,eAAO,MAAM,oBAAoB;eACpB,OAAO;aACT,YAAY;YAyDtB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,oBAAoB,mOAS/B,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,UAAU;eAA0B,OAAO;YAoBtD,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;oMAMhC,CAAC;AAIH;;GAEG;AACH,eAAO,MAAM,kBAAkB,6NAI7B,CAAC;AAaH,eAAO,MAAM,oBAAoB,+NAS/B,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B;YAChC,WAAW,GAAG,SAAS,GAAG,SAAS;mBAC5B,OAAO;eACX,OAAO;YA8ElB,CAAC;AAIH,eAAO,MAAM,qBAAqB;YACxB,WAAW,GAAG,SAAS,GAAG,SAAS;eAChC,OAAO;YAoHlB,CAAC;AAIH;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yOAEnC,CAAC"}
|
|
@@ -64,8 +64,15 @@ const chevronConfig = {
|
|
|
64
64
|
// Equal to `width` so the point extends exactly one chevron-width beyond the stage boundary.
|
|
65
65
|
offsetRight: 'calc(1.445 * var(--chevron-spacing))',
|
|
66
66
|
// Coarse-pointer equivalents of offsetLeft/offsetRight, scaled to match coarseWidth/coarseSquareSize.
|
|
67
|
-
coarseOffsetLeft:
|
|
68
|
-
|
|
67
|
+
// coarseOffsetLeft must satisfy: coarseSquareSize = 2 × coarseWidth + coarseOffsetLeft
|
|
68
|
+
// (5 = 2 × 1.797 + 1.406) so that ::before and ::after co-locate on coarse devices.
|
|
69
|
+
coarseOffsetLeft: 'calc(1.406 * var(--chevron-spacing))',
|
|
70
|
+
coarseOffsetRight: 'calc(1.797 * var(--chevron-spacing))',
|
|
71
|
+
// Pre-computed flat positions for ::before notch and ::after point.
|
|
72
|
+
notchInsetStart: 'calc(-2.305 * var(--chevron-spacing))',
|
|
73
|
+
// 3.203 = exact alignment (coarseSquareSize - coarseWidth); slightly overdone default clears sub-pixel rounding on 3× displays.
|
|
74
|
+
coarseNotchInsetStart: 'calc(-1 * var(--stages-coarse-notch-correction) * var(--chevron-spacing))',
|
|
75
|
+
pointInsetEnd: '0'
|
|
69
76
|
};
|
|
70
77
|
// === Chevron Helpers ===
|
|
71
78
|
// After team discussion we decided to use logical properties throughout — `inset-block-start`
|
|
@@ -95,11 +102,11 @@ const createChevronBaseStyles = (config, borderThicknessVar) => css `
|
|
|
95
102
|
}
|
|
96
103
|
|
|
97
104
|
&:not(:nth-of-type(-n + 2))::before {
|
|
98
|
-
inset-inline-start:
|
|
105
|
+
inset-inline-start: ${config.notchInsetStart};
|
|
99
106
|
}
|
|
100
107
|
|
|
101
108
|
&:not(:nth-last-of-type(-n + 2))::after {
|
|
102
|
-
inset-inline-end:
|
|
109
|
+
inset-inline-end: ${config.pointInsetEnd};
|
|
103
110
|
}
|
|
104
111
|
`;
|
|
105
112
|
const createChevronInteractiveStates = (config, borderThicknessVar, includeHover = true) => css `
|
|
@@ -255,6 +262,8 @@ export const StyledStages = styled.ol(({ theme, variant }) => {
|
|
|
255
262
|
}
|
|
256
263
|
|
|
257
264
|
@media (pointer: coarse) {
|
|
265
|
+
/* 3.203 = exact alignment; slightly overdone default to clear sub-pixel rounding on 3× displays */
|
|
266
|
+
--stages-coarse-notch-correction: 3.35;
|
|
258
267
|
scrollbar-width: none;
|
|
259
268
|
|
|
260
269
|
&::-webkit-scrollbar {
|
|
@@ -518,7 +527,7 @@ const stageContainerChevronStyles = (theme, readOnly) => {
|
|
|
518
527
|
}
|
|
519
528
|
|
|
520
529
|
/* First stage: no left notch, extended width to cover the full left edge */
|
|
521
|
-
&:nth-of-type(2) > ${StyledStage} {
|
|
530
|
+
&:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {
|
|
522
531
|
--stage-chevron-width: ${chevronConfig.width};
|
|
523
532
|
width: calc(100% + (2 * var(--stage-chevron-width)));
|
|
524
533
|
padding-inline-start: calc(var(--chevron-spacing));
|
|
@@ -556,7 +565,7 @@ const stageContainerChevronStyles = (theme, readOnly) => {
|
|
|
556
565
|
}
|
|
557
566
|
|
|
558
567
|
/* Last stage: no right point */
|
|
559
|
-
&:nth-last-of-type(2) > ${StyledStage} {
|
|
568
|
+
&:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {
|
|
560
569
|
--stage-chevron-width: ${chevronConfig.width};
|
|
561
570
|
padding-inline-end: 0;
|
|
562
571
|
width: 100%;
|
|
@@ -593,14 +602,42 @@ const stageContainerChevronStyles = (theme, readOnly) => {
|
|
|
593
602
|
}
|
|
594
603
|
|
|
595
604
|
/* RTL: flip clip-paths for first and last stages */
|
|
596
|
-
[dir='rtl'] &:nth-of-type(2) > ${StyledStage} {
|
|
605
|
+
[dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {
|
|
597
606
|
${stageClipPath(true, false, true)}
|
|
598
607
|
}
|
|
599
608
|
|
|
600
|
-
[dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {
|
|
609
|
+
[dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {
|
|
601
610
|
${stageClipPath(false, true, true)}
|
|
602
611
|
}
|
|
603
612
|
|
|
613
|
+
/* Single stage: plain rectangle — no clip-path notch, inset shadows on both sides */
|
|
614
|
+
&:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {
|
|
615
|
+
--stage-chevron-width: ${chevronConfig.width};
|
|
616
|
+
clip-path: none;
|
|
617
|
+
padding-inline-start: calc(var(--chevron-spacing));
|
|
618
|
+
|
|
619
|
+
${includeHover &&
|
|
620
|
+
css `
|
|
621
|
+
&:hover {
|
|
622
|
+
box-shadow:
|
|
623
|
+
inset calc(2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette['border-line']},
|
|
624
|
+
inset calc(-2 * var(--chevron-border-thickness)) 0 0
|
|
625
|
+
${theme.base.palette['border-line']};
|
|
626
|
+
}
|
|
627
|
+
`}
|
|
628
|
+
|
|
629
|
+
&:focus-visible,
|
|
630
|
+
&:active {
|
|
631
|
+
box-shadow:
|
|
632
|
+
inset calc(2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette.interactive},
|
|
633
|
+
inset calc(-2 * var(--chevron-border-thickness)) 0 0 ${theme.base.palette.interactive};
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
@media (pointer: coarse) {
|
|
637
|
+
--stage-chevron-width: ${chevronConfig.coarseWidth};
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
|
|
604
641
|
@media (pointer: coarse) {
|
|
605
642
|
margin-inline-start: calc(-1 * ${chevronConfig.coarseWidth});
|
|
606
643
|
|
|
@@ -609,18 +646,16 @@ const stageContainerChevronStyles = (theme, readOnly) => {
|
|
|
609
646
|
inset-block-start: calc(50% - ${chevronConfig.coarseSquareSize} / 2);
|
|
610
647
|
width: ${chevronConfig.coarseSquareSize};
|
|
611
648
|
height: ${chevronConfig.coarseSquareSize};
|
|
649
|
+
border-inline-end-width: calc(2 * var(--chevron-border-thickness));
|
|
650
|
+
border-block-start-width: calc(2 * var(--chevron-border-thickness));
|
|
612
651
|
}
|
|
613
652
|
|
|
614
653
|
&:not(:nth-of-type(-n + 2))::before {
|
|
615
|
-
inset-inline-start:
|
|
616
|
-
-1 * ${chevronConfig.coarseWidth} - ${chevronConfig.coarseOffsetLeft}
|
|
617
|
-
);
|
|
654
|
+
inset-inline-start: ${chevronConfig.coarseNotchInsetStart};
|
|
618
655
|
}
|
|
619
656
|
|
|
620
657
|
&:not(:nth-last-of-type(-n + 2))::after {
|
|
621
|
-
inset-inline-end:
|
|
622
|
-
-1 * ${chevronConfig.coarseWidth} + ${chevronConfig.coarseOffsetRight}
|
|
623
|
-
);
|
|
658
|
+
inset-inline-end: 0;
|
|
624
659
|
}
|
|
625
660
|
}
|
|
626
661
|
`;
|
|
@@ -702,7 +737,7 @@ const stageContainerSegmentedStyles = (theme, readOnly) => {
|
|
|
702
737
|
}
|
|
703
738
|
|
|
704
739
|
/* First stage (no inline-start cut): flat left edge + inset shadow edge indicator */
|
|
705
|
-
&:nth-of-type(2) > ${StyledStage} {
|
|
740
|
+
&:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {
|
|
706
741
|
${segmentedClipPath(false, true)}
|
|
707
742
|
|
|
708
743
|
${includeHover &&
|
|
@@ -730,7 +765,7 @@ const stageContainerSegmentedStyles = (theme, readOnly) => {
|
|
|
730
765
|
}
|
|
731
766
|
|
|
732
767
|
/* Last stage (no inline-end cut): flat right edge + inset shadow edge indicator */
|
|
733
|
-
&:nth-last-of-type(2) > ${StyledStage} {
|
|
768
|
+
&:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {
|
|
734
769
|
${segmentedClipPath(true, false)}
|
|
735
770
|
|
|
736
771
|
${includeHover &&
|
|
@@ -758,14 +793,38 @@ const stageContainerSegmentedStyles = (theme, readOnly) => {
|
|
|
758
793
|
}
|
|
759
794
|
|
|
760
795
|
/* RTL: flip clip-paths for first and last stage buttons */
|
|
761
|
-
[dir='rtl'] &:nth-of-type(2) > ${StyledStage} {
|
|
796
|
+
[dir='rtl'] &:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {
|
|
762
797
|
${segmentedClipPath(true, false, true)}
|
|
763
798
|
}
|
|
764
799
|
|
|
765
|
-
[dir='rtl'] &:nth-last-of-type(2) > ${StyledStage} {
|
|
800
|
+
[dir='rtl'] &:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {
|
|
766
801
|
${segmentedClipPath(false, true, true)}
|
|
767
802
|
}
|
|
768
803
|
|
|
804
|
+
/* Single stage: plain rectangle — no diagonal cuts, inset shadows on both sides */
|
|
805
|
+
&:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {
|
|
806
|
+
clip-path: none;
|
|
807
|
+
padding-inline-start: calc(var(--chevron-spacing));
|
|
808
|
+
padding-inline-end: calc(var(--chevron-spacing));
|
|
809
|
+
|
|
810
|
+
${includeHover &&
|
|
811
|
+
css `
|
|
812
|
+
&:hover {
|
|
813
|
+
box-shadow:
|
|
814
|
+
inset var(--segmented-border-thickness) 0 0 ${theme.base.palette['border-line']},
|
|
815
|
+
inset calc(-1 * var(--segmented-border-thickness)) 0 0
|
|
816
|
+
${theme.base.palette['border-line']};
|
|
817
|
+
}
|
|
818
|
+
`}
|
|
819
|
+
|
|
820
|
+
&:focus-visible,
|
|
821
|
+
&:active {
|
|
822
|
+
box-shadow:
|
|
823
|
+
inset var(--segmented-border-thickness) 0 0 ${theme.base.palette.interactive},
|
|
824
|
+
inset calc(-1 * var(--segmented-border-thickness)) 0 0 ${theme.base.palette.interactive};
|
|
825
|
+
}
|
|
826
|
+
}
|
|
827
|
+
|
|
769
828
|
/* RTL: mirror the pseudo clip-paths.
|
|
770
829
|
* In LTR the strip goes top-right → bottom-left (polygon A 0%, A+B 0%, B 100%, 0% 100%).
|
|
771
830
|
* In RTL the pseudo is positioned at the opposite physical edge via logical inset properties,
|
|
@@ -824,16 +883,21 @@ export const StyledStageContainer = styled.li(({ theme, theme: { components: { c
|
|
|
824
883
|
`}
|
|
825
884
|
|
|
826
885
|
/* Corner radii are shared across all shape variants */
|
|
827
|
-
&:nth-of-type(2) > ${StyledStage} {
|
|
886
|
+
&:nth-of-type(2):not(:nth-last-of-type(2)) > ${StyledStage} {
|
|
828
887
|
border-start-start-radius: ${borderRadius};
|
|
829
888
|
border-end-start-radius: ${borderRadius};
|
|
830
889
|
}
|
|
831
890
|
|
|
832
|
-
&:nth-last-of-type(2) > ${StyledStage} {
|
|
891
|
+
&:nth-last-of-type(2):not(:nth-of-type(2)) > ${StyledStage} {
|
|
833
892
|
border-start-end-radius: ${borderRadius};
|
|
834
893
|
border-end-end-radius: ${borderRadius};
|
|
835
894
|
}
|
|
836
895
|
|
|
896
|
+
&:nth-of-type(2):nth-last-of-type(2) > ${StyledStage} {
|
|
897
|
+
border-radius: ${borderRadius};
|
|
898
|
+
width: 100%;
|
|
899
|
+
}
|
|
900
|
+
|
|
837
901
|
${stageContainerVariants[shape](theme, readOnly)}
|
|
838
902
|
`;
|
|
839
903
|
});
|