@pega/cosmos-react-demos 2.1.1 → 3.0.0-dev.1.0

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

@@ -1,38 +1,20 @@
 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 { radios, array, boolean, text, number, optionsKnob, button } from '@storybook/addon-knobs';
 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 * 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';
 import * as forwardIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/forward.icon';
-import { Chat, ChatHeader, ChatBody, ChatComposer, ChatTranscript, Message, MessageList as MessageListComp, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TranscriptMessage, TypeIndicator } from '@pega/cosmos-react-social';
+import { Chat, ChatHeader, ChatBody, ChatComposer, ChatTranscript, Message, MessageList, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TranscriptMessage, TypeIndicator } from '@pega/cosmos-react-social';
 import { ChatMockData } from './Chat.mocks';
 registerIcon(forwardIcon, replyIcon, replyAllIcon, arrowMicroDownIcon);
 export default {
     title: 'Social/Chat',
     component: Chat
 };
-const Channels = {
-    label: 'Channel',
-    options: {
-        LiveChat: {
-            title: 'Live chat',
-            icon: 'chat-solid'
-        },
-        Twitter: {
-            title: 'Twitter chat',
-            icon: 'twitter'
-        },
-        Facebook: {
-            title: 'Facebook messenger',
-            icon: 'facebook'
-        }
-    }
-};
 /** *********************** ChatHeader component - START *********************** */
