@pega/cosmos-react-work 9.0.0-build.9.9 → 9.0.0

package/lib/components/GenAICoach/GenAICoach.js

@@ -1,6 +1,7 @@
 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, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, useArrows, focusableSelector, useLiveLog, useOuterEvent, ThemeOverride, hasProp, getActiveElement, useElement, Actions, useBreakpoint, Grid, useRefMap, VisuallyHiddenText, FileList, Lightbox } from '@pega/cosmos-react-core';
+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';
 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,26 +9,89 @@ 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 * 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 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 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 { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
-import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection } 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, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge, StyledSalutation, StyledComposerWrapper } 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);
-const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, ...restProps }) => {
+registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, squareSolidIcon, sendSolidIcon, plusIcon, dockIcon, undockIcon, caretLeftIcon, caretRightIcon);
+export const AgentIcon = () => {
     const theme = useTheme();
+    const uid = useUID();
+    const idA = `agent-gradient-a-${uid}`;
+    const idB = `agent-gradient-b-${uid}`;
+    const idC = `agent-clip-${uid}`;
+    const isLightTheme = getLuminance(theme.base.palette['foreground-color']) < 0.5;
+    return isLightTheme ? (_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' })] })] })) : (_jsxs(StyledAgentIcon, { width: '26', height: '26', viewBox: '0 0 26 26', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsxs("g", { clipPath: `url(#${idC})`, children: [_jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M26 13C22.0904 13.4036 19.0422 14.5723 16.9639 16.5542C14.5783 18.7349 13.259 21.8855 13 26C12.494 21.8374 11.0723 18.6867 8.78313 16.506C6.6506 14.5241 3.70482 13.3554 0 13C3.90964 12.6928 6.95783 11.4759 9.13855 9.34337C11.3193 7.16265 12.5904 4.06024 13 0C13.3072 4.51807 14.7771 7.87349 17.4699 10.0542C19.6506 11.7831 22.494 12.747 26 13ZM24.3735 4.87349C23.4096 4.9759 22.6446 5.27711 22.0361 5.83735C21.4759 6.39759 21.1747 7.15663 21.1205 8.12048C21.0181 7.15663 20.7169 6.39157 20.2048 5.88554C19.6446 5.3253 18.8855 4.96988 17.8675 4.86747C18.8313 4.81928 19.5422 4.51205 20.1024 4.00602C20.6627 3.44578 21.0181 2.63253 21.1205 1.62048C21.1687 2.68675 21.5241 3.5 22.1386 4.00602C22.6988 4.51205 23.4096 4.81928 24.3735 4.86747V4.87349ZM8.12651 21.1265C7.10843 21.2289 6.3494 21.5301 5.78916 22.0904C5.22892 22.5964 4.92771 23.3614 4.87349 24.3735C4.77108 23.3072 4.41566 22.5482 3.80723 21.988C3.3494 21.5301 2.59036 21.2289 1.62651 21.1265C2.48795 21.0783 3.1988 20.8193 3.71084 20.3675C4.37349 19.8614 4.77711 19.0482 4.87952 17.8795C4.92771 18.741 5.18675 19.506 5.69277 20.1145C6.1988 20.6747 7.01205 21.0301 8.13253 21.1325L8.12651 21.1265Z', fill: `url(#${idA})` }), _jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M26 13C22.0904 13.4036 19.0422 14.5723 16.9639 16.5542C14.5783 18.7349 13.259 21.8855 13 26C12.494 21.8373 11.0723 18.6867 8.78313 16.506C6.6506 14.5241 3.70482 13.3554 0 13C3.90964 12.6928 6.95783 11.4759 9.13855 9.34337C11.3193 7.16265 12.5904 4.06024 13 0C13.3072 4.51807 14.7771 7.87349 17.4699 10.0542C19.6506 11.7831 22.494 12.747 26 13ZM24.3735 4.87349C23.4096 4.9759 22.6446 5.27711 22.0361 5.83735C21.4759 6.39759 21.1747 7.15663 21.1205 8.12048C21.0181 7.15663 20.7169 6.39157 20.2048 5.88554C19.6446 5.3253 18.8855 4.96988 17.8675 4.86747C18.8313 4.81928 19.5422 4.51205 20.1024 4.00602C20.6627 3.44578 21.0181 2.63253 21.1205 1.62048C21.1687 2.68675 21.5241 3.5 22.1386 4.00602C22.6988 4.51205 23.4096 4.81928 24.3735 4.86747V4.87349ZM8.12651 21.1265C7.10843 21.2289 6.3494 21.5301 5.78916 22.0904C5.22892 22.5964 4.92771 23.3614 4.87349 24.3735C4.77108 23.3072 4.41566 22.5482 3.80723 21.988C3.3494 21.5301 2.59036 21.2289 1.62651 21.1265C2.48795 21.0783 3.1988 20.8193 3.71084 20.3675C4.37349 19.8614 4.77711 19.0482 4.87952 17.8795C4.92771 18.741 5.18675 19.506 5.69277 20.1145C6.1988 20.6747 7.01205 21.0301 8.13253 21.1325L8.12651 21.1265Z', fill: `url(#${idB})` })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: idA, x1: '19.2169', y1: '19.2169', x2: '7.28916', y2: '7.28916', gradientUnits: 'userSpaceOnUse', children: [_jsx("stop", { offset: '0.12', stopColor: '#D4B1FF' }), _jsx("stop", { offset: '0.42', stopColor: '#AE9AFE' }), _jsx("stop", { offset: '0.59', stopColor: '#AEB7FC' }), _jsx("stop", { offset: '0.97', stopColor: '#E4CAFF' })] }), _jsxs("linearGradient", { id: idB, x1: '7.53614', y1: '-1.65663', x2: '17.253', y2: '24.4096', gradientUnits: 'userSpaceOnUse', children: [_jsx("stop", { offset: '0.46', stopColor: '#8165D2', stopOpacity: '0' }), _jsx("stop", { offset: '0.52', stopColor: '#5B39B9', stopOpacity: '0.4' })] }), _jsx("clipPath", { id: idC, children: _jsx("rect", { width: '26', height: '26', fill: 'white' }) })] })] }));
+};
+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 t = useI18n();
+    const fullscreenIcon = isFullscreen ? 'dock' : 'undock';
+    const extraItems = [
+        ...(allowFullScreen
+            ? [
+                {
+                    id: 'fullscreen',
+                    text: isFullscreen ? t('exit_fullscreen') : t('fullscreen'),
+                    visual: _jsx(Icon, { name: fullscreenIcon }),
+                    onClick: onFullscreenToggle
+                }
+            ]
+            : []),
+        ...(isInUtilities(variant) && !isFullscreen
+            ? [
+                {
+                    id: 'minimize',
+                    text: t('minimize'),
+                    visual: _jsx(Icon, { name: 'minus' }),
+                    onClick: () => {
+                        variant.onStateChange('minimized');
+                        isUserTriggeredRef.current = true;
+                    }
+                }
+            ]
+            : [])
+    ];
+    const mergedItems = [...(actions?.items ?? []), ...extraItems];
+    if (mergedItems.length === 0)
+        return null;
+    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 scrollTolerancePx = 2;
+    const scrollThresholdPx = 50;
+    const streamBufferLh = 5;
+    const bufferExtensionLh = 2;
+    const scrollThrottleMs = 50;
+    const resizeThrottleMs = 33;
+    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 mouseTriggeredFocusRef = useRef(false);
     const isUserTriggered = useRef(false);
     const lastFocusedMessageRef = useRef(null);
     const initialFocusedElementRef = useRef(null);
