npm - @pega/cosmos-react-demos - Versions diffs - 4.1.1 → 5.0.0-dev.10.0 - Mend

@pega/cosmos-react-demos 4.1.1 → 5.0.0-dev.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (984) hide show

package/jsx/social/Chat/Chat.mocks.d.ts CHANGED Viewed

@@ -1,25 +1,13 @@
-import { FieldValueListProps, MenuProps } from '@pega/cosmos-react-core';
-import { ChatBodyProps } from '@pega/cosmos-react-social';
+import type { FieldValueListProps, FileUploadItemProps, MenuProps } from '@pega/cosmos-react-core';
+import type { ChatBodyListItemProps, ChatBodyProps, SuggestedReply } from '@pega/cosmos-react-social';
 export declare const BotConversation: ChatBodyProps['liveChat'];
 export declare const ClaimsAgentConversation: ChatBodyProps['liveChat'];
 export declare const LiveChatConversation: ChatBodyProps['liveChat'];
 export declare const SimulatedConversation: ChatBodyProps['liveChat'];
 export declare const ChatMockData: {
-    chatMessages: import("@pega/cosmos-react-social").ChatBodyListItemProps[];
-    defaultAttachments: ({
-        name: string;
-        progress: number;
-        onDelete: () => void;
-    } | {
-        name: string;
-        onDelete: () => void;
-        progress?: undefined;
-    })[];
-    suggestedReplies: {
-        id: string;
-        message: string;
-        confidence: number;
-    }[];
+    chatMessages: ChatBodyListItemProps[];
+    defaultAttachments: FileUploadItemProps[];
+    suggestedReplies: SuggestedReply[];
 };
 export declare const phrasesDisplayNames: MenuProps['items'];
 export declare const phrasesMessages: {

package/jsx/social/Chat/Chat.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.mocks.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.mocks.ts"],"names":[],"mappings":"~~AAAA~~,OAAO,~~EAAa~~,mBAAmB,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;~~AACpF~~,OAAO,~~EAAE~~,aAAa,~~EAAE~~,MAAM,2BAA2B,CAAC;~~AAE1D~~,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,UAAU,CAwGrD,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,aAAa,CAAC,UAAU,CAqG7D,CAAC;AACF,eAAO,MAAM,oBAAoB,EAAE,aAAa,CAAC,UAAU,CAqG1D,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,UAAU,CA2N3D,CAAC;AAEF,eAAO,MAAM,YAAY~~;;;;;;;;;;;;;;;;CAyCxB~~,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,SAAS,CAAC,OAAO,CAyDlD,CAAC;AAEF,eAAO,MAAM,eAAe;;;GAqC3B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4DxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,mBAAmB,CAAC,QAAQ,CAyBtD,CAAC"}
1	+ {"version":3,"file":"Chat.mocks.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.mocks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACnG,OAAO,KAAK,EACV,qBAAqB,EACrB,aAAa,EACb,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,UAAU,CAwGrD,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,aAAa,CAAC,UAAU,CAqG7D,CAAC;AACF,eAAO,MAAM,oBAAoB,EAAE,aAAa,CAAC,UAAU,CAqG1D,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,UAAU,CA2N3D,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE;IACzB,YAAY,EAAE,qBAAqB,EAAE,CAAC;IACtC,kBAAkB,EAAE,mBAAmB,EAAE,CAAC;IAC1C,gBAAgB,EAAE,cAAc,EAAE,CAAC;CAqBpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,SAAS,CAAC,OAAO,CAyDlD,CAAC;AAEF,eAAO,MAAM,eAAe;;;GAqC3B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4DxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,mBAAmB,CAAC,QAAQ,CAyBtD,CAAC"}

package/jsx/social/Chat/Chat.mocks.js CHANGED Viewed

@@ -536,30 +536,10 @@ export const ChatMockData = {
         }
     ],
     suggestedReplies: [
-        {
-            id: createUID(),
-            message: 'Hello, Good morning Ginger Ventura. How can I help you today',
-            confidence: 94
-        },
-        {
-            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
-        },
-        {
-            id: 'suggested_reply_3',
-            message: 'Hello! How can I assist you today?',
-            confidence: 40
-        },
         {
             id: 'suggested_reply_4',
             message: 'Thanks for contacting our support team',
-            confidence: 20
-        },
-        {
-            id: createUID(),
-            message: 'Happy to help. Is there anything else I can help with?',
-            confidence: 75
+            type: 'dialogue'
         }
     ]
 };

