@pega/cosmos-react-demos 4.0.0-dev.10.1 → 4.0.0-dev.11.0

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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, useElement, useModalManager, useModalContext, Modal, SummaryItem, useToaster, SearchInput, menuHelpers, VisuallyHiddenText, Menu, useEscape } from '@pega/cosmos-react-core';
+import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, EmojiContext, createUID, useOuterEvent, Select, Option, useElement, useModalManager, useModalContext, Modal, SummaryItem, useToaster, SearchInput, menuHelpers, VisuallyHiddenText, Menu, useEscape } 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, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TranscriptMessage, TypeIndicator } from '@pega/cosmos-react-social';
-import { ChatMockData, phrasesDisplayNames, phrasesMessages, pagePushList, contextItems as contextItemsMock } from './Chat.mocks';
+import { Chat, ChatHeader, ChatComposer, Message, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TypeIndicator } from '@pega/cosmos-react-social';
+import { ChatMockData, phrasesDisplayNames, phrasesMessages, pagePushList, contextItems as contextItemsMock, BotConversation, ClaimsAgentConversation, LiveChatConversation } from './Chat.mocks';
 registerIcon(forwardIcon, replyIcon, replyAllIcon, arrowMicroDownIcon);
 export default {
     title: 'Social/Chat',
@@ -18,8 +18,8 @@ export const ChatHeaderDemo = (args) => {
     const [contextItems, setContextItems] = useState([]);
     const [loading, setLoading] = useState(false);
     return (_jsx(ChatHeader, { title: title, icon: icon || 'chat', actions: [
-            { id: 'action-1', text: 'Transfer' },
-            { id: 'action-2', text: 'End chat' }
+            { id: 'action-1', primary: 'Transfer' },
+            { id: 'action-2', primary: 'End chat' }
         ], sentiment: {
             variant: 'positive',
             'aria-label': 'Sentiment is positive'
@@ -47,16 +47,6 @@ ChatHeaderDemo.argTypes = {
     customer: { control: { type: 'text' } },
     authenticated: { control: { type: 'boolean' }, type: { name: 'string', required: false } }
 };
-export const MessageListDemo = (args) => {
-    const messages = ChatMockData.chatMessages;
-    const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
-    return (_jsx(Flex, { container: true, style: { height: '80vh' }, children: _jsx(MessageList, { tabIndex: 0, messages: messages, unReadMessageCount: unReadMessageCount, onScrollToButtonClick: args.onScrollToButtonClick ||
-                (() => {
-                    setUnReadMessagesCount(0);
-                }) }) }));
-};
-/** **************************** MessageList component - END **************************** */
-/** ***************************** Message component - START ********************** */
 export const MessageDemo = (args) => {
     const actions = [
         {
@@ -91,7 +81,7 @@ export const MessageDemo = (args) => {
             actions
         }
     ];
-    const pagePushLinks = [
+    const mediaPageLinks = [
         {
             id: '2499167349',
             href: 'https://collaborate.pega.com/',
@@ -99,31 +89,65 @@ export const MessageDemo = (args) => {
             title: 'Ask the expert'
         }
     ];
-    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' })] }));
+    return (_jsx(_Fragment, { children: _jsx(Message, { attachments: args.showAttachments ? attachments : undefined, mediaPageLinks: args.showMediaPageLinks ? mediaPageLinks : undefined, avatarInfo: args.direction === 'in' && args.senderType !== 'bot'
+                ? {
+                    name: 'John Brown',
+                    imageSrc: args.showAvatarImage
+                        ? 'https://pegasystems.github.io/uplus-wss/insurance/img/option-1.jpg'
+                        : undefined
+                }
+                : undefined, timestamp: args.showTimestamp ? args.timestamp : undefined, status: args.showStatus ? args.status : undefined, message: args.message, direction: args.direction, senderType: args.senderType, senderId: createUID(), agentVariant: args.agentVariant, messageHeader: args.showHeader ? { content: args.headerContent, meta: args.headerMeta } : undefined }) }));
 };
 MessageDemo.args = {
-    variant: 'receiver',
-    direction: 'in'
+    direction: 'in',
+    senderType: 'customer',
+    agentVariant: 0,
+    message: 'Hi, Welcome to u-plus. How can I help you ?',
+    showStatus: true,
+    status: 'delivered',
+    showTimestamp: true,
+    timestamp: '1:44 PM',
+    showHeader: false,
+    headerContent: 'Public Reply',
+    headerMeta: 'I-12345',
+    showAvatarImage: false,
+    showAttachments: false,
+    showMediaPageLinks: false
 };
 MessageDemo.argTypes = {
-    variant: { options: ['receiver', 'sender', 'other'], control: { type: 'select' } },
-    direction: { options: ['in', 'out'], control: { type: 'select' } }
+    direction: { options: ['in', 'out'], control: { type: 'inline-radio' } },
+    senderType: { options: ['agent', 'customer', 'bot'], control: { type: 'inline-radio' } },
+    agentVariant: { type: 'number' },
+    message: { type: 'string' },
+    showTimestamp: { type: 'boolean' },
+    timestamp: { control: 'text' },
+    showStatus: { type: 'boolean' },
+    status: {
+        options: ['delivered', 'opened', 'undeliverable'],
+        control: { type: 'inline-radio' }
+    },
+    showHeader: { control: 'boolean' },
+    headerContent: { control: 'text' },
+    headerMeta: { control: 'text' },
+    showAvatarImage: { control: 'boolean' },
+    showAttachments: { control: 'boolean' },
+    showMediaPageLinks: { control: 'boolean' }
 };
 /** ***************************** Message component - END *********************** */
 /** **************************** SystemMessage component - START ***************** */
-export const SystemMessageDemo = (args) => (_jsx(SystemMessage, { message: args.message, timeStamp: args.timeStamp, variant: args.variant }));
+export const SystemMessageDemo = (args) => (_jsx(SystemMessage, { message: args.message, timestamp: args.timestamp, variant: args.variant }));
 SystemMessageDemo.args = {
     message: 'John Brown has joined',
     variant: 'secondary',
-    timeStamp: '10:00 AM'
+    timestamp: '10:00 AM'
 };
 SystemMessageDemo.argTypes = {
     message: { control: { type: 'text' } },
     variant: { options: ['primary', 'secondary'], control: { type: 'select' } },
-    timeStamp: { control: { type: 'text' } }
+    timestamp: { control: { type: 'text' } }
 };
 export const TypeIndicatorDemo = (args) => {
-    return _jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: args.message });
+    return (_jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: args.message, senderId: 'johnBrown', senderType: 'agent' }));
 };
 TypeIndicatorDemo.args = {
     message: ''
@@ -132,57 +156,9 @@ TypeIndicatorDemo.argTypes = {
     message: { control: { type: 'text' } }
 };
 /** *************************** TypeIndicator component - END *********************** */
-/** ************************** ChatTranscripts component - START ********************* */
-export const ChatTranscriptsDemo = () => {
-    return (_jsx(_Fragment, { children: ChatMockData.transcripts.map((transcript) => {
-            return (_jsx(ChatTranscript, { tabIndex: 0, title: transcript.title, transcript: transcript.data }, transcript.id));
-        }) }));
-};
-export const TranscriptMessageDemo = (args) => (_jsx(TranscriptMessage, { timeStamp: args.timeStamp, variant: args.variant, message: args.message, transcriptHeader: args.transcriptHeaderContent || args.transcriptHeaderMeta
-        ? { content: args.transcriptHeaderContent, meta: args.transcriptHeaderMeta }
-        : undefined, avatarInfo: args.avatarInfoName
-        ? {
-            name: args.avatarInfoName,
-            imageSrc: args.avatarInfoImageSrc
-        }
-        : undefined }));
-TranscriptMessageDemo.args = {
-    message: 'Hello… This is bot. How can I help you? Please select your category.',
-    variant: 'bot',
-    timeStamp: '01:20 PM',
-    transcriptHeaderContent: undefined,
-    transcriptHeaderMeta: undefined,
-    avatarInfoName: undefined,
-    avatarInfoImageSrc: undefined
-};
-TranscriptMessageDemo.argTypes = {
-    message: { type: { name: 'string', required: true }, control: { type: 'text' } },
-    variant: {
-        type: { name: 'string', required: true },
-        control: { type: 'select', options: ['user', 'bot', 'question'] }
-    },
-    timeStamp: { type: { name: 'string', required: true }, control: { type: 'text' } },
-    transcriptHeaderContent: { type: { name: 'string', required: false }, control: { type: 'text' } },
-    transcriptHeaderMeta: { type: { name: 'string', required: false }, control: { type: 'text' } },
-    avatarInfoName: { type: { name: 'string', required: false }, control: { type: 'text' } },
-    avatarInfoImageSrc: { type: { name: 'string', required: false }, control: { type: 'text' } }
-};
-/** *************************** TranscriptMessage component - END ******************** */
 /** *************************** SuggestedReplyPicker component - START ****************** */
 export const SuggestedReplyPickerDemo = () => {
-    const suggestedReplies = [
-        {
-            id: createUID(),
-            message: 'Hello, Good morning Sara. How can I help you today',
-            confidence: 95
-        },
-        {
-            id: createUID(),
-            message: 'Sorry to hear that. I will surely help you resolve the issue. Can you please provide the policy id, so that I can get more details',
-            confidence: 75
-        }
-    ];
-    return (_jsx(SuggestedReplyPicker, { replies: suggestedReplies, onSelect: suggestedReply => {
+    return (_jsx(SuggestedReplyPicker, { replies: ChatMockData.suggestedReplies, onSelect: suggestedReply => {
             action(`Suggested reply picked ${suggestedReply.message}`)();
         }, onDismiss: action('Suggested reply dismissed') }));
 };
@@ -214,19 +190,7 @@ export const StandardChat = (args) => {
             }
         }
     };
-    const { participants, chatMessages: mockChatMessagesJson, transcripts, defaultAttachments, suggestedReplies } = ChatMockDataClone;
-    const conversationRatingMessage = {
-        id: createUID(),
-        variant: 'receiver',
-        direction: 'in',
-        type: 'message',
-        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.' }), _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" }) })] }))
-    };
+    const { chatMessages: mockChatMessagesJson, defaultAttachments, suggestedReplies } = ChatMockDataClone;
     const { create } = useModalManager();
     const MyModal = () => {
         const { dismiss } = useModalContext();
@@ -278,8 +242,7 @@ export const StandardChat = (args) => {
                     });
                 }
                 return restMessageData;
-            }),
-            conversationRatingMessage
+            })
         ];
     }, []);
     const conversationRef = useRef(null);
