@pega/cosmos-react-work 10.0.0-build.4.3 → 10.0.0-build.4.31

package/lib/components/GenAICoach/GenAICoach.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { getLuminance } from 'polished';
-import { Button, Flex, Icon, MenuButton, Progress, Text, createUID, menuHelpers, useI18n, useSpeechRecognition, useTestIds, useTheme, withTestIds, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, useArrows, useFocusTrap, useLiveLog, useOuterEvent, ThemeOverride, hasProp, getActiveElement, useElement, Actions, useFullscreenContext, useBreakpoint, Grid, useRefMap, VisuallyHiddenText, FileList, Lightbox, FormField, useUID, SpeechToTextButton, Toaster, useToaster, throttle } from '@pega/cosmos-react-core';
+import { Button, Flex, Icon, MenuButton, Progress, Text, createUID, menuHelpers, useI18n, useSpeechRecognition, useTestIds, useTheme, withTestIds, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, useArrows, useFocusTrap, useLiveLog, useOuterEvent, ThemeOverride, hasProp, getActiveElement, useElement, Actions, useFullscreenContext, useBreakpoint, Grid, useRefMap, VisuallyHiddenText, FileList, Lightbox, FormField, useUID, SpeechToTextButton, Toaster, useToaster, throttle, Tooltip } from '@pega/cosmos-react-core';
 import * as caretUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-up.icon';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
@@ -19,7 +19,7 @@ import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icon
 import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
 import { getGenAICoachTestIds } from './GenAICoach.test-ids';
 import { getSelectedKeys, isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
-import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledStopGeneratingButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledGenAIFooter, StyledAgentIcon, StyledActionsContainer, StyledHeaderContainer, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge, StyledSalutation, StyledSubHeading, StyledComposerWrapper, StyledBannerSalutationBlock } from './GenAICoach.styles';
+import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledStopGeneratingButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledGenAIFooter, StyledAgentIcon, StyledActionsContainer, StyledHeaderContainer, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge, StyledSalutation, StyledSubHeading, StyledComposerWrapper, StyledBannerSalutationBlock, StyledComposerSelector } from './GenAICoach.styles';
 import ActiveCases from './ActiveCases';
 import CaseWorkflow from './CaseWorkflow';
 import ConversationHistory from './ConversationHistory';
@@ -98,7 +98,7 @@ const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef,
     }
     return (_jsx(Actions, { ...(actions ?? {}), menuAt: 1, "data-testid": actionsTestId, contextualLabel: selectedCoach, items: mergedItems }));
 };
-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, conversationError, questionnaireData, onQuestionnaireDismiss, simplifiedAgent = false, subHeading, operatorName, ...restProps }) => {
+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, conversationError, questionnaireData, onQuestionnaireDismiss, simplifiedAgent = false, subHeading, operatorName, agentModeProps, modelSelectorProps, ...restProps }) => {
     const scrollTolerancePx = 2;
     const scrollThresholdPx = 50;
     const streamBufferLh = simplifiedAgent ? 15 : 5;
@@ -131,6 +131,8 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     const messageContainerRef = useRef(null);
     const textAreaRef = useRef(null);
     const [suggestionMenuButton, setSuggestionMenuButton] = useElement(null);
+    const [agentModeButtonEl, setAgentModeButtonEl] = useElement(null);
+    const [modelSelectorButtonEl, setModelSelectorButtonEl] = useElement(null);
     const isGeneratingResponse = useRef(false);
     const focusTextArea = useRef(false);
     const historyViewRef = useRef(null);
@@ -440,6 +442,28 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             return coachOptions[0].primary;
         }
     }, [coachOptions]);
+    const selectedAgentModeLabel = useMemo(() => {
+        if (!agentModeProps)
+            return '';
+        const selected = menuHelpers.getSelected(agentModeProps.modes)[0];
+        if (selected)
+            return selected.primary;
+        if (agentModeProps.modes[0]) {
+            if (isMenuGroupProps(agentModeProps.modes[0])) {
+                return agentModeProps.modes[0].items[0].primary;
+            }
+            return agentModeProps.modes[0].primary;
+        }
+        return '';
+    }, [agentModeProps]);
+    const selectedModelLabel = useMemo(() => {
+        if (!modelSelectorProps)
+            return '';
+        return menuHelpers
+            .getSelected(modelSelectorProps.options)
+            .map(s => s.primary)
+            .join(' · ');
+    }, [modelSelectorProps]);
     const onResult = useCallback(value => {
         pendingResult.current = false;
         setMessage(prevMessage => {
@@ -842,9 +866,9 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                         }, autoResize: true, simplified: simplifiedAgent }), _jsxs(Flex, { container: {
                                             direction: 'row',
                                             justify: 'between',
-                                            gap: 1,
+                                            gap: 2,
                                             pad: [undefined, 1, 1, 1]
-                                        }, 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: {
+                                        }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, item: { grow: 1, shrink: 1, basis: '0%' }, children: [!(messages.length === 0 && suggestionCardsView) && suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'simple', icon: 'chat-typing', iconOnly: true, as: StyledMenuSuggestions, menu: {
                                                             items: suggestions,
                                                             onItemClick: id => {
                                                                 const selected = menuHelpers.getItem(suggestions, id);
@@ -858,7 +882,16 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                                                         fileUploadInputRef.current.value = '';
                                                                     }
                                                                     fileUploadInputRef.current?.click();
-                                                                }, 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 })] }))] }), (() => {
+                                                                }, 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 })] })), agentModeProps && agentModeProps.modes.length > 0 && (_jsxs(_Fragment, { children: [_jsx(StyledComposerSelector, { ref: setAgentModeButtonEl, text: selectedAgentModeLabel, "aria-label": t('agent_mode_selector', [selectedAgentModeLabel]), variant: 'simple', "data-testid": testIds.agentMode, menu: {
+                                                                    mode: 'single-select',
+                                                                    items: agentModeProps.modes,
+                                                                    onItemClick: agentModeProps.onAgentModeChange
+                                                                }, showArrow: true }), agentModeButtonEl && selectedAgentModeLabel && (_jsx(Tooltip, { target: agentModeButtonEl, smart: true, showDelay: 'none', hideDelay: 'none', children: selectedAgentModeLabel }))] })), modelSelectorProps && modelSelectorProps.options.length > 0 && (_jsxs(_Fragment, { children: [_jsx(StyledComposerSelector, { ref: setModelSelectorButtonEl, text: selectedModelLabel, "aria-label": t('model_selector_button', [selectedModelLabel]), variant: 'simple', "data-testid": testIds.modelSelector, menu: {
+                                                                    mode: 'single-select',
+                                                                    variant: 'flyout',
+                                                                    items: modelSelectorProps.options,
+                                                                    onItemClick: modelSelectorProps.onModelChange
+                                                                }, showArrow: true }), modelSelectorButtonEl && selectedModelLabel && (_jsx(Tooltip, { target: modelSelectorButtonEl, smart: true, showDelay: 'none', hideDelay: 'none', children: selectedModelLabel }))] }))] }), (() => {
                                                 if (active && pendingResult.current) {
                                                     return (_jsxs(Flex, { container: {
                                                             gap: 1,