agora-appbuilder-core 4.1.22-beta.7 → 4.1.22-beta.9

package/package.json

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

package/template/bridge/rtm/web/__tests__/storage.test.ts

@@ -3,6 +3,7 @@ import {beforeEach, describe, expect, it, jest} from '@jest/globals';
 const mockSetChannelMetadata = jest.fn<any>();
 const mockGetChannelMetadata = jest.fn<any>();
 const mockRemoveChannelMetadata = jest.fn<any>();
+const mockRemoveUserMetadata = jest.fn<any>();
 
 jest.mock('agora-rtm-sdk', () => ({
   __esModule: true,
@@ -15,6 +16,7 @@ jest.mock('agora-rtm-sdk', () => ({
         setChannelMetadata: mockSetChannelMetadata,
         getChannelMetadata: mockGetChannelMetadata,
         removeChannelMetadata: mockRemoveChannelMetadata,
+        removeUserMetadata: mockRemoveUserMetadata,
       },
       presence: {},
     })),
@@ -30,9 +32,22 @@ describe('RTMWebClient channel metadata bridge', () => {
     jest.clearAllMocks();
     mockSetChannelMetadata.mockResolvedValue({});
     mockRemoveChannelMetadata.mockResolvedValue({});
+    mockRemoveUserMetadata.mockResolvedValue({});
     client = new RTMWebClient('app-id', 'user-id');
   });
 
+  it('clears all metadata for the requested user when data is omitted', async () => {
+    await client.storage.removeUserMetadata({userId: 'agent-user'});
+
+    expect(mockRemoveUserMetadata).toHaveBeenCalledWith({
+      userId: 'agent-user',
+      majorRevision: undefined,
+      lockName: undefined,
+      addUserId: true,
+      addTimeStamp: true,
+    });
+  });
+
   it('preserves revision zero for create-only channel metadata', async () => {
     await client.storage.setChannelMetadata(
       'room',

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

@@ -2,6 +2,7 @@ import {
   type Metadata as NativeMetadata,
   type MetadataItem as NativeMetadataItem,
   type GetUserMetadataOptions as NativeGetUserMetadataOptions,
+  type RemoveUserMetadataOptions as NativeRemoveUserMetadataOptions,
   type RtmChannelType as NativeRtmChannelType,
   type SetUserMetadataResponse,
   type LoginOptions as NativeLoginOptions,
@@ -72,24 +73,12 @@ export class RTMWebClient {
   private client: RTMClient;
   private appId: string;
   private userId: string;
-  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));
-  }
+  private eventsMap = new Map<keyof NativeRTMClientEventMap, CallbackType>([
+    ['linkState', () => null],
+    ['storage', () => null],
+    ['presence', () => null],
+    ['message', () => null],
+  ]);
 
   constructor(appId: string, userId: string) {
     this.appId = appId;
@@ -109,7 +98,7 @@ export class RTMWebClient {
             nativeLinkStateMapping.IDLE,
           reasonCode: linkStatusReasonCodeMapping[data.reasonCode] || 0,
         };
-        this.emitEvent('linkState', nativeState);
+        (this.eventsMap.get('linkState') ?? (() => {}))(nativeState);
       });
 
       this.client.addEventListener('storage', data => {
@@ -120,7 +109,7 @@ export class RTMWebClient {
           data: convertWebToNativeMetadata(data.data),
           timestamp: data.timestamp,
         };
-        this.emitEvent('storage', nativeStorageEvent);
+        (this.eventsMap.get('storage') ?? (() => {}))(nativeStorageEvent);
       });
 
       this.client.addEventListener('presence', data => {
@@ -131,7 +120,7 @@ export class RTMWebClient {
           publisher: data.publisher,
           timestamp: data.timestamp,
         };
-        this.emitEvent('presence', nativePresenceEvent);
+        (this.eventsMap.get('presence') ?? (() => {}))(nativePresenceEvent);
       });
 
       this.client.addEventListener('message', data => {
@@ -141,7 +130,7 @@ export class RTMWebClient {
           messageType: nativeMessageEventTypeMapping[data.messageType],
           message: `${data.message}`,
         };
-        this.emitEvent('message', nativeMessageEvent);
+        (this.eventsMap.get('message') ?? (() => {}))(nativeMessageEvent);
       });
     } catch (error) {
       const contextError = new Error(
@@ -241,6 +230,23 @@ export class RTMWebClient {
         return nativeResponse;
       },
 
+      removeUserMetadata: (options?: NativeRemoveUserMetadataOptions) => {
+        const data = options?.data?.items?.map(item => ({
+          key: item.key,
+          value: item.value ?? '',
+          revision: item.revision ?? -1,
+        }));
+
+        return this.client.storage.removeUserMetadata({
+          userId: options?.userId,
+          majorRevision: options?.majorRevision,
+          lockName: options?.lockName,
+          ...(data ? {data} : {}),
+          addTimeStamp: options?.addTimeStamp ?? true,
+          addUserId: options?.addUserId ?? true,
+        });
+      },
+
       setChannelMetadata: async (
         channelName: string,
         channelType: NativeRtmChannelType,
@@ -411,18 +417,21 @@ export class RTMWebClient {
     listener: (event: any) => void,
   ) {
     if (this.client) {
-      // Web SDK listeners are fixed in the constructor; keep app-level
-      // subscribers multiplexed here.
-      this.eventsMap.get(event)?.add(listener as CallbackType);
+      // Simply replace the handler in our map - web client listeners are fixed in constructor
+      this.eventsMap.set(event, listener as CallbackType);
     }
   }
 
   removeEventListener(
     event: keyof NativeRTMClientEventMap,
-    listener: (event: any) => void,
+    _listener: (event: any) => void,
   ) {
     if (this.client && this.eventsMap.has(event)) {
-      this.eventsMap.get(event)?.delete(listener as CallbackType);
+      const prevListener = this.eventsMap.get(event);
+      if (prevListener) {
+        this.client.removeEventListener(event, prevListener);
+      }
+      this.eventsMap.set(event, () => null); // reset to no-op
     }
   }
 
@@ -485,10 +494,10 @@ export class RTMWebClient {
 
   removeAllListeners() {
     this.eventsMap = new Map([
-      ['linkState', new Set()],
-      ['storage', new Set()],
-      ['presence', new Set()],
-      ['message', new Set()],
+      ['linkState', () => null],
+      ['storage', () => null],
+      ['presence', () => null],
+      ['message', () => null],
     ]);
     return this.client.removeAllListeners();
   }

package/template/customization-api/index.ts

@@ -26,7 +26,6 @@ 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

@@ -18,6 +18,7 @@ import {ToolbarPresetProps} from './sub-components';
 import {TextDataInterface} from '../src/language/default-labels';
 import {VBPanelProps} from '../src/components/virtual-background/VBPanel';
 import {AIAgentState} from '../src/ai-agent/components/AgentControls/const';
+import type {MessageEvent, PresenceEvent} from 'agora-react-native-rtm';
 
 export const CUSTOM_ROUTES_PREFIX = '/r/';
 
@@ -136,6 +137,9 @@ export type EndCallHookType = () => (
   isHost: boolean,
   history: History,
 ) => Promise<void>;
+export type DeepLinkHandlerType = (link: string) => boolean | void;
+export type RtmMessageHandlerType = (message: MessageEvent) => boolean | void;
+export type RtmPresenceHandlerType = (presence: PresenceEvent) => void;
 
 export interface AppConfig {
   defaultRootFallback?: React.ComponentType;
@@ -170,6 +174,9 @@ export interface CustomizationApiInterface {
   lifecycle?: {
     useAfterEndCall?: EndCallHookType;
     useBeforeEndCall?: EndCallHookType;
+    onDeepLink?: DeepLinkHandlerType;
+    onRtmMessage?: RtmMessageHandlerType;
+    onRtmPresence?: RtmPresenceHandlerType;
     // useBeforeJoin?: CustomHookType;
     // useBeforeCreate?: CustomHookType;
   };

package/template/defaultConfig.js

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

package/template/src/atoms/IconButton.tsx

@@ -25,6 +25,7 @@ export interface IconButtonProps {
   setRef?: (ref: any) => void;
   onPress?: PressableProps['onPress'];
   disabled?: boolean;
+  showToolTipWhenDisabled?: boolean;
   containerStyle?: ViewStyle;
   rootContainerStyle?: ViewStyle;
   iconContainerStyle?: ViewStyle;
@@ -156,13 +157,14 @@ const IconButtonWithToolTip = (props: IconButtonProps) => {
     isClickable = false,
     showTooltipArrow = true,
     disabled = false,
+    showToolTipWhenDisabled = false,
   } = props;
   if (props?.toolTipMessage) {
     return (
       <ToolTip
         isClickable={isClickable}
         toolTipMessage={props.toolTipMessage}
-        disabled={disabled}
+        disabled={disabled && !showToolTipWhenDisabled}
         //@ts-ignore
         placement={placement}
         showTooltipArrow={showTooltipArrow}

package/template/src/atoms/Tooltip.tsx

@@ -75,7 +75,7 @@ const Tooltip = (props: TooltipProps) => {
     return result;
   };
 
-  const toolTipId = randomString();
+  const [toolTipId] = useState(() => randomString());
 
   return (
     <>

package/template/src/auth/AuthProvider.tsx

@@ -43,6 +43,7 @@ import SDKEvents from '../utils/SdkEvents';
 import LocalEventEmitter, {
   LocalEventsEnum,
 } from '../rtm-events-api/LocalEvents';
+import {useCustomization} from 'customization-implementation';
 
 const GET_USER_URL = `${$config.BACKEND_ENDPOINT}/v1/user/details`;
 
@@ -64,6 +65,7 @@ const AuthContext = createContext<AuthContextInterface | null>(null);
 const AuthProvider = (props: AuthProviderProps) => {
   const loadingLabel = useString(loadingText)();
   const timeoutHeading = useString(authSessionTimeoutToastHeading)();
+  const {lifecycle} = useCustomization();
   const regEvent = useRef(true);
   const refreshTimeoutWeb = useRef(null);
   const [showNativePopup, setShowNativePopup] = useState(false);
@@ -137,6 +139,14 @@ const AuthProvider = (props: AuthProviderProps) => {
 
   const deepLinkUrl = (link: string | null) => {
     if (link !== null) {
+      if (lifecycle?.onDeepLink?.(link)) {
+        logger.log(
+          LogSource.Internals,
+          'AUTH',
+          'Deep link handled by customization',
+        );
+        return;
+      }
       //deeplinking handling with authentication enabled
       if ($config.ENABLE_IDP_AUTH) {
         const url = processDeepLinkURI(link);

package/template/src/components/Controls.tsx

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

package/template/src/components/EventsConfigure.tsx

@@ -243,12 +243,11 @@ const EventsConfigure: React.FC<Props> = ({
     defaultContentRef.current.defaultContent = defaultContent;
   }, [defaultContent]);
   const {
-    data: {channel, isHost, roomId},
+    data: {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();
@@ -264,13 +263,6 @@ 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;
@@ -500,15 +492,6 @@ 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) ||
@@ -546,15 +529,6 @@ 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) ||
@@ -576,15 +550,6 @@ 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

@@ -35,6 +35,7 @@ import {Platform} from 'react-native';
 import {backOff} from 'exponential-backoff';
 import {isAndroid, isIOS, isWeb, isWebInternal} from '../utils/common';
 import {useContent} from 'customization-api';
+import {useCustomization} from 'customization-implementation';
 import {
   safeJsonParse,
   timeNow,
@@ -81,6 +82,7 @@ const RtmConfigure = (props: any) => {
   const {rtcProps} = useContext(PropsContext);
   const {dispatch} = useContext(DispatchContext);
   const {defaultContent, activeUids} = useContent();
+  const {lifecycle} = useCustomization();
   const {
     waitingRoomStatus,
     data: {isHost},
@@ -318,6 +320,16 @@ const RtmConfigure = (props: any) => {
         if (`${localUid}` === presence.publisher) {
           return;
         }
+        try {
+          lifecycle?.onRtmPresence?.(presence);
+        } catch (error) {
+          logger.error(
+            LogSource.Events,
+            'CUSTOM_EVENTS',
+            'Customization RTM presence handler failed',
+            {error, presence},
+          );
+        }
         // remoteJoinChannel
         if (presence.type === nativePresenceEventTypeMapping.REMOTE_JOIN) {
           logger.log(
@@ -325,10 +337,22 @@ const RtmConfigure = (props: any) => {
             'Event',
             'RTM presenceEvent of type [3 - remoteJoin] (channelMemberJoined)',
           );
-          const backoffAttributes = await fetchUserAttributesWithBackoffRetry(
-            presence.publisher,
-          );
-          await processUserUidAttributes(backoffAttributes, presence.publisher);
+          try {
+            const backoffAttributes = await fetchUserAttributesWithBackoffRetry(
+              presence.publisher,
+            );
+            await processUserUidAttributes(
+              backoffAttributes,
+              presence.publisher,
+            );
+          } catch (error) {
+            logger.warn(
+              LogSource.AgoraSDK,
+              'Event',
+              `RTM could not apply metadata for joined member ${presence.publisher}`,
+              {error},
+            );
+          }
         }
         // remoteLeaveChannel and, on web, remote connection timeout
         if (isRemoteDeparture(presence.type, isWebInternal())) {
@@ -363,6 +387,20 @@ const RtmConfigure = (props: any) => {
       if (`${localUid}` === message.publisher) {
         return;
       }
+      let handledByCustomization = false;
+      try {
+        handledByCustomization = !!lifecycle?.onRtmMessage?.(message);
+      } catch (error) {
+        logger.error(
+          LogSource.Events,
+          'CUSTOM_EVENTS',
+          'Customization RTM message handler failed',
+          {error, message},
+        );
+      }
+      if (handledByCustomization) {
+        return;
+      }
       // message - 1 (channel)
       if (message.channelType === nativeChannelTypeMapping.MESSAGE) {
         logger.debug(
@@ -501,6 +539,7 @@ const RtmConfigure = (props: any) => {
       const options: SetOrUpdateUserMetadataOptions = {
         userId: `${localUid}`,
       };
+      await engine.current.storage.removeUserMetadata(options);
       await engine.current.storage.setUserMetadata(data, options);
       logger.log(
         LogSource.AgoraSDK,
@@ -816,19 +855,17 @@ 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;
 
       //start - updating user data in rtc
       const userData = {
-        screenUid: screenUid,
+        screenUid,
         //below thing for livestreaming
         type: uid === parseInt(RECORDING_BOT_UID, 10) ? 'bot' : 'rtc',
         uid,
         offline: false,
-        ...(nameItem?.value ? {name: nameItem.value} : {}),
         isHost: isHostItem?.value || false,
         lastMessageTimeStamp: 0,
       };

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

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

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

@@ -140,7 +140,7 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
 
   const [name] = useUserName();
   const {
-    data: {channel, isHost, whiteboard: {room_token, room_uuid} = {}},
+    data: {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, channel}),
+      JSON.stringify({height: height || 0}),
       PersistanceLevel.Session,
     );
   };

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

@@ -519,10 +519,12 @@ const ActionSheetContent = props => {
         </View>
       </ActionSheetProvider>
 
-      <CarouselWrapper
-        data={displayItemsOrdered?.slice(3, displayItemsOrdered?.length)}
-        dataObject={displayItems}
-      />
+      <ActionSheetProvider>
+        <CarouselWrapper
+          data={displayItemsOrdered?.slice(3, displayItemsOrdered?.length)}
+          dataObject={displayItems}
+        />
+      </ActionSheetProvider>
     </View>
   );
 };

package/template/src/subComponents/screenshare/ScreenshareButton.tsx

@@ -20,6 +20,7 @@ import useIsHandRaised from '../../utils/useIsHandRaised';
 import {isAndroid, isIOS} from '../../utils/common';
 import {useVideoCall} from '../../components/useVideoCall';
 import {useToolbarMenu} from '../../utils/useMenu';
+import {useActionSheet} from '../../utils/useActionSheet';
 import ToolbarMenuItem from '../../atoms/ToolbarMenuItem';
 import {
   livestreamingShareTooltipText,
@@ -41,9 +42,15 @@ export interface ScreenshareButtonProps {
 const ScreenshareButton = (props: ScreenshareButtonProps) => {
   const {label = null, onPress: onPressCustom = null} = useToolbarProps();
   const {isToolbarMenuItem} = useToolbarMenu();
+  const {
+    isOnActionSheet: isOnActionSheetContext,
+    showLabel: showActionSheetLabel,
+  } = useActionSheet();
   const {rtcProps} = useContext(PropsContext);
-  const {showLabel = $config.ICON_TEXT || false, isOnActionSheet = false} =
-    props;
+  const isOnActionSheet = props.isOnActionSheet || isOnActionSheetContext;
+  const showLabel =
+    props.showLabel ??
+    (isOnActionSheet ? showActionSheetLabel : $config.ICON_TEXT || false);
   const {
     data: {isHost},
   } = useRoomInfo();

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

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