@pega/cosmos-react-social 4.0.0-dev.10.1 → 4.0.0-dev.11.0

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

@@ -1,9 +1,9 @@
-import { ReactElement, FunctionComponent, Ref, ReactNode } from 'react';
+import { FunctionComponent, Ref } from 'react';
 import { BannerProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
-import ChatBody from './ChatBody';
-import ChatComposer from './ChatComposer';
-import ChatHeader from './ChatHeader';
-import SuggestedReplyPicker from './SuggestedReplyPicker';
+import { ChatComposerProps } from './ChatComposer';
+import { ChatHeaderProps } from './ChatHeader';
+import { SuggestedReplyPickerProps } from './SuggestedReplyPicker';
+import { ChatBodyProps } from './Chat.types';
 export type ChatBannerProps = {
     /** Content */
     content: string;
@@ -14,17 +14,15 @@ export interface ChatProps extends NoChildrenProp {
     /** ref to the element */
     ref?: Ref<HTMLElement>;
     /** Header of conversation pane */
-    header: ReactElement<typeof ChatHeader>;
-    /** Utility - This is used by utility container internally. It has predefined styles and visible conditionally based on utility prop is */
-    utility?: ReactNode;
+    header: ChatHeaderProps;
     /** Wrapper of message groups, system messages, type ahead */
-    body: ReactElement<typeof ChatBody>;
+    body: ChatBodyProps;
     /** Wrapper of suggested replies */
-    suggestedReplyPicker?: ReactElement<typeof SuggestedReplyPicker>;
+    suggestedReplyPicker?: SuggestedReplyPickerProps;
     /** chat banner */
     banner?: Pick<BannerProps, 'variant' | 'messages'>;
     /** Wrapper of conversation input, emojis, attachments */
-    footer: ReactElement<typeof ChatComposer>;
+    composer: ChatComposerProps;
 }
 declare const Chat: FunctionComponent<ChatProps & ForwardProps>;
 export default Chat;

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,EACL,YAAY,EACZ,iBAAiB,EAGjB,GAAG,EACH,SAAS,EAGV,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,WAAW,EAEX,YAAY,EACZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAE1D,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,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;IACxC,0IAA0I;IAC1I,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6DAA6D;IAC7D,IAAI,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;IACpC,mCAAmC;IACnC,oBAAoB,CAAC,EAAE,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC;IACjE,kBAAkB;IAClB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;IACnD,yDAAyD;IACzD,MAAM,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;CAC3C;AA8DD,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA8CrD,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;AA8DD,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAqBrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Chat/Chat.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { Flex, Banner, defaultThemeProp } from '@pega/cosmos-react-core';
 import { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';
+import ChatBody from './ChatBody';
+import ChatComposer from './ChatComposer';
+import ChatHeader from './ChatHeader';
+import SuggestedReplyPicker from './SuggestedReplyPicker';
 const StyledUtilityContainer = styled.div ``;
 const StyledUtilityMerger = styled.div ``;
 const StyledUtilityContent = styled.div ``;
@@ -50,18 +54,10 @@ const StyledChatContainer = styled.section(props => {
 });
 StyledChatContainer.defaultProps = defaultThemeProp;
 const Chat = forwardRef((props, ref) => {
-    const { header, body, footer, utility, banner, suggestedReplyPicker, ...restProps } = props;
-    const utilityContentRef = useRef(null);
-    useEffect(() => {
-        utilityContentRef.current?.focus();
-    }, [utility]);
+    const { header, body, composer, banner, suggestedReplyPicker, ...restProps } = props;
     return (_jsxs(Flex, { ref: ref, as: StyledChatContainer, container: {
             direction: 'column'
-        }, ...restProps, children: [header, _jsxs(Flex, { container: {
-                    direction: 'column'
-                }, as: StyledUtilityMerger, children: [utility && (_jsx(Flex, { tabIndex: 0, as: StyledUtilityContainer, container: {
-                            direction: 'column'
-                        }, children: _jsx(StyledUtilityContent, { ref: utilityContentRef, children: utility }) })), banner && _jsx(Banner, { variant: banner.variant, messages: banner.messages }), body] }), suggestedReplyPicker, footer] }));
+        }, ...restProps, children: [_jsx(ChatHeader, { ...header }), banner && _jsx(Banner, { variant: banner.variant, messages: banner.messages }), _jsx(ChatBody, { ...body }), suggestedReplyPicker && _jsx(SuggestedReplyPicker, { ...suggestedReplyPicker }), _jsx(ChatComposer, { ...composer })] }));
 });
 export default Chat;
 //# sourceMappingURL=Chat.js.map

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,EAGL,UAAU,EAIV,MAAM,EACN,SAAS,EACV,MAAM,OAAO,CAAC;AACf,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;AA+BpF,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,EACF,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;kBAEM,iBAAiB;;MAE7B,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,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5F,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,SAAS,aAEZ,MAAM,EACP,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;iBACpB,EACD,EAAE,EAAE,mBAAmB,aAEtB,OAAO,IAAI,CACV,KAAC,IAAI,IACH,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE;4BACT,SAAS,EAAE,QAAQ;yBACpB,YAED,KAAC,oBAAoB,IAAC,GAAG,EAAE,iBAAiB,YAAG,OAAO,GAAwB,GACzE,CACR,EAEA,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,GAAI,EACxE,IAAI,IACA,EACN,oBAAoB,EACpB,MAAM,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n  ReactElement,\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  useRef,\n  useEffect\n} 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 from './ChatComposer';\nimport ChatHeader from './ChatHeader';\nimport SuggestedReplyPicker from './SuggestedReplyPicker';\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: ReactElement<typeof ChatHeader>;\n  /** Utility - This is used by utility container internally. It has predefined styles and visible conditionally based on utility prop is */\n  utility?: ReactNode;\n  /** Wrapper of message groups, system messages, type ahead */\n  body: ReactElement<typeof ChatBody>;\n  /** Wrapper of suggested replies */\n  suggestedReplyPicker?: ReactElement<typeof SuggestedReplyPicker>;\n  /** chat banner */\n  banner?: Pick<BannerProps, 'variant' | 'messages'>;\n  /** Wrapper of conversation input, emojis, attachments */\n  footer: ReactElement<typeof ChatComposer>;\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      }\n    }\n  } = props;\n  return css`\n    height: 100%;\n    background: ${primaryBackground};\n    width: 100%;\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, footer, utility, banner, suggestedReplyPicker, ...restProps } = props;\n\n    const utilityContentRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      utilityContentRef.current?.focus();\n    }, [utility]);\n\n    return (\n      <Flex\n        ref={ref}\n        as={StyledChatContainer}\n        container={{\n          direction: 'column'\n        }}\n        {...restProps}\n      >\n        {header}\n        <Flex\n          container={{\n            direction: 'column'\n          }}\n          as={StyledUtilityMerger}\n        >\n          {utility && (\n            <Flex\n              tabIndex={0}\n              as={StyledUtilityContainer}\n              container={{\n                direction: 'column'\n              }}\n            >\n              <StyledUtilityContent ref={utilityContentRef}>{utility}</StyledUtilityContent>\n            </Flex>\n          )}\n\n          {banner && <Banner variant={banner.variant} messages={banner.messages} />}\n          {body}\n        </Flex>\n        {suggestedReplyPicker}\n        {footer}\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,EACF,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;kBAEM,iBAAiB;;MAE7B,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      }\n    }\n  } = props;\n  return css`\n    height: 100%;\n    background: ${primaryBackground};\n    width: 100%;\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"]}

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

