@pega/cosmos-react-demos 2.0.0 → 2.1.0

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

@@ -0,0 +1,491 @@
+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 { 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 = () => {
+    const actionsConfig = (_jsxs(Flex, { 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));
+};
+/** ***************************** ChatHeader component - END ******************* */
+/** **************************** MessageList component - START ************************* */
+export const MessageList = () => {
+    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: () => {
+                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 */
+    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'
+        },
+        {
+            id: '2499167341',
+            name: 'FAQ with detailed terms and conditions of the policy',
+            icon: 'document-pdf',
+            meta: 'PDF 0.7 MB'
+        }
+    ];
+    const pagePushLinks = [
+        {
+            id: '2499167349',
+            href: 'https://collaborate.pega.com/',
+            thumbnail: 'https://community.pega.com/sites/default/files/styles/480/public/media/images/2020-02/AskExpert.png?itok=ef2MVbOV',
+            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));
+};
+/** ***************************** 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);
+};
+/** *************************** TypeIndicator component - END *********************** */
+/** ************************** ChatTranscripts component - START ********************* */
+export const chatTranscripts = () => {
+    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));
+/** *************************** TranscriptMessage component - END ******************** */
+/** *************************** SuggestedReplyPicker component - START ****************** */
+export const suggestedReplyPickerComponent = () => {
+    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') }, 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' }) => {
+    const ChatMockDataClone = useMemo(() => {
+        return JSON.parse(JSON.stringify(ChatMockData));
+    }, [ChatMockData]);
+    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.' }, 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: {
+                        justify: 'center'
+                    }, children: _jsx(Button, { variant: 'primary', children: "Submit" }, void 0) }, void 0)] }, void 0))
+    };
+    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)
+                    };
+                }
+                return restMessageData;
+            }),
+            conversationRatingMessage
+        ];
+    }, []);
+    const conversationRef = useRef(null);
+    const timers = useRef([]);
+    useEffect(() => {
+        return () => {
+            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 onDeleteAttachment = useCallback((name) => {
+        setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
+    }, [setAttachments]);
+    useEffect(() => {
+        setAttachments(defaultAttachments.map((item) => {
+            return {
+                ...item,
+                onDelete: onDeleteAttachment
+            };
+        }));
+    }, [defaultAttachments]);
+    const appendMessage = (message) => {
+        const incrementUnreadMessageCount = conversationRef.current?.isScrolledToLatest();
+        setChatMessages(prevChatMessages => {
+            const newMockMessage = {
+                ...message
+            };
+            newMockMessage.id = `m-${message.id ? message.id : prevChatMessages.length}`;
+            if (!incrementUnreadMessageCount &&
+                prevChatMessages.filter(({ id }) => id === NewMessageSeparatorId).length === 0) {
+                return [
+                    ...prevChatMessages,
+                    {
+                        id: NewMessageSeparatorId,
+                        type: 'system',
+                        message: 'New messages',
+                        variant: 'primary'
+                    },
+                    newMockMessage
+                ];
+            }
+            return [...prevChatMessages, newMockMessage];
+        });
+        if (!incrementUnreadMessageCount) {
+            setUnreadMessagesCount(prevCount => prevCount + 1);
+        }
+    };
+    useEffect(() => {
+        if (simulateConversation) {
+            const timeOutId = setTimeout(() => {
+                if (mockChatMessages.length) {
+                    appendMessage(mockChatMessages.shift());
+                }
+            }, 1500);
+            return () => {
+                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`
+        };
+    });
+    const [openPopover, setOpenPopover] = useState(false);
+    const [popoverRef, setPopoverRef] = useElement();
+    const [buttonRef, setButtonRef] = useElement();
+    const additionalInfo = {
+        title: 'Additional info',
+        options: {
+            LiveChat: [
+                {
+                    id: '1',
+                    name: 'Session status',
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                },
+                {
+                    id: '2',
+                    name: 'Profile name',
+                    value: 'Sara Davis'
+                }
+            ],
+            Twitter: [
+                {
+                    id: '1',
+                    name: 'Session status',
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                },
+                {
+                    id: '2',
+                    name: 'Twitter handle',
+                    value: '@Connor'
+                },
+                {
+                    id: '3',
+                    name: 'Followers',
+                    value: '13,556'
+                }
+            ],
+            Facebook: [
+                {
+                    id: '1',
+                    name: 'Session status',
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                },
+                {
+                    id: '2',
+                    name: 'Profile name',
+                    value: 'Sara Davis'
+                }
+            ]
+        }
+    };
+    useOuterEvent('mousedown', [popoverRef, buttonRef], () => {
+        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: {
+                            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));
+    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' }, void 0) }, void 0) }, void 0)), 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)
+                            };
+                        }
+                        return message;
+                    });
+                    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 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);
+            }, tabIndex: 0, ref: conversationRef, messages: [...chatMessages, ...typingIndicators] }, 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: ['//'],
+        onSpecialKey: (e, key) => {
+            action(`Event is  ${e}`)();
+            action(`Typed special key is ${key}`)();
+            if (chatComposerImperativeHandleRef.current) {
+                setMountPopover(!mountPopover);
+            }
+        }
+    };
+    const insertPhrasesMessage = (message) => {
+        if (chatComposerImperativeHandleRef.current) {
+            chatComposerImperativeHandleRef.current.appendToMessage(message, 'specialKey');
+            setMountPopover(false);
+        }
+    };
+    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: () => {
+            setAttachments([
+                ...attachments,
+                {
+                    id: `${attachments.length} statement.pdf`,
+                    name: `${attachments.length} statement.pdf`,
+                    onDelete: onDeleteAttachment
+                }
+            ]);
+        }, maxLength: maxLength, placeholder: placeHolder, defaultMessage: defaultMessage, onSend: message => {
+            action(`onAppendMessage: ${message}`)();
+            appendMessage({
+                ...participants.sender,
+                type: 'message',
+                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) => ({
+                        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);
+        }, onDismiss: () => {
+            setShowSuggestedReplies(false);
+        } }, void 0)) : 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: _jsx(Flex, { container: {
+                justify: 'center'
+            }, style: {
+                height: 'calc(100vh)',
+                width: chatWidth,
+                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));
+};
+StandardChat.parameters = {
+    layout: 'fullscreen'
+};
+//# sourceMappingURL=Chat.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.stories.js","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  useMemo,\n  ReactElement,\n  SyntheticEvent\n} from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { radios, array, boolean, text, number, optionsKnob, button } from '@storybook/addon-knobs';\n\nimport {\n  Button,\n  Icon,\n  registerIcon,\n  Text,\n  MenuButton,\n  Flex,\n  Popover,\n  Link,\n  Status,\n  EmojiContext,\n  BannerProps,\n  createUID,\n  useOuterEvent,\n  TextArea,\n  Select,\n  Option,\n  Menu,\n  useElement,\n  FieldValueList\n} from '@pega/cosmos-react-core';\nimport * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';\nimport * as replyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply.icon';\nimport * as replyAllIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply-all.icon';\nimport * as forwardIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/forward.icon';\nimport {\n  Chat,\n  ChatProps,\n  ChatHeader,\n  ChatBody,\n  ChatComposer,\n  ChatTranscript,\n  Message,\n  MessageList as MessageListComp,\n  MessageProps,\n  MessageListItemProps,\n  MessageListImperativeHandleProps,\n  NewMessageSeparatorId,\n  AttachmentItemProps,\n  ChatComposerImperativeHandleProps,\n  SuggestedReply,\n  SuggestedReplyPicker,\n  SystemMessage,\n  TranscriptMessage,\n  TypeIndicator\n} from '@pega/cosmos-react-social';\n\nimport { ChatMockData } from './Chat.mocks';\n\nregisterIcon(forwardIcon, replyIcon, replyAllIcon, arrowMicroDownIcon);\n\nexport default {\n  title: 'Social/Chat',\n  component: Chat\n};\n\nconst Channels: {\n  label: string;\n  options: any;\n} = {\n  label: 'Channel',\n  options: {\n    LiveChat: {\n      title: 'Live chat',\n      icon: 'chat-solid'\n    },\n    Twitter: {\n      title: 'Twitter chat',\n      icon: 'twitter'\n    },\n    Facebook: {\n      title: 'Facebook messenger',\n      icon: 'facebook'\n    }\n  }\n};\n\n/** *********************** ChatHeader component - START *********************** */\nexport const chatHeader = () => {\n  const actionsConfig = (\n    <Flex>\n      <Button variant='simple' aria-label='Show transcripts'>\n        <Flex\n          container={{\n            gap: 1,\n            alignItems: 'center'\n          }}\n        >\n          <Icon name='chats' />\n          <Text>Transcripts</Text>\n        </Flex>\n      </Button>\n      <Button variant='simple' icon aria-label='chat info'>\n        <Icon name='information' />\n      </Button>\n    </Flex>\n  );\n\n  return (\n    <ChatHeader\n      title='Live Chat'\n      icon='chat-solid'\n      aria-label='Chat header'\n      actions={actionsConfig}\n    />\n  );\n};\n/** ***************************** ChatHeader component - END ******************* */\n\n/** **************************** MessageList component - START ************************* */\nexport const MessageList = () => {\n  const messages: any[] = ChatMockData.chatMessages;\n\n  const [unReadMessageCount, setUnReadMessagesCount] = useState(1);\n\n  return (\n    <Flex container style={{ height: '80vh' }}>\n      <MessageListComp\n        tabIndex={0}\n        messages={messages}\n        unReadMessageCount={unReadMessageCount}\n        onScrollToButtonClick={() => {\n          setUnReadMessagesCount(0);\n        }}\n      />\n    </Flex>\n  );\n};\n/** **************************** MessageList component - END **************************** */\n\n/** ***************************** Message component - START ********************** */\nexport const messageComponent = () => {\n  /** Storybook knobs are used here to simulate the behavior of variant and direction prop in real time - start */\n  const MessageVariantPropValues: Record<string, MessageProps['variant']> = {\n    sender: 'sender',\n    receiver: 'receiver',\n    other: 'other'\n  };\n  const MessageDirectionPropValues: Record<string, MessageProps['direction']> = {\n    in: 'in',\n    out: 'out'\n  };\n\n  const variantProp = radios<MessageProps['variant']>(\n    'Variant',\n    MessageVariantPropValues,\n    'receiver'\n  );\n  const directionProp = radios<MessageProps['direction']>(\n    'Direction',\n    MessageDirectionPropValues,\n    'in'\n  );\n  /** Storybook knobs are used here to simulate the behavior of variant and direction prop in real time - end */\n  const attachments = [\n    {\n      id: '2499167340',\n      name: 'Location',\n      icon: 'document',\n      meta: 'PNG 0.1 MB',\n      thumbnail: 'https://pegasystems.github.io/uplus-wss/health_provider/img/secondary-options.jpg'\n    },\n    {\n      id: '2499167341',\n      name: 'FAQ with detailed terms and conditions of the policy',\n      icon: 'document-pdf',\n      meta: 'PDF 0.7 MB'\n    }\n  ];\n  const pagePushLinks = [\n    {\n      id: '2499167349',\n      href: 'https://collaborate.pega.com/',\n      thumbnail:\n        'https://community.pega.com/sites/default/files/styles/480/public/media/images/2020-02/AskExpert.png?itok=ef2MVbOV',\n      title: 'Ask the expert'\n    }\n  ];\n  return (\n    <>\n      {/* Message with attachments  */}\n      <Message\n        type='message'\n        attachments={attachments}\n        avatarInfo={{ name: 'John Brown' }}\n        status='Opened'\n        timeStamp='1:44 PM'\n        message='Hi, Welcome to u-plus. How can I help you ?'\n        variant={variantProp}\n        direction={directionProp}\n      />\n      <br />\n      {/* Message with page push links */}\n      <Message\n        type='message'\n        message='Hi, Welcome to u-plus. How can I help you ?'\n        avatarInfo={{ name: 'John Brown' }}\n        pagePushLinks={pagePushLinks}\n        variant={variantProp}\n        direction={directionProp}\n      />\n      <br />\n      {/* Normal message with plain text */}\n      <Message\n        type='message'\n        message='Hi, Welcome to u-plus. How can I help you ?'\n        avatarInfo={{ name: 'John Brown' }}\n        variant={variantProp}\n        direction={directionProp}\n      />\n    </>\n  );\n};\n/** ***************************** Message component - END *********************** */\n\n/** **************************** SystemMessage component - START ***************** */\nexport const systemMessage = () => (\n  <SystemMessage message='John Brown has joined' timeStamp='10:00 AM' />\n);\n/** ***************************** SystemMessage component - END ******************** */\n\n/** ***************************** TypeIndicator component - START ****************** */\nexport const typeIndicator = () => {\n  /**  storybook knobs are used here to simulate the behavior of message prop in real time */\n  const TypeIndicatorMessageProp = text('message', '');\n  return <TypeIndicator avatarInfo={{ name: 'John Brown' }} message={TypeIndicatorMessageProp} />;\n};\n/** *************************** TypeIndicator component - END *********************** */\n\n/** ************************** ChatTranscripts component - START ********************* */\nexport const chatTranscripts = () => {\n  return ChatMockData.transcripts.map((transcript: any) => {\n    return (\n      <ChatTranscript\n        tabIndex={0}\n        title={transcript.title}\n        key={transcript.id}\n        transcript={transcript.data}\n      />\n    );\n  });\n};\n/** **************************** ChatTranscripts component - END ************************ */\n\n/** *************************** TranscriptMessage component - START ****************** */\nexport const transcriptMessage = () => (\n  <TranscriptMessage\n    timeStamp='01:20 PM'\n    variant='bot'\n    message='Hello… This is bot. How can I help you? Please select your category.'\n  />\n);\n/** *************************** TranscriptMessage component - END ******************** */\n\n/** *************************** SuggestedReplyPicker component - START ****************** */\n\nexport const suggestedReplyPickerComponent = () => {\n  const suggestedReplies: SuggestedReply[] = [\n    {\n      id: createUID(),\n      message: 'Hello, Good morning Sara. How can I help you today',\n      confidence: 95\n    },\n    {\n      id: createUID(),\n      message:\n        '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',\n      confidence: 75\n    }\n  ];\n  return (\n    <SuggestedReplyPicker\n      replies={suggestedReplies}\n      onSelect={suggestedReply => {\n        action(`Suggested reply picked ${suggestedReply.message}`)();\n      }}\n      onDismiss={action('Suggested reply dismissed')}\n    />\n  );\n};\n\n/** *************************** SuggestedReplyPicker component - END ****************** */\n\n/** ******************************* ChatComposer component - START ************************ */\nexport const chatComposer = () => (\n  <ChatComposer\n    maxAttachments={number('Max Attachments', 2)}\n    attachments={ChatMockData.defaultAttachments}\n    maxLength={256}\n    placeholder='Type here to send message'\n    onSend={() => {}}\n  >\n    <MenuButton text='Phrases' menu={{ items: [] }} />\n    <MenuButton text='Page Push' menu={{ items: [] }} />\n  </ChatComposer>\n);\n/** *********************************** ChatComposer component - END ********************** */\n\n/** *********************************** Standard Chat component - START ******************** */\nconst allParticipants: any = ChatMockData.participants;\nconst chatParticipants = Object.keys(allParticipants).reduce((obj: any, key: string) => {\n  if (!allParticipants[key].avatarInfo) {\n    return obj;\n  }\n  const name = allParticipants[key].avatarInfo.name;\n  obj[name] = name;\n  return obj;\n}, {});\n\nconst channelOptions = Object.keys(Channels.options).reduce((obj: any, key) => {\n  obj[key] = key;\n  return obj;\n}, {});\n\nexport const StandardChat = ({ chatWidth = '30rem' }: { chatWidth: string }) => {\n  const ChatMockDataClone: any = useMemo(() => {\n    return JSON.parse(JSON.stringify(ChatMockData));\n  }, [ChatMockData]);\n  const {\n    participants,\n    chatMessages: mockChatMessagesJson,\n    transcripts,\n    defaultAttachments,\n    suggestedReplies\n  }: {\n    participants: any;\n    chatMessages: any[];\n    transcripts: [];\n    defaultAttachments: any[];\n    suggestedReplies: SuggestedReply[];\n  } = ChatMockDataClone;\n\n  const conversationRatingMessage: MessageListItemProps = {\n    id: createUID(),\n    variant: 'receiver',\n    direction: 'in',\n    type: 'message',\n    message: (\n      <Flex\n        container={{\n          direction: 'column',\n          gap: 1\n        }}\n      >\n        <TextArea\n          placeholder='Please comment…'\n          label='Please comment on our service performance and how we can better serve you. Thank you for your time.'\n        />\n        <Select label='Is the problem resolved?'>\n          <Option>Yes</Option>\n          <Option>No</Option>\n        </Select>\n        <Flex\n          container={{\n            justify: 'center'\n          }}\n        >\n          <Button variant='primary'>Submit</Button>\n        </Flex>\n      </Flex>\n    )\n  };\n\n  const mockChatMessages = useMemo(() => {\n    return [\n      ...mockChatMessagesJson.map(message => {\n        const { messagePrivacy, ...restMessageData } = message;\n        if (messagePrivacy) {\n          restMessageData.messageHeader = {\n            content: <span>{messagePrivacy}</span>,\n            meta: <Link href='/'>I-12345</Link>\n          };\n        }\n        return restMessageData;\n      }),\n      conversationRatingMessage\n    ];\n  }, []);\n\n  const conversationRef = useRef<MessageListImperativeHandleProps>(null);\n  const timers = useRef<number[]>([]);\n\n  useEffect(() => {\n    return () => {\n      timers.current.forEach(clearTimeout);\n    };\n  }, []);\n\n  const selectedChannel = radios(Channels.label, channelOptions, Object.keys(channelOptions)[0]);\n  const actions = array('Actions', ['Transfer', 'End chat']).map(name => ({\n    primary: name,\n    id: name,\n    onClick: action(`Clicked ${name}`)\n  }));\n  const [showSuggestedReplies, setShowSuggestedReplies] = useState(true);\n  const disableChat = boolean('Disable chat', false);\n  const simulateConversation = boolean('Simulate conversation', false);\n  const placeHolder = text('Placeholder', 'Enter message');\n  const defaultMessage = text(\n    'Default message',\n    'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!'\n  );\n  const maxLength = number('Max characters', 280);\n  const typers = optionsKnob('Participants typing', chatParticipants, '', {\n    display: 'multi-select'\n  });\n\n  const [showTranscripts, setShowTranscripts] = useState(false);\n  const [attachments, setAttachments] = useState<AttachmentItemProps[]>(defaultAttachments);\n  const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);\n  const [chatMessages, setChatMessages] = useState<any[]>(\n    simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages\n  );\n\n  const onDeleteAttachment = useCallback(\n    (name: string) => {\n      setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));\n    },\n    [setAttachments]\n  );\n\n  useEffect(() => {\n    setAttachments(\n      defaultAttachments.map((item: any) => {\n        return {\n          ...item,\n          onDelete: onDeleteAttachment\n        };\n      })\n    );\n  }, [defaultAttachments]);\n\n  const appendMessage = (message: any) => {\n    const incrementUnreadMessageCount = conversationRef.current?.isScrolledToLatest();\n    setChatMessages(prevChatMessages => {\n      const newMockMessage: any = {\n        ...message\n      };\n      newMockMessage.id = `m-${message.id ? message.id : prevChatMessages.length}`;\n      if (\n        !incrementUnreadMessageCount &&\n        prevChatMessages.filter(({ id }) => id === NewMessageSeparatorId).length === 0\n      ) {\n        return [\n          ...prevChatMessages,\n          {\n            id: NewMessageSeparatorId,\n            type: 'system',\n            message: 'New messages',\n            variant: 'primary'\n          },\n          newMockMessage\n        ];\n      }\n      return [...prevChatMessages, newMockMessage];\n    });\n    if (!incrementUnreadMessageCount) {\n      setUnreadMessagesCount(prevCount => prevCount + 1);\n    }\n  };\n\n  useEffect(() => {\n    if (simulateConversation) {\n      const timeOutId = setTimeout(() => {\n        if (mockChatMessages.length) {\n          appendMessage(mockChatMessages.shift());\n        }\n      }, 1500);\n      return () => {\n        clearTimeout(timeOutId);\n      };\n    }\n  }, [chatMessages, simulateConversation]);\n\n  const customerMessage = text('Customer message', '');\n  button('Send customer message', () => {\n    appendMessage({\n      type: 'message',\n      ...participants.receiver,\n      message: customerMessage,\n      timeStamp: '1:45 PM'\n    });\n    return false;\n  });\n\n  const managerMessage = text('Manager message', '');\n  button('Send manager message', () => {\n    appendMessage({\n      type: 'message',\n      ...participants.other,\n      message: managerMessage,\n      timeStamp: '1:45 PM'\n    });\n    return false;\n  });\n\n  const typingIndicators = typers\n    .toString()\n    .split(',')\n    .filter(person => person !== '')\n    .map(name => {\n      let message = '';\n      if (name === participants.receiver.avatarInfo.name) {\n        message = customerMessage;\n      } else if (name === participants.other.avatarInfo.name) {\n        message = managerMessage;\n      }\n      return {\n        id: name,\n        type: 'typing',\n        avatarInfo: {\n          name\n        },\n        message,\n        ariaLabel: `${name} is typing`\n      };\n    });\n\n  const [openPopover, setOpenPopover] = useState(false);\n  const [popoverRef, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonRef, setButtonRef] = useElement<HTMLElement>();\n  const additionalInfo: {\n    title: string;\n    options: any;\n  } = {\n    title: 'Additional info',\n    options: {\n      LiveChat: [\n        {\n          id: '1',\n          name: 'Session status',\n          value: <Status variant='urgent'>UNAUTHENTICATED</Status>\n        },\n        {\n          id: '2',\n          name: 'Profile name',\n          value: 'Sara Davis'\n        }\n      ],\n      Twitter: [\n        {\n          id: '1',\n          name: 'Session status',\n          value: <Status variant='urgent'>UNAUTHENTICATED</Status>\n        },\n        {\n          id: '2',\n          name: 'Twitter handle',\n          value: '@Connor'\n        },\n        {\n          id: '3',\n          name: 'Followers',\n          value: '13,556'\n        }\n      ],\n      Facebook: [\n        {\n          id: '1',\n          name: 'Session status',\n          value: <Status variant='urgent'>UNAUTHENTICATED</Status>\n        },\n        {\n          id: '2',\n          name: 'Profile name',\n          value: 'Sara Davis'\n        }\n      ]\n    }\n  };\n  useOuterEvent('mousedown', [popoverRef, buttonRef], () => {\n    if (openPopover) setOpenPopover(false);\n  });\n\n  const header = (\n    <ChatHeader\n      title={Channels.options[selectedChannel].title}\n      icon={Channels.options[selectedChannel].icon}\n      aria-label='Chat header'\n      actions={\n        <Flex>\n          <Button\n            variant='simple'\n            onClick={() => setShowTranscripts(!showTranscripts)}\n            aria-label='Show transcripts'\n          >\n            <Flex\n              container={{\n                gap: 1,\n                alignItems: 'center'\n              }}\n            >\n              <Icon name='chats' />\n              <Text>Transcripts</Text>\n            </Flex>\n          </Button>\n          <Button\n            variant='simple'\n            icon\n            aria-label='chat info'\n            ref={setButtonRef}\n            onClick={() => setOpenPopover(current => !current)}\n          >\n            <Icon name='information' />\n          </Button>\n          <Popover\n            show={openPopover}\n            target={buttonRef}\n            ref={setPopoverRef}\n            arrow\n            placement='bottom-end'\n          >\n            <Flex container={{ direction: 'column', gap: 1, pad: 2 }}>\n              <Text variant='h4'>{additionalInfo.title}</Text>\n              <FieldValueList variant='inline' fields={additionalInfo.options[selectedChannel]} />\n            </Flex>\n          </Popover>\n          <MenuButton\n            text='More actions'\n            icon='more'\n            iconOnly\n            variant='simple'\n            portal\n            menu={{ items: actions }}\n          />\n        </Flex>\n      }\n    />\n  );\n\n  const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);\n\n  const transcriptsContainerRef = useRef<HTMLDivElement>(null);\n\n  useOuterEvent('mousedown', [transcriptsContainerRef], () => {\n    setShowTranscripts(false);\n  });\n\n  const utilityComp = useMemo<ChatProps['utility'] | undefined>(() => {\n    return showTranscripts ? (\n      <div ref={transcriptsContainerRef}>\n        {!showEarlierTranscripts && (\n          <Flex\n            container={{\n              direction: 'column',\n              alignItems: 'center',\n              gap: 1\n            }}\n          >\n            <Button\n              icon\n              aria-label='Show earlier transcripts'\n              variant='secondary'\n              onClick={() => {\n                setShowEarlierTranscripts(!showEarlierTranscripts);\n              }}\n            >\n              <Icon name='caret-up' />\n            </Button>\n          </Flex>\n        )}\n        {transcripts\n          .sort((transcript: any) => transcript.earlierTranscripts)\n          .filter((transcript: any) =>\n            showEarlierTranscripts ? true : !transcript.earlierTranscripts\n          )\n          .map((transcript: any) => {\n            const transcriptData: any = transcript.data.map(\n              (message: {\n                messagePrivacy: { privacy: string };\n                transcriptHeader: { content: ReactElement; meta: JSX.Element };\n              }) => {\n                if (message.messagePrivacy) {\n                  message.transcriptHeader = {\n                    content: <Status variant='warn'>{message.messagePrivacy.privacy}</Status>,\n                    meta: <Link href='/'>I-12345</Link>\n                  };\n                }\n                return message;\n              }\n            );\n\n            return (\n              <ChatTranscript\n                tabIndex={0}\n                title={transcript.title}\n                key={transcript.id}\n                transcript={transcriptData}\n              />\n            );\n          })}\n      </div>\n    ) : undefined;\n  }, [showTranscripts, setShowTranscripts, showEarlierTranscripts, setShowEarlierTranscripts]);\n\n  const showChatBanner = boolean('Show banner', true);\n\n  const chatBanner: BannerProps = {\n    id: 'warning',\n    messages: ['This is a public interaction and any responses will be public and visible'],\n    heading: 'Warning',\n    variant: 'warning'\n  };\n  const body = (\n    <ChatBody>\n      <MessageListComp\n        unReadMessageCount={unreadMessagesCount}\n        onScrollToButtonClick={() => {\n          const newRandomMessageId = Math.random().toString(36).substr(2, 9);\n          setChatMessages(prevChatMessages =>\n            prevChatMessages.map(message => {\n              if (message.id === NewMessageSeparatorId) {\n                message.id = newRandomMessageId;\n              }\n              return message;\n            })\n          );\n          const timeOutId: number = window.setTimeout(() => {\n            setChatMessages(prevChatMessages =>\n              prevChatMessages.filter(({ id }) => id !== newRandomMessageId)\n            );\n            timers.current = timers.current.filter(id => id !== timeOutId);\n          }, 5000);\n          timers.current.push(timeOutId);\n          setUnreadMessagesCount(0);\n        }}\n        tabIndex={0}\n        ref={conversationRef}\n        messages={[...chatMessages, ...typingIndicators]}\n      />\n    </ChatBody>\n  );\n\n  const chatComposerImperativeHandleRef = useRef<ChatComposerImperativeHandleProps>(null);\n  const phrase = text('Phrase', 'How can I help you?');\n  button('Push prase at start', () => {\n    if (chatComposerImperativeHandleRef.current) {\n      chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'start');\n    }\n    return false;\n  });\n  button('Push prase at end', () => {\n    if (chatComposerImperativeHandleRef.current) {\n      chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'end');\n    }\n    return false;\n  });\n  button('Push prase at cursor', () => {\n    if (chatComposerImperativeHandleRef.current) {\n      chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'cursor');\n    }\n    return false;\n  });\n\n  const [mountPopover, setMountPopover] = useState(false);\n  const specialKeysConfig = {\n    keys: ['//'],\n    onSpecialKey: (e: SyntheticEvent<HTMLTextAreaElement>, key: string) => {\n      action(`Event is  ${e}`)();\n      action(`Typed special key is ${key}`)();\n      if (chatComposerImperativeHandleRef.current) {\n        setMountPopover(!mountPopover);\n      }\n    }\n  };\n\n  const insertPhrasesMessage = (message: string) => {\n    if (chatComposerImperativeHandleRef.current) {\n      chatComposerImperativeHandleRef.current.appendToMessage(message, 'specialKey');\n      setMountPopover(false);\n    }\n  };\n\n  useOuterEvent(\n    'mousedown',\n    [chatComposerImperativeHandleRef?.current?.chatComposerRef?.current as Element],\n    () => {\n      setMountPopover(false);\n    }\n  );\n\n  const footer = (\n    <ChatComposer\n      ref={chatComposerImperativeHandleRef}\n      maxAttachments={number('Max Attachments', attachments.length)}\n      attachments={attachments}\n      specialKeysConfig={specialKeysConfig}\n      showEmoji\n      disabled={disableChat}\n      onAddAttachment={() => {\n        setAttachments([\n          ...attachments,\n          {\n            id: `${attachments.length} statement.pdf`,\n            name: `${attachments.length} statement.pdf`,\n            onDelete: onDeleteAttachment\n          }\n        ]);\n      }}\n      maxLength={maxLength}\n      placeholder={placeHolder}\n      defaultMessage={defaultMessage}\n      onSend={message => {\n        action(`onAppendMessage: ${message}`)();\n        appendMessage({\n          ...participants.sender,\n          type: 'message',\n          message,\n          timeStamp: '1:45 PM'\n        });\n      }}\n    >\n      <MenuButton text='Phrases' actions={[]} disabled={disableChat} />\n      <MenuButton text='Page push' actions={[]} disabled={disableChat} />\n      <Popover\n        show={mountPopover}\n        target={chatComposerImperativeHandleRef?.current?.textAreaRef?.current as Element}\n        placement='top-start'\n      >\n        <Menu\n          scrollAt={20}\n          items={ChatMockData.phrasesDisplayNames.map((name, idx) => ({\n            primary: name,\n            id: idx.toString(),\n            onClick: () => insertPhrasesMessage(ChatMockData.phrasesMessages[idx])\n          }))}\n        />\n      </Popover>\n    </ChatComposer>\n  );\n\n  button('Toggle suggested replies', () => {\n    setShowSuggestedReplies(show => !show);\n    return false;\n  });\n\n  const suggestedReplyPicker =\n    suggestedReplies.length > 0 && showSuggestedReplies ? (\n      <SuggestedReplyPicker\n        replies={suggestedReplies}\n        onSelect={(suggestedReply: SuggestedReply) => {\n          chatComposerImperativeHandleRef.current?.appendToMessage(\n            suggestedReply.message,\n            'cursor'\n          );\n          setShowSuggestedReplies(false);\n        }}\n        onDismiss={() => {\n          setShowSuggestedReplies(false);\n        }}\n      />\n    ) : undefined;\n  const fetchGoogleSprite = () => {\n    return 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/64.png';\n  };\n\n  return (\n    <EmojiContext.Provider value={{ set: 'google', spriteSrcResolver: fetchGoogleSprite }}>\n      <Flex\n        container={{\n          justify: 'center'\n        }}\n        style={{\n          height: 'calc(100vh)',\n          width: chatWidth,\n          margin: 'auto'\n        }}\n      >\n        <Chat\n          utility={utilityComp}\n          header={header}\n          banner={showChatBanner ? chatBanner : undefined}\n          body={body}\n          footer={footer}\n          suggestedReplyPicker={suggestedReplyPicker}\n        />\n      </Flex>\n    </EmojiContext.Provider>\n  );\n};\n\nStandardChat.parameters = {\n  layout: 'fullscreen'\n};\n\n/** *************************** Standard Chat component - END ************************ */\n"]}