@pega/cosmos-react-social 9.0.0-build.9.9 → 9.0.1

package/lib/components/AISummary/AISummary.d.ts

@@ -0,0 +1,10 @@
+import type { NoChildrenProp, WithAttributes } from '@pega/cosmos-react-core';
+export type AISummaryProps = WithAttributes<'div', NoChildrenProp & {
+    onGenerate: () => void;
+    summary?: string;
+    error?: boolean;
+    loading?: boolean;
+}>;
+declare const AISummary: import("react").ForwardRefExoticComponent<Omit<AISummaryProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default AISummary;
+//# sourceMappingURL=AISummary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AISummary.d.ts","sourceRoot":"","sources":["../../../src/components/AISummary/AISummary.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAuB1F,MAAM,MAAM,cAAc,GAAG,cAAc,CACzC,KAAK,EACL,cAAc,GAAG;IACf,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAkEF,QAAA,MAAM,SAAS,wHAyHd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AISummary/AISummary.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { getLuminance } from 'polished';
+import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
+import { getVariantColors } from '@pega/cosmos-react-core/lib/components/Banner/Banner.styles';
+import { Flex, Button, Text, Icon, useTheme, defaultThemeProp, Progress, ExpandCollapse, useI18n, registerIcon, markdownToPlainText, calculateFontSize, useLiveLog, useAfterInitialEffect, ExpandCollapseButton } from '@pega/cosmos-react-core';
+import { RichTextViewer } from '@pega/cosmos-react-rte';
+registerIcon(polarisSolidIcon);
+const StyledAISummary = styled(Flex)(({ theme }) => {
+    const colors = getVariantColors('ai', theme);
+    return css `
+    background: ${colors.background};
+    border-radius: ${theme.base['border-radius']};
+    padding: ${theme.base.spacing};
+    border: solid 0.0625rem ${colors.borderColor};
+  `;
+});
+StyledAISummary.defaultProps = defaultThemeProp;
+const StyledHeading = styled(Text)(({ theme }) => {
+    const isLight = getLuminance(theme.base.palette['foreground-color']) > 0.5;
+    const colors = getVariantColors('ai', theme);
+    return css `
+    color: ${isLight ? colors.textColor : colors.iconColor};
+  `;
+});
+StyledHeading.defaultProps = defaultThemeProp;
+const StyledFadedSummary = styled(Text)(({ theme }) => {
+    const colors = getVariantColors('ai', theme);
+    return css `
+    white-space: nowrap;
+    overflow: hidden;
+    min-width: 0;
+    mask-image: linear-gradient(
+      to inline-end,
+      ${colors.textColor} 0%,
+      ${colors.textColor} 60%,
+      transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      to right,
+      ${colors.textColor} 0%,
+      ${colors.textColor} 60%,
+      transparent 100%
+    );
+  `;
+});
+StyledFadedSummary.defaultProps = defaultThemeProp;
+const StyledCollapsedSummaryContainer = styled(Flex) `
+  min-width: 0;
+`;
+StyledCollapsedSummaryContainer.defaultProps = defaultThemeProp;
+const StyledAISummaryDisclaimer = styled(Text)(({ theme }) => {
+    const systemFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).xxs;
+    return css `
+    margin-inline-start: ${theme.base.spacing};
+    font-size: ${systemFontSize};
+  `;
+});
+StyledAISummaryDisclaimer.defaultProps = defaultThemeProp;
+const AISummary = forwardRef(function AISummary({ onGenerate, summary, error, loading, ...restProps }, ref) {
+    const t = useI18n();
+    const theme = useTheme();
+    const hadFocusRef = useRef(false);
+    const [collapsed, setCollapsed] = useState(false);
+    const [isFocusMoved, setIsFocusMoved] = useState(false);
+    const [isTrackingFocus, setIsTrackingFocus] = useState(false);
+    const generateButtonRef = useRef(null);
+    const showGenerateBtn = !loading && !(summary && collapsed);
+    const showProgress = loading;
+    const { announcePolite } = useLiveLog();
+    useEffect(() => {
+        if (!isTrackingFocus)
+            return;
+        const handlePointerDown = () => setIsFocusMoved(true);
+        const handleKeyDown = (e) => {
+            if (e.key === 'Tab')
+                setIsFocusMoved(true);
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isTrackingFocus]);
+    useEffect(() => {
+        if (!loading && hadFocusRef.current) {
+            if (!isFocusMoved) {
+                generateButtonRef.current?.focus();
+            }
+            hadFocusRef.current = false;
+            setIsFocusMoved(false);
+            setIsTrackingFocus(false);
+        }
+    }, [loading, isFocusMoved]);
+    useAfterInitialEffect(() => {
+        if (loading) {
+            announcePolite({ message: t('generating_summary') });
+        }
+        else if (error) {
+            announcePolite({ message: t('summary_generation_failed') });
+        }
+        else if (summary) {
+            announcePolite({ message: t('summary_generated') });
+        }
+    }, [loading, summary, error]);
+    const handleGenerate = () => {
+        hadFocusRef.current = true;
+        setIsFocusMoved(false);
+        setIsTrackingFocus(true);
+        onGenerate();
+    };
+    const toggleCollapse = () => {
+        setCollapsed(currentState => !currentState);
+    };
+    const getGenerateBtnLabel = () => {
+        if (error)
+            return t('retry');
+        if (summary)
+            return t('regenerate');
+        return t('generate');
+    };
+    const generateAction = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [error && _jsx(Text, { children: t('generation_failed') }), _jsx(Button, { ref: generateButtonRef, variant: 'link', onClick: handleGenerate, children: getGenerateBtnLabel() })] }));
+    return (_jsxs(StyledAISummary, { ...restProps, container: { direction: 'column' }, ref: ref, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 2 }, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, item: { shrink: 0 }, children: [summary && (_jsx(ExpandCollapseButton, { expanded: !collapsed, onToggle: toggleCollapse, iconOnly: true, compact: true })), _jsx(Icon, { name: 'polaris-solid', color: theme.base.palette.ai }), _jsx(StyledHeading, { variant: 'h3', children: t('summary') })] }), showGenerateBtn && (_jsx(Flex, { container: { alignItems: 'center', justify: 'end' }, item: { grow: 1 }, children: generateAction })), summary && collapsed && (_jsx(StyledCollapsedSummaryContainer, { item: { grow: 1 }, container: { justify: 'end' }, children: error ? (generateAction) : (_jsx(StyledFadedSummary, { children: markdownToPlainText(summary).slice(0, 60) })) })), showProgress && _jsx(Progress, { variant: 'ring', placement: 'inline', focusOnVisible: true })] }), summary && (_jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, children: _jsxs(Flex, { container: { direction: 'column', pad: [1, undefined, undefined] }, children: [_jsx(RichTextViewer, { content: summary, type: 'markdown' }), _jsx(StyledAISummaryDisclaimer, { variant: 'secondary', children: t('ai_disclaimer') })] }) }))] }));
+});
+export default AISummary;
+//# sourceMappingURL=AISummary.js.map