@@ -1,5 +1,6 @@
+import { ReactNode, Ref } from 'react';
 import { DefaultTheme } from 'styled-components';
-import { BaseProps, Action, NoChildrenProp, OmitStrict } from '@pega/cosmos-react-core';
+import { BaseProps, Action, NoChildrenProp, OmitStrict, LinkProps, AvatarProps } from '@pega/cosmos-react-core';
 export interface AttachmentItemProps extends BaseProps {
     /** Unique Id for this attachment */
     id: string;
@@ -31,4 +32,105 @@ export type ColorTheme = [
     keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>,
     'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark'
 ];
+export interface MediaPageLinks extends Pick<LinkProps, 'href'> {
+    /** Unique id for this push link */
+    id: string;
+    /** A string to be used as an image src for a thumbnail. */
+    thumbnail?: AttachmentItemProps['thumbnail'];
+    /** Additional information about the linked resource. */
+    title?: string;
+}
+export type MessageHeaderProps = {
+    /** message header content */
+    content?: ReactNode;
+    /** meta data */
+    meta?: ReactNode;
+};
+export interface MessageProps {
+    /** Message to be displayed */
+    message?: string;
+    /** Attachment list */
+    attachments?: AttachmentItemProps[];
+    /** Message page push links list */
+    mediaPageLinks?: MediaPageLinks[];
+    /** timestamp of the message(Formatted) */
+    timestamp?: string;
+    /** Incoming message/ outgoing message */
+    direction: 'in' | 'out';
+    /** Avatar information, can be image and name */
+    avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;
+    /** Message status */
+    status?: 'delivered' | 'opened' | 'undeliverable';
+    /** Indicates if this message is being currently typed */
+    typing?: boolean;
+    /** Message header */
+    messageHeader?: MessageHeaderProps;
+    /** Sender type */
+    senderType: 'customer' | 'agent' | 'bot';
+    /** Sender ID, will be helpful in deciding the colour */
+    senderId: string;
+    /** Number used to determine the color of agent's message */
+    agentVariant?: number;
+    /** ref to the message wrapper */
+    ref?: Ref<HTMLLIElement>;
+}
+export interface TypeIndicatorProps extends Pick<MessageProps, 'ref' | 'message' | 'senderId' | 'senderType' | 'agentVariant'> {
+    /** Avatar information, can be image and name */
+    avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;
+}
+export interface SystemMessageProps extends Pick<MessageProps, 'ref' | 'timestamp'> {
+    /** System message to be displayed */
+    message: string;
+    /** variant of this system message
+     * @default "secondary"
+     */
+    variant?: 'primary' | 'secondary';
+}
+export interface ChatBodyHandleValue {
+    isScrolledToLatest: () => boolean;
+    scrollToLatestMessage: () => void;
+    scrollToNewMessage: () => void;
+}
+export interface ChatBodyProps {
+    /** Transcripts */
+    transcripts: {
+        /** Unique id of a chat session */
+        id: string;
+        /** Messages in a chat session */
+        messages: ChatBodyListItemProps[];
+    }[];
+    /** Live chat messages */
+    liveChat: ChatBodyListItemProps[];
+    /** Total unread messages */
+    unreadMessageCount?: number;
+    /** on scroll to button */
+    onScrollToButtonClick?: () => void;
+    /** Indicates if the data is being currently loading */
+    loading?: boolean;
+    /** Offset of the row item that need to trigger the load more callback */
+    offset?: number;
+    /** Callback to fetch more rows */
+    loadMore?: () => void;
+    /** Imperative handle */
+    handle?: Ref<ChatBodyHandleValue>;
+    /** ref to the element */
+    ref?: Ref<HTMLDivElement>;
+}
+type MessageListItemProps = OmitStrict<MessageProps, 'agentVariant' | 'typing'> & {
+    type: 'message';
+    id: string;
+};
+type SystemMessageListItemProps = SystemMessageProps & {
+    type: 'system';
+    id: string;
+};
+type TypeIndicatorListItemPops = OmitStrict<TypeIndicatorProps, 'agentVariant'> & {
+    type: 'typing';
+    id: string;
+};
+export type ChatBodyListItemProps = MessageListItemProps | SystemMessageListItemProps | TypeIndicatorListItemPops;
+export declare const isMessageListItem: (message: ChatBodyListItemProps) => message is MessageListItemProps;
+export declare const isSystemMessageListItem: (message: ChatBodyListItemProps) => message is SystemMessageListItemProps;
+export declare const isTypeIndicatorListItem: (message: ChatBodyListItemProps) => message is TypeIndicatorListItemPops;
+export {};
 //# sourceMappingURL=Chat.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAExF,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6KAA6K;IAC7K,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,aAAa,GAAG,wBAAwB,CAAC;AAEtF,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY;CAC3D,CAAC"}
+{"version":3,"file":"Chat.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"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"}

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

@@ -1,2 +1,10 @@
-export {};
+export const isMessageListItem = (message) => {
+    return message.type === 'message';
+};
+export const isSystemMessageListItem = (message) => {
+    return message.type === 'system';
+};
+export const isTypeIndicatorListItem = (message) => {
+    return message.type === 'typing';
+};
 //# sourceMappingURL=Chat.types.js.map

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

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

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

@@ -1,12 +1,7 @@
-import { FunctionComponent, Ref, ReactElement } from 'react';
+import { FunctionComponent } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
-import MessageList from './MessageList';
-export interface ChatBodyProps {
-    /** ref to the element */
-    ref?: Ref<HTMLDivElement>;
-    /** Message data Array */
-    children: ReactElement<typeof MessageList>;
-}
+import { ChatBodyProps } from './Chat.types';
+export declare const NewMessageSeparatorId = "new-message-separator";
 declare const ChatBody: FunctionComponent<ChatBodyProps & ForwardProps>;
 export default ChatBody;
 //# sourceMappingURL=ChatBody.d.ts.map

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,EAAE,iBAAiB,EAA+B,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1F,OAAO,EAAQ,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,MAAM,WAAW,aAAa;IAC5B,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,yBAAyB;IACzB,QAAQ,EAAE,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;CAC5C;AAOD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAoB7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ChatBody.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAGL,aAAa,EAKd,MAAM,cAAc,CAAC;AAOtB,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAgH7D,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA6I7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/Chat/ChatBody.js

@@ -1,18 +1,164 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { Flex } from '@pega/cosmos-react-core';
-const StyledChatBodyContainer = styled.div `
-  position: relative;
-  overflow-y: hidden;
-`;
+import { createElement as _createElement } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, debounce, defaultThemeProp, Flex, Icon, Progress, registerIcon, StyledButton, useI18n, useItemIntersection } from '@pega/cosmos-react-core';
+import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
+import { isMessageListItem, isSystemMessageListItem, isTypeIndicatorListItem } from './Chat.types';
+import Message from './Message';
+import SystemMessage from './SystemMessage';
+import TypeIndicator from './TypeIndicator';
+registerIcon(caretDownIcon);
+export const NewMessageSeparatorId = 'new-message-separator';
+const StyledMessageList = styled.ul ``;
+const StyledSession = styled.div ``;
+const StyledChatBody = styled.div(props => {
+    const { theme: { base: { shadow: { high: shadowHigh }, colors: { white }, spacing, palette } } } = props;
+    return css `
+    position: relative;
+    overflow-y: hidden;
+
+    > ${StyledButton} {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      box-shadow: ${shadowHigh};
+      z-index: 1;
+      background-color: ${white};
+    }
+
+    > ${StyledMessageList} {
+      overflow-y: auto;
+      list-style-type: none;
+      height: 100%;
+
+      > ${StyledSession} {
+        padding-inline: 1rem;
+        :not(:last-child) {
+          border-block-end: 0.0625rem solid ${palette['border-line']};
+          margin-block-end: ${spacing};
+          padding-block-end: ${spacing};
+        }
+      }
+    }
+  `;
+});
+StyledChatBody.defaultProps = defaultThemeProp;
+const ScrollToLatest = props => {
+    const { scrollContainerRef } = props;
+    useLayoutEffect(() => {
+        if (scrollContainerRef.current) {
+            scrollContainerRef.current.scrollTop =
+                scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;
+        }
+    });
+    return _jsx(_Fragment, {});
+};
+const ChatMessage = ({ agentSerial, message }) => {
+    const getAgentVariant = (senderId, senderType, direction = 'in') => {
+        if (agentSerial.current === null)
+            return undefined;
+        if (senderType === 'agent' && direction === 'in') {
+            if (agentSerial.current[senderId] !== undefined) {
+                return agentSerial.current[senderId];
+            }
+            const nextIndex = Object.entries(agentSerial.current).length;
+            agentSerial.current[senderId] = nextIndex;
+            return nextIndex;
+        }
+        return undefined;
+    };
+    if (isMessageListItem(message)) {
+        const { id, senderType, direction, senderId } = message;
+        const agentVariant = getAgentVariant(senderId, senderType, direction);
+        return _createElement(Message, { ...message, key: id, agentVariant: agentVariant });
+    }
+    if (isSystemMessageListItem(message)) {
+        const extraProps = {};
+        const { id } = message;
+        if (id === NewMessageSeparatorId) {
+            extraProps['data-new-message-separator'] = NewMessageSeparatorId;
+        }
+        return _createElement(SystemMessage, { ...message, key: id, ...extraProps });
+    }
+    if (isTypeIndicatorListItem(message)) {
+        const { id, senderId, senderType } = message;
+        const agentVariant = getAgentVariant(senderId, senderType);
+        return _createElement(TypeIndicator, { ...message, key: id, agentVariant: agentVariant });
+    }
+    return null;
+};
 const ChatBody = forwardRef((props, ref) => {
-    const { children, ...restProps } = props;
-    return (_jsx(Flex, { as: StyledChatBodyContainer, item: {
-            grow: 1
-        }, container: {
-            direction: 'column'
-        }, ref: ref, ...restProps, children: children }));
+    const { transcripts, liveChat, unreadMessageCount = 0, onScrollToButtonClick, handle, loading, offset = -1, loadMore, ...restProps } = props;
+    const t = useI18n();
+    const conversationRef = useRef(null);
+    const scrollRef = useRef(false);
+    const agentSerial = useRef({});
+    const isScrolledToLatest = useCallback(() => {
+        return conversationRef.current
+            ? conversationRef.current.scrollHeight -
+                conversationRef.current.scrollTop -
+                conversationRef.current.offsetHeight <=
+                30
+            : true;
+    }, [conversationRef.current]);
+    const scrollToLatestMessage = useCallback(() => {
+        if (conversationRef.current) {
+            conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+        }
+    }, [conversationRef.current]);
+    const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);
+    const onMessageListScroll = useCallback(() => {
+        const isScrolled = isScrolledToLatest();
+        if (scrollRef.current && isScrolled) {
+            scrollRef.current = false;
+            if (unreadMessageCount) {
+                onScrollToButtonClick?.();
+            }
+        }
+        if (!scrollRef.current && !isScrolled) {
+            scrollRef.current = true;
+        }
+        setDisplayScrollToLatest(!isScrolled);
+    }, [isScrolledToLatest(), unreadMessageCount]);
+    const scrollToNewMessage = useCallback(() => {
+        if (conversationRef.current) {
+            setDisplayScrollToLatest(false);
+            const newMessageIndicatorEle = conversationRef.current.querySelector('[data-new-message-separator]');
+            if (newMessageIndicatorEle) {
+                conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;
+            }
+            else {
+                conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+            }
+        }
+    }, [conversationRef.current]);
+    useImperativeHandle(handle, () => ({
+        isScrolledToLatest,
+        scrollToLatestMessage,
+        scrollToNewMessage
+    }), [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]);
+    useItemIntersection(conversationRef, offset, () => {
+        loadMore?.();
+    }, ':scope > div > li');
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { ...restProps, as: StyledChatBody, item: {
+                    grow: 1
+                }, container: {
+                    direction: 'column'
+                }, ref: ref, children: [(unreadMessageCount > 0 || displayScrollLatest) && (_jsxs(Button, { "aria-label": unreadMessageCount > 0
+                            ? t('scroll_to_unread_messages')
+                            : t('scroll_to_latest_message'), onClick: () => {
+                            if (unreadMessageCount > 0) {
+                                scrollToNewMessage();
+                            }
+                            else {
+                                scrollToLatestMessage();
+                            }
+                            onScrollToButtonClick?.();
+                        }, icon: unreadMessageCount === 0, children: [_jsx(Icon, { name: 'caret-down' }), unreadMessageCount > 0 && _jsxs(_Fragment, { children: ["\u00A0 ", t('new_messages')] })] })), _jsxs(StyledMessageList, { ref: conversationRef, onScroll: debounce(onMessageListScroll, 100), children: [loading && _jsx(Progress, { as: 'li', placement: 'block' }), transcripts.map(session => {
+                                return (_jsx(StyledSession, { children: session.messages.map(message => (_jsx(ChatMessage, { message: message, agentSerial: agentSerial }, message.id))) }, session.id));
+                            }), _jsx(StyledSession, { children: liveChat.map(message => (_jsx(ChatMessage, { message: message, agentSerial: agentSerial }, message.id))) })] })] }), isScrolledToLatest() && _jsx(ScrollToLatest, { scrollContainerRef: conversationRef })] }));
 });
 export default ChatBody;
 //# sourceMappingURL=ChatBody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatBody.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAsC,MAAM,OAAO,CAAC;AAC1F,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAW7D,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGzC,CAAC;AAEF,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzC,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,EACD,GAAG,EAAE,GAAG,KACJ,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref, ReactElement } from 'react';\nimport styled from 'styled-components';\n\nimport { Flex, ForwardProps } from '@pega/cosmos-react-core';\n\nimport MessageList from './MessageList';\n\nexport interface ChatBodyProps {\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Message data Array */\n  children: ReactElement<typeof MessageList>;\n}\n\nconst StyledChatBodyContainer = styled.div`\n  position: relative;\n  overflow-y: hidden;\n`;\n\nconst ChatBody: FunctionComponent<ChatBodyProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ChatBodyProps>, ref: ChatBodyProps['ref']) => {\n    const { children, ...restProps } = props;\n\n    return (\n      <Flex\n        as={StyledChatBodyContainer}\n        item={{\n          grow: 1\n        }}\n        container={{\n          direction: 'column'\n        }}\n        ref={ref}\n        {...restProps}\n      >\n        {children}\n      </Flex>\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} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  debounce,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  Progress,\n  registerIcon,\n  StyledButton,\n  useI18n,\n  useItemIntersection\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 from './SystemMessage';\nimport TypeIndicator from './TypeIndicator';\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 },\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    }\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 <></>;\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 agentSerial = useRef<{ [agentId: string]: number }>({});\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      }\n    }, [conversationRef.current]);\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 (newMessageIndicatorEle) {\n          conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n        } else {\n          conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n        }\n      }\n    }, [conversationRef.current]);\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    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          {(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            >\n              <Icon name='caret-down' />\n              {unreadMessageCount > 0 && <>&nbsp; {t('new_messages')}</>}\n            </Button>\n          )}\n          <StyledMessageList ref={conversationRef} onScroll={debounce(onMessageListScroll, 100)}>\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        </Flex>\n        {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n      </>\n    );\n  }\n);\n\nexport default ChatBody;\n"]}

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

