@pega/cosmos-react-demos 4.0.0-dev.10.1 → 4.0.0-dev.11.0

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

@@ -1,12 +1,12 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, Status, EmojiContext, createUID, useOuterEvent, TextArea, Select, Option, useElement, useModalManager, useModalContext, Modal, SummaryItem, useToaster, SearchInput, menuHelpers, VisuallyHiddenText, Menu, useEscape } from '@pega/cosmos-react-core';
+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, ChatBody, ChatComposer, ChatTranscript, Message, MessageList, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TranscriptMessage, TypeIndicator } from '@pega/cosmos-react-social';
-import { ChatMockData, phrasesDisplayNames, phrasesMessages, pagePushList, contextItems as contextItemsMock } from './Chat.mocks';
+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',
@@ -17,8 +17,8 @@ export const ChatHeaderDemo = (args) => {
     const [contextItems, setContextItems] = useState([]);
     const [loading, setLoading] = useState(false);
     return (<ChatHeader title={title} icon={icon || 'chat'} actions={[
-            { id: 'action-1', text: 'Transfer' },
-            { id: 'action-2', text: 'End chat' }
+            { id: 'action-1', primary: 'Transfer' },
+            { id: 'action-2', primary: 'End chat' }
         ]} sentiment={{
             variant: 'positive',
             'aria-label': 'Sentiment is positive'
@@ -46,16 +46,6 @@ ChatHeaderDemo.argTypes = {
     customer: { control: { type: 'text' } },
     authenticated: { control: { type: 'boolean' }, type: { name: 'string', required: false } }
 };
-export const MessageListDemo = (args) => {
-    const messages = ChatMockData.chatMessages;
-    const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
-    return (<Flex container style={{ height: '80vh' }}>
-      <MessageList tabIndex={0} messages={messages} unReadMessageCount={unReadMessageCount} onScrollToButtonClick={args.onScrollToButtonClick ||
-            (() => {
-                setUnReadMessagesCount(0);
-            })}/>
-    </Flex>);
-};
 export const MessageDemo = (args) => {
     const actions = [
         {
@@ -90,7 +80,7 @@ export const MessageDemo = (args) => {
             actions
         }
     ];
-    const pagePushLinks = [
+    const mediaPageLinks = [
         {
             id: '2499167349',
             href: 'https://collaborate.pega.com/',
@@ -99,37 +89,64 @@ export const MessageDemo = (args) => {
         }
     ];
     return (<>
-      
-      <Message type='message' attachments={attachments} avatarInfo={{ name: 'John Brown' }} 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={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='sender' direction='out' status='undelivered'/>
+      <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 = {
-    variant: 'receiver',
-    direction: 'in'
+    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 = {
-    variant: { options: ['receiver', 'sender', 'other'], control: { type: 'select' } },
-    direction: { options: ['in', 'out'], control: { type: 'select' } }
+    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'],
+        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}/>);
+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'
+    timestamp: '10:00 AM'
 };
 SystemMessageDemo.argTypes = {
     message: { control: { type: 'text' } },
     variant: { options: ['primary', 'secondary'], control: { type: 'select' } },
-    timeStamp: { control: { type: 'text' } }
+    timestamp: { control: { type: 'text' } }
 };
 export const TypeIndicatorDemo = (args) => {
-    return <TypeIndicator avatarInfo={{ name: 'John Brown' }} message={args.message}/>;
+    return (<TypeIndicator avatarInfo={{ name: 'John Brown' }} message={args.message} senderId='johnBrown' senderType='agent'/>);
 };
 TypeIndicatorDemo.args = {
     message: ''
@@ -137,56 +154,8 @@ TypeIndicatorDemo.args = {
 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 TranscriptMessageDemo = (args) => (<TranscriptMessage timeStamp={args.timeStamp} variant={args.variant} message={args.message} transcriptHeader={args.transcriptHeaderContent || args.transcriptHeaderMeta
-        ? { content: args.transcriptHeaderContent, meta: args.transcriptHeaderMeta }
-        : undefined} avatarInfo={args.avatarInfoName
-        ? {
-            name: args.avatarInfoName,
-            imageSrc: args.avatarInfoImageSrc
-        }
-        : undefined}/>);
-TranscriptMessageDemo.args = {
-    message: 'Hello… This is bot. How can I help you? Please select your category.',
-    variant: 'bot',
-    timeStamp: '01:20 PM',
-    transcriptHeaderContent: undefined,
-    transcriptHeaderMeta: undefined,
-    avatarInfoName: undefined,
-    avatarInfoImageSrc: undefined
-};
-TranscriptMessageDemo.argTypes = {
-    message: { type: { name: 'string', required: true }, control: { type: 'text' } },
-    variant: {
-        type: { name: 'string', required: true },
-        control: { type: 'select', options: ['user', 'bot', 'question'] }
-    },
-    timeStamp: { type: { name: 'string', required: true }, control: { type: 'text' } },
-    transcriptHeaderContent: { type: { name: 'string', required: false }, control: { type: 'text' } },
-    transcriptHeaderMeta: { type: { name: 'string', required: false }, control: { type: 'text' } },
-    avatarInfoName: { type: { name: 'string', required: false }, control: { type: 'text' } },
-    avatarInfoImageSrc: { type: { name: 'string', required: false }, control: { type: 'text' } }
-};
 export const SuggestedReplyPickerDemo = () => {
-    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 => {
+    return (<SuggestedReplyPicker replies={ChatMockData.suggestedReplies} onSelect={suggestedReply => {
             action(`Suggested reply picked ${suggestedReply.message}`)();
         }} onDismiss={action('Suggested reply dismissed')}/>);
 };
@@ -221,28 +190,7 @@ export const StandardChat = (args) => {
             }
         }
     };
-    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 { chatMessages: mockChatMessagesJson, defaultAttachments, suggestedReplies } = ChatMockDataClone;
     const { create } = useModalManager();
     const MyModal = () => {
         const { dismiss } = useModalContext();
@@ -312,8 +260,7 @@ export const StandardChat = (args) => {
                     });
                 }
                 return restMessageData;
-            }),
-            conversationRatingMessage
+            })
         ];
     }, []);
     const conversationRef = useRef(null);
@@ -324,10 +271,21 @@ export const StandardChat = (args) => {
         };
     }, []);
     const [showSuggestedReplies, setShowSuggestedReplies] = useState(true);
