@pega/cosmos-react-work 8.0.0-build.4.4 → 8.0.0-build.40.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, TextArea, createUID, menuHelpers, useI18n, useTestIds, useTheme, withTestIds, Card, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, Tooltip, useElement, useArrows, focusableSelector, useLiveLog, useOuterEvent, Configuration, hasProp } from '@pega/cosmos-react-core';
+import { Button, Flex, Icon, MenuButton, Progress, Text, TextArea, createUID, menuHelpers, useI18n, useTestIds, useTheme, withTestIds, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, useArrows, focusableSelector, useLiveLog, useOuterEvent, ThemeOverride, hasProp, getActiveElement, useElement, Actions, useBreakpoint, Grid } 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';
@@ -8,22 +8,29 @@ import * as minusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mi
 import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
 import { getGenAICoachTestIds } from './GenAICoach.test-ids';
 import { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
-import { StyledChatButton, StyledCloseButton, StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledStarterMessage, StyledSuggestions, StyledStarterMessageCard, StyledMessagesList } from './GenAICoach.styles';
+import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper } from './GenAICoach.styles';
+import ConversationHistory from './ConversationHistory';
 import { GenAIMessage, InitialSuggestedMessage } from '.';
 registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon);
-const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, starterMessage, variant, onOpen, guidedMode = false, ...restProps }) => {
+const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, conversationHistory, onLayoutChange, ...restProps }) => {
     const theme = useTheme();
     const t = useI18n();
     const elementRef = useRef(null);
     const conversationRef = useRef(null);
     const genAICoachRef = useRef(null);
-    const [starterMessageElement, setStarterMessageElement] = useElement(null);
+    const isSmallOrAbove = useBreakpoint('sm', {
+        breakpointRef: genAICoachRef
+    });
     const focusInMessageListRef = useRef(false);
     const isUserTriggered = useRef(false);
     const lastFocusedMessageRef = useRef(null);
     const initialFocusedElementRef = useRef(null);
     const messageContainerRef = useRef(null);
     const textAreaRef = useRef(null);
+    const [suggestionMenuButton, setSuggestionMenuButton] = useElement(null);
+    const isGeneratingResponse = useRef(false);
+    const focusTextArea = useRef(false);
+    const historyViewRef = useRef(null);
     const [message, setMessage] = useState('');
     const [coachOptions, setCoachOptions] = useState(coachOptionsProps);
     const [arrowKey, setArrowKey] = useState(null);
@@ -31,6 +38,10 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
     const testIds = useTestIds(testId, getGenAICoachTestIds);
     const { announcePolite } = useLiveLog();
     const latestMessage = messages.at(-1);
+    const condition = variant.placement === 'dialog' ||
+        variant.placement === 'utilities' ||
+        (variant.placement === 'fullpage' && !isSmallOrAbove) ||
+        !conversationHistory;
     const onCoachChange = (id) => {
         setCoachOptions(cur => {
             return cur.map(coach => {
@@ -76,20 +87,20 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
         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(MenuButton, { text: selectedCoach, variant: 'text', as: StyledGenAIOptionsMenu, icon: 'polaris-solid', menu: {
+        return (_jsx(MenuButton, { text: selectedCoach, "aria-label": t('agent_switcher', [selectedCoach]), variant: 'text', as: StyledGenAIOptionsMenu, icon: 'polaris-solid', menu: {
                 mode: 'single-select',
                 items: coachOptions,
                 onItemClick: onCoachChange
             } }));
     }, [coachOptions, selectedCoach]);
     const headerContent = useMemo(() => {
-        return isInUtilities(variant) && variant.state === 'docked' ? (_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('maximize_gen_ai', [t('coach', ['Pega Gen AI'])]), variant: 'simple', onClick: () => {
+        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: () => {
                             variant.onStateChange('maximized');
                             isUserTriggered.current = true;
-                        }, children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, isInUtilities(variant) && (_jsx(Button, { icon: true, label: t('minimize'), "aria-label": t('minimize_gen_ai', [t('coach', ['Pega Gen AI'])]), variant: 'simple', onClick: () => {
-                        variant.onStateChange('docked');
-                        isUserTriggered.current = true;
-                    }, children: _jsx(Icon, { name: 'minus' }) })), variant.placement === 'dialog' && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('close_gen_ai', [t('coach', ['Pega Gen AI'])]), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] }));
+                        }, children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, _jsxs(Flex, { container: true, 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' }) }))] })] }));
     }, [variant, coachOptions]);
     const setLastFocusableElement = () => {
         focusInMessageListRef.current = false;
@@ -116,7 +127,7 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
         }
         if (isUserTriggered.current) {
             if (isInUtilities(variant) &&
-                (variant.state === 'docked' || (guidedMode && variant.state === 'maximized')) &&
+                (variant.state === 'minimized' || (guidedMode && variant.state === 'maximized')) &&
                 getFocusables(genAICoachRef).length > 0) {
                 getFocusables(genAICoachRef)[0].focus();
                 isUserTriggered.current = false;
@@ -128,6 +139,9 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
             }
         }
     }, [variantState, variant.placement]);
+    useEffect(() => {
+        onLayoutChange?.(!condition);
+    }, [condition]);
     useEffect(() => {
         onOpen?.();
         window.addEventListener('resize', onResize);
@@ -136,9 +150,6 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
         };
     }, []);
     useEffect(() => {
-        if (isInUtilities(variant) && variant.state !== 'maximized' && messages.length > 0) {
-            variant.onStateChange('maximized');
-        }
         const prevFilteredMsgs = previousMessages?.filter(item => !hasProp(item, 'loading')) ?? [];
         const currentFilteredMsgs = messages?.filter(item => !hasProp(item, 'loading')) ?? [];
         if (prevFilteredMsgs.length < currentFilteredMsgs.length ||
@@ -156,13 +167,22 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                 setArrowKey(null);
             }
             else if (latestMessage?.loading) {
-                announcePolite({ message: t('generating_response') });
+                isGeneratingResponse.current = true;
             }
             else {
-                announcePolite({ message: t('coach', [`${t('new_message')} ${t('from')}`]) });
+                announcePolite({ message: t('agent_noun', [`${t('new_message')} ${t('from')}`]) });
             }
         }
     }, [messages]);
+    useEffect(() => {
+        if (suggestionMenuButton && isGeneratingResponse.current) {
+            announcePolite({ message: t('response_generated') });
+            isGeneratingResponse.current = false;
+            const activeElement = getActiveElement();
+            if (activeElement && activeElement === document.body)
+                suggestionMenuButton.focus();
+        }
+    }, [suggestionMenuButton]);
     /** Supports arrow key behaviors */
     useEffect(() => {
         const focusables = getFocusables(elementRef);
@@ -191,56 +211,67 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
         setArrowKey(null);
         focusInMessageListRef.current = false;
     });
-    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, starterMessage: starterMessage, ref: genAICoachRef, ...restProps, children: [_jsx(Flex, { container: { justify: 'between', alignItems: 'center', pad: 1 }, children: headerContent }), ((isInUtilities(variant) && variant.state !== 'docked') || !isInUtilities(variant)) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledMessagesContainer, ref: messageContainerRef, container: starterMessage || 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 ? (_jsx(_Fragment, { children: starterMessage ? (_jsxs(Card, { container: { alignItems: 'center', pad: 1, justify: 'between' }, item: { grow: 0 }, as: StyledStarterMessageCard, children: [_jsx(StyledStarterMessage, { ref: setStarterMessageElement, children: starterMessage.message }), starterMessage.message && starterMessageElement && (_jsx(Tooltip, { target: starterMessageElement, smart: true, children: starterMessage.message })), _jsx(StyledCloseButton, { icon: true, label: t('close'), "aria-label": `${t('close')} ${t('starter_message')}`, variant: 'simple', onClick: starterMessage.onClose, children: _jsx(Icon, { name: 'times' }) })] })) : (_jsxs(Flex, { as: StyledInitialMessageContainer, container: {
-                                        justify: 'center',
-                                        direction: 'column',
-                                        gap: 8
-                                    }, item: { grow: 1 }, children: [((isInUtilities(variant) && variant.state === 'maximized') ||
-                                            !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 2 }, children: [_jsx(Icon, { name: 'polaris-solid', size: 'l', color: theme.base.palette.ai }), _jsx(Text, { variant: 'h2', children: t('welcome_text') })] })), _jsx(Flex, { container: { direction: 'column', gap: 1.5 }, children: initialSuggestedMessages?.map(initialSuggestedMessage => (_jsx(InitialSuggestedMessage, { ...initialSuggestedMessage, onSend: initialMessage => {
-                                                    onSend(initialMessage);
-                                                    isUserTriggered.current = true;
-                                                }, testId: initialSuggestedMessage.id }))) })] })) })) : (_jsx(Flex, { as: StyledMessagesList, ref: conversationRef, container: { direction: 'column' }, onFocus: () => {
-                                    if (!focusInMessageListRef.current) {
-                                        if (lastFocusedMessageRef.current) {
-                                            lastFocusedMessageRef.current.focus();
-                                        }
-                                        else {
-                                            /** Focus on the latest message if the chat message list was never focused */
-                                            const lastChild = conversationRef.current && conversationRef.current.lastElementChild;
-                                            if (lastChild instanceof HTMLElement) {
-                                                lastChild.focus();
-                                            }
+    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',
+                                direction: 'column',
+                                gap: 8
+                            }, item: { grow: 1 }, children: [((isInUtilities(variant) && variant.state === 'maximized') ||
+                                    !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 2 }, children: [_jsx(Icon, { name: 'polaris-solid', size: 'l', color: theme.base.palette.ai }), _jsx(Text, { variant: 'h2', children: t('welcome_text') })] })), _jsx(Flex, { container: { direction: 'column', gap: 1.5 }, children: initialSuggestedMessages?.map(initialSuggestedMessage => (_jsx(InitialSuggestedMessage, { ...initialSuggestedMessage, onSend: initialMessage => {
+                                            onSend(initialMessage);
+                                            isUserTriggered.current = true;
+                                        }, testId: initialSuggestedMessage.id }))) })] })) : (_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();
+                                    }
+                                    else {
+                                        /** Focus on the latest message if the chat message list was never focused */
+                                        const lastChild = conversationRef.current && conversationRef.current.lastElementChild;
+                                        if (lastChild instanceof HTMLElement) {
+                                            lastChild.focus();
                                         }
                                     }
