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

package/package.json

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

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

@@ -1,4 +1,10 @@
-import {UidType, useContent, useRoomInfo, Toast} from 'customization-api';
+import {
+  UidType,
+  useContent,
+  useRoomInfo,
+  Toast,
+  useRtc,
+} from 'customization-api';
 import React, {createContext, useContext, useEffect} from 'react';
 import {AgentContext} from './AgentContext';
 import {AgentState} from './const';
@@ -25,12 +31,125 @@ export const AgentConnectionProvider: React.FC<{children: React.ReactNode}> = ({
     agentId,
     setAgentUID,
     prompt,
+    isSubscribedForStreams,
+    setIsSubscribedForStreams,
+    addChatItem,
   } = useContext(AgentContext);
   const {
     data: {channel: channel_name, uid: localUid, agents},
   } = useRoomInfo();
   const {store} = useContext(StorageContext);
 
+  const {RtcEngineUnsafe} = useRtc();
+
+  const messageCache = {};
+  const TIMEOUT_MS = 5000; // Timeout for incomplete messages
+
+  React.useEffect(() => {
+    if (!isSubscribedForStreams) {
+      RtcEngineUnsafe.addListener(
+        'onStreamMessage',
+        handleStreamMessageCallback,
+      );
+      setIsSubscribedForStreams(true);
+    }
+  }, []);
+
+  const handleStreamMessageCallback = (...args) => {
+    console.log('rec', args);
+    parseData(args[1]);
+  };
+
+  const parseData = data => {
+    let decoder = new TextDecoder('utf-8');
+    let decodedMessage = decoder.decode(data);
+    console.log('[test] textstream raw data', decodedMessage);
+    handleChunk(decodedMessage);
+  };
+  // Function to process received chunk via event emitter
+  const handleChunk = (formattedChunk: string) => {
+    try {
+      // Split the chunk by the delimiter "|"
+      const [message_id, partIndexStr, totalPartsStr, content] =
+        formattedChunk.split('|');
+
+      const part_index = parseInt(partIndexStr, 10);
+      const total_parts =
+        totalPartsStr === '???' ? -1 : parseInt(totalPartsStr, 10); // -1 means total parts unknown
+
+      // Ensure total_parts is known before processing further
+      if (total_parts === -1) {
+        console.warn(
+          `Total parts for message ${message_id} unknown, waiting for further parts.`,
+        );
+        return;
+      }
+
+      const chunkData = {
+        message_id,
+        part_index,
+        total_parts,
+        content,
+      };
+
+      // Check if we already have an entry for this message
+      if (!messageCache[message_id]) {
+        messageCache[message_id] = [];
+        // Set a timeout to discard incomplete messages
+        setTimeout(() => {
+          if (messageCache[message_id]?.length !== total_parts) {
+            console.warn(`Incomplete message with ID ${message_id} discarded`);
+            delete messageCache[message_id]; // Discard incomplete message
+          }
+        }, TIMEOUT_MS);
+      }
+
+      // Cache this chunk by message_id
+      messageCache[message_id].push(chunkData);
+
+      // If all parts are received, reconstruct the message
+      if (messageCache[message_id].length === total_parts) {
+        const completeMessage = reconstructMessage(messageCache[message_id]);
+        const data = atob(completeMessage);
+        const {stream_id, is_final, text, text_ts} = JSON.parse(data);
+        /** Data type of above object
+         * stream_id: number
+         * is_final: boolean
+         * text: string
+         * text_ts: number
+         */
+        const textItem = {
+          id: message_id,
+          uid: stream_id,
+          time: text_ts,
+          dataType: 'transcribe',
+          text: text,
+          isFinal: is_final,
+          isSelf: stream_id === 0 ? false : true,
+        };
+
+        if (text.trim().length > 0) {
+          //this.emit("textChanged", textItem);
+          console.warn('emit textChanged: ', textItem);
+          addChatItem(textItem);
+        }
+
+        // Clean up the cache
+        delete messageCache[message_id];
+      }
+    } catch (error) {
+      console.error('Error processing chunk:', error);
+    }
+  };
+
+  const reconstructMessage = chunks => {
+    // Sort chunks by their part index
+    chunks.sort((a, b) => a.part_index - b.part_index);
+
+    // Concatenate all chunks to form the full message
+    return chunks.map(chunk => chunk.content).join('');
+  };
+
   useEffect(() => {
     console.log('debugging users agent contrl', {users});
     // welcome agent

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

@@ -87,7 +87,7 @@ export const AgentControl: React.FC = () => {
             lineHeight: 18,
             fontWeight: '600',
             ...fontcolorStyle,
-          }}>{`${AI_AGENT_STATE[agentConnectionState]}`}</Text>
+          }}>{` ${AI_AGENT_STATE[agentConnectionState]}`}</Text>
       ) : (
         <></>
       )}

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

@@ -1,122 +1,8 @@
 import {StyleSheet, View} from 'react-native';
