@pega/cosmos-react-work 10.0.0-build.7.0 → 10.0.0-build.8.0

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":"AA8GA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAyChF,eAAO,MAAM,SAAS,+CA2GrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;iCAi8DyB,eAAe;;;AAQ1C,wBAA6D"}
+{"version":3,"file":"GenAICoach.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.tsx"],"names":[],"mappings":"AAgHA,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,GAAG,CAAC;AAiDhF,eAAO,MAAM,SAAS,+CA2GrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+CAQ5B,CAAC;iCA28DyB,eAAe;;;AAQ1C,wBAA6D"}

package/lib/components/GenAICoach/GenAICoach.js

@@ -17,24 +17,30 @@ import * as dockIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/doc
 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 * as clockSlaIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-sla.icon';
 import { getGenAICoachTestIds } from './GenAICoach.test-ids';
 import { getSelectedKeys, isCoachMessage, isInUtilities, isUserMessage } from './GenAICoach.utils';
-import { StyledMessagesContainer, StyledDisclaimerText, StyledGenAICoachContainer, StyledGenAIOptionsMenu, StyledInitialMessageContainer, StyledInputContainer, StyledMenuSuggestions, StyledMessagesList, StyledGridContainer, StyledFlexWrapper, StyledErrorContainer, StyledInput, StyledGuidedSuggestions, StyledComposerSection, StyledSendButton, StyledStopGeneratingButton, StyledGenAIFormControl, StyledGenAITextArea, StyledInitialMessageGrid, StyledGenAIFooter, StyledAgentIcon, StyledActionsContainer, StyledHeaderContainer, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge, StyledSalutation, StyledSubHeading, StyledComposerWrapper, StyledBannerSalutationBlock, StyledComposerSelector, StyledSimplifiedInitialMessageGrid } 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, StyledHeaderContainer, StyledFullscreenWrapper, StyledScrollButton, StyledSuggestionCardsView, StyledSuggestionCardsBottomHalf, StyledStickyComposer, StyledAISuggestedBadge, StyledSalutation, StyledSubHeading, StyledComposerWrapper, StyledBannerSalutationBlock, StyledComposerSelector, StyledSimplifiedInitialMessageGrid, StyledConversationHistoryButton } 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, squareSolidIcon, sendSolidIcon, plusIcon, dockIcon, undockIcon, caretLeftIcon, caretRightIcon, moreAltIcon);
+registerIcon(caretUpIcon, timesIcon, caretDownIcon, minusIcon, polarisSolidIcon, paperClipIcon, warnSolidIcon, squareSolidIcon, sendSolidIcon, plusIcon, dockIcon, undockIcon, caretLeftIcon, caretRightIcon, clockSlaIcon, moreAltIcon);
 const onHeightTransitionEnd = (el, callback) => {
     const handler = (e) => {
         if (e.propertyName !== 'height' || e.target !== el)
             return;
         el.removeEventListener('transitionend', handler);
+        el.removeEventListener('transitioncancel', handler);
         callback();
     };
     el.addEventListener('transitionend', handler);
-    return () => el.removeEventListener('transitionend', handler);
+    el.addEventListener('transitioncancel', handler);
+    return () => {
+        el.removeEventListener('transitionend', handler);
+        el.removeEventListener('transitioncancel', handler);
+    };
 };
 const buildInitialFormAnswers = (questions = []) => Object.fromEntries(questions.map(question => [
     question.field,
@@ -98,7 +104,7 @@ const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef,
     }
     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, simplifiedAgent = false, subHeading, operatorName, agentModeProps, modelSelectorProps, ...restProps }) => {
+const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachChange: onCoachChangeProp, messages = [], onSend, initialSuggestedMessages, suggestions, loading, error, variant, onOpen, guidedMode = false, actions, onNewChat, conversationHistory, onConversationHistoryOpen, 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, simplifiedAgent = false, subHeading, operatorName, agentModeProps, modelSelectorProps, ...restProps }) => {
     const scrollTolerancePx = 2;
     const scrollThresholdPx = 50;
     const streamBufferLh = simplifiedAgent ? 15 : 5;
@@ -115,15 +121,15 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     const genAICoachRef = useRef(null);
     const [messageEls, getMessageCbRef] = useRefMap();
     const [showInitialScreen, setShowInitialScreen] = useState(true);
-    const prevExpandedHeightRef = useRef(0);
     const agentInBanner = simplifiedAgent && variant.placement === 'fullpage';
+    const historyOpen = !!conversationHistory;
     const agentExpanded = simplifiedAgent && messages.length > 0;
     const hasAgentResponse = messages.some(msg => isCoachMessage(msg) && !msg.loading);
     const focusInMessageListRef = useRef(false);
     const mouseTriggeredFocusRef = useRef(false);
     const isUserTriggered = useRef(false);
     const userInitiatedSendRef = useRef(false);
-    const userInitiatedNewChatRef = useRef(false);
+    const prevHeightRef = useRef(0);
     const showNextCoachSender = useRef(true);
     const lastFocusedMessageRef = useRef(null);
     const initialFocusedElementRef = useRef(null);
@@ -498,6 +504,9 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             return;
         if (simplifiedAgent) {
             userInitiatedSendRef.current = true;
+            if (agentInBanner && messages.length === 0) {
+                prevHeightRef.current = genAICoachRef.current?.getBoundingClientRect().height ?? 0;
+            }
         }
         onSend({
             id: createUID(),
@@ -542,11 +551,9 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                             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 }), simplifiedAgent && (_jsx(HeaderActions, { actions: actions, allowFullScreen: allowFullScreen, variant: variant, isUserTriggeredRef: isUserTriggered, onFullscreenToggle: toggleFullscreen, isFullscreen: fullScreen, selectedCoach: selectedCoach, actionsTestId: testIds.actions, simplifiedAgent: true })), onNewChat && (_jsx(Button, { icon: true, variant: 'simple', label: simplifiedAgent ? t('close') : t('new_chat'), "aria-label": simplifiedAgent ? t('close_chat_with_ai') : t('new_chat'), onClick: () => {
-                                if (simplifiedAgent && genAICoachRef.current) {
-                                    prevExpandedHeightRef.current =
-                                        genAICoachRef.current.getBoundingClientRect().height;
+                                if (agentInBanner && genAICoachRef.current) {
+                                    prevHeightRef.current = genAICoachRef.current.getBoundingClientRect().height;
                                 }
-                                userInitiatedNewChatRef.current = true;
                                 if (simplifiedAgent && conversationHistory) {
                                     conversationHistory.onDismiss();
                                 }
@@ -607,38 +614,16 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                 textAreaRef.current?.focus();
         }
     }, [draftMessage, suggestionCardsView]);
-    useLayoutEffect(() => {
-        if (!agentInBanner ||
-            !genAICoachRef.current ||
-            messages.length !== 0 ||
-            (loading && conversationHistory))
-            return;
+    const animateHeightFrom = useCallback((fromHeight) => {
         const el = genAICoachRef.current;
-        const currentHeight = el.getBoundingClientRect().height;
-        const storedHeight = parseFloat(el.style.getPropertyValue('--compact-height')) || 0;
-        if (storedHeight > 0 && Math.abs(currentHeight - storedHeight) > scrollTolerancePx)
-            return;
-        el.style.removeProperty('--compact-height');
-        const naturalHeight = el.getBoundingClientRect().height;
-        el.style.setProperty('--compact-height', `${naturalHeight}px`);
-    });
-    useLayoutEffect(() => {
-        if (!agentInBanner || messages.length !== 0)
-            return;
-        if (!userInitiatedNewChatRef.current || !genAICoachRef.current)
+        if (!el)
             return;
-        userInitiatedNewChatRef.current = false;
-        const el = genAICoachRef.current;
-        const fromHeight = prevExpandedHeightRef.current;
-        const toHeight = parseFloat(el.style.getPropertyValue('--compact-height')) || 0;
-        if (!fromHeight || !toHeight)
+        const toHeight = el.getBoundingClientRect().height;
+        if (Math.abs(fromHeight - toHeight) <= scrollTolerancePx)
             return;
-        el.style.height = `${fromHeight}px`;
         el.style.transition = 'none';
-        const removeListener = onHeightTransitionEnd(el, () => {
-            el.style.removeProperty('height');
-            prevExpandedHeightRef.current = 0;
-        });
+        el.style.height = `${fromHeight}px`;
+        const removeListener = onHeightTransitionEnd(el, () => el.style.removeProperty('height'));
         const rafId = requestAnimationFrame(() => {
             el.getBoundingClientRect();
             el.style.removeProperty('transition');
@@ -647,8 +632,19 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
         return () => {
             cancelAnimationFrame(rafId);
             removeListener();
+            el.style.removeProperty('height');
+            el.style.removeProperty('transition');
         };
-    }, [messages.length, agentInBanner]);
+    }, []);
+    useLayoutEffect(() => {
+        const fromHeight = prevHeightRef.current;
+        if (!agentInBanner || !fromHeight || historyOpen)
+            return;
+        if (messages.length === 0 && !showInitialScreen)
+            return;
+        prevHeightRef.current = 0;
+        return animateHeightFrom(fromHeight);
+    }, [messages.length, agentInBanner, showInitialScreen, historyOpen, animateHeightFrom]);
     useEffect(() => {
         if (!agentInBanner)
             return;
@@ -890,7 +886,7 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                             justify: 'between',
                                             gap: 2,
                                             pad: [undefined, 1, 1, 1]
-                                        }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, item: { grow: 1, shrink: 1, basis: '0%' }, children: [!(messages.length === 0 && suggestionCardsView) && suggestions && (_jsx(MenuButton, { text: t('suggestions'), variant: 'simple', icon: 'chat-typing', iconOnly: true, as: StyledMenuSuggestions, menu: {
+                                        }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, item: { grow: 1, shrink: 1, basis: '0%' }, children: [agentInBanner && messages.length === 0 && onConversationHistoryOpen && (_jsx(Flex, { container: { alignItems: 'center' }, as: StyledConversationHistoryButton, children: _jsx(Button, { icon: true, variant: 'simple', label: t('your_chats'), onClick: onConversationHistoryOpen, children: _jsx(Icon, { name: 'clock-sla' }) }) })), !(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);
@@ -960,7 +956,7 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
         !fullScreen &&
         !isInLandingPageUtilities &&
         messages.length === 0 &&
-        !(simplifiedAgent && loading && conversationHistory);
+        !(agentInBanner && historyOpen);
     const fullPageAndInitialScreen = (fullScreen || (variant.placement === 'fullpage' && !isInLandingPageUtilities)) &&
         messages.length === 0;
     const renderTextArea = agentInBanner || !fullPageAndInitialScreen ? genAIFooter : null;
@@ -1181,6 +1177,9 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             conversationHistory.onItemClick?.(conversationId);
         }, onDismiss: () => {
             focusTextArea.current = true;
+            if (agentInBanner && messages.length === 0 && genAICoachRef.current) {
+                prevHeightRef.current = genAICoachRef.current.getBoundingClientRect().height;
+            }
             conversationHistory.onDismiss();
         }, inFullPage: !condition, ref: historyViewRef }));
     return (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, as: StyledGenAICoachContainer, "data-testid": testIds.root, variant: variant, fullScreen: fullScreen, isCompact: isCompact, isPortalAgent: isPortalAgent, simplifiedAgent: simplifiedAgent, ref: genAICoachRef, children: [_jsx(Flex, { as: agentExpanded ? StyledHeaderContainer : undefined, container: {