@pega/cosmos-react-work 8.29.0 → 8.31.0

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

@@ -1,7 +1,6 @@
-import type { FunctionComponent } from 'react';
 import { type GenAICoachProps } from '.';
 export declare const AgentIcon: () => import("react/jsx-runtime").JSX.Element;
-declare const _default: FunctionComponent<GenAICoachProps> & {
+declare const _default: (({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages, onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode, actions, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, showSalutation, salutation, allowFullScreen, isInLandingPageUtilities, voiceToTextProps, disclaimerMessage, ...restProps }: GenAICoachProps) => import("react/jsx-runtime").JSX.Element) & {
     getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["user-message", "coach-message", "actions", "attachments"]>;
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAqF5D,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAchF,eAAO,MAAM,SAAS,+CAmDrB,CAAC;;;;AA47BF,wBAA6D"}
+{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AAyFA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAchF,eAAO,MAAM,SAAS,+CAmDrB,CAAC;6bA+BC,eAAe;;;AA0xClB,wBAA6D"}

package/lib/components/GenAICoach/GenAICoach.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Flex, Icon, MenuButton, Progress, Text, createUID, menuHelpers, useI18n, useSpeechRecognition, useTestIds, useTheme, withTestIds, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, useArrows, focusableSelector, useLiveLog, useOuterEvent, ThemeOverride, hasProp, getActiveElement, useElement, Actions, useBreakpoint, Grid, useRefMap, VisuallyHiddenText, FileList, Lightbox, FullscreenButton, FormField, useUID, SpeechToTextButton, Toaster, useToaster } from '@pega/cosmos-react-core';
+import { Button, Flex, Icon, MenuButton, Progress, Text, createUID, menuHelpers, useI18n, useSpeechRecognition, useTestIds, useTheme, withTestIds, registerIcon, usePrevious, getFocusables, isMenuGroupProps, ErrorState, useArrows, focusableSelector, useLiveLog, useOuterEvent, ThemeOverride, hasProp, getActiveElement, useElement, Actions, useBreakpoint, Grid, useRefMap, VisuallyHiddenText, FileList, Lightbox, FullscreenButton, FormField, 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';
@@ -12,7 +12,7 @@ import * as chatTypingIcon from '@pega/cosmos-react-core/lib/components/Icon/ico
 import * as sendSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/send-solid.icon';
 import { getGenAICoachTestIds } from './GenAICoach.test-ids';
 import { isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
-import { StyledMessagesContainer, StyledDisclaimerText, StyledDisclaimerDivider, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledActionsContainer, StyledGenAIFooter, StyledAgentIcon, StyledFullscreenWrapper, StyledSalutation } from './GenAICoach.styles';
+import { StyledMessagesContainer, StyledDisclaimerText, StyledDisclaimerDivider, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledGenAIFooter, StyledAgentIcon, StyledFullscreenWrapper, StyledSalutation, StyledActionsContainer, StyledScrollButton } from './GenAICoach.styles';
 import ConversationHistory from './ConversationHistory';
 import { GenAIMessage, InitialSuggestedMessage } from '.';
 registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, chatTypingIcon, sendSolidIcon);
@@ -25,6 +25,12 @@ export const AgentIcon = () => {
 };
 const VOICE_ERROR_DISMISS_DURATION = 3000;
 const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, conversationHistory, onLayoutChange, onAddAttachment, attachments, attachmentsError, lightboxPreviewProps, showSalutation = true, salutation, allowFullScreen = true, isInLandingPageUtilities, voiceToTextProps, disclaimerMessage, ...restProps }) => {
+    const scrollTolerancePx = 2;
+    const scrollThresholdPx = 50;
+    const streamBufferLh = 20;
+    const bufferExtensionLh = 2;
+    const scrollThrottleMs = 50;
+    const resizeThrottleMs = 33;
     const theme = useTheme();
     const t = useI18n();
     const testIds = useTestIds(testId, getGenAICoachTestIds);
@@ -34,9 +40,11 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
     const genAICoachRef = useRef(null);
     const [messageEls, getMessageCbRef] = useRefMap();
     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);
@@ -46,6 +54,20 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
     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
+    });
     const isSmallOrAbove = useBreakpoint('sm', {
         breakpointRef: genAICoachRef
     });
