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

package/lib/rte/RichTextEditor/RichTextViewer.stories.js

@@ -8,6 +8,19 @@ export default {
     title: 'RTE/RichTextViewer',
     component: RichTextViewer
 };
+export const RichTextViewerDemo = () => {
+    const editorRef = useRef(null);
+    const [content, setContent] = useState('[]');
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(RichTextEditor, { ref: editorRef, toolbar: [
+                    'inline-styling',
+                    'headers',
+                    'tables',
+                    'links',
+                    'lists',
+                    'cut-copy-paste',
+                    'indentation'
+                ], onChange: () => setContent(editorRef.current?.getRichText() || '') }, void 0), _jsx(RichTextViewer, { content: content, type: 'richtext' }, void 0)] }, void 0));
+};
 export const RichTextViewerHTMLDemo = () => {
     const editorRef = useRef(null);
     const [content, setContent] = useState('');
@@ -35,7 +48,7 @@ export const RichTextViewerMDDemo = () => {
             }));
         }
     };
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(RichTextEditor, { ref: editorRef, searchTriggers: [{ trigger: '@', regex: String.raw `[a-zA-Z]*(?: [a-zA-Z]*)?` }], onSearch: searchUsers, getSearchItemReplacement: (id) => {
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(RichTextEditor, { ref: editorRef, searchTriggers: [{ trigger: '@', regex: '[a-zA-Z]*(?: [a-zA-Z]*)?' }], onSearch: searchUsers, getSearchItemReplacement: (id) => {
                     const item = demoUsers.find(({ id: itemId }) => itemId === id);
                     if (!item)
                         return undefined;
@@ -43,7 +56,7 @@ export const RichTextViewerMDDemo = () => {
                         markdown: `@${item.id}:${item.primary}:user:`,
                         text: item.primary
                     };
-                }, menu: users.length ? { items: users } : undefined, autoFocus: true, markdownOnly: true, defaultValue: '# Try writing some of your own markdown and see how it renders!\n\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\n\nThere is built in support for #tags as well!\n\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)', onChange: () => setContent(editorRef.current?.getPlainText() || '') }, void 0), _jsx(RichTextViewer, { content: content, type: 'markdown', interactionRenderers: [MentionButtonConfig, HashtagButtonConfig], markdownMap: {
+                }, menu: users.length ? { items: users } : undefined, autoFocus: true, markdownOnly: true, defaultValue: '# Try writing some of your own markdown and see how it renders!\n\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\n\nThere is built in support for #tags: as well!\n\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)', onChange: () => setContent(editorRef.current?.getPlainText() || '') }, void 0), _jsx(RichTextViewer, { content: content, type: 'markdown', interactionRenderers: [MentionButtonConfig, HashtagButtonConfig], markdownMap: {
                     link: (linkToken) => {
                         if (linkToken.href?.includes('www.pega.com'))
                             return LinkComponent;

package/lib/rte/RichTextEditor/RichTextViewer.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextViewer.stories.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link, MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport {\n  RichTextEditor,\n  RichTextViewer,\n  RichTextEditorState,\n  TokenMap\n} from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextViewer',\n  component: RichTextViewer\n} as Meta;\n\nexport const RichTextViewerHTMLDemo = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerMDDemo = () => {\n  const LinkComponent = ({ token }: { token: TokenMap['link'] }) => {\n    return (\n      <Link href={token.href} previewable>\n        {token.text}\n      </Link>\n    );\n  };\n\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n  const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n  const searchUsers = (event: { search: string; trigger: string }) => {\n    if (event.trigger === '@') {\n      setUsers(\n        demoUsers.filter(user => {\n          return user.primary.toLowerCase().includes(event.search.toLowerCase());\n        })\n      );\n    }\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        searchTriggers={[{ trigger: '@', regex: String.raw`[a-zA-Z]*(?: [a-zA-Z]*)?` }]}\n        onSearch={searchUsers}\n        getSearchItemReplacement={(id: string) => {\n          const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown: `@${item.id}:${item.primary}:user:`,\n            text: item.primary\n          };\n        }}\n        menu={users.length ? { items: users } : undefined}\n        autoFocus\n        markdownOnly\n        defaultValue={\n          '# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\\n\\nThere is built in support for #tags as well!\\n\\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)'\n        }\n        onChange={() => setContent(editorRef.current?.getPlainText() || '')}\n      />\n\n      <RichTextViewer\n        content={content}\n        type='markdown'\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        markdownMap={{\n          link: (linkToken: TokenMap['link']) => {\n            if (linkToken.href?.includes('www.pega.com')) return LinkComponent;\n          }\n        }}\n      />\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"RichTextViewer.stories.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Flex, Link, MenuItemProps } from '@pega/cosmos-react-core';\nimport { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';\nimport {\n  RichTextEditor,\n  RichTextViewer,\n  RichTextEditorState,\n  TokenMap\n} from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n  title: 'RTE/RichTextViewer',\n  component: RichTextViewer\n} as Meta;\n\nexport const RichTextViewerDemo = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('[]');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getRichText() || '')}\n      />\n\n      <RichTextViewer content={content} type='richtext' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerHTMLDemo = () => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        toolbar={[\n          'inline-styling',\n          'headers',\n          'tables',\n          'links',\n          'lists',\n          'cut-copy-paste',\n          'indentation'\n        ]}\n        onChange={() => setContent(editorRef.current?.getHtml() || '')}\n      />\n\n      <RichTextViewer content={content} type='html' />\n    </Flex>\n  );\n};\n\nexport const RichTextViewerMDDemo = () => {\n  const LinkComponent = ({ token }: { token: TokenMap['link'] }) => {\n    return (\n      <Link href={token.href} previewable>\n        {token.text}\n      </Link>\n    );\n  };\n\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [content, setContent] = useState('');\n  const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n  const searchUsers = (event: { search: string; trigger: string }) => {\n    if (event.trigger === '@') {\n      setUsers(\n        demoUsers.filter(user => {\n          return user.primary.toLowerCase().includes(event.search.toLowerCase());\n        })\n      );\n    }\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <RichTextEditor\n        ref={editorRef}\n        searchTriggers={[{ trigger: '@', regex: '[a-zA-Z]*(?: [a-zA-Z]*)?' }]}\n        onSearch={searchUsers}\n        getSearchItemReplacement={(id: string) => {\n          const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n          if (!item) return undefined;\n\n          return {\n            markdown: `@${item.id}:${item.primary}:user:`,\n            text: item.primary\n          };\n        }}\n        menu={users.length ? { items: users } : undefined}\n        autoFocus\n        markdownOnly\n        defaultValue={\n          '# Try writing some of your own markdown and see how it renders!\\n\\nYou can interact with mentions such as @deans:Seth DeAngelo:user:\\n\\nThere is built in support for #tags: as well!\\n\\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)'\n        }\n        onChange={() => setContent(editorRef.current?.getPlainText() || '')}\n      />\n\n      <RichTextViewer\n        content={content}\n        type='markdown'\n        interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n        markdownMap={{\n          link: (linkToken: TokenMap['link']) => {\n            if (linkToken.href?.includes('www.pega.com')) return LinkComponent;\n          }\n        }}\n      />\n    </Flex>\n  );\n};\n"]}

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

@@ -1,43 +1,54 @@
 /// <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>;
-};
+import { Meta, Story } from '@storybook/react';
+import { MessageProps } from '@pega/cosmos-react-social';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 /** *********************** ChatHeader component - START *********************** */
-export declare const chatHeader: () => JSX.Element;
+export declare const ChatHeaderDemo: () => JSX.Element;
 /** ***************************** ChatHeader component - END ******************* */
 /** **************************** MessageList component - START ************************* */
-export declare const MessageList: () => JSX.Element;
+export declare const MessageListDemo: () => JSX.Element;
 /** **************************** MessageList component - END **************************** */
 /** ***************************** Message component - START ********************** */
-export declare const messageComponent: () => JSX.Element;
+export declare const MessageDemo: Story<MessageProps>;
 /** ***************************** Message component - END *********************** */
 /** **************************** SystemMessage component - START ***************** */
-export declare const systemMessage: () => JSX.Element;
+export declare const SystemMessageDemo: () => JSX.Element;
 /** ***************************** SystemMessage component - END ******************** */
 /** ***************************** TypeIndicator component - START ****************** */
-export declare const typeIndicator: () => JSX.Element;
+interface TypeIndicatorDemoProps {
+    message?: string;
+}
+export declare const TypeIndicatorDemo: Story<TypeIndicatorDemoProps>;
 /** *************************** TypeIndicator component - END *********************** */
 /** ************************** ChatTranscripts component - START ********************* */
-export declare const chatTranscripts: () => JSX.Element[];
+export declare const ChatTranscriptsDemo: () => JSX.Element[];
 /** **************************** ChatTranscripts component - END ************************ */
 /** *************************** TranscriptMessage component - START ****************** */
-export declare const transcriptMessage: () => JSX.Element;
+export declare const TranscriptMessageDemo: () => JSX.Element;
 /** *************************** TranscriptMessage component - END ******************** */
 /** *************************** SuggestedReplyPicker component - START ****************** */
-export declare const suggestedReplyPickerComponent: () => JSX.Element;
+export declare const SuggestedReplyPickerDemo: () => JSX.Element;
 /** *************************** SuggestedReplyPicker component - END ****************** */
 /** ******************************* ChatComposer component - START ************************ */
-export declare const chatComposer: () => JSX.Element;
-export declare const StandardChat: {
-    ({ chatWidth }: {
-        chatWidth: string;
-    }): JSX.Element;
-    parameters: {
-        layout: string;
-    };
-};
+interface ChatComposerDemoProps {
+    maxAttachments?: number;
+}
+export declare const ChatComposerDemo: Story<ChatComposerDemoProps>;
+/** *********************************** ChatComposer component - END ********************** */
+/** *********************************** Standard Chat component - START ******************** */
+interface StandardChatProps {
+    maxAttachments?: number;
+    chatWidth?: string;
+    selectedChannel?: string;
+    showChatBanner?: boolean;
+    disableChat?: boolean;
+    simulateConversation?: boolean;
+    message?: string;
+    placeholder?: string;
+    defaultMessage?: string;
+    maxLength?: number;
+}
+export declare const StandardChat: Story<StandardChatProps>;
 /** *************************** Standard Chat component - END ************************ */
 //# sourceMappingURL=Chat.stories.d.ts.map

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

@@ -1 +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;AAuBF,mFAAmF;AACnF,eAAO,MAAM,UAAU,mBA4BtB,CAAC;AACF,mFAAmF;AAEnF,2FAA2F;AAC3F,eAAO,MAAM,WAAW,mBAiBvB,CAAC;AACF,4FAA4F;AAE5F,qFAAqF;AACrF,eAAO,MAAM,gBAAgB,mBAiF5B,CAAC;AACF,oFAAoF;AAEpF,qFAAqF;AACrF,eAAO,MAAM,aAAa,mBAEzB,CAAC;AACF,uFAAuF;AAEvF,uFAAuF;AACvF,eAAO,MAAM,aAAa,mBAIzB,CAAC;AACF,wFAAwF;AAExF,yFAAyF;AACzF,eAAO,MAAM,eAAe,qBAW3B,CAAC;AACF,4FAA4F;AAE5F,yFAAyF;AACzF,eAAO,MAAM,iBAAiB,mBAM7B,CAAC;AACF,yFAAyF;AAEzF,4FAA4F;AAE5F,eAAO,MAAM,6BAA6B,mBAuBzC,CAAC;AAEF,0FAA0F;AAE1F,8FAA8F;AAC9F,eAAO,MAAM,YAAY,mBAWxB,CAAC;AAmBF,eAAO,MAAM,YAAY;;mBAA0C,MAAM;;;;;CAqjBxE,CAAC;AAMF,yFAAyF"}
+{"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA2B/C,OAAO,EASL,YAAY,EAWb,MAAM,2BAA2B,CAAC;;AAMnC,wBAGU;AAEV,mFAAmF;AACnF,eAAO,MAAM,cAAc,mBA4B1B,CAAC;AACF,mFAAmF;AAEnF,2FAA2F;AAC3F,eAAO,MAAM,eAAe,mBAiB3B,CAAC;AACF,4FAA4F;AAE5F,qFAAqF;AACrF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,YAAY,CA2D3C,CAAC;AAWF,oFAAoF;AAEpF,qFAAqF;AACrF,eAAO,MAAM,iBAAiB,mBAE7B,CAAC;AACF,uFAAuF;AAEvF,uFAAuF;AACvF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAE3D,CAAC;AASF,wFAAwF;AAExF,yFAAyF;AACzF,eAAO,MAAM,mBAAmB,qBAW/B,CAAC;AACF,4FAA4F;AAE5F,yFAAyF;AACzF,eAAO,MAAM,qBAAqB,mBAMjC,CAAC;AACF,yFAAyF;AAEzF,4FAA4F;AAE5F,eAAO,MAAM,wBAAwB,mBAuBpC,CAAC;AAEF,0FAA0F;AAE1F,8FAA8F;AAC9F,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAWzD,CAAC;AASF,8FAA8F;AAE9F,+FAA+F;AAC/F,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAwgBjD,CAAC;AA+BF,yFAAyF"}

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

@@ -1,38 +1,20 @@
 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 { radios, array, boolean, text, number, optionsKnob, button } from '@storybook/addon-knobs';
 import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, Status, EmojiContext, createUID, useOuterEvent, TextArea, Select, Option, Menu, useElement, FieldValueList } from '@pega/cosmos-react-core';
 import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
 import * as replyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply.icon';
 import * as replyAllIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply-all.icon';
 import * as forwardIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/forward.icon';
-import { Chat, ChatHeader, ChatBody, ChatComposer, ChatTranscript, Message, MessageList as MessageListComp, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TranscriptMessage, TypeIndicator } from '@pega/cosmos-react-social';
+import { Chat, ChatHeader, ChatBody, ChatComposer, ChatTranscript, Message, MessageList, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TranscriptMessage, TypeIndicator } from '@pega/cosmos-react-social';
 import { ChatMockData } from './Chat.mocks';
 registerIcon(forwardIcon, replyIcon, replyAllIcon, arrowMicroDownIcon);
 export default {
     title: 'Social/Chat',
     component: Chat
 };
-const Channels = {
-    label: 'Channel',
-    options: {
-        LiveChat: {
-            title: 'Live chat',
-            icon: 'chat-solid'
-        },
-        Twitter: {
-            title: 'Twitter chat',
-            icon: 'twitter'
-        },
-        Facebook: {
-            title: 'Facebook messenger',
-            icon: 'facebook'
-        }
-    }
-};
 /** *********************** ChatHeader component - START *********************** */
-export const chatHeader = () => {
+export const ChatHeaderDemo = () => {
     const actionsConfig = (_jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
                         gap: 1,
                         alignItems: 'center'
@@ -41,29 +23,16 @@ export const chatHeader = () => {
 };
 /** ***************************** ChatHeader component - END ******************* */
 /** **************************** MessageList component - START ************************* */
-export const MessageList = () => {
+export const MessageListDemo = () => {
     const messages = ChatMockData.chatMessages;
     const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
-    return (_jsx(Flex, { container: true, style: { height: '80vh' }, children: _jsx(MessageListComp, { tabIndex: 0, messages: messages, unReadMessageCount: unReadMessageCount, onScrollToButtonClick: () => {
+    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 messageComponent = () => {
-    /** Storybook knobs are used here to simulate the behavior of variant and direction prop in real time - start */
-    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');
-    /** Storybook knobs are used here to simulate the behavior of variant and direction prop in real time - end */
+export const MessageDemo = (args) => {
     const attachments = [
         {
             id: '2499167340',
@@ -87,31 +56,41 @@ export const messageComponent = () => {
             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: variantProp, direction: directionProp }, 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: variantProp, direction: directionProp }, 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: variantProp, direction: directionProp }, void 0)] }, void 0));
+    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 systemMessage = () => (_jsx(SystemMessage, { message: 'John Brown has joined', timeStamp: '10:00 AM' }, void 0));
-/** ***************************** SystemMessage component - END ******************** */
-/** ***************************** TypeIndicator component - START ****************** */
-export const typeIndicator = () => {
-    /**  storybook knobs are used here to simulate the behavior of message prop in real time */
-    const TypeIndicatorMessageProp = text('message', '');
-    return _jsx(TypeIndicator, { avatarInfo: { name: 'John Brown' }, message: TypeIndicatorMessageProp }, void 0);
+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 chatTranscripts = () => {
+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 transcriptMessage = () => (_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));
+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 suggestedReplyPickerComponent = () => {
+export const SuggestedReplyPickerDemo = () => {
     const suggestedReplies = [
         {
             id: createUID(),
@@ -128,28 +107,34 @@ export const suggestedReplyPickerComponent = () => {
             action(`Suggested reply picked ${suggestedReply.message}`)();
         }, onDismiss: action('Suggested reply dismissed') }, void 0));
 };
-/** *************************** SuggestedReplyPicker component - END ****************** */
-/** ******************************* ChatComposer component - START ************************ */
-export const chatComposer = () => (_jsxs(ChatComposer, { maxAttachments: number('Max Attachments', 2), 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));
-/** *********************************** ChatComposer component - END ********************** */
-/** *********************************** Standard Chat component - START ******************** */
-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' }) => {
+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(),
@@ -185,25 +170,11 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
             timers.current.forEach(clearTimeout);
         };
     }, []);
-    const selectedChannel = radios(Channels.label, channelOptions, Object.keys(channelOptions)[0]);
-    const actions = array('Actions', ['Transfer', 'End chat']).map(name => ({
-        primary: name,
-        id: name,
-        onClick: action(`Clicked ${name}`)
-    }));
     const [showSuggestedReplies, setShowSuggestedReplies] = useState(true);
-    const disableChat = boolean('Disable chat', false);
-    const simulateConversation = boolean('Simulate conversation', false);
-    const placeHolder = text('Placeholder', 'Enter message');
-    const defaultMessage = text('Default message', 'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!');
-    const maxLength = number('Max characters', 280);
-    const typers = optionsKnob('Participants typing', chatParticipants, '', {
-        display: 'multi-select'
-    });
     const [showTranscripts, setShowTranscripts] = useState(false);
     const [attachments, setAttachments] = useState(defaultAttachments);
     const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
-    const [chatMessages, setChatMessages] = useState(simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages);
+    const [chatMessages, setChatMessages] = useState(args.simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages);
     const onDeleteAttachment = useCallback((name) => {
         setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
     }, [setAttachments]);
@@ -242,7 +213,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         }
     };
     useEffect(() => {
-        if (simulateConversation) {
+        if (args.simulateConversation) {
             const timeOutId = setTimeout(() => {
                 if (mockChatMessages.length) {
                     appendMessage(mockChatMessages.shift());
@@ -252,49 +223,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 clearTimeout(timeOutId);
             };
         }
-    }, [chatMessages, simulateConversation]);
-    const customerMessage = text('Customer message', '');
-    button('Send customer message', () => {
-        appendMessage({
-            type: 'message',
-            ...participants.receiver,
-            message: customerMessage,
-            timeStamp: '1:45 PM'
-        });
-        return false;
-    });
-    const managerMessage = text('Manager message', '');
-    button('Send manager message', () => {
-        appendMessage({
-            type: 'message',
-            ...participants.other,
-            message: managerMessage,
-            timeStamp: '1:45 PM'
-        });
-        return false;
-    });
-    const typingIndicators = typers
-        .toString()
-        .split(',')
-        .filter(person => person !== '')
-        .map(name => {
-        let message = '';
-        if (name === participants.receiver.avatarInfo.name) {
-            message = customerMessage;
-        }
-        else if (name === participants.other.avatarInfo.name) {
-            message = managerMessage;
-        }
-        return {
-            id: name,
-            type: 'typing',
-            avatarInfo: {
-                name
-            },
-            message,
-            ariaLabel: `${name} is typing`
-        };
-    });
+    }, [chatMessages, args.simulateConversation]);
     const [openPopover, setOpenPopover] = useState(false);
     const [popoverRef, setPopoverRef] = useElement();
     const [buttonRef, setButtonRef] = useElement();
@@ -348,10 +277,15 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         if (openPopover)
             setOpenPopover(false);
     });
-    const header = (_jsx(ChatHeader, { title: Channels.options[selectedChannel].title, icon: Channels.options[selectedChannel].icon, "aria-label": 'Chat header', actions: _jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', onClick: () => setShowTranscripts(!showTranscripts), "aria-label": 'Show transcripts', children: _jsxs(Flex, { container: {
+    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[selectedChannel] }, void 0)] }, void 0) }, void 0), _jsx(MenuButton, { text: 'More actions', icon: 'more', iconOnly: true, variant: 'simple', portal: true, menu: { items: actions } }, void 0)] }, void 0) }, void 0));
+                        }, 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], () => {
@@ -380,14 +314,13 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                     return (_jsx(ChatTranscript, { tabIndex: 0, title: transcript.title, transcript: transcriptData }, transcript.id));
                 })] }, void 0)) : 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 = (_jsx(ChatBody, { children: _jsx(MessageListComp, { unReadMessageCount: unreadMessagesCount, onScrollToButtonClick: () => {
+    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) {
@@ -401,27 +334,20 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 }, 5000);
                 timers.current.push(timeOutId);
                 setUnreadMessagesCount(0);
-            }, tabIndex: 0, ref: conversationRef, messages: [...chatMessages, ...typingIndicators] }, void 0) }, void 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 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: ['//'],
@@ -442,7 +368,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
     useOuterEvent('mousedown', [chatComposerImperativeHandleRef?.current?.chatComposerRef?.current], () => {
         setMountPopover(false);
     });
