@pega/cosmos-react-social 5.0.0-dev.9.2 → 6.0.0

package/SECURITY.md

@@ -0,0 +1,11 @@
+# Reporting Security Issues
+
+Pegasystems takes security seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, [email us](mailto:opensource@pega.com;security@pega.com) and include the word "SECURITY" in the subject line.
+
+The Pega team will send a response indicating the next steps in handling your report. We may ask for additional information or guidance.
+
+## Learning More About Security
+
+To learn more about securing a Pega application or our security capabilities, please see the [security article](https://community.pega.com/knowledgebase/capabilities/security) on Pega Community and the [Pega Trust Center](https://www.pega.com/products/cloud/pega-trust-center).

package/lib/components/Chat/Chat.types.d.ts

@@ -32,13 +32,17 @@ export type ColorTheme = [
     keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>,
     'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark'
 ];
-export interface MediaPageLinks extends Pick<LinkProps, 'href'> {
+export interface MediaPageLinks {
     /** Unique id for this push link */
     id: string;
+    /** Title of the content */
+    title: string;
+    /** Href for external links */
+    href?: LinkProps['href'];
+    /** Callback provided to perform on click */
+    onTitleClick?: () => void;
     /** A string to be used as an image src for a thumbnail. */
     thumbnail?: AttachmentItemProps['thumbnail'];
-    /** Additional information about the linked resource. */
-    title?: string;
 }
 export type MessageHeaderProps = {
     /** message header content */

package/lib/components/Chat/Chat.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chat.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.types.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"AA4JA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,OAA8B,EACG,EAAE;IACnC,OAAO,OAAO,CAAC,IAAI,KAAK,SAAS,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EACS,EAAE;IACzC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EACQ,EAAE;IACxC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;AACnC,CAAC,CAAC","sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { DefaultTheme } from 'styled-components';\n\nimport type {\n  BaseProps,\n  Action,\n  NoChildrenProp,\n  OmitStrict,\n  LinkProps,\n  AvatarProps\n} from '@pega/cosmos-react-core';\n\nexport interface AttachmentItemProps extends BaseProps {\n  /** Unique Id for this attachment */\n  id: string;\n  /** Name of the attachment. */\n  name: string;\n  /**\n   * A Cosmos icon name identifier to use for a attachment. Will serve as a fallback to a broken thumbnail.\n   * @default 'document-doc'\n   */\n  icon?: string;\n  /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n  thumbnail?: string;\n  /** Additional information about the attachment. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */\n  meta?: string;\n  /** When passed, previews the attachment on click */\n  onPreview?: (id: string) => void;\n  /** Actions list for the attachment */\n  actions?: Action[];\n  /** When passed, this will render a single icon button or within a MenuButton if onDelete is defined. */\n  onDelete?: (id: string) => void;\n}\n\nexport type UserAvailability = 'available' | 'unavailable' | 'temporarilyUnavailable';\n\nexport interface ChatSettingsPanelProps extends NoChildrenProp {\n  status?: UserAvailability;\n  label: string;\n  onClick: () => void;\n}\n\nexport type ColorTheme = [\n  keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>,\n  'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark'\n];\n\nexport interface MediaPageLinks extends Pick<LinkProps, 'href'> {\n  /** Unique id for this push link */\n  id: string;\n  /** A string to be used as an image src for a thumbnail. */\n  thumbnail?: AttachmentItemProps['thumbnail'];\n  /** Additional information about the linked resource. */\n  title?: string;\n}\n\nexport type MessageHeaderProps = {\n  /** message header content */\n  content?: ReactNode;\n  /** meta data */\n  meta?: ReactNode;\n};\n\nexport interface MessageProps {\n  /** Message to be displayed */\n  message?: string;\n  /** Attachment list */\n  attachments?: AttachmentItemProps[];\n  /** Message page push links list */\n  mediaPageLinks?: MediaPageLinks[];\n  /** timestamp of the message(Formatted) */\n  timestamp?: string;\n  /** Incoming message/ outgoing message */\n  direction: 'in' | 'out';\n  /** Avatar information, can be image and name */\n  avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n  /** Message status */\n  status?: 'delivered' | 'opened' | 'undeliverable' | 'sent';\n  /** Indicates if this message is being currently typed */\n  typing?: boolean;\n  /** Message header */\n  messageHeader?: MessageHeaderProps;\n  /** Sender type */\n  senderType: 'customer' | 'agent' | 'bot';\n  /** Sender ID, will be helpful in deciding the colour */\n  senderId: string;\n  /** Number used to determine the color of agent's message */\n  agentVariant?: number;\n  /** ref to the message wrapper */\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport interface TypeIndicatorProps\n  extends Pick<MessageProps, 'ref' | 'message' | 'senderId' | 'senderType' | 'agentVariant'> {\n  /** Avatar information, can be image and name */\n  avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;\n}\n\nexport interface SystemMessageProps extends Pick<MessageProps, 'ref' | 'timestamp'> {\n  /** System message to be displayed */\n  message: string;\n  /** variant of this system message\n   * @default 'secondary'\n   */\n  variant?: 'primary' | 'secondary';\n}\n\nexport interface ChatBodyHandleValue {\n  isScrolledToLatest: () => boolean;\n  scrollToLatestMessage: () => void;\n  scrollToNewMessage: () => void;\n}\n\nexport interface ChatBodyProps {\n  /** Transcripts */\n  transcripts: {\n    /** Unique id of a chat session */\n    id: string;\n    /** Messages in a chat session */\n    messages: ChatBodyListItemProps[];\n  }[];\n  /** Live chat messages */\n  liveChat: ChatBodyListItemProps[];\n  /** Total unread messages */\n  unreadMessageCount?: number;\n  /** on scroll to button */\n  onScrollToButtonClick?: () => void;\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n  /** Offset of the row item that need to trigger the load more callback */\n  offset?: number;\n  /** Callback to fetch more rows */\n  loadMore?: () => void;\n  /** Imperative handle */\n  handle?: Ref<ChatBodyHandleValue>;\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype MessageListItemProps = OmitStrict<MessageProps, 'agentVariant' | 'typing'> & {\n  type: 'message';\n  id: string;\n};\n\ntype SystemMessageListItemProps = SystemMessageProps & { type: 'system'; id: string };\n\ntype TypeIndicatorListItemPops = OmitStrict<TypeIndicatorProps, 'agentVariant'> & {\n  type: 'typing';\n  id: string;\n};\n\nexport type ChatBodyListItemProps =\n  | MessageListItemProps\n  | SystemMessageListItemProps\n  | TypeIndicatorListItemPops;\n\nexport const isMessageListItem = (\n  message: ChatBodyListItemProps\n): message is MessageListItemProps => {\n  return message.type === 'message';\n};\n\nexport const isSystemMessageListItem = (\n  message: ChatBodyListItemProps\n): message is SystemMessageListItemProps => {\n  return message.type === 'system';\n};\n\nexport const isTypeIndicatorListItem = (\n  message: ChatBodyListItemProps\n): message is TypeIndicatorListItemPops => {\n  return message.type === 'typing';\n};\n"]}
+{"version":3,"file":"Chat.types.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"AAgKA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,OAA8B,EACG,EAAE;IACnC,OAAO,OAAO,CAAC,IAAI,KAAK,SAAS,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EACS,EAAE;IACzC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA8B,EACQ,EAAE;IACxC,OAAO,OAAO,CAAC,IAAI,KAAK,QAAQ,CAAC;AACnC,CAAC,CAAC","sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { DefaultTheme } from 'styled-components';\n\nimport type {\n  BaseProps,\n  Action,\n  NoChildrenProp,\n  OmitStrict,\n  LinkProps,\n  AvatarProps\n} from '@pega/cosmos-react-core';\n\nexport interface AttachmentItemProps extends BaseProps {\n  /** Unique Id for this attachment */\n  id: string;\n  /** Name of the attachment. */\n  name: string;\n  /**\n   * A Cosmos icon name identifier to use for a attachment. Will serve as a fallback to a broken thumbnail.\n   * @default 'document-doc'\n   */\n  icon?: string;\n  /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n  thumbnail?: string;\n  /** Additional information about the attachment. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */\n  meta?: string;\n  /** When passed, previews the attachment on click */\n  onPreview?: (id: string) => void;\n  /** Actions list for the attachment */\n  actions?: Action[];\n  /** When passed, this will render a single icon button or within a MenuButton if onDelete is defined. */\n  onDelete?: (id: string) => void;\n}\n\nexport type UserAvailability = 'available' | 'unavailable' | 'temporarilyUnavailable';\n\nexport interface ChatSettingsPanelProps extends NoChildrenProp {\n  status?: UserAvailability;\n  label: string;\n  onClick: () => void;\n}\n\nexport type ColorTheme = [\n  keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>,\n  'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark'\n];\n\nexport interface MediaPageLinks {\n  /** Unique id for this push link */\n  id: string;\n  /** Title of the content */\n  title: string;\n  /** Href for external links */\n  href?: LinkProps['href'];\n  /** Callback provided to perform on click */\n  onTitleClick?: () => void;\n  /** A string to be used as an image src for a thumbnail. */\n  thumbnail?: AttachmentItemProps['thumbnail'];\n}\n\nexport type MessageHeaderProps = {\n  /** message header content */\n  content?: ReactNode;\n  /** meta data */\n  meta?: ReactNode;\n};\n\nexport interface MessageProps {\n  /** Message to be displayed */\n  message?: string;\n  /** Attachment list */\n  attachments?: AttachmentItemProps[];\n  /** Message page push links list */\n  mediaPageLinks?: MediaPageLinks[];\n  /** timestamp of the message(Formatted) */\n  timestamp?: string;\n  /** Incoming message/ outgoing message */\n  direction: 'in' | 'out';\n  /** Avatar information, can be image and name */\n  avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n  /** Message status */\n  status?: 'delivered' | 'opened' | 'undeliverable' | 'sent';\n  /** Indicates if this message is being currently typed */\n  typing?: boolean;\n  /** Message header */\n  messageHeader?: MessageHeaderProps;\n  /** Sender type */\n  senderType: 'customer' | 'agent' | 'bot';\n  /** Sender ID, will be helpful in deciding the colour */\n  senderId: string;\n  /** Number used to determine the color of agent's message */\n  agentVariant?: number;\n  /** ref to the message wrapper */\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport interface TypeIndicatorProps\n  extends Pick<MessageProps, 'ref' | 'message' | 'senderId' | 'senderType' | 'agentVariant'> {\n  /** Avatar information, can be image and name */\n  avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;\n}\n\nexport interface SystemMessageProps extends Pick<MessageProps, 'ref' | 'timestamp'> {\n  /** System message to be displayed */\n  message: string;\n  /** variant of this system message\n   * @default 'secondary'\n   */\n  variant?: 'primary' | 'secondary';\n}\n\nexport interface ChatBodyHandleValue {\n  isScrolledToLatest: () => boolean;\n  scrollToLatestMessage: () => void;\n  scrollToNewMessage: () => void;\n}\n\nexport interface ChatBodyProps {\n  /** Transcripts */\n  transcripts: {\n    /** Unique id of a chat session */\n    id: string;\n    /** Messages in a chat session */\n    messages: ChatBodyListItemProps[];\n  }[];\n  /** Live chat messages */\n  liveChat: ChatBodyListItemProps[];\n  /** Total unread messages */\n  unreadMessageCount?: number;\n  /** on scroll to button */\n  onScrollToButtonClick?: () => void;\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n  /** Offset of the row item that need to trigger the load more callback */\n  offset?: number;\n  /** Callback to fetch more rows */\n  loadMore?: () => void;\n  /** Imperative handle */\n  handle?: Ref<ChatBodyHandleValue>;\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype MessageListItemProps = OmitStrict<MessageProps, 'agentVariant' | 'typing'> & {\n  type: 'message';\n  id: string;\n};\n\ntype SystemMessageListItemProps = SystemMessageProps & { type: 'system'; id: string };\n\ntype TypeIndicatorListItemPops = OmitStrict<TypeIndicatorProps, 'agentVariant'> & {\n  type: 'typing';\n  id: string;\n};\n\nexport type ChatBodyListItemProps =\n  | MessageListItemProps\n  | SystemMessageListItemProps\n  | TypeIndicatorListItemPops;\n\nexport const isMessageListItem = (\n  message: ChatBodyListItemProps\n): message is MessageListItemProps => {\n  return message.type === 'message';\n};\n\nexport const isSystemMessageListItem = (\n  message: ChatBodyListItemProps\n): message is SystemMessageListItemProps => {\n  return message.type === 'system';\n};\n\nexport const isTypeIndicatorListItem = (\n  message: ChatBodyListItemProps\n): message is TypeIndicatorListItemPops => {\n  return message.type === 'typing';\n};\n"]}

package/lib/components/Chat/ChatComposer.d.ts

@@ -34,6 +34,13 @@ export interface ChatComposerProps {
     disabled?: boolean;
     /** Children */
     children?: ReactNode;
+    /** On suggest reply click */
+    onSuggestReplyClick?: () => void;
+    /**
+     * Disable suggest reply button
+     * @default false
+     */
+    disableSuggestReply?: boolean;
     /** Ref to the Imperative handle */
     ref?: Ref<ChatComposerImperativeHandleProps>;
 }

package/lib/components/Chat/ChatComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,GAAG,EAEH,SAAS,EAET,SAAS,EACT,aAAa,EACd,MAAM,OAAO,CAAC;AAqBf,OAAO,KAAK,EAGV,YAAY,EACZ,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AAQjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,oEAAoE;IACpE,YAAY,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACpC,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iCAAiC,CAAC,CAAC;CAC9C;AA4ED,eAAO,MAAM,8BAA8B,yGAUzC,CAAC;AAEH,MAAM,WAAW,iCAAiC;IAChD,mCAAmC;IACnC,eAAe,EAAE,CACf,aAAa,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,YAAY,KACjD,IAAI,CAAC;IACV,4CAA4C;IAC5C,eAAe,EAAE,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IACvD,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiTrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,GAAG,EAEH,SAAS,EAET,SAAS,EACT,aAAa,EACd,MAAM,OAAO,CAAC;AAsBf,OAAO,KAAK,EAGV,YAAY,EACZ,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AAQjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,oEAAoE;IACpE,YAAY,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACpC,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iCAAiC,CAAC,CAAC;CAC9C;AA4ED,eAAO,MAAM,8BAA8B,yGAUzC,CAAC;AAEH,MAAM,WAAW,iCAAiC;IAChD,mCAAmC;IACnC,eAAe,EAAE,CACf,aAAa,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,YAAY,KACjD,IAAI,CAAC;IACV,4CAA4C;IAC5C,eAAe,EAAE,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IACvD,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA6TrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Chat/ChatComposer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { createElement as _createElement } from "react";
 import { forwardRef, useState, useEffect, useCallback, useImperativeHandle, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, TextArea, Button, Icon, registerIcon, Popover, EmojiPicker, hasProp, useI18n, useElement, defaultThemeProp, Tooltip, useOuterEvent, VisuallyHiddenText, FileUploadItem, Grid } from '@pega/cosmos-react-core';
+import { Flex, TextArea, Button, Icon, registerIcon, Popover, EmojiPicker, hasProp, useI18n, useElement, defaultThemeProp, Tooltip, useOuterEvent, VisuallyHiddenText, FileUploadItem, Grid, AIButton } from '@pega/cosmos-react-core';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as faceHappyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/face-happy.icon';
@@ -75,7 +75,7 @@ export const StyledAttachmentsListContainer = styled.div(({ theme }) => {
   `;
 });
 const ChatComposer = forwardRef(function ChatComposer(props, ref) {
-    const { children, attachments = [], maxAttachments = 0, onAddAttachment, maxLength, placeholder: defaultPlaceHolder, defaultMessage = '', onSend, specialKeysConfig, disabled = false, enterKeySendsMessage = true, showEmoji, ...restProps } = props;
+    const { children, attachments = [], maxAttachments = 0, onAddAttachment, maxLength, placeholder: defaultPlaceHolder, defaultMessage = '', onSend, specialKeysConfig, disabled = false, enterKeySendsMessage = true, showEmoji, onSuggestReplyClick, disableSuggestReply = false, ...restProps } = props;
     const [message, setMessage] = useState(defaultMessage);
     useEffect(() => {
         setMessage(defaultMessage);
@@ -141,7 +141,7 @@ const ChatComposer = forwardRef(function ChatComposer(props, ref) {
         }
     }, [onSend]);
     const handleEnterKeyDown = useCallback((e) => {
-        if (enterKeySendsMessage && e.keyCode === 13 && !e.shiftKey) {
+        if (enterKeySendsMessage && e.key === 'Enter' && !e.shiftKey) {
             if (!maxLength || message.length <= maxLength) {
                 sendMessage(message);
                 setAnnouncement(t('message_sent'));
@@ -207,7 +207,7 @@ const ChatComposer = forwardRef(function ChatComposer(props, ref) {
                                     return (_jsx("div", { "aria-label": `${t('attachments_x_of_y', [idx + 1, attachments.length])}`, children: _jsx(StyledAttachmentItem, { ...attachment }) }, attachment.name));
                                 }) }), _jsx(TextArea, { ref: textAreaRef, maxLength: maxLength, displayCharCount: maxLength !== undefined, hardStop: false, placeholder: defaultPlaceHolder, value: message, disabled: disabled, onKeyUp: handleSpecialKey, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: handleTextAreaChange, "aria-label": t('enter_message'), autoResize: false })] }), _jsxs(Flex, { container: { gap: 0.5 }, children: [showEmoji && (_jsx(Button, { ref: setEmojiBtnEl, onClick: toggleEmoji, variant: 'simple', disabled: disabled, icon: true, "aria-label": t('add_emoji'), children: _jsx(Icon, { name: 'face-happy' }) })), maxAttachments > 0 && (_jsxs(StyledAttachmentElementContainer, { disabled: attachments.length >= maxAttachments, ref: setAttachmentsBtnEl, tabIndex: attachments.length >= maxAttachments ? 0 : undefined, role: 'button', children: [_jsx(Button, { onClick: onAddAttachment, variant: 'simple', disabled: !!(disabled || attachments.length >= maxAttachments), icon: true, "aria-label": attachments.length >= maxAttachments
                                             ? t('email_disable_attachment', [maxAttachments])
-                                            : t('email_add_attachment', [maxAttachments]), children: _jsx(Icon, { name: 'paper-clip' }) }), attachments.length >= maxAttachments && (_jsx(Tooltip, { target: attachmentsBtnEl, showDelay: 'none', hideDelay: 'none', ...restProps, children: t('email_disable_attachment', [maxAttachments]) }))] })), _jsx(Flex, { item: { grow: 1 }, children: children }), _jsx(Button, { variant: 'primary', disabled: disabled || (!!maxLength && message.length > maxLength), onClick: () => {
+                                            : t('email_add_attachment', [maxAttachments]), children: _jsx(Icon, { name: 'paper-clip' }) }), attachments.length >= maxAttachments && (_jsx(Tooltip, { target: attachmentsBtnEl, showDelay: 'none', hideDelay: 'none', ...restProps, children: t('email_disable_attachment', [maxAttachments]) }))] })), _jsxs(Flex, { item: { grow: 1 }, container: { gap: 1 }, children: [children, onSuggestReplyClick && (_jsx(AIButton, { label: t('suggest_reply'), disabled: disabled || disableSuggestReply, onClick: onSuggestReplyClick }))] }), _jsx(Button, { variant: 'primary', disabled: disabled || (!!maxLength && message.length > maxLength), onClick: () => {
                                     sendMessage(message);
                                     setAnnouncement(t('message_sent'));
                                 }, children: t('send') }), announcement && (_jsx(VisuallyHiddenText, { "aria-live": 'assertive', children: announcement }))] })] }), _jsx(Popover, { show: showEmojiPicker, target: emojiBtnEl, placement: 'top-start', modifiers: [

package/lib/components/Chat/ChatComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useCallback, useImperativeHandle, useRef } from 'react';\nimport type {\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  ReactNode,\n  ChangeEvent,\n  RefObject,\n  KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  TextArea,\n  Button,\n  Icon,\n  registerIcon,\n  Popover,\n  EmojiPicker,\n  hasProp,\n  useI18n,\n  useElement,\n  defaultThemeProp,\n  Tooltip,\n  useOuterEvent,\n  VisuallyHiddenText,\n  FileUploadItem,\n  Grid\n} from '@pega/cosmos-react-core';\nimport type {\n  EmojiPickerProps,\n  PropsWithDefaults,\n  ForwardProps,\n  FileUploadItemProps\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as faceHappyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/face-happy.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nregisterIcon(timesIcon, faceHappyIcon, paperClipIcon);\n\nexport type SpecialKeysConfig = {\n  /** Collection of specialKeys */\n  keys: string[];\n  /** onSpecialKey is fired when a special key is typed in Textarea */\n  onSpecialKey: (e: KeyboardEvent<HTMLTextAreaElement>, key: string) => void;\n};\n\nexport interface ChatComposerProps {\n  /** Place holder */\n  placeholder?: string;\n  /** Default message to populate on load */\n  defaultMessage?: string;\n  /** Max character limit */\n  maxLength?: number;\n  /** Callback when send button is clicked */\n  onSend: (message: string) => void;\n  /** Enter / Return key sends message */\n  enterKeySendsMessage?: boolean;\n  /** Max number of attachments to be allowed in chat composer.\n   * If zero is passed, add attachments icon will be hidden. same rule applies if prop is not passed.\n   * If attachments added are >= maxAttachments, add attachments icon will be disabled.\n   */\n  maxAttachments?: number;\n  /** show/hide emoji */\n  showEmoji?: boolean;\n  /** Attachments list */\n  attachments?: FileUploadItemProps[];\n  /** Callback when attachment icon is clicked */\n  onAddAttachment?: () => void;\n  /** Special Keys configuration */\n  specialKeysConfig?: SpecialKeysConfig;\n  /** Disables the composer area */\n  disabled?: boolean;\n  /** Children */\n  children?: ReactNode;\n  /** Ref to the Imperative handle */\n  ref?: Ref<ChatComposerImperativeHandleProps>;\n}\n\nconst StyledAttachmentItem = styled(FileUploadItem)``;\n\ninterface DisableAttachmentProps {\n  disabled?: boolean;\n}\nconst StyledAttachmentElementContainer = styled.div<DisableAttachmentProps>(\n  ({ disabled, theme }) => {\n    return (\n      disabled &&\n      css`\n        &:focus {\n          box-shadow: ${theme.base.shadow.focus};\n          border-radius: 50%;\n          outline: none;\n        }\n      `\n    );\n  }\n);\nconst StyledPreviewButton = styled(BareButton)``;\nconst StyledDeleteButton = styled(BareButton)``;\n\nconst StyledChatComposer = styled.footer<PropsWithDefaults<ChatComposerProps, 'disabled'>>(\n  ({\n    theme,\n    disabled,\n    theme: {\n      base: { 'disabled-opacity': transparentBg, spacing }\n    }\n  }) => {\n    return css`\n      padding: calc(2 * ${spacing});\n      background-color: ${theme.base.palette['secondary-background']};\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n      textarea {\n        border-radius: ${theme.base['border-radius']};\n        height: 5rem;\n        border: 0.0625rem solid ${theme.base.colors.gray['extra-light']};\n        max-width: 100%;\n      }\n      ${StyledAttachmentItem} {\n        ${disabled &&\n        css`\n          pointer-events: none;\n          opacity: ${transparentBg};\n        `}\n      }\n\n      ${StyledAttachmentElementContainer} {\n        ${disabled &&\n        css`\n          pointer-events: none;\n        `}\n      }\n\n      ${StyledPreviewButton} {\n        color: ${theme.base.palette.interactive};\n        font-weight: bold;\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      ${StyledDeleteButton} {\n        color: ${theme.base.palette.interactive};\n      }\n    `;\n  }\n);\n\nStyledChatComposer.defaultProps = defaultThemeProp;\nStyledAttachmentElementContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsListContainer = styled.div(({ theme }) => {\n  return css`\n    max-height: 5rem;\n    overflow-y: auto;\n\n    &:focus-within {\n      box-shadow: ${theme.base.shadow['focus-group']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n    }\n  `;\n});\n\nexport interface ChatComposerImperativeHandleProps {\n  /** Function to append a message */\n  appendToMessage: (\n    appendMessage: string,\n    position?: 'cursor' | 'start' | 'end' | 'specialKey'\n  ) => void;\n  /** Actual ref to Chat composer component */\n  chatComposerRef: RefObject<HTMLDivElement | undefined>;\n  textAreaRef: RefObject<HTMLTextAreaElement | undefined>;\n}\n\nconst ChatComposer: FunctionComponent<ChatComposerProps & ForwardProps> = forwardRef(\n  function ChatComposer(props: PropsWithoutRef<ChatComposerProps>, ref: ChatComposerProps['ref']) {\n    const {\n      children,\n      attachments = [],\n      maxAttachments = 0,\n      onAddAttachment,\n      maxLength,\n      placeholder: defaultPlaceHolder,\n      defaultMessage = '',\n      onSend,\n      specialKeysConfig,\n      disabled = false,\n      enterKeySendsMessage = true,\n      showEmoji,\n      ...restProps\n    } = props;\n    const [message, setMessage] = useState(defaultMessage);\n    useEffect(() => {\n      setMessage(defaultMessage);\n    }, [defaultMessage]);\n\n    const t = useI18n();\n\n    const textAreaRef = useRef<HTMLTextAreaElement>(null);\n    const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n    const [emojiBtnEl, setEmojiBtnEl] = useElement();\n    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();\n    const [announcement, setAnnouncement] = useState('');\n\n    const lastEnteredSpecialKey = useRef<string | null>(null);\n\n    const appendToMessage = useCallback(\n      (\n        appendMessage: string,\n        position?: 'cursor' | 'start' | 'end' | 'specialKey',\n        selectText: boolean = true\n      ) => {\n        let selectionStart;\n        let selectionEnd;\n        if (textAreaRef.current) {\n          if (position === 'start') {\n            textAreaRef.current.value = appendMessage + textAreaRef.current.value;\n            selectionStart = 0;\n            selectionEnd = appendMessage.length;\n          } else if (position === 'end') {\n            const initialEnd = textAreaRef.current.value.length;\n            textAreaRef.current.value += appendMessage;\n            selectionStart = initialEnd;\n            selectionEnd = initialEnd + appendMessage.length;\n          } else if (position === 'specialKey' && lastEnteredSpecialKey.current) {\n            const replaceChars = lastEnteredSpecialKey.current.length;\n            const currentSelectionStart = textAreaRef.current.selectionStart;\n            textAreaRef.current.value =\n              textAreaRef.current.value.substring(\n                0,\n                textAreaRef.current.selectionStart - replaceChars\n              ) +\n              appendMessage +\n              textAreaRef.current.value.substring(\n                textAreaRef.current.selectionStart,\n                textAreaRef.current.value.length\n              );\n            selectionStart = currentSelectionStart - replaceChars;\n            selectionEnd = currentSelectionStart + appendMessage.length - replaceChars;\n            lastEnteredSpecialKey.current = null;\n          } else {\n            const currentSelectionStart = textAreaRef.current.selectionStart;\n            textAreaRef.current.value =\n              textAreaRef.current.value.substring(0, textAreaRef.current.selectionStart) +\n              appendMessage +\n              textAreaRef.current.value.substring(\n                textAreaRef.current.selectionStart,\n                textAreaRef.current.value.length\n              );\n            selectionStart = currentSelectionStart;\n            selectionEnd = currentSelectionStart + appendMessage.length;\n          }\n          textAreaRef.current.selectionStart = selectText ? selectionStart : selectionEnd;\n          textAreaRef.current.selectionEnd = selectionEnd;\n          textAreaRef.current.focus();\n          setMessage(textAreaRef.current.value);\n        }\n      },\n      [setMessage, textAreaRef.current]\n    );\n\n    const chatComposerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({ appendToMessage, chatComposerRef, textAreaRef }), [\n      appendToMessage,\n      chatComposerRef.current,\n      textAreaRef.current\n    ]);\n\n    const sendMessage = useCallback(\n      (newMessage: string) => {\n        if (onSend) {\n          onSend(newMessage);\n          setMessage('');\n        }\n      },\n      [onSend]\n    );\n\n    const handleEnterKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (enterKeySendsMessage && e.keyCode === 13 && !e.shiftKey) {\n          if (!maxLength || message.length <= maxLength) {\n            sendMessage(message);\n            setAnnouncement(t('message_sent'));\n          }\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      },\n      [onSend, message, maxLength]\n    );\n\n    const handleTextAreaChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        setMessage(e.currentTarget.value);\n        setAnnouncement('');\n      },\n      [setMessage]\n    );\n\n    const handleSpecialKey = useCallback(\n      (e: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!specialKeysConfig) return;\n        const { keys, onSpecialKey } = specialKeysConfig;\n        if (specialKeysConfig && keys.length > 0) {\n          const composerValue = e.currentTarget.value.substring(0, e.currentTarget.selectionStart);\n          const specialKey = keys.find(key => composerValue.endsWith(key));\n          if (specialKey) {\n            lastEnteredSpecialKey.current = specialKey;\n            onSpecialKey(e, specialKey);\n          }\n        }\n      },\n      [specialKeysConfig]\n    );\n\n    const toggleEmoji = () => {\n      setShowEmojiPicker(!showEmojiPicker);\n    };\n    const onEmojiSelect: EmojiPickerProps['onSelect'] = emojiElem => {\n      // Check that it is not a custom emoji\n      if (hasProp(emojiElem, 'native')) {\n        appendToMessage(emojiElem.native, 'cursor', false);\n      }\n      setShowEmojiPicker(false);\n    };\n\n    const EmojiPickerRef = useRef<HTMLDivElement>(null);\n\n    useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {\n      setShowEmojiPicker(false);\n    });\n\n    return (\n      <>\n        <Flex\n          as={StyledChatComposer}\n          disabled={disabled}\n          container={{\n            direction: 'column',\n            gap: 2\n          }}\n          item={{\n            shrink: 0\n          }}\n          {...restProps}\n          ref={chatComposerRef}\n        >\n          <Flex\n            container={{\n              direction: 'column',\n              gap: 0.5\n            }}\n          >\n            <Grid\n              container={{\n                cols: 'repeat(auto-fill, minmax(12rem, 1fr))',\n                gap: 1\n              }}\n              role='group'\n              aria-label={`${t('attachments')}`}\n              as={StyledAttachmentsListContainer}\n            >\n              {attachments.map((attachment, idx) => {\n                if (disabled) {\n                  const attachmentProps = {\n                    ...attachment,\n                    onDelete: undefined,\n                    onDownload: undefined,\n                    onPreview: undefined,\n                    onEdit: undefined,\n                    onCancel: undefined\n                  };\n                  return <StyledAttachmentItem {...attachmentProps} key={attachmentProps.name} />;\n                }\n                return (\n                  <div\n                    aria-label={`${t('attachments_x_of_y', [idx + 1, attachments.length])}`}\n                    key={attachment.name}\n                  >\n                    <StyledAttachmentItem {...attachment} />\n                  </div>\n                );\n              })}\n            </Grid>\n            <TextArea\n              ref={textAreaRef}\n              maxLength={maxLength}\n              displayCharCount={maxLength !== undefined}\n              hardStop={false}\n              placeholder={defaultPlaceHolder}\n              value={message}\n              disabled={disabled}\n              onKeyUp={handleSpecialKey}\n              onKeyDown={handleEnterKeyDown}\n              onChange={handleTextAreaChange}\n              onFocus={handleTextAreaChange}\n              aria-label={t('enter_message')}\n              autoResize={false}\n            />\n          </Flex>\n          <Flex container={{ gap: 0.5 }}>\n            {showEmoji && (\n              <Button\n                ref={setEmojiBtnEl}\n                onClick={toggleEmoji}\n                variant='simple'\n                disabled={disabled}\n                icon\n                aria-label={t('add_emoji')}\n              >\n                <Icon name='face-happy' />\n              </Button>\n            )}\n            {maxAttachments > 0 && (\n              <StyledAttachmentElementContainer\n                disabled={attachments.length >= maxAttachments}\n                ref={setAttachmentsBtnEl}\n                tabIndex={attachments.length >= maxAttachments ? 0 : undefined}\n                role='button'\n              >\n                <Button\n                  onClick={onAddAttachment}\n                  variant='simple'\n                  disabled={!!(disabled || attachments.length >= maxAttachments)}\n                  icon\n                  aria-label={\n                    attachments.length >= maxAttachments\n                      ? t('email_disable_attachment', [maxAttachments])\n                      : t('email_add_attachment', [maxAttachments])\n                  }\n                >\n                  <Icon name='paper-clip' />\n                </Button>\n                {attachments.length >= maxAttachments && (\n                  <Tooltip\n                    target={attachmentsBtnEl}\n                    showDelay='none'\n                    hideDelay='none'\n                    {...restProps}\n                  >\n                    {t('email_disable_attachment', [maxAttachments])}\n                  </Tooltip>\n                )}\n              </StyledAttachmentElementContainer>\n            )}\n            <Flex item={{ grow: 1 }}>{children}</Flex>\n            <Button\n              variant='primary'\n              disabled={disabled || (!!maxLength && message.length > maxLength)}\n              onClick={() => {\n                sendMessage(message);\n                setAnnouncement(t('message_sent'));\n              }}\n            >\n              {t('send')}\n            </Button>\n            {announcement && (\n              <VisuallyHiddenText aria-live='assertive'>{announcement}</VisuallyHiddenText>\n            )}\n          </Flex>\n        </Flex>\n        <Popover\n          show={showEmojiPicker}\n          target={emojiBtnEl}\n          placement='top-start'\n          modifiers={[\n            {\n              name: 'flip',\n              enabled: true\n            }\n          ]}\n        >\n          <EmojiPicker ref={EmojiPickerRef} onSelect={onEmojiSelect} />\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport default ChatComposer;\n"]}
+{"version":3,"file":"ChatComposer.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useCallback, useImperativeHandle, useRef } from 'react';\nimport type {\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  ReactNode,\n  ChangeEvent,\n  RefObject,\n  KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  TextArea,\n  Button,\n  Icon,\n  registerIcon,\n  Popover,\n  EmojiPicker,\n  hasProp,\n  useI18n,\n  useElement,\n  defaultThemeProp,\n  Tooltip,\n  useOuterEvent,\n  VisuallyHiddenText,\n  FileUploadItem,\n  Grid,\n  AIButton\n} from '@pega/cosmos-react-core';\nimport type {\n  EmojiPickerProps,\n  PropsWithDefaults,\n  ForwardProps,\n  FileUploadItemProps\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as faceHappyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/face-happy.icon';\nimport * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';\n\nregisterIcon(timesIcon, faceHappyIcon, paperClipIcon);\n\nexport type SpecialKeysConfig = {\n  /** Collection of specialKeys */\n  keys: string[];\n  /** onSpecialKey is fired when a special key is typed in Textarea */\n  onSpecialKey: (e: KeyboardEvent<HTMLTextAreaElement>, key: string) => void;\n};\n\nexport interface ChatComposerProps {\n  /** Place holder */\n  placeholder?: string;\n  /** Default message to populate on load */\n  defaultMessage?: string;\n  /** Max character limit */\n  maxLength?: number;\n  /** Callback when send button is clicked */\n  onSend: (message: string) => void;\n  /** Enter / Return key sends message */\n  enterKeySendsMessage?: boolean;\n  /** Max number of attachments to be allowed in chat composer.\n   * If zero is passed, add attachments icon will be hidden. same rule applies if prop is not passed.\n   * If attachments added are >= maxAttachments, add attachments icon will be disabled.\n   */\n  maxAttachments?: number;\n  /** show/hide emoji */\n  showEmoji?: boolean;\n  /** Attachments list */\n  attachments?: FileUploadItemProps[];\n  /** Callback when attachment icon is clicked */\n  onAddAttachment?: () => void;\n  /** Special Keys configuration */\n  specialKeysConfig?: SpecialKeysConfig;\n  /** Disables the composer area */\n  disabled?: boolean;\n  /** Children */\n  children?: ReactNode;\n  /** On suggest reply click */\n  onSuggestReplyClick?: () => void;\n  /**\n   * Disable suggest reply button\n   * @default false\n   */\n  disableSuggestReply?: boolean;\n  /** Ref to the Imperative handle */\n  ref?: Ref<ChatComposerImperativeHandleProps>;\n}\n\nconst StyledAttachmentItem = styled(FileUploadItem)``;\n\ninterface DisableAttachmentProps {\n  disabled?: boolean;\n}\nconst StyledAttachmentElementContainer = styled.div<DisableAttachmentProps>(\n  ({ disabled, theme }) => {\n    return (\n      disabled &&\n      css`\n        &:focus {\n          box-shadow: ${theme.base.shadow.focus};\n          border-radius: 50%;\n          outline: none;\n        }\n      `\n    );\n  }\n);\nconst StyledPreviewButton = styled(BareButton)``;\nconst StyledDeleteButton = styled(BareButton)``;\n\nconst StyledChatComposer = styled.footer<PropsWithDefaults<ChatComposerProps, 'disabled'>>(\n  ({\n    theme,\n    disabled,\n    theme: {\n      base: { 'disabled-opacity': transparentBg, spacing }\n    }\n  }) => {\n    return css`\n      padding: calc(2 * ${spacing});\n      background-color: ${theme.base.palette['secondary-background']};\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n      textarea {\n        border-radius: ${theme.base['border-radius']};\n        height: 5rem;\n        border: 0.0625rem solid ${theme.base.colors.gray['extra-light']};\n        max-width: 100%;\n      }\n      ${StyledAttachmentItem} {\n        ${disabled &&\n        css`\n          pointer-events: none;\n          opacity: ${transparentBg};\n        `}\n      }\n\n      ${StyledAttachmentElementContainer} {\n        ${disabled &&\n        css`\n          pointer-events: none;\n        `}\n      }\n\n      ${StyledPreviewButton} {\n        color: ${theme.base.palette.interactive};\n        font-weight: bold;\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      ${StyledDeleteButton} {\n        color: ${theme.base.palette.interactive};\n      }\n    `;\n  }\n);\n\nStyledChatComposer.defaultProps = defaultThemeProp;\nStyledAttachmentElementContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentsListContainer = styled.div(({ theme }) => {\n  return css`\n    max-height: 5rem;\n    overflow-y: auto;\n\n    &:focus-within {\n      box-shadow: ${theme.base.shadow['focus-group']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n    }\n  `;\n});\n\nexport interface ChatComposerImperativeHandleProps {\n  /** Function to append a message */\n  appendToMessage: (\n    appendMessage: string,\n    position?: 'cursor' | 'start' | 'end' | 'specialKey'\n  ) => void;\n  /** Actual ref to Chat composer component */\n  chatComposerRef: RefObject<HTMLDivElement | undefined>;\n  textAreaRef: RefObject<HTMLTextAreaElement | undefined>;\n}\n\nconst ChatComposer: FunctionComponent<ChatComposerProps & ForwardProps> = forwardRef(\n  function ChatComposer(props: PropsWithoutRef<ChatComposerProps>, ref: ChatComposerProps['ref']) {\n    const {\n      children,\n      attachments = [],\n      maxAttachments = 0,\n      onAddAttachment,\n      maxLength,\n      placeholder: defaultPlaceHolder,\n      defaultMessage = '',\n      onSend,\n      specialKeysConfig,\n      disabled = false,\n      enterKeySendsMessage = true,\n      showEmoji,\n      onSuggestReplyClick,\n      disableSuggestReply = false,\n      ...restProps\n    } = props;\n    const [message, setMessage] = useState(defaultMessage);\n    useEffect(() => {\n      setMessage(defaultMessage);\n    }, [defaultMessage]);\n\n    const t = useI18n();\n\n    const textAreaRef = useRef<HTMLTextAreaElement>(null);\n    const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n    const [emojiBtnEl, setEmojiBtnEl] = useElement();\n    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();\n    const [announcement, setAnnouncement] = useState('');\n\n    const lastEnteredSpecialKey = useRef<string | null>(null);\n\n    const appendToMessage = useCallback(\n      (\n        appendMessage: string,\n        position?: 'cursor' | 'start' | 'end' | 'specialKey',\n        selectText: boolean = true\n      ) => {\n        let selectionStart;\n        let selectionEnd;\n        if (textAreaRef.current) {\n          if (position === 'start') {\n            textAreaRef.current.value = appendMessage + textAreaRef.current.value;\n            selectionStart = 0;\n            selectionEnd = appendMessage.length;\n          } else if (position === 'end') {\n            const initialEnd = textAreaRef.current.value.length;\n            textAreaRef.current.value += appendMessage;\n            selectionStart = initialEnd;\n            selectionEnd = initialEnd + appendMessage.length;\n          } else if (position === 'specialKey' && lastEnteredSpecialKey.current) {\n            const replaceChars = lastEnteredSpecialKey.current.length;\n            const currentSelectionStart = textAreaRef.current.selectionStart;\n            textAreaRef.current.value =\n              textAreaRef.current.value.substring(\n                0,\n                textAreaRef.current.selectionStart - replaceChars\n              ) +\n              appendMessage +\n              textAreaRef.current.value.substring(\n                textAreaRef.current.selectionStart,\n                textAreaRef.current.value.length\n              );\n            selectionStart = currentSelectionStart - replaceChars;\n            selectionEnd = currentSelectionStart + appendMessage.length - replaceChars;\n            lastEnteredSpecialKey.current = null;\n          } else {\n            const currentSelectionStart = textAreaRef.current.selectionStart;\n            textAreaRef.current.value =\n              textAreaRef.current.value.substring(0, textAreaRef.current.selectionStart) +\n              appendMessage +\n              textAreaRef.current.value.substring(\n                textAreaRef.current.selectionStart,\n                textAreaRef.current.value.length\n              );\n            selectionStart = currentSelectionStart;\n            selectionEnd = currentSelectionStart + appendMessage.length;\n          }\n          textAreaRef.current.selectionStart = selectText ? selectionStart : selectionEnd;\n          textAreaRef.current.selectionEnd = selectionEnd;\n          textAreaRef.current.focus();\n          setMessage(textAreaRef.current.value);\n        }\n      },\n      [setMessage, textAreaRef.current]\n    );\n\n    const chatComposerRef = useRef<HTMLDivElement>(null);\n\n    useImperativeHandle(ref, () => ({ appendToMessage, chatComposerRef, textAreaRef }), [\n      appendToMessage,\n      chatComposerRef.current,\n      textAreaRef.current\n    ]);\n\n    const sendMessage = useCallback(\n      (newMessage: string) => {\n        if (onSend) {\n          onSend(newMessage);\n          setMessage('');\n        }\n      },\n      [onSend]\n    );\n\n    const handleEnterKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (enterKeySendsMessage && e.key === 'Enter' && !e.shiftKey) {\n          if (!maxLength || message.length <= maxLength) {\n            sendMessage(message);\n            setAnnouncement(t('message_sent'));\n          }\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      },\n      [onSend, message, maxLength]\n    );\n\n    const handleTextAreaChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        setMessage(e.currentTarget.value);\n        setAnnouncement('');\n      },\n      [setMessage]\n    );\n\n    const handleSpecialKey = useCallback(\n      (e: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!specialKeysConfig) return;\n        const { keys, onSpecialKey } = specialKeysConfig;\n        if (specialKeysConfig && keys.length > 0) {\n          const composerValue = e.currentTarget.value.substring(0, e.currentTarget.selectionStart);\n          const specialKey = keys.find(key => composerValue.endsWith(key));\n          if (specialKey) {\n            lastEnteredSpecialKey.current = specialKey;\n            onSpecialKey(e, specialKey);\n          }\n        }\n      },\n      [specialKeysConfig]\n    );\n\n    const toggleEmoji = () => {\n      setShowEmojiPicker(!showEmojiPicker);\n    };\n    const onEmojiSelect: EmojiPickerProps['onSelect'] = emojiElem => {\n      // Check that it is not a custom emoji\n      if (hasProp(emojiElem, 'native')) {\n        appendToMessage(emojiElem.native, 'cursor', false);\n      }\n      setShowEmojiPicker(false);\n    };\n\n    const EmojiPickerRef = useRef<HTMLDivElement>(null);\n\n    useOuterEvent('mousedown', [emojiBtnEl, EmojiPickerRef], () => {\n      setShowEmojiPicker(false);\n    });\n\n    return (\n      <>\n        <Flex\n          as={StyledChatComposer}\n          disabled={disabled}\n          container={{\n            direction: 'column',\n            gap: 2\n          }}\n          item={{\n            shrink: 0\n          }}\n          {...restProps}\n          ref={chatComposerRef}\n        >\n          <Flex\n            container={{\n              direction: 'column',\n              gap: 0.5\n            }}\n          >\n            <Grid\n              container={{\n                cols: 'repeat(auto-fill, minmax(12rem, 1fr))',\n                gap: 1\n              }}\n              role='group'\n              aria-label={`${t('attachments')}`}\n              as={StyledAttachmentsListContainer}\n            >\n              {attachments.map((attachment, idx) => {\n                if (disabled) {\n                  const attachmentProps = {\n                    ...attachment,\n                    onDelete: undefined,\n                    onDownload: undefined,\n                    onPreview: undefined,\n                    onEdit: undefined,\n                    onCancel: undefined\n                  };\n                  return <StyledAttachmentItem {...attachmentProps} key={attachmentProps.name} />;\n                }\n                return (\n                  <div\n                    aria-label={`${t('attachments_x_of_y', [idx + 1, attachments.length])}`}\n                    key={attachment.name}\n                  >\n                    <StyledAttachmentItem {...attachment} />\n                  </div>\n                );\n              })}\n            </Grid>\n            <TextArea\n              ref={textAreaRef}\n              maxLength={maxLength}\n              displayCharCount={maxLength !== undefined}\n              hardStop={false}\n              placeholder={defaultPlaceHolder}\n              value={message}\n              disabled={disabled}\n              onKeyUp={handleSpecialKey}\n              onKeyDown={handleEnterKeyDown}\n              onChange={handleTextAreaChange}\n              onFocus={handleTextAreaChange}\n              aria-label={t('enter_message')}\n              autoResize={false}\n            />\n          </Flex>\n          <Flex container={{ gap: 0.5 }}>\n            {showEmoji && (\n              <Button\n                ref={setEmojiBtnEl}\n                onClick={toggleEmoji}\n                variant='simple'\n                disabled={disabled}\n                icon\n                aria-label={t('add_emoji')}\n              >\n                <Icon name='face-happy' />\n              </Button>\n            )}\n            {maxAttachments > 0 && (\n              <StyledAttachmentElementContainer\n                disabled={attachments.length >= maxAttachments}\n                ref={setAttachmentsBtnEl}\n                tabIndex={attachments.length >= maxAttachments ? 0 : undefined}\n                role='button'\n              >\n                <Button\n                  onClick={onAddAttachment}\n                  variant='simple'\n                  disabled={!!(disabled || attachments.length >= maxAttachments)}\n                  icon\n                  aria-label={\n                    attachments.length >= maxAttachments\n                      ? t('email_disable_attachment', [maxAttachments])\n                      : t('email_add_attachment', [maxAttachments])\n                  }\n                >\n                  <Icon name='paper-clip' />\n                </Button>\n                {attachments.length >= maxAttachments && (\n                  <Tooltip\n                    target={attachmentsBtnEl}\n                    showDelay='none'\n                    hideDelay='none'\n                    {...restProps}\n                  >\n                    {t('email_disable_attachment', [maxAttachments])}\n                  </Tooltip>\n                )}\n              </StyledAttachmentElementContainer>\n            )}\n            <Flex item={{ grow: 1 }} container={{ gap: 1 }}>\n              {children}\n              {onSuggestReplyClick && (\n                <AIButton\n                  label={t('suggest_reply')}\n                  disabled={disabled || disableSuggestReply}\n                  onClick={onSuggestReplyClick}\n                />\n              )}\n            </Flex>\n\n            <Button\n              variant='primary'\n              disabled={disabled || (!!maxLength && message.length > maxLength)}\n              onClick={() => {\n                sendMessage(message);\n                setAnnouncement(t('message_sent'));\n              }}\n            >\n              {t('send')}\n            </Button>\n            {announcement && (\n              <VisuallyHiddenText aria-live='assertive'>{announcement}</VisuallyHiddenText>\n            )}\n          </Flex>\n        </Flex>\n        <Popover\n          show={showEmojiPicker}\n          target={emojiBtnEl}\n          placement='top-start'\n          modifiers={[\n            {\n              name: 'flip',\n              enabled: true\n            }\n          ]}\n        >\n          <EmojiPicker ref={EmojiPickerRef} onSelect={onEmojiSelect} />\n        </Popover>\n      </>\n    );\n  }\n);\n\nexport default ChatComposer;\n"]}

package/lib/components/Chat/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAgB5E,OAAO,KAAK,EAAsB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAKhF,OAAO,KAAK,EAAE,YAAY,EAAuB,MAAM,cAAc,CAAC;AA2FtE,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAyN1D,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAgB5E,OAAO,KAAK,EAAsB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAKhF,OAAO,KAAK,EAAE,YAAY,EAAuB,MAAM,cAAc,CAAC;AA4FtE,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAsO1D,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib/components/Chat/Message.js

@@ -5,7 +5,7 @@ import { Avatar, Flex, Icon, registerIcon, SummaryItem, Image, EmojiDisplay, use
 import * as documentDocIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/document-doc.icon';
 import * as chainUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain-up.icon';
 import * as flagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';
-import { StyledMessageContainer, StyledMessageMain, StyledMessageBubble, StyledMessageBubbleContent, StyledMediaList, StyledMediaListItem, StyledMediaThumbNail, StyledSummaryItem, StyledMediaLink, StyledMetaInfoContainer, StyledMetaInfo, StyledBlinkingDot, StyledMediaButton, StyledMessageHeader, StyledMessageHeaderContent, StyledMessageHeaderMeta, StyledUndeliveredIcon, StyledStatusInfo, StyledHeadset, getMessageColors, StyledFlagIcon, StyledHeadsetIconBackground } from './Message.styles';
+import { StyledMessageContainer, StyledMessageMain, StyledMessageBubble, StyledMessageBubbleContent, StyledMediaList, StyledMediaListItem, StyledMediaThumbNail, StyledMediaMessage, StyledMediaLink, StyledMetaInfoContainer, StyledMetaInfo, StyledBlinkingDot, StyledMediaButton, StyledMessageHeader, StyledMessageHeaderContent, StyledMessageHeaderMeta, StyledUndeliveredIcon, StyledStatusInfo, StyledHeadset, getMessageColors, StyledFlagIcon, StyledHeadsetIconBackground, StyledMediaContent } from './Message.styles';
 registerIcon(documentDocIcon, chainUpIcon, flagWaveSolidIcon);
 const Attachment = (props) => {
     const { id, icon, name, meta, actions = [], onPreview, thumbnail } = props;
@@ -28,7 +28,7 @@ const Attachment = (props) => {
                     e.preventDefault();
                     e.stopPropagation();
                     onPreview?.(id);
-                }, alt: name })), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaButton, { onClick: (e) => {
+                }, alt: name })), _jsx(SummaryItem, { as: StyledMediaMessage, primary: _jsx(StyledMediaButton, { onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
                         onPreview?.(id);
@@ -83,10 +83,12 @@ const Message = forwardRef(function Message(props, ref) {
                         }, children: [_jsxs(StyledMessageBubble, { children: [messageHeader && (_jsxs(Flex, { container: { gap: 0.5, justify: 'between' }, as: StyledMessageHeader, children: [_jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(StyledFlagIcon, { name: 'flag-wave-solid' }), _jsx(StyledMessageHeaderContent, { children: messageHeader.content })] }), _jsx(StyledMessageHeaderMeta, { children: messageHeader.meta })] })), message && (_jsx(StyledMessageBubbleContent, { children: _jsx(EmojiDisplay, { content: message, size: 20 }) })), (attachments.length > 0 || mediaPageLinks.length > 0) && (_jsxs(StyledMediaList, { children: [attachments.map(attachment => {
                                                 return _createElement(Attachment, { ...attachment, key: attachment.id });
                                             }), mediaPageLinks.map(pagePushLink => {
-                                                const { id, href, title, thumbnail } = pagePushLink;
+                                                const { id, href, title, thumbnail, onTitleClick } = pagePushLink;
                                                 return (_jsxs(Flex, { as: StyledMediaListItem, container: {
                                                         direction: 'column'
-                                                    }, children: [thumbnail && (_jsx(Image, { as: StyledMediaThumbNail, src: thumbnail, alt: title || href })), _jsx(SummaryItem, { as: StyledSummaryItem, primary: _jsx(StyledMediaLink, { "aria-label": title, href: href, target: '_blank', rel: 'noreferrer', children: href }), visual: _jsx(Icon, { name: 'chain-up' }) })] }, id));
+                                                    }, children: [thumbnail && _jsx(Image, { as: StyledMediaThumbNail, src: thumbnail, alt: title }), _jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, as: StyledMediaMessage, children: [_jsx(Icon, { name: 'book-open' }), _jsx(Flex, { container: true, as: StyledMediaContent, children: href ? (_jsx(StyledMediaLink, { "aria-label": title, href: href, target: '_blank', rel: 'noreferrer', children: title })) : (_jsx(_Fragment, { children: onTitleClick && (_jsx(StyledMediaButton, { variant: 'link', onClick: () => {
+                                                                                onTitleClick();
+                                                                            }, children: title })) })) })] })] }, id));
                                             })] }))] }), status === 'undeliverable' && message && direction === 'out' && (_jsx(StyledUndeliveredIcon, { name: 'warn-solid' }))] }), !typing && (_jsxs(Flex, { as: StyledMetaInfoContainer, container: {
                             justify: messageMetaJustify,
                             gap: 1.5

package/lib/components/Chat/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, MouseEvent } from 'react';\n\nimport {\n  Avatar,\n  Flex,\n  Icon,\n  registerIcon,\n  SummaryItem,\n  Image,\n  EmojiDisplay,\n  useI18n,\n  Actions,\n  Tooltip,\n  useTheme,\n  useElement\n} from '@pega/cosmos-react-core';\nimport type { FlexContainerProps, ForwardProps } from '@pega/cosmos-react-core';\nimport * as documentDocIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/document-doc.icon';\nimport * as chainUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain-up.icon';\nimport * as flagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';\n\nimport type { MessageProps, AttachmentItemProps } from './Chat.types';\nimport {\n  StyledMessageContainer,\n  StyledMessageMain,\n  StyledMessageBubble,\n  StyledMessageBubbleContent,\n  StyledMediaList,\n  StyledMediaListItem,\n  StyledMediaThumbNail,\n  StyledSummaryItem,\n  StyledMediaLink,\n  StyledMetaInfoContainer,\n  StyledMetaInfo,\n  StyledBlinkingDot,\n  StyledMediaButton,\n  StyledMessageHeader,\n  StyledMessageHeaderContent,\n  StyledMessageHeaderMeta,\n  StyledUndeliveredIcon,\n  StyledStatusInfo,\n  StyledHeadset,\n  getMessageColors,\n  StyledFlagIcon,\n  StyledHeadsetIconBackground\n} from './Message.styles';\n\nregisterIcon(documentDocIcon, chainUpIcon, flagWaveSolidIcon);\n\nconst Attachment = (props: AttachmentItemProps) => {\n  const { id, icon, name, meta, actions = [], onPreview, thumbnail } = props;\n  const actionRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    const listener = (e: KeyboardEvent) => {\n      if (\n        (e.target as HTMLButtonElement)?.getAttribute('aria-expanded') === 'true' &&\n        ['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp'].includes(e.key)\n      ) {\n        e.stopPropagation();\n      }\n    };\n\n    actionRef.current?.addEventListener('keydown', listener);\n\n    return () => {\n      actionRef.current?.removeEventListener('keydown', listener);\n    };\n  }, [actions]);\n\n  return (\n    <Flex\n      key={id}\n      as={StyledMediaListItem}\n      container={{\n        direction: 'column'\n      }}\n    >\n      {thumbnail && (\n        <Image\n          as={StyledMediaThumbNail}\n          src={thumbnail}\n          onClick={(e: MouseEvent) => {\n            e.preventDefault();\n            e.stopPropagation();\n            onPreview?.(id);\n          }}\n          alt={name}\n        />\n      )}\n\n      <SummaryItem\n        as={StyledSummaryItem}\n        primary={\n          <StyledMediaButton\n            onClick={(e: MouseEvent) => {\n              e.preventDefault();\n              e.stopPropagation();\n              onPreview?.(id);\n            }}\n          >\n            {name}\n          </StyledMediaButton>\n        }\n        secondary={meta}\n        visual={<Icon name={icon || 'document-doc'} />}\n        actions={<Actions ref={actionRef} items={actions} iconOnly />}\n      />\n    </Flex>\n  );\n};\n\nconst Message: FunctionComponent<MessageProps & ForwardProps> = forwardRef(function Message(\n  props: PropsWithoutRef<MessageProps>,\n  ref: MessageProps['ref']\n) {\n  const {\n    message,\n    direction,\n    avatarInfo,\n    timestamp,\n    attachments = [],\n    mediaPageLinks = [],\n    status,\n    typing,\n    messageHeader,\n    senderType,\n    senderId,\n    agentVariant,\n    ...restProps\n  } = props;\n\n  const t = useI18n();\n  const theme = useTheme();\n  const [avatarRef, setAvatarRef] = useElement();\n  const { content: messageBubbleBackgroundColor } = useMemo(\n    () => getMessageColors(theme, direction, senderType, agentVariant),\n    [theme, direction, senderType, agentVariant]\n  );\n\n  let messageMetaJustify: FlexContainerProps['justify'] = 'between';\n  if (timestamp && !status) {\n    messageMetaJustify = 'start';\n  } else if (!timestamp && status) {\n    messageMetaJustify = 'end';\n  }\n\n  const renderAvatar = useMemo(() => {\n    if (direction !== 'in' || (senderType !== 'bot' && !avatarInfo)) {\n      return null;\n    }\n\n    if (senderType === 'agent') {\n      return (\n        <>\n          <StyledHeadset>\n            <Avatar\n              name={avatarInfo!.name}\n              size='m'\n              shape='circle'\n              imageSrc={avatarInfo!.imageSrc}\n              ref={setAvatarRef}\n              backgroundColor={messageBubbleBackgroundColor}\n            />\n            <StyledHeadsetIconBackground>\n              <Icon name='headset' />\n            </StyledHeadsetIconBackground>\n          </StyledHeadset>\n          <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n            {avatarInfo!.name}\n          </Tooltip>\n        </>\n      );\n    }\n\n    return (\n      <>\n        <Avatar\n          name={avatarInfo ? avatarInfo.name : t('bot')}\n          size='m'\n          shape='circle'\n          icon={!avatarInfo?.imageSrc && senderType === 'bot' ? 'robot-solid' : undefined}\n          imageSrc={avatarInfo?.imageSrc}\n          ref={setAvatarRef}\n          backgroundColor={messageBubbleBackgroundColor}\n        />\n        <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n          {avatarInfo ? avatarInfo.name : t('bot')}\n        </Tooltip>\n      </>\n    );\n  }, [avatarInfo, senderType, direction, avatarRef]);\n\n  let ariaLabel: string | undefined;\n  const sender = avatarInfo ? avatarInfo.name : senderType;\n\n  ariaLabel = t('sender_replied_message', [sender, message || '']);\n  if (attachments.length > 0) ariaLabel = t('chat_attachments', [ariaLabel, attachments.length]);\n  if (mediaPageLinks.length > 0) ariaLabel = t('chat_links', [ariaLabel, mediaPageLinks.length]);\n  if (timestamp) ariaLabel = t('chat_message_at_timestamp', [ariaLabel, timestamp]);\n  if (status && direction === 'out') ariaLabel += ` ${t('chat_message_status', [status])}`;\n\n  return (\n    <Flex\n      as={StyledMessageContainer}\n      ref={ref}\n      container={{\n        gap: 1.5,\n        direction: direction === 'in' ? 'row' : 'row-reverse'\n      }}\n      item={{\n        shrink: 0\n      }}\n      hasMessage={!!message}\n      direction={direction}\n      senderType={senderType}\n      typing={typing}\n      messageHeader={messageHeader}\n      status={status}\n      agentVariant={agentVariant}\n      aria-label={ariaLabel}\n      {...restProps}\n    >\n      {renderAvatar}\n      <Flex\n        container={{\n          direction: 'column',\n          alignItems: direction === 'in' ? 'start' : 'end',\n          justify: 'center'\n        }}\n        as={StyledMessageMain}\n      >\n        <Flex\n          container={{\n            direction: direction === 'in' ? 'row' : 'row-reverse',\n            alignItems: 'center',\n            gap: 0.5\n          }}\n        >\n          <StyledMessageBubble>\n            {messageHeader && (\n              <Flex container={{ gap: 0.5, justify: 'between' }} as={StyledMessageHeader}>\n                <Flex container={{ gap: 0.5 }}>\n                  <StyledFlagIcon name='flag-wave-solid' />\n                  <StyledMessageHeaderContent>{messageHeader.content}</StyledMessageHeaderContent>\n                </Flex>\n\n                <StyledMessageHeaderMeta>{messageHeader.meta}</StyledMessageHeaderMeta>\n              </Flex>\n            )}\n\n            {message && (\n              <StyledMessageBubbleContent>\n                <EmojiDisplay content={message} size={20} />\n              </StyledMessageBubbleContent>\n            )}\n\n            {(attachments.length > 0 || mediaPageLinks.length > 0) && (\n              <StyledMediaList>\n                {attachments.map(attachment => {\n                  return <Attachment {...attachment} key={attachment.id} />;\n                })}\n\n                {mediaPageLinks.map(pagePushLink => {\n                  const { id, href, title, thumbnail } = pagePushLink;\n                  return (\n                    <Flex\n                      as={StyledMediaListItem}\n                      key={id}\n                      container={{\n                        direction: 'column'\n                      }}\n                    >\n                      {thumbnail && (\n                        <Image as={StyledMediaThumbNail} src={thumbnail} alt={title || href} />\n                      )}\n                      <SummaryItem\n                        as={StyledSummaryItem}\n                        primary={\n                          <StyledMediaLink\n                            aria-label={title}\n                            href={href}\n                            target='_blank'\n                            rel='noreferrer'\n                          >\n                            {href}\n                          </StyledMediaLink>\n                        }\n                        visual={<Icon name='chain-up' />}\n                      />\n                    </Flex>\n                  );\n                })}\n              </StyledMediaList>\n            )}\n          </StyledMessageBubble>\n\n          {status === 'undeliverable' && message && direction === 'out' && (\n            <StyledUndeliveredIcon name='warn-solid' />\n          )}\n        </Flex>\n\n        {!typing && (\n          <Flex\n            as={StyledMetaInfoContainer}\n            container={{\n              justify: messageMetaJustify,\n              gap: 1.5\n            }}\n          >\n            {timestamp && <StyledMetaInfo>{timestamp}</StyledMetaInfo>}\n            {status && direction === 'out' && <StyledStatusInfo>{t(status)}</StyledStatusInfo>}\n          </Flex>\n        )}\n\n        {typing && (\n          <Flex\n            container={{\n              gap: 0.25\n            }}\n          >\n            <StyledBlinkingDot delay={0} />\n            <StyledBlinkingDot delay={0.25} />\n            <StyledBlinkingDot delay={0.5} />\n          </Flex>\n        )}\n      </Flex>\n    </Flex>\n  );\n});\n\nexport default Message;\n"]}
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, MouseEvent } from 'react';\n\nimport {\n  Avatar,\n  Flex,\n  Icon,\n  registerIcon,\n  SummaryItem,\n  Image,\n  EmojiDisplay,\n  useI18n,\n  Actions,\n  Tooltip,\n  useTheme,\n  useElement\n} from '@pega/cosmos-react-core';\nimport type { FlexContainerProps, ForwardProps } from '@pega/cosmos-react-core';\nimport * as documentDocIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/document-doc.icon';\nimport * as chainUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chain-up.icon';\nimport * as flagWaveSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-wave-solid.icon';\n\nimport type { MessageProps, AttachmentItemProps } from './Chat.types';\nimport {\n  StyledMessageContainer,\n  StyledMessageMain,\n  StyledMessageBubble,\n  StyledMessageBubbleContent,\n  StyledMediaList,\n  StyledMediaListItem,\n  StyledMediaThumbNail,\n  StyledMediaMessage,\n  StyledMediaLink,\n  StyledMetaInfoContainer,\n  StyledMetaInfo,\n  StyledBlinkingDot,\n  StyledMediaButton,\n  StyledMessageHeader,\n  StyledMessageHeaderContent,\n  StyledMessageHeaderMeta,\n  StyledUndeliveredIcon,\n  StyledStatusInfo,\n  StyledHeadset,\n  getMessageColors,\n  StyledFlagIcon,\n  StyledHeadsetIconBackground,\n  StyledMediaContent\n} from './Message.styles';\n\nregisterIcon(documentDocIcon, chainUpIcon, flagWaveSolidIcon);\n\nconst Attachment = (props: AttachmentItemProps) => {\n  const { id, icon, name, meta, actions = [], onPreview, thumbnail } = props;\n  const actionRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    const listener = (e: KeyboardEvent) => {\n      if (\n        (e.target as HTMLButtonElement)?.getAttribute('aria-expanded') === 'true' &&\n        ['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp'].includes(e.key)\n      ) {\n        e.stopPropagation();\n      }\n    };\n\n    actionRef.current?.addEventListener('keydown', listener);\n\n    return () => {\n      actionRef.current?.removeEventListener('keydown', listener);\n    };\n  }, [actions]);\n\n  return (\n    <Flex\n      key={id}\n      as={StyledMediaListItem}\n      container={{\n        direction: 'column'\n      }}\n    >\n      {thumbnail && (\n        <Image\n          as={StyledMediaThumbNail}\n          src={thumbnail}\n          onClick={(e: MouseEvent) => {\n            e.preventDefault();\n            e.stopPropagation();\n            onPreview?.(id);\n          }}\n          alt={name}\n        />\n      )}\n\n      <SummaryItem\n        as={StyledMediaMessage}\n        primary={\n          <StyledMediaButton\n            onClick={(e: MouseEvent) => {\n              e.preventDefault();\n              e.stopPropagation();\n              onPreview?.(id);\n            }}\n          >\n            {name}\n          </StyledMediaButton>\n        }\n        secondary={meta}\n        visual={<Icon name={icon || 'document-doc'} />}\n        actions={<Actions ref={actionRef} items={actions} iconOnly />}\n      />\n    </Flex>\n  );\n};\n\nconst Message: FunctionComponent<MessageProps & ForwardProps> = forwardRef(function Message(\n  props: PropsWithoutRef<MessageProps>,\n  ref: MessageProps['ref']\n) {\n  const {\n    message,\n    direction,\n    avatarInfo,\n    timestamp,\n    attachments = [],\n    mediaPageLinks = [],\n    status,\n    typing,\n    messageHeader,\n    senderType,\n    senderId,\n    agentVariant,\n    ...restProps\n  } = props;\n\n  const t = useI18n();\n  const theme = useTheme();\n  const [avatarRef, setAvatarRef] = useElement();\n  const { content: messageBubbleBackgroundColor } = useMemo(\n    () => getMessageColors(theme, direction, senderType, agentVariant),\n    [theme, direction, senderType, agentVariant]\n  );\n\n  let messageMetaJustify: FlexContainerProps['justify'] = 'between';\n  if (timestamp && !status) {\n    messageMetaJustify = 'start';\n  } else if (!timestamp && status) {\n    messageMetaJustify = 'end';\n  }\n\n  const renderAvatar = useMemo(() => {\n    if (direction !== 'in' || (senderType !== 'bot' && !avatarInfo)) {\n      return null;\n    }\n\n    if (senderType === 'agent') {\n      return (\n        <>\n          <StyledHeadset>\n            <Avatar\n              name={avatarInfo!.name}\n              size='m'\n              shape='circle'\n              imageSrc={avatarInfo!.imageSrc}\n              ref={setAvatarRef}\n              backgroundColor={messageBubbleBackgroundColor}\n            />\n            <StyledHeadsetIconBackground>\n              <Icon name='headset' />\n            </StyledHeadsetIconBackground>\n          </StyledHeadset>\n          <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n            {avatarInfo!.name}\n          </Tooltip>\n        </>\n      );\n    }\n\n    return (\n      <>\n        <Avatar\n          name={avatarInfo ? avatarInfo.name : t('bot')}\n          size='m'\n          shape='circle'\n          icon={!avatarInfo?.imageSrc && senderType === 'bot' ? 'robot-solid' : undefined}\n          imageSrc={avatarInfo?.imageSrc}\n          ref={setAvatarRef}\n          backgroundColor={messageBubbleBackgroundColor}\n        />\n        <Tooltip target={avatarRef} showDelay='none' hideDelay='none'>\n          {avatarInfo ? avatarInfo.name : t('bot')}\n        </Tooltip>\n      </>\n    );\n  }, [avatarInfo, senderType, direction, avatarRef]);\n\n  let ariaLabel: string | undefined;\n  const sender = avatarInfo ? avatarInfo.name : senderType;\n\n  ariaLabel = t('sender_replied_message', [sender, message || '']);\n  if (attachments.length > 0) ariaLabel = t('chat_attachments', [ariaLabel, attachments.length]);\n  if (mediaPageLinks.length > 0) ariaLabel = t('chat_links', [ariaLabel, mediaPageLinks.length]);\n  if (timestamp) ariaLabel = t('chat_message_at_timestamp', [ariaLabel, timestamp]);\n  if (status && direction === 'out') ariaLabel += ` ${t('chat_message_status', [status])}`;\n\n  return (\n    <Flex\n      as={StyledMessageContainer}\n      ref={ref}\n      container={{\n        gap: 1.5,\n        direction: direction === 'in' ? 'row' : 'row-reverse'\n      }}\n      item={{\n        shrink: 0\n      }}\n      hasMessage={!!message}\n      direction={direction}\n      senderType={senderType}\n      typing={typing}\n      messageHeader={messageHeader}\n      status={status}\n      agentVariant={agentVariant}\n      aria-label={ariaLabel}\n      {...restProps}\n    >\n      {renderAvatar}\n      <Flex\n        container={{\n          direction: 'column',\n          alignItems: direction === 'in' ? 'start' : 'end',\n          justify: 'center'\n        }}\n        as={StyledMessageMain}\n      >\n        <Flex\n          container={{\n            direction: direction === 'in' ? 'row' : 'row-reverse',\n            alignItems: 'center',\n            gap: 0.5\n          }}\n        >\n          <StyledMessageBubble>\n            {messageHeader && (\n              <Flex container={{ gap: 0.5, justify: 'between' }} as={StyledMessageHeader}>\n                <Flex container={{ gap: 0.5 }}>\n                  <StyledFlagIcon name='flag-wave-solid' />\n                  <StyledMessageHeaderContent>{messageHeader.content}</StyledMessageHeaderContent>\n                </Flex>\n\n                <StyledMessageHeaderMeta>{messageHeader.meta}</StyledMessageHeaderMeta>\n              </Flex>\n            )}\n\n            {message && (\n              <StyledMessageBubbleContent>\n                <EmojiDisplay content={message} size={20} />\n              </StyledMessageBubbleContent>\n            )}\n\n            {(attachments.length > 0 || mediaPageLinks.length > 0) && (\n              <StyledMediaList>\n                {attachments.map(attachment => {\n                  return <Attachment {...attachment} key={attachment.id} />;\n                })}\n\n                {mediaPageLinks.map(pagePushLink => {\n                  const { id, href, title, thumbnail, onTitleClick } = pagePushLink;\n                  return (\n                    <Flex\n                      as={StyledMediaListItem}\n                      key={id}\n                      container={{\n                        direction: 'column'\n                      }}\n                    >\n                      {thumbnail && <Image as={StyledMediaThumbNail} src={thumbnail} alt={title} />}\n\n                      <Flex container={{ gap: 1, alignItems: 'center' }} as={StyledMediaMessage}>\n                        <Icon name='book-open' />\n                        <Flex container as={StyledMediaContent}>\n                          {href ? (\n                            <StyledMediaLink\n                              aria-label={title}\n                              href={href}\n                              target='_blank'\n                              rel='noreferrer'\n                            >\n                              {title}\n                            </StyledMediaLink>\n                          ) : (\n                            <>\n                              {onTitleClick && (\n                                <StyledMediaButton\n                                  variant='link'\n                                  onClick={() => {\n                                    onTitleClick();\n                                  }}\n                                >\n                                  {title}\n                                </StyledMediaButton>\n                              )}\n                            </>\n                          )}\n                        </Flex>\n                      </Flex>\n                    </Flex>\n                  );\n                })}\n              </StyledMediaList>\n            )}\n          </StyledMessageBubble>\n\n          {status === 'undeliverable' && message && direction === 'out' && (\n            <StyledUndeliveredIcon name='warn-solid' />\n          )}\n        </Flex>\n\n        {!typing && (\n          <Flex\n            as={StyledMetaInfoContainer}\n            container={{\n              justify: messageMetaJustify,\n              gap: 1.5\n            }}\n          >\n            {timestamp && <StyledMetaInfo>{timestamp}</StyledMetaInfo>}\n            {status && direction === 'out' && <StyledStatusInfo>{t(status)}</StyledStatusInfo>}\n          </Flex>\n        )}\n\n        {typing && (\n          <Flex\n            container={{\n              gap: 0.25\n            }}\n          >\n            <StyledBlinkingDot delay={0} />\n            <StyledBlinkingDot delay={0.25} />\n            <StyledBlinkingDot delay={0.5} />\n          </Flex>\n        )}\n      </Flex>\n    </Flex>\n  );\n});\n\nexport default Message;\n"]}

package/lib/components/Chat/Message.styles.d.ts

@@ -4,9 +4,11 @@ import type { MessageProps } from './Chat.types';
 export declare const StyledMessageBubbleContent: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledMediaList: import("styled-components").StyledComponent<"ul", DefaultTheme, {}, never>;
 export declare const StyledMediaListItem: import("styled-components").StyledComponent<"li", DefaultTheme, {}, never>;
-export declare const StyledSummaryItem: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledMediaMessage: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledMediaThumbNail: import("styled-components").StyledComponent<"img", DefaultTheme, {}, never>;
-export declare const StyledMediaLink: import("styled-components").StyledComponent<"a", DefaultTheme, {}, never>;
+export declare const StyledMediaLink: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").LinkProps & import("@pega/cosmos-react-core").ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["preview-popover", "preview", "new-tab"]>;
+}, DefaultTheme, {}, never>;
 export declare const StyledMediaButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, DefaultTheme, {}, never>;
 export declare const StyledMessageMain: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledMessageBubble: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
@@ -18,6 +20,7 @@ export declare const StyledMessageHeader: import("styled-components").StyledComp
 export declare const StyledMessageHeaderContent: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledMessageHeaderMeta: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledHeadsetIconBackground: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledMediaContent: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 interface StyledMessageContainerProps {
     senderType: 'customer' | 'agent' | 'bot';
     direction: 'in' | 'out';

package/lib/components/Chat/Message.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAatD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AAEvD,eAAO,MAAM,eAAe,4EAAc,CAAC;AAE3C,eAAO,MAAM,mBAAmB,4EAAc,CAAC;AAE/C,eAAO,MAAM,iBAAiB,6EAAe,CAAC;AAE9C,eAAO,MAAM,oBAAoB,6EAAe,CAAC;AAEjD,eAAO,MAAM,eAAe,2EAAa,CAAC;AAE1C,eAAO,MAAM,iBAAiB,8OAAuB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,6EAAe,CAAC;AAE9C,eAAO,MAAM,mBAAmB,6EAAe,CAAC;AAEhD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,cAAc,8EAAgB,CAAC;AAE5C,eAAO,MAAM,gBAAgB,8EAAgB,CAAC;AAE9C,eAAO,MAAM,qBAAqB,6EAAe,CAAC;AAElD,eAAO,MAAM,mBAAmB,gFAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AACvD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,2BAA2B,6EAAe,CAAC;AACxD,UAAU,2BAA2B;IACnC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACzC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,6EAwBxB,CAAC;AAIH,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,CAC7B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,EACpC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,EACtC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KACvC,kBA+BJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,qGAmLlC,CAAC;AAEF,UAAU,sBAAsB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,iGAiB5B,CAAC;AAGH,eAAO,MAAM,qBAAqB,8JAYjC,CAAC;AAIF,eAAO,MAAM,cAAc,8JAKzB,CAAC"}
+{"version":3,"file":"Message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.styles.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAetD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AAEvD,eAAO,MAAM,eAAe,4EAAc,CAAC;AAE3C,eAAO,MAAM,mBAAmB,4EAAc,CAAC;AAE/C,eAAO,MAAM,kBAAkB,6EAAe,CAAC;AAE/C,eAAO,MAAM,oBAAoB,6EAAe,CAAC;AAEjD,eAAO,MAAM,eAAe;;2BAAiB,CAAC;AAE9C,eAAO,MAAM,iBAAiB,8OAAuB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,6EAAe,CAAC;AAE9C,eAAO,MAAM,mBAAmB,6EAAe,CAAC;AAEhD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,cAAc,8EAAgB,CAAC;AAE5C,eAAO,MAAM,gBAAgB,8EAAgB,CAAC;AAE9C,eAAO,MAAM,qBAAqB,6EAAe,CAAC;AAElD,eAAO,MAAM,mBAAmB,gFAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,6EAAe,CAAC;AACvD,eAAO,MAAM,uBAAuB,6EAAe,CAAC;AAEpD,eAAO,MAAM,2BAA2B,6EAAe,CAAC;AAExD,eAAO,MAAM,kBAAkB,6EAAe,CAAC;AAE/C,UAAU,2BAA2B;IACnC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACzC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,6EAwBxB,CAAC;AAIH,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,CAC7B,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,EACpC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,EACtC,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,KACvC,kBA+BJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,qGAgMlC,CAAC;AAEF,UAAU,sBAAsB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,iGAiB5B,CAAC;AAGH,eAAO,MAAM,qBAAqB,8JAYjC,CAAC;AAIF,eAAO,MAAM,cAAc,8JAKzB,CAAC"}

package/lib/components/Chat/Message.styles.js

@@ -1,13 +1,13 @@
 import styled, { css } from 'styled-components';
 import { readableColor, rgba, transparentize } from 'polished';
-import { defaultThemeProp, tryCatch, Icon, StyledIcon, StyledText, calculateFontSize } from '@pega/cosmos-react-core';
+import { defaultThemeProp, tryCatch, Icon, StyledIcon, StyledText, calculateFontSize, Link, StyledLink } from '@pega/cosmos-react-core';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 export const StyledMessageBubbleContent = styled.div ``;
 export const StyledMediaList = styled.ul ``;
 export const StyledMediaListItem = styled.li ``;
-export const StyledSummaryItem = styled.div ``;
+export const StyledMediaMessage = styled.div ``;
 export const StyledMediaThumbNail = styled.img ``;
-export const StyledMediaLink = styled.a ``;
+export const StyledMediaLink = styled(Link) ``;
 export const StyledMediaButton = styled(BareButton) ``;
 export const StyledMessageMain = styled.div ``;
 export const StyledMessageBubble = styled.div ``;
@@ -19,6 +19,7 @@ export const StyledMessageHeader = styled.header ``;
 export const StyledMessageHeaderContent = styled.div ``;
 export const StyledMessageHeaderMeta = styled.div ``;
 export const StyledHeadsetIconBackground = styled.div ``;
+export const StyledMediaContent = styled.div ``;
 export const StyledHeadset = styled.div(({ theme }) => {
     return css `
     position: relative;
@@ -140,12 +141,12 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
               object-fit: contain;
               background-color: ${secondaryBackground};
             }
-            ${StyledSummaryItem} {
+            ${StyledMediaMessage} {
               padding: ${spacing} calc(3 * ${spacing});
               font-size: ${fontSizes.xxs};
               margin-block-start: calc(0.5 * ${spacing});
             }
-            ${StyledSummaryItem}::before {
+            ${StyledMediaMessage}::before {
               content: '';
               padding: ${spacing} 0;
               border-top: 0.0625rem solid ${contrastContentColor};
@@ -154,7 +155,7 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
               left: 1rem;
               top: 0;
             }
-            ${StyledMediaThumbNail} + ${StyledSummaryItem}::before {
+            ${StyledMediaThumbNail} + ${StyledMediaMessage}::before {
               content: none;
             }
             svg {
@@ -163,12 +164,15 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
             ${StyledText} {
               color: ${foregroundColor};
             }
+            ${StyledLink} {
+              color: ${contrastContentColor};
+            }
           }
 
           ${!hasMessage &&
         css `
             > ${StyledMediaListItem}:first-child {
-              > ${StyledSummaryItem}::before {
+              > ${StyledMediaMessage}::before {
                 border-top: none;
               }
             }
@@ -202,6 +206,7 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
           text-overflow: ellipsis;
           display: inline-block;
           max-width: 100%;
+
           &:hover {
             color: ${contrastContentColor};
             text-decoration: underline;
@@ -232,6 +237,15 @@ export const StyledMessageContainer = styled.li(({ direction, senderType, hasMes
         position: relative;
         height: 2rem;
       }
+
+      ${StyledMediaContent} {
+        padding-block-end: calc(0.5 * ${spacing});
+
+        ${StyledMediaLink}, ${StyledMediaButton} {
+          word-break: break-word;
+          white-space: pre-wrap;
+        }
+      }
     `;
 });
 StyledMessageContainer.defaultProps = defaultThemeProp;