Real Time Text API update and tests

change-beta/@azure-communication-react-4b0c972c-f310-493e-a96f-29df49eefadf.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "RTT",
+  "comment": "Caption Banner API update, and update the merged caption list to only store 50 entries. Also added tests for the sorting logic",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -1887,7 +1887,7 @@ export interface CaptionsBannerProps {
     isRealTimeTextOn?: boolean;
     latestLocalRealTimeText?: RealTimeTextInformation;
     onRenderAvatar?: OnRenderAvatarCallback;
-    onSendRealTimeText?: (text: string, finalized: boolean) => Promise<void>;
+    onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;
     realTimeTexts?: {
         completedMessages?: RealTimeTextInformation[];
         currentInProgress?: RealTimeTextInformation[];
@@ -4590,8 +4590,8 @@ export type RealTimeTextInformation = {
     userId?: string;
     message: string;
     isTyping: boolean;
-    isMe: boolean;
     finalizedTimeStamp: Date;
+    isMe?: boolean;
 };
 
 // @beta

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

@@ -15,6 +15,8 @@ import {
   loadingBannerFullHeightStyles,
   loadingBannerStyles
 } from './styles/Captions.style';
+/* @conditional-compile-remove(rtt) */
+import { rttDisclosureBannerClassName } from './styles/Captions.style';
 import { OnRenderAvatarCallback } from '../types';
 import { useLocale } from '../localization';
 /* @conditional-compile-remove(rtt) */
@@ -80,14 +82,15 @@ export type RealTimeTextInformation = {
    * if the real time text received is partial
    */
   isTyping: boolean;
-  /**
-   * If message originated from the local participant
-   */
-  isMe: boolean;
   /**
    * timestamp when the real time text was finalized
    */
   finalizedTimeStamp: Date;
+  /**
+   * If message originated from the local participant
+   * default value is false
+   */
+  isMe?: boolean;
 };
 /**
  * @public
@@ -182,7 +185,7 @@ export interface CaptionsBannerProps {
   /**
    * Optional callback to send real time text.
    */
-  onSendRealTimeText?: (text: string, finalized: boolean) => Promise<void>;
+  onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;
   /* @conditional-compile-remove(rtt) */
   /**
    * Latest local real time text
@@ -227,7 +230,7 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
 
   /* @conditional-compile-remove(rtt) */
   const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {
-    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress] as (
+    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) as (
       | CaptionsInformation
       | RealTimeTextInformation
     )[];
@@ -334,13 +337,6 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
     <>
       {(startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
         <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id="captions-banner">
-          {
-            /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && (
-              <div style={{ paddingTop: '0.5rem' }}>
-                <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />
-              </div>
-            )
-          }
           {(isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
             <ul
               ref={captionsScrollDivRef}
@@ -351,6 +347,13 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
               }
               data-ui-id="captions-banner-inner"
             >
+              {
+                /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && (
+                  <Stack className={rttDisclosureBannerClassName()}>
+                    <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />
+                  </Stack>
+                )
+              }
               {captionsTrampoline()}
             </ul>
           )}

packages/react-components/src/components/styles/Captions.style.ts

@@ -47,6 +47,16 @@ export const rttContainerClassName = (theme: ITheme, isTyping: boolean): string
   });
 };
 
+/* @conditional-compile-remove(rtt) */
+/**
+ * @private
+ */
+export const rttDisclosureBannerClassName = (): string => {
+  return mergeStyles({
+    paddingTop: '0.5rem'
+  });
+};
+
 /**
  * @private
  */

packages/react-components/src/components/utils/sortCaptionsAndRealTimeTexts.test.ts

