npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.30.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.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 (1484) hide show

package/lib/social/Chat/Chat.mocks.js.map CHANGED Viewed

package/lib/social/Chat/Chat.stories.d.ts CHANGED Viewed

@@ -1,19 +1,18 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { MessageProps } from '@pega/cosmos-react-social';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 /** *********************** ChatHeader component - START *********************** */
-export declare const ChatHeaderDemo: () => JSX.Element;
+export declare const ChatHeaderDemo: Story;
 /** ***************************** ChatHeader component - END ******************* */
 /** **************************** MessageList component - START ************************* */
-export declare const MessageListDemo: () => JSX.Element;
+export declare const MessageListDemo: Story;
 /** **************************** MessageList component - END **************************** */
 /** ***************************** Message component - START ********************** */
 export declare const MessageDemo: Story<MessageProps>;
 /** ***************************** Message component - END *********************** */
 /** **************************** SystemMessage component - START ***************** */
-export declare const SystemMessageDemo: () => JSX.Element;
+export declare const SystemMessageDemo: Story;
 /** ***************************** SystemMessage component - END ******************** */
 /** ***************************** TypeIndicator component - START ****************** */
 interface TypeIndicatorDemoProps {
@@ -22,13 +21,13 @@ interface TypeIndicatorDemoProps {
 export declare const TypeIndicatorDemo: Story<TypeIndicatorDemoProps>;
 /** *************************** TypeIndicator component - END *********************** */
 /** ************************** ChatTranscripts component - START ********************* */
-export declare const ChatTranscriptsDemo: () => JSX.Element[];
+export declare const ChatTranscriptsDemo: Story;
 /** **************************** ChatTranscripts component - END ************************ */
 /** *************************** TranscriptMessage component - START ****************** */
-export declare const TranscriptMessageDemo: () => JSX.Element;
+export declare const TranscriptMessageDemo: Story;
 /** *************************** TranscriptMessage component - END ******************** */
 /** *************************** SuggestedReplyPicker component - START ****************** */
-export declare const SuggestedReplyPickerDemo: () => JSX.Element;
+export declare const SuggestedReplyPickerDemo: Story;
 /** *************************** SuggestedReplyPicker component - END ****************** */
 /** ******************************* ChatComposer component - START ************************ */
 interface ChatComposerDemoProps {

package/lib/social/Chat/Chat.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;~~AA2B~~/C,OAAO,EASL,YAAY,EAWb,MAAM,2BAA2B,CAAC;;AAMnC,wBAGU;AAEV,mFAAmF;AACnF,eAAO,MAAM,cAAc,~~mBA4B1B~~,CAAC;AACF,mFAAmF;AAEnF,2FAA2F;AAC3F,eAAO,MAAM,eAAe,~~mBAiB3B~~,CAAC;AACF,4FAA4F;AAE5F,qFAAqF;AACrF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,YAAY,~~CA2D3C~~,CAAC;AAWF,oFAAoF;AAEpF,qFAAqF;AACrF,eAAO,MAAM,iBAAiB,~~mBAE7B~~,CAAC;AACF,uFAAuF;AAEvF,uFAAuF;AACvF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAE3D,CAAC;AASF,wFAAwF;AAExF,yFAAyF;AACzF,eAAO,MAAM,mBAAmB,~~qBAW/B~~,CAAC;AACF,4FAA4F;AAE5F,yFAAyF;AACzF,eAAO,MAAM,qBAAqB,~~mBAMjC~~,CAAC;AACF,yFAAyF;AAEzF,4FAA4F;AAE5F,eAAO,MAAM,wBAAwB,~~mBAuBpC~~,CAAC;AAEF,0FAA0F;AAE1F,8FAA8F;AAC9F,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAWzD,CAAC;AASF,8FAA8F;AAE9F,+FAA+F;AAC/F,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,~~CAwgBjD~~,CAAC;AA+BF,yFAAyF"}
1	+ {"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAgC/C,OAAO,EASL,YAAY,EAWb,MAAM,2BAA2B,CAAC;;AAMnC,wBAGU;AAEV,mFAAmF;AACnF,eAAO,MAAM,cAAc,EAAE,KA+B5B,CAAC;AACF,mFAAmF;AAEnF,2FAA2F;AAC3F,eAAO,MAAM,eAAe,EAAE,KAiB7B,CAAC;AACF,4FAA4F;AAE5F,qFAAqF;AACrF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,YAAY,CA+E3C,CAAC;AAWF,oFAAoF;AAEpF,qFAAqF;AACrF,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AACF,uFAAuF;AAEvF,uFAAuF;AACvF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAE3D,CAAC;AASF,wFAAwF;AAExF,yFAAyF;AACzF,eAAO,MAAM,mBAAmB,EAAE,KAejC,CAAC;AACF,4FAA4F;AAE5F,yFAAyF;AACzF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AACF,yFAAyF;AAEzF,4FAA4F;AAE5F,eAAO,MAAM,wBAAwB,EAAE,KAuBtC,CAAC;AAEF,0FAA0F;AAE1F,8FAA8F;AAC9F,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAWzD,CAAC;AASF,8FAA8F;AAE9F,+FAA+F;AAC/F,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CA6lBjD,CAAC;AA+BF,yFAAyF"}

package/lib/social/Chat/Chat.stories.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, Status, EmojiContext, createUID, useOuterEvent, TextArea, Select, Option, Menu, useElement, FieldValueList } from '@pega/cosmos-react-core';
+import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, Status, EmojiContext, createUID, useOuterEvent, TextArea, Select, Option, Menu, useElement, FieldValueList, useModalManager, useModalContext, Modal, SummaryItem, useToaster } from '@pega/cosmos-react-core';
 import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
 import * as replyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply.icon';
 import * as replyAllIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply-all.icon';
@@ -15,11 +15,13 @@ export default {
 };
 /** *********************** ChatHeader component - START *********************** */
 export const ChatHeaderDemo = () => {
-    const actionsConfig = (_jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
+    const actionsConfig = (_jsxs("div", { children: [_jsx(Button, { variant: 'simple', "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
                         gap: 1,
                         alignItems: 'center'
-                    }, children: [_jsx(Icon, { name: 'chats' }, void 0), _jsx(Text, { children: "Transcripts" }, void 0)] }, void 0) }, void 0), _jsx(Button, { variant: 'simple', icon: true, "aria-label": 'chat info', children: _jsx(Icon, { name: 'information' }, void 0) }, void 0)] }, void 0));
-    return (_jsx(ChatHeader, { title: 'Live Chat', icon: 'chat-solid', "aria-label": 'Chat header', actions: actionsConfig }, void 0));
+                    }, children: [_jsx(Icon, { name: 'chats' }), _jsx(Text, { children: "Transcripts" })] }) }), _jsx(Button, { variant: 'simple', icon: true, "aria-label": 'chat info', children: _jsx(Icon, { name: 'information' }) })] }));
+    return (_jsx(ChatHeader, { title: 'Live chat', icon: 'chat', "aria-label": 'Chat header', actions: actionsConfig, sentiment: {
+            variant: 'positive'
+        } }));
 };
 /** ***************************** ChatHeader component - END ******************* */
 /** **************************** MessageList component - START ************************* */