@@ -1,5 +1,5 @@
 import { FunctionComponent, Ref, MouseEvent } from 'react';
-import { ForwardProps, NoChildrenProp, SentimentProps, Action, FieldValueListItemProps } from '@pega/cosmos-react-core';
+import { ForwardProps, NoChildrenProp, SentimentProps, FieldValueListItemProps, MenuItemProps } from '@pega/cosmos-react-core';
 export interface ChatHeaderProps extends NoChildrenProp {
     /** ref to the element */
     ref?: Ref<HTMLElement>;
@@ -22,7 +22,7 @@ export interface ChatHeaderProps extends NoChildrenProp {
         items: FieldValueListItemProps[];
     };
     /** Used to show frequent user actions to be performed */
-    actions?: Action[];
+    actions?: MenuItemProps[];
 }
 declare const ChatHeader: FunctionComponent<ChatHeaderProps & ForwardProps>;
 export default ChatHeader;

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

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAmB,UAAU,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,EAKL,YAAY,EACZ,cAAc,EACd,cAAc,EAEd,MAAM,EACN,uBAAuB,EAQxB,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,iGAAiG;IACjG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB;IAChB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,6BAA6B;IAC7B,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACrD,KAAK,EAAE,uBAAuB,EAAE,CAAC;KAClC,CAAC;IACF,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AA2BD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA0FjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAmB,UAAU,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,EAKL,YAAY,EACZ,cAAc,EACd,cAAc,EAEd,uBAAuB,EAQvB,aAAa,EACd,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,iGAAiG;IACjG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB;IAChB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,6BAA6B;IAC7B,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACrD,KAAK,EAAE,uBAAuB,EAAE,CAAC;KAClC,CAAC;IACF,yDAAyD;IACzD,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;CAC3B;AA2BD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgGjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Chat/ChatHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Text, Flex, Icon, defaultThemeProp, Sentiment, Button, Actions, useElement, InfoDialog, FieldValueList, useI18n, registerIcon } from '@pega/cosmos-react-core';
+import { Text, Flex, Icon, defaultThemeProp, Sentiment, Button, useElement, InfoDialog, FieldValueList, useI18n, registerIcon, MenuButton } from '@pega/cosmos-react-core';
 import * as userCheckIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-check.icon';
 import * as userQuestionMarkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-question-mark.icon';
 registerIcon(userCheckIcon, userQuestionMarkIcon);
