agora-appbuilder-core 4.1.0 → 4.1.2

package/package.json

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

package/template/customization-api/app-state.ts

@@ -67,6 +67,5 @@ export {useBeautyEffects} from '../src/app-state/useBeautyEffects';
 export {useLiveStreamDataContext} from '../src/components/contexts/LiveStreamDataContext';
 export {useRtm} from '../src/components/ChatContext';
 export {useGetHostIds} from '../src/utils/useGetHostUids';
-export {useAIAgent} from '../src/ai-agent/components/AgentControls/AgentContext';
 export type {AIAgentContextInterface} from '../src/ai-agent/components/AgentControls/AgentContext';
 export type {AIAgentState} from '../src/ai-agent/components/AgentControls/const';

package/template/customization-implementation/dummyConfig.ts

@@ -9,9 +9,10 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {customize} from 'customization-api';
 /**
  * Dummy Config used to load when project doesn't have the customization.
  */
-const dummyConfig = customize({});
+import {isSDK, customize} from 'customization-api';
+
+const dummyConfig = isSDK() ? {} : customize({});
 export default dummyConfig;

package/template/defaultConfig.js

@@ -76,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.0',
-  CORE_VERSION: '4.1.0',
+  CLI_VERSION: '3.1.2',
+  CORE_VERSION: '4.1.2',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/ai-agent/components/AgentControls/AgentContext.tsx

@@ -2,7 +2,6 @@ import React, {createContext, useContext, useEffect, useState} from 'react';
 import StorageContext from '../../../components/StorageContext';
 import {AIAgentState, ASR_LANGUAGES, AgentState} from './const';
 import {AI_AGENT_VOICE} from './const';
-import {createHook} from 'customization-implementation';
 import {
   UidType,
   useContent,
@@ -460,5 +459,3 @@ export const connectToAIAgent = async (
     throw error;
   }
 };
-
-export const useAIAgent = createHook(AgentContext);

package/template/src/ai-agent/components/CustomSettingsPanel.tsx

@@ -12,7 +12,7 @@ import {
 import SelectAiAgent from './SelectAiAgent';
 import ThemeConfig from '../../theme';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import {AgentContext, useAIAgent} from './AgentControls/AgentContext';
+import {AgentContext} from './AgentControls/AgentContext';
 import UserPrompt from './UserPrompt';
 import {useIsAgentAvailable} from './utils';
 import Toggle from '../../atoms/Toggle';
@@ -116,7 +116,7 @@ const AdvancedSettings = () => {
     setIsInterruptionHandlingEnabled,
     agentId,
     agentConnectionState,
-  } = useAIAgent();
+  } = useContext(AgentContext);
   const {
     data: {agents},
   } = useRoomInfo();

package/template/src/ai-agent/layout/ConversationalAI.tsx

@@ -1,4 +1,4 @@
-import React, {Suspense, useEffect, useRef, useState} from 'react';
+import React, {Suspense, useContext, useEffect, useRef, useState} from 'react';
 import {
   Platform,
   StyleSheet,
@@ -17,7 +17,7 @@ import {
   SidePanelType,
 } from 'customization-api';
 import ThemeConfig from '../../theme';
-import {useAIAgent} from '../components/AgentControls/AgentContext';
+import {AgentContext} from '../components/AgentControls/AgentContext';
 import {AgentState} from '../components/AgentControls/const';
 import {useIsAgentAvailable} from '../components/utils';
 
@@ -98,7 +98,7 @@ const SettingButton = () => {
 };
 
 const DisconnectButton = () => {
-  const {toggleAgentConnection} = useAIAgent();
+  const {toggleAgentConnection} = useContext(AgentContext);
   return (
     <TouchableOpacity
       style={{backgroundColor: $config.SEMANTIC_ERROR, borderRadius: 50}}
@@ -111,7 +111,8 @@ const DisconnectButton = () => {
 };
 
 export const ConversationalAI: LayoutComponent = () => {
-  const {agentConnectionState, toggleAgentConnection} = useAIAgent();
+  const {agentConnectionState, toggleAgentConnection} =
+    useContext(AgentContext);
   // const spline = useRef();
   // const sphere = useRef();
 

package/template/src/components/SdkApiContext.tsx

@@ -6,7 +6,7 @@ import {
   validateMeetingInfoData,
   RoomInfoContextInterface,
 } from './room-info/useRoomInfo';
-import {CustomizationApiInterface} from 'customization-api';
+import {CustomizationApiInterface, customize} from 'customization-api';
 import {Unsubscribe} from 'nanoevents';
 
 type extractPromises<T extends (...p: any) => any> = {
@@ -75,7 +75,12 @@ const SdkApiInitState: SdkApiContextInterface = {
   join: {
     initialized: false,
   },
-  customize: {},
+  //for AI apps we should call customize method to get the default customization applied.
+  customize: $config.ENABLE_CONVERSATIONAL_AI
+    ? {
+        customization: customize({}),
+      }
+    : {},
   // mediaDevice: {},
   microphoneDevice: {},
   speakerDevice: {},

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

@@ -51,7 +51,7 @@ import {
 import {LogSource, logger} from '../../logger/AppBuilderLogger';
 import {useFullScreen} from '../../utils/useFullScreen';
 import SpotlightHighligher from './SpotlightHighlighter';
-import {useAIAgent} from '../../ai-agent/components/AgentControls/AgentContext';
+import {AgentContext} from '../../ai-agent/components/AgentControls/AgentContext';
 
 export interface VideoRendererProps {
   user: ContentInterface;
@@ -71,7 +71,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   containerStyle = {},
   innerContainerStyle = {},
 }) => {
-  const {agentConnectionState} = useAIAgent();
+  const {agentConnectionState} = useContext(AgentContext);
   const {CustomAgentView} = useCustomization(data => {
     let components: {
       CustomAgentView: React.ComponentType<CustomAgentInterfaceProps>;