Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update RTT storybook to match conceptual doc #5657

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update RTT storybook to match conceptual doc #5657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4caa409
update
carocao-msft Feb 20, 2025
73aae99
Merge branch 'main' into carocao/RTTStory
carocao-msft Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified packages/storybook8/public/images/CaptionsBannerRTT.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed packages/storybook8/public/images/RTTModal.png
View file
Open in desktop
Binary file not shown.
82 changes: 42 additions & 40 deletions packages/storybook8/stories/Concepts/RealTimeText/Docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { Stack } from '@fluentui/react';
import { Meta } from '@storybook/addon-docs';
import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner';
import { overviewPageImagesStackStyle } from '../../constants';

<Meta title="Concepts/Real-Time Text" />

Expand All @@ -25,11 +23,26 @@ Enhancing Clarity: In noisy environments or situations with audio quality issues

Microsoft is dedicated to accessibility, and the incorporation of Real-Time Text (RTT) supports this commitment by adhering to accessibility standards such as The European Accessibility Act (Directive (EU) 2019/882. This directive requires that voice and video services support RTT by June 2025, ensuring inclusive communication throughout Europe. Voice and video services will not be permitted to operate in Europe or have Europe based customers after June 2025 without RTT, making the inclusion of this feature in the UI Library critically important.

## Incorporating RTT in Your Experience
## How RTT Works in a Call Experience

Real-Time Text (RTT) is tightly integrated into both the communication flow and the UI, ensuring that users can engage in dynamic, real-time conversations.

When a call starts, RTT is not enabled by default. Participants can choose to activate it at any time during the call. To enable RTT, users open the call control bar—usually located at the bottom of the screen—and click on the "More" button, represented by an ellipsis (...). From the menu that appears, selecting the "Start Real-Time Text" option activates RTT for everyone in the call. A notification is displayed to inform all participants that RTT has been turned on and cannot be disabled for the rest of the call.

<img style={{ width: '100%' }} src="images/StartRTT.png" alt="example of component that can be used for starting RTT" />

Once RTT is enabled, participants can type messages in a dedicated text window that appears in the captions area. As each character is typed, it is immediately visible to everyone in real time, creating a natural, continuous flow of communication. This allows both the person typing and other participants to engage with the conversation without waiting for complete messages. RTT can also merge seamlessly with live captions to deliver a unified text experience. This allows users to view both real-time messages and captions in one place, ensuring accessibility and minimal UI clutter.

Real-Time Text is supported by default and are automatically included within the CallComposite and CallWithChatComposite experiences.
Although RTT exists in the caption window, it can still be enabled without captions being enabled. Similarly, captions can still be enabled without RTT being enabled. When both captions and RTT are enabled, both captions and RTT messages are displayed in the same interface. RTT messages show a "RTT Typing" tag while they are being composed and then integrate into the captions feed once committed. The design prioritizes usability, making it easy for participants to activate and follow conversations without interruptions.

Real-Time Text is also supported for component only users.
<img
style={{ width: '100%' }}
src="images/CaptionsBannerRTT.png"
alt="example of Captions Banner with Real-Time Text Enabled"
/>
## Incorporating RTT in Your Experience

RTT is automatically available in the UI Library. RTT is integrated by default within the CallComposite, CallWithChatComposite, and is available to be built using the associated Components. These components automatically manage message display states, typing indicators, and user interaction prompts to deliver a fluid, accessible experience. Developers can use these four components to build their own customer RTT experience.

List of components exported for Real-Time Text:

Expand All @@ -41,41 +54,6 @@ List of components exported for Real-Time Text:

[CaptionsBanner](./?path=/docs/components-captions-banner--docs) is a component that combines and displays captions and Real-Time Text in one banner. Developers and use 'usePropsFor' to gather all the information required to power this component, including the list of Real-Time Text and captions messages in the call. User can also use this component for captions only or Real-Time Text only.

## How to use Real-Time Text

Real-Time Text is automatically included within the CallComposite and CallWithChatComposite experiences.

To turn on Real-Time Text, users need to navigate to the control bar after call is connected, and click on more button. Inside the menu pop up, click on Real-Time Text, then click on Turn on RTT for this call.

Note that Real-Time Text will be enabled for all participants in the call once the first message is sent. It cannot be turned off.

<Stack tokens={{ childrenGap: '3rem' }} style={overviewPageImagesStackStyle}>
<Stack.Item align="center">
<>Using the more menu to turn on Real-Time Text</>
<img
style={{ width: '100%' }}
src="images/StartRTT.png"
alt="example of component that can be used for starting RTT"
/>
</Stack.Item>
<Stack.Item align="center">
<>Real-Time Text Modal showing the disclaimer warning</>
<img
style={{ width: '100%' }}
src="images/RTTModal.png"
alt="example of component that can be used for showing a disclaimer warning that Real-Time Text is enabled for everyone in the call once turned on"
/>
</Stack.Item>
<Stack.Item align="center">
<>Captions Banner with Real-Time Text Enabled</>
<img
style={{ width: '100%' }}
src="images/CaptionsBannerRTT.png"
alt="example of Captions Banner with Real-Time Text Enabled"
/>
</Stack.Item>
</Stack>

## RTT is available in these scenarios

| Call Type | Supported | Notes |
Expand All @@ -89,3 +67,27 @@ Note that Real-Time Text will be enabled for all participants in the call once t

To read more details about the underlying infrastructure, click here:
[Real Time Text (RTT) Overview - An Azure Communication Services concept document | Microsoft Learn](https://learn.microsoft.com/en-us/azure/communication-services/concepts/voice-video-calling/real-time-text)

## FAQ

### How can I enable RTT?

RTT can be enabled during calls via the control bar “more” button.

Enabling RTT opens the RTT window for everyone in the call. When one user enables RTT, other users do not need to enable it for themselves. This window cannot be closed for the duration of the call nor can RTT be disabled.

### What versions of UI Library support RTT?

RTT is currently in public preview and supported in 1.24.0-beta.1.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it better to just have a banner on top indicating that it's in public preview instead of having a section here indicating a version #?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want to update this to stable version once it is out in stable. This is in the conceptual doc Tay wrote


### When I type a sentence in the RTT window, when does it get sent?

A message is finalized (or "committed") when the user explicitly takes an action, such as pressing "Enter," or if no additional text is typed for 3 seconds, at which point the text will automatically commit.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the question asks about "sent"
But the answer never mentions sent. Rather it mentions "Finalized" and "committed". Should we somewhere indicate sent = finalized? If that's what they are specifically asking here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me check with Tay on this


Otherwise, text remains ephemeral as it is being typed, allowing users to see characters appear in real time without immediately committing to a message.

### How does this differ from chat?

Chat is an asynchronous form of messaging that requires a user to type out their whole sentence and commit it before anyone else sees the message. Chat can also be closed or hidden in many calls, giving it a secondary level of prominence.

RTT is a synchronous form of messaging that shows text as it is typed in the main video gallery. The window cannot be hidden or closed, giving it the same level of prominence as speaking would in a call. RTT is also a focused accessibility feature.