@pega/cosmos-react-social 5.0.0-dev.4.9 → 5.0.0-dev.6.0

package/lib/components/Autopilot/Autopilot.d.ts

@@ -0,0 +1,15 @@
+import type { FunctionComponent, ReactElement } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+interface AutopilotProps {
+    children: Record<string, string> | ReactElement;
+}
+declare const Autopilot: FunctionComponent<AutopilotProps & ForwardProps>;
+export declare const AutopilotConfig: {
+    type: string;
+    xmlElement: string;
+    regexPattern: RegExp;
+    component: FunctionComponent<AutopilotProps & ForwardProps>;
+    inject: () => string;
+};
+export default Autopilot;
+//# sourceMappingURL=Autopilot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Autopilot.d.ts","sourceRoot":"","sources":["../../../src/components/Autopilot/Autopilot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,YAAY,EAAmB,MAAM,OAAO,CAAC;AAU/F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,UAAU,cAAc;IACtB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC;CACjD;AAsBD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAoC9D,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;CAS3B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/Autopilot/Autopilot.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, isValidElement, useContext, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, Icon, defaultThemeProp, useConsolidatedRef, useElement } from '@pega/cosmos-react-core';
+import { FeedContext } from '../Feed/Feed.context';
+const StyledAutopilotButton = styled(Button)(({ theme }) => {
+    return css `
+    color: ${theme.base.palette.ai};
+
+    &:enabled:focus,
+    &:not([disabled]):focus {
+      box-shadow: none;
+      text-decoration: underline;
+    }
+
+    svg {
+      margin-inline-end: calc(0.5 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledAutopilotButton.defaultProps = defaultThemeProp;
+const serializer = new XMLSerializer();
+const Autopilot = forwardRef(function Autopilot({ children, ...restProps }, ref) {
+    const { autopilotInfo: { label: autopilotLabel }, onAutopilotClick } = useContext(FeedContext);
+    const [autopilotContent, setAutopilotContent] = useState();
+    const [target, setTarget] = useElement(null);
+    const mentionRef = useConsolidatedRef(ref);
+    const handleClick = (e) => {
+        setTarget(e.currentTarget);
+        const comp = onAutopilotClick?.({
+            target: e.currentTarget,
+            onDismiss: () => setTarget(null)
+        });
+        if (comp)
+            setAutopilotContent(comp);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledAutopilotButton, { ...restProps, ref: mentionRef, variant: 'link', onClick: handleClick, spellCheck: false, children: [_jsx(Icon, { name: 'polaris-solid' }), isValidElement(children) ? children : autopilotLabel] }), target && autopilotContent] }));
+});
+export const AutopilotConfig = {
+    type: 'autopilot',
+    xmlElement: 'pega-autopilot',
+    regexPattern: /(?:^|)<pega-autopilot\/>/g,
+    component: Autopilot,
+    inject: () => {
+        const element = document.createElementNS(null, 'pega-autopilot');
+        return serializer.serializeToString(element);
+    }
+};
+export default Autopilot;
+//# sourceMappingURL=Autopilot.js.map

package/lib/components/Autopilot/Autopilot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autopilot.js","sourceRoot":"","sources":["../../../src/components/Autopilot/Autopilot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMnD,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;;;;;;;;;sCASI,KAAK,CAAC,IAAI,CAAC,OAAO;;GAErD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;AAEvC,MAAM,SAAS,GAAqD,UAAU,CAAC,SAAS,SAAS,CAC/F,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAmC,EAC3D,GAA2B;IAE3B,MAAM,EACJ,aAAa,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EACxC,gBAAgB,EACjB,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAA2B,CAAC;IACpF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,CAAoB,IAAI,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE3C,MAAM,WAAW,GAAG,CAAC,CAAgC,EAAE,EAAE;QACvD,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;QAC3B,MAAM,IAAI,GAAG,gBAAgB,EAAE,CAAC;YAC9B,MAAM,EAAE,CAAC,CAAC,aAAa;YACvB,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;SACjC,CAAC,CAAC;QACH,IAAI,IAAI;YAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,qBAAqB,OAChB,SAAS,EACb,GAAG,EAAE,UAAU,EACf,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,KAAK,aAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,EAC5B,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAC/B,EACvB,MAAM,IAAI,gBAAgB,IAC1B,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE,gBAAgB;IAC5B,YAAY,EAAE,2BAA2B;IACzC,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;QACjE,OAAO,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC;CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { forwardRef, isValidElement, useContext, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactElement, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Icon,\n  defaultThemeProp,\n  useConsolidatedRef,\n  useElement\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface AutopilotProps {\n  children: Record<string, string> | ReactElement;\n}\n\nconst StyledAutopilotButton = styled(Button)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.ai};\n\n    &:enabled:focus,\n    &:not([disabled]):focus {\n      box-shadow: none;\n      text-decoration: underline;\n    }\n\n    svg {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledAutopilotButton.defaultProps = defaultThemeProp;\n\nconst serializer = new XMLSerializer();\n\nconst Autopilot: FunctionComponent<AutopilotProps & ForwardProps> = forwardRef(function Autopilot(\n  { children, ...restProps }: PropsWithoutRef<AutopilotProps>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const {\n    autopilotInfo: { label: autopilotLabel },\n    onAutopilotClick\n  } = useContext(FeedContext);\n  const [autopilotContent, setAutopilotContent] = useState<JSX.Element | undefined>();\n  const [target, setTarget] = useElement<HTMLButtonElement>(null);\n  const mentionRef = useConsolidatedRef(ref);\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    setTarget(e.currentTarget);\n    const comp = onAutopilotClick?.({\n      target: e.currentTarget,\n      onDismiss: () => setTarget(null)\n    });\n    if (comp) setAutopilotContent(comp);\n  };\n\n  return (\n    <>\n      <StyledAutopilotButton\n        {...restProps}\n        ref={mentionRef}\n        variant='link'\n        onClick={handleClick}\n        spellCheck={false}\n      >\n        <Icon name='polaris-solid' />\n        {isValidElement(children) ? children : autopilotLabel}\n      </StyledAutopilotButton>\n      {target && autopilotContent}\n    </>\n  );\n});\n\nexport const AutopilotConfig = {\n  type: 'autopilot',\n  xmlElement: 'pega-autopilot',\n  regexPattern: /(?:^|)<pega-autopilot\\/>/g,\n  component: Autopilot,\n  inject: () => {\n    const element = document.createElementNS(null, 'pega-autopilot');\n    return serializer.serializeToString(element);\n  }\n};\n\nexport default Autopilot;\n"]}

package/lib/components/Autopilot/AutopilotAvatar.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react';
+import type { SubComponentVariant } from '../Feed/Feed.types';
+interface AutopilotAvatarProps {
+    variant?: SubComponentVariant['variant'];
+}
+declare const AutopilotAvatar: FunctionComponent<AutopilotAvatarProps>;
+export default AutopilotAvatar;
+//# sourceMappingURL=AutopilotAvatar.d.ts.map

package/lib/components/Autopilot/AutopilotAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutopilotAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/Autopilot/AutopilotAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CAC1C;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAkB5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Autopilot/AutopilotAvatar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { Avatar, useTheme } from '@pega/cosmos-react-core';
+import { FeedContext } from '../Feed/Feed.context';
+const AutopilotAvatar = ({ variant }) => {
+    const { autopilotInfo: { label: autopilotLabel } } = useContext(FeedContext);
+    const theme = useTheme();
+    let size = 'm';
+    if (variant === 'post')
+        size = 'l';
+    return (_jsx(Avatar, { name: autopilotLabel, icon: 'polaris-solid', size: size, color: theme.base.palette.light, backgroundColor: theme.base.palette.ai }));
+};
+export default AutopilotAvatar;
+//# sourceMappingURL=AutopilotAvatar.js.map

package/lib/components/Autopilot/AutopilotAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutopilotAvatar.js","sourceRoot":"","sources":["../../../src/components/Autopilot/AutopilotAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMnD,MAAM,eAAe,GAA4C,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC/E,MAAM,EACJ,aAAa,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EACzC,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC5B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,IAAI,IAAI,GAAwB,GAAG,CAAC;IACpC,IAAI,OAAO,KAAK,MAAM;QAAE,IAAI,GAAG,GAAG,CAAC;IAEnC,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAE,cAAc,EACpB,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAC/B,eAAe,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,GACtC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { useContext } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport { Avatar, useTheme } from '@pega/cosmos-react-core';\nimport type { AvatarProps } from '@pega/cosmos-react-core';\n\nimport type { SubComponentVariant } from '../Feed/Feed.types';\nimport { FeedContext } from '../Feed/Feed.context';\n\ninterface AutopilotAvatarProps {\n  variant?: SubComponentVariant['variant'];\n}\n\nconst AutopilotAvatar: FunctionComponent<AutopilotAvatarProps> = ({ variant }) => {\n  const {\n    autopilotInfo: { label: autopilotLabel }\n  } = useContext(FeedContext);\n  const theme = useTheme();\n\n  let size: AvatarProps['size'] = 'm';\n  if (variant === 'post') size = 'l';\n\n  return (\n    <Avatar\n      name={autopilotLabel}\n      icon='polaris-solid'\n      size={size}\n      color={theme.base.palette.light}\n      backgroundColor={theme.base.palette.ai}\n    />\n  );\n};\n\nexport default AutopilotAvatar;\n"]}

package/lib/components/Autopilot/AutopilotGlimpse.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'react';
+import type { BaseProps, InfoDialogProps, NoChildrenProp, OmitStrict, WithAttributes } from '@pega/cosmos-react-core';
+export type AutopilotGlimpseProps = WithAttributes<'div', BaseProps & OmitStrict<InfoDialogProps, 'children' | 'progress'> & NoChildrenProp & {
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}>;
+declare const _default: import("react").ForwardRefExoticComponent<Omit<AutopilotGlimpseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;
+//# sourceMappingURL=AutopilotGlimpse.d.ts.map

package/lib/components/Autopilot/AutopilotGlimpse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutopilotGlimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Autopilot/AutopilotGlimpse.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EACV,SAAS,EAET,eAAe,EACf,cAAc,EACd,UAAU,EACV,cAAc,EACf,MAAM,yBAAyB,CAAC;AAQjC,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAChD,KAAK,EACL,SAAS,GACP,UAAU,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,CAAC,GACpD,cAAc,GAAG;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,CACJ,CAAC;;AAaF,wBA0BG"}

package/lib/components/Autopilot/AutopilotGlimpse.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, InfoDialog } from '@pega/cosmos-react-core';
+import { RichTextViewer } from '@pega/cosmos-react-rte';
+import { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/RichTextEditor.styles';
+import { FeedContext } from '../Feed/Feed.context';
+import AutopilotAvatar from './AutopilotAvatar';
+const StyledInfoDialog = styled(InfoDialog)(({ theme }) => {
+    return css `
+    ${StyledEditorContainer} {
+      padding: 0;
+      max-width: min(${theme.base['content-width'].sm}, calc(100vw - 2rem));
+    }
+  `;
+});
+StyledInfoDialog.defaultProps = defaultThemeProp;
+export default forwardRef(function AutopilotGlimpse({ target, onDismiss, ...restProps }, ref) {
+    const { autopilotInfo } = useContext(FeedContext);
+    return (_jsx(StyledInfoDialog, { ...restProps, target: target, heading: {
+            primary: autopilotInfo.label,
+            secondary: autopilotInfo.meta,
+            visual: _jsx(AutopilotAvatar, {})
+        }, onDismiss: onDismiss, ref: ref, children: autopilotInfo.description && (_jsx(RichTextViewer, { type: 'markdown', content: autopilotInfo.description })) }));
+});
+//# sourceMappingURL=AutopilotGlimpse.js.map

package/lib/components/Autopilot/AutopilotGlimpse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutopilotGlimpse.js","sourceRoot":"","sources":["../../../src/components/Autopilot/AutopilotGlimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AASvE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4EAA4E,CAAC;AAEnH,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAYhD,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;MACN,qBAAqB;;uBAEJ,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,eAAe,UAAU,CAGvB,SAAS,gBAAgB,CACzB,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAA0C,EAC3E,GAAiC;IAEjC,MAAM,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAElD,OAAO,CACL,KAAC,gBAAgB,OACX,SAAS,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;YACP,OAAO,EAAE,aAAa,CAAC,KAAK;YAC5B,SAAS,EAAE,aAAa,CAAC,IAAI;YAC7B,MAAM,EAAE,KAAC,eAAe,KAAG;SAC5B,EACD,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,aAAa,CAAC,WAAW,IAAI,CAC5B,KAAC,cAAc,IAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,aAAa,CAAC,WAAW,GAAI,CACvE,GACgB,CACpB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, InfoDialog } from '@pega/cosmos-react-core';\nimport type {\n  BaseProps,\n  RefElement,\n  InfoDialogProps,\n  NoChildrenProp,\n  OmitStrict,\n  WithAttributes\n} from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { StyledEditorContainer } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/RichTextEditor.styles';\n\nimport { FeedContext } from '../Feed/Feed.context';\n\nimport AutopilotAvatar from './AutopilotAvatar';\n\nexport type AutopilotGlimpseProps = WithAttributes<\n  'div',\n  BaseProps &\n    OmitStrict<InfoDialogProps, 'children' | 'progress'> &\n    NoChildrenProp & {\n      /** Ref for the wrapping element. */\n      ref?: Ref<HTMLDivElement>;\n    }\n>;\n\nconst StyledInfoDialog = styled(InfoDialog)(({ theme }) => {\n  return css`\n    ${StyledEditorContainer} {\n      padding: 0;\n      max-width: min(${theme.base['content-width'].sm}, calc(100vw - 2rem));\n    }\n  `;\n});\n\nStyledInfoDialog.defaultProps = defaultThemeProp;\n\nexport default forwardRef<\n  RefElement<AutopilotGlimpseProps>,\n  PropsWithoutRef<AutopilotGlimpseProps>\n>(function AutopilotGlimpse(\n  { target, onDismiss, ...restProps }: PropsWithoutRef<AutopilotGlimpseProps>,\n  ref: AutopilotGlimpseProps['ref']\n) {\n  const { autopilotInfo } = useContext(FeedContext);\n\n  return (\n    <StyledInfoDialog\n      {...restProps}\n      target={target}\n      heading={{\n        primary: autopilotInfo.label,\n        secondary: autopilotInfo.meta,\n        visual: <AutopilotAvatar />\n      }}\n      onDismiss={onDismiss}\n      ref={ref}\n    >\n      {autopilotInfo.description && (\n        <RichTextViewer type='markdown' content={autopilotInfo.description} />\n      )}\n    </StyledInfoDialog>\n  );\n});\n"]}

package/lib/components/Autopilot/index.d.ts

@@ -0,0 +1,4 @@
+export { AutopilotConfig } from './Autopilot';
+export { default as AutopilotGlimpse } from './AutopilotGlimpse';
+export type { AutopilotGlimpseProps } from './AutopilotGlimpse';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Autopilot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Autopilot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/components/Autopilot/index.js

@@ -0,0 +1,3 @@
+export { AutopilotConfig } from './Autopilot';
+export { default as AutopilotGlimpse } from './AutopilotGlimpse';
+//# sourceMappingURL=index.js.map

package/lib/components/Autopilot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Autopilot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { AutopilotConfig } from './Autopilot';\nexport { default as AutopilotGlimpse } from './AutopilotGlimpse';\nexport type { AutopilotGlimpseProps } from './AutopilotGlimpse';\n"]}

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

@@ -0,0 +1,29 @@
+import type { FunctionComponent, Ref } from 'react';
+import type { BannerProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { ChatComposerProps } from './ChatComposer';
+import type { ChatHeaderProps } from './ChatHeader';
+import type { SuggestedReplyPickerProps } from './SuggestedReplyPicker';
+import type { ChatBodyProps } from './Chat.types';
+export type ChatBannerProps = {
+    /** Content */
+    content: string;
+    /** Name of the icon */
+    icon: string;
+};
+export interface ChatProps extends NoChildrenProp {
+    /** ref to the element */
+    ref?: Ref<HTMLElement>;
+    /** Header of conversation pane */
+    header: ChatHeaderProps;
+    /** Wrapper of message groups, system messages, type ahead */
+    body: ChatBodyProps;
+    /** Wrapper of suggested replies */
+    suggestedReplyPicker?: SuggestedReplyPickerProps;
+    /** chat banner */
+    banner?: Pick<BannerProps, 'variant' | 'messages'>;
+    /** Wrapper of conversation input, emojis, attachments */
+    composer: ChatComposerProps;
+}
+declare const Chat: FunctionComponent<ChatProps & ForwardProps>;
+export default Chat;
+//# sourceMappingURL=Chat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAKzF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }, 'border-radius': borderRadius } } } = props;
+    return css `
+    height: 100%;
+    background: ${primaryBackground};
+    width: 100%;
+    border-radius: ${borderRadius};
+    ${StyledUtilityMerger} {
+      min-height: 15rem;
+      position: relative;
+      height: 100%;
+      overflow-y: hidden;
+    }
+    ${StyledUtilityContainer} {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      max-height: 60%;
+      width: 100%;
+      background-color: ${secondaryBackground};
+      > ${StyledUtilityContent} {
+        padding: ${spacing} 0;
+        box-shadow: ${shadowHigh};
+        height: auto;
+        width: 100%;
+        overflow-y: auto;
+        background: linear-gradient(${secondaryBackground} 10%, rgba(255, 255, 255, 0)),
+          linear-gradient(rgba(255, 255, 255, 0), ${secondaryBackground} 10%) 0 100%,
+          radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
+          radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+        background-repeat: no-repeat;
+        background-size: 100% 1rem, 100% 1rem, 100% 0.25rem, 100% 0.25rem;
+        background-attachment: local, local, scroll, scroll;
+      }
+    }
+    ${StyledBanner} {
+      padding: calc(2 * ${spacing});
+      margin-bottom: 0;
+      flex-shrink: 0;
+    }
+  `;
+});
+StyledChatContainer.defaultProps = defaultThemeProp;
+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: [_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

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAEpF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AA0B1D,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 { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Banner, defaultThemeProp } from '@pega/cosmos-react-core';\nimport type { BannerProps, ForwardProps, NoChildrenProp } 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 type { ChatComposerProps } from './ChatComposer';\nimport ChatHeader from './ChatHeader';\nimport type { ChatHeaderProps } from './ChatHeader';\nimport SuggestedReplyPicker from './SuggestedReplyPicker';\nimport type { SuggestedReplyPickerProps } from './SuggestedReplyPicker';\nimport type { 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

@@ -0,0 +1,136 @@
+import type { ReactNode, Ref } from 'react';
+import type { DefaultTheme } from 'styled-components';
+import type { BaseProps, Action, NoChildrenProp, OmitStrict, LinkProps, AvatarProps } from '@pega/cosmos-react-core';
+export interface AttachmentItemProps extends BaseProps {
+    /** Unique Id for this attachment */
+    id: string;
+    /** Name of the attachment. */
+    name: string;
+    /**
+     * A Cosmos icon name identifier to use for a attachment. Will serve as a fallback to a broken thumbnail.
+     * @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. */
+    thumbnail?: string;
+    /** 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. */
+    meta?: string;
+    /** When passed, previews the attachment on click */
+    onPreview?: (id: string) => void;
+    /** Actions list for the attachment */
+    actions?: Action[];
+    /** 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,10 @@
+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

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

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

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { 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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBody.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAoB3E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,EAGV,aAAa,EAEd,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"}