@pega/cosmos-react-demos 4.0.0-dev.9.1 → 4.0.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 { 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, 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(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', 'sent'],
+        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: ''
@@ -131,60 +155,27 @@ TypeIndicatorDemo.args = {
 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
+export const SuggestedReplyPickerDemo = (args) => {
+    const [suggestedRepliesCollapsed, setSuggestedRepliesCollapsed] = useState(false);
+    const [currentReplyId, setCurrentReplyId] = useState(ChatMockData?.suggestedReplies?.[0]?.id || '');
+    const renderReplies = args.singleSuggestedReply
+        ? [ChatMockData.suggestedReplies[0]]
+        : ChatMockData.suggestedReplies;
+    return (_jsx(SuggestedReplyPicker, { replies: args.noSuggestedReplies ? [] : renderReplies, onSelect: suggestedReply => {
+            action(`Suggested reply picked ${suggestedReply.message}`)();
+        }, collapsed: suggestedRepliesCollapsed, onExpandCollapse: () => {
+            setSuggestedRepliesCollapsed(prev => !prev);
+        }, currentReplyId: currentReplyId, onReplyChange: setCurrentReplyId, showNotification: args.showNotification, onSend: () => action('Send suggested reply') }));
 };
-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' } }
+SuggestedReplyPickerDemo.args = {
+    showNotification: false,
+    singleSuggestedReply: false,
+    noSuggestedReplies: false
 };
-/** *************************** 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 => {
-            action(`Suggested reply picked ${suggestedReply.message}`)();
-        }, onDismiss: action('Suggested reply dismissed') }));
+SuggestedReplyPickerDemo.argTypes = {
+    showNotification: { type: 'boolean' },
+    singleSuggestedReply: { type: 'boolean' },
+    noSuggestedReplies: { type: 'boolean' }
 };
 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 = {
@@ -214,19 +205,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 +257,7 @@ export const StandardChat = (args) => {
                     });
                 }
                 return restMessageData;
-            }),
-            conversationRatingMessage
+            })
         ];
     }, []);
     const conversationRef = useRef(null);
@@ -289,11 +267,22 @@ export const StandardChat = (args) => {
             timers.current.forEach(clearTimeout);
         };
     }, []);
-    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 [suggestedRepliesCollapsed, setSuggestedRepliesCollapsed] = useState(false);
     const onDeleteAttachment = useCallback((name) => {
         setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
     }, [setAttachments]);
@@ -328,7 +317,7 @@ export const StandardChat = (args) => {
             return [...prevChatMessages, newMockMessage];
         });
         if (!incrementUnreadMessageCount) {
-            setUnreadMessagesCount(prevCount => prevCount + 1);
+            setUnreadMessageCount(prevCount => prevCount + 1);
         }
     };
     useEffect(() => {
@@ -343,66 +332,44 @@ 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: [
+    const bodyProps = {
+        unreadMessageCount,
+        handle: conversationRef,
+        transcripts: [
+            { id: createUID(), messages: BotConversation },
+            { id: createUID(), messages: ClaimsAgentConversation }
+        ],
+        liveChat: !args.simulateConversation && args.typingIndicator
+            ? [
                 ...chatMessages,
                 {
-                    id: 'Pegasystems',
+                    id: 'typingMessage',
                     type: 'typing',
                     avatarInfo: {
-                        name: 'Pegasystems',
-                        imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'
+                        name: 'Ginger Ventura'
                     },
                     message: args.message,
-                    ariaLabel: 'Pegasystems is typing'
+                    senderId: 'gingerVentura',
+                    senderType: 'customer'
                 }
-            ] }) }));
+            ]
+            : chatMessages,
+        onScrollToButtonClick: () => {
+            const timeOutId = window.setTimeout(() => {
+                setChatMessages(prevChatMessages => prevChatMessages.filter(({ id }) => id !== NewMessageSeparatorId));
+                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 = {
@@ -452,6 +419,7 @@ export const StandardChat = (args) => {
     const menuListID = `${menuID}--list`;
     const [buttonEl, setButtonEl] = useElement(null);
     const [popoverEl, setPopoverEl] = useElement(null);
+    const [currentReply, setCurrentReply] = useState(suggestedReplies?.[0]?.id || '');
     useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
         setIsOpen(false);
         setSearch('');
@@ -464,24 +432,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 +455,101 @@ 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: () => {
-            setShowSuggestedReplies(false);
-        } })) : undefined;
-    const fetchGoogleSprite = () => {
-        return 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/64.png';
+        },
+        collapsed: suggestedRepliesCollapsed,
+        onExpandCollapse: () => {
+            setSuggestedRepliesCollapsed(prev => !prev);
+        },
+        showNotification: true,
+        currentReplyId: currentReply,
+        onReplyChange: id => {
+            setCurrentReply(id);
+        },
+        onSend: (message) => {
+            action(`onAppendMessage: ${message}`)();
+            appendMessage({
+                senderType: 'agent',
+                direction: 'out',
+                avatarInfo: {
+                    name: 'Edward Green'
+                },
+                type: 'message',
+                message,
+                timeStamp: '2:08'
+            });
+        }
     };
-    return (_jsx(EmojiContext.Provider, { value: { set: 'google', spriteSrcResolver: fetchGoogleSprite }, children: _jsxs(Flex, { container: {
+    const emojiCtx = useMemo(() => ({
+        set: 'google',
+        spriteSrcResolver: () => 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/64.png'
+    }), []);
+    return (_jsx(EmojiContext.Provider, { value: emojiCtx, 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: suggestedReplyPickerProps, composer: composerProps })] }) }));
 };
 StandardChat.args = {
     maxAttachments: 2,
@@ -527,10 +557,12 @@ StandardChat.args = {
     showChatBanner: true,
     disableChat: false,
     simulateConversation: false,
+    typingIndicator: 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
+    maxLength: 280,
+    loading: false
 };
 StandardChat.argTypes = {
     maxAttachments: { control: { type: 'number' } },
@@ -538,10 +570,12 @@ StandardChat.argTypes = {
     showChatBanner: { control: { type: 'boolean' } },
     disableChat: { control: { type: 'boolean' } },
     simulateConversation: { control: { type: 'boolean' } },
+    typingIndicator: { control: { type: 'boolean' } },
     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'