@pega/cosmos-react-demos 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

@@ -0,0 +1,585 @@
+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, 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, 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',
+    component: Chat
+};
+export const ChatHeaderDemo = (args) => {
+    const { title, icon, customer, authenticated } = args;
+    const [contextItems, setContextItems] = useState([]);
+    const [loading, setLoading] = useState(false);
+    return (_jsx(ChatHeader, { title: title, icon: icon || 'chat', actions: [
+            { id: 'action-1', primary: 'Transfer' },
+            { id: 'action-2', primary: 'End chat' }
+        ], sentiment: {
+            variant: 'positive',
+            'aria-label': 'Sentiment is positive'
+        }, customer: customer, authenticated: authenticated, context: {
+            items: contextItems,
+            onClick: () => {
+                setLoading(true);
+                setTimeout(() => {
+                    setContextItems(contextItemsMock);
+                    setLoading(false);
+                }, 1000);
+            },
+            loading
+        } }));
+};
+ChatHeaderDemo.args = {
+    title: 'Live chat',
+    icon: 'chat',
+    customer: 'Ginger Ventura',
+    authenticated: true
+};
+ChatHeaderDemo.argTypes = {
+    title: { control: { type: 'text' } },
+    icon: { control: { type: 'text' }, type: { name: 'string', required: false } },
+    customer: { control: { type: 'text' } },
+    authenticated: { control: { type: 'boolean' }, type: { name: 'string', required: false } }
+};
+export const MessageDemo = (args) => {
+    const actions = [
+        {
+            text: 'Associate with case',
+            id: 'Associate with case',
+            onClick: () => {
+                action('Associate with case');
+            }
+        },
+        {
+            text: 'Download',
+            id: 'Download',
+            onClick: () => {
+                action('Download');
+            }
+        }
+    ];
+    const attachments = [
+        {
+            id: '2499167340',
+            name: 'Location',
+            icon: 'document',
+            meta: 'PNG 0.1 MB',
+            thumbnail: 'https://pegasystems.github.io/uplus-wss/health_provider/img/secondary-options.jpg',
+            actions
+        },
+        {
+            id: '2499167341',
+            name: 'FAQ with detailed terms and conditions of the policy',
+            icon: 'document-pdf',
+            meta: 'PDF 0.7 MB',
+            actions
+        }
+    ];
+    const mediaPageLinks = [
+        {
+            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 (_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 = {
+    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 = {
+    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 }));
+SystemMessageDemo.args = {
+    message: 'John Brown has joined',
+    variant: 'secondary',
+    timestamp: '10:00 AM'
+};
+SystemMessageDemo.argTypes = {
+    message: { control: { type: 'text' } },
+    variant: { options: ['primary', 'secondary'], control: { type: 'select' } },
+    timestamp: { control: { type: 'text' } }
+};
+export const TypeIndicatorDemo = (args) => {
+    return (_jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: args.message, senderId: 'johnBrown', senderType: 'agent' }));
+};
+TypeIndicatorDemo.args = {
+    message: ''
+};
+TypeIndicatorDemo.argTypes = {
+    message: { control: { type: 'text' } }
+};
+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'), disabled: args.disableButton }));
+};
+SuggestedReplyPickerDemo.args = {
+    showNotification: false,
+    singleSuggestedReply: false,
+    noSuggestedReplies: false,
+    disableButton: false
+};
+SuggestedReplyPickerDemo.argTypes = {
+    showNotification: { type: 'boolean' },
+    singleSuggestedReply: { type: 'boolean' },
+    noSuggestedReplies: { type: 'boolean' },
+    disableButton: { 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 = {
+    maxAttachments: 2
+};
+ChatComposerDemo.argTypes = {
+    maxAttachments: { control: { type: 'number' } }
+};
+export const StandardChat = (args) => {
+    const ChatMockDataClone = useMemo(() => {
+        return JSON.parse(JSON.stringify(ChatMockData));
+    }, [ChatMockData]);
+    const Channels = {
+        label: 'Channel',
+        options: {
+            LiveChat: {
+                title: 'Live chat',
+                icon: 'chat'
+            },
+            Twitter: {
+                title: 'Twitter chat',
+                icon: 'twitter'
+            },
+            Facebook: {
+                title: 'Facebook messenger',
+                icon: 'facebook'
+            }
+        }
+    };
+    const { chatMessages: mockChatMessagesJson, defaultAttachments, suggestedReplies } = ChatMockDataClone;
+    const { create } = useModalManager();
+    const MyModal = () => {
+        const { dismiss } = useModalContext();
+        const { push } = useToaster();
+        return (_jsx(Modal, { heading: 'Associate with case', actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => {
+                            dismiss();
+                            push({ content: 'Cancelled' });
+                        }, children: "Cancel" }), _jsx(Button, { variant: 'primary', onClick: () => {
+                            dismiss();
+                            push({ content: 'Successfully Submitted!!' });
+                        }, children: "Submit" })] }), center: true, children: _jsxs(Flex, { container: { gap: 2, direction: 'column' }, children: [_jsx(SummaryItem, { primary: _jsx(Text, { variant: 'secondary', children: "Security policy" }), secondary: _jsx(Text, { variant: 'secondary', children: "PNG - 6.1MB" }), visual: _jsx(Icon, { name: 'document-doc' }) }), _jsxs(Select, { label: 'Select a service case', style: { width: '15rem' }, children: [_jsx(Option, { value: '', children: "Select\u2026" }), _jsx(Option, { value: 'Make payment', selected: true, children: "Make payment" }), _jsx(Option, { value: 'Facilities', children: "Facilities" })] })] }) }));
+    };
+    const onAssociateWithCase = () => {
+        create(MyModal);
+    };
+    const actions = [
+        {
+            text: 'Associate with case',
+            id: 'Associate with case',
+            onClick: () => {
+                action('Associate with case');
+                onAssociateWithCase();
+            }
+        },
+        {
+            text: 'Download',
+            id: 'Download',
+            onClick: () => {
+                action('Download');
+            }
+        }
+    ];
+    const mockChatMessages = useMemo(() => {
+        return [
+            ...mockChatMessagesJson.map(message => {
+                const { messagePrivacy, ...restMessageData } = message;
+                if (messagePrivacy) {
+                    restMessageData.messageHeader = {
+                        content: _jsx("span", { children: messagePrivacy }),
+                        meta: _jsx(Link, { href: '/', children: "I-12345" })
+                    };
+                }
+                if (restMessageData.attachments) {
+                    restMessageData.attachments = restMessageData.attachments.map((item) => {
+                        return {
+                            ...item,
+                            actions
+                        };
+                    });
+                }
+                return restMessageData;
+            })
+        ];
+    }, []);
+    const conversationRef = useRef(null);
+    const timers = useRef([]);
+    useEffect(() => {
+        return () => {
+            timers.current.forEach(clearTimeout);
+        };
+    }, []);
+    const [attachments, setAttachments] = useState(defaultAttachments);
+    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]);
+    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) {
+            setUnreadMessageCount(prevCount => prevCount + 1);
+        }
+    };
+    useEffect(() => {
+        if (args.simulateConversation) {
+            const timeOutId = setTimeout(() => {
+                if (mockChatMessages.length) {
+                    appendMessage(mockChatMessages.shift());
+                }
+            }, 1500);
+            return () => {
+                clearTimeout(timeOutId);
+            };
+        }
+    }, [chatMessages, args.simulateConversation]);
+    const chatBanner = {
+        messages: ['This is a public interaction and any responses will be public and visible'],
+        variant: 'warning'
+    };
+    const bodyProps = {
+        unreadMessageCount,
+        handle: conversationRef,
+        transcripts: [
+            { id: createUID(), messages: BotConversation },
+            { id: createUID(), messages: ClaimsAgentConversation }
+        ],
+        liveChat: !args.simulateConversation && args.typingIndicator
+            ? [
+                ...chatMessages,
+                {
+                    id: 'typingMessage',
+                    type: 'typing',
+                    avatarInfo: {
+                        name: 'Ginger Ventura'
+                    },
+                    message: args.message,
+                    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 = {
+        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 [search, setSearch] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const searchEleRef = useRef(null);
+    const [announcement, setAnnouncement] = useState('');
+    const searchRegex = useMemo(() => {
+        const escapedSearch = search.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
+        return new RegExp(escapedSearch);
+    }, [search]);
+    const itemsToRender = useMemo(() => {
+        return menuHelpers.mapTree(search
+            ? menuHelpers.flatten(phrasesDisplayNames).filter(({ primary }) => {
+                return searchRegex.test(primary);
+            })
+            : phrasesDisplayNames, item => {
+            return {
+                ...item
+            };
+        });
+    }, [search, phrasesDisplayNames, searchRegex]);
+    useEffect(() => {
+        if (isOpen) {
+            searchEleRef?.current?.focus();
+        }
+    }, [isOpen, searchEleRef.current]);
+    const menuID = createUID();
+    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('');
+    });
+    useEscape(() => {
+        setIsOpen(false);
+    });
+    const pagePushItemsRender = useMemo(() => {
+        return pagePushList.map(item => {
+            return { id: item.id, primary: item.message };
+        });
+    }, [pagePushList]);
+    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);
+                        setSearch('');
+                    }, accent: search ? searchRegex : undefined, focusControlEl: searchEleRef.current || undefined, footer: _jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, role: 'searchbox', searchInputAriaLabel: 'Start typing to search.' }) }) }), _jsx(MenuButton, { text: 'Page push', disabled: args.disableChat, menu: {
+                    id: menuID,
+                    listId: menuListID,
+                    mode: 'action',
+                    variant: 'flyout',
+                    items: pagePushItemsRender,
+                    role: 'listbox',
+                    onItemClick: id => {
+                        setAnnouncement('Link inserted');
+                        setChatMessages(prevChatMessages => [
+                            ...prevChatMessages,
+                            pagePushList.filter(item => item.id === id)[0]
+                        ]);
+                    }
+                } }), _jsx(Popover, { show: mountPopover, target: chatComposerImperativeHandleRef?.current?.textAreaRef?.current, placement: 'top-start', children: _jsx(Menu, { scrollAt: 20, items: itemsToRender, onItemClick: id => {
+                        insertPhrasesMessage(phrasesMessages.filter(message => message.id === id)[0].message);
+                        setAnnouncement('Phrase inserted');
+                    }, focusControlEl: chatComposerImperativeHandleRef?.current?.textAreaRef?.current }) })] }));
+    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');
+        },
+        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'
+            });
+        }
+    };
+    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: args.chatHeight || 'calc(100vh)',
+                width: args.chatWidth || '30rem',
+                margin: 'auto'
+            }, 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,
+    selectedChannel: 'LiveChat',
+    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,
+    loading: false
+};
+StandardChat.argTypes = {
+    maxAttachments: { control: { type: 'number' } },
+    selectedChannel: { options: ['LiveChat', 'Twitter', 'Facebook'], control: { type: 'select' } },
+    showChatBanner: { control: { type: 'boolean' } },
+    disableChat: { control: { type: 'boolean' } },
+    simulateConversation: { control: { type: 'boolean' } },
+    typingIndicator: { control: { type: 'boolean' } },
+    message: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    defaultMessage: { control: { type: 'text' } },
+    maxLength: { control: { type: 'number' } },
+    loading: { control: { type: 'boolean' } }
+};
+StandardChat.parameters = {
+    layout: 'fullscreen'
+};
+//# sourceMappingURL=Chat.stories.js.map