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

package/package.json

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

package/template/customization-api/atoms.ts

@@ -7,3 +7,4 @@ export {default as PrimaryButton} from '../src/atoms/PrimaryButton';
 export {default as TertiaryButton} from '../src/atoms/TertiaryButton';
 export {default as ActionMenu} from '../src/atoms/ActionMenu';
 export {default as IconButton} from '../src/atoms/IconButton';
+export {default as Dropdown} from '../src/atoms/Dropdown';

package/template/customization-api/sub-components.ts

@@ -91,3 +91,5 @@ export {default as Loading} from '../src/subComponents/Loading';
 export {default as UserAvatar} from '../src/atoms/UserAvatar';
 export {default as Card} from '../src/atoms/Card';
 export {default as ThemeConfig} from '../src/theme';
+export {default as SelectDevice} from '../src/subComponents/SelectDevice';
+export {EditName} from '../src/components/SettingsView';

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

@@ -1,7 +1,7 @@
 import React, {createContext, useState} from 'react';
 import {AIAgentState, AgentState} from './const';
 import {UidType} from 'customization-api';
-
+import {AI_AGENT_VOICE} from './const';
 export interface ChatItem {
   id: string;
   uid: UidType;
@@ -22,6 +22,10 @@ export interface AgentContextInterface {
   setAgentUID: (uid: UidType | null) => void;
   chatItems: ChatItem[];
   addChatItem: (newItem: ChatItem) => void;
+  agentId: string;
+  setAgentId: (id: string) => void;
+  agentVoice?: keyof typeof AI_AGENT_VOICE | '';
+  setAgentVoice: (voice: keyof typeof AI_AGENT_VOICE) => void;
 }
 
 export const AgentContext = createContext<AgentContextInterface>({
@@ -35,6 +39,10 @@ export const AgentContext = createContext<AgentContextInterface>({
   setAgentUID: () => {},
   chatItems: [],
   addChatItem: () => {}, // Default no-op
+  agentVoice: '',
+  setAgentVoice: () => {},
+  agentId: '',
+  setAgentId: () => {},
 });
 
 /**
@@ -74,6 +82,9 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
   const [agentUID, setAgentUID] = useState<UidType | null>(null);
   const [isSubscribedForStreams, setIsSubscribedForStreams] = useState(false);
   const [chatItems, setChatItems] = useState<ChatItem[]>([]);
+  const [agentId, setAgentId] = useState('');
+  const [agentVoice, setAgentVoice] =
+    useState<AgentContextInterface['agentVoice']>('');
 
   /**
    * Adds a new chat item to the chat state while ensuring:
@@ -155,6 +166,10 @@ export const AgentProvider: React.FC<{children: React.ReactNode}> = ({
     setAgentUID,
     chatItems,
     addChatItem, // Expose the function in the context
+    agentId,
+    setAgentId,
+    agentVoice,
+    setAgentVoice,
   };
 
   return (

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

@@ -1,16 +1,16 @@
 import {isMobileUA} from '../../../utils/common';
 
 export const AI_AGENT_STATE = {
-  NOT_CONNECTED: 'Start Call',
-  REQUEST_SENT: isMobileUA() ? 'Start Call' : 'Requesting agent join..', // loading - reg
-  AWAITING_JOIN: isMobileUA() ? 'Start Call' : 'Agent will join shortly..', // loading
+  NOT_CONNECTED: 'Join Call',
+  REQUEST_SENT: isMobileUA() ? 'Join Call' : 'Requesting agent join..', // loading - reg
+  AWAITING_JOIN: isMobileUA() ? 'Join Call' : 'Agent will join shortly..', // loading
   AGENT_CONNECTED: 'End Call',
-  AGENT_REQUEST_FAILED: 'Start Call',
+  AGENT_REQUEST_FAILED: 'Join Call',
   AGENT_DISCONNECT_REQUEST: isMobileUA()
     ? 'End Call'
     : 'Disconnecting agent...', // loading - req
   AGENT_DISCONNECT_FAILED: 'End Call',
-  AWAITING_LEAVE: 'Start Call', // loading
+  AWAITING_LEAVE: 'Join Call', // loading
 } as const;
 
 export type AIAgentState = keyof typeof AI_AGENT_STATE;
@@ -56,3 +56,36 @@ export const AGORA_SSO_LOGIN_PATH = '/api/v0/oauth/authorize';
 export const AGORA_SSO_LOGOUT_PATH = '/api/v0/logout';
 
 export const AGORA_SSO_CLIENT_ID = 'openai_agora';
+
+export const AI_AGENT_VOICE = {
+  'en-US-AvaMultilingualNeural': 'en-US-AvaMultilingualNeural',
+  'en-US-AndrewMultilingualNeural': 'en-US-AndrewMultilingualNeural',
+  'en-US-EmmaMultilingualNeural': 'en-US-EmmaMultilingualNeural',
+  'en-US-BrianMultilingualNeural': 'en-US-BrianMultilingualNeural',
+  'en-US-AvaNeural': 'en-US-AvaNeural',
+  'en-US-AndrewNeural': 'en-US-AndrewNeural',
+  'en-US-EmmaNeural': 'en-US-EmmaNeural',
+  'en-US-BrianNeural': 'en-US-BrianNeural',
+  'en-US-JennyNeural': 'en-US-JennyNeural',
+  'en-US-GuyNeural': 'en-US-GuyNeural',
+  'en-US-AriaNeural': 'en-US-AriaNeural',
+  'en-US-DavisNeural': 'en-US-DavisNeural',
+  'en-US-JaneNeural': 'en-US-JaneNeural',
+  'en-US-JasonNeural': 'en-US-JasonNeural',
+  'en-US-SaraNeural': 'en-US-SaraNeural',
+  'en-US-TonyNeural': 'en-US-TonyNeural',
+  'en-US-NancyNeural': 'en-US-NancyNeural',
+  'en-US-AmberNeural': 'en-US-AmberNeural',
+  'en-US-AnaNeural': 'en-US-AnaNeural',
+  'en-US-AshleyNeural': 'en-US-AshleyNeural',
+  'en-US-BrandonNeural': 'en-US-BrandonNeural',
+  'en-US-ChristopherNeural': 'en-US-ChristopherNeural',
+  'en-US-CoraNeural': 'en-US-CoraNeural',
+  'en-US-ElizabethNeural': 'en-US-ElizabethNeural',
+  'en-US-EricNeural': 'en-US-EricNeural',
+  'en-US-JacobNeural': 'en-US-JacobNeural',
+  'en-US-JennyMultilingualNeural4': 'en-US-JennyMultilingualNeural4',
+  'en-US-MichelleNeural': 'en-US-MichelleNeural',
+  'en-US-MonicaNeural': 'en-US-MonicaNeural',
+  'en-US-RogerNeural': 'en-US-RogerNeural',
+};

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

@@ -8,7 +8,6 @@ import {
   useContent,
   useEndCall,
   useLocalUid,
-  useHistory,
   useStorageContext,
   Toast,
 } from 'customization-api';
@@ -20,6 +19,7 @@ const connectToAIAgent = async (
   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';
@@ -27,6 +27,14 @@ const connectToAIAgent = async (
     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',
@@ -70,12 +78,13 @@ export const AgentControl: React.FC<{channel_name: string}> = ({
     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 history = useHistory();
   const {store} = useStorageContext();
   const localUid = useLocalUid();
 
@@ -103,6 +112,10 @@ export const AgentControl: React.FC<{channel_name: string}> = ({
             channel_name,
             localUid,
             store.token,
+            {
+              agent_id: agentId,
+              agent_voice: agentVoice,
+            },
           );
           // console.log("response X-Client-ID", newClientId, typeof newClientId)
           // @ts-ignore
@@ -170,7 +183,10 @@ export const AgentControl: React.FC<{channel_name: string}> = ({
         }
         try {
           setAgentConnectionState(AgentState.AGENT_DISCONNECT_REQUEST);
-          await connectToAIAgent('stop', channel_name, localUid, store.token);
+          await connectToAIAgent('stop', channel_name, localUid, store.token, {
+            agent_id: agentId,
+            agent_voice: agentVoice,
+          });
           setAgentConnectionState(AgentState.AWAITING_LEAVE);
 
           Toast.show({
@@ -209,6 +225,7 @@ export const AgentControl: React.FC<{channel_name: string}> = ({
     console.log('agent contrl', {users});
     // welcome agent
     const aiAgentUID = users.filter(item => item === agentUID);
+
     if (
       aiAgentUID.length &&
       agentConnectionState === AgentState.AWAITING_JOIN
@@ -249,12 +266,11 @@ export const AgentControl: React.FC<{channel_name: string}> = ({
     agentConnectionState === AgentState.AGENT_CONNECTED ||
     agentConnectionState === AgentState.AGENT_DISCONNECT_FAILED;
 
-  const backgroundColorStyle = isMobileUA()
-    ? {backgroundColor: isEndAgent ? '#FF414D' : '#00C2FF', height: 72}
-    : {};
-  const fontcolorStyle = isMobileUA()
-    ? {color: '#FFF'}
-    : {color: isEndAgent ? '#FF414D' : '#00C2FF'};
+  const backgroundColorStyle = {
+    backgroundColor: isEndAgent ? $config.SEMANTIC_ERROR : '#0097D4',
+  };
+  const fontcolorStyle = {color: $config.FONT_COLOR};
+
   return (
     <TouchableOpacity
       style={{
@@ -265,29 +281,30 @@ export const AgentControl: React.FC<{channel_name: string}> = ({
         alignItems: 'center',
         gap: 8,
         borderRadius: 40,
-        borderWidth: isMobileUA() ? 0 : 1,
-        borderColor: isEndAgent ? '#FF414D' : '#00C2FF',
         flexDirection: 'row',
         ...backgroundColorStyle,
       }}
       onPress={handleConnectionToggle}
       disabled={isLoading}>
       {isLoading ? (
-        <ActivityIndicator
-          size="small"
-          color={isMobileUA() ? '#FFFFFF' : '#00C2FF'}
-        />
+        <ActivityIndicator size="small" color={$config.FONT_COLOR} />
       ) : isStartAgent ? (
-        <CallIcon fill={isMobileUA() ? '#FFFFFF' : '#00C2FF'} />
+        <CallIcon fill={$config.FONT_COLOR} />
       ) : (
-        <EndCall fill={isMobileUA() ? '#FFFFFF' : '#FF414D'} />
+        <EndCall fill={$config.FONT_COLOR} />
+      )}
+      {!(agentConnectionState === 'AGENT_CONNECTED') ? (
+        <Text
+          style={{
+            fontFamily: ThemeConfig.FontFamily.sansPro,
+            fontSize: 18,
+            lineHeight: 18,
+            fontWeight: '600',
+            ...fontcolorStyle,
+          }}>{`${AI_AGENT_STATE[agentConnectionState]}`}</Text>
+      ) : (
+        <></>
       )}
-
-      <Text
-        style={{
-          fontFamily: ThemeConfig.FontFamily.sansPro,
-          ...fontcolorStyle,
-        }}>{`${AI_AGENT_STATE[agentConnectionState]}`}</Text>
     </TouchableOpacity>
   );
 };

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

@@ -1,34 +1,46 @@
 import React from 'react';
-import {Text, View} from 'react-native';
+import {Text, View, StyleSheet} from 'react-native';
 import {LiveAudioVisualizer} from './react-audio-visualize';
-import {DisconnectedIconDesktop, DisconnectedIconMobile} from './icons';
-import {isMobileUA} from '../../utils/common';
+import ThemeConfig from '../../theme';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {Spacer} from 'customization-api';
 
 export const DisconnectedView = ({isConnected}) => {
   return (
-    <View
-      style={{
-        flex: 1,
-        backgroundColor: '#222',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      {/* big circle that covers the parent view */}
-      {isMobileUA() ? <DisconnectedIconMobile /> : <DisconnectedIconDesktop />}
-      <Text
-        style={{
-          color: '#B3B3B3',
-          fontSize: 20,
-          fontWeight: '400',
-          marginTop: 20,
-        }}>
+    <View style={DisconnectedViewStyles.container}>
+      <View style={DisconnectedViewStyles.circleView} />
+      <Spacer size={16} />
+      <Text style={DisconnectedViewStyles.textStyle}>
         {isConnected ? '' : 'Not Joined'}
       </Text>
     </View>
   );
 };
 
