@pega/cosmos-react-demos 2.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.mocks.js","sourceRoot":"","sources":["../../../src/social/Chat/Chat.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["export const ChatMockData = {\n  transcripts: [\n    {\n      id: 'botTranscripts',\n      title: 'Bot',\n      earlierTranscripts: true,\n      data: [\n        {\n          id: '2499167349',\n          type: 'transcript',\n          timeStamp: '01:20 PM',\n          variant: 'bot',\n          message: 'Hello… This is bot. How can I help you? Please select your category. ',\n          ariaLabel:\n            'Bot said  Hello… This is bot. How can I help you? Please select your category.  at 01:20 PM'\n        },\n        {\n          id: '414918079',\n          type: 'transcript',\n          timeStamp: '01:21 PM',\n          variant: 'user',\n          message: 'Policy details',\n          avatarInfo: {\n            name: 'Sara Davis'\n          },\n          messagePrivacy: {\n            privacy: 'PUBLIC TWEET'\n          },\n          ariaLabel: 'Sara Davis said Policy details at 01:21 PM via Public Tweet'\n        },\n        {\n          id: '4750473261',\n          type: 'transcript',\n          timeStamp: '01:22 PM',\n          variant: 'bot',\n          message: 'Please select what would you like to know about your policy. 😃😃',\n          ariaLabel:\n            'Bot said  Please select what would you like to know about your policy. at 01:22 PM'\n        },\n        {\n          id: '925521127',\n          type: 'transcript',\n          timeStamp: '01:23 PM',\n          variant: 'user',\n          message: 'Policy terms and conditions',\n          messagePrivacy: {\n            privacy: 'PUBLIC TWEET'\n          },\n          avatarInfo: {\n            name: 'Sara Davis'\n          },\n          ariaLabel: 'Sara Davis said  Policy terms and conditions at 01:23 PM'\n        }\n      ]\n    },\n    {\n      id: 'preChatTranscript',\n      title: 'Questionnaire',\n      earlierTranscripts: false,\n      data: [\n        {\n          id: '1457969897',\n          type: 'transcript',\n          timeStamp: '01:23 PM',\n          variant: 'question',\n          message: 'Could you please enter your query',\n          ariaLabel: 'Customer was asked for Could you please enter your query at 01:23 PM'\n        },\n        {\n          id: '4633052071',\n          type: 'transcript',\n          timeStamp: '01:23 PM',\n          variant: 'user',\n          message: 'I would like to know my policy terms and conditions',\n          avatarInfo: {\n            name: 'Sara Davis'\n          },\n          ariaLabel:\n            'Sara Davis said  I would like to know my policy terms and conditions at 01:23 PM'\n        },\n        {\n          id: '3105885518',\n          type: 'transcript',\n          timeStamp: '01:23 PM',\n          variant: 'question',\n          message: 'Could you please select the policy',\n          ariaLabel: 'Customer was asked for Could you please select the policy at 01:23 PM'\n        },\n        {\n          id: '3008407298',\n          type: 'transcript',\n          timeStamp: '01:23 PM',\n          variant: 'user',\n          message: 'Insurance policy - 5545456668555',\n          messagePrivacy: {\n            privacy: 'PUBLIC TWEET'\n          },\n          avatarInfo: {\n            name: 'Sara Davis'\n          },\n          ariaLabel:\n            'Sara Davis said  Insurance policy - 5545456668555 at 01:23 PM via Public Tweet'\n        },\n        {\n          id: '4700050925',\n          type: 'system',\n          message: 'Chat escalated to live agent',\n          timeStamp: '01:23 PM'\n        },\n        {\n          id: '3608004939',\n          type: 'system',\n          message: 'Agent Fred joined the chat',\n          timeStamp: '01:24 PM'\n        }\n      ]\n    },\n    {\n      id: 'csrTranscript',\n      earlierTranscripts: false,\n      title: 'Transcripts: Agent Fred and Jim',\n      data: [\n        {\n          id: '4713954822',\n          type: 'transcript',\n          timeStamp: '01:24 PM',\n          messagePrivacy: {\n            privacy: 'PUBLIC TWEET'\n          },\n          variant: 'user',\n          message: 'Hello, Welcome to U-Plus. How can I help you?',\n          avatarInfo: {\n            name: 'Jim'\n          },\n          ariaLabel:\n            'Jim said  Hello, Welcome to U-Plus. How can I help you? at 01:24 PM via Public Tweet'\n        },\n        {\n          id: '2582654831',\n          type: 'transcript',\n          timeStamp: '01:25 PM',\n          variant: 'user',\n          message: 'Hi, I would like to know my policy terms and condition',\n          avatarInfo: {\n            name: 'Sara Davis'\n          },\n          ariaLabel:\n            'Sara Davis said  Hi, I would like to know my policy terms and condition at 01:25 PM'\n        },\n        {\n          id: '4422603601',\n          type: 'transcript',\n          timeStamp: '01:26 PM',\n          messagePrivacy: {\n            privacy: 'PUBLIC TWEET'\n          },\n          variant: 'user',\n          message: 'You can refer this article to know more',\n          avatarInfo: {\n            name: 'Jim'\n          },\n          ariaLabel:\n            'Jim said  You can refer this article to know more at 01:26 PM via Public Tweet'\n        },\n        {\n          id: '973978246',\n          type: 'system',\n          message: 'Customer opened knowledge article',\n          timeStamp: '01:26 PM'\n        },\n        {\n          id: '44764769',\n          type: 'transcript',\n          timeStamp: '01:26 PM',\n          variant: 'user',\n          message: 'Also I would like to know my policy validity',\n          avatarInfo: {\n            name: 'Sara Davis'\n          },\n          ariaLabel: 'Sara Davis said  Also I would like to know my policy validity at 01:26 PM'\n        },\n        {\n          id: '1052005901',\n          type: 'transcript',\n          timeStamp: '01:27 PM',\n          variant: 'user',\n          message: 'Is that fine if I can transfer your chat to serve better? ',\n          avatarInfo: {\n            name: 'Jim'\n          },\n          ariaLabel:\n            'Jim said  Is that fine if I can transfer your chat to serve better?  at 01:27 PM'\n        },\n        {\n          id: '474082342',\n          type: 'transcript',\n          timeStamp: '01:27 PM',\n          variant: 'user',\n          message: 'Yeah Sure',\n          avatarInfo: {\n            name: 'Sara Davis'\n          },\n          ariaLabel: 'Sara Davis said  Yeah Sure at 01:27 PM'\n        },\n        {\n          id: '2128368768',\n          type: 'system',\n          message: 'Chat has been transferred',\n          timeStamp: '01:27 PM'\n        }\n      ]\n    }\n  ],\n  participants: {\n    transcriptUser1: {\n      avatarInfo: {\n        name: 'Jim'\n      }\n    },\n    transcriptUser2: {\n      avatarInfo: {\n        name: 'Fred'\n      }\n    },\n    sender: {\n      variant: 'sender',\n      direction: 'out',\n      avatarInfo: {\n        name: 'John Brown'\n      }\n    },\n    sender2: {\n      variant: 'sender',\n      direction: 'out'\n    },\n    receiver: {\n      variant: 'receiver',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Sara Davis'\n      }\n    },\n    other: {\n      variant: 'other',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Pegasystems',\n        imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n      }\n    }\n  },\n  chatMessages: [\n    {\n      id: '4276065002',\n      type: 'system',\n      message: 'John brown has joined',\n      timeStamp: '01:44 PM'\n    },\n    {\n      id: '88365643',\n      type: 'message',\n      variant: 'sender',\n      direction: 'out',\n      avatarInfo: {\n        name: 'John Brown'\n      },\n      message: 'Hi, Welcome to u-plus. How can I help you ?',\n      timeStamp: '1:44 PM',\n      status: 'Opened',\n      attachments: [\n        {\n          id: '2499167340',\n          name: 'Location',\n          icon: 'document',\n          meta: 'PNG 0.1 MB',\n          thumbnail:\n            '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      ariaLabel:\n        'John Brown said  Hi, Welcome to u-plus. How can I help you ? at 1:44 PM with 2 attachments'\n    },\n    {\n      id: '3245595973',\n      type: 'message',\n      variant: 'sender',\n      direction: 'out',\n      avatarInfo: {\n        name: 'John Brown'\n      },\n      message: 'You may also reach us via',\n      timeStamp: '1:45 PM',\n      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      ariaLabel: 'John Brown said  You may also reach us via at 1:45 PM with 1 link'\n    },\n    {\n      id: '3865379335',\n      type: 'message',\n      variant: 'receiver',\n      messagePrivacy: 'PUBLIC TWEET',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Sara Davis'\n      },\n      message: 'Hi, I would like to know the validity of my policy',\n      ariaLabel:\n        'Sara Davis said  Hi, I would like to know the validity of my policy via Public Tweet'\n    },\n    {\n      id: '777315059',\n      type: 'message',\n      variant: 'receiver',\n      messagePrivacy: 'PUBLIC TWEET',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Sara Davis'\n      },\n      message: 'Could you please help',\n      timeStamp: '1:45 PM',\n      ariaLabel: 'Sara Davis said  Could you please help at 1:45 PM via Public Tweet'\n    },\n    {\n      id: '4001121034',\n      type: 'system',\n      message: 'Pegasystems has joined'\n    },\n    {\n      id: '779591083',\n      type: 'message',\n      variant: 'other',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Pegasystems',\n        imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n      },\n      message: 'Great, our CSR will help you with that',\n      timeStamp: '1:46 PM',\n      status: 'Delivered',\n      ariaLabel: 'Pegasystems said  Great, our CSR will help you with that at 1:46 PM'\n    },\n    {\n      id: '2683629622',\n      type: 'message',\n      variant: 'sender',\n      messagePrivacy: 'PUBLIC REPLY',\n      direction: 'out',\n      avatarInfo: {\n        name: 'John Brown'\n      },\n      message: 'Sure',\n      timeStamp: '1:48 PM',\n      status: 'Delivered',\n      ariaLabel: 'John Brown said  Sure at 1:48 PM via Public Tweet'\n    },\n    {\n      id: '2748689942',\n      type: 'message',\n      variant: 'other',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Pegasystems',\n        imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n      },\n      message: ' Carry on',\n      timeStamp: '1:49 PM',\n      attachments: [\n        {\n          id: '2499167343',\n          name: 'Departments mapping',\n          icon: 'document-doc',\n          meta: 'PDF 0.1 MB'\n        }\n      ],\n      ariaLabel: 'Pegasystems said   Carry on at 1:49 PM with 1 attachment'\n    },\n    {\n      id: '4110947991',\n      type: 'message',\n      variant: 'other',\n      direction: 'in',\n      messagePrivacy: 'PUBLIC REPLY',\n      avatarInfo: {\n        name: 'Pegasystems',\n        imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n      },\n      message: ' Refer these documents for more FAQ',\n      timeStamp: '1:49 PM',\n      attachments: [\n        {\n          id: '2499167345',\n          name: 'FAQ with detailed terms and conditions of the policy',\n          icon: 'document-doc',\n          meta: 'PDF 0.7 MB'\n        },\n        {\n          id: '2499167346',\n          name: 'Privacy policy',\n          icon: 'document-doc',\n          meta: 'WORD 0.1 MB'\n        }\n      ],\n      ariaLabel:\n        'Pegasystems said   Refer these documents for more FAQ at 1:49 PM with 2 attachments via Public Tweet'\n    },\n    {\n      id: '2549273884',\n      type: 'system',\n      message: 'Pegasystems has left'\n    },\n    {\n      id: '3375453344',\n      type: 'message',\n      variant: 'sender',\n      messagePrivacy: 'PUBLIC REPLY',\n      direction: 'out',\n      avatarInfo: {\n        name: 'John Brown'\n      },\n      message: 'Could you please help me with your account num',\n      timeStamp: '1:50 PM',\n      attachments: [\n        {\n          id: '2499167347',\n          name: 'Security policy',\n          icon: 'document-pdf',\n          meta: 'PDF 6.1 MB'\n        }\n      ],\n      ariaLabel:\n        'John Brown said  Could you please help me with your account num at 1:50 PM with 1 attachment via Public Tweet'\n    },\n    {\n      id: '1868448522',\n      type: 'message',\n      variant: 'receiver',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Sara Davis'\n      },\n      message: 'Yeah, sure please give me a second',\n      ariaLabel: 'Sara Davis said  Yeah, sure please give me a second '\n    },\n    {\n      id: '1295058543',\n      type: 'message',\n      variant: 'receiver',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Sara Davis'\n      },\n      message: '5588-8899-45-89',\n      timeStamp: '1:50 PM',\n      attachments: [\n        {\n          id: '2499167348',\n          name: 'Vehicle insurance',\n          icon: 'document-doc',\n          meta: 'WORD 1.1 MB'\n        }\n      ],\n      ariaLabel: 'Sara Davis said  5588-8899-45-89 at 1:50 PM with 1 attachment'\n    },\n    {\n      id: '2690247642',\n      type: 'message',\n      variant: 'sender',\n      direction: 'out',\n      avatarInfo: {\n        name: 'John Brown'\n      },\n      message: 'Let me pick your details',\n      status: 'Delivered',\n      ariaLabel: 'John Brown said  Let me pick your details '\n    },\n    {\n      id: '1208949065',\n      type: 'message',\n      variant: 'sender',\n      direction: 'out',\n      avatarInfo: {\n        name: 'John Brown'\n      },\n      message: 'Can I please transfer your chat request to concerned department please ?',\n      timeStamp: '1:51 PM',\n      ariaLabel:\n        'John Brown said  Can I please transfer your chat request to concerned department please ? at 1:51 PM'\n    },\n    {\n      id: '4302656892',\n      type: 'message',\n      variant: 'receiver',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Sara Davis'\n      },\n      message: 'Sure',\n      timeStamp: '1:51 PM',\n      ariaLabel: 'Sara Davis said  Sure at 1:51 PM'\n    },\n    {\n      id: '658052414',\n      type: 'message',\n      variant: 'sender',\n      direction: 'out',\n      avatarInfo: {\n        name: 'John Brown'\n      },\n      message: 'Please give me a moment',\n      timeStamp: '1:51 PM',\n      ariaLabel: 'John Brown said  Please give me a moment at 1:51 PM'\n    },\n    {\n      id: '719933419',\n      type: 'system',\n      message: 'Mike has joined'\n    },\n    {\n      id: '679831597',\n      type: 'message',\n      variant: 'sender',\n      direction: 'out',\n      message:\n        'Hi Sara. This is Mike. John has discussed with me. I will be helping you out with the required details',\n      timeStamp: '1:51 PM',\n      ariaLabel:\n        'You said Hi Sara. This is Mike. John has discussed with me. I will be helping you out with the required details at 1:51 PM'\n    },\n    {\n      id: '2785439809',\n      type: 'system',\n      message: 'John brown has left'\n    },\n    {\n      id: '85859690',\n      type: 'message',\n      variant: 'sender',\n      direction: 'out',\n      message: 'Ok, your insurance is valid until Dec 21, 2020 11:00 AM',\n      timeStamp: '1:52 PM',\n      ariaLabel: 'You said Ok, your insurance is valid until Dec 21, 2020 11:00 AM at 1:52 PM'\n    },\n    {\n      id: '2484793043',\n      type: 'message',\n      variant: 'receiver',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Sara Davis'\n      },\n      message: 'Thanks',\n      timeStamp: '1:52 PM',\n      ariaLabel: 'Sara Davis said  Thanks at 1:52 PM'\n    },\n    {\n      id: '352967030',\n      type: 'message',\n      variant: 'sender',\n      direction: 'out',\n      message: 'Is there anything I can help you with',\n      timeStamp: '1:52 PM',\n      ariaLabel: 'You said Is there anything I can help you with at 1:52 PM'\n    },\n    {\n      id: '3432757116',\n      type: 'message',\n      variant: 'receiver',\n      direction: 'in',\n      avatarInfo: {\n        name: 'Sara Davis'\n      },\n      message: 'I am good.😃',\n      timeStamp: '1:53 PM',\n      ariaLabel: 'Sara Davis said  I am good 😃. at 1:53 PM'\n    },\n    {\n      id: '2432461831',\n      type: 'message',\n      variant: 'sender',\n      direction: 'out',\n      message: 'Thanks for contacting us, have a great day',\n      timeStamp: '1:53 PM',\n      ariaLabel: 'You said Thanks for contacting us, have a great day at 1:53 PM'\n    },\n    {\n      id: '2965626280',\n      type: 'system',\n      message: 'Chat has been ended'\n    }\n  ],\n  defaultAttachments: [\n    {\n      id: '4455774588',\n      name: '03/2020 statement.pdf'\n    },\n    {\n      id: '44557745889',\n      name: 'Policy T&C.pdf'\n    }\n  ],\n  suggestedReplies: [\n    {\n      id: 'suggested_reply_1',\n      message: 'Hello, Good morning Sara. How can I help you today',\n      confidence: 94\n    },\n    {\n      id: 'suggested_reply_2',\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  phrasesDisplayNames: [\n    'Account > Account balance',\n    'Agreement > End of a case/interaction',\n    'Agreement > Mid interaction',\n    'Apologize > Apologize - ask customer to',\n    'Apologize > Thanks for patience',\n    'Ask for transfer > Agent not available',\n    'Ask for transfer > Agent not available - call back',\n    'Ask for transfer > Agent not available - stall',\n    'Account > Account balance',\n    'Agreement > End of a case/interaction',\n    'Agreement > Mid interaction',\n    'Apologize > Apologize - ask customer to',\n    'Apologize > Thanks for patience',\n    'Ask for transfer > Agent not available',\n    'Ask for transfer > Agent not available - call back',\n    'Ask for transfer > Agent not available - stall',\n    'Account > Account balance'\n  ],\n  phrasesMessages: [\n    'Ms. Sara J Connor your account balance is $5226.32',\n    'My pleasure! Is there anything else I can do for you today?',\n    'You are welcome!',\n    \"Ms.Connor. We do not respond to that kind of language. I'm doing my best to help you. Please be civil.\",\n    'Thanks for your patience. I am working on your request. I will be with you shortly.',\n    'It looks like the agent we were looking to transfer you to will not be available. One moment please while I see whether someone else can assist.',\n    \"The agent I was looking to transfer you to isn't available. Would it be possible for us to call you when a specialist is available?\",\n    'It looks like the agent we were looking to transfer you to will not be available. One moment please while I see whether someone else can assist.',\n    'Ms. Sara J Connor your account balance is $5226.32',\n    'My pleasure! Is there anything else I can do for you today?',\n    'You are welcome!',\n    \"Ms.Connor. We do not respond to that kind of language. I'm doing my best to help you. Please be civil.\",\n    'Thanks for your patience. I am working on your request. I will be with you shortly.',\n    'It looks like the agent we were looking to transfer you to will not be available. One moment please while I see whether someone else can assist.',\n    \"The agent I was looking to transfer you to isn't available. Would it be possible for us to call you when a specialist is available?\",\n    'It looks like the agent we were looking to transfer you to will not be available. One moment please while I see whether someone else can assist.',\n    'Ms. Sara J Connor your account balance is $5226.32'\n  ]\n};\n"]}

