npm - @pega/cosmos-react-social - Versions diffs - 8.0.0-build.9.0 → 8.0.0 - Mend

@pega/cosmos-react-social 8.0.0-build.9.0 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (212) hide show

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

	@@ -1 +1 @@
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"}
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;AAW/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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, isValidElement, useContext, useState } from 'react';
+import { forwardRef, useContext, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Icon, defaultThemeProp, useConsolidatedRef, useElement } from '@pega/cosmos-react-core';
+import { Button, Icon, defaultThemeProp, useConsolidatedRef, useElement, isValidElement } from '@pega/cosmos-react-core';
 import { FeedContext } from '../Feed/Feed.context';
 const StyledAutopilotButton = styled(Button)(({ theme }) => {
     return css `

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

	@@ -1 +1 @@
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"]}
1	+ {"version":3,"file":"Autopilot.js","sourceRoot":"","sources":["../../../src/components/Autopilot/Autopilot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,cAAc,EACf,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, 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 isValidElement\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/Chat/Chat.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref } from 'react';
-import type { BannerProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { Ref } from 'react';
+import type { BannerProps, ForwardRefForwardPropsComponent, NoChildrenProp } from '@pega/cosmos-react-core';
 import type { ChatComposerProps } from './ChatComposer';
 import type { ChatHeaderProps } from './ChatHeader';
 import type { SuggestedReplyPickerProps } from './SuggestedReplyPicker';
@@ -24,6 +24,6 @@ export interface ChatProps extends NoChildrenProp {
     /** Wrapper of conversation input, emojis, attachments */
     composer: ChatComposerProps;
 }
-declare const Chat: FunctionComponent<ChatProps & ForwardProps>;
+declare const Chat: ForwardRefForwardPropsComponent<ChatProps>;
 export default Chat;
 //# sourceMappingURL=Chat.d.ts.map

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

	@@ -1 +1 @@
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;AAqED,QAAA,MAAM,IAAI,EAAE,~~iBAAiB,~~CAAC,SAAS,~~GAAG~~,~~YAAY,CAsBpD,~~CAAC;AAEH,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EACV,WAAW,EACX,+BAA+B,EAC/B,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,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;AAqED,QAAA,MAAM,IAAI,EAAE,+BAA+B,CAAC,SAAS,CA2BnD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Chat/Chat.js CHANGED Viewed

@@ -59,8 +59,7 @@ const StyledChatContainer = styled.section(props => {
   `;
 });
 StyledChatContainer.defaultProps = defaultThemeProp;
-const Chat = forwardRef(function Chat(props, ref) {
-    const { header, body, composer, banner, suggestedReplyPicker, ...restProps } = props;
+const Chat = forwardRef(function Chat({ header, body, composer, banner, suggestedReplyPicker, ...restProps }, ref) {
     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 })] }));

package/lib/components/Chat/Chat.js.map CHANGED Viewed

	@@ -1 +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;~~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;;;;;4BAKJ,mBAAmB;oDACK,mBAAmB;;;;;;;;;;;;MAYjE,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:\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: ~~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"]}
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"]}

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

@@ -50,7 +50,7 @@ export type MessageHeaderProps = {
     /** meta data */
     meta?: ReactNode;
 };