+const DisconnectedViewStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circleView: {
+    width: 210,
+    height: 210,
+    borderRadius: 210 / 2,
+    borderWidth: 15,
+    borderColor: $config.SEMANTIC_NEUTRAL,
+  },
+  textStyle: {
+    color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
+    fontSize: 16,
+    lineHeight: 18,
+    fontWeight: '400',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+});
+
 function createSilentAudioTrack(): MediaStreamTrack {
   const audioContext = new (window.AudioContext ||
     (window as any).webkitAudioContext)();

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

@@ -3,49 +3,113 @@ import {
   ToolbarComponents,
   useSidePanel,
   useRoomInfo,
+  IconButton,
+  SidePanelType,
+  useActionSheet,
+  IconButtonProps,
+  ToolbarItem,
 } from 'customization-api';
-import ThemeConfig from '../../theme';
 import {isMobileUA} from '../../utils/common';
-import React, {useEffect, useState} from 'react';
-import {Text, View} from 'react-native';
+import React, {useEffect} from 'react';
 import {AgentControl} from './AgentControls';
-import {LogoIcon} from './icons';
 
-export const LogoComponent = () => {
+const CustomSettingButton = () => {
+  const {sidePanel, setSidePanel} = useSidePanel();
+
+  const isPanelActive = sidePanel === 'custom-settings-panel';
+  const onPress = () => {
+    isPanelActive
+      ? setSidePanel(SidePanelType.None)
+      : setSidePanel('custom-settings-panel');
+  };
+  const {isOnActionSheet} = useActionSheet();
+  let iconButtonProps: IconButtonProps = {
+    onPress: onPress,
+
+    iconProps: {
+      name: 'settings',
+      tintColor: isPanelActive
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+      iconBackgroundColor: isPanelActive
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+    },
+    btnTextProps: {
+      text: '',
+      textColor: $config.FONT_COLOR,
+    },
+  };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (isOnActionSheet) {
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
+  return (
+    <ToolbarItem>
+      {' '}
+      <IconButton {...iconButtonProps} />{' '}
+    </ToolbarItem>
+  );
+};
+
+const CustomTranscriptButton = () => {
+  const {sidePanel, setSidePanel} = useSidePanel();
+
+  const isPanelActive = sidePanel === 'agent-transcript-panel';
+  const onPress = () => {
+    isPanelActive
+      ? setSidePanel(SidePanelType.None)
+      : setSidePanel('agent-transcript-panel');
+  };
+  const {isOnActionSheet} = useActionSheet();
+  let iconButtonProps: IconButtonProps = {
+    onPress: onPress,
+
+    iconProps: {
+      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgB7dv/TcJAFAfwL8b/ZYRzA5lA3AAmECcAJkAnQCaQDYQJqBPIBnQD2KC+S4+kIem9El+l1O8nuZTQpxzf/r4WgIiIiIiIiKhhOlULsyzryqQv7QHXbdvpdFawJOEMpO2z9thJG1T57uoaFP7RJ9ppqK1NVQLaycShnQ7S7iWkQ1nBTeyvw9rj0F5+v/oYK4gGhOvfIVfRi83UAvr3GJCCASkYkIIBKRiQggEpGJCCASkYkIIBKRiQ4ha2UmlvYTqWFhuUWkhLkA85WHHSZjAcgbAO6EnGVtLwOpHhkj3yIYVTS6mboAbymYlMdjBiuYmlhXCO1iW1X6hJ6EMKI5YBOVl67uS9ssGo6CDVb4Q+OBix3sQ20sFpeP2M8o6OpM7ve9aw5TfnOQxZB+RQfYB/Elqj8TCvYEAKBqRgQAoGpLA+inkJDE/UkB+6/f05F6nxpwyrUNOHIeuApnIm+w5jWf5kyQblNzJ7x7N4qR3J5ANGLDexQx3heOHe+aJk9rp4iSOvl2jopUbduiXv351RezbLgLqyes9Qg3B9NS6Z3Zf5k0Kt74NZQNb7oNfQWcsxHs8p8+eFhWMWjlfHUawL406e8bnmeB6kYEAKBqRgQAoGpNAC2qL9vmMzo48Bh2sgfwvlEoftv+DvxNzHCqJrULgGekF7TbUCdR8UnkQfwnYI49L8glefsvcq/5jFCw+WX/2PWaQlsafriYiIiIiIiBrtB7K/UdV6QM6CAAAAAElFTkSuQmCC',
+      tintColor: isPanelActive
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+      iconBackgroundColor: isPanelActive
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+    },
+    btnTextProps: {
+      text: '',
+      textColor: $config.FONT_COLOR,
+    },
+  };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (isOnActionSheet) {
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
+  }
   return (
-    <View
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 8,
-        marginRight: 20,
-      }}>
-      <LogoIcon />
-      <Text
-        style={{
-          color: '#C3C3C3',
-          textAlign: 'center',
-          fontSize: 18,
-          fontStyle: 'normal',
-          fontWeight: '600',
-          lineHeight: 18,
-          fontFamily: ThemeConfig.FontFamily.sansPro,
-        }}>
-        AI Builder Demo
-      </Text>
-    </View>
+    <ToolbarItem>
+      <IconButton {...iconButtonProps} />
+    </ToolbarItem>
   );
 };
 
 const Bottombar = () => {
-  const {MeetingTitleToolbarItem, ParticipantCountToolbarItem} =
-    ToolbarComponents;
+  const {MeetingTitleToolbarItem} = ToolbarComponents;
   const {setSidePanel} = useSidePanel();
   const {data} = useRoomInfo();
-  const [clientId, setClientId] = useState<string | null>(null);
   useEffect(() => {
-    !isMobileUA() && setSidePanel('agent-transcript-panel');
+    !isMobileUA() && setSidePanel('custom-settings-panel');
   }, []);
   return (
     <ToolbarPreset
@@ -54,35 +118,36 @@ const Bottombar = () => {
         layout: {hide: true},
         invite: {hide: true},
         more: {hide: true},
-        logo: {
-          align: 'start',
-          order: 0,
-          component: () => <LogoComponent />,
-        },
         'meeting-title': {
           align: 'start',
           component: MeetingTitleToolbarItem,
           order: 1,
-          hide: true,
+          hide: false,
         },
         'participant-count': {
-          align: 'start',
-          component: ParticipantCountToolbarItem,
-          order: 2,
           hide: true,
         },
-
+        'local-video': {hide: true},
+        'local-audio': {align: 'center', order: 1},
+        screenshare: {hide: true},
+        recording: {hide: true},
         'connect-agent': {
-          align: 'end',
+          align: 'center',
           label: 'Agent',
           component: () => <AgentControl channel_name={data.channel} />,
-          order: 3,
+          order: 2,
+        },
+        'end-call': {align: 'center', order: 3, hide: true},
+        'custom-transcript': {
+          align: 'end',
+          order: 0,
+          component: CustomTranscriptButton,
+        },
+        'custom-settings': {
+          align: 'end',
+          order: 2,
+          component: CustomSettingButton,
         },
-        'local-video': {hide: true},
-        screenshare: {hide: true},
-        recording: {hide: true},
-        'local-audio': {align: 'end', order: 1},
-        'end-call': {align: 'end', order: 2, hide: true},
       }}
     />
   );

package/template/src/ai-agent/components/{CustomSidePanel.tsx → CustomChatPanel.tsx}

@@ -1,4 +1,4 @@
-import {StyleSheet} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import React, {useContext} from 'react';
 import {useRtc} from 'customization-api';
 import {AgentContext} from './AgentControls/AgentContext';
@@ -118,9 +118,9 @@ const CustomSidePanel = () => {
   };
 
   return (
-    <div style={styles.container}>
+    <View style={styles.container}>
       <ChatScreen />
-    </div>
+    </View>
   );
 };