agora-appbuilder-core 4.1.0-beta-7 → 4.1.0-beta-9

package/package.json

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

package/template/defaultConfig.js

@@ -76,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.0-beta-7',
-  CORE_VERSION: '4.1.0-beta-7',
+  CLI_VERSION: '3.1.0-beta-9',
+  CORE_VERSION: '4.1.0-beta-9',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,
@@ -85,6 +85,7 @@ const DefaultConfig = {
   AUTO_CONNECT_RTM: false,
   ENABLE_CONVERSATIONAL_AI: false,
   CUSTOMIZE_AGENT: true,
+  AI_LAYOUT: 'DEFAULT_LAYOUT',
 };
 
 module.exports = DefaultConfig;

package/template/global.d.ts

@@ -172,6 +172,7 @@ interface ConfigInterface {
   AUTO_CONNECT_RTM: boolean;
   ENABLE_CONVERSATIONAL_AI: boolean;
   CUSTOMIZE_AGENT: boolean;
+  AI_LAYOUT: string;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

package/template/package.json

@@ -57,7 +57,6 @@
     "@react-native-async-storage/async-storage": "1.19.2",
     "@react-native-community/checkbox": "0.5.16",
     "@react-native-community/clipboard": "1.5.1",
-    "@splinetool/react-spline": "^4.0.0",
     "@splinetool/runtime": "^1.9.69",
     "@supersami/rn-foreground-service": "^1.1.1",
     "add": "^2.0.6",
@@ -66,7 +65,7 @@
     "agora-extension-beauty-effect": "^1.0.2-beta",
     "agora-extension-virtual-background": "^1.1.3",
     "agora-react-native-rtm": "1.5.1",
-    "agora-rtc-sdk-ng": "4.23.0",
+    "agora-rtc-sdk-ng": "4.23.2",
     "agora-rtm-sdk": "1.5.1",
     "buffer": "^6.0.3",
     "electron-log": "4.3.5",

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

@@ -324,7 +324,7 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
             localUid,
             store.token,
             {
-              agent_id: agentId,
+              agent_id: agentId || agents?.length ? agents[0].id : null,
               prompt: prompt,
               voice: agents.find(a => a.id === agentId)?.config?.tts?.params
                 ?.voice_name,
@@ -400,7 +400,7 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
           setAgentConnectionState(AgentState.AGENT_DISCONNECT_REQUEST);
           setStopAPICalled(true);
           await connectToAIAgent('stop', channel_name, localUid, store.token, {
-            agent_id: agentId,
+            agent_id: agentId || agents?.length ? agents[0].id : null,
           });
           setStore(prevState => {
             return {

package/template/src/ai-agent/components/mobile/MobileLayoutComponent.tsx

@@ -55,7 +55,7 @@ const MobileLayoutComponent: LayoutComponent = () => {
         innerContainerStyle={{backgroundColor: '#222'}}
         user={{
           ...defaultContent[agentUID],
-          name: 'Ai Agent',
+          name: 'AI Agent',
           video: false,
         }}
         CustomChild={() =>

package/template/src/ai-agent/index.tsx

@@ -13,7 +13,7 @@ import {
   useLayout,
   CustomAgentInterfaceProps,
 } from 'customization-api';
-import {isMobileUA} from '../utils/common';
+import {isAndroid, isIOS, isMobileUA} from '../utils/common';
 import AudioVisualizer, {DisconnectedView} from './components/AudioVisualizer';
 import Bottombar from './components/Bottombar';
 import CustomCreate from './components/CustomCreate';
@@ -105,7 +105,7 @@ const DesktopLayoutComponent: LayoutComponent = () => {
           <MaxVideoView
             user={{
               ...defaultContent[agentUID],
-              name: 'Ai Agent',
+              name: 'AI Agent',
               video: false,
             }}
             CustomChild={() =>
@@ -152,6 +152,18 @@ const DesktopLayoutComponent: LayoutComponent = () => {
 //   );
 // };
 
+const defaultLayout = {
+  name: 'Ai-Agent',
+  label: 'Ai-Agent',
+  icon: '🤖',
+  component: DesktopLayoutComponent,
+};
+const animationLayout = {
+  name: 'conversational-ai',
+  label: 'Conversational AI',
+  icon: '🤖',
+  component: ConversationalAI,
+};
 export const AI_AGENT_CUSTOMIZATION: CustomizationApiInterface = {
   components: {
     create: CustomCreate,
@@ -159,26 +171,12 @@ export const AI_AGENT_CUSTOMIZATION: CustomizationApiInterface = {
       wrapper: AgentProvider,
       //customAgentInterface: AiAgentCustomView,
       customLayout() {
-        return [
-          {
-            name: 'Ai-Agent',
-            label: 'Ai-Agent',
-            icon: '🤖',
-            component: DesktopLayoutComponent,
-          },
-          {
-            name: 'conversational-ai',
-            label: 'Conversational AI',
-            icon: '🤖',
-            component: ConversationalAI,
-          },
-          {
-            name: 'default-ai-only',
-            label: 'Default AI Only',
-            icon: '🤖',
-            component: DefaultAIOnly,
-          },
-        ];
+        return isAndroid() || isIOS()
+          ? //android and ios does not support animation layout
+            [defaultLayout]
+          : $config.AI_LAYOUT === 'ANIMATION_LAYOUT'
+          ? [animationLayout, defaultLayout]
+          : [defaultLayout, animationLayout];
       },
       customSidePanel: () => {
         return [

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export const ConversationalAI = () => {
+  return <></>;
+};

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

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {Suspense, useEffect, useRef, useState} from 'react';
 import {
   Platform,
   StyleSheet,
@@ -17,7 +17,6 @@ import {
   SidePanelType,
 } from 'customization-api';
 import ThemeConfig from '../../theme';
-import Spline from '@splinetool/react-spline';
 import {useAgent} from '../components/AgentControls/AgentContext';
 import {AgentState} from '../components/AgentControls/const';
 import {useIsAgentAvailable} from '../components/utils';
@@ -34,6 +33,7 @@ import TranscriptIcon from '../assets/transcript.png';
 import SettingsIcon from '../assets/settings.png';
 //@ts-ignore
 import DisconnectIcon from '../assets/close.png';
+const {Application} = require('@splinetool/runtime');
 
 const MicButton = () => {
   const {audio} = useLocalUserInfo();
@@ -112,15 +112,28 @@ const DisconnectButton = () => {
 
 export const ConversationalAI: LayoutComponent = () => {
   const {agentConnectionState, toggleAgentConnection} = useAgent();
-  const spline = useRef();
-  const sphere = useRef();
+  // const spline = useRef();
+  // const sphere = useRef();
+
+  useEffect(() => {
+    setTimeout(() => {
+      // make sure you have a canvas in the body
+      const canvas = document.getElementById('ai-agent') as HTMLCanvasElement;
+
+      // start the application and load the scene
+      const spline = new Application(canvas);
+      spline.load(
+        'https://d1i64xs2div6cu.cloudfront.net/scene-250216.splinecode',
+      );
+    });
+  }, []);
 
   function onLoad(splineApp) {
     // save the app in a ref for later use
-    spline.current = splineApp;
-    sphere.current = splineApp.findObjectByName('Sphere');
-    console.log('debugging animation main', spline.current);
-    console.log('debugging animation sphere', sphere.current);
+    // spline.current = splineApp;
+    // sphere.current = splineApp.findObjectByName('Sphere');
+    // console.log('debugging animation main', spline.current);
+    // console.log('debugging animation sphere', sphere.current);
   }
 
   const isLoading =
@@ -142,10 +155,13 @@ export const ConversationalAI: LayoutComponent = () => {
         </View>
       </View>
       <View style={styles.container}>
-        <Spline
-          scene="https://d1i64xs2div6cu.cloudfront.net/scene-250216.splinecode"
-          onLoad={onLoad}
-        />
+        <canvas id="ai-agent" width="100%" height="100%"></canvas>
+        {/* <Suspense fallback={<div>Loading...</div>}>
+          <Spline
+            scene="https://d1i64xs2div6cu.cloudfront.net/scene-250216.splinecode"
+            onLoad={onLoad}
+          />
+        </Suspense> */}
       </View>
       <View style={styles.btnContainer}>
         {!isLoading && agentConnectionState === 'AGENT_CONNECTED' ? (

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

@@ -69,7 +69,7 @@ export const DefaultAIOnly: LayoutComponent = () => {
           <MaxVideoView
             user={{
               ...defaultContent[agentUID],
-              name: 'Ai Agent',
+              name: 'AI Agent',
               video: false,
               type: 'ai-agent',
             }}

package/template/src/atoms/Dropdown.tsx

@@ -128,7 +128,7 @@ const Dropdown: FC<Props> = ({
               },
             ]}>
             <FlatList
-              showsVerticalScrollIndicator={true}
+              showsVerticalScrollIndicator={false}
               data={data}
               renderItem={renderItem}
               keyExtractor={(item, index) => index.toString()}