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

package/jsx/social/Chat/Chat.stories.jsx

@@ -1,624 +0,0 @@
-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 (<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 (<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' }
-};
-export const SystemMessageDemo = (args) => (<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 (<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 (<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) => (<ChatComposer maxAttachments={args.maxAttachments} attachments={ChatMockData.defaultAttachments} maxLength={256} placeholder='Type here to send message' onSend={() => { }}>
-    <MenuButton text='Phrases' menu={{ items: [] }}/>
-    <MenuButton text='Page Push' menu={{ items: [] }}/>
-  </ChatComposer>);
-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 (<Modal heading='Associate with case' actions={<>
-            <Button onClick={() => {
-                    dismiss();
-                    push({ content: 'Cancelled' });
-                }}>
-              Cancel
-            </Button>
-            <Button variant='primary' onClick={() => {
-                    dismiss();
-                    push({ content: 'Successfully Submitted!!' });
-                }}>
-              Submit
-            </Button>
-          </>} center>
-        <Flex container={{ gap: 2, direction: 'column' }}>
-          <SummaryItem primary={<Text variant='secondary'>Security policy</Text>} secondary={<Text variant='secondary'>PNG - 6.1MB</Text>} visual={<Icon name='document-doc'/>}/>
-          <Select label='Select a service case' style={{ width: '15rem' }}>
-            <Option value=''>Select…</Option>
-            <Option value='Make payment' selected>
-              Make payment
-            </Option>
-            <Option value='Facilities'>Facilities</Option>
-          </Select>
-        </Flex>
-      </Modal>);
-    };
-    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: <span>{messagePrivacy}</span>,
-                        meta: <Link href='/'>I-12345</Link>
-                    };
-                }
-                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 = (<>
-      <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='secondary' disabled={args.disableChat}>
-        <Flex container={{ alignItems: 'center', gap: 1 }}>
-          <Text>Phrases</Text>
-          <Icon name='arrow-micro-down'/>
-        </Flex>
-      </Button>
-
-      <Popover show={isOpen} ref={setPopoverEl} target={buttonEl}>
-        <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={<SearchInput ref={searchEleRef} onSearchChange={setSearch} value={search} role='searchbox' searchInputAriaLabel='Start typing to search.'/>}/>
-      </Popover>
-
-      <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]
-                ]);
-            }
-        }}/>
-      <Popover show={mountPopover} target={chatComposerImperativeHandleRef?.current?.textAreaRef?.current} placement='top-start'>
-        <Menu scrollAt={20} items={itemsToRender} onItemClick={id => {
-            insertPhrasesMessage(phrasesMessages.filter(message => message.id === id)[0].message);
-            setAnnouncement('Phrase inserted');
-        }} focusControlEl={chatComposerImperativeHandleRef?.current?.textAreaRef?.current}/>
-      </Popover>
-    </>);
-    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 (<EmojiContext.Provider value={emojiCtx}>
-      <Flex container={{
-            justify: 'center'
-        }} style={{
-            height: args.chatHeight || 'calc(100vh)',
-            width: args.chatWidth || '30rem',
-            margin: 'auto'
-        }}>
-        <VisuallyHiddenText aria-live='assertive'>{announcement}</VisuallyHiddenText>
-        <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}/>
-      </Flex>
-    </EmojiContext.Provider>);
-};
-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.jsx.map