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

package/template/src/rtm/RTMEngine.ts

@@ -10,57 +10,71 @@
 *********************************************
 */
 
-import RtmEngine from 'agora-react-native-rtm';
+import {
+  createAgoraRtmClient,
+  RtmConfig,
+  type RTMClient,
+} from 'agora-react-native-rtm';
 import {isAndroid, isIOS} from '../utils/common';
 
 class RTMEngine {
-  engine!: RtmEngine;
+  private _engine?: RTMClient;
   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) {
-      return new RTMEngine();
+      RTMEngine._instance = new RTMEngine();
     }
     return RTMEngine._instance;
   }
 
-  private async createClientInstance() {
-    await this.engine.createClient($config.APP_ID);
-  }
+  setLocalUID(localUID: string | number) {
+    if (localUID === null || localUID === undefined) {
+      throw new Error('setLocalUID: localUID cannot be null or undefined');
+    }
 
-  private async destroyClientInstance() {
-    await this.engine.logout();
-    if (isIOS() || isAndroid()) {
-      await this.engine.destroyClient();
+    const newUID = String(localUID);
+    if (newUID.trim() === '') {
+      throw new Error(
+        'setLocalUID: localUID cannot be empty after string conversion',
+      );
     }
-  }
 
-  private constructor() {
-    if (RTMEngine._instance) {
-      return RTMEngine._instance;
+    // 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.`,
+      );
     }
-    RTMEngine._instance = this;
-    this.engine = new RtmEngine();
-    this.localUID = '';
-    this.channelId = '';
-    this.createClientInstance();
 
-    return RTMEngine._instance;
-  }
+    this.localUID = newUID;
 
-  setLocalUID(localUID: string) {
-    this.localUID = localUID;
+    if (!this._engine) {
+      this.createClientInstance();
+    }
   }
 
   setChannelId(channelID: string) {
-    this.channelId = channelID;
-  }
-
-  setLoginInfo(localUID: string, channelID: string) {
-    this.localUID = localUID;
+    if (
+      !channelID ||
+      typeof channelID !== 'string' ||
+      channelID.trim() === ''
+    ) {
+      throw new Error('setChannelId: channelID must be a non-empty string');
+    }
     this.channelId = channelID;
   }
 
@@ -72,16 +86,99 @@ 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 {
-      await this.destroyClientInstance();
-      if (isIOS() || isAndroid()) {
-        RTMEngine._instance = null;
+      if (!this._engine) {
+        return;
       }
-      this.localUID = '';
+
+      await this.destroyClientInstance();
       this.channelId = '';
+      this.localUID = '';
+      this._engine = undefined;
+      RTMEngine._instance = null;
     } catch (error) {
-      console.log('Error destroying instance error: ', 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
     }
   }
 }

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

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

package/template/src/subComponents/ChatInput.tsx

@@ -97,6 +97,10 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     replyToMsgId,
     setReplyToMsgId,
   } = useChatUIControls();
+
+  // Track IME composition state
+  const [isComposing, setIsComposing] = React.useState(false);
+
   const {defaultContent} = useContent();
   const {sendChatSDKMessage, uploadAttachment} = useChatConfigure();
   const {addMessageToPrivateStore, addMessageToStore} = useChatMessages();
@@ -115,6 +119,41 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     });
   }, []);
 
+  // Set up direct DOM event listeners for IME composition
+  useEffect(() => {
+    if (!isWeb()) return;
+
+    const inputElement = chatInputRef?.current;
+    if (!inputElement) return;
+
+    // Get the actual DOM element (React Native Web creates a textarea/input)
+    const domElement = inputElement._nativeTag
+      ? document.querySelector(`[data-tag="${inputElement._nativeTag}"]`)
+      : inputElement;
+
+    if (!domElement) return;
+
+    const handleCompositionStart = () => {
+      setIsComposing(true);
+    };
+
+    const handleCompositionEnd = () => {
+      setIsComposing(false);
+    };
+
+    // Add event listeners directly to DOM element
+    domElement.addEventListener('compositionstart', handleCompositionStart);
+    domElement.addEventListener('compositionend', handleCompositionEnd);
+
+    return () => {
+      domElement.removeEventListener(
+        'compositionstart',
+        handleCompositionStart,
+      );
+      domElement.removeEventListener('compositionend', handleCompositionEnd);
+    };
+  }, [chatInputRef?.current]);
+
   const {data} = useRoomInfo();
   const [name] = useUserName();
   const toastHeadingSize = useString(chatSendErrorTextSizeToastHeading)();
@@ -166,9 +205,37 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     });
   };
 
