@pega/cosmos-react-social 4.0.0-dev.23.1 → 4.0.0-dev.24.1

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAGL,WAAW,EAEX,YAAY,EACZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAA6B,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG;IAC5B,cAAc;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,kCAAkC;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,6DAA6D;IAC7D,IAAI,EAAE,aAAa,CAAC;IACpB,mCAAmC;IACnC,oBAAoB,CAAC,EAAE,yBAAyB,CAAC;IACjD,kBAAkB;IAClB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;IACnD,yDAAyD;IACzD,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAgED,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAqBrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAGL,WAAW,EAEX,YAAY,EACZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAA6B,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG;IAC5B,cAAc;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,kCAAkC;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,6DAA6D;IAC7D,IAAI,EAAE,aAAa,CAAC;IACpB,mCAAmC;IACnC,oBAAoB,CAAC,EAAE,yBAAyB,CAAC;IACjD,kBAAkB;IAClB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;IACnD,yDAAyD;IACzD,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAgED,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAsBpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Chat/Chat.js

@@ -54,7 +54,7 @@ const StyledChatContainer = styled.section(props => {
   `;
 });
 StyledChatContainer.defaultProps = defaultThemeProp;
-const Chat = forwardRef((props, ref) => {
+const Chat = forwardRef(function Chat(props, ref) {
     const { header, body, composer, banner, suggestedReplyPicker, ...restProps } = props;
     return (_jsxs(Flex, { ref: ref, as: StyledChatContainer, container: {
             direction: 'column'

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,MAAM,EAEN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAEpF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AACjE,OAAO,UAA+B,MAAM,cAAc,CAAC;AAC3D,OAAO,oBAAmD,MAAM,wBAAwB,CAAC;AAyBzF,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAC5C,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACzC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;IACjD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAC5B,OAAO,EAAE,EACP,oBAAoB,EAAE,iBAAiB,EACvC,sBAAsB,EAAE,mBAAmB,EAC5C,EACD,eAAe,EAAE,YAAY,EAC9B,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;kBAEM,iBAAiB;;qBAEd,YAAY;MAC3B,mBAAmB;;;;;;MAMnB,sBAAsB;;;;;;;0BAOF,mBAAmB;UACnC,oBAAoB;mBACX,OAAO;sBACJ,UAAU;;;;sCAIM,mBAAmB;oDACL,mBAAmB;;;;;;;;MAQjE,YAAY;0BACQ,OAAO;;;;GAI9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,IAAI,GAAgD,UAAU,CAClE,CAAC,KAAiC,EAAE,GAAqB,EAAE,EAAE;IAC3D,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAErF,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,SAAS,aAEb,KAAC,UAAU,OAAK,MAAM,GAAI,EACzB,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,GAAI,EACzE,KAAC,QAAQ,OAAK,IAAI,GAAI,EACrB,oBAAoB,IAAI,KAAC,oBAAoB,OAAK,oBAAoB,GAAI,EAC3E,KAAC,YAAY,OAAK,QAAQ,GAAI,IACzB,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Banner,\n  BannerProps,\n  defaultThemeProp,\n  ForwardProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\n\nimport ChatBody from './ChatBody';\nimport ChatComposer, { ChatComposerProps } from './ChatComposer';\nimport ChatHeader, { ChatHeaderProps } from './ChatHeader';\nimport SuggestedReplyPicker, { SuggestedReplyPickerProps } from './SuggestedReplyPicker';\nimport { ChatBodyProps } from './Chat.types';\n\nexport type ChatBannerProps = {\n  /** Content */\n  content: string;\n  /** Name of the icon */\n  icon: string;\n};\n\nexport interface ChatProps extends NoChildrenProp {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Header of conversation pane */\n  header: ChatHeaderProps;\n  /** Wrapper of message groups, system messages, type ahead */\n  body: ChatBodyProps;\n  /** Wrapper of suggested replies */\n  suggestedReplyPicker?: SuggestedReplyPickerProps;\n  /** chat banner */\n  banner?: Pick<BannerProps, 'variant' | 'messages'>;\n  /** Wrapper of conversation input, emojis, attachments */\n  composer: ChatComposerProps;\n}\n\nconst StyledUtilityContainer = styled.div``;\nconst StyledUtilityMerger = styled.div``;\nconst StyledUtilityContent = styled.div``;\n\nconst StyledChatContainer = styled.section(props => {\n  const {\n    theme: {\n      base: {\n        spacing,\n        shadow: { high: shadowHigh },\n        palette: {\n          'primary-background': primaryBackground,\n          'secondary-background': secondaryBackground\n        },\n        'border-radius': borderRadius\n      }\n    }\n  } = props;\n  return css`\n    height: 100%;\n    background: ${primaryBackground};\n    width: 100%;\n    border-radius: ${borderRadius};\n    ${StyledUtilityMerger} {\n      min-height: 15rem;\n      position: relative;\n      height: 100%;\n      overflow-y: hidden;\n    }\n    ${StyledUtilityContainer} {\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 2;\n      max-height: 60%;\n      width: 100%;\n      background-color: ${secondaryBackground};\n      > ${StyledUtilityContent} {\n        padding: ${spacing} 0;\n        box-shadow: ${shadowHigh};\n        height: auto;\n        width: 100%;\n        overflow-y: auto;\n        background: linear-gradient(${secondaryBackground} 10%, rgba(255, 255, 255, 0)),\n          linear-gradient(rgba(255, 255, 255, 0), ${secondaryBackground} 10%) 0 100%,\n          radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),\n          radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;\n        background-repeat: no-repeat;\n        background-size: 100% 1rem, 100% 1rem, 100% 0.25rem, 100% 0.25rem;\n        background-attachment: local, local, scroll, scroll;\n      }\n    }\n    ${StyledBanner} {\n      padding: calc(2 * ${spacing});\n      margin-bottom: 0;\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledChatContainer.defaultProps = defaultThemeProp;\n\nconst Chat: FunctionComponent<ChatProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatProps>, ref: ChatProps['ref']) => {\n    const { header, body, composer, banner, suggestedReplyPicker, ...restProps } = props;\n\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatContainer}\n        container={{\n          direction: 'column'\n        }}\n        {...restProps}\n      >\n        <ChatHeader {...header} />\n        {banner && <Banner variant={banner.variant} messages={banner.messages} />}\n        <ChatBody {...body} />\n        {suggestedReplyPicker && <SuggestedReplyPicker {...suggestedReplyPicker} />}\n        <ChatComposer {...composer} />\n      </Flex>\n    );\n  }\n);\n\nexport default Chat;\n"]}
+{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,MAAM,EAEN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAEpF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AACjE,OAAO,UAA+B,MAAM,cAAc,CAAC;AAC3D,OAAO,oBAAmD,MAAM,wBAAwB,CAAC;AAyBzF,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAC5C,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACzC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;IACjD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAC5B,OAAO,EAAE,EACP,oBAAoB,EAAE,iBAAiB,EACvC,sBAAsB,EAAE,mBAAmB,EAC5C,EACD,eAAe,EAAE,YAAY,EAC9B,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;kBAEM,iBAAiB;;qBAEd,YAAY;MAC3B,mBAAmB;;;;;;MAMnB,sBAAsB;;;;;;;0BAOF,mBAAmB;UACnC,oBAAoB;mBACX,OAAO;sBACJ,UAAU;;;;sCAIM,mBAAmB;oDACL,mBAAmB;;;;;;;;MAQjE,YAAY;0BACQ,OAAO;;;;GAI9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,IAAI,GAAgD,UAAU,CAAC,SAAS,IAAI,CAChF,KAAiC,EACjC,GAAqB;IAErB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAErF,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,SAAS,aAEb,KAAC,UAAU,OAAK,MAAM,GAAI,EACzB,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,GAAI,EACzE,KAAC,QAAQ,OAAK,IAAI,GAAI,EACrB,oBAAoB,IAAI,KAAC,oBAAoB,OAAK,oBAAoB,GAAI,EAC3E,KAAC,YAAY,OAAK,QAAQ,GAAI,IACzB,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Banner,\n  BannerProps,\n  defaultThemeProp,\n  ForwardProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\n\nimport ChatBody from './ChatBody';\nimport ChatComposer, { ChatComposerProps } from './ChatComposer';\nimport ChatHeader, { ChatHeaderProps } from './ChatHeader';\nimport SuggestedReplyPicker, { SuggestedReplyPickerProps } from './SuggestedReplyPicker';\nimport { ChatBodyProps } from './Chat.types';\n\nexport type ChatBannerProps = {\n  /** Content */\n  content: string;\n  /** Name of the icon */\n  icon: string;\n};\n\nexport interface ChatProps extends NoChildrenProp {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Header of conversation pane */\n  header: ChatHeaderProps;\n  /** Wrapper of message groups, system messages, type ahead */\n  body: ChatBodyProps;\n  /** Wrapper of suggested replies */\n  suggestedReplyPicker?: SuggestedReplyPickerProps;\n  /** chat banner */\n  banner?: Pick<BannerProps, 'variant' | 'messages'>;\n  /** Wrapper of conversation input, emojis, attachments */\n  composer: ChatComposerProps;\n}\n\nconst StyledUtilityContainer = styled.div``;\nconst StyledUtilityMerger = styled.div``;\nconst StyledUtilityContent = styled.div``;\n\nconst StyledChatContainer = styled.section(props => {\n  const {\n    theme: {\n      base: {\n        spacing,\n        shadow: { high: shadowHigh },\n        palette: {\n          'primary-background': primaryBackground,\n          'secondary-background': secondaryBackground\n        },\n        'border-radius': borderRadius\n      }\n    }\n  } = props;\n  return css`\n    height: 100%;\n    background: ${primaryBackground};\n    width: 100%;\n    border-radius: ${borderRadius};\n    ${StyledUtilityMerger} {\n      min-height: 15rem;\n      position: relative;\n      height: 100%;\n      overflow-y: hidden;\n    }\n    ${StyledUtilityContainer} {\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 2;\n      max-height: 60%;\n      width: 100%;\n      background-color: ${secondaryBackground};\n      > ${StyledUtilityContent} {\n        padding: ${spacing} 0;\n        box-shadow: ${shadowHigh};\n        height: auto;\n        width: 100%;\n        overflow-y: auto;\n        background: linear-gradient(${secondaryBackground} 10%, rgba(255, 255, 255, 0)),\n          linear-gradient(rgba(255, 255, 255, 0), ${secondaryBackground} 10%) 0 100%,\n          radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),\n          radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;\n        background-repeat: no-repeat;\n        background-size: 100% 1rem, 100% 1rem, 100% 0.25rem, 100% 0.25rem;\n        background-attachment: local, local, scroll, scroll;\n      }\n    }\n    ${StyledBanner} {\n      padding: calc(2 * ${spacing});\n      margin-bottom: 0;\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledChatContainer.defaultProps = defaultThemeProp;\n\nconst Chat: FunctionComponent<ChatProps & ForwardProps> = forwardRef(function Chat(\n  props: PropsWithoutRef<ChatProps>,\n  ref: ChatProps['ref']\n) {\n  const { header, body, composer, banner, suggestedReplyPicker, ...restProps } = props;\n\n  return (\n    <Flex\n      ref={ref}\n      as={StyledChatContainer}\n      container={{\n        direction: 'column'\n      }}\n      {...restProps}\n    >\n      <ChatHeader {...header} />\n      {banner && <Banner variant={banner.variant} messages={banner.messages} />}\n      <ChatBody {...body} />\n      {suggestedReplyPicker && <SuggestedReplyPicker {...suggestedReplyPicker} />}\n      <ChatComposer {...composer} />\n    </Flex>\n  );\n});\n\nexport default Chat;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatBody.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAGL,aAAa,EAKd,MAAM,cAAc,CAAC;AAQtB,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAuH7D,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA2R7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ChatBody.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAGL,aAAa,EAKd,MAAM,cAAc,CAAC;AAQtB,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAuH7D,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA2R5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/Chat/ChatBody.js

@@ -97,7 +97,7 @@ const ChatMessage = ({ agentSerial, message }) => {
     }
     return null;
 };
-const ChatBody = forwardRef((props, ref) => {
+const ChatBody = forwardRef(function ChatBody(props, ref) {
     const { transcripts, liveChat, unreadMessageCount = 0, onScrollToButtonClick, handle, loading, offset = -1, loadMore, ...restProps } = props;
     const t = useI18n();
     const conversationRef = useRef(null);

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

@@ -1 +1 @@
-{"version":3,"file":"ChatBody.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  RefObject,\n  useCallback,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  debounce,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  getFocusables,\n  Icon,\n  Progress,\n  registerIcon,\n  StyledButton,\n  useAfterInitialEffect,\n  useArrows,\n  useI18n,\n  useItemIntersection,\n  useLiveLog,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport {\n  ChatBodyHandleValue,\n  ChatBodyListItemProps,\n  ChatBodyProps,\n  isMessageListItem,\n  isSystemMessageListItem,\n  isTypeIndicatorListItem,\n  MessageProps\n} from './Chat.types';\nimport Message from './Message';\nimport SystemMessage, { StyledSystemMessage } from './SystemMessage';\nimport TypeIndicator from './TypeIndicator';\nimport { StyledMessageContainer } from './Message.styles';\n\nregisterIcon(caretDownIcon);\n\nexport const NewMessageSeparatorId = 'new-message-separator';\n\nconst StyledMessageList = styled.ul``;\nconst StyledSession = styled.div``;\n\nconst StyledChatBody = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { high: shadowHigh, focus },\n        colors: { white },\n        spacing,\n        palette\n      }\n    }\n  } = props;\n  return css`\n    position: relative;\n    overflow-y: hidden;\n\n    > ${StyledButton} {\n      position: absolute;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      box-shadow: ${shadowHigh};\n      z-index: 1;\n      background-color: ${white};\n    }\n\n    > ${StyledMessageList} {\n      overflow-y: auto;\n      list-style-type: none;\n      height: 100%;\n\n      > ${StyledSession} {\n        padding-inline: 1rem;\n        :not(:last-child) {\n          border-block-end: 0.0625rem solid ${palette['border-line']};\n          margin-block-end: ${spacing};\n          padding-block-end: ${spacing};\n        }\n      }\n      ${StyledMessageContainer}, ${StyledSystemMessage} {\n        &:focus-visible {\n          box-shadow: ${focus};\n          outline: none;\n        }\n        margin-block-end: ${spacing};\n      }\n    }\n  `;\n});\n\nStyledChatBody.defaultProps = defaultThemeProp;\n\nconst ScrollToLatest: FunctionComponent<{\n  scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n  const { scrollContainerRef } = props;\n  useLayoutEffect(() => {\n    if (scrollContainerRef.current) {\n      scrollContainerRef.current.scrollTop =\n        scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n    }\n  });\n  return null;\n};\n\ninterface ChatMessageProps {\n  message: ChatBodyListItemProps;\n  agentSerial: RefObject<{ [agentId: string]: number }>;\n}\n\nconst ChatMessage: FunctionComponent<ChatMessageProps> = ({ agentSerial, message }) => {\n  const getAgentVariant = (\n    senderId: MessageProps['senderId'],\n    senderType: MessageProps['senderType'],\n    direction: MessageProps['direction'] = 'in'\n  ) => {\n    if (agentSerial.current === null) return undefined;\n    if (senderType === 'agent' && direction === 'in') {\n      if (agentSerial.current[senderId] !== undefined) {\n        return agentSerial.current[senderId];\n      }\n\n      const nextIndex = Object.entries(agentSerial.current).length;\n      agentSerial.current[senderId] = nextIndex;\n      return nextIndex;\n    }\n    return undefined;\n  };\n\n  if (isMessageListItem(message)) {\n    const { id, senderType, direction, senderId } = message;\n    const agentVariant = getAgentVariant(senderId, senderType, direction);\n    return <Message {...message} key={id} agentVariant={agentVariant} />;\n  }\n\n  if (isSystemMessageListItem(message)) {\n    const extraProps: Record<string, string> = {};\n    const { id } = message;\n    if (id === NewMessageSeparatorId) {\n      extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n    }\n\n    return <SystemMessage {...message} key={id} {...extraProps} />;\n  }\n\n  if (isTypeIndicatorListItem(message)) {\n    const { id, senderId, senderType } = message;\n    const agentVariant = getAgentVariant(senderId, senderType);\n\n    return <TypeIndicator {...message} key={id} agentVariant={agentVariant} />;\n  }\n\n  return null;\n};\n\nconst ChatBody: FunctionComponent<ChatBodyProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatBodyProps>, ref: ChatBodyProps['ref']) => {\n    const {\n      transcripts,\n      liveChat,\n      unreadMessageCount = 0,\n      onScrollToButtonClick,\n      handle,\n      loading,\n      offset = -1,\n      loadMore,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n    const conversationRef = useRef<HTMLUListElement>(null);\n    const scrollRef = useRef(false);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const focusInMessageList = useRef(false);\n    const initialMessageListFocused = useRef(false);\n    const elementRef = useRef<HTMLElement | null>(null);\n    const activeElementIndex = useRef(-1);\n    const agentSerial = useRef<{ [agentId: string]: number }>({});\n\n    const [messageList, setMessageList] = useState<(HTMLLIElement | null)[]>([]);\n    const [verticalNav, setVerticalNav] = useState(true);\n\n    const { announcePolite } = useLiveLog();\n\n    const isScrolledToLatest: ChatBodyHandleValue['isScrolledToLatest'] = useCallback(() => {\n      return conversationRef.current\n        ? conversationRef.current.scrollHeight -\n            conversationRef.current.scrollTop -\n            conversationRef.current.offsetHeight <=\n            30\n        : true;\n    }, [conversationRef.current]);\n\n    const scrollToLatestMessage: ChatBodyHandleValue['scrollToLatestMessage'] = useCallback(() => {\n      if (conversationRef.current) {\n        conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n        focusInMessageList.current = true;\n        messageList[messageList.length - 1]?.focus();\n        activeElementIndex.current = messageList.length - 1;\n      }\n    }, [conversationRef.current, messageList]);\n\n    const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);\n\n    const onMessageListScroll = useCallback(() => {\n      const isScrolled = isScrolledToLatest();\n      if (scrollRef.current && isScrolled) {\n        scrollRef.current = false;\n        if (unreadMessageCount) {\n          onScrollToButtonClick?.();\n        }\n      }\n\n      if (!scrollRef.current && !isScrolled) {\n        scrollRef.current = true;\n      }\n\n      setDisplayScrollToLatest(!isScrolled);\n    }, [isScrolledToLatest(), unreadMessageCount]);\n\n    const scrollToNewMessage: ChatBodyHandleValue['scrollToNewMessage'] = useCallback(() => {\n      if (conversationRef.current) {\n        setDisplayScrollToLatest(false);\n        const newMessageIndicatorEle = conversationRef.current.querySelector<HTMLElement>(\n          '[data-new-message-separator]'\n        );\n        if (\n          newMessageIndicatorEle &&\n          newMessageIndicatorEle.nextElementSibling instanceof HTMLElement\n        ) {\n          conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n          focusInMessageList.current = true;\n          newMessageIndicatorEle.nextElementSibling.focus();\n          activeElementIndex.current =\n            messageList.findIndex(item => item?.hasAttribute('data-new-message-separator')) + 1;\n        } else {\n          scrollToLatestMessage();\n        }\n      }\n    }, [conversationRef.current, messageList]);\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        isScrolledToLatest,\n        scrollToLatestMessage,\n        scrollToNewMessage\n      }),\n      [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]\n    );\n\n    useItemIntersection(\n      conversationRef,\n      offset,\n      () => {\n        loadMore?.();\n      },\n      ':scope > div > li'\n    );\n\n    useEffect(() => {\n      const focusableElements = conversationRef.current?.querySelectorAll<HTMLLIElement>(\n        'li[type=\"system\"],li[type=\"message\"],li[type=\"typing\"]'\n      );\n\n      if (focusableElements) setMessageList(Array.from(focusableElements));\n\n      if (focusableElements && initialMessageListFocused.current === false) {\n        activeElementIndex.current = focusableElements.length - 1;\n      }\n    }, [transcripts, liveChat]);\n\n    useEffect(() => {\n      elementRef.current = messageList[activeElementIndex.current];\n      if (verticalNav) {\n        elementRef.current?.focus();\n      } else {\n        getFocusables(elementRef)[0]?.focus();\n      }\n    }, [verticalNav]);\n\n    useArrows(\n      conversationRef,\n      {\n        cycle: true,\n        selector: ':scope > div > li',\n        dir: 'up-down',\n        allowTabFocus: true\n      },\n      [transcripts, liveChat]\n    );\n\n    useArrows(\n      elementRef,\n      {\n        cycle: true,\n        selector: 'a, button, input, textarea, select, details',\n        dir: 'left-right',\n        allowTabFocus: true\n      },\n      [transcripts, liveChat, verticalNav]\n    );\n\n    const focusSiblingElement = (currentElement: Element, isShiftKey = false) => {\n      elementRef.current = currentElement as HTMLElement;\n      const focusableElements = getFocusables(elementRef);\n      if (focusableElements?.length > 0) {\n        focusableElements?.[isShiftKey ? focusableElements.length - 1 : 0].focus();\n      } else {\n        const element = isShiftKey\n          ? elementRef.current?.previousElementSibling\n          : elementRef.current?.nextElementSibling;\n\n        if (element) focusSiblingElement(element, isShiftKey);\n      }\n    };\n\n    useOuterEvent('mousedown', [conversationRef], () => {\n      focusInMessageList.current = false;\n    });\n\n    useAfterInitialEffect(() => {\n      if (liveChat?.length > 0) {\n        const unreadMessage = liveChat[liveChat.length - 1];\n        if (\n          isSystemMessageListItem(unreadMessage) ||\n          (isMessageListItem(unreadMessage) && unreadMessage.direction === 'in')\n        ) {\n          announcePolite({\n            message: t('new_message'),\n            type: 'alert'\n          });\n        }\n      }\n    }, [liveChat]);\n\n    return (\n      <>\n        <Flex\n          {...restProps}\n          as={StyledChatBody}\n          item={{\n            grow: 1\n          }}\n          container={{\n            direction: 'column'\n          }}\n          ref={ref}\n        >\n          <StyledMessageList\n            ref={conversationRef}\n            onScroll={debounce(onMessageListScroll, 100)}\n            onFocus={() => {\n              if (!focusInMessageList.current) {\n                initialMessageListFocused.current = true;\n                elementRef.current = messageList[activeElementIndex.current];\n                elementRef.current?.focus();\n                focusInMessageList.current = true;\n              }\n            }}\n            onKeyDown={e => {\n              if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n                elementRef.current = messageList[activeElementIndex.current];\n                if (getFocusables(elementRef).length > 0) {\n                  setVerticalNav(false);\n                }\n              } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                if (e.key === 'ArrowUp') {\n                  activeElementIndex.current =\n                    activeElementIndex.current === 0\n                      ? messageList.length - 1\n                      : activeElementIndex.current - 1;\n                } else {\n                  activeElementIndex.current =\n                    activeElementIndex.current === messageList.length - 1\n                      ? 0\n                      : activeElementIndex.current + 1;\n                }\n                setVerticalNav(true);\n              } else if (e.key === 'Tab') {\n                e.preventDefault();\n                focusInMessageList.current = false;\n                if (e.shiftKey) {\n                  const prevElement =\n                    conversationRef?.current?.parentElement?.previousElementSibling;\n                  if (prevElement) focusSiblingElement(prevElement, true);\n                } else if (unreadMessageCount > 0 || displayScrollLatest) {\n                  buttonRef?.current?.focus();\n                } else {\n                  const nextElement = conversationRef.current?.parentElement?.nextElementSibling;\n                  if (nextElement) focusSiblingElement(nextElement);\n                }\n              }\n            }}\n          >\n            {loading && <Progress as='li' placement='block' />}\n            {transcripts.map(session => {\n              return (\n                <StyledSession key={session.id}>\n                  {session.messages.map(message => (\n                    <ChatMessage message={message} agentSerial={agentSerial} key={message.id} />\n                  ))}\n                </StyledSession>\n              );\n            })}\n            <StyledSession>\n              {liveChat.map(message => (\n                <ChatMessage message={message} agentSerial={agentSerial} key={message.id} />\n              ))}\n            </StyledSession>\n          </StyledMessageList>\n          {(unreadMessageCount > 0 || displayScrollLatest) && (\n            <Button\n              aria-label={\n                unreadMessageCount > 0\n                  ? t('scroll_to_unread_messages')\n                  : t('scroll_to_latest_message')\n              }\n              onClick={() => {\n                if (unreadMessageCount > 0) {\n                  scrollToNewMessage();\n                } else {\n                  scrollToLatestMessage();\n                }\n                onScrollToButtonClick?.();\n              }}\n              icon={unreadMessageCount === 0}\n              ref={buttonRef}\n            >\n              <Icon name='caret-down' />\n              {unreadMessageCount > 0 && <>&nbsp; {t('new_messages')}</>}\n            </Button>\n          )}\n        </Flex>\n        {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n      </>\n    );\n  }\n);\n\nexport default ChatBody;\n"]}
+{"version":3,"file":"ChatBody.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  RefObject,\n  useCallback,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  debounce,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  getFocusables,\n  Icon,\n  Progress,\n  registerIcon,\n  StyledButton,\n  useAfterInitialEffect,\n  useArrows,\n  useI18n,\n  useItemIntersection,\n  useLiveLog,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport {\n  ChatBodyHandleValue,\n  ChatBodyListItemProps,\n  ChatBodyProps,\n  isMessageListItem,\n  isSystemMessageListItem,\n  isTypeIndicatorListItem,\n  MessageProps\n} from './Chat.types';\nimport Message from './Message';\nimport SystemMessage, { StyledSystemMessage } from './SystemMessage';\nimport TypeIndicator from './TypeIndicator';\nimport { StyledMessageContainer } from './Message.styles';\n\nregisterIcon(caretDownIcon);\n\nexport const NewMessageSeparatorId = 'new-message-separator';\n\nconst StyledMessageList = styled.ul``;\nconst StyledSession = styled.div``;\n\nconst StyledChatBody = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        shadow: { high: shadowHigh, focus },\n        colors: { white },\n        spacing,\n        palette\n      }\n    }\n  } = props;\n  return css`\n    position: relative;\n    overflow-y: hidden;\n\n    > ${StyledButton} {\n      position: absolute;\n      bottom: 0;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      box-shadow: ${shadowHigh};\n      z-index: 1;\n      background-color: ${white};\n    }\n\n    > ${StyledMessageList} {\n      overflow-y: auto;\n      list-style-type: none;\n      height: 100%;\n\n      > ${StyledSession} {\n        padding-inline: 1rem;\n        :not(:last-child) {\n          border-block-end: 0.0625rem solid ${palette['border-line']};\n          margin-block-end: ${spacing};\n          padding-block-end: ${spacing};\n        }\n      }\n      ${StyledMessageContainer}, ${StyledSystemMessage} {\n        &:focus-visible {\n          box-shadow: ${focus};\n          outline: none;\n        }\n        margin-block-end: ${spacing};\n      }\n    }\n  `;\n});\n\nStyledChatBody.defaultProps = defaultThemeProp;\n\nconst ScrollToLatest: FunctionComponent<{\n  scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n  const { scrollContainerRef } = props;\n  useLayoutEffect(() => {\n    if (scrollContainerRef.current) {\n      scrollContainerRef.current.scrollTop =\n        scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n    }\n  });\n  return null;\n};\n\ninterface ChatMessageProps {\n  message: ChatBodyListItemProps;\n  agentSerial: RefObject<{ [agentId: string]: number }>;\n}\n\nconst ChatMessage: FunctionComponent<ChatMessageProps> = ({ agentSerial, message }) => {\n  const getAgentVariant = (\n    senderId: MessageProps['senderId'],\n    senderType: MessageProps['senderType'],\n    direction: MessageProps['direction'] = 'in'\n  ) => {\n    if (agentSerial.current === null) return undefined;\n    if (senderType === 'agent' && direction === 'in') {\n      if (agentSerial.current[senderId] !== undefined) {\n        return agentSerial.current[senderId];\n      }\n\n      const nextIndex = Object.entries(agentSerial.current).length;\n      agentSerial.current[senderId] = nextIndex;\n      return nextIndex;\n    }\n    return undefined;\n  };\n\n  if (isMessageListItem(message)) {\n    const { id, senderType, direction, senderId } = message;\n    const agentVariant = getAgentVariant(senderId, senderType, direction);\n    return <Message {...message} key={id} agentVariant={agentVariant} />;\n  }\n\n  if (isSystemMessageListItem(message)) {\n    const extraProps: Record<string, string> = {};\n    const { id } = message;\n    if (id === NewMessageSeparatorId) {\n      extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n    }\n\n    return <SystemMessage {...message} key={id} {...extraProps} />;\n  }\n\n  if (isTypeIndicatorListItem(message)) {\n    const { id, senderId, senderType } = message;\n    const agentVariant = getAgentVariant(senderId, senderType);\n\n    return <TypeIndicator {...message} key={id} agentVariant={agentVariant} />;\n  }\n\n  return null;\n};\n\nconst ChatBody: FunctionComponent<ChatBodyProps & ForwardProps> = forwardRef(function ChatBody(\n  props: PropsWithoutRef<ChatBodyProps>,\n  ref: ChatBodyProps['ref']\n) {\n  const {\n    transcripts,\n    liveChat,\n    unreadMessageCount = 0,\n    onScrollToButtonClick,\n    handle,\n    loading,\n    offset = -1,\n    loadMore,\n    ...restProps\n  } = props;\n\n  const t = useI18n();\n  const conversationRef = useRef<HTMLUListElement>(null);\n  const scrollRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const focusInMessageList = useRef(false);\n  const initialMessageListFocused = useRef(false);\n  const elementRef = useRef<HTMLElement | null>(null);\n  const activeElementIndex = useRef(-1);\n  const agentSerial = useRef<{ [agentId: string]: number }>({});\n\n  const [messageList, setMessageList] = useState<(HTMLLIElement | null)[]>([]);\n  const [verticalNav, setVerticalNav] = useState(true);\n\n  const { announcePolite } = useLiveLog();\n\n  const isScrolledToLatest: ChatBodyHandleValue['isScrolledToLatest'] = useCallback(() => {\n    return conversationRef.current\n      ? conversationRef.current.scrollHeight -\n          conversationRef.current.scrollTop -\n          conversationRef.current.offsetHeight <=\n          30\n      : true;\n  }, [conversationRef.current]);\n\n  const scrollToLatestMessage: ChatBodyHandleValue['scrollToLatestMessage'] = useCallback(() => {\n    if (conversationRef.current) {\n      conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n      focusInMessageList.current = true;\n      messageList[messageList.length - 1]?.focus();\n      activeElementIndex.current = messageList.length - 1;\n    }\n  }, [conversationRef.current, messageList]);\n\n  const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);\n\n  const onMessageListScroll = useCallback(() => {\n    const isScrolled = isScrolledToLatest();\n    if (scrollRef.current && isScrolled) {\n      scrollRef.current = false;\n      if (unreadMessageCount) {\n        onScrollToButtonClick?.();\n      }\n    }\n\n    if (!scrollRef.current && !isScrolled) {\n      scrollRef.current = true;\n    }\n\n    setDisplayScrollToLatest(!isScrolled);\n  }, [isScrolledToLatest(), unreadMessageCount]);\n\n  const scrollToNewMessage: ChatBodyHandleValue['scrollToNewMessage'] = useCallback(() => {\n    if (conversationRef.current) {\n      setDisplayScrollToLatest(false);\n      const newMessageIndicatorEle = conversationRef.current.querySelector<HTMLElement>(\n        '[data-new-message-separator]'\n      );\n      if (\n        newMessageIndicatorEle &&\n        newMessageIndicatorEle.nextElementSibling instanceof HTMLElement\n      ) {\n        conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n        focusInMessageList.current = true;\n        newMessageIndicatorEle.nextElementSibling.focus();\n        activeElementIndex.current =\n          messageList.findIndex(item => item?.hasAttribute('data-new-message-separator')) + 1;\n      } else {\n        scrollToLatestMessage();\n      }\n    }\n  }, [conversationRef.current, messageList]);\n\n  useImperativeHandle(\n    handle,\n    () => ({\n      isScrolledToLatest,\n      scrollToLatestMessage,\n      scrollToNewMessage\n    }),\n    [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]\n  );\n\n  useItemIntersection(\n    conversationRef,\n    offset,\n    () => {\n      loadMore?.();\n    },\n    ':scope > div > li'\n  );\n\n  useEffect(() => {\n    const focusableElements = conversationRef.current?.querySelectorAll<HTMLLIElement>(\n      'li[type=\"system\"],li[type=\"message\"],li[type=\"typing\"]'\n    );\n\n    if (focusableElements) setMessageList(Array.from(focusableElements));\n\n    if (focusableElements && initialMessageListFocused.current === false) {\n      activeElementIndex.current = focusableElements.length - 1;\n    }\n  }, [transcripts, liveChat]);\n\n  useEffect(() => {\n    elementRef.current = messageList[activeElementIndex.current];\n    if (verticalNav) {\n      elementRef.current?.focus();\n    } else {\n      getFocusables(elementRef)[0]?.focus();\n    }\n  }, [verticalNav]);\n\n  useArrows(\n    conversationRef,\n    {\n      cycle: true,\n      selector: ':scope > div > li',\n      dir: 'up-down',\n      allowTabFocus: true\n    },\n    [transcripts, liveChat]\n  );\n\n  useArrows(\n    elementRef,\n    {\n      cycle: true,\n      selector: 'a, button, input, textarea, select, details',\n      dir: 'left-right',\n      allowTabFocus: true\n    },\n    [transcripts, liveChat, verticalNav]\n  );\n\n  const focusSiblingElement = (currentElement: Element, isShiftKey = false) => {\n    elementRef.current = currentElement as HTMLElement;\n    const focusableElements = getFocusables(elementRef);\n    if (focusableElements?.length > 0) {\n      focusableElements?.[isShiftKey ? focusableElements.length - 1 : 0].focus();\n    } else {\n      const element = isShiftKey\n        ? elementRef.current?.previousElementSibling\n        : elementRef.current?.nextElementSibling;\n\n      if (element) focusSiblingElement(element, isShiftKey);\n    }\n  };\n\n  useOuterEvent('mousedown', [conversationRef], () => {\n    focusInMessageList.current = false;\n  });\n\n  useAfterInitialEffect(() => {\n    if (liveChat?.length > 0) {\n      const unreadMessage = liveChat[liveChat.length - 1];\n      if (\n        isSystemMessageListItem(unreadMessage) ||\n        (isMessageListItem(unreadMessage) && unreadMessage.direction === 'in')\n      ) {\n        announcePolite({\n          message: t('new_message'),\n          type: 'alert'\n        });\n      }\n    }\n  }, [liveChat]);\n\n  return (\n    <>\n      <Flex\n        {...restProps}\n        as={StyledChatBody}\n        item={{\n          grow: 1\n        }}\n        container={{\n          direction: 'column'\n        }}\n        ref={ref}\n      >\n        <StyledMessageList\n          ref={conversationRef}\n          onScroll={debounce(onMessageListScroll, 100)}\n          onFocus={() => {\n            if (!focusInMessageList.current) {\n              initialMessageListFocused.current = true;\n              elementRef.current = messageList[activeElementIndex.current];\n              elementRef.current?.focus();\n              focusInMessageList.current = true;\n            }\n          }}\n          onKeyDown={e => {\n            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n              elementRef.current = messageList[activeElementIndex.current];\n              if (getFocusables(elementRef).length > 0) {\n                setVerticalNav(false);\n              }\n            } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n              if (e.key === 'ArrowUp') {\n                activeElementIndex.current =\n                  activeElementIndex.current === 0\n                    ? messageList.length - 1\n                    : activeElementIndex.current - 1;\n              } else {\n                activeElementIndex.current =\n                  activeElementIndex.current === messageList.length - 1\n                    ? 0\n                    : activeElementIndex.current + 1;\n              }\n              setVerticalNav(true);\n            } else if (e.key === 'Tab') {\n              e.preventDefault();\n              focusInMessageList.current = false;\n              if (e.shiftKey) {\n                const prevElement = conversationRef?.current?.parentElement?.previousElementSibling;\n                if (prevElement) focusSiblingElement(prevElement, true);\n              } else if (unreadMessageCount > 0 || displayScrollLatest) {\n                buttonRef?.current?.focus();\n              } else {\n                const nextElement = conversationRef.current?.parentElement?.nextElementSibling;\n                if (nextElement) focusSiblingElement(nextElement);\n              }\n            }\n          }}\n        >\n          {loading && <Progress as='li' placement='block' />}\n          {transcripts.map(session => {\n            return (\n              <StyledSession key={session.id}>\n                {session.messages.map(message => (\n                  <ChatMessage message={message} agentSerial={agentSerial} key={message.id} />\n                ))}\n              </StyledSession>\n            );\n          })}\n          <StyledSession>\n            {liveChat.map(message => (\n              <ChatMessage message={message} agentSerial={agentSerial} key={message.id} />\n            ))}\n          </StyledSession>\n        </StyledMessageList>\n        {(unreadMessageCount > 0 || displayScrollLatest) && (\n          <Button\n            aria-label={\n              unreadMessageCount > 0\n                ? t('scroll_to_unread_messages')\n                : t('scroll_to_latest_message')\n            }\n            onClick={() => {\n              if (unreadMessageCount > 0) {\n                scrollToNewMessage();\n              } else {\n                scrollToLatestMessage();\n              }\n              onScrollToButtonClick?.();\n            }}\n            icon={unreadMessageCount === 0}\n            ref={buttonRef}\n          >\n            <Icon name='caret-down' />\n            {unreadMessageCount > 0 && <>&nbsp; {t('new_messages')}</>}\n          </Button>\n        )}\n      </Flex>\n      {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n    </>\n  );\n});\n\nexport default ChatBody;\n"]}

package/lib/components/Chat/ChatComposer.js

@@ -74,7 +74,7 @@ export const StyledAttachmentsListContainer = styled.div(({ theme }) => {
     }
   `;
 });
-const ChatComposer = forwardRef((props, ref) => {
+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 [message, setMessage] = useState(defaultMessage);
     useEffect(() => {

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 {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  ReactNode,\n  useState,\n  useEffect,\n  useCallback,\n  ChangeEvent,\n  useImperativeHandle,\n  useRef,\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  EmojiPickerProps,\n  hasProp,\n  useI18n,\n  useElement,\n  defaultThemeProp,\n  PropsWithDefaults,\n  ForwardProps,\n  Tooltip,\n  useOuterEvent,\n  VisuallyHiddenText,\n  FileUploadItem,\n  FileUploadItemProps,\n  Grid\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  (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_label')}\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 {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  PropsWithoutRef,\n  ReactNode,\n  useState,\n  useEffect,\n  useCallback,\n  ChangeEvent,\n  useImperativeHandle,\n  useRef,\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  EmojiPickerProps,\n  hasProp,\n  useI18n,\n  useElement,\n  defaultThemeProp,\n  PropsWithDefaults,\n  ForwardProps,\n  Tooltip,\n  useOuterEvent,\n  VisuallyHiddenText,\n  FileUploadItem,\n  FileUploadItemProps,\n  Grid\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_label')}\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/ChatHeader.js

@@ -18,7 +18,7 @@ const StyledContextContainer = styled.div `
 const StyledInfoDialog = styled(InfoDialog) `
   min-width: 50ch;
 `;
-const ChatHeader = forwardRef((props, ref) => {
+const ChatHeader = forwardRef(function ChatHeader(props, ref) {
     const { title, actions = [], icon, customer, authenticated = false, sentiment, context, ...restProps } = props;
     const t = useI18n();
     const [target, setTarget] = useElement(null);

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Flex,\n  Icon,\n  defaultThemeProp,\n  ForwardProps,\n  NoChildrenProp,\n  SentimentProps,\n  Sentiment,\n  FieldValueListItemProps,\n  Button,\n  useElement,\n  InfoDialog,\n  FieldValueList,\n  useI18n,\n  registerIcon,\n  MenuButton,\n  MenuItemProps\n} from '@pega/cosmos-react-core';\nimport * as userCheckIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-check.icon';\nimport * as userQuestionMarkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-question-mark.icon';\n\nregisterIcon(userCheckIcon, userQuestionMarkIcon);\n\nexport interface ChatHeaderProps extends NoChildrenProp {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Title: Used to show channel || group name */\n  title: string;\n  /** Icon: Used to show the channel icons, pass the icon name from the cosmos library to render */\n  icon?: string;\n  /** Used to show customer name || handle */\n  customer: string;\n  /** Authentication status of the customer\n   * @default false\n   */\n  authenticated?: boolean;\n  /** Sentiment */\n  sentiment?: SentimentProps;\n  /** Contextual information */\n  context?: {\n    loading?: boolean;\n    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n    items: FieldValueListItemProps[];\n  };\n  /** Used to show frequent user actions to be performed */\n  actions?: MenuItemProps[];\n}\n\nconst StyledChatHeader = styled.header(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'border-line': borderLine }\n      }\n    }\n  }) => {\n    return css`\n      padding: ${spacing};\n      border-block-end: 0.0625rem solid ${borderLine};\n    `;\n  }\n);\nStyledChatHeader.defaultProps = defaultThemeProp;\n\nconst StyledContextContainer = styled.div`\n  min-height: 2rem;\n`;\n\nconst StyledInfoDialog = styled(InfoDialog)`\n  min-width: 50ch;\n`;\n\nconst ChatHeader: FunctionComponent<ChatHeaderProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatHeaderProps>, ref: ChatHeaderProps['ref']) => {\n    const {\n      title,\n      actions = [],\n      icon,\n      customer,\n      authenticated = false,\n      sentiment,\n      context,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n    const [target, setTarget] = useElement<HTMLButtonElement>(null);\n\n    return (\n      <Flex\n        {...restProps}\n        ref={ref}\n        as={StyledChatHeader}\n        container={{ alignItems: 'start' }}\n        item={{\n          shrink: 0\n        }}\n      >\n        <Flex\n          item={{\n            grow: 1\n          }}\n          container={{\n            gap: 0.5,\n            alignItems: 'start',\n            direction: 'column'\n          }}\n        >\n          <Flex container={{ gap: 1, alignItems: 'center' }}>\n            {icon && <Icon name={icon} />}\n            <Text variant='h2'>{title}</Text>\n          </Flex>\n          <Flex container={{ gap: 1, alignItems: 'center' }}>\n            <Icon\n              role='img'\n              name={authenticated ? 'user-check' : 'user-question-mark'}\n              aria-label={authenticated ? t('authenticated') : t('not_authenticated')}\n            />\n            <Text variant='secondary'>{customer}</Text>\n            {sentiment && <Sentiment {...sentiment} labelHidden />}\n          </Flex>\n        </Flex>\n\n        <Flex\n          item={{\n            grow: 1\n          }}\n          container={{\n            alignItems: 'center',\n            justify: 'end'\n          }}\n        >\n          {context && (\n            <Button\n              variant='simple'\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                context.onClick?.(e);\n                setTarget(e.currentTarget);\n              }}\n            >\n              {t('context')}\n            </Button>\n          )}\n\n          <MenuButton\n            text={t('actions')}\n            iconOnly\n            icon='more'\n            variant='simple'\n            menu={{ items: actions }}\n          />\n        </Flex>\n        {target && context && (\n          <StyledInfoDialog\n            heading={t('chat_context')}\n            target={target}\n            onDismiss={() => setTarget(null)}\n            placement='bottom-end'\n            progress={context.loading}\n          >\n            <Flex as={StyledContextContainer} container>\n              <FieldValueList fields={context.items} />\n            </Flex>\n          </StyledInfoDialog>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ChatHeader;\n"]}
+{"version":3,"file":"ChatHeader.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Flex,\n  Icon,\n  defaultThemeProp,\n  ForwardProps,\n  NoChildrenProp,\n  SentimentProps,\n  Sentiment,\n  FieldValueListItemProps,\n  Button,\n  useElement,\n  InfoDialog,\n  FieldValueList,\n  useI18n,\n  registerIcon,\n  MenuButton,\n  MenuItemProps\n} from '@pega/cosmos-react-core';\nimport * as userCheckIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-check.icon';\nimport * as userQuestionMarkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-question-mark.icon';\n\nregisterIcon(userCheckIcon, userQuestionMarkIcon);\n\nexport interface ChatHeaderProps extends NoChildrenProp {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Title: Used to show channel || group name */\n  title: string;\n  /** Icon: Used to show the channel icons, pass the icon name from the cosmos library to render */\n  icon?: string;\n  /** Used to show customer name || handle */\n  customer: string;\n  /** Authentication status of the customer\n   * @default false\n   */\n  authenticated?: boolean;\n  /** Sentiment */\n  sentiment?: SentimentProps;\n  /** Contextual information */\n  context?: {\n    loading?: boolean;\n    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n    items: FieldValueListItemProps[];\n  };\n  /** Used to show frequent user actions to be performed */\n  actions?: MenuItemProps[];\n}\n\nconst StyledChatHeader = styled.header(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'border-line': borderLine }\n      }\n    }\n  }) => {\n    return css`\n      padding: ${spacing};\n      border-block-end: 0.0625rem solid ${borderLine};\n    `;\n  }\n);\nStyledChatHeader.defaultProps = defaultThemeProp;\n\nconst StyledContextContainer = styled.div`\n  min-height: 2rem;\n`;\n\nconst StyledInfoDialog = styled(InfoDialog)`\n  min-width: 50ch;\n`;\n\nconst ChatHeader: FunctionComponent<ChatHeaderProps & ForwardProps> = forwardRef(\n  function ChatHeader(props: PropsWithoutRef<ChatHeaderProps>, ref: ChatHeaderProps['ref']) {\n    const {\n      title,\n      actions = [],\n      icon,\n      customer,\n      authenticated = false,\n      sentiment,\n      context,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n    const [target, setTarget] = useElement<HTMLButtonElement>(null);\n\n    return (\n      <Flex\n        {...restProps}\n        ref={ref}\n        as={StyledChatHeader}\n        container={{ alignItems: 'start' }}\n        item={{\n          shrink: 0\n        }}\n      >\n        <Flex\n          item={{\n            grow: 1\n          }}\n          container={{\n            gap: 0.5,\n            alignItems: 'start',\n            direction: 'column'\n          }}\n        >\n          <Flex container={{ gap: 1, alignItems: 'center' }}>\n            {icon && <Icon name={icon} />}\n            <Text variant='h2'>{title}</Text>\n          </Flex>\n          <Flex container={{ gap: 1, alignItems: 'center' }}>\n            <Icon\n              role='img'\n              name={authenticated ? 'user-check' : 'user-question-mark'}\n              aria-label={authenticated ? t('authenticated') : t('not_authenticated')}\n            />\n            <Text variant='secondary'>{customer}</Text>\n            {sentiment && <Sentiment {...sentiment} labelHidden />}\n          </Flex>\n        </Flex>\n\n        <Flex\n          item={{\n            grow: 1\n          }}\n          container={{\n            alignItems: 'center',\n            justify: 'end'\n          }}\n        >\n          {context && (\n            <Button\n              variant='simple'\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                context.onClick?.(e);\n                setTarget(e.currentTarget);\n              }}\n            >\n              {t('context')}\n            </Button>\n          )}\n\n          <MenuButton\n            text={t('actions')}\n            iconOnly\n            icon='more'\n            variant='simple'\n            menu={{ items: actions }}\n          />\n        </Flex>\n        {target && context && (\n          <StyledInfoDialog\n            heading={t('chat_context')}\n            target={target}\n            onDismiss={() => setTarget(null)}\n            placement='bottom-end'\n            progress={context.loading}\n          >\n            <Flex as={StyledContextContainer} container>\n              <FieldValueList fields={context.items} />\n            </Flex>\n          </StyledInfoDialog>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ChatHeader;\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":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAUL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AA4F5C,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAwN3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAUL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AA4F5C,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAyN1D,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib/components/Chat/Message.js

@@ -34,7 +34,7 @@ const Attachment = (props) => {
                         onPreview?.(id);
                     }, children: name }), secondary: meta, visual: _jsx(Icon, { name: icon || 'document-doc' }), actions: _jsx(Actions, { ref: actionRef, items: actions, iconOnly: true }) })] }, id));
 };
-const Message = forwardRef((props, ref) => {
+const Message = forwardRef(function Message(props, ref) {
     const { message, direction, avatarInfo, timestamp, attachments = [], mediaPageLinks = [], status, typing, messageHeader, senderType, senderId, agentVariant, ...restProps } = props;
     const t = useI18n();
     const theme = useTheme();

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 {\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  MouseEvent,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\n\nimport {\n  Avatar,\n  Flex,\n  Icon,\n  registerIcon,\n  SummaryItem,\n  Image,\n  FlexContainerProps,\n  EmojiDisplay,\n  useI18n,\n  ForwardProps,\n  Actions,\n  Tooltip,\n  useTheme,\n  useElement\n} 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 { MessageProps } 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';\nimport type { AttachmentItemProps } from './Chat.types';\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(\n  (props: PropsWithoutRef<MessageProps>, ref: MessageProps['ref']) => {\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);\n\nexport default Message;\n"]}
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../src/components/Chat/Message.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAEL,UAAU,EAGV,SAAS,EACT,OAAO,EACP,MAAM,EACP,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EAEL,YAAY,EACZ,OAAO,EAEP,OAAO,EACP,OAAO,EACP,QAAQ,EACR,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,eAAe,MAAM,qEAAqE,CAAC;AACvG,OAAO,KAAK,WAAW,MAAM,iEAAiE,CAAC;AAC/F,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAG5G,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,uBAAuB,EACvB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,0BAA0B,EAC1B,uBAAuB,EACvB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC;AAG1B,YAAY,CAAC,eAAe,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC;AAE9D,MAAM,UAAU,GAAG,CAAC,KAA0B,EAAE,EAAE;IAChD,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC3E,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,CAAC,CAAgB,EAAE,EAAE;YACpC,IACG,CAAC,CAAC,MAA4B,EAAE,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;gBACzE,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EACnE;gBACA,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;QACH,CAAC,CAAC;QAEF,SAAS,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAEzD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,MAAC,IAAI,IAEH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,aAEA,SAAS,IAAI,CACZ,KAAC,KAAK,IACJ,EAAE,EAAE,oBAAoB,EACxB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;oBACzB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;gBAClB,CAAC,EACD,GAAG,EAAE,IAAI,GACT,CACH,EAED,KAAC,WAAW,IACV,EAAE,EAAE,iBAAiB,EACrB,OAAO,EACL,KAAC,iBAAiB,IAChB,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;wBACzB,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;oBAClB,CAAC,YAEA,IAAI,GACa,EAEtB,SAAS,EAAE,IAAI,EACf,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,IAAI,cAAc,GAAI,EAC9C,OAAO,EAAE,KAAC,OAAO,IAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,SAAG,GAC7D,KAnCG,EAAE,CAoCF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,GAAmD,UAAU,CAAC,SAAS,OAAO,CACzF,KAAoC,EACpC,GAAwB;IAExB,MAAM,EACJ,OAAO,EACP,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,GAAG,EAAE,EAChB,cAAc,GAAG,EAAE,EACnB,MAAM,EACN,MAAM,EACN,aAAa,EACb,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/C,MAAM,EAAE,OAAO,EAAE,4BAA4B,EAAE,GAAG,OAAO,CACvD,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,EAClE,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,CAC7C,CAAC;IAEF,IAAI,kBAAkB,GAAkC,SAAS,CAAC;IAClE,IAAI,SAAS,IAAI,CAAC,MAAM,EAAE;QACxB,kBAAkB,GAAG,OAAO,CAAC;KAC9B;SAAM,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE;QAC/B,kBAAkB,GAAG,KAAK,CAAC;KAC5B;IAED,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,SAAS,KAAK,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,EAAE;YAC/D,OAAO,IAAI,CAAC;SACb;QAED,IAAI,UAAU,KAAK,OAAO,EAAE;YAC1B,OAAO,CACL,8BACE,MAAC,aAAa,eACZ,KAAC,MAAM,IACL,IAAI,EAAE,UAAW,CAAC,IAAI,EACtB,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,UAAW,CAAC,QAAQ,EAC9B,GAAG,EAAE,YAAY,EACjB,eAAe,EAAE,4BAA4B,GAC7C,EACF,KAAC,2BAA2B,cAC1B,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,GACK,IAChB,EAChB,KAAC,OAAO,IAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YAC1D,UAAW,CAAC,IAAI,GACT,IACT,CACJ,CAAC;SACH;QAED,OAAO,CACL,8BACE,KAAC,MAAM,IACL,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAC7C,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,IAAI,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC/E,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAC9B,GAAG,EAAE,YAAY,EACjB,eAAe,EAAE,4BAA4B,GAC7C,EACF,KAAC,OAAO,IAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YAC1D,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAChC,IACT,CACJ,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnD,IAAI,SAA6B,CAAC;IAClC,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC;IAEzD,SAAS,GAAG,CAAC,CAAC,wBAAwB,EAAE,CAAC,MAAM,EAAE,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC;IACjE,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;QAAE,SAAS,GAAG,CAAC,CAAC,kBAAkB,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC;QAAE,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/F,IAAI,SAAS;QAAE,SAAS,GAAG,CAAC,CAAC,2BAA2B,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAClF,IAAI,MAAM,IAAI,SAAS,KAAK,KAAK;QAAE,SAAS,IAAI,IAAI,CAAC,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;IAEzF,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,sBAAsB,EAC1B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,GAAG,EAAE,GAAG;YACR,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa;SACtD,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,UAAU,EAAE,CAAC,CAAC,OAAO,EACrB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,gBACd,SAAS,KACjB,SAAS,aAEZ,YAAY,EACb,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;oBAChD,OAAO,EAAE,QAAQ;iBAClB,EACD,EAAE,EAAE,iBAAiB,aAErB,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa;4BACrD,UAAU,EAAE,QAAQ;4BACpB,GAAG,EAAE,GAAG;yBACT,aAED,MAAC,mBAAmB,eACjB,aAAa,IAAI,CAChB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,mBAAmB,aACxE,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,aAC3B,KAAC,cAAc,IAAC,IAAI,EAAC,iBAAiB,GAAG,EACzC,KAAC,0BAA0B,cAAE,aAAa,CAAC,OAAO,GAA8B,IAC3E,EAEP,KAAC,uBAAuB,cAAE,aAAa,CAAC,IAAI,GAA2B,IAClE,CACR,EAEA,OAAO,IAAI,CACV,KAAC,0BAA0B,cACzB,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,GAAI,GACjB,CAC9B,EAEA,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACxD,MAAC,eAAe,eACb,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;gDAC5B,OAAO,eAAC,UAAU,OAAK,UAAU,EAAE,GAAG,EAAE,UAAU,CAAC,EAAE,GAAI,CAAC;4CAC5D,CAAC,CAAC,EAED,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;gDACjC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC;gDACpD,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,EAEvB,SAAS,EAAE;wDACT,SAAS,EAAE,QAAQ;qDACpB,aAEA,SAAS,IAAI,CACZ,KAAC,KAAK,IAAC,EAAE,EAAE,oBAAoB,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,IAAI,IAAI,GAAI,CACxE,EACD,KAAC,WAAW,IACV,EAAE,EAAE,iBAAiB,EACrB,OAAO,EACL,KAAC,eAAe,kBACF,KAAK,EACjB,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,YAEf,IAAI,GACW,EAEpB,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,GAAG,GAChC,KArBG,EAAE,CAsBF,CACR,CAAC;4CACJ,CAAC,CAAC,IACc,CACnB,IACmB,EAErB,MAAM,KAAK,eAAe,IAAI,OAAO,IAAI,SAAS,KAAK,KAAK,IAAI,CAC/D,KAAC,qBAAqB,IAAC,IAAI,EAAC,YAAY,GAAG,CAC5C,IACI,EAEN,CAAC,MAAM,IAAI,CACV,MAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,SAAS,EAAE;4BACT,OAAO,EAAE,kBAAkB;4BAC3B,GAAG,EAAE,GAAG;yBACT,aAEA,SAAS,IAAI,KAAC,cAAc,cAAE,SAAS,GAAkB,EACzD,MAAM,IAAI,SAAS,KAAK,KAAK,IAAI,KAAC,gBAAgB,cAAE,CAAC,CAAC,MAAM,CAAC,GAAoB,IAC7E,CACR,EAEA,MAAM,IAAI,CACT,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,GAAG,EAAE,IAAI;yBACV,aAED,KAAC,iBAAiB,IAAC,KAAK,EAAE,CAAC,GAAI,EAC/B,KAAC,iBAAiB,IAAC,KAAK,EAAE,IAAI,GAAI,EAClC,KAAC,iBAAiB,IAAC,KAAK,EAAE,GAAG,GAAI,IAC5B,CACR,IACI,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  MouseEvent,\n  useEffect,\n  useMemo,\n  useRef\n} from 'react';\n\nimport {\n  Avatar,\n  Flex,\n  Icon,\n  registerIcon,\n  SummaryItem,\n  Image,\n  FlexContainerProps,\n  EmojiDisplay,\n  useI18n,\n  ForwardProps,\n  Actions,\n  Tooltip,\n  useTheme,\n  useElement\n} 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 { MessageProps } 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';\nimport type { AttachmentItemProps } from './Chat.types';\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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAa,MAAM,OAAO,CAAC;AAGvF,OAAO,EAQL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAQjC,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,WAAW,yGAAe,CAAC;AACxC,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAChD,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAI/C,eAAO,MAAM,wBAAwB;;SAqBpC,CAAC;AAoCF,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CA4KnF,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAa,MAAM,OAAO,CAAC;AAGvF,OAAO,EAQL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAQjC,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,WAAW,yGAAe,CAAC;AACxC,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAChD,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAI/C,eAAO,MAAM,wBAAwB;;SAqBpC,CAAC;AAoCF,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,8BAA8B;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IACtC;;OAEG;IACH,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAClD,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CA6KlF,CAAC;AAEL,eAAe,oBAAoB,CAAC"}

package/lib/components/Chat/SuggestedReplyPicker.js

@@ -58,7 +58,7 @@ const StyledSuggestedReplyContainer = styled.div(props => {
   `;
 });
 StyledSuggestedReplyContainer.defaultProps = defaultThemeProp;
-const SuggestedReplyPicker = forwardRef((props, ref) => {
+const SuggestedReplyPicker = forwardRef(function SuggestedReplyPicker(props, ref) {
     const { replies = [], collapsed, onExpandCollapse, showNotification, onSelect, currentReplyId, onReplyChange, ...restProps } = props;
     const { announcePolite } = useLiveLog();
     const t = useI18n();