@pega/cosmos-react-work 9.8.1 → 9.10.0

package/lib/components/GenAICoach/GenAICoach.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AAuGA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AA8BhF,eAAO,MAAM,SAAS,+CA2GrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;iCAypDyB,eAAe;;;AAQ1C,wBAA6D"}
+{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AA2GA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAyChF,eAAO,MAAM,SAAS,+CA2GrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;iCAm2DyB,eAAe;;;AAQ1C,wBAA6D"}

package/lib/components/GenAICoach/GenAICoach.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+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 * as caretUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-up.icon';
@@ -12,19 +12,30 @@ import * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icon
 import * as sendSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/send-solid.icon';
 import * as squareSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/square-solid.icon';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import * as moreAltIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more-alt.icon';
 import * as dockIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/dock.icon';
 import * as undockIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/undock.icon';
 import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.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, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge, StyledSalutation, StyledComposerWrapper } 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 } from './GenAICoach.styles';
 import ActiveCases from './ActiveCases';
 import CaseWorkflow from './CaseWorkflow';
 import ConversationHistory from './ConversationHistory';
 import Questionnaire from './Questionnaire';
 import { GenAIMessage, InitialSuggestedMessage } from '.';
-registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, squareSolidIcon, sendSolidIcon, plusIcon, dockIcon, undockIcon, caretLeftIcon, caretRightIcon);
+registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, squareSolidIcon, sendSolidIcon, plusIcon, dockIcon, undockIcon, caretLeftIcon, caretRightIcon, moreAltIcon);
+const onHeightTransitionEnd = (el, callback) => {
+    const handler = (e) => {
+        if (e.propertyName !== 'height' || e.target !== el)
+            return;
+        el.removeEventListener('transitionend', handler);
+        callback();
+    };
+    el.addEventListener('transitionend', handler);
+    return () => el.removeEventListener('transitionend', handler);
+};
 const buildInitialFormAnswers = (questions = []) => Object.fromEntries(questions.map(question => [
     question.field,
     {
@@ -45,11 +56,11 @@ export const AISuggestedBadge = () => {
     const t = useI18n();
     return (_jsxs(StyledAISuggestedBadge, { container: { alignItems: 'center', gap: 0.5 }, children: [_jsx(Icon, { name: 'polaris-solid', "aria-hidden": true, size: 'font-size' }), _jsx(Text, { children: t('ai_suggestion') })] }));
 };
-const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef, onFullscreenToggle, isFullscreen, selectedCoach, actionsTestId }) => {
+const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef, onFullscreenToggle, isFullscreen, selectedCoach, actionsTestId, simplifiedAgent }) => {
     const t = useI18n();
     const fullscreenIcon = isFullscreen ? 'dock' : 'undock';
     const extraItems = [
-        ...(allowFullScreen
+        ...(allowFullScreen && !simplifiedAgent
             ? [
                 {
                     id: 'fullscreen',
@@ -76,15 +87,25 @@ const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef,
     const mergedItems = [...(actions?.items ?? []), ...extraItems];
     if (mergedItems.length === 0)
         return null;
+    if (simplifiedAgent) {
+        return (_jsx(MenuButton, { "data-testid": actionsTestId, text: t('actions'), "aria-label": selectedCoach ? t('actions_for', [selectedCoach]) : undefined, iconOnly: true, icon: 'more-alt', variant: 'simple', menu: {
+                items: mergedItems.map(({ text, onClick, ...rest }) => ({
+                    ...rest,
+                    primary: text,
+                    onClick: onClick ? (id, e) => onClick(id, e) : undefined
+                }))
+            } }));
+    }
     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, ...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, ...restProps }) => {
     const scrollTolerancePx = 2;
     const scrollThresholdPx = 50;
-    const streamBufferLh = 5;
+    const streamBufferLh = simplifiedAgent ? 15 : 5;
     const bufferExtensionLh = 2;
     const scrollThrottleMs = 50;
     const resizeThrottleMs = 33;
+    const bannerTransitionMs = 600;
     const theme = useTheme();
     const t = useI18n();
     const testIds = useTestIds(testId, getGenAICoachTestIds);
@@ -93,9 +114,16 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     const conversationRef = useRef(null);
     const genAICoachRef = useRef(null);
     const [messageEls, getMessageCbRef] = useRefMap();
+    const [showInitialScreen, setShowInitialScreen] = useState(true);
+    const prevExpandedHeightRef = useRef(0);
+    const agentInBanner = simplifiedAgent && variant.placement === 'fullpage';
+    const agentExpanded = simplifiedAgent && messages.length > 0;
     const focusInMessageListRef = useRef(false);
     const mouseTriggeredFocusRef = useRef(false);
     const isUserTriggered = useRef(false);
+    const userInitiatedSendRef = useRef(false);
+    const userInitiatedNewChatRef = useRef(false);
+    const showNextCoachSender = useRef(true);
     const lastFocusedMessageRef = useRef(null);
     const initialFocusedElementRef = useRef(null);
     const inputContainerRef = useRef(null);
@@ -444,6 +472,9 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             isCoachMessageLoading ||
             (latestMessage && isCoachMessage(latestMessage) && latestMessage.isToolConfirmation))
             return;
+        if (simplifiedAgent) {
+            userInitiatedSendRef.current = true;
+        }
         onSend({
             id: createUID(),
             message,
@@ -481,11 +512,33 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             } }));
     }, [coachOptions, selectedCoach, isPortalAgent, pagePanel?.visible]);
     const headerContent = useMemo(() => {
+        if (simplifiedAgent && showInitialScreen)
+            return null;
         return isInUtilities(variant) && variant.state === 'minimized' ? (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'h2', children: selectedCoach }), _jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(Button, { icon: true, label: t('maximize'), "aria-label": t('agent_noun', [t('maximize')]), variant: 'simple', onClick: () => {
                             variant.onStateChange('maximized');
                             isUserTriggered.current = true;
-                        }, children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, _jsxs(Flex, { container: { gap: 0.5 }, as: StyledActionsContainer, children: [activeCases && _jsx(ActiveCases, { activeCases: activeCases }), onNewChat && (_jsx(Button, { icon: true, variant: 'simple', label: t('new_chat'), "aria-label": t('new_chat'), onClick: onNewChat, children: _jsx(Icon, { name: 'plus' }) })), _jsx(HeaderActions, { actions: actions, allowFullScreen: allowFullScreen, variant: variant, isUserTriggeredRef: isUserTriggered, onFullscreenToggle: toggleFullscreen, isFullscreen: fullScreen, selectedCoach: selectedCoach, actionsTestId: testIds.actions }), variant.placement === 'dialog' && !fullScreen && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('close_chat_with_ai'), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] })] }));
-    }, [variant, coachOptions, activeCases, actions, allowFullScreen, onNewChat]);
+                        }, children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, _jsxs(Flex, { container: { gap: 0.5 }, as: StyledActionsContainer, children: [activeCases && _jsx(ActiveCases, { activeCases: activeCases }), simplifiedAgent && (_jsx(HeaderActions, { actions: actions, allowFullScreen: allowFullScreen, variant: variant, isUserTriggeredRef: isUserTriggered, onFullscreenToggle: toggleFullscreen, isFullscreen: fullScreen, selectedCoach: selectedCoach, actionsTestId: testIds.actions, simplifiedAgent: true })), onNewChat && (_jsx(Button, { icon: true, variant: 'simple', label: simplifiedAgent ? t('close') : t('new_chat'), "aria-label": simplifiedAgent ? t('close_chat_with_ai') : t('new_chat'), onClick: () => {
+                                if (simplifiedAgent && genAICoachRef.current) {
+                                    prevExpandedHeightRef.current =
+                                        genAICoachRef.current.getBoundingClientRect().height;
+                                }
+                                userInitiatedNewChatRef.current = true;
+                                if (simplifiedAgent && conversationHistory) {
+                                    conversationHistory.onDismiss();
+                                }
+                                onNewChat?.();
+                            }, children: _jsx(Icon, { name: simplifiedAgent ? 'times' : 'plus' }) })), !simplifiedAgent && (_jsx(HeaderActions, { actions: actions, allowFullScreen: allowFullScreen, variant: variant, isUserTriggeredRef: isUserTriggered, onFullscreenToggle: toggleFullscreen, isFullscreen: fullScreen, selectedCoach: selectedCoach, actionsTestId: testIds.actions })), variant.placement === 'dialog' && !fullScreen && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('close_chat_with_ai'), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] })] }));
+    }, [
+        variant,
+        coachOptions,
+        activeCases,
+        actions,
+        allowFullScreen,
+        onNewChat,
+        simplifiedAgent,
+        showInitialScreen,
+        messages.length
+    ]);
     const getMessageContainingElement = (element) => {
         if (element)
             return Array.from(messageEls.values()).find(el => el && el.contains(element));
@@ -530,6 +583,70 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                 textAreaRef.current?.focus();
         }
     }, [draftMessage, suggestionCardsView]);