-export const chatHeader = () => {
+export const ChatHeaderDemo = () => {
     const actionsConfig = (_jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
                         gap: 1,
                         alignItems: 'center'
@@ -41,29 +23,16 @@ export const chatHeader = () => {
 };
 /** ***************************** ChatHeader component - END ******************* */
 /** **************************** MessageList component - START ************************* */
-export const MessageList = () => {
+export const MessageListDemo = () => {
     const messages = ChatMockData.chatMessages;
     const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
-    return (_jsx(Flex, { container: true, style: { height: '80vh' }, children: _jsx(MessageListComp, { tabIndex: 0, messages: messages, unReadMessageCount: unReadMessageCount, onScrollToButtonClick: () => {
+    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 messageComponent = () => {
-    /** Storybook knobs are used here to simulate the behavior of variant and direction prop in real time - start */
-    const MessageVariantPropValues = {
-        sender: 'sender',
-        receiver: 'receiver',
-        other: 'other'
-    };
-    const MessageDirectionPropValues = {
-        in: 'in',
-        out: 'out'
-    };
-    const variantProp = radios('Variant', MessageVariantPropValues, 'receiver');
-    const directionProp = radios('Direction', MessageDirectionPropValues, 'in');
-    /** Storybook knobs are used here to simulate the behavior of variant and direction prop in real time - end */
+export const MessageDemo = (args) => {
     const attachments = [
         {
             id: '2499167340',
@@ -87,31 +56,41 @@ export const messageComponent = () => {
             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: variantProp, direction: directionProp }, 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: variantProp, direction: directionProp }, 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: variantProp, direction: directionProp }, void 0)] }, void 0));
+    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));
+};
+MessageDemo.args = {
+    variant: 'receiver',
+    direction: 'in'
+};
+MessageDemo.argTypes = {
+    variant: { options: ['receiver', 'sender', 'other'], control: { type: 'select' } },
+    direction: { options: ['in', 'out'], control: { type: 'select' } }
 };
 /** ***************************** Message component - END *********************** */
 /** **************************** SystemMessage component - START ***************** */
-export const systemMessage = () => (_jsx(SystemMessage, { message: 'John Brown has joined', timeStamp: '10:00 AM' }, void 0));
-/** ***************************** SystemMessage component - END ******************** */
-/** ***************************** TypeIndicator component - START ****************** */
-export const typeIndicator = () => {
-    /**  storybook knobs are used here to simulate the behavior of message prop in real time */
-    const TypeIndicatorMessageProp = text('message', '');
-    return _jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: TypeIndicatorMessageProp }, void 0);
+export const SystemMessageDemo = () => (_jsx(SystemMessage, { message: 'John Brown has joined', timeStamp: '10:00 AM' }, void 0));
+export const TypeIndicatorDemo = (args) => {
+    return _jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: args.message }, void 0);
+};
+TypeIndicatorDemo.args = {
+    message: ''
+};
+TypeIndicatorDemo.argTypes = {
+    message: { control: { type: 'text' } }
 };
 /** *************************** TypeIndicator component - END *********************** */
 /** ************************** ChatTranscripts component - START ********************* */
-export const chatTranscripts = () => {
+export const ChatTranscriptsDemo = () => {
     return 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 transcriptMessage = () => (_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.' }, void 0));
 /** *************************** TranscriptMessage component - END ******************** */
 /** *************************** SuggestedReplyPicker component - START ****************** */
-export const suggestedReplyPickerComponent = () => {
+export const SuggestedReplyPickerDemo = () => {
     const suggestedReplies = [
         {
             id: createUID(),
@@ -128,28 +107,34 @@ export const suggestedReplyPickerComponent = () => {
             action(`Suggested reply picked ${suggestedReply.message}`)();
         }, onDismiss: action('Suggested reply dismissed') }, void 0));
 };
-/** *************************** SuggestedReplyPicker component - END ****************** */
-/** ******************************* ChatComposer component - START ************************ */
-export const chatComposer = () => (_jsxs(ChatComposer, { maxAttachments: number('Max Attachments', 2), 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));
-/** *********************************** ChatComposer component - END ********************** */
-/** *********************************** Standard Chat component - START ******************** */
-const allParticipants = ChatMockData.participants;
-const chatParticipants = Object.keys(allParticipants).reduce((obj, key) => {
-    if (!allParticipants[key].avatarInfo) {
-        return obj;
-    }
-    const name = allParticipants[key].avatarInfo.name;
-    obj[name] = name;
-    return obj;
-}, {});
-const channelOptions = Object.keys(Channels.options).reduce((obj, key) => {
-    obj[key] = key;
-    return obj;
-}, {});
-export const StandardChat = ({ chatWidth = '30rem' }) => {
+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));
+ChatComposerDemo.args = {
+    maxAttachments: 2
+};
+ChatComposerDemo.argTypes = {
+    maxAttachments: { control: { type: 'number' } }
+};
+export const StandardChat = (args) => {
     const ChatMockDataClone = useMemo(() => {
         return JSON.parse(JSON.stringify(ChatMockData));
     }, [ChatMockData]);
+    const Channels = {
+        label: 'Channel',
+        options: {
+            LiveChat: {
+                title: 'Live chat',
+                icon: 'chat-solid'
+            },
+            Twitter: {
+                title: 'Twitter chat',
+                icon: 'twitter'
+            },
+            Facebook: {
+                title: 'Facebook messenger',
+                icon: 'facebook'
+            }
+        }
+    };
     const { participants, chatMessages: mockChatMessagesJson, transcripts, defaultAttachments, suggestedReplies } = ChatMockDataClone;
     const conversationRatingMessage = {
         id: createUID(),
@@ -185,25 +170,11 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
             timers.current.forEach(clearTimeout);
         };
     }, []);
-    const selectedChannel = radios(Channels.label, channelOptions, Object.keys(channelOptions)[0]);
-    const actions = array('Actions', ['Transfer', 'End chat']).map(name => ({
-        primary: name,
-        id: name,
-        onClick: action(`Clicked ${name}`)
-    }));
     const [showSuggestedReplies, setShowSuggestedReplies] = useState(true);
-    const disableChat = boolean('Disable chat', false);
-    const simulateConversation = boolean('Simulate conversation', false);
-    const placeHolder = text('Placeholder', 'Enter message');
-    const defaultMessage = text('Default message', 'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!');
-    const maxLength = number('Max characters', 280);
-    const typers = optionsKnob('Participants typing', chatParticipants, '', {
-        display: 'multi-select'
-    });
     const [showTranscripts, setShowTranscripts] = useState(false);
     const [attachments, setAttachments] = useState(defaultAttachments);
     const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
-    const [chatMessages, setChatMessages] = useState(simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages);
+    const [chatMessages, setChatMessages] = useState(args.simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages);
     const onDeleteAttachment = useCallback((name) => {
         setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
     }, [setAttachments]);
@@ -242,7 +213,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         }
     };
     useEffect(() => {
-        if (simulateConversation) {
+        if (args.simulateConversation) {
             const timeOutId = setTimeout(() => {
                 if (mockChatMessages.length) {
                     appendMessage(mockChatMessages.shift());
@@ -252,49 +223,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 clearTimeout(timeOutId);
             };
         }
-    }, [chatMessages, simulateConversation]);
-    const customerMessage = text('Customer message', '');
-    button('Send customer message', () => {
-        appendMessage({
-            type: 'message',
-            ...participants.receiver,
-            message: customerMessage,
-            timeStamp: '1:45 PM'
-        });
-        return false;
-    });
-    const managerMessage = text('Manager message', '');
-    button('Send manager message', () => {
-        appendMessage({
-            type: 'message',
-            ...participants.other,
-            message: managerMessage,
-            timeStamp: '1:45 PM'
-        });
-        return false;
-    });
-    const typingIndicators = typers
-        .toString()
-        .split(',')
-        .filter(person => person !== '')
-        .map(name => {
-        let message = '';
-        if (name === participants.receiver.avatarInfo.name) {
-            message = customerMessage;
-        }
-        else if (name === participants.other.avatarInfo.name) {
-            message = managerMessage;
-        }
-        return {
-            id: name,
-            type: 'typing',
-            avatarInfo: {
-                name
-            },
-            message,
-            ariaLabel: `${name} is typing`
-        };
-    });
+    }, [chatMessages, args.simulateConversation]);
     const [openPopover, setOpenPopover] = useState(false);
     const [popoverRef, setPopoverRef] = useElement();
     const [buttonRef, setButtonRef] = useElement();
@@ -348,10 +277,15 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         if (openPopover)
             setOpenPopover(false);
     });
-    const header = (_jsx(ChatHeader, { title: Channels.options[selectedChannel].title, icon: Channels.options[selectedChannel].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', actions: _jsxs(Flex, { 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[selectedChannel] }, void 0)] }, void 0) }, void 0), _jsx(MenuButton, { text: 'More actions', icon: 'more', iconOnly: true, variant: 'simple', portal: true, menu: { items: actions } }, void 0)] }, void 0) }, void 0));
+                        }, 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: {
+                        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], () => {
@@ -380,14 +314,13 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                     return (_jsx(ChatTranscript, { tabIndex: 0, title: transcript.title, transcript: transcriptData }, transcript.id));
                 })] }, void 0)) : undefined;
     }, [showTranscripts, setShowTranscripts, showEarlierTranscripts, setShowEarlierTranscripts]);
