@pega/cosmos-react-demos 2.1.0 → 2.1.4

package/jsx/rte/RichTextEditor/RichTextViewer.stories.d.ts

@@ -2,6 +2,7 @@
 import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
+export declare const RichTextViewerDemo: () => JSX.Element;
 export declare const RichTextViewerHTMLDemo: () => JSX.Element;
 export declare const RichTextViewerMDDemo: () => JSX.Element;
 //# sourceMappingURL=RichTextViewer.stories.d.ts.map

package/jsx/rte/RichTextEditor/RichTextViewer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAcxC,wBAGU;AAEV,eAAO,MAAM,sBAAsB,mBAuBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBA4DhC,CAAC"}
+{"version":3,"file":"RichTextViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAcxC,wBAGU;AAEV,eAAO,MAAM,kBAAkB,mBAuB9B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAuBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBA4DhC,CAAC"}

package/jsx/rte/RichTextEditor/RichTextViewer.stories.jsx

@@ -7,6 +7,23 @@ export default {
     title: 'RTE/RichTextViewer',
     component: RichTextViewer
 };
+export const RichTextViewerDemo = () => {
+    const editorRef = useRef(null);
+    const [content, setContent] = useState('[]');
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <RichTextEditor ref={editorRef} toolbar={[
+            'inline-styling',
+            'headers',
+            'tables',
+            'links',
+            'lists',
+            'cut-copy-paste',
+            'indentation'
+        ]} onChange={() => setContent(editorRef.current?.getRichText() || '')}/>
+
+      <RichTextViewer content={content} type='richtext'/>
+    </Flex>);
+};
 export const RichTextViewerHTMLDemo = () => {
     const editorRef = useRef(null);
     const [content, setContent] = useState('');
@@ -41,7 +58,7 @@ export const RichTextViewerMDDemo = () => {
         }
     };
     return (<Flex container={{ direction: 'column', gap: 2 }}>
-      <RichTextEditor ref={editorRef} searchTriggers={[{ trigger: '@', regex: String.raw `[a-zA-Z]*(?: [a-zA-Z]*)?` }]} onSearch={searchUsers} getSearchItemReplacement={(id) => {
+      <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;
@@ -49,7 +66,7 @@ export const RichTextViewerMDDemo = () => {
                 markdown: `@${item.id}:${item.primary}:user:`,
                 text: item.primary
             };
-        }} menu={users.length ? { items: users } : undefined} autoFocus markdownOnly 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() || '')}/>
+        }} menu={users.length ? { items: users } : undefined} autoFocus markdownOnly 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() || '')}/>
 
       <RichTextViewer content={content} type='markdown' interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]} markdownMap={{
             link: (linkToken) => {

package/jsx/rte/RichTextEditor/RichTextViewer.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextViewer.stories.jsx","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.jsx","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/jsx/social/Chat/Chat.stories.d.ts

@@ -1,25 +1,34 @@
 /// <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;
-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;
-    };
-};
+export declare const ChatHeaderDemo: () => JSX.Element;
+export declare const MessageListDemo: () => JSX.Element;
+export declare const MessageDemo: Story<MessageProps>;
+export declare const SystemMessageDemo: () => JSX.Element;
+interface TypeIndicatorDemoProps {
+    message?: string;
+}
+export declare const TypeIndicatorDemo: Story<TypeIndicatorDemoProps>;
+export declare const ChatTranscriptsDemo: () => JSX.Element[];
+export declare const TranscriptMessageDemo: () => JSX.Element;
+export declare const SuggestedReplyPickerDemo: () => JSX.Element;
+interface ChatComposerDemoProps {
+    maxAttachments?: number;
+}
+export declare const ChatComposerDemo: Story<ChatComposerDemoProps>;
+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>;
 //# sourceMappingURL=Chat.stories.d.ts.map

package/jsx/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;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"}
+{"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;AAGV,eAAO,MAAM,cAAc,mBA4B1B,CAAC;AAIF,eAAO,MAAM,eAAe,mBAiB3B,CAAC;AAIF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,YAAY,CA2D3C,CAAC;AAcF,eAAO,MAAM,iBAAiB,mBAE7B,CAAC;AAIF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAE3D,CAAC;AAYF,eAAO,MAAM,mBAAmB,qBAW/B,CAAC;AAIF,eAAO,MAAM,qBAAqB,mBAMjC,CAAC;AAKF,eAAO,MAAM,wBAAwB,mBAuBpC,CAAC;AAKF,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAWzD,CAAC;AAYF,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"}

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

@@ -1,36 +1,18 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { action } from '@storybook/addon-actions';
-import { radios, array, boolean, text, number, optionsKnob, button } from '@storybook/addon-knobs';
 import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, Status, EmojiContext, createUID, useOuterEvent, TextArea, Select, Option, Menu, useElement, FieldValueList } from '@pega/cosmos-react-core';
 import * as arrowMicroDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-down.icon';
 import * as replyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply.icon';
 import * as replyAllIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/reply-all.icon';
 import * as forwardIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/forward.icon';
