agora-appbuilder-core 4.1.0-beta-3 → 4.1.0-beta-4

package/package.json

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

package/template/customization-api/customize.tsx

@@ -177,6 +177,17 @@ const mergeCustomization = (
     );
   }
 
+  if (externalConfig?.components?.videoCall?.wrapper) {
+    const AiAgentVideoCallWrapper = aiAgentConfig.components.videoCall.wrapper;
+    const ExternalVideoCallWrapper =
+      externalConfig.components.videoCall.wrapper;
+    mergedData.components.videoCall.wrapper = props => (
+      <AiAgentVideoCallWrapper>
+        <ExternalVideoCallWrapper>{props.children}</ExternalVideoCallWrapper>
+      </AiAgentVideoCallWrapper>
+    );
+  }
+
   //override the i18n
   if (externalConfig?.i18n && externalConfig?.i18n?.length) {
     mergedData.i18n = externalConfig.i18n;

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

@@ -0,0 +1,248 @@
+import {UidType, useContent, useRoomInfo, Toast} from 'customization-api';
+import React, {createContext, useContext, useEffect} from 'react';
+import {AgentContext} from './AgentContext';
+import {AgentState} from './const';
+import StorageContext from '../../../components/StorageContext';
+
+export interface AgentContextInterface {
+  toggleAgentConnection: (forceStop?: boolean) => Promise<boolean>;
+}
+
+export const AgentConnectionContext = createContext<AgentContextInterface>({
+  toggleAgentConnection: () => {
+    return Promise.resolve(false);
+  },
+});
+
+export const AgentConnectionProvider: React.FC<{children: React.ReactNode}> = ({
+  children,
+}) => {
+  const {activeUids: users} = useContent();
+  const {
+    agentUID,
+    agentConnectionState,
+    setAgentConnectionState,
+    agentId,
+    setAgentUID,
+    prompt,
+  } = useContext(AgentContext);
+  const {
+    data: {channel: channel_name, uid: localUid, agents},
+  } = useRoomInfo();
+  const {store} = useContext(StorageContext);
+
+  useEffect(() => {
+    console.log('debugging users agent contrl', {users});
+    // welcome agent
+    const aiAgentUID = users.filter(item => item === agentUID);
+
+    if (
+      aiAgentUID.length &&
+      agentConnectionState === AgentState.AWAITING_JOIN
+    ) {
+      setAgentConnectionState(AgentState.AGENT_CONNECTED);
+
+      Toast.show({
+        leadingIconName: 'tick-fill',
+        type: 'success',
+        text1: 'Say Hi!!',
+        text2: null,
+        visibilityTime: 3000,
+        primaryBtn: null,
+        secondaryBtn: null,
+        leadingIcon: null,
+      });
+    }
+    // when agent leaves, show left toast, and set agent to not connected state
+    if (
+      !aiAgentUID.length &&
+      agentConnectionState === AgentState.AWAITING_LEAVE
+    ) {
+      setAgentConnectionState(AgentState.NOT_CONNECTED);
+    }
+  }, [users, agentUID]);
+
+  const handleConnectionToggle = async (forceStop: boolean = false) => {
+    try {
+      // connect to agent when agent is in not connected state or when earlier connect failed
+      if (
+        agentConnectionState === AgentState.NOT_CONNECTED ||
+        agentConnectionState === AgentState.AGENT_REQUEST_FAILED ||
+        agentConnectionState === AgentState.AWAITING_LEAVE
+      ) {
+        try {
+          setAgentConnectionState(AgentState.REQUEST_SENT);
+          const data = await connectToAIAgent(
+            'start',
+            channel_name,
+            localUid,
+            store.token,
+            {
+              agent_id: agentId,
+              prompt: prompt,
+              voice: agents.find(a => a.id === agentId)?.config?.tts?.params
+                ?.voice_name,
+            },
+          );
+          // console.log("response X-Client-ID", newClientId, typeof newClientId)
+          // @ts-ignore
+          const {agent_uid = null} = data;
+
+          //setClientId(agent_id);
+          setAgentUID(agent_uid);
+
+          setAgentConnectionState(AgentState.AWAITING_JOIN);
+
+          Toast.show({
+            leadingIconName: 'tick-fill',
+            type: 'success',
+            text1: 'Agent requested to join',
+            text2: null,
+            visibilityTime: 3000,
+            primaryBtn: null,
+            secondaryBtn: null,
+            leadingIcon: null,
+          });
+          return Promise.resolve(true);
+        } catch (agentConnectError) {
+          setAgentConnectionState(AgentState.AGENT_REQUEST_FAILED);
+
+          if (agentConnectError.toString().indexOf('401') !== -1) {
+            Toast.show({
+              leadingIconName: 'alert',
+              type: 'error',
+              text1: 'Your session is expired. Please sign in to join call.',
+              text2: null,
+              visibilityTime: 5000,
+              primaryBtn: null,
+              secondaryBtn: null,
+              leadingIcon: null,
+            });
+          } else {
+            Toast.show({
+              leadingIconName: 'alert',
+              type: 'error',
+              text1: 'Uh oh! Agent failed to connect',
+              text2: null,
+              visibilityTime: 5000,
+              primaryBtn: null,
+              secondaryBtn: null,
+              leadingIcon: null,
+            });
+          }
+
+          throw agentConnectError;
+        }
+      }
+      // disconnect agent with agent is already connected or when earlier disconnect failed
+      if (
+        forceStop === true ||
+        agentConnectionState === AgentState.AGENT_CONNECTED ||
+        agentConnectionState === AgentState.AGENT_DISCONNECT_FAILED
+      ) {
+        try {
+          setAgentConnectionState(AgentState.AGENT_DISCONNECT_REQUEST);
+          await connectToAIAgent('stop', channel_name, localUid, store.token, {
+            agent_id: agentId,
+          });
+          setAgentConnectionState(AgentState.AWAITING_LEAVE);
+          if (!forceStop) {
+            Toast.show({
+              leadingIconName: 'tick-fill',
+              type: 'success',
+              text1: 'Agent disconnected',
+              text2: null,
+              visibilityTime: 3000,
+              primaryBtn: null,
+              secondaryBtn: null,
+              leadingIcon: null,
+            });
+          }
+          return Promise.resolve(true);
+        } catch (agentDisconnectError) {
+          setAgentConnectionState(AgentState.AGENT_DISCONNECT_FAILED);
+
+          Toast.show({
+            leadingIconName: 'alert',
+            type: 'error',
+            text1: 'Uh oh! Agent failed to disconnect',
+            text2: null,
+            visibilityTime: 5000,
+            primaryBtn: null,
+            secondaryBtn: null,
+            leadingIcon: null,
+          });
+
+          throw agentDisconnectError;
+        }
+      }
+    } catch (error) {
+      console.log(`Agent failed to connect/disconnect - ${error}`);
+    }
+  };
+
+  const value = {
+    toggleAgentConnection: handleConnectionToggle,
+  };
+
+  return (
+    <AgentConnectionContext.Provider value={value}>
+      {children}
+    </AgentConnectionContext.Provider>
+  );
+};
+
+export const connectToAIAgent = async (
+  agentAction: 'start' | 'stop',
+  channel_name: string,
+  localUid: UidType,
+  agentAuthToken: string,
+  data?: {agent_id: string; prompt?: string; voice?: string},
+): Promise<{}> => {
+  // const apiUrl = '/api/proxy';
+  const apiUrl = $config.BACKEND_ENDPOINT + '/v1/convoai';
+  const requestBody = {
+    channel_name: channel_name,
+    uid: localUid, // user uid // localUid or 0
+  };
+
+  if (data && data?.agent_id) {
+    requestBody['ai_agent_id'] = data.agent_id;
+  }
+  if (data && data?.voice) {
+    requestBody['voice'] = data.voice;
+  }
+  if (data && data?.prompt) {
+    requestBody['prompt'] = data.prompt;
+  }
+
+  const headers: HeadersInit = {
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${agentAuthToken}`,
+  };
+
+  try {
+    const response = await fetch(`${apiUrl}/${agentAction}`, {
+      method: 'POST',
+      headers: headers,
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    console.log(
+      `AI agent ${agentAction === 'start' ? 'connected' : 'disconnected'}`,
+      data,
+    );
+    if (agentAction === 'start') {
+      return data;
+    }
+  } catch (error) {
+    console.error(`Failed to ${agentAction} AI agent connection:`, error);
+    throw error;
+  }
+};

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

@@ -26,6 +26,8 @@ export interface AgentContextInterface {
   setAgentId: (id: string) => void;
   agentVoice?: keyof typeof AI_AGENT_VOICE | '';
   setAgentVoice: (voice: keyof typeof AI_AGENT_VOICE) => void;
+  prompt?: string;
+  setPrompt: (prompt: string) => void;
 }
 
 export const AgentContext = createContext<AgentContextInterface>({
@@ -43,6 +45,8 @@ export const AgentContext = createContext<AgentContextInterface>({
   setAgentVoice: () => {},
   agentId: '',
   setAgentId: () => {},
+  prompt: '',
+  setPrompt: () => {},
 });
 
 /**
@@ -85,6 +89,7 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
   const [agentId, setAgentId] = useState('');
   const [agentVoice, setAgentVoice] =
     useState<AgentContextInterface['agentVoice']>('');
+  const [prompt, setPrompt] = useState('');
 
   /**
    * Adds a new chat item to the chat state while ensuring:
@@ -170,6 +175,8 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
     setAgentId,
     agentVoice,
     setAgentVoice,
+    prompt,
+    setPrompt,
   };
 
   return (

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

@@ -1,95 +1,22 @@
-import React, {useContext, useEffect} from 'react';
+import React, {useContext} from 'react';
 import {AI_AGENT_STATE, AgentState} from './const';
-import {TouchableOpacity, Text, ActivityIndicator} from 'react-native';
+import {TouchableOpacity, Text, ActivityIndicator, Image} from 'react-native';
 import {AgentContext} from './AgentContext';
-import {
-  ThemeConfig,
-  UidType,
-  useContent,
-  useEndCall,
-  useLocalUid,
-  useStorageContext,
-  Toast,
-} from 'customization-api';
+import {ThemeConfig} from 'customization-api';
+//@ts-ignore
+import JoinCallIcon from '../../assets/join-call.png';
+//@ts-ignore
+import LeaveCallIcon from '../../assets/leave-call.png';
+import {AgentConnectionContext} from './AgentConnectionWrapper';
 import {isMobileUA} from '../../../utils/common';
-import {CallIcon, EndCall} from '../icons';
-
-const connectToAIAgent = async (
-  agentAction: 'start' | 'stop',
-  channel_name: string,
-  localUid: UidType,
-  agentAuthToken: string,
-  data?: {agent_id: string; agent_voice: string},
-): Promise<{}> => {
-  // const apiUrl = '/api/proxy';
-  const apiUrl = $config.BACKEND_ENDPOINT + '/v1/convoai';
-  const requestBody = {
-    channel_name: channel_name,
-    uid: localUid, // user uid // localUid or 0
-  };
-
-  if (data && data.agent_id) {
-    requestBody['ai_agent_id'] = data.agent_id;
-  }
-  if (data && data.agent_voice) {
-    requestBody['voice'] = data.agent_voice;
-  }
-
-  console.log({requestBody});
-  const headers: HeadersInit = {
-    'Content-Type': 'application/json',
-    Authorization: `Bearer ${agentAuthToken}`,
-  };
-
-  try {
-    const response = await fetch(`${apiUrl}/${agentAction}`, {
-      method: 'POST',
-      headers: headers,
-      body: JSON.stringify(requestBody),
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const data = await response.json();
-
-    // console.log({data}, "X-Client-ID start stop")
-    console.log(
-      `AI agent ${agentAction === 'start' ? 'connected' : 'disconnected'}`,
-      data,
-    );
-    if (agentAction === 'start') {
-      return data;
-    }
-  } catch (error) {
-    console.error(`Failed to ${agentAction} AI agent connection:`, error);
-    throw error;
-  }
-};
-
-export const AgentControl: React.FC<{channel_name: string}> = ({
-  channel_name,
-}) => {
-  const {
-    agentConnectionState,
-    setAgentConnectionState,
-    agentAuthToken,
-    setAgentAuthToken,
-    agentUID,
-    setAgentUID,
-    agentVoice,
-    agentId,
-  } = useContext(AgentContext);
-  // console.log("X-Client-ID state", clientId)
-  // const { users } = useContext(UserContext)
-  const {activeUids: users} = useContent();
-  const endcall = useEndCall();
-  const {store} = useStorageContext();
-  const localUid = useLocalUid();
+import {useIsAgentAvailable} from '../utils';
 
+export const AgentControl: React.FC = () => {
+  const {agentConnectionState} = useContext(AgentContext);
+  const {toggleAgentConnection} = useContext(AgentConnectionContext);
   // stop_agent API is successful, but agent has not yet left the RTC channel
   const isAwaitingLeave = agentConnectionState === AgentState.AWAITING_LEAVE;
+  const isAgentAvailable = useIsAgentAvailable();
 
   console.log(
     'Agent Control--',
@@ -97,161 +24,6 @@ export const AgentControl: React.FC<{channel_name: string}> = ({
     {bth: AI_AGENT_STATE[agentConnectionState]},
   );
 
-  const handleConnectionToggle = async () => {
-    try {
-      // connect to agent when agent is in not connected state or when earlier connect failed
-      if (
-        agentConnectionState === AgentState.NOT_CONNECTED ||
-        agentConnectionState === AgentState.AGENT_REQUEST_FAILED ||
-        isAwaitingLeave
-      ) {
-        try {
-          setAgentConnectionState(AgentState.REQUEST_SENT);
-          const data = await connectToAIAgent(
-            'start',
-            channel_name,
-            localUid,
-            store.token,
-            {
-              agent_id: agentId,
-              agent_voice: agentVoice,
-            },
-          );
-          // console.log("response X-Client-ID", newClientId, typeof newClientId)
-          // @ts-ignore
-          const {agent_uid = null} = data;
-
-          //setClientId(agent_id);
-          setAgentUID(agent_uid);
-
-          setAgentConnectionState(AgentState.AWAITING_JOIN);
-
-          Toast.show({
-            leadingIconName: 'tick-fill',
-            type: 'success',
-            text1: 'Agent requested to join',
-            text2: null,
-            visibilityTime: 3000,
-            primaryBtn: null,
-            secondaryBtn: null,
-            leadingIcon: null,
-          });
-        } catch (agentConnectError) {
-          setAgentConnectionState(AgentState.AGENT_REQUEST_FAILED);
-
-          if (agentConnectError.toString().indexOf('401') !== -1) {
-            Toast.show({
-              leadingIconName: 'alert',
-              type: 'error',
-              text1: 'Your session is expired. Please sign in to join call.',
-              text2: null,
-              visibilityTime: 5000,
-              primaryBtn: null,
-              secondaryBtn: null,
-              leadingIcon: null,
-            });
-            // window.location.href = '/create'
-            await endcall();
-            setAgentAuthToken(null);
-            return;
-          } else {
-            Toast.show({
-              leadingIconName: 'alert',
-              type: 'error',
-              text1: 'Uh oh! Agent failed to connect',
-              text2: null,
-              visibilityTime: 5000,
-              primaryBtn: null,
-              secondaryBtn: null,
-              leadingIcon: null,
-            });
-          }
-
-          throw agentConnectError;
-        }
-      }
-      // disconnect agent with agent is already connected or when earlier disconnect failed
-      if (
-        agentConnectionState === AgentState.AGENT_CONNECTED ||
-        agentConnectionState === AgentState.AGENT_DISCONNECT_FAILED
-      ) {
-        if (isMobileUA()) {
-          await endcall();
-          setAgentConnectionState(AgentState.NOT_CONNECTED);
-          setAgentAuthToken(null);
-          return; // check later
-        }
-        try {
-          setAgentConnectionState(AgentState.AGENT_DISCONNECT_REQUEST);
-          await connectToAIAgent('stop', channel_name, localUid, store.token, {
-            agent_id: agentId,
-            agent_voice: agentVoice,
-          });
-          setAgentConnectionState(AgentState.AWAITING_LEAVE);
-
-          Toast.show({
-            leadingIconName: 'tick-fill',
-            type: 'success',
-            text1: 'Agent disconnected',
-            text2: null,
-            visibilityTime: 3000,
-            primaryBtn: null,
-            secondaryBtn: null,
-            leadingIcon: null,
-          });
-        } catch (agentDisconnectError) {
-          setAgentConnectionState(AgentState.AGENT_DISCONNECT_FAILED);
-
-          Toast.show({
-            leadingIconName: 'alert',
-            type: 'error',
-            text1: 'Uh oh! Agent failed to disconnect',
-            text2: null,
-            visibilityTime: 5000,
-            primaryBtn: null,
-            secondaryBtn: null,
-            leadingIcon: null,
-          });
-
-          throw agentDisconnectError;
-        }
-      }
-    } catch (error) {
-      console.log(`Agent failed to connect/disconnect - ${error}`);
-    }
-  };
-
-  useEffect(() => {
-    console.log('agent contrl', {users});
-    // welcome agent
-    const aiAgentUID = users.filter(item => item === agentUID);
-
-    if (
-      aiAgentUID.length &&
-      agentConnectionState === AgentState.AWAITING_JOIN
-    ) {
-      setAgentConnectionState(AgentState.AGENT_CONNECTED);
-
-      Toast.show({
-        leadingIconName: 'tick-fill',
-        type: 'success',
-        text1: 'Say Hi!!',
-        text2: null,
-        visibilityTime: 3000,
-        primaryBtn: null,
-        secondaryBtn: null,
-        leadingIcon: null,
-      });
-    }
-    // when agent leaves, show left toast, and set agent to not connected state
-    if (
-      !aiAgentUID.length &&
-      agentConnectionState === AgentState.AWAITING_LEAVE
-    ) {
-      setAgentConnectionState(AgentState.NOT_CONNECTED);
-    }
-  }, [users]);
-
   const isLoading =
     agentConnectionState === AgentState.REQUEST_SENT ||
     agentConnectionState === AgentState.AGENT_DISCONNECT_REQUEST ||
@@ -273,27 +45,41 @@ export const AgentControl: React.FC<{channel_name: string}> = ({
 
   return (
     <TouchableOpacity
-      style={{
-        display: 'flex',
-        height: 48,
-        padding: 20,
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        gap: 8,
-        borderRadius: 40,
-        flexDirection: 'row',
-        ...backgroundColorStyle,
-      }}
-      onPress={handleConnectionToggle}
-      disabled={isLoading}>
+      style={[
+        isMobileUA()
+          ? {
+              display: 'flex',
+              height: 48,
+              width: 48,
+              marginHorizontal: 24,
+              justifyContent: 'center',
+              alignItems: 'center',
+              borderRadius: 40,
+              flexDirection: 'row',
+              ...backgroundColorStyle,
+            }
+          : {
+              display: 'flex',
+              height: 48,
+              padding: 20,
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              borderRadius: 40,
+              flexDirection: 'row',
+              ...backgroundColorStyle,
+            },
+        {opacity: !isAgentAvailable ? 0.6 : 1},
+      ]}
+      onPress={() => toggleAgentConnection()}
+      disabled={isLoading || !isAgentAvailable}>
       {isLoading ? (
         <ActivityIndicator size="small" color={$config.FONT_COLOR} />
       ) : isStartAgent ? (
-        <CallIcon fill={$config.FONT_COLOR} />
+        <Image style={{width: 24, height: 24}} source={JoinCallIcon} />
       ) : (
-        <EndCall fill={$config.FONT_COLOR} />
+        <Image style={{width: 24, height: 24}} source={LeaveCallIcon} />
       )}
-      {!(agentConnectionState === 'AGENT_CONNECTED') ? (
+      {!isMobileUA() && !(agentConnectionState === 'AGENT_CONNECTED') ? (
         <Text
           style={{
             fontFamily: ThemeConfig.FontFamily.sansPro,

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

@@ -2,7 +2,6 @@ import {
   ToolbarPreset,
   ToolbarComponents,
   useSidePanel,
-  useRoomInfo,
   IconButton,
   SidePanelType,
   useActionSheet,
@@ -13,7 +12,7 @@ import {isMobileUA} from '../../utils/common';
 import React, {useEffect} from 'react';
 import {AgentControl} from './AgentControls';
 
-const CustomSettingButton = () => {
+export const CustomSettingButton = () => {
   const {sidePanel, setSidePanel} = useSidePanel();
 
   const isPanelActive = sidePanel === 'custom-settings-panel';
@@ -59,7 +58,7 @@ const CustomSettingButton = () => {
   );
 };
 
-const CustomTranscriptButton = () => {
+export const CustomTranscriptButton = () => {
   const {sidePanel, setSidePanel} = useSidePanel();
 
   const isPanelActive = sidePanel === 'agent-transcript-panel';
@@ -107,7 +106,6 @@ const CustomTranscriptButton = () => {
 const Bottombar = () => {
   const {MeetingTitleToolbarItem} = ToolbarComponents;
   const {setSidePanel} = useSidePanel();
-  const {data} = useRoomInfo();
   useEffect(() => {
     !isMobileUA() && setSidePanel('custom-settings-panel');
   }, []);
@@ -134,7 +132,7 @@ const Bottombar = () => {
         'connect-agent': {
           align: 'center',
           label: 'Agent',
-          component: () => <AgentControl channel_name={data.channel} />,
+          component: AgentControl,
           order: 2,
         },
         'end-call': {align: 'center', order: 3, hide: true},