@pega/cosmos-react-work 9.19.0 → 9.21.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/AppAnnouncement/AppAnnouncement.d.ts.map +1 -1
- package/lib/components/AppAnnouncement/AppAnnouncement.js +30 -2
- package/lib/components/AppAnnouncement/AppAnnouncement.js.map +1 -1
- package/lib/components/Article/ArticleRating.d.ts.map +1 -1
- package/lib/components/Article/ArticleRating.js +2 -2
- package/lib/components/Article/ArticleRating.js.map +1 -1
- package/lib/components/ArticleList/ArticleFeedback.d.ts.map +1 -1
- package/lib/components/ArticleList/ArticleFeedback.js +2 -2
- package/lib/components/ArticleList/ArticleFeedback.js.map +1 -1
- package/lib/components/CaseView/CaseHeader/CaseHeader.d.ts.map +1 -1
- package/lib/components/CaseView/CaseHeader/CaseHeader.js +1 -1
- package/lib/components/CaseView/CaseHeader/CaseHeader.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.js +5 -0
- package/lib/components/GenAICoach/GenAICoach.styles.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.types.d.ts +1 -0
- 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 +21 -19
- package/lib/components/GenAICoach/GenAIMessage.js.map +1 -1
- package/lib/components/GenAICoach/GenAIMessageFeedback.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAIMessageFeedback.js +2 -2
- package/lib/components/GenAICoach/GenAIMessageFeedback.js.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.d.ts.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.js +7 -5
- package/lib/components/Shortcuts/Shortcuts.js.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.types.d.ts +4 -2
- package/lib/components/Shortcuts/Shortcuts.types.d.ts.map +1 -1
- package/lib/components/Shortcuts/Shortcuts.types.js.map +1 -1
- package/lib/components/Tasks/TaskCard.d.ts.map +1 -1
- package/lib/components/Tasks/TaskCard.js +5 -2
- package/lib/components/Tasks/TaskCard.js.map +1 -1
- package/lib/components/Tasks/Tasks.d.ts +2 -2
- package/lib/components/Tasks/Tasks.d.ts.map +1 -1
- package/lib/components/Tasks/Tasks.js.map +1 -1
- package/package.json +3 -3
|
@@ -20,12 +20,26 @@ registerIcon(polarisSolidIcon, brainIcon, caretLeftIcon, caretRightIcon);
|
|
|
20
20
|
export const StreamingContext = createContext({
|
|
21
21
|
isStreamingMessage: false
|
|
22
22
|
});
|
|
23
|
-
const
|
|
23
|
+
const AgentRichTextViewer = ({ content, markdownMap, simplified }) => {
|
|
24
|
+
const theme = useTheme();
|
|
25
|
+
const foregroundColor = calculateForegroundColor(theme.components.agent.background, theme.components.agent['foreground-color']);
|
|
26
|
+
return (_jsx(ThemeOverride, { theme: {
|
|
27
|
+
base: {
|
|
28
|
+
palette: {
|
|
29
|
+
'foreground-color': foregroundColor,
|
|
30
|
+
...(simplified && {
|
|
31
|
+
'secondary-background': transparentize(0.7, readableColor(foregroundColor))
|
|
32
|
+
})
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}, children: _jsx(RichTextViewer, { content: content, type: 'markdown', markdownMap: markdownMap }) }));
|
|
36
|
+
};
|
|
37
|
+
const LoadingContent = ({ message, markdownMap, progressSteps, progressStepsCompleted, simplified }) => {
|
|
24
38
|
if (!progressSteps?.length) {
|
|
25
39
|
return _jsx(GenAIMessageProgress, { messages: message ? [message] : undefined });
|
|
26
40
|
}
|
|
27
41
|
if (message) {
|
|
28
|
-
return (_jsxs(_Fragment, { children: [_jsx(
|
|
42
|
+
return (_jsxs(_Fragment, { children: [_jsx(AgentRichTextViewer, { content: message, markdownMap: markdownMap, simplified: simplified }), _jsx(Progress, { variant: 'ellipsis', placement: 'inline' })] }));
|
|
29
43
|
}
|
|
30
44
|
return _jsx(GenAIMessageProgress, { messages: progressSteps, completedSteps: progressStepsCompleted });
|
|
31
45
|
};
|
|
@@ -66,7 +80,6 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
66
80
|
const testIds = useTestIds(props.testId, getGenAICoachTestIds);
|
|
67
81
|
const t = useI18n();
|
|
68
82
|
const { create } = useModalManager();
|
|
69
|
-
const theme = useTheme();
|
|
70
83
|
const modalMethodsRef = useRef(null);
|
|
71
84
|
const { message, announceInteraction, simplifiedAgent, ...restProps } = props;
|
|
72
85
|
const isStringMessage = typeof message === 'string';
|
|
@@ -127,8 +140,6 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
127
140
|
}, [isStreamingMessage, props]);
|
|
128
141
|
if (isCoachMessage(props)) {
|
|
129
142
|
const { id: messageId, coachName, isCustom, suggestions, imageChoices, onSend, loading, error, feedback, markdownMap, messageActions, showSenderInfo } = props;
|
|
130
|
-
const agentBackground = theme.components.agent.background;
|
|
131
|
-
const agentForeground = calculateForegroundColor(agentBackground, theme.components.agent['foreground-color']);
|
|
132
143
|
const { reaction } = feedback ?? {};
|
|
133
144
|
const { toolState, onViewToolsConsidered } = toolCandidates ?? {};
|
|
134
145
|
let selectedFeedbackResponse;
|
|
@@ -159,10 +170,10 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
159
170
|
});
|
|
160
171
|
onViewToolsConsidered?.(messageId);
|
|
161
172
|
};
|
|
162
|
-
const streamingContent = isStreamingMessage && (_jsx(_Fragment, { children: message ? (_jsxs(_Fragment, { children: [_jsx(StreamingContext.Provider, { value: streamingContext, children: isStringMessage ? (_jsx(
|
|
163
|
-
const messageContent = (_jsxs(StyledMessage, { simplified: simplifiedAgent && !showSenderInfo, children: [streamingContent, loading || error ? (_jsxs(_Fragment, { children: [loading && !isStreamingMessage && (_jsx(LoadingContent, { message: isStringMessage ? message : undefined, markdownMap: markdownMap, progressSteps: props.progressSteps, progressStepsCompleted: props.progressStepsCompleted })), error && _jsx(ErrorState, { message: error })] })) : (_jsxs(_Fragment, { children: [!isStreamingMessage &&
|
|
173
|
+
const streamingContent = isStreamingMessage && (_jsx(_Fragment, { children: message ? (_jsxs(_Fragment, { children: [_jsx(StreamingContext.Provider, { value: streamingContext, children: isStringMessage ? (_jsx(AgentRichTextViewer, { content: isStreamingMessage ? streamingMessage : message, markdownMap: markdownMap, simplified: simplifiedAgent })) : (message) }), loading && _jsx(Progress, { variant: 'ellipsis', placement: 'inline' })] })) : ((loading || props.progressSteps?.length) && (_jsx(GenAIMessageProgress, { messages: props.progressSteps?.length ? props.progressSteps : undefined, completedSteps: props.progressSteps?.length ? props.progressStepsCompleted : undefined }))) }));
|
|
174
|
+
const messageContent = (_jsxs(StyledMessage, { simplified: simplifiedAgent && !showSenderInfo, children: [streamingContent, loading || error ? (_jsxs(_Fragment, { children: [loading && !isStreamingMessage && (_jsx(LoadingContent, { message: isStringMessage ? message : undefined, markdownMap: markdownMap, progressSteps: props.progressSteps, progressStepsCompleted: props.progressStepsCompleted, simplified: simplifiedAgent })), error && _jsx(ErrorState, { message: error })] })) : (_jsxs(_Fragment, { children: [!isStreamingMessage &&
|
|
164
175
|
message &&
|
|
165
|
-
(isStringMessage ? (_jsx(
|
|
176
|
+
(isStringMessage ? (_jsx(AgentRichTextViewer, { content: message, markdownMap: markdownMap, simplified: simplifiedAgent })) : (message)), props.isToolConfirmation && _jsx(ToolConfirmationMessage, { ...props }), ((!isCustom && (feedback || onViewToolsConsidered)) || messageActions) && (_jsxs(Flex, { container: {
|
|
166
177
|
direction: 'row',
|
|
167
178
|
gap: 1,
|
|
168
179
|
pad: [1, undefined],
|
|
@@ -170,16 +181,7 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
170
181
|
}, 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 }) => {
|
|
171
182
|
return (_jsx(Button, { as: StyledSuggestion, onClick: onSend ? () => onSend({ id, message: prompt }) : undefined, variant: selected ? 'primary' : undefined, children: prompt }, id));
|
|
172
183
|
}) })), imageChoices && imageChoices.items.length > 0 && (_jsx(SelectionCardGridRenderer, { imageChoices: imageChoices, onSend: onSend }))] }))] }));
|
|
173
|
-
return (_jsx(
|
|
174
|
-
base: {
|
|
175
|
-
palette: {
|
|
176
|
-
'foreground-color': agentForeground,
|
|
177
|
-
...(simplifiedAgent && {
|
|
178
|
-
'secondary-background': transparentize(0.7, readableColor(agentForeground))
|
|
179
|
-
})
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
}, children: _jsx(Flex, { as: 'li', "data-testid": testIds.coachMessage, ...restProps, container: { direction: 'row', pad: [1, 0], gap: 1 }, type: 'message', "aria-label": ariaLabel, ref: ref, children: simplifiedAgent ? (_jsxs(_Fragment, { children: [showSenderInfo && (_jsx(StyledGenAIAvatar, { size: 'l', name: coachName ?? t('agent'), icon: 'polaris-solid' })), _jsxs(Flex, { item: { grow: 1 }, container: { direction: 'column', gap: 0.75 }, children: [coachName && showSenderInfo && (_jsx(StyledMessageSender, { variant: 'primary', children: coachName })), messageContent] })] })) : (messageContent) }) }));
|
|
184
|
+
return (_jsx(Flex, { as: 'li', "data-testid": testIds.coachMessage, ...restProps, container: { direction: 'row', pad: [1, 0], gap: 1 }, type: 'message', "aria-label": ariaLabel, ref: ref, children: simplifiedAgent ? (_jsxs(_Fragment, { children: [showSenderInfo && (_jsx(StyledGenAIAvatar, { size: 'l', name: coachName ?? t('agent'), icon: 'polaris-solid' })), _jsxs(Flex, { item: { grow: 1 }, container: { direction: 'column', gap: 0.75 }, children: [coachName && showSenderInfo && (_jsx(StyledMessageSender, { variant: 'primary', children: coachName })), messageContent] })] })) : (messageContent) }));
|
|
183
185
|
}
|
|
184
186
|
if (isUserMessage(props)) {
|
|
185
187
|
if (plainTextMessage) {
|
|
@@ -188,7 +190,7 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
188
190
|
if (announceInteraction) {
|
|
189
191
|
ariaLabel = `${ariaLabel} ${t('interaction_message')}`;
|
|
190
192
|
}
|
|
191
|
-
const attachmentsAndMessage = (_jsxs(_Fragment, { children: [props.attachments && props.attachments.length > 0 && (_jsx(StyledAttachmentsList, { type: 'display', items: props.attachments })), props.message && _jsx(
|
|
193
|
+
const attachmentsAndMessage = (_jsxs(_Fragment, { children: [props.attachments && props.attachments.length > 0 && (_jsx(StyledAttachmentsList, { type: 'display', items: props.attachments })), props.message && (_jsx(AgentRichTextViewer, { content: props.message, simplified: simplifiedAgent }))] }));
|
|
192
194
|
if (!simplifiedAgent) {
|
|
193
195
|
return (_jsx(StyledUserMessage, { "data-testid": testIds.userMessage, ...restProps,
|
|
194
196
|
// @ts-expect-error FIXME: Need to validate if we can remove message, and double 'as'
|
|
@@ -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, 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
|
+
{"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 AgentRichTextViewer = ({\n content,\n markdownMap,\n simplified\n}: {\n content: string;\n markdownMap?: CoachLoadingContentProps['markdownMap'];\n simplified?: boolean;\n}) => {\n const theme = useTheme();\n const foregroundColor = calculateForegroundColor(\n theme.components.agent.background,\n theme.components.agent['foreground-color']\n );\n return (\n <ThemeOverride\n theme={{\n base: {\n palette: {\n 'foreground-color': foregroundColor,\n ...(simplified && {\n 'secondary-background': transparentize(0.7, readableColor(foregroundColor))\n })\n }\n }\n }}\n >\n <RichTextViewer content={content} type='markdown' markdownMap={markdownMap} />\n </ThemeOverride>\n );\n};\n\nconst LoadingContent = ({\n message,\n markdownMap,\n progressSteps,\n progressStepsCompleted,\n simplified\n}: CoachLoadingContentProps) => {\n if (!progressSteps?.length) {\n return <GenAIMessageProgress messages={message ? [message] : undefined} />;\n }\n\n if (message) {\n return (\n <>\n <AgentRichTextViewer content={message} markdownMap={markdownMap} simplified={simplified} />\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\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 { 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 <AgentRichTextViewer\n content={isStreamingMessage ? streamingMessage : message}\n markdownMap={markdownMap}\n simplified={simplifiedAgent}\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 simplified={simplifiedAgent}\n />\n )}\n {error && <ErrorState message={error} />}\n </>\n ) : (\n <>\n {/* Non streaming content */}\n {!isStreamingMessage &&\n message &&\n (isStringMessage ? (\n <AgentRichTextViewer\n content={message}\n markdownMap={markdownMap}\n simplified={simplifiedAgent}\n />\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 <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 );\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 && (\n <AgentRichTextViewer content={props.message} simplified={simplifiedAgent} />\n )}\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAIMessageFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessageFeedback.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAY,MAAM,oBAAoB,CAAC;AAIzE,QAAA,MAAM,2BAA2B,GAAI,yBAAyB,oBAAoB,
|
|
1
|
+
{"version":3,"file":"GenAIMessageFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessageFeedback.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAY,MAAM,oBAAoB,CAAC;AAIzE,QAAA,MAAM,2BAA2B,GAAI,yBAAyB,oBAAoB,4CAsLjF,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
|
|
@@ -87,9 +87,9 @@ const GenAIMessageFeedbackButtons = ({ messageId, feedback }) => {
|
|
|
87
87
|
}, autoResize: false }) }));
|
|
88
88
|
const shouldShowIcon = !allowFeedbackResubmission && reaction;
|
|
89
89
|
if (shouldShowIcon) {
|
|
90
|
-
return (_jsxs(Flex, { container: { pad: [0.5, undefined] }, ref: seticonEl, tabIndex: -1, "aria-label": t('selected_noun', [isLikeActive ? t('good_response') : t('bad_response')]), role: 'status', children: [_jsx(Icon, { name: isLikeActive ? 'thumbs-up-solid' : 'thumbs-down-solid' }), _jsx(Tooltip, { target: iconEl, describeTarget: false, children: isLikeActive ? t('good_response') : t('bad_response') }), feedbackDialog] }));
|
|
90
|
+
return (_jsxs(Flex, { container: { pad: [0.5, undefined] }, ref: seticonEl, tabIndex: -1, "aria-label": t('selected_noun', [isLikeActive ? t('good_response') : t('bad_response')]), role: 'status', children: [_jsx(Icon, { name: isLikeActive ? 'thumbs-up-solid' : 'thumbs-down-solid', emphasized: true }), _jsx(Tooltip, { target: iconEl, describeTarget: false, children: isLikeActive ? t('good_response') : t('bad_response') }), feedbackDialog] }));
|
|
91
91
|
}
|
|
92
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { label: t('good_response'), variant: 'simple', icon: true, compact: true, ref: likeButtonRef, onClick: () => handleReactionClick('liked'), "aria-pressed": isLikeActive, children: _jsx(Icon, { name: isLikeActive ? 'thumbs-up-solid' : 'thumbs-up' }) }), _jsx(Button, { label: t('bad_response'), variant: 'simple', icon: true, compact: true, ref: dislikeButtonRef, onClick: () => handleReactionClick('disliked'), "aria-pressed": isDislikeActive, children: _jsx(Icon, { name: isDislikeActive ? 'thumbs-down-solid' : 'thumbs-down' }) })] }), feedbackDialog] }));
|
|
92
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { label: t('good_response'), variant: 'simple', icon: true, compact: true, ref: likeButtonRef, onClick: () => handleReactionClick('liked'), "aria-pressed": isLikeActive, children: _jsx(Icon, { name: isLikeActive ? 'thumbs-up-solid' : 'thumbs-up', emphasized: isLikeActive }) }), _jsx(Button, { label: t('bad_response'), variant: 'simple', icon: true, compact: true, ref: dislikeButtonRef, onClick: () => handleReactionClick('disliked'), "aria-pressed": isDislikeActive, children: _jsx(Icon, { name: isDislikeActive ? 'thumbs-down-solid' : 'thumbs-down', emphasized: isDislikeActive }) })] }), feedbackDialog] }));
|
|
93
93
|
};
|
|
94
94
|
export default GenAIMessageFeedbackButtons;
|
|
95
95
|
//# sourceMappingURL=GenAIMessageFeedback.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAIMessageFeedback.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessageFeedback.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport {\n Button,\n Flex,\n FormDialog,\n Icon,\n TextArea,\n Tooltip,\n registerIcon,\n useElement,\n useI18n\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\n\nimport type { MessageFeedbackProps, Reaction } from './GenAICoach.types';\n\nregisterIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);\n\nconst GenAIMessageFeedbackButtons = ({ messageId, feedback }: MessageFeedbackProps) => {\n const {\n reaction,\n feedbackText = '',\n allowFeedbackResubmission = false,\n promptFeedbackOn = 'disliked',\n onReaction,\n onFeedbackComplete\n } = feedback ?? {};\n\n const t = useI18n();\n\n const [feedbackVal, setFeedbackVal] = useState(feedbackText);\n const [showDialog, setShowDialog] = useState(false);\n\n const likeButtonRef = useRef<HTMLButtonElement>(null);\n const dislikeButtonRef = useRef<HTMLButtonElement>(null);\n const shouldOpenDialogRef = useRef(false);\n const [iconEl, seticonEl] = useElement<HTMLDivElement>();\n\n const isLikeActive = reaction === 'liked';\n const isDislikeActive = reaction === 'disliked';\n\n const needsDialog = (reactionType: Reaction) => {\n switch (promptFeedbackOn) {\n case 'disliked':\n return reactionType === 'disliked';\n case 'liked':\n return reactionType === 'liked';\n case 'both':\n return true;\n default:\n return false;\n }\n };\n\n const handleReactionClick = useCallback(\n (reactionType: Reaction) => {\n if (reaction === reactionType) {\n if (allowFeedbackResubmission) {\n onReaction?.(messageId, undefined);\n }\n\n return;\n }\n\n onReaction?.(messageId, reactionType);\n\n if (needsDialog(reactionType)) {\n if (reaction !== reactionType) {\n setFeedbackVal('');\n } else {\n setFeedbackVal(feedbackText);\n }\n\n if (!allowFeedbackResubmission) {\n shouldOpenDialogRef.current = true;\n } else {\n setShowDialog(true);\n }\n }\n },\n [reaction, feedbackText, allowFeedbackResubmission, promptFeedbackOn, messageId, onReaction]\n );\n\n const closeDialog = useCallback(\n (comment?: string) => {\n setShowDialog(false);\n shouldOpenDialogRef.current = false;\n\n onFeedbackComplete?.(messageId, comment);\n\n if (!allowFeedbackResubmission && iconEl) {\n iconEl.focus();\n }\n },\n [allowFeedbackResubmission, onFeedbackComplete, messageId, iconEl]\n );\n\n const getDialogTarget = () => {\n if (!allowFeedbackResubmission && iconEl) {\n return iconEl;\n }\n\n return isLikeActive ? likeButtonRef.current : dislikeButtonRef.current;\n };\n\n useEffect(() => {\n if (iconEl && shouldOpenDialogRef.current && !allowFeedbackResubmission) {\n setShowDialog(true);\n shouldOpenDialogRef.current = false;\n }\n }, [iconEl, allowFeedbackResubmission]);\n\n useEffect(() => {\n if (!showDialog && reaction && allowFeedbackResubmission) {\n const reactionButton =\n reaction === 'liked' ? likeButtonRef.current : dislikeButtonRef.current;\n reactionButton?.focus();\n }\n }, [showDialog, reaction, allowFeedbackResubmission]);\n\n const dialogTarget = getDialogTarget();\n\n const feedbackDialog = showDialog && dialogTarget && (\n <FormDialog\n target={dialogTarget}\n heading={t('share_feedback')}\n onCancel={() => closeDialog()}\n onSubmit={() => closeDialog(feedbackVal)}\n onKeyDown={e => e.stopPropagation()}\n >\n <TextArea\n value={feedbackVal}\n onChange={e => setFeedbackVal(e.target.value)}\n onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n closeDialog(feedbackVal);\n }\n }}\n autoResize={false}\n />\n </FormDialog>\n );\n\n const shouldShowIcon = !allowFeedbackResubmission && reaction;\n\n if (shouldShowIcon) {\n return (\n <Flex\n container={{ pad: [0.5, undefined] }}\n ref={seticonEl}\n tabIndex={-1}\n aria-label={t('selected_noun', [isLikeActive ? t('good_response') : t('bad_response')])}\n role='status'\n >\n <Icon name={isLikeActive ? 'thumbs-up-solid' : 'thumbs-down-solid'} />\n\n <Tooltip target={iconEl} describeTarget={false}>\n {isLikeActive ? t('good_response') : t('bad_response')}\n </Tooltip>\n\n {feedbackDialog}\n </Flex>\n );\n }\n\n return (\n <>\n <Flex container={{ gap: 1 }}>\n <Button\n label={t('good_response')}\n variant='simple'\n icon\n compact\n ref={likeButtonRef}\n onClick={() => handleReactionClick('liked')}\n aria-pressed={isLikeActive}\n >\n <Icon name={isLikeActive ? 'thumbs-up-solid' : 'thumbs-up'} />\n </Button>\n\n <Button\n label={t('bad_response')}\n variant='simple'\n icon\n compact\n ref={dislikeButtonRef}\n onClick={() => handleReactionClick('disliked')}\n aria-pressed={isDislikeActive}\n >\n <Icon name={isDislikeActive ? 'thumbs-down-solid' : 'thumbs-down'} />\n </Button>\n </Flex>\n\n {feedbackDialog}\n </>\n );\n};\n\nexport default GenAIMessageFeedbackButtons;\n"]}
|
|
1
|
+
{"version":3,"file":"GenAIMessageFeedback.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessageFeedback.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport {\n Button,\n Flex,\n FormDialog,\n Icon,\n TextArea,\n Tooltip,\n registerIcon,\n useElement,\n useI18n\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\n\nimport type { MessageFeedbackProps, Reaction } from './GenAICoach.types';\n\nregisterIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);\n\nconst GenAIMessageFeedbackButtons = ({ messageId, feedback }: MessageFeedbackProps) => {\n const {\n reaction,\n feedbackText = '',\n allowFeedbackResubmission = false,\n promptFeedbackOn = 'disliked',\n onReaction,\n onFeedbackComplete\n } = feedback ?? {};\n\n const t = useI18n();\n\n const [feedbackVal, setFeedbackVal] = useState(feedbackText);\n const [showDialog, setShowDialog] = useState(false);\n\n const likeButtonRef = useRef<HTMLButtonElement>(null);\n const dislikeButtonRef = useRef<HTMLButtonElement>(null);\n const shouldOpenDialogRef = useRef(false);\n const [iconEl, seticonEl] = useElement<HTMLDivElement>();\n\n const isLikeActive = reaction === 'liked';\n const isDislikeActive = reaction === 'disliked';\n\n const needsDialog = (reactionType: Reaction) => {\n switch (promptFeedbackOn) {\n case 'disliked':\n return reactionType === 'disliked';\n case 'liked':\n return reactionType === 'liked';\n case 'both':\n return true;\n default:\n return false;\n }\n };\n\n const handleReactionClick = useCallback(\n (reactionType: Reaction) => {\n if (reaction === reactionType) {\n if (allowFeedbackResubmission) {\n onReaction?.(messageId, undefined);\n }\n\n return;\n }\n\n onReaction?.(messageId, reactionType);\n\n if (needsDialog(reactionType)) {\n if (reaction !== reactionType) {\n setFeedbackVal('');\n } else {\n setFeedbackVal(feedbackText);\n }\n\n if (!allowFeedbackResubmission) {\n shouldOpenDialogRef.current = true;\n } else {\n setShowDialog(true);\n }\n }\n },\n [reaction, feedbackText, allowFeedbackResubmission, promptFeedbackOn, messageId, onReaction]\n );\n\n const closeDialog = useCallback(\n (comment?: string) => {\n setShowDialog(false);\n shouldOpenDialogRef.current = false;\n\n onFeedbackComplete?.(messageId, comment);\n\n if (!allowFeedbackResubmission && iconEl) {\n iconEl.focus();\n }\n },\n [allowFeedbackResubmission, onFeedbackComplete, messageId, iconEl]\n );\n\n const getDialogTarget = () => {\n if (!allowFeedbackResubmission && iconEl) {\n return iconEl;\n }\n\n return isLikeActive ? likeButtonRef.current : dislikeButtonRef.current;\n };\n\n useEffect(() => {\n if (iconEl && shouldOpenDialogRef.current && !allowFeedbackResubmission) {\n setShowDialog(true);\n shouldOpenDialogRef.current = false;\n }\n }, [iconEl, allowFeedbackResubmission]);\n\n useEffect(() => {\n if (!showDialog && reaction && allowFeedbackResubmission) {\n const reactionButton =\n reaction === 'liked' ? likeButtonRef.current : dislikeButtonRef.current;\n reactionButton?.focus();\n }\n }, [showDialog, reaction, allowFeedbackResubmission]);\n\n const dialogTarget = getDialogTarget();\n\n const feedbackDialog = showDialog && dialogTarget && (\n <FormDialog\n target={dialogTarget}\n heading={t('share_feedback')}\n onCancel={() => closeDialog()}\n onSubmit={() => closeDialog(feedbackVal)}\n onKeyDown={e => e.stopPropagation()}\n >\n <TextArea\n value={feedbackVal}\n onChange={e => setFeedbackVal(e.target.value)}\n onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n closeDialog(feedbackVal);\n }\n }}\n autoResize={false}\n />\n </FormDialog>\n );\n\n const shouldShowIcon = !allowFeedbackResubmission && reaction;\n\n if (shouldShowIcon) {\n return (\n <Flex\n container={{ pad: [0.5, undefined] }}\n ref={seticonEl}\n tabIndex={-1}\n aria-label={t('selected_noun', [isLikeActive ? t('good_response') : t('bad_response')])}\n role='status'\n >\n <Icon name={isLikeActive ? 'thumbs-up-solid' : 'thumbs-down-solid'} emphasized />\n\n <Tooltip target={iconEl} describeTarget={false}>\n {isLikeActive ? t('good_response') : t('bad_response')}\n </Tooltip>\n\n {feedbackDialog}\n </Flex>\n );\n }\n\n return (\n <>\n <Flex container={{ gap: 1 }}>\n <Button\n label={t('good_response')}\n variant='simple'\n icon\n compact\n ref={likeButtonRef}\n onClick={() => handleReactionClick('liked')}\n aria-pressed={isLikeActive}\n >\n <Icon name={isLikeActive ? 'thumbs-up-solid' : 'thumbs-up'} emphasized={isLikeActive} />\n </Button>\n\n <Button\n label={t('bad_response')}\n variant='simple'\n icon\n compact\n ref={dislikeButtonRef}\n onClick={() => handleReactionClick('disliked')}\n aria-pressed={isDislikeActive}\n >\n <Icon\n name={isDislikeActive ? 'thumbs-down-solid' : 'thumbs-down'}\n emphasized={isDislikeActive}\n />\n </Button>\n </Flex>\n\n {feedbackDialog}\n </>\n );\n};\n\nexport default GenAIMessageFeedbackButtons;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shortcuts.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Shortcuts.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;AAwBxD,OAAO,KAAK,EAAE,cAAc,EAAgB,MAAM,mBAAmB,CAAC;;;;AAmOtE,wBAA2D"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, forwardRef, useState } from 'react';
|
|
3
|
-
import { calculateForegroundColor, Card, CardContent, CardHeader, EmptyState, Flex, Text, VisuallyHiddenText, readableColor, registerIcon, isSolidColor, useArrows, useI18n, usePrevious, useTestIds, useTheme, withTestIds } from '@pega/cosmos-react-core';
|
|
3
|
+
import { calculateForegroundColor, Card, CardContent, CardHeader, EmptyState, Flex, Text, VisuallyHiddenText, readableColor, registerIcon, isSolidColor, useArrows, useI18n, usePrevious, useTestIds, useTheme, createClassName, withTestIds } from '@pega/cosmos-react-core';
|
|
4
4
|
import * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';
|
|
5
5
|
import { StyledExternalIcon, StyledLabelRow, StyledShortcutsCard, StyledShortcutsCardButton, StyledShortcutsCardsContainer, StyledShortcutsCardsWrapper, StyledShortcutsCategoriesContainer, StyledShortcutsCategoryHeading, StyledShortcutsCardIcon, StyledShortcutImageContainer, StyledShortcutImg, StyledSubtitleText, StyledText, StyledTextContent, StyledCardContentWrapper } from './Shortcuts.styles';
|
|
6
6
|
import { getShortcutsTestIds } from './Shortcuts.test-ids';
|
|
@@ -13,6 +13,7 @@ const itemLinkProps = (item) => {
|
|
|
13
13
|
};
|
|
14
14
|
const CardItem = ({ item, variant }) => {
|
|
15
15
|
const { components: { card, shortcuts: { icon: { background: configuredIconBackground, foreground: configuredIconForeground } } } } = useTheme();
|
|
16
|
+
const cardClassName = createClassName('shortcuts-card', item.className);
|
|
16
17
|
const isLink = item.type === 'external';
|
|
17
18
|
const image = isLink ? item.image : undefined;
|
|
18
19
|
const description = isLink ? item.description : undefined;
|
|
@@ -33,17 +34,18 @@ const CardItem = ({ item, variant }) => {
|
|
|
33
34
|
};
|
|
34
35
|
const iconVisual = withIconBackground ? (_jsx(StyledShortcutsCardIcon, { ...commonIconProps, background: iconBackground, foreground: iconForeground })) : (_jsx(StyledShortcutsCardIcon, { ...commonIconProps, iconColor: iconForeground, size: 'm' }));
|
|
35
36
|
const visual = showImage ? (_jsx(Flex, { container: { alignItems: 'center', justify: 'center' }, as: StyledShortcutImageContainer, children: _jsx(StyledShortcutImg, { src: image, alt: item.label, onError: () => setIsBrokenImage(true), onLoad: () => setIsBrokenImage(false) }) })) : (iconVisual);
|
|
36
|
-
return (_jsx(StyledShortcutsCard, { children: _jsx(StyledShortcutsCardButton, { variant: 'link', layoutVariant: variant, ...itemLinkProps(item), children: _jsxs(StyledCardContentWrapper, { layoutVariant: variant, hasDescription: !!description, children: [visual, _jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, as: StyledTextContent, layoutVariant: variant, children: [_jsxs(StyledLabelRow, { children: [_jsx(StyledText, { children: item.label }), item.type === 'external' && _jsx(StyledExternalIcon, { name: 'open' })] }), description && (_jsx(StyledSubtitleText, { variant: 'secondary', forwardedAs: 'p', children: description }))] })] }) }) }));
|
|
37
|
+
return (_jsx(StyledShortcutsCard, { className: cardClassName, children: _jsx(StyledShortcutsCardButton, { variant: 'link', layoutVariant: variant, ...itemLinkProps(item), children: _jsxs(StyledCardContentWrapper, { layoutVariant: variant, hasDescription: !!description, children: [visual, _jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, as: StyledTextContent, layoutVariant: variant, children: [_jsxs(StyledLabelRow, { children: [_jsx(StyledText, { children: item.label }), item.type === 'external' && _jsx(StyledExternalIcon, { name: 'open' })] }), description && (_jsx(StyledSubtitleText, { variant: 'secondary', forwardedAs: 'p', children: description }))] })] }) }) }));
|
|
37
38
|
};
|
|
38
|
-
const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categories, showHeader = true, variant = 'inline', testId, ...restProps }, ref) {
|
|
39
|
+
const Shortcuts = forwardRef(function Shortcuts({ heading, className, items = [], categories, showHeader = true, variant = 'inline', testId, ...restProps }, ref) {
|
|
39
40
|
const t = useI18n();
|
|
40
41
|
const testIds = useTestIds(testId, getShortcutsTestIds);
|
|
42
|
+
const rootClassName = createClassName('shortcuts', className);
|
|
41
43
|
const flatListRef = useRef(null);
|
|
42
44
|
const categoriesContainerRef = useRef(null);
|
|
43
45
|
useArrows(flatListRef, { dir: 'both', cycle: true });
|
|
44
46
|
useArrows(categoriesContainerRef, { dir: 'both', cycle: true });
|
|
45
47
|
const emptyState = _jsx(EmptyState, { message: t('no_items'), "data-testid": testIds.emptyState });
|
|
46
|
-
const withCardShell = (content) => (_jsxs(Card, { ...restProps, "data-testid": testIds.root, ref: ref, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: heading ?? t('shortcuts') }) }), _jsx(CardContent, { children: content })] }));
|
|
48
|
+
const withCardShell = (content) => (_jsxs(Card, { ...restProps, className: rootClassName, "data-testid": testIds.root, ref: ref, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: heading ?? t('shortcuts') }) }), _jsx(CardContent, { children: content })] }));
|
|
47
49
|
if (categories) {
|
|
48
50
|
const visibleCategories = categories.filter(cat => cat.items.length > 0);
|
|
49
51
|
const categorySections = (_jsx(StyledShortcutsCategoriesContainer, { ref: categoriesContainerRef, children: visibleCategories.map(cat => (_jsxs(Flex, { container: { direction: 'column' }, "aria-labelledby": `cat-${cat.id}`, "data-testid": testIds.categorySection, as: 'section', children: [_jsx(StyledShortcutsCategoryHeading, { id: `cat-${cat.id}`, "data-testid": testIds.categoryHeading, variant: 'h3', children: cat.label }), _jsx(StyledShortcutsCardsContainer, { role: 'list', "aria-label": cat.label, itemCount: cat.items.length, children: cat.items.map(item => (_jsx(CardItem, { item: item, variant: variant }, item.id))) })] }, cat.id))) }));
|
|
@@ -53,7 +55,7 @@ const Shortcuts = forwardRef(function Shortcuts({ heading, items = [], categorie
|
|
|
53
55
|
if (!showHeader) {
|
|
54
56
|
if (items.length === 0)
|
|
55
57
|
return null;
|
|
56
|
-
return (_jsxs("div", { "data-testid": testIds.root, ...restProps, ref: ref, children: [_jsx(VisuallyHiddenText, { children: heading ?? t('shortcuts') }), cardGrid] }));
|
|
58
|
+
return (_jsxs("div", { className: rootClassName, "data-testid": testIds.root, ...restProps, ref: ref, children: [_jsx(VisuallyHiddenText, { children: heading ?? t('shortcuts') }), cardGrid] }));
|
|
57
59
|
}
|
|
58
60
|
return withCardShell(items.length === 0 ? emptyState : cardGrid);
|
|
59
61
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shortcuts.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, forwardRef, useState } from 'react';\nimport type { ReactNode, PropsWithoutRef } from 'react';\n\nimport {\n calculateForegroundColor,\n Card,\n CardContent,\n CardHeader,\n EmptyState,\n Flex,\n Text,\n VisuallyHiddenText,\n readableColor,\n registerIcon,\n isSolidColor,\n useArrows,\n useI18n,\n usePrevious,\n useTestIds,\n useTheme,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\n\nimport type { ShortcutsProps, ShortcutItem } from './Shortcuts.types';\nimport {\n StyledExternalIcon,\n StyledLabelRow,\n StyledShortcutsCard,\n StyledShortcutsCardButton,\n StyledShortcutsCardsContainer,\n StyledShortcutsCardsWrapper,\n StyledShortcutsCategoriesContainer,\n StyledShortcutsCategoryHeading,\n StyledShortcutsCardIcon,\n StyledShortcutImageContainer,\n StyledShortcutImg,\n StyledSubtitleText,\n StyledText,\n StyledTextContent,\n StyledCardContentWrapper\n} from './Shortcuts.styles';\nimport { getShortcutsTestIds } from './Shortcuts.test-ids';\n\nregisterIcon(openNewTabIcon);\n\nconst itemLinkProps = (\n item: ShortcutItem\n): {\n href?: string;\n target?: string;\n rel?: string;\n onClick?: () => void;\n} => {\n if (item.type === 'external') {\n return { href: item.href, target: '_blank', rel: 'noopener noreferrer' };\n }\n\n return { onClick: item.onClick };\n};\n\nconst CardItem = ({ item, variant }: { item: ShortcutItem; variant: 'stacked' | 'inline' }) => {\n const {\n components: {\n card,\n shortcuts: {\n icon: { background: configuredIconBackground, foreground: configuredIconForeground }\n }\n }\n } = useTheme();\n\n const isLink = item.type === 'external';\n const image = isLink ? item.image : undefined;\n const description = isLink ? item.description : undefined;\n\n const [isBrokenImage, setIsBrokenImage] = useState(false);\n const prevImage = usePrevious(image);\n\n const iconBackground = configuredIconBackground;\n const withIconBackground = Boolean(isSolidColor(iconBackground));\n\n const cardForeground = calculateForegroundColor(card.background, card['foreground-color']);\n let iconForeground = configuredIconForeground;\n\n if (configuredIconForeground === 'auto') {\n iconForeground = withIconBackground\n ? readableColor(iconBackground, { mode: 'light', level: 'AANonText' })\n : cardForeground;\n }\n\n const showImage = Boolean(image) && !(isBrokenImage && image === prevImage);\n\n const commonIconProps = {\n name: item.icon\n };\n\n const iconVisual = withIconBackground ? (\n <StyledShortcutsCardIcon\n {...commonIconProps}\n background={iconBackground}\n foreground={iconForeground}\n />\n ) : (\n <StyledShortcutsCardIcon {...commonIconProps} iconColor={iconForeground} size='m' />\n );\n\n const visual = showImage ? (\n <Flex container={{ alignItems: 'center', justify: 'center' }} as={StyledShortcutImageContainer}>\n <StyledShortcutImg\n src={image}\n alt={item.label}\n onError={() => setIsBrokenImage(true)}\n onLoad={() => setIsBrokenImage(false)}\n />\n </Flex>\n ) : (\n iconVisual\n );\n\n return (\n <StyledShortcutsCard>\n <StyledShortcutsCardButton variant='link' layoutVariant={variant} {...itemLinkProps(item)}>\n <StyledCardContentWrapper layoutVariant={variant} hasDescription={!!description}>\n {visual}\n <Flex\n container={{ direction: 'column', gap: 0.5 }}\n as={StyledTextContent}\n layoutVariant={variant}\n >\n <StyledLabelRow>\n <StyledText>{item.label}</StyledText>\n {item.type === 'external' && <StyledExternalIcon name='open' />}\n </StyledLabelRow>\n\n {description && (\n <StyledSubtitleText variant='secondary' forwardedAs='p'>\n {description}\n </StyledSubtitleText>\n )}\n </Flex>\n </StyledCardContentWrapper>\n </StyledShortcutsCardButton>\n </StyledShortcutsCard>\n );\n};\n\nconst Shortcuts = forwardRef(function Shortcuts(\n {\n heading,\n items = [],\n categories,\n showHeader = true,\n variant = 'inline',\n testId,\n ...restProps\n }: PropsWithoutRef<ShortcutsProps>,\n ref: ShortcutsProps['ref']\n) {\n const t = useI18n();\n const testIds = useTestIds(testId, getShortcutsTestIds);\n\n const flatListRef = useRef<HTMLUListElement>(null);\n const categoriesContainerRef = useRef<HTMLDivElement>(null);\n\n useArrows(flatListRef, { dir: 'both', cycle: true });\n useArrows(categoriesContainerRef, { dir: 'both', cycle: true });\n\n const emptyState = <EmptyState message={t('no_items')} data-testid={testIds.emptyState} />;\n\n const withCardShell = (content: ReactNode) => (\n <Card {...restProps} data-testid={testIds.root} ref={ref}>\n <CardHeader>\n <Text variant='h2'>{heading ?? t('shortcuts')}</Text>\n </CardHeader>\n <CardContent>{content}</CardContent>\n </Card>\n );\n\n if (categories) {\n const visibleCategories = categories.filter(cat => cat.items.length > 0);\n\n const categorySections = (\n <StyledShortcutsCategoriesContainer ref={categoriesContainerRef}>\n {visibleCategories.map(cat => (\n <Flex\n container={{ direction: 'column' }}\n key={cat.id}\n aria-labelledby={`cat-${cat.id}`}\n data-testid={testIds.categorySection}\n as='section'\n >\n <StyledShortcutsCategoryHeading\n id={`cat-${cat.id}`}\n data-testid={testIds.categoryHeading}\n variant='h3'\n >\n {cat.label}\n </StyledShortcutsCategoryHeading>\n\n <StyledShortcutsCardsContainer\n role='list'\n aria-label={cat.label}\n itemCount={cat.items.length}\n >\n {cat.items.map(item => (\n <CardItem key={item.id} item={item} variant={variant} />\n ))}\n </StyledShortcutsCardsContainer>\n </Flex>\n ))}\n </StyledShortcutsCategoriesContainer>\n );\n\n return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);\n }\n\n const cardGrid = (\n <StyledShortcutsCardsWrapper>\n <StyledShortcutsCardsContainer\n ref={flatListRef}\n role='list'\n data-testid={testIds.list}\n aria-label={heading ?? t('shortcuts')}\n itemCount={items.length}\n >\n {items.map(item => (\n <CardItem key={item.id} item={item} variant={variant} />\n ))}\n </StyledShortcutsCardsContainer>\n </StyledShortcutsCardsWrapper>\n );\n\n if (!showHeader) {\n if (items.length === 0) return null;\n\n return (\n <div data-testid={testIds.root} {...restProps} ref={ref}>\n <VisuallyHiddenText>{heading ?? t('shortcuts')}</VisuallyHiddenText>\n {cardGrid}\n </div>\n );\n }\n\n return withCardShell(items.length === 0 ? emptyState : cardGrid);\n});\n\nexport default withTestIds(Shortcuts, getShortcutsTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"Shortcuts.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, forwardRef, useState } from 'react';\nimport type { ReactNode, PropsWithoutRef } from 'react';\n\nimport {\n calculateForegroundColor,\n Card,\n CardContent,\n CardHeader,\n EmptyState,\n Flex,\n Text,\n VisuallyHiddenText,\n readableColor,\n registerIcon,\n isSolidColor,\n useArrows,\n useI18n,\n usePrevious,\n useTestIds,\n useTheme,\n createClassName,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport * as openNewTabIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\n\nimport type { ShortcutsProps, ShortcutItem } from './Shortcuts.types';\nimport {\n StyledExternalIcon,\n StyledLabelRow,\n StyledShortcutsCard,\n StyledShortcutsCardButton,\n StyledShortcutsCardsContainer,\n StyledShortcutsCardsWrapper,\n StyledShortcutsCategoriesContainer,\n StyledShortcutsCategoryHeading,\n StyledShortcutsCardIcon,\n StyledShortcutImageContainer,\n StyledShortcutImg,\n StyledSubtitleText,\n StyledText,\n StyledTextContent,\n StyledCardContentWrapper\n} from './Shortcuts.styles';\nimport { getShortcutsTestIds } from './Shortcuts.test-ids';\n\nregisterIcon(openNewTabIcon);\n\nconst itemLinkProps = (\n item: ShortcutItem\n): {\n href?: string;\n target?: string;\n rel?: string;\n onClick?: () => void;\n} => {\n if (item.type === 'external') {\n return { href: item.href, target: '_blank', rel: 'noopener noreferrer' };\n }\n\n return { onClick: item.onClick };\n};\n\nconst CardItem = ({ item, variant }: { item: ShortcutItem; variant: 'stacked' | 'inline' }) => {\n const {\n components: {\n card,\n shortcuts: {\n icon: { background: configuredIconBackground, foreground: configuredIconForeground }\n }\n }\n } = useTheme();\n\n const cardClassName = createClassName('shortcuts-card', item.className);\n\n const isLink = item.type === 'external';\n const image = isLink ? item.image : undefined;\n const description = isLink ? item.description : undefined;\n\n const [isBrokenImage, setIsBrokenImage] = useState(false);\n const prevImage = usePrevious(image);\n\n const iconBackground = configuredIconBackground;\n const withIconBackground = Boolean(isSolidColor(iconBackground));\n\n const cardForeground = calculateForegroundColor(card.background, card['foreground-color']);\n let iconForeground = configuredIconForeground;\n\n if (configuredIconForeground === 'auto') {\n iconForeground = withIconBackground\n ? readableColor(iconBackground, { mode: 'light', level: 'AANonText' })\n : cardForeground;\n }\n\n const showImage = Boolean(image) && !(isBrokenImage && image === prevImage);\n\n const commonIconProps = {\n name: item.icon\n };\n\n const iconVisual = withIconBackground ? (\n <StyledShortcutsCardIcon\n {...commonIconProps}\n background={iconBackground}\n foreground={iconForeground}\n />\n ) : (\n <StyledShortcutsCardIcon {...commonIconProps} iconColor={iconForeground} size='m' />\n );\n\n const visual = showImage ? (\n <Flex container={{ alignItems: 'center', justify: 'center' }} as={StyledShortcutImageContainer}>\n <StyledShortcutImg\n src={image}\n alt={item.label}\n onError={() => setIsBrokenImage(true)}\n onLoad={() => setIsBrokenImage(false)}\n />\n </Flex>\n ) : (\n iconVisual\n );\n\n return (\n <StyledShortcutsCard className={cardClassName}>\n <StyledShortcutsCardButton variant='link' layoutVariant={variant} {...itemLinkProps(item)}>\n <StyledCardContentWrapper layoutVariant={variant} hasDescription={!!description}>\n {visual}\n <Flex\n container={{ direction: 'column', gap: 0.5 }}\n as={StyledTextContent}\n layoutVariant={variant}\n >\n <StyledLabelRow>\n <StyledText>{item.label}</StyledText>\n {item.type === 'external' && <StyledExternalIcon name='open' />}\n </StyledLabelRow>\n\n {description && (\n <StyledSubtitleText variant='secondary' forwardedAs='p'>\n {description}\n </StyledSubtitleText>\n )}\n </Flex>\n </StyledCardContentWrapper>\n </StyledShortcutsCardButton>\n </StyledShortcutsCard>\n );\n};\n\nconst Shortcuts = forwardRef(function Shortcuts(\n {\n heading,\n className,\n items = [],\n categories,\n showHeader = true,\n variant = 'inline',\n testId,\n ...restProps\n }: PropsWithoutRef<ShortcutsProps>,\n ref: ShortcutsProps['ref']\n) {\n const t = useI18n();\n const testIds = useTestIds(testId, getShortcutsTestIds);\n\n const rootClassName = createClassName('shortcuts', className);\n\n const flatListRef = useRef<HTMLUListElement>(null);\n const categoriesContainerRef = useRef<HTMLDivElement>(null);\n\n useArrows(flatListRef, { dir: 'both', cycle: true });\n useArrows(categoriesContainerRef, { dir: 'both', cycle: true });\n\n const emptyState = <EmptyState message={t('no_items')} data-testid={testIds.emptyState} />;\n\n const withCardShell = (content: ReactNode) => (\n <Card {...restProps} className={rootClassName} data-testid={testIds.root} ref={ref}>\n <CardHeader>\n <Text variant='h2'>{heading ?? t('shortcuts')}</Text>\n </CardHeader>\n <CardContent>{content}</CardContent>\n </Card>\n );\n\n if (categories) {\n const visibleCategories = categories.filter(cat => cat.items.length > 0);\n\n const categorySections = (\n <StyledShortcutsCategoriesContainer ref={categoriesContainerRef}>\n {visibleCategories.map(cat => (\n <Flex\n container={{ direction: 'column' }}\n key={cat.id}\n aria-labelledby={`cat-${cat.id}`}\n data-testid={testIds.categorySection}\n as='section'\n >\n <StyledShortcutsCategoryHeading\n id={`cat-${cat.id}`}\n data-testid={testIds.categoryHeading}\n variant='h3'\n >\n {cat.label}\n </StyledShortcutsCategoryHeading>\n\n <StyledShortcutsCardsContainer\n role='list'\n aria-label={cat.label}\n itemCount={cat.items.length}\n >\n {cat.items.map(item => (\n <CardItem key={item.id} item={item} variant={variant} />\n ))}\n </StyledShortcutsCardsContainer>\n </Flex>\n ))}\n </StyledShortcutsCategoriesContainer>\n );\n\n return withCardShell(visibleCategories.length === 0 ? emptyState : categorySections);\n }\n\n const cardGrid = (\n <StyledShortcutsCardsWrapper>\n <StyledShortcutsCardsContainer\n ref={flatListRef}\n role='list'\n data-testid={testIds.list}\n aria-label={heading ?? t('shortcuts')}\n itemCount={items.length}\n >\n {items.map(item => (\n <CardItem key={item.id} item={item} variant={variant} />\n ))}\n </StyledShortcutsCardsContainer>\n </StyledShortcutsCardsWrapper>\n );\n\n if (!showHeader) {\n if (items.length === 0) return null;\n\n return (\n <div className={rootClassName} data-testid={testIds.root} {...restProps} ref={ref}>\n <VisuallyHiddenText>{heading ?? t('shortcuts')}</VisuallyHiddenText>\n {cardGrid}\n </div>\n );\n }\n\n return withCardShell(items.length === 0 ? emptyState : cardGrid);\n});\n\nexport default withTestIds(Shortcuts, getShortcutsTestIds);\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Ref } from 'react';
|
|
2
|
-
import type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
|
|
2
|
+
import type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';
|
|
3
3
|
interface ShortcutItemBase {
|
|
4
4
|
/** Unique identifier for this shortcut. */
|
|
5
5
|
id: string;
|
|
@@ -7,6 +7,8 @@ interface ShortcutItemBase {
|
|
|
7
7
|
label: string;
|
|
8
8
|
/** Icon name from the registered icon set. */
|
|
9
9
|
icon: string;
|
|
10
|
+
/** Optional class name applied to the rendered shortcut card. */
|
|
11
|
+
className?: string;
|
|
10
12
|
}
|
|
11
13
|
export interface ShortcutLinkItem extends ShortcutItemBase {
|
|
12
14
|
/** Discriminant — this item navigates to an external URL. */
|
|
@@ -50,7 +52,7 @@ interface ShortcutsWithCategories {
|
|
|
50
52
|
categories: ShortcutCategory[];
|
|
51
53
|
showHeader?: never;
|
|
52
54
|
}
|
|
53
|
-
interface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {
|
|
55
|
+
interface ShortcutsBaseProps extends NoChildrenProp, TestIdProp, BaseProps {
|
|
54
56
|
/** Heading displayed above the shortcuts. */
|
|
55
57
|
heading?: string;
|
|
56
58
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"Shortcuts.types.d.ts","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErF,UAAU,gBAAgB;IACxB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+EAA+E;IAC/E,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,UAAU,kBAAmB,SAAQ,cAAc,EAAE,UAAU,EAAE,SAAS;IACxE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n /** Unique identifier for this shortcut. */\n id: string;\n /** Display label shown on the shortcut. */\n label: string;\n /** Icon name from the registered icon set. */\n icon: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n /** Discriminant — this item navigates to an external URL. */\n type: 'external';\n /** Absolute URL the link navigates to. Opens in a new tab. */\n href: string;\n /** Optional subtitle displayed below the label. */\n description?: string;\n /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */\n image?: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n /** Discriminant — this item navigates to a portal landing page. */\n type: 'page';\n /** Callback invoked when the user activates this shortcut. */\n onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n /** Unique identifier for this category. */\n id: string;\n /** Display label shown as the category heading. */\n label: string;\n /** Shortcut items belonging to this category. */\n items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n /** Shortcut items to render as cards. */\n items?: ShortcutItem[];\n categories?: never;\n /**\n * Whether to render the outer card shell with a heading.\n * When `false`, only the card grid is rendered, centered within its container.\n * @default true\n */\n showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n items?: never;\n /** Grouped shortcut items, each rendered as cards under a category heading. */\n categories: ShortcutCategory[];\n showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp {\n /** Heading displayed above the shortcuts. */\n heading?: string;\n /**\n * Controls the layout variant of each shortcut card.\n * - `stacked`: large icon above the label (default card style).\n * - `inline`: small icon inline to the left of the label (list/link style).\n * @default 'inline'\n */\n variant?: 'stacked' | 'inline';\n /** Ref for the root card element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}
|
|
1
|
+
{"version":3,"file":"Shortcuts.types.js","sourceRoot":"","sources":["../../../src/components/Shortcuts/Shortcuts.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp, TestIdProp } from '@pega/cosmos-react-core';\n\ninterface ShortcutItemBase {\n /** Unique identifier for this shortcut. */\n id: string;\n /** Display label shown on the shortcut. */\n label: string;\n /** Icon name from the registered icon set. */\n icon: string;\n /** Optional class name applied to the rendered shortcut card. */\n className?: string;\n}\n\nexport interface ShortcutLinkItem extends ShortcutItemBase {\n /** Discriminant — this item navigates to an external URL. */\n type: 'external';\n /** Absolute URL the link navigates to. Opens in a new tab. */\n href: string;\n /** Optional subtitle displayed below the label. */\n description?: string;\n /** Optional image URL. Renders in place of the icon; falls back to icon if the image fails to load. */\n image?: string;\n}\n\nexport interface ShortcutNavItem extends ShortcutItemBase {\n /** Discriminant — this item navigates to a portal landing page. */\n type: 'page';\n /** Callback invoked when the user activates this shortcut. */\n onClick: () => void;\n}\n\nexport type ShortcutItem = ShortcutLinkItem | ShortcutNavItem;\n\nexport interface ShortcutCategory {\n /** Unique identifier for this category. */\n id: string;\n /** Display label shown as the category heading. */\n label: string;\n /** Shortcut items belonging to this category. */\n items: ShortcutItem[];\n}\n\ninterface ShortcutsWithItems {\n /** Shortcut items to render as cards. */\n items?: ShortcutItem[];\n categories?: never;\n /**\n * Whether to render the outer card shell with a heading.\n * When `false`, only the card grid is rendered, centered within its container.\n * @default true\n */\n showHeader?: boolean;\n}\n\ninterface ShortcutsWithCategories {\n items?: never;\n /** Grouped shortcut items, each rendered as cards under a category heading. */\n categories: ShortcutCategory[];\n showHeader?: never;\n}\n\ninterface ShortcutsBaseProps extends NoChildrenProp, TestIdProp, BaseProps {\n /** Heading displayed above the shortcuts. */\n heading?: string;\n /**\n * Controls the layout variant of each shortcut card.\n * - `stacked`: large icon above the label (default card style).\n * - `inline`: small icon inline to the left of the label (list/link style).\n * @default 'inline'\n */\n variant?: 'stacked' | 'inline';\n /** Ref for the root card element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport type ShortcutsProps = ShortcutsBaseProps & (ShortcutsWithItems | ShortcutsWithCategories);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskCard.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TaskCard.d.ts","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,UAAU,aAAa;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAClD;AA4BD,QAAA,MAAM,QAAQ,GAAI,4BAA4B,aAAa,4CAuD1D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
|
-
import { Card, CardHeader, CardContent, CardFooter, Button, Count, Flex, Text, VisuallyHiddenText, Progress, EmptyState, useI18n, defaultThemeProp, StyledEmptyState } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Card, CardHeader, CardContent, CardFooter, Button, Count, Flex, Text, VisuallyHiddenText, Progress, EmptyState, useI18n, createClassName, defaultThemeProp, StyledEmptyState } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
5
5
|
import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
|
|
6
6
|
import TaskList from './TaskList';
|
|
@@ -26,11 +26,14 @@ const StyledHeadingFlex = styled(Flex) `
|
|
|
26
26
|
StyledHeadingFlex.defaultProps = defaultThemeProp;
|
|
27
27
|
const TaskCard = ({ group, onShowMoreClick }) => {
|
|
28
28
|
const { name, visual, items, count = items.length, loadingMore = false } = group;
|
|
29
|
+
const cardClassName = createClassName('task-card', group.className, {
|
|
30
|
+
approvals: !!group.isApprovals
|
|
31
|
+
});
|
|
29
32
|
const t = useI18n();
|
|
30
33
|
const cardItemLimit = 3;
|
|
31
34
|
const displayItems = items.slice(0, cardItemLimit);
|
|
32
35
|
const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);
|
|
33
|
-
return (_jsxs(StyledTaskCard, { children: [_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1.5 }, children: [visual && _jsx(Flex, { item: { shrink: 0 }, children: visual }), _jsx(StyledHeadingFlex, { item: { grow: 0 }, children: _jsx(Text, { variant: 'h3', children: name }) }), count > cardItemLimit ? (_jsx(Count, { children: count })) : (_jsx(VisuallyHiddenText, { children: t('task_count', [count], { count }) }))] }), _jsx(CardContent, { children: displayItems.length > 0 ? (_jsx(TaskList, { items: displayItems, openButtonIconOnly: true })) : (_jsx(EmptyState, {})) }), _jsx(Progress, { placement: 'block', visible: loadingMore }), hasShowMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', onClick: () => {
|
|
36
|
+
return (_jsxs(StyledTaskCard, { className: cardClassName, children: [_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1.5 }, children: [visual && _jsx(Flex, { item: { shrink: 0 }, children: visual }), _jsx(StyledHeadingFlex, { item: { grow: 0 }, children: _jsx(Text, { variant: 'h3', children: name }) }), count > cardItemLimit ? (_jsx(Count, { children: count })) : (_jsx(VisuallyHiddenText, { children: t('task_count', [count], { count }) }))] }), _jsx(CardContent, { children: displayItems.length > 0 ? (_jsx(TaskList, { items: displayItems, openButtonIconOnly: true })) : (_jsx(EmptyState, {})) }), _jsx(Progress, { placement: 'block', visible: loadingMore }), hasShowMore && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', onClick: () => {
|
|
34
37
|
group.onShowMore?.();
|
|
35
38
|
onShowMoreClick(group);
|
|
36
39
|
}, children: t('show_more') }) }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TaskCard.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,kBAAkB,EAClB,QAAQ,EACR,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,OAAO,QAAQ,MAAM,YAAY,CAAC;AAQlC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CACjC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGd,gBAAgB;0CACoB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAGrE,iBAAiB;;;;MAIjB,gBAAgB;2BACK,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE1C,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,eAAe,EAAiB,EAAE,EAAE;IAC7D,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,aAAa,GAAG,CAAC,CAAC;IAExB,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAElG,OAAO,CACL,MAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"TaskCard.js","sourceRoot":"","sources":["../../../src/components/Tasks/TaskCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Card,\n CardHeader,\n CardContent,\n CardFooter,\n Button,\n Count,\n Flex,\n Text,\n VisuallyHiddenText,\n Progress,\n EmptyState,\n useI18n,\n createClassName,\n defaultThemeProp,\n StyledEmptyState\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport TaskList from './TaskList';\nimport type { TaskGroupProps } from './Tasks';\n\ninterface TaskCardProps {\n group: TaskGroupProps;\n onShowMoreClick: (group: TaskGroupProps) => void;\n}\n\nconst StyledTaskCard = styled(Card)(\n ({ theme }) => css`\n block-size: 100%;\n\n ${StyledCardHeader} {\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n\n ${StyledCardContent} {\n flex-grow: 1;\n }\n\n ${StyledEmptyState} {\n margin-block: calc(${theme.base.spacing} * 2);\n }\n `\n);\n\nStyledTaskCard.defaultProps = defaultThemeProp;\n\nconst StyledHeadingFlex = styled(Flex)`\n min-width: 0;\n`;\n\nStyledHeadingFlex.defaultProps = defaultThemeProp;\n\nconst TaskCard = ({ group, onShowMoreClick }: TaskCardProps) => {\n const { name, visual, items, count = items.length, loadingMore = false } = group;\n\n const cardClassName = createClassName('task-card', group.className, {\n approvals: !!group.isApprovals\n });\n\n const t = useI18n();\n\n const cardItemLimit = 3;\n\n const displayItems = items.slice(0, cardItemLimit);\n const hasShowMore = items.length > cardItemLimit || (count !== undefined && count > items.length);\n\n return (\n <StyledTaskCard className={cardClassName}>\n <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1.5 }}>\n {visual && <Flex item={{ shrink: 0 }}>{visual}</Flex>}\n\n <StyledHeadingFlex item={{ grow: 0 }}>\n <Text variant='h3'>{name}</Text>\n </StyledHeadingFlex>\n\n {count > cardItemLimit ? (\n <Count>{count}</Count>\n ) : (\n <VisuallyHiddenText>{t('task_count', [count], { count })}</VisuallyHiddenText>\n )}\n </CardHeader>\n\n <CardContent>\n {displayItems.length > 0 ? (\n <TaskList items={displayItems} openButtonIconOnly />\n ) : (\n <EmptyState />\n )}\n </CardContent>\n\n <Progress placement='block' visible={loadingMore} />\n\n {hasShowMore && (\n <CardFooter justify='center'>\n <Button\n variant='link'\n onClick={() => {\n group.onShowMore?.();\n onShowMoreClick(group);\n }}\n >\n {t('show_more')}\n </Button>\n </CardFooter>\n )}\n </StyledTaskCard>\n );\n};\n\nexport default TaskCard;\n"]}
|