@pega/cosmos-react-demos 2.0.0 → 2.1.3

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

@@ -0,0 +1,435 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, 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, 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
+};
+/** *********************** ChatHeader component - START *********************** */
+export const ChatHeaderDemo = () => {
+    const actionsConfig = (_jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
+                        gap: 1,
+                        alignItems: 'center'
+                    }, children: [_jsx(Icon, { name: 'chats' }, void 0), _jsx(Text, { children: "Transcripts" }, void 0)] }, void 0) }, void 0), _jsx(Button, { variant: 'simple', icon: true, "aria-label": 'chat info', children: _jsx(Icon, { name: 'information' }, void 0) }, void 0)] }, void 0));
+    return (_jsx(ChatHeader, { title: 'Live Chat', icon: 'chat-solid', "aria-label": 'Chat header', actions: actionsConfig }, void 0));
+};
+/** ***************************** ChatHeader component - END ******************* */
+/** **************************** MessageList component - START ************************* */
+export const MessageListDemo = () => {
+    const messages = ChatMockData.chatMessages;
+    const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
+    return (_jsx(Flex, { container: true, style: { height: '80vh' }, children: _jsx(MessageList, { tabIndex: 0, messages: messages, unReadMessageCount: unReadMessageCount, onScrollToButtonClick: () => {
+                setUnReadMessagesCount(0);
+            } }, void 0) }, void 0));
+};
+/** **************************** MessageList component - END **************************** */
+/** ***************************** Message component - START ********************** */
+export const MessageDemo = (args) => {
+    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 (_jsxs(_Fragment, { children: [_jsx(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 }, void 0), _jsx("br", {}, void 0), _jsx(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 }, void 0), _jsx("br", {}, void 0), _jsx(Message, { type: 'message', message: 'Hi, Welcome to u-plus. How can I help you ?', avatarInfo: { name: 'John Brown' }, variant: args.variant, direction: args.direction }, void 0)] }, void 0));
+};
+MessageDemo.args = {
+    variant: 'receiver',
+    direction: 'in'
+};
+MessageDemo.argTypes = {
+    variant: { options: ['receiver', 'sender', 'other'], control: { type: 'select' } },
+    direction: { options: ['in', 'out'], control: { type: 'select' } }
+};
+/** ***************************** Message component - END *********************** */
+/** **************************** SystemMessage component - START ***************** */
+export const SystemMessageDemo = () => (_jsx(SystemMessage, { message: 'John Brown has joined', timeStamp: '10:00 AM' }, void 0));
+export const TypeIndicatorDemo = (args) => {
+    return _jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: args.message }, void 0);
+};
+TypeIndicatorDemo.args = {
+    message: ''
+};
+TypeIndicatorDemo.argTypes = {
+    message: { control: { type: 'text' } }
+};
+/** *************************** TypeIndicator component - END *********************** */
+/** ************************** ChatTranscripts component - START ********************* */
+export const ChatTranscriptsDemo = () => {
+    return ChatMockData.transcripts.map((transcript) => {
+        return (_jsx(ChatTranscript, { tabIndex: 0, title: transcript.title, transcript: transcript.data }, transcript.id));
+    });
+};
+/** **************************** ChatTranscripts component - END ************************ */
+/** *************************** TranscriptMessage component - START ****************** */
+export const TranscriptMessageDemo = () => (_jsx(TranscriptMessage, { timeStamp: '01:20 PM', variant: 'bot', message: 'Hello\u2026 This is bot. How can I help you? Please select your category.' }, void 0));
+/** *************************** TranscriptMessage component - END ******************** */
+/** *************************** SuggestedReplyPicker component - START ****************** */
+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 (_jsx(SuggestedReplyPicker, { replies: suggestedReplies, onSelect: suggestedReply => {
+            action(`Suggested reply picked ${suggestedReply.message}`)();
+        }, onDismiss: action('Suggested reply dismissed') }, void 0));
+};
+export const ChatComposerDemo = (args) => (_jsxs(ChatComposer, { maxAttachments: args.maxAttachments, attachments: ChatMockData.defaultAttachments, maxLength: 256, placeholder: 'Type here to send message', onSend: () => { }, children: [_jsx(MenuButton, { text: 'Phrases', menu: { items: [] } }, void 0), _jsx(MenuButton, { text: 'Page Push', menu: { items: [] } }, void 0)] }, void 0));
+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(),
+        variant: 'receiver',
+        direction: 'in',
+        type: 'message',
+        message: (_jsxs(Flex, { container: {
+                direction: 'column',
+                gap: 1
+            }, children: [_jsx(TextArea, { placeholder: 'Please comment\u2026', label: 'Please comment on our service performance and how we can better serve you. Thank you for your time.' }, void 0), _jsxs(Select, { label: 'Is the problem resolved?', children: [_jsx(Option, { children: "Yes" }, void 0), _jsx(Option, { children: "No" }, void 0)] }, void 0), _jsx(Flex, { container: {
+                        justify: 'center'
+                    }, children: _jsx(Button, { variant: 'primary', children: "Submit" }, void 0) }, void 0)] }, void 0))
+    };
+    const mockChatMessages = useMemo(() => {
+        return [
+            ...mockChatMessagesJson.map(message => {
+                const { messagePrivacy, ...restMessageData } = message;
+                if (messagePrivacy) {
+                    restMessageData.messageHeader = {
+                        content: _jsx("span", { children: messagePrivacy }, void 0),
+                        meta: _jsx(Link, { href: '/', children: "I-12345" }, void 0)
+                    };
+                }
+                return restMessageData;
+            }),
+            conversationRatingMessage
+        ];
+    }, []);
+    const conversationRef = useRef(null);
+    const timers = useRef([]);
+    useEffect(() => {
+        return () => {
+            timers.current.forEach(clearTimeout);
+        };
+    }, []);
+    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 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 (args.simulateConversation) {
+            const timeOutId = setTimeout(() => {
+                if (mockChatMessages.length) {
+                    appendMessage(mockChatMessages.shift());
+                }
+            }, 1500);
+            return () => {
+                clearTimeout(timeOutId);
+            };
+        }
+    }, [chatMessages, args.simulateConversation]);
+    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: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                },
+                {
+                    id: '2',
+                    name: 'Profile name',
+                    value: 'Sara Davis'
+                }
+            ],
+            Twitter: [
+                {
+                    id: '1',
+                    name: 'Session status',
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                },
+                {
+                    id: '2',
+                    name: 'Twitter handle',
+                    value: '@Connor'
+                },
+                {
+                    id: '3',
+                    name: 'Followers',
+                    value: '13,556'
+                }
+            ],
+            Facebook: [
+                {
+                    id: '1',
+                    name: 'Session status',
+                    value: _jsx(Status, { variant: 'urgent', children: "UNAUTHENTICATED" }, void 0)
+                },
+                {
+                    id: '2',
+                    name: 'Profile name',
+                    value: 'Sara Davis'
+                }
+            ]
+        }
+    };
+    useOuterEvent('mousedown', [popoverRef, buttonRef], () => {
+        if (openPopover)
+            setOpenPopover(false);
+    });
+    const header = (_jsx(ChatHeader, { title: Channels.options[args.selectedChannel || 'LiveChat'].title, icon: Channels.options[args.selectedChannel || 'LiveChat'].icon, "aria-label": 'Chat header', actions: _jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', onClick: () => setShowTranscripts(!showTranscripts), "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
+                            gap: 1,
+                            alignItems: 'center'
+                        }, children: [_jsx(Icon, { name: 'chats' }, void 0), _jsx(Text, { children: "Transcripts" }, void 0)] }, void 0) }, void 0), _jsx(Button, { variant: 'simple', icon: true, "aria-label": 'chat info', ref: setButtonRef, onClick: () => setOpenPopover(current => !current), children: _jsx(Icon, { name: 'information' }, void 0) }, void 0), _jsx(Popover, { show: openPopover, target: buttonRef, ref: setPopoverRef, arrow: true, placement: 'bottom-end', children: _jsxs(Flex, { container: { direction: 'column', gap: 1, pad: 2 }, children: [_jsx(Text, { variant: 'h4', children: additionalInfo.title }, void 0), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.options[args.selectedChannel || 'LiveChat'] }, void 0)] }, void 0) }, void 0), _jsx(MenuButton, { text: 'More actions', icon: 'more', iconOnly: true, variant: 'simple', portal: true, menu: {
+                        items: [
+                            { primary: 'Transfer', id: 'transcript', onClick: action('Clicked Transfer') },
+                            { primary: 'End chat', id: 'endChat', onClick: action('Clicked End chat') }
+                        ]
+                    } }, void 0)] }, void 0) }, void 0));
+    const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);
+    const transcriptsContainerRef = useRef(null);
+    useOuterEvent('mousedown', [transcriptsContainerRef], () => {
+        setShowTranscripts(false);
+    });
+    const utilityComp = useMemo(() => {
+        return showTranscripts ? (_jsxs("div", { ref: transcriptsContainerRef, children: [!showEarlierTranscripts && (_jsx(Flex, { container: {
+                        direction: 'column',
+                        alignItems: 'center',
+                        gap: 1
+                    }, children: _jsx(Button, { icon: true, "aria-label": 'Show earlier transcripts', variant: 'secondary', onClick: () => {
+                            setShowEarlierTranscripts(!showEarlierTranscripts);
+                        }, children: _jsx(Icon, { name: 'caret-up' }, void 0) }, void 0) }, void 0)), 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: _jsx(Status, { variant: 'warn', children: message.messagePrivacy.privacy }, void 0),
+                                meta: _jsx(Link, { href: '/', children: "I-12345" }, void 0)
+                            };
+                        }
+                        return message;
+                    });
+                    return (_jsx(ChatTranscript, { tabIndex: 0, title: transcript.title, transcript: transcriptData }, transcript.id));
+                })] }, void 0)) : undefined;
+    }, [showTranscripts, setShowTranscripts, showEarlierTranscripts, setShowEarlierTranscripts]);
+    const chatBanner = {
+        id: 'warning',
+        messages: ['This is a public interaction and any responses will be public and visible'],
+        heading: 'Warning',
+        variant: 'warning'
+    };
+    const body = (_jsx(ChatBody, { children: _jsx(MessageList, { 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,
+                {
+                    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'
+                }
+            ] }, void 0) }, void 0));
+    const chatComposerImperativeHandleRef = useRef(null);
+    const [mountPopover, setMountPopover] = useState(false);
+    const specialKeysConfig = {
+        keys: ['//'],
+        onSpecialKey: (e, key) => {
+            action(`Event is  ${e}`)();
+            action(`Typed special key is ${key}`)();
+            if (chatComposerImperativeHandleRef.current) {
+                setMountPopover(!mountPopover);
+            }
+        }
+    };
+    const insertPhrasesMessage = (message) => {
+        if (chatComposerImperativeHandleRef.current) {
+            chatComposerImperativeHandleRef.current.appendToMessage(message, 'specialKey');
+            setMountPopover(false);
+        }
+    };
+    useOuterEvent('mousedown', [chatComposerImperativeHandleRef?.current?.chatComposerRef?.current], () => {
+        setMountPopover(false);
+    });
+    const footer = (_jsxs(ChatComposer, { ref: chatComposerImperativeHandleRef, maxAttachments: args.maxAttachments, attachments: attachments, specialKeysConfig: 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({
+                ...participants.sender,
+                type: 'message',
+                message,
+                timeStamp: '1:45 PM'
+            });
+        }, children: [_jsx(MenuButton, { text: 'Phrases', actions: [], disabled: args.disableChat }, void 0), _jsx(MenuButton, { text: 'Page push', actions: [], disabled: args.disableChat }, void 0), _jsx(Popover, { show: mountPopover, target: chatComposerImperativeHandleRef?.current?.textAreaRef?.current, placement: 'top-start', children: _jsx(Menu, { scrollAt: 20, items: ChatMockData.phrasesDisplayNames.map((name, idx) => ({
+                        primary: name,
+                        id: idx.toString(),
+                        onClick: () => insertPhrasesMessage(ChatMockData.phrasesMessages[idx])
+                    })) }, void 0) }, void 0)] }, void 0));
+    const suggestedReplyPicker = suggestedReplies.length > 0 && showSuggestedReplies ? (_jsx(SuggestedReplyPicker, { replies: suggestedReplies, onSelect: (suggestedReply) => {
+            chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
+            setShowSuggestedReplies(false);
+        }, onDismiss: () => {
+            setShowSuggestedReplies(false);
+        } }, void 0)) : undefined;
+    const fetchGoogleSprite = () => {
+        return 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/64.png';
+    };
+    return (_jsx(EmojiContext.Provider, { value: { set: 'google', spriteSrcResolver: fetchGoogleSprite }, children: _jsx(Flex, { container: {
+                justify: 'center'
+            }, style: {
+                height: 'calc(100vh)',
+                width: args.chatWidth || '30rem',
+                margin: 'auto'
+            }, children: _jsx(Chat, { utility: utilityComp, header: header, banner: args.showChatBanner ? chatBanner : undefined, body: body, footer: footer, suggestedReplyPicker: suggestedReplyPicker }, void 0) }, void 0) }, void 0));
+};
+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'
+};
+//# sourceMappingURL=Chat.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.stories.js","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,WAAW,EACX,OAAO,EAGR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,MAAM,EACN,YAAY,EAEZ,SAAS,EACT,aAAa,EACb,QAAQ,EACR,MAAM,EACN,MAAM,EACN,IAAI,EACJ,UAAU,EACV,cAAc,EACf,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,kBAAkB,MAAM,yEAAyE,CAAC;AAC9G,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AACjG,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAC9F,OAAO,EACL,IAAI,EAEJ,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,OAAO,EACP,WAAW,EAIX,qBAAqB,EAIrB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,EACjB,aAAa,EACd,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,YAAY,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,kBAAkB,CAAC,CAAC;AAEvE,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,mFAAmF;AACnF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,aAAa,GAAG,CACpB,MAAC,IAAI,eACH,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,gBAAY,kBAAkB,YACpD,MAAC,IAAI,IACH,SAAS,EAAE;wBACT,GAAG,EAAE,CAAC;wBACN,UAAU,EAAE,QAAQ;qBACrB,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,EACrB,KAAC,IAAI,sCAAmB,YACnB,WACA,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,sBAAY,WAAW,YAClD,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,WAAG,WACpB,YACJ,CACR,CAAC;IAEF,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,YAAY,gBACN,aAAa,EACxB,OAAO,EAAE,aAAa,WACtB,CACH,CAAC;AACJ,CAAC,CAAC;AACF,mFAAmF;AAEnF,2FAA2F;AAC3F,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,QAAQ,GAAU,YAAY,CAAC,YAAY,CAAC;IAElD,MAAM,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEjE,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,QAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YACvC,KAAC,WAAW,IACV,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,GAAG,EAAE;gBAC1B,sBAAsB,CAAC,CAAC,CAAC,CAAC;YAC5B,CAAC,WACD,WACG,CACR,CAAC;AACJ,CAAC,CAAC;AACF,4FAA4F;AAE5F,qFAAqF;AACrF,MAAM,CAAC,MAAM,WAAW,GAAwB,CAAC,IAAkB,EAAE,EAAE;IACrE,MAAM,WAAW,GAAG;QAClB;YACE,EAAE,EAAE,YAAY;YAChB,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,mFAAmF;SAC/F;QACD;YACE,EAAE,EAAE,YAAY;YAChB,IAAI,EAAE,sDAAsD;YAC5D,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,YAAY;SACnB;KACF,CAAC;IACF,MAAM,aAAa,GAAG;QACpB;YACE,EAAE,EAAE,YAAY;YAChB,IAAI,EAAE,+BAA+B;YACrC,SAAS,EACP,mHAAmH;YACrH,KAAK,EAAE,gBAAgB;SACxB;KACF,CAAC;IACF,OAAO,CACL,8BAEE,KAAC,OAAO,IACN,IAAI,EAAC,SAAS,EACd,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAClC,MAAM,EAAC,QAAQ,EACf,SAAS,EAAC,SAAS,EACnB,OAAO,EAAC,6CAA6C,EACrD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,WACzB,EACF,sBAAM,EAEN,KAAC,OAAO,IACN,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,6CAA6C,EACrD,UAAU,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAClC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,WACzB,EACF,sBAAM,EAEN,KAAC,OAAO,IACN,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,6CAA6C,EACrD,UAAU,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAClC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,WACzB,YACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,UAAU;IACnB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,WAAW,CAAC,QAAQ,GAAG;IACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAClF,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACnE,CAAC;AACF,oFAAoF;AAEpF,qFAAqF;AACrF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,CACrC,KAAC,aAAa,IAAC,OAAO,EAAC,uBAAuB,EAAC,SAAS,EAAC,UAAU,WAAG,CACvE,CAAC;AAOF,MAAM,CAAC,MAAM,iBAAiB,GAAkC,CAAC,IAA4B,EAAE,EAAE;IAC/F,OAAO,KAAC,aAAa,IAAC,UAAU,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,WAAI,CAAC;AACtF,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,OAAO,EAAE,EAAE;CACZ,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC;AACF,wFAAwF;AAExF,yFAAyF;AACzF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,OAAO,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAe,EAAE,EAAE;QACtD,OAAO,CACL,KAAC,cAAc,IACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,UAAU,CAAC,KAAK,EAEvB,UAAU,EAAE,UAAU,CAAC,IAAI,IADtB,UAAU,CAAC,EAAE,CAElB,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AACF,4FAA4F;AAE5F,yFAAyF;AACzF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CACzC,KAAC,iBAAiB,IAChB,SAAS,EAAC,UAAU,EACpB,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,2EAAsE,WAC9E,CACH,CAAC;AACF,yFAAyF;AAEzF,4FAA4F;AAE5F,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE;IAC3C,MAAM,gBAAgB,GAAqB;QACzC;YACE,EAAE,EAAE,SAAS,EAAE;YACf,OAAO,EAAE,oDAAoD;YAC7D,UAAU,EAAE,EAAE;SACf;QACD;YACE,EAAE,EAAE,SAAS,EAAE;YACf,OAAO,EACL,oIAAoI;YACtI,UAAU,EAAE,EAAE;SACf;KACF,CAAC;IACF,OAAO,CACL,KAAC,oBAAoB,IACnB,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,cAAc,CAAC,EAAE;YACzB,MAAM,CAAC,0BAA0B,cAAc,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;QAC/D,CAAC,EACD,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,WAC9C,CACH,CAAC;AACJ,CAAC,CAAC;AASF,MAAM,CAAC,MAAM,gBAAgB,GAAiC,CAAC,IAA2B,EAAE,EAAE,CAAC,CAC7F,MAAC,YAAY,IACX,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,WAAW,EAAE,YAAY,CAAC,kBAAkB,EAC5C,SAAS,EAAE,GAAG,EACd,WAAW,EAAC,2BAA2B,EACvC,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC,aAEhB,KAAC,UAAU,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,WAAI,EAClD,KAAC,UAAU,IAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,WAAI,YACvC,CAChB,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,cAAc,EAAE,CAAC;CAClB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAChD,CAAC;AAiBF,MAAM,CAAC,MAAM,YAAY,GAA6B,CAAC,IAAuB,EAAE,EAAE;IAChF,MAAM,iBAAiB,GAAQ,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,QAAQ,GAGV;QACF,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE;YACP,QAAQ,EAAE;gBACR,KAAK,EAAE,WAAW;gBAClB,IAAI,EAAE,YAAY;aACnB;YACD,OAAO,EAAE;gBACP,KAAK,EAAE,cAAc;gBACrB,IAAI,EAAE,SAAS;aAChB;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,UAAU;aACjB;SACF;KACF,CAAC;IAEF,MAAM,EACJ,YAAY,EACZ,YAAY,EAAE,oBAAoB,EAClC,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EACjB,GAMG,iBAAiB,CAAC;IAEtB,MAAM,yBAAyB,GAAyB;QACtD,EAAE,EAAE,SAAS,EAAE;QACf,OAAO,EAAE,UAAU;QACnB,SAAS,EAAE,IAAI;QACf,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,CACP,MAAC,IAAI,IACH,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;gBACnB,GAAG,EAAE,CAAC;aACP,aAED,KAAC,QAAQ,IACP,WAAW,EAAC,sBAAiB,EAC7B,KAAK,EAAC,qGAAqG,WAC3G,EACF,MAAC,MAAM,IAAC,KAAK,EAAC,0BAA0B,aACtC,KAAC,MAAM,8BAAa,EACpB,KAAC,MAAM,6BAAY,YACZ,EACT,KAAC,IAAI,IACH,SAAS,EAAE;wBACT,OAAO,EAAE,QAAQ;qBAClB,YAED,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,+BAAgB,WACpC,YACF,CACR;KACF,CAAC;IAEF,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO;YACL,GAAG,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gBACpC,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC;gBACvD,IAAI,cAAc,EAAE;oBAClB,eAAe,CAAC,aAAa,GAAG;wBAC9B,OAAO,EAAE,yBAAO,cAAc,WAAQ;wBACtC,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,gCAAe;qBACpC,CAAC;iBACH;gBACD,OAAO,eAAe,CAAC;YACzB,CAAC,CAAC;YACF,yBAAyB;SAC1B,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IACvE,MAAM,MAAM,GAAG,MAAM,CAAW,EAAE,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QACvC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAwB,kBAAkB,CAAC,CAAC;IAC1F,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAC5E,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,IAAY,EAAE,EAAE;QACf,cAAc,CAAC,eAAe,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC;IACxF,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CACZ,kBAAkB,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE;YACnC,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,kBAAkB;aAC7B,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,MAAM,aAAa,GAAG,CAAC,OAAY,EAAE,EAAE;QACrC,MAAM,2BAA2B,GAAG,eAAe,CAAC,OAAO,EAAE,kBAAkB,EAAE,CAAC;QAClF,eAAe,CAAC,gBAAgB,CAAC,EAAE;YACjC,MAAM,cAAc,GAAQ;gBAC1B,GAAG,OAAO;aACX,CAAC;YACF,cAAc,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;YAC7E,IACE,CAAC,2BAA2B;gBAC5B,gBAAgB,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,qBAAqB,CAAC,CAAC,MAAM,KAAK,CAAC,EAC9E;gBACA,OAAO;oBACL,GAAG,gBAAgB;oBACnB;wBACE,EAAE,EAAE,qBAAqB;wBACzB,IAAI,EAAE,QAAQ;wBACd,OAAO,EAAE,cAAc;wBACvB,OAAO,EAAE,SAAS;qBACnB;oBACD,cAAc;iBACf,CAAC;aACH;YACD,OAAO,CAAC,GAAG,gBAAgB,EAAE,cAAc,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,2BAA2B,EAAE;YAChC,sBAAsB,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;SACpD;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;gBAChC,IAAI,gBAAgB,CAAC,MAAM,EAAE;oBAC3B,aAAa,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAC;iBACzC;YACH,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,OAAO,GAAG,EAAE;gBACV,YAAY,CAAC,SAAS,CAAC,CAAC;YAC1B,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE9C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,UAAU,EAAe,CAAC;IAC9D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAe,CAAC;IAC5D,MAAM,cAAc,GAGhB;QACF,KAAK,EAAE,iBAAiB;QACxB,OAAO,EAAE;YACP,QAAQ,EAAE;gBACR;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,gBAAgB;oBACtB,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,wCAAyB;iBACzD;gBACD;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,cAAc;oBACpB,KAAK,EAAE,YAAY;iBACpB;aACF;YACD,OAAO,EAAE;gBACP;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,gBAAgB;oBACtB,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,wCAAyB;iBACzD;gBACD;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,gBAAgB;oBACtB,KAAK,EAAE,SAAS;iBACjB;gBACD;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,QAAQ;iBAChB;aACF;YACD,QAAQ,EAAE;gBACR;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,gBAAgB;oBACtB,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,wCAAyB;iBACzD;gBACD;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,cAAc;oBACpB,KAAK,EAAE,YAAY;iBACpB;aACF;SACF;KACF,CAAC;IACF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACvD,IAAI,WAAW;YAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,CACb,KAAC,UAAU,IACT,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,IAAI,UAAU,CAAC,CAAC,KAAK,EACjE,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,IAAI,UAAU,CAAC,CAAC,IAAI,gBACpD,aAAa,EACxB,OAAO,EACL,MAAC,IAAI,eACH,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,eAAe,CAAC,gBACxC,kBAAkB,YAE7B,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,GAAG,EAAE,CAAC;4BACN,UAAU,EAAE,QAAQ;yBACrB,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,EACrB,KAAC,IAAI,sCAAmB,YACnB,WACA,EACT,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,sBACO,WAAW,EACtB,GAAG,EAAE,YAAY,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,YAElD,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,WAAG,WACpB,EACT,KAAC,OAAO,IACN,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,SAAS,EACjB,GAAG,EAAE,aAAa,EAClB,KAAK,QACL,SAAS,EAAC,YAAY,YAEtB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,aACtD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,cAAc,CAAC,KAAK,WAAQ,EAChD,KAAC,cAAc,IACb,OAAO,EAAC,QAAQ,EAChB,MAAM,EAAE,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,IAAI,UAAU,CAAC,WAClE,YACG,WACC,EACV,KAAC,UAAU,IACT,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,OAAO,EAAC,QAAQ,EAChB,MAAM,QACN,IAAI,EAAE;wBACJ,KAAK,EAAE;4BACL,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE;4BAC9E,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE;yBAC5E;qBACF,WACD,YACG,WAET,CACH,CAAC;IAEF,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5E,MAAM,uBAAuB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7D,aAAa,CAAC,WAAW,EAAE,CAAC,uBAAuB,CAAC,EAAE,GAAG,EAAE;QACzD,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO,CAAmC,GAAG,EAAE;QACjE,OAAO,eAAe,CAAC,CAAC,CAAC,CACvB,eAAK,GAAG,EAAE,uBAAuB,aAC9B,CAAC,sBAAsB,IAAI,CAC1B,KAAC,IAAI,IACH,SAAS,EAAE;wBACT,SAAS,EAAE,QAAQ;wBACnB,UAAU,EAAE,QAAQ;wBACpB,GAAG,EAAE,CAAC;qBACP,YAED,KAAC,MAAM,IACL,IAAI,sBACO,0BAA0B,EACrC,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;4BACZ,yBAAyB,CAAC,CAAC,sBAAsB,CAAC,CAAC;wBACrD,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,WAAG,WACjB,WACJ,CACR,EACA,WAAW;qBACT,IAAI,CAAC,CAAC,UAAe,EAAE,EAAE,CAAC,UAAU,CAAC,kBAAkB,CAAC;qBACxD,MAAM,CAAC,CAAC,UAAe,EAAE,EAAE,CAC1B,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,kBAAkB,CAC/D;qBACA,GAAG,CAAC,CAAC,UAAe,EAAE,EAAE;oBACvB,MAAM,cAAc,GAAQ,UAAU,CAAC,IAAI,CAAC,GAAG,CAC7C,CAAC,OAGA,EAAE,EAAE;wBACH,IAAI,OAAO,CAAC,cAAc,EAAE;4BAC1B,OAAO,CAAC,gBAAgB,GAAG;gCACzB,OAAO,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,YAAE,OAAO,CAAC,cAAc,CAAC,OAAO,WAAU;gCACzE,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,gCAAe;6BACpC,CAAC;yBACH;wBACD,OAAO,OAAO,CAAC;oBACjB,CAAC,CACF,CAAC;oBAEF,OAAO,CACL,KAAC,cAAc,IACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,UAAU,CAAC,KAAK,EAEvB,UAAU,EAAE,cAAc,IADrB,UAAU,CAAC,EAAE,CAElB,CACH,CAAC;gBACJ,CAAC,CAAC,YACA,CACP,CAAC,CAAC,CAAC,SAAS,CAAC;IAChB,CAAC,EAAE,CAAC,eAAe,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAE7F,MAAM,UAAU,GAAgB;QAC9B,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,CAAC,2EAA2E,CAAC;QACvF,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;KACnB,CAAC;IACF,MAAM,IAAI,GAAG,CACX,KAAC,QAAQ,cACP,KAAC,WAAW,IACV,kBAAkB,EAAE,mBAAmB,EACvC,qBAAqB,EAAE,GAAG,EAAE;gBAC1B,MAAM,kBAAkB,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;gBACnE,eAAe,CAAC,gBAAgB,CAAC,EAAE,CACjC,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;oBAC7B,IAAI,OAAO,CAAC,EAAE,KAAK,qBAAqB,EAAE;wBACxC,OAAO,CAAC,EAAE,GAAG,kBAAkB,CAAC;qBACjC;oBACD,OAAO,OAAO,CAAC;gBACjB,CAAC,CAAC,CACH,CAAC;gBACF,MAAM,SAAS,GAAW,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBAC/C,eAAe,CAAC,gBAAgB,CAAC,EAAE,CACjC,gBAAgB,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,kBAAkB,CAAC,CAC/D,CAAC;oBACF,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;gBACjE,CAAC,EAAE,IAAI,CAAC,CAAC;gBACT,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBAC/B,sBAAsB,CAAC,CAAC,CAAC,CAAC;YAC5B,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,eAAe,EACpB,QAAQ,EAAE;gBACR,GAAG,YAAY;gBACf;oBACE,EAAE,EAAE,aAAa;oBACjB,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE;wBACV,IAAI,EAAE,aAAa;wBACnB,QAAQ,EACN,+EAA+E;qBAClF;oBACD,OAAO,EAAE,IAAI,CAAC,OAAO;oBACrB,SAAS,EAAE,uBAAuB;iBACnC;aACF,WACD,WACO,CACZ,CAAC;IAEF,MAAM,+BAA+B,GAAG,MAAM,CAAoC,IAAI,CAAC,CAAC;IAExF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,iBAAiB,GAAG;QACxB,IAAI,EAAE,CAAC,IAAI,CAAC;QACZ,YAAY,EAAE,CAAC,CAAsC,EAAE,GAAW,EAAE,EAAE;YACpE,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC;YAC3B,MAAM,CAAC,wBAAwB,GAAG,EAAE,CAAC,EAAE,CAAC;YACxC,IAAI,+BAA+B,CAAC,OAAO,EAAE;gBAC3C,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;aAChC;QACH,CAAC;KACF,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,OAAe,EAAE,EAAE;QAC/C,IAAI,+BAA+B,CAAC,OAAO,EAAE;YAC3C,+BAA+B,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;YAC/E,eAAe,CAAC,KAAK,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,aAAa,CACX,WAAW,EACX,CAAC,+BAA+B,EAAE,OAAO,EAAE,eAAe,EAAE,OAAkB,CAAC,EAC/E,GAAG,EAAE;QACH,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CACF,CAAC;IAEF,MAAM,MAAM,GAAG,CACb,MAAC,YAAY,IACX,GAAG,EAAE,+BAA+B,EACpC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,QACT,QAAQ,EAAE,IAAI,CAAC,WAAW,EAC1B,eAAe,EAAE,GAAG,EAAE;YACpB,cAAc,CAAC;gBACb,GAAG,WAAW;gBACd;oBACE,EAAE,EAAE,GAAG,WAAW,CAAC,MAAM,gBAAgB;oBACzC,IAAI,EAAE,GAAG,WAAW,CAAC,MAAM,gBAAgB;oBAC3C,QAAQ,EAAE,kBAAkB;iBAC7B;aACF,CAAC,CAAC;QACL,CAAC,EACD,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,MAAM,EAAE,OAAO,CAAC,EAAE;YAChB,MAAM,CAAC,oBAAoB,OAAO,EAAE,CAAC,EAAE,CAAC;YACxC,aAAa,CAAC;gBACZ,GAAG,YAAY,CAAC,MAAM;gBACtB,IAAI,EAAE,SAAS;gBACf,OAAO;gBACP,SAAS,EAAE,SAAS;aACrB,CAAC,CAAC;QACL,CAAC,aAED,KAAC,UAAU,IAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,WAAW,WAAI,EACtE,KAAC,UAAU,IAAC,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,WAAW,WAAI,EACxE,KAAC,OAAO,IACN,IAAI,EAAE,YAAY,EAClB,MAAM,EAAE,+BAA+B,EAAE,OAAO,EAAE,WAAW,EAAE,OAAkB,EACjF,SAAS,EAAC,WAAW,YAErB,KAAC,IAAI,IACH,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE,YAAY,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC;wBAC1D,OAAO,EAAE,IAAI;wBACb,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE;wBAClB,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,YAAY,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;qBACvE,CAAC,CAAC,WACH,WACM,YACG,CAChB,CAAC;IAEF,MAAM,oBAAoB,GACxB,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,CACpD,KAAC,oBAAoB,IACnB,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,CAAC,cAA8B,EAAE,EAAE;YAC3C,+BAA+B,CAAC,OAAO,EAAE,eAAe,CACtD,cAAc,CAAC,OAAO,EACtB,QAAQ,CACT,CAAC;YACF,uBAAuB,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;YACd,uBAAuB,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,WACD,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,OAAO,8EAA8E,CAAC;IACxF,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,YACnF,KAAC,IAAI,IACH,SAAS,EAAE;gBACT,OAAO,EAAE,QAAQ;aAClB,EACD,KAAK,EAAE;gBACL,MAAM,EAAE,aAAa;gBACrB,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,OAAO;gBAChC,MAAM,EAAE,MAAM;aACf,YAED,KAAC,IAAI,IACH,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACpD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,oBAAoB,EAAE,oBAAoB,WAC1C,WACG,WACe,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,UAAU;IAC3B,cAAc,EAAE,IAAI;IACpB,WAAW,EAAE,KAAK;IAClB,oBAAoB,EAAE,KAAK;IAC3B,OAAO,EAAE,EAAE;IACX,WAAW,EAAE,eAAe;IAC5B,cAAc,EACZ,2FAA2F;IAC7F,SAAS,EAAE,GAAG;CACf,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC/C,eAAe,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC9F,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,oBAAoB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACtD,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC7C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC3C,CAAC;AAEF,YAAY,CAAC,UAAU,GAAG;IACxB,MAAM,EAAE,YAAY;CACrB,CAAC","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 { Meta, Story } from '@storybook/react';\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,\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} as Meta;\n\n/** *********************** ChatHeader component - START *********************** */\nexport const ChatHeaderDemo = () => {\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 MessageListDemo = () => {\n  const messages: any[] = ChatMockData.chatMessages;\n\n  const [unReadMessageCount, setUnReadMessagesCount] = useState(1);\n\n  return (\n    <Flex container style={{ height: '80vh' }}>\n      <MessageList\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 MessageDemo: Story<MessageProps> = (args: MessageProps) => {\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={args.variant}\n        direction={args.direction}\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={args.variant}\n        direction={args.direction}\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={args.variant}\n        direction={args.direction}\n      />\n    </>\n  );\n};\n\nMessageDemo.args = {\n  variant: 'receiver',\n  direction: 'in'\n};\n\nMessageDemo.argTypes = {\n  variant: { options: ['receiver', 'sender', 'other'], control: { type: 'select' } },\n  direction: { options: ['in', 'out'], control: { type: 'select' } }\n};\n/** ***************************** Message component - END *********************** */\n\n/** **************************** SystemMessage component - START ***************** */\nexport const SystemMessageDemo = () => (\n  <SystemMessage message='John Brown has joined' timeStamp='10:00 AM' />\n);\n/** ***************************** SystemMessage component - END ******************** */\n\n/** ***************************** TypeIndicator component - START ****************** */\ninterface TypeIndicatorDemoProps {\n  message?: string;\n}\nexport const TypeIndicatorDemo: Story<TypeIndicatorDemoProps> = (args: TypeIndicatorDemoProps) => {\n  return <TypeIndicator avatarInfo={{ name: 'John Brown' }} message={args.message} />;\n};\n\nTypeIndicatorDemo.args = {\n  message: ''\n};\n\nTypeIndicatorDemo.argTypes = {\n  message: { control: { type: 'text' } }\n};\n/** *************************** TypeIndicator component - END *********************** */\n\n/** ************************** ChatTranscripts component - START ********************* */\nexport const ChatTranscriptsDemo = () => {\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 TranscriptMessageDemo = () => (\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 SuggestedReplyPickerDemo = () => {\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 ************************ */\ninterface ChatComposerDemoProps {\n  maxAttachments?: number;\n}\n\nexport const ChatComposerDemo: Story<ChatComposerDemoProps> = (args: ChatComposerDemoProps) => (\n  <ChatComposer\n    maxAttachments={args.maxAttachments}\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\nChatComposerDemo.args = {\n  maxAttachments: 2\n};\n\nChatComposerDemo.argTypes = {\n  maxAttachments: { control: { type: 'number' } }\n};\n/** *********************************** ChatComposer component - END ********************** */\n\n/** *********************************** Standard Chat component - START ******************** */\ninterface StandardChatProps {\n  maxAttachments?: number;\n  chatWidth?: string;\n  selectedChannel?: string;\n  showChatBanner?: boolean;\n  disableChat?: boolean;\n  simulateConversation?: boolean;\n  message?: string;\n  placeholder?: string;\n  defaultMessage?: string;\n  maxLength?: number;\n}\n\nexport const StandardChat: Story<StandardChatProps> = (args: StandardChatProps) => {\n  const ChatMockDataClone: any = useMemo(() => {\n    return JSON.parse(JSON.stringify(ChatMockData));\n  }, [ChatMockData]);\n\n  const 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  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 [showSuggestedReplies, setShowSuggestedReplies] = useState(true);\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    args.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 (args.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, args.simulateConversation]);\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[args.selectedChannel || 'LiveChat'].title}\n      icon={Channels.options[args.selectedChannel || 'LiveChat'].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\n                variant='inline'\n                fields={additionalInfo.options[args.selectedChannel || 'LiveChat']}\n              />\n            </Flex>\n          </Popover>\n          <MenuButton\n            text='More actions'\n            icon='more'\n            iconOnly\n            variant='simple'\n            portal\n            menu={{\n              items: [\n                { primary: 'Transfer', id: 'transcript', onClick: action('Clicked Transfer') },\n                { primary: 'End chat', id: 'endChat', onClick: action('Clicked End chat') }\n              ]\n            }}\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 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      <MessageList\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={[\n          ...chatMessages,\n          {\n            id: 'Pegasystems',\n            type: 'typing',\n            avatarInfo: {\n              name: 'Pegasystems',\n              imageSrc:\n                'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n            },\n            message: args.message,\n            ariaLabel: 'Pegasystems is typing'\n          }\n        ]}\n      />\n    </ChatBody>\n  );\n\n  const chatComposerImperativeHandleRef = useRef<ChatComposerImperativeHandleProps>(null);\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={args.maxAttachments}\n      attachments={attachments}\n      specialKeysConfig={specialKeysConfig}\n      showEmoji\n      disabled={args.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={args.maxLength}\n      placeholder={args.placeholder}\n      defaultMessage={args.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={args.disableChat} />\n      <MenuButton text='Page push' actions={[]} disabled={args.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  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: args.chatWidth || '30rem',\n          margin: 'auto'\n        }}\n      >\n        <Chat\n          utility={utilityComp}\n          header={header}\n          banner={args.showChatBanner ? chatBanner : undefined}\n          body={body}\n          footer={footer}\n          suggestedReplyPicker={suggestedReplyPicker}\n        />\n      </Flex>\n    </EmojiContext.Provider>\n  );\n};\n\nStandardChat.args = {\n  maxAttachments: 2,\n  selectedChannel: 'LiveChat',\n  showChatBanner: true,\n  disableChat: false,\n  simulateConversation: false,\n  message: '',\n  placeholder: 'Enter message',\n  defaultMessage:\n    'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!',\n  maxLength: 280\n};\n\nStandardChat.argTypes = {\n  maxAttachments: { control: { type: 'number' } },\n  selectedChannel: { options: ['LiveChat', 'Twitter', 'Facebook'], control: { type: 'select' } },\n  showChatBanner: { control: { type: 'boolean' } },\n  disableChat: { control: { type: 'boolean' } },\n  simulateConversation: { control: { type: 'boolean' } },\n  message: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  defaultMessage: { control: { type: 'text' } },\n  maxLength: { control: { type: 'number' } }\n};\n\nStandardChat.parameters = {\n  layout: 'fullscreen'\n};\n\n/** *************************** Standard Chat component - END ************************ */\n"]}

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState, useEffect, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { radios } from '@storybook/addon-knobs';
+import { Avatar, SummaryItem, defaultThemeProp } from '@pega/cosmos-react-core';
+import { RepeatingView, StyledRepeatingViewItem, StyledRepeatingView } from '@pega/cosmos-react-social';
+export default {
+    title: 'Social/Chat/RepeatingView',
+    component: RepeatingView
+};
+const StyledContactsBook = styled(StyledRepeatingView)(({ theme }) => {
+    const bdrColor = theme.base.palette['border-line'];
+    return css `
+    width: 25rem;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    z-index: 1;
+    border: 0.0625rem solid ${bdrColor};
+    background-color: ${theme.base.palette['primary-background']};
+    ${StyledRepeatingViewItem} {
+      border-bottom: 0.0625rem solid ${bdrColor};
+      padding: calc(0.5 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledContactsBook.defaultProps = defaultThemeProp;
+const INITIAL_CHUNK_SIZE = 50;
+const APPEND_CHUNK_SIZE = 25;
+const FETCH_AHEAD_OFFSET = 10;
+const TOTAL_RECORDS = Math.max(INITIAL_CHUNK_SIZE, 100);
+function id() {
+    return Math.floor(Math.random() * Math.floor(500000)).toString();
+}
+const FetchContactsAPI = (results, abortController) => {
+    return fetch(`https://randomuser.me/api?results=${results}`, {
+        signal: abortController.signal
+    })
+        .then(res => res.json())
+        .then((data) => [...data.results].map(item => ({
+        ...item,
+        id: id()
+    })));
+};
+export const RepeatingViewSample = () => {
+    const [rows, setRows] = useState({
+        data: [],
+        isLoading: true
+    });
+    const scrollDirectionOptions = {
+        'Top to bottom': 'top-to-bottom',
+        'Bottom to top': 'bottom-to-top'
+    };
+    const scrollDirection = radios('Scroll direction', scrollDirectionOptions, scrollDirectionOptions[Object.keys(scrollDirectionOptions)[0]]);
+    const abortController = useMemo(() => {
+        return new AbortController();
+    }, []);
+    useEffect(() => {
+        FetchContactsAPI(INITIAL_CHUNK_SIZE, abortController).then((newRows) => {
+            setRows(prevRows => ({
+                isLoading: false,
+                data: [...prevRows.data, ...newRows]
+            }));
+        });
+        return () => {
+            abortController.abort();
+        };
+    }, []);
+    const loadMore = useCallback(() => {
+        if (!rows.isLoading) {
+            setRows(prevRows => ({
+                ...prevRows,
+                isLoading: true
+            }));
+            FetchContactsAPI(APPEND_CHUNK_SIZE, abortController).then((newRows) => {
+                setRows(prevRows => ({
+                    isLoading: false,
+                    data: [...prevRows.data, ...newRows]
+                }));
+            });
+        }
+    }, [rows, setRows]);
+    return (_jsx(RepeatingView, { as: StyledContactsBook, loading: rows.isLoading, rows: rows.data, style: { height: '40rem', maxHeight: '100vh' }, loadMore: loadMore, offset: rows.data.length === TOTAL_RECORDS ? -1 : rows.data.length - FETCH_AHEAD_OFFSET, scrollDirection: scrollDirection, children: row => {
+            const { name: { title, first, last }, phone, picture: { thumbnail } } = row;
+            return (_jsx(SummaryItem, { primary: [title, first, last].join(' '), visual: _jsx(Avatar, { imageSrc: thumbnail, name: [title, first, last].join(' '), shape: 'circle', size: 'l' }, void 0), secondary: phone }, void 0));
+        } }, void 0));
+};
+//# sourceMappingURL=RepeatingView.stories.js.map