@pega/cosmos-react-work 8.9.5 → 8.11.0

package/lib/components/GenAICoach/GenAICoach.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Flex, Icon, MenuButton, Progress, Text, createUID, menuHelpers, useI18n, useTestIds, useTheme, withTestIds, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, useArrows, focusableSelector, useLiveLog, useOuterEvent, ThemeOverride, hasProp, getActiveElement, useElement, Actions, useBreakpoint, Grid, useRefMap, VisuallyHiddenText, FileList, Lightbox, useUID, FormField } 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, focusableSelector, useLiveLog, useOuterEvent, ThemeOverride, hasProp, getActiveElement, useElement, Actions, useBreakpoint, Grid, useRefMap, VisuallyHiddenText, FileList, Lightbox, FullscreenButton, FormField, Fullscreen, useUID, SpeechToTextButton, Toaster, useToaster } 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';
@@ -9,12 +9,13 @@ import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/i
 import * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';
 import * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';
 import * as chatTypingIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-typing.icon';
+import * as sendSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/send-solid.icon';
 import { getGenAICoachTestIds } from './GenAICoach.test-ids';
 import { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
-import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledGenAIFormControl, StyledGenAITextArea, StyledSendButton, StyledGenAIFooter, StyledActionsContainer, StyledAgentIcon } from './GenAICoach.styles';
+import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledActionsContainer, StyledGenAIFooter, StyledAgentIcon } from './GenAICoach.styles';
 import ConversationHistory from './ConversationHistory';
 import { GenAIMessage, InitialSuggestedMessage } from '.';
-registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, chatTypingIcon);
+registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, chatTypingIcon, sendSolidIcon);
 export const AgentIcon = () => {
     const uid = useUID();
     const idA = `agent-gradient-a-${uid}`;
@@ -22,16 +23,16 @@ export const AgentIcon = () => {
     const idC = `agent-clip-${uid}`;
     return (_jsxs(StyledAgentIcon, { xmlns: 'http://www.w3.org/2000/svg', filter: 'drop-shadow(0 .125rem .125rem rgba(0,0,0,.03)) drop-shadow(.125rem .5rem .5rem rgba(0,0,0,.05)) drop-shadow(.125rem 1rem 1rem rgba(0,0,0,.08))', viewBox: '0 0 60 60', children: [_jsxs("linearGradient", { id: idA, x1: '30.586', x2: '3.059', y1: '58.111', y2: '30.584', gradientUnits: 'userSpaceOnUse', children: [_jsx("stop", { offset: '.115', stopColor: '#681fc3' }), _jsx("stop", { offset: '.418', stopColor: '#9795f3' }), _jsx("stop", { offset: '.591', stopColor: '#b3d2ff' }), _jsx("stop", { offset: '.966', stopColor: '#a467f0' })] }), _jsxs("linearGradient", { id: idB, x1: '7.137', x2: '29.565', y1: '0', y2: '60.151', gradientUnits: 'userSpaceOnUse', children: [_jsx("stop", { offset: '.457', stopColor: '#8165d2', stopOpacity: '0' }), _jsx("stop", { offset: '.524', stopColor: '#280096', stopOpacity: '.4' })] }), _jsx("clipPath", { id: idC, children: _jsx("path", { d: 'M0 0h60v60H0z' }) }), _jsxs("g", { fillRule: 'evenodd', clipPath: `url(#${idC})`, clipRule: 'evenodd', children: [_jsx("path", { fill: `url(#${idA})`, d: 'M60 30.002c-9.023.937-16.054 3.632-20.86 8.203C33.633 43.242 30.586 50.508 30 60c-1.173-9.61-4.453-16.875-9.727-21.914C15.35 33.516 8.555 30.82 0 30c9.023-.703 16.054-3.515 21.093-8.438C26.132 16.523 29.063 9.376 29.999 0c.704 10.43 4.102 18.164 10.313 23.202C45.352 27.186 51.914 29.413 60 30zm-3.75-18.75c-2.228.235-3.984.936-5.391 2.226-1.289 1.289-1.992 3.047-2.109 5.274-.235-2.227-.937-3.983-2.108-5.155-1.289-1.288-3.048-2.109-5.391-2.344 2.227-.116 3.867-.82 5.156-1.991 1.288-1.289 2.108-3.164 2.343-5.508.117 2.46.937 4.336 2.344 5.508 1.288 1.171 2.93 1.875 5.156 1.991zM18.75 48.75c-2.345.236-4.103.937-5.392 2.227-1.288 1.172-1.992 2.93-2.108 5.274-.235-2.46-1.055-4.218-2.46-5.507-1.056-1.055-2.812-1.758-5.04-1.992 1.993-.116 3.633-.703 4.804-1.758 1.524-1.172 2.46-3.047 2.696-5.743.116 1.992.703 3.751 1.875 5.156 1.172 1.288 3.047 2.108 5.626 2.344z' }), _jsx("path", { fill: `url(#${idB})`, d: 'M60 30.002c-9.023.937-16.054 3.632-20.86 8.203C33.633 43.242 30.586 50.508 30 60c-1.173-9.61-4.453-16.875-9.727-21.914C15.35 33.516 8.555 30.82 0 30c9.023-.703 16.054-3.515 21.093-8.438C26.132 16.523 29.063 9.376 29.999 0c.704 10.43 4.102 18.164 10.313 23.202C45.352 27.186 51.914 29.413 60 30zm-3.75-18.75c-2.228.235-3.984.936-5.391 2.226-1.289 1.289-1.992 3.047-2.109 5.274-.235-2.227-.937-3.983-2.108-5.155-1.289-1.288-3.048-2.109-5.391-2.344 2.227-.116 3.867-.82 5.156-1.991 1.288-1.289 2.108-3.164 2.343-5.508.117 2.46.937 4.336 2.344 5.508 1.288 1.171 2.93 1.875 5.156 1.991zM18.75 48.75c-2.345.236-4.103.937-5.392 2.227-1.288 1.172-1.992 2.93-2.108 5.274-.235-2.46-1.055-4.218-2.46-5.507-1.056-1.055-2.812-1.758-5.04-1.992 1.993-.116 3.633-.703 4.804-1.758 1.524-1.172 2.46-3.047 2.696-5.743.116 1.992.703 3.751 1.875 5.156 1.172 1.288 3.047 2.108 5.626 2.344z' })] })] }));
 };
-const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, showSalutation = true, salutation, ...restProps }) => {
+const VOICE_ERROR_DISMISS_DURATION = 3000;
+const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, showSalutation = true, salutation, allowFullScreen = true, isInLandingPageUtilities, voiceToTextProps, ...restProps }) => {
     const theme = useTheme();
     const t = useI18n();
+    const testIds = useTestIds(testId, getGenAICoachTestIds);
+    const { announcePolite } = useLiveLog();
     const elementRef = useRef(null);
     const conversationRef = useRef(null);
     const genAICoachRef = useRef(null);
     const [messageEls, getMessageCbRef] = useRefMap();
-    const isSmallOrAbove = useBreakpoint('sm', {
-        breakpointRef: genAICoachRef
-    });
     const focusInMessageListRef = useRef(false);
     const isUserTriggered = useRef(false);
     const lastFocusedMessageRef = useRef(null);
@@ -44,19 +45,26 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
     const historyViewRef = useRef(null);
     const fileUploadInputRef = useRef(null);
     const attachmentsAdded = useRef(false);
+    const pendingResult = useRef(false);
+    const isSmallOrAbove = useBreakpoint('sm', {
+        breakpointRef: genAICoachRef
+    });
     const [message, setMessage] = useState('');
+    const [interimMessage, setInterimMessage] = useState('');
     const [coachOptions, setCoachOptions] = useState(coachOptionsProps);
     const [arrowKey, setArrowKey] = useState(null);
     const [isComposerFocused, setIsComposerFocused] = useState(false);
+    const [animationInitialCursorPos, setAnimationInitialCursorPos] = useState(0);
+    const [fullScreen, setFullScreen] = useState(false);
+    const prevFullScreen = usePrevious(fullScreen);
     const previousMessages = usePrevious(messages);
-    const testIds = useTestIds(testId, getGenAICoachTestIds);
-    const { announcePolite } = useLiveLog();
     const composerId = useUID();
     const latestMessage = messages.at(-1);
-    const condition = variant.placement === 'dialog' ||
-        variant.placement === 'utilities' ||
-        (variant.placement === 'fullpage' && !isSmallOrAbove) ||
-        !conversationHistory;
+    const condition = !(fullScreen && conversationHistory) &&
+        (variant.placement === 'dialog' ||
+            variant.placement === 'utilities' ||
+            (variant.placement === 'fullpage' && !isSmallOrAbove) ||
+            !conversationHistory);
     const onCoachChange = (id) => {
         setCoachOptions(cur => {
             return cur.map(coach => {
@@ -79,6 +87,24 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
             return coachOptions[0].primary;
         }
     }, [coachOptions]);
+    const onResult = useCallback(value => {
+        pendingResult.current = false;
+        setMessage(prevMessage => {
+            return prevMessage ? `${prevMessage} ${value}` : value;
+        });
+        setInterimMessage('');
+    }, []);
+    const onInterimResult = useCallback(value => {
+        if (value) {
+            pendingResult.current = true;
+            setInterimMessage(message ? ` ${value}` : value);
+        }
+    }, [message]);
+    const { supported, active, start, stop, error: voiceToTextError } = useSpeechRecognition({
+        onResult,
+        onInterimResult,
+        langCode: voiceToTextProps?.langCode
+    });
     const handleSendMessage = useCallback(() => {
         const isMessageAndAttachmentsEmpty = !message && (!attachments || attachments.length === 0);
         const hasAttachmentsError = attachments &&
@@ -94,6 +120,9 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
             attachmentIds: attachments?.map(({ id }) => id)
         });
         setMessage('');
+        if (active) {
+            stop();
+        }
     }, [[message, latestMessage, attachments, attachmentsError]]);
     const handleEnterKeyDown = (e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
@@ -110,22 +139,22 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
             return null;
         }
         if (coachOptions.length === 1) {
-            return (_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid', color: theme.base.palette.ai }), _jsx(Text, { variant: 'h3', children: selectedCoach })] }));
+            return _jsx(Text, { variant: 'h2', children: selectedCoach });
         }
-        return (_jsx(MenuButton, { text: selectedCoach, "aria-label": t('agent_switcher', [selectedCoach]), variant: 'text', as: StyledGenAIOptionsMenu, icon: 'polaris-solid', menu: {
+        return (_jsx(MenuButton, { text: selectedCoach, "aria-label": t('agent_switcher', [selectedCoach]), variant: 'text', as: StyledGenAIOptionsMenu, menu: {
                 mode: 'single-select',
                 items: coachOptions,
                 onItemClick: onCoachChange
             } }));
     }, [coachOptions, selectedCoach]);
     const headerContent = useMemo(() => {
-        return isInUtilities(variant) && variant.state === 'minimized' ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid', color: theme.base.palette.ai }), _jsx(Text, { variant: 'h3', 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: () => {
+        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: true, as: StyledActionsContainer, children: [isInUtilities(variant) && (_jsx(Button, { icon: true, label: t('minimize'), "aria-label": t('agent_noun', [t('minimize')]), variant: 'simple', onClick: () => {
                                 variant.onStateChange('minimized');
                                 isUserTriggered.current = true;
-                            }, children: _jsx(Icon, { name: 'minus' }) })), actions && (_jsx(Actions, { "data-testid": testIds.actions, contextualLabel: selectedCoach, ...actions })), variant.placement === 'dialog' && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('agent_noun', [t('close')]), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] })] }));
+                            }, children: _jsx(Icon, { name: 'minus' }) })), allowFullScreen && _jsx(FullscreenButton, { onClick: () => setFullScreen(prev => !prev) }), actions && (_jsx(Actions, { "data-testid": testIds.actions, contextualLabel: selectedCoach, ...actions })), variant.placement === 'dialog' && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('agent_noun', [t('close')]), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] })] }));
     }, [variant, coachOptions]);
     const getMessageContainingElement = (element) => {
         if (element)
@@ -242,14 +271,37 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
         setArrowKey(null);
         focusInMessageListRef.current = false;
     });