-import { Chat, ChatHeader, ChatBody, ChatComposer, ChatTranscript, Message, MessageList as MessageListComp, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TranscriptMessage, TypeIndicator } from '@pega/cosmos-react-social';
+import { Chat, ChatHeader, ChatBody, ChatComposer, ChatTranscript, Message, MessageList, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TranscriptMessage, TypeIndicator } from '@pega/cosmos-react-social';
 import { ChatMockData } from './Chat.mocks';
 registerIcon(forwardIcon, replyIcon, replyAllIcon, arrowMicroDownIcon);
 export default {
     title: 'Social/Chat',
     component: Chat
 };
-const Channels = {
-    label: 'Channel',
-    options: {
-        LiveChat: {
-            title: 'Live chat',
-            icon: 'chat-solid'
-        },
-        Twitter: {
-            title: 'Twitter chat',
-            icon: 'twitter'
-        },
-        Facebook: {
-            title: 'Facebook messenger',
-            icon: 'facebook'
-        }
-    }
-};
-export const chatHeader = () => {
+export const ChatHeaderDemo = () => {
     const actionsConfig = (<Flex>
       <Button variant='simple' aria-label='Show transcripts'>
         <Flex container={{
@@ -47,27 +29,16 @@ export const chatHeader = () => {
     </Flex>);
     return (<ChatHeader title='Live Chat' icon='chat-solid' aria-label='Chat header' actions={actionsConfig}/>);
 };
-export const MessageList = () => {
+export const MessageListDemo = () => {
     const messages = ChatMockData.chatMessages;
     const [unReadMessageCount, setUnReadMessagesCount] = useState(1);
     return (<Flex container style={{ height: '80vh' }}>
-      <MessageListComp tabIndex={0} messages={messages} unReadMessageCount={unReadMessageCount} onScrollToButtonClick={() => {
+      <MessageList tabIndex={0} messages={messages} unReadMessageCount={unReadMessageCount} onScrollToButtonClick={() => {
             setUnReadMessagesCount(0);
         }}/>
     </Flex>);
 };
-export const messageComponent = () => {
-    const MessageVariantPropValues = {
-        sender: 'sender',
-        receiver: 'receiver',
-        other: 'other'
-    };
-    const MessageDirectionPropValues = {
-        in: 'in',
-        out: 'out'
-    };
-    const variantProp = radios('Variant', MessageVariantPropValues, 'receiver');
-    const directionProp = radios('Direction', MessageDirectionPropValues, 'in');
+export const MessageDemo = (args) => {
     const attachments = [
         {
             id: '2499167340',
@@ -93,27 +64,40 @@ export const messageComponent = () => {
     ];
     return (<>
       
-      <Message type='message' attachments={attachments} avatarInfo={{ name: 'John Brown' }} status='Opened' timeStamp='1:44 PM' message='Hi, Welcome to u-plus. How can I help you ?' variant={variantProp} direction={directionProp}/>
+      <Message type='message' attachments={attachments} avatarInfo={{ name: 'John Brown' }} status='Opened' timeStamp='1:44 PM' message='Hi, Welcome to u-plus. How can I help you ?' variant={args.variant} direction={args.direction}/>
       <br />
       
-      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} pagePushLinks={pagePushLinks} variant={variantProp} direction={directionProp}/>
+      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} pagePushLinks={pagePushLinks} variant={args.variant} direction={args.direction}/>
       <br />
       
-      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} variant={variantProp} direction={directionProp}/>
+      <Message type='message' message='Hi, Welcome to u-plus. How can I help you ?' avatarInfo={{ name: 'John Brown' }} variant={args.variant} direction={args.direction}/>
     </>);
 };
-export const systemMessage = () => (<SystemMessage message='John Brown has joined' timeStamp='10:00 AM'/>);
-export const typeIndicator = () => {
-    const TypeIndicatorMessageProp = text('message', '');
-    return <TypeIndicator avatarInfo={{ name: 'John Brown' }} message={TypeIndicatorMessageProp}/>;
+MessageDemo.args = {
+    variant: 'receiver',
+    direction: 'in'
 };
-export const chatTranscripts = () => {
+MessageDemo.argTypes = {
+    variant: { options: ['receiver', 'sender', 'other'], control: { type: 'select' } },
+    direction: { options: ['in', 'out'], control: { type: 'select' } }
+};
+export const SystemMessageDemo = () => (<SystemMessage message='John Brown has joined' timeStamp='10:00 AM'/>);
+export const TypeIndicatorDemo = (args) => {
+    return <TypeIndicator avatarInfo={{ name: 'John Brown' }} message={args.message}/>;
+};
+TypeIndicatorDemo.args = {
+    message: ''
+};
+TypeIndicatorDemo.argTypes = {
+    message: { control: { type: 'text' } }
+};
+export const ChatTranscriptsDemo = () => {
     return ChatMockData.transcripts.map((transcript) => {
         return (<ChatTranscript tabIndex={0} title={transcript.title} key={transcript.id} transcript={transcript.data}/>);
     });
 };
-export const transcriptMessage = () => (<TranscriptMessage timeStamp='01:20 PM' variant='bot' message='Hello… This is bot. How can I help you? Please select your category.'/>);
-export const suggestedReplyPickerComponent = () => {
+export const TranscriptMessageDemo = () => (<TranscriptMessage timeStamp='01:20 PM' variant='bot' message='Hello… This is bot. How can I help you? Please select your category.'/>);
+export const SuggestedReplyPickerDemo = () => {
     const suggestedReplies = [
         {
             id: createUID(),
@@ -130,27 +114,37 @@ export const suggestedReplyPickerComponent = () => {
             action(`Suggested reply picked ${suggestedReply.message}`)();
         }} onDismiss={action('Suggested reply dismissed')}/>);
 };
-export const chatComposer = () => (<ChatComposer maxAttachments={number('Max Attachments', 2)} attachments={ChatMockData.defaultAttachments} maxLength={256} placeholder='Type here to send message' onSend={() => { }}>
+export const ChatComposerDemo = (args) => (<ChatComposer maxAttachments={args.maxAttachments} attachments={ChatMockData.defaultAttachments} maxLength={256} placeholder='Type here to send message' onSend={() => { }}>
     <MenuButton text='Phrases' menu={{ items: [] }}/>
     <MenuButton text='Page Push' menu={{ items: [] }}/>
   </ChatComposer>);
-const allParticipants = ChatMockData.participants;
-const chatParticipants = Object.keys(allParticipants).reduce((obj, key) => {
-    if (!allParticipants[key].avatarInfo) {
-        return obj;
-    }
-    const name = allParticipants[key].avatarInfo.name;
-    obj[name] = name;
-    return obj;
-}, {});
-const channelOptions = Object.keys(Channels.options).reduce((obj, key) => {
-    obj[key] = key;
-    return obj;
-}, {});
-export const StandardChat = ({ chatWidth = '30rem' }) => {
+ChatComposerDemo.args = {
+    maxAttachments: 2
+};
+ChatComposerDemo.argTypes = {
+    maxAttachments: { control: { type: 'number' } }
+};
+export const StandardChat = (args) => {
     const ChatMockDataClone = useMemo(() => {
         return JSON.parse(JSON.stringify(ChatMockData));
     }, [ChatMockData]);
+    const Channels = {
+        label: 'Channel',
+        options: {
+            LiveChat: {
+                title: 'Live chat',
+                icon: 'chat-solid'
+            },
+            Twitter: {
+                title: 'Twitter chat',
+                icon: 'twitter'
+            },
+            Facebook: {
+                title: 'Facebook messenger',
+                icon: 'facebook'
+            }
+        }
+    };
     const { participants, chatMessages: mockChatMessagesJson, transcripts, defaultAttachments, suggestedReplies } = ChatMockDataClone;
     const conversationRatingMessage = {
         id: createUID(),
@@ -195,25 +189,11 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
             timers.current.forEach(clearTimeout);
         };
     }, []);
-    const selectedChannel = radios(Channels.label, channelOptions, Object.keys(channelOptions)[0]);
-    const actions = array('Actions', ['Transfer', 'End chat']).map(name => ({
-        primary: name,
-        id: name,
-        onClick: action(`Clicked ${name}`)
-    }));
     const [showSuggestedReplies, setShowSuggestedReplies] = useState(true);
-    const disableChat = boolean('Disable chat', false);
-    const simulateConversation = boolean('Simulate conversation', false);
-    const placeHolder = text('Placeholder', 'Enter message');
-    const defaultMessage = text('Default message', 'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!');
-    const maxLength = number('Max characters', 280);
-    const typers = optionsKnob('Participants typing', chatParticipants, '', {
-        display: 'multi-select'
-    });
     const [showTranscripts, setShowTranscripts] = useState(false);
     const [attachments, setAttachments] = useState(defaultAttachments);
     const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
-    const [chatMessages, setChatMessages] = useState(simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages);
+    const [chatMessages, setChatMessages] = useState(args.simulateConversation ? mockChatMessages.slice(0, 0) : mockChatMessages);
     const onDeleteAttachment = useCallback((name) => {
         setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
     }, [setAttachments]);
@@ -252,7 +232,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         }
     };
     useEffect(() => {
-        if (simulateConversation) {
+        if (args.simulateConversation) {
             const timeOutId = setTimeout(() => {
                 if (mockChatMessages.length) {
                     appendMessage(mockChatMessages.shift());
@@ -262,49 +242,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 clearTimeout(timeOutId);
             };
         }
-    }, [chatMessages, simulateConversation]);
-    const customerMessage = text('Customer message', '');
-    button('Send customer message', () => {
-        appendMessage({
-            type: 'message',
-            ...participants.receiver,
-            message: customerMessage,
-            timeStamp: '1:45 PM'
-        });
-        return false;
-    });
-    const managerMessage = text('Manager message', '');
-    button('Send manager message', () => {
-        appendMessage({
-            type: 'message',
-            ...participants.other,
-            message: managerMessage,
-            timeStamp: '1:45 PM'
-        });
-        return false;
-    });
-    const typingIndicators = typers
-        .toString()
-        .split(',')
-        .filter(person => person !== '')
-        .map(name => {
-        let message = '';
-        if (name === participants.receiver.avatarInfo.name) {
-            message = customerMessage;
-        }
-        else if (name === participants.other.avatarInfo.name) {
-            message = managerMessage;
-        }
-        return {
-            id: name,
-            type: 'typing',
-            avatarInfo: {
-                name
-            },
-            message,
-            ariaLabel: `${name} is typing`
-        };
-    });
+    }, [chatMessages, args.simulateConversation]);
     const [openPopover, setOpenPopover] = useState(false);
     const [popoverRef, setPopoverRef] = useElement();
     const [buttonRef, setButtonRef] = useElement();
@@ -358,7 +296,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         if (openPopover)
             setOpenPopover(false);
     });
-    const header = (<ChatHeader title={Channels.options[selectedChannel].title} icon={Channels.options[selectedChannel].icon} aria-label='Chat header' actions={<Flex>
+    const header = (<ChatHeader title={Channels.options[args.selectedChannel || 'LiveChat'].title} icon={Channels.options[args.selectedChannel || 'LiveChat'].icon} aria-label='Chat header' actions={<Flex>
           <Button variant='simple' onClick={() => setShowTranscripts(!showTranscripts)} aria-label='Show transcripts'>
             <Flex container={{
                 gap: 1,
@@ -374,10 +312,15 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
           <Popover show={openPopover} target={buttonRef} ref={setPopoverRef} arrow placement='bottom-end'>
             <Flex container={{ direction: 'column', gap: 1, pad: 2 }}>
               <Text variant='h4'>{additionalInfo.title}</Text>
-              <FieldValueList variant='inline' fields={additionalInfo.options[selectedChannel]}/>
+              <FieldValueList variant='inline' fields={additionalInfo.options[args.selectedChannel || 'LiveChat']}/>
             </Flex>
           </Popover>
-          <MenuButton text='More actions' icon='more' iconOnly variant='simple' portal menu={{ items: actions }}/>
+          <MenuButton text='More actions' icon='more' iconOnly variant='simple' portal menu={{
+                items: [
+                    { primary: 'Transfer', id: 'transcript', onClick: action('Clicked Transfer') },
+                    { primary: 'End chat', id: 'endChat', onClick: action('Clicked End chat') }
+                ]
+            }}/>
         </Flex>}/>);
     const [showEarlierTranscripts, setShowEarlierTranscripts] = useState(false);
     const transcriptsContainerRef = useRef(null);
@@ -414,7 +357,6 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
             })}
       </div>) : undefined;
     }, [showTranscripts, setShowTranscripts, showEarlierTranscripts, setShowEarlierTranscripts]);
-    const showChatBanner = boolean('Show banner', true);
     const chatBanner = {
         id: 'warning',
         messages: ['This is a public interaction and any responses will be public and visible'],
@@ -422,7 +364,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         variant: 'warning'
     };
     const body = (<ChatBody>
-      <MessageListComp unReadMessageCount={unreadMessagesCount} onScrollToButtonClick={() => {
+      <MessageList unReadMessageCount={unreadMessagesCount} onScrollToButtonClick={() => {
             const newRandomMessageId = Math.random().toString(36).substr(2, 9);
             setChatMessages(prevChatMessages => prevChatMessages.map(message => {
                 if (message.id === NewMessageSeparatorId) {
@@ -436,28 +378,21 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
             }, 5000);
             timers.current.push(timeOutId);
             setUnreadMessagesCount(0);
-        }} tabIndex={0} ref={conversationRef} messages={[...chatMessages, ...typingIndicators]}/>
+        }} tabIndex={0} ref={conversationRef} messages={[
+            ...chatMessages,
+            {
+                id: 'Pegasystems',
+                type: 'typing',
+                avatarInfo: {
+                    name: 'Pegasystems',
+                    imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'
+                },
+                message: args.message,
+                ariaLabel: 'Pegasystems is typing'
+            }
+        ]}/>
     </ChatBody>);
     const chatComposerImperativeHandleRef = useRef(null);
-    const phrase = text('Phrase', 'How can I help you?');
-    button('Push prase at start', () => {
-        if (chatComposerImperativeHandleRef.current) {
-            chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'start');
-        }
-        return false;
-    });
-    button('Push prase at end', () => {
-        if (chatComposerImperativeHandleRef.current) {
-            chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'end');
-        }
-        return false;
-    });
-    button('Push prase at cursor', () => {
-        if (chatComposerImperativeHandleRef.current) {
-            chatComposerImperativeHandleRef.current.appendToMessage(phrase, 'cursor');
-        }
-        return false;
-    });
     const [mountPopover, setMountPopover] = useState(false);
     const specialKeysConfig = {
         keys: ['//'],
@@ -478,7 +413,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
     useOuterEvent('mousedown', [chatComposerImperativeHandleRef?.current?.chatComposerRef?.current], () => {
         setMountPopover(false);
     });
-    const footer = (<ChatComposer ref={chatComposerImperativeHandleRef} maxAttachments={number('Max Attachments', attachments.length)} attachments={attachments} specialKeysConfig={specialKeysConfig} showEmoji disabled={disableChat} onAddAttachment={() => {
+    const footer = (<ChatComposer ref={chatComposerImperativeHandleRef} maxAttachments={args.maxAttachments} attachments={attachments} specialKeysConfig={specialKeysConfig} showEmoji disabled={args.disableChat} onAddAttachment={() => {
             setAttachments([
                 ...attachments,
                 {
@@ -487,7 +422,7 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                     onDelete: onDeleteAttachment
                 }
             ]);
-        }} maxLength={maxLength} placeholder={placeHolder} defaultMessage={defaultMessage} onSend={message => {
+        }} maxLength={args.maxLength} placeholder={args.placeholder} defaultMessage={args.defaultMessage} onSend={message => {
             action(`onAppendMessage: ${message}`)();
             appendMessage({
                 ...participants.sender,
@@ -496,8 +431,8 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
                 timeStamp: '1:45 PM'
             });
         }}>
-      <MenuButton text='Phrases' actions={[]} disabled={disableChat}/>
-      <MenuButton text='Page push' actions={[]} disabled={disableChat}/>
+      <MenuButton text='Phrases' actions={[]} disabled={args.disableChat}/>
+      <MenuButton text='Page push' actions={[]} disabled={args.disableChat}/>
       <Popover show={mountPopover} target={chatComposerImperativeHandleRef?.current?.textAreaRef?.current} placement='top-start'>
         <Menu scrollAt={20} items={ChatMockData.phrasesDisplayNames.map((name, idx) => ({
             primary: name,
@@ -506,10 +441,6 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
         }))}/>
       </Popover>
     </ChatComposer>);
-    button('Toggle suggested replies', () => {
-        setShowSuggestedReplies(show => !show);
-        return false;
-    });
     const suggestedReplyPicker = suggestedReplies.length > 0 && showSuggestedReplies ? (<SuggestedReplyPicker replies={suggestedReplies} onSelect={(suggestedReply) => {
             chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
             setShowSuggestedReplies(false);
@@ -524,13 +455,35 @@ export const StandardChat = ({ chatWidth = '30rem' }) => {
             justify: 'center'
         }} style={{
             height: 'calc(100vh)',
-            width: chatWidth,
+            width: args.chatWidth || '30rem',
             margin: 'auto'
         }}>
-        <Chat utility={utilityComp} header={header} banner={showChatBanner ? chatBanner : undefined} body={body} footer={footer} suggestedReplyPicker={suggestedReplyPicker}/>
+        <Chat utility={utilityComp} header={header} banner={args.showChatBanner ? chatBanner : undefined} body={body} footer={footer} suggestedReplyPicker={suggestedReplyPicker}/>
       </Flex>
     </EmojiContext.Provider>);
 };
+StandardChat.args = {
+    maxAttachments: 2,
+    selectedChannel: 'LiveChat',
+    showChatBanner: true,
+    disableChat: false,
+    simulateConversation: false,
+    message: '',
+    placeholder: 'Enter message',
+    defaultMessage: 'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!',
+    maxLength: 280
+};
+StandardChat.argTypes = {
+    maxAttachments: { control: { type: 'number' } },
+    selectedChannel: { options: ['LiveChat', 'Twitter', 'Facebook'], control: { type: 'select' } },
+    showChatBanner: { control: { type: 'boolean' } },
+    disableChat: { control: { type: 'boolean' } },
+    simulateConversation: { control: { type: 'boolean' } },
+    message: { control: { type: 'text' } },
+    placeholder: { control: { type: 'text' } },
+    defaultMessage: { control: { type: 'text' } },
+    maxLength: { control: { type: 'number' } }
+};
 StandardChat.parameters = {
     layout: 'fullscreen'
 };