Fetch read receipt when participant join the chat, also not show read receipt when having more than 20 participants (#1639)

* fetch read receipt

* Change files

* comments

* Update composite automation snapshots

* Update composite automation snapshots

* Update js bundle automation snapshots

* Update js bundle automation snapshots

* read receipt

* fix flaky test

* add comment

* changelog

* fetch read receipt

* Change files

* comments

* read receipt

* Update composite automation snapshots

* fix flaky test

* add comment

* changelog

* fix lint error

* Update ChatComposite.test.ts

* Update ChatComposite.test.ts

* Update ChatComposite.test.ts

* Update composite automation snapshots

* Update composite automation snapshots

* Update composite automation snapshots

* fix flaky test

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: carocao-msft

change/@internal-chat-component-bindings-174ed567-42fd-4851-be2d-14c6dc9b3727.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fetch read receipt when participant join the chat, also not show read receipt info when having more than 20 participants",
+  "packageName": "@internal/chat-component-bindings",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@internal-react-components-199c3e05-8ba5-4099-9266-a0f166e65b06.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fetch read receipt when participant join the chat, also not show read receipt info when having more than 20 participant",
+  "packageName": "@internal/react-components",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "none"
+}

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

@@ -5,7 +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 { ChatMessage, ChatThreadClient, SendMessageOptions } from '@azure/communication-chat';
+import { ChatMessage, ChatMessageReadReceipt, ChatThreadClient, SendMessageOptions } from '@azure/communication-chat';
 import memoizeOne from 'memoize-one';
 
 /**
@@ -40,6 +40,7 @@ export type ChatHandlers = {
 export const createDefaultChatHandlers = memoizeOne(
   (chatClient: StatefulChatClient, chatThreadClient: ChatThreadClient): ChatHandlers => {
     let messageIterator: PagedAsyncIterableIterator<ChatMessage> | undefined = undefined;
+    let readReceiptIterator: PagedAsyncIterableIterator<ChatMessageReadReceipt> | undefined = undefined;
     return {
       onSendMessage: async (content: string, options?: SendMessageOptions) => {
         const sendMessageRequest = {
@@ -73,20 +74,36 @@ export const createDefaultChatHandlers = memoizeOne(
           // Also allows recovery via retries in case of transient errors.
           messageIterator = chatThreadClient.listMessages({ maxPageSize: 50 });
         }
-
+        if (readReceiptIterator === undefined) {
+          readReceiptIterator = chatThreadClient.listReadReceipts();
+        }
+        // get the earliest message time
         let remainingMessagesToGet = messagesToLoad;
         let isAllChatMessagesLoaded = false;
+        let earliestTime = Number.MAX_SAFE_INTEGER;
         while (remainingMessagesToGet >= 1) {
           const message = await messageIterator.next();
+          if (message?.value?.id) {
+            if (parseInt(message.value.id) < earliestTime) {
+              earliestTime = parseInt(message.value.id);
+            }
+          }
+
           if (message.value?.type && message.value.type === 'text') {
             remainingMessagesToGet--;
           }
+
           // We have traversed all messages in this thread
           if (message.done) {
             isAllChatMessagesLoaded = true;
             break;
           }
         }
+        // keep fetching read receipts until read receipt time < earlist message time
+        let readReceipt = await readReceiptIterator.next();
+        while (!readReceipt.done && parseInt(readReceipt?.value?.chatMessageId) >= earliestTime) {
+          readReceipt = await readReceiptIterator.next();
+        }
         return isAllChatMessagesLoaded;
       }
     };

packages/react-components/src/components/ChatMessage/ChatMessageActionsFlyout.tsx

@@ -32,6 +32,10 @@ export interface ChatMessageActionFlyoutProps {
   onDismiss: () => void;
   messageReadBy?: { id: string; name: string }[];
   remoteParticipantsCount?: number;
+  /**
+   * Whether the status indicator for each message is displayed or not.
+   */
+  showMessageStatus?: boolean;
   /**
    * Increase the height of the flyout items.
    * Recommended when interacting with the chat message using touch.
@@ -103,6 +107,7 @@ export const ChatMessageActionFlyout = (props: ChatMessageActionFlyoutProps): JS
       props.remoteParticipantsCount &&
       messageReadByCount !== undefined &&
       props.remoteParticipantsCount >= 2 &&
+      props.showMessageStatus &&
       props.strings.messageReadCount
     ) {
       items.push({
@@ -154,6 +159,7 @@ export const ChatMessageActionFlyout = (props: ChatMessageActionFlyoutProps): JS
     props.onEditClick,
     props.onRemoveClick,
     props.remoteParticipantsCount,
+    props.showMessageStatus,
     messageReadByCount,
     theme.palette.neutralPrimary,
     theme.palette.neutralTertiary,

packages/react-components/src/components/ChatMessage/ChatMessageComponent.tsx

@@ -18,6 +18,10 @@ type ChatMessageComponentProps = {
   onUpdateMessage?: (messageId: string, content: string) => Promise<void>;
   onDeleteMessage?: (messageId: string) => Promise<void>;
   strings: MessageThreadStrings;
+  /**
+   * Whether the status indicator for each message is displayed or not.
+   */
+  showMessageStatus?: boolean;
   /**
    * Inline the accept and reject edit buttons when editing a message.
    * Setting to false will mean they are on a new line inside the editable chat message.

packages/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx

@@ -25,6 +25,10 @@ type ChatMessageComponentAsMessageBubbleProps = {
   onRemoveClick?: () => void;
   strings: MessageThreadStrings;
   userId: string;
+  /**
+   * Whether the status indicator for each message is displayed or not.
+   */
+  showMessageStatus?: boolean;
   /**
    * Optional callback to render uploaded files in the message component.
    */
