@pega/cosmos-react-work 9.0.0-build.14.5 → 9.0.0-build.14.7

package/lib/components/GenAICoach/GenAICoach.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenAICoach.types.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Dispatch, Ref, SetStateAction } from 'react';\n\nimport type {\n  BaseProps,\n  MenuProps,\n  OmitStrict,\n  ProgressProps,\n  RequireAtLeastOne,\n  TestIdProp,\n  WithAttributes,\n  ActionsProps,\n  FileItemProps,\n  FileDisplayProps,\n  LightboxProps\n} from '@pega/cosmos-react-core';\nimport type { MDMap } from '@pega/cosmos-react-rte';\n\nexport type State = 'minimized' | 'maximized';\nexport type Reaction = 'liked' | 'disliked';\n\nexport type Variant =\n  | {\n      placement: 'utilities';\n      state: State;\n      onStateChange: (state: State) => void;\n      setGenAIHeight?: Dispatch<SetStateAction<number | undefined>>;\n    }\n  | { placement: 'fullpage' }\n  | { placement: 'dialog'; onClose: () => void };\n\nexport interface MessageProps {\n  id: string;\n  message: string;\n  announceInteraction?: boolean;\n  attachments?: FileDisplayProps[];\n  /**\n   * Whether the message is a suggestion from the composer\n   * @default false\n   */\n  fromComposer?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport type InitialSuggestedMessageProps = Pick<GenAICoachProps, 'onSend'> &\n  BaseProps &\n  TestIdProp &\n  MessageProps;\n\nexport interface UserMessageProps extends BaseProps, TestIdProp, MessageProps {\n  from: 'user';\n}\n\nexport type ToolParameters = {\n  id: string;\n  label: string;\n  type: 'text' | 'number' | 'boolean';\n  value: string;\n};\n\nexport interface Tool {\n  id: string;\n  name: string;\n  message: string;\n  decision: 'accept' | 'modify' | 'reject';\n  parameters: ToolParameters[];\n}\n\nexport interface ToolDetailsProps {\n  isToolConfirmation: true;\n  tools: Tool[];\n  onSubmit?: (tools: Tool[]) => void;\n  onCancel?: () => void;\n  toolsConfirmed: boolean;\n}\n\nexport type CoachMessageProps = RequireAtLeastOne<\n  Partial<Pick<GenAICoachProps, 'onSend'>> &\n    BaseProps &\n    TestIdProp &\n    Pick<MessageProps, 'id' | 'announceInteraction' | 'ref'> &\n    (\n      | ToolDetailsProps\n      | {\n          isToolConfirmation?: false;\n          tools?: never;\n          onSubmit?: never;\n          onCancel?: never;\n          toolsConfirmed?: never;\n        }\n    ) & {\n      from: 'coach';\n      coachName: string;\n      suggestions?: MessageProps[];\n      loading?: boolean;\n      enableStreaming?: boolean;\n      allChunksReceived?: boolean;\n      error?: string;\n      message?: MessageProps['message'];\n      markdownMap?: MDMap;\n      onStreamingUpdate?: (isStreamingDone: boolean) => void;\n      feedback?: {\n        reaction: Reaction | undefined;\n        onReaction: (id: MessageProps['id'], reaction: Reaction) => void;\n        onFeedbackComplete: (id: MessageProps['id'], comment?: string) => void;\n      };\n      onAnimationCursorUpdate?: (animatedTillCursor: number) => void;\n      animationInitialCursorPos?: number;\n    },\n  'loading' | 'message' | 'error'\n>;\n\nexport interface SystemMessageProps\n  extends TestIdProp,\n    Pick<MessageProps, 'id' | 'message' | 'ref' | 'announceInteraction'> {\n  from: 'system';\n  loading?: boolean;\n}\n\nexport type GenAIMessageProps = UserMessageProps | CoachMessageProps | SystemMessageProps;\n\nexport interface ConversationHistoryProps extends TestIdProp {\n  /** List of History items. */\n  data: {\n    id: string;\n    section: string;\n    conversations: {\n      id: string;\n      title: string;\n    }[];\n  }[];\n  /** Click event for items within the list. */\n  onItemClick?: (conversationId: string) => void;\n  /** List loading state. */\n  loading?: boolean;\n  /** Called at scroll trigger to load more items. */\n  loadMore?: () => void;\n  /** True if History view is rendered in Full page view.  */\n  inFullPage?: boolean;\n  /** Callback triggered when closing the history view. */\n  onDismiss: () => void;\n  /** Id of the selected item. */\n  selectedItemId?: string;\n  /** Set if there is an error in retreiving the data. */\n  error?: string;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport type SendMessageProps = OmitStrict<MessageProps, 'attachments'> & {\n  attachmentIds?: string[];\n  tools?: Tool[];\n};\n\nexport type GenAICoachProps = WithAttributes<\n  'div',\n  TestIdProp & {\n    /** Chat loading indicator */\n    loading?: boolean | ProgressProps['message'];\n    /** Set if there is an error in retreiving the data */\n    error?: string;\n    /** Coaches available in the chat header */\n    coachOptions: MenuProps['items'];\n    /** Handle the coach selections */\n    onCoachChange: (id: MenuProps['id']) => void;\n    /** Suggested messages to start the conversation */\n    initialSuggestedMessages?: MessageProps[];\n    /** Additional suggestions presented at the bottom of the chat window */\n    suggestions?: MenuProps['items'];\n    /** Send prompts */\n    onSend: (message: SendMessageProps) => void;\n\n    stopProcess?: () => void;\n    /** Messages to be shown in the chatting window. */\n    messages?: GenAIMessageProps[];\n    /** Placement of the component   */\n    variant: Variant;\n    /** From landing page utilities */\n    isInLandingPageUtilities?: boolean;\n    /** callback when component is mounted */\n    onOpen?: () => void;\n    /**\n     * User would be guided with selective prompts to enable interaction with coach.\n     * @default false\n     */\n    guidedMode?: boolean;\n    /** Pass an array of Action objects to show Action button. */\n    actions?: ActionsProps;\n    /** Pass data to show history view. */\n    conversationHistory?: ConversationHistoryProps;\n    /** Callback triggered when the layout component changes. */\n    onLayoutChange?: (inFullPage: boolean) => void;\n    /** Callback when attachment icon is clicked */\n    onAddAttachment?: (files: File[]) => void;\n    /** Attachments list */\n    attachments?: FileItemProps[];\n    /** Error in attachments */\n    attachmentsError?: string;\n    /** Configuration for the Lightbox component that handles preview of media attachments and files */\n    lightboxPreviewProps?: LightboxProps;\n    /** Enable full screen */\n    allowFullScreen?: boolean;\n    /** Enable voice to text */\n    voiceToTextProps?: {\n      enableDictation: boolean;\n      langCode: string;\n    };\n  }\n>;\n\nexport interface UtilitiesGenAICoachProps extends OmitStrict<GenAICoachProps, 'variant'> {\n  onClose?: () => void;\n}\n"]}
+{"version":3,"file":"GenAICoach.types.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAICoach.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Dispatch, Ref, SetStateAction } from 'react';\n\nimport type {\n  BaseProps,\n  MenuProps,\n  OmitStrict,\n  ProgressProps,\n  RequireAtLeastOne,\n  TestIdProp,\n  WithAttributes,\n  ActionsProps,\n  FileItemProps,\n  FileDisplayProps,\n  LightboxProps\n} from '@pega/cosmos-react-core';\nimport type { MDMap } from '@pega/cosmos-react-rte';\n\nexport type State = 'minimized' | 'maximized';\nexport type Reaction = 'liked' | 'disliked';\nexport type FeedbackPrompt = 'liked' | 'disliked' | 'both';\n\nexport type Variant =\n  | {\n      placement: 'utilities';\n      state: State;\n      onStateChange: (state: State) => void;\n      setGenAIHeight?: Dispatch<SetStateAction<number | undefined>>;\n    }\n  | { placement: 'fullpage' }\n  | { placement: 'dialog'; onClose: () => void };\n\nexport interface MessageProps {\n  id: string;\n  message: string;\n  announceInteraction?: boolean;\n  attachments?: FileDisplayProps[];\n  /**\n   * Whether the message is a suggestion from the composer\n   * @default false\n   */\n  fromComposer?: boolean;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport type InitialSuggestedMessageProps = Pick<GenAICoachProps, 'onSend'> &\n  BaseProps &\n  TestIdProp &\n  MessageProps;\n\nexport interface UserMessageProps extends BaseProps, TestIdProp, MessageProps {\n  from: 'user';\n}\n\nexport type ToolParameters = {\n  id: string;\n  label: string;\n  type: 'text' | 'number' | 'boolean';\n  value: string;\n};\n\nexport interface Tool {\n  id: string;\n  name: string;\n  message: string;\n  decision: 'accept' | 'modify' | 'reject';\n  parameters: ToolParameters[];\n}\n\nexport interface ToolDetailsProps {\n  isToolConfirmation: true;\n  tools: Tool[];\n  onSubmit?: (tools: Tool[]) => void;\n  onCancel?: () => void;\n  toolsConfirmed: boolean;\n}\n\nexport type CoachMessageProps = RequireAtLeastOne<\n  Partial<Pick<GenAICoachProps, 'onSend'>> &\n    BaseProps &\n    TestIdProp &\n    Pick<MessageProps, 'id' | 'announceInteraction' | 'ref'> &\n    (\n      | ToolDetailsProps\n      | {\n          isToolConfirmation?: false;\n          tools?: never;\n          onSubmit?: never;\n          onCancel?: never;\n          toolsConfirmed?: never;\n        }\n    ) & {\n      from: 'coach';\n      coachName: string;\n      suggestions?: MessageProps[];\n      loading?: boolean;\n      enableStreaming?: boolean;\n      allChunksReceived?: boolean;\n      error?: string;\n      message?: MessageProps['message'];\n      messageActions?: ActionsProps;\n      markdownMap?: MDMap;\n      onStreamingUpdate?: (isStreamingDone: boolean) => void;\n      feedback?: {\n        reaction: Reaction | undefined;\n        feedbackText?: string;\n        onReaction: (id: MessageProps['id'], reaction: Reaction) => void;\n        onFeedbackComplete: (id: MessageProps['id'], comment?: string) => void;\n        promptFeedbackOn?: FeedbackPrompt;\n        allowFeedbackResubmission?: boolean;\n      };\n      onAnimationCursorUpdate?: (animatedTillCursor: number) => void;\n      animationInitialCursorPos?: number;\n    },\n  'loading' | 'message' | 'error'\n>;\n\nexport interface SystemMessageProps\n  extends TestIdProp,\n    Pick<MessageProps, 'id' | 'message' | 'ref' | 'announceInteraction'> {\n  from: 'system';\n  loading?: boolean;\n}\n\nexport type GenAIMessageProps = UserMessageProps | CoachMessageProps | SystemMessageProps;\n\nexport interface ConversationHistoryProps extends TestIdProp {\n  /** List of History items. */\n  data: {\n    id: string;\n    section: string;\n    conversations: {\n      id: string;\n      title: string;\n    }[];\n  }[];\n  /** Click event for items within the list. */\n  onItemClick?: (conversationId: string) => void;\n  /** List loading state. */\n  loading?: boolean;\n  /** Called at scroll trigger to load more items. */\n  loadMore?: () => void;\n  /** True if History view is rendered in Full page view.  */\n  inFullPage?: boolean;\n  /** Callback triggered when closing the history view. */\n  onDismiss: () => void;\n  /** Id of the selected item. */\n  selectedItemId?: string;\n  /** Set if there is an error in retreiving the data. */\n  error?: string;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport type SendMessageProps = OmitStrict<MessageProps, 'attachments'> & {\n  attachmentIds?: string[];\n  tools?: Tool[];\n};\n\nexport type GenAICoachProps = WithAttributes<\n  'div',\n  TestIdProp & {\n    /** Chat loading indicator */\n    loading?: boolean | ProgressProps['message'];\n    /** Set if there is an error in retreiving the data */\n    error?: string;\n    /** Coaches available in the chat header */\n    coachOptions: MenuProps['items'];\n    /** Handle the coach selections */\n    onCoachChange: (id: MenuProps['id']) => void;\n    /** Suggested messages to start the conversation */\n    initialSuggestedMessages?: MessageProps[];\n    /** Additional suggestions presented at the bottom of the chat window */\n    suggestions?: MenuProps['items'];\n    /** Send prompts */\n    onSend: (message: SendMessageProps) => void;\n\n    stopProcess?: () => void;\n    /** Messages to be shown in the chatting window. */\n    messages?: GenAIMessageProps[];\n    /** Placement of the component   */\n    variant: Variant;\n    /** From landing page utilities */\n    isInLandingPageUtilities?: boolean;\n    /** callback when component is mounted */\n    onOpen?: () => void;\n    /**\n     * User would be guided with selective prompts to enable interaction with coach.\n     * @default false\n     */\n    guidedMode?: boolean;\n    /** Pass an array of Action objects to show Action button. */\n    actions?: ActionsProps;\n    /** Pass data to show history view. */\n    conversationHistory?: ConversationHistoryProps;\n    /** Callback triggered when the layout component changes. */\n    onLayoutChange?: (inFullPage: boolean) => void;\n    /** Callback when attachment icon is clicked */\n    onAddAttachment?: (files: File[]) => void;\n    /** Attachments list */\n    attachments?: FileItemProps[];\n    /** Error in attachments */\n    attachmentsError?: string;\n    /** Configuration for the Lightbox component that handles preview of media attachments and files */\n    lightboxPreviewProps?: LightboxProps;\n    /** Enable full screen */\n    allowFullScreen?: boolean;\n    /** Enable voice to text */\n    voiceToTextProps?: {\n      enableDictation: boolean;\n      langCode: string;\n    };\n    /** Show welcome state */\n    showSalutation?: boolean;\n    /** Salutation message */\n    salutation?: string;\n  }\n>;\n\nexport interface MessageFeedbackProps {\n  messageId: MessageProps['id'];\n  feedback: CoachMessageProps['feedback'];\n}\n\nexport interface UtilitiesGenAICoachProps extends OmitStrict<GenAICoachProps, 'variant'> {\n  onClose?: () => void;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"GenAIMessage.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAgBL,KAAK,+BAA+B,EACrC,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAuB5D,KAAK,qBAAqB,GAAG;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,uBAAuB;AACvB,eAAO,MAAM,gBAAgB,4DAE3B,CAAC;AAEH,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CA8SpE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"GenAIMessage.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAUL,KAAK,+BAA+B,EAErC,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAmB5D,KAAK,qBAAqB,GAAG;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,uBAAuB;AACvB,eAAO,MAAM,gBAAgB,4DAE3B,CAAC;AAEH,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CA4NpE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/GenAICoach/GenAIMessage.js

@@ -1,19 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Flex, Icon, Progress, registerIcon, useI18n, useTheme, useTestIds, ErrorState, useElement, Tooltip, TextArea, FormDialog, useElementFocus, markdownToPlainText } from '@pega/cosmos-react-core';
+import { createContext, forwardRef, useEffect, useMemo } from 'react';
+import { Button, Flex, Progress, registerIcon, useI18n, useTheme, useTestIds, ErrorState, markdownToPlainText, Actions } from '@pega/cosmos-react-core';
 import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
-import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
-import * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';
-import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
-import * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';
 import { RichTextViewer } from '@pega/cosmos-react-rte';
 import { useAnimatedText } from '@pega/cosmos-react-core';
-import { StyledAttachmentsList, StyledGenAIAvatar, StyledMessage, StyledSuggestion, StyledSuggestionsContainer, StyledSystemMessage, StyledUserMessage } from './GenAICoach.styles';
+import { StyledActionsContainer, StyledAttachmentsList, StyledGenAIAvatar, StyledMessage, StyledSuggestion, StyledSuggestionsContainer, StyledSystemMessage, StyledUserMessage } from './GenAICoach.styles';
 import { getGenAICoachTestIds } from './GenAICoach.test-ids';
 import { isCoachMessage, isUserMessage } from './GenAICoach.utils';
 import GenAIMessageProgress from './GenAIMessageProgress';
 import ToolConfirmationMessage from './ToolConfirmationMessage';
-registerIcon(polarisSolidIcon, thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);
+import GenAIMessageFeedbackButtons from './GenAIMessageFeedback';
+registerIcon(polarisSolidIcon);
 /** Metadata Context */
 export const StreamingContext = createContext({
     isStreamingMessage: false
@@ -22,10 +19,6 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
     const testIds = useTestIds(props.testId, getGenAICoachTestIds);
     const theme = useTheme();
     const t = useI18n();
-    const [wrapperEl, setWrapperEl] = useElement(null);
-    const [feedbackVal, setFeedbackVal] = useState('');
-    const [showDialog, setShowDialog] = useState(false);
-    const focusOnInteractionRef = useRef(false);
     const { message, announceInteraction, ...restProps } = props;
     const plainTextMessage = markdownToPlainText(message ?? '');
     let ariaLabel = plainTextMessage;
@@ -51,18 +44,12 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
             props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);
         }
     }, [enableStreaming, isStreamingDone, allChunksReceived]);