@@ -290,10 +253,21 @@ export const StandardChat = (args) => {
         };
     }, []);
     const [showSuggestedReplies, setShowSuggestedReplies] = useState(true);
-    const [showTranscripts, setShowTranscripts] = useState(false);
     const [attachments, setAttachments] = useState(defaultAttachments);
-    const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
-    const [chatMessages, setChatMessages] = useState(args.simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages);
+    const [unreadMessageCount, setUnreadMessageCount] = useState(0);
+    const [chatMessages, setChatMessages] = useState(LiveChatConversation.map(message => {
+        if (message.type === 'message' && message.attachments) {
+            message.attachments = message.attachments.map((item) => {
+                return {
+                    ...item,
+                    actions
+                };
+            });
+        }
+        return message;
+    }));
+    const [contextItems, setContextItems] = useState([]);
+    const [contextLoading, setContextLoading] = useState(false);
     const onDeleteAttachment = useCallback((name) => {
         setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
     }, [setAttachments]);
@@ -328,7 +302,7 @@ export const StandardChat = (args) => {
             return [...prevChatMessages, newMockMessage];
         });
         if (!incrementUnreadMessageCount) {
-            setUnreadMessagesCount(prevCount => prevCount + 1);
+            setUnreadMessageCount(prevCount => prevCount + 1);
         }
     };
     useEffect(() => {
@@ -343,66 +317,49 @@ export const StandardChat = (args) => {
             };
         }
     }, [chatMessages, args.simulateConversation]);
