Add RTT to the calling stateful sample, move feature flag to beta, and small bug fix for startRTTButton

change-beta/@azure-communication-react-e2353682-59d3-47be-9145-cd1eaf37003b.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "RTT",
+  "comment": "Add RTT to calling stateful sample. Fix bug in start RTT button",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

common/config/babel/features.js

@@ -22,9 +22,7 @@ module.exports = {
     // Feature for remote UFD
     "remote-ufd",
     // Feature for together mode
-    "together-mode",
-    // Feature for RTT
-    "rtt"
+    "together-mode"
   ],
   beta: [
     "call-readiness",
@@ -73,6 +71,8 @@ module.exports = {
     "call-participants-locator",
     // feature for breakout rooms
     "breakout-rooms",
+    // Feature for RTT
+    "rtt"
   ],
   stable: [
     // Demo feature. Used in live-documentation of conditional compilation.

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

@@ -5125,7 +5125,7 @@ export interface StartRealTimeTextButtonProps extends ControlBarButtonProps {
 // @beta
 export interface StartRealTimeTextButtonStrings {
     label: string;
-    tooltipOnContent: string;
+    tooltipOffContent: string;
 }
 
 // @beta

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

@@ -42,9 +42,10 @@ export interface StartRealTimeTextButtonStrings {
    */
   label: string;
   /**
-   * Content for when button is checked, RealTimeText is on
+   * Content for when button is not checked, Real-Time Text is off.
+   * We don't need to supply a tooltip string when RealTimeText is on, because the button will be disabled when Real-Time Text is on.
    */
-  tooltipOnContent: string;
+  tooltipOffContent: string;
 }
 
 /* @conditional-compile-remove(rtt) */
@@ -70,7 +71,7 @@ export const StartRealTimeTextButton = (props: StartRealTimeTextButtonProps): JS
       strings={strings}
       onClick={onStartRealTimeText}
       onRenderOffIcon={onRenderStartIcon}
-      disabled={isRealTimeTextOn}
+      disabled={props.disabled || isRealTimeTextOn}
     />
   );
 };

packages/react-components/src/localization/locales/en-US/strings.json

@@ -306,7 +306,7 @@
   },
   "startRealTimeTextButton": {
     "label": "Turn on RTT for this call",
-    "tooltipOnContent": "RTT is turned on for this call"
+    "tooltipOffContent": "Turn on RTT for this call"
   },
   "messageThread": {
     "yesterday": "Yesterday",

packages/storybook8/stories/Components/CaptionsBanner/snippets/CaptionsBanner.snippet.tsx

@@ -6,5 +6,11 @@ import React from 'react';
 
 export const CaptionsBannerStory = (): JSX.Element => {
   const captionsBannerProps = usePropsFor(CaptionsBanner);
-  return <>{captionsBannerProps?.isCaptionsOn && <CaptionsBanner {...captionsBannerProps} />}</>;
+  return (
+    <>
+      {(captionsBannerProps?.isCaptionsOn || captionsBannerProps?.isRealTimeTextOn) && (
+        <CaptionsBanner {...captionsBannerProps} />
+      )}
+    </>
+  );
 };

packages/storybook8/stories/Components/StartRealTimeTextButton/snippets/StartRealTimeTextButton.snippet.tsx

@@ -1,14 +1,22 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { StartRealTimeTextButton } from '@azure/communication-react';
+import { CaptionsBanner, StartRealTimeTextButton, usePropsFor } from '@azure/communication-react';
 import React from 'react';
 
 export const StartRealTimeTextButtonStory = (): JSX.Element => {
+  /**
+   * In this example snippet we show case how to add a button to start real-time text
+   * The start button will enable real-time text for the local user so the user can start typing
+   * Once the first real-time text message is sent, real-time text will be enabled automatically for all participants.
+   * The start button is disabled when real-time text is on
+   */
+
   const [isRealTimeTextOn, setIsRealTimeTextOn] = React.useState<boolean>(false);
+  const captionsBannerProps = usePropsFor(CaptionsBanner);
   return (
     <StartRealTimeTextButton
-      isRealTimeTextOn={isRealTimeTextOn}
+      isRealTimeTextOn={captionsBannerProps.isRealTimeTextOn || isRealTimeTextOn}
       showLabel
       onStartRealTimeText={() => {
         alert('Real-Time Text started');

samples/CallingStateful/src/components/CallingComponents.tsx

@@ -13,6 +13,8 @@ import {
   VideoStreamOptions,
   StartCaptionsButton
 } from '@azure/communication-react';
+/* @conditional-compile-remove(rtt) */
+import { StartRealTimeTextButton, RealTimeTextModal } from '@azure/communication-react';
 import { Stack } from '@fluentui/react';
 import { LocalLanguage20Regular } from '@fluentui/react-icons';
 import React, { useCallback, useState } from 'react';
@@ -26,8 +28,11 @@ export const CallingComponents = (): JSX.Element => {
   const startCaptionsButtonProps = usePropsFor(StartCaptionsButton);
   const captionsSettingsModalProps = usePropsFor(CaptionsSettingsModal);
   const captionsBannerProps = usePropsFor(CaptionsBanner);
-
   const [callEnded, setCallEnded] = useState(false);
+  /* @conditional-compile-remove(rtt) */
+  const [showRealTimeTextModal, setShowRealTimeTextModal] = useState(false);
+  /* @conditional-compile-remove(rtt) */
+  const [isRealTimeTextStarted, setIsRealTimeTextStarted] = useState(false);
   const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);
   const call = useCall();
   const localVideoViewOptions = {
@@ -68,7 +73,28 @@ export const CallingComponents = (): JSX.Element => {
               }}
             />
           )}
-          {captionsBannerProps?.isCaptionsOn && <CaptionsBanner {...captionsBannerProps} />}
+          {
+            /* @conditional-compile-remove(rtt) */ showRealTimeTextModal && (
+              <RealTimeTextModal
+                showModal={showRealTimeTextModal}
+                onDismissModal={() => {
+                  setShowRealTimeTextModal(false);
+                }}
+                onStartRealTimeText={() => {
+                  setIsRealTimeTextStarted(true);
+                }}
+              />
+            )
+          }
+          {(captionsBannerProps?.isCaptionsOn ||
+            /* @conditional-compile-remove(rtt) */ captionsBannerProps.isRealTimeTextOn ||
+            /* @conditional-compile-remove(rtt) */ isRealTimeTextStarted) && (
+            <CaptionsBanner
+              {...captionsBannerProps}
+              /* @conditional-compile-remove(rtt) */
+              isRealTimeTextOn={captionsBannerProps.isRealTimeTextOn || isRealTimeTextStarted}
+            />
+          )}
           <Stack>
             <ControlBar layout={'floatingBottom'}>
               {cameraProps && <CameraButton {...cameraProps} />}
@@ -94,6 +120,15 @@ export const CallingComponents = (): JSX.Element => {
                   }}
                 />
               )}
+              {
+                /* @conditional-compile-remove(rtt) */ <StartRealTimeTextButton
+                  disabled={!(call?.state === 'Connected')}
+                  isRealTimeTextOn={captionsBannerProps.isRealTimeTextOn || isRealTimeTextStarted}
+                  onStartRealTimeText={() => {
+                    setShowRealTimeTextModal(true);
+                  }}
+                />
+              }
               {endCallProps && <EndCallButton {...endCallProps} onHangUp={onHangup} />}
             </ControlBar>
           </Stack>