-    useElementFocus(wrapperEl, { shouldFocus: !showDialog && focusOnInteractionRef.current });
-    useEffect(() => {
-        if (!showDialog && focusOnInteractionRef.current) {
-            focusOnInteractionRef.current = false;
-        }
-    }, [showDialog]);
     const streamingContext = useMemo(() => {
         return { isStreamingMessage, isStreamingInProgress: isCoachMessage(props) && props.loading };
     }, [isStreamingMessage, props]);
     if (isCoachMessage(props)) {
-        const { id: messageId, coachName, suggestions, onSend, loading, error, feedback, markdownMap } = props;
-        const { reaction, onReaction, onFeedbackComplete } = feedback ?? {};
+        const { id: messageId, coachName, suggestions, onSend, loading, error, feedback, markdownMap, messageActions } = props;
+        const { reaction } = feedback ?? {};
         let selectedFeedbackResponse;
         let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);
         if (feedback && reaction) {
@@ -79,29 +66,7 @@ const GenAIMessage = forwardRef(function GenAIMessage(props, ref) {
             ariaLabel = `${ariaLabel} ${t('interaction_message')}`;
         }
         const streamingContent = isStreamingMessage && (_jsx(_Fragment, { children: message ? (_jsxs(_Fragment, { children: [_jsx(StreamingContext.Provider, { value: streamingContext, children: _jsx(RichTextViewer, { content: isStreamingMessage ? streamingMessage : message, type: 'markdown', markdownMap: markdownMap }) }), loading && _jsx(Progress, { variant: 'ellipsis', placement: 'inline' })] })) : (loading && _jsx(GenAIMessageProgress, {})) }));
-        return (_jsx(Flex, { as: 'li', "data-testid": testIds.coachMessage, ...restProps, container: { direction: 'row', pad: [1, 0], gap: 0.5 }, type: 'message', "aria-label": ariaLabel, ref: ref, children: _jsxs(_Fragment, { children: [_jsx(StyledGenAIAvatar, { name: coachName, icon: 'polaris-solid', color: theme.base.palette.ai, shape: 'circle', size: 'm' }), props.isToolConfirmation ? (_jsx(ToolConfirmationMessage, { ...props })) : (_jsxs(StyledMessage, { children: [streamingContent, loading || error ? (_jsxs(_Fragment, { children: [loading && !isStreamingMessage && _jsx(GenAIMessageProgress, {}), error && _jsx(ErrorState, { message: error })] })) : (_jsxs(_Fragment, { children: [!isStreamingMessage && message && (_jsx(RichTextViewer, { content: message, type: 'markdown', markdownMap: markdownMap })), feedback && (_jsx(Flex, { container: { pad: [0.5, undefined] }, children: reaction ? (_jsxs(_Fragment, { children: [_jsx(Flex, { container: { pad: 0.5 }, "aria-label": selectedFeedbackResponse, ref: setWrapperEl, tabIndex: -1, children: _jsx(Icon, { name: reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-down-solid' }) }), showDialog ? (onFeedbackComplete &&
-                                                    wrapperEl && (_jsx(FormDialog, { target: wrapperEl, heading: t('share_feedback'), onCancel: () => {
-                                                        focusOnInteractionRef.current = true;
-                                                        setShowDialog(false);
-                                                        onFeedbackComplete(messageId);
-                                                    }, onSubmit: () => {
-                                                        focusOnInteractionRef.current = true;
-                                                        setShowDialog(false);
-                                                        onFeedbackComplete(messageId, feedbackVal);
-                                                    }, onKeyDown: e => e.stopPropagation(), children: _jsx(TextArea, { value: feedbackVal, onChange: e => setFeedbackVal(e.target.value), onKeyDown: (e) => {
-                                                            if (e.key === 'Enter' && !e.shiftKey) {
-                                                                e.preventDefault();
-                                                                focusOnInteractionRef.current = true;
-                                                                setShowDialog(false);
-                                                                onFeedbackComplete(messageId, feedbackVal);
-                                                            }
-                                                        }, autoResize: false }) }))) : (_jsx(Tooltip, { target: wrapperEl, describeTarget: false, children: reaction === 'liked' ? t('good_response') : t('bad_response') }))] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('good_response'), variant: 'simple', icon: true, compact: true, onClick: () => {
-                                                        onReaction?.(messageId, 'liked');
-                                                        focusOnInteractionRef.current = true;
-                                                    }, children: _jsx(Icon, { name: 'thumbs-up' }) }), _jsx(Button, { label: t('bad_response'), variant: 'simple', icon: true, compact: true, onClick: () => {
-                                                        setShowDialog(true);
-                                                        onReaction?.(messageId, 'disliked');
-                                                    }, children: _jsx(Icon, { name: 'thumbs-down' }) })] })) })), suggestions && (_jsx(Flex, { as: StyledSuggestionsContainer, container: { direction: 'column', gap: 1 }, children: suggestions.map(({ id, message: prompt }) => {
+        return (_jsx(Flex, { as: 'li', "data-testid": testIds.coachMessage, ...restProps, container: { direction: 'row', pad: [1, 0], gap: 0.5 }, type: 'message', "aria-label": ariaLabel, ref: ref, children: _jsxs(_Fragment, { children: [_jsx(StyledGenAIAvatar, { name: coachName, icon: 'polaris-solid', color: theme.base.palette.ai, shape: 'circle', size: 'm' }), props.isToolConfirmation ? (_jsx(ToolConfirmationMessage, { ...props })) : (_jsxs(StyledMessage, { children: [streamingContent, loading || error ? (_jsxs(_Fragment, { children: [loading && !isStreamingMessage && _jsx(GenAIMessageProgress, {}), error && _jsx(ErrorState, { message: error })] })) : (_jsxs(_Fragment, { children: [!isStreamingMessage && message && (_jsx(RichTextViewer, { content: message, type: 'markdown', markdownMap: markdownMap })), (feedback || messageActions) && (_jsxs(Flex, { container: { direction: 'row', gap: 1, pad: [1, undefined] }, as: StyledActionsContainer, children: [feedback && (_jsx(GenAIMessageFeedbackButtons, { messageId: messageId, feedback: feedback })), messageActions && _jsx(Actions, { ...messageActions })] })), suggestions && (_jsx(Flex, { as: StyledSuggestionsContainer, container: { direction: 'column', gap: 1 }, children: suggestions.map(({ id, message: prompt }) => {
                                             return (_jsx(Button, { as: StyledSuggestion, onClick: onSend ? () => onSend({ id, message: prompt }) : undefined, children: prompt }, id));
                                         }) }))] }))] }))] }) }));
     }

package/lib/components/GenAICoach/GenAIMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,OAAO,EACP,QAAQ,EACR,UAAU,EACV,eAAe,EACf,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,gBAAgB,MAAM,sEAAsE,CAAC;AACzG,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAC5G,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AACjG,OAAO,KAAK,mBAAmB,MAAM,0EAA0E,CAAC;AAChH,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,0BAA0B,EAC1B,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAEhE,YAAY,CACV,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACnB,cAAc,CACf,CAAC;AAOF,uBAAuB;AACvB,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAoC;IAC/E,kBAAkB,EAAE,KAAK;CAC1B,CAAC,CAAC;AAEH,MAAM,YAAY,GAAuD,UAAU,CACjF,SAAS,YAAY,CAAC,KAAyC,EAAE,GAA6B;IAC5F,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAiB,IAAI,CAAC,CAAC;IACnE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAC5D,IAAI,SAAS,GAAG,gBAAgB,CAAC;IAEjC,MAAM,kBAAkB,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC;IAC1E,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC;IAC3E,MAAM,eAAe,GAAG,CAAC,CAAC,kBAAkB,IAAI,CAAC,iBAAiB,CAAC;IAEnE,MAAM,EACJ,IAAI,EAAE,gBAAgB,EACtB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EACnB,GAAG,eAAe,CAAC;QAClB,IAAI,EAAE,OAAO,IAAI,EAAE;QACnB,kBAAkB,EAAE,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB;QAC9E,OAAO,EAAE,eAAe;QACxB,gBAAgB,EAAE,IAAI;QACtB,gBAAgB,EACd,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,yBAAyB;YACtD,CAAC,CAAC,KAAK,CAAC,yBAAyB;YACjC,CAAC,CAAC,SAAS;KAChB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC;YAC3D,KAAK,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,kBAAkB,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAClD,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,IAAI,eAAe,CAAC,CAAC;QAClE,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE1D,eAAe,CAAC,SAAS,EAAE,EAAE,WAAW,EAAE,CAAC,UAAU,IAAI,qBAAqB,CAAC,OAAO,EAAE,CAAC,CAAC;IAE1F,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,IAAI,qBAAqB,CAAC,OAAO,EAAE,CAAC;YACjD,qBAAqB,CAAC,OAAO,GAAG,KAAK,CAAC;QACxC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,gBAAgB,GAA0B,OAAO,CAAC,GAAG,EAAE;QAC3D,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;IAC/F,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhC,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1B,MAAM,EACJ,EAAE,EAAE,SAAS,EACb,SAAS,EACT,WAAW,EACX,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACZ,GAAG,KAAK,CAAC;QAEV,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAC;QAEpE,IAAI,wBAAwB,CAAC;QAE7B,IAAI,iBAAiB,GAAG,CAAC,CAAC,wBAAwB,EAAE,CAAC,SAAS,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,CAAC;QAEzF,IAAI,QAAQ,IAAI,QAAQ,EAAE,CAAC;YACzB,wBAAwB,GAAG,CAAC,CAAC,eAAe,EAAE;gBAC5C,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;aAC9D,CAAC,CAAC;YAEH,iBAAiB,GAAG,GAAG,iBAAiB,IAAI,wBAAwB,EAAE,CAAC;QACzE,CAAC;QAED,SAAS;YACP,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;gBACnC,CAAC,CAAC,GAAG,iBAAiB,IAAI,CAAC,CAAC,wBAAwB,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE;gBAC7E,CAAC,CAAC,iBAAiB,CAAC;QAExB,IAAI,mBAAmB,EAAE,CAAC;YACxB,SAAS,GAAG,GAAG,SAAS,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAAE,CAAC;QACzD,CAAC;QAED,MAAM,gBAAgB,GAAG,kBAAkB,IAAI,CAC7C,4BACG,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YAChD,KAAC,cAAc,IACb,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,EACxD,IAAI,EAAC,UAAU,EACf,WAAW,EAAE,WAAW,GACxB,GACwB,EAE3B,OAAO,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,GAAG,IAC7D,CACJ,CAAC,CAAC,CAAC,CACF,OAAO,IAAI,KAAC,oBAAoB,KAAG,CACpC,GACA,CACJ,CAAC;QAEF,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,IAAI,iBACM,OAAO,CAAC,YAAY,KAC7B,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EACtD,IAAI,EAAC,SAAS,gBACF,SAAS,EACrB,GAAG,EAAE,GAAG,YAER,8BACE,KAAC,iBAAiB,IAChB,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,EAC5B,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,GAAG,GACR,EACD,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAC1B,KAAC,uBAAuB,OAAK,KAAK,GAAI,CACvC,CAAC,CAAC,CAAC,CACF,MAAC,aAAa,eAEX,gBAAgB,EAChB,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAClB,8BACG,OAAO,IAAI,CAAC,kBAAkB,IAAI,KAAC,oBAAoB,KAAG,EAC1D,KAAK,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,GAAI,IACvC,CACJ,CAAC,CAAC,CAAC,CACF,8BAEG,CAAC,kBAAkB,IAAI,OAAO,IAAI,CACjC,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,EAAC,WAAW,EAAE,WAAW,GAAI,CAC/E,EACA,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,YACvC,QAAQ,CAAC,CAAC,CAAC,CACV,8BACE,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,gBACX,wBAAwB,EACpC,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,CAAC,CAAC,YAEZ,KAAC,IAAI,IACH,IAAI,EACF,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,GAEhE,GACG,EACN,UAAU,CAAC,CAAC,CAAC,CACZ,kBAAkB;oDAClB,SAAS,IAAI,CACX,KAAC,UAAU,IACT,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC5B,QAAQ,EAAE,GAAG,EAAE;wDACb,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;wDACrC,aAAa,CAAC,KAAK,CAAC,CAAC;wDACrB,kBAAkB,CAAC,SAAS,CAAC,CAAC;oDAChC,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;wDACb,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;wDACrC,aAAa,CAAC,KAAK,CAAC,CAAC;wDACrB,kBAAkB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;oDAC7C,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YAEnC,KAAC,QAAQ,IACP,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,SAAS,EAAE,CAAC,CAAqC,EAAE,EAAE;4DACnD,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;gEACrC,CAAC,CAAC,cAAc,EAAE,CAAC;gEACnB,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;gEACrC,aAAa,CAAC,KAAK,CAAC,CAAC;gEACrB,kBAAkB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;4DAC7C,CAAC;wDACH,CAAC,EACD,UAAU,EAAE,KAAK,GACjB,GACS,CACd,CACF,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,IAAC,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,YAC9C,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,GACtD,CACX,IACA,CACJ,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EACzB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,QACP,OAAO,EAAE,GAAG,EAAE;wDACZ,UAAU,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;wDACjC,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;oDACvC,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAG,GAClB,EAET,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,EACxB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,QACP,OAAO,EAAE,GAAG,EAAE;wDACZ,aAAa,CAAC,IAAI,CAAC,CAAC;wDACpB,UAAU,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;oDACtC,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,IACR,CACJ,GACI,CACR,EACA,WAAW,IAAI,CACd,KAAC,IAAI,IACH,EAAE,EAAE,0BAA0B,EAC9B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAEzC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE;4CAC3C,OAAO,CACL,KAAC,MAAM,IACL,EAAE,EAAE,gBAAgB,EACpB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,YAGlE,MAAM,IAFF,EAAE,CAGA,CACV,CAAC;wCACJ,CAAC,CAAC,GACG,CACR,IACA,CACJ,IACa,CACjB,IACA,GACE,CACR,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,IAAI,gBAAgB,EAAE,CAAC;YACrB,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACjD,CAAC;QAED,IAAI,mBAAmB,EAAE,CAAC;YACxB,SAAS,GAAG,GAAG,SAAS,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAAE,CAAC;QACzD,CAAC;QAED,OAAO,CACL,MAAC,iBAAiB,IAChB,EAAE,EAAE,iBAAiB,iBACR,OAAO,CAAC,WAAW,KAC5B,SAAS,EACb,IAAI,EAAC,SAAS,gBACF,SAAS,EACrB,GAAG,EAAE,GAAG,aAEP,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACpD,KAAC,qBAAqB,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,CAAC,WAAW,GAAI,CACnE,EACA,OAAO,IAAI,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,GAAG,IAC9C,CACrB,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAChC,EAAE,EAAE,mBAAmB,iBACV,OAAO,CAAC,WAAW,gBACpB,SAAS,EACrB,GAAG,EAAE,GAAG,YAEP,OAAO,GACH,CACR,CAAC;IACJ,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { createContext, forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport type { KeyboardEvent, PropsWithoutRef } from 'react';\n\nimport {\n  Button,\n  Flex,\n  Icon,\n  Progress,\n  registerIcon,\n  useI18n,\n  useTheme,\n  useTestIds,\n  ErrorState,\n  useElement,\n  Tooltip,\n  TextArea,\n  FormDialog,\n  useElementFocus,\n  markdownToPlainText,\n  type ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { GenAIMessageProps } from './GenAICoach.types';\nimport {\n  StyledAttachmentsList,\n  StyledGenAIAvatar,\n  StyledMessage,\n  StyledSuggestion,\n  StyledSuggestionsContainer,\n  StyledSystemMessage,\n  StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\nimport ToolConfirmationMessage from './ToolConfirmationMessage';\n\nregisterIcon(\n  polarisSolidIcon,\n  thumbsUpSolidIcon,\n  thumbsUpIcon,\n  thumbsDownSolidIcon,\n  thumbsDownIcon\n);\n\ntype StreamingContextProps = {\n  isStreamingMessage?: boolean;\n  isStreamingInProgress?: boolean;\n};\n\n/** Metadata Context */\nexport const StreamingContext = createContext<StreamingContextProps | undefined>({\n  isStreamingMessage: false\n});\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n  function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n    const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n    const theme = useTheme();\n    const t = useI18n();\n    const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>(null);\n    const [feedbackVal, setFeedbackVal] = useState('');\n    const [showDialog, setShowDialog] = useState(false);\n    const focusOnInteractionRef = useRef(false);\n\n    const { message, announceInteraction, ...restProps } = props;\n    const plainTextMessage = markdownToPlainText(message ?? '');\n    let ariaLabel = plainTextMessage;\n\n    const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n    const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n    const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n    const {\n      text: streamingMessage,\n      isAnimationDone: isStreamingDone,\n      animatedTillCursor\n    } = useAnimatedText({\n      text: message ?? '',\n      allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n      enabled: enableStreaming,\n      tokenizeMarkdown: true,\n      cursorStartIndex:\n        isCoachMessage(props) && props.animationInitialCursorPos\n          ? props.animationInitialCursorPos\n          : undefined\n    });\n\n    useEffect(() => {\n      if (isCoachMessage(props) && props.onAnimationCursorUpdate) {\n        props.onAnimationCursorUpdate(animatedTillCursor);\n      }\n    }, [animatedTillCursor]);\n\n    useEffect(() => {\n      if (isStreamingMessage && props.onStreamingUpdate) {\n        props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n      }\n    }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n    useElementFocus(wrapperEl, { shouldFocus: !showDialog && focusOnInteractionRef.current });\n\n    useEffect(() => {\n      if (!showDialog && focusOnInteractionRef.current) {\n        focusOnInteractionRef.current = false;\n      }\n    }, [showDialog]);\n\n    const streamingContext: StreamingContextProps = useMemo(() => {\n      return { isStreamingMessage, isStreamingInProgress: isCoachMessage(props) && props.loading };\n    }, [isStreamingMessage, props]);\n\n    if (isCoachMessage(props)) {\n      const {\n        id: messageId,\n        coachName,\n        suggestions,\n        onSend,\n        loading,\n        error,\n        feedback,\n        markdownMap\n      } = props;\n\n      const { reaction, onReaction, onFeedbackComplete } = feedback ?? {};\n\n      let selectedFeedbackResponse;\n\n      let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n      if (feedback && reaction) {\n        selectedFeedbackResponse = t('selected_noun', [\n          reaction === 'liked' ? t('good_response') : t('bad_response')\n        ]);\n\n        feedbackAriaLabel = `${feedbackAriaLabel} ${selectedFeedbackResponse}`;\n      }\n\n      ariaLabel =\n        suggestions && suggestions.length > 0\n          ? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`\n          : feedbackAriaLabel;\n\n      if (announceInteraction) {\n        ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n      }\n\n      const streamingContent = isStreamingMessage && (\n        <>\n          {message ? (\n            <>\n              <StreamingContext.Provider value={streamingContext}>\n                <RichTextViewer\n                  content={isStreamingMessage ? streamingMessage : message}\n                  type='markdown'\n                  markdownMap={markdownMap}\n                />\n              </StreamingContext.Provider>\n\n              {loading && <Progress variant='ellipsis' placement='inline' />}\n            </>\n          ) : (\n            loading && <GenAIMessageProgress />\n          )}\n        </>\n      );\n\n      return (\n        <Flex\n          as='li'\n          data-testid={testIds.coachMessage}\n          {...restProps}\n          container={{ direction: 'row', pad: [1, 0], gap: 0.5 }}\n          type='message'\n          aria-label={ariaLabel}\n          ref={ref}\n        >\n          <>\n            <StyledGenAIAvatar\n              name={coachName}\n              icon='polaris-solid'\n              color={theme.base.palette.ai}\n              shape='circle'\n              size='m'\n            />\n            {props.isToolConfirmation ? (\n              <ToolConfirmationMessage {...props} />\n            ) : (\n              <StyledMessage>\n                {/* Streaming loader and content */}\n                {streamingContent}\n                {loading || error ? (\n                  <>\n                    {loading && !isStreamingMessage && <GenAIMessageProgress />}\n                    {error && <ErrorState message={error} />}\n                  </>\n                ) : (\n                  <>\n                    {/* Non streaming content */}\n                    {!isStreamingMessage && message && (\n                      <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n                    )}\n                    {feedback && (\n                      <Flex container={{ pad: [0.5, undefined] }}>\n                        {reaction ? (\n                          <>\n                            <Flex\n                              container={{ pad: 0.5 }}\n                              aria-label={selectedFeedbackResponse}\n                              ref={setWrapperEl}\n                              tabIndex={-1}\n                            >\n                              <Icon\n                                name={\n                                  reaction === 'liked' ? 'thumbs-up-solid' : 'thumbs-down-solid'\n                                }\n                              />\n                            </Flex>\n                            {showDialog ? (\n                              onFeedbackComplete &&\n                              wrapperEl && (\n                                <FormDialog\n                                  target={wrapperEl}\n                                  heading={t('share_feedback')}\n                                  onCancel={() => {\n                                    focusOnInteractionRef.current = true;\n                                    setShowDialog(false);\n                                    onFeedbackComplete(messageId);\n                                  }}\n                                  onSubmit={() => {\n                                    focusOnInteractionRef.current = true;\n                                    setShowDialog(false);\n                                    onFeedbackComplete(messageId, feedbackVal);\n                                  }}\n                                  onKeyDown={e => e.stopPropagation()}\n                                >\n                                  <TextArea\n                                    value={feedbackVal}\n                                    onChange={e => setFeedbackVal(e.target.value)}\n                                    onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {\n                                      if (e.key === 'Enter' && !e.shiftKey) {\n                                        e.preventDefault();\n                                        focusOnInteractionRef.current = true;\n                                        setShowDialog(false);\n                                        onFeedbackComplete(messageId, feedbackVal);\n                                      }\n                                    }}\n                                    autoResize={false}\n                                  />\n                                </FormDialog>\n                              )\n                            ) : (\n                              <Tooltip target={wrapperEl} describeTarget={false}>\n                                {reaction === 'liked' ? t('good_response') : t('bad_response')}\n                              </Tooltip>\n                            )}\n                          </>\n                        ) : (\n                          <>\n                            <Button\n                              label={t('good_response')}\n                              variant='simple'\n                              icon\n                              compact\n                              onClick={() => {\n                                onReaction?.(messageId, 'liked');\n                                focusOnInteractionRef.current = true;\n                              }}\n                            >\n                              <Icon name='thumbs-up' />\n                            </Button>\n\n                            <Button\n                              label={t('bad_response')}\n                              variant='simple'\n                              icon\n                              compact\n                              onClick={() => {\n                                setShowDialog(true);\n                                onReaction?.(messageId, 'disliked');\n                              }}\n                            >\n                              <Icon name='thumbs-down' />\n                            </Button>\n                          </>\n                        )}\n                      </Flex>\n                    )}\n                    {suggestions && (\n                      <Flex\n                        as={StyledSuggestionsContainer}\n                        container={{ direction: 'column', gap: 1 }}\n                      >\n                        {suggestions.map(({ id, message: prompt }) => {\n                          return (\n                            <Button\n                              as={StyledSuggestion}\n                              onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n                              key={id}\n                            >\n                              {prompt}\n                            </Button>\n                          );\n                        })}\n                      </Flex>\n                    )}\n                  </>\n                )}\n              </StyledMessage>\n            )}\n          </>\n        </Flex>\n      );\n    }\n\n    if (isUserMessage(props)) {\n      if (plainTextMessage) {\n        ariaLabel = t('you_asked', [plainTextMessage]);\n      }\n\n      if (announceInteraction) {\n        ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n      }\n\n      return (\n        <StyledUserMessage\n          as={StyledUserMessage}\n          data-testid={testIds.userMessage}\n          {...restProps}\n          type='message'\n          aria-label={ariaLabel}\n          ref={ref}\n        >\n          {props.attachments && props.attachments.length > 0 && (\n            <StyledAttachmentsList type='display' items={props.attachments} />\n          )}\n          {message && <RichTextViewer content={message} type='markdown' />}\n        </StyledUserMessage>\n      );\n    }\n\n    if (props.from === 'system') {\n      return (\n        <Flex\n          container={{ justify: 'center' }}\n          as={StyledSystemMessage}\n          data-testid={testIds.userMessage}\n          aria-label={ariaLabel}\n          ref={ref}\n        >\n          {message}\n        </Flex>\n      );\n    }\n\n    return null;\n  }\n);\n\nexport default GenAIMessage;\n"]}
+{"version":3,"file":"GenAIMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,UAAU,EACV,mBAAmB,EAEnB,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,gBAAgB,MAAM,sEAAsE,CAAC;AACzG,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,0BAA0B,EAC1B,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAChE,OAAO,2BAA2B,MAAM,wBAAwB,CAAC;AAEjE,YAAY,CAAC,gBAAgB,CAAC,CAAC;AAO/B,uBAAuB;AACvB,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAoC;IAC/E,kBAAkB,EAAE,KAAK;CAC1B,CAAC,CAAC;AAEH,MAAM,YAAY,GAAuD,UAAU,CACjF,SAAS,YAAY,CAAC,KAAyC,EAAE,GAA6B;IAC5F,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAC5D,IAAI,SAAS,GAAG,gBAAgB,CAAC;IAEjC,MAAM,kBAAkB,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC;IAC1E,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC;IAC3E,MAAM,eAAe,GAAG,CAAC,CAAC,kBAAkB,IAAI,CAAC,iBAAiB,CAAC;IAEnE,MAAM,EACJ,IAAI,EAAE,gBAAgB,EACtB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EACnB,GAAG,eAAe,CAAC;QAClB,IAAI,EAAE,OAAO,IAAI,EAAE;QACnB,kBAAkB,EAAE,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB;QAC9E,OAAO,EAAE,eAAe;QACxB,gBAAgB,EAAE,IAAI;QACtB,gBAAgB,EACd,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,yBAAyB;YACtD,CAAC,CAAC,KAAK,CAAC,yBAAyB;YACjC,CAAC,CAAC,SAAS;KAChB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC;YAC3D,KAAK,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,CAAC;QACpD,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,kBAAkB,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAClD,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,IAAI,eAAe,CAAC,CAAC;QAClE,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE1D,MAAM,gBAAgB,GAA0B,OAAO,CAAC,GAAG,EAAE;QAC3D,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;IAC/F,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhC,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1B,MAAM,EACJ,EAAE,EAAE,SAAS,EACb,SAAS,EACT,WAAW,EACX,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,cAAc,EACf,GAAG,KAAK,CAAC;QAEV,MAAM,EAAE,QAAQ,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAC;QAEpC,IAAI,wBAAwB,CAAC;QAE7B,IAAI,iBAAiB,GAAG,CAAC,CAAC,wBAAwB,EAAE,CAAC,SAAS,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,CAAC;QAEzF,IAAI,QAAQ,IAAI,QAAQ,EAAE,CAAC;YACzB,wBAAwB,GAAG,CAAC,CAAC,eAAe,EAAE;gBAC5C,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;aAC9D,CAAC,CAAC;YAEH,iBAAiB,GAAG,GAAG,iBAAiB,IAAI,wBAAwB,EAAE,CAAC;QACzE,CAAC;QAED,SAAS;YACP,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;gBACnC,CAAC,CAAC,GAAG,iBAAiB,IAAI,CAAC,CAAC,wBAAwB,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE;gBAC7E,CAAC,CAAC,iBAAiB,CAAC;QAExB,IAAI,mBAAmB,EAAE,CAAC;YACxB,SAAS,GAAG,GAAG,SAAS,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAAE,CAAC;QACzD,CAAC;QAED,MAAM,gBAAgB,GAAG,kBAAkB,IAAI,CAC7C,4BACG,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YAChD,KAAC,cAAc,IACb,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,EACxD,IAAI,EAAC,UAAU,EACf,WAAW,EAAE,WAAW,GACxB,GACwB,EAE3B,OAAO,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,GAAG,IAC7D,CACJ,CAAC,CAAC,CAAC,CACF,OAAO,IAAI,KAAC,oBAAoB,KAAG,CACpC,GACA,CACJ,CAAC;QAEF,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,IAAI,iBACM,OAAO,CAAC,YAAY,KAC7B,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EACtD,IAAI,EAAC,SAAS,gBACF,SAAS,EACrB,GAAG,EAAE,GAAG,YAER,8BACE,KAAC,iBAAiB,IAChB,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,EAC5B,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,GAAG,GACR,EACD,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAC1B,KAAC,uBAAuB,OAAK,KAAK,GAAI,CACvC,CAAC,CAAC,CAAC,CACF,MAAC,aAAa,eAEX,gBAAgB,EAEhB,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAClB,8BACG,OAAO,IAAI,CAAC,kBAAkB,IAAI,KAAC,oBAAoB,KAAG,EAC1D,KAAK,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,GAAI,IACvC,CACJ,CAAC,CAAC,CAAC,CACF,8BAEG,CAAC,kBAAkB,IAAI,OAAO,IAAI,CACjC,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,EAAC,WAAW,EAAE,WAAW,GAAI,CAC/E,EAEA,CAAC,QAAQ,IAAI,cAAc,CAAC,IAAI,CAC/B,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,EAAE,EAC5D,EAAE,EAAE,sBAAsB,aAEzB,QAAQ,IAAI,CACX,KAAC,2BAA2B,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC1E,EAEA,cAAc,IAAI,KAAC,OAAO,OAAK,cAAc,GAAI,IAC7C,CACR,EAEA,WAAW,IAAI,CACd,KAAC,IAAI,IACH,EAAE,EAAE,0BAA0B,EAC9B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YAEzC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE;4CAC3C,OAAO,CACL,KAAC,MAAM,IACL,EAAE,EAAE,gBAAgB,EACpB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,YAGlE,MAAM,IAFF,EAAE,CAGA,CACV,CAAC;wCACJ,CAAC,CAAC,GACG,CACR,IACA,CACJ,IACa,CACjB,IACA,GACE,CACR,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,IAAI,gBAAgB,EAAE,CAAC;YACrB,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACjD,CAAC;QAED,IAAI,mBAAmB,EAAE,CAAC;YACxB,SAAS,GAAG,GAAG,SAAS,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAAE,CAAC;QACzD,CAAC;QAED,OAAO,CACL,MAAC,iBAAiB,IAChB,EAAE,EAAE,iBAAiB,iBACR,OAAO,CAAC,WAAW,KAC5B,SAAS,EACb,IAAI,EAAC,SAAS,gBACF,SAAS,EACrB,GAAG,EAAE,GAAG,aAEP,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACpD,KAAC,qBAAqB,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,CAAC,WAAW,GAAI,CACnE,EACA,OAAO,IAAI,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,GAAG,IAC9C,CACrB,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAChC,EAAE,EAAE,mBAAmB,iBACV,OAAO,CAAC,WAAW,gBACpB,SAAS,EACrB,GAAG,EAAE,GAAG,YAEP,OAAO,GACH,CACR,CAAC;IACJ,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { createContext, forwardRef, useEffect, useMemo } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n  Button,\n  Flex,\n  Progress,\n  registerIcon,\n  useI18n,\n  useTheme,\n  useTestIds,\n  ErrorState,\n  markdownToPlainText,\n  type ForwardRefForwardPropsComponent,\n  Actions\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { useAnimatedText } from '@pega/cosmos-react-core';\n\nimport type { GenAIMessageProps } from './GenAICoach.types';\nimport {\n  StyledActionsContainer,\n  StyledAttachmentsList,\n  StyledGenAIAvatar,\n  StyledMessage,\n  StyledSuggestion,\n  StyledSuggestionsContainer,\n  StyledSystemMessage,\n  StyledUserMessage\n} from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\nimport { isCoachMessage, isUserMessage } from './GenAICoach.utils';\nimport GenAIMessageProgress from './GenAIMessageProgress';\nimport ToolConfirmationMessage from './ToolConfirmationMessage';\nimport GenAIMessageFeedbackButtons from './GenAIMessageFeedback';\n\nregisterIcon(polarisSolidIcon);\n\ntype StreamingContextProps = {\n  isStreamingMessage?: boolean;\n  isStreamingInProgress?: boolean;\n};\n\n/** Metadata Context */\nexport const StreamingContext = createContext<StreamingContextProps | undefined>({\n  isStreamingMessage: false\n});\n\nconst GenAIMessage: ForwardRefForwardPropsComponent<GenAIMessageProps> = forwardRef(\n  function GenAIMessage(props: PropsWithoutRef<GenAIMessageProps>, ref: GenAIMessageProps['ref']) {\n    const testIds = useTestIds(props.testId, getGenAICoachTestIds);\n    const theme = useTheme();\n    const t = useI18n();\n\n    const { message, announceInteraction, ...restProps } = props;\n    const plainTextMessage = markdownToPlainText(message ?? '');\n    let ariaLabel = plainTextMessage;\n\n    const isStreamingMessage = isCoachMessage(props) && props.enableStreaming;\n    const allChunksReceived = isCoachMessage(props) && props.allChunksReceived;\n    const enableStreaming = !!isStreamingMessage && !allChunksReceived;\n\n    const {\n      text: streamingMessage,\n      isAnimationDone: isStreamingDone,\n      animatedTillCursor\n    } = useAnimatedText({\n      text: message ?? '',\n      allContentReceived: allChunksReceived === undefined ? true : allChunksReceived,\n      enabled: enableStreaming,\n      tokenizeMarkdown: true,\n      cursorStartIndex:\n        isCoachMessage(props) && props.animationInitialCursorPos\n          ? props.animationInitialCursorPos\n          : undefined\n    });\n\n    useEffect(() => {\n      if (isCoachMessage(props) && props.onAnimationCursorUpdate) {\n        props.onAnimationCursorUpdate(animatedTillCursor);\n      }\n    }, [animatedTillCursor]);\n\n    useEffect(() => {\n      if (isStreamingMessage && props.onStreamingUpdate) {\n        props.onStreamingUpdate(!!allChunksReceived && isStreamingDone);\n      }\n    }, [enableStreaming, isStreamingDone, allChunksReceived]);\n\n    const streamingContext: StreamingContextProps = useMemo(() => {\n      return { isStreamingMessage, isStreamingInProgress: isCoachMessage(props) && props.loading };\n    }, [isStreamingMessage, props]);\n\n    if (isCoachMessage(props)) {\n      const {\n        id: messageId,\n        coachName,\n        suggestions,\n        onSend,\n        loading,\n        error,\n        feedback,\n        markdownMap,\n        messageActions\n      } = props;\n\n      const { reaction } = feedback ?? {};\n\n      let selectedFeedbackResponse;\n\n      let feedbackAriaLabel = t('sender_replied_message', [coachName, plainTextMessage ?? '']);\n\n      if (feedback && reaction) {\n        selectedFeedbackResponse = t('selected_noun', [\n          reaction === 'liked' ? t('good_response') : t('bad_response')\n        ]);\n\n        feedbackAriaLabel = `${feedbackAriaLabel} ${selectedFeedbackResponse}`;\n      }\n\n      ariaLabel =\n        suggestions && suggestions.length > 0\n          ? `${feedbackAriaLabel} ${t('suggestions_in_message', [suggestions.length])}`\n          : feedbackAriaLabel;\n\n      if (announceInteraction) {\n        ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n      }\n\n      const streamingContent = isStreamingMessage && (\n        <>\n          {message ? (\n            <>\n              <StreamingContext.Provider value={streamingContext}>\n                <RichTextViewer\n                  content={isStreamingMessage ? streamingMessage : message}\n                  type='markdown'\n                  markdownMap={markdownMap}\n                />\n              </StreamingContext.Provider>\n\n              {loading && <Progress variant='ellipsis' placement='inline' />}\n            </>\n          ) : (\n            loading && <GenAIMessageProgress />\n          )}\n        </>\n      );\n\n      return (\n        <Flex\n          as='li'\n          data-testid={testIds.coachMessage}\n          {...restProps}\n          container={{ direction: 'row', pad: [1, 0], gap: 0.5 }}\n          type='message'\n          aria-label={ariaLabel}\n          ref={ref}\n        >\n          <>\n            <StyledGenAIAvatar\n              name={coachName}\n              icon='polaris-solid'\n              color={theme.base.palette.ai}\n              shape='circle'\n              size='m'\n            />\n            {props.isToolConfirmation ? (\n              <ToolConfirmationMessage {...props} />\n            ) : (\n              <StyledMessage>\n                {/* Streaming loader and content */}\n                {streamingContent}\n\n                {loading || error ? (\n                  <>\n                    {loading && !isStreamingMessage && <GenAIMessageProgress />}\n                    {error && <ErrorState message={error} />}\n                  </>\n                ) : (\n                  <>\n                    {/* Non streaming content */}\n                    {!isStreamingMessage && message && (\n                      <RichTextViewer content={message} type='markdown' markdownMap={markdownMap} />\n                    )}\n\n                    {(feedback || messageActions) && (\n                      <Flex\n                        container={{ direction: 'row', gap: 1, pad: [1, undefined] }}\n                        as={StyledActionsContainer}\n                      >\n                        {feedback && (\n                          <GenAIMessageFeedbackButtons messageId={messageId} feedback={feedback} />\n                        )}\n\n                        {messageActions && <Actions {...messageActions} />}\n                      </Flex>\n                    )}\n\n                    {suggestions && (\n                      <Flex\n                        as={StyledSuggestionsContainer}\n                        container={{ direction: 'column', gap: 1 }}\n                      >\n                        {suggestions.map(({ id, message: prompt }) => {\n                          return (\n                            <Button\n                              as={StyledSuggestion}\n                              onClick={onSend ? () => onSend({ id, message: prompt }) : undefined}\n                              key={id}\n                            >\n                              {prompt}\n                            </Button>\n                          );\n                        })}\n                      </Flex>\n                    )}\n                  </>\n                )}\n              </StyledMessage>\n            )}\n          </>\n        </Flex>\n      );\n    }\n\n    if (isUserMessage(props)) {\n      if (plainTextMessage) {\n        ariaLabel = t('you_asked', [plainTextMessage]);\n      }\n\n      if (announceInteraction) {\n        ariaLabel = `${ariaLabel} ${t('interaction_message')}`;\n      }\n\n      return (\n        <StyledUserMessage\n          as={StyledUserMessage}\n          data-testid={testIds.userMessage}\n          {...restProps}\n          type='message'\n          aria-label={ariaLabel}\n          ref={ref}\n        >\n          {props.attachments && props.attachments.length > 0 && (\n            <StyledAttachmentsList type='display' items={props.attachments} />\n          )}\n          {message && <RichTextViewer content={message} type='markdown' />}\n        </StyledUserMessage>\n      );\n    }\n\n    if (props.from === 'system') {\n      return (\n        <Flex\n          container={{ justify: 'center' }}\n          as={StyledSystemMessage}\n          data-testid={testIds.userMessage}\n          aria-label={ariaLabel}\n          ref={ref}\n        >\n          {message}\n        </Flex>\n      );\n    }\n\n    return null;\n  }\n);\n\nexport default GenAIMessage;\n"]}

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

@@ -0,0 +1,4 @@
+import type { MessageFeedbackProps } from './GenAICoach.types';
+declare const GenAIMessageFeedbackButtons: ({ messageId, feedback }: MessageFeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export default GenAIMessageFeedbackButtons;
+//# sourceMappingURL=GenAIMessageFeedback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GenAIMessageFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessageFeedback.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAY,MAAM,oBAAoB,CAAC;AAIzE,QAAA,MAAM,2BAA2B,GAAI,yBAAyB,oBAAoB,4CA+KjF,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/lib/components/GenAICoach/GenAIMessageFeedback.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, Flex, FormDialog, Icon, TextArea, Tooltip, registerIcon, useElement, useI18n } from '@pega/cosmos-react-core';
+import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
+import * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';
+import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
+import * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';
+registerIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);
+const GenAIMessageFeedbackButtons = ({ messageId, feedback }) => {
+    const { reaction, feedbackText = '', allowFeedbackResubmission = false, promptFeedbackOn = 'disliked', onReaction, onFeedbackComplete } = feedback ?? {};
+    const t = useI18n();
+    const [feedbackVal, setFeedbackVal] = useState(feedbackText);
+    const [showDialog, setShowDialog] = useState(false);
+    const likeButtonRef = useRef(null);
+    const dislikeButtonRef = useRef(null);
+    const shouldOpenDialogRef = useRef(false);
+    const [iconEl, seticonEl] = useElement();
+    const isLikeActive = reaction === 'liked';
+    const isDislikeActive = reaction === 'disliked';
+    const needsDialog = (reactionType) => {
+        switch (promptFeedbackOn) {
+            case 'disliked':
+                return reactionType === 'disliked';
+            case 'liked':
+                return reactionType === 'liked';
+            case 'both':
+                return true;
+            default:
+                return false;
+        }
+    };
+    const handleReactionClick = useCallback((reactionType) => {
+        if (reaction === reactionType && !allowFeedbackResubmission) {
+            return;
+        }
+        onReaction?.(messageId, reactionType);
+        if (needsDialog(reactionType)) {
+            if (reaction !== reactionType) {
+                setFeedbackVal('');
+            }
+            else {
+                setFeedbackVal(feedbackText);
+            }
+            if (!allowFeedbackResubmission) {
+                shouldOpenDialogRef.current = true;
+            }
+            else {
+                setShowDialog(true);
+            }
+        }
+    }, [reaction, feedbackText, allowFeedbackResubmission, promptFeedbackOn, messageId, onReaction]);
+    const closeDialog = useCallback((comment) => {
+        setShowDialog(false);
+        shouldOpenDialogRef.current = false;
+        onFeedbackComplete?.(messageId, comment);
+        if (!allowFeedbackResubmission && iconEl) {
+            iconEl.focus();
+        }
+    }, [allowFeedbackResubmission, onFeedbackComplete, messageId, iconEl]);
+    const getDialogTarget = () => {
+        if (!allowFeedbackResubmission && iconEl) {
+            return iconEl;
+        }
+        return isLikeActive ? likeButtonRef.current : dislikeButtonRef.current;
+    };
+    useEffect(() => {
+        if (iconEl && shouldOpenDialogRef.current && !allowFeedbackResubmission) {
+            setShowDialog(true);
+            shouldOpenDialogRef.current = false;
+        }
+    }, [iconEl, allowFeedbackResubmission]);
+    useEffect(() => {
+        if (!showDialog && reaction && allowFeedbackResubmission) {
+            const reactionButton = reaction === 'liked' ? likeButtonRef.current : dislikeButtonRef.current;
+            reactionButton?.focus();
+        }
+    }, [showDialog, reaction, allowFeedbackResubmission]);
+    const dialogTarget = getDialogTarget();
+    const feedbackDialog = showDialog && dialogTarget && (_jsx(FormDialog, { target: dialogTarget, heading: t('share_feedback'), onCancel: () => closeDialog(), onSubmit: () => closeDialog(feedbackVal), onKeyDown: e => e.stopPropagation(), children: _jsx(TextArea, { value: feedbackVal, onChange: e => setFeedbackVal(e.target.value), onKeyDown: (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    closeDialog(feedbackVal);
+                }
+            }, autoResize: false }) }));
+    const shouldShowIcon = !allowFeedbackResubmission && reaction;
+    if (shouldShowIcon) {
+        return (_jsxs(Flex, { container: { pad: [0.5, undefined] }, ref: seticonEl, tabIndex: -1, "aria-label": t('selected_noun', [isLikeActive ? t('good_response') : t('bad_response')]), role: 'status', children: [_jsx(Icon, { name: isLikeActive ? 'thumbs-up-solid' : 'thumbs-down-solid' }), _jsx(Tooltip, { target: iconEl, describeTarget: false, children: isLikeActive ? t('good_response') : t('bad_response') }), feedbackDialog] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { label: t('good_response'), variant: 'simple', icon: true, compact: true, ref: likeButtonRef, onClick: () => handleReactionClick('liked'), "aria-pressed": isLikeActive, children: _jsx(Icon, { name: isLikeActive ? 'thumbs-up-solid' : 'thumbs-up' }) }), _jsx(Button, { label: t('bad_response'), variant: 'simple', icon: true, compact: true, ref: dislikeButtonRef, onClick: () => handleReactionClick('disliked'), "aria-pressed": isDislikeActive, children: _jsx(Icon, { name: isDislikeActive ? 'thumbs-down-solid' : 'thumbs-down' }) })] }), feedbackDialog] }));
+};
+export default GenAIMessageFeedbackButtons;
+//# sourceMappingURL=GenAIMessageFeedback.js.map

package/lib/components/GenAICoach/GenAIMessageFeedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenAIMessageFeedback.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/GenAIMessageFeedback.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport {\n  Button,\n  Flex,\n  FormDialog,\n  Icon,\n  TextArea,\n  Tooltip,\n  registerIcon,\n  useElement,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport * as thumbsDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down.icon';\n\nimport type { MessageFeedbackProps, Reaction } from './GenAICoach.types';\n\nregisterIcon(thumbsUpSolidIcon, thumbsUpIcon, thumbsDownSolidIcon, thumbsDownIcon);\n\nconst GenAIMessageFeedbackButtons = ({ messageId, feedback }: MessageFeedbackProps) => {\n  const {\n    reaction,\n    feedbackText = '',\n    allowFeedbackResubmission = false,\n    promptFeedbackOn = 'disliked',\n    onReaction,\n    onFeedbackComplete\n  } = feedback ?? {};\n\n  const t = useI18n();\n\n  const [feedbackVal, setFeedbackVal] = useState(feedbackText);\n  const [showDialog, setShowDialog] = useState(false);\n\n  const likeButtonRef = useRef<HTMLButtonElement>(null);\n  const dislikeButtonRef = useRef<HTMLButtonElement>(null);\n  const shouldOpenDialogRef = useRef(false);\n  const [iconEl, seticonEl] = useElement<HTMLDivElement>();\n\n  const isLikeActive = reaction === 'liked';\n  const isDislikeActive = reaction === 'disliked';\n\n  const needsDialog = (reactionType: Reaction) => {\n    switch (promptFeedbackOn) {\n      case 'disliked':\n        return reactionType === 'disliked';\n      case 'liked':\n        return reactionType === 'liked';\n      case 'both':\n        return true;\n      default:\n        return false;\n    }\n  };\n\n  const handleReactionClick = useCallback(\n    (reactionType: Reaction) => {\n      if (reaction === reactionType && !allowFeedbackResubmission) {\n        return;\n      }\n\n      onReaction?.(messageId, reactionType);\n\n      if (needsDialog(reactionType)) {\n        if (reaction !== reactionType) {\n          setFeedbackVal('');\n        } else {\n          setFeedbackVal(feedbackText);\n        }\n\n        if (!allowFeedbackResubmission) {\n          shouldOpenDialogRef.current = true;\n        } else {\n          setShowDialog(true);\n        }\n      }\n    },\n    [reaction, feedbackText, allowFeedbackResubmission, promptFeedbackOn, messageId, onReaction]\n  );\n\n  const closeDialog = useCallback(\n    (comment?: string) => {\n      setShowDialog(false);\n      shouldOpenDialogRef.current = false;\n\n      onFeedbackComplete?.(messageId, comment);\n\n      if (!allowFeedbackResubmission && iconEl) {\n        iconEl.focus();\n      }\n    },\n    [allowFeedbackResubmission, onFeedbackComplete, messageId, iconEl]\n  );\n\n  const getDialogTarget = () => {\n    if (!allowFeedbackResubmission && iconEl) {\n      return iconEl;\n    }\n\n    return isLikeActive ? likeButtonRef.current : dislikeButtonRef.current;\n  };\n\n  useEffect(() => {\n    if (iconEl && shouldOpenDialogRef.current && !allowFeedbackResubmission) {\n      setShowDialog(true);\n      shouldOpenDialogRef.current = false;\n    }\n  }, [iconEl, allowFeedbackResubmission]);\n\n  useEffect(() => {\n    if (!showDialog && reaction && allowFeedbackResubmission) {\n      const reactionButton =\n        reaction === 'liked' ? likeButtonRef.current : dislikeButtonRef.current;\n      reactionButton?.focus();\n    }\n  }, [showDialog, reaction, allowFeedbackResubmission]);\n\n  const dialogTarget = getDialogTarget();\n\n  const feedbackDialog = showDialog && dialogTarget && (\n    <FormDialog\n      target={dialogTarget}\n      heading={t('share_feedback')}\n      onCancel={() => closeDialog()}\n      onSubmit={() => closeDialog(feedbackVal)}\n      onKeyDown={e => e.stopPropagation()}\n    >\n      <TextArea\n        value={feedbackVal}\n        onChange={e => setFeedbackVal(e.target.value)}\n        onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {\n          if (e.key === 'Enter' && !e.shiftKey) {\n            e.preventDefault();\n            closeDialog(feedbackVal);\n          }\n        }}\n        autoResize={false}\n      />\n    </FormDialog>\n  );\n\n  const shouldShowIcon = !allowFeedbackResubmission && reaction;\n\n  if (shouldShowIcon) {\n    return (\n      <Flex\n        container={{ pad: [0.5, undefined] }}\n        ref={seticonEl}\n        tabIndex={-1}\n        aria-label={t('selected_noun', [isLikeActive ? t('good_response') : t('bad_response')])}\n        role='status'\n      >\n        <Icon name={isLikeActive ? 'thumbs-up-solid' : 'thumbs-down-solid'} />\n\n        <Tooltip target={iconEl} describeTarget={false}>\n          {isLikeActive ? t('good_response') : t('bad_response')}\n        </Tooltip>\n\n        {feedbackDialog}\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      <Flex container={{ gap: 1 }}>\n        <Button\n          label={t('good_response')}\n          variant='simple'\n          icon\n          compact\n          ref={likeButtonRef}\n          onClick={() => handleReactionClick('liked')}\n          aria-pressed={isLikeActive}\n        >\n          <Icon name={isLikeActive ? 'thumbs-up-solid' : 'thumbs-up'} />\n        </Button>\n\n        <Button\n          label={t('bad_response')}\n          variant='simple'\n          icon\n          compact\n          ref={dislikeButtonRef}\n          onClick={() => handleReactionClick('disliked')}\n          aria-pressed={isDislikeActive}\n        >\n          <Icon name={isDislikeActive ? 'thumbs-down-solid' : 'thumbs-down'} />\n        </Button>\n      </Flex>\n\n      {feedbackDialog}\n    </>\n  );\n};\n\nexport default GenAIMessageFeedbackButtons;\n"]}

package/lib/components/InteractionNotification/InteractionNotification.d.ts

@@ -1,6 +1,12 @@
 import type { Ref } from 'react';
 import type { StatusProps, ForwardRefForwardPropsComponent, FieldValueListProps, NoChildrenProp, RequireAtLeastOne } from '@pega/cosmos-react-core';
 import type { CountdownButtonProps } from './CountdownButton';
+interface InfoText {
+    /** Visually hidden description for accessibility purposes. */
+    description: string;
+    /** Information text. */
+    text: string;
+}
 export type InteractionNotificationProps = RequireAtLeastOne<NoChildrenProp & {
     /** Ref to Component. */
     ref?: Ref<HTMLDivElement>;
@@ -8,10 +14,6 @@ export type InteractionNotificationProps = RequireAtLeastOne<NoChildrenProp & {
     icon: string;
     /** Interaction title. */
     title: string;
-    /** Primary information of the notification. For example caller name . */
-    primaryText: string;
-    /** Secondary information of the notification. For example phone number of the caller */
-    secondaryText?: string;
     /** Represents the current status of interaction. */
     status: {
         variant: StatusProps['variant'];
@@ -29,7 +31,21 @@ export type InteractionNotificationProps = RequireAtLeastOne<NoChildrenProp & {
     onAccept?: () => void;
     /** Callback when decline or 'x' button is clicked. */
     onDismiss?: () => void;
-}, 'onAccept' | 'onDismiss'>;
+} & ({
+    /** Primary information of the notification. For example caller name. */
+    primaryText: InfoText;
+    /** Secondary information of the notification. For example phone number of the caller. */
+    secondaryText?: InfoText;
+    /** Tertiary information of the notification. For example role of the caller. */
+    tertiaryText?: InfoText;
+} | {
+    /** Primary information of the notification. For example caller name. */
+    primaryText: string;
+    /** Secondary information of the notification. For example phone number of the caller. */
+    secondaryText?: string;
+    /** Tertiary information of the notification. For example role of the caller. */
+    tertiaryText?: string;
+}), 'onAccept' | 'onDismiss'>;
 declare const InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps>;
 export default InteractionNotification;
 //# sourceMappingURL=InteractionNotification.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AA0BlD,OAAO,KAAK,EACV,WAAW,EACX,+BAA+B,EAC/B,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,MAAM,MAAM,4BAA4B,GAAG,iBAAiB,CAC1D,cAAc,GAAG;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,EACD,UAAU,GAAG,WAAW,CACzB,CAAC;AAgFF,QAAA,MAAM,uBAAuB,EAAE,+BAA+B,CAAC,4BAA4B,CAgHvF,CAAC;AAEL,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AA2BlD,OAAO,KAAK,EACV,WAAW,EACX,+BAA+B,EAC/B,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,UAAU,QAAQ;IAChB,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,4BAA4B,GAAG,iBAAiB,CAC1D,cAAc,GAAG;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,GAAG,CACE;IACE,wEAAwE;IACxE,WAAW,EAAE,QAAQ,CAAC;IACtB,yFAAyF;IACzF,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,gFAAgF;IAChF,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB,GACD;IACE,wEAAwE;IACxE,WAAW,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACJ,EACH,UAAU,GAAG,WAAW,CACzB,CAAC;AA0GF,QAAA,MAAM,uBAAuB,EAAE,+BAA+B,CAAC,4BAA4B,CA8GvF,CAAC;AAEL,eAAe,uBAAuB,CAAC"}

package/lib/components/InteractionNotification/InteractionNotification.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldValueList, useI18n, useDirection, Icon, StyledLabel, useLiveLog, registerAction, useShortcut, useConsolidatedRef, useEscape, CardFooter } from '@pega/cosmos-react-core';
+import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldValueList, useI18n, useDirection, Icon, StyledLabel, useLiveLog, registerAction, useShortcut, useConsolidatedRef, useEscape, CardFooter, VisuallyHiddenText } from '@pega/cosmos-react-core';
 import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
 import CountdownButton from './CountdownButton';
 const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
@@ -76,7 +76,12 @@ registerAction({
     id: 'DismissIncomingInteraction',
     defaultKeyBinding: 'Alt+Q'
 });
-const InteractionNotification = forwardRef(function InteractionNotification({ icon, title, primaryText, secondaryText, status, fields, incomingNotificationTimeout, onAccept, onDismiss }, ref) {
+const NotificationText = ({ content, variant = 'h5' }) => {
+    const isString = typeof content === 'string';
+    const text = (_jsx(Text, { variant: variant, as: 'span', children: isString ? content : content.text }));
+    return isString ? (text) : (_jsxs("div", { children: [_jsx(VisuallyHiddenText, { children: `${content.description} - ` }), text] }));
+};
+const InteractionNotification = forwardRef(function InteractionNotification({ icon, title, primaryText, secondaryText, tertiaryText, status, fields, incomingNotificationTimeout, onAccept, onDismiss }, ref) {
     const t = useI18n();
     const { announceAssertive } = useLiveLog();
     const containerRef = useConsolidatedRef(ref);
@@ -97,14 +102,14 @@ const InteractionNotification = forwardRef(function InteractionNotification({ ic
     }, containerRef.current, [onDismiss]);
     useEffect(() => {
         announceAssertive({
-            message: `${title} ${primaryText} ${t('status')} ${status.text}. ${goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''}${dismissBinding && onDismiss
+            message: `${title} ${typeof primaryText === 'string' ? primaryText : primaryText.description} ${t('status')} ${status.text}. ${goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''}${dismissBinding && onDismiss
                 ? t('interaction_shortcut_dismiss_info', [dismissBinding])
                 : ''}`,
             type: 'alert'
         });
     }, []);
     const acceptButton = incomingNotificationTimeout ? (_jsx(CountdownButton, { variant: 'primary', onClick: onAccept, startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDismiss, ref: acceptButtonRef, children: t('accept') })) : (_jsx(Button, { variant: 'primary', onClick: onAccept, ref: acceptButtonRef, children: t('accept') }));
-    return (_jsxs(StyledInteractionNotification, { ref: containerRef, "data-app-region": true, role: 'alertdialog', "aria-label": title, children: [_jsx(CardHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsxs(CardContent, { container: { gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', as: 'span', children: primaryText }), secondaryText && (_jsx(Text, { variant: 'h5', as: 'span', children: secondaryText })), _jsx(Status, { variant: status.variant, children: status.text })] }), fields && fields.length !== 0 && _jsx(FieldValueList, { variant: 'inline', fields: fields })] }), onAccept ? (_jsxs(CardFooter, { justify: onDismiss ? 'between' : 'end', children: [onDismiss && _jsx(Button, { onClick: onDismiss, children: t('decline') }), acceptButton] })) : (_jsx(CardFooter, { justify: 'end', children: _jsx(Button, { variant: 'primary', onClick: onDismiss, children: t('close') }) }))] }));
+    return (_jsxs(StyledInteractionNotification, { ref: containerRef, "data-app-region": true, role: 'alertdialog', "aria-label": title, children: [_jsx(CardHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsxs(CardContent, { container: { gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationText, { content: primaryText, variant: 'h1' }), secondaryText && _jsx(NotificationText, { content: secondaryText }), tertiaryText && _jsx(NotificationText, { content: tertiaryText }), _jsx(Status, { variant: status.variant, children: status.text })] }), fields && fields.length !== 0 && _jsx(FieldValueList, { variant: 'inline', fields: fields })] }), onAccept ? (_jsxs(CardFooter, { justify: onDismiss ? 'between' : 'end', children: [onDismiss && _jsx(Button, { onClick: onDismiss, children: t('decline') }), acceptButton] })) : (_jsx(CardFooter, { justify: 'end', children: _jsx(Button, { variant: 'primary', onClick: onDismiss, children: t('close') }) }))] }));
 });
 export default InteractionNotification;
 //# sourceMappingURL=InteractionNotification.js.map

package/lib/components/InteractionNotification/InteractionNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,oBAAoB,EACpB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,UAAU,EACV,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,SAAS,EACT,UAAU,EACX,MAAM,yBAAyB,CAAC;AAQjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAiChD,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACzE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;kCAEsB,IAAI,CAAC,OAAO;iCACb,IAAI,CAAC,OAAO;oCACT,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;eAE7C,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,GAAG,CAAC;aAC9B,IAAI,CAAC,MAAM,CAAC,KAAK;kCACI,IAAI,CAAC,SAAS,CAAC,KAAK;2BAC3B,IAAI,CAAC,OAAO;kBACrB,IAAI,CAAC,MAAM,CAAC,GAAG;;;0BAGP,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC;;;;;UAK/C,GAAG;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;;;;;;;;MAQP,iBAAiB;yBACE,IAAI,CAAC,OAAO;;;QAG7B,UAAU;iBACD,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;;;;MAS5B,oBAAoB;4CACkB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;sCACjC,IAAI,CAAC,OAAO;eACnC,IAAI,CAAC,MAAM,CAAC,KAAK;;QAExB,WAAW;iBACF,IAAI,CAAC,MAAM,CAAC,KAAK;;;;8BAIJ,IAAI,CAAC,WAAW,CAAC,EAAE;oCACb,IAAI,CAAC,OAAO;;;GAG7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,cAAc,CACZ;IACE,EAAE,EAAE,yBAAyB;IAC7B,iBAAiB,EAAE,WAAW;CAC/B,EACD;IACE,EAAE,EAAE,4BAA4B;IAChC,iBAAiB,EAAE,OAAO;CAC3B,CACF,CAAC;AAEF,MAAM,uBAAuB,GAC3B,UAAU,CAAC,SAAS,uBAAuB,CACzC,EACE,IAAI,EACJ,KAAK,EACL,WAAW,EACX,aAAa,EACb,MAAM,EACN,MAAM,EACN,2BAA2B,EAC3B,QAAQ,EACR,SAAS,EACqC,EAChD,GAAwC;IAExC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC3C,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,EAAe,CAAC;IACxC,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC,yBAAyB,EAAE,GAAG,EAAE;QAC3E,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,SAAS,CAAC,OAAO,GAAI,QAAQ,CAAC,aAA6B,IAAI,SAAS,CAAC;YACzE,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACnC,CAAC;IACH,CAAC,CAAC,CAAC;IACH,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACjF,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,SAAS,CACP,GAAG,EAAE;QACH,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC3B,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,EACD,YAAY,CAAC,OAAO,EACpB,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC;YAChB,OAAO,EAAE,GAAG,KAAK,IAAI,WAAW,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,IAAI,KAC5D,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,gCAAgC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EACrE,GACE,cAAc,IAAI,SAAS;gBACzB,CAAC,CAAC,CAAC,CAAC,mCAAmC,EAAE,CAAC,cAAc,CAAC,CAAC;gBAC1D,CAAC,CAAC,EACN,EAAE;YACF,IAAI,EAAE,OAAO;SACd,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,2BAA2B,CAAC,CAAC,CAAC,CACjD,KAAC,eAAe,IACd,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,2BAA2B,CAAC,SAAS,EAChD,OAAO,EAAE,2BAA2B,CAAC,aAAa,EAClD,UAAU,EAAE,2BAA2B,CAAC,UAAU,IAAI,SAAS,EAC/D,GAAG,EAAE,eAAe,YAEnB,CAAC,CAAC,QAAQ,CAAC,GACI,CACnB,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,eAAe,YAC9D,CAAC,CAAC,QAAQ,CAAC,GACL,CACV,CAAC;IAEF,OAAO,CACL,MAAC,6BAA6B,IAC5B,GAAG,EAAE,YAAY,2BAEjB,IAAI,EAAC,aAAa,gBACN,KAAK,aAEjB,KAAC,UAAU,cACT,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,IAC5B,GACI,EACb,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aAChC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACpE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,WAAW,GACP,EACN,aAAa,IAAI,CAChB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,aAAa,GACT,CACR,EACD,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,IAAI,GAAU,IAClD,EACN,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAM,GAAI,IACzE,EAEb,QAAQ,CAAC,CAAC,CAAC,CACV,MAAC,UAAU,IAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,aAC/C,SAAS,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,SAAS,YAAG,CAAC,CAAC,SAAS,CAAC,GAAU,EAChE,YAAY,IACF,CACd,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAC,KAAK,YACvB,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,SAAS,YACzC,CAAC,CAAC,OAAO,CAAC,GACJ,GACE,CACd,IAC6B,CACjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,eAAe,uBAAuB,CAAC","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  StyledFieldValueList,\n  useI18n,\n  useDirection,\n  Icon,\n  StyledLabel,\n  useLiveLog,\n  registerAction,\n  useShortcut,\n  useConsolidatedRef,\n  useEscape,\n  CardFooter\n} from '@pega/cosmos-react-core';\nimport type {\n  StatusProps,\n  ForwardRefForwardPropsComponent,\n  FieldValueListProps,\n  NoChildrenProp,\n  RequireAtLeastOne\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n  NoChildrenProp & {\n    /** Ref to Component. */\n    ref?: Ref<HTMLDivElement>;\n    /** Name of the icon used in header. */\n    icon: string;\n    /** Interaction title. */\n    title: string;\n    /** Primary information of the notification. For example caller name . */\n    primaryText: string;\n    /** Secondary information of the notification. For example phone number of the caller */\n    secondaryText?: string;\n    /** Represents the current status of interaction. */\n    status: { variant: StatusProps['variant']; text: string };\n    /** Information structured as field values to be displayed below main section. */\n    fields?: FieldValueListProps['fields'];\n    /** Timeout definition */\n    incomingNotificationTimeout?: {\n      startTime: CountdownButtonProps['startTime'];\n      answerTimeout: CountdownButtonProps['timeout'];\n      onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n    };\n    /** Callback when accept button is clicked. */\n    onAccept?: () => void;\n    /** Callback when decline or 'x' button is clicked. */\n    onDismiss?: () => void;\n  },\n  'onAccept' | 'onDismiss'\n>;\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-block-start: calc(2 * ${base.spacing});\n    inset-inline-end: calc(2 * ${base.spacing});\n    width: min(calc(100% - 2rem), ${base['content-width'].md});\n    max-height: calc(100vh - 2rem);\n    z-index: ${base['z-index'].backdrop - 1};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n    box-shadow: ${base.shadow.low};\n\n    &&& {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n      overflow: auto;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledFieldValueList} {\n      border-block-start: solid 0.0625rem ${base.palette['border-line']};\n      padding-block-start: calc(2 * ${base.spacing});\n      color: ${base.colors.white};\n\n      ${StyledLabel} {\n        color: ${base.colors.white};\n      }\n    }\n\n    @media (min-width: calc(${base.breakpoints.md})) {\n      inset-block-start: calc(8 * ${base.spacing});\n      max-height: initial;\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n  {\n    id: 'GoToIncomingInteraction',\n    defaultKeyBinding: 'Alt+Enter'\n  },\n  {\n    id: 'DismissIncomingInteraction',\n    defaultKeyBinding: 'Alt+Q'\n  }\n);\n\nconst InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps> =\n  forwardRef(function InteractionNotification(\n    {\n      icon,\n      title,\n      primaryText,\n      secondaryText,\n      status,\n      fields,\n      incomingNotificationTimeout,\n      onAccept,\n      onDismiss\n    }: PropsWithoutRef<InteractionNotificationProps>,\n    ref: InteractionNotificationProps['ref']\n  ) {\n    const t = useI18n();\n    const { announceAssertive } = useLiveLog();\n    const containerRef = useConsolidatedRef(ref);\n    const returnRef = useRef<HTMLElement>();\n    const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n    const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n      if (containerRef.current) {\n        returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n        acceptButtonRef.current?.focus();\n      }\n    });\n    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n      onDismiss?.();\n    });\n\n    useEscape(\n      () => {\n        returnRef.current?.focus();\n        onDismiss?.();\n      },\n      containerRef.current,\n      [onDismiss]\n    );\n\n    useEffect(() => {\n      announceAssertive({\n        message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n          goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n        }${\n          dismissBinding && onDismiss\n            ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n            : ''\n        }`,\n        type: 'alert'\n      });\n    }, []);\n\n    const acceptButton = incomingNotificationTimeout ? (\n      <CountdownButton\n        variant='primary'\n        onClick={onAccept}\n        startTime={incomingNotificationTimeout.startTime}\n        timeout={incomingNotificationTimeout.answerTimeout}\n        onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismiss}\n        ref={acceptButtonRef}\n      >\n        {t('accept')}\n      </CountdownButton>\n    ) : (\n      <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n        {t('accept')}\n      </Button>\n    );\n\n    return (\n      <StyledInteractionNotification\n        ref={containerRef}\n        data-app-region\n        role='alertdialog'\n        aria-label={title}\n      >\n        <CardHeader>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            <Icon name={icon} />\n            <Text variant='h2'>{title}</Text>\n          </Flex>\n        </CardHeader>\n        <CardContent container={{ gap: 2 }}>\n          <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n            <Text variant='h1' as='span'>\n              {primaryText}\n            </Text>\n            {secondaryText && (\n              <Text variant='h5' as='span'>\n                {secondaryText}\n              </Text>\n            )}\n            <Status variant={status.variant}>{status.text}</Status>\n          </Flex>\n          {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n        </CardContent>\n\n        {onAccept ? (\n          <CardFooter justify={onDismiss ? 'between' : 'end'}>\n            {onDismiss && <Button onClick={onDismiss}>{t('decline')}</Button>}\n            {acceptButton}\n          </CardFooter>\n        ) : (\n          <CardFooter justify='end'>\n            <Button variant='primary' onClick={onDismiss}>\n              {t('close')}\n            </Button>\n          </CardFooter>\n        )}\n      </StyledInteractionNotification>\n    );\n  });\n\nexport default InteractionNotification;\n"]}
+{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  StyledFieldValueList,\n  useI18n,\n  useDirection,\n  Icon,\n  StyledLabel,\n  useLiveLog,\n  registerAction,\n  useShortcut,\n  useConsolidatedRef,\n  useEscape,\n  CardFooter,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type {\n  StatusProps,\n  ForwardRefForwardPropsComponent,\n  FieldValueListProps,\n  NoChildrenProp,\n  RequireAtLeastOne\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\ninterface InfoText {\n  /** Visually hidden description for accessibility purposes. */\n  description: string;\n  /** Information text. */\n  text: string;\n}\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n  NoChildrenProp & {\n    /** Ref to Component. */\n    ref?: Ref<HTMLDivElement>;\n    /** Name of the icon used in header. */\n    icon: string;\n    /** Interaction title. */\n    title: string;\n    /** Represents the current status of interaction. */\n    status: { variant: StatusProps['variant']; text: string };\n    /** Information structured as field values to be displayed below main section. */\n    fields?: FieldValueListProps['fields'];\n    /** Timeout definition */\n    incomingNotificationTimeout?: {\n      startTime: CountdownButtonProps['startTime'];\n      answerTimeout: CountdownButtonProps['timeout'];\n      onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n    };\n    /** Callback when accept button is clicked. */\n    onAccept?: () => void;\n    /** Callback when decline or 'x' button is clicked. */\n    onDismiss?: () => void;\n  } & (\n      | {\n          /** Primary information of the notification. For example caller name. */\n          primaryText: InfoText;\n          /** Secondary information of the notification. For example phone number of the caller. */\n          secondaryText?: InfoText;\n          /** Tertiary information of the notification. For example role of the caller. */\n          tertiaryText?: InfoText;\n        }\n      | {\n          /** Primary information of the notification. For example caller name. */\n          primaryText: string;\n          /** Secondary information of the notification. For example phone number of the caller. */\n          secondaryText?: string;\n          /** Tertiary information of the notification. For example role of the caller. */\n          tertiaryText?: string;\n        }\n    ),\n  'onAccept' | 'onDismiss'\n>;\n\ninterface NotificationTextProps {\n  /** Information of the notification. */\n  content: InfoText | string;\n  /** Heading variant for the notification text. */\n  variant?: 'h1' | 'h5';\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-block-start: calc(2 * ${base.spacing});\n    inset-inline-end: calc(2 * ${base.spacing});\n    width: min(calc(100% - 2rem), ${base['content-width'].md});\n    max-height: calc(100vh - 2rem);\n    z-index: ${base['z-index'].backdrop - 1};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n    box-shadow: ${base.shadow.low};\n\n    &&& {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n      overflow: auto;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledFieldValueList} {\n      border-block-start: solid 0.0625rem ${base.palette['border-line']};\n      padding-block-start: calc(2 * ${base.spacing});\n      color: ${base.colors.white};\n\n      ${StyledLabel} {\n        color: ${base.colors.white};\n      }\n    }\n\n    @media (min-width: calc(${base.breakpoints.md})) {\n      inset-block-start: calc(8 * ${base.spacing});\n      max-height: initial;\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n  {\n    id: 'GoToIncomingInteraction',\n    defaultKeyBinding: 'Alt+Enter'\n  },\n  {\n    id: 'DismissIncomingInteraction',\n    defaultKeyBinding: 'Alt+Q'\n  }\n);\n\nconst NotificationText = ({ content, variant = 'h5' }: NotificationTextProps) => {\n  const isString = typeof content === 'string';\n\n  const text = (\n    <Text variant={variant} as='span'>\n      {isString ? content : content.text}\n    </Text>\n  );\n\n  return isString ? (\n    text\n  ) : (\n    <div>\n      <VisuallyHiddenText>{`${content.description} - `}</VisuallyHiddenText>\n      {text}\n    </div>\n  );\n};\n\nconst InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps> =\n  forwardRef(function InteractionNotification(\n    {\n      icon,\n      title,\n      primaryText,\n      secondaryText,\n      tertiaryText,\n      status,\n      fields,\n      incomingNotificationTimeout,\n      onAccept,\n      onDismiss\n    }: PropsWithoutRef<InteractionNotificationProps>,\n    ref: InteractionNotificationProps['ref']\n  ) {\n    const t = useI18n();\n    const { announceAssertive } = useLiveLog();\n    const containerRef = useConsolidatedRef(ref);\n    const returnRef = useRef<HTMLElement>();\n    const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n    const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n      if (containerRef.current) {\n        returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n        acceptButtonRef.current?.focus();\n      }\n    });\n    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n      onDismiss?.();\n    });\n\n    useEscape(\n      () => {\n        returnRef.current?.focus();\n        onDismiss?.();\n      },\n      containerRef.current,\n      [onDismiss]\n    );\n\n    useEffect(() => {\n      announceAssertive({\n        message: `${title} ${\n          typeof primaryText === 'string' ? primaryText : primaryText.description\n        } ${t('status')} ${status.text}. ${\n          goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n        }${\n          dismissBinding && onDismiss\n            ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n            : ''\n        }`,\n        type: 'alert'\n      });\n    }, []);\n\n    const acceptButton = incomingNotificationTimeout ? (\n      <CountdownButton\n        variant='primary'\n        onClick={onAccept}\n        startTime={incomingNotificationTimeout.startTime}\n        timeout={incomingNotificationTimeout.answerTimeout}\n        onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismiss}\n        ref={acceptButtonRef}\n      >\n        {t('accept')}\n      </CountdownButton>\n    ) : (\n      <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n        {t('accept')}\n      </Button>\n    );\n\n    return (\n      <StyledInteractionNotification\n        ref={containerRef}\n        data-app-region\n        role='alertdialog'\n        aria-label={title}\n      >\n        <CardHeader>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            <Icon name={icon} />\n            <Text variant='h2'>{title}</Text>\n          </Flex>\n        </CardHeader>\n        <CardContent container={{ gap: 2 }}>\n          <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n            <NotificationText content={primaryText} variant='h1' />\n            {secondaryText && <NotificationText content={secondaryText} />}\n            {tertiaryText && <NotificationText content={tertiaryText} />}\n            <Status variant={status.variant}>{status.text}</Status>\n          </Flex>\n          {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n        </CardContent>\n\n        {onAccept ? (\n          <CardFooter justify={onDismiss ? 'between' : 'end'}>\n            {onDismiss && <Button onClick={onDismiss}>{t('decline')}</Button>}\n            {acceptButton}\n          </CardFooter>\n        ) : (\n          <CardFooter justify='end'>\n            <Button variant='primary' onClick={onDismiss}>\n              {t('close')}\n            </Button>\n          </CardFooter>\n        )}\n      </StyledInteractionNotification>\n    );\n  });\n\nexport default InteractionNotification;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "9.0.0-build.14.5",
+  "version": "9.0.0-build.14.7",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "9.0.0-build.14.5",
-    "@pega/cosmos-react-rte": "9.0.0-build.14.5",
+    "@pega/cosmos-react-core": "9.0.0-build.14.7",
+    "@pega/cosmos-react-rte": "9.0.0-build.14.7",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "@types/styled-components": "^5.1.26",