-    const header = (_jsx(ChatHeaderDemo, { title: Channels.options[args.selectedChannel || 'LiveChat'].title, icon: Channels.options[args.selectedChannel || 'LiveChat'].icon, customer: 'Ginger Ventura', authenticated: true }));
-    const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);
-    const transcriptsContainerRef = useRef(null);
-    useOuterEvent('mousedown', [transcriptsContainerRef], () => {
-        setShowTranscripts(false);
-    });
-    const utilityComp = useMemo(() => {
-        return showTranscripts ? (_jsxs("div", { ref: transcriptsContainerRef, children: [!showEarlierTranscripts && (_jsx(Flex, { container: {
-                        direction: 'column',
-                        alignItems: 'center',
-                        gap: 1
-                    }, children: _jsx(Button, { icon: true, "aria-label": 'Show earlier transcripts', variant: 'secondary', onClick: () => {
-                            setShowEarlierTranscripts(!showEarlierTranscripts);
-                        }, 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 }),
-                                meta: _jsx(Link, { href: '/', children: "I-12345" })
-                            };
-                        }
-                        return message;
-                    });
-                    return (_jsx(ChatTranscript, { tabIndex: 0, title: transcript.title, transcript: transcriptData }, transcript.id));
-                })] })) : undefined;
-    }, [showTranscripts, setShowTranscripts, showEarlierTranscripts, setShowEarlierTranscripts]);
     const chatBanner = {
         messages: ['This is a public interaction and any responses will be public and visible'],
         variant: 'warning'
     };
