Fixed issue auto start stt

template/src/components/ChatContext.ts

@@ -16,7 +16,6 @@ import {createContext, SetStateAction} from 'react';
 import {ChatMessageType, Reaction} from './chat-messages/useChatMessages';
 import {createHook} from 'customization-implementation';
 
-
 export interface ChatBubbleProps {
   isLocal: boolean;
   message: string;
@@ -67,6 +66,7 @@ export enum messageActionType {
 }
 
 export interface RtmContextInterface {
+  isInitialQueueCompleted: boolean;
   hasUserJoinedRTM: boolean;
   rtmInitTimstamp: number;
   engine: RtmEngine;

template/src/components/EventsConfigure.tsx

@@ -58,9 +58,17 @@ import {logger, LogSource} from '../logger/AppBuilderLogger';
 interface Props {
   children: React.ReactNode;
   callActive: boolean;
+  sttAutoStarted: boolean;
+  setSttAutoStarted: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const EventsConfigure: React.FC<Props> = ({callActive, children}) => {
+const EventsConfigure: React.FC<Props> = ({
+  callActive,
+  children,
+  setSttAutoStarted,
+  sttAutoStarted,
+}) => {
+  const isSTTAlreadyActiveRef = useRef(undefined);
   // mute user audio
   const hostMutedUserAudioToastHeadingTT = useString<I18nMuteType>(
     hostMutedUserToastHeading,
@@ -257,27 +265,26 @@ const EventsConfigure: React.FC<Props> = ({callActive, children}) => {
     permissionStatusRef.current = permissionStatus;
   }, [permissionStatus]);
 
-  const {hasUserJoinedRTM} = useContext(ChatContext);
+  const {hasUserJoinedRTM, isInitialQueueCompleted} = useContext(ChatContext);
   const {startSpeechToText} = useSpeechToText();
-  const [autoStartCompleted, setAutoStartCompleted] = useState(false);
-
   //auto start stt
   useEffect(() => {
     if (
       $config.ENABLE_CAPTION &&
       $config.STT_AUTO_START &&
       callActive &&
       hasUserJoinedRTM &&
-      !autoStartCompleted
+      isInitialQueueCompleted &&
+      !sttAutoStarted
     ) {
       //host will start the caption
-      if (isHost && roomId?.host) {
+      if (isHost && roomId?.host && !isSTTAlreadyActiveRef.current) {
         logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START triggered');
         //start with default language
         startSpeechToText(['en-US'])
           .then(() => {
             logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START success');
-            setAutoStartCompleted(true);
+            setSttAutoStarted(true);
           })
           .catch(err => {
             logger.log(
@@ -286,11 +293,28 @@ const EventsConfigure: React.FC<Props> = ({callActive, children}) => {
               'STT_AUTO_START failed',
               err,
             );
-            setAutoStartCompleted(false);
+            setSttAutoStarted(false);
           });
       }
+
+      if (isHost && roomId?.host && isSTTAlreadyActiveRef.current) {
+        logger.log(
+          LogSource.Internals,
+          'STT',
+          'STT_AUTO_START triggered already by some other host success',
+        );
+        setSttAutoStarted(true);
+      }
     }
-  }, [callActive, isHost, hasUserJoinedRTM, roomId, autoStartCompleted]);
+  }, [
+    callActive,
+    isHost,
+    hasUserJoinedRTM,
+    roomId,
+    sttAutoStarted,
+    isInitialQueueCompleted,
+    isSTTAlreadyActiveRef.current,
+  ]);
 
   useEffect(() => {
     //user joined event listener
@@ -520,6 +544,11 @@ const EventsConfigure: React.FC<Props> = ({callActive, children}) => {
 
     events.on(EventNames.STT_ACTIVE, data => {
       const payload = JSON.parse(data?.payload);
+      if (payload.active) {
+        isSTTAlreadyActiveRef.current = true;
+      } else {
+        isSTTAlreadyActiveRef.current = false;
+      }
       setRoomInfo(prev => {
         return {
           ...prev,

template/src/components/RTMConfigure.tsx

@@ -93,6 +93,7 @@ const RtmConfigure = (props: any) => {
   }, [defaultContent]);
 
   const [hasUserJoinedRTM, setHasUserJoinedRTM] = useState<boolean>(false);
+  const [isInitialQueueCompleted, setIsInitialQueueCompleted] = useState(false);
   const [onlineUsersCount, setTotalOnlineUsers] = useState<number>(0);
 
   let engine = useRef<RtmEngine>(null!);
@@ -181,6 +182,7 @@ const RtmConfigure = (props: any) => {
       });
       setHasUserJoinedRTM(true);
       await runQueuedEvents();
+      setIsInitialQueueCompleted(true);
       logger.log(
         LogSource.AgoraSDK,
         'Log',
@@ -811,6 +813,7 @@ const RtmConfigure = (props: any) => {
   return (
     <ChatContext.Provider
       value={{
+        isInitialQueueCompleted,
         rtmInitTimstamp,
         hasUserJoinedRTM,
         engine: engine.current,

template/src/pages/VideoCall.tsx

@@ -150,6 +150,7 @@ const VideoCall: React.FC = () => {
   const [queryComplete, setQueryComplete] = useState(false);
   const [waitingRoomAttendeeJoined, setWaitingRoomAttendeeJoined] =
     useState(false);
+  const [sttAutoStarted, setSttAutoStarted] = useState(false);
 
   const {phrase} = useParams<{phrase: string}>();
 
@@ -435,6 +436,10 @@ const VideoCall: React.FC = () => {
                                         <CaptionProvider>
                                           <WaitingRoomProvider>
                                             <EventsConfigure
+                                              setSttAutoStarted={
+                                                setSttAutoStarted
+                                              }
+                                              sttAutoStarted={sttAutoStarted}
                                               callActive={callActive}>
                                               <ScreenshareConfigure
                                                 isRecordingActive={