-    const showChatBanner = boolean('Show banner', true);
     const chatBanner = {
         id: 'warning',
         messages: ['This is a public interaction and any responses will be public and visible'],
         heading: 'Warning',
         variant: 'warning'
     };
-    const body = (_jsx(ChatBody, { children: _jsx(MessageListComp, { unReadMessageCount: unreadMessagesCount, onScrollToButtonClick: () => {
+    const body = (_jsx(ChatBody, { children: _jsx(MessageList, { unReadMessageCount: unreadMessagesCount, onScrollToButtonClick: () => {
                 const newRandomMessageId = Math.random().toString(36).substr(2, 9);
                 setChatMessages(prevChatMessages => prevChatMessages.map(message => {
                     if (message.id === NewMessageSeparatorId) {
@@ -401,27 +334,20 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 }, 5000);
                 timers.current.push(timeOutId);
                 setUnreadMessagesCount(0);
-            }, tabIndex: 0, ref: conversationRef, messages: [...chatMessages, ...typingIndicators] }, void 0) }, void 0));
+            }, tabIndex: 0, ref: conversationRef, messages: [
+                ...chatMessages,
+                {
+                    id: 'Pegasystems',
+                    type: 'typing',
+                    avatarInfo: {
+                        name: 'Pegasystems',
+                        imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'
+                    },
+                    message: args.message,
+                    ariaLabel: 'Pegasystems is typing'
+                }
+            ] }, void 0) }, void 0));
     const chatComposerImperativeHandleRef = useRef(null);
-    const phrase = text('Phrase', 'How can I help you?');
-    button('Push prase at start', () => {
-        if (chatComposerImperativeHandleRef.current) {
-            chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'start');
-        }
-        return false;
-    });
-    button('Push prase at end', () => {
-        if (chatComposerImperativeHandleRef.current) {
-            chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'end');
-        }
-        return false;
-    });
-    button('Push prase at cursor', () => {
-        if (chatComposerImperativeHandleRef.current) {
-            chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'cursor');
-        }
-        return false;
-    });
     const [mountPopover, setMountPopover] = useState(false);
     const specialKeysConfig = {
         keys: ['//'],
@@ -442,7 +368,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
     useOuterEvent('mousedown', [chatComposerImperativeHandleRef?.current?.chatComposerRef?.current], () => {
         setMountPopover(false);
     });
-    const footer = (_jsxs(ChatComposer, { ref: chatComposerImperativeHandleRef, maxAttachments: number('Max Attachments', attachments.length), attachments: attachments, specialKeysConfig: specialKeysConfig, showEmoji: true, disabled: disableChat, onAddAttachment: () => {
+    const footer = (_jsxs(ChatComposer, { ref: chatComposerImperativeHandleRef, maxAttachments: args.maxAttachments, attachments: attachments, specialKeysConfig: specialKeysConfig, showEmoji: true, disabled: args.disableChat, onAddAttachment: () => {
             setAttachments([
                 ...attachments,
                 {
@@ -451,7 +377,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                     onDelete: onDeleteAttachment
                 }
             ]);
-        }, maxLength: maxLength, placeholder: placeHolder, defaultMessage: defaultMessage, onSend: message => {
+        }, maxLength: args.maxLength, placeholder: args.placeholder, defaultMessage: args.defaultMessage, onSend: message => {
             action(`onAppendMessage: ${message}`)();
             appendMessage({
                 ...participants.sender,
@@ -459,15 +385,11 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 message,
                 timeStamp: '1:45 PM'
             });
-        }, children: [_jsx(MenuButton, { text: 'Phrases', actions: [], disabled: disableChat }, void 0), _jsx(MenuButton, { text: 'Page push', actions: [], disabled: 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 }, 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) => ({
                         primary: name,
                         id: idx.toString(),
                         onClick: () => insertPhrasesMessage(ChatMockData.phrasesMessages[idx])
                     })) }, void 0) }, void 0)] }, void 0));
