Real Time Text Component Related Changes and Strings (#5525)

* RTT component changes

* Change files

* build

* udpate

* update based on comment

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallWithChatComposite browser test snapshots

* update style

* Revert "Update packages/react-composites CallWithChatComposite browser test snapshots"

This reverts commit 83f804f.

* Revert "Update packages/react-composites CallWithChatComposite browser test snapshots"

This reverts commit 00cd69d.

---------

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

Author: carocao-msft

change-beta/@azure-communication-react-26cb5aca-ad5e-425a-ba56-349c49b5c9ed.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Real Time Text",
+  "comment": "Components for real time text",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -980,6 +980,8 @@ export interface CallCompositeStrings {
     pinParticipantMenuItemAriaLabel: string;
     pinParticipantMenuLabel: string;
     privacyPolicy: string;
+    realTimeTextInputBoxDefaultText?: string;
+    realTimeTextLabel?: string;
     rejoinCallButtonLabel: string;
     removeBackgroundEffectButtonLabel?: string;
     removeBackgroundTooltip?: string;
@@ -1016,6 +1018,7 @@ export interface CallCompositeStrings {
     startCaptionsButtonOnLabel?: string;
     startCaptionsButtonTooltipOffContent?: string;
     startCaptionsButtonTooltipOnContent?: string;
+    startRealTimeTextLabel?: string;
     startSpotlightMenuLabel: string;
     stopAllSpotlightMenuLabel: string;
     stopSpotlightMenuLabel: string;
@@ -1871,7 +1874,10 @@ export interface CaptionsBannerProps {
     };
     formFactor?: 'default' | 'compact';
     isCaptionsOn?: boolean;
+    isRealTimeTextOn?: boolean;
+    latestLocalRealTimeText?: CaptionsInformation;
     onRenderAvatar?: OnRenderAvatarCallback;
+    onSendRealTimeText?: (text: string, finalized?: boolean) => Promise<void>;
     startCaptionsInProgress?: boolean;
     strings?: CaptionsBannerStrings;
 }
@@ -1885,6 +1891,7 @@ export type CaptionsBannerSelector = (state: CallClientState, props: CallingBase
 // @public
 export interface CaptionsBannerStrings {
     captionsBannerSpinnerText?: string;
+    realTimeTextInputBoxDefaultText?: string;
 }
 
 // @public (undocumented)
@@ -1925,6 +1932,9 @@ export type CaptionsInformation = {
     displayName: string;
     captionText: string;
     userId?: string;
+    isRealTimeText?: boolean;
+    isPartial?: boolean;
+    isLocalUser?: boolean;
 };
 
 // @public
@@ -2580,6 +2590,7 @@ export interface ComponentStrings {
     sendBox: SendBoxStrings;
     spokenLanguages: SpokenLanguageStrings;
     startCaptionsButton: StartCaptionsButtonStrings;
+    startRealTimeTextButton: StartRealTimeTextButtonStrings;
     typingIndicator: TypingIndicatorStrings;
     UnsupportedBrowser: UnsupportedBrowserStrings;
     UnsupportedBrowserVersion: UnsupportedBrowserVersionStrings;
@@ -2998,8 +3009,8 @@ export const DEFAULT_COMPONENT_ICONS: {
     IncomingCallNotificationRejectIcon: React_2.JSX.Element;
     IncomingCallNotificationAcceptIcon: React_2.JSX.Element;
     IncomingCallNotificationAcceptWithVideoIcon: React_2.JSX.Element;
-    RTTIcon: React_2.JSX.Element;
     NotificationBarTogetherModeIcon: React_2.JSX.Element;
+    RealTimeTextIcon: React_2.JSX.Element;
 };
 
 // @public
@@ -3184,8 +3195,8 @@ export const DEFAULT_COMPOSITE_ICONS: {
     IncomingCallNotificationRejectIcon: React_2.JSX.Element;
     IncomingCallNotificationAcceptIcon: React_2.JSX.Element;
     IncomingCallNotificationAcceptWithVideoIcon: React_2.JSX.Element;
-    RTTIcon: React_2.JSX.Element;
     NotificationBarTogetherModeIcon: React_2.JSX.Element;
+    RealTimeTextIcon: React_2.JSX.Element;
 };
 
 // @beta
@@ -4557,6 +4568,7 @@ export interface RealTimeTextProps {
     captionText: string;
     displayName: string;
     id: string;
+    isLocalUser?: boolean;
     isTyping?: boolean;
     onRenderAvatar?: OnRenderAvatarCallback;
     strings?: RealTimeTextStrings;
@@ -5024,6 +5036,22 @@ export interface StartCaptionsButtonStrings {
     tooltipOnContent: string;
 }
 
+// @beta
+export const StartRealTimeTextButton: (props: StartRealTimeTextButtonProps) => JSX.Element;
+
+// @beta
+export interface StartRealTimeTextButtonProps extends ControlBarButtonProps {
+    isRealTimeTextOn: boolean;
+    onStartRealTimeText: () => Promise<void>;
+    strings?: StartRealTimeTextButtonStrings;
+}
+
+// @beta
+export interface StartRealTimeTextButtonStrings {
+    onLabel: string;
+    tooltipOnContent: string;
+}
+
 // @beta
 export type StartTeamsCallIdentifier = MicrosoftTeamsUserIdentifier | PhoneNumberIdentifier | MicrosoftTeamsAppIdentifier | UnknownIdentifier;
 

packages/communication-react/src/index.ts

@@ -93,6 +93,7 @@ export type {
   CaptionsBannerSelector,
   StartCaptionsButtonSelector
 } from '../../calling-component-bindings/src';
+
 export type { HoldButtonSelector } from '../../calling-component-bindings/src';
 
 export type { RaiseHandButtonSelector } from '../../calling-component-bindings/src';
@@ -465,6 +466,13 @@ export { RTTDisclosureBanner } from '../../react-components/src';
 export type { RealTimeTextProps, RealTimeTextStrings } from '../../react-components/src/components/RealTimeText';
 /* @conditional-compile-remove(rtt) */
 export { RealTimeText } from '../../react-components/src/components/RealTimeText';
+/* @conditional-compile-remove(rtt) */
+export { StartRealTimeTextButton } from '../../react-components/src/components/StartRealTimeTextButton';
+/* @conditional-compile-remove(rtt) */
+export type {
+  StartRealTimeTextButtonProps,
+  StartRealTimeTextButtonStrings
+} from '../../react-components/src/components/StartRealTimeTextButton';
 /* @conditional-compile-remove(media-access) */
 export type { MediaAccess } from '../../react-components/src';
 export type { CaptionsSettingsModalStrings, CaptionsSettingsModalProps } from '../../react-components/src';

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

@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';
+/* @conditional-compile-remove(rtt) */
+import { TextField } from '@fluentui/react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { _Caption } from './Caption';
 import {
@@ -13,6 +15,10 @@ import {
 } from './styles/Captions.style';
 import { OnRenderAvatarCallback } from '../types';
 import { useLocale } from '../localization';
+/* @conditional-compile-remove(rtt) */
+import { RealTimeText } from './RealTimeText';
+/* @conditional-compile-remove(rtt) */
+import { RTTDisclosureBanner } from './RTTDisclosureBanner';
 
 /**
  * @public
@@ -35,6 +41,21 @@ export type CaptionsInformation = {
    * id of the speaker
    */
   userId?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * if the caption received is real time text
+   */
+  isRealTimeText?: boolean;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * if the caption received is a non finalized caption
+   */
+  isPartial?: boolean;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * if the caption received is from the local user
+   */
+  isLocalUser?: boolean;
 };
 
 /**
@@ -46,6 +67,11 @@ export interface CaptionsBannerStrings {
    * Spinner text for captions banner
    */
   captionsBannerSpinnerText?: string;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Default text for RTT input text box
+   */
+  realTimeTextInputBoxDefaultText?: string;
 }
 
 /**
@@ -61,6 +87,11 @@ export interface CaptionsBannerProps {
    * Flag to indicate if captions are on
    */
   isCaptionsOn?: boolean;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Flag to indicate if real time text is on
+   */
+  isRealTimeTextOn?: boolean;
   /**
    * Flag to indicate if captions are being started
    * This is used to show spinner while captions are being started
@@ -87,6 +118,16 @@ export interface CaptionsBannerProps {
   captionsOptions?: {
     height: 'full' | 'default';
   };
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Optional callback to send real time text.
+   */
+  onSendRealTimeText?: (text: string, finalized?: boolean) => Promise<void>;
+  /* @conditional-compile-remove(rtt) */
+  /**
+   * Latest local real time text
+   */
+  latestLocalRealTimeText?: CaptionsInformation;
 }
 
 const SCROLL_OFFSET_ALLOWANCE = 20;
@@ -102,7 +143,13 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
     startCaptionsInProgress,
     onRenderAvatar,
     formFactor = 'default',
-    captionsOptions
+    captionsOptions,
+    /* @conditional-compile-remove(rtt) */
+    isRealTimeTextOn,
+    /* @conditional-compile-remove(rtt) */
+    onSendRealTimeText,
+    /* @conditional-compile-remove(rtt) */
+    latestLocalRealTimeText
   } = props;
   const localeStrings = useLocale().strings.captionsBanner;
   const strings = { ...localeStrings, ...props.strings };
@@ -142,12 +189,33 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
       scrollToBottom();
     }
   }, [captions, isAtBottomOfScroll]);
