strings

Author: carocao-msft

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

@@ -987,6 +987,7 @@ export interface CallCompositeStrings {
     realTimeTextCloseModalButtonAriaLabel: string;
     realTimeTextConfirmButtonLabel: string;
     realTimeTextInputBoxDefaultText?: string;
+    realTimeTextInputErrorMessage?: string;
     realTimeTextLabel?: string;
     realTimeTextModalAriaLabel: string;
     realTimeTextModalText: string;
@@ -1909,6 +1910,7 @@ export interface CaptionsBannerStrings {
     realTimeTextBannerLinkLabel?: string;
     realTimeTextBannerTitle?: string;
     realTimeTextInputBoxDefaultText?: string;
+    realTimeTextInputErrorMessage?: string;
 }
 
 // @public (undocumented)

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

@@ -104,6 +104,11 @@ export interface CaptionsBannerStrings {
    */
   realTimeTextInputBoxDefaultText?: string;
   /* @conditional-compile-remove(rtt) */
+  /**
+   * Error message for RTT input text box when the size exceeds the limit 2000
+   */
+  realTimeTextInputErrorMessage?: string;
+  /* @conditional-compile-remove(rtt) */
   /**
    * Real time text disclosure banner title
    */
@@ -359,6 +364,8 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
                   setTextFieldValue(newValue || '');
                   onSendRealTimeText(newValue || '', false);
                 }}
+                maxLength={2000}
+                errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined}
               />
             )
           }

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

@@ -82,6 +82,7 @@
   "captionsBanner": {
     "captionsBannerSpinnerText": "Starting captions...",
     "realTimeTextInputBoxDefaultText": "Type message in real time",
+    "realTimeTextInputErrorMessage": "Message can not exceed 2000 characters",
     "realTimeTextBannerTitle": "RTT",
     "realTimeTextBannerContent": "RTT (real-time text) is enabled for all participants for the entire duration of the meeting.",
     "realTimeTextBannerLinkLabel": "Learn more"

packages/react-composites/src/composites/CallComposite/Strings.tsx

@@ -565,6 +565,11 @@ export interface CallCompositeStrings {
    */
   realTimeTextInputBoxDefaultText?: string;
   /* @conditional-compile-remove(rtt) */
+  /**
+   * Error message for RTT input text box when the size exceeds the limit 2000
+   */
+  realTimeTextInputErrorMessage?: string;
+  /* @conditional-compile-remove(rtt) */
   /**
    * Text to show in the real time text disclosure banner
    */

packages/react-composites/src/composites/common/CallingCaptionsBanner.tsx

@@ -60,6 +60,8 @@ export const CallingCaptionsBanner = (props: {
     /* @conditional-compile-remove(rtt) */
     realTimeTextInputBoxDefaultText: strings.realTimeTextInputBoxDefaultText,
     /* @conditional-compile-remove(rtt) */
+    realTimeTextInputErrorMessage: strings.realTimeTextInputErrorMessage,
+    /* @conditional-compile-remove(rtt) */
     realTimeTextBannerContent: strings.realTimeTextBannerContent,
     /* @conditional-compile-remove(rtt) */
     realTimeTextBannerTitle: strings.realTimeTextBannerTitle,

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

@@ -219,6 +219,7 @@
     },
     "captionsBannerSpinnerText": "Starting captions...",
     "realTimeTextInputBoxDefaultText": "Type message in real-time",
+    "realTimeTextInputErrorMessage": "Message can not exceed 2000 characters",
     "realTimeTextBannerTitle": "RTT",
     "realTimeTextBannerContent": "RTT (real-time text) is enabled for all participants for the entire duration of the meeting.",
     "realTimeTextBannerLinkLabel": "Learn more",