@@ -28,24 +30,42 @@ export const MessageListDemo = () => {
     const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
     return (_jsx(Flex, { container: true, style: { height: '80vh' }, children: _jsx(MessageList, { tabIndex: 0, messages: messages, unReadMessageCount: unReadMessageCount, onScrollToButtonClick: () => {
                 setUnReadMessagesCount(0);
-            } }, void 0) }, void 0));
+            } }) }));
 };
 /** **************************** MessageList component - END **************************** */
 /** ***************************** Message component - START ********************** */
 export const MessageDemo = (args) => {
+    const actions = [
+        {
+            text: 'Associate with case',
+            id: 'Associate with case',
+            onClick: () => {
+                action('Associate with case');
+            }
+        },
+        {
+            text: 'Download',
+            id: 'Download',
+            onClick: () => {
+                action('Download');
+            }
+        }
+    ];
     const attachments = [
         {
             id: '2499167340',
             name: 'Location',
             icon: 'document',
             meta: 'PNG 0.1 MB',
-            thumbnail: 'https://pegasystems.github.io/uplus-wss/health_provider/img/secondary-options.jpg'
+            thumbnail: 'https://pegasystems.github.io/uplus-wss/health_provider/img/secondary-options.jpg',
+            actions
         },
         {
             id: '2499167341',
             name: 'FAQ with detailed terms and conditions of the policy',
             icon: 'document-pdf',
-            meta: 'PDF 0.7 MB'
+            meta: 'PDF 0.7 MB',
+            actions
         }
     ];
     const pagePushLinks = [
@@ -56,7 +76,7 @@ export const MessageDemo = (args) => {
             title: 'Ask the expert'
         }
     ];
-    return (_jsxs(_Fragment, { children: [_jsx(Message, { type: 'message', attachments: attachments, avatarInfo: { name: 'John Brown' }, status: 'Opened', timeStamp: '1:44 PM', message: 'Hi, Welcome to u-plus. How can I help you ?', variant: args.variant, direction: args.direction }, void 0), _jsx("br", {}, void 0), _jsx(Message, { type: 'message', message: 'Hi, Welcome to u-plus. How can I help you ?', avatarInfo: { name: 'John Brown' }, pagePushLinks: pagePushLinks, variant: args.variant, direction: args.direction }, void 0), _jsx("br", {}, void 0), _jsx(Message, { type: 'message', message: 'Hi, Welcome to u-plus. How can I help you ?', avatarInfo: { name: 'John Brown' }, variant: args.variant, direction: args.direction }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(Message, { type: 'message', attachments: attachments, avatarInfo: { name: 'John Brown' }, timeStamp: '1:44 PM', message: 'Hi, Welcome to u-plus. How can I help you ?', variant: args.variant, direction: args.direction }), _jsx("br", {}), _jsx(Message, { type: 'message', message: 'Hi, Welcome to u-plus. How can I help you ?', avatarInfo: { name: 'John Brown' }, pagePushLinks: pagePushLinks, variant: args.variant, direction: args.direction }), _jsx("br", {}), _jsx(Message, { type: 'message', message: 'Hi, Welcome to u-plus. How can I help you ?', avatarInfo: { name: 'John Brown' }, variant: 'sender', direction: 'out', status: 'undelivered' })] }));
 };
 MessageDemo.args = {
     variant: 'receiver',
@@ -68,9 +88,9 @@ MessageDemo.argTypes = {
 };
 /** ***************************** Message component - END *********************** */
 /** **************************** SystemMessage component - START ***************** */
-export const SystemMessageDemo = () => (_jsx(SystemMessage, { message: 'John Brown has joined', timeStamp: '10:00 AM' }, void 0));
+export const SystemMessageDemo = () => (_jsx(SystemMessage, { message: 'John Brown has joined', timeStamp: '10:00 AM' }));
 export const TypeIndicatorDemo = (args) => {
-    return _jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: args.message }, void 0);
+    return _jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: args.message });
 };
 TypeIndicatorDemo.args = {
     message: ''
@@ -81,13 +101,13 @@ TypeIndicatorDemo.argTypes = {
 /** *************************** TypeIndicator component - END *********************** */
 /** ************************** ChatTranscripts component - START ********************* */
 export const ChatTranscriptsDemo = () => {
-    return ChatMockData.transcripts.map((transcript) => {
-        return (_jsx(ChatTranscript, { tabIndex: 0, title: transcript.title, transcript: transcript.data }, transcript.id));
-    });
+    return (_jsx(_Fragment, { children: ChatMockData.transcripts.map((transcript) => {
+            return (_jsx(ChatTranscript, { tabIndex: 0, title: transcript.title, transcript: transcript.data }, transcript.id));
+        }) }));
 };
 /** **************************** ChatTranscripts component - END ************************ */
 /** *************************** TranscriptMessage component - START ****************** */
-export const TranscriptMessageDemo = () => (_jsx(TranscriptMessage, { timeStamp: '01:20 PM', variant: 'bot', message: 'Hello\u2026 This is bot. How can I help you? Please select your category.' }, void 0));
+export const TranscriptMessageDemo = () => (_jsx(TranscriptMessage, { timeStamp: '01:20 PM', variant: 'bot', message: 'Hello\u2026 This is bot. How can I help you? Please select your category.' }));
 /** *************************** TranscriptMessage component - END ******************** */
 /** *************************** SuggestedReplyPicker component - START ****************** */
 export const SuggestedReplyPickerDemo = () => {
@@ -105,9 +125,9 @@ export const SuggestedReplyPickerDemo = () => {
     ];
     return (_jsx(SuggestedReplyPicker, { replies: suggestedReplies, onSelect: suggestedReply => {
             action(`Suggested reply picked ${suggestedReply.message}`)();
-        }, onDismiss: action('Suggested reply dismissed') }, void 0));
+        }, onDismiss: action('Suggested reply dismissed') }));
 };