-    const [showTranscripts, setShowTranscripts] = useState(false);
     const [attachments, setAttachments] = useState(defaultAttachments);
-    const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
-    const [chatMessages, setChatMessages] = useState(args.simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages);
+    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 onDeleteAttachment = useCallback((name) => {
         setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
     }, [setAttachments]);
@@ -362,7 +320,7 @@ export const StandardChat = (args) => {
             return [...prevChatMessages, newMockMessage];
         });
         if (!incrementUnreadMessageCount) {
-            setUnreadMessagesCount(prevCount => prevCount + 1);
+            setUnreadMessageCount(prevCount => prevCount + 1);
         }
     };
     useEffect(() => {
@@ -377,48 +335,31 @@ export const StandardChat = (args) => {
             };
         }
     }, [chatMessages, args.simulateConversation]);
-    const header = (<ChatHeaderDemo title={Channels.options[args.selectedChannel || 'LiveChat'].title} icon={Channels.options[args.selectedChannel || 'LiveChat'].icon} customer='Ginger Ventura' authenticated/>);
-    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 chatBanner = {
         messages: ['This is a public interaction and any responses will be public and visible'],
         variant: 'warning'
     };
-    const body = (<ChatBody>
-      <MessageList unReadMessageCount={unreadMessagesCount} onScrollToButtonClick={() => {
+    const bodyProps = {
+        unreadMessageCount,
+        handle: conversationRef,
+        transcripts: [
+            { id: createUID(), messages: BotConversation },
+            { id: createUID(), messages: ClaimsAgentConversation }
+        ],
+        liveChat: [
+            ...chatMessages,
+            {
+                id: 'typingMessage',
+                type: 'typing',
+                avatarInfo: {
+                    name: 'Ginger Ventura'
+                },
+                message: args.message,
+                senderId: 'gingerVentura',
+                senderType: 'customer'
+            }
+        ],
+        onScrollToButtonClick: () => {
             const newRandomMessageId = Math.random().toString(36).substr(2, 9);
             setChatMessages(prevChatMessages => prevChatMessages.map(message => {
                 if (message.id === NewMessageSeparatorId) {
@@ -431,21 +372,12 @@ export const StandardChat = (args) => {
                 timers.current = timers.current.filter(id => id !== timeOutId);
             }, 5000);
             timers.current.push(timeOutId);
-            setUnreadMessagesCount(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>);
+            setUnreadMessageCount(0);
+        },
+        loadMore: action('Load more'),
+        offset: 5,
+        loading: args.loading
+    };
     const chatComposerImperativeHandleRef = useRef(null);
     const [mountPopover, setMountPopover] = useState(false);
     const specialKeysConfig = {
@@ -507,24 +439,7 @@ export const StandardChat = (args) => {
             return { id: item.id, primary: item.message };
         });
     }, [pagePushList]);
-    const footer = (<ChatComposer ref={chatComposerImperativeHandleRef} maxAttachments={args.maxAttachments} attachments={attachments} specialKeysConfig={specialKeysConfig} showEmoji 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({
-                ...participants.sender,
-                type: 'message',
-                message,
-                timeStamp: '1:45 PM'
-            });
-        }}>
+    const composerChildren = (<>
       <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='secondary' disabled={args.disableChat}>
         <Flex container={{ alignItems: 'center', gap: 1 }}>
           <Text>Phrases</Text>
@@ -562,13 +477,52 @@ export const StandardChat = (args) => {
             setAnnouncement('Phrase inserted');
         }} focusControlEl={chatComposerImperativeHandleRef?.current?.textAreaRef?.current}/>
       </Popover>
-    </ChatComposer>);
-    const suggestedReplyPicker = suggestedReplies.length > 0 && showSuggestedReplies ? (<SuggestedReplyPicker replies={suggestedReplies} onSelect={(suggestedReply) => {
+    </>);
+    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');
             setShowSuggestedReplies(false);
-        }} onDismiss={() => {
+        },
+        onDismiss: () => {
             setShowSuggestedReplies(false);
-        }}/>) : undefined;
+        }
+    };
     const fetchGoogleSprite = () => {
         return 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/64.png';
     };
