agora-appbuilder-core 4.1.10-beta.1 → 4.1.11-beta.2

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

@@ -11,14 +11,9 @@
 */
 
 ('use strict');
-import {type RTMClient} from 'agora-react-native-rtm';
+import RtmEngine from 'agora-react-native-rtm';
 import RTMEngine from '../rtm/RTMEngine';
-import {
-  EventUtils,
-  RTM_EVENT_SCOPE,
-  RTM_GLOBAL_SCOPE_EVENTS,
-  RTM_SESSION_SCOPE_EVENTS,
-} from '../rtm-events';
+import {EventUtils} from '../rtm-events';
 import {
   ReceiverUid,
   EventCallback,
@@ -28,17 +23,6 @@ import {
 } from './types';
 import {adjustUID} from '../rtm/utils';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
-import {nativeChannelTypeMapping} from '../../bridge/rtm/web/Types';
-
-function getRTMEventScope(eventName: string): RTM_EVENT_SCOPE {
-  if (RTM_GLOBAL_SCOPE_EVENTS.includes(eventName)) {
-    return RTM_EVENT_SCOPE.GLOBAL;
-  }
-  if (RTM_SESSION_SCOPE_EVENTS.includes(eventName)) {
-    return RTM_EVENT_SCOPE.SESSION;
-  }
-  return RTM_EVENT_SCOPE.LOCAL;
-}
 
 class Events {
   private source: EventSource = EventSource.core;
@@ -56,24 +40,12 @@ class Events {
    * @param {String} payload to be stored in rtm Attribute value
    * @api private
    */
-  private _persist = async (evt: string, payload: string, roomKey?: string) => {
-    const rtmEngine: RTMClient = RTMEngine.getInstance().engine;
-    const userId = RTMEngine.getInstance().localUid;
+  private _persist = async (evt: string, payload: string) => {
+    const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
     try {
-      // const roomAwareKey = roomKey ? `${roomKey}__${evt}` : evt;
-      // console.log(
-      //   'session-attributes setting roomAwareKey as: ',
-      //   roomAwareKey,
-      //   evt,
-      // );
       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,
@@ -96,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;
   };
@@ -125,23 +97,16 @@ class Events {
    *
    * @param {Object} rtmPayload payload to be sent across
    * @param {ReceiverUid} toUid uid or uids[] of user
-   * @param {string} channelId optional specific channel ID, defaults to primary channel
    * @api private
    */
   private _send = async (
     rtmPayload: RTMAttributePayload,
     toUid?: ReceiverUid,
-    toChannelId?: string,
   ) => {
-    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' ||
@@ -154,22 +119,8 @@ class Events {
         'case 1 executed - sending in channel',
       );
       try {
-        logger.debug(
-          LogSource.Events,
-          'CUSTOM_EVENTS',
-          'event is sent to targetChannelId ->',
-          toChannelId,
-        );
-        if (!toChannelId || toChannelId.trim() === '') {
-          throw new Error(
-            'Channel ID is not set. Cannot send channel messages.',
-          );
-        }
-        await rtmEngine.publish(toChannelId, text, {
-          channelType: nativeChannelTypeMapping.MESSAGE, // 1 is message
-          // customType: 'PlainText',
-          // messageType: RtmMessageType.string,
-        });
+        const channelId = RTMEngine.getInstance().channelUid;
+        await rtmEngine.sendMessageByChannelId(channelId, text);
       } catch (error) {
         logger.error(
           LogSource.Events,
@@ -189,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(
@@ -213,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,
@@ -251,10 +184,7 @@ class Events {
     }
   };
 
-  private _sendAsChannelAttribute = async (
-    rtmPayload: RTMAttributePayload,
-    toChannelId?: string,
-  ) => {
+  private _sendAsChannelAttribute = async (rtmPayload: RTMAttributePayload) => {
     // Case 1: send to channel
     logger.debug(
       LogSource.Events,
@@ -262,28 +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;
-
-      if (!toChannelId) {
-        throw new Error('Channel ID is not set. Cannot send channel messages.');
-      }
-
+      const rtmEngine: RtmEngine = RTMEngine.getInstance().engine;
+      const channelId = RTMEngine.getInstance().channelUid;
       const rtmAttribute = [{key: rtmPayload.evt, value: rtmPayload.value}];
-      await rtmEngine.storage.setChannelMetadata(
-        toChannelId,
-        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,
@@ -308,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);
@@ -324,8 +238,6 @@ class Events {
         'Error: events.on',
         error,
       );
-      // Return no-op function on error to prevent undefined issues
-      return () => {};
     }
   };
 
@@ -341,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);
@@ -379,7 +287,6 @@ class Events {
    * @param {String} payload (optional) Additional data to be sent along with the event.
    * @param {Enum} persistLevel (optional) set different levels of persistance. Default value is Level 1
    * @param {ReceiverUid} receiver (optional) uid or uid array. Default mode sends message in channel.
-   * @param {String} channelId (optional) specific channel to send to, defaults to primary channel.
    * @api public
    * */
   send = async (
@@ -387,34 +294,17 @@ class Events {
     payload: string = '',
     persistLevel: PersistanceLevel = PersistanceLevel.None,
     receiver: ReceiverUid = -1,
-    toChannelId?: string,
   ) => {
-    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;
     }
 
-    // Add meta data
-    let currentEventScope = getRTMEventScope(eventName);
-    let currentChannelId = RTMEngine.getInstance().getActiveChannelId();
-    let currentRoomKey = RTMEngine.getInstance().getActiveChannelName();
-
     const persistValue = JSON.stringify({
       payload,
       persistLevel,
       source: this.source,
-      _scope: currentEventScope,
-      _channelId: currentChannelId,
     });
+
     const rtmPayload: RTMAttributePayload = {
       evt: eventName,
       value: persistValue,
@@ -425,16 +315,9 @@ class Events {
       persistLevel === PersistanceLevel.Session
     ) {
       try {
-        await this._persist(
-          eventName,
-          persistValue,
-          persistLevel === PersistanceLevel.Session
-            ? currentRoomKey
-            : undefined,
-        );
+        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 {
@@ -444,20 +327,18 @@ class Events {
         `sending event -> ${eventName}`,
         persistValue,
       );
-      const targetChannelId = toChannelId || currentChannelId;
       if (persistLevel === PersistanceLevel.Channel) {
-        await this._sendAsChannelAttribute(rtmPayload, targetChannelId);
+        await this._sendAsChannelAttribute(rtmPayload);
       } else {
-        await this._send(rtmPayload, receiver, targetChannelId);
+        await this._send(rtmPayload, receiver);
       }
     } catch (error) {
       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
     }
   };
 }

package/template/src/subComponents/ChatBubble.tsx

@@ -52,7 +52,6 @@ import {useChatConfigure} from '../../src/components/chat/chatConfigure';
 import Tooltip from '../../src/atoms/Tooltip';
 import {MoreMessageOptions} from './chat/ChatQuickActionsMenu';
 import {EMessageStatus} from '../../src/ai-agent/components/AgentControls/message';
-import {useMainRoomUserDisplayName} from '../rtm/hooks/useMainRoomUserDisplayName';
 
 type AttachmentBubbleProps = {
   fileName: string;
@@ -363,7 +362,6 @@ const ChatBubble = (props: ChatBubbleProps) => {
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
-  const getDisplayName = useMainRoomUserDisplayName();
 
   const getUsername = () => {
     if (isLocal) {
@@ -372,7 +370,9 @@ const ChatBubble = (props: ChatBubbleProps) => {
     if (remoteUIConfig?.username) {
       return trimText(remoteUIConfig?.username);
     }
-    return getDisplayName(uid);
+    return defaultContent[uid]?.name
+      ? trimText(defaultContent[uid].name)
+      : remoteUserDefaultLabel;
   };
 
   return props?.render ? (

package/template/src/subComponents/ChatContainer.tsx

@@ -27,7 +27,7 @@ import {
 } from 'react-native';
 import {RFValue} from 'react-native-responsive-fontsize';
 import ChatBubble from './ChatBubble';
-import ChatContext, {ChatBubbleProps} from '../components/ChatContext';
+import {ChatBubbleProps} from '../components/ChatContext';
 import {
   DispatchContext,
   ContentInterface,
@@ -59,7 +59,6 @@ import {
 } from '../language/default-labels/videoCallScreenLabels';
 import CommonStyles from '../components/CommonStyles';
 import PinnedMessage from './chat/PinnedMessage';
-import ChatAnnouncementView from './chat/ChatAnnouncementView';
 
 /**
  * Chat container is the component which renders all the chat messages
@@ -72,7 +71,6 @@ const ChatContainer = (props?: {
   const info1 = useString<boolean>(groupChatWelcomeContent);
   const [scrollToEnd, setScrollToEnd] = useState(false);
   const {dispatch} = useContext(DispatchContext);
-  const {syncUserState} = useContext(ChatContext);
   const [grpUnreadCount, setGrpUnreadCount] = useState(0);
   const [privateUnreadCount, setPrivateUnreadCount] = useState(0);
   const {defaultContent} = useContent();
@@ -120,18 +118,16 @@ const ChatContainer = (props?: {
       });
       //Once message is seen, reset lastMessageTimeStamp.
       //so whoever has unread count will show in the top of participant list
-      // updateRenderListState(privateChatUser, {lastMessageTimeStamp: 0});
-      syncUserState(privateChatUser, {lastMessageTimeStamp: 0});
+      updateRenderListState(privateChatUser, {lastMessageTimeStamp: 0});
     }
   }, [privateChatUser]);
 
-  // We will be using syncRoomusers
-  // const updateRenderListState = (
-  //   uid: number,
-  //   data: Partial<ContentInterface>,
-  // ) => {
-  //   dispatch({type: 'UpdateRenderList', value: [uid, data]});
-  // };
+  const updateRenderListState = (
+    uid: number,
+    data: Partial<ContentInterface>,
+  ) => {
+    dispatch({type: 'UpdateRenderList', value: [uid, data]});
+  };
 
   const onScroll = event => {
     setScrollOffset(event.nativeEvent.contentOffset.y);
@@ -253,13 +249,7 @@ const ChatContainer = (props?: {
                     </Text>
                   </View>
                 ) : null}
-
-                {message?.announcement ? (
-                  <ChatAnnouncementView
-                    message={message.msg}
-                    announcement={message.announcement}
-                  />
-                ) : !message?.hide ? (
+                {!message?.hide ? (
                   <ChatBubbleComponent
                     isLocal={localUid === message.uid}
                     isSameUser={

package/template/src/subComponents/LocalAudioMute.tsx

@@ -85,7 +85,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     local.permissionStatus === PermissionState.REJECTED ||
     local.permissionStatus === PermissionState.GRANTED_FOR_CAM_ONLY;
 
-  const onPress = async () => {
+  const onPress = () => {
     logger.log(
       LogSource.Internals,
       'LOCAL_MUTE',
@@ -95,7 +95,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
         permissionDenied,
       },
     );
-    await localMute(MUTE_LOCAL_TYPE.audio);
+    localMute(MUTE_LOCAL_TYPE.audio);
   };
   const audioLabel = permissionDenied
     ? micButtonLabel(I18nDeviceStatus.PERMISSION_DENIED)

package/template/src/subComponents/LocalVideoMute.tsx

@@ -79,7 +79,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   );
 
   const lstooltip = useString<boolean>(livestreamingCameraTooltipText);
-  const onPress = async () => {
+  const onPress = () => {
     //if screensharing is going on native - to turn on video screenshare should be turn off
     //show confirm popup to stop the screenshare
     logger.log(
@@ -91,7 +91,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
         permissionDenied,
       },
     );
-    await localMute(MUTE_LOCAL_TYPE.video);
+    localMute(MUTE_LOCAL_TYPE.video);
   };
   const isVideoEnabled = local.video === ToggleState.enabled;
 

package/template/src/subComponents/SidePanelEnum.tsx

@@ -16,5 +16,4 @@ export enum SidePanelType {
   Settings = 'Settings',
   Transcript = 'Transcript',
   VirtualBackground = 'VirtualBackground',
-  BreakoutRoom = 'BreakoutRoom',
 }

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

@@ -8,7 +8,11 @@ import {isWebInternal} from '../../utils/common';
 import useStreamMessageUtils from './useStreamMessageUtils';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {useString} from '../../utils/useString';
-import {sttSettingSpokenLanguageText} from '../../language/default-labels/videoCallScreenLabels';
+import {useLocalUid} from '../../../agora-rn-uikit';
+import {
+  sttSettingSpokenLanguageText,
+  sttSettingTranslationLanguageText,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 export type WebStreamMessageArgs = [number, Uint8Array];
 export type NativeStreamMessageArgs = [
@@ -33,13 +37,22 @@ const Caption: React.FC<CaptionProps> = ({
   const {RtcEngineUnsafe} = useRtc();
   const {
     isLangChangeInProgress,
+    isTranslationChangeInProgress,
     captionObj, //state for current live caption for all users
     isSTTListenerAdded,
     setIsSTTListenerAdded,
     activeSpeakerRef,
     prevSpeakerRef,
+    getBotOwnerUid,
+    isSTTActive,
+    translationConfig,
+    remoteSpokenLanguages,
   } = useCaption();
+  const currentUserUid = useLocalUid();
   const ssLabel = useString(sttSettingSpokenLanguageText)();
+  const stLabel = useString<boolean>(sttSettingTranslationLanguageText)(
+    isSTTActive,
+  );
   const {streamMessageCallback} = useStreamMessageUtils();
   const {defaultContent} = useContent();
 
@@ -66,18 +79,20 @@ const Caption: React.FC<CaptionProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (isLangChangeInProgress)
+  if (isLangChangeInProgress || isTranslationChangeInProgress) {
     return (
       <Loading
-        text={ssLabel}
+        text={stLabel}
         background="transparent"
         indicatorColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
         textColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
       />
     );
+  }
 
-  console.log('current speaker uid', activeSpeakerRef.current);
-  console.log('prev current uid ', prevSpeakerRef.current);
+  console.log('[STT_PER_USER_BOT]  speaker uid', activeSpeakerRef.current);
+  console.log('[STT_PER_USER_BOT] prev current uid ', prevSpeakerRef.current);
+  console.log('[STT_PER_USER_BOT] captionObj ', captionObj);
 
   const speakerCount = prevSpeakerRef.current === '' ? 1 : 2;
 
@@ -104,8 +119,12 @@ const Caption: React.FC<CaptionProps> = ({
           {captionObj[prevSpeakerRef.current] &&
           captionObj[prevSpeakerRef.current].text ? (
             <CaptionText
-              user={defaultContent[prevSpeakerRef.current].name || 'Speaker'}
+              user={
+                defaultContent[getBotOwnerUid(prevSpeakerRef.current)]?.name ||
+                'Speaker'
+              }
               value={captionObj[prevSpeakerRef.current].text}
+              translations={captionObj[prevSpeakerRef.current].translations}
               activeSpeakersCount={speakerCount}
               isActiveSpeaker={false}
               activelinesAvailable={activelinesAvailable}
@@ -114,6 +133,15 @@ const Caption: React.FC<CaptionProps> = ({
               setInActiveLinesAvaialble={setInActiveLinesAvaialble}
               captionUserStyle={captionUserStyle}
               captionTextStyle={captionTextStyle}
+              speakerUid={getBotOwnerUid(prevSpeakerRef.current)}
+              userLocalUid={currentUserUid}
+              spokenLanguageCode={
+                getBotOwnerUid(prevSpeakerRef.current) === currentUserUid
+                  ? translationConfig.source[0]
+                  : remoteSpokenLanguages[
+                      getBotOwnerUid(prevSpeakerRef.current)
+                    ]
+              }
             />
           ) : (
             <></>
@@ -121,8 +149,12 @@ const Caption: React.FC<CaptionProps> = ({
           {captionObj[activeSpeakerRef.current] &&
           captionObj[activeSpeakerRef.current].text ? (
             <CaptionText
-              user={defaultContent[activeSpeakerRef.current].name || 'Speaker'}
+              user={
+                defaultContent[getBotOwnerUid(activeSpeakerRef.current)]
+                  ?.name || 'Speaker'
+              }
               value={captionObj[activeSpeakerRef.current].text}
+              translations={captionObj[activeSpeakerRef.current].translations}
               activeSpeakersCount={speakerCount}
               isActiveSpeaker={true}
               activelinesAvailable={activelinesAvailable}
@@ -131,6 +163,15 @@ const Caption: React.FC<CaptionProps> = ({
               setInActiveLinesAvaialble={setInActiveLinesAvaialble}
               captionUserStyle={captionUserStyle}
               captionTextStyle={captionTextStyle}
+              speakerUid={getBotOwnerUid(activeSpeakerRef.current)}
+              userLocalUid={currentUserUid}
+              spokenLanguageCode={
+                getBotOwnerUid(activeSpeakerRef.current) === currentUserUid
+                  ? translationConfig.source[0]
+                  : remoteSpokenLanguages[
+                      getBotOwnerUid(activeSpeakerRef.current)
+                    ]
+              }
             />
           ) : (
             <></>