Updated chat examples for UseSelector Storybook page (#5871)

Author: vhuseinova-msft

packages/chat-component-bindings/src/handlers/createHandlers.test.ts

@@ -222,10 +222,11 @@ describe('createHandlers', () => {
     await handlers.onSendMessage('test message');
     expect(mockChatThreadClient.sendMessage).toHaveBeenCalledWith(
       {
-        content: 'test message',
-        senderDisplayName: displayName
+        content: 'test message'
       },
-      undefined
+      {
+        senderDisplayName: displayName
+      }
     );
   });
 
@@ -240,16 +241,16 @@ describe('createHandlers', () => {
     await handlers.onSendMessage('test message', options);
     expect(mockChatThreadClient.sendMessage).toHaveBeenCalledWith(
       {
-        content: 'test message',
-        senderDisplayName: displayName
+        content: 'test message'
       },
       {
         metadata: {
           key: 'value',
           fileSharingMetadata: JSON.stringify(options.attachments)
         },
         attachments: undefined,
-        type: undefined
+        type: undefined,
+        senderDisplayName: displayName
       }
     );
   });
@@ -262,8 +263,7 @@ describe('createHandlers', () => {
     await handlers.onSendMessage(content);
     expect(mockChatThreadClient.sendMessage).toHaveBeenCalledWith(
       {
-        content,
-        senderDisplayName: displayName
+        content
       },
       {
         attachments: [
@@ -275,7 +275,8 @@ describe('createHandlers', () => {
         metadata: {
           fileSharingMetadata: undefined
         },
-        type: undefined
+        type: undefined,
+        senderDisplayName: displayName
       }
     );
   });
@@ -293,16 +294,16 @@ describe('createHandlers', () => {
     await handlers.onSendMessage(content, options);
     expect(mockChatThreadClient.sendMessage).toHaveBeenCalledWith(
       {
-        content,
-        senderDisplayName: displayName
+        content
       },
       {
         metadata: {
           key: 'value',
           fileSharingMetadata: JSON.stringify(options.attachments)
         },
         attachments: [{ id: 'image1', attachmentType: 'image' }],
-        type: undefined
+        type: undefined,
+        senderDisplayName: displayName
       }
     );
   });

packages/chat-component-bindings/src/handlers/createHandlers.ts

@@ -5,6 +5,7 @@ import { PagedAsyncIterableIterator } from '@azure/core-paging';
 import { ReactElement } from 'react';
 import { Common, fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';
 import { StatefulChatClient } from '@internal/chat-stateful-client';
+import { SendMessageRequest } from '@azure/communication-chat';
 /* @conditional-compile-remove(file-sharing-acs) */
 import { ChatAttachment } from '@azure/communication-chat';
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -68,9 +69,8 @@ export const createDefaultChatHandlers = memoizeOne(
         content: string,
         options?: SendMessageOptions | /* @conditional-compile-remove(file-sharing-acs) */ MessageOptions
       ) {
-        const sendMessageRequest = {
-          content,
-          senderDisplayName: chatClient.getState().displayName
+        const sendMessageRequest: SendMessageRequest = {
+          content
         };
 
         /* @conditional-compile-remove(rich-text-editor-image-upload) */
@@ -100,13 +100,17 @@ export const createDefaultChatHandlers = memoizeOne(
             },
             /* @conditional-compile-remove(rich-text-editor-image-upload) */
             attachments: imageAttachments,
-            type: options?.type
+            type: options?.type,
+            senderDisplayName: chatClient.getState().displayName
           };
           await chatThreadClient.sendMessage(sendMessageRequest, chatSDKOptions);
           return;
         }
 
-        await chatThreadClient.sendMessage(sendMessageRequest, options as SendMessageOptions);
+        await chatThreadClient.sendMessage(sendMessageRequest, {
+          ...(options as SendMessageOptions),
+          senderDisplayName: chatClient.getState().displayName
+        });
       },
       /* @conditional-compile-remove(rich-text-editor-image-upload) */
       onUploadImage: async function (image: Blob, imageFilename: string): Promise<UploadChatImageResult> {

packages/storybook8/stories/StatefulClient/ReactHooks/UseSelector.mdx

@@ -103,18 +103,24 @@ While we provide a set of default props(which includes data and handler function
 In some situations, you may want to override default behavior and place your own API call (like call another service, or call another API in our stateful SDK). Here is an example of how to change the message before using the stateful client to send it.
 
 ```tsx
+const threadId = '<Thread id from chat service>';
 const sendBoxProps = usePropsFor(SendBox);
-// This hook will get stateful client you created
-const chatThreadClient = useThreadClient();
+// Instantiate the statefulChatClient
+const statefulChatClient = createStatefulChatClient(...); // create a stateful chat client
+// Get the chat thread client
+const chatThreadClient = statefulChatClient.getChatThreadClient(threadId);
 
 const onSendMessage = useCallback(
   (message: string) => {
-    const sendMessageRequest = {
-      `✉: ${content}`,
-      senderDisplayName: chatClient.getState().displayName
+    const sendMessageRequest: = {
+      // Updated message content
+      content:  `✉: ${message}`
+    };
+    const sendMessageOptions = {
+      senderDisplayName: statefulChatClient.getState().displayName
     };
     // directly call into stateful client
-    await chatThreadClient.sendMessage(sendMessageRequest);
+    await chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);
   },
   [chatThreadClient]
 );
@@ -142,8 +148,8 @@ By calling `useSelector`/`usePropsFor`, you can get the right combination of def
 ```tsx
 const customSelector = createSelector(....); // create your own selector
 const messageThreadProps = useSelector(customSelector);
-// This hook will get stateful client you created
-const chatThreadClient = useThreadClient();
+// Get the chat thread client
+const chatThreadClient = useChatThreadClient();
 
 // Create your own handlers
 const onMessageSeen = useCallback((message: string) => {