-export const ChatComposerDemo = (args) => (_jsxs(ChatComposer, { maxAttachments: args.maxAttachments, attachments: ChatMockData.defaultAttachments, maxLength: 256, placeholder: 'Type here to send message', onSend: () => { }, children: [_jsx(MenuButton, { text: 'Phrases', menu: { items: [] } }, void 0), _jsx(MenuButton, { text: 'Page Push', menu: { items: [] } }, void 0)] }, void 0));
+export const ChatComposerDemo = (args) => (_jsxs(ChatComposer, { maxAttachments: args.maxAttachments, attachments: ChatMockData.defaultAttachments, maxLength: 256, placeholder: 'Type here to send message', onSend: () => { }, children: [_jsx(MenuButton, { text: 'Phrases', menu: { items: [] } }), _jsx(MenuButton, { text: 'Page Push', menu: { items: [] } })] }));
 ChatComposerDemo.args = {
     maxAttachments: 2
 };
@@ -123,7 +143,7 @@ export const StandardChat = (args) => {
         options: {
             LiveChat: {
                 title: 'Live chat',
-                icon: 'chat-solid'
+                icon: 'chat'
             },
             Twitter: {
                 title: 'Twitter chat',
@@ -144,20 +164,60 @@ export const StandardChat = (args) => {
         message: (_jsxs(Flex, { container: {
                 direction: 'column',
                 gap: 1
-            }, children: [_jsx(TextArea, { placeholder: 'Please comment\u2026', label: 'Please comment on our service performance and how we can better serve you. Thank you for your time.' }, void 0), _jsxs(Select, { label: 'Is the problem resolved?', children: [_jsx(Option, { children: "Yes" }, void 0), _jsx(Option, { children: "No" }, void 0)] }, void 0), _jsx(Flex, { container: {
+            }, children: [_jsx(TextArea, { placeholder: 'Please comment\u2026', label: 'Please comment on our service performance and how we can better serve you. Thank you for your time.' }), _jsxs(Select, { label: 'Is the problem resolved?', children: [_jsx(Option, { children: "Yes" }), _jsx(Option, { children: "No" })] }), _jsx(Flex, { container: {
                         justify: 'center'
-                    }, children: _jsx(Button, { variant: 'primary', children: "Submit" }, void 0) }, void 0)] }, void 0))
+                    }, children: _jsx(Button, { variant: 'primary', children: "Submit" }) })] }))
+    };
+    const { create } = useModalManager();
+    const MyModal = () => {
+        const { dismiss } = useModalContext();
+        const { push } = useToaster();
+        return (_jsx(Modal, { heading: 'Associate with case', actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => {
+                            dismiss();
+                            push({ content: 'Cancelled' });
+                        }, children: "Cancel" }), _jsx(Button, { variant: 'primary', onClick: () => {
+                            dismiss();
+                            push({ content: 'Successfully Submitted!!' });
+                        }, children: "Submit" })] }), center: true, children: _jsxs(Flex, { container: { gap: 2, direction: 'column' }, children: [_jsx(SummaryItem, { primary: _jsx(Text, { variant: 'secondary', children: "Security policy" }), secondary: _jsx(Text, { variant: 'secondary', children: "PNG - 6.1MB" }), visual: _jsx(Icon, { name: 'document-doc' }) }), _jsxs(Select, { label: 'Select a service case', style: { width: '15rem' }, children: [_jsx(Option, { value: '', children: "Select\u2026" }), _jsx(Option, { value: 'Make payment', selected: true, children: "Make payment" }), _jsx(Option, { value: 'Facilities', children: "Facilities" })] })] }) }));
+    };
+    const onAssociateWithCase = () => {
+        create(MyModal);
     };