package/lib/social/Chat/Chat.stories.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { ChatProps } from '@pega/cosmos-react-social';
+declare const _default: {
+    title: string;
+    component: import("react").FunctionComponent<ChatProps & import("@pega/cosmos-react-core").ForwardProps>;
+};
+export default _default;
+export declare const chatHeader: () => JSX.Element;
+export declare const MessageList: () => JSX.Element;
+export declare const messageComponent: () => JSX.Element;
+export declare const systemMessage: () => JSX.Element;
+export declare const typeIndicator: () => JSX.Element;
+export declare const chatTranscripts: () => JSX.Element[];
+export declare const transcriptMessage: () => JSX.Element;
+export declare const suggestedReplyPickerComponent: () => JSX.Element;
+export declare const chatComposer: () => JSX.Element;
+export declare const StandardChat: {
+    ({ chatWidth }: {
+        chatWidth: string;
+    }): JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+//# sourceMappingURL=Chat.stories.d.ts.map

package/lib/social/Chat/Chat.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":";AAqCA,OAAO,EAEL,SAAS,EAkBV,MAAM,2BAA2B,CAAC;;;;;AAMnC,wBAGE;AAwBF,eAAO,MAAM,UAAU,mBA4BtB,CAAC;AAIF,eAAO,MAAM,WAAW,mBAiBvB,CAAC;AAIF,eAAO,MAAM,gBAAgB,mBAiF5B,CAAC;AAIF,eAAO,MAAM,aAAa,mBAEzB,CAAC;AAIF,eAAO,MAAM,aAAa,mBAIzB,CAAC;AAIF,eAAO,MAAM,eAAe,qBAW3B,CAAC;AAIF,eAAO,MAAM,iBAAiB,mBAM7B,CAAC;AAKF,eAAO,MAAM,6BAA6B,mBAuBzC,CAAC;AAKF,eAAO,MAAM,YAAY,mBAWxB,CAAC;AAmBF,eAAO,MAAM,YAAY;;mBAA0C,MAAM;;;;;CAqjBxE,CAAC"}

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

@@ -0,0 +1,537 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { action } from '@storybook/addon-actions';
+import { radios, array, boolean, text, number, optionsKnob, button } from '@storybook/addon-knobs';
+import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, Status, EmojiContext, createUID, useOuterEvent, TextArea, Select, Option, Menu, useElement, FieldValueList } from '@pega/cosmos-react-core';
+import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
+import * as replyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply.icon';
+import * as replyAllIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply-all.icon';
+import * as forwardIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/forward.icon';
+import { Chat, ChatHeader, ChatBody, ChatComposer, ChatTranscript, Message, MessageList as MessageListComp, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TranscriptMessage, TypeIndicator } from '@pega/cosmos-react-social';
+import { ChatMockData } from './Chat.mocks';
+registerIcon(forwardIcon, replyIcon, replyAllIcon, arrowMicroDownIcon);
+export default {
+    title: 'Social/Chat',
+    component: Chat
+};
+const Channels = {
+    label: 'Channel',
+    options: {
+        LiveChat: {
+            title: 'Live chat',
+            icon: 'chat-solid'
+        },
+        Twitter: {
+            title: 'Twitter chat',
+            icon: 'twitter'
+        },
+        Facebook: {
+            title: 'Facebook messenger',
+            icon: 'facebook'
+        }
+    }
+};
+export const chatHeader = () => {
+    const actionsConfig = (<Flex>
+      <Button variant='simple' aria-label='Show transcripts'>
+        <Flex container={{
+            gap: 1,
+            alignItems: 'center'
+        }}>
+          <Icon name='chats'/>
+          <Text>Transcripts</Text>
+        </Flex>
+      </Button>
+      <Button variant='simple' icon aria-label='chat info'>
+        <Icon name='information'/>
+      </Button>
+    </Flex>);
+    return (<ChatHeader title='Live Chat' icon='chat-solid' aria-label='Chat header' actions={actionsConfig}/>);
+};
+export const MessageList = () => {
+    const messages = ChatMockData.chatMessages;
+    const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
+    return (<Flex container style={{ height: '80vh' }}>
+      <MessageListComp tabIndex={0} messages={messages} unReadMessageCount={unReadMessageCount} onScrollToButtonClick={() => {
+            setUnReadMessagesCount(0);
+        }}/>
+    </Flex>);
+};
+export const messageComponent = () => {
+    const MessageVariantPropValues = {
+        sender: 'sender',
+        receiver: 'receiver',
+        other: 'other'
+    };
+    const MessageDirectionPropValues = {
+        in: 'in',
+        out: 'out'
+    };
+    const variantProp = radios('Variant', MessageVariantPropValues, 'receiver');
+    const directionProp = radios('Direction', MessageDirectionPropValues, 'in');
+    const attachments = [
+        {
+            id: '2499167340',
+            name: 'Location',
+            icon: 'document',
+            meta: 'PNG 0.1 MB',
+            thumbnail: 'https://pegasystems.github.io/uplus-wss/health_provider/img/secondary-options.jpg'
+        },
+        {
+            id: '2499167341',
+            name: 'FAQ with detailed terms and conditions of the policy',
+            icon: 'document-pdf',
+            meta: 'PDF 0.7 MB'
+        }
+    ];
+    const pagePushLinks = [
+        {
+            id: '2499167349',
+            href: 'https://collaborate.pega.com/',
+            thumbnail: 'https://community.pega.com/sites/default/files/styles/480/public/media/images/2020-02/AskExpert.png?itok=ef2MVbOV',
+            title: 'Ask the expert'
+        }
+    ];
+    return (<>
+      
+      <Message type='message' attachments={attachments} avatarInfo={{ name: 'John Brown' }} status='Opened' timeStamp='1:44 PM' message='Hi, Welcome to u-plus. How can I help you ?' variant={variantProp} direction={directionProp}/>
+      <br />
+      
+      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} pagePushLinks={pagePushLinks} variant={variantProp} direction={directionProp}/>
+      <br />
+      
+      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} variant={variantProp} direction={directionProp}/>
+    </>);
+};
+export const systemMessage = () => (<SystemMessage message='John Brown has joined' timeStamp='10:00 AM'/>);
+export const typeIndicator = () => {
+    const TypeIndicatorMessageProp = text('message', '');
+    return <TypeIndicator avatarInfo={{ name: 'John Brown' }} message={TypeIndicatorMessageProp}/>;
+};
+export const chatTranscripts = () => {
+    return ChatMockData.transcripts.map((transcript) => {
+        return (<ChatTranscript tabIndex={0} title={transcript.title} key={transcript.id} transcript={transcript.data}/>);
+    });
+};
+export const transcriptMessage = () => (<TranscriptMessage timeStamp='01:20 PM' variant='bot' message='Hello… This is bot. How can I help you? Please select your category.'/>);
+export const suggestedReplyPickerComponent = () => {
+    const suggestedReplies = [
+        {
+            id: createUID(),
+            message: 'Hello, Good morning Sara. How can I help you today',
+            confidence: 95
+        },
+        {
+            id: createUID(),
+            message: 'Sorry to hear that. I will surely help you resolve the issue. Can you please provide the policy id, so that I can get more details',
+            confidence: 75
+        }
+    ];
+    return (<SuggestedReplyPicker replies={suggestedReplies} onSelect={suggestedReply => {
+            action(`Suggested reply picked ${suggestedReply.message}`)();
+        }} onDismiss={action('Suggested reply dismissed')}/>);
+};
+export const chatComposer = () => (<ChatComposer maxAttachments={number('Max Attachments', 2)} attachments={ChatMockData.defaultAttachments} maxLength={256} placeholder='Type here to send message' onSend={() => { }}>
+    <MenuButton text='Phrases' menu={{ items: [] }}/>
+    <MenuButton text='Page Push' menu={{ items: [] }}/>
+  </ChatComposer>);
+const allParticipants = ChatMockData.participants;
+const chatParticipants = Object.keys(allParticipants).reduce((obj, key) => {
+    if (!allParticipants[key].avatarInfo) {
+        return obj;
+    }
+    const name = allParticipants[key].avatarInfo.name;
+    obj[name] = name;
+    return obj;
+}, {});
+const channelOptions = Object.keys(Channels.options).reduce((obj, key) => {
+    obj[key] = key;
+    return obj;
+}, {});
+export const StandardChat = ({ chatWidth = '30rem' }) => {
+    const ChatMockDataClone = useMemo(() => {
+        return JSON.parse(JSON.stringify(ChatMockData));
+    }, [ChatMockData]);
+    const { participants, chatMessages: mockChatMessagesJson, transcripts, defaultAttachments, suggestedReplies } = ChatMockDataClone;
+    const conversationRatingMessage = {
+        id: createUID(),
+        variant: 'receiver',
+        direction: 'in',
+        type: 'message',
+        message: (<Flex container={{
+                direction: 'column',
+                gap: 1
+            }}>
+        <TextArea placeholder='Please comment…' label='Please comment on our service performance and how we can better serve you. Thank you for your time.'/>
+        <Select label='Is the problem resolved?'>
+          <Option>Yes</Option>
+          <Option>No</Option>
+        </Select>
+        <Flex container={{
+                justify: 'center'
+            }}>
+          <Button variant='primary'>Submit</Button>
+        </Flex>
+      </Flex>)
+    };
+    const mockChatMessages = useMemo(() => {
+        return [
+            ...mockChatMessagesJson.map(message => {
+                const { messagePrivacy, ...restMessageData } = message;
+                if (messagePrivacy) {
+                    restMessageData.messageHeader = {
+                        content: <span>{messagePrivacy}</span>,
+                        meta: <Link href='/'>I-12345</Link>
+                    };
+                }
+                return restMessageData;
+            }),
+            conversationRatingMessage
+        ];
+    }, []);
+    const conversationRef = useRef(null);
+    const timers = useRef([]);
+    useEffect(() => {
+        return () => {
+            timers.current.forEach(clearTimeout);
+        };
+    }, []);
+    const selectedChannel = radios(Channels.label, channelOptions, Object.keys(channelOptions)[0]);
+    const actions = array('Actions', ['Transfer', 'End chat']).map(name => ({
+        primary: name,
+        id: name,
+        onClick: action(`Clicked ${name}`)
+    }));
+    const [showSuggestedReplies, setShowSuggestedReplies] = useState(true);
+    const disableChat = boolean('Disable chat', false);
+    const simulateConversation = boolean('Simulate conversation', false);
+    const placeHolder = text('Placeholder', 'Enter message');
+    const defaultMessage = text('Default message', 'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!');
+    const maxLength = number('Max characters', 280);
+    const typers = optionsKnob('Participants typing', chatParticipants, '', {
+        display: 'multi-select'
+    });
+    const [showTranscripts, setShowTranscripts] = useState(false);
+    const [attachments, setAttachments] = useState(defaultAttachments);
+    const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
+    const [chatMessages, setChatMessages] = useState(simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages);
+    const onDeleteAttachment = useCallback((name) => {
+        setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
+    }, [setAttachments]);
+    useEffect(() => {
+        setAttachments(defaultAttachments.map((item) => {
+            return {
+                ...item,
+                onDelete: onDeleteAttachment
+            };
+        }));
+    }, [defaultAttachments]);
+    const appendMessage = (message) => {
+        const incrementUnreadMessageCount = conversationRef.current?.isScrolledToLatest();
+        setChatMessages(prevChatMessages => {
+            const newMockMessage = {
+                ...message
+            };
+            newMockMessage.id = `m-${message.id ? message.id : prevChatMessages.length}`;
+            if (!incrementUnreadMessageCount &&
+                prevChatMessages.filter(({ id }) => id === NewMessageSeparatorId).length === 0) {
+                return [
+                    ...prevChatMessages,
+                    {
+                        id: NewMessageSeparatorId,
+                        type: 'system',
+                        message: 'New messages',
+                        variant: 'primary'
+                    },
+                    newMockMessage
+                ];
+            }
+            return [...prevChatMessages, newMockMessage];
+        });
+        if (!incrementUnreadMessageCount) {
+            setUnreadMessagesCount(prevCount => prevCount + 1);
+        }
+    };
+    useEffect(() => {
+        if (simulateConversation) {
+            const timeOutId = setTimeout(() => {
+                if (mockChatMessages.length) {
+                    appendMessage(mockChatMessages.shift());
+                }
+            }, 1500);
+            return () => {
+                clearTimeout(timeOutId);
+            };
+        }
+    }, [chatMessages, simulateConversation]);
+    const customerMessage = text('Customer message', '');
+    button('Send customer message', () => {
+        appendMessage({
+            type: 'message',
+            ...participants.receiver,
+            message: customerMessage,
+            timeStamp: '1:45 PM'
+        });
+        return false;
+    });
+    const managerMessage = text('Manager message', '');
+    button('Send manager message', () => {
+        appendMessage({
+            type: 'message',
+            ...participants.other,
+            message: managerMessage,
+            timeStamp: '1:45 PM'
+        });
+        return false;
+    });
+    const typingIndicators = typers
+        .toString()
+        .split(',')
+        .filter(person => person !== '')
+        .map(name => {
+        let message = '';
+        if (name === participants.receiver.avatarInfo.name) {
+            message = customerMessage;
+        }
+        else if (name === participants.other.avatarInfo.name) {
+            message = managerMessage;
+        }
+        return {
+            id: name,
+            type: 'typing',
+            avatarInfo: {
+                name
+            },
+            message,
+            ariaLabel: `${name} is typing`
+        };
+    });
+    const [openPopover, setOpenPopover] = useState(false);
+    const [popoverRef, setPopoverRef] = useElement();
+    const [buttonRef, setButtonRef] = useElement();
+    const additionalInfo = {
+        title: 'Additional info',
+        options: {
+            LiveChat: [
+                {
+                    id: '1',
+                    name: 'Session status',
+                    value: <Status variant='urgent'>UNAUTHENTICATED</Status>
+                },
+                {
+                    id: '2',
+                    name: 'Profile name',
+                    value: 'Sara Davis'
+                }
+            ],
+            Twitter: [
+                {
+                    id: '1',
+                    name: 'Session status',
+                    value: <Status variant='urgent'>UNAUTHENTICATED</Status>
+                },
+                {
+                    id: '2',
+                    name: 'Twitter handle',
+                    value: '@Connor'
+                },
+                {
+                    id: '3',
+                    name: 'Followers',
+                    value: '13,556'
+                }
+            ],
+            Facebook: [
+                {
+                    id: '1',
+                    name: 'Session status',
+                    value: <Status variant='urgent'>UNAUTHENTICATED</Status>
+                },
+                {
+                    id: '2',
+                    name: 'Profile name',
+                    value: 'Sara Davis'
+                }
+            ]
+        }
+    };
+    useOuterEvent('mousedown', [popoverRef, buttonRef], () => {
+        if (openPopover)
+            setOpenPopover(false);
+    });
+    const header = (<ChatHeader title={Channels.options[selectedChannel].title} icon={Channels.options[selectedChannel].icon} aria-label='Chat header' actions={<Flex>
+          <Button variant='simple' onClick={() => setShowTranscripts(!showTranscripts)} aria-label='Show transcripts'>
+            <Flex container={{
+                gap: 1,
+                alignItems: 'center'
+            }}>
+              <Icon name='chats'/>
+              <Text>Transcripts</Text>
+            </Flex>
+          </Button>
+          <Button variant='simple' icon aria-label='chat info' ref={setButtonRef} onClick={() => setOpenPopover(current => !current)}>
+            <Icon name='information'/>
+          </Button>
+          <Popover show={openPopover} target={buttonRef} ref={setPopoverRef} arrow placement='bottom-end'>
+            <Flex container={{ direction: 'column', gap: 1, pad: 2 }}>
+              <Text variant='h4'>{additionalInfo.title}</Text>
+              <FieldValueList variant='inline' fields={additionalInfo.options[selectedChannel]}/>
+            </Flex>
+          </Popover>
+          <MenuButton text='More actions' icon='more' iconOnly variant='simple' portal menu={{ items: actions }}/>
+        </Flex>}/>);
+    const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);
+    const transcriptsContainerRef = useRef(null);
+    useOuterEvent('mousedown', [transcriptsContainerRef], () => {
+        setShowTranscripts(false);
+    });
+    const utilityComp = useMemo(() => {
+        return showTranscripts ? (<div ref={transcriptsContainerRef}>
+        {!showEarlierTranscripts && (<Flex container={{
+                    direction: 'column',
+                    alignItems: 'center',
+                    gap: 1
+                }}>
+            <Button icon aria-label='Show earlier transcripts' variant='secondary' onClick={() => {
+                    setShowEarlierTranscripts(!showEarlierTranscripts);
+                }}>
+              <Icon name='caret-up'/>
+            </Button>
+          </Flex>)}
+        {transcripts
+                .sort((transcript) => transcript.earlierTranscripts)
+                .filter((transcript) => showEarlierTranscripts ? true : !transcript.earlierTranscripts)
+                .map((transcript) => {
+                const transcriptData = transcript.data.map((message) => {
+                    if (message.messagePrivacy) {
+                        message.transcriptHeader = {
+                            content: <Status variant='warn'>{message.messagePrivacy.privacy}</Status>,
+                            meta: <Link href='/'>I-12345</Link>
+                        };
+                    }
+                    return message;
+                });
+                return (<ChatTranscript tabIndex={0} title={transcript.title} key={transcript.id} transcript={transcriptData}/>);
+            })}
+      </div>) : undefined;
+    }, [showTranscripts, setShowTranscripts, showEarlierTranscripts, setShowEarlierTranscripts]);
+    const showChatBanner = boolean('Show banner', true);
+    const chatBanner = {
+        id: 'warning',
+        messages: ['This is a public interaction and any responses will be public and visible'],
+        heading: 'Warning',
+        variant: 'warning'
+    };
+    const body = (<ChatBody>
+      <MessageListComp unReadMessageCount={unreadMessagesCount} onScrollToButtonClick={() => {
+            const newRandomMessageId = Math.random().toString(36).substr(2, 9);
+            setChatMessages(prevChatMessages => prevChatMessages.map(message => {
+                if (message.id === NewMessageSeparatorId) {
+                    message.id = newRandomMessageId;
+                }
+                return message;
+            }));
+            const timeOutId = window.setTimeout(() => {
+                setChatMessages(prevChatMessages => prevChatMessages.filter(({ id }) => id !== newRandomMessageId));
+                timers.current = timers.current.filter(id => id !== timeOutId);
+            }, 5000);
+            timers.current.push(timeOutId);
+            setUnreadMessagesCount(0);
+        }} tabIndex={0} ref={conversationRef} messages={[...chatMessages, ...typingIndicators]}/>
+    </ChatBody>);
+    const chatComposerImperativeHandleRef = useRef(null);
+    const phrase = text('Phrase', 'How can I help you?');
+    button('Push prase at start', () => {
+        if (chatComposerImperativeHandleRef.current) {
+            chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'start');
+        }
+        return false;
+    });
+    button('Push prase at end', () => {
+        if (chatComposerImperativeHandleRef.current) {
+            chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'end');
+        }
+        return false;
+    });
+    button('Push prase at cursor', () => {
+        if (chatComposerImperativeHandleRef.current) {
+            chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'cursor');
+        }
+        return false;
+    });
+    const [mountPopover, setMountPopover] = useState(false);
+    const specialKeysConfig = {
+        keys: ['//'],
+        onSpecialKey: (e, key) => {
+            action(`Event is  ${e}`)();
+            action(`Typed special key is ${key}`)();
+            if (chatComposerImperativeHandleRef.current) {
+                setMountPopover(!mountPopover);
+            }
+        }
+    };
+    const insertPhrasesMessage = (message) => {
+        if (chatComposerImperativeHandleRef.current) {
+            chatComposerImperativeHandleRef.current.appendToMessage(message, 'specialKey');
+            setMountPopover(false);
+        }
+    };
+    useOuterEvent('mousedown', [chatComposerImperativeHandleRef?.current?.chatComposerRef?.current], () => {
+        setMountPopover(false);
+    });
+    const footer = (<ChatComposer ref={chatComposerImperativeHandleRef} maxAttachments={number('Max Attachments', attachments.length)} attachments={attachments} specialKeysConfig={specialKeysConfig} showEmoji disabled={disableChat} onAddAttachment={() => {
+            setAttachments([
+                ...attachments,
+                {
+                    id: `${attachments.length} statement.pdf`,
+                    name: `${attachments.length} statement.pdf`,
+                    onDelete: onDeleteAttachment
+                }
+            ]);
+        }} maxLength={maxLength} placeholder={placeHolder} defaultMessage={defaultMessage} onSend={message => {
+            action(`onAppendMessage: ${message}`)();
+            appendMessage({
+                ...participants.sender,
+                type: 'message',
+                message,
+                timeStamp: '1:45 PM'
+            });
+        }}>
+      <MenuButton text='Phrases' actions={[]} disabled={disableChat}/>
+      <MenuButton text='Page push' actions={[]} disabled={disableChat}/>
+      <Popover show={mountPopover} target={chatComposerImperativeHandleRef?.current?.textAreaRef?.current} placement='top-start'>
+        <Menu scrollAt={20} items={ChatMockData.phrasesDisplayNames.map((name, idx) => ({
+            primary: name,
+            id: idx.toString(),
+            onClick: () => insertPhrasesMessage(ChatMockData.phrasesMessages[idx])
+        }))}/>
+      </Popover>
+    </ChatComposer>);
+    button('Toggle suggested replies', () => {
+        setShowSuggestedReplies(show => !show);
+        return false;
+    });
+    const suggestedReplyPicker = suggestedReplies.length > 0 && showSuggestedReplies ? (<SuggestedReplyPicker replies={suggestedReplies} onSelect={(suggestedReply) => {
+            chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
+            setShowSuggestedReplies(false);
+        }} onDismiss={() => {
+            setShowSuggestedReplies(false);
+        }}/>) : undefined;
+    const fetchGoogleSprite = () => {
+        return 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-256/64.png';
+    };
+    return (<EmojiContext.Provider value={{ set: 'google', spriteSrcResolver: fetchGoogleSprite }}>
+      <Flex container={{
+            justify: 'center'
+        }} style={{
+            height: 'calc(100vh)',
+            width: chatWidth,
+            margin: 'auto'
+        }}>
+        <Chat utility={utilityComp} header={header} banner={showChatBanner ? chatBanner : undefined} body={body} footer={footer} suggestedReplyPicker={suggestedReplyPicker}/>
+      </Flex>
+    </EmojiContext.Provider>);
+};
+StandardChat.parameters = {
+    layout: 'fullscreen'
+};
+//# sourceMappingURL=Chat.stories.jsx.map