@pega/cosmos-react-demos 2.1.2 → 3.0.0-dev.2.0

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

@@ -1,36 +1,18 @@
 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 { Chat, ChatHeader, ChatBody, ChatComposer, ChatTranscript, Message, MessageList, 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 = () => {
+export const ChatHeaderDemo = () => {
     const actionsConfig = (<Flex>
       <Button variant='simple' aria-label='Show transcripts'>
         <Flex container={{
@@ -47,27 +29,16 @@ export const chatHeader = () => {
     </Flex>);
     return (<ChatHeader title='Live Chat' icon='chat-solid' aria-label='Chat header' actions={actionsConfig}/>);
 };
-export const MessageList = () => {
+export const MessageListDemo = () => {
     const messages = ChatMockData.chatMessages;
     const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
     return (<Flex container style={{ height: '80vh' }}>
-      <MessageListComp tabIndex={0} messages={messages} unReadMessageCount={unReadMessageCount} onScrollToButtonClick={() => {
+      <MessageList 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');
+export const MessageDemo = (args) => {
     const attachments = [
         {
             id: '2499167340',
@@ -93,27 +64,40 @@ export const messageComponent = () => {
     ];
     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}/>
+      <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={args.variant} direction={args.direction}/>
       <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}/>
+      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} pagePushLinks={pagePushLinks} variant={args.variant} direction={args.direction}/>
       <br />
       
-      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} variant={variantProp} direction={directionProp}/>
+      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} variant={args.variant} direction={args.direction}/>
     </>);
 };
-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}/>;
+MessageDemo.args = {
+    variant: 'receiver',
+    direction: 'in'
 };
-export const chatTranscripts = () => {
+MessageDemo.argTypes = {
+    variant: { options: ['receiver', 'sender', 'other'], control: { type: 'select' } },
+    direction: { options: ['in', 'out'], control: { type: 'select' } }
+};
+export const SystemMessageDemo = () => (<SystemMessage message='John Brown has joined' timeStamp='10:00 AM'/>);
+export const TypeIndicatorDemo = (args) => {
+    return <TypeIndicator avatarInfo={{ name: 'John Brown' }} message={args.message}/>;
+};
+TypeIndicatorDemo.args = {
+    message: ''
+};
+TypeIndicatorDemo.argTypes = {
+    message: { control: { type: 'text' } }
+};
+export const ChatTranscriptsDemo = () => {
     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 = () => {
+export const TranscriptMessageDemo = () => (<TranscriptMessage timeStamp='01:20 PM' variant='bot' message='Hello… This is bot. How can I help you? Please select your category.'/>);
+export const SuggestedReplyPickerDemo = () => {
     const suggestedReplies = [
         {
             id: createUID(),
@@ -130,27 +114,37 @@ export const suggestedReplyPickerComponent = () => {
             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={() => { }}>
+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>);
-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' }) => {
+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-solid'
+            },
+            Twitter: {
+                title: 'Twitter chat',
+                icon: 'twitter'
+            },
+            Facebook: {
+                title: 'Facebook messenger',
+                icon: 'facebook'
+            }
+        }
+    };
     const { participants, chatMessages: mockChatMessagesJson, transcripts, defaultAttachments, suggestedReplies } = ChatMockDataClone;
     const conversationRatingMessage = {
         id: createUID(),
@@ -195,25 +189,11 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
             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 [chatMessages, setChatMessages] = useState(args.simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages);
     const onDeleteAttachment = useCallback((name) => {
         setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
     }, [setAttachments]);
@@ -252,7 +232,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         }
     };
     useEffect(() => {
-        if (simulateConversation) {
+        if (args.simulateConversation) {
             const timeOutId = setTimeout(() => {
                 if (mockChatMessages.length) {
                     appendMessage(mockChatMessages.shift());
@@ -262,49 +242,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 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`
-        };
-    });
+    }, [chatMessages, args.simulateConversation]);
     const [openPopover, setOpenPopover] = useState(false);
     const [popoverRef, setPopoverRef] = useElement();
     const [buttonRef, setButtonRef] = useElement();
@@ -358,7 +296,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         if (openPopover)
             setOpenPopover(false);
     });
-    const header = (<ChatHeader title={Channels.options[selectedChannel].title} icon={Channels.options[selectedChannel].icon} aria-label='Chat header' actions={<Flex>
+    const header = (<ChatHeader title={Channels.options[args.selectedChannel || 'LiveChat'].title} icon={Channels.options[args.selectedChannel || 'LiveChat'].icon} aria-label='Chat header' actions={<Flex>
           <Button variant='simple' onClick={() => setShowTranscripts(!showTranscripts)} aria-label='Show transcripts'>
             <Flex container={{
                 gap: 1,
@@ -374,10 +312,15 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
           <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]}/>
+              <FieldValueList variant='inline' fields={additionalInfo.options[args.selectedChannel || 'LiveChat']}/>
             </Flex>
           </Popover>
-          <MenuButton text='More actions' icon='more' iconOnly variant='simple' portal menu={{ items: actions }}/>
+          <MenuButton text='More actions' icon='more' iconOnly variant='simple' portal menu={{
+                items: [
+                    { primary: 'Transfer', id: 'transcript', onClick: action('Clicked Transfer') },
+                    { primary: 'End chat', id: 'endChat', onClick: action('Clicked End chat') }
+                ]
+            }}/>
         </Flex>}/>);
     const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);
     const transcriptsContainerRef = useRef(null);
@@ -414,7 +357,6 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
             })}
       </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'],
@@ -422,7 +364,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         variant: 'warning'
     };
     const body = (<ChatBody>
-      <MessageListComp unReadMessageCount={unreadMessagesCount} onScrollToButtonClick={() => {
+      <MessageList unReadMessageCount={unreadMessagesCount} onScrollToButtonClick={() => {
             const newRandomMessageId = Math.random().toString(36).substr(2, 9);
             setChatMessages(prevChatMessages => prevChatMessages.map(message => {
                 if (message.id === NewMessageSeparatorId) {
@@ -436,28 +378,21 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
             }, 5000);
             timers.current.push(timeOutId);
             setUnreadMessagesCount(0);
-        }} tabIndex={0} ref={conversationRef} messages={[...chatMessages, ...typingIndicators]}/>
+        }} tabIndex={0} ref={conversationRef} messages={[
+            ...chatMessages,
+            {
+                id: 'Pegasystems',
+                type: 'typing',
+                avatarInfo: {
+                    name: 'Pegasystems',
+                    imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'
+                },
+                message: args.message,
+                ariaLabel: 'Pegasystems is typing'
+            }
+        ]}/>
     </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: ['//'],
@@ -478,7 +413,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
     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={() => {
+    const footer = (<ChatComposer ref={chatComposerImperativeHandleRef} maxAttachments={args.maxAttachments} attachments={attachments} specialKeysConfig={specialKeysConfig} showEmoji disabled={args.disableChat} onAddAttachment={() => {
             setAttachments([
                 ...attachments,
                 {
@@ -487,7 +422,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                     onDelete: onDeleteAttachment
                 }
             ]);
-        }} maxLength={maxLength} placeholder={placeHolder} defaultMessage={defaultMessage} onSend={message => {
+        }} maxLength={args.maxLength} placeholder={args.placeholder} defaultMessage={args.defaultMessage} onSend={message => {
             action(`onAppendMessage: ${message}`)();
             appendMessage({
                 ...participants.sender,
@@ -496,8 +431,8 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 timeStamp: '1:45 PM'
             });
         }}>
-      <MenuButton text='Phrases' actions={[]} disabled={disableChat}/>
-      <MenuButton text='Page push' actions={[]} disabled={disableChat}/>
+      <MenuButton text='Phrases' actions={[]} disabled={args.disableChat}/>
+      <MenuButton text='Page push' actions={[]} disabled={args.disableChat}/>
       <Popover show={mountPopover} target={chatComposerImperativeHandleRef?.current?.textAreaRef?.current} placement='top-start'>
         <Menu scrollAt={20} items={ChatMockData.phrasesDisplayNames.map((name, idx) => ({
             primary: name,
@@ -506,10 +441,6 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         }))}/>
       </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);
@@ -524,13 +455,35 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
             justify: 'center'
         }} style={{
             height: 'calc(100vh)',
-            width: chatWidth,
+            width: args.chatWidth || '30rem',
             margin: 'auto'
         }}>
-        <Chat utility={utilityComp} header={header} banner={showChatBanner ? chatBanner : undefined} body={body} footer={footer} suggestedReplyPicker={suggestedReplyPicker}/>
+        <Chat utility={utilityComp} header={header} banner={args.showChatBanner ? chatBanner : undefined} body={body} footer={footer} suggestedReplyPicker={suggestedReplyPicker}/>
       </Flex>
     </EmojiContext.Provider>);
 };
+StandardChat.args = {
+    maxAttachments: 2,
+    selectedChannel: 'LiveChat',
+    showChatBanner: true,
+    disableChat: false,
+    simulateConversation: 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
+};
+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' } },
+    message: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    defaultMessage: { control: { type: 'text' } },
+    maxLength: { control: { type: 'number' } }
+};
 StandardChat.parameters = {
     layout: 'fullscreen'
 };