@pega/cosmos-react-work 9.0.0-build.29.2 → 9.0.0-build.29.21

package/lib/components/GenAICoach/GenAICoach.js

@@ -36,7 +36,7 @@ export const AgentIcon = () => {
 };
 export const AISuggestedBadge = () => {
     const t = useI18n();
-    return (_jsxs(StyledAISuggestedBadge, { container: { alignItems: 'center', gap: 0.5 }, children: [_jsx(Icon, { name: 'polaris-solid', "aria-hidden": true }), _jsx(Text, { children: t('ai_suggestion') })] }));
+    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();
@@ -71,7 +71,7 @@ const HeaderActions = ({ actions, allowFullScreen, variant, isUserTriggeredRef,
         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, questionnaireData, onQuestionnaireDismiss, ...restProps }) => {
+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;
@@ -113,7 +113,9 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
     const observersRef = useRef({
         inputContainer: null,
         messageContainer: null,
-        streamingMessage: null
+        streamingMessage: null,
+        tileSync: null,
+        tileMutation: null
     });
     const isSmallOrAbove = useBreakpoint('sm', {
         breakpointRef: genAICoachRef
@@ -311,6 +313,53 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
             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;
@@ -464,9 +513,10 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
         }
     }, [questionnaireData]);
     useEffect(() => {
-        if (suggestionCardsView && draftMessage !== undefined) {
+        if (draftMessage !== undefined) {
             setMessage(draftMessage);
-            textAreaRef.current?.focus();
+            if (suggestionCardsView || draftMessage)
+                textAreaRef.current?.focus();
         }
     }, [draftMessage, suggestionCardsView]);
     useEffect(() => {
@@ -661,7 +711,7 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                     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, 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: () => {
+                }, 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: {
@@ -877,7 +927,7 @@ const GenAICoachContent = ({ testId, coachOptions: coachOptionsProps, onCoachCha
                                     }, ...(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, { children: suggestionCardsView }) })] })) : (((isInUtilities(variant) && variant.state !== 'minimized') ||
+                            !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 &&