+    const inputContainerRef = useRef(null);
     const messageContainerRef = useRef(null);
     const textAreaRef = useRef(null);
     const [suggestionMenuButton, setSuggestionMenuButton] = useElement(null);
@@ -36,17 +100,287 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
     const historyViewRef = useRef(null);
     const fileUploadInputRef = useRef(null);
     const attachmentsAdded = useRef(false);
+    const pendingResult = useRef(false);
+    const scrollStateRef = useRef({
+        userAtBottom: false,
+        isStreamingActive: false,
+        initialBufferApplied: false,
+        smoothScrollOnEnd: false,
+        ignoreNextScrollEvent: false,
+        lastScrollTop: null,
+        bufferMinHeight: null
+    });
+    const observersRef = useRef({
+        inputContainer: null,
+        messageContainer: null,
+        streamingMessage: null,
+        tileSync: null,
+        tileMutation: null
+    });
+    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 [focusedInMessage, setFocusedInMessage] = useState(false);
+    const scrollButtonRef = useRef(null);
+    const trapRef = useRef(null);
+    const [animationInitialCursorPos, setAnimationInitialCursorPos] = useState(0);
+    const [focused, setFocused] = useState(false);
+    const [formAnswers, setFormAnswers] = useState();
+    const [questionnaireDismissed, setQuestionnaireDismissed] = useState(false);
+    const [ctxFullscreen, toggleFullscreen] = useFullscreenContext() ?? [];
+    const fullScreen = !!ctxFullscreen;
+    const questionnaireKey = questionnaireData?.questions?.map(q => q.field).join(',') ?? '';
+    const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+    const prevFullScreen = usePrevious(fullScreen);
+    const prevIsSmallOrAbove = usePrevious(isSmallOrAbove);
     const previousMessages = usePrevious(messages);
-    const testIds = useTestIds(testId, getGenAICoachTestIds);
-    const { announcePolite } = useLiveLog();
+    const composerId = useUID();
+    const handleFormChange = useCallback((answers) => {
+        setFormAnswers(answers);
+    }, []);
+    const handleFormCancel = () => {
+        setFormAnswers(undefined);
+        setQuestionnaireDismissed(true);
+        textAreaRef.current?.focus();
+        onQuestionnaireDismiss?.();
+    };
     const latestMessage = messages.at(-1);