+    const actions = [
+        {
+            text: 'Associate with case',
+            id: 'Associate with case',
+            onClick: () => {
+                action('Associate with case');
+                onAssociateWithCase();
+            }
+        },
+        {
+            text: 'Download',
+            id: 'Download',
+            onClick: () => {
+                action('Download');
+            }
+        }
+    ];
     const mockChatMessages = useMemo(() => {
         return [
             ...mockChatMessagesJson.map(message => {
                 const { messagePrivacy, ...restMessageData } = message;
                 if (messagePrivacy) {
                     restMessageData.messageHeader = {
-                        content: _jsx("span", { children: messagePrivacy }, void 0),
-                        meta: _jsx(Link, { href: '/', children: "I-12345" }, void 0)
+                        content: _jsx("span", { children: messagePrivacy }),
+                        meta: _jsx(Link, { href: '/', children: "I-12345" })
                     };
                 }
+                if (restMessageData.attachments) {
+                    restMessageData.attachments = restMessageData.attachments.map((item) => {
+                        return {
+                            ...item,
+                            actions
+                        };
+                    });
+                }
                 return restMessageData;
             }),
             conversationRatingMessage
@@ -234,7 +294,7 @@ export const StandardChat = (args) => {
                 {
                     id: '1',
                     name: 'Session status',
-                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" })
                 },
                 {
                     id: '2',
@@ -246,7 +306,7 @@ export const StandardChat = (args) => {
                 {
                     id: '1',
                     name: 'Session status',
-                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" })
                 },
                 {
                     id: '2',
@@ -263,7 +323,7 @@ export const StandardChat = (args) => {
                 {
                     id: '1',
                     name: 'Session status',
-                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" })
                 },
                 {
                     id: '2',
@@ -277,15 +337,17 @@ export const StandardChat = (args) => {
         if (openPopover)
             setOpenPopover(false);
     });
-    const header = (_jsx(ChatHeader, { title: Channels.options[args.selectedChannel || 'LiveChat'].title, icon: Channels.options[args.selectedChannel || 'LiveChat'].icon, "aria-label": 'Chat header', actions: _jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', onClick: () => setShowTranscripts(!showTranscripts), "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
+    const header = (_jsx(ChatHeader, { title: Channels.options[args.selectedChannel || 'LiveChat'].title, icon: Channels.options[args.selectedChannel || 'LiveChat'].icon, "aria-label": 'Chat header', sentiment: {
+            variant: 'positive'
+        }, actions: _jsxs("div", { children: [_jsx(Button, { variant: 'simple', onClick: () => setShowTranscripts(!showTranscripts), "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
                             gap: 1,
                             alignItems: 'center'
-                        }, children: [_jsx(Icon, { name: 'chats' }, void 0), _jsx(Text, { children: "Transcripts" }, void 0)] }, void 0) }, void 0), _jsx(Button, { variant: 'simple', icon: true, "aria-label": 'chat info', ref: setButtonRef, onClick: () => setOpenPopover(current => !current), children: _jsx(Icon, { name: 'information' }, void 0) }, void 0), _jsx(Popover, { show: openPopover, target: buttonRef, ref: setPopoverRef, arrow: true, placement: 'bottom-end', children: _jsxs(Flex, { container: { direction: 'column', gap: 1, pad: 2 }, children: [_jsx(Text, { variant: 'h4', children: additionalInfo.title }, void 0), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.options[args.selectedChannel || 'LiveChat'] }, void 0)] }, void 0) }, void 0), _jsx(MenuButton, { text: 'More actions', icon: 'more', iconOnly: true, variant: 'simple', portal: true, menu: {
+                        }, children: [_jsx(Icon, { name: 'chats' }), _jsx(Text, { children: "Transcripts" })] }) }), _jsx(Button, { variant: 'simple', icon: true, "aria-label": 'chat info', ref: setButtonRef, onClick: () => setOpenPopover(current => !current), children: _jsx(Icon, { name: 'information' }) }), _jsx(Popover, { show: openPopover, target: buttonRef, ref: setPopoverRef, arrow: true, placement: 'bottom-end', children: _jsxs(Flex, { container: { direction: 'column', gap: 1, pad: 2 }, children: [_jsx(Text, { variant: 'h4', children: additionalInfo.title }), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.options[args.selectedChannel || 'LiveChat'] })] }) }), _jsx(MenuButton, { text: 'More actions', icon: 'more', iconOnly: true, variant: 'simple', portal: true, menu: {
                         items: [
                             { primary: 'Transfer', id: 'transcript', onClick: action('Clicked Transfer') },
                             { primary: 'End chat', id: 'endChat', onClick: action('Clicked End chat') }
                         ]
-                    } }, void 0)] }, void 0) }, void 0));
+                    } })] }) }));
     const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);
     const transcriptsContainerRef = useRef(null);
     useOuterEvent('mousedown', [transcriptsContainerRef], () => {
@@ -298,21 +360,21 @@ export const StandardChat = (args) => {
                         gap: 1
                     }, children: _jsx(Button, { icon: true, "aria-label": 'Show earlier transcripts', variant: 'secondary', onClick: () => {
                             setShowEarlierTranscripts(!showEarlierTranscripts);
-                        }, children: _jsx(Icon, { name: 'caret-up' }, void 0) }, void 0) }, void 0)), transcripts
+                        }, children: _jsx(Icon, { name: 'caret-up' }) }) })), transcripts
                     .sort((transcript) => transcript.earlierTranscripts)
                     .filter((transcript) => showEarlierTranscripts ? true : !transcript.earlierTranscripts)
                     .map((transcript) => {
                     const transcriptData = transcript.data.map((message) => {
                         if (message.messagePrivacy) {
                             message.transcriptHeader = {
-                                content: _jsx(Status, { variant: 'warn', children: message.messagePrivacy.privacy }, void 0),
-                                meta: _jsx(Link, { href: '/', children: "I-12345" }, void 0)
+                                content: _jsx(Status, { variant: 'warn', children: message.messagePrivacy.privacy }),
+                                meta: _jsx(Link, { href: '/', children: "I-12345" })
                             };
                         }
                         return message;
                     });
                     return (_jsx(ChatTranscript, { tabIndex: 0, title: transcript.title, transcript: transcriptData }, transcript.id));
-                })] }, void 0)) : undefined;
+                })] })) : undefined;
     }, [showTranscripts, setShowTranscripts, showEarlierTranscripts, setShowEarlierTranscripts]);
     const chatBanner = {
         id: 'warning',
@@ -346,7 +408,7 @@ export const StandardChat = (args) => {
                     message: args.message,
                     ariaLabel: 'Pegasystems is typing'
                 }
-            ] }, void 0) }, void 0));
+            ] }) }));
     const chatComposerImperativeHandleRef = useRef(null);
     const [mountPopover, setMountPopover] = useState(false);
     const specialKeysConfig = {
@@ -385,17 +447,17 @@ export const StandardChat = (args) => {
                 message,
                 timeStamp: '1:45 PM'
             });