package/jsx/social/Chat/Chat.mocks.js.map CHANGED Viewed

package/jsx/social/Chat/Chat.stories.d.ts CHANGED Viewed

@@ -26,10 +26,12 @@ interface SuggestedReplyPickerDemoProps {
     showNotification?: boolean;
     singleSuggestedReply?: boolean;
     noSuggestedReplies?: boolean;
+    disableButton?: boolean;
 }
 export declare const SuggestedReplyPickerDemo: StoryFn<SuggestedReplyPickerDemoProps>;
 interface ChatComposerDemoProps {
     maxAttachments?: number;
+    showSuggestReplyButton?: boolean;
 }
 export declare const ChatComposerDemo: StoryFn<ChatComposerDemoProps>;
 interface StandardChatProps {
@@ -46,6 +48,8 @@ interface StandardChatProps {
     maxLength?: number;
     loading?: boolean;
     typingIndicator?: boolean;
+    showAttachments?: boolean;
+    genAIErrorState?: string;
 }
 export declare const StandardChat: StoryFn<StandardChatProps>;
 //# sourceMappingURL=Chat.stories.d.ts.map

package/jsx/social/Chat/Chat.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;~~AA4BtD~~,OAAO,KAAK,EAIV,UAAU,EACX,MAAM,yBAAyB,CAAC;~~AAejC~~,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EAIZ,kBAAkB,EAKlB,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;;~~AAenC~~,wBAGU;AAGV,UAAU,mBACR,SAAQ,UAAU,CAAC,eAAe,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAAG;AAE7E,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,mBAAmB,CAiCvD,CAAC;AAmBF,UAAU,gBAAiB,SAAQ,UAAU,CAAC,YAAY,EAAE,UAAU,GAAG,eAAe,CAAC;IACvF,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC7C,UAAU,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACvC,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,CAuEjD,CAAC;AAyCF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,kBAAkB,CAEzD,CAAC;AAgBF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,sBAAsB,CAW7D,CAAC;AAYF,UAAU,6BAA6B;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;~~CAC9B~~;AAED,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,6BAA6B,~~CA0B3E~~,CAAC;~~AAgBF~~,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;~~CACzB~~;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,qBAAqB,~~CAW3D~~,CAAC;~~AAYF~~,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,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;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;~~CAC3B~~;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,iBAAiB,~~CAoiBnD~~,CAAC"}
1	+ {"version":3,"file":"Chat.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Chat/Chat.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AA6BtD,OAAO,KAAK,EAIV,UAAU,EACX,MAAM,yBAAyB,CAAC;AAiBjC,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EAIZ,kBAAkB,EAKlB,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;;AAcnC,wBAGU;AAGV,UAAU,mBACR,SAAQ,UAAU,CAAC,eAAe,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAAG;AAE7E,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,mBAAmB,CAiCvD,CAAC;AAmBF,UAAU,gBAAiB,SAAQ,UAAU,CAAC,YAAY,EAAE,UAAU,GAAG,eAAe,CAAC;IACvF,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC7C,UAAU,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACvC,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,CAuEjD,CAAC;AAyCF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,kBAAkB,CAEzD,CAAC;AAgBF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,sBAAsB,CAW7D,CAAC;AAYF,UAAU,6BAA6B;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,6BAA6B,CA4B3E,CAAC;AAkBF,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,qBAAqB,CAY3D,CAAC;AAcF,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,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;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,iBAAiB,CAmkBnD,CAAC"}

package/jsx/social/Chat/Chat.stories.jsx CHANGED Viewed

@@ -1,12 +1,12 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, EmojiContext, createUID, useOuterEvent, Select, Option, useElement, useModalManager, useModalContext, Modal, SummaryItem, useToaster, SearchInput, menuHelpers, VisuallyHiddenText, Menu, useEscape } from '@pega/cosmos-react-core';
+import { Button, Icon, registerIcon, Text, MenuButton, Flex, Popover, Link, EmojiContext, createUID, useOuterEvent, Select, Option, useElement, useModalManager, useModalContext, Modal, SummaryItem, useToaster, SearchInput, menuHelpers, VisuallyHiddenText, Menu, useEscape, usePrevious } 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, ChatComposer, Message, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TypeIndicator } from '@pega/cosmos-react-social';
-import { ChatMockData, phrasesDisplayNames, phrasesMessages, pagePushList, contextItems as contextItemsMock, BotConversation, ClaimsAgentConversation, LiveChatConversation } from './Chat.mocks';
+import { Chat, ChatHeader, ChatComposer, Message, NewMessageSeparatorId, SuggestedReplyPicker, SystemMessage, TypeIndicator, isReplyErrorState, isReplyLoadingState } from '@pega/cosmos-react-social';
+import { ChatMockData, phrasesDisplayNames, phrasesMessages, contextItems as contextItemsMock, BotConversation, ClaimsAgentConversation, LiveChatConversation } from './Chat.mocks';
 registerIcon(forwardIcon, replyIcon, replyAllIcon, arrowMicroDownIcon);
 export default {
     title: 'Social/Chat',
@@ -159,30 +159,35 @@ export const SuggestedReplyPickerDemo = (args) => {
         ? [ChatMockData.suggestedReplies[0]]
         : ChatMockData.suggestedReplies;
     return (<SuggestedReplyPicker replies={args.noSuggestedReplies ? [] : renderReplies} onSelect={suggestedReply => {
-            action(`Suggested reply picked ${suggestedReply.message}`)();
+            if (!isReplyErrorState(suggestedReply) && !isReplyLoadingState(suggestedReply))
+                action(`Suggested reply picked ${suggestedReply.message}`)();
         }} collapsed={suggestedRepliesCollapsed} onExpandCollapse={() => {
             setSuggestedRepliesCollapsed(prev => !prev);
-        }} currentReplyId={currentReplyId} onReplyChange={setCurrentReplyId} showNotification={args.showNotification} onSend={() => action('Send suggested reply')}/>);
+        }} currentReplyId={currentReplyId} onReplyChange={setCurrentReplyId} showNotification={args.showNotification} onSend={() => action('Send suggested reply')} disabled={args.disableButton}/>);
 };
 SuggestedReplyPickerDemo.args = {
     showNotification: false,
     singleSuggestedReply: false,
-    noSuggestedReplies: false
+    noSuggestedReplies: false,
+    disableButton: false
 };
 SuggestedReplyPickerDemo.argTypes = {
     showNotification: { type: 'boolean' },
     singleSuggestedReply: { type: 'boolean' },
-    noSuggestedReplies: { type: 'boolean' }
+    noSuggestedReplies: { type: 'boolean' },
+    disableButton: { type: 'boolean' }
 };
