@pega/cosmos-react-work 8.8.0 → 8.9.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/ArticleList/ArticleBuddy.d.ts.map +1 -1
- package/lib/components/ArticleList/ArticleBuddy.js +5 -1
- package/lib/components/ArticleList/ArticleBuddy.js.map +1 -1
- package/lib/components/ArticleList/ArticleList.types.d.ts +15 -1
- package/lib/components/ArticleList/ArticleList.types.d.ts.map +1 -1
- package/lib/components/ArticleList/ArticleList.types.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.d.ts +1 -0
- package/lib/components/GenAICoach/GenAICoach.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.js +54 -31
- package/lib/components/GenAICoach/GenAICoach.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts +12 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.js +71 -6
- package/lib/components/GenAICoach/GenAICoach.styles.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.types.d.ts +15 -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 +9 -44
- package/lib/components/GenAICoach/GenAIMessage.js.map +1 -1
- package/lib/components/GenAICoach/GenAIMessageFeedback.d.ts +4 -0
- package/lib/components/GenAICoach/GenAIMessageFeedback.d.ts.map +1 -0
- package/lib/components/GenAICoach/GenAIMessageFeedback.js +92 -0
- package/lib/components/GenAICoach/GenAIMessageFeedback.js.map +1 -0
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAICoach.types.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Dispatch, Ref, SetStateAction } from 'react';\n\nimport type {\n BaseProps,\n MenuProps,\n OmitStrict,\n ProgressProps,\n RequireAtLeastOne,\n TestIdProp,\n WithAttributes,\n ActionsProps,\n FileItemProps,\n FileDisplayProps,\n LightboxProps\n} from '@pega/cosmos-react-core';\n\nexport type State = 'minimized' | 'maximized';\nexport type Reaction = 'liked' | 'disliked';\n\nexport type Variant =\n | {\n placement: 'utilities';\n state: State;\n onStateChange: (state: State) => void;\n setGenAIHeight?: Dispatch<SetStateAction<number | undefined>>;\n }\n | { placement: 'fullpage' }\n | { placement: 'dialog'; onClose: () => void };\n\nexport interface MessageProps {\n id: string;\n message: string;\n announceInteraction?: boolean;\n attachments?: FileDisplayProps[];\n /**\n * Whether the message is a suggestion from the composer\n * @default false\n */\n fromComposer?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLLIElement>;\n}\n\nexport type InitialSuggestedMessageProps = Pick<GenAICoachProps, 'onSend'> &\n BaseProps &\n TestIdProp &\n MessageProps;\n\nexport interface UserMessageProps extends BaseProps, TestIdProp, MessageProps {\n from: 'user';\n}\n\nexport type CoachMessageProps = RequireAtLeastOne<\n Partial<Pick<GenAICoachProps, 'onSend'>> &\n BaseProps &\n TestIdProp &\n Pick<MessageProps, 'id' | 'announceInteraction' | 'ref'> & {\n from: 'coach';\n coachName: string;\n suggestions?: MessageProps[];\n loading?: boolean;\n enableStreaming?: boolean;\n allChunksReceived?: boolean;\n error?: string;\n message?: MessageProps['message'];\n onStreamingUpdate?: (isStreamingDone: boolean) => void;\n feedback?: {\n reaction: Reaction | undefined;\n onReaction: (id: MessageProps['id'], reaction: Reaction) => void;\n onFeedbackComplete: (id: MessageProps['id'], comment?: string) => void;\n };\n },\n 'loading' | 'message' | 'error'\n>;\n\nexport type GenAIMessageProps = UserMessageProps | CoachMessageProps;\n\nexport interface ConversationHistoryProps extends TestIdProp {\n /** List of History items. */\n data: {\n id: string;\n section: string;\n conversations: {\n id: string;\n title: string;\n }[];\n }[];\n /** Click event for items within the list. */\n onItemClick?: (conversationId: string) => void;\n /** List loading state. */\n loading?: boolean;\n /** Called at scroll trigger to load more items. */\n loadMore?: () => void;\n /** True if History view is rendered in Full page view. */\n inFullPage?: boolean;\n /** Callback triggered when closing the history view. */\n onDismiss: () => void;\n /** Id of the selected item. */\n selectedItemId?: string;\n /** Set if there is an error in retreiving the data. */\n error?: string;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLUListElement>;\n}\n\nexport type SendMessageProps = OmitStrict<MessageProps, 'attachments'> & {\n attachmentIds?: string[];\n};\n\nexport type GenAICoachProps = WithAttributes<\n 'div',\n TestIdProp & {\n /** Chat loading indicator */\n loading?: boolean | ProgressProps['message'];\n /** Set if there is an error in retreiving the data */\n error?: string;\n /** Coaches available in the chat header */\n coachOptions: MenuProps['items'];\n /** Handle the coach selections */\n onCoachChange: (id: MenuProps['id']) => void;\n /** Suggested messages to start the conversation */\n initialSuggestedMessages?: MessageProps[];\n /** Additional suggestions presented at the bottom of the chat window */\n suggestions?: MenuProps['items'];\n /** Send prompts */\n onSend: (message: SendMessageProps) => void;\n /** Messages to be shown in the chatting window. */\n messages?: GenAIMessageProps[];\n /** Placement of the component */\n variant: Variant;\n /** callback when component is mounted */\n onOpen?: () => void;\n /**\n * User would be guided with selective prompts to enable interaction with coach.\n * @default false\n */\n guidedMode?: boolean;\n /** Pass an array of Action objects to show Action button. */\n actions?: ActionsProps;\n /** Pass data to show history view. */\n conversationHistory?: ConversationHistoryProps;\n /** Callback triggered when the layout component changes. */\n onLayoutChange?: (inFullPage: boolean) => void;\n /** Callback when attachment icon is clicked */\n onAddAttachment?: (files: File[]) => void;\n /** Attachments list */\n attachments?: FileItemProps[];\n /** Error in attachments */\n attachmentsError?: string;\n /** Configuration for the Lightbox component that handles preview of media attachments and files */\n lightboxPreviewProps?: LightboxProps;\n }\n>;\n\nexport interface UtilitiesGenAICoachProps extends OmitStrict<GenAICoachProps, 'variant'> {\n onClose?: () => void;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"GenAICoach.types.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Dispatch, Ref, SetStateAction } from 'react';\n\nimport type {\n BaseProps,\n MenuProps,\n OmitStrict,\n ProgressProps,\n RequireAtLeastOne,\n TestIdProp,\n WithAttributes,\n ActionsProps,\n FileItemProps,\n FileDisplayProps,\n LightboxProps\n} from '@pega/cosmos-react-core';\nimport type { RichTextViewerProps } from '@pega/cosmos-react-rte';\n\nexport type State = 'minimized' | 'maximized';\nexport type Reaction = 'liked' | 'disliked';\nexport type FeedbackPrompt = 'liked' | 'disliked' | 'both';\n\nexport type Variant =\n | {\n placement: 'utilities';\n state: State;\n onStateChange: (state: State) => void;\n setGenAIHeight?: Dispatch<SetStateAction<number | undefined>>;\n }\n | { placement: 'fullpage' }\n | { placement: 'dialog'; onClose: () => void };\n\nexport interface MessageProps {\n id: string;\n message: string;\n announceInteraction?: boolean;\n attachments?: FileDisplayProps[];\n /**\n * Whether the message is a suggestion from the composer\n * @default false\n */\n fromComposer?: boolean;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLLIElement>;\n}\n\nexport type InitialSuggestedMessageProps = Pick<GenAICoachProps, 'onSend'> &\n BaseProps &\n TestIdProp &\n MessageProps;\n\nexport interface UserMessageProps extends BaseProps, TestIdProp, MessageProps {\n from: 'user';\n}\n\nexport type CoachMessageProps = RequireAtLeastOne<\n Partial<Pick<GenAICoachProps, 'onSend'>> &\n BaseProps &\n TestIdProp &\n Pick<MessageProps, 'id' | 'announceInteraction' | 'ref'> & {\n from: 'coach';\n coachName: string;\n suggestions?: MessageProps[];\n loading?: boolean;\n enableStreaming?: boolean;\n allChunksReceived?: boolean;\n error?: string;\n message?: MessageProps['message'];\n markdownMap?: RichTextViewerProps['markdownMap'];\n onStreamingUpdate?: (isStreamingDone: boolean) => void;\n feedback?: {\n reaction: Reaction | undefined;\n feedbackText?: string;\n onReaction: (id: MessageProps['id'], reaction: Reaction) => void;\n onFeedbackComplete: (id: MessageProps['id'], comment?: string) => void;\n promptFeedbackOn?: FeedbackPrompt;\n allowFeedbackResubmission?: boolean;\n };\n messageActions?: ActionsProps;\n },\n 'loading' | 'message' | 'error'\n>;\n\nexport type GenAIMessageProps = UserMessageProps | CoachMessageProps;\n\nexport interface ConversationHistoryProps extends TestIdProp {\n /** List of History items. */\n data: {\n id: string;\n section: string;\n conversations: {\n id: string;\n title: string;\n }[];\n }[];\n /** Click event for items within the list. */\n onItemClick?: (conversationId: string) => void;\n /** List loading state. */\n loading?: boolean;\n /** Called at scroll trigger to load more items. */\n loadMore?: () => void;\n /** True if History view is rendered in Full page view. */\n inFullPage?: boolean;\n /** Callback triggered when closing the history view. */\n onDismiss: () => void;\n /** Id of the selected item. */\n selectedItemId?: string;\n /** Set if there is an error in retreiving the data. */\n error?: string;\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLUListElement>;\n}\n\nexport type SendMessageProps = OmitStrict<MessageProps, 'attachments'> & {\n attachmentIds?: string[];\n};\n\nexport type GenAICoachProps = WithAttributes<\n 'div',\n TestIdProp & {\n /** Chat loading indicator */\n loading?: boolean | ProgressProps['message'];\n /** Set if there is an error in retreiving the data */\n error?: string;\n /** Coaches available in the chat header */\n coachOptions: MenuProps['items'];\n /** Handle the coach selections */\n onCoachChange: (id: MenuProps['id']) => void;\n /** Suggested messages to start the conversation */\n initialSuggestedMessages?: MessageProps[];\n /** Additional suggestions presented at the bottom of the chat window */\n suggestions?: MenuProps['items'];\n /** Send prompts */\n onSend: (message: SendMessageProps) => void;\n /** Messages to be shown in the chatting window. */\n messages?: GenAIMessageProps[];\n /** Placement of the component */\n variant: Variant;\n /** callback when component is mounted */\n onOpen?: () => void;\n /**\n * User would be guided with selective prompts to enable interaction with coach.\n * @default false\n */\n guidedMode?: boolean;\n /** Pass an array of Action objects to show Action button. */\n actions?: ActionsProps;\n /** Pass data to show history view. */\n conversationHistory?: ConversationHistoryProps;\n /** Callback triggered when the layout component changes. */\n onLayoutChange?: (inFullPage: boolean) => void;\n /** Callback when attachment icon is clicked */\n onAddAttachment?: (files: File[]) => void;\n /** Attachments list */\n attachments?: FileItemProps[];\n /** Error in attachments */\n attachmentsError?: string;\n /** Configuration for the Lightbox component that handles preview of media attachments and files */\n lightboxPreviewProps?: LightboxProps;\n /** Show welcome state */\n showSalutation?: boolean;\n /** Salutation message */\n salutation?: string;\n }\n>;\n\nexport interface MessageFeedbackProps {\n messageId: MessageProps['id'];\n feedback: CoachMessageProps['feedback'];\n}\n\nexport interface UtilitiesGenAICoachProps extends OmitStrict<GenAICoachProps, 'variant'> {\n onClose?: () => void;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAIMessage.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"GenAIMessage.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAaL,KAAK,+BAA+B,EACrC,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAgB5D,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CAiLpE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,26 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useEffect
|
|
3
|
-
import { Button, Flex, Icon, Progress, registerIcon, useI18n, useTheme, Text, useTestIds, ErrorState,
|
|
2
|
+
import { forwardRef, useEffect } from 'react';
|
|
3
|
+
import { Actions, Button, Flex, Icon, Progress, registerIcon, useI18n, useTheme, Text, useTestIds, ErrorState, markdownToPlainText } from '@pega/cosmos-react-core';
|
|
4
4
|
import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
|
|
5
|
-
import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
|
|
6
|
-
import * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';
|
|
7
|
-
import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
|
|
8
|
-
import * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';
|
|
9
5
|
import { RichTextViewer } from '@pega/cosmos-react-rte';
|
|
10
6
|
import { useAnimatedText } from '@pega/cosmos-react-core';
|
|
11
|
-
import { StyledAttachmentsList, StyledMessage, StyledSuggestion, StyledSuggestionsContainer, StyledUserMessage } from './GenAICoach.styles';
|
|
7
|
+
import { StyledActionsContainer, StyledAttachmentsList, StyledMessage, StyledSuggestion, StyledSuggestionsContainer, StyledUserMessage } from './GenAICoach.styles';
|
|
12
8
|
import { getGenAICoachTestIds } from './GenAICoach.test-ids';
|
|
13
9
|
import { isCoachMessage, isUserMessage } from './GenAICoach.utils';
|
|
14
10
|
import GenAIMessageProgress from './GenAIMessageProgress';
|
|
15
|
-
|
|
11
|
+
import GenAIMessageFeedbackButtons from './GenAIMessageFeedback';
|
|
12
|
+
registerIcon(polarisSolidIcon);
|
|
16
13
|
const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
17
14
|
const testIds = useTestIds(props.testId, getGenAICoachTestIds);
|
|
18
15
|
const theme = useTheme();
|
|
19
16
|
const t = useI18n();
|
|
20
|
-
const [wrapperEl, setWrapperEl] = useElement(null);
|
|
21
|
-
const [feedbackVal, setFeedbackVal] = useState('');
|
|
22
|
-
const [showDialog, setShowDialog] = useState(false);
|
|
23
|
-
const focusOnInteractionRef = useRef(false);
|
|
24
17
|
const { message, announceInteraction, ...restProps } = props;
|
|
25
18
|
const plainTextMessage = markdownToPlainText(message ?? '');
|
|
26
19
|
let ariaLabel = plainTextMessage;
|
|
@@ -39,15 +32,9 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
39
32
|
props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);
|
|
40
33
|
}
|
|
41
34
|
}, [enableStreaming, isStreamingDone, allChunksReceived]);
|
|
42
|
-
useElementFocus(wrapperEl, { shouldFocus: !showDialog && focusOnInteractionRef.current });
|
|
43
|
-
useEffect(() => {
|
|
44
|
-
if (!showDialog && focusOnInteractionRef.current) {
|
|
45
|
-
focusOnInteractionRef.current = false;
|
|
46
|
-
}
|
|
47
|
-
}, [showDialog]);
|
|
48
35
|
if (isCoachMessage(props)) {
|
|
49
|
-
const { id: messageId, coachName, suggestions, onSend, loading, error, feedback } = props;
|
|
50
|
-
const { reaction
|
|
36
|
+
const { id: messageId, coachName, suggestions, onSend, loading, error, feedback, messageActions, markdownMap } = props;
|
|
37
|
+
const { reaction } = feedback ?? {};
|
|
51
38
|
let selectedFeedbackResponse;
|
|
52
39
|
let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);
|
|
53
40
|
if (feedback && reaction) {
|
|
@@ -63,30 +50,8 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
|
|
|
63
50
|
if (announceInteraction) {
|
|
64
51
|
ariaLabel = `${ariaLabel} ${t('interaction_message')}`;
|
|
65
52
|
}
|
|
66
|
-
const streamingContent = isStreamingMessage && (_jsx(_Fragment, { children: message ? (_jsxs(_Fragment, { children: [_jsx(RichTextViewer, { content: isStreamingMessage ? streamingMessage : message, type: 'markdown' }), loading && _jsx(Progress, { variant: 'ellipsis', placement: 'inline' })] })) : (loading && _jsx(GenAIMessageProgress, {})) }));
|
|
67
|
-
return (_jsxs(Flex, { as: 'li', "data-testid": testIds.coachMessage, ...restProps, container: { direction: 'column', pad: [1, 0] }, type: 'message', "aria-label": ariaLabel, ref: ref, children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid', color: theme.base.palette.ai, size: 's' }), _jsx(Text, { as: 'span', variant: 'h4', children: coachName })] }), _jsxs(StyledMessage, { children: [streamingContent, loading || error ? (_jsxs(_Fragment, { children: [loading && !isStreamingMessage && _jsx(GenAIMessageProgress, {}), error && _jsx(ErrorState, { message: error })] })) : (_jsxs(_Fragment, { children: [!isStreamingMessage && message && (_jsx(RichTextViewer, { content: message, type: 'markdown' })), feedback && (
|
|
68
|
-
wrapperEl && (_jsx(FormDialog, { target: wrapperEl, heading: t('share_feedback'), onCancel: () => {
|
|
69
|
-
focusOnInteractionRef.current = true;
|
|
70
|
-
setShowDialog(false);
|
|
71
|
-
onFeedbackComplete(messageId);
|
|
72
|
-
}, onSubmit: () => {
|
|
73
|
-
focusOnInteractionRef.current = true;
|
|
74
|
-
setShowDialog(false);
|
|
75
|
-
onFeedbackComplete(messageId, feedbackVal);
|
|
76
|
-
}, onKeyDown: e => e.stopPropagation(), children: _jsx(TextArea, { value: feedbackVal, onChange: e => setFeedbackVal(e.target.value), onKeyDown: (e) => {
|
|
77
|
-
if (e.key === 'Enter' && !e.shiftKey) {
|
|
78
|
-
e.preventDefault();
|
|
79
|
-
focusOnInteractionRef.current = true;
|
|
80
|
-
setShowDialog(false);
|
|
81
|
-
onFeedbackComplete(messageId, feedbackVal);
|
|
82
|
-
}
|
|
83
|
-
}, autoResize: false }) }))) : (_jsx(Tooltip, { target: wrapperEl, describeTarget: false, children: reaction === 'liked' ? t('good_response') : t('bad_response') }))] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('good_response'), variant: 'simple', icon: true, compact: true, onClick: () => {
|
|
84
|
-
onReaction?.(messageId, 'liked');
|
|
85
|
-
focusOnInteractionRef.current = true;
|
|
86
|
-
}, children: _jsx(Icon, { name: 'thumbs-up' }) }), _jsx(Button, { label: t('bad_response'), variant: 'simple', icon: true, compact: true, onClick: () => {
|
|
87
|
-
setShowDialog(true);
|
|
88
|
-
onReaction?.(messageId, 'disliked');
|
|
89
|
-
}, children: _jsx(Icon, { name: 'thumbs-down' }) })] })) })), suggestions && (_jsx(Flex, { as: StyledSuggestionsContainer, container: { direction: 'column', gap: 1 }, children: suggestions.map(({ id, message: prompt }) => {
|
|
53
|
+
const streamingContent = isStreamingMessage && (_jsx(_Fragment, { children: message ? (_jsxs(_Fragment, { children: [_jsx(RichTextViewer, { content: isStreamingMessage ? streamingMessage : message, type: 'markdown', markdownMap: markdownMap }), loading && _jsx(Progress, { variant: 'ellipsis', placement: 'inline' })] })) : (loading && _jsx(GenAIMessageProgress, {})) }));
|
|
54
|
+
return (_jsxs(Flex, { as: 'li', "data-testid": testIds.coachMessage, ...restProps, container: { direction: 'column', pad: [1, 0] }, type: 'message', "aria-label": ariaLabel, ref: ref, children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid', color: theme.base.palette.ai, size: 's' }), _jsx(Text, { as: 'span', variant: 'h4', children: coachName })] }), _jsxs(StyledMessage, { children: [streamingContent, loading || error ? (_jsxs(_Fragment, { children: [loading && !isStreamingMessage && _jsx(GenAIMessageProgress, {}), error && _jsx(ErrorState, { message: error })] })) : (_jsxs(_Fragment, { children: [!isStreamingMessage && message && (_jsx(RichTextViewer, { content: message, type: 'markdown', markdownMap: markdownMap })), (feedback || messageActions) && (_jsxs(Flex, { container: { direction: 'row', gap: 1, pad: [1, undefined] }, as: StyledActionsContainer, children: [feedback && (_jsx(GenAIMessageFeedbackButtons, { messageId: messageId, feedback: feedback })), messageActions && _jsx(Actions, { ...messageActions })] })), suggestions && (_jsx(Flex, { as: StyledSuggestionsContainer, container: { direction: 'column', gap: 1 }, children: suggestions.map(({ id, message: prompt }) => {
|
|
90
55
|
return (_jsx(Button, { as: StyledSuggestion, onClick: onSend ? () => onSend({ id, message: prompt }) : undefined, children: prompt }, id));
|
|
91
56
|
}) }))] }))] })] }));
|
|
92
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent, PropsWithoutRef } from 'react';\n\nimport {\n Button,\n Flex,\n Icon,\n Progress,\n registerIcon,\n useI18n,\n useTheme,\n Text,\n useTestIds,\n ErrorState,\n useElement,\n Tooltip,\n TextArea,\n FormDialog,\n useElementFocus,\n markdownToPlainText,\n type ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\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';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { GenAIMessageProps } from './GenAICoach.types';\nimport {\n StyledAttachmentsList,\n StyledMessage,\n StyledSuggestion,\n StyledSuggestionsContainer,\n StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\n\nregisterIcon(\n polarisSolidIcon,\n thumbsUpSolidIcon,\n thumbsUpIcon,\n thumbsDownSolidIcon,\n thumbsDownIcon\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 theme = useTheme();\n const t = useI18n();\n const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>(null);\n const [feedbackVal, setFeedbackVal] = useState('');\n const [showDialog, setShowDialog] = useState(false);\n const focusOnInteractionRef = useRef(false);\n\n const { message, announceInteraction, ...restProps } = props;\n const plainTextMessage = markdownToPlainText(message ?? '');\n let ariaLabel = plainTextMessage;\n\n const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n const { text: streamingMessage, isAnimationDone: isStreamingDone } = useAnimatedText({\n text: message ?? '',\n allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n enabled: enableStreaming,\n tokenizeMarkdown: true\n });\n\n useEffect(() => {\n if (isStreamingMessage && props.onStreamingUpdate) {\n // Consider streaming is done when we have all the chunks and all of them are rendered\n props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n }\n }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n useElementFocus(wrapperEl, { shouldFocus: !showDialog && focusOnInteractionRef.current });\n\n useEffect(() => {\n if (!showDialog && focusOnInteractionRef.current) {\n focusOnInteractionRef.current = false;\n }\n }, [showDialog]);\n\n if (isCoachMessage(props)) {\n const { id: messageId, coachName, suggestions, onSend, loading, error, feedback } = props;\n\n const { reaction, onReaction, onFeedbackComplete } = feedback ?? {};\n\n let selectedFeedbackResponse;\n\n let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n if (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 if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const streamingContent = isStreamingMessage && (\n <>\n {message ? (\n <>\n <RichTextViewer\n content={isStreamingMessage ? streamingMessage : message}\n type='markdown'\n />\n {loading && <Progress variant='ellipsis' placement='inline' />}\n </>\n ) : (\n loading && <GenAIMessageProgress />\n )}\n </>\n );\n\n return (\n <Flex\n as='li'\n data-testid={testIds.coachMessage}\n {...restProps}\n container={{ direction: 'column', pad: [1, 0] }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n <Flex container={{ gap: 1 }}>\n <Icon name='polaris-solid' color={theme.base.palette.ai} size='s' />\n <Text as='span' variant='h4'>\n {coachName}\n </Text>\n </Flex>\n <StyledMessage>\n {/* Streaming loader and content */}\n {streamingContent}\n {loading || error ? (\n <>\n {loading && !isStreamingMessage && <GenAIMessageProgress />}\n {error && <ErrorState message={error} />}\n </>\n ) : (\n <>\n {/* Non streaming content */}\n {!isStreamingMessage && message && (\n <RichTextViewer content={message} type='markdown' />\n )}\n {feedback && (\n <Flex container={{ pad: [0.5, undefined] }}>\n {reaction ? (\n <>\n <Flex\n container={{ pad: 0.5 }}\n aria-label={selectedFeedbackResponse}\n ref={setWrapperEl}\n tabIndex={-1}\n >\n <Icon\n name={reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-down-solid'}\n />\n </Flex>\n {showDialog ? (\n onFeedbackComplete &&\n wrapperEl && (\n <FormDialog\n target={wrapperEl}\n heading={t('share_feedback')}\n onCancel={() => {\n focusOnInteractionRef.current = true;\n setShowDialog(false);\n onFeedbackComplete(messageId);\n }}\n onSubmit={() => {\n focusOnInteractionRef.current = true;\n setShowDialog(false);\n onFeedbackComplete(messageId, feedbackVal);\n }}\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 focusOnInteractionRef.current = true;\n setShowDialog(false);\n onFeedbackComplete(messageId, feedbackVal);\n }\n }}\n autoResize={false}\n />\n </FormDialog>\n )\n ) : (\n <Tooltip target={wrapperEl} describeTarget={false}>\n {reaction === 'liked' ? t('good_response') : t('bad_response')}\n </Tooltip>\n )}\n </>\n ) : (\n <>\n <Button\n label={t('good_response')}\n variant='simple'\n icon\n compact\n onClick={() => {\n onReaction?.(messageId, 'liked');\n focusOnInteractionRef.current = true;\n }}\n >\n <Icon name='thumbs-up' />\n </Button>\n\n <Button\n label={t('bad_response')}\n variant='simple'\n icon\n compact\n onClick={() => {\n setShowDialog(true);\n onReaction?.(messageId, 'disliked');\n }}\n >\n <Icon name='thumbs-down' />\n </Button>\n </>\n )}\n </Flex>\n )}\n {suggestions && (\n <Flex as={StyledSuggestionsContainer} container={{ direction: 'column', gap: 1 }}>\n {suggestions.map(({ id, message: prompt }) => {\n return (\n <Button\n as={StyledSuggestion}\n onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n key={id}\n >\n {prompt}\n </Button>\n );\n })}\n </Flex>\n )}\n </>\n )}\n </StyledMessage>\n </Flex>\n );\n }\n\n if (isUserMessage(props)) {\n if (plainTextMessage) {\n ariaLabel = t('you_asked', [plainTextMessage]);\n }\n\n if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n return (\n <StyledUserMessage\n as={StyledUserMessage}\n data-testid={testIds.userMessage}\n {...restProps}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {props.attachments && props.attachments.length > 0 && (\n <StyledAttachmentsList type='display' items={props.attachments} />\n )}\n {message && <RichTextViewer content={message} type='markdown' />}\n </StyledUserMessage>\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 { forwardRef, useEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Actions,\n Button,\n Flex,\n Icon,\n Progress,\n registerIcon,\n useI18n,\n useTheme,\n Text,\n useTestIds,\n ErrorState,\n markdownToPlainText,\n type ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { GenAIMessageProps } from './GenAICoach.types';\nimport {\n StyledActionsContainer,\n StyledAttachmentsList,\n StyledMessage,\n StyledSuggestion,\n StyledSuggestionsContainer,\n StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\nimport GenAIMessageFeedbackButtons from './GenAIMessageFeedback';\n\nregisterIcon(polarisSolidIcon);\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n const theme = useTheme();\n const t = useI18n();\n\n const { message, announceInteraction, ...restProps } = props;\n const plainTextMessage = markdownToPlainText(message ?? '');\n let ariaLabel = plainTextMessage;\n\n const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n const { text: streamingMessage, isAnimationDone: isStreamingDone } = useAnimatedText({\n text: message ?? '',\n allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n enabled: enableStreaming,\n tokenizeMarkdown: true\n });\n\n useEffect(() => {\n if (isStreamingMessage && props.onStreamingUpdate) {\n // Consider streaming is done when we have all the chunks and all of them are rendered\n props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n }\n }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n if (isCoachMessage(props)) {\n const {\n id: messageId,\n coachName,\n suggestions,\n onSend,\n loading,\n error,\n feedback,\n messageActions,\n markdownMap\n } = props;\n\n const { reaction } = feedback ?? {};\n\n let selectedFeedbackResponse;\n\n let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n if (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 if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n const streamingContent = isStreamingMessage && (\n <>\n {message ? (\n <>\n <RichTextViewer\n content={isStreamingMessage ? streamingMessage : message}\n type='markdown'\n markdownMap={markdownMap}\n />\n {loading && <Progress variant='ellipsis' placement='inline' />}\n </>\n ) : (\n loading && <GenAIMessageProgress />\n )}\n </>\n );\n\n return (\n <Flex\n as='li'\n data-testid={testIds.coachMessage}\n {...restProps}\n container={{ direction: 'column', pad: [1, 0] }}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n <Flex container={{ gap: 1 }}>\n <Icon name='polaris-solid' color={theme.base.palette.ai} size='s' />\n <Text as='span' variant='h4'>\n {coachName}\n </Text>\n </Flex>\n\n <StyledMessage>\n {/* Streaming loader and content */}\n {streamingContent}\n\n {loading || error ? (\n <>\n {loading && !isStreamingMessage && <GenAIMessageProgress />}\n {error && <ErrorState message={error} />}\n </>\n ) : (\n <>\n {/* Non streaming content */}\n {!isStreamingMessage && message && (\n <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n )}\n\n {(feedback || messageActions) && (\n <Flex\n container={{ direction: 'row', gap: 1, pad: [1, undefined] }}\n as={StyledActionsContainer}\n >\n {feedback && (\n <GenAIMessageFeedbackButtons messageId={messageId} feedback={feedback} />\n )}\n\n {messageActions && <Actions {...messageActions} />}\n </Flex>\n )}\n\n {suggestions && (\n <Flex as={StyledSuggestionsContainer} container={{ direction: 'column', gap: 1 }}>\n {suggestions.map(({ id, message: prompt }) => {\n return (\n <Button\n as={StyledSuggestion}\n onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n key={id}\n >\n {prompt}\n </Button>\n );\n })}\n </Flex>\n )}\n </>\n )}\n </StyledMessage>\n </Flex>\n );\n }\n\n if (isUserMessage(props)) {\n if (plainTextMessage) {\n ariaLabel = t('you_asked', [plainTextMessage]);\n }\n\n if (announceInteraction) {\n ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n }\n\n return (\n <StyledUserMessage\n as={StyledUserMessage}\n data-testid={testIds.userMessage}\n {...restProps}\n type='message'\n aria-label={ariaLabel}\n ref={ref}\n >\n {props.attachments && props.attachments.length > 0 && (\n <StyledAttachmentsList type='display' items={props.attachments} />\n )}\n {message && <RichTextViewer content={message} type='markdown' />}\n </StyledUserMessage>\n );\n }\n\n return null;\n }\n);\n\nexport default GenAIMessage;\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { MessageFeedbackProps } from './GenAICoach.types';
|
|
2
|
+
declare const GenAIMessageFeedbackButtons: ({ messageId, feedback }: MessageFeedbackProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export default GenAIMessageFeedbackButtons;
|
|
4
|
+
//# sourceMappingURL=GenAIMessageFeedback.d.ts.map
|
|
@@ -0,0 +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,4CA+KjF,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { Button, Flex, FormDialog, Icon, TextArea, Tooltip, registerIcon, useElement, useI18n } from '@pega/cosmos-react-core';
|
|
4
|
+
import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
|
|
5
|
+
import * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';
|
|
6
|
+
import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
|
|
7
|
+
import * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';
|
|
8
|
+
registerIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);
|
|
9
|
+
const GenAIMessageFeedbackButtons = ({ messageId, feedback }) => {
|
|
10
|
+
const { reaction, feedbackText = '', allowFeedbackResubmission = false, promptFeedbackOn = 'disliked', onReaction, onFeedbackComplete } = feedback ?? {};
|
|
11
|
+
const t = useI18n();
|
|
12
|
+
const [feedbackVal, setFeedbackVal] = useState(feedbackText);
|
|
13
|
+
const [showDialog, setShowDialog] = useState(false);
|
|
14
|
+
const likeButtonRef = useRef(null);
|
|
15
|
+
const dislikeButtonRef = useRef(null);
|
|
16
|
+
const shouldOpenDialogRef = useRef(false);
|
|
17
|
+
const [iconEl, seticonEl] = useElement();
|
|
18
|
+
const isLikeActive = reaction === 'liked';
|
|
19
|
+
const isDislikeActive = reaction === 'disliked';
|
|
20
|
+
const needsDialog = (reactionType) => {
|
|
21
|
+
switch (promptFeedbackOn) {
|
|
22
|
+
case 'disliked':
|
|
23
|
+
return reactionType === 'disliked';
|
|
24
|
+
case 'liked':
|
|
25
|
+
return reactionType === 'liked';
|
|
26
|
+
case 'both':
|
|
27
|
+
return true;
|
|
28
|
+
default:
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const handleReactionClick = useCallback((reactionType) => {
|
|
33
|
+
if (reaction === reactionType && !allowFeedbackResubmission) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
onReaction?.(messageId, reactionType);
|
|
37
|
+
if (needsDialog(reactionType)) {
|
|
38
|
+
if (reaction !== reactionType) {
|
|
39
|
+
setFeedbackVal('');
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
setFeedbackVal(feedbackText);
|
|
43
|
+
}
|
|
44
|
+
if (!allowFeedbackResubmission) {
|
|
45
|
+
shouldOpenDialogRef.current = true;
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
setShowDialog(true);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}, [reaction, feedbackText, allowFeedbackResubmission, promptFeedbackOn, messageId, onReaction]);
|
|
52
|
+
const closeDialog = useCallback((comment) => {
|
|
53
|
+
setShowDialog(false);
|
|
54
|
+
shouldOpenDialogRef.current = false;
|
|
55
|
+
onFeedbackComplete?.(messageId, comment);
|
|
56
|
+
if (!allowFeedbackResubmission && iconEl) {
|
|
57
|
+
iconEl.focus();
|
|
58
|
+
}
|
|
59
|
+
}, [allowFeedbackResubmission, onFeedbackComplete, messageId, iconEl]);
|
|
60
|
+
const getDialogTarget = () => {
|
|
61
|
+
if (!allowFeedbackResubmission && iconEl) {
|
|
62
|
+
return iconEl;
|
|
63
|
+
}
|
|
64
|
+
return isLikeActive ? likeButtonRef.current : dislikeButtonRef.current;
|
|
65
|
+
};
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
if (iconEl && shouldOpenDialogRef.current && !allowFeedbackResubmission) {
|
|
68
|
+
setShowDialog(true);
|
|
69
|
+
shouldOpenDialogRef.current = false;
|
|
70
|
+
}
|
|
71
|
+
}, [iconEl, allowFeedbackResubmission]);
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
if (!showDialog && reaction && allowFeedbackResubmission) {
|
|
74
|
+
const reactionButton = reaction === 'liked' ? likeButtonRef.current : dislikeButtonRef.current;
|
|
75
|
+
reactionButton?.focus();
|
|
76
|
+
}
|
|
77
|
+
}, [showDialog, reaction, allowFeedbackResubmission]);
|
|
78
|
+
const dialogTarget = getDialogTarget();
|
|
79
|
+
const feedbackDialog = showDialog && dialogTarget && (_jsx(FormDialog, { target: dialogTarget, heading: t('share_feedback'), onCancel: () => closeDialog(), onSubmit: () => closeDialog(feedbackVal), onKeyDown: e => e.stopPropagation(), children: _jsx(TextArea, { value: feedbackVal, onChange: e => setFeedbackVal(e.target.value), onKeyDown: (e) => {
|
|
80
|
+
if (e.key === 'Enter' && !e.shiftKey) {
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
closeDialog(feedbackVal);
|
|
83
|
+
}
|
|
84
|
+
}, autoResize: false }) }));
|
|
85
|
+
const shouldShowIcon = !allowFeedbackResubmission && reaction;
|
|
86
|
+
if (shouldShowIcon) {
|
|
87
|
+
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] }));
|
|
88
|
+
}
|
|
89
|
+
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] }));
|
|
90
|
+
};
|
|
91
|
+
export default GenAIMessageFeedbackButtons;
|
|
92
|
+
//# sourceMappingURL=GenAIMessageFeedback.js.map
|
|
@@ -0,0 +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 && !allowFeedbackResubmission) {\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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.9.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-core": "8.
|
|
18
|
-
"@pega/cosmos-react-rte": "8.
|
|
17
|
+
"@pega/cosmos-react-core": "8.9.0",
|
|
18
|
+
"@pega/cosmos-react-rte": "8.9.0",
|
|
19
19
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
20
20
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
21
21
|
"@types/styled-components": "^5.1.26",
|