+  // IME composition handlers
+  const handleCompositionStart = () => {
+    setIsComposing(true);
+  };
+
+  const handleCompositionEnd = () => {
+    setIsComposing(false);
+  };
+
+  const handleInput = event => {
+    // Reset composition state if input event occurs without active composition
+    if (isWeb() && !event.nativeEvent.isComposing && isComposing) {
+      setIsComposing(false);
+    }
+  };
+
   // with multiline textinput enter prints /n
   const handleKeyPress = ({nativeEvent}) => {
-    if (nativeEvent.key === 'Enter' && !nativeEvent.shiftKey) {
+    const currentlyComposing = nativeEvent.isComposing || isComposing;
+
+    // Check if this is an Enter key during composition
+    if (nativeEvent.key === 'Enter' && currentlyComposing) {
+      return;
+    }
+
+    // Only submit on Enter if not composing with IME and no Shift key
+    if (
+      nativeEvent.key === 'Enter' &&
+      !nativeEvent.shiftKey &&
+      !currentlyComposing
+    ) {
       nativeEvent.preventDefault();
       onSubmitEditing();
       setShowEmojiPicker(false); // This will close emoji picker on enter
@@ -225,6 +292,10 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
       autoCorrect={false}
       onKeyPress={handleKeyPress}
       onChange={_handleHeightChange}
+      // IME composition event handlers for React Native Web
+      onCompositionStart={isWeb() ? handleCompositionStart : undefined}
+      onCompositionEnd={isWeb() ? handleCompositionEnd : undefined}
+      onInput={isWeb() ? handleInput : undefined}
     />
   );
 

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

@@ -121,7 +121,7 @@ const useSTTAPI = (): IuseSTTAPI => {
   const start = async (lang: LanguageType[]) => {
     try {
       setIsLangChangeInProgress(true);
-      const res = await apiCall('start', lang);
+      const res = await apiCall('startv7', lang);
       // null means stt startred successfully
       const isSTTAlreadyActive =
         res?.error?.message
@@ -209,7 +209,7 @@ const useSTTAPI = (): IuseSTTAPI => {
 
   const stop = async () => {
     try {
-      const res = await apiCall('stop');
+      const res = await apiCall('stopv7');
       // once STT is non-active in the channel , notify others so that they dont' trigger start again
       // events.send(
       //   EventNames.STT_ACTIVE,

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

@@ -12,20 +12,38 @@ export function formatTime(timestamp: number): string {
 }
 
 export type LanguageType =
-  | 'en-US'
-  | 'hi-IN'
+  | 'ar-EG'
+  | 'ar-JO'
+  | 'ar-SA'
+  | 'ar-AE'
+  | 'bn-IN'
   | 'zh-CN'
   | 'zh-HK'
+  | 'zh-TW'
+  | 'nl-NL'
+  | 'en-IN'
+  | 'en-US'
+  | 'fil-PH'
   | 'fr-FR'
   | 'de-DE'
-  | 'ko-KR'
-  | 'en-IN'
-  | 'ar'
+  | 'gu-IN'
+  | 'he-IL'
+  | 'hi-IN'
+  | 'id-ID'
+  | 'it-IT'
   | 'ja-JP'
+  | 'kn-IN'
+  | 'ko-KR'
+  | 'ms-MY'
+  | 'fa-IR'
   | 'pt-PT'
+  | 'ru-RU'
   | 'es-ES'
-  | 'it-IT'
-  | 'id-ID'
+  | 'ta-IN'
+  | 'te-IN'
+  | 'th-TH'
+  | 'tr-TR'
+  | 'vi-VN'
   | '';
 
 interface LanguageData {
@@ -34,20 +52,38 @@ interface LanguageData {
 }
 
 export const langData: LanguageData[] = [
+  {label: 'Arabic (EG)', value: 'ar-EG'},
+  {label: 'Arabic (JO)', value: 'ar-JO'},
+  {label: 'Arabic (SA)', value: 'ar-SA'},
+  {label: 'Arabic (UAE)', value: 'ar-AE'},
+  {label: 'Bengali (IN)', value: 'bn-IN'},
+  {label: 'Chinese', value: 'zh-CN'},
+  {label: 'Chinese (HK)', value: 'zh-HK'},
+  {label: 'Chinese (TW)', value: 'zh-TW'},
+  {label: 'Dutch', value: 'nl-NL'},
+  {label: 'English (IN)', value: 'en-IN'},
   {label: 'English (US)', value: 'en-US'},
-  {label: 'English (India)', value: 'en-IN'},
-  {label: 'Hindi', value: 'hi-IN'},
-  {label: 'Chinese (Simplified)', value: 'zh-CN'},
-  {label: 'Chinese (Traditional)', value: 'zh-HK'},
-  {label: 'Arabic', value: 'ar'},
+  {label: 'Filipino', value: 'fil-PH'},
   {label: 'French', value: 'fr-FR'},
   {label: 'German', value: 'de-DE'},
+  {label: 'Gujarati', value: 'gu-IN'},
+  {label: 'Hebrew', value: 'he-IL'},
+  {label: 'Hindi', value: 'hi-IN'},
+  {label: 'Indonesian', value: 'id-ID'},
+  {label: 'Italian', value: 'it-IT'},
   {label: 'Japanese', value: 'ja-JP'},
+  {label: 'Kannada', value: 'kn-IN'},
   {label: 'Korean', value: 'ko-KR'},
+  {label: 'Malay', value: 'ms-MY'},
+  {label: 'Persian', value: 'fa-IR'},
   {label: 'Portuguese', value: 'pt-PT'},
+  {label: 'Russian', value: 'ru-RU'},
   {label: 'Spanish', value: 'es-ES'},
-  {label: 'Italian', value: 'it-IT'},
-  {label: 'Indonesian', value: 'id-ID'},
+  {label: 'Tamil', value: 'ta-IN'},
+  {label: 'Telugu', value: 'te-IN'},
+  {label: 'Thai', value: 'th-TH'},
+  {label: 'Turkish', value: 'tr-TR'},
+  {label: 'Vietnamese', value: 'vi-VN'},
 ];
 
 export function getLanguageLabel(

package/template/src/utils/useEndCall.ts

@@ -69,7 +69,7 @@ const useEndCall = () => {
     if ($config.CHAT) {
       deleteChatUser();
     }
-    RTMEngine.getInstance().engine.leaveChannel(rtcProps.channel);
+    RTMEngine.getInstance().engine.unsubscribe(rtcProps.channel);
     if (!ENABLE_AUTH) {
       // await authLogout();
       await authLogin();

package/template/src/utils/useJoinRoom.ts

@@ -58,7 +58,6 @@ export default function useJoinRoom() {
           send_event: false,
         });
       } else {
-        console.log('debugging store.token', store.token);
         logger.log(
           LogSource.NetworkRest,
           'joinChannel',