+    useLayoutEffect(() => {
+        if (!agentInBanner ||
+            !genAICoachRef.current ||
+            messages.length !== 0 ||
+            (loading && conversationHistory))
+            return;
+        const el = genAICoachRef.current;
+        const currentHeight = el.getBoundingClientRect().height;
+        const storedHeight = parseFloat(el.style.getPropertyValue('--compact-height')) || 0;
+        if (storedHeight > 0 && Math.abs(currentHeight - storedHeight) > scrollTolerancePx)
+            return;
+        el.style.removeProperty('--compact-height');
+        const naturalHeight = el.getBoundingClientRect().height;
+        el.style.setProperty('--compact-height', `${naturalHeight}px`);
+    });
+    useLayoutEffect(() => {
+        if (!agentInBanner || messages.length !== 0)
+            return;
+        if (!userInitiatedNewChatRef.current || !genAICoachRef.current)
+            return;
+        userInitiatedNewChatRef.current = false;
+        const el = genAICoachRef.current;
+        const fromHeight = prevExpandedHeightRef.current;
+        const toHeight = parseFloat(el.style.getPropertyValue('--compact-height')) || 0;
+        if (!fromHeight || !toHeight)
+            return;
+        el.style.height = `${fromHeight}px`;
+        el.style.transition = 'none';
+        const removeListener = onHeightTransitionEnd(el, () => {
+            el.style.removeProperty('height');
+            prevExpandedHeightRef.current = 0;
+        });
+        const rafId = requestAnimationFrame(() => {
+            el.getBoundingClientRect();
+            el.style.removeProperty('transition');
+            el.style.height = `${toHeight}px`;
+        });
+        return () => {
+            cancelAnimationFrame(rafId);
+            removeListener();
+        };
+    }, [messages.length, agentInBanner]);
+    useEffect(() => {
+        if (!agentInBanner)
+            return;
+        if (messages.length === 0) {
+            if (!(loading && conversationHistory)) {
+                setShowInitialScreen(true);
+            }
+            userInitiatedSendRef.current = false;
+            return;
+        }
+        if (!showInitialScreen)
+            return;
+        if (!userInitiatedSendRef.current) {
+            setShowInitialScreen(false);
+            return;
+        }
+        const timer = setTimeout(() => {
+            setShowInitialScreen(false);
+            userInitiatedSendRef.current = false;
+        }, bannerTransitionMs);
+        return () => clearTimeout(timer);
+    }, [messages.length, agentInBanner, showInitialScreen]);
     useEffect(() => {
         if (isUserTriggered.current) {
             if (isInUtilities(variant) &&
@@ -719,10 +836,10 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                     if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
                         setFocused(false);
                     }
-                }, children: [questionnaireData && !questionnaireDismissed && !questionnaireData.inline && (_jsx(Questionnaire, { data: questionnaireData, onChange: handleFormChange, onCancel: handleFormCancel }, questionnaireKey)), _jsx(FormField, { label: t('message_pega_gen_ai_coach'), labelHidden: true, labelFor: composerId, info: conversationError || undefined, status: conversationError ? 'error' : undefined, children: _jsx(StyledGenAIFormControl, { focused: (!questionnaireData || questionnaireDismissed) && focused, status: conversationError ? 'error' : undefined, 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: () => {
+                }, children: [questionnaireData && !questionnaireDismissed && !questionnaireData.inline && (_jsx(Questionnaire, { data: questionnaireData, onChange: handleFormChange, onCancel: handleFormCancel }, questionnaireKey)), _jsx(FormField, { label: t('message_pega_gen_ai_coach'), labelHidden: true, labelFor: composerId, info: conversationError || undefined, status: conversationError ? 'error' : undefined, children: _jsx(StyledGenAIFormControl, { focused: (!questionnaireData || questionnaireDismissed) && focused, status: conversationError ? 'error' : undefined, children: _jsxs(Flex, { container: { direction: 'column', gap: 0.25 }, children: [_jsx(StyledGenAITextArea, { id: composerId, ref: textAreaRef, value: interimMessage ? `${message}${interimMessage}` : message, placeholder: simplifiedAgent ? t('ask_anything', [selectedCoach ?? '']) : t('write_message'), onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: () => {
                                             if (active)
                                                 stop();
-                                        }, autoResize: true }), _jsxs(Flex, { container: {
+                                        }, autoResize: true, simplified: simplifiedAgent }), _jsxs(Flex, { container: {
                                             direction: 'row',
                                             justify: 'between',
                                             gap: 1,
@@ -764,13 +881,13 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                                     return (_jsx(StyledStopGeneratingButton, { variant: 'primary', icon: true, label: t('stop'), "aria-label": t('stop'), onClick: () => {
                                                             textAreaRef.current?.focus();
                                                             onStopFn?.();
-                                                        }, children: _jsx(Icon, { name: 'square-solid' }) }));
+                                                        }, simplified: simplifiedAgent, children: _jsx(Icon, { name: 'square-solid' }) }));
                                                 }
                                                 const isLoading = latestMessage &&
                                                     isCoachMessage(latestMessage) &&
                                                     latestMessage.loading &&
                                                     !latestMessage.error;
-                                                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' }) }));
+                                                const sendButton = (_jsx(StyledSendButton, { variant: 'primary', onClick: isCreatingConversation ? undefined : handleSendMessage, icon: true, label: t('send'), "aria-label": t('send_message'), simplified: simplifiedAgent, children: _jsx(Icon, { name: 'send-solid' }) }));
                                                 if (isLoading) {
                                                     if (isCreatingConversation) {
                                                         return sendButton;
@@ -787,15 +904,22 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     const isCompact = variant.placement === 'fullpage' &&
         !fullScreen &&
         !isInLandingPageUtilities &&
-        messages.length === 0;
+        messages.length === 0 &&
+        !(simplifiedAgent && loading && conversationHistory);
     const fullPageAndInitialScreen = (fullScreen || (variant.placement === 'fullpage' && !isInLandingPageUtilities)) &&
         messages.length === 0;
-    const renderTextArea = fullPageAndInitialScreen ? null : genAIFooter;
-    const GenAICoachElement = (_jsx(_Fragment, { children: ((isInUtilities(variant) && variant.state !== 'minimized') || !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledFlexWrapper, children: [caseWorkflow && _jsx(CaseWorkflow, { ...caseWorkflow }), _jsx(Flex, { as: StyledMessagesContainer, ref: setMessageContainerRef, withSuggestionCards: !loading && !error && messages.length === 0 && !!suggestionCardsView, container: loading || error
+    const renderTextArea = agentInBanner || !fullPageAndInitialScreen ? genAIFooter : null;
+    const GenAICoachElement = (_jsx(_Fragment, { children: ((isInUtilities(variant) && variant.state !== 'minimized') || !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledFlexWrapper, isExpanded: agentInBanner && agentExpanded, children: [caseWorkflow && _jsx(CaseWorkflow, { ...caseWorkflow }), _jsx(Flex, { as: StyledMessagesContainer, ref: setMessageContainerRef, withSuggestionCards: !loading && !error && messages.length === 0 && !!suggestionCardsView, container: loading || error
                         ? { direction: 'column', pad: [0, 2], justify: 'center' }
                         : { direction: 'column', pad: [0, 2] }, ...(!loading && !error && messages.length === 0 && suggestionCardsView
                         ? {}
-                        : { item: { grow: 1 } }), onScroll: updateScrollStateOnScrollEvent, children: loading || error ? (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, children: loading ? (_jsx(Progress, { variant: 'ring', placement: 'block', message: typeof loading === 'string' ? loading : t('loading') })) : (_jsx(ErrorState, { message: error })) })) : (_jsx(_Fragment, { children: messages.length === 0 ? (_jsxs(Flex, { as: StyledInitialMessageContainer, container: {
+                        : { item: { grow: 1 } }), onScroll: updateScrollStateOnScrollEvent, children: loading || error ? (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, children: loading ? (_jsx(ThemeOverride, { theme: {
+                                base: {
+                                    palette: {
+                                        'primary-background': theme.components.agent.background
+                                    }
+                                }
+                            }, children: _jsx(Progress, { variant: 'ring', placement: 'block', message: typeof loading === 'string' ? loading : t('loading') }) })) : (_jsx(ErrorState, { message: error })) })) : (_jsx(_Fragment, { children: (agentInBanner ? showInitialScreen : messages.length === 0) ? (_jsxs(Flex, { as: StyledInitialMessageContainer, container: {
                                 justify: suggestionCardsView ? undefined : 'center',
                                 direction: 'column',
                                 alignItems: 'center',
@@ -806,9 +930,9 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                     showSalutation && (_jsxs(Flex, { container: {
                                         direction: 'column',
                                         alignItems: 'center',
-                                        gap: 2,
-                                        pad: [0, 2]
-                                    }, children: [_jsx(AgentIcon, {}), _jsx(Text, { variant: 'h3', as: StyledSalutation, children: salutation ?? t('welcome_text') })] })), initialSuggestedMessages && initialSuggestedMessages.length > 0 && (_jsx(Grid, { as: StyledInitialMessageGrid, container: { cols: getGridColumns(), gap: 1.5 }, children: initialSuggestedMessages.map(initialSuggestedMessage => (_jsx(InitialSuggestedMessage, { ...initialSuggestedMessage, onSend: initialMessage => {
+                                        gap: simplifiedAgent ? 2.5 : 2,
+                                        pad: simplifiedAgent ? [0, 2, 1, 2] : [0, 2]
+                                    }, as: simplifiedAgent ? StyledBannerSalutationBlock : undefined, isExpanded: agentExpanded, children: [!simplifiedAgent && _jsx(AgentIcon, {}), _jsx(StyledSalutation, { variant: simplifiedAgent ? 'h1' : 'h3', simplified: simplifiedAgent, children: salutation ?? t('welcome_text') }), simplifiedAgent && (_jsx(StyledSubHeading, { variant: 'primary', as: 'p', children: subHeading ?? t('what_can_i_help_you_with') }))] })), initialSuggestedMessages && initialSuggestedMessages.length > 0 && (_jsx(Grid, { as: StyledInitialMessageGrid, container: { cols: getGridColumns(), gap: 1.5 }, children: initialSuggestedMessages.map(initialSuggestedMessage => (_jsx(InitialSuggestedMessage, { ...initialSuggestedMessage, onSend: initialMessage => {
                                             if (guidedMode) {
                                                 onSend({
                                                     id: initialMessage.id,
@@ -820,7 +944,11 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                             }
                                             isUserTriggered.current = true;
                                             textAreaRef.current?.focus();
-                                        }, testId: initialSuggestedMessage.id }))) })), fullPageAndInitialScreen && !guidedMode && !suggestionCardsView && genAIFooter] })) : (_jsx(Flex, { as: StyledMessagesList, ref: conversationRef, "aria-label": `${t('conversation')} ${t('view')}`, container: { direction: 'column' }, onMouseDown: (e) => {
+                                        }, testId: initialSuggestedMessage.id }))) })), fullPageAndInitialScreen &&
+                                    !guidedMode &&
+                                    !suggestionCardsView &&
+                                    !agentInBanner &&
+                                    genAIFooter] })) : (_jsx(Flex, { as: StyledMessagesList, ref: conversationRef, simplified: simplifiedAgent, "aria-label": `${t('conversation')} ${t('view')}`, container: { direction: 'column' }, onMouseDown: (e) => {
                                 mouseTriggeredFocusRef.current = true;
                                 const target = e.target instanceof Element ? e.target : null;
                                 const clickedMessage = getMessageContainingElement(target);
@@ -912,11 +1040,13 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                     }
                                 }
                             }, children: messages.map(item => {
-                                const messageProps = isCoachMessage(item)
-                                    ? {
+                                let messageProps;
+                                if (isCoachMessage(item)) {
+                                    messageProps = {
                                         ...item,
                                         suggestions: latestMessage?.id === item.id ? item.suggestions : undefined,
                                         onSend,
+                                        showSenderInfo: simplifiedAgent ? showNextCoachSender.current : undefined,
                                         onSubmit: item.isToolConfirmation
                                             ? (tools) => {
                                                 onSend({
@@ -926,13 +1056,21 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                                 });
                                             }
                                             : undefined
-                                    }
-                                    : item;
+                                    };
+                                    showNextCoachSender.current = false;
+                                }
+                                else if (isUserMessage(item) && simplifiedAgent) {
+                                    showNextCoachSender.current = true;
+                                    messageProps = { ...item, userName: operatorName };
+                                }
+                                else {
+                                    messageProps = item;
+                                }
                                 return (_jsx(GenAIMessage, { ...messageProps, ref: getMessageCbRef(item.id), testId: item.id, announceInteraction: !focusInMessageListRef.current, onAnimationCursorUpdate: animatedTillCursor => {
                                         if (isCoachMessage(item)) {
                                             setAnimationInitialCursorPos(animatedTillCursor);
                                         }
-                                    }, ...(prevFullScreen !== fullScreen ? { animationInitialCursorPos } : {}) }));
+                                    }, simplifiedAgent: simplifiedAgent, ...(prevFullScreen !== fullScreen ? { animationInitialCursorPos } : {}) }));
                             }) })) })) }), showScrollToBottom && (_jsx(StyledScrollButton, { ref: scrollButtonRef, icon: true, onClick: handleScrollToBottomClick, ariaLabel: t('scroll_to_latest_message'), onKeyDown: focusLastMessageLi, children: _jsx(Icon, { name: 'caret-down' }) })), !loading && messages.length === 0 && suggestionCardsView ? (_jsxs(_Fragment, { children: [((isInUtilities(variant) && variant.state !== 'minimized') ||
                             !isInUtilities(variant)) &&
                             !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, { ref: setSuggestionCardsViewRef, children: suggestionCardsView }) })] })) : (((isInUtilities(variant) && variant.state !== 'minimized') ||
@@ -1002,7 +1140,11 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             focusTextArea.current = true;
             conversationHistory.onDismiss();
         }, inFullPage: !condition, ref: historyViewRef }));
-    return (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, fullScreen: fullScreen, isCompact: isCompact, isPortalAgent: isPortalAgent, ref: genAICoachRef, children: [_jsx(Flex, { container: { justify: 'between', alignItems: 'center', pad: [1.5, 2, 0.5] }, children: headerContent }), condition ? (_jsx(_Fragment, { children: conversationHistory ? historyView : GenAICoachElement })) : (_jsxs(Grid, { container: { gap: 0.5, cols: '2fr 3fr' }, as: StyledGridContainer, conversationHistory: !!conversationHistory, children: [historyView, GenAICoachElement] })), lightboxPreviewProps && _jsx(Lightbox, { ...lightboxPreviewProps })] }));
+    return (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, fullScreen: fullScreen, isCompact: isCompact, isPortalAgent: isPortalAgent, simplifiedAgent: simplifiedAgent, ref: genAICoachRef, children: [_jsx(Flex, { as: agentExpanded ? StyledHeaderContainer : undefined, container: {
+                    justify: 'between',
+                    alignItems: 'center',
+                    pad: simplifiedAgent ? [0, 2, 0.5] : [1.5, 2, 0.5]
+                }, children: headerContent }), condition ? (_jsx(_Fragment, { children: conversationHistory ? historyView : GenAICoachElement })) : (_jsxs(Grid, { container: { gap: 0.5, cols: '2fr 3fr' }, as: StyledGridContainer, conversationHistory: !!conversationHistory, children: [historyView, GenAICoachElement] })), lightboxPreviewProps && _jsx(Lightbox, { ...lightboxPreviewProps })] }));
 };
 const GenAICoach = (props) => (_jsx(Toaster, { children: _jsx(StyledFullscreenWrapper, { children: _jsx(GenAICoachContent, { ...props }) }) }));
 export default withTestIds(GenAICoach, getGenAICoachTestIds);