-    const footer = (_jsxs(ChatComposer, { ref: chatComposerImperativeHandleRef, maxAttachments: number('Max Attachments', attachments.length), attachments: attachments, specialKeysConfig: specialKeysConfig, showEmoji: true, disabled: disableChat, onAddAttachment: () => {
+    const footer = (_jsxs(ChatComposer, { ref: chatComposerImperativeHandleRef, maxAttachments: args.maxAttachments, attachments: attachments, specialKeysConfig: specialKeysConfig, showEmoji: true, disabled: args.disableChat, onAddAttachment: () => {
             setAttachments([
                 ...attachments,
                 {
@@ -451,7 +377,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                     onDelete: onDeleteAttachment
                 }
             ]);
-        }, maxLength: maxLength, placeholder: placeHolder, defaultMessage: defaultMessage, onSend: message => {
+        }, maxLength: args.maxLength, placeholder: args.placeholder, defaultMessage: args.defaultMessage, onSend: message => {
             action(`onAppendMessage: ${message}`)();
             appendMessage({
                 ...participants.sender,
@@ -459,15 +385,11 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 message,
                 timeStamp: '1:45 PM'
             });
-        }, children: [_jsx(MenuButton, { text: 'Phrases', actions: [], disabled: disableChat }, void 0), _jsx(MenuButton, { text: 'Page push', actions: [], disabled: 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) => ({
+        }, 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));
-    button('Toggle suggested replies', () => {
-        setShowSuggestedReplies(show => !show);
-        return false;
-    });
     const suggestedReplyPicker = suggestedReplies.length > 0 && showSuggestedReplies ? (_jsx(SuggestedReplyPicker, { replies: suggestedReplies, onSelect: (suggestedReply) => {
             chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
             setShowSuggestedReplies(false);
@@ -481,9 +403,31 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 justify: 'center'
             }, style: {
                 height: 'calc(100vh)',
-                width: chatWidth,
+                width: args.chatWidth || '30rem',
                 margin: 'auto'
-            }, children: _jsx(Chat, { utility: utilityComp, header: header, banner: showChatBanner ? chatBanner : undefined, body: body, footer: footer, suggestedReplyPicker: suggestedReplyPicker }, void 0) }, void 0) }, void 0));
+            }, 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'