@pega/cosmos-react-demos 2.0.0 → 2.1.3

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

@@ -1,537 +0,0 @@
-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'
-        }
-    }
-};
-export const chatHeader = () => {
-    const actionsConfig = (<Flex>
-      <Button variant='simple' aria-label='Show transcripts'>
-        <Flex container={{
-            gap: 1,
-            alignItems: 'center'
-        }}>
-          <Icon name='chats'/>
-          <Text>Transcripts</Text>
-        </Flex>
-      </Button>
-      <Button variant='simple' icon aria-label='chat info'>
-        <Icon name='information'/>
-      </Button>
-    </Flex>);
-    return (<ChatHeader title='Live Chat' icon='chat-solid' aria-label='Chat header' actions={actionsConfig}/>);
-};
-export const MessageList = () => {
-    const messages = ChatMockData.chatMessages;
-    const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
-    return (<Flex container style={{ height: '80vh' }}>
-      <MessageListComp tabIndex={0} messages={messages} unReadMessageCount={unReadMessageCount} onScrollToButtonClick={() => {
-            setUnReadMessagesCount(0);
-        }}/>
-    </Flex>);
-};
-export const messageComponent = () => {
-    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');
-    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 (<>
-      
-      <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}/>
-      <br />
-      
-      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} pagePushLinks={pagePushLinks} variant={variantProp} direction={directionProp}/>
-      <br />
-      
-      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} variant={variantProp} direction={directionProp}/>
-    </>);
-};
-export const systemMessage = () => (<SystemMessage message='John Brown has joined' timeStamp='10:00 AM'/>);
-export const typeIndicator = () => {
-    const TypeIndicatorMessageProp = text('message', '');
-    return <TypeIndicator avatarInfo={{ name: 'John Brown' }} message={TypeIndicatorMessageProp}/>;
-};
-export const chatTranscripts = () => {
-    return ChatMockData.transcripts.map((transcript) => {
-        return (<ChatTranscript tabIndex={0} title={transcript.title} key={transcript.id} transcript={transcript.data}/>);
-    });
-};
-export const transcriptMessage = () => (<TranscriptMessage timeStamp='01:20 PM' variant='bot' message='Hello… This is bot. How can I help you? Please select your category.'/>);
-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 (<SuggestedReplyPicker replies={suggestedReplies} onSelect={suggestedReply => {
-            action(`Suggested reply picked ${suggestedReply.message}`)();
-        }} onDismiss={action('Suggested reply dismissed')}/>);
-};
-export const chatComposer = () => (<ChatComposer maxAttachments={number('Max Attachments', 2)} attachments={ChatMockData.defaultAttachments} maxLength={256} placeholder='Type here to send message' onSend={() => { }}>
-    <MenuButton text='Phrases' menu={{ items: [] }}/>
-    <MenuButton text='Page Push' menu={{ items: [] }}/>
-  </ChatComposer>);
-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: (<Flex container={{
-                direction: 'column',
-                gap: 1
-            }}>
-        <TextArea placeholder='Please comment…' label='Please comment on our service performance and how we can better serve you. Thank you for your time.'/>
-        <Select label='Is the problem resolved?'>
-          <Option>Yes</Option>
-          <Option>No</Option>
-        </Select>
-        <Flex container={{
-                justify: 'center'
-            }}>
-          <Button variant='primary'>Submit</Button>
-        </Flex>
-      </Flex>)
-    };
-    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>
-                    };
-                }
-                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: <Status variant='urgent'>UNAUTHENTICATED</Status>
-                },
-                {
-                    id: '2',
-                    name: 'Profile name',
-                    value: 'Sara Davis'
-                }
-            ],
-            Twitter: [
-                {
-                    id: '1',
-                    name: 'Session status',
-                    value: <Status variant='urgent'>UNAUTHENTICATED</Status>
-                },
-                {
-                    id: '2',
-                    name: 'Twitter handle',
-                    value: '@Connor'
-                },
-                {
-                    id: '3',
-                    name: 'Followers',
-                    value: '13,556'
-                }
-            ],
-            Facebook: [
-                {
-                    id: '1',
-                    name: 'Session status',
-                    value: <Status variant='urgent'>UNAUTHENTICATED</Status>
-                },
-                {
-                    id: '2',
-                    name: 'Profile name',
-                    value: 'Sara Davis'
-                }
-            ]
-        }
-    };
-    useOuterEvent('mousedown', [popoverRef, buttonRef], () => {
-        if (openPopover)
-            setOpenPopover(false);
-    });
-    const header = (<ChatHeader title={Channels.options[selectedChannel].title} icon={Channels.options[selectedChannel].icon} aria-label='Chat header' actions={<Flex>
-          <Button variant='simple' onClick={() => setShowTranscripts(!showTranscripts)} aria-label='Show transcripts'>
-            <Flex container={{
-                gap: 1,
-                alignItems: 'center'
-            }}>
-              <Icon name='chats'/>
-              <Text>Transcripts</Text>
-            </Flex>
-          </Button>
-          <Button variant='simple' icon aria-label='chat info' ref={setButtonRef} onClick={() => setOpenPopover(current => !current)}>
-            <Icon name='information'/>
-          </Button>
-          <Popover show={openPopover} target={buttonRef} ref={setPopoverRef} arrow placement='bottom-end'>
-            <Flex container={{ direction: 'column', gap: 1, pad: 2 }}>
-              <Text variant='h4'>{additionalInfo.title}</Text>
-              <FieldValueList variant='inline' fields={additionalInfo.options[selectedChannel]}/>
-            </Flex>
-          </Popover>
-          <MenuButton text='More actions' icon='more' iconOnly variant='simple' portal menu={{ items: actions }}/>
-        </Flex>}/>);
-    const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);
-    const transcriptsContainerRef = useRef(null);
-    useOuterEvent('mousedown', [transcriptsContainerRef], () => {
-        setShowTranscripts(false);
-    });
-    const utilityComp = useMemo(() => {
-        return showTranscripts ? (<div ref={transcriptsContainerRef}>
-        {!showEarlierTranscripts && (<Flex container={{
-                    direction: 'column',
-                    alignItems: 'center',
-                    gap: 1
-                }}>
-            <Button icon aria-label='Show earlier transcripts' variant='secondary' onClick={() => {
-                    setShowEarlierTranscripts(!showEarlierTranscripts);
-                }}>
-              <Icon name='caret-up'/>
-            </Button>
-          </Flex>)}
-        {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: <Status variant='warn'>{message.messagePrivacy.privacy}</Status>,
-                            meta: <Link href='/'>I-12345</Link>
-                        };
-                    }
-                    return message;
-                });
-                return (<ChatTranscript tabIndex={0} title={transcript.title} key={transcript.id} transcript={transcriptData}/>);
-            })}
-      </div>) : 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 = (<ChatBody>
-      <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]}/>
-    </ChatBody>);
-    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 = (<ChatComposer ref={chatComposerImperativeHandleRef} maxAttachments={number('Max Attachments', attachments.length)} attachments={attachments} specialKeysConfig={specialKeysConfig} showEmoji 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'
-            });
-        }}>
-      <MenuButton text='Phrases' actions={[]} disabled={disableChat}/>
-      <MenuButton text='Page push' actions={[]} disabled={disableChat}/>
-      <Popover show={mountPopover} target={chatComposerImperativeHandleRef?.current?.textAreaRef?.current} placement='top-start'>
-        <Menu scrollAt={20} items={ChatMockData.phrasesDisplayNames.map((name, idx) => ({
-            primary: name,
-            id: idx.toString(),
-            onClick: () => insertPhrasesMessage(ChatMockData.phrasesMessages[idx])
-        }))}/>
-      </Popover>
-    </ChatComposer>);
-    button('Toggle suggested replies', () => {
-        setShowSuggestedReplies(show => !show);
-        return false;
-    });
-    const suggestedReplyPicker = suggestedReplies.length > 0 && showSuggestedReplies ? (<SuggestedReplyPicker replies={suggestedReplies} onSelect={(suggestedReply) => {
-            chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
-            setShowSuggestedReplies(false);
-        }} onDismiss={() => {
-            setShowSuggestedReplies(false);
-        }}/>) : undefined;
-    const fetchGoogleSprite = () => {
-        return 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/64.png';
-    };
-    return (<EmojiContext.Provider value={{ set: 'google', spriteSrcResolver: fetchGoogleSprite }}>
-      <Flex container={{
-            justify: 'center'
-        }} style={{
-            height: 'calc(100vh)',
-            width: chatWidth,
-            margin: 'auto'
-        }}>
-        <Chat utility={utilityComp} header={header} banner={showChatBanner ? chatBanner : undefined} body={body} footer={footer} suggestedReplyPicker={suggestedReplyPicker}/>
-      </Flex>
-    </EmojiContext.Provider>);
-};
-StandardChat.parameters = {
-    layout: 'fullscreen'
-};
-//# sourceMappingURL=Chat.stories.jsx.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Chat.stories.jsx","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"]}