@pega/cosmos-react-work 9.0.0-build.25.3 → 9.0.0-build.25.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/GenAICoach/GenAICoach.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.js +119 -102
- package/lib/components/GenAICoach/GenAICoach.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts +10 -3
- package/lib/components/GenAICoach/GenAICoach.styles.d.ts.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.styles.js +73 -18
- package/lib/components/GenAICoach/GenAICoach.styles.js.map +1 -1
- package/lib/components/GenAICoach/GenAICoach.types.d.ts +30 -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/Questionnaire.d.ts +4 -0
- package/lib/components/GenAICoach/Questionnaire.d.ts.map +1 -0
- package/lib/components/GenAICoach/Questionnaire.js +153 -0
- package/lib/components/GenAICoach/Questionnaire.js.map +1 -0
- package/lib/components/GenAICoach/index.d.ts +2 -1
- package/lib/components/GenAICoach/index.d.ts.map +1 -1
- package/lib/components/GenAICoach/index.js +1 -0
- package/lib/components/GenAICoach/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AAsGA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAmBhF,eAAO,MAAM,SAAS,+CAmDrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;iCA4+CyB,eAAe;;;AAQ1C,wBAA6D"}
|
|
@@ -13,14 +13,17 @@ import * as squareSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/ic
|
|
|
13
13
|
import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
|
|
14
14
|
import * as dockIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/dock.icon';
|
|
15
15
|
import * as undockIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/undock.icon';
|
|
16
|
+
import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
|
|
17
|
+
import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
|
|
16
18
|
import { getGenAICoachTestIds } from './GenAICoach.test-ids';
|
|
17
19
|
import { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
|
|
18
|
-
import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledStopGeneratingButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledGenAIFooter, StyledAgentIcon, StyledActionsContainer, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge, StyledSalutation } from './GenAICoach.styles';
|
|
20
|
+
import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledStopGeneratingButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledGenAIFooter, StyledAgentIcon, StyledActionsContainer, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge, StyledSalutation, StyledComposerWrapper } from './GenAICoach.styles';
|
|
19
21
|
import ActiveCases from './ActiveCases';
|
|
20
22
|
import CaseWorkflow from './CaseWorkflow';
|
|
21
23
|
import ConversationHistory from './ConversationHistory';
|
|
24
|
+
import Questionnaire from './Questionnaire';
|
|
22
25
|
import { GenAIMessage, InitialSuggestedMessage } from '.';
|
|
23
|
-
registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, squareSolidIcon, sendSolidIcon, plusIcon, dockIcon, undockIcon);
|
|
26
|
+
registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, squareSolidIcon, sendSolidIcon, plusIcon, dockIcon, undockIcon, caretLeftIcon, caretRightIcon);
|
|
24
27
|
export const AgentIcon = () => {
|
|
25
28
|
const uid = useUID();
|
|
26
29
|
const idA = `agent-gradient-a-${uid}`;
|
|
@@ -65,7 +68,7 @@ const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef,
|
|
|
65
68
|
return null;
|
|
66
69
|
return (_jsx(Actions, { ...(actions ?? {}), menuAt: 1, "data-testid": actionsTestId, contextualLabel: selectedCoach, items: mergedItems }));
|
|
67
70
|
};
|
|
68
|
-
const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, onNewChat, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, allowFullScreen = true, isInLandingPageUtilities, stopProcess, voiceToTextProps, salutation, showSalutation = true, isPortalAgent = false, pagePanel, suggestionCardsView, draftMessage, caseWorkflow, activeCases, onStop, isCreatingConversation, ...restProps }) => {
|
|
71
|
+
const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, onNewChat, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, allowFullScreen = true, isInLandingPageUtilities, stopProcess, voiceToTextProps, salutation, showSalutation = true, isPortalAgent = false, pagePanel, suggestionCardsView, draftMessage, caseWorkflow, activeCases, onStop, isCreatingConversation, questionnaireData, ...restProps }) => {
|
|
69
72
|
const scrollTolerancePx = 2;
|
|
70
73
|
const scrollThresholdPx = 50;
|
|
71
74
|
const streamBufferLh = 20;
|
|
@@ -112,23 +115,22 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
|
|
|
112
115
|
breakpointRef: genAICoachRef
|
|
113
116
|
});
|
|
114
117
|
const [message, setMessage] = useState('');
|
|
115
|
-
useEffect(() => {
|
|
116
|
-
if (suggestionCardsView && draftMessage !== undefined) {
|
|
117
|
-
setMessage(draftMessage);
|
|
118
|
-
textAreaRef.current?.focus();
|
|
119
|
-
}
|
|
120
|
-
}, [draftMessage, suggestionCardsView]);
|
|
121
118
|
const [interimMessage, setInterimMessage] = useState('');
|
|
122
119
|
const [coachOptions, setCoachOptions] = useState(coachOptionsProps);
|
|
123
120
|
const [arrowKey, setArrowKey] = useState(null);
|
|
124
121
|
const [animationInitialCursorPos, setAnimationInitialCursorPos] = useState(0);
|
|
125
122
|
const [focused, setFocused] = useState(false);
|
|
123
|
+
const [formAnswers, setFormAnswers] = useState();
|
|
126
124
|
const [ctxFullscreen, toggleFullscreen] = useFullscreenContext() ?? [];
|
|
127
125
|
const fullScreen = !!ctxFullscreen;
|
|
126
|
+
const questionnaireKey = questionnaireData?.questions?.map(q => q.field).join(',') ?? '';
|
|
128
127
|
const [showScrollToBottom, setShowScrollToBottom] = useState(false);
|
|
129
128
|
const prevFullScreen = usePrevious(fullScreen);
|
|
130
129
|
const previousMessages = usePrevious(messages);
|
|
131
130
|
const composerId = useUID();
|
|
131
|
+
const handleFormChange = useCallback((answers) => {
|
|
132
|
+
setFormAnswers(answers);
|
|
133
|
+
}, []);
|
|
132
134
|
const latestMessage = messages.at(-1);
|
|
133
135
|
const isLatestAgentMessageStreaming = !!latestMessage && isCoachMessage(latestMessage) && !!latestMessage.loading;
|
|
134
136
|
const condition = !(fullScreen && conversationHistory) &&
|
|
@@ -342,12 +344,15 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
|
|
|
342
344
|
langCode: voiceToTextProps?.langCode
|
|
343
345
|
});
|
|
344
346
|
const handleSendMessage = useCallback(() => {
|
|
347
|
+
const hasFormAnswers = !!questionnaireData &&
|
|
348
|
+
formAnswers &&
|
|
349
|
+
Object.values(formAnswers).some(v => v.value.length > 0);
|
|
345
350
|
const isMessageAndAttachmentsEmpty = !message && (!attachments || attachments.length === 0);
|
|
346
351
|
const hasAttachmentsError = attachments &&
|
|
347
352
|
attachments.length > 0 &&
|
|
348
353
|
(attachmentsError || attachments.some(attachment => attachment.error));
|
|
349
354
|
const isCoachMessageLoading = latestMessage && isCoachMessage(latestMessage) && latestMessage.loading;
|
|
350
|
-
if (isMessageAndAttachmentsEmpty ||
|
|
355
|
+
if ((isMessageAndAttachmentsEmpty && !hasFormAnswers) ||
|
|
351
356
|
hasAttachmentsError ||
|
|
352
357
|
isCoachMessageLoading ||
|
|
353
358
|
(latestMessage && isCoachMessage(latestMessage) && latestMessage.isToolConfirmation))
|
|
@@ -356,13 +361,15 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
|
|
|
356
361
|
id: createUID(),
|
|
357
362
|
message,
|
|
358
363
|
fromComposer: true,
|
|
359
|
-
attachmentIds: attachments?.map(({ id }) => id)
|
|
364
|
+
attachmentIds: attachments?.map(({ id }) => id),
|
|
365
|
+
formAnswers: hasFormAnswers ? formAnswers : undefined
|
|
360
366
|
});
|
|
367
|
+
setFormAnswers(undefined);
|
|
361
368
|
setMessage('');
|
|
362
369
|
if (active) {
|
|
363
370
|
stop();
|
|
364
371
|
}
|
|
365
|
-
}, [
|
|
372
|
+
}, [message, latestMessage, attachments, attachmentsError, formAnswers, questionnaireData]);
|
|
366
373
|
const handleEnterKeyDown = (e) => {
|
|
367
374
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
368
375
|
e.preventDefault();
|
|
@@ -411,6 +418,15 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
|
|
|
411
418
|
return variant.state;
|
|
412
419
|
}
|
|
413
420
|
}, [variant]);
|
|
421
|
+
useEffect(() => {
|
|
422
|
+
if (suggestionCardsView && draftMessage !== undefined) {
|
|
423
|
+
setMessage(draftMessage);
|
|
424
|
+
textAreaRef.current?.focus();
|
|
425
|
+
}
|
|
426
|
+
}, [draftMessage, suggestionCardsView]);
|
|
427
|
+
useEffect(() => {
|
|
428
|
+
setFormAnswers(undefined);
|
|
429
|
+
}, [questionnaireKey]);
|
|
414
430
|
useEffect(() => {
|
|
415
431
|
if (isUserTriggered.current) {
|
|
416
432
|
if (isInUtilities(variant) &&
|
|
@@ -589,74 +605,75 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
|
|
|
589
605
|
push({ content: voiceToTextError });
|
|
590
606
|
}
|
|
591
607
|
}, [voiceToTextError]);
|
|
592
|
-
const genAIFooter = (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAIFooter, children: [
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
608
|
+
const genAIFooter = (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAIFooter, children: [_jsxs(StyledComposerWrapper, { focused: focused, hasQuestionnaire: !!questionnaireData, onFocus: () => setFocused(true), onBlur: e => {
|
|
609
|
+
if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
|
|
610
|
+
setFocused(false);
|
|
611
|
+
}
|
|
612
|
+
}, children: [questionnaireData && (_jsx(Questionnaire, { data: questionnaireData, onChange: handleFormChange }, questionnaireKey)), _jsx(FormField, { label: t('message_pega_gen_ai_coach'), labelHidden: true, labelFor: composerId, children: _jsx(StyledGenAIFormControl, { focused: !questionnaireData && focused, children: _jsxs(Flex, { container: { direction: 'column', gap: 0.25 }, children: [_jsx(StyledGenAITextArea, { id: composerId, ref: textAreaRef, value: interimMessage ? `${message}${interimMessage}` : message, placeholder: t('write_message'), onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: () => {
|
|
613
|
+
if (active)
|
|
614
|
+
stop();
|
|
615
|
+
}, autoResize: true }), _jsxs(Flex, { container: {
|
|
616
|
+
direction: 'row',
|
|
617
|
+
justify: 'between',
|
|
618
|
+
gap: 1,
|
|
619
|
+
pad: [undefined, 1, 1, 1]
|
|
620
|
+
}, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [!(messages.length === 0 && suggestionCardsView) && suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'simple', icon: 'chat-typing', iconOnly: true, as: StyledMenuSuggestions, menu: {
|
|
621
|
+
items: suggestions,
|
|
622
|
+
onItemClick: id => {
|
|
623
|
+
const selected = menuHelpers.getItem(suggestions, id);
|
|
624
|
+
if (selected && !selected.onClick) {
|
|
625
|
+
setMessage(selected.primary);
|
|
626
|
+
textAreaRef.current?.focus();
|
|
627
|
+
}
|
|
628
|
+
}
|
|
629
|
+
}, showArrow: false })), voiceToTextProps?.enableDictation && supported && (_jsx(SpeechToTextButton, { active: active, onClick: onSpeechToTextButtonClick })), onAddAttachment && (_jsxs(_Fragment, { children: [_jsx(Button, { icon: true, onClick: () => {
|
|
630
|
+
if (fileUploadInputRef.current) {
|
|
631
|
+
fileUploadInputRef.current.value = '';
|
|
632
|
+
}
|
|
633
|
+
fileUploadInputRef.current?.click();
|
|
634
|
+
}, variant: 'simple', label: t('add_attachment'), children: _jsx(Icon, { name: 'paper-clip' }) }), _jsx(StyledInput, { type: 'file', ref: fileUploadInputRef, onChange: onFileChange, multiple: false, "data-testid": testIds.attachments })] }))] }), (() => {
|
|
635
|
+
if (active && pendingResult.current) {
|
|
636
|
+
return (_jsxs(Flex, { container: {
|
|
637
|
+
gap: 1,
|
|
638
|
+
justify: 'end',
|
|
639
|
+
alignItems: 'center',
|
|
640
|
+
pad: 1
|
|
641
|
+
}, children: [t('processing_speech'), _jsx(Progress, { placement: 'inline' })] }));
|
|
642
|
+
}
|
|
643
|
+
const isToolConfirmation = latestMessage &&
|
|
644
|
+
isCoachMessage(latestMessage) &&
|
|
645
|
+
latestMessage.isToolConfirmation;
|
|
646
|
+
let onStopFn;
|
|
647
|
+
if (onStop) {
|
|
648
|
+
onStopFn = onStop;
|
|
649
|
+
}
|
|
650
|
+
else if (isToolConfirmation) {
|
|
651
|
+
onStopFn = stopProcess;
|
|
652
|
+
}
|
|
653
|
+
if (onStopFn) {
|
|
654
|
+
return (_jsx(StyledStopGeneratingButton, { variant: 'primary', icon: true, label: t('stop'), "aria-label": t('stop'), onClick: () => {
|
|
609
655
|
textAreaRef.current?.focus();
|
|
610
|
-
|
|
656
|
+
onStopFn?.();
|
|
657
|
+
}, children: _jsx(Icon, { name: 'square-solid' }) }));
|
|
658
|
+
}
|
|
659
|
+
const isLoading = latestMessage &&
|
|
660
|
+
isCoachMessage(latestMessage) &&
|
|
661
|
+
latestMessage.loading &&
|
|
662
|
+
!latestMessage.error;
|
|
663
|
+
const sendButton = (_jsx(StyledSendButton, { variant: 'primary', onClick: isCreatingConversation ? undefined : handleSendMessage, icon: true, label: t('send'), "aria-label": t('send_message'), children: _jsx(Icon, { name: 'send-solid' }) }));
|
|
664
|
+
if (isLoading) {
|
|
665
|
+
if (isCreatingConversation) {
|
|
666
|
+
return sendButton;
|
|
611
667
|
}
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
},
|
|
618
|
-
|
|
619
|
-
return (_jsxs(Flex, { container: {
|
|
620
|
-
gap: 1,
|
|
621
|
-
justify: 'end',
|
|
622
|
-
alignItems: 'center',
|
|
623
|
-
pad: 1
|
|
624
|
-
}, children: [t('processing_speech'), _jsx(Progress, { placement: 'inline' })] }));
|
|
625
|
-
}
|
|
626
|
-
const isToolConfirmation = latestMessage &&
|
|
627
|
-
isCoachMessage(latestMessage) &&
|
|
628
|
-
latestMessage.isToolConfirmation;
|
|
629
|
-
let onStopFn;
|
|
630
|
-
if (onStop) {
|
|
631
|
-
onStopFn = onStop;
|
|
632
|
-
}
|
|
633
|
-
else if (isToolConfirmation) {
|
|
634
|
-
onStopFn = stopProcess;
|
|
635
|
-
}
|
|
636
|
-
if (onStopFn) {
|
|
637
|
-
return (_jsx(StyledStopGeneratingButton, { variant: 'primary', icon: true, label: t('stop'), "aria-label": t('stop'), onClick: () => {
|
|
638
|
-
textAreaRef.current?.focus();
|
|
639
|
-
onStopFn?.();
|
|
640
|
-
}, children: _jsx(Icon, { name: 'square-solid' }) }));
|
|
641
|
-
}
|
|
642
|
-
const isLoading = latestMessage &&
|
|
643
|
-
isCoachMessage(latestMessage) &&
|
|
644
|
-
latestMessage.loading &&
|
|
645
|
-
!latestMessage.error;
|
|
646
|
-
const sendButton = (_jsx(StyledSendButton, { variant: 'primary', onClick: isCreatingConversation ? undefined : handleSendMessage, icon: true, label: t('send'), "aria-label": t('send_message'), children: _jsx(Icon, { name: 'send-solid' }) }));
|
|
647
|
-
if (isLoading) {
|
|
648
|
-
if (isCreatingConversation) {
|
|
668
|
+
return (_jsxs(Flex, { container: {
|
|
669
|
+
gap: 1,
|
|
670
|
+
justify: 'end',
|
|
671
|
+
alignItems: 'center',
|
|
672
|
+
pad: 1
|
|
673
|
+
}, children: [t('generating_response'), _jsx(Progress, { placement: 'inline' })] }));
|
|
674
|
+
}
|
|
649
675
|
return sendButton;
|
|
650
|
-
}
|
|
651
|
-
return (_jsxs(Flex, { container: {
|
|
652
|
-
gap: 1,
|
|
653
|
-
justify: 'end',
|
|
654
|
-
alignItems: 'center',
|
|
655
|
-
pad: 1
|
|
656
|
-
}, children: [t('generating_response'), _jsx(Progress, { placement: 'inline' })] }));
|
|
657
|
-
}
|
|
658
|
-
return sendButton;
|
|
659
|
-
})()] })] }) }) }), attachments && attachments.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: FileList, type: 'item', "aria-label": `${t('attachments')}`, items: attachments, container: { pad: [1, 0] } }), attachmentsError && (_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, as: StyledErrorContainer, children: [_jsx(Icon, { name: 'warn-solid' }), _jsx(VisuallyHiddenText, { children: `${t('error')} ` }), attachmentsError] }))] })), _jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledDisclaimerText, { inFullPage: !condition, children: t('ai_disclaimer') }) })] }));
|
|
676
|
+
})()] })] }) }) })] }), attachments && attachments.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: FileList, type: 'item', "aria-label": `${t('attachments')}`, items: attachments, container: { pad: [1, 0] } }), attachmentsError && (_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, as: StyledErrorContainer, children: [_jsx(Icon, { name: 'warn-solid' }), _jsx(VisuallyHiddenText, { children: `${t('error')} ` }), attachmentsError] }))] })), _jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledDisclaimerText, { inFullPage: !condition, children: t('ai_disclaimer') }) })] }));
|
|
660
677
|
const isCompact = variant.placement === 'fullpage' &&
|
|
661
678
|
!fullScreen &&
|
|
662
679
|
!isInLandingPageUtilities &&
|
|
@@ -786,33 +803,33 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
|
|
|
786
803
|
!isInUtilities(variant)) &&
|
|
787
804
|
!guidedMode && (_jsx(StyledStickyComposer, { children: _jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, ref: setInputContainerRef, children: _jsx(StyledComposerSection, { children: genAIFooter }) }) })), _jsx(Flex, { container: { direction: 'column' }, as: StyledSuggestionCardsBottomHalf, children: _jsx(StyledSuggestionCardsView, { children: suggestionCardsView }) })] })) : (((isInUtilities(variant) && variant.state !== 'minimized') ||
|
|
788
805
|
!isInUtilities(variant)) &&
|
|
789
|
-
!loading && (_jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, ref: setInputContainerRef, children:
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
}
|
|
803
|
-
}
|
|
804
|
-
}, children: _jsx(MenuButton, { as: StyledGuidedSuggestions, text: t('ask_coach', [selectedCoach ?? '']), variant: 'primary', icon: 'polaris-solid', ref: setSuggestionMenuButton, menu: {
|
|
805
|
-
items: suggestions,
|
|
806
|
-
onItemClick: id => {
|
|
807
|
-
const selected = menuHelpers.getItem(suggestions, id);
|
|
808
|
-
if (selected && !selected.onClick) {
|
|
809
|
-
onSend({
|
|
810
|
-
id: selected.id,
|
|
811
|
-
message: selected.primary
|
|
812
|
-
});
|
|
806
|
+
!loading && (_jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, ref: setInputContainerRef, children: _jsxs(StyledComposerSection, { children: [guidedMode && questionnaireData && (_jsx(Questionnaire, { data: questionnaireData, onChange: handleFormChange }, questionnaireKey)), guidedMode ? (_jsx(_Fragment, { children: suggestions && messages.length > 0 && (_jsxs(_Fragment, { children: [latestMessage &&
|
|
807
|
+
isCoachMessage(latestMessage) &&
|
|
808
|
+
latestMessage.loading ? (_jsxs(Flex, { container: {
|
|
809
|
+
gap: 1,
|
|
810
|
+
justify: 'center',
|
|
811
|
+
alignItems: 'center',
|
|
812
|
+
pad: 1
|
|
813
|
+
}, children: [t('generating_response'), _jsx(Progress, { placement: 'inline', focusOnVisible: true, message: t('generating_response') })] })) : (_jsx(ThemeOverride, { theme: {
|
|
814
|
+
components: {
|
|
815
|
+
button: {
|
|
816
|
+
color: theme.base.palette.ai,
|
|
817
|
+
'secondary-color': theme.base.palette.ai,
|
|
818
|
+
'secondary-fill-style': 'outline'
|
|
813
819
|
}
|
|
814
820
|
}
|
|
815
|
-
}
|
|
821
|
+
}, children: _jsx(MenuButton, { as: StyledGuidedSuggestions, text: t('ask_coach', [selectedCoach ?? '']), variant: 'primary', icon: 'polaris-solid', ref: setSuggestionMenuButton, menu: {
|
|
822
|
+
items: suggestions,
|
|
823
|
+
onItemClick: id => {
|
|
824
|
+
const selected = menuHelpers.getItem(suggestions, id);
|
|
825
|
+
if (selected && !selected.onClick) {
|
|
826
|
+
onSend({
|
|
827
|
+
id: selected.id,
|
|
828
|
+
message: selected.primary
|
|
829
|
+
});
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
} }) })), _jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledDisclaimerText, { inFullPage: !condition, children: t('ai_disclaimer') }) })] })) })) : (renderTextArea)] }) }))), showScrollToBottom && (_jsx(StyledScrollButton, { icon: true, onClick: handleScrollToBottomClick, ariaLabel: t('scroll_to_latest_message'), children: _jsx(Icon, { name: 'caret-down' }) }))] })) }));
|
|
816
833
|
useEffect(() => {
|
|
817
834
|
if (focusTextArea.current && !conversationHistory && textAreaRef.current) {
|
|
818
835
|
textAreaRef.current.focus();
|