-    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) {
-                        message.id = newRandomMessageId;
-                    }
-                    return message;
-                }));
-                const timeOutId = window.setTimeout(() => {
-                    setChatMessages(prevChatMessages => prevChatMessages.filter(({ id }) => id !== newRandomMessageId));
-                    timers.current = timers.current.filter(id => id !== timeOutId);
-                }, 5000);
-                timers.current.push(timeOutId);
-                setUnreadMessagesCount(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'
+    const bodyProps = {
+        unreadMessageCount,
+        handle: conversationRef,
+        transcripts: [
+            { id: createUID(), messages: BotConversation },
+            { id: createUID(), messages: ClaimsAgentConversation }
+        ],
+        liveChat: [
+            ...chatMessages,
+            {
+                id: 'typingMessage',
+                type: 'typing',
+                avatarInfo: {
+                    name: 'Ginger Ventura'
+                },
+                message: args.message,
+                senderId: 'gingerVentura',
+                senderType: 'customer'
+            }
+        ],
+        onScrollToButtonClick: () => {
+            const newRandomMessageId = Math.random().toString(36).substr(2, 9);
+            setChatMessages(prevChatMessages => prevChatMessages.map(message => {
+                if (message.id === NewMessageSeparatorId) {
+                    message.id = newRandomMessageId;
                 }
-            ] }) }));
+                return message;
+            }));
+            const timeOutId = window.setTimeout(() => {
+                setChatMessages(prevChatMessages => prevChatMessages.filter(({ id }) => id !== newRandomMessageId));
+                timers.current = timers.current.filter(id => id !== timeOutId);
+            }, 5000);
+            timers.current.push(timeOutId);
+            setUnreadMessageCount(0);
+        },
+        loadMore: action('Load more'),
+        offset: 5,
+        loading: args.loading
+    };
     const chatComposerImperativeHandleRef = useRef(null);
     const [mountPopover, setMountPopover] = useState(false);
     const specialKeysConfig = {
@@ -464,24 +421,7 @@ export const StandardChat = (args) => {
             return { id: item.id, primary: item.message };
         });
     }, [pagePushList]);
-    const footer = (_jsxs(ChatComposer, { ref: chatComposerImperativeHandleRef, maxAttachments: args.maxAttachments, attachments: attachments, specialKeysConfig: specialKeysConfig, showEmoji: true, disabled: args.disableChat, onAddAttachment: () => {
-            setAttachments([
-                ...attachments,
-                {
-                    id: `${attachments.length} statement.pdf`,
-                    name: `${attachments.length} statement.pdf`,
-                    onDelete: onDeleteAttachment
-                }
-            ]);
-        }, maxLength: args.maxLength, placeholder: args.placeholder, defaultMessage: args.defaultMessage, onSend: message => {
-            action(`onAppendMessage: ${message}`)();
-            appendMessage({
-                ...participants.sender,
-                type: 'message',
-                message,
-                timeStamp: '1:45 PM'
-            });
-        }, children: [_jsx(Button, { ref: setButtonEl, onClick: () => setIsOpen(cur => !cur), variant: 'secondary', disabled: args.disableChat, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { children: "Phrases" }), _jsx(Icon, { name: 'arrow-micro-down' })] }) }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonEl, children: _jsx(Menu, { id: menuID, listId: menuListID, mode: 'action', variant: 'flyout', items: itemsToRender, role: 'listbox', onItemClick: id => {
+    const composerChildren = (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setButtonEl, onClick: () => setIsOpen(cur => !cur), variant: 'secondary', disabled: args.disableChat, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { children: "Phrases" }), _jsx(Icon, { name: 'arrow-micro-down' })] }) }), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonEl, children: _jsx(Menu, { id: menuID, listId: menuListID, mode: 'action', variant: 'flyout', items: itemsToRender, role: 'listbox', onItemClick: id => {
                         insertPhrasesMessage(phrasesMessages.filter(message => message.id === id)[0].message);
                         setAnnouncement('Phrase inserted');
                         setIsOpen(false);
@@ -504,22 +444,84 @@ export const StandardChat = (args) => {
                         insertPhrasesMessage(phrasesMessages.filter(message => message.id === id)[0].message);
                         setAnnouncement('Phrase inserted');
                     }, focusControlEl: chatComposerImperativeHandleRef?.current?.textAreaRef?.current }) })] }));