-export const ChatComposerDemo = (args) => (<ChatComposer maxAttachments={args.maxAttachments} 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={() => { }} onSuggestReplyClick={args.showSuggestReplyButton ? action('Suggest reply clicked') : undefined}>
     <MenuButton text='Phrases' menu={{ items: [] }}/>
     <MenuButton text='Page Push' menu={{ items: [] }}/>
   </ChatComposer>);
 ChatComposerDemo.args = {
-    maxAttachments: 2
+    maxAttachments: 2,
+    showSuggestReplyButton: false
 };
 ChatComposerDemo.argTypes = {
-    maxAttachments: { control: { type: 'number' } }
+    maxAttachments: { control: { type: 'number' } },
+    showSuggestReplyButton: { control: { type: 'boolean' } }
 };
 export const StandardChat = (args) => {
     const ChatMockDataClone = useMemo(() => {
@@ -301,6 +306,7 @@ export const StandardChat = (args) => {
     const [contextItems, setContextItems] = useState([]);
     const [contextLoading, setContextLoading] = useState(false);
     const [suggestedRepliesCollapsed, setSuggestedRepliesCollapsed] = useState(false);
+    const [disableSuggestReply, setDisableSuggestReply] = useState(false);
     const onDeleteAttachment = useCallback((name) => {
         setAttachments(prevAttachments => prevAttachments.filter(item => item.name !== name));
     }, [setAttachments]);
@@ -312,6 +318,17 @@ export const StandardChat = (args) => {
             };
         }));
     }, [defaultAttachments]);
