agora-appbuilder-core 4.1.5 → 4.1.6-beta.1

package/package.json

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

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.5',
-  CORE_VERSION: '4.1.5',
+  CLI_VERSION: '3.1.6-beta.1',
+  CORE_VERSION: '4.1.6-beta.1',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/ai-agent/ai-interface/AIAgentInterface.tsx

@@ -4,8 +4,9 @@ import {
   useContent,
   useLocalAudio,
 } from 'customization-api';
-import {View, StyleSheet, Platform} from 'react-native';
-import hark from 'hark';
+import {View, StyleSheet, Platform, Text} from 'react-native';
+import ThemeConfig from '../../theme';
+import {isAndroid, isIOS} from '../../utils/common';
 import {AgentContext} from '../components/AgentControls/AgentContext';
 
 const NotJoinedMp4 = require('./1.Not-Joined.mp4').default;
@@ -34,27 +35,27 @@ export default function AiAgentCustomView({
   const aiMediaStream = useRef(null);
 
   useEffect(() => {
-    if (activeUids?.indexOf(agentUID) !== -1 && !aiMediaStream.current) {
+    if (
+      activeUids?.indexOf(agentUID) !== -1 &&
+      !aiMediaStream?.current &&
+      !(isAndroid() || isIOS())
+    ) {
       const track = getRemoteAudioStream(agentUID);
       if (track) {
+        const hark = require('hark');
         try {
-          if (!aiMediaStream.current) {
-            console.log('debugging creating MediaStream here');
+          if (!aiMediaStream?.current) {
             aiMediaStream.current = new MediaStream([
               track.getMediaStreamTrack(),
             ]);
-          } else {
-            console.log('debugging existing MediaStream used');
           }
-          const harkai = hark(aiMediaStream.current, {
+          const harkai = hark(aiMediaStream?.current, {
             interval: 100,
           });
           harkai.on('speaking', () => {
-            console.log('debugging ai is speaking');
             setAISpeaking(true);
           });
           harkai.on('stopped_speaking', () => {
-            console.log('debugging ai is not speaking');
             setAISpeaking(false);
           });
         } catch (error) {
@@ -93,19 +94,36 @@ export default function AiAgentCustomView({
   }, [connectionState, animation, isAISpeaking]);
   return (
     <View style={styles.container}>
-      <video
-        autoPlay
-        style={{pointerEvents: 'none'}}
-        loop
-        src={AI_ANIMATION_VIDEO[animation]}
-        width="40%"
-        height="40%"
-      />
+      {isAndroid() || isIOS() ? (
+        <View style={styles.nativeTextContainer}>
+          <Text style={styles.nativeText}>AI Agent...</Text>
+        </View>
+      ) : (
+        <video
+          autoPlay
+          style={{pointerEvents: 'none'}}
+          loop
+          src={AI_ANIMATION_VIDEO[animation]}
+          width="40%"
+          height="40%"
+        />
+      )}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  nativeTextContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  nativeText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 18,
+    fontWeight: '800',
+    color: $config.FONT_COLOR,
+  },
   container: {
     flex: 1,
     backgroundColor: 'black',

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

@@ -8,7 +8,7 @@ const Bottombar = () => {
   return (
     <ToolbarPreset
       align="bottom"
-      snapPointsMinMax={AI_LAYOUT === 'LAYOUT_TYPE_1' ? [100, 100] : [0, 0]}
+      snapPointsMinMax={AI_LAYOUT === 'LAYOUT_TYPE_2' ? [100, 100] : [0, 0]}
       items={{
         layout: {hide: true},
         invite: {hide: true},

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

@@ -10,11 +10,11 @@ import CustomSettingsPanel from './components/CustomSettingsPanel';
 import {AgentProvider} from './components/AgentControls/AgentContext';
 
 //LAYOUT_TYPE_1
-import DefaultLayout from './layout/DefaultLayout';
+import NewAnimationLayout from './layout/NewAnimation';
 //LAYOUT_TYPE_2
-import ConversationalAILayout from './layout/ConversationalAI';
+import AIWithLocalUser from './layout/AIWithLocalUser';
 //LAYOUT_TYPE_3
-import NewAnimationLayout from './layout/NewAnimation';
+import ConversationalAILayout from './layout/ConversationalAI';
 
 const DummyComponent = () => {
   return <></>;
@@ -25,7 +25,7 @@ const getAILayoutType = () => {
 };
 
 const getTopBarComponent = () => {
-  return isMobileUA() || getAILayoutType() !== 'LAYOUT_TYPE_1'
+  return isMobileUA() || getAILayoutType() !== 'LAYOUT_TYPE_2'
     ? MobileTopBar
     : DummyComponent;
 };
@@ -33,17 +33,17 @@ const getTopBarComponent = () => {
 const getBottombarComponent = () => {
   return isMobileUA()
     ? MobileBottombar
-    : getAILayoutType() === 'LAYOUT_TYPE_1'
+    : getAILayoutType() === 'LAYOUT_TYPE_2'
     ? Bottombar
     : DummyComponent;
 };
 
 const getCustomLayoutComponent = () => {
   return getAILayoutType() === 'LAYOUT_TYPE_3'
-    ? NewAnimationLayout
-    : getAILayoutType() === 'LAYOUT_TYPE_2'
     ? ConversationalAILayout
-    : DefaultLayout;
+    : getAILayoutType() === 'LAYOUT_TYPE_2'
+    ? AIWithLocalUser
+    : NewAnimationLayout;
 };
 
 export const AI_AGENT_CUSTOMIZATION: CustomizationApiInterface = {

package/template/src/ai-agent/layout/{DefaultLayout.tsx → AIWithLocalUser.tsx}

@@ -14,7 +14,7 @@ import AudioVisualizer, {DisconnectedView} from '../components/AudioVisualizer';
 import {AgentState} from '../components/AgentControls/const';
 import {AgentContext} from '../components/AgentControls/AgentContext';
 
-export default function DefaultLayout() {
+export default function AIWithLocalUser() {
   const localUid = useLocalUid();
   const {defaultContent, activeUids} = useContent();
   const {RtcEngineUnsafe} = useRtc();

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

@@ -142,7 +142,7 @@ const styles = StyleSheet.create({
   },
   layoutRootContainer: {
     flex: 1,
-    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+    backgroundColor: '#1D1D1D',
     borderRadius: 8,
   },
   callAgentBtnInnerContainer: {

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

@@ -109,7 +109,6 @@ const styles = StyleSheet.create({
   },
   layoutRootContainer: {
     flex: 1,
-    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
     borderRadius: 8,
   },
   callAgentBtnInnerContainer: {