@pega/cosmos-react-work 9.0.0-build.26.2 → 9.0.0-build.27.1

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":"AAsGA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAmBhF,eAAO,MAAM,SAAS,+CAmDrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;iCAigDyB,eAAe;;;AAQ1C,wBAA6D"}
+{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AAsGA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAmBhF,eAAO,MAAM,SAAS,+CAmDrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;iCAkjDyB,eAAe;;;AAQ1C,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, useFullscreenContext, useBreakpoint, Grid, useRefMap, VisuallyHiddenText, FileList, Lightbox, FormField, useUID, SpeechToTextButton, Toaster, useToaster, throttle } 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, 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';
@@ -117,10 +117,13 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     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(',') ?? '';
@@ -132,6 +135,11 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     const handleFormChange = useCallback((answers) => {
         setFormAnswers(answers);
     }, []);
+    const handleFormCancel = () => {
+        setFormAnswers(undefined);
+        setQuestionnaireDismissed(true);
+        textAreaRef.current?.focus();
+    };
     const latestMessage = messages.at(-1);
     const isLatestAgentMessageStreaming = !!latestMessage && isCoachMessage(latestMessage) && !!latestMessage.loading;
     const shouldKeepSplitLayoutDuringFullscreenToggle = !!conversationHistory &&
@@ -291,6 +299,12 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             scrollState.userAtBottom = true;
         }
         setShowScrollToBottom(false);
+        const lastMessage = conversationRef.current?.lastElementChild;
+        if (lastMessage instanceof HTMLElement) {
+            lastFocusedMessageRef.current = lastMessage;
+            focusInMessageListRef.current = true;
+            lastMessage.focus();
+        }
     }, [scrollToLatest]);
     const setInputContainerRef = useCallback((el) => {
         if (inputContainerRef.current === el)
@@ -407,7 +421,7 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
         return isInUtilities(variant) && variant.state === 'minimized' ? (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'h2', children: selectedCoach }), _jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(Button, { icon: true, label: t('maximize'), "aria-label": t('agent_noun', [t('maximize')]), variant: 'simple', onClick: () => {
                             variant.onStateChange('maximized');
                             isUserTriggered.current = true;
-                        }, children: _jsx(Icon, { name: 'caret-up' }) }) })] })) : (_jsxs(_Fragment, { children: [renderCoachOptions, _jsxs(Flex, { container: { gap: 0.5 }, as: StyledActionsContainer, children: [activeCases && _jsx(ActiveCases, { activeCases: activeCases }), onNewChat && (_jsx(Button, { icon: true, variant: 'simple', label: t('new_chat'), "aria-label": t('new_chat'), onClick: onNewChat, children: _jsx(Icon, { name: 'plus' }) })), _jsx(HeaderActions, { actions: actions, allowFullScreen: allowFullScreen, variant: variant, isUserTriggeredRef: isUserTriggered, onFullscreenToggle: toggleFullscreen, isFullscreen: fullScreen, selectedCoach: selectedCoach, actionsTestId: testIds.actions }), variant.placement === 'dialog' && (_jsx(Button, { icon: true, label: t('close'), "aria-label": t('close_chat_with_ai'), variant: 'simple', onClick: variant.onClose, children: _jsx(Icon, { name: 'times' }) }))] })] }));
+                        }, 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)
@@ -423,11 +437,27 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                 getMessageContainingElement(lastFocusedMessageRef.current) ?? null;
         }
     };
+    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 (questionnaireData) {
+            setQuestionnaireDismissed(false);
+            setFormAnswers(undefined);
+        }
+    }, [questionnaireData]);
     useEffect(() => {
         if (suggestionCardsView && draftMessage !== undefined) {
             setMessage(draftMessage);
@@ -472,7 +502,6 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                 textAreaRef.current?.focus();
                 setLastFocusableElement();
                 elementRef.current = null;
-                setArrowKey(null);
             }
             else if (latestMessage?.loading) {
                 isGeneratingResponse.current = true;
@@ -562,16 +591,29 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             setShowScrollToBottom(false);
         }
     }, [messages.length, loading, error]);
