update

Azure · Dec 25, 2024 · a2db45c · a2db45c
1 parent d8acf9d
commit a2db45c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/packages/calling-component-bindings/src/captionsSelector.ts b/packages/calling-component-bindings/src/captionsSelector.ts
@@ -157,12 +157,24 @@ export const captionsBannerSelector: CaptionsBannerSelector = reselect.createSel
         isLocalUser: c.isLocal
       };
     });
+
+    /* @conditional-compile-remove(rtt) */
+    // find the last real time text caption
+    const lastRealTimeText =
+      captionsInfo &&
+      captionsInfo
+        .slice()
+        .reverse()
+        .find((caption) => caption.isRealTimeText && caption.isLocalUser);
+
     return {
       captions: captionsInfo ?? [],
       isCaptionsOn: isCaptionsFeatureActive ?? false,
       /* @conditional-compile-remove(rtt) */
       isRealTimeTextOn: isRealTimeTextActive ?? false,
-      startCaptionsInProgress: startCaptionsInProgress ?? false
+      startCaptionsInProgress: startCaptionsInProgress ?? false,
+      /* @conditional-compile-remove(rtt) */
+      latestLocalRealTimeText: lastRealTimeText
     };
   }
 );

diff --git a/packages/react-components/src/components/CaptionsBanner.tsx b/packages/react-components/src/components/CaptionsBanner.tsx
@@ -123,6 +123,11 @@ export interface CaptionsBannerProps {
    * 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;
@@ -142,7 +147,9 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
     /* @conditional-compile-remove(rtt) */
     isRealTimeTextOn,
     /* @conditional-compile-remove(rtt) */
-    onSendRealTimeText
+    onSendRealTimeText,
+    /* @conditional-compile-remove(rtt) */
+    latestLocalRealTimeText
   } = props;
   const localeStrings = useLocale().strings.captionsBanner;
   const strings = { ...localeStrings, ...props.strings };
@@ -187,15 +194,11 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
   /* @conditional-compile-remove(rtt) */
   useEffect(() => {
     // if the latest real time text sent by myself is final, clear the text field
-    // find the last real time text caption
-    const lastRealTimeText = captions
-      .slice()
-      .reverse()
-      .find((caption) => caption.isRealTimeText && caption.isLocalUser);
-    if (lastRealTimeText && !lastRealTimeText.isPartial) {
+    if (latestLocalRealTimeText && !latestLocalRealTimeText.isPartial) {
       setTextFieldValue('');
     }
-  }, [captions]);
+  }, [latestLocalRealTimeText]);
+
   /* @conditional-compile-remove(rtt) */
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
     if (event.key === 'Enter') {