agora-appbuilder-core 4.1.21 → 4.1.22-beta.2

package/package.json

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

package/template/bridge/rtm/web/index.ts

@@ -72,12 +72,24 @@ export class RTMWebClient {
   private client: RTMClient;
   private appId: string;
   private userId: string;
-  private eventsMap = new Map<keyof NativeRTMClientEventMap, CallbackType>([
-    ['linkState', () => null],
-    ['storage', () => null],
-    ['presence', () => null],
-    ['message', () => null],
-  ]);
+  private eventsMap = new Map<keyof NativeRTMClientEventMap, Set<CallbackType>>(
+    [
+      ['linkState', new Set()],
+      ['storage', new Set()],
+      ['presence', new Set()],
+      ['message', new Set()],
+    ],
+  );
+
+  private emitEvent(event: keyof NativeRTMClientEventMap, data: any) {
+    const listeners = this.eventsMap.get(event);
+
+    if (!listeners) {
+      return;
+    }
+
+    listeners.forEach(listener => listener(data));
+  }
 
   constructor(appId: string, userId: string) {
     this.appId = appId;
@@ -97,7 +109,7 @@ export class RTMWebClient {
             nativeLinkStateMapping.IDLE,
           reasonCode: linkStatusReasonCodeMapping[data.reasonCode] || 0,
         };
-        (this.eventsMap.get('linkState') ?? (() => {}))(nativeState);
+        this.emitEvent('linkState', nativeState);
       });
 
       this.client.addEventListener('storage', data => {
@@ -108,7 +120,7 @@ export class RTMWebClient {
           data: convertWebToNativeMetadata(data.data),
           timestamp: data.timestamp,
         };
-        (this.eventsMap.get('storage') ?? (() => {}))(nativeStorageEvent);
+        this.emitEvent('storage', nativeStorageEvent);
       });
 
       this.client.addEventListener('presence', data => {
@@ -119,7 +131,7 @@ export class RTMWebClient {
           publisher: data.publisher,
           timestamp: data.timestamp,
         };
-        (this.eventsMap.get('presence') ?? (() => {}))(nativePresenceEvent);
+        this.emitEvent('presence', nativePresenceEvent);
       });
 
       this.client.addEventListener('message', data => {
@@ -129,7 +141,7 @@ export class RTMWebClient {
           messageType: nativeMessageEventTypeMapping[data.messageType],
           message: `${data.message}`,
         };
-        (this.eventsMap.get('message') ?? (() => {}))(nativeMessageEvent);
+        this.emitEvent('message', nativeMessageEvent);
       });
     } catch (error) {
       const contextError = new Error(
@@ -396,21 +408,18 @@ export class RTMWebClient {
     listener: (event: any) => void,
   ) {
     if (this.client) {
-      // Simply replace the handler in our map - web client listeners are fixed in constructor
-      this.eventsMap.set(event, listener as CallbackType);
+      // Web SDK listeners are fixed in the constructor; keep app-level
+      // subscribers multiplexed here.
+      this.eventsMap.get(event)?.add(listener as CallbackType);
     }
   }
 
   removeEventListener(
     event: keyof NativeRTMClientEventMap,
-    _listener: (event: any) => void,
+    listener: (event: any) => void,
   ) {
     if (this.client && this.eventsMap.has(event)) {
-      const prevListener = this.eventsMap.get(event);
-      if (prevListener) {
-        this.client.removeEventListener(event, prevListener);
-      }
-      this.eventsMap.set(event, () => null); // reset to no-op
+      this.eventsMap.get(event)?.delete(listener as CallbackType);
     }
   }
 
@@ -473,10 +482,10 @@ export class RTMWebClient {
 
   removeAllListeners() {
     this.eventsMap = new Map([
-      ['linkState', () => null],
-      ['storage', () => null],
-      ['presence', () => null],
-      ['message', () => null],
+      ['linkState', new Set()],
+      ['storage', new Set()],
+      ['presence', new Set()],
+      ['message', new Set()],
     ]);
     return this.client.removeAllListeners();
   }

package/template/customization-api/ai-agent.ts

@@ -0,0 +1,4 @@
+export {
+  default as AIAgentAudioVisualizer,
+  DisconnectedView as AIAgentDisconnectedView,
+} from '../src/ai-agent/components/AudioVisualizer';

package/template/customization-api/atoms.ts

@@ -8,3 +8,5 @@ export {default as TertiaryButton} from '../src/atoms/TertiaryButton';
 export {default as ActionMenu} from '../src/atoms/ActionMenu';
 export {default as IconButton} from '../src/atoms/IconButton';
 export {default as Dropdown} from '../src/atoms/Dropdown';
+export {default as Popup} from '../src/atoms/Popup';
+export {default as Tooltip} from '../src/atoms/Tooltip';

package/template/customization-api/customEvents.ts

@@ -5,10 +5,13 @@ import {
   PersistanceLevel,
   EventCallback,
 } from '../src/rtm-events-api';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../src/rtm-events-api/LocalEvents';
 
 // 2. Initialize with source "fpe"
 const customEvents = new Events(EventSource.fpe);
 
 // 3. export
-export {customEvents, PersistanceLevel};
+export {customEvents, PersistanceLevel, LocalEventEmitter, LocalEventsEnum};
 export type {EventCallback};

package/template/customization-api/index.ts

@@ -26,6 +26,7 @@ export * from './typeDefinition';
 export * from './utils';
 export * from './types';
 export * from './atoms';
+export * from './ai-agent';
 
 //TODO: hari remove later - used for simple-practice demo
 export * from './temp';

package/template/customization-api/typeDefinition.ts

@@ -53,6 +53,7 @@ export interface SidePanelItem {
   name: string;
   title: string;
   component: React.ComponentType;
+  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
 }
 
@@ -74,6 +75,10 @@ export type CustomLogger = (
 export interface CustomAgentInterfaceProps {
   connectionState: AIAgentState;
 }
+export interface CreateInterface extends BeforeAndAfterInterface {
+  headerRightSlot?: React.ComponentType;
+}
+
 export interface VideoCallInterface extends BeforeAndAfterInterface {
   // commented for v1 release
   topToolBar?: ToolbarType;
@@ -109,7 +114,7 @@ export type ComponentsInterface = {
   precall?: PreCallInterface;
   preferenceWrapper?: React.ComponentType;
   //precall?: React.ComponentType;
-  create?: React.ComponentType;
+  create?: React.ComponentType | CreateInterface;
   //share?: React.ComponentType;
   //join?: React.ComponentType;
   videoCall?: VideoCallInterface;

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: "",
   CHAT_APP_NAME: "",
   CHAT_URL: "",
-  CLI_VERSION: "3.1.21",
-  CORE_VERSION: "4.1.21",
+  CLI_VERSION: "3.1.22-beta.2",
+  CORE_VERSION: "4.1.22-beta.2",
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/components/CustomSidePanel.tsx

@@ -10,23 +10,18 @@
 *********************************************
 */
 import React from 'react';
-import {View, Text, StyleSheet, ScrollView} from 'react-native';
+import {View, StyleSheet, ScrollView} from 'react-native';
 import {isMobileUA, isWebInternal, useIsSmall} from '../utils/common';
 import CommonStyles from './CommonStyles';
-import SidePanelHeader, {
-  SidePanelStyles,
-} from '../subComponents/SidePanelHeader';
-import {useLayout} from '../utils/useLayout';
-import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 import useCaptionWidth from '../subComponents/caption/useCaptionWidth';
-import {useSidePanel} from '../utils/useSidePanel';
-import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {CustomSidePanelHeader} from '../pages/video-call/SidePanelHeader';
-
+import {useLayout} from '../utils/useLayout';
+import {getGridLayoutName} from '../pages/video-call/DefaultLayouts';
 export interface CustomSidePanelViewInterface {
   name: string;
   title?: string;
   content: React.ComponentType;
+  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
   showHeader?: boolean;
 }
@@ -37,12 +32,12 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
     showHeader = true,
     name,
     title,
+    headerRightSlot,
     onClose,
   } = props;
-  const {currentLayout} = useLayout();
   const {transcriptHeight} = useCaptionWidth();
-  const {setSidePanel} = useSidePanel();
   const isSmall = useIsSmall();
+  const {currentLayout} = useLayout();
 
   return (
     <View
@@ -57,13 +52,18 @@ const CustomSidePanelView = (props: CustomSidePanelViewInterface) => {
           : // desktop maximized
             CommonStyles.sidePanelContainerWeb,
         isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
-          ? {marginVertical: 4}
+          ? {marginTop: 4}
           : {},
         //@ts-ignore
         transcriptHeight && !isMobileUA() && {height: transcriptHeight},
       ]}>
       {showHeader && (
-        <CustomSidePanelHeader name={name} title={title} onClose={onClose} />
+        <CustomSidePanelHeader
+          name={name}
+          title={title}
+          headerRightSlot={headerRightSlot}
+          onClose={onClose}
+        />
       )}
       <ScrollView contentContainerStyle={[style.bodyContainer]}>
         {CustomSidePanelContent ? <CustomSidePanelContent /> : <></>}

package/template/src/components/RTMConfigure.tsx

@@ -950,6 +950,20 @@ const RtmConfigure = (props: any) => {
       }
     }
 
+    if (
+      typeof evt !== 'string' ||
+      evt.trim() === '' ||
+      typeof value === 'undefined'
+    ) {
+      logger.debug(
+        LogSource.Events,
+        'CUSTOM_EVENTS',
+        'Ignoring RTM payload: not an AppBuilder custom-event envelope',
+        {data, sender, ts},
+      );
+      return;
+    }
+
     try {
       let parsedValue;
       try {

package/template/src/components/participants/UserActionMenuOptions.tsx

@@ -87,6 +87,7 @@ interface UserActionMenuOptionsOptionsProps {
   spotlightUid?: UidType;
   setSpotlightUid?: (uid: UidType) => void;
   items?: UserActionMenuItemsConfig;
+  extraMenuItems?: ActionMenuItem[];
 }
 
 export default function UserActionMenuOptionsOptions(
@@ -102,7 +103,13 @@ export default function UserActionMenuOptionsOptions(
     useState(false);
   const [actionMenuitems, setActionMenuitems] = useState<ActionMenuItem[]>([]);
   const {setSidePanel} = useSidePanel();
-  const {user, actionMenuVisible, setActionMenuVisible, spotlightUid} = props;
+  const {
+    user,
+    actionMenuVisible,
+    setActionMenuVisible,
+    spotlightUid,
+    extraMenuItems,
+  } = props;
   const {currentLayout} = useLayout();
   const {pinnedUid, activeUids, customContent, secondaryPinnedUid} =
     useContent();
@@ -716,6 +723,24 @@ export default function UserActionMenuOptionsOptions(
       items.push(...customItems);
     }
 
+    if (extraMenuItems?.length) {
+      items.push(
+        ...extraMenuItems.map(item => ({
+          ...item,
+          closeActionMenu: () => {
+            item.closeActionMenu?.();
+            setActionMenuVisible(false);
+          },
+          onPress: item.onPress
+            ? () => {
+                item.onPress?.();
+                setActionMenuVisible(false);
+              }
+            : item.onPress,
+        })),
+      );
+    }
+
     items.sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
 
     setActionMenuitems(items);
@@ -729,6 +754,8 @@ export default function UserActionMenuOptionsOptions(
     secondaryPinnedUid,
     currentLayout,
     spotlightUid,
+    extraMenuItems,
+    setActionMenuVisible,
   ]);
 
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();

package/template/src/pages/Create.tsx

@@ -29,7 +29,6 @@ import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
 import useCreateRoom from '../utils/useCreateRoom';
 import {CreateProvider} from './create/useCreate';
-import useJoinRoom from '../utils/useJoinRoom';
 import {
   RoomInfoDefaultValue,
   useRoomInfo,
@@ -39,12 +38,10 @@ import Toggle from '../atoms/Toggle';
 import Card from '../atoms/Card';
 import Spacer from '../atoms/Spacer';
 import LinkButton from '../atoms/LinkButton';
-import StorageContext from '../components/StorageContext';
 import ThemeConfig from '../theme';
 import Tooltip from '../atoms/Tooltip';
 import ImageIcon from '../atoms/ImageIcon';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {randomNameGenerator} from '../utils';
 import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
 import IDPLogoutComponent from '../auth/IDPLogoutComponent';
 import isSDK from '../utils/isSDK';
@@ -67,25 +64,35 @@ import {LogSource, logger} from '../logger/AppBuilderLogger';
 import SDKEvents from '../utils/SdkEvents';
 
 const Create = () => {
-  const {CreateComponent} = useCustomization(data => {
-    let components: {
-      CreateComponent?: React.ElementType;
-    } = {};
-    if (
-      data?.components?.create &&
-      typeof data?.components?.create !== 'object'
-    ) {
+  const {CreateComponent, CreateHeaderRightSlotComponent} = useCustomization(
+    data => {
+      let components: {
+        CreateComponent?: React.ElementType;
+        CreateHeaderRightSlotComponent?: React.ElementType;
+      } = {};
       if (
         data?.components?.create &&
-        isValidReactComponent(data?.components?.create)
-      )
-        components.CreateComponent = data?.components?.create;
-    }
-    return components;
-  });
+        typeof data?.components?.create !== 'object'
+      ) {
+        if (
+          data?.components?.create &&
+          isValidReactComponent(data?.components?.create)
+        )
+          components.CreateComponent = data?.components?.create;
+      }
+      if (
+        data?.components?.create &&
+        typeof data?.components?.create === 'object' &&
+        data?.components?.create?.headerRightSlot &&
+        isValidReactComponent(data?.components?.create?.headerRightSlot)
+      ) {
+        components.CreateHeaderRightSlotComponent =
+          data?.components?.create?.headerRightSlot;
+      }
+      return components;
+    },
+  );
 
-  const useJoin = useJoinRoom();
-  const {setStore} = useContext(StorageContext);
   const {setGlobalErrorMessage} = useContext(ErrorContext);
   const history = useHistory();
   const [loading, setLoading] = useState(false);
@@ -313,6 +320,11 @@ const Create = () => {
                 <View>
                   <View style={style.logoContainerStyle}>
                     <Logo />
+                    {CreateHeaderRightSlotComponent ? (
+                      <CreateHeaderRightSlotComponent />
+                    ) : (
+                      <></>
+                    )}
                     {isMobileUA() ? (
                       <IDPLogoutComponent
                         containerStyle={{marginTop: 0, marginRight: 0}}

package/template/src/pages/video-call/ActionSheet.native.tsx

@@ -291,6 +291,8 @@ const ActionSheet = props => {
               isCustomSidePanel={true}
               customSidePanelProps={{
                 title: sidePanelArray[customSidePanelIndex]?.title,
+                headerRightSlot:
+                  sidePanelArray[customSidePanelIndex]?.headerRightSlot,
                 onClose: sidePanelArray[customSidePanelIndex]?.onClose,
                 name: sidePanelArray[customSidePanelIndex]?.name,
               }}

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

@@ -326,6 +326,8 @@ const ActionSheet = props => {
                 isCustomSidePanel={true}
                 customSidePanelProps={{
                   title: sidePanelArray[customSidePanelIndex]?.title,
+                  headerRightSlot:
+                    sidePanelArray[customSidePanelIndex]?.headerRightSlot,
                   onClose: sidePanelArray[customSidePanelIndex]?.onClose,
                   name: sidePanelArray[customSidePanelIndex]?.name,
                 }}

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

@@ -16,6 +16,7 @@ const ActionSheetHandle = (props: {
   isCustomSidePanel?: boolean;
   customSidePanelProps?: {
     title: string;
+    headerRightSlot?: React.ReactNode;
     onClose?: () => void;
     name: string;
   };

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

@@ -208,6 +208,7 @@ export const VBHeader = () => {
 
 export const CustomSidePanelHeader = (props: {
   title: string;
+  headerRightSlot?: React.ReactNode;
   onClose?: () => void;
   name: string;
 }) => {
@@ -217,6 +218,7 @@ export const CustomSidePanelHeader = (props: {
       centerComponent={
         <Text style={SidePanelStyles.heading}>{props?.title}</Text>
       }
+      trailingComponent={props?.headerRightSlot}
       trailingIconName="close"
       trailingIconOnPress={() => {
         setSidePanel(SidePanelType.None);
@@ -224,7 +226,7 @@ export const CustomSidePanelHeader = (props: {
           props?.onClose && props?.onClose();
         } catch (error) {
           console.error(
-            `Error on calling onClose in custom side panel ${name}`,
+            `Error on calling onClose in custom side panel ${props.name}`,
           );
         }
       }}

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

@@ -400,6 +400,9 @@ const VideoCallScreen = () => {
                   <CustomSidePanelView
                     content={SidePanelArray[customSidePanelIndex]?.component}
                     title={SidePanelArray[customSidePanelIndex]?.title}
+                    headerRightSlot={
+                      SidePanelArray[customSidePanelIndex]?.headerRightSlot
+                    }
                     name={SidePanelArray[customSidePanelIndex]?.name}
                     onClose={SidePanelArray[customSidePanelIndex]?.onClose}
                   />

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

@@ -25,6 +25,7 @@ import {
 } from './DefaultLayouts';
 import IconButton from '../../atoms/IconButton';
 import UserActionMenuOptionsOptions from '../../components/participants/UserActionMenuOptions';
+import type {ActionMenuItem} from '../../atoms/ActionMenu';
 import {
   isMobileUA,
   isValidReactComponent,
@@ -60,6 +61,7 @@ export interface VideoRendererProps {
   CustomChild?: React.ComponentType;
   avatarRadius?: number;
   hideMenuOptions?: boolean;
+  extraMenuItems?: ActionMenuItem[];
   containerStyle?: ViewStyle;
   innerContainerStyle?: ViewStyle;
 }
@@ -69,6 +71,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   CustomChild,
   avatarRadius = 100,
   hideMenuOptions = false,
+  extraMenuItems,
   containerStyle = {},
   innerContainerStyle = {},
 }) => {
@@ -214,6 +217,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
         from={'video-tile'}
         setSpotlightUid={setSpotlightUid}
         spotlightUid={spotlightUid}
+        extraMenuItems={extraMenuItems}
       />
       <PlatformWrapper isHovered={isHovered} setIsHovered={setIsHovered}>
         <View

package/template/src/subComponents/SidePanelHeader.tsx

@@ -13,6 +13,7 @@ export interface SidePanelHeaderProps {
   leadingIconOnPress?: () => void;
   trailingIconName?: keyof IconsInterface;
   trailingIconOnPress?: () => void;
+  trailingComponent?: React.ReactNode;
   trailingIconName2?: keyof IconsInterface;
   trailingIconOnPress2?: () => void;
   isChat?: boolean;
@@ -56,9 +57,21 @@ const SidePanelHeader = React.forwardRef<View, SidePanelHeaderProps>(
             <View style={{width: 30, height: 'auto'}}></View>
           ) : null}
           {props?.centerComponent ? props.centerComponent : null}
-          <View style={props?.trailingIconName2 && SidePanelStyles.row}>
+          <View
+            style={
+              (props?.trailingIconName2 || props?.trailingComponent) &&
+              SidePanelStyles.row
+            }>
+            {props?.trailingComponent ? props.trailingComponent : null}
             {props?.trailingIconName ? (
-              <View ref={ref} collapsable={false} style={{flex: 1}}>
+              <View
+                ref={ref}
+                collapsable={false}
+                style={
+                  props?.trailingIconName2 || props?.trailingComponent
+                    ? {}
+                    : {flex: 1}
+                }>
                 <IconButton
                   hoverEffect={true}
                   hoverEffectStyle={{
@@ -116,6 +129,7 @@ export const SidePanelStyles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: $config.CARD_LAYER_3_COLOR,
     position: 'relative',
+    zIndex: 1000,
   },
   chatPadding: {
     paddingHorizontal: 16,