rtt storybook

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

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

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

@@ -304,14 +304,14 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
     return () => {
       captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);
     };
-  }, [handleScrollToTheBottom, isCaptionsOn]);
+  }, [handleScrollToTheBottom, isCaptionsOn, isRealTimeTextOn]);
 
   useEffect(() => {
     // only auto scroll to bottom is already is at bottom of scroll before new caption comes in
     if (isAtBottomOfScroll) {
       scrollToBottom();
     }
-  }, [captions, isAtBottomOfScroll]);
+  }, [mergedCaptions, isAtBottomOfScroll]);
   /* @conditional-compile-remove(rtt) */
   const [textFieldValue, setTextFieldValue] = useState<string>('');
   /* @conditional-compile-remove(rtt) */
@@ -379,7 +379,7 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
 
   return (
     <>
-      {(startCaptionsInProgress || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
+      {(startCaptionsInProgress || isCaptionsOn || /* @conditional-compile-remove(rtt) */ isRealTimeTextOn) && (
         <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id="captions-banner">
           {
             /* @conditional-compile-remove(rtt) */ (isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (
@@ -422,7 +422,7 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
           {
             /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && onSendRealTimeText && (
               <TextField
-                label={strings.realTimeTextInputBoxDefaultText}
+                placeholder={strings.realTimeTextInputBoxDefaultText}
                 value={textFieldValue}
                 onKeyDown={handleKeyDown}
                 onChange={(_, newValue) => {

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

@@ -38,9 +38,9 @@ export interface StartRealTimeTextButtonProps extends ControlBarButtonProps {
  */
 export interface StartRealTimeTextButtonStrings {
   /**
-   * Label for when action is to start RealTimeText
+   * Label for the start Real Time Text button
    */
-  onLabel: string;
+  label: string;
   /**
    * Content for when button is checked, RealTimeText is on
    */
@@ -64,7 +64,6 @@ export const StartRealTimeTextButton = (props: StartRealTimeTextButtonProps): JS
   const onRenderStartIcon = (): JSX.Element => {
     return <_HighContrastAwareIcon disabled={props.disabled} iconName="RealTimeTextIcon" />;
   };
-
   return (
     <ControlBarButton
       {...props}

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

@@ -305,7 +305,7 @@
     "tooltipOffContent": "Turn on captions"
   },
   "startRealTimeTextButton": {
-    "onLabel": "Turn on RTT for this call",
+    "label": "Turn on RTT for this call",
     "tooltipOnContent": "RTT is turned on for this call"
   },
   "messageThread": {

packages/storybook8/stories/Components/CaptionsBanner/CaptionsBanner.story.tsx

@@ -1,7 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { CaptionsInformation, CaptionsBanner as CaptionsBannerComponent } from '@azure/communication-react';
+import {
+  CaptionsInformation,
+  CaptionsBanner as CaptionsBannerComponent,
+  RealTimeTextInformation
+} from '@azure/communication-react';
 import { PrimaryButton, Stack } from '@fluentui/react';
 import React, { useState } from 'react';
 import {
@@ -11,9 +15,12 @@ import {
   GenerateMockNewShortCaption
 } from './mockCaptions';
 
-const CaptionsBannerStory = (): JSX.Element => {
+const CaptionsBannerStory = (args: any): JSX.Element => {
   const [captions, setCaptions] = useState<CaptionsInformation[]>(GenerateMockNewCaptions());
 
+  const [realTimeTexts, setRealTimeTexts] = useState<RealTimeTextInformation[]>([]);
+  const [finalizedRealTimeTexts, setFinalizedRealTimeTexts] = useState<RealTimeTextInformation[]>([]);
+
   const addNewCaption = (): void => {
     setCaptions([...captions, GenerateMockNewCaption()]);
   };
@@ -37,11 +44,34 @@ const CaptionsBannerStory = (): JSX.Element => {
     padding: '2rem'
   };
 
+  const sendRealTimeText = async (text: string, isFinalized: boolean): Promise<void> => {
+    if (!isFinalized) {
+      setRealTimeTexts([{ message: text, id: 1, displayName: 'John', isTyping: true, finalizedTimeStamp: new Date() }]);
+      return Promise.resolve();
+    }
+    if (isFinalized) {
+      setFinalizedRealTimeTexts([
+        ...finalizedRealTimeTexts,
+        { message: text, id: 1, displayName: 'John', isTyping: false, finalizedTimeStamp: new Date() }
+      ]);
+      setRealTimeTexts([]);
+      return Promise.resolve();
+    }
+  };
+
   return (
     <Stack verticalFill tokens={{ childrenGap: '5rem' }} style={containerStyles} verticalAlign="space-between">
       <Stack style={{ border: 'solid grey 0.1rem' }} horizontalAlign="center">
-        <Stack.Item style={{ width: '60%' }}>
-          <CaptionsBannerComponent captions={captions} isCaptionsOn startCaptionsInProgress />
+        <Stack.Item style={{ width: '90%' }}>
+          <CaptionsBannerComponent
+            captions={captions}
+            realTimeTexts={{ currentInProgress: realTimeTexts, completedMessages: finalizedRealTimeTexts }}
+            onSendRealTimeText={sendRealTimeText}
+            isCaptionsOn={args.isCaptionsOn}
+            isRealTimeTextOn={args.isRealTimeTextOn}
+            startCaptionsInProgress={args.startCaptionsInProgress}
+            formFactor={args.formFactor}
+          />
         </Stack.Item>
       </Stack>
 

packages/storybook8/stories/Components/CaptionsBanner/Docs.mdx

@@ -2,12 +2,15 @@ import { CaptionsBanner } from '@azure/communication-react';
 import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
 import * as CaptionsBannerStories from './index.stories';
 import CaptionsBannerExampleText from '!!raw-loader!./snippets/CaptionsBanner.snippet.tsx';
+import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner';
 
 <Meta of={CaptionsBannerStories} />
 
 # CaptionsBanner
 
-A component for displaying a CaptionsBanner with user icon, displayName and captions text.
+A component to display list of captions or/and Real Time Text, and contains a textfield to send real time text. Will show maximum 50 entries.
+
+<SingleLineBetaBanner content="Real Time Text functionality is currently in Public Preview" />{' '}
 
 <Canvas of={CaptionsBannerStories.CaptionsBanner} source={{ code: CaptionsBannerExampleText }} />
 

packages/storybook8/stories/Components/CaptionsBanner/index.stories.tsx

@@ -3,7 +3,7 @@
 
 import { CaptionsBanner } from '@azure/communication-react';
 import { Meta } from '@storybook/react';
-import { hiddenControl } from '../../controlsUtils';
+import { controlsToAdd, hiddenControl } from '../../controlsUtils';
 
 export { CaptionsBanner } from './CaptionsBanner.story';
 
@@ -13,15 +13,21 @@ const meta: Meta = {
   argTypes: {
     captions: hiddenControl,
     realTimeTexts: hiddenControl,
-    isCaptionsOn: hiddenControl,
-    startCaptionsInProgress: hiddenControl,
     strings: hiddenControl,
     onRenderAvatar: hiddenControl,
-    formFactor: hiddenControl,
     captionsOptions: hiddenControl,
-    isRealTimeTextOn: hiddenControl,
     onSendRealTimeText: hiddenControl,
-    latestLocalRealTimeText: hiddenControl
+    latestLocalRealTimeText: hiddenControl,
+    isCaptionsOn: controlsToAdd.isCaptionsOn,
+    formFactor: controlsToAdd.captionsFormFactor,
+    isRealTimeTextOn: controlsToAdd.isRealTimeTextOn,
+    startCaptionsInProgress: controlsToAdd.startCaptionsInProgress
+  },
+  args: {
+    isCaptionsOn: true,
+    formFactor: 'default',
+    isRealTimeTextOn: true,
+    startCaptionsInProgress: false
   }
 };
 

packages/storybook8/stories/Components/CaptionsBanner/mockCaptions.ts

@@ -6,6 +6,7 @@ import { CaptionsInformation } from '@azure/communication-react';
 export const GenerateMockNewCaption = (): CaptionsInformation => {
   return {
     id: Date.now().toString(),
+    createdTimeStamp: new Date(),
     displayName: 'SpongeBob',
     captionText:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
@@ -15,6 +16,7 @@ export const GenerateMockNewCaption = (): CaptionsInformation => {
 export const GenerateMockNewShortCaption = (): CaptionsInformation => {
   return {
     id: Date.now().toString(),
+    createdTimeStamp: new Date(),
     displayName: 'SpongeBob Patrick',
     captionText: 'Lorem ipsum dolor sit amet'
   };
@@ -23,6 +25,7 @@ export const GenerateMockNewShortCaption = (): CaptionsInformation => {
 export const GenerateMockNewCaptionWithLongName = (): CaptionsInformation => {
   return {
     id: Date.now().toString(),
+    createdTimeStamp: new Date(),
     displayName: 'SpongeBob Patrick Robert',
     captionText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt'
   };
@@ -32,28 +35,33 @@ export const GenerateMockNewCaptions = (): CaptionsInformation[] => {
   return [
     {
       id: Date.now().toString(),
+      createdTimeStamp: new Date(),
       displayName: 'Caroline',
       captionText: 'Hello there'
     },
     {
       id: Date.now().toString() + 1,
+      createdTimeStamp: new Date(),
       displayName: 'Mike',
       captionText: 'Hi welcome'
     },
     {
       id: Date.now().toString() + 2,
+      createdTimeStamp: new Date(),
       displayName: 'SpongeBob Patrick Robert',
       captionText:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
     },
     {
       id: Date.now().toString() + 3,
       displayName: 'Patrick',
+      createdTimeStamp: new Date(),
       captionText:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
     },
     {
       id: Date.now().toString() + 4,
+      createdTimeStamp: new Date(),
       displayName: 'Sandy',
       captionText: 'Lorem ipsum dolor sit amet'
     }

packages/storybook8/stories/Components/CaptionsSettingsModal/Docs.mdx

@@ -5,9 +5,9 @@ import CaptionsSettingsModalExampleText from '!!raw-loader!./snippets/CaptionsSe
 
 <Meta of={CaptionsSettingsModalStories} />
 
-# CaptionsBanner
+# CaptionsSettingsModal
 
-A component for displaying a CaptionsBanner with user icon, displayName and captions text.
+A component for setting caption/spoken languages and starting captions.
 
 <Canvas of={CaptionsSettingsModalStories.CaptionsSettingsModal} source={{ code: CaptionsSettingsModalExampleText }} />
 

packages/storybook8/stories/INTERNAL/RealTimeText/Docs.mdx → packages/storybook8/stories/Components/RealTimeText/Docs.mdx

@@ -1,11 +1,14 @@
-import { RealTimeText } from '@internal/react-components';
+import { RealTimeText } from '@azure/communication-react';
 import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
 import * as RealTimeTextStories from './index.stories';
 import RealTimeTextExampleText from '!!raw-loader!./snippets/ExampleRealTimeText.snippet.tsx';
+import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner';
 
 <Meta of={RealTimeTextStories} />
 
-# Real Time Text
+# RealTimeText
+
+<SingleLineBetaBanner />
 
 A component for displaying a Real time text message with user icon, displayName and captions text.
 

packages/storybook8/stories/INTERNAL/RealTimeText/RealTimeText.story.tsx → packages/storybook8/stories/Components/RealTimeText/RealTimeText.story.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { RealTimeText as RealTimeTextExample } from '@azure/communication-react';
 import { Stack } from '@fluentui/react';
-import { RealTimeText as RealTimeTextExample } from '@internal/react-components';
 import React from 'react';
 
 const RealTimeTextStory = (args: { isTyping: boolean; displayName: string; message: string }): JSX.Element => {

packages/storybook8/stories/INTERNAL/RealTimeText/index.stories.tsx → packages/storybook8/stories/Components/RealTimeText/index.stories.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { RealTimeText } from '@internal/react-components';
+import { RealTimeText } from '@azure/communication-react';
 import { Meta } from '@storybook/react';
 import { controlsToAdd, hiddenControl } from '../../controlsUtils';
 import { ExampleRealTimeText } from './snippets/ExampleRealTimeText.snippet';
@@ -13,7 +13,7 @@ export const ExampleRealTimeTextExampleDocsOnly = {
 export { RealTimeText } from './RealTimeText.story';
 
 const meta: Meta = {
-  title: 'Components/Internal/Real Time Text',
+  title: 'Components/Real Time Text',
   component: RealTimeText,
   argTypes: {
     isTyping: controlsToAdd.isRTTTyping,
@@ -22,7 +22,8 @@ const meta: Meta = {
     id: hiddenControl,
     onRenderAvatar: hiddenControl,
     strings: hiddenControl,
-    userId: hiddenControl
+    userId: hiddenControl,
+    isMe: hiddenControl
   }
 };
 

packages/storybook8/stories/INTERNAL/RealTimeText/snippets/ExampleRealTimeText.snippet.tsx → packages/storybook8/stories/Components/RealTimeText/snippets/ExampleRealTimeText.snippet.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { RealTimeText } from '@azure/communication-react';
 import { Stack } from '@fluentui/react';
-import { RealTimeText } from '@internal/react-components';
 import React from 'react';
 
 export const ExampleRealTimeText = (): JSX.Element => {

packages/storybook8/stories/INTERNAL/RealTimeTextModal/Docs.mdx → packages/storybook8/stories/Components/RealTimeTextModal/Docs.mdx

@@ -1,11 +1,14 @@
-import { RealTimeTextModal } from '@internal/react-components';
+import { RealTimeTextModal } from '@azure/communication-react';
 import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
 import * as RealTimeTextModalStories from './index.stories';
 import RealTimeTextModalExampleText from '!!raw-loader!./snippets/RealTimeTextModal.snippet.tsx';
+import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner';
 
 <Meta of={RealTimeTextModalStories} />
 
-# RealTimeText Modal
+# RealTimeTextModal
+
+<SingleLineBetaBanner />
 
 A component for displaying a modal showing contents related to RealTimeText
 

packages/storybook8/stories/INTERNAL/RealTimeTextModal/RealTimeTextModal.story.tsx → packages/storybook8/stories/Components/RealTimeTextModal/RealTimeTextModal.story.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { RealTimeTextModal as RealTimeTextModalExample } from '@azure/communication-react';
 import { mergeStyles, PrimaryButton, Stack } from '@fluentui/react';
-import { RealTimeTextModal as RealTimeTextModalExample } from '@internal/react-components';
 import React, { useState } from 'react';
 
 const RealTimeTextModalStory = (): JSX.Element => {

packages/storybook8/stories/INTERNAL/RealTimeTextModal/index.stories.tsx → packages/storybook8/stories/Components/RealTimeTextModal/index.stories.tsx

@@ -1,13 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { RealTimeTextModal } from '@internal/react-components';
+import { RealTimeTextModal } from '@azure/communication-react';
 import { Meta } from '@storybook/react';
 import { hiddenControl } from '../../controlsUtils';
 export { RealTimeTextModal } from './RealTimeTextModal.story';
 
 const meta: Meta = {
-  title: 'Components/Internal/Real Time Text Modal',
+  title: 'Components/Real Time Text Modal',
   component: RealTimeTextModal,
   argTypes: {
     showModal: hiddenControl,

packages/storybook8/stories/Components/StartCaptionsButton/index.stories.tsx

@@ -8,7 +8,7 @@ import { hiddenControl } from '../../controlsUtils';
 export { StartCaptionsButton } from './StartCaptionsButton.story';
 
 const meta: Meta = {
-  title: 'Components/StartCaptionsButton',
+  title: 'Components/Start Captions Button',
   component: StartCaptionsButton,
   argTypes: {
     onStartCaptions: hiddenControl,

packages/storybook8/stories/Components/StartRealTimeTextButton/Docs.mdx

@@ -0,0 +1,22 @@
+import { StartRealTimeTextButton } from '@azure/communication-react';
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import * as StartRealTimeTextButtonStories from './index.stories';
+import StartRealTimeTextButtonExampleText from '!!raw-loader!./snippets/StartRealTimeTextButton.snippet.tsx';
+import { SingleLineBetaBanner } from '../../BetaBanners/SingleLineBetaBanner';
+
+<Meta of={StartRealTimeTextButtonStories} />
+
+# StartRealTimeTextButton
+
+<SingleLineBetaBanner />
+
+A component to show Real Time Text UI locally. Note that real time text will only be started for everyone in the call when the first message is sent.
+
+<Canvas
+  of={StartRealTimeTextButtonStories.StartRealTimeTextButton}
+  source={{ code: StartRealTimeTextButtonExampleText }}
+/>
+
+## Props
+
+<ArgTypes of={StartRealTimeTextButton} />