-    const condition = variant.placement === 'dialog' ||
-        variant.placement === 'utilities' ||
-        (variant.placement === 'fullpage' && !isSmallOrAbove) ||
-        !conversationHistory;
+    const isLatestAgentMessageStreaming = !!latestMessage && isCoachMessage(latestMessage) && !!latestMessage.loading;
+    const shouldKeepSplitLayoutDuringFullscreenToggle = !!conversationHistory &&
+        variant.placement === 'fullpage' &&
+        prevFullScreen !== undefined &&
+        prevFullScreen !== fullScreen &&
+        !!prevIsSmallOrAbove;
+    const shouldRenderSideBySideHistory = !!conversationHistory &&
+        (fullScreen ||
+            (variant.placement === 'fullpage' &&
+                (isSmallOrAbove || shouldKeepSplitLayoutDuringFullscreenToggle)));
+    const condition = !shouldRenderSideBySideHistory &&
+        (variant.placement === 'dialog' ||
+            variant.placement === 'utilities' ||
+            (variant.placement === 'fullpage' && !isSmallOrAbove) ||
+            !conversationHistory);
+    const applyBuffer = useCallback(() => {
+        const container = messageContainerRef.current;
+        const conversationEl = conversationRef.current;
+        const scrollState = scrollStateRef.current;
+        if (!container || !conversationEl)
+            return;
+        const contentHeight = Array.from(conversationEl.children).reduce((sum, child) => {
+            if (child instanceof HTMLElement)
+                return sum + child.offsetHeight;
+            return sum;
+        }, 0);
+        const computedStyle = window.getComputedStyle(conversationEl);
+        const lineHeightPx = parseFloat(computedStyle.lineHeight) || 20;
+        const bufferSizePx = streamBufferLh * lineHeightPx;
+        const currentBuffer = scrollState.bufferMinHeight ?? 0;
+        const distanceToBufferEnd = currentBuffer - contentHeight;
+        const extensionThreshold = bufferExtensionLh * lineHeightPx;
+        if (currentBuffer === 0 || distanceToBufferEnd < extensionThreshold) {
+            const newBuffer = contentHeight + bufferSizePx;
+            scrollState.bufferMinHeight = newBuffer;
+            conversationEl.style.setProperty('--stream-buffer', `${newBuffer}px`);
+        }
+    }, []);
+    const manageBuffer = useCallback((action) => {
+        const container = messageContainerRef.current;
+        const conversationEl = conversationRef.current;
+        const scrollState = scrollStateRef.current;
+        if (!container || !conversationEl)
+            return;
+        if (action === 'clear') {
+            conversationEl.style.removeProperty('--stream-buffer');
+            scrollState.bufferMinHeight = null;
+            return;
+        }
+        if (action === 'init') {
+            applyBuffer();
+            return;
+        }
+        if (!scrollState.isStreamingActive || !scrollState.userAtBottom)
+            return;
+        applyBuffer();
+    }, [applyBuffer]);
+    const followStreamingMessage = useCallback(() => {
+        const container = messageContainerRef.current;
+        const scrollState = scrollStateRef.current;
+        if (!container ||
+            !scrollState.isStreamingActive ||
+            !scrollState.userAtBottom ||
+            (scrollState.lastScrollTop !== null &&
+                container.scrollTop < scrollState.lastScrollTop - scrollTolerancePx))
+            return;
+        manageBuffer('extend');
+        const targetScroll = container.scrollHeight - container.clientHeight;
+        const currentScroll = container.scrollTop;
+        if (Math.abs(currentScroll - targetScroll) > scrollTolerancePx) {
+            scrollState.ignoreNextScrollEvent = true;
+            container.scrollTo({ top: targetScroll, behavior: 'auto' });
+        }
+    }, [manageBuffer]);
+    const scrollToLatest = useCallback((behavior = 'auto', preferLast = true) => {
+        const container = messageContainerRef.current;
+        const conversationEl = conversationRef.current;
+        const lastMessage = conversationEl?.lastElementChild;
+        if (!container)
+            return;
+        const scrollState = scrollStateRef.current;
+        if (preferLast && lastMessage && lastMessage instanceof HTMLElement) {
+            const scrollHeight = container.scrollHeight;
+            const clientHeight = container.clientHeight;
+            const targetScrollTop = scrollHeight - clientHeight - scrollThresholdPx / 2;
+            if (targetScrollTop > container.scrollTop) {
+                scrollState.ignoreNextScrollEvent = true;
+                container.scrollTo({ top: targetScrollTop, behavior: 'auto' });
+            }
+            return;
+        }
+        scrollState.ignoreNextScrollEvent = true;
+        container.scrollTo({ top: container.scrollHeight, behavior });
+    }, []);
+    const updateScrollState = useCallback((isScrollEvent = false) => {
+        const container = messageContainerRef.current;
+        const conversationEl = conversationRef.current;
+        if (!container || !conversationEl) {
+            setShowScrollToBottom(false);
+            return;
+        }
+        const state = scrollStateRef.current;
+        if (state.initialBufferApplied) {
+            scrollToLatest('auto', true);
+            setShowScrollToBottom(false);
+            state.initialBufferApplied = false;
+            return;
+        }
+        if (state.smoothScrollOnEnd) {
+            scrollToLatest('smooth', false);
+            setShowScrollToBottom(false);
+            state.smoothScrollOnEnd = false;
+            return;
+        }
+        if (isScrollEvent && state.ignoreNextScrollEvent) {
+            state.ignoreNextScrollEvent = false;
+            return;
+        }
+        const isUserScroll = isScrollEvent;
+        const { clientHeight, scrollHeight, scrollTop } = container;
+        const trueContentHeight = Array.from(conversationEl.children).reduce((sum, child) => (child instanceof HTMLElement ? sum + child.offsetHeight : sum), 0);
+        const hasOverflow = trueContentHeight > clientHeight + scrollTolerancePx;
+        const distanceFromBufferedBottom = scrollHeight - scrollTop - clientHeight;
+        const isAtBufferedBottom = distanceFromBufferedBottom <= scrollThresholdPx;
+        if (!state.isStreamingActive) {
+            const distanceFromBottom = trueContentHeight - scrollTop - clientHeight;
+            const isAtBottom = distanceFromBottom <= scrollThresholdPx;
+            setShowScrollToBottom(hasOverflow && !isAtBottom);
+            return;
+        }
+        if (isUserScroll) {
+            const previousScrollTop = state.lastScrollTop;
+            state.lastScrollTop = scrollTop;
+            if (previousScrollTop !== null && scrollTop < previousScrollTop - scrollTolerancePx) {
+                state.userAtBottom = false;
+            }
+            else if (isAtBufferedBottom) {
+                state.userAtBottom = true;
+            }
+        }
+        if (state.userAtBottom && isAtBufferedBottom) {
+            followStreamingMessage();
+            setShowScrollToBottom(false);
+        }
+        else {
+            setShowScrollToBottom(hasOverflow && !isAtBufferedBottom);
+        }
+    }, [followStreamingMessage, scrollToLatest]);
+    const updateScrollStateOnResize = useMemo(() => throttle(() => updateScrollState(false), resizeThrottleMs), [updateScrollState]);
+    const updateScrollStateOnScrollEvent = useMemo(() => throttle(() => updateScrollState(true), scrollThrottleMs), [updateScrollState]);
+    const handleScrollToBottomClick = useCallback(() => {
+        const scrollState = scrollStateRef.current;
+        const isStreaming = scrollState.isStreamingActive;
+        scrollToLatest(isStreaming ? 'auto' : 'smooth', false);
+        if (isStreaming) {
+            scrollState.userAtBottom = true;
+        }
+        setShowScrollToBottom(false);
+        const lastMessage = conversationRef.current?.lastElementChild;
+        if (lastMessage instanceof HTMLElement) {
+            lastFocusedMessageRef.current = lastMessage;
+            focusInMessageListRef.current = true;
+            lastMessage.focus();
+        }
+    }, [scrollToLatest]);
+    const suggestionCardsViewElRef = useRef(null);
+    const setSuggestionCardsViewRef = useCallback((el) => {
+        if (suggestionCardsViewElRef.current === el)
+            return;
+        observersRef.current.tileSync?.disconnect();
+        observersRef.current.tileSync = null;
+        observersRef.current.tileMutation?.disconnect();
+        observersRef.current.tileMutation = null;
+        suggestionCardsViewElRef.current = el;
+        if (!el)
+            return;
+        const tileSelector = '[data-tile-content]';
+        let scheduled = false;
+        const measure = () => {
+            const tileContents = Array.from(el.querySelectorAll(tileSelector));
+            if (tileContents.length === 0) {
+                el.style.removeProperty('--tile-col-track');
+                return;
+            }
+            tileContents.forEach(tileEl => {
+                tileEl.style.width = 'auto';
+            });
+            const maxWidth = Math.max(...tileContents.map(tileEl => Math.round(tileEl.getBoundingClientRect().width)));
+            tileContents.forEach(tileEl => {
+                tileEl.style.width = '';
+            });
+            const newTrack = `${maxWidth}px`;
+            if (el.style.getPropertyValue('--tile-col-track') !== newTrack) {
+                el.style.setProperty('--tile-col-track', newTrack);
+            }
+        };
+        const schedule = () => {
+            if (scheduled)
+                return;
+            scheduled = true;
+            requestAnimationFrame(() => {
+                scheduled = false;
+                measure();
+            });
+        };
+        const ro = new ResizeObserver(() => schedule());
+        ro.observe(el);
+        observersRef.current.tileSync = ro;
+        const mo = new MutationObserver(() => schedule());
+        mo.observe(el, { childList: true, subtree: true });
+        observersRef.current.tileMutation = mo;
+    }, []);
+    const setInputContainerRef = useCallback((el) => {
+        if (inputContainerRef.current === el)
+            return;
+        observersRef.current.inputContainer?.disconnect();
+        observersRef.current.inputContainer = null;
+        inputContainerRef.current = el;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (entry && genAICoachRef.current) {
+                const height = Math.round(entry.contentRect.height);
+                genAICoachRef.current.style.setProperty('--composer-height', `${height}px`);
+            }
+        });
+        ro.observe(el);
+        observersRef.current.inputContainer = ro;
+    }, []);
+    const setMessageContainerRef = useCallback((el) => {
+        messageContainerRef.current = el;
+    }, []);
     const onCoachChange = (id) => {
         setCoachOptions(cur => {
             return cur.map(coach => {
@@ -69,22 +403,51 @@ 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 hasFormAnswers = !!questionnaireData &&
+            formAnswers &&
+            Object.values(formAnswers).some(v => v.value.length > 0);
         const isMessageAndAttachmentsEmpty = !message && (!attachments || attachments.length === 0);
         const hasAttachmentsError = attachments &&
             attachments.length > 0 &&
             (attachmentsError || attachments.some(attachment => attachment.error));
         const isCoachMessageLoading = latestMessage && isCoachMessage(latestMessage) && latestMessage.loading;
-        if (isMessageAndAttachmentsEmpty || hasAttachmentsError || isCoachMessageLoading)
+        if ((isMessageAndAttachmentsEmpty && !hasFormAnswers) ||
+            hasAttachmentsError ||
+            isCoachMessageLoading ||
+            (latestMessage && isCoachMessage(latestMessage) && latestMessage.isToolConfirmation))
             return;
         onSend({
             id: createUID(),
             message,
             fromComposer: true,
-            attachmentIds: attachments?.map(({ id }) => id)
+            attachmentIds: attachments?.map(({ id }) => id),
+            formAnswers: hasFormAnswers ? formAnswers : undefined
         });
+        setFormAnswers(undefined);
         setMessage('');
-    }, [[message, latestMessage, attachments, attachmentsError]]);
+        if (active) {
+            stop();
+        }
+    }, [message, latestMessage, attachments, attachmentsError, formAnswers, questionnaireData]);
     const handleEnterKeyDown = (e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
@@ -100,23 +463,20 @@ 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: isPortalAgent && !pagePanel?.visible ? 'h1' : '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]);
+    }, [coachOptions, selectedCoach, isPortalAgent, pagePanel?.visible]);
     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, 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]);
