agora-appbuilder-core 4.1.22-beta.3 → 4.1.22-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.22-beta.3",
+  "version": "4.1.22-beta.5",
   "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(
@@ -177,8 +189,11 @@ export class RTMWebClient {
         });
         // Map native signature to web signature
         return this.client.storage.setUserMetadata(validatedItems, {
-          addTimeStamp: options?.addTimeStamp || true,
-          addUserId: options?.addUserId || true,
+          userId: options?.userId,
+          majorRevision: options?.majorRevision,
+          lockName: options?.lockName,
+          addTimeStamp: options?.addTimeStamp ?? true,
+          addUserId: options?.addUserId ?? true,
         });
       },
 
@@ -396,21 +411,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 +485,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.22-beta.3",
-  CORE_VERSION: "4.1.22-beta.3",
+  CLI_VERSION: "3.1.22-beta.5",
+  CORE_VERSION: "4.1.22-beta.5",
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/components/Controls.tsx

@@ -125,6 +125,9 @@ import {
 import ViewTextTracksModal from './text-tracks/ViewTextTracksModal';
 import LiveReactionButton from './reactions/LiveReactionButton';
 
+const getWhiteboardActivePayload = (status: boolean, channel?: string) =>
+  JSON.stringify({status, channel});
+
 export const useToggleWhiteboard = () => {
   const {
     whiteboardActive,
@@ -135,6 +138,9 @@ export const useToggleWhiteboard = () => {
   const {setCustomContent} = useContent();
   const {setLayout} = useLayout();
   const {dispatch} = useContext(DispatchContext);
+  const {
+    data: {channel},
+  } = useRoomInfo();
   return () => {
     if ($config.ENABLE_WHITEBOARD) {
       if (whiteboardActive) {
@@ -143,7 +149,7 @@ export const useToggleWhiteboard = () => {
         setLayout('grid');
         events.send(
           EventNames.WHITEBOARD_ACTIVE,
-          JSON.stringify({status: false}),
+          getWhiteboardActivePayload(false, channel),
           PersistanceLevel.Session,
         );
       } else {
@@ -156,7 +162,7 @@ export const useToggleWhiteboard = () => {
         setLayout('pinned');
         events.send(
           EventNames.WHITEBOARD_ACTIVE,
-          JSON.stringify({status: true}),
+          getWhiteboardActivePayload(true, channel),
           PersistanceLevel.Session,
         );
       }
@@ -169,7 +175,7 @@ export const WhiteboardListener = () => {
   const {setCustomContent} = useContent();
   const {currentLayout, setLayout} = useLayout();
   const {
-    data: {isHost},
+    data: {channel, isHost},
     isWhiteBoardOn,
   } = useRoomInfo();
 
@@ -248,7 +254,7 @@ export const WhiteboardListener = () => {
         triggerEvent &&
           events.send(
             EventNames.WHITEBOARD_ACTIVE,
-            JSON.stringify({status: false}),
+            getWhiteboardActivePayload(false, channel),
             PersistanceLevel.Session,
           );
       } else {
@@ -262,7 +268,7 @@ export const WhiteboardListener = () => {
         triggerEvent &&
           events.send(
             EventNames.WHITEBOARD_ACTIVE,
-            JSON.stringify({status: true}),
+            getWhiteboardActivePayload(true, channel),
             PersistanceLevel.Session,
           );
       }
@@ -340,7 +346,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
 
   // const {start, restart} = useSTTAPI();
   const {
-    data: {isHost},
+    data: {channel, isHost},
   } = useRoomInfo();
   const {setShowInvitePopup, setShowStopRecordingPopup, setShowLayoutOption} =
     useVideoCall();
@@ -471,7 +477,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
         triggerEvent &&
           events.send(
             EventNames.WHITEBOARD_ACTIVE,
-            JSON.stringify({status: false}),
+            getWhiteboardActivePayload(false, channel),
             PersistanceLevel.Session,
           );
       } else {
@@ -485,7 +491,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
         triggerEvent &&
           events.send(
             EventNames.WHITEBOARD_ACTIVE,
-            JSON.stringify({status: true}),
+            getWhiteboardActivePayload(true, channel),
             PersistanceLevel.Session,
           );
       }

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/EventsConfigure.tsx

@@ -243,11 +243,12 @@ const EventsConfigure: React.FC<Props> = ({
     defaultContentRef.current.defaultContent = defaultContent;
   }, [defaultContent]);
   const {
-    data: {isHost, roomId},
+    data: {channel, isHost, roomId},
     roomPreference: {userRemovalTimeout},
   } = useRoomInfo();
   const {setRoomInfo} = useSetRoomInfo();
   const isHostRef = React.useRef(isHost);
+  const channelRef = React.useRef(channel);
   const {permissionStatus} = useLocalUserInfo();
   const permissionStatusRef = React.useRef(permissionStatus);
   const {waitingRoomUids, waitingRoomRef} = useWaitingRoomContext();
@@ -263,6 +264,13 @@ const EventsConfigure: React.FC<Props> = ({
   useEffect(() => {
     isHostRef.current = isHost;
   }, [isHost]);
+  useEffect(() => {
+    channelRef.current = channel;
+  }, [channel]);
+  const isDifferentWhiteboardChannel = (eventChannel?: string) => {
+    const currentChannel = channelRef.current;
+    return !!currentChannel && eventChannel !== currentChannel;
+  };
 
   useEffect(() => {
     permissionStatusRef.current = permissionStatus;
@@ -492,6 +500,15 @@ const EventsConfigure: React.FC<Props> = ({
 
     events.on(EventNames.WHITEBOARD_ACTIVE, ({payload}) => {
       const data = JSON.parse(payload);
+      if (isDifferentWhiteboardChannel(data?.channel)) {
+        logger.debug(
+          LogSource.Internals,
+          'WHITEBOARD',
+          'Ignoring whiteboard state for a different channel',
+          {eventChannel: data?.channel, currentChannel: channelRef.current},
+        );
+        return;
+      }
       if (data && data?.status) {
         if (
           ($config.ENABLE_WAITING_ROOM && !isHostRef.current) ||
@@ -529,6 +546,15 @@ const EventsConfigure: React.FC<Props> = ({
 
     events.on(EventNames.BOARD_COLOR_CHANGED, ({payload}) => {
       const data = JSON.parse(payload);
+      if (isDifferentWhiteboardChannel(data?.channel)) {
+        logger.debug(
+          LogSource.Internals,
+          'WHITEBOARD',
+          'Ignoring whiteboard board color for a different channel',
+          {eventChannel: data?.channel, currentChannel: channelRef.current},
+        );
+        return;
+      }
       if (data?.boardColor) {
         if (
           ($config.ENABLE_WAITING_ROOM && !isHostRef.current) ||
@@ -550,6 +576,15 @@ const EventsConfigure: React.FC<Props> = ({
 
     events.on(EventNames.WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION, ({payload}) => {
       const data = JSON.parse(payload);
+      if (isDifferentWhiteboardChannel(data?.channel)) {
+        logger.debug(
+          LogSource.Internals,
+          'WHITEBOARD',
+          'Ignoring whiteboard upload position for a different channel',
+          {eventChannel: data?.channel, currentChannel: channelRef.current},
+        );
+        return;
+      }
       if (
         ($config.ENABLE_WAITING_ROOM && !isHostRef.current) ||
         $config.AUTO_CONNECT_RTM

package/template/src/components/RTMConfigure.tsx

@@ -816,6 +816,7 @@ const RtmConfigure = (props: any) => {
       const uid = parseInt(userId, 10);
       const screenUidItem = attr?.items?.find(item => item.key === 'screenUid');
       const isHostItem = attr?.items?.find(item => item.key === 'isHost');
+      const nameItem = attr?.items?.find(item => item.key === 'name');
       const screenUid = screenUidItem?.value
         ? parseInt(screenUidItem.value, 10)
         : undefined;
@@ -827,6 +828,7 @@ const RtmConfigure = (props: any) => {
         type: uid === parseInt(RECORDING_BOT_UID, 10) ? 'bot' : 'rtc',
         uid,
         offline: false,
+        ...(nameItem?.value ? {name: nameItem.value} : {}),
         isHost: isHostItem?.value || false,
         lastMessageTimeStamp: 0,
       };
@@ -950,6 +952,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/components/whiteboard/WhiteboardButton.tsx

@@ -19,7 +19,7 @@ const WhiteboardButton = () => {
     leaveWhiteboardRoom,
   } = useContext(whiteboardContext);
   const {
-    data: {isHost},
+    data: {channel, isHost},
   } = useRoomInfo();
 
   const {setLayout, currentLayout} = useLayout();
@@ -46,7 +46,7 @@ const WhiteboardButton = () => {
       triggerEvent &&
         customEvents.send(
           EventNames.WHITEBOARD_ACTIVE,
-          JSON.stringify({status: false}),
+          JSON.stringify({status: false, channel}),
           PersistanceLevel.Session,
         );
     } else {
@@ -55,7 +55,7 @@ const WhiteboardButton = () => {
       triggerEvent &&
         customEvents.send(
           EventNames.WHITEBOARD_ACTIVE,
-          JSON.stringify({status: true}),
+          JSON.stringify({status: true, channel}),
           PersistanceLevel.Session,
         );
     }

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

@@ -140,7 +140,7 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
 
   const [name] = useUserName();
   const {
-    data: {isHost, whiteboard: {room_token, room_uuid} = {}},
+    data: {channel, isHost, whiteboard: {room_token, room_uuid} = {}},
     boardColor: boardColorRemote,
     whiteboardLastImageUploadPosition: whiteboardLastImageUploadPositionRemote,
   } = useRoomInfo();
@@ -335,7 +335,7 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
      */
     events.send(
       EventNames.WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION,
-      JSON.stringify({height: height || 0}),
+      JSON.stringify({height: height || 0, channel}),
       PersistanceLevel.Session,
     );
   };

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,

package/template/.eslintrc.js

@@ -1,20 +0,0 @@
-/*
-********************************************
- Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
-*********************************************
-*/
-module.exports = {
-  root: true,
-  extends: '@react-native',
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
-  globals: {
-    $config: true,
-  },
-};

package/template/.prettierrc.js

@@ -1,18 +0,0 @@
-/*
-********************************************
- Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
-*********************************************
-*/
-module.exports = {
-  arrowParens: 'avoid',
-  bracketSameLine: true,
-  bracketSpacing: false,
-  singleQuote: true,
-  trailingComma: 'all',
-};

package/template/.watchmanconfig

@@ -1 +0,0 @@
-{}

package/template/config.json

@@ -1,101 +0,0 @@
-{
-  "PROJECT_ID": "49c705c1c9efb71000d7",
-  "APP_ID": "a569f8fb0309417780b793786b534a86",
-  "PRODUCT_ID": "helloworld",
-  "APP_NAME": "HelloWorld",
-  "LOGO": "data:image/png;base64,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",
-  "ICON": "logoSquare.png",
-  "FRONTEND_ENDPOINT": "https://app-builder-core-git-preprod-agoraio.vercel.app",
-  "BACKEND_ENDPOINT": "https://managedservices-preprod.rteappbuilder.com",
-  "PSTN": true,
-  "PRECALL": true,
-  "CHAT": true,
-  "CLOUD_RECORDING": true,
-  "RECORDING_MODE": "MIX",
-  "SCREEN_SHARING": true,
-  "LANDING_SUB_HEADING": "The Real-Time Engagement Platform",
-  "ENCRYPTION_ENABLED": true,
-  "ENABLE_GOOGLE_OAUTH": false,
-  "ENABLE_APPLE_OAUTH": false,
-  "ENABLE_SLACK_OAUTH": false,
-  "ENABLE_MICROSOFT_OAUTH": false,
-  "GOOGLE_CLIENT_ID": "",
-  "MICROSOFT_CLIENT_ID": "",
-  "SLACK_CLIENT_ID": "",
-  "APPLE_CLIENT_ID": "",
-  "BUCKET_NAME": "",
-  "BUCKET_ACCESS_KEY": "",
-  "BUCKET_ACCESS_SECRET": "",
-  "GOOGLE_CLIENT_SECRET": "",
-  "MICROSOFT_CLIENT_SECRET": "",
-  "SLACK_CLIENT_SECRET": "",
-  "APPLE_PRIVATE_KEY": "",
-  "APPLE_KEY_ID": "",
-  "APPLE_TEAM_ID": "",
-  "PSTN_EMAIL": "",
-  "PSTN_ACCOUNT": "",
-  "PSTN_PASSWORD": "",
-  "RECORDING_REGION": 0,
-  "GEO_FENCING": true,
-  "GEO_FENCING_INCLUDE_AREA": "GLOBAL",
-  "GEO_FENCING_EXCLUDE_AREA": "CHINA",
-  "LOG_ENABLED": true,
-  "EVENT_MODE": false,
-  "RAISE_HAND": false,
-  "AUDIO_ROOM": false,
-  "BG": "",
-  "PRIMARY_FONT_COLOR": "#363636",
-  "SECONDARY_FONT_COLOR": "#FFFFFF",
-  "PROFILE": "720p_3",
-  "SCREEN_SHARE_PROFILE": "1080p_2",
-  "ICON_TEXT": true,
-  "PRIMARY_ACTION_BRAND_COLOR": "#099DFD",
-  "PRIMARY_ACTION_TEXT_COLOR": "#FFFFFF",
-  "SECONDARY_ACTION_COLOR": "#FFFFFF",
-  "FONT_COLOR": "#FFFFFF",
-  "BACKGROUND_COLOR": "#111111",
-  "VIDEO_AUDIO_TILE_COLOR": "#222222",
-  "VIDEO_AUDIO_TILE_OVERLAY_COLOR": "#000004",
-  "VIDEO_AUDIO_TILE_TEXT_COLOR": "#FFFFFF",
-  "VIDEO_AUDIO_TILE_AVATAR_COLOR": "#BDD0DB",
-  "SEMANTIC_ERROR": "#FF414D",
-  "SEMANTIC_SUCCESS": "#36B37E",
-  "SEMANTIC_WARNING": "#FFAB00",
-  "SEMANTIC_NEUTRAL": "#808080",
-  "INPUT_FIELD_BACKGROUND_COLOR": "#181818",
-  "INPUT_FIELD_BORDER_COLOR": "#262626",
-  "CARD_LAYER_1_COLOR": "#1D1D1D",
-  "CARD_LAYER_2_COLOR": "#262626",
-  "CARD_LAYER_3_COLOR": "#2D2D2D",
-  "CARD_LAYER_4_COLOR": "#333333",
-  "CARD_LAYER_5_COLOR": "#808080",
-  "HARD_CODED_BLACK_COLOR": "#000000",
-  "ICON_BG_COLOR": "#242529",
-  "TOOLBAR_COLOR": "#111111",
-  "ACTIVE_SPEAKER": true,
-  "ENABLE_IDP_AUTH": false,
-  "ENABLE_TOKEN_AUTH": false,
-  "ENABLE_STT": true,
-  "ENABLE_CAPTION": true,
-  "ENABLE_MEETING_TRANSCRIPT": true,
-  "ENABLE_NOISE_CANCELLATION": true,
-  "ENABLE_VIRTUAL_BACKGROUND": true,
-  "ENABLE_WHITEBOARD": true,
-  "ENABLE_WHITEBOARD_FILE_UPLOAD": false,
-  "ENABLE_WAITING_ROOM": false,
-  "WHITEBOARD_APPIDENTIFIER": "EEJBQPVbEe2Bao8ZShuoHQ/hgB5eo0qcDbVig",
-  "WHITEBOARD_REGION": "us-sv",
-  "CHAT_ORG_NAME": "41754367",
-  "CHAT_APP_NAME": "1042822",
-  "CHAT_URL": "https://a41.chat.agora.io",
-  "ENABLE_NOISE_CANCELLATION_BY_DEFAULT": true,
-  "DISABLE_LANDSCAPE_MODE": false,
-  "STT_AUTO_START": false,
-  "CLOUD_RECORDING_AUTO_START": false,
-  "ENABLE_SPOTLIGHT": false,
-  "ENABLE_LIVE_REACTIONS": true,
-  "AUTO_CONNECT_RTM": false,
-  "ENABLE_CONVERSATIONAL_AI": false,
-  "CUSTOMIZE_AGENT": false,
-  "ENABLE_TEXT_TRACKS": true
-}

package/template/theme.json

@@ -1,91 +0,0 @@
-{
-  "layoutProps": {"topPinned": false},
-  "primaryButton":{
-    "width": "100%",
-    "backgroundColor": "#00AEFC",
-    "borderRadius": 100,
-    "maxWidth": 450,
-    "minWidth": 200,
-    "minHeight": 45
-  },
-  "primaryButtonText": {
-    "width": "100%",
-    "height": 45,
-    "lineHeight": 45,
-    "fontSize": 16,
-    "textAlign": "center",
-    "textAlignVertical": "center",
-    "color": "#fff"
-  },
-  "secondaryBtn": {
-    "width": "100%",
-    "borderColor": "#00AEFC",
-    "borderWidth": 1,
-    "borderRadius": 100,
-    "maxWidth": 450,
-    "minWidth": 200,
-    "minHeight": 45
-  },
-  "secondaryButtonText": {
-    "width": "100%",
-    "height": 45,
-    "lineHeight": 45,
-    "fontSize": 16,
-    "textAlign": "center",
-    "fontWeight": "500",
-    "textAlignVertical": "center",
-    "color": "#000"
-  },
-  "textInput": {
-    "width": "100%",
-    "paddingLeft": 8,
-    "paddingRight": 8,
-    "borderColor": "#00AEFC",
-    "borderRadius": 100,
-    "borderWidth": 1,
-    "textAlign": "center",
-    "color": "#333333",
-    "fontSize": 16,
-    "maxWidth": 450,
-    "minHeight": 45
-  },
-  "videoView": {
-    "flex": 12,
-    "backgroundColor": "#fff",
-    "flexDirection": "row"
-  },
-  "navHolder": {
-    "width": "100%",
-    "height": "6%",
-    "minHeight": 40,
-    "backgroundColor": "#f1f4f9",
-    "flexDirection": "row",
-    "alignItems": "center",
-    "justifyContent": "flex-end"
-  },
-  "controlsHolder": {
-    "minHeight": 80,
-    "maxHeight": "8%",
-    "backgroundColor": "#f1f4f9",
-    "flexDirection": "row",
-    "justifyContent": "space-evenly",
-    "position": "relative",
-    "margin": 0,
-    "bottom": 0
-  },
-  "localButton": {
-    "backgroundColor": "#fff",
-    "borderRadius": 23,
-    "width": 40,
-    "height": 40,
-    "display": "flex",
-    "alignSelf": "center",
-    "alignItems": "center",
-    "justifyContent": "center"
-  },
-  "buttonIcon": {
-    "width": "70%",
-    "height": "70%",
-    "tintColor": "#00AEFC"
-  }
-}