agora-appbuilder-core 4.1.0-beta-15 → 4.1.0-beta-17

package/package.json

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

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

@@ -67,3 +67,6 @@ 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/defaultConfig.js

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

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

@@ -30,7 +30,7 @@ export interface ChatItem {
   isSelf: boolean;
 }
 
-export interface AgentContextInterface {
+export interface AIAgentContextInterface {
   toggleAgentConnection: (forceStop?: boolean) => Promise<boolean>;
   agentConnectionState: AIAgentState;
   setAgentConnectionState: (agentState: AIAgentState) => void;
@@ -55,7 +55,7 @@ export interface AgentContextInterface {
   clearChatHistory: () => void;
 }
 
-export const AgentContext = createContext<AgentContextInterface>({
+export const AgentContext = createContext<AIAgentContextInterface>({
   toggleAgentConnection: () => {
     return Promise.resolve(false);
   },
@@ -93,7 +93,7 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
   const [chatHistory, setChatHistory] = useState<IMessageListItem[]>([]);
   const [agentId, setAgentId] = useState('');
   const [agentVoice, setAgentVoice] =
-    useState<AgentContextInterface['agentVoice']>('');
+    useState<AIAgentContextInterface['agentVoice']>('');
   const [prompt, setPrompt] = useState('');
   const {activeUids: users} = useContent();
   const [isStartAPICalled, setStartAPICalled] = useState(false);
@@ -101,7 +101,7 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
   const [isInterruptionHandlingEnabled, setIsInterruptionHandlingEnabled] =
     useState(false);
   const [language, setLanguage] =
-    useState<AgentContextInterface['language']>('');
+    useState<AIAgentContextInterface['language']>('');
 
   const {
     data: {channel: channel_name, uid: localUid, agents},
@@ -113,7 +113,7 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
   const messageCache = {};
   const TIMEOUT_MS = 5000; // Timeout for incomplete messages
 
-  //set agent id when user refresh the page
+  //set agent uid when user refresh the page - to maintain the app state
   useEffect(() => {
     //@ts-ignore
     if (store?.agentUID && store?.agentUID !== agentUID) {
@@ -122,6 +122,15 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
     }
   }, [store, agentUID]);
 
+  //set agent id when user refresh the page - to maintain the app state
+  useEffect(() => {
+    //@ts-ignore
+    if (store?.agentId && store?.agentId !== agentId) {
+      //@ts-ignore
+      setAgentId(store.agentId);
+    }
+  }, [store, agentId]);
+
   React.useEffect(() => {
     if (!isSubscribedForStreams) {
       RtcEngineUnsafe.addListener('onStreamMessage', (...args: any[]) => {
@@ -203,7 +212,7 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
       closeMessageEngine(); // release message engine
       setAgentConnectionState(AgentState.NOT_CONNECTED);
       if (isStopAPICalled) {
-        setStartAPICalled(true);
+        setStopAPICalled(false);
       }
     }
   }, [
@@ -452,4 +461,4 @@ export const connectToAIAgent = async (
   }
 };
 
-export const useAgent = createHook(AgentContext);
+export const useAIAgent = createHook(AgentContext);

package/template/src/ai-agent/components/AgentControls/message.ts

@@ -986,10 +986,7 @@ export let messageService: MessageEngine | null = null;
  * @returns {MessageEngine} Singleton instance of MessageEngine
  */
 export function initializeMessageEngine(): MessageEngine {
-  console.log('debguggingnew  initializeMessageEngine getting here');
   if (!messageService) {
-    console.log('debuggingnew getting here');
-
     messageService = new MessageEngine(EMessageEngineMode.AUTO, chatHistory => {
       LocalEventEmitter.emit(LocalEventsEnum.AGENT_TRANSCRIPT_CHANGE, {
         data: {
@@ -999,7 +996,6 @@ export function initializeMessageEngine(): MessageEngine {
       });
     });
   }
-  console.log('debguggingnew messageService', messageService);
   return messageService;
 }
 

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, useAgent} from './AgentControls/AgentContext';
+import {AgentContext, useAIAgent} 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,
-  } = useAgent();
+  } = useAIAgent();
   const {
     data: {agents},
   } = useRoomInfo();

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

@@ -1,6 +1,11 @@
 import React, {useContext, useEffect, useMemo} from 'react';
 import {View, Text, StyleSheet} from 'react-native';
-import {Dropdown, useRoomInfo, Spacer} from 'customization-api';
+import {
+  Dropdown,
+  useRoomInfo,
+  Spacer,
+  useStorageContext,
+} from 'customization-api';
 import ThemeConfig from '../../theme';
 import {AgentContext} from './AgentControls/AgentContext';
 
@@ -8,7 +13,7 @@ const SelectAiAgent = () => {
   const {
     data: {agents},
   } = useRoomInfo();
-
+  const {setStore} = useStorageContext();
   const {agentId, setAgentId, agentConnectionState} = useContext(AgentContext);
 
   const data = useMemo(() => {
@@ -55,6 +60,13 @@ const SelectAiAgent = () => {
         onSelect={async ({label, value}) => {
           if (agentId !== value) {
             setAgentId(value);
+            //setting agent uid in the store so we can retrive it if user refresh the page
+            setStore(prevState => {
+              return {
+                ...prevState,
+                agentId: value,
+              };
+            });
           }
         }}
       />

package/template/src/ai-agent/components/agent-chat-panel/agent-chat-ui.tsx

@@ -24,7 +24,7 @@ const ChatItemBubble = ({item}: {item: any}) => {
       key={`${item.turn_id}-${item.uid}`}
       msgId={`${item.turn_id}-${item.uid}`}
       isLocal={localUid === item.uid}
-      message={item.text}
+      message={item.text ? item.text : item?.metadata?.text}
       createdTimestamp={item._time}
       uid={item.uid}
       isDeleted={false}

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

@@ -56,6 +56,7 @@ const MobileLayoutComponent: LayoutComponent = () => {
           ...defaultContent[agentUID],
           name: 'AI Agent',
           video: false,
+          type: 'ai-agent',
         }}
         CustomChild={() =>
           connected ? (

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

@@ -100,6 +100,7 @@ const DesktopLayoutComponent: LayoutComponent = () => {
               ...defaultContent[agentUID],
               name: 'AI Agent',
               video: false,
+              type: 'ai-agent',
             }}
             CustomChild={() =>
               // show agent voice waves, when agent is connected to the channel, but also not on a state-of-wait,

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

@@ -17,7 +17,7 @@ import {
   SidePanelType,
 } from 'customization-api';
 import ThemeConfig from '../../theme';
-import {useAgent} from '../components/AgentControls/AgentContext';
+import {useAIAgent} 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} = useAgent();
+  const {toggleAgentConnection} = useAIAgent();
   return (
     <TouchableOpacity
       style={{backgroundColor: $config.SEMANTIC_ERROR, borderRadius: 50}}
@@ -111,7 +111,7 @@ const DisconnectButton = () => {
 };
 
 export const ConversationalAI: LayoutComponent = () => {
-  const {agentConnectionState, toggleAgentConnection} = useAgent();
+  const {agentConnectionState, toggleAgentConnection} = useAIAgent();
   // const spline = useRef();
   // const sphere = useRef();
 

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 {useAgent} from '../../ai-agent/components/AgentControls/AgentContext';
+import {useAIAgent} from '../../ai-agent/components/AgentControls/AgentContext';
 
 export interface VideoRendererProps {
   user: ContentInterface;
@@ -71,7 +71,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   containerStyle = {},
   innerContainerStyle = {},
 }) => {
-  const {agentConnectionState} = useAgent();
+  const {agentConnectionState} = useAIAgent();
   const {CustomAgentView} = useCustomization(data => {
     let components: {
       CustomAgentView: React.ComponentType<CustomAgentInterfaceProps>;
@@ -348,12 +348,12 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
               onChange={isVisible => {
                 setVideoTileInViewPortState(user.uid, isVisible);
               }}>
-              {CustomChild ? (
-                <CustomChild />
-              ) : $config.ENABLE_CONVERSATIONAL_AI &&
-                user?.type === 'ai-agent' &&
-                CustomAgentView ? (
+              {$config.ENABLE_CONVERSATIONAL_AI &&
+              user?.type === 'ai-agent' &&
+              CustomAgentView ? (
                 <CustomAgentView connectionState={agentConnectionState} />
+              ) : CustomChild ? (
+                <CustomChild />
               ) : (
                 <MaxVideoView
                   fallback={() => {