@pega/cosmos-react-social 4.0.0-dev.2.0 → 4.0.0-dev.20.0

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

@@ -1,10 +1,10 @@
-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';
-export declare type ChatBannerProps = {
+import { ChatComposerProps } from './ChatComposer';
+import { ChatHeaderProps } from './ChatHeader';
+import { SuggestedReplyPickerProps } from './SuggestedReplyPicker';
+import { ChatBodyProps } from './Chat.types';
+export type ChatBannerProps = {
     /** Content */
     content: string;
     /** Name of the icon */
@@ -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?: BannerProps;
+    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,oBAAY,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,WAAW,CAAC;IACrB,yDAAyD;IACzD,MAAM,EAAE,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;CAC3C;AA8DD,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAqDrD,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,CAqBrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Chat/Chat.js

@@ -1,17 +1,22 @@
 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 ``;
 const StyledChatContainer = styled.section(props => {
-    const { theme: { base: { spacing, shadow: { high: shadowHigh }, palette: { 'primary-background': primaryBackground, 'secondary-background': secondaryBackground } } } } = props;
+    const { theme: { base: { spacing, shadow: { high: shadowHigh }, palette: { 'primary-background': primaryBackground, 'secondary-background': secondaryBackground }, 'border-radius': borderRadius } } } = props;
     return css `
     height: 100%;
     background: ${primaryBackground};
     width: 100%;
+    border-radius: ${borderRadius};
     ${StyledUtilityMerger} {
       min-height: 15rem;
       position: relative;
@@ -50,18 +55,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, { id: banner.id, variant: banner.variant, heading: banner.heading, 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,CACT,KAAC,MAAM,IACL,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,GACzB,CACH,EACA,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?: BannerProps;\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 && (\n            <Banner\n              id={banner.id}\n              variant={banner.variant}\n              heading={banner.heading}\n              messages={banner.messages}\n            />\n          )}\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,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"]}

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

@@ -1,4 +1,6 @@
-import { BaseProps, Action } from '@pega/cosmos-react-core';
+import { ReactNode, Ref } from 'react';
+import { DefaultTheme } from 'styled-components';
+import { BaseProps, Action, NoChildrenProp, OmitStrict, LinkProps, AvatarProps } from '@pega/cosmos-react-core';
 export interface AttachmentItemProps extends BaseProps {
     /** Unique Id for this attachment */
     id: string;
@@ -6,7 +8,7 @@ export interface AttachmentItemProps extends BaseProps {
     name: string;
     /**
      * A Cosmos icon name identifier to use for a attachment. Will serve as a fallback to a broken thumbnail.
-     * @default "document-doc"
+     * @default 'document-doc'
      */
     icon?: string;
     /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */
@@ -20,4 +22,115 @@ export interface AttachmentItemProps extends BaseProps {
     /** When passed, this will render a single icon button or within a MenuButton if onDelete is defined. */
     onDelete?: (id: string) => void;
 }
+export type UserAvailability = 'available' | 'unavailable' | 'temporarilyUnavailable';
+export interface ChatSettingsPanelProps extends NoChildrenProp {
+    status?: UserAvailability;
+    label: string;
+    onClick: () => void;
+}
+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' | 'sent';
+    /** 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,SAAS,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAE5D,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"}
+{"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 { BaseProps, Action } 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"]}
+{"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' | 'sent';\n  /** Indicates if this message is being currently typed */\n  typing?: boolean;\n  /** Message header */\n  messageHeader?: MessageHeaderProps;\n  /** Sender type */\n  senderType: 'customer' | 'agent' | 'bot';\n  /** Sender ID, will be helpful in deciding the colour */\n  senderId: string;\n  /** Number used to determine the color of agent's message */\n  agentVariant?: number;\n  /** ref to the message wrapper */\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport interface TypeIndicatorProps\n  extends Pick<MessageProps, 'ref' | 'message' | 'senderId' | 'senderType' | 'agentVariant'> {\n  /** Avatar information, can be image and name */\n  avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;\n}\n\nexport interface SystemMessageProps extends Pick<MessageProps, 'ref' | 'timestamp'> {\n  /** System message to be displayed */\n  message: string;\n  /** variant of this system message\n   * @default 'secondary'\n   */\n  variant?: 'primary' | 'secondary';\n}\n\nexport interface ChatBodyHandleValue {\n  isScrolledToLatest: () => boolean;\n  scrollToLatestMessage: () => void;\n  scrollToNewMessage: () => void;\n}\n\nexport interface ChatBodyProps {\n  /** Transcripts */\n  transcripts: {\n    /** Unique id of a chat session */\n    id: string;\n    /** Messages in a chat session */\n    messages: ChatBodyListItemProps[];\n  }[];\n  /** Live chat messages */\n  liveChat: ChatBodyListItemProps[];\n  /** Total unread messages */\n  unreadMessageCount?: number;\n  /** on scroll to button */\n  onScrollToButtonClick?: () => void;\n  /** Indicates if the data is being currently loading */\n  loading?: boolean;\n  /** Offset of the row item that need to trigger the load more callback */\n  offset?: number;\n  /** Callback to fetch more rows */\n  loadMore?: () => void;\n  /** Imperative handle */\n  handle?: Ref<ChatBodyHandleValue>;\n  /** ref to the element */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype MessageListItemProps = OmitStrict<MessageProps, 'agentVariant' | 'typing'> & {\n  type: 'message';\n  id: string;\n};\n\ntype SystemMessageListItemProps = SystemMessageProps & { type: 'system'; id: string };\n\ntype TypeIndicatorListItemPops = OmitStrict<TypeIndicatorProps, 'agentVariant'> & {\n  type: 'typing';\n  id: string;\n};\n\nexport type ChatBodyListItemProps =\n  | MessageListItemProps\n  | SystemMessageListItemProps\n  | TypeIndicatorListItemPops;\n\nexport const isMessageListItem = (\n  message: ChatBodyListItemProps\n): message is MessageListItemProps => {\n  return message.type === 'message';\n};\n\nexport const isSystemMessageListItem = (\n  message: ChatBodyListItemProps\n): message is SystemMessageListItemProps => {\n  return message.type === 'system';\n};\n\nexport const isTypeIndicatorListItem = (\n  message: ChatBodyListItemProps\n): message is TypeIndicatorListItemPops => {\n  return message.type === 'typing';\n};\n"]}

package/lib/components/Chat/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,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"}

package/lib/components/Chat/ChatBody.js

@@ -1,18 +1,292 @@
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useRef, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, debounce, defaultThemeProp, Flex, getFocusables, Icon, Progress, registerIcon, StyledButton, useAfterInitialEffect, useArrows, useI18n, useItemIntersection, useLiveLog, useOuterEvent } 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, { StyledSystemMessage } from './SystemMessage';
+import TypeIndicator from './TypeIndicator';
+import { StyledMessageContainer } from './Message.styles';
+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, focus }, 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};
+        }
+      }
+      ${StyledMessageContainer}, ${StyledSystemMessage} {
+        &:focus-visible {
+          box-shadow: ${focus};
+          outline: none;
+        }
+        margin-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 null;
+};
+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 buttonRef = useRef(null);
+    const focusInMessageList = useRef(false);
+    const initialMessageListFocused = useRef(false);
+    const elementRef = useRef(null);
+    const activeElementIndex = useRef(-1);
+    const agentSerial = useRef({});
+    const [messageList, setMessageList] = useState([]);
+    const [verticalNav, setVerticalNav] = useState(true);
+    const { announcePolite } = useLiveLog();
+    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;
+            focusInMessageList.current = true;
+            messageList[messageList.length - 1]?.focus();
+            activeElementIndex.current = messageList.length - 1;
+        }
+    }, [conversationRef.current, messageList]);
+    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 &&
+                newMessageIndicatorEle.nextElementSibling instanceof HTMLElement) {
+                conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;
+                focusInMessageList.current = true;
+                newMessageIndicatorEle.nextElementSibling.focus();
+                activeElementIndex.current =
+                    messageList.findIndex(item => item?.hasAttribute('data-new-message-separator')) + 1;
+            }
+            else {
+                scrollToLatestMessage();
+            }
+        }
+    }, [conversationRef.current, messageList]);
+    useImperativeHandle(handle, () => ({
+        isScrolledToLatest,
+        scrollToLatestMessage,
+        scrollToNewMessage
+    }), [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]);
+    useItemIntersection(conversationRef, offset, () => {
+        loadMore?.();
+    }, ':scope > div > li');
+    useEffect(() => {
+        const focusableElements = conversationRef.current?.querySelectorAll('li[type="system"],li[type="message"],li[type="typing"]');
+        if (focusableElements)
+            setMessageList(Array.from(focusableElements));
+        if (focusableElements && initialMessageListFocused.current === false) {
+            activeElementIndex.current = focusableElements.length - 1;
+        }
+    }, [transcripts, liveChat]);
+    useEffect(() => {
+        elementRef.current = messageList[activeElementIndex.current];
+        if (verticalNav) {
+            elementRef.current?.focus();
+        }
+        else {
+            getFocusables(elementRef)[0]?.focus();
+        }
+    }, [verticalNav]);
+    useArrows(conversationRef, {
+        cycle: true,
+        selector: ':scope > div > li',
+        dir: 'up-down',
+        allowTabFocus: true
+    }, [transcripts, liveChat]);
+    useArrows(elementRef, {
+        cycle: true,
+        selector: 'a, button, input, textarea, select, details',
+        dir: 'left-right',
+        allowTabFocus: true
+    }, [transcripts, liveChat, verticalNav]);
+    const focusSiblingElement = (currentElement, isShiftKey = false) => {
+        elementRef.current = currentElement;
+        const focusableElements = getFocusables(elementRef);
+        if (focusableElements?.length > 0) {
+            focusableElements?.[isShiftKey ? focusableElements.length - 1 : 0].focus();
+        }
+        else {
+            const element = isShiftKey
+                ? elementRef.current?.previousElementSibling
+                : elementRef.current?.nextElementSibling;
+            if (element)
+                focusSiblingElement(element, isShiftKey);
+        }
+    };
+    useOuterEvent('mousedown', [conversationRef], () => {
+        focusInMessageList.current = false;
+    });
+    useAfterInitialEffect(() => {
+        if (liveChat?.length > 0) {
+            const unreadMessage = liveChat[liveChat.length - 1];
+            if (isSystemMessageListItem(unreadMessage) ||
+                (isMessageListItem(unreadMessage) && unreadMessage.direction === 'in')) {
+                announcePolite({
+                    message: t('new_message'),
+                    type: 'alert'
+                });
+            }
+        }
+    }, [liveChat]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { ...restProps, as: StyledChatBody, item: {
+                    grow: 1
+                }, container: {
+                    direction: 'column'
+                }, ref: ref, children: [_jsxs(StyledMessageList, { ref: conversationRef, onScroll: debounce(onMessageListScroll, 100), onFocus: () => {
+                            if (!focusInMessageList.current) {
+                                initialMessageListFocused.current = true;
+                                elementRef.current = messageList[activeElementIndex.current];
+                                elementRef.current?.focus();
+                                focusInMessageList.current = true;
+                            }
+                        }, onKeyDown: e => {
+                            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                                elementRef.current = messageList[activeElementIndex.current];
+                                if (getFocusables(elementRef).length > 0) {
+                                    setVerticalNav(false);
+                                }
+                            }
+                            else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                                if (e.key === 'ArrowUp') {
+                                    activeElementIndex.current =
+                                        activeElementIndex.current === 0
+                                            ? messageList.length - 1
+                                            : activeElementIndex.current - 1;
+                                }
+                                else {
+                                    activeElementIndex.current =
+                                        activeElementIndex.current === messageList.length - 1
+                                            ? 0
+                                            : activeElementIndex.current + 1;
+                                }
+                                setVerticalNav(true);
+                            }
+                            else if (e.key === 'Tab') {
+                                e.preventDefault();
+                                focusInMessageList.current = false;
+                                if (e.shiftKey) {
+                                    const prevElement = conversationRef?.current?.parentElement?.previousElementSibling;
+                                    if (prevElement)
+                                        focusSiblingElement(prevElement, true);
+                                }
+                                else if (unreadMessageCount > 0 || displayScrollLatest) {
+                                    buttonRef?.current?.focus();
+                                }
+                                else {
+                                    const nextElement = conversationRef.current?.parentElement?.nextElementSibling;
+                                    if (nextElement)
+                                        focusSiblingElement(nextElement);
+                                }
+                            }
+                        }, 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))) })] }), (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, ref: buttonRef, children: [_jsx(Icon, { name: 'caret-down' }), unreadMessageCount > 0 && _jsxs(_Fragment, { children: ["\u00A0 ", t('new_messages')] })] }))] }), isScrolledToLatest() && _jsx(ScrollToLatest, { scrollContainerRef: conversationRef })] }));
 });
 export default ChatBody;
 //# sourceMappingURL=ChatBody.js.map