agora-appbuilder-core 4.1.9 → 4.1.11-beta.2

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

@@ -20,13 +20,20 @@ import {
 } from '../../components/chat-ui/useChatUIControls';
 import {numFormatter} from '../../utils';
 import ChatContext from '../../components/ChatContext';
-import {useCaption} from '../../subComponents/caption/useCaption';
+import {
+  LanguageTranslationConfig,
+  useCaption,
+} from '../../subComponents/caption/useCaption';
 import ActionMenu, {ActionMenuItem} from '../../atoms/ActionMenu';
 import {calculatePosition, isMobileUA} from '../../utils/common';
 import LanguageSelectorPopup from '../../subComponents/caption/LanguageSelectorPopup';
 import useSTTAPI from '../../subComponents/caption/useSTTAPI';
 import useGetName from '../../utils/useGetName';
-import {LanguageType} from '../../subComponents/caption/utils';
+import {
+  LanguageType,
+  mergeTranslationConfigs,
+  TranslateConfig,
+} from '../../subComponents/caption/utils';
 import {useRoomInfo, usePreCall} from 'customization-api';
 import useTranscriptDownload from '../../subComponents/caption/useTranscriptDownload';
 import {useVB} from '../../components/virtual-background/useVB';
@@ -42,10 +49,13 @@ import {
   chatPanelPrivateTabText,
   peoplePanelHeaderText,
   sttChangeSpokenLanguageText,
+  sttChangeTranslationLanguageText,
   sttDownloadTranscriptBtnText,
+  sttStopTranslationText,
   sttTranscriptPanelHeaderText,
 } from '../../language/default-labels/videoCallScreenLabels';
 import {logger, LogSource} from '../../logger/AppBuilderLogger';
+import {TranslateActionMenu} from '../../subComponents/caption/CaptionContainer';
 
 export const SettingsHeader = props => {
   const {setSidePanel} = useSidePanel();
@@ -262,7 +272,7 @@ const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
     language: prevLang,
     meetingTranscript,
     isLangChangeInProgress,
-    setLanguage,
+    selectedTranslationLanguage,
   } = useCaption();
   const {downloadTranscript} = useTranscriptDownload();
   const [modalPosition, setModalPosition] = React.useState({});
@@ -270,29 +280,67 @@ const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
   const [isLanguagePopupOpen, setLanguagePopup] =
     React.useState<boolean>(false);
+  const [isTranslateMenuOpen, setTranslateMenuOpen] =
+    React.useState<boolean>(false);
   const {restart} = useSTTAPI();
   const username = useGetName();
   const actionMenuitems: ActionMenuItem[] = [];
   const {
     data: {isHost},
+    sttLanguage,
   } = useRoomInfo();
-
+  const {handleTranslateConfigChange, updateSTTBotSession, translationConfig} =
+    useCaption();
   const downloadTranscriptLabel = useString(sttDownloadTranscriptBtnText)();
   const changeSpokenLanguage = useString<boolean>(
     sttChangeSpokenLanguageText,
   )();
-  isHost &&
-    actionMenuitems.push({
-      icon: 'lang-select',
-      iconColor: $config.SECONDARY_ACTION_COLOR,
-      textColor: $config.FONT_COLOR,
-      title: changeSpokenLanguage + ' ',
-      disabled: isLangChangeInProgress,
-      onPress: () => {
-        setActionMenuVisible(false);
-        setLanguagePopup(true);
-      },
-    });
+  const sttStopTranslationLabel = useString<boolean>(sttStopTranslationText)();
+  const changeTranslationLanguage = useString<boolean>(
+    sttChangeTranslationLanguageText,
+  )();
+
+  // isHost &&
+  actionMenuitems.push({
+    icon: 'globe',
+    iconColor: $config.SECONDARY_ACTION_COLOR,
+    textColor: $config.FONT_COLOR,
+    title: changeSpokenLanguage + ' ',
+    disabled: isLangChangeInProgress,
+    onPress: () => {
+      setActionMenuVisible(false);
+      setLanguagePopup(true);
+    },
+  });
+
+  // actionMenuitems.push({
+  //   icon: 'lang-select',
+  //   iconColor: $config.SECONDARY_ACTION_COLOR,
+  //   textColor: $config.FONT_COLOR,
+  //   title: changeTranslationLanguage,
+  //   disabled: false,
+  //   onPress: () => {
+  //     setActionMenuVisible(false);
+  //     setTranslateMenuOpen(true);
+  //   },
+  // });
+
+  actionMenuitems.push({
+    icon: 'lang-select',
+    iconColor: $config.SECONDARY_ACTION_COLOR,
+    textColor: $config.FONT_COLOR,
+    title: sttStopTranslationLabel,
+    disabled: false,
+    onPress: async () => {
+      setActionMenuVisible(false);
+      // Keep source language same, just clear target languages
+      // This stops translation but keeps transcription running
+      await updateSTTBotSession({
+        source: translationConfig.source, // Keep current source
+        targets: [], // Empty targets = no translation
+      });
+    },
+  });
 
   actionMenuitems.push({
     icon: 'download',
@@ -306,27 +354,18 @@ const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
     },
   });
 