-                                    focusInMessageListRef.current = true;
-                                    setArrowKey(null);
-                                }, onKeyDown: (e) => {
-                                    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                                }
+                                focusInMessageListRef.current = true;
+                                setArrowKey(null);
+                            }, onKeyDown: (e) => {
+                                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                                    setArrowKey(e.key);
+                                    elementRef.current = null;
+                                }
+                                else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+                                    const currentElement = conversationRef.current?.querySelector('li:focus');
+                                    if (currentElement && currentElement instanceof HTMLElement) {
+                                        elementRef.current = currentElement;
+                                    }
+                                    else {
+                                        elementRef.current =
+                                            conversationRef.current
+                                                ?.querySelector(':focus')
+                                                ?.closest('li[type="message"]') || null;
+                                    }
+                                    initialFocusedElementRef.current = elementRef.current;
+                                    if (currentElement && getFocusables(currentElement).length > 0) {
                                         setArrowKey(e.key);
-                                        elementRef.current = null;
                                     }
-                                    else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-                                        const currentElement = conversationRef.current?.querySelector('li:focus');
-                                        if (currentElement && currentElement instanceof HTMLElement) {
-                                            elementRef.current = currentElement;
+                                }
+                                else if (e.key === 'Tab') {
+                                    setLastFocusableElement();
+                                    if (e.shiftKey) {
+                                        if (!condition &&
+                                            conversationHistory &&
+                                            conversationHistory.selectedItemId) {
+                                            const selectedId = historyViewRef.current?.querySelector(`li[id="${conversationHistory.selectedItemId}"]`);
+                                            if (selectedId) {
+                                                selectedId.focus();
+                                                e.preventDefault();
+                                            }
                                         }
                                         else {
-                                            elementRef.current =
-                                                conversationRef.current
-                                                    ?.querySelector(':focus')
-                                                    ?.closest('li[type="message"]') || null;
-                                        }
-                                        initialFocusedElementRef.current = elementRef.current;
-                                        if (currentElement && getFocusables(currentElement).length > 0) {
-                                            setArrowKey(e.key);
-                                        }
-                                    }
-                                    else if (e.key === 'Tab') {
-                                        setLastFocusableElement();
-                                        if (e.shiftKey) {
-                                            const prevElement = conversationRef.current?.parentElement?.previousElementSibling;
+                                            const prevElement = conversationRef.current?.parentElement?.parentElement
+                                                ?.previousElementSibling;
                                             if (prevElement) {
                                                 const focusables = getFocusables(prevElement);
                                                 if (focusables.length) {
@@ -249,95 +280,102 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                                                 }
                                             }
                                         }
-                                        else {
-                                            const nextElement = conversationRef.current?.parentElement?.nextElementSibling;
-                                            if (nextElement) {
-                                                const focusables = getFocusables(nextElement);
-                                                if (focusables.length) {
-                                                    e.preventDefault();
-                                                    focusables[0].focus();
-                                                }
+                                    }
+                                    else {
+                                        const nextElement = conversationRef.current?.parentElement?.nextElementSibling;
+                                        if (nextElement) {
+                                            const focusables = getFocusables(nextElement);
+                                            if (focusables.length) {
+                                                e.preventDefault();
+                                                focusables[0].focus();
                                             }
                                         }
                                         setArrowKey(null);
                                     }
-                                }, children: messages.map(item => {
-                                    const messageProps = isCoachMessage(item)
-                                        ? {
-                                            ...item,
-                                            onSend
-                                        }
-                                        : item;
-                                    return _jsx(GenAIMessage, { ...messageProps, testId: item.id });
-                                }) })) })) }), !starterMessage &&
-                        ((isInUtilities(variant) &&
-                            variant.state !== 'docked' &&
-                            variant.state !== 'minimized') ||
-                            !isInUtilities(variant)) && (_jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, children: guidedMode ? (_jsx(_Fragment, { children: suggestions && messages.length > 0 && (_jsxs(_Fragment, { children: [latestMessage && isCoachMessage(latestMessage) && latestMessage.loading ? (_jsxs(Flex, { container: {
-                                            gap: 1,
-                                            justify: 'center',
-                                            alignItems: 'center',
-                                            pad: 1
-                                        }, children: [t('generating_response'), _jsx(Progress, { placement: 'inline' })] })) : (_jsx(Configuration, { theme: {
-                                            components: {
-                                                button: {
-                                                    color: theme.base.palette.ai,
-                                                    'secondary-color': theme.base.palette.ai,
-                                                    'secondary-fill-style': 'outline'
-                                                }
-                                            }
-                                        }, children: _jsx(MenuButton, { text: t('ask_coach', [selectedCoach ?? '']), icon: 'polaris-solid', menu: {
-                                                items: suggestions,
-                                                onItemClick: id => {
-                                                    const selected = menuHelpers.getItem(suggestions, id);
-                                                    if (selected)
-                                                        onSend({
-                                                            id: selected.id,
-                                                            message: selected.primary
-                                                        });
-                                                }
-                                            } }) })), _jsx(StyledDisclaimerText, { children: t('ai_disclaimer') })] })) })) : (_jsxs(_Fragment, { children: [_jsx(TextArea, { ref: textAreaRef, label: t('message_pega_gen_ai_coach', [selectedCoach ?? '']), value: message, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, autoResize: false }), latestMessage && isCoachMessage(latestMessage) && latestMessage.loading ? (_jsxs(Flex, { container: {
+                                }
+                            }, children: messages.map(item => {
+                                const messageProps = isCoachMessage(item)
+                                    ? {
+                                        ...item,
+                                        suggestions: messages.findLast(messageItem => isCoachMessage(messageItem))?.id ===
+                                            item.id
+                                            ? item.suggestions
+                                            : undefined,
+                                        onSend
+                                    }
+                                    : item;
+                                return (_jsx(GenAIMessage, { ...messageProps, testId: item.id, announceInteraction: !focusInMessageListRef.current }));
+                            }) })) })) }), ((isInUtilities(variant) && variant.state !== 'minimized') ||
+                    !isInUtilities(variant)) && (_jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, children: guidedMode ? (_jsx(_Fragment, { children: suggestions && messages.length > 0 && (_jsxs(_Fragment, { children: [latestMessage && isCoachMessage(latestMessage) && latestMessage.loading ? (_jsxs(Flex, { container: {
                                         gap: 1,
-                                        justify: 'end',
+                                        justify: 'center',
                                         alignItems: 'center',
                                         pad: 1
-                                    }, children: [t('generating_response'), _jsx(Progress, { placement: 'inline' })] })) : (_jsxs(Flex, { container: {
-                                        gap: 2,
-                                        justify: 'end',
-                                        pad: 1
-                                    }, children: [suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'text', icon: 'polaris-solid', as: StyledSuggestions, menu: {
-                                                items: suggestions,
-                                                onItemClick: id => {
-                                                    const selected = menuHelpers.getItem(suggestions, id);
-                                                    if (selected)
-                                                        onSend({
-                                                            id: selected.id,
-                                                            message: selected.primary
-                                                        });
-                                                }
-                                            } })), _jsx(Button, { variant: 'primary', onClick: message
-                                                ? () => {
+                                    }, children: [t('generating_response'), _jsx(Progress, { placement: 'inline', focusOnVisible: true, message: t('generating_response') })] })) : (_jsx(ThemeOverride, { theme: {
+                                        components: {
+                                            button: {
+                                                color: theme.base.palette.ai,
+                                                'secondary-color': theme.base.palette.ai,
+                                                'secondary-fill-style': 'outline'
+                                            }
+                                        }
+                                    }, children: _jsx(MenuButton, { text: t('ask_coach', [selectedCoach ?? '']), variant: 'primary', icon: 'polaris-solid', ref: setSuggestionMenuButton, menu: {
+                                            items: suggestions,
+                                            onItemClick: id => {
+                                                const selected = menuHelpers.getItem(suggestions, id);
+                                                if (selected)
                                                     onSend({
-                                                        id: createUID(),
-                                                        message
+                                                        id: selected.id,
+                                                        message: selected.primary
                                                     });
-                                                    setMessage('');
-                                                }
-                                                : undefined, children: t('send') })] })), _jsx(StyledDisclaimerText, { children: t('ai_disclaimer') })] })) })), !loading &&
-                        !error &&
-                        messages.length === 0 &&
-                        ((isInUtilities(variant) && variant.state === 'minimized') || starterMessage) && (_jsx(StyledChatButton, { icon: true, onClick: () => {
-                            isUserTriggered.current = true;
-                            if (isInUtilities(variant)) {
-                                variant.onStateChange('maximized');
-                            }
-                            if (starterMessage && starterMessage.message) {
-                                onSend({
-                                    id: starterMessage.id,
-                                    message: starterMessage.message
-                                });
-                            }
-                        }, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'polaris-solid' }), t('start_chat')] }) }))] }))] }));
+                                            }
+                                        } }) })), _jsx(StyledDisclaimerText, { children: t('ai_disclaimer') })] })) })) : (_jsxs(_Fragment, { children: [_jsx(TextArea, { ref: textAreaRef, label: t('message_pega_gen_ai_coach', [selectedCoach ?? '']), value: message, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, autoResize: false }), latestMessage && isCoachMessage(latestMessage) && latestMessage.loading ? (_jsxs(Flex, { container: {
+                                    gap: 1,
+                                    justify: 'end',
+                                    alignItems: 'center',
+                                    pad: 1
+                                }, children: [t('generating_response'), _jsx(Progress, { placement: 'inline' })] })) : (_jsxs(Flex, { container: {
+                                    gap: 2,
+                                    justify: 'end',
+                                    pad: [1, undefined, undefined]
+                                }, children: [suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'text', icon: 'polaris-solid', as: StyledSuggestions, menu: {
+                                            items: suggestions,
+                                            onItemClick: id => {
+                                                const selected = menuHelpers.getItem(suggestions, id);
+                                                if (selected)
+                                                    onSend({
+                                                        id: selected.id,
+                                                        message: selected.primary
+                                                    });
+                                            }
+                                        } })), _jsx(Button, { variant: 'primary', onClick: message
+                                            ? () => {
+                                                onSend({
+                                                    id: createUID(),
+                                                    message
+                                                });
+                                                setMessage('');
+                                            }
+                                            : undefined, children: t('send') })] })), _jsx(StyledDisclaimerText, { inFullPage: !condition, children: t('ai_disclaimer') })] })) }))] })) }));
+    useEffect(() => {
+        if (focusTextArea.current && !conversationHistory && textAreaRef.current) {
+            textAreaRef.current.focus();
+            focusTextArea.current = false;
+        }
+    }, [conversationHistory, focusTextArea.current]);
+    const historyView = conversationHistory && (_jsx(ConversationHistory, { testId: testIds.root, ...conversationHistory, onItemClick: conversationId => {
+            if (condition) {
+                focusTextArea.current = true;
+            }
+            else {
+                textAreaRef.current?.focus();
+            }
+            conversationHistory.onItemClick?.(conversationId);
+        }, onDismiss: () => {
+            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] }))] }));
 };
 export default withTestIds(GenAICoach, getGenAICoachTestIds);
 //# sourceMappingURL=GenAICoach.js.map