-    const suggestedReplyPicker = suggestedReplies.length > 0 && showSuggestedReplies ? (_jsx(SuggestedReplyPicker, { replies: suggestedReplies, onSelect: (suggestedReply) => {
+    const composerProps = {
+        ref: chatComposerImperativeHandleRef,
+        maxAttachments: args.maxAttachments,
+        attachments,
+        specialKeysConfig,
+        showEmoji: true,
+        disabled: args.disableChat,
+        onAddAttachment: () => {
+            setAttachments([
+                ...attachments,
+                {
+                    id: `${attachments.length} statement.pdf`,
+                    name: `${attachments.length} statement.pdf`,
+                    onDelete: onDeleteAttachment
+                }
+            ]);
+        },
+        maxLength: args.maxLength,
+        placeholder: args.placeholder,
+        defaultMessage: args.defaultMessage,
+        onSend: (message) => {
+            action(`onAppendMessage: ${message}`)();
+            appendMessage({
+                senderType: 'agent',
+                direction: 'out',
+                avatarInfo: {
+                    name: 'Edward Green'
+                },
+                type: 'message',
+                message,
+                timeStamp: '2:08'
+            });
+        },
+        children: composerChildren
+    };
+    const suggestedReplyPickerProps = {
+        replies: suggestedReplies,
+        onSelect: (suggestedReply) => {
             chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
             setShowSuggestedReplies(false);
-        }, onDismiss: () => {
+        },
+        onDismiss: () => {
             setShowSuggestedReplies(false);
-        } })) : undefined;
+        }
+    };
     const fetchGoogleSprite = () => {
         return 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/64.png';
     };
     return (_jsx(EmojiContext.Provider, { value: { set: 'google', spriteSrcResolver: fetchGoogleSprite }, children: _jsxs(Flex, { container: {
                 justify: 'center'
             }, style: {
-                height: 'calc(100vh)',
+                height: args.chatHeight || 'calc(100vh)',
                 width: args.chatWidth || '30rem',
                 margin: 'auto'
-            }, children: [_jsx(VisuallyHiddenText, { "aria-live": 'assertive', children: announcement }), _jsx(Chat, { utility: utilityComp, header: header, banner: args.showChatBanner ? chatBanner : undefined, body: body, footer: footer, suggestedReplyPicker: suggestedReplyPicker })] }) }));
+            }, children: [_jsx(VisuallyHiddenText, { "aria-live": 'assertive', children: announcement }), _jsx(Chat, { header: {
+                        title: Channels.options[args.selectedChannel || 'LiveChat'].title,
+                        icon: Channels.options[args.selectedChannel || 'LiveChat'].icon,
+                        customer: 'Ginger Ventura',
+                        authenticated: true,
+                        sentiment: { variant: 'positive' },
+                        context: {
+                            items: contextItems,
+                            onClick: () => {
+                                setContextLoading(true);
+                                setTimeout(() => {
+                                    setContextItems(contextItemsMock);
+                                    setContextLoading(false);
+                                }, 1000);
+                            },
+                            loading: contextLoading
+                        },
+                        actions: [
+                            { id: 'action-1', primary: 'Transfer' },
+                            { id: 'action-2', primary: 'End chat' }
+                        ]
+                    }, banner: args.showChatBanner ? chatBanner : undefined, body: bodyProps, suggestedReplyPicker: suggestedReplies.length > 0 && showSuggestedReplies
+                        ? suggestedReplyPickerProps
+                        : undefined, composer: composerProps })] }) }));
 };
 StandardChat.args = {
     maxAttachments: 2,
@@ -530,7 +532,8 @@ StandardChat.args = {
     message: '',
     placeholder: 'Enter message',
     defaultMessage: 'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!',
-    maxLength: 280
+    maxLength: 280,
+    loading: false
 };
 StandardChat.argTypes = {
     maxAttachments: { control: { type: 'number' } },
@@ -541,7 +544,8 @@ StandardChat.argTypes = {
     message: { control: { type: 'text' } },
     placeholder: { control: { type: 'text' } },
     defaultMessage: { control: { type: 'text' } },
-    maxLength: { control: { type: 'number' } }
+    maxLength: { control: { type: 'number' } },
+    loading: { control: { type: 'boolean' } }
 };
 StandardChat.parameters = {
     layout: 'fullscreen'