+    const prevState = usePrevious(chatMessages);
+    useEffect(() => {
+        if (chatMessages &&
+            prevState &&
+            chatMessages.filter(({ senderType }) => senderType === 'customer').length >
+                prevState.filter(({ senderType }) => senderType === 'customer').length)
+            setDisableSuggestReply(false);
+    }, [chatMessages]);
+    useEffect(() => {
+        setDisableSuggestReply(false);
+    }, [args.genAIErrorState]);
     const appendMessage = (message) => {
         const incrementUnreadMessageCount = conversationRef.current?.isScrolledToLatest();
         setChatMessages(prevChatMessages => {
@@ -438,6 +455,7 @@ export const StandardChat = (args) => {
     const [buttonEl, setButtonEl] = useElement(null);
     const [popoverEl, setPopoverEl] = useElement(null);
     const [currentReply, setCurrentReply] = useState(suggestedReplies?.[0]?.id || '');
+    const [replies, setReplies] = useState(suggestedReplies);
     useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
         setIsOpen(false);
         setSearch('');
@@ -445,11 +463,6 @@ export const StandardChat = (args) => {
     useEscape(() => {
         setIsOpen(false);
     });
-    const pagePushItemsRender = useMemo(() => {
-        return pagePushList.map(item => {
-            return { id: item.id, primary: item.message };
-        });
-    }, [pagePushList]);
     const composerChildren = (<>
       <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='secondary' disabled={args.disableChat}>
         <Flex container={{ alignItems: 'center', gap: 1 }}>
@@ -466,36 +479,15 @@ export const StandardChat = (args) => {
             setSearch('');
         }} accent={search ? searchRegex : undefined} focusControlEl={searchEleRef.current || undefined} footer={<SearchInput ref={searchEleRef} onSearchChange={setSearch} value={search} role='searchbox' searchInputAriaLabel='Start typing to search.'/>}/>
       </Popover>
-      <MenuButton text='Page push' disabled={args.disableChat} menu={{
-            id: menuID,
-            listId: menuListID,
-            mode: 'action',
-            variant: 'flyout',
-            items: pagePushItemsRender,
-            role: 'listbox',
-            onItemClick: id => {
-                setAnnouncement('Link inserted');
-                setChatMessages(prevChatMessages => [
-                    ...prevChatMessages,
-                    pagePushList.filter(item => item.id === id)[0]
-                ]);
-            }
-        }}/>
-      <Popover show={mountPopover} target={chatComposerImperativeHandleRef?.current?.textAreaRef?.current} placement='top-start'>
-        <Menu scrollAt={20} items={itemsToRender} onItemClick={id => {
-            insertPhrasesMessage(phrasesMessages.filter(message => message.id === id)[0].message);
-            setAnnouncement('Phrase inserted');
-        }} focusControlEl={chatComposerImperativeHandleRef?.current?.textAreaRef?.current}/>
-      </Popover>
     </>);
     const composerProps = {
         ref: chatComposerImperativeHandleRef,
         maxAttachments: args.maxAttachments,
-        attachments,
+        attachments: args.showAttachments ? attachments : [],
         specialKeysConfig,
         showEmoji: true,
         disabled: args.disableChat,
+        disableSuggestReply,
         onAddAttachment: () => {
             setAttachments([
                 ...attachments,
@@ -522,12 +514,71 @@ export const StandardChat = (args) => {
                 timeStamp: '2:08'
             });
         },
+        onSuggestReplyClick: () => {
+            const newReplyId = 'genAI';
+            setDisableSuggestReply(true);
+            setSuggestedRepliesCollapsed(false);
+            setCurrentReply(newReplyId);
+            setReplies(prev => {
+                return [
+                    {
+                        id: newReplyId,
+                        loading: true,
+                        type: 'genAIReply'
+                    },
+                    ...prev.filter(reply => reply.type !== 'genAIReply')
+                ];
+            });
+            setTimeout(() => {
+                if (args.genAIErrorState === 'No suggestions') {
+                    setReplies(prev => {
+                        return [
+                            {
+                                id: newReplyId,
+                                message: 'No suggestions',
+                                errorType: 'noSuggestions',
+                                type: 'genAIReply'
+                            },
+                            ...prev.filter(reply => reply.type !== 'genAIReply')
+                        ];
+                    });
+                }
+                else if (args.genAIErrorState === 'Error') {
+                    setReplies(prev => {
+                        return [
+                            {
+                                id: newReplyId,
+                                message: 'Failed to retrieve the data',
+                                errorType: 'error',
+                                type: 'genAIReply'
+                            },
+                            ...prev.filter(reply => reply.type !== 'genAIReply')
+                        ];
+                    });
+                    setDisableSuggestReply(false);
+                }
+                else {
+                    setReplies(prev => {
+                        return [
+                            {
+                                id: newReplyId,
+                                message: 'Happy to help. Is there anything else I can help with?',
+                                confidence: 75,
+                                type: 'genAIReply'
+                            },
+                            ...prev.filter(reply => reply.type !== 'genAIReply')
+                        ];
+                    });
+                }
+            }, 1000);
+        },
         children: composerChildren
     };
     const suggestedReplyPickerProps = {
-        replies: suggestedReplies,
+        replies,
         onSelect: (suggestedReply) => {
-            chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
+            if (!isReplyErrorState(suggestedReply) && !isReplyLoadingState(suggestedReply))
+                chatComposerImperativeHandleRef.current?.appendToMessage(suggestedReply.message, 'cursor');
         },
         collapsed: suggestedRepliesCollapsed,
         onExpandCollapse: () => {
@@ -601,10 +652,13 @@ StandardChat.args = {
     placeholder: 'Enter message',
     defaultMessage: 'Greetings! Hope you are having a great time, Please reach out to us for any help, Thanks!',
     maxLength: 280,
-    loading: false
+    loading: false,
+    showAttachments: true,
+    genAIErrorState: 'No error'
 };
 StandardChat.argTypes = {
     maxAttachments: { control: { type: 'number' } },
+    showAttachments: { control: { type: 'boolean' } },
     selectedChannel: { options: ['LiveChat', 'Twitter', 'Facebook'], control: { type: 'select' } },
     showChatBanner: { control: { type: 'boolean' } },
     disableChat: { control: { type: 'boolean' } },
@@ -614,7 +668,11 @@ StandardChat.argTypes = {
     placeholder: { control: { type: 'text' } },
     defaultMessage: { control: { type: 'text' } },
     maxLength: { control: { type: 'number' } },
-    loading: { control: { type: 'boolean' } }
+    loading: { control: { type: 'boolean' } },
+    genAIErrorState: {
+        options: ['No error', 'No suggestions', 'Error'],
+        control: { type: 'select' }
+    }
 };
 StandardChat.parameters = {
     layout: 'fullscreen'