-        }, children: [_jsx(MenuButton, { text: 'Phrases', actions: [], disabled: args.disableChat }, void 0), _jsx(MenuButton, { text: 'Page push', actions: [], disabled: args.disableChat }, void 0), _jsx(Popover, { show: mountPopover, target: chatComposerImperativeHandleRef?.current?.textAreaRef?.current, placement: 'top-start', children: _jsx(Menu, { scrollAt: 20, items: ChatMockData.phrasesDisplayNames.map((name, idx) => ({
+        }, children: [_jsx(MenuButton, { text: 'Phrases', actions: [], disabled: args.disableChat }), _jsx(MenuButton, { text: 'Page push', actions: [], disabled: args.disableChat }), _jsx(Popover, { show: mountPopover, target: chatComposerImperativeHandleRef?.current?.textAreaRef?.current, placement: 'top-start', children: _jsx(Menu, { scrollAt: 20, items: ChatMockData.phrasesDisplayNames.map((name, idx) => ({
                         primary: name,
                         id: idx.toString(),
                         onClick: () => insertPhrasesMessage(ChatMockData.phrasesMessages[idx])
-                    })) }, void 0) }, void 0)] }, void 0));
+                    })) }) })] }));
     const suggestedReplyPicker = suggestedReplies.length > 0 && showSuggestedReplies ? (_jsx(SuggestedReplyPicker, { replies: suggestedReplies, onSelect: (suggestedReply) => {
             chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
             setShowSuggestedReplies(false);
         }, onDismiss: () => {
             setShowSuggestedReplies(false);
-        } }, void 0)) : undefined;
+        } })) : undefined;
     const fetchGoogleSprite = () => {
         return 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/64.png';
     };
@@ -405,7 +467,7 @@ export const StandardChat = (args) => {
                 height: 'calc(100vh)',
                 width: args.chatWidth || '30rem',
                 margin: 'auto'
-            }, children: _jsx(Chat, { utility: utilityComp, header: header, banner: args.showChatBanner ? chatBanner : undefined, body: body, footer: footer, suggestedReplyPicker: suggestedReplyPicker }, void 0) }, void 0) }, void 0));
+            }, children: _jsx(Chat, { utility: utilityComp, header: header, banner: args.showChatBanner ? chatBanner : undefined, body: body, footer: footer, suggestedReplyPicker: suggestedReplyPicker }) }) }));
 };
 StandardChat.args = {
     maxAttachments: 2,