-    /** Supports arrow key behaviors */
+    /** Supports Enter key to enter a message and focus first focusable element inside it */
     useEffect(() => {
+        if (!focusedInMessage)
+            return;
         const focusables = getFocusables(elementRef);
-        if (arrowKey === 'ArrowRight') {
-            focusables[0]?.focus();
-        }
-        else if (arrowKey === 'ArrowLeft') {
-            focusables[focusables.length - 1]?.focus();
-        }
-    }, [arrowKey, elementRef.current]);
+        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',
@@ -579,15 +621,10 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
         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();
@@ -615,11 +652,11 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             push({ content: voiceToTextError });
         }
     }, [voiceToTextError]);
-    const genAIFooter = (_jsxs(Flex, { container: { direction: 'column' }, as: StyledGenAIFooter, children: [_jsxs(StyledComposerWrapper, { focused: focused, hasQuestionnaire: !!questionnaireData, onFocus: () => setFocused(true), onBlur: e => {
+    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 && (_jsx(Questionnaire, { data: questionnaireData, onChange: handleFormChange }, questionnaireKey)), _jsx(FormField, { label: t('message_pega_gen_ai_coach'), labelHidden: true, labelFor: composerId, children: _jsx(StyledGenAIFormControl, { focused: !questionnaireData && focused, children: _jsxs(Flex, { container: { direction: 'column', gap: 0.25 }, children: [_jsx(StyledGenAITextArea, { id: composerId, ref: textAreaRef, value: interimMessage ? `${message}${interimMessage}` : message, placeholder: t('write_message'), onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: () => {
+                }, children: [questionnaireData && !questionnaireDismissed && (_jsx(Questionnaire, { data: questionnaireData, onChange: handleFormChange, onCancel: handleFormCancel }, questionnaireKey)), _jsx(FormField, { label: t('message_pega_gen_ai_coach'), labelHidden: true, labelFor: composerId, children: _jsx(StyledGenAIFormControl, { focused: (!questionnaireData || questionnaireDismissed) && focused, 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: {
@@ -722,37 +759,43 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                             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' }, onFocus: () => {
                                 if (!focusInMessageListRef.current) {
-                                    if (lastFocusedMessageRef.current) {
-                                        lastFocusedMessageRef.current.focus();
-                                    }
-                                    else {
-                                        /** Focus on the latest message if the chat message list was never focused */
-                                        const lastChild = conversationRef.current && conversationRef.current.lastElementChild;
-                                        if (lastChild instanceof HTMLElement) {
-                                            lastChild.focus();
-                                        }
-                                    }
+                                    focusInMessageListRef.current = true;
+                                    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) {
@@ -778,15 +821,17 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                         }
                                     }
                                     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 => {
@@ -814,11 +859,11 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                             setAnimationInitialCursorPos(animatedTillCursor);
                                         }
                                     }, ...(prevFullScreen !== fullScreen ? { animationInitialCursorPos } : {}) }));
-                            }) })) })) }), !loading && messages.length === 0 && suggestionCardsView ? (_jsxs(_Fragment, { children: [((isInUtilities(variant) && variant.state !== 'minimized') ||
+                            }) })) })) }), 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, { 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 && (_jsx(Questionnaire, { data: questionnaireData, onChange: handleFormChange }, questionnaireKey)), guidedMode ? (_jsx(_Fragment, { children: suggestions && messages.length > 0 && (_jsxs(_Fragment, { children: [latestMessage &&
+                    !loading && (_jsx(Flex, { container: { direction: 'column' }, as: StyledInputContainer, ref: setInputContainerRef, children: _jsxs(StyledComposerSection, { children: [guidedMode && questionnaireData && !questionnaireDismissed && (_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,
@@ -844,7 +889,7 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                                             });
                                                         }
                                                     }
-                                                } }) })), _jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledDisclaimerText, { inFullPage: !condition, children: t('ai_disclaimer') }) })] })) })) : (renderTextArea)] }) }))), showScrollToBottom && (_jsx(StyledScrollButton, { icon: true, onClick: handleScrollToBottomClick, ariaLabel: t('scroll_to_latest_message'), children: _jsx(Icon, { name: 'caret-down' }) }))] })) }));
+                                                } }) })), _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();