@@ -576,12 +530,35 @@ export const StandardChat = (args) => {
       <Flex container={{
             justify: 'center'
         }} style={{
-            height: 'calc(100vh)',
+            height: args.chatHeight || 'calc(100vh)',
             width: args.chatWidth || '30rem',
             margin: 'auto'
         }}>
         <VisuallyHiddenText aria-live='assertive'>{announcement}</VisuallyHiddenText>
-        <Chat utility={utilityComp} header={header} banner={args.showChatBanner ? chatBanner : undefined} body={body} footer={footer} suggestedReplyPicker={suggestedReplyPicker}/>
+        <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={suggestedReplies.length > 0 && showSuggestedReplies
+            ? suggestedReplyPickerProps
+            : undefined} composer={composerProps}/>
       </Flex>
     </EmojiContext.Provider>);
 };
@@ -594,7 +571,8 @@ StandardChat.args = {
     message: '',
     placeholder: 'Enter message',
     defaultMessage: 'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!',
-    maxLength: 280
+    maxLength: 280,
+    loading: false
 };
 StandardChat.argTypes = {
     maxAttachments: { control: { type: 'number' } },
@@ -605,7 +583,8 @@ StandardChat.argTypes = {
     message: { control: { type: 'text' } },
     placeholder: { control: { type: 'text' } },
     defaultMessage: { control: { type: 'text' } },
-    maxLength: { control: { type: 'number' } }
+    maxLength: { control: { type: 'number' } },
+    loading: { control: { type: 'boolean' } }
 };
 StandardChat.parameters = {
     layout: 'fullscreen'