@@ -56,15 +78,183 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
     const [isComposerFocused, setIsComposerFocused] = useState(false);
     const [animationInitialCursorPos, setAnimationInitialCursorPos] = useState(0);
     const [fullScreen, setFullScreen] = useState(false);
+    const [showScrollToBottom, setShowScrollToBottom] = useState(false);
     const prevFullScreen = usePrevious(fullScreen);
     const previousMessages = usePrevious(messages);
     const composerId = useUID();
     const latestMessage = messages.at(-1);
+    const firstMessageId = messages.at(0)?.id;
+    const isLatestAgentMessageStreaming = !!latestMessage && isCoachMessage(latestMessage) && !!latestMessage.loading;
     const condition = !(fullScreen && conversationHistory) &&
         (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);
+    }, [scrollToLatest]);
+    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 => {
@@ -207,6 +397,9 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
         window.addEventListener('resize', onResize);
         return () => {
             window.removeEventListener('resize', onResize);
+            Object.values(observersRef.current).forEach(observer => {
+                observer?.disconnect();
+            });
         };
     }, []);
     useEffect(() => {
@@ -214,12 +407,6 @@ 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();
@@ -234,6 +421,71 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
             }
         }
     }, [messages]);
+    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(() => {
+        updateScrollState(false);
+        setShowScrollToBottom(false);
+    }, [firstMessageId, updateScrollState]);
+    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') });
@@ -339,9 +591,9 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
     const fullPageAndInitialScreen = (fullScreen || (variant.placement === 'fullpage' && !isInLandingPageUtilities)) &&
         messages.length === 0;
     const renderTextArea = fullPageAndInitialScreen ? null : genAIFooter;
-    const GenAICoachElement = (_jsx(_Fragment, { children: ((isInUtilities(variant) && variant.state !== 'minimized') || !isInUtilities(variant)) && (_jsxs(Flex, { container: { direction: 'column' }, as: StyledFlexWrapper, children: [_jsx(Flex, { as: StyledMessagesContainer, ref: messageContainerRef, container: loading || error
+    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: setMessageContainerRef, 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: {
+                        : { direction: 'column', pad: [0, 2] }, 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: 'center',
                                 direction: 'column',
                                 alignItems: 'center',
@@ -360,7 +612,21 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                                             }
                                             isUserTriggered.current = true;
                                             textAreaRef.current?.focus();
-                                        }, testId: initialSuggestedMessage.id }))) }), fullPageAndInitialScreen && !guidedMode && genAIFooter] })) : (_jsxs(Flex, { as: StyledMessagesList, ref: conversationRef, "aria-label": `${t('conversation')} ${t('view')}`, container: { direction: 'column' }, onFocus: () => {
+                                        }, testId: initialSuggestedMessage.id }))) }), fullPageAndInitialScreen && !guidedMode && genAIFooter] })) : (_jsxs(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();
@@ -456,7 +722,7 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                                             }
                                         }, ...(prevFullScreen !== fullScreen ? { animationInitialCursorPos } : {}) }));
                                 })] })) })) }), ((isInUtilities(variant) && variant.state !== 'minimized') || !isInUtilities(variant)) &&
-                    !loading && (_jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, children: _jsx(StyledComposerSection, { children: guidedMode ? (_jsx(_Fragment, { children: suggestions && messages.length > 0 && (_jsxs(_Fragment, { children: [latestMessage &&
+                    !loading && (_jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, ref: setInputContainerRef, 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,
@@ -482,7 +748,7 @@ const GenAICoach = ({ testId, coachOptions: coachOptionsProps, onCoachChange: on
                                                         });
                                                     }
                                                 }
-                                            } }) })), _jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledDisclaimerText, { inFullPage: !condition, children: t('ai_disclaimer') }) })] })) })) : (renderTextArea) }) }))] })) }));
+                                            } }) })), _jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledDisclaimerText, { inFullPage: !condition, children: t('ai_disclaimer') }) })] })) })) : (renderTextArea) }) })), showScrollToBottom && (_jsx(StyledScrollButton, { icon: true, onClick: handleScrollToBottomClick, "aria-label": t('scroll_to_latest_message'), children: _jsx(Icon, { name: 'caret-down' }) }))] })) }));
     useEffect(() => {
         if (focusTextArea.current && !conversationHistory && textAreaRef.current) {
             textAreaRef.current.focus();