+    const { push } = useToaster();
+    const onSpeechToTextButtonClick = useCallback(() => {
+        if (active) {
+            stop();
+        }
+        else {
+            start();
+        }
+    }, [active, stop, start]);
     const onFileChange = (e) => {
         if (e.target.files) {
             const newFiles = Array.from(e.target.files);
             onAddAttachment?.(newFiles);
         }
     };
-    const genAIFooter = (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAIFooter, children: [_jsx(FormField, { label: t('message_pega_gen_ai_coach'), labelHidden: true, labelFor: composerId, children: _jsx(StyledGenAIFormControl, { focused: isComposerFocused, children: _jsxs(Flex, { container: { direction: 'column', gap: 0.25 }, children: [_jsx(StyledGenAITextArea, { id: composerId, ref: textAreaRef, value: message, placeholder: t('write_message'), onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: () => {
+    const getGridColumns = () => {
+        const multiCol = 'repeat(auto-fit, minmax(calc(100% / 4 - 1rem), 1fr))';
+        const singleCol = '1fr';
+        if (!isSmallOrAbove && !fullScreen)
+            return singleCol;
+        return multiCol;
+    };
+    useEffect(() => {
+        if (voiceToTextError) {
+            push({ content: voiceToTextError });
+        }
+    }, [voiceToTextError]);
+    const genAIFooter = (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAIFooter, children: [_jsx(FormField, { label: t('message_pega_gen_ai_coach'), labelHidden: true, labelFor: composerId, children: _jsx(StyledGenAIFormControl, { focused: isComposerFocused, 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: () => {
                                     setIsComposerFocused(true);
+                                    if (active)
+                                        stop();
                                 }, onBlur: () => {
                                     setIsComposerFocused(false);
                                 }, autoResize: true }), _jsxs(Flex, { container: {
@@ -262,40 +314,53 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                                                     onItemClick: id => {
                                                         const selected = menuHelpers.getItem(suggestions, id);
                                                         if (selected) {
-                                                            onSend({
-                                                                id: selected.id,
-                                                                message: selected.primary
-                                                            });
+                                                            setMessage(selected.primary);
+                                                            textAreaRef.current?.focus();
                                                         }
                                                     }
-                                                }, showArrow: false })), onAddAttachment && (_jsxs(_Fragment, { children: [_jsx(Button, { icon: true, onClick: () => {
+                                                }, showArrow: false })), voiceToTextProps?.enableDictation && supported && (_jsx(SpeechToTextButton, { active: active, onClick: onSpeechToTextButtonClick })), onAddAttachment && (_jsxs(_Fragment, { children: [_jsx(Button, { icon: true, onClick: () => {
                                                             if (fileUploadInputRef.current) {
                                                                 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 })] }))] }), latestMessage && isCoachMessage(latestMessage) && latestMessage.loading ? (_jsxs(Flex, { container: {
+                                                        }, 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 })] }))] }), (latestMessage && isCoachMessage(latestMessage) && latestMessage.loading) ||
+                                        (active && pendingResult.current) ? (_jsxs(Flex, { container: {
                                             gap: 1,
                                             justify: 'end',
                                             alignItems: 'center',
                                             pad: 1
-                                        }, children: [t('generating_response'), _jsx(Progress, { placement: 'inline' })] })) : (_jsx(StyledSendButton, { variant: 'primary', onClick: handleSendMessage, icon: true, label: t('send'), "aria-label": t('send_message'), children: _jsx(Icon, { name: 'send-solid' }) }))] })] }) }) }), 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') }) })] }));
+                                        }, children: [active && pendingResult.current
+                                                ? t('processing_speech')
+                                                : t('generating_response'), _jsx(Progress, { placement: 'inline' })] })) : (_jsx(StyledSendButton, { variant: 'primary', onClick: handleSendMessage, icon: true, label: t('send'), "aria-label": t('send_message'), children: _jsx(Icon, { name: 'send-solid' }) }))] })] }) }) }), 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') }) })] }));
+    const isCompact = variant.placement === 'fullpage' &&
+        !fullScreen &&
+        !isInLandingPageUtilities &&
+        messages.length === 0;
+    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: [_jsx(Flex, { as: StyledMessagesContainer, ref: messageContainerRef, container: loading || error
                         ? { direction: 'column', pad: [0, 2], justify: 'center' }
                         : { direction: 'column', pad: [0, 2] }, item: { grow: 1 }, 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: {
-                                justify: 'center',
+                                justify: isCompact ? 'start' : 'center',
                                 direction: 'column',
-                                gap: 8
+                                alignItems: 'center',
+                                gap: 2
                             }, item: { grow: 1 }, children: [((isInUtilities(variant) && variant.state === 'maximized') ||
                                     !isInUtilities(variant)) &&
-                                    showSalutation && (_jsxs(Flex, { container: {
-                                        direction: 'column',
-                                        alignItems: 'center',
-                                        justify: 'center',
-                                        gap: 1
-                                    }, children: [_jsx(AgentIcon, {}), _jsx(Text, { variant: 'h3', children: salutation ?? t('welcome_text') })] })), _jsx(Flex, { container: { direction: 'column', gap: 1.5, alignItems: 'center' }, children: initialSuggestedMessages?.map(initialSuggestedMessage => (_jsx(InitialSuggestedMessage, { ...initialSuggestedMessage, onSend: initialMessage => {
-                                            onSend(initialMessage);
+                                    showSalutation && (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(AgentIcon, {}), _jsx(Text, { variant: 'h3', children: salutation ?? t('welcome_text') })] })), _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,
+                                                    message: initialMessage.message
+                                                });
+                                            }
+                                            else {
+                                                setMessage(initialMessage.message);
+                                            }
                                             isUserTriggered.current = true;
-                                        }, testId: initialSuggestedMessage.id }))) })] })) : (_jsx(Flex, { as: StyledMessagesList, ref: conversationRef, "aria-label": `${t('conversation')} ${t('view')}`, container: { direction: 'column' }, onFocus: () => {
+                                            textAreaRef.current?.focus();
+                                        }, testId: initialSuggestedMessage.id }))) }), fullPageAndInitialScreen && !guidedMode && genAIFooter] })) : (_jsx(Flex, { as: StyledMessagesList, ref: conversationRef, "aria-label": `${t('conversation')} ${t('view')}`, container: { direction: 'column' }, onFocus: () => {
                                 if (!focusInMessageListRef.current) {
                                     if (lastFocusedMessageRef.current) {
                                         lastFocusedMessageRef.current.focus();
@@ -375,7 +440,11 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                                         onSend
                                     }
                                     : item;
-                                return (_jsx(GenAIMessage, { ...messageProps, ref: getMessageCbRef(item.id), testId: item.id, announceInteraction: !focusInMessageListRef.current }));
+                                return (_jsx(GenAIMessage, { ...messageProps, ref: getMessageCbRef(item.id), testId: item.id, announceInteraction: !focusInMessageListRef.current, onAnimationCursorUpdate: animatedTillCursor => {
+                                        if (isCoachMessage(item)) {
+                                            setAnimationInitialCursorPos(animatedTillCursor);
+                                        }
+                                    }, ...(prevFullScreen !== fullScreen ? { animationInitialCursorPos } : {}) }));
                             }) })) })) }), ((isInUtilities(variant) && variant.state !== 'minimized') || !isInUtilities(variant)) &&
                     !loading && (_jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, children: _jsx(StyledComposerSection, { children: guidedMode ? (_jsx(_Fragment, { children: suggestions && messages.length > 0 && (_jsxs(_Fragment, { children: [latestMessage &&
                                         isCoachMessage(latestMessage) &&
@@ -396,13 +465,14 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                                                 items: suggestions,
                                                 onItemClick: id => {
                                                     const selected = menuHelpers.getItem(suggestions, id);
-                                                    if (selected)
+                                                    if (selected) {
                                                         onSend({
                                                             id: selected.id,
                                                             message: selected.primary
                                                         });
+                                                    }
                                                 }
-                                            } }) })), _jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledDisclaimerText, { inFullPage: !condition, children: t('ai_disclaimer') }) })] })) })) : (genAIFooter) }) }))] })) }));
+                                            } }) })), _jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledDisclaimerText, { inFullPage: !condition, children: t('ai_disclaimer') }) })] })) })) : (renderTextArea) }) }))] })) }));
     useEffect(() => {
         if (focusTextArea.current && !conversationHistory && textAreaRef.current) {
             textAreaRef.current.focus();
@@ -438,7 +508,7 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
             focusTextArea.current = true;
             conversationHistory.onDismiss();
         }, inFullPage: !condition, ref: historyViewRef }));
-    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, ref: genAICoachRef, ...restProps, 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 (_jsx(Toaster, { dismissAfter: VOICE_ERROR_DISMISS_DURATION, children: _jsx(Fullscreen, { children: _jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, fullScreen: fullScreen, isCompact: isCompact, ref: genAICoachRef, ...restProps, 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 })] }) }) }));
 };
 export default withTestIds(GenAICoach, getGenAICoachTestIds);
 //# sourceMappingURL=GenAICoach.js.map