@@ -52,7 +56,8 @@ export const ChatMessageComponentAsMessageBubble = (props: ChatMessageComponentA
     strings,
     onEditClick,
     remoteParticipantsCount = 0,
-    onRenderAvatar
+    onRenderAvatar,
+    showMessageStatus
   } = props;
 
   // Track if the action menu was opened by touch - if so we increase the touch targets for the items
@@ -137,6 +142,7 @@ export const ChatMessageComponentAsMessageBubble = (props: ChatMessageComponentA
           messageReadBy={message.readBy ?? []}
           remoteParticipantsCount={remoteParticipantsCount}
           onRenderAvatar={onRenderAvatar}
+          showMessageStatus={showMessageStatus}
         />
       )}
     </>

packages/react-components/src/components/MessageThread.tsx

@@ -880,6 +880,7 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
             remoteParticipantsCount={messageThreadParticipantCount ? messageThreadParticipantCount - 1 : 0}
             inlineAcceptRejectEditButtons={!isNarrow}
             onRenderAvatar={onRenderAvatar}
+            showMessageStatus={showMessageStatus}
           />
         );
       }

packages/react-composites/stable-snapshot/tests/browser/chat/ChatComposite.test.ts-snapshots/rejoin-thread-Desktop-Chrome-linux.png

@@ -56,7 +56,6 @@ test.describe('Chat Composite E2E Tests', () => {
   test('page[0] can view typing indicator within 10s', async ({ pages, users }) => {
     const page0 = pages[0];
     const page1 = pages[1];
-
     await page1.type(dataUiId(IDS.sendboxTextField), 'I am not superstitious. Just a little stitious.');
     await waitForSelector(page0, dataUiId(IDS.typingIndicator));
     const indicator0 = await page0.$(dataUiId(IDS.typingIndicator));
@@ -94,6 +93,8 @@ test.describe('Chat Composite E2E Tests', () => {
     // await waitForSelector(page1, `[data-ui-status="seen"]`);
     await waitForMessageWithContent(page1, testMessageText);
     await stubMessageTimestamps(page1);
+    // we are getting read receipt for previous messages, so the message here should be seen, otherwise it could cause flaky test
+    await waitForMessageSeen(page1);
     expect(await page1.screenshot()).toMatchSnapshot('rejoin-thread.png');
   });
 });