+  /* @conditional-compile-remove(rtt) */
+  const [textFieldValue, setTextFieldValue] = useState<string>('');
+  /* @conditional-compile-remove(rtt) */
+  useEffect(() => {
+    // if the latest real time text sent by myself is final, clear the text field
+    if (latestLocalRealTimeText && !latestLocalRealTimeText.isPartial) {
+      setTextFieldValue('');
+    }
+  }, [latestLocalRealTimeText]);
+
+  /* @conditional-compile-remove(rtt) */
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (textFieldValue && onSendRealTimeText) {
+        onSendRealTimeText(textFieldValue, true);
+        setTextFieldValue('');
+      }
+    }
+  };
 
   return (
     <>
-      {startCaptionsInProgress && (
+      {(startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
         <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id="captions-banner">
-          {isCaptionsOn && (
+          {/* @conditional-compile-remove(rtt) */ isRealTimeTextOn && <RTTDisclosureBanner />}
+          {(isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
             <ul
               ref={captionsScrollDivRef}
               className={
@@ -158,6 +226,14 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
               data-ui-id="captions-banner-inner"
             >
               {captions.map((caption) => {
+                /* @conditional-compile-remove(rtt) */
+                if (caption.isRealTimeText) {
+                  return (
+                    <li key={caption.id} className={captionContainerClassName} data-is-focusable={true}>
+                      <RealTimeText {...caption} isTyping={caption.isPartial} onRenderAvatar={onRenderAvatar} />
+                    </li>
+                  );
+                }
                 return (
                   <li key={caption.id} className={captionContainerClassName} data-is-focusable={true}>
                     <_Caption {...caption} onRenderAvatar={onRenderAvatar} />
@@ -166,7 +242,20 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
               })}
             </ul>
           )}
-          {!isCaptionsOn && (
+          {
+            /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && onSendRealTimeText && (
+              <TextField
+                label={strings.realTimeTextInputBoxDefaultText}
+                value={textFieldValue}
+                onKeyDown={handleKeyDown}
+                onChange={(_, newValue) => {
+                  setTextFieldValue(newValue || '');
+                  onSendRealTimeText(newValue || '');
+                }}
+              />
+            )
+          }
+          {!isCaptionsOn && /* @conditional-compile-remove(rtt) */ !isRealTimeTextOn && (
             <Stack
               verticalAlign="center"
               styles={

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

@@ -10,7 +10,7 @@ import { Notification } from './Notification';
 /* @conditional-compile-remove(rtt) */
 import { useTheme } from '@fluentui/react';
 /* @conditional-compile-remove(rtt) */
-import { rttContainerStyles } from './styles/RTTDisclosureBanner.styles';
+import { rttContainerStyles, rttIconStyles } from './styles/RTTDisclosureBanner.styles';
 
 /* @conditional-compile-remove(rtt) */
 /**
@@ -54,7 +54,10 @@ export const RTTDisclosureBanner = (props: RTTDisclosureBannerProps): JSX.Elemen
         message: strings.bannerContent,
         linkLabel: strings.bannerLinkLabel
       }}
-      notificationIconProps={{ iconName: 'RTTIcon' }}
+      notificationIconProps={{
+        iconName: 'RealTimeTextIcon',
+        styles: rttIconStyles()
+      }}
       onClickLink={props.onClickLink}
       styles={{ root: rttContainerStyles(theme) }}
     />

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

@@ -63,6 +63,10 @@ export interface RealTimeTextProps {
    * Boolean indicating whether the RealTimeText is still in progress
    */
   isTyping?: boolean;
+  /**
+   * Boolean indicating whether the RealTimeText is from the local user
+   */
+  isLocalUser?: boolean;
   /**
    * Strings for RealTimeText
    */