+                        }, 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]);
     const getMessageContainingElement = (element) => {
         if (element)
             return Array.from(messageEls.values()).find(el => el && el.contains(element));
@@ -131,21 +491,38 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                 getMessageContainingElement(lastFocusedMessageRef.current) ?? null;
         }
     };
-    const onResize = () => {
-        if (genAICoachRef.current && isInUtilities(variant)) {
-            const height = genAICoachRef.current.clientHeight;
-            variant.setGenAIHeight?.(height);
-        }
-    };
+    const focusLastMessageLi = useCallback((e) => {
+        if (e.key !== 'Tab' || !e.shiftKey)
+            return;
+        const target = lastFocusedMessageRef.current ?? conversationRef.current?.lastElementChild;
+        if (!(target instanceof HTMLElement))
+            return;
+        e.preventDefault();
+        focusInMessageListRef.current = true;
+        target.focus();
+    }, []);
     const variantState = useMemo(() => {
         if (variant.placement === 'utilities') {
             return variant.state;
         }
     }, [variant]);
     useEffect(() => {
-        if (isInUtilities(variant)) {
-            onResize();
+        if (questionnaireData) {
+            setQuestionnaireDismissed(false);
+            setFormAnswers(undefined);
+        }
+    }, [questionnaireData]);
+    useEffect(() => {
+        if (draftMessage !== undefined) {
+            setMessage(draftMessage);
+            if (suggestionCardsView || draftMessage)
+                textAreaRef.current?.focus();
         }
+    }, [draftMessage, suggestionCardsView]);
+    useEffect(() => {
+        setFormAnswers(undefined);
+    }, [questionnaireKey]);
+    useEffect(() => {
         if (isUserTriggered.current) {
             if (isInUtilities(variant) &&
                 (variant.state === 'minimized' || (guidedMode && variant.state === 'maximized')) &&
@@ -165,9 +542,10 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
     }, [condition]);
     useEffect(() => {
         onOpen?.();
-        window.addEventListener('resize', onResize);
         return () => {
-            window.removeEventListener('resize', onResize);
+            Object.values(observersRef.current).forEach(observer => {
+                observer?.disconnect();
+            });
         };
     }, []);
     useEffect(() => {
@@ -175,17 +553,10 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
         const currentFilteredMsgs = messages?.filter(item => !hasProp(item, 'loading')) ?? [];
         if (prevFilteredMsgs.length < currentFilteredMsgs.length ||
             (latestMessage && hasProp(latestMessage, 'loading'))) {
-            setTimeout(() => {
-                conversationRef.current?.lastElementChild?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest'
-                });
-            }, 0);
             if (latestMessage && isUserMessage(latestMessage)) {
                 textAreaRef.current?.focus();
                 setLastFocusableElement();
                 elementRef.current = null;
-                setArrowKey(null);
             }
             else if (latestMessage?.loading) {
                 isGeneratingResponse.current = true;
@@ -195,6 +566,72 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
             }
         }
     }, [messages]);
+    useEffect(() => {
+        if (!isLatestAgentMessageStreaming)
+            return;
+        announcePolite({ type: 'status', message: t('generating_response') });
+    }, [isLatestAgentMessageStreaming]);
+    useEffect(() => {
+        const scrollState = scrollStateRef.current;
+        const wasStreaming = scrollState.isStreamingActive;
+        if (isLatestAgentMessageStreaming && !wasStreaming) {
+            scrollStateRef.current = {
+                ...scrollStateRef.current,
+                isStreamingActive: true,
+                initialBufferApplied: true,
+                userAtBottom: false,
+                smoothScrollOnEnd: false,
+                lastScrollTop: null
+            };
+            requestAnimationFrame(() => {
+                manageBuffer('init');
+            });
+            return;
+        }
+        if (!isLatestAgentMessageStreaming && wasStreaming) {
+            scrollStateRef.current = {
+                ...scrollStateRef.current,
+                isStreamingActive: false,
+                initialBufferApplied: false,
+                userAtBottom: false,
+                smoothScrollOnEnd: true
+            };
+            manageBuffer('clear');
+        }
+    }, [isLatestAgentMessageStreaming, manageBuffer]);
+    useEffect(() => {
+        const container = messageContainerRef.current;
+        const content = conversationRef.current;
+        if (!container || !content)
+            return;
+        const containerRO = new ResizeObserver(updateScrollStateOnResize);
+        containerRO.observe(container);
+        containerRO.observe(content);
+        observersRef.current.messageContainer = containerRO;
+        let streamingMessageRO = null;
+        const lastMessageEl = content.lastElementChild;
+        if (isLatestAgentMessageStreaming && lastMessageEl) {
+            const handleStreamingUpdate = throttle(() => {
+                followStreamingMessage();
+                updateScrollState(false);
+            }, resizeThrottleMs);
+            streamingMessageRO = new ResizeObserver(handleStreamingUpdate);
+            streamingMessageRO.observe(lastMessageEl);
+            observersRef.current.streamingMessage = streamingMessageRO;
+        }
+        return () => {
+            containerRO.disconnect();
+            observersRef.current.messageContainer = null;
+            streamingMessageRO?.disconnect();
+            observersRef.current.streamingMessage = null;
+        };
+    }, [
+        messages.length,
+        isLatestAgentMessageStreaming,
+        followStreamingMessage,
+        updateScrollState,
+        updateScrollStateOnResize
+    ]);
     useEffect(() => {
         if (suggestionMenuButton && isGeneratingResponse.current) {
             announcePolite({ message: t('response_generated') });
@@ -204,16 +641,34 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                 suggestionMenuButton.focus();
         }
     }, [suggestionMenuButton]);
-    /** Supports arrow key behaviors */
     useEffect(() => {
-        const focusables = getFocusables(elementRef);
-        if (arrowKey === 'ArrowRight') {
-            focusables[0]?.focus();
+        if (messages.length === 0 || loading || error) {
+            setShowScrollToBottom(false);
         }
-        else if (arrowKey === 'ArrowLeft') {
-            focusables[focusables.length - 1]?.focus();
-        }
-    }, [arrowKey, elementRef.current]);
+    }, [messages.length, loading, error]);
+    /** Supports Enter key to enter a message and focus first focusable element inside it */
+    useEffect(() => {
+        if (!focusedInMessage)
+            return;
+        const focusables = getFocusables(elementRef);
+        focusables[0]?.focus();
+    }, [focusedInMessage, elementRef.current]);
+    /**
+     * While inside a message, stop ArrowUp/Down from bubbling to conversationRef
+     * so useArrows does not navigate between message rows.
+     */
+    useEffect(() => {
+        const el = elementRef.current;
+        if (!focusedInMessage || !el)
+            return;
+        const blockArrows = (e) => {
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                e.stopPropagation();
+            }
+        };
+        el.addEventListener('keydown', blockArrows);
+        return () => el.removeEventListener('keydown', blockArrows);
+    }, [focusedInMessage]);
     useArrows(conversationRef, {
         cycle: true,
         selector: ':scope > li',
@@ -221,66 +676,195 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
         allowTabFocus: true,
         initialFocusElement: initialFocusedElementRef.current
     }, [messages, initialFocusedElementRef.current]);