-    button('Toggle suggested replies', () => {
-        setShowSuggestedReplies(show => !show);
-        return false;
-    });
     const suggestedReplyPicker = suggestedReplies.length > 0 && showSuggestedReplies ? (_jsx(SuggestedReplyPicker, { replies: suggestedReplies, onSelect: (suggestedReply) => {
             chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
             setShowSuggestedReplies(false);
@@ -481,9 +403,31 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 justify: 'center'
             }, style: {
                 height: 'calc(100vh)',
-                width: chatWidth,
+                width: args.chatWidth || '30rem',
                 margin: 'auto'
-            }, children: _jsx(Chat, { utility: utilityComp, header: header, banner: 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 }, void 0) }, void 0) }, void 0));
+};
+StandardChat.args = {
+    maxAttachments: 2,
+    selectedChannel: 'LiveChat',
+    showChatBanner: true,
+    disableChat: false,
+    simulateConversation: false,
+    message: '',
+    placeholder: 'Enter message',
+    defaultMessage: 'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!',
+    maxLength: 280
+};
+StandardChat.argTypes = {
+    maxAttachments: { control: { type: 'number' } },
+    selectedChannel: { options: ['LiveChat', 'Twitter', 'Facebook'], control: { type: 'select' } },
+    showChatBanner: { control: { type: 'boolean' } },
+    disableChat: { control: { type: 'boolean' } },
+    simulateConversation: { control: { type: 'boolean' } },
+    message: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    defaultMessage: { control: { type: 'text' } },
+    maxLength: { control: { type: 'number' } }
 };
 StandardChat.parameters = {
     layout: 'fullscreen'