package/lib/components/AISummary/AISummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AISummary.js","sourceRoot":"","sources":["../../../src/components/AISummary/AISummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { getLuminance } from 'polished';\n\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport type { NoChildrenProp, RefElement, WithAttributes } from '@pega/cosmos-react-core';\nimport { getVariantColors } from '@pega/cosmos-react-core/lib/components/Banner/Banner.styles';\nimport {\n  Flex,\n  Button,\n  Text,\n  Icon,\n  useTheme,\n  defaultThemeProp,\n  Progress,\n  ExpandCollapse,\n  useI18n,\n  registerIcon,\n  markdownToPlainText,\n  calculateFontSize,\n  useLiveLog,\n  useAfterInitialEffect,\n  ExpandCollapseButton\n} from '@pega/cosmos-react-core';\nimport { RichTextViewer } from '@pega/cosmos-react-rte';\n\nregisterIcon(polarisSolidIcon);\n\nexport type AISummaryProps = WithAttributes<\n  'div',\n  NoChildrenProp & {\n    onGenerate: () => void;\n    summary?: string;\n    error?: boolean;\n    loading?: boolean;\n  }\n>;\n\nconst StyledAISummary = styled(Flex)(({ theme }) => {\n  const colors = getVariantColors('ai', theme);\n\n  return css`\n    background: ${colors.background};\n    border-radius: ${theme.base['border-radius']};\n    padding: ${theme.base.spacing};\n    border: solid 0.0625rem ${colors.borderColor};\n  `;\n});\n\nStyledAISummary.defaultProps = defaultThemeProp;\n\nconst StyledHeading = styled(Text)(({ theme }) => {\n  const isLight = getLuminance(theme.base.palette['foreground-color']) > 0.5;\n  const colors = getVariantColors('ai', theme);\n\n  return css`\n    color: ${isLight ? colors.textColor : colors.iconColor};\n  `;\n});\n\nStyledHeading.defaultProps = defaultThemeProp;\n\nconst StyledFadedSummary = styled(Text)(({ theme }) => {\n  const colors = getVariantColors('ai', theme);\n\n  return css`\n    white-space: nowrap;\n    overflow: hidden;\n    min-width: 0;\n    mask-image: linear-gradient(\n      to inline-end,\n      ${colors.textColor} 0%,\n      ${colors.textColor} 60%,\n      transparent 100%\n    );\n    -webkit-mask-image: linear-gradient(\n      to right,\n      ${colors.textColor} 0%,\n      ${colors.textColor} 60%,\n      transparent 100%\n    );\n  `;\n});\n\nStyledFadedSummary.defaultProps = defaultThemeProp;\n\nconst StyledCollapsedSummaryContainer = styled(Flex)`\n  min-width: 0;\n`;\nStyledCollapsedSummaryContainer.defaultProps = defaultThemeProp;\n\nconst StyledAISummaryDisclaimer = styled(Text)(({ theme }) => {\n  const systemFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).xxs;\n\n  return css`\n    margin-inline-start: ${theme.base.spacing};\n    font-size: ${systemFontSize};\n  `;\n});\n\nStyledAISummaryDisclaimer.defaultProps = defaultThemeProp;\n\nconst AISummary = forwardRef<RefElement<AISummaryProps>, PropsWithoutRef<AISummaryProps>>(\n  function AISummary({ onGenerate, summary, error, loading, ...restProps }, ref) {\n    const t = useI18n();\n    const theme = useTheme();\n    const hadFocusRef = useRef(false);\n    const [collapsed, setCollapsed] = useState(false);\n    const [isFocusMoved, setIsFocusMoved] = useState(false);\n    const [isTrackingFocus, setIsTrackingFocus] = useState(false);\n    const generateButtonRef = useRef<HTMLButtonElement>(null);\n    const showGenerateBtn = !loading && !(summary && collapsed);\n    const showProgress = loading;\n    const { announcePolite } = useLiveLog();\n\n    useEffect(() => {\n      if (!isTrackingFocus) return;\n\n      const handlePointerDown = () => setIsFocusMoved(true);\n      const handleKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Tab') setIsFocusMoved(true);\n      };\n      document.addEventListener('pointerdown', handlePointerDown);\n      document.addEventListener('keydown', handleKeyDown);\n\n      return () => {\n        document.removeEventListener('pointerdown', handlePointerDown);\n        document.removeEventListener('keydown', handleKeyDown);\n      };\n    }, [isTrackingFocus]);\n\n    useEffect(() => {\n      if (!loading && hadFocusRef.current) {\n        if (!isFocusMoved) {\n          generateButtonRef.current?.focus();\n        }\n        hadFocusRef.current = false;\n        setIsFocusMoved(false);\n        setIsTrackingFocus(false);\n      }\n    }, [loading, isFocusMoved]);\n\n    useAfterInitialEffect(() => {\n      if (loading) {\n        announcePolite({ message: t('generating_summary') });\n      } else if (error) {\n        announcePolite({ message: t('summary_generation_failed') });\n      } else if (summary) {\n        announcePolite({ message: t('summary_generated') });\n      }\n    }, [loading, summary, error]);\n\n    const handleGenerate = () => {\n      hadFocusRef.current = true;\n      setIsFocusMoved(false);\n      setIsTrackingFocus(true);\n      onGenerate();\n    };\n\n    const toggleCollapse = () => {\n      setCollapsed(currentState => !currentState);\n    };\n\n    const getGenerateBtnLabel = () => {\n      if (error) return t('retry');\n      if (summary) return t('regenerate');\n      return t('generate');\n    };\n\n    const generateAction = (\n      <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n        {error && <Text>{t('generation_failed')}</Text>}\n        <Button ref={generateButtonRef} variant='link' onClick={handleGenerate}>\n          {getGenerateBtnLabel()}\n        </Button>\n      </Flex>\n    );\n\n    return (\n      <StyledAISummary {...restProps} container={{ direction: 'column' }} ref={ref}>\n        <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }}>\n          <Flex container={{ gap: 1, alignItems: 'center' }} item={{ shrink: 0 }}>\n            {summary && (\n              <ExpandCollapseButton\n                expanded={!collapsed}\n                onToggle={toggleCollapse}\n                iconOnly\n                compact\n              />\n            )}\n            <Icon name='polaris-solid' color={theme.base.palette.ai} />\n            <StyledHeading variant='h3'>{t('summary')}</StyledHeading>\n          </Flex>\n          {showGenerateBtn && (\n            <Flex container={{ alignItems: 'center', justify: 'end' }} item={{ grow: 1 }}>\n              {generateAction}\n            </Flex>\n          )}\n          {summary && collapsed && (\n            <StyledCollapsedSummaryContainer item={{ grow: 1 }} container={{ justify: 'end' }}>\n              {error ? (\n                generateAction\n              ) : (\n                <StyledFadedSummary>{markdownToPlainText(summary).slice(0, 60)}</StyledFadedSummary>\n              )}\n            </StyledCollapsedSummaryContainer>\n          )}\n\n          {showProgress && <Progress variant='ring' placement='inline' focusOnVisible />}\n        </Flex>\n        {summary && (\n          <ExpandCollapse dimension='height' collapsed={collapsed}>\n            <Flex container={{ direction: 'column', pad: [1, undefined, undefined] }}>\n              <RichTextViewer content={summary} type='markdown' />\n              <StyledAISummaryDisclaimer variant='secondary'>\n                {t('ai_disclaimer')}\n              </StyledAISummaryDisclaimer>\n            </Flex>\n          </ExpandCollapse>\n        )}\n      </StyledAISummary>\n    );\n  }\n);\n\nexport default AISummary;\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './AISummary';
+export type { AISummaryProps } from './AISummary';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AISummary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/lib/components/AISummary/index.js

@@ -0,0 +1,2 @@
+export { default } from './AISummary';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AISummary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './AISummary';\nexport type { AISummaryProps } from './AISummary';\n"]}

package/lib/components/Chat/Chat.js

@@ -2,7 +2,7 @@ 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 { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner.styles';
 import ChatBody from './ChatBody';
 import ChatComposer from './ChatComposer';
 import ChatHeader from './ChatHeader';

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,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;AAMzE,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;;;;;4BAKJ,mBAAmB;oDACK,mBAAmB;;;;;;;;;;;;MAYjE,YAAY;0BACQ,OAAO;;;;GAI9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EACE,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,oBAAoB,EACpB,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,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 { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Banner, defaultThemeProp } from '@pega/cosmos-react-core';\nimport type {\n  BannerProps,\n  ForwardRefForwardPropsComponent,\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 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:\n          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:\n          100% 1rem,\n          100% 1rem,\n          100% 0.25rem,\n          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: ForwardRefForwardPropsComponent<ChatProps> = forwardRef(function Chat(\n  {\n    header,\n    body,\n    composer,\n    banner,\n    suggestedReplyPicker,\n    ...restProps\n  }: PropsWithoutRef<ChatProps>,\n  ref: ChatProps['ref']\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"]}
+{"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;AAMzE,OAAO,EAAE,YAAY,EAAE,MAAM,6DAA6D,CAAC;AAE3F,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;;;;;4BAKJ,mBAAmB;oDACK,mBAAmB;;;;;;;;;;;;MAYjE,YAAY;0BACQ,OAAO;;;;GAI9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EACE,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,oBAAoB,EACpB,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,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 { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Banner, defaultThemeProp } from '@pega/cosmos-react-core';\nimport type {\n  BannerProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledBanner } from '@pega/cosmos-react-core/lib/components/Banner/Banner.styles';\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:\n          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:\n          100% 1rem,\n          100% 1rem,\n          100% 0.25rem,\n          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: ForwardRefForwardPropsComponent<ChatProps> = forwardRef(function Chat(\n  {\n    header,\n    body,\n    composer,\n    banner,\n    suggestedReplyPicker,\n    ...restProps\n  }: PropsWithoutRef<ChatProps>,\n  ref: ChatProps['ref']\n) {\n  return (\n    <Flex\n      ref={ref}\n      as={StyledChatContainer}\n      container={{\n        direction: 'column'\n      }}\n      {...restProps}\n    >\n      <ChatHeader {...header} />\n      {banner && <Banner variant={banner.variant} messages={banner.messages} />}\n      <ChatBody {...body} />\n      {suggestedReplyPicker && <SuggestedReplyPicker {...suggestedReplyPicker} />}\n      <ChatComposer {...composer} />\n    </Flex>\n  );\n});\n\nexport default Chat;\n"]}

package/lib/components/Chat/ChatBody.js

@@ -11,8 +11,8 @@ 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 StyledMessageList = styled.div ``;
+const StyledSession = styled.ul ``;
 const StyledChatBody = styled.div(props => {
     const { theme: { base: { shadow: { high: shadowHigh, focus }, colors: { white }, spacing, palette } } } = props;
     return css `
@@ -36,7 +36,7 @@ const StyledChatBody = styled.div(props => {
 
       > ${StyledSession} {
         padding-inline: 1rem;
-        :not(:last-child) {
+        &:not(:last-child) {
           border-block-end: 0.0625rem solid ${palette['border-line']};
           margin-block-end: ${spacing};
           padding-block-end: ${spacing};
@@ -164,7 +164,7 @@ const ChatBody = forwardRef(function ChatBody({ transcripts, liveChat, unreadMes
     }), [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]);
     useItemIntersection(conversationRef, offset, () => {
         loadMore?.();
-    }, ':scope > div > li');
+    }, ':scope > ul > li');
     useEffect(() => {
         const focusableElements = conversationRef.current?.querySelectorAll(chatFocusableSelector);
         if (focusableElements)
@@ -184,7 +184,7 @@ const ChatBody = forwardRef(function ChatBody({ transcripts, liveChat, unreadMes
     }, [verticalNav]);
     useArrows(conversationRef, {
         cycle: true,
-        selector: ':scope > div > li',
+        selector: ':scope > ul > li',
         dir: 'up-down',
         allowTabFocus: true
     }, [transcripts, liveChat]);

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

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

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

@@ -49,8 +49,22 @@ export interface ChatComposerProps {
     /** Ref to the Imperative handle */
     ref?: Ref<ChatComposerImperativeHandleProps>;
 }
-export declare const StyledAttachmentsListContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<PropsWithoutRef<import("@pega/cosmos-react-core").FileListProps> & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledJoinConversation: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAttachmentsListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<import("@pega/cosmos-react-core/lib/components/File/FileList").CommonFileProps & {
+    type: "display";
+    items: import("@pega/cosmos-react-core").FileDisplayProps[];
+    disabled?: never;
+} & Omit<import("@pega/cosmos-react-core").Attributes<"div">, "disabled" | "type" | "items" | "onDownloadAll">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement> | null | undefined;
+}) | (Omit<Omit<import("@pega/cosmos-react-core/lib/components/File/FileList").CommonFileProps & {
+    type: "item";
+    items: FileItemProps[];
+    disabled?: boolean;
+} & Omit<import("@pega/cosmos-react-core").Attributes<"div">, "disabled" | "type" | "items" | "onDownloadAll">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement> | null | undefined;
+}), import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<PropsWithoutRef<import("@pega/cosmos-react-core").FileListProps> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledJoinConversation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
 export interface ChatComposerImperativeHandleProps {
     /** Function to append a message */
     appendToMessage: (appendMessage: string, position?: 'cursor' | 'start' | 'end' | 'specialKey') => void;

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

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,eAAe,EAAE,SAAS,EAAe,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAqBpG,OAAO,KAAK,EAGV,+BAA+B,EAC/B,aAAa,EACd,MAAM,yBAAyB,CAAC;AASjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,oEAAoE;IACpE,YAAY,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gCAAgC;IAChC,gBAAgB,CAAC,EAAE;QACjB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iCAAiC,CAAC,CAAC;CAC9C;AA6DD,eAAO,MAAM,8BAA8B,+PAUzC,CAAC;AAIH,eAAO,MAAM,sBAAsB,kLAElC,CAAC;AAEF,MAAM,WAAW,iCAAiC;IAChD,mCAAmC;IACnC,eAAe,EAAE,CACf,aAAa,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,YAAY,KACjD,IAAI,CAAC;IACV,4CAA4C;IAC5C,eAAe,EAAE,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IACvD,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CA6TpE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,eAAe,EAAE,SAAS,EAAe,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAqBpG,OAAO,KAAK,EAGV,+BAA+B,EAC/B,aAAa,EACd,MAAM,yBAAyB,CAAC;AASjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gCAAgC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,oEAAoE;IACpE,YAAY,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gCAAgC;IAChC,gBAAgB,CAAC,EAAE;QACjB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iCAAiC,CAAC,CAAC;CAC9C;AA6DD,eAAO,MAAM,8BAA8B;;;;;;;;;;;;mRAUzC,CAAC;AAIH,eAAO,MAAM,sBAAsB;;yJAElC,CAAC;AAEF,MAAM,WAAW,iCAAiC;IAChD,mCAAmC;IACnC,eAAe,EAAE,CACf,aAAa,EAAE,MAAM,EACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,YAAY,KACjD,IAAI,CAAC;IACV,4CAA4C;IAC5C,eAAe,EAAE,SAAS,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IACvD,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC;CACzD;AAED,QAAA,MAAM,YAAY,EAAE,+BAA+B,CAAC,iBAAiB,CA6TpE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatSettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAIxE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAS3D,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAClD,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,GAAG,YAAY,CAa7D,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAc/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ChatSettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAIxE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAS3D,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAClD,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,GAAG,YAAY,CAmB7D,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAc/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Chat/ChatSettingsPanel.js

@@ -5,7 +5,7 @@ import { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppSh
 import { StyledChatControlPanelIcon, StyledUserStatusIcon, userAvailabilityTheme } from './ChatSettingsPanel.styles';
 registerIcon(chatIcon);
 export const ChatControlPanelIcon = ({ status, label, ...restProps }) => {
-    return (_jsxs(StyledChatControlPanelIcon, { as: StyledAvatar, ...restProps, size: 'm', userStatus: status, children: [_jsx(Icon, { name: 'chat' }), status && userAvailabilityTheme[status].icon && (_jsx(StyledUserStatusIcon, { userStatus: status, children: _jsx(Icon, { name: userAvailabilityTheme[status].icon }) })), _jsx(VisuallyHiddenText, { children: label })] }));
+    return (_jsxs(StyledChatControlPanelIcon, { as: StyledAvatar, ...restProps, shape: 'circle', size: 'm', userStatus: status, children: [_jsx(Icon, { name: 'chat' }), status && userAvailabilityTheme[status].icon && (_jsx(StyledUserStatusIcon, { userStatus: status, children: _jsx(Icon, { name: userAvailabilityTheme[status].icon }) })), _jsx(VisuallyHiddenText, { children: label })] }));
 };
 const ChatSettingsPanel = ({ status, label, onClick, ...restProps }) => {
     const t = useI18n();

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

@@ -1 +1 @@
-{"version":3,"file":"ChatSettingsPanel.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAC;AAGpG,OAAO,EACL,0BAA0B,EAC1B,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAEpC,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,oBAAoB,GAE7B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IACtC,OAAO,CACL,MAAC,0BAA0B,IAAC,EAAE,EAAE,YAAY,KAAM,SAAS,EAAE,IAAI,EAAC,GAAG,EAAC,UAAU,EAAE,MAAM,aACtF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACnB,MAAM,IAAI,qBAAqB,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAC/C,KAAC,oBAAoB,IAAC,UAAU,EAAE,MAAM,YACtC,KAAC,IAAI,IAAC,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC,IAAK,GAAI,GAC9B,CACxB,EACD,KAAC,kBAAkB,cAAE,KAAK,GAAsB,IACrB,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAA6D,CAAC,EACnF,MAAM,EACN,KAAK,EACL,OAAO,EACP,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,KAAC,kBAAkB,IACjB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACnD,MAAM,EAAE,KAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,GAAI,EAC7E,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport {\n  Icon,\n  registerIcon,\n  StyledAvatar,\n  useI18n,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\nimport * as chatIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat.icon';\nimport { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';\n\nimport type { ChatSettingsPanelProps } from './Chat.types';\nimport {\n  StyledChatControlPanelIcon,\n  StyledUserStatusIcon,\n  userAvailabilityTheme\n} from './ChatSettingsPanel.styles';\n\nregisterIcon(chatIcon);\n\nexport const ChatControlPanelIcon: FunctionComponent<\n  OmitStrict<ChatSettingsPanelProps, 'onClick'> & ForwardProps\n> = ({ status, label, ...restProps }) => {\n  return (\n    <StyledChatControlPanelIcon as={StyledAvatar} {...restProps} size='m' userStatus={status}>\n      <Icon name='chat' />\n      {status && userAvailabilityTheme[status].icon && (\n        <StyledUserStatusIcon userStatus={status}>\n          <Icon name={userAvailabilityTheme[status].icon!} />\n        </StyledUserStatusIcon>\n      )}\n      <VisuallyHiddenText>{label}</VisuallyHiddenText>\n    </StyledChatControlPanelIcon>\n  );\n};\n\nconst ChatSettingsPanel: FunctionComponent<ChatSettingsPanelProps & ForwardProps> = ({\n  status,\n  label,\n  onClick,\n  ...restProps\n}) => {\n  const t = useI18n();\n  return (\n    <NavigationListItem\n      primary={status ? `${label} (${t(status)})` : label}\n      visual={<ChatControlPanelIcon status={status} label={label} {...restProps} />}\n      onClick={onClick}\n    />\n  );\n};\n\nexport default ChatSettingsPanel;\n"]}
+{"version":3,"file":"ChatSettingsPanel.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAC;AAGpG,OAAO,EACL,0BAA0B,EAC1B,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAEpC,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,oBAAoB,GAE7B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IACtC,OAAO,CACL,MAAC,0BAA0B,IACzB,EAAE,EAAE,YAAY,KACZ,SAAS,EACb,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,GAAG,EACR,UAAU,EAAE,MAAM,aAElB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACnB,MAAM,IAAI,qBAAqB,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAC/C,KAAC,oBAAoB,IAAC,UAAU,EAAE,MAAM,YACtC,KAAC,IAAI,IAAC,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC,IAAK,GAAI,GAC9B,CACxB,EACD,KAAC,kBAAkB,cAAE,KAAK,GAAsB,IACrB,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAA6D,CAAC,EACnF,MAAM,EACN,KAAK,EACL,OAAO,EACP,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,KAAC,kBAAkB,IACjB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACnD,MAAM,EAAE,KAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,GAAI,EAC7E,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport {\n  Icon,\n  registerIcon,\n  StyledAvatar,\n  useI18n,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\nimport * as chatIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat.icon';\nimport { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';\n\nimport type { ChatSettingsPanelProps } from './Chat.types';\nimport {\n  StyledChatControlPanelIcon,\n  StyledUserStatusIcon,\n  userAvailabilityTheme\n} from './ChatSettingsPanel.styles';\n\nregisterIcon(chatIcon);\n\nexport const ChatControlPanelIcon: FunctionComponent<\n  OmitStrict<ChatSettingsPanelProps, 'onClick'> & ForwardProps\n> = ({ status, label, ...restProps }) => {\n  return (\n    <StyledChatControlPanelIcon\n      as={StyledAvatar}\n      {...restProps}\n      shape='circle'\n      size='m'\n      userStatus={status}\n    >\n      <Icon name='chat' />\n      {status && userAvailabilityTheme[status].icon && (\n        <StyledUserStatusIcon userStatus={status}>\n          <Icon name={userAvailabilityTheme[status].icon!} />\n        </StyledUserStatusIcon>\n      )}\n      <VisuallyHiddenText>{label}</VisuallyHiddenText>\n    </StyledChatControlPanelIcon>\n  );\n};\n\nconst ChatSettingsPanel: FunctionComponent<ChatSettingsPanelProps & ForwardProps> = ({\n  status,\n  label,\n  onClick,\n  ...restProps\n}) => {\n  const t = useI18n();\n  return (\n    <NavigationListItem\n      primary={status ? `${label} (${t(status)})` : label}\n      visual={<ChatControlPanelIcon status={status} label={label} {...restProps} />}\n      onClick={onClick}\n    />\n  );\n};\n\nexport default ChatSettingsPanel;\n"]}

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

@@ -4,13 +4,17 @@ export declare const userAvailabilityTheme: Record<UserAvailability, {
     icon?: IconName;
     color: ColorTheme;
 }>;
-export declare const StyledStatusIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    userStatus: UserAvailability;
-}, never>;
-export declare const StyledUserStatusIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    userStatus: UserAvailability;
-}, never>;
-export declare const StyledChatControlPanelIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    userStatus: UserAvailability;
-}, never>;
+export declare const StyledStatusIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    userStatus?: UserAvailability;
+}>> & string;
+export declare const StyledUserStatusIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "userStatus"> & {
+    userStatus?: UserAvailability;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const StyledChatControlPanelIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "userStatus"> & {
+    userStatus?: UserAvailability;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
 //# sourceMappingURL=ChatSettingsPanel.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatSettingsPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.styles.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAIxD,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIjE,eAAO,MAAM,qBAAqB,EAAE,MAAM,CACxC,gBAAgB,EAChB;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,CAKvC,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBACf,gBAAgB;SAkB7B,CAAC;AAIF,eAAO,MAAM,oBAAoB;gBAtBnB,gBAAgB;SAqC5B,CAAC;AAIH,eAAO,MAAM,0BAA0B;gBAzCzB,gBAAgB;SAkD7B,CAAC"}
+{"version":3,"file":"ChatSettingsPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.styles.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAIxD,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIjE,eAAO,MAAM,qBAAqB,EAAE,MAAM,CACxC,gBAAgB,EAChB;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,CAKvC,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBACd,gBAAgB;YAkB9B,CAAC;AAIF,eAAO,MAAM,oBAAoB;iBAtBlB,gBAAgB;;;mBAqC7B,CAAC;AAIH,eAAO,MAAM,0BAA0B;iBAzCxB,gBAAgB;;;mBAkD9B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatSettingsPanel.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,aAAa,EACb,mCAAmC,EACpC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AACtF,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AAItF,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE3B,MAAM,CAAC,MAAM,qBAAqB,GAG9B;IACF,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;IACxC,WAAW,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;IACxD,sBAAsB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE;CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAGxC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,UAAU,EACX,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAe,UAAU;QACtD,CAAC,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,KAAK;QACzC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACvB,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,GAAG,CAAA;0BACY,OAAO;eAClB,OAAO;KACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACzE,MAAM,EAAE,eAAe,EAAE,GAAG,mCAAmC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEnF,OAAO,GAAG,CAAA;;8BAEkB,eAAe;;MAEvC,UAAU;;;;;GAKb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;IAC9D,oBAAoB;;;;;;;;CAQvB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  registerIcon,\n  StyledIcon,\n  readableColor,\n  calculateBackgroundAndContrastColor\n} from '@pega/cosmos-react-core';\nimport type { IconName } from '@pega/cosmos-react-core';\nimport * as minus from '@pega/cosmos-react-core/lib/components/Icon/icons/minus.icon';\nimport * as clock from '@pega/cosmos-react-core/lib/components/Icon/icons/clock.icon';\n\nimport type { ColorTheme, UserAvailability } from './Chat.types';\n\nregisterIcon(minus, clock);\n\nexport const userAvailabilityTheme: Record<\n  UserAvailability,\n  { icon?: IconName; color: ColorTheme }\n> = {\n  available: { color: ['green', 'light'] },\n  unavailable: { icon: 'minus', color: ['red', 'medium'] },\n  temporarilyUnavailable: { icon: 'clock', color: ['orange', 'light'] }\n};\n\nexport const StyledStatusIcon = styled.div<{\n  userStatus: UserAvailability;\n}>(\n  ({\n    theme: {\n      base: { colors }\n    },\n    userStatus\n  }) => {\n    const [colorName, colorVariant]: ColorTheme = userStatus\n      ? userAvailabilityTheme[userStatus].color\n      : ['slate', 'light'];\n    const bgColor = colors[colorName][colorVariant];\n    const fgColor = readableColor(bgColor);\n    return css`\n      background-color: ${bgColor};\n      color: ${fgColor};\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledUserStatusIcon = styled(StyledStatusIcon)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n  const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n\n  return css`\n    border-radius: 50%;\n    border: 0.0625rem solid ${backgroundColor};\n\n    ${StyledIcon} {\n      display: block;\n      width: 100%;\n      margin: 0 auto;\n    }\n  `;\n});\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledChatControlPanelIcon = styled(StyledStatusIcon)`\n  ${StyledUserStatusIcon} {\n    position: absolute;\n    width: 0.875rem;\n    height: 0.875rem;\n    z-index: 1;\n    inset-block-start: -0.25rem;\n    inset-inline-end: -0.25rem;\n  }\n`;\n"]}
+{"version":3,"file":"ChatSettingsPanel.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,aAAa,EACb,mCAAmC,EACpC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AACtF,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AAItF,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE3B,MAAM,CAAC,MAAM,qBAAqB,GAG9B;IACF,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;IACxC,WAAW,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;IACxD,sBAAsB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE;CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAGxC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,UAAU,EACX,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAe,UAAU;QACtD,CAAC,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,KAAK;QACzC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACvB,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,GAAG,CAAA;0BACY,OAAO;eAClB,OAAO;KACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACzE,MAAM,EAAE,eAAe,EAAE,GAAG,mCAAmC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEnF,OAAO,GAAG,CAAA;;8BAEkB,eAAe;;MAEvC,UAAU;;;;;GAKb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;IAC9D,oBAAoB;;;;;;;;CAQvB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  registerIcon,\n  StyledIcon,\n  readableColor,\n  calculateBackgroundAndContrastColor\n} from '@pega/cosmos-react-core';\nimport type { IconName } from '@pega/cosmos-react-core';\nimport * as minus from '@pega/cosmos-react-core/lib/components/Icon/icons/minus.icon';\nimport * as clock from '@pega/cosmos-react-core/lib/components/Icon/icons/clock.icon';\n\nimport type { ColorTheme, UserAvailability } from './Chat.types';\n\nregisterIcon(minus, clock);\n\nexport const userAvailabilityTheme: Record<\n  UserAvailability,\n  { icon?: IconName; color: ColorTheme }\n> = {\n  available: { color: ['green', 'light'] },\n  unavailable: { icon: 'minus', color: ['red', 'medium'] },\n  temporarilyUnavailable: { icon: 'clock', color: ['orange', 'light'] }\n};\n\nexport const StyledStatusIcon = styled.div<{\n  userStatus?: UserAvailability;\n}>(\n  ({\n    theme: {\n      base: { colors }\n    },\n    userStatus\n  }) => {\n    const [colorName, colorVariant]: ColorTheme = userStatus\n      ? userAvailabilityTheme[userStatus].color\n      : ['slate', 'light'];\n    const bgColor = colors[colorName][colorVariant];\n    const fgColor = readableColor(bgColor);\n    return css`\n      background-color: ${bgColor};\n      color: ${fgColor};\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledUserStatusIcon = styled(StyledStatusIcon)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n  const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n\n  return css`\n    border-radius: 50%;\n    border: 0.0625rem solid ${backgroundColor};\n\n    ${StyledIcon} {\n      display: block;\n      width: 100%;\n      margin: 0 auto;\n    }\n  `;\n});\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledChatControlPanelIcon = styled(StyledStatusIcon)`\n  ${StyledUserStatusIcon} {\n    position: absolute;\n    width: 0.875rem;\n    height: 0.875rem;\n    z-index: 1;\n    inset-block-start: -0.25rem;\n    inset-inline-end: -0.25rem;\n  }\n`;\n"]}