-import React, {useContext} from 'react';
-import {useRtc} from 'customization-api';
-import {AgentContext} from './AgentControls/AgentContext';
+import React from 'react';
 import ChatScreen from './agent-chat-panel/agent-chat-ui';
 
 const CustomSidePanel = () => {
-  const {RtcEngineUnsafe} = useRtc();
-  const {isSubscribedForStreams, setIsSubscribedForStreams, addChatItem} =
-    useContext(AgentContext);
-
-  const messageCache = {};
-  const TIMEOUT_MS = 5000; // Timeout for incomplete messages
-
-  React.useEffect(() => {
-    if (!isSubscribedForStreams) {
-      RtcEngineUnsafe.addListener(
-        'onStreamMessage',
-        handleStreamMessageCallback,
-      );
-      setIsSubscribedForStreams(true);
-    }
-  }, []);
-
-  const handleStreamMessageCallback = (...args) => {
-    console.log('rec', args);
-    parseData(args[1]);
-  };
-
-  const parseData = data => {
-    let decoder = new TextDecoder('utf-8');
-    let decodedMessage = decoder.decode(data);
-    console.log('[test] textstream raw data', decodedMessage);
-    handleChunk(decodedMessage);
-  };
-  // Function to process received chunk via event emitter
-  const handleChunk = (formattedChunk: string) => {
-    try {
-      // Split the chunk by the delimiter "|"
-      const [message_id, partIndexStr, totalPartsStr, content] =
-        formattedChunk.split('|');
-
-      const part_index = parseInt(partIndexStr, 10);
-      const total_parts =
-        totalPartsStr === '???' ? -1 : parseInt(totalPartsStr, 10); // -1 means total parts unknown
-
-      // Ensure total_parts is known before processing further
-      if (total_parts === -1) {
-        console.warn(
-          `Total parts for message ${message_id} unknown, waiting for further parts.`,
-        );
-        return;
-      }
-
-      const chunkData = {
-        message_id,
-        part_index,
-        total_parts,
-        content,
-      };
-
-      // Check if we already have an entry for this message
-      if (!messageCache[message_id]) {
-        messageCache[message_id] = [];
-        // Set a timeout to discard incomplete messages
-        setTimeout(() => {
-          if (messageCache[message_id]?.length !== total_parts) {
-            console.warn(`Incomplete message with ID ${message_id} discarded`);
-            delete messageCache[message_id]; // Discard incomplete message
-          }
-        }, TIMEOUT_MS);
-      }
-
-      // Cache this chunk by message_id
-      messageCache[message_id].push(chunkData);
-
-      // If all parts are received, reconstruct the message
-      if (messageCache[message_id].length === total_parts) {
-        const completeMessage = reconstructMessage(messageCache[message_id]);
-        const data = atob(completeMessage);
-        const {stream_id, is_final, text, text_ts} = JSON.parse(data);
-        /** Data type of above object
-         * stream_id: number
-         * is_final: boolean
-         * text: string
-         * text_ts: number
-         */
-        const textItem = {
-          id: message_id,
-          uid: stream_id,
-          time: text_ts,
-          dataType: 'transcribe',
-          text: text,
-          isFinal: is_final,
-          isSelf: stream_id === 0 ? false : true,
-        };
-
-        if (text.trim().length > 0) {
-          //this.emit("textChanged", textItem);
-          console.warn('emit textChanged: ', textItem);
-          addChatItem(textItem);
-        }
-
-        // Clean up the cache
-        delete messageCache[message_id];
-      }
-    } catch (error) {
-      console.error('Error processing chunk:', error);
-    }
-  };
-
-  const reconstructMessage = chunks => {
-    // Sort chunks by their part index
-    chunks.sort((a, b) => a.part_index - b.part_index);
-
-    // Concatenate all chunks to form the full message
-    return chunks.map(chunk => chunk.content).join('');
-  };
-
   return (
     <View style={styles.container}>
       <ChatScreen />

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

@@ -56,7 +56,7 @@ const CustomCreate = () => {
       };
     });
     // set default meeting name
-    onChangeRoomTitle(generateChannelId);
+    onChangeRoomTitle('Conversational AI');
   }, []);
 
   const createRoomAndNavigateToShare = async (

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

@@ -1,10 +1,21 @@
-import React, {useContext} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {View, TextInput, StyleSheet, Text, Platform} from 'react-native';
 import ThemeConfig from '../../theme';
 import {AgentContext} from './AgentControls/AgentContext';
+import {useRoomInfo} from 'customization-api';
 
 const UserPrompt = () => {
-  const {prompt, setPrompt, agentConnectionState} = useContext(AgentContext);
+  const {prompt, setPrompt, agentConnectionState, agentId} =
+    useContext(AgentContext);
+  const {
+    data: {agents},
+  } = useRoomInfo();
+
+  useEffect(() => {
+    if (agentId) {
+      setPrompt(agents?.find(a => a?.id === agentId)?.config?.llm?.prompt);
+    }
+  }, [agentId, agents, setPrompt]);
   return (
     <>
       <Text style={styles.label}>Prompt</Text>
@@ -20,7 +31,7 @@ const UserPrompt = () => {
           value={prompt}
           onChangeText={setPrompt}
           placeholder="Customize Prompt"
-          numberOfLines={5}
+          numberOfLines={10}
           multiline={true}
         />
       </View>

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

@@ -25,9 +25,7 @@ const ChatItemBubble = ({item}: {item: ChatItem}) => {
           paddingTop: 2,
           marginTop: 0,
         },
-        bubbleStyleLayer2: {
-          padding: 0,
-        },
+        bubbleStyleLayer2: {},
       }}
     />
   );

package/template/src/components/room-info/useRoomInfo.tsx

@@ -74,6 +74,7 @@ export interface AIAgentInterface {
     llm: {
       agent_name: string;
       model: string;
+      prompt: string;
     };
     tts: {
       vendor: string;

package/template/src/utils/useJoinRoom.ts

@@ -52,6 +52,7 @@ const JOIN_CHANNEL_PHRASE_AND_GET_USER = gql`
           llm {
             agent_name
             model
+            prompt
           }
           tts {
             vendor
@@ -115,6 +116,7 @@ const JOIN_CHANNEL_PHRASE = gql`
           llm {
             agent_name
             model
+            prompt
           }
           tts {
             vendor