-export interface MessageProps {
+export interface MessageProps extends Pick<ChatBodyProps, 'renderMarkdownContent'> {
     /** Message to be displayed */
     message?: string;
     /** Attachment list */
@@ -117,6 +117,8 @@ export interface ChatBodyProps {
     loadMore?: () => void;
     /** Imperative handle */
     handle?: Ref<ChatBodyHandleValue>;
+    /** Renders markdown content. Note: Native emojis are used instead of custom EmojiSet when rendering markdown. */
+    renderMarkdownContent?: boolean;
     /** ref to the element */
     ref?: Ref<HTMLDivElement>;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.types.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,KAAK,EACV,SAAS,EACT,MAAM,EACN,cAAc,EACd,UAAU,EACV,SAAS,EACT,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6KAA6K;IAC7K,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,aAAa,GAAG,wBAAwB,CAAC;AAEtF,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY;CAC3D,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,mCAAmC;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;CAC9C;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,~~YAAY~~;~~IAC3B~~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"}
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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.types.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"~~AAgKA~~,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 {\n /* Unique id for this push link /\n id: string;\n /* Title of the content /\n title: string;\n /* Href for external links /\n href?: LinkProps['href'];\n /* Callback provided to perform on click /\n onTitleClick?: () => void;\n /* A string to be used as an image src for a thumbnail. /\n thumbnail?: AttachmentItemProps['thumbnail'];\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"]}
1	+ {"version":3,"file":"Chat.types.js","sourceRoot":"","sources":["../../../src/components/Chat/Chat.types.ts"],"names":[],"mappings":"AAkKA,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 {\n /* Unique id for this push link /\n id: string;\n /* Title of the content /\n title: string;\n /* Href for external links /\n href?: LinkProps['href'];\n /* Callback provided to perform on click /\n onTitleClick?: () => void;\n /* A string to be used as an image src for a thumbnail. /\n thumbnail?: AttachmentItemProps['thumbnail'];\n}\n\nexport type MessageHeaderProps = {\n /* message header content /\n content?: ReactNode;\n /* meta data /\n meta?: ReactNode;\n};\n\nexport interface MessageProps extends Pick<ChatBodyProps, 'renderMarkdownContent'> {\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 /* Renders markdown content. Note: Native emojis are used instead of custom EmojiSet when rendering markdown. /\n renderMarkdownContent?: boolean;\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 CHANGED Viewed

@@ -1,7 +1,6 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { ChatBodyProps } from './Chat.types';
 export declare const NewMessageSeparatorId = "new-message-separator";
-declare const ChatBody: FunctionComponent<ChatBodyProps & ForwardProps>;
+declare const ChatBody: ForwardRefForwardPropsComponent<ChatBodyProps>;
 export default ChatBody;
 //# sourceMappingURL=ChatBody.d.ts.map

package/lib/components/Chat/ChatBody.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatBody.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"~~AASA~~,OAAO,KAAK,EAAE,~~iBAAiB,EAA0C,MAAM,OAAO,CAAC;AAqBvF,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,CAkS5D,~~CAAC;AAEH,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"ChatBody.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatBody.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAI/E,OAAO,KAAK,EAGV,aAAa,EAEd,MAAM,cAAc,CAAC;AAQtB,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AA+H7D,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CA2S3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/Chat/ChatBody.js CHANGED Viewed

@@ -53,8 +53,7 @@ const StyledChatBody = styled.div(props => {
   `;
 });
 StyledChatBody.defaultProps = defaultThemeProp;
-const ScrollToLatest = props => {
-    const { scrollContainerRef } = props;
+const ScrollToLatest = ({ scrollContainerRef }) => {
     useLayoutEffect(() => {
         if (scrollContainerRef.current) {
             scrollContainerRef.current.scrollTop =
@@ -63,7 +62,7 @@ const ScrollToLatest = props => {
     });
     return null;
 };
-const ChatMessage = ({ agentSerial, message }) => {
+const ChatMessage = ({ agentSerial, message, renderMarkdownContent }) => {
     const getAgentVariant = (senderId, senderType, direction = 'in') => {
         if (agentSerial.current === null)
             return undefined;
@@ -80,7 +79,7 @@ const ChatMessage = ({ agentSerial, message }) => {
     if (isMessageListItem(message)) {
         const { id, senderType, direction, senderId } = message;
         const agentVariant = getAgentVariant(senderId, senderType, direction);
-        return _createElement(Message, { ...message, key: id, agentVariant: agentVariant });
+        return (_createElement(Message, { ...message, key: id, agentVariant: agentVariant, renderMarkdownContent: renderMarkdownContent }));
     }
     if (isSystemMessageListItem(message)) {
         const extraProps = {};
@@ -97,8 +96,7 @@ const ChatMessage = ({ agentSerial, message }) => {
     }
     return null;
 };
-const ChatBody = forwardRef(function ChatBody(props, ref) {
-    const { transcripts, liveChat, unreadMessageCount = 0, onScrollToButtonClick, handle, loading, offset = -1, loadMore, ...restProps } = props;
+const ChatBody = forwardRef(function ChatBody({ transcripts, liveChat, unreadMessageCount = 0, onScrollToButtonClick, handle, loading, offset = -1, loadMore, renderMarkdownContent, ...restProps }, ref) {
     const t = useI18n();
     const conversationRef = useRef(null);
     const scrollRef = useRef(false);
@@ -282,8 +280,8 @@ const ChatBody = forwardRef(function ChatBody(props, ref) {
                                 }
                             }
                         }, children: [loading && _jsx(Progress, { as: 'li', placement: 'block' }), transcripts.map(session => {
-                                return (_jsx(StyledSession, { children: session.messages.map(message => (_jsx(ChatMessage, { message: message, agentSerial: agentSerial }, message.id))) }, session.id));
-                            }), _jsx(StyledSession, { children: liveChat.map(message => (_jsx(ChatMessage, { message: message, agentSerial: agentSerial }, message.id))) })] }), (unreadMessageCount > 0 || displayScrollLatest) && (_jsxs(Button, { "aria-label": unreadMessageCount > 0
+                                return (_jsx(StyledSession, { children: session.messages.map(message => (_jsx(ChatMessage, { message: message, agentSerial: agentSerial, renderMarkdownContent: renderMarkdownContent }, message.id))) }, session.id));
+                            }), _jsx(StyledSession, { children: liveChat.map(message => (_jsx(ChatMessage, { message: message, agentSerial: agentSerial, renderMarkdownContent: renderMarkdownContent }, message.id))) })] }), (unreadMessageCount > 0 || displayScrollLatest) && (_jsxs(Button, { "aria-label": unreadMessageCount > 0
                             ? t('scroll_to_unread_messages')
                             : t('scroll_to_latest_message'), onClick: () => {
                             if (unreadMessageCount > 0) {

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

	@@ -1 +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 { FunctionComponent, 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 { ForwardProps } 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: FunctionComponent<{\n scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n const { scrollContainerRef } = props;\n useLayoutEffect(() => {\n if (scrollContainerRef.current) {\n scrollContainerRef.current.scrollTop =\n scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n }\n });\n return null;\n};\n\ninterface ChatMessageProps {\n message: ChatBodyListItemProps;\n agentSerial: RefObject<{ [agentId: string]: number }>;\n}\n\nconst ChatMessage: FunctionComponent<ChatMessageProps> = ({ agentSerial, message }) => {\n const getAgentVariant = (\n senderId: MessageProps['senderId'],\n senderType: MessageProps['senderType'],\n direction: MessageProps['direction'] = 'in'\n ) => {\n if (agentSerial.current === null) return undefined;\n if (senderType === 'agent' && direction === 'in') {\n if (agentSerial.current[senderId] !== undefined) {\n return agentSerial.current[senderId];\n }\n\n const nextIndex = Object.entries(agentSerial.current).length;\n agentSerial.current[senderId] = nextIndex;\n return nextIndex;\n }\n return undefined;\n };\n\n if (isMessageListItem(message)) {\n const { id, senderType, direction, senderId } = message;\n const agentVariant = getAgentVariant(senderId, senderType, direction);\n return <Message {...message} key={id} agentVariant={agentVariant} />;\n }\n\n if (isSystemMessageListItem(message)) {\n const extraProps: Record<string, string> = {};\n const { id } = message;\n if (id === NewMessageSeparatorId) {\n extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n }\n\n return <SystemMessage {...message} key={id} {...extraProps} />;\n }\n\n if (isTypeIndicatorListItem(message)) {\n const { id, senderId, senderType } = message;\n const agentVariant = getAgentVariant(senderId, senderType);\n\n return <TypeIndicator {...message} key={id} agentVariant={agentVariant} />;\n }\n\n return null;\n};\n\nconst ChatBody: FunctionComponent<ChatBodyProps & ForwardProps> = forwardRef(function ChatBody(\n props: PropsWithoutRef<ChatBodyProps>,\n ref: ChatBodyProps['ref']\n) {\n const {\n transcripts,\n liveChat,\n unreadMessageCount = 0,\n onScrollToButtonClick,\n handle,\n loading,\n offset = -1,\n loadMore,\n ...restProps\n } = props;\n\n const t = useI18n();\n const conversationRef = useRef<HTMLUListElement>(null);\n const scrollRef = useRef(false);\n const 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 message={message} agentSerial={agentSerial} key={message.id} />\n ))}\n </StyledSession>\n );\n })}\n <StyledSession>\n {liveChat.map(message => (\n <ChatMessage message={message} agentSerial={agentSerial} key={message.id} />\n ))}\n </StyledSession>\n </StyledMessageList>\n {(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 && <>  {t('new_messages')}</>}\n </Button>\n )}\n </Flex>\n {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n </>\n );\n});\n\nexport default ChatBody;\n"]}
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 && <>  {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 CHANGED Viewed

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref, PropsWithoutRef, ReactNode, RefObject, KeyboardEvent } from 'react';
-import type { ForwardProps, FileItemProps } from '@pega/cosmos-react-core';
+import type { Ref, PropsWithoutRef, ReactNode, RefObject, KeyboardEvent } from 'react';
+import type { ForwardRefForwardPropsComponent, FileItemProps } from '@pega/cosmos-react-core';
 export type SpecialKeysConfig = {
     /** Collection of specialKeys */
     keys: string[];
@@ -50,7 +50,7 @@ export interface ChatComposerProps {
     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<FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & ForwardProps>, 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 interface ChatComposerImperativeHandleProps {
     /** Function to append a message */
     appendToMessage: (appendMessage: string, position?: 'cursor' | 'start' | 'end' | 'specialKey') => void;
@@ -58,6 +58,6 @@ export interface ChatComposerImperativeHandleProps {
     chatComposerRef: RefObject<HTMLDivElement | undefined>;
     textAreaRef: RefObject<HTMLTextAreaElement | undefined>;
 }
-declare const ChatComposer: FunctionComponent<ChatComposerProps & ForwardProps>;
+declare const ChatComposer: ForwardRefForwardPropsComponent<ChatComposerProps>;
 export default ChatComposer;
 //# sourceMappingURL=ChatComposer.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatComposer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,~~EACV~~,~~iBAAiB,EACjB,~~GAAG,~~EACH~~,eAAe,~~EACf~~,SAAS,~~EAET~~,SAAS,~~EACT~~,aAAa,~~EACd~~,MAAM,OAAO,CAAC;~~AAsBf~~,OAAO,KAAK,EAGV,~~YAAY~~,~~EACZ,~~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;~~AA0ED~~,eAAO,MAAM,8BAA8B,+PAUzC,CAAC;AAIH,eAAO,MAAM,sBAAsB,~~mLAElC~~,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,~~iBAAiB,~~CAAC,iBAAiB,~~GAAG~~,~~YAAY,CAmUrE,~~CAAC;AAEF,eAAe,YAAY,CAAC"}
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"}

package/lib/components/Chat/ChatComposer.js CHANGED Viewed

@@ -1,23 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useCallback, useImperativeHandle, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, TextArea, Button, Icon, registerIcon, Popover, EmojiPicker, hasProp, useI18n, useElement, defaultThemeProp, Tooltip, useOuterEvent, VisuallyHiddenText, AIButton, FileList, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { Flex, TextArea, Button, Icon, registerIcon, Popover, EmojiPicker, hasProp, useI18n, useElement, defaultThemeProp, useOuterEvent, VisuallyHiddenText, AIButton, FileList, useAfterInitialEffect } from '@pega/cosmos-react-core';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
 import * as faceHappyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/face-happy.icon';
 import * as paperClipIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/paper-clip.icon';
 import { StyledFileList } from '@pega/cosmos-react-core/lib/components/File/FileList';
 registerIcon(timesIcon, faceHappyIcon, paperClipIcon);
-const StyledAttachmentElementContainer = styled.div(({ disabled, theme }) => {
-    return (disabled &&
-        css `
-        &:focus {
-          box-shadow: ${theme.base.shadow.focus};
-          border-radius: 50%;
-          outline: none;
-        }
-      `);
-});
+const StyledAttachmentButton = styled(Button)(({ theme, maxAttachmentsReached }) => maxAttachmentsReached
+    ? css `
+          opacity: ${theme.base['disabled-opacity']};
+          cursor: not-allowed;
+        `
+    : null);
+StyledAttachmentButton.defaultProps = defaultThemeProp;
 const StyledPreviewButton = styled(BareButton) ``;
 const StyledDeleteButton = styled(BareButton) ``;
 const StyledChatComposer = styled.footer(({ theme, disabled, theme: { base: { 'disabled-opacity': transparentBg, spacing } } }) => {
@@ -40,13 +37,6 @@ const StyledChatComposer = styled.footer(({ theme, disabled, theme: { base: { 'd
         `}
       }
-      ${StyledAttachmentElementContainer} {
-        ${disabled &&
-        css `
-          pointer-events: none;
-        `}
-      }
       ${StyledPreviewButton} {
         color: ${theme.base.palette.interactive};
         font-weight: bold;
@@ -61,7 +51,6 @@ const StyledChatComposer = styled.footer(({ theme, disabled, theme: { base: { 'd
     `;
 });
 StyledChatComposer.defaultProps = defaultThemeProp;
-StyledAttachmentElementContainer.defaultProps = defaultThemeProp;
 export const StyledAttachmentsListContainer = styled(FileList)(({ theme }) => {
     return css `
     max-height: 5rem;
@@ -77,8 +66,7 @@ StyledAttachmentsListContainer.defaultProps = defaultThemeProp;
 export const StyledJoinConversation = styled(Button) `
   margin: auto;
 `;
-const ChatComposer = forwardRef(function ChatComposer(props, ref) {
-    const { children, attachments = [], maxAttachments = 0, onAddAttachment, maxLength, placeholder: defaultPlaceHolder, defaultMessage = '', onSend, specialKeysConfig, disabled = false, enterKeySendsMessage = true, showEmoji, onSuggestReplyClick, disableSuggestReply = false, joinConversation, ...restProps } = props;
+const ChatComposer = forwardRef(function ChatComposer({ children, attachments = [], maxAttachments = 0, onAddAttachment, maxLength, placeholder: defaultPlaceHolder, defaultMessage = '', onSend, specialKeysConfig, disabled = false, enterKeySendsMessage = true, showEmoji, onSuggestReplyClick, disableSuggestReply = false, joinConversation, ...restProps }, ref) {
     const [message, setMessage] = useState(defaultMessage);
     useEffect(() => {
         setMessage(defaultMessage);
@@ -87,9 +75,9 @@ const ChatComposer = forwardRef(function ChatComposer(props, ref) {
     const textAreaRef = useRef(null);
     const [showEmojiPicker, setShowEmojiPicker] = useState(false);
     const [emojiBtnEl, setEmojiBtnEl] = useElement();
-    const [attachmentsBtnEl, setAttachmentsBtnEl] = useElement();
     const [announcement, setAnnouncement] = useState('');
     const lastEnteredSpecialKey = useRef(null);
+    const maxAttachmentsReached = attachments.length >= maxAttachments;
     const appendToMessage = useCallback((appendMessage, position, selectText = true) => {
         let selectionStart;
         let selectionEnd;
@@ -208,9 +196,11 @@ const ChatComposer = forwardRef(function ChatComposer(props, ref) {
                                                 onCancel: undefined
                                             };
                                         })
-                                        : attachments }), _jsx(TextArea, { ref: textAreaRef, maxLength: maxLength, displayCharCount: maxLength !== undefined, hardStop: false, placeholder: defaultPlaceHolder, value: message, disabled: disabled, onKeyUp: handleSpecialKey, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: handleTextAreaChange, "aria-label": t('enter_message'), autoResize: false })] }), _jsxs(Flex, { container: { gap: 0.5 }, children: [showEmoji && (_jsx(Button, { ref: setEmojiBtnEl, onClick: toggleEmoji, variant: 'simple', disabled: disabled, icon: true, "aria-label": t('add_emoji'), children: _jsx(Icon, { name: 'face-happy' }) })), maxAttachments > 0 && (_jsxs(StyledAttachmentElementContainer, { disabled: attachments.length >= maxAttachments, ref: setAttachmentsBtnEl, tabIndex: attachments.length >= maxAttachments ? 0 : undefined, role: 'button', children: [_jsx(Button, { onClick: onAddAttachment, variant: 'simple', disabled: !!(disabled || attachments.length >= maxAttachments), icon: true, "aria-label": attachments.length >= maxAttachments
-                                                ? t('email_disable_attachment', [maxAttachments])
-                                                : t('email_add_attachment', [maxAttachments]), children: _jsx(Icon, { name: 'paper-clip' }) }), attachments.length >= maxAttachments && (_jsx(Tooltip, { target: attachmentsBtnEl, showDelay: 'none', hideDelay: 'none', ...restProps, children: t('email_disable_attachment', [maxAttachments]) }))] })), _jsxs(Flex, { item: { grow: 1 }, container: { gap: 1 }, children: [children, onSuggestReplyClick && (_jsx(AIButton, { label: t('suggest_reply'), disabled: disabled || disableSuggestReply, onClick: onSuggestReplyClick }))] }), _jsx(Button, { variant: 'primary', disabled: disabled || (!!maxLength && message.length > maxLength), onClick: () => {
+                                        : attachments }), _jsx(TextArea, { ref: textAreaRef, maxLength: maxLength, displayCharCount: maxLength !== undefined, hardStop: false, placeholder: defaultPlaceHolder, value: message, disabled: disabled, onKeyUp: handleSpecialKey, onKeyDown: handleEnterKeyDown, onChange: handleTextAreaChange, onFocus: handleTextAreaChange, "aria-label": t('enter_message'), autoResize: false })] }), _jsxs(Flex, { container: { gap: 0.5 }, children: [showEmoji && (_jsx(Button, { ref: setEmojiBtnEl, onClick: toggleEmoji, variant: 'simple', disabled: disabled, icon: true, "aria-label": t('add_emoji'), children: _jsx(Icon, { name: 'face-happy' }) })), maxAttachments > 0 && (_jsx("div", { children: _jsx(StyledAttachmentButton, { onClick: maxAttachmentsReached ? undefined : onAddAttachment, variant: 'simple', maxAttachmentsReached: maxAttachmentsReached, disabled: disabled, icon: true, label: maxAttachmentsReached
+                                            ? t('email_disable_attachment', [maxAttachments])
+                                            : t('email_add_attachment'), "aria-label": t(maxAttachmentsReached
+                                            ? 'email_disable_attachment'
+                                            : 'email_add_attachment_count', [maxAttachments]), children: _jsx(Icon, { name: 'paper-clip' }) }) })), _jsxs(Flex, { item: { grow: 1 }, container: { gap: 1 }, children: [children, onSuggestReplyClick && (_jsx(AIButton, { label: t('suggest_reply'), disabled: disabled || disableSuggestReply, onClick: onSuggestReplyClick }))] }), _jsx(Button, { variant: 'primary', disabled: disabled || (!!maxLength && message.length > maxLength), onClick: () => {
                                         sendMessage(message);
                                         setAnnouncement(t('message_sent'));
                                     }, children: t('send') }), announcement && (_jsx(VisuallyHiddenText, { "aria-live": 'assertive', children: announcement }))] })] })) }), _jsx(Popover, { show: showEmojiPicker, target: emojiBtnEl, placement: 'top-start', modifiers: [