@pega/cosmos-react-social 4.0.0-dev.9.1 → 4.0.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?: 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,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;AAgED,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAsBpD,CAAC;AAEH,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;
@@ -49,19 +54,11 @@ 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 Chat = forwardRef(function Chat(props, ref) {
+    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,EACD,eAAe,EAAE,YAAY,EAC9B,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;kBAEM,iBAAiB;;qBAEd,YAAY;MAC3B,mBAAmB;;;;;;MAMnB,sBAAsB;;;;;;;0BAOF,mBAAmB;UACnC,oBAAoB;mBACX,OAAO;sBACJ,UAAU;;;;sCAIM,mBAAmB;oDACL,mBAAmB;;;;;;;;MAQjE,YAAY;0BACQ,OAAO;;;;GAI9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,IAAI,GAAgD,UAAU,CAAC,SAAS,IAAI,CAChF,KAAiC,EACjC,GAAqB;IAErB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAErF,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,KACG,SAAS,aAEb,KAAC,UAAU,OAAK,MAAM,GAAI,EACzB,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,GAAI,EACzE,KAAC,QAAQ,OAAK,IAAI,GAAI,EACrB,oBAAoB,IAAI,KAAC,oBAAoB,OAAK,oBAAoB,GAAI,EAC3E,KAAC,YAAY,OAAK,QAAQ,GAAI,IACzB,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Banner,\n  BannerProps,\n  defaultThemeProp,\n  ForwardProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner';\n\nimport ChatBody from './ChatBody';\nimport ChatComposer, { ChatComposerProps } from './ChatComposer';\nimport ChatHeader, { ChatHeaderProps } from './ChatHeader';\nimport SuggestedReplyPicker, { SuggestedReplyPickerProps } from './SuggestedReplyPicker';\nimport { ChatBodyProps } from './Chat.types';\n\nexport type ChatBannerProps = {\n  /** Content */\n  content: string;\n  /** Name of the icon */\n  icon: string;\n};\n\nexport interface ChatProps extends NoChildrenProp {\n  /** ref to the element */\n  ref?: Ref<HTMLElement>;\n  /** Header of conversation pane */\n  header: ChatHeaderProps;\n  /** Wrapper of message groups, system messages, type ahead */\n  body: ChatBodyProps;\n  /** Wrapper of suggested replies */\n  suggestedReplyPicker?: SuggestedReplyPickerProps;\n  /** chat banner */\n  banner?: Pick<BannerProps, 'variant' | 'messages'>;\n  /** Wrapper of conversation input, emojis, attachments */\n  composer: ChatComposerProps;\n}\n\nconst StyledUtilityContainer = styled.div``;\nconst StyledUtilityMerger = styled.div``;\nconst StyledUtilityContent = styled.div``;\n\nconst StyledChatContainer = styled.section(props => {\n  const {\n    theme: {\n      base: {\n        spacing,\n        shadow: { high: shadowHigh },\n        palette: {\n          'primary-background': primaryBackground,\n          'secondary-background': secondaryBackground\n        },\n        'border-radius': borderRadius\n      }\n    }\n  } = props;\n  return css`\n    height: 100%;\n    background: ${primaryBackground};\n    width: 100%;\n    border-radius: ${borderRadius};\n    ${StyledUtilityMerger} {\n      min-height: 15rem;\n      position: relative;\n      height: 100%;\n      overflow-y: hidden;\n    }\n    ${StyledUtilityContainer} {\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 2;\n      max-height: 60%;\n      width: 100%;\n      background-color: ${secondaryBackground};\n      > ${StyledUtilityContent} {\n        padding: ${spacing} 0;\n        box-shadow: ${shadowHigh};\n        height: auto;\n        width: 100%;\n        overflow-y: auto;\n        background: linear-gradient(${secondaryBackground} 10%, rgba(255, 255, 255, 0)),\n          linear-gradient(rgba(255, 255, 255, 0), ${secondaryBackground} 10%) 0 100%,\n          radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),\n          radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;\n        background-repeat: no-repeat;\n        background-size: 100% 1rem, 100% 1rem, 100% 0.25rem, 100% 0.25rem;\n        background-attachment: local, local, scroll, scroll;\n      }\n    }\n    ${StyledBanner} {\n      padding: calc(2 * ${spacing});\n      margin-bottom: 0;\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledChatContainer.defaultProps = defaultThemeProp;\n\nconst Chat: FunctionComponent<ChatProps & ForwardProps> = forwardRef(function Chat(\n  props: PropsWithoutRef<ChatProps>,\n  ref: ChatProps['ref']\n) {\n  const { header, body, composer, banner, suggestedReplyPicker, ...restProps } = props;\n\n  return (\n    <Flex\n      ref={ref}\n      as={StyledChatContainer}\n      container={{\n        direction: 'column'\n      }}\n      {...restProps}\n    >\n      <ChatHeader {...header} />\n      {banner && <Banner variant={banner.variant} messages={banner.messages} />}\n      <ChatBody {...body} />\n      {suggestedReplyPicker && <SuggestedReplyPicker {...suggestedReplyPicker} />}\n      <ChatComposer {...composer} />\n    </Flex>\n  );\n});\n\nexport default Chat;\n"]}

package/lib/components/Chat/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;
@@ -7,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. */
@@ -21,14 +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 declare type UserAvailability = 'available' | 'unavailable' | 'temporarilyUnavailable';
+export type UserAvailability = 'available' | 'unavailable' | 'temporarilyUnavailable';
 export interface ChatSettingsPanelProps extends NoChildrenProp {
     status?: UserAvailability;
     label: string;
     onClick: () => void;
 }
-export declare type ColorTheme = [
+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,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,oBAAY,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,oBAAY,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' | '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,CA2R5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}