-  const onLanguageChange = (langChanged = false, language: LanguageType[]) => {
+  const onLanguageChange = async (
+    inputTranslateConfig: LanguageTranslationConfig,
+  ) => {
+    console.log(
+      '[STT_PER_USER_BOT] SidePanelHeader TranscriptHeaderActionMenu - onLanguageChange - sourceLanguage , targetLanguage:',
+      inputTranslateConfig,
+    );
     setLanguagePopup(false);
-    if (langChanged) {
-      restart(language)
-        .then(() => {
-          logger.debug(
-            LogSource.Internals,
-            'STT',
-            'stt restarted successfully',
-          );
-        })
-        .catch(error => {
-          logger.error(
-            LogSource.Internals,
-            'STT',
-            'Error in restarting',
-            error,
-          );
-          // Handle the error case
-        });
-    }
+    // Update caption with new language configuration\
+    try {
+      await handleTranslateConfigChange(inputTranslateConfig);
+    } catch (error) {}
   };
 
   React.useEffect(() => {
@@ -370,6 +409,12 @@ const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
         setModalVisible={setLanguagePopup}
         onConfirm={onLanguageChange}
       />
+
+      <TranslateActionMenu
+        actionMenuVisible={isTranslateMenuOpen}
+        setActionMenuVisible={setTranslateMenuOpen}
+        btnRef={btnRef}
+      />
     </>
   );
 };

package/template/src/rtm/RTMEngine.ts

@@ -10,71 +10,57 @@
 *********************************************
 */
 
-import {
-  createAgoraRtmClient,
-  RtmConfig,
-  type RTMClient,
-} from 'agora-react-native-rtm';
+import RtmEngine from 'agora-react-native-rtm';
 import {isAndroid, isIOS} from '../utils/common';
 
 class RTMEngine {
-  private _engine?: RTMClient;
+  engine!: RtmEngine;
   private localUID: string = '';
   private channelId: string = '';
 
   private static _instance: RTMEngine | null = null;
 
-  private constructor() {
-    if (RTMEngine._instance) {
-      return RTMEngine._instance;
-    }
-    RTMEngine._instance = this;
-    return RTMEngine._instance;
-  }
-
   public static getInstance() {
-    // We are only creating the instance but not creating the rtm client yet
     if (!RTMEngine._instance) {
-      RTMEngine._instance = new RTMEngine();
+      return new RTMEngine();
     }
     return RTMEngine._instance;
   }
 
-  setLocalUID(localUID: string | number) {
-    if (localUID === null || localUID === undefined) {
-      throw new Error('setLocalUID: localUID cannot be null or undefined');
-    }
+  private async createClientInstance() {
+    await this.engine.createClient($config.APP_ID);
+  }
 
-    const newUID = String(localUID);
-    if (newUID.trim() === '') {
-      throw new Error(
-        'setLocalUID: localUID cannot be empty after string conversion',
-      );
+  private async destroyClientInstance() {
+    await this.engine.logout();
+    if (isIOS() || isAndroid()) {
+      await this.engine.destroyClient();
     }
+  }
 
-    // If UID is changing and we have an existing engine, throw error
-    if (this._engine && this.localUID !== newUID) {
-      throw new Error(
-        `RTMEngine: Cannot change UID from '${this.localUID}' to '${newUID}' while engine is active. ` +
-          `Please call destroy() first, then setLocalUID() with the new UID.`,
-      );
+  private constructor() {
+    if (RTMEngine._instance) {
+      return RTMEngine._instance;
     }
+    RTMEngine._instance = this;
+    this.engine = new RtmEngine();
+    this.localUID = '';
+    this.channelId = '';
+    this.createClientInstance();
 
-    this.localUID = newUID;
+    return RTMEngine._instance;
+  }
 
-    if (!this._engine) {
-      this.createClientInstance();
-    }
+  setLocalUID(localUID: string) {
+    this.localUID = localUID;
   }
 
   setChannelId(channelID: string) {
-    if (
-      !channelID ||
-      typeof channelID !== 'string' ||
-      channelID.trim() === ''
-    ) {
-      throw new Error('setChannelId: channelID must be a non-empty string');
-    }
+    this.channelId = channelID;
+  }
+
+  setLoginInfo(localUID: string, channelID: string) {
+    this.localUID = localUID;
     this.channelId = channelID;
   }
 
@@ -86,99 +72,16 @@ class RTMEngine {
     return this.channelId;
   }
 
-  get isEngineReady() {
-    return !!this._engine && !!this.localUID;
-  }
-
-  get engine(): RTMClient {
-    this.ensureEngineReady();
-    return this._engine!;
-  }
-
-  private ensureEngineReady() {
-    if (!this.isEngineReady) {
-      throw new Error(
-        'RTM Engine not ready. Please call setLocalUID() with a valid UID first.',
-      );
-    }
-  }
-
-  private createClientInstance() {
-    try {
-      if (!this.localUID || this.localUID.trim() === '') {
-        throw new Error('Cannot create RTM client: localUID is not set');
-      }
-      if (!$config.APP_ID) {
-        throw new Error('Cannot create RTM client: APP_ID is not configured');
-      }
-      const rtmConfig = new RtmConfig({
-        appId: $config.APP_ID,
-        userId: this.localUID,
-      });
-      this._engine = createAgoraRtmClient(rtmConfig);
-    } catch (error) {
-      const contextError = new Error(
-        `Failed to create RTM client instance for userId: ${
-          this.localUID
-        }, appId: ${$config.APP_ID}. Error: ${error.message || error}`,
-      );
-      console.error('RTMEngine createClientInstance error:', contextError);
-      throw contextError;
-    }
-  }
-
-  private async destroyClientInstance() {
-    try {
-      if (this._engine) {
-        // 1. Unsubscribe from channel if we have one
-        if (this.channelId) {
-          try {
-            await this._engine.unsubscribe(this.channelId);
-          } catch (error) {
-            console.warn(
-              `Failed to unsubscribe from channel '${this.channelId}':`,
-              error,
-            );
-            // Continue with cleanup even if unsubscribe fails
-          }
-        }
-        // 2. Remove all listeners
-        try {
-          this._engine.removeAllListeners?.();
-        } catch (error) {
-          console.warn('Failed to remove listeners:', error);
-        }
-        // 3. Logout
-        try {
-          await this._engine.logout();
-          if (isAndroid() || isIOS()) {
-            this._engine.release();
-          }
-        } catch (error) {
-          console.warn('Failed to logout:', error);
-        }
-      }
-    } catch (error) {
-      console.error('Error during client instance destruction:', error);
-      // Don't re-throw - we want cleanup to complete
-    }
-  }
-
   async destroy() {
     try {
-      if (!this._engine) {
-        return;
-      }
-
       await this.destroyClientInstance();
-      this.channelId = '';
+      if (isIOS() || isAndroid()) {
+        RTMEngine._instance = null;
+      }
       this.localUID = '';
-      this._engine = undefined;
-      RTMEngine._instance = null;
+      this.channelId = '';
     } catch (error) {
-      console.error('Error destroying RTM instance:', error);
-      // Don't re-throw - destruction should be a best-effort cleanup
-      // Re-throwing could prevent proper cleanup in calling code
+      console.log('Error destroying instance error: ', error);
     }
   }
 }

package/template/src/rtm-events/constants.ts

@@ -30,6 +30,9 @@ const VIDEO_MEETING_ATTENDEE = 'VIDEO_MEETING_ATTENDEE';
 // 6. STT
 const STT_ACTIVE = 'STT_IS_ACTIVE';
 const STT_LANGUAGE = 'STT_LANGUAGE_CHANGED';
+const STT_TRANSLATE_LANGUAGE = 'STT_TRANSLATE_LANGUAGE_CHANGED';
+const STT_SPOKEN_LANGUAGE = 'STT_SPOKEN_LANGUAGE';
+const USER_STOPPED_TRANSLATION = 'USER_STOPPED_TRANSLATION';
 // 7. WAITING ROOM
 const WAITING_ROOM_REQUEST = 'WAITING_ROOM_REQUEST';
 const WAITING_ROOM_RESPONSE = 'WAITING_ROOM_RESPONSE';
@@ -53,6 +56,9 @@ const EventNames = {
   VIDEO_MEETING_ATTENDEE,
   STT_ACTIVE,
   STT_LANGUAGE,
+  STT_TRANSLATE_LANGUAGE,
+  STT_SPOKEN_LANGUAGE,
+  USER_STOPPED_TRANSLATION,
   WAITING_ROOM_REQUEST,
   WAITING_ROOM_RESPONSE,
   WAITING_ROOM_STATUS_UPDATE,

package/template/src/rtm-events-api/Events.ts

@@ -11,7 +11,7 @@
 */
 
 ('use strict');
-import {type RTMClient} from 'agora-react-native-rtm';
+import RtmEngine from 'agora-react-native-rtm';
 import RTMEngine from '../rtm/RTMEngine';
 import {EventUtils} from '../rtm-events';
 import {
@@ -23,7 +23,6 @@ import {
 } from './types';
 import {adjustUID} from '../rtm/utils';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
-import {nativeChannelTypeMapping} from '../../bridge/rtm/web/Types';
 
 class Events {
   private source: EventSource = EventSource.core;
@@ -42,17 +41,11 @@ class Events {
    * @api private
    */
   private _persist = async (evt: string, payload: string) => {
-    const rtmEngine: RTMClient = RTMEngine.getInstance().engine;
-    const userId = RTMEngine.getInstance().localUid;
+    const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
     try {
       const rtmAttribute = {key: evt, value: payload};
       // Step 1: Call RTM API to update local attributes
-      await rtmEngine.storage.setUserMetadata(
-        {items: [rtmAttribute]},
-        {
-          userId,
-        },
-      );
+      await rtmEngine.addOrUpdateLocalUserAttributes([rtmAttribute]);
     } catch (error) {
       logger.error(
         LogSource.Events,
@@ -75,8 +68,8 @@ class Events {
         `CUSTOM_EVENT_API Event name cannot be of type ${typeof evt}`,
       );
     }
-    if (evt.trim() === '') {
-      throw Error('CUSTOM_EVENT_API Name or function cannot be empty');
+    if (evt.trim() == '') {
+      throw Error(`CUSTOM_EVENT_API Name or function cannot be empty`);
     }
     return true;
   };
@@ -110,15 +103,10 @@ class Events {
     rtmPayload: RTMAttributePayload,
     toUid?: ReceiverUid,
   ) => {
-    const to = typeof toUid === 'string' ? parseInt(toUid, 10) : toUid;
+    const to = typeof toUid == 'string' ? parseInt(toUid) : toUid;
+    const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
 
     const text = JSON.stringify(rtmPayload);
-
-    if (!RTMEngine.getInstance().isEngineReady) {
-      throw new Error('RTM Engine is not ready. Call setLocalUID() first.');
-    }
-    const rtmEngine: RTMClient = RTMEngine.getInstance().engine;
-
     // Case 1: send to channel
     if (
       typeof to === 'undefined' ||
@@ -132,16 +120,7 @@ class Events {
       );
       try {
         const channelId = RTMEngine.getInstance().channelUid;
-        if (!channelId || channelId.trim() === '') {
-          throw new Error(
-            'Channel ID is not set. Cannot send channel attributes.',
-          );
-        }
-        await rtmEngine.publish(channelId, text, {
-          channelType: nativeChannelTypeMapping.MESSAGE, // 1 is message
-          customType: 'PlainText',
-          messageType: 1,
-        });
+        await rtmEngine.sendMessageByChannelId(channelId, text);
       } catch (error) {
         logger.error(
           LogSource.Events,
@@ -161,10 +140,10 @@ class Events {
       );
       const adjustedUID = adjustUID(to);
       try {
-        await rtmEngine.publish(`${adjustedUID}`, text, {
-          channelType: nativeChannelTypeMapping.USER, // user
-          customType: 'PlainText',
-          messageType: 1,
+        await rtmEngine.sendMessageToPeer({
+          peerId: `${adjustedUID}`,
+          offline: false,
+          text,
         });
       } catch (error) {
         logger.error(
@@ -185,32 +164,14 @@ class Events {
         to,
       );
       try {
-        const response = await Promise.allSettled(
-          to.map(uid =>
-            rtmEngine.publish(`${adjustUID(uid)}`, text, {
-              channelType: nativeChannelTypeMapping.USER,
-              customType: 'PlainText',
-              messageType: 1,
-            }),
-          ),
-        );
-        response.forEach((result, index) => {
-          const uid = to[index];
-          if (result.status === 'rejected') {
-            logger.error(
-              LogSource.Events,
-              'CUSTOM_EVENTS',
-              `Failed to publish to user ${uid}:`,
-              result.reason,
-            );
-          }
-        });
-        // for (const uid of to) {
-        //   const adjustedUID = adjustUID(uid);
-        //   await rtmEngine.publish(`${adjustedUID}`, text, {
-        //     channelType: 3, // user
-        //   });
-        // }
+        for (const uid of to) {
+          const adjustedUID = adjustUID(uid);
+          await rtmEngine.sendMessageToPeer({
+            peerId: `${adjustedUID}`,
+            offline: false,
+            text,
+          });
+        }
       } catch (error) {
         logger.error(
           LogSource.Events,
@@ -231,31 +192,13 @@ class Events {
       'updating channel attributes',
     );
     try {
-      // Validate if rtmengine is ready
-      if (!RTMEngine.getInstance().isEngineReady) {
-        throw new Error('RTM Engine is not ready. Call setLocalUID() first.');
-      }
-      const rtmEngine: RTMClient = RTMEngine.getInstance().engine;
-
+      const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
       const channelId = RTMEngine.getInstance().channelUid;
-      if (!channelId || channelId.trim() === '') {
-        throw new Error(
-          'Channel ID is not set. Cannot send channel attributes.',
-        );
-      }
-
       const rtmAttribute = [{key: rtmPayload.evt, value: rtmPayload.value}];
-      await rtmEngine.storage.setChannelMetadata(
-        channelId,
-        nativeChannelTypeMapping.MESSAGE,
-        {
-          items: rtmAttribute,
-        },
-        {
-          addUserId: true,
-          addTimeStamp: true,
-        },
-      );
+      // Step 1: Call RTM API to update local attributes
+      await rtmEngine.addOrUpdateChannelAttributes(channelId, rtmAttribute, {
+        enableNotificationToChannelMembers: true,
+      });
     } catch (error) {
       logger.error(
         LogSource.Events,
@@ -280,8 +223,7 @@ class Events {
   on = (eventName: string, listener: EventCallback): Function => {
     try {
       if (!this._validateEvt(eventName) || !this._validateListener(listener)) {
-        // Return no-op function instead of undefined to prevent errors
-        return () => {};
+        return;
       }
       EventUtils.addListener(eventName, listener, this.source);
       console.log('CUSTOM_EVENT_API event listener registered', eventName);
@@ -296,8 +238,6 @@ class Events {
         'Error: events.on',
         error,
       );
-      // Return no-op function on error to prevent undefined issues
-      return () => {};
     }
   };
 
@@ -313,11 +253,7 @@ class Events {
   off = (eventName?: string, listener?: EventCallback) => {
     try {
       if (listener) {
-        if (
-          eventName &&
-          this._validateListener(listener) &&
-          this._validateEvt(eventName)
-        ) {
+        if (this._validateListener(listener) && this._validateEvt(eventName)) {
           // listen off an event by eventName and listener
           //@ts-ignore
           EventUtils.removeListener(eventName, listener, this.source);
@@ -359,18 +295,8 @@ class Events {
     persistLevel: PersistanceLevel = PersistanceLevel.None,
     receiver: ReceiverUid = -1,
   ) => {
-    try {
-      if (!this._validateEvt(eventName)) {
-        return;
-      }
-    } catch (error) {
-      logger.error(
-        LogSource.Events,
-        'CUSTOM_EVENTS',
-        'Event validation failed',
-        error,
-      );
-      return; // Don't throw - just log and return
+    if (!this._validateEvt(eventName)) {
+      return;
     }
 
     const persistValue = JSON.stringify({
@@ -392,7 +318,6 @@ class Events {
         await this._persist(eventName, persistValue);
       } catch (error) {
         logger.error(LogSource.Events, 'CUSTOM_EVENTS', 'persist error', error);
-        // don't throw - just log the error, application should continue running
       }
     }
     try {
@@ -411,10 +336,9 @@ class Events {
       logger.error(
         LogSource.Events,
         'CUSTOM_EVENTS',
-        `Failed to send event '${eventName}' - event lost`,
+        'sending event failed',
         error,
       );
-      // don't throw - just log the error, application should continue running
     }
   };
 }