-    useArrows(elementRef, {
-        cycle: true,
-        selector: `li ${focusableSelector}`,
-        dir: 'left-right',
-        allowTabFocus: true,
-        updateTabIndex: false
-    }, [messages, elementRef.current, arrowKey]);
-    useOuterEvent('mousedown', [conversationRef.current], () => {
-        setArrowKey(null);
+    useFocusTrap(trapRef, true, [focusedInMessage]);
+    useOuterEvent('mousedown', [focusedInMessage ? elementRef.current : conversationRef.current], () => {
+        setFocusedInMessage(false);
+        trapRef.current = 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 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
+    const getGridColumns = () => {
+        const multiCol = 'repeat(auto-fit, minmax(calc(100% / 4 - 1rem), 1fr))';
+        const singleCol = '1fr';
+        return !isSmallOrAbove ? singleCol : multiCol;
+    };
+    useEffect(() => {
+        if (voiceToTextError) {
+            push({ content: voiceToTextError });
+        }
+    }, [voiceToTextError]);
+    const genAIFooter = (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAIFooter, children: [_jsxs(StyledComposerWrapper, { focused: focused, hasQuestionnaire: !!questionnaireData && !questionnaireDismissed, onFocus: () => setFocused(true), onBlur: e => {
+                    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: () => {
+                                            if (active)
+                                                stop();
+                                        }, autoResize: true }), _jsxs(Flex, { container: {
+                                            direction: 'row',
+                                            justify: 'between',
+                                            gap: 1,
+                                            pad: [undefined, 1, 1, 1]
+                                        }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [!(messages.length === 0 && suggestionCardsView) && suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'simple', icon: 'chat-typing', iconOnly: true, as: StyledMenuSuggestions, menu: {
+                                                            items: suggestions,
+                                                            onItemClick: id => {
+                                                                const selected = menuHelpers.getItem(suggestions, id);
+                                                                if (selected && !selected.onClick) {
+                                                                    setMessage(selected.primary);
+                                                                    textAreaRef.current?.focus();
+                                                                }
+                                                            }
+                                                        }, 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 })] }))] }), (() => {
+                                                if (active && pendingResult.current) {
+                                                    return (_jsxs(Flex, { container: {
+                                                            gap: 1,
+                                                            justify: 'end',
+                                                            alignItems: 'center',
+                                                            pad: 1
+                                                        }, children: [t('processing_speech'), _jsx(Progress, { placement: 'inline' })] }));
+                                                }
+                                                const isToolConfirmation = latestMessage &&
+                                                    isCoachMessage(latestMessage) &&
+                                                    latestMessage.isToolConfirmation;
+                                                let onStopFn;
+                                                if (onStop) {
+                                                    onStopFn = onStop;
+                                                }
+                                                else if (isToolConfirmation) {
+                                                    onStopFn = stopProcess;
+                                                }
+                                                if (onStopFn) {
+                                                    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' }) }));
+                                                }
+                                                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' }) }));
+                                                if (isLoading) {
+                                                    if (isCreatingConversation) {
+                                                        return sendButton;
+                                                    }
+                                                    return (_jsxs(Flex, { container: {
+                                                            gap: 1,
+                                                            justify: 'end',
+                                                            alignItems: 'center',
+                                                            pad: 1
+                                                        }, children: [t('generating_response'), _jsx(Progress, { placement: 'inline' })] }));
+                                                }
+                                                return sendButton;
+                                            })()] })] }) }) })] }), 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: [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] }, 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', 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: {
+                                justify: suggestionCardsView ? undefined : '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, alignItems: 'center' }, children: initialSuggestedMessages?.map(initialSuggestedMessage => (_jsx(InitialSuggestedMessage, { ...initialSuggestedMessage, onSend: initialMessage => {
-                                            onSend(initialMessage);
+                                alignItems: 'center',
+                                gap: 4,
+                                pad: [6, 0, 2, 0]
+                            }, ...(suggestionCardsView ? {} : { item: { grow: 1 } }), children: [((isInUtilities(variant) && variant.state === 'maximized') ||
+                                    !isInUtilities(variant)) &&
+                                    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 => {
+                                            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 && !suggestionCardsView && genAIFooter] })) : (_jsx(Flex, { as: StyledMessagesList, ref: conversationRef, "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);
+                                if (clickedMessage) {
+                                    lastFocusedMessageRef.current = clickedMessage;
+                                }
+                            }, onMouseUp: () => {
+                                mouseTriggeredFocusRef.current = false;
+                            }, onFocus: () => {
+                                if (mouseTriggeredFocusRef.current) {
+                                    mouseTriggeredFocusRef.current = false;
+                                    focusInMessageListRef.current = true;
+                                    return;
+                                }
                                 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;
+                                    const target = lastFocusedMessageRef.current ??
+                                        (conversationRef.current?.lastElementChild instanceof HTMLElement
+                                            ? conversationRef.current.lastElementChild
+                                            : null);
+                                    target?.focus();
                                 }
                                 focusInMessageListRef.current = true;
-                                setArrowKey(null);
                             }, onKeyDown: (e) => {
                                 if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-                                    setArrowKey(e.key);
+                                    if (focusedInMessage)
+                                        return;
                                     elementRef.current =
                                         getMessageContainingElement(document.activeElement) ?? null;
                                     lastFocusedMessageRef.current = elementRef.current;
                                 }
-                                else if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+                                else if (e.key === 'Enter' && !focusedInMessage) {
                                     const activeMessageElement = Array.from(messageEls.values()).find(el => el === document.activeElement);
                                     elementRef.current =
                                         getMessageContainingElement(document.activeElement) ?? null;
                                     initialFocusedElementRef.current = elementRef.current;
                                     if (activeMessageElement &&
                                         getFocusables(activeMessageElement).length > 0) {
-                                        setArrowKey(e.key);
+                                        e.preventDefault();
+                                        trapRef.current = elementRef.current;
+                                        setFocusedInMessage(true);
                                     }
                                 }
+                                else if (e.key === 'Escape' && focusedInMessage) {
+                                    e.preventDefault();
+                                    trapRef.current = null;
+                                    setFocusedInMessage(false);
+                                    elementRef.current?.focus();
+                                }
                                 else if (e.key === 'Tab') {
+                                    if (focusedInMessage)
+                                        return;
                                     e.preventDefault();
                                     setLastFocusableElement();
                                     if (e.shiftKey) {
@@ -306,80 +890,75 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                                         }
                                     }
                                     else {
+                                        if (scrollButtonRef.current) {
+                                            scrollButtonRef.current.focus();
+                                            return;
+                                        }
                                         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,
-                                        suggestions: messages.findLast(messageItem => isCoachMessage(messageItem))?.id ===
-                                            item.id
-                                            ? item.suggestions
-                                            : undefined,
-                                        onSend
+                                        suggestions: latestMessage?.id === item.id ? item.suggestions : undefined,
+                                        onSend,
+                                        onSubmit: item.isToolConfirmation
+                                            ? (tools) => {
+                                                onSend({
+                                                    ...item,
+                                                    message: typeof item.message === 'string' ? item.message : '',
+                                                    tools
+                                                });
+                                            }
+                                            : undefined
                                     }
                                     : item;
-                                return (_jsx(GenAIMessage, { ...messageProps, ref: getMessageCbRef(item.id), testId: item.id, announceInteraction: !focusInMessageListRef.current }));
-                            }) })) })) }), ((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) &&
-                                        latestMessage.loading ? (_jsxs(Flex, { container: {
-                                            gap: 1,
-                                            justify: 'center',
-                                            alignItems: 'center',
-                                            pad: 1
-                                        }, 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, { as: StyledGuidedSuggestions, 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: selected.id,
-                                                            message: selected.primary
-                                                        });
-                                                }
-                                            } }) })), _jsx(Flex, { container: { justify: 'start' }, children: _jsx(StyledDisclaimerText, { inFullPage: !condition, 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 }), 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] }))] })), 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: 'between',
-                                        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
-                                                        });
+                                return (_jsx(GenAIMessage, { ...messageProps, ref: getMessageCbRef(item.id), testId: item.id, announceInteraction: !focusInMessageListRef.current, onAnimationCursorUpdate: animatedTillCursor => {
+                                        if (isCoachMessage(item)) {
+                                            setAnimationInitialCursorPos(animatedTillCursor);
+                                        }
+                                    }, ...(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') ||
+                    !isInUtilities(variant)) &&
+                    !loading && (_jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, ref: setInputContainerRef, children: _jsxs(StyledComposerSection, { children: [guidedMode &&
+                                questionnaireData &&
+                                !questionnaireDismissed &&
+                                !questionnaireData.inline && (_jsx(Questionnaire, { data: questionnaireData, onChange: handleFormChange, onCancel: handleFormCancel }, questionnaireKey)), 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', 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'
+                                                    }
                                                 }
-                                            } })), _jsxs(Flex, { container: { gap: 1, justify: 'end' }, children: [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 })] })), _jsx(Button, { variant: 'primary', onClick: handleSendMessage, children: t('send') })] })] })), _jsx(Flex, { container: { justify: 'start' }, children: _jsx(StyledDisclaimerText, { inFullPage: !condition, children: t('ai_disclaimer') }) })] })) }) }))] })) }));
+                                            }, children: _jsx(MenuButton, { as: StyledGuidedSuggestions, 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 && !selected.onClick) {
+                                                            onSend({
+                                                                id: selected.id,
+                                                                message: selected.primary
+                                                            });
+                                                        }
+                                                    }
+                                                } }) })), _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();
@@ -415,7 +994,8 @@ 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 (_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 })] }));
 };
+const GenAICoach = (props) => (_jsx(Toaster, { children: _jsx(StyledFullscreenWrapper, { children: _jsx(GenAICoachContent, { ...props }) }) }));
 export default withTestIds(GenAICoach, getGenAICoachTestIds);
 //# sourceMappingURL=GenAICoach.js.map