@@ -38,7 +38,7 @@ const ChatHeader = forwardRef((props, ref) => {
                 }, children: [context && (_jsx(Button, { variant: 'simple', onClick: (e) => {
                             context.onClick?.(e);
                             setTarget(e.currentTarget);
-                        }, children: t('context') })), _jsx(Actions, { items: actions })] }), target && context && (_jsx(StyledInfoDialog, { heading: t('chat_context'), target: target, onDismiss: () => setTarget(null), placement: 'bottom-end', progress: context.loading, children: _jsx(Flex, { as: StyledContextContainer, container: true, children: _jsx(FieldValueList, { fields: context.items }) }) }))] }));
+                        }, children: t('context') })), _jsx(MenuButton, { text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', menu: { items: actions } })] }), target && context && (_jsx(StyledInfoDialog, { heading: t('chat_context'), target: target, onDismiss: () => setTarget(null), placement: 'bottom-end', progress: context.loading, children: _jsx(Flex, { as: StyledContextContainer, container: true, children: _jsx(FieldValueList, { fields: context.items }) }) }))] }));
 });
 export default ChatHeader;
 //# sourceMappingURL=ChatHeader.js.map

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  Action,\n  FieldValueListItemProps,\n  Button,\n  Actions,\n  useElement,\n  InfoDialog,\n  FieldValueList,\n  useI18n,\n  registerIcon\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?: Action[];\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          <Actions items={actions} />\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  (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"]}