agora-appbuilder-core 4.0.29-beta-23 → 4.0.29-beta-25

package/package.json

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

package/template/agora-rn-uikit/src/Rtc/Create.tsx

@@ -194,9 +194,9 @@ const Create = ({
       mode === ChannelProfileType.ChannelProfileLiveBroadcasting &&
       rtcProps?.role === ClientRoleType.ClientRoleAudience
     ) {
-      enableVideoAndAudioWithDisabledState();
+      await enableVideoAndAudioWithDisabledState();
     } else {
-      enableVideoAndAudioWithEnabledState();
+      await enableVideoAndAudioWithEnabledState();
     }
   };
 

package/template/agora-rn-uikit/src/Rtc/Join.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useContext, useRef} from 'react';
+import React, {useEffect, useContext, useRef, useState} from 'react';
 import {IRtcEngine} from 'react-native-agora';
 import {ContentStateInterface} from '../Contexts/RtcContext';
 import {DispatchType} from '../Contexts/DispatchContext';
@@ -14,7 +14,7 @@ const Join: React.FC<{
   tracksReady: boolean;
   preventJoin?: boolean;
 }> = ({children, precall, engineRef, uidState, dispatch, tracksReady}) => {
-  let joinState = useRef(false);
+  const [joinState, setJoinState] = useState(false);
   const {rtcProps} = useContext(PropsContext);
 
   const audioRoom = rtcProps?.audioRoom || false;
@@ -24,12 +24,12 @@ const Join: React.FC<{
   //   : null;
 
   useEffect(() => {
-    if (joinState.current && tracksReady && Platform.OS === 'web') {
+    if (joinState && tracksReady && Platform.OS === 'web') {
       //@ts-ignore
       engineRef.current.publish();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tracksReady]);
+  }, [tracksReady, joinState]);
 
   useEffect(() => {
     if (rtcProps?.preventJoin) {
@@ -41,7 +41,7 @@ const Join: React.FC<{
       try {
         console.log('Leaving channel');
         engine.leaveChannel();
-        joinState.current = false;
+        setJoinState(false);
       } catch (err) {
         console.error('Cannot leave the channel:', err);
       }
@@ -118,9 +118,9 @@ const Join: React.FC<{
     }
     async function init() {
       if (!precall) {
-        if (!joinState.current) {
+        if (!joinState) {
           await join();
-          joinState.current = true;
+          setJoinState(true);
         } else {
           await leave();
           await join();

package/template/customization-api/sub-components.ts

@@ -85,3 +85,4 @@ export {default as TranscriptPanel} from '../src/subComponents/caption/Transcrip
 export type {TranscriptProps} from '../src/subComponents/caption/Transcript';
 export {default as CaptionPanel} from '../src/subComponents/caption/CaptionContainer';
 export {default as VBPreview} from '../src/components/virtual-background/VideoPreview';
+export {default as Toast} from '../react-native-toast-message';

package/template/customization-api/utils.ts

@@ -43,7 +43,6 @@ export {useString} from '../src/utils/useString';
 export type {LanguageType} from '../src/subComponents/caption/utils';
 export {default as useSpeechToText} from '../src/utils/useSpeechToText';
 export {isMobileUA} from '../src/utils/common';
-export {getSessionId} from '../src/utils/common';
 export {default as ThemeConfig} from '../src/theme';
 export {default as hexadecimalTransparency} from '../src/utils/hexadecimalTransparency';
 export {useFullScreen} from '../src/utils/useFullScreen';

package/template/defaultConfig.js

@@ -76,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.0.28',
-  CORE_VERSION: '4.0.28',
+  CLI_VERSION: '3.0.29-beta-24',
+  CORE_VERSION: '4.0.29-beta-24',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/atoms/ActionMenu.tsx

@@ -9,6 +9,8 @@ import {
   TouchableOpacity,
   ViewStyle,
   useWindowDimensions,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
 import React, {SetStateAction, useState} from 'react';
 
@@ -32,6 +34,7 @@ export interface ActionMenuItem {
   iconColor: string;
   textColor: string;
   title: string;
+  titleStyle?: StyleProp<TextStyle>;
   label?: string;
   toggleStatus?: boolean;
   onPress: () => void;
@@ -97,6 +100,7 @@ const ActionMenu = (props: ActionMenuProps) => {
         onHoverCallback = undefined,
         onHoverContent = undefined,
         iconSize = 20,
+        titleStyle = {},
       } = item;
       return (
         <PlatformWrapper key={props.from + '_' + title + index}>
@@ -175,7 +179,11 @@ const ActionMenu = (props: ActionMenuProps) => {
                     )}
                   </View>
                   <Text
-                    style={[styles.text, textColor ? {color: textColor} : {}]}>
+                    style={[
+                      styles.text,
+                      titleStyle,
+                      textColor ? {color: textColor} : {},
+                    ]}>
                     {label || title}
                   </Text>
                   {toggleStatus !== undefined && toggleStatus !== null ? (

package/template/src/atoms/Checkbox.tsx

@@ -6,6 +6,7 @@ import {
   Platform,
   StyleSheet,
   TextStyle,
+  ViewStyle,
 } from 'react-native';
 
 import ThemeConfig from '../theme';
@@ -17,6 +18,9 @@ interface CheckboxProps {
   onChange: (checked: boolean) => void;
   labelStye?: TextStyle;
   disabled?: boolean;
+  containerStyle?: ViewStyle;
+  checkBoxStyle?: ViewStyle;
+  tickColor?: string;
 }
 
 const Checkbox: React.FC<CheckboxProps> = ({
@@ -25,6 +29,9 @@ const Checkbox: React.FC<CheckboxProps> = ({
   onChange,
   disabled = false,
   labelStye = {},
+  containerStyle = {},
+  checkBoxStyle = {},
+  tickColor = $config.FONT_COLOR,
 }) => {
   const [isChecked, setIsChecked] = useState(checked);
 
@@ -40,15 +47,21 @@ const Checkbox: React.FC<CheckboxProps> = ({
   };
 
   return (
-    <TouchableOpacity onPress={handleCheckboxToggle} style={styles.container}>
+    <TouchableOpacity
+      onPress={handleCheckboxToggle}
+      style={(styles.container, containerStyle)}>
       <View
-        style={[styles.checkboxContainer, isChecked && styles.fillSelected]}>
+        style={[
+          styles.checkboxContainer,
+          checkBoxStyle,
+          isChecked && styles.fillSelected,
+        ]}>
         {isChecked && (
           <ImageIcon
             iconType="plain"
             name={'tick'}
             iconSize={8}
-            tintColor={$config.FONT_COLOR}
+            tintColor={tickColor}
           />
         )}
       </View>
@@ -76,6 +89,7 @@ const styles = StyleSheet.create({
     borderColor: $config.SEMANTIC_NEUTRAL,
     justifyContent: 'center',
     alignItems: 'center',
+    borderRadius: 1,
   },
   checkIcon: {
     position: 'absolute',

package/template/src/atoms/TertiaryButton.tsx

@@ -31,6 +31,7 @@ const TertiaryButton = (props: ButtonProps) => {
     iconName,
     iconSize = 26,
     iconColor = $config.PRIMARY_ACTION_TEXT_COLOR,
+    disabled = false,
     ...rest
   } = props;
   const [isHovered, setIsHovered] = useState(false);
@@ -38,16 +39,17 @@ const TertiaryButton = (props: ButtonProps) => {
   return (
     <PlatformWrapper setIsHovered={setIsHovered}>
       <TouchableOpacity
-        ref={(ref) => props?.setRef && props.setRef(ref)}
+        ref={ref => props?.setRef && props.setRef(ref)}
         style={[
           styles.container,
-          isHovered
+          isHovered && !disabled
             ? {
                 backgroundColor:
                   $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['15%'],
               }
             : {},
           props?.containerStyle,
+          disabled ? styles.disabledContainer : {},
         ]}
         {...rest}>
         <View style={styles.flexRow}>
@@ -57,11 +59,18 @@ const TertiaryButton = (props: ButtonProps) => {
                 iconSize={iconSize}
                 iconType="plain"
                 name={iconName}
-                tintColor={iconColor}
+                tintColor={disabled ? $config.SEMANTIC_NEUTRAL : iconColor}
               />
             </View>
           )}
-          <Text style={[styles.text, props?.textStyle]}>{text}</Text>
+          <Text
+            style={[
+              styles.text,
+              props?.textStyle,
+              disabled ? styles.disabledText : {},
+            ]}>
+            {text}
+          </Text>
         </View>
       </TouchableOpacity>
     </PlatformWrapper>
@@ -105,4 +114,11 @@ const styles = StyleSheet.create({
     fontSize: ThemeConfig.FontSize.small,
     fontWeight: '600',
   },
+  disabledContainer: {
+    borderColor: $config.SEMANTIC_NEUTRAL,
+    cursor: 'default',
+  },
+  disabledText: {
+    color: $config.SEMANTIC_NEUTRAL,
+  },
 });

package/template/src/atoms/Toggle.tsx

@@ -6,10 +6,16 @@ interface SwitchProps {
   isEnabled: boolean;
   disabled?: boolean;
   toggleSwitch: (isEnabled: boolean) => void;
+  circleColor?: string;
 }
 
 const Toggle = (props: SwitchProps) => {
-  const {isEnabled, toggleSwitch, disabled = false} = props;
+  const {
+    isEnabled,
+    toggleSwitch,
+    disabled = false,
+    circleColor = $config.CARD_LAYER_1_COLOR,
+  } = props;
   return (
     <View>
       <CustomSwitch
@@ -21,8 +27,8 @@ const Toggle = (props: SwitchProps) => {
         disabled={false}
         backgroundActive={$config.PRIMARY_ACTION_BRAND_COLOR}
         backgroundInactive={$config.SEMANTIC_NEUTRAL}
-        circleActiveColor={$config.CARD_LAYER_1_COLOR}
-        circleInActiveColor={$config.CARD_LAYER_1_COLOR}
+        circleActiveColor={circleColor}
+        circleInActiveColor={circleColor}
         // renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.)
         changeValueImmediately={true} // if rendering inside circle, change state immediately or wait for animation to complete
         innerCircleStyle={{

package/template/src/auth/AuthProvider.tsx

@@ -309,6 +309,7 @@ const AuthProvider = (props: AuthProviderProps) => {
         context: {
           headers: {
             'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
           },
         },
       });
@@ -332,6 +333,11 @@ const AuthProvider = (props: AuthProviderProps) => {
         'user_details',
         'API user details query failed. User is un-authenticated. Will Login in the user',
         {
+          networkError: {
+            name: error?.networkError?.name,
+            code: error?.networkError?.result?.error?.code,
+            message: error?.networkError?.result?.error?.message,
+          },
           error,
           startReqTs,
           endRequestTs,
@@ -522,6 +528,7 @@ const AuthProvider = (props: AuthProviderProps) => {
         credentials: 'include',
         headers: {
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
       })
         .then(response => response.json())

package/template/src/auth/useIDPAuth.electron.tsx

@@ -36,6 +36,7 @@ export const useIDPAuth = () => {
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
             'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
           },
         })
           .then(response => response.json())

package/template/src/auth/useIDPAuth.native.tsx

@@ -33,6 +33,7 @@ export const useIDPAuth = () => {
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
             'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
           },
         })
           .then(response => response.json())

package/template/src/auth/useIDPAuth.tsx

@@ -31,6 +31,7 @@ export const useIDPAuth = () => {
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
             'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
           },
         })
           .then(response => response.json())

package/template/src/auth/useTokenAuth.tsx

@@ -57,6 +57,7 @@ const useTokenAuth = () => {
           authorization: store?.token ? `Bearer ${store.token}` : '',
           'X-Platform-ID': getPlatformId(),
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
       })
         .then(response => response.json())
@@ -213,6 +214,7 @@ const useTokenAuth = () => {
                     ? `Bearer ${tokenRef.current}`
                     : '',
                   'X-Request-Id': requestId,
+                  'X-Session-Id': logger.getSessionId(),
                 },
               },
         )

package/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;

package/template/src/components/CustomSidePanel.tsx

@@ -65,7 +65,7 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
       {showHeader && (
         <CustomSidePanelHeader name={name} title={title} onClose={onClose} />
       )}
-      <ScrollView style={[style.bodyContainer]}>
+      <ScrollView contentContainerStyle={[style.bodyContainer]}>
         {CustomSidePanelContent ? <CustomSidePanelContent /> : <></>}
       </ScrollView>
     </View>
@@ -75,7 +75,6 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
 const style = StyleSheet.create({
   bodyContainer: {
     flex: 1,
-    padding: 20,
   },
 });
 

package/template/src/components/EventsConfigure.tsx

@@ -54,13 +54,23 @@ import {
 import {useString} from '../utils/useString';
 import useEndCall from '../utils/useEndCall';
 import {logger, LogSource} from '../logger/AppBuilderLogger';
+import {useIsRecordingBot} from '../subComponents/recording/useIsRecordingBot';
 
 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 {isRecordingBot} = useIsRecordingBot();
+  const isSTTAlreadyActiveRef = useRef(undefined);
   // mute user audio
   const hostMutedUserAudioToastHeadingTT = useString<I18nMuteType>(
     hostMutedUserToastHeading,
@@ -257,40 +267,60 @@ 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 (
+      !isRecordingBot &&
       $config.ENABLE_CAPTION &&
       $config.STT_AUTO_START &&
       callActive &&
       hasUserJoinedRTM &&
-      !autoStartCompleted
+      isInitialQueueCompleted &&
+      !sttAutoStarted
     ) {
       //host will start the caption
-      if (isHost && roomId?.host) {
-        logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START triggered');
+      if (isHost && roomId?.host && !isSTTAlreadyActiveRef.current) {
+        logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START triggered', {
+          uidWhoTriggered: localUid,
+        });
         //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(
               LogSource.Internals,
-              'RECORDING',
+              'STT',
               'STT_AUTO_START failed',
               err,
             );
-            setAutoStartCompleted(false);
+            setSttAutoStarted(false);
           });
       }
+
+      if (isHost && roomId?.host && isSTTAlreadyActiveRef.current) {
+        logger.log(
+          LogSource.Internals,
+          'STT',
+          'STT_AUTO_START already triggered by some other host',
+        );
+        setSttAutoStarted(true);
+      }
     }
-  }, [callActive, isHost, hasUserJoinedRTM, roomId, autoStartCompleted]);
+  }, [
+    isRecordingBot,
+    callActive,
+    isHost,
+    hasUserJoinedRTM,
+    roomId,
+    sttAutoStarted,
+    isInitialQueueCompleted,
+    isSTTAlreadyActiveRef.current,
+  ]);
 
   useEffect(() => {
     //user joined event listener
@@ -520,6 +550,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,

package/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,

package/template/src/components/common/Error.tsx

@@ -16,6 +16,15 @@ import Error from '../../subComponents/Error';
 type ErrorType = {
   name: string;
   message: string;
+  networkError?: {
+    name?: string;
+    result?: {
+      error?: {
+        code?: number;
+        message?: string;
+      };
+    };
+  };
 };
 type ErrorContextType = {
   error: ErrorType | undefined;
@@ -46,12 +55,17 @@ const ErrorProvider = (props: {children: React.ReactNode}) => {
 const CommonError: React.FC = () => {
   const {error} = useContext(ErrorContext);
   useEffect(() => {
-    if (error?.name || error?.message) {
+    if (
+      error?.networkError?.name ||
+      error?.networkError?.result?.error?.message ||
+      error?.name ||
+      error?.message
+    ) {
       Toast.show({
         leadingIconName: 'alert',
         type: 'error',
-        text1: error.name,
-        text2: error.message,
+        text1: error?.networkError?.name || error.name,
+        text2: error?.networkError?.result?.error?.message || error.message,
         visibilityTime: 1000 * 10,
         primaryBtn: null,
         secondaryBtn: null,

package/template/src/components/popups/InvitePopup.tsx

@@ -37,6 +37,7 @@ import {
   invitePopupHeading,
 } from '../../language/default-labels/videoCallScreenLabels';
 import {cancelText} from '../../language/default-labels/commonLabels';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
 
 const InvitePopup = () => {
   const {setShowInvitePopup, showInvitePopup} = useVideoCall();
@@ -47,6 +48,21 @@ const InvitePopup = () => {
   const getMeeting = useGetMeetingPhrase();
   useEffect(() => {
     getMeeting(phrase).catch(error => {
+      logger.error(
+        LogSource.Internals,
+        'GET_MEETING_PHRASE',
+        'unable to fetch meeting details',
+        error,
+        {
+          networkError: {
+            name: error?.networkError?.name,
+            //@ts-ignore
+            code: error?.networkError?.result?.error?.code,
+            //@ts-ignore
+            message: error?.networkError?.result?.error?.message,
+          },
+        },
+      );
       setGlobalErrorMessage(error);
     });
   }, [phrase]);

package/template/src/components/useUserPreference.tsx

@@ -116,6 +116,7 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
           context: {
             headers: {
               'X-Request-Id': requestId,
+              'X-Session-Id': logger.getSessionId(),
             },
           },
           variables: {
@@ -145,6 +146,13 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
               'ERROR, could not save the name',
               error,
               {
+                networkError: {
+                  name: error?.networkError?.name,
+                  //@ts-ignore
+                  code: error?.networkError?.result?.error?.code,
+                  //@ts-ignore
+                  message: error?.networkError?.result?.error?.message,
+                },
                 startReqTs,
                 endReqTs,
                 latency: endReqTs - startReqTs,
@@ -160,6 +168,13 @@ const UserPreferenceProvider = (props: {children: React.ReactNode}) => {
           'ERROR, could not save the name',
           error,
           {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
             startReqTs,
             endReqTs,
             latency: endReqTs - startReqTs,

package/template/src/components/whiteboard/WhiteboardToolBox.tsx

@@ -359,6 +359,7 @@ const WhiteboardToolBox = ({whiteboardRoom}) => {
           myHeaders2.append('Content-Type', 'application/json');
           myHeaders2.append('Authorization', `Bearer ${store?.token}`);
           myHeaders2.append('X-Request-Id', requestId);
+          myHeaders2.append('X-Session-Id', logger.getSessionId());
 
           const body = JSON.stringify({
             resource_url: url,
@@ -498,6 +499,7 @@ const WhiteboardToolBox = ({whiteboardRoom}) => {
           myHeaders2.append('Content-Type', 'application/json');
           myHeaders2.append('Authorization', `Bearer ${store?.token}`);
           myHeaders2.append('X-Request-Id', requestId);
+          myHeaders2.append('X-Session-Id', logger.getSessionId());
           const body = JSON.stringify({
             resource_url: url,
           });
@@ -624,6 +626,7 @@ const WhiteboardToolBox = ({whiteboardRoom}) => {
           headers: {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
             'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
           },
         })
           .then(async res => {

package/template/src/components/whiteboard/WhiteboardWidget.tsx

@@ -148,6 +148,7 @@ const WhiteboardWidget = ({whiteboardRoom}) => {
       myHeaders2.append('Content-Type', 'application/json');
       myHeaders2.append('Authorization', `Bearer ${store?.token}`);
       myHeaders2.append('X-Request-Id', requestId);
+      myHeaders2.append('X-Session-Id', logger.getSessionId());
       const body = JSON.stringify({
         room_uuid: room_uuid,
         path: '/init',

package/template/src/pages/Create.tsx

@@ -212,6 +212,15 @@ const Create = () => {
           'CREATE_MEETING',
           'There was error while creating meeting',
           error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+          },
         );
         if (
           createRoomErrorToastHeadingText ||

package/template/src/pages/Join.tsx

@@ -130,6 +130,21 @@ const Join = () => {
         history.push(phrase);
       })
       .catch(error => {
+        logger.error(
+          LogSource.Internals,
+          'JOIN_MEETING',
+          'Error on join room page',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+          },
+        );
         const isInvalidUrl =
           error?.message.toLowerCase().trim() === 'invalid passphrase' || false;
         Toast.show({

package/template/src/pages/VideoCall.tsx

@@ -150,6 +150,8 @@ const VideoCall: React.FC = () => {
   const [queryComplete, setQueryComplete] = useState(false);
   const [waitingRoomAttendeeJoined, setWaitingRoomAttendeeJoined] =
     useState(false);
+  const [sttAutoStarted, setSttAutoStarted] = useState(false);
+  const [recordingAutoStarted, setRecordingAutoStarted] = useState(false);
 
   const {phrase} = useParams<{phrase: string}>();
 
@@ -249,6 +251,21 @@ const VideoCall: React.FC = () => {
       useJoin(phrase, RoomInfoDefaultValue.roomPreference)
         .then(() => {})
         .catch(error => {
+          logger.error(
+            LogSource.Internals,
+            'JOIN_MEETING',
+            'Join channel error',
+            error,
+            {
+              networkError: {
+                name: error?.networkError?.name,
+                //@ts-ignore
+                code: error?.networkError?.result?.error?.code,
+                //@ts-ignore
+                message: error?.networkError?.result?.error?.message,
+              },
+            },
+          );
           setGlobalErrorMessage(error);
           history.push('/');
         });
@@ -287,6 +304,21 @@ const VideoCall: React.FC = () => {
       setQueryComplete(false);
       currentMeetingPhrase.current = sdkMeetingPath;
       useJoin(sdkMeetingPhrase, preference).catch(error => {
+        logger.error(
+          LogSource.Internals,
+          'JOIN_MEETING',
+          'Join channel error',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+          },
+        );
         setGlobalErrorMessage(error);
         history.push('/');
         currentMeetingPhrase.current = '';
@@ -435,6 +467,10 @@ const VideoCall: React.FC = () => {
                                         <CaptionProvider>
                                           <WaitingRoomProvider>
                                             <EventsConfigure
+                                              setSttAutoStarted={
+                                                setSttAutoStarted
+                                              }
+                                              sttAutoStarted={sttAutoStarted}
                                               callActive={callActive}>
                                               <ScreenshareConfigure
                                                 isRecordingActive={
@@ -454,6 +490,8 @@ const VideoCall: React.FC = () => {
                                                           setRecordingActive,
                                                           isRecordingActive,
                                                           callActive,
+                                                          recordingAutoStarted,
+                                                          setRecordingAutoStarted,
                                                         }}>
                                                         <NetworkQualityProvider>
                                                           {!isMobileUA() && (

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

@@ -65,6 +65,7 @@ const useSTTAPI = (): IuseSTTAPI => {
           'Content-Type': 'application/json',
           authorization: store.token ? `Bearer ${store.token}` : '',
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
         body: JSON.stringify({
           passphrase: roomId?.host || '',

package/template/src/subComponents/recording/useRecording.tsx

@@ -104,6 +104,8 @@ interface RecordingProviderProps {
     setRecordingActive: React.Dispatch<SetStateAction<boolean>>;
     isRecordingActive: boolean;
     callActive: boolean;
+    recordingAutoStarted: boolean;
+    setRecordingAutoStarted: React.Dispatch<React.SetStateAction<boolean>>;
   };
 }
 
@@ -141,8 +143,13 @@ const showErrorToast = (text1: string, text2?: string) => {
 };
 
 const RecordingProvider = (props: RecordingProviderProps) => {
-  const {setRecordingActive, isRecordingActive, callActive} = props?.value;
-  const [autoStartCompleted, setAutoStartCompleted] = useState(false);
+  const {
+    setRecordingActive,
+    isRecordingActive,
+    callActive,
+    recordingAutoStarted,
+    setRecordingAutoStarted,
+  } = props?.value;
   const {
     data: {isHost, roomId},
   } = useRoomInfo();
@@ -167,7 +174,8 @@ const RecordingProvider = (props: RecordingProviderProps) => {
 
   const userlabel = useString(videoRoomUserFallbackText)();
 
-  const {localUid, hasUserJoinedRTM} = useContext(ChatContext);
+  const {localUid, hasUserJoinedRTM, isInitialQueueCompleted} =
+    useContext(ChatContext);
   const {store} = React.useContext(StorageContext);
 
   const {setChatType} = useChatUIControls();
@@ -274,6 +282,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         'Content-Type': 'application/json',
         authorization: store.token ? `Bearer ${store.token}` : '',
         'X-Request-Id': requestId,
+        'X-Session-Id': logger.getSessionId(),
       },
       body: JSON.stringify({
         passphrase: roomId.host,
@@ -356,7 +365,19 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           'recording_start',
           'Error while start recording',
           err,
-          {startReqTs, endRequestTs, latency, requestId},
+          {
+            networkError: {
+              name: err?.networkError?.name,
+              //@ts-ignore
+              code: err?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: err?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endRequestTs,
+            latency,
+            requestId,
+          },
         );
         setRecordingActive(false);
         setInProgress(false);
@@ -405,6 +426,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           'Content-Type': 'application/json',
           authorization: store.token ? `Bearer ${store.token}` : '',
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
         body: JSON.stringify({
           passphrase: roomId.host,
@@ -548,6 +570,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           'Content-Type': 'application/json',
           authorization: store.token ? `Bearer ${store.token}` : '',
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
         body: JSON.stringify({
           passphrase: roomId?.host,
@@ -826,33 +849,50 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     _stopRecording,
   ]);
 
-  //commented auto start for cloud recording
   // auto start recording
-  // useEffect(() => {
-  //   if (
-  //     $config.CLOUD_RECORDING &&
-  //     $config.CLOUD_RECORDING_AUTO_START &&
-  //     callActive &&
-  //     !isRecordingActive &&
-  //     isHost &&
-  //     hasUserJoinedRTM &&
-  //     !autoStartCompleted
-  //   ) {
-  //     logger.log(
-  //       LogSource.Internals,
-  //       'RECORDING',
-  //       'CLOUD_RECORDING_AUTO_START triggered',
-  //     );
-  //     startRecording();
-  //     setAutoStartCompleted(true);
-  //   }
-  // }, [
-  //   isRecordingActive,
-  //   isHost,
-  //   callActive,
-  //   hasUserJoinedRTM,
-  //   autoStartCompleted,
-  // ]);
+  useEffect(() => {
+    if (
+      $config.CLOUD_RECORDING &&
+      $config.CLOUD_RECORDING_AUTO_START &&
+      callActive &&
+      hasUserJoinedRTM &&
+      isInitialQueueCompleted &&
+      isHost &&
+      roomId?.host &&
+      !isRecordingBot &&
+      !recordingAutoStarted
+    ) {
+      if (!isRecordingActive) {
+        logger.log(
+          LogSource.Internals,
+          'RECORDING',
+          'CLOUD_RECORDING_AUTO_START triggered',
+          {
+            uidWhoTriggered: localUid,
+          },
+        );
+        startRecording();
+        setRecordingAutoStarted(true);
+      } else {
+        logger.log(
+          LogSource.Internals,
+          'RECORDING',
+          'CLOUD_RECORDING_AUTO_START already triggered by some other host',
+        );
+        setRecordingAutoStarted(true);
+      }
+    }
+  }, [
+    callActive,
+    hasUserJoinedRTM,
+    isInitialQueueCompleted,
+    isHost,
+    isRecordingBot,
+    isRecordingActive,
+    recordingAutoStarted,
+    localUid,
+    roomId,
+  ]);
 
   // useEffect(() => { //
   //   if (hasUserJoinedRTM && isRecordingBot) {

package/template/src/subComponents/recording/useRecordingLayoutQuery.tsx

@@ -3,6 +3,8 @@ import {useParams} from '../../components/Router';
 
 import {gql, useMutation} from '@apollo/client';
 import {UidType} from '../../../agora-rn-uikit';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
+import getUniqueID from '../../utils/getUniqueID';
 
 const SET_PRESENTER = gql`
   mutation setPresenter($uid: Int!, $passphrase: String!) {
@@ -29,25 +31,88 @@ function useRecordingLayoutQuery() {
    * https://docs.agora.io/en/cloud-recording/cloud_recording_layout?platform=RESTful
    */
   const executePresenterQuery = (screenShareUid: UidType) => {
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
     setPresenterQuery({
       variables: {
         uid: screenShareUid,
         passphrase: phrase,
       },
+      context: {
+        headers: {
+          'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+      },
     })
-      .then((res) => {
-        if (res.data.setPresenter === 'success') {
+      .then(res => {
+        if (res?.data?.setPresenter === 'success') {
+          const endReqTs = Date.now();
+          logger.log(
+            LogSource.Internals,
+            'RECORDING',
+            'setPresenterQuery success',
+            {
+              responseData: res,
+              startReqTs,
+              endReqTs,
+              latency: endReqTs - startReqTs,
+              requestId,
+            },
+          );
         }
       })
-      .catch((err) => {
-        console.log(err);
+      .catch(error => {
+        const endReqTs = Date.now();
+        logger.error(
+          LogSource.Internals,
+          'RECORDING',
+          'setPresenterQuery failure',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
+        );
       });
   };
 
   const executeNormalQuery = () => {
-    setNormalQuery({variables: {passphrase: phrase}})
-      .then((res) => {
-        if (res.data.stopRecordingSession === 'success') {
+    const requestId = getUniqueID();
+    const startReqTs = Date.now();
+    setNormalQuery({
+      variables: {passphrase: phrase},
+      context: {
+        headers: {
+          'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+      },
+    })
+      .then(res => {
+        if (res?.data?.stopRecordingSession === 'success') {
+          const endReqTs = Date.now();
+          logger.log(
+            LogSource.Internals,
+            'RECORDING',
+            'executeNormalQuery success',
+            {
+              responseData: res,
+              startReqTs,
+              endReqTs,
+              latency: endReqTs - startReqTs,
+              requestId,
+            },
+          );
           // Once the backend sucessfuly stops recording,
           // send a control message to everbody in the channel indicating that cloud recording is now inactive.
           // sendControlMessage(controlMessageEnum.cloudRecordingUnactive);
@@ -55,8 +120,27 @@ function useRecordingLayoutQuery() {
           // setScreenshareActive(false);
         }
       })
-      .catch((err) => {
-        console.log(err);
+      .catch(error => {
+        const endReqTs = Date.now();
+        logger.error(
+          LogSource.Internals,
+          'RECORDING',
+          'executeNormalQuery failure',
+          error,
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
+        );
       });
   };
 

package/template/src/subComponents/waiting-rooms/useWaitingRoomAPI.ts

@@ -43,6 +43,7 @@ const useWaitingRoomAPI = (): IuseWaitingRoomAPI => {
         'Content-Type': 'application/json',
         authorization: store.token ? `Bearer ${store.token}` : '',
         'X-Request-Id': requestId,
+        'X-Session-Id': logger.getSessionId(),
       },
       body: payload,
     });

package/template/src/utils/common.tsx

@@ -17,11 +17,6 @@ import {
 import Platform from '../subComponents/Platform';
 import * as ReactIs from 'react-is';
 
-const getSessionId = () => {
-  const {logger} = require('../logger/AppBuilderLogger');
-  return logger.getSessionId();
-};
-
 const trimText = (text: string, length: number = 25) => {
   if (!text) {
     return '';
@@ -386,7 +381,6 @@ function MergeMoreButtonFields(sourceArray, updateObject) {
 }
 
 export {
-  getSessionId,
   updateToolbarDefaultConfig,
   useIsDesktop,
   useIsSmall,

package/template/src/utils/useCreateRoom.ts

@@ -56,6 +56,7 @@ export default function useCreateRoom(): createRoomFun {
       context: {
         headers: {
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
       },
       variables: {
@@ -75,7 +76,19 @@ export default function useCreateRoom(): createRoomFun {
         'createChannel',
         'API createChannel failed. There was an error',
         error,
-        {startReqTs, endReqTs, latency: latency, requestId},
+        {
+          networkError: {
+            name: error?.networkError?.name,
+            //@ts-ignore
+            code: error?.networkError?.result?.error?.code,
+            //@ts-ignore
+            message: error?.networkError?.result?.error?.message,
+          },
+          startReqTs,
+          endReqTs,
+          latency: latency,
+          requestId,
+        },
       );
       throw error;
     }

package/template/src/utils/useGetMeetingPhrase.ts

@@ -42,6 +42,7 @@ export default function useGetMeetingPhrase() {
       context: {
         headers: {
           'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
         },
       },
       query: SHARE,
@@ -57,6 +58,13 @@ export default function useGetMeetingPhrase() {
         'Query GET_MEETING_PHRASE failed',
         response.error,
         {
+          networkError: {
+            name: response?.error?.networkError?.name,
+            //@ts-ignore
+            code: response?.error?.networkError?.result?.error?.code,
+            //@ts-ignore
+            message: response?.error?.networkError?.result?.error?.message,
+          },
           requestId,
           startReqTs,
           endReqTs,

package/template/src/utils/useJoinRoom.ts

@@ -128,6 +128,7 @@ export default function useJoinRoom() {
           context: {
             headers: {
               'X-Request-Id': requestId,
+              'X-Session-Id': logger.getSessionId(),
             },
           },
           query:
@@ -149,8 +150,16 @@ export default function useJoinRoom() {
           `API ${
             isWaitingRoomEnabled ? 'channel_join_request' : 'joinChannel'
           } failed.`,
+          'Join Channel Failed',
           response?.error,
           {
+            networkError: {
+              name: response?.error?.networkError?.name,
+              //@ts-ignore
+              code: response?.error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: response?.error?.networkError?.result?.error?.message,
+            },
             startReqTs,
             endReqTs,
             latency,

package/template/src/utils/useMutePSTN.ts

@@ -34,6 +34,7 @@ const useMutePSTN = () => {
           context: {
             headers: {
               'X-Request-Id': requestId,
+              'X-Session-Id': logger.getSessionId(),
             },
           },
           variables: {
@@ -53,7 +54,19 @@ const useMutePSTN = () => {
           'MUTE_PSTN',
           'Mutation MUTE_PSTN success',
           error,
-          {startReqTs, endReqTs, latency: endReqTs - startReqTs, requestId},
+          {
+            networkError: {
+              name: error?.networkError?.name,
+              //@ts-ignore
+              code: error?.networkError?.result?.error?.code,
+              //@ts-ignore
+              message: error?.networkError?.result?.error?.message,
+            },
+            startReqTs,
+            endReqTs,
+            latency: endReqTs - startReqTs,
+            requestId,
+          },
         );
         throw error;
       } else {