@@ -0,0 +1,196 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(rtt) */
+import { CaptionsInformation, RealTimeTextInformation } from '../CaptionsBanner';
+/* @conditional-compile-remove(rtt) */
+import { _formatPhoneNumber } from './formatPhoneNumber';
+/* @conditional-compile-remove(rtt) */
+import { sortCaptionsAndRealTimeTexts } from './sortCaptionsAndRealTimeTexts';
+/* @conditional-compile-remove(rtt) */
+const mockCaptions: CaptionsInformation[] = [
+  {
+    id: '1',
+    displayName: 'John Doe',
+    captionText: 'Hello',
+    createdTimeStamp: new Date('2021-09-01T00:00:01Z')
+  },
+  {
+    id: '2',
+    displayName: 'John Doe',
+    captionText: 'Hello there ',
+    createdTimeStamp: new Date('2021-09-01T00:00:00Z')
+  },
+  {
+    id: '3',
+    displayName: 'John Doe',
+    captionText: 'Hi',
+    createdTimeStamp: new Date('2021-09-01T00:00:02Z')
+  },
+  {
+    id: '4',
+    displayName: 'John Doe',
+    captionText: 'Hello there ',
+    createdTimeStamp: new Date('2021-09-01T00:00:09Z')
+  },
+  {
+    id: '5',
+    displayName: 'John Doe',
+    captionText: 'Hello there ',
+    createdTimeStamp: new Date('2021-09-01T00:00:05Z')
+  }
+];
+/* @conditional-compile-remove(rtt) */
+const mockRealTimeTexts: RealTimeTextInformation[] = [
+  {
+    id: 11,
+    displayName: 'John Doe',
+    message: 'Hello',
+    finalizedTimeStamp: new Date('2021-09-01T00:00:03Z'),
+    isTyping: false
+  },
+  {
+    id: 22,
+    displayName: 'John Doe',
+    message: 'Hello there ',
+    finalizedTimeStamp: new Date('2021-09-01T00:00:10Z'),
+    isTyping: false
+  },
+  {
+    id: 33,
+    displayName: 'John Doe',
+    message: 'Hi',
+    finalizedTimeStamp: new Date('2021-09-01T00:00:04Z'),
+    isTyping: false
+  }
+];
+/* @conditional-compile-remove(rtt) */
+describe('Sort Captions and Real Time Text List', () => {
+  test('if only using captions, captions should be sorted by created timestamp', () => {
+    const result = [
+      {
+        id: '2',
+        displayName: 'John Doe',
+        captionText: 'Hello there ',
+        createdTimeStamp: new Date('2021-09-01T00:00:00Z')
+      },
+      {
+        id: '1',
+        displayName: 'John Doe',
+        captionText: 'Hello',
+        createdTimeStamp: new Date('2021-09-01T00:00:01Z')
+      },
+
+      {
+        id: '3',
+        displayName: 'John Doe',
+        captionText: 'Hi',
+        createdTimeStamp: new Date('2021-09-01T00:00:02Z')
+      },
+      {
+        id: '5',
+        displayName: 'John Doe',
+        captionText: 'Hello there ',
+        createdTimeStamp: new Date('2021-09-01T00:00:05Z')
+      },
+      {
+        id: '4',
+        displayName: 'John Doe',
+        captionText: 'Hello there ',
+        createdTimeStamp: new Date('2021-09-01T00:00:09Z')
+      }
+    ];
+    expect(sortCaptionsAndRealTimeTexts(mockCaptions, [])).toEqual(result);
+  });
+
+  test('if only using RTT, RTT should be sorted by last updated time stamp', () => {
+    const result = [
+      {
+        id: 11,
+        displayName: 'John Doe',
+        message: 'Hello',
+        finalizedTimeStamp: new Date('2021-09-01T00:00:03Z'),
+        isTyping: false
+      },
+      {
+        id: 33,
+        displayName: 'John Doe',
+        message: 'Hi',
+        finalizedTimeStamp: new Date('2021-09-01T00:00:04Z'),
+        isTyping: false
+      },
+      {
+        id: 22,
+        displayName: 'John Doe',
+        message: 'Hello there ',
+        finalizedTimeStamp: new Date('2021-09-01T00:00:10Z'),
+        isTyping: false
+      }
+    ];
+    expect(sortCaptionsAndRealTimeTexts([], mockRealTimeTexts)).toEqual(result);
+  });
+
+  test('when using both, captions and RTT should be compared with captions created timestamp and rtts last updated timestamp', () => {
+    const result = [
+      {
+        id: '2',
+        displayName: 'John Doe',
+        captionText: 'Hello there ',
+        createdTimeStamp: new Date('2021-09-01T00:00:00Z')
+      },
+      {
+        id: '1',
+        displayName: 'John Doe',
+        captionText: 'Hello',
+        createdTimeStamp: new Date('2021-09-01T00:00:01Z')
+      },
+
+      {
+        id: '3',
+        displayName: 'John Doe',
+        captionText: 'Hi',
+        createdTimeStamp: new Date('2021-09-01T00:00:02Z')
+      },
+      {
+        id: 11,
+        displayName: 'John Doe',
+        message: 'Hello',
+        finalizedTimeStamp: new Date('2021-09-01T00:00:03Z'),
+        isTyping: false
+      },
+      {
+        id: 33,
+        displayName: 'John Doe',
+        message: 'Hi',
+        finalizedTimeStamp: new Date('2021-09-01T00:00:04Z'),
+        isTyping: false
+      },
+      {
+        id: '5',
+        displayName: 'John Doe',
+        captionText: 'Hello there ',
+        createdTimeStamp: new Date('2021-09-01T00:00:05Z')
+      },
+      {
+        id: '4',
+        displayName: 'John Doe',
+        captionText: 'Hello there ',
+        createdTimeStamp: new Date('2021-09-01T00:00:09Z')
+      },
+      {
+        id: 22,
+        displayName: 'John Doe',
+        message: 'Hello there ',
+        finalizedTimeStamp: new Date('2021-09-01T00:00:10Z'),
+        isTyping: false
+      }
+    ];
+    expect(sortCaptionsAndRealTimeTexts(mockCaptions, mockRealTimeTexts)).toEqual(result);
+  });
+});
+
+// for cc
+describe('Place holder test for cc', () => {
+  test('place holder', async () => {
+    expect(true).toEqual(true);
+  });
+});