agora-appbuilder-core 4.1.22 → 4.1.23-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.22",
+  "version": "4.1.23-beta.2",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/customization-implementation/__tests__/useCustomization.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import TestRenderer, {act} from 'react-test-renderer';
+import {describe, expect, it, jest} from '@jest/globals';
+
+jest.mock('customization', () => ({
+  __esModule: true,
+  default: {
+    lifecycle: {
+      beforeEndCall: jest.fn(),
+    },
+  },
+}));
+
+jest.mock('../../src/components/SdkApiContext', () => {
+  const ReactModule = require('react');
+
+  return {
+    SdkApiContext: ReactModule.createContext({customize: {}}),
+  };
+});
+
+import customizationConfig from 'customization';
+import {SdkApiContext} from '../../src/components/SdkApiContext';
+import {CustomizationProvider, useCustomization} from '../useCustomization';
+
+const Consumer = ({onRender}: {onRender: (value: unknown) => void}) => {
+  onRender(useCustomization());
+  return null;
+};
+
+describe('CustomizationProvider', () => {
+  it('uses the default customization until SDK customization is available', () => {
+    const onRender = jest.fn();
+    let renderer!: TestRenderer.ReactTestRenderer;
+
+    act(() => {
+      renderer = TestRenderer.create(
+        <CustomizationProvider>
+          <Consumer onRender={onRender} />
+        </CustomizationProvider>,
+      );
+    });
+
+    expect(onRender).toHaveBeenLastCalledWith(customizationConfig);
+    renderer.unmount();
+  });
+
+  it('uses customization supplied through the SDK', () => {
+    const onRender = jest.fn();
+    const customization = {lifecycle: {onDeepLink: jest.fn()}};
+    let renderer!: TestRenderer.ReactTestRenderer;
+
+    act(() => {
+      renderer = TestRenderer.create(
+        <SdkApiContext.Provider
+          value={{customize: {customization}} as React.ContextType<
+            typeof SdkApiContext
+          >}>
+          <CustomizationProvider>
+            <Consumer onRender={onRender} />
+          </CustomizationProvider>
+        </SdkApiContext.Provider>,
+      );
+    });
+
+    expect(onRender).toHaveBeenLastCalledWith(customization);
+    renderer.unmount();
+  });
+});

package/template/customization-implementation/useCustomization.tsx

@@ -22,7 +22,8 @@ const CustomizationProvider: React.FC = (props) => {
   const {customize: userCustomization} = useContext(SdkApiContext);
 
   return (
-    <CustomizationContext.Provider value={userCustomization.customization}>
+    <CustomizationContext.Provider
+      value={userCustomization.customization ?? customizationConfig}>
       {props.children}
     </CustomizationContext.Provider>
   );

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: "",
   CHAT_APP_NAME: "",
   CHAT_URL: "",
-  CLI_VERSION: "3.1.22",
-  CORE_VERSION: "4.1.22",
+  CLI_VERSION: "3.1.23-beta.2",
+  CORE_VERSION: "4.1.23-beta.2",
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/pages/video-call/SidePanelHeader.tsx

@@ -278,7 +278,7 @@ const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
     transcriptViewMode,
     setTranscriptViewMode,
   } = useCaption();
-  const {downloadTranscript} = useTranscriptDownload();
+  const {downloadTranscript, isTranscriptPreparing} = useTranscriptDownload();
   const [modalPosition, setModalPosition] = React.useState({});
   const [isPosCalculated, setIsPosCalculated] = React.useState(false);
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
@@ -363,9 +363,12 @@ const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
     iconColor: $config.SECONDARY_ACTION_COLOR,
     textColor: $config.FONT_COLOR,
     title: downloadTranscriptLabel,
-    disabled: meetingTranscript.length === 0 || isLangChangeInProgress,
-    onPress: () => {
-      downloadTranscript();
+    disabled:
+      meetingTranscript.length === 0 ||
+      isLangChangeInProgress ||
+      isTranscriptPreparing,
+    onPress: async () => {
+      await downloadTranscript();
       setActionMenuVisible(false);
     },
   });

package/template/src/subComponents/caption/Caption.tsx

@@ -1,11 +1,9 @@
 import {StyleSheet, TextStyle, View} from 'react-native';
 import React from 'react';
-import {useContent, useRtc} from 'customization-api';
+import {useContent} from 'customization-api';
 import {useCaption} from './useCaption';
 import CaptionText from './CaptionText';
 import Loading from '../Loading';
-import {isWebInternal} from '../../utils/common';
-import useStreamMessageUtils from './useStreamMessageUtils';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {useString} from '../../utils/useString';
 import {useLocalUid} from '../../../agora-rn-uikit';
@@ -14,17 +12,6 @@ import {
   sttSettingTranslationLanguageText,
 } from '../../language/default-labels/videoCallScreenLabels';
 
-export type WebStreamMessageArgs = [number, Uint8Array];
-export type NativeStreamMessageArgs = [
-  {},
-  number,
-  number,
-  Uint8Array,
-  number,
-  number,
-];
-export type StreamMessageArgs = WebStreamMessageArgs | NativeStreamMessageArgs;
-
 interface CaptionProps {
   captionTextStyle?: TextStyle;
   captionUserStyle?: TextStyle;
@@ -34,12 +21,9 @@ const Caption: React.FC<CaptionProps> = ({
   captionTextStyle = {},
   captionUserStyle = {},
 }) => {
-  const {RtcEngineUnsafe} = useRtc();
   const {
     isLangChangeInProgress,
     captionObj, //state for current live caption for all users
-    isSTTListenerAdded,
-    setIsSTTListenerAdded,
     activeSpeakerRef,
     prevSpeakerRef,
     getBotOwnerUid,
@@ -51,32 +35,11 @@ const Caption: React.FC<CaptionProps> = ({
   const stLabel = useString<boolean>(sttSettingTranslationLanguageText)(
     isSTTActive,
   );
-  const {streamMessageCallback} = useStreamMessageUtils();
   const {defaultContent} = useContent();
 
   const [activelinesAvailable, setActiveLinesAvailable] = React.useState(0);
   const [inActiveLinesAvailable, setInActiveLinesAvaialble] = React.useState(0);
 
-  const handleStreamMessageCallback = (...args: StreamMessageArgs) => {
-    setIsSTTListenerAdded(true);
-    if (isWebInternal()) {
-      const [uid, data] = args as WebStreamMessageArgs;
-      streamMessageCallback([uid, data]);
-    } else {
-      const [, uid, , data] = args as NativeStreamMessageArgs;
-      streamMessageCallback([uid, data]);
-    }
-  };
-
-  React.useEffect(() => {
-    !isSTTListenerAdded &&
-      RtcEngineUnsafe.addListener(
-        'onStreamMessage',
-        handleStreamMessageCallback,
-      );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   if (isLangChangeInProgress) {
     return (
       <Loading

package/template/src/subComponents/caption/CaptionIcon.tsx

@@ -1,9 +1,8 @@
 import {View} from 'react-native';
 import React from 'react';
 import IconButton, {IconButtonProps} from '../../atoms/IconButton';
-import {LanguageTranslationConfig, useCaption} from './useCaption';
+import {useCaption} from './useCaption';
 import LanguageSelectorPopup from './LanguageSelectorPopup';
-import useSTTAPI from './useSTTAPI';
 import {useString} from '../../utils/useString';
 import {toolbarItemCaptionText} from '../../language/default-labels/videoCallScreenLabels';
 import {useToolbarProps} from '../../atoms/ToolbarItem';
@@ -31,7 +30,6 @@ const CaptionIcon = (props: CaptionIconProps) => {
     isCaptionON,
     setIsCaptionON,
     isSTTActive,
-    isSTTError,
     sttDepsReady,
     confirmSpokenLanguageChange,
   } = useCaption();
@@ -45,13 +43,16 @@ const CaptionIcon = (props: CaptionIconProps) => {
   const captionLabel = useString<boolean>(toolbarItemCaptionText);
   const label = captionLabel(isCaptionON);
   const onPress = () => {
-    if (isSTTError || !isSTTActive) {
-      // Show popup when error or STT not active
+    // Hiding an already-visible caption is a local UI action and must not be
+    // blocked by a failed or delayed STT API request.
+    if (isCaptionON) {
+      setIsCaptionON(false);
+      closeActionSheet?.();
+    } else if (!isSTTActive) {
       setLanguagePopup(true);
     } else {
-      // STT is active and no error
-      setIsCaptionON(prev => !prev);
-      closeActionSheet();
+      setIsCaptionON(true);
+      closeActionSheet?.();
     }
     // if (isSTTActive) {
     //   // is lang popup has been shown once for any user in meeting
@@ -91,9 +92,9 @@ const CaptionIcon = (props: CaptionIconProps) => {
 
   const onConfirm = async (newSpokenLang: LanguageType) => {
     try {
-      closeActionSheet();
+      closeActionSheet?.();
       setLanguagePopup(false);
-      setIsCaptionON(prev => !prev);
+      setIsCaptionON(true);
       await confirmSpokenLanguageChange(newSpokenLang);
     } catch (error) {
       setIsCaptionON(false);

package/template/src/subComponents/caption/DownloadTranscriptBtn.tsx

@@ -23,8 +23,8 @@ const DownloadTranscriptBtn = (props: DownloadTranscriptBtn) => {
     iconName = 'download',
     text = downloadTranscriptLabel,
   } = props;
-  const {isSTTActive} = useCaption();
-  const {downloadTranscript} = useTranscriptDownload();
+  const {meetingTranscript} = useCaption();
+  const {downloadTranscript, isTranscriptPreparing} = useTranscriptDownload();
   return (
     <View style={styles.btnContainer}>
       <PrimaryButton
@@ -33,8 +33,9 @@ const DownloadTranscriptBtn = (props: DownloadTranscriptBtn) => {
         iconName={iconName}
         containerStyle={[styles.btnContainerStyle, containerStyle] as Object}
         textStyle={[styles.btnTxtStyle, textStyle] as Object}
-        onPress={() => {
-          downloadTranscript();
+        disabled={isTranscriptPreparing || meetingTranscript.length === 0}
+        onPress={async () => {
+          await downloadTranscript();
         }}
         text={text}
       />

package/template/src/subComponents/caption/Transcript.tsx

@@ -21,7 +21,7 @@ import {
   useIsSmall,
 } from '../../utils/common';
 import {TranscriptHeader} from '../../pages/video-call/SidePanelHeader';
-import {useRtc, useContent} from 'customization-api';
+import {useContent} from 'customization-api';
 import {TranscriptItem, useCaption} from './useCaption';
 import {TranscriptText} from './TranscriptText';
 import PrimaryButton from '../../atoms/PrimaryButton';
@@ -30,7 +30,6 @@ import Loading from '../Loading';
 import ImageIcon from '../../atoms/ImageIcon';
 import hexadecimalTransparency from '../../../src/utils/hexadecimalTransparency';
 import Spacer from '../../atoms/Spacer';
-import useStreamMessageUtils from './useStreamMessageUtils';
 import useCaptionWidth from './useCaptionWidth';
 import DownloadTranscriptBtn from './DownloadTranscriptBtn';
 import {useString} from '../../../src/utils/useString';
@@ -46,10 +45,6 @@ export interface TranscriptProps {
   showHeader?: boolean;
 }
 
-type WebStreamMessageArgs = [number, Uint8Array];
-type NativeStreamMessageArgs = [{}, number, number, Uint8Array, number, number];
-type StreamMessageArgs = WebStreamMessageArgs | NativeStreamMessageArgs;
-
 const Transcript = (props: TranscriptProps) => {
   const isSmall = useIsSmall();
   const {currentLayout} = useLayout();
@@ -57,8 +52,6 @@ const Transcript = (props: TranscriptProps) => {
   const {
     meetingTranscript,
     isLangChangeInProgress,
-    isSTTListenerAdded,
-    setIsSTTListenerAdded,
     getBotOwnerUid,
     isSTTActive,
     selectedTranslationLanguage,
@@ -82,9 +75,7 @@ const Transcript = (props: TranscriptProps) => {
   const flatListRef = React.useRef(null);
   const [searchQuery, setSearchQuery] = React.useState('');
   const [searchResults, setSearchResults] = React.useState([]);
-  const {RtcEngineUnsafe} = useRtc();
   const {defaultContent} = useContent();
-  const {streamMessageCallback} = useStreamMessageUtils();
 
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -257,28 +248,6 @@ const Transcript = (props: TranscriptProps) => {
     return <Text style={styles.emptyMsg}>{noresults}</Text>;
   };
 
-  const handleStreamMessageCallback = (...args: StreamMessageArgs) => {
-    console.log('[STT_GLOBAL] handleStreamMessageCallback', args);
-    setIsSTTListenerAdded(true);
-    if (isWebInternal()) {
-      const [uid, data] = args as WebStreamMessageArgs;
-      streamMessageCallback([uid, data]);
-    } else {
-      const [, uid, , data] = args as NativeStreamMessageArgs;
-      streamMessageCallback([uid, data]);
-    }
-  };
-
-  React.useEffect(() => {
-    if (!isSTTListenerAdded) {
-      RtcEngineUnsafe.addListener(
-        'onStreamMessage',
-        handleStreamMessageCallback,
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <View
       // onLayout={handleLayout}

package/template/src/subComponents/caption/TranscriptIcon.tsx

@@ -1,4 +1,4 @@
-import {StyleSheet, View} from 'react-native';
+import {View} from 'react-native';
 import React from 'react';
 import {SidePanelType, useSidePanel} from 'customization-api';
 import IconButton, {IconButtonProps} from '../../atoms/IconButton';
@@ -23,16 +23,13 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
     useToolbarProps();
   const {setSidePanel, sidePanel} = useSidePanel();
   const {
-    showToolTip = false,
     showLabel = $config.ICON_TEXT,
     disabled = false,
     isOnActionSheet = false,
-    isMobileView = false,
   } = props;
 
   // const {start, restart, isAuthorizedTranscriptUser} = useSTTAPI();
-  const {isSTTActive, isSTTError, sttDepsReady, confirmSpokenLanguageChange} =
-    useCaption();
+  const {isSTTActive, sttDepsReady, confirmSpokenLanguageChange} = useCaption();
   // const isDisabled = !isAuthorizedTranscriptUser();
   const [isLanguagePopupOpen, setLanguagePopup] =
     React.useState<boolean>(false);
@@ -40,13 +37,14 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
 
   const isTranscriptON = sidePanel === SidePanelType.Transcript;
   const onPress = () => {
-    if (isSTTError || !isSTTActive) {
+    // Closing an open transcript is always allowed, even if this participant's
+    // STT bot is retrying or failed to start.
+    if (isTranscriptON) {
+      setSidePanel(SidePanelType.None);
+    } else if (!isSTTActive) {
       setLanguagePopup(true);
     } else {
-      // isFirstTimePopupOpen.current = true;
-      setSidePanel(
-        isTranscriptON ? SidePanelType.None : SidePanelType.Transcript,
-      );
+      setSidePanel(SidePanelType.Transcript);
     }
   };
 
@@ -62,7 +60,7 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
         ? $config.PRIMARY_ACTION_TEXT_COLOR
         : $config.SECONDARY_ACTION_COLOR,
     },
-    disabled: !sttDepsReady,
+    disabled: disabled || !sttDepsReady,
     btnTextProps: {
       text: showLabel
         ? isOnActionSheet
@@ -91,11 +89,7 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
       //   await restart(language, userOwnLanguages);
       // }
       await confirmSpokenLanguageChange(newSpokenLang);
-      if (!isTranscriptON) {
-        setSidePanel(SidePanelType.Transcript);
-      } else {
-        setSidePanel(SidePanelType.None);
-      }
+      setSidePanel(SidePanelType.Transcript);
     } catch (error) {
       console.log('eror in starting stt', error);
     }
@@ -115,5 +109,3 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
 };
 
 export default TranscriptIcon;
-
-const styles = StyleSheet.create({});

package/template/src/subComponents/caption/useCaption.tsx

@@ -18,7 +18,9 @@ import {
 } from '../../language/default-labels/videoCallScreenLabels';
 import chatContext from '../../components/ChatContext';
 import {useRoomInfo} from '../../components/room-info/useRoomInfo';
-import {useContent} from 'customization-api';
+import {useContent, useRtc} from 'customization-api';
+import useStreamMessageUtils from './useStreamMessageUtils';
+import {isWebInternal} from '../../utils/common';
 
 // Types
 type GlobalSttState = {
@@ -64,7 +66,7 @@ export type TranscriptItem = {
   selectedTranslationLanguage?: LanguageType;
 };
 
-type CaptionObj = {
+export type CaptionObj = {
   [key: string]: {
     text: string;
     translations: TranslationItem[];
@@ -127,6 +129,8 @@ export const CaptionContext = React.createContext<{
   // holds meeting transcript
   meetingTranscript: TranscriptItem[];
   setMeetingTranscript: React.Dispatch<React.SetStateAction<TranscriptItem[]>>;
+  flushPendingTranscript: () => Promise<void>;
+  getMeetingTranscript: () => TranscriptItem[];
 
   // holds status of stt language change process
   isLangChangeInProgress: boolean;
@@ -180,6 +184,8 @@ export const CaptionContext = React.createContext<{
   setTranscriptViewMode: () => {},
   meetingTranscript: [],
   setMeetingTranscript: () => {},
+  flushPendingTranscript: async () => {},
+  getMeetingTranscript: () => [],
   isLangChangeInProgress: false,
   setIsLangChangeInProgress: () => {},
   captionObj: {},
@@ -236,9 +242,27 @@ const CaptionProvider: React.FC<CaptionProviderProps> = ({
     React.useState<boolean>(false);
 
   const [captionObj, setCaptionObj] = React.useState<CaptionObj>({});
-  const [meetingTranscript, setMeetingTranscript] = React.useState<
+  const [meetingTranscript, setMeetingTranscriptState] = React.useState<
     TranscriptItem[]
   >([]);
+  const meetingTranscriptRef = React.useRef<TranscriptItem[]>([]);
+  const setMeetingTranscript = React.useCallback<
+    React.Dispatch<React.SetStateAction<TranscriptItem[]>>
+  >(nextTranscript => {
+    const nextValue =
+      typeof nextTranscript === 'function'
+        ? nextTranscript(meetingTranscriptRef.current)
+        : nextTranscript;
+
+    // Keep an immediately readable canonical snapshot. React state can be
+    // committed after the stream-processing queue has already become idle.
+    meetingTranscriptRef.current = nextValue;
+    setMeetingTranscriptState(nextValue);
+  }, []);
+  const getMeetingTranscript = React.useCallback(
+    () => meetingTranscriptRef.current,
+    [],
+  );
 
   const [isSTTListenerAdded, setIsSTTListenerAdded] =
     React.useState<boolean>(false);
@@ -287,6 +311,61 @@ const CaptionProvider: React.FC<CaptionProviderProps> = ({
     selectedTranslationLanguageRef.current = selectedTranslationLanguage;
   }, [selectedTranslationLanguage]);
 
+  const {RtcEngineUnsafe} = useRtc();
+  const {streamMessageCallback, flushStreamMessageQueue} =
+    useStreamMessageUtils({
+      setCaptionObj,
+      setMeetingTranscript,
+      activeSpeakerRef,
+      prevSpeakerRef,
+      selectedTranslationLanguageRef,
+    });
+  const transcriptListenerSubscriptionRef = React.useRef<{
+    remove: () => void;
+  } | null>(null);
+
+  const handleStreamMessageCallback = React.useCallback(
+    (...args: any[]) => {
+      if (isWebInternal()) {
+        const [uid, data] = args;
+        streamMessageCallback([uid, data]);
+      } else {
+        const [, uid, , data] = args;
+        streamMessageCallback([uid, data]);
+      }
+    },
+    [streamMessageCallback],
+  );
+
+  // Register once for the lifetime of the active call. Keeping collection in
+  // the provider makes it independent of whether caption/transcript UI is open.
+  React.useEffect(() => {
+    if (
+      !$config.ENABLE_STT ||
+      !callActive ||
+      transcriptListenerSubscriptionRef.current
+    ) {
+      return;
+    }
+
+    transcriptListenerSubscriptionRef.current = RtcEngineUnsafe.addListener(
+      'onStreamMessage',
+      handleStreamMessageCallback,
+    );
+    setIsSTTListenerAdded(true);
+  }, [RtcEngineUnsafe, callActive, handleStreamMessageCallback]);
+
+  React.useEffect(() => {
+    return () => {
+      transcriptListenerSubscriptionRef.current?.remove();
+      transcriptListenerSubscriptionRef.current = null;
+    };
+  }, []);
+
+  const flushPendingTranscript = React.useCallback(async () => {
+    await flushStreamMessageQueue();
+  }, [flushStreamMessageQueue]);
+
   const isSTTActive = globalSttState.globalSttEnabled;
 
   // STT API methods
@@ -448,8 +527,7 @@ const CaptionProvider: React.FC<CaptionProviderProps> = ({
       setIsLangChangeInProgress(true);
       const result = await start(localBotUidRef.current, newConfig);
       console.log('[STT] start result: ', result);
-      if (result.success || result.error?.code === 610) {
-        // Success or already started
+      if (result.success) {
         setIsSTTError(false);
         logger.log(
           LogSource.NetworkRest,
@@ -810,8 +888,18 @@ const CaptionProvider: React.FC<CaptionProviderProps> = ({
         targetChange,
       );
       if (!ok) {
-        console.warn('[STT] Skipping global state update because API failed.');
-        continue;
+        if (isLocal) {
+          console.warn(
+            '[STT] Skipping local global state update because API failed.',
+          );
+          continue;
+        }
+        // A received RTM event is authoritative for the meeting-level state.
+        // Failure to provision this participant's bot must not make the UI
+        // report that meeting STT is disabled while captions are arriving.
+        console.warn(
+          '[STT] Applying remote global state after local STT API failure.',
+        );
       }
       // update global state AFTER processing
       setGlobalSttState(newState);
@@ -848,6 +936,7 @@ const CaptionProvider: React.FC<CaptionProviderProps> = ({
             targets: newState.globalTranslationTargets,
           });
           if (!result.success) {
+            sttStartGuardRef.current = false;
             return false;
           }
           buildSttTranscriptForSourceChanged(
@@ -979,6 +1068,9 @@ const CaptionProvider: React.FC<CaptionProviderProps> = ({
         }
         return true;
       } catch (error) {
+        if (isStartOperation) {
+          sttStartGuardRef.current = false;
+        }
         logger.error(
           LogSource.Internals,
           'STT',
@@ -1033,6 +1125,8 @@ const CaptionProvider: React.FC<CaptionProviderProps> = ({
         setTranscriptViewMode,
         meetingTranscript,
         setMeetingTranscript,
+        flushPendingTranscript,
+        getMeetingTranscript,
         isLangChangeInProgress,
         setIsLangChangeInProgress,
         captionObj,

package/template/src/subComponents/caption/useSTTAPI.tsx

@@ -11,12 +11,26 @@ import {ensureSTTSessionId} from './sttSessionId';
 export interface STTAPIResponse {
   success: boolean;
   data?: any;
+  httpStatus?: number;
   error?: {
     message: string;
     code?: number;
   };
 }
 
+export const STT_START_MAX_ATTEMPTS = 5;
+export const STT_START_RETRY_DELAY_MS = 500;
+const STT_START_RETRY_SPREAD_MS = 200;
+
+const wait = (delayMs: number) =>
+  new Promise<void>(resolve => setTimeout(resolve, delayMs));
+
+const getStartRetryDelay = (botUid: number) =>
+  STT_START_RETRY_DELAY_MS + (Math.abs(botUid) % STT_START_RETRY_SPREAD_MS);
+
+const shouldRetryStart = (result: STTAPIResponse) =>
+  result.httpStatus === 429 || result.error?.code === 610;
+
 interface IuseSTTAPI {
   start: (
     botUid: number,
@@ -104,16 +118,64 @@ const useSTTAPI = (): IuseSTTAPI => {
         body: JSON.stringify(requestBody),
       });
 
-      const res = await response.json();
+      let res: any;
+      try {
+        res = await response.json();
+      } catch (error) {
+        // Some HTTP failures (including 429s) can have an empty/non-JSON body.
+        // Preserve the HTTP status so callers can still apply retry policy.
+        res = undefined;
+      }
       const endReqTs = Date.now();
       const latency = endReqTs - startReqTs;
 
+      const httpStatus = response.status;
+      const isHttpFailure =
+        response.ok === false ||
+        (typeof httpStatus === 'number' && httpStatus >= 400);
+      const responseError = res?.error;
+
+      if (isHttpFailure || responseError?.message) {
+        const errorPayload = responseError || res;
+        const message =
+          errorPayload?.message ||
+          (httpStatus
+            ? `STT request failed with status ${httpStatus}`
+            : 'STT request failed');
+
+        logger.error(
+          LogSource.NetworkRest,
+          'stt',
+          `STT API Failure - Called ${method}`,
+          errorPayload,
+          {
+            responseData: res,
+            httpStatus,
+            requestId,
+            startReqTs,
+            endReqTs,
+            latency,
+          },
+        );
+
+        return {
+          success: false,
+          httpStatus,
+          error: {
+            message,
+            code: errorPayload?.code,
+          },
+          data: res,
+        };
+      }
+
       logger.log(
         LogSource.NetworkRest,
         'stt',
         `STT API Success - Called ${method}`,
         {
           responseData: res,
+          httpStatus,
           requestId,
           startReqTs,
           endReqTs,
@@ -121,20 +183,9 @@ const useSTTAPI = (): IuseSTTAPI => {
         },
       );
 
-      // Check if response has error
-      if (res?.error?.message) {
-        return {
-          success: false,
-          error: {
-            message: res.error.message,
-            code: res.error.code,
-          },
-          data: res,
-        };
-      }
-
       return {
         success: true,
+        httpStatus,
         data: res,
       };
     } catch (error) {
@@ -167,7 +218,41 @@ const useSTTAPI = (): IuseSTTAPI => {
     botUid: number,
     translationConfig: LanguageTranslationConfig,
   ): Promise<STTAPIResponse> => {
-    return await apiCall('startv7', botUid, translationConfig);
+    const retryDelayMs = getStartRetryDelay(botUid);
+    let result: STTAPIResponse;
+
+    for (let attempt = 1; attempt <= STT_START_MAX_ATTEMPTS; attempt += 1) {
+      result = await apiCall('startv7', botUid, translationConfig);
+
+      if (
+        result.success ||
+        !shouldRetryStart(result) ||
+        attempt === STT_START_MAX_ATTEMPTS
+      ) {
+        return result;
+      }
+
+      logger.log(
+        LogSource.NetworkRest,
+        'stt',
+        'Retrying STT start after transient failure',
+        {
+          attempt,
+          maxAttempts: STT_START_MAX_ATTEMPTS,
+          retryDelayMs,
+          botUid,
+          httpStatus: result.httpStatus,
+          errorCode: result.error?.code,
+        },
+      );
+      await wait(retryDelayMs);
+    }
+
+    // The loop always returns, but keep the fallback explicit for type safety.
+    return {
+      success: false,
+      error: {message: 'STT start failed after retrying'},
+    };
   };
 
   const update = async (

package/template/src/subComponents/caption/useStreamMessageUtils.native.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import {useCaption} from './useCaption';
 import protoRoot from './proto/ptoto';
+import type {CaptionObj, TranscriptItem} from './useCaption';
+import type {LanguageType} from './utils';
 
 type StreamMessageCallback = (args: [number, Uint8Array]) => void;
 type FinalListType = {
@@ -17,25 +18,33 @@ type FinalTranslationListType = {
   };
 };
 
-const useStreamMessageUtils = (): {
+type StreamMessageUtilsOptions = {
+  setCaptionObj: React.Dispatch<React.SetStateAction<CaptionObj>>;
+  setMeetingTranscript: React.Dispatch<React.SetStateAction<TranscriptItem[]>>;
+  activeSpeakerRef: React.MutableRefObject<string>;
+  prevSpeakerRef: React.MutableRefObject<string>;
+  selectedTranslationLanguageRef: React.MutableRefObject<LanguageType | null>;
+};
+
+const useStreamMessageUtils = ({
+  setCaptionObj,
+  setMeetingTranscript,
+  activeSpeakerRef,
+  prevSpeakerRef,
+  selectedTranslationLanguageRef,
+}: StreamMessageUtilsOptions): {
   streamMessageCallback: StreamMessageCallback;
+  flushStreamMessageQueue: () => Promise<void>;
 } => {
-  const {
-    setCaptionObj,
-    setMeetingTranscript,
-    activeSpeakerRef,
-    prevSpeakerRef,
-    // Use ref instead of state to avoid stale closure issues
-    // The ref always has the current value, even in callbacks created at mount time
-    selectedTranslationLanguageRef,
-  } = useCaption();
-
-  let captionStartTime: number = 0;
-  const finalList: FinalListType = {};
-  const finalTranscriptList: FinalListType = {};
-  const finalTranslationList: FinalTranslationListType = {};
+  const captionStartTimeRef = React.useRef<number>(0);
+  const finalListRef = React.useRef<FinalListType>({});
+  const finalTranscriptListRef = React.useRef<FinalListType>({});
+  const finalTranslationListRef = React.useRef<FinalTranslationListType>({});
 
   const streamMessageCallback: StreamMessageCallback = args => {
+    const finalList = finalListRef.current;
+    const finalTranscriptList = finalTranscriptListRef.current;
+    const finalTranslationList = finalTranslationListRef.current;
     /* uid - bot which sends stream message in channel
        payload - stream message in Uint8Array format
       */
@@ -176,8 +185,8 @@ const useStreamMessageUtils = (): {
       } else {
         nonFinalText =
           word.text !== '.' ? nonFinalText + word.text : nonFinalText;
-        if (!captionStartTime) {
-          captionStartTime = performance.now();
+        if (!captionStartTimeRef.current) {
+          captionStartTimeRef.current = performance.now();
         }
       }
     }
@@ -186,11 +195,11 @@ const useStreamMessageUtils = (): {
       finalTranscriptList[textstream.uid].push(finalText);
       currentFinalText = finalText;
       // log info to show measure the duration of passes in which a sentence gets finalized
-      const duration = performance.now() - captionStartTime;
+      const duration = performance.now() - captionStartTimeRef.current;
       console.log(
         `stt-Time taken to finalize caption ${currentFinalText}: ${duration}ms`,
       );
-      captionStartTime = null; // Reset start time
+      captionStartTimeRef.current = 0; // Reset start time
     }
 
     /* Updating Meeting Transcript */
@@ -322,8 +331,14 @@ const useStreamMessageUtils = (): {
     console.groupEnd();
   };
 
+  const flushStreamMessageQueue = React.useCallback(async () => {
+    // Native stream-message processing is synchronous, so there is no queue
+    // left to drain when this callback returns.
+  }, []);
+
   return {
     streamMessageCallback,
+    flushStreamMessageQueue,
   };
 };
 

package/template/src/subComponents/caption/useStreamMessageUtils.ts

@@ -1,6 +1,8 @@
-import {useCaption} from './useCaption';
+import React from 'react';
 import protoRoot from './proto/ptoto';
 import PQueue from 'p-queue';
+import type {CaptionObj, TranscriptItem} from './useCaption';
+import type {LanguageType} from './utils';
 
 type StreamMessageCallback = (args: [number, Uint8Array]) => void;
 type FinalListType = {
@@ -17,27 +19,35 @@ type FinalTranslationListType = {
   };
 };
 
-const useStreamMessageUtils = (): {
+type StreamMessageUtilsOptions = {
+  setCaptionObj: React.Dispatch<React.SetStateAction<CaptionObj>>;
+  setMeetingTranscript: React.Dispatch<React.SetStateAction<TranscriptItem[]>>;
+  activeSpeakerRef: React.MutableRefObject<string>;
+  prevSpeakerRef: React.MutableRefObject<string>;
+  selectedTranslationLanguageRef: React.MutableRefObject<LanguageType | null>;
+};
+
+const useStreamMessageUtils = ({
+  setCaptionObj,
+  setMeetingTranscript,
+  activeSpeakerRef,
+  prevSpeakerRef,
+  selectedTranslationLanguageRef,
+}: StreamMessageUtilsOptions): {
   streamMessageCallback: StreamMessageCallback;
+  flushStreamMessageQueue: () => Promise<void>;
 } => {
-  const {
-    setCaptionObj,
-    setMeetingTranscript,
-    activeSpeakerRef,
-    prevSpeakerRef,
-    // Use ref instead of state to avoid stale closure issues
-    // The ref always has the current value, even in callbacks created at mount time
-    selectedTranslationLanguageRef,
-  } = useCaption();
-
-  let captionStartTime: number = 0;
-  const finalList: FinalListType = {};
-  const finalTranscriptList: FinalListType = {};
-  const finalTranslationList: FinalTranslationListType = {};
-  const queue = new PQueue({concurrency: 1});
+  const captionStartTimeRef = React.useRef<number>(0);
+  const finalListRef = React.useRef<FinalListType>({});
+  const finalTranscriptListRef = React.useRef<FinalListType>({});
+  const finalTranslationListRef = React.useRef<FinalTranslationListType>({});
+  const queue = React.useMemo(() => new PQueue({concurrency: 1}), []);
 
   const streamMessageCallback: StreamMessageCallback = args => {
     const queueCallback = (args1: [number, Uint8Array]) => {
+      const finalList = finalListRef.current;
+      const finalTranscriptList = finalTranscriptListRef.current;
+      const finalTranslationList = finalTranslationListRef.current;
       /* uid - bot which sends stream message in channel
        payload - stream message in Uint8Array format
       */
@@ -201,8 +211,8 @@ const useStreamMessageUtils = (): {
         } else {
           nonFinalText =
             word.text !== '.' ? nonFinalText + word.text : nonFinalText;
-          if (!captionStartTime) {
-            captionStartTime = performance.now();
+          if (!captionStartTimeRef.current) {
+            captionStartTimeRef.current = performance.now();
           }
         }
       }
@@ -212,11 +222,11 @@ const useStreamMessageUtils = (): {
         finalTranscriptList[textstream.uid].push(finalText);
         currentFinalText = finalText;
         // log info to show measure the duration of passes in which a sentence gets finalized
-        const duration = performance.now() - captionStartTime;
+        const duration = performance.now() - captionStartTimeRef.current;
         console.log(
           `stt-Time taken to finalize caption ${currentFinalText}: ${duration}ms`,
         );
-        captionStartTime = null; // Reset start time
+        captionStartTimeRef.current = 0; // Reset start time
       }
 
       /* Updating Meeting Transcript */
@@ -352,14 +362,21 @@ const useStreamMessageUtils = (): {
       // console.log('final List =>', finalList);
       // console.groupEnd();
     };
-    (async () => {
-      await queue.add(() => queueCallback(args));
-      console.log('stt- using pq queue');
-    })();
+    void queue
+      .add(() => queueCallback(args))
+      .then(() => console.log('stt- using pq queue'))
+      .catch(error =>
+        console.error('Failed to process STT stream message', error),
+      );
   };
 
+  const flushStreamMessageQueue = React.useCallback(async () => {
+    await queue.onIdle();
+  }, [queue]);
+
   return {
     streamMessageCallback,
+    flushStreamMessageQueue,
   };
 };
 

package/template/src/subComponents/caption/useTranscriptDownload.native.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import {formatTranscriptContent} from './utils';
 import {useCaption} from './useCaption';
 import RNFetchBlob from 'rn-fetch-blob';
@@ -7,87 +8,76 @@ import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 const useTranscriptDownload = (): {
   downloadTranscript: () => Promise<string | null>;
+  isTranscriptPreparing: boolean;
 } => {
-  const {meetingTranscript} = useCaption();
+  const {flushPendingTranscript, getMeetingTranscript} = useCaption();
+  const [isTranscriptPreparing, setIsTranscriptPreparing] =
+    React.useState(false);
   const {defaultContent} = useContent();
   const {
     data: {meetingTitle},
   } = useRoomInfo();
 
-  const downloadTranscript = (): Promise<string | null> => {
-    return new Promise((resolve, reject) => {
-      try {
-        logger.log(
-          LogSource.Internals,
-          'TRANSCRIPT',
-          'Trying to download transcript',
-        );
-        const [finalContent, fileName] = formatTranscriptContent(
-          meetingTranscript,
-          meetingTitle,
-          defaultContent,
-        );
+  const downloadTranscript = async (): Promise<string | null> => {
+    if (isTranscriptPreparing) {
+      return null;
+    }
 
-        // get path to the Documents directory, don't have access to Downloads folder so saving in documents 1
-        const documentsDir = RNFetchBlob.fs.dirs.DocumentDir;
+    setIsTranscriptPreparing(true);
+    try {
+      logger.log(
+        LogSource.Internals,
+        'TRANSCRIPT',
+        'Trying to download transcript',
+      );
+      await flushPendingTranscript();
+      const transcriptSnapshot = getMeetingTranscript();
+      const [finalContent, fileName] = formatTranscriptContent(
+        transcriptSnapshot,
+        meetingTitle,
+        defaultContent,
+      );
 
-        // setting file path
-        const filePath = `${documentsDir}/${fileName}`;
+      // get path to the Documents directory, don't have access to Downloads folder so saving in documents 1
+      const documentsDir = RNFetchBlob.fs.dirs.DocumentDir;
 
-        // Writing content to the file
-        RNFetchBlob.fs
-          .writeFile(filePath, finalContent, 'utf8')
-          .then(() => {
-            logger.warn(
-              LogSource.Internals,
-              'TRANSCRIPT',
-              'Content downloaded successfully on native',
-            );
-            // need to show the preview of downloaded file
-            Share.open({url: `file://${filePath}`, type: 'text/plain'})
-              .then(res => {
-                logger.warn(
-                  LogSource.Internals,
-                  'TRANSCRIPT',
-                  'File shared successfully:',
-                  res,
-                );
-                resolve(filePath);
-              })
-              .catch(error => {
-                logger.error(
-                  LogSource.Internals,
-                  'TRANSCRIPT',
-                  'Error sharing file:',
-                  error,
-                );
-                reject(error);
-              });
+      // setting file path
+      const filePath = `${documentsDir}/${fileName}`;
 
-            resolve(filePath);
-          })
-          .catch(error => {
-            logger.error(
-              LogSource.Internals,
-              'TRANSCRIPT',
-              'Error downloading content:',
-              error,
-            );
-            reject(error);
-          });
-      } catch (error) {
-        logger.error(
-          LogSource.Internals,
-          'TRANSCRIPT',
-          'Error downloading content:',
-          error,
-        );
-        reject(error);
-      }
-    });
+      // Writing content to the file
+      await RNFetchBlob.fs.writeFile(filePath, finalContent, 'utf8');
+      logger.warn(
+        LogSource.Internals,
+        'TRANSCRIPT',
+        'Content downloaded successfully on native',
+      );
+
+      // need to show the preview of downloaded file
+      const result = await Share.open({
+        url: `file://${filePath}`,
+        type: 'text/plain',
+      });
+      logger.warn(
+        LogSource.Internals,
+        'TRANSCRIPT',
+        'File shared successfully:',
+        result,
+      );
+      return filePath;
+    } catch (error) {
+      logger.error(
+        LogSource.Internals,
+        'TRANSCRIPT',
+        'Error downloading content:',
+        error,
+      );
+      throw error;
+    } finally {
+      setIsTranscriptPreparing(false);
+    }
   };
 
-  return {downloadTranscript};
+  return {downloadTranscript, isTranscriptPreparing};
 };
 
 export default useTranscriptDownload;

package/template/src/subComponents/caption/useTranscriptDownload.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import {formatTranscriptContent} from './utils';
 import {useCaption} from './useCaption';
 import {useRoomInfo, useContent} from 'customization-api';
@@ -5,58 +6,68 @@ import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 const useTranscriptDownload = (): {
   downloadTranscript: () => Promise<string | null>;
+  isTranscriptPreparing: boolean;
 } => {
-  const {meetingTranscript} = useCaption();
+  const {flushPendingTranscript, getMeetingTranscript} = useCaption();
+  const [isTranscriptPreparing, setIsTranscriptPreparing] =
+    React.useState(false);
 
   const {defaultContent} = useContent();
   const {
     data: {meetingTitle},
   } = useRoomInfo();
 
-  const downloadTranscript = (): Promise<string | null> => {
-    return new Promise((resolve, reject) => {
-      try {
-        const [finalContent, fileName] = formatTranscriptContent(
-          meetingTranscript,
-          meetingTitle,
-          defaultContent,
-        );
-
-        // blob with required content
-        const blob = new Blob([finalContent], {type: 'text/plain'});
-
-        // url to download content
-        const downloadUrl = URL.createObjectURL(blob);
-
-        // anchor ele to download
-        const anchor = document.createElement('a');
-        anchor.href = downloadUrl;
-        anchor.download = fileName;
-
-        // click to dowload the file
-        anchor.click();
-
-        // revoke download url
-        URL.revokeObjectURL(downloadUrl);
-        logger.debug(
-          LogSource.Internals,
-          'TRANSCRIPT',
-          'content donwloaded successfully',
-        );
-        resolve(downloadUrl);
-      } catch (error) {
-        logger.error(
-          LogSource.Internals,
-          'TRANSCRIPT',
-          'failed to download content',
-          error,
-        );
-        reject(error);
-      }
-    });
+  const downloadTranscript = async (): Promise<string | null> => {
+    if (isTranscriptPreparing) {
+      return null;
+    }
+
+    setIsTranscriptPreparing(true);
+    try {
+      await flushPendingTranscript();
+      const transcriptSnapshot = getMeetingTranscript();
+      const [finalContent, fileName] = formatTranscriptContent(
+        transcriptSnapshot,
+        meetingTitle,
+        defaultContent,
+      );
+
+      // blob with required content
+      const blob = new Blob([finalContent], {type: 'text/plain'});
+
+      // url to download content
+      const downloadUrl = URL.createObjectURL(blob);
+
+      // anchor ele to download
+      const anchor = document.createElement('a');
+      anchor.href = downloadUrl;
+      anchor.download = fileName;
+
+      // click to dowload the file
+      anchor.click();
+
+      // revoke download url
+      URL.revokeObjectURL(downloadUrl);
+      logger.debug(
+        LogSource.Internals,
+        'TRANSCRIPT',
+        'content downloaded successfully',
+      );
+      return downloadUrl;
+    } catch (error) {
+      logger.error(
+        LogSource.Internals,
+        'TRANSCRIPT',
+        'failed to download content',
+        error,
+      );
+      throw error;
+    } finally {
+      setIsTranscriptPreparing(false);
+    }
   };
 
-  return {downloadTranscript};
+  return {downloadTranscript, isTranscriptPreparing};
 };
 
 export default useTranscriptDownload;

package/template/src/utils/useSpeechToText.ts

@@ -3,7 +3,6 @@ import {
   SidePanelType,
   customEvents,
   useContent,
-  useRtc,
   useSTTAPI,
   useSidePanel,
 } from 'customization-api';
@@ -13,13 +12,6 @@ import {
   useCaption,
 } from '../subComponents/caption/useCaption';
 import {LanguageType} from '../subComponents/caption/utils';
-import useStreamMessageUtils from '../subComponents/caption/useStreamMessageUtils';
-import {
-  NativeStreamMessageArgs,
-  StreamMessageArgs,
-  WebStreamMessageArgs,
-} from '../subComponents/caption/Caption';
-import {isWebInternal} from './common';
 
 const useSpeechToText = () => {
   const {
@@ -29,8 +21,6 @@ const useSpeechToText = () => {
     captionObj: captionData,
     prevSpeakerRef,
     activeSpeakerRef,
-    isSTTListenerAdded,
-    setIsSTTListenerAdded,
     startSTTBotSession,
     updateSTTBotSession,
     stopSTTBotSession,
@@ -42,8 +32,6 @@ const useSpeechToText = () => {
 
   // const isAuthorizedSTTUserRef = useRef(isAuthorizedSTTUser);
   const defaultContentRef = useRef(defaultContent);
-  const {RtcEngineUnsafe} = useRtc();
-  const {streamMessageCallback} = useStreamMessageUtils();
 
   const showTranscriptPanel = (show: boolean) => {
     show
@@ -97,23 +85,9 @@ const useSpeechToText = () => {
     return await stopSTTBotSession();
   };
 
-  const addStreamMessageListener = () => {
-    !isSTTListenerAdded &&
-      RtcEngineUnsafe.addListener(
-        'onStreamMessage',
-        handleStreamMessageCallback,
-      );
-  };
-  const handleStreamMessageCallback = (...args: StreamMessageArgs) => {
-    setIsSTTListenerAdded(true);
-    if (isWebInternal()) {
-      const [uid, data] = args as WebStreamMessageArgs;
-      streamMessageCallback([uid, data]);
-    } else {
-      const [, uid, , data] = args as NativeStreamMessageArgs;
-      streamMessageCallback([uid, data]);
-    }
-  };
+  // Kept for customization API compatibility. CaptionProvider owns the single
+  // meeting-lifetime listener now, so callers no longer need to register one.
+  const addStreamMessageListener = () => {};
 
   const changeSpeakingLanguage = async (
     translateConfig: LanguageTranslationConfig,