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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.0-beta-4",
+  "version": "4.1.0-beta-6",
   "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/Bottombar.tsx

@@ -52,8 +52,7 @@ export const CustomSettingButton = () => {
   }
   return (
     <ToolbarItem>
-      {' '}
-      <IconButton {...iconButtonProps} />{' '}
+      <IconButton {...iconButtonProps} />
     </ToolbarItem>
   );
 };

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,22 +1,55 @@
-import React, {useContext} from 'react';
-import {View, TextInput, StyleSheet, Text, Platform} from 'react-native';
+import React, {SetStateAction, useContext, useEffect, useState} from 'react';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  Text,
+  Platform,
+  TouchableOpacity,
+  ViewStyle,
+  ModalProps,
+  TouchableWithoutFeedback,
+  Modal,
+} from 'react-native';
 import ThemeConfig from '../../theme';
 import {AgentContext} from './AgentControls/AgentContext';
+import {
+  IconButton,
+  PrimaryButton,
+  Spacer,
+  TertiaryButton,
+  useRoomInfo,
+} from 'customization-api';
+import {useIsDesktop, isMobileUA} from '../../utils/common';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 
 const UserPrompt = () => {
-  const {prompt, setPrompt, agentConnectionState} = useContext(AgentContext);
+  const isDesktop = useIsDesktop()('popup');
+  const [isModalOpen, setModalOpen] = useState(false);
+  const {prompt, setPrompt, agentConnectionState, agentId} =
+    useContext(AgentContext);
+  const {
+    data: {agents},
+  } = useRoomInfo();
+
+  const [localPrompt, setLocalPrompt] = useState('');
+
+  useEffect(() => {
+    setLocalPrompt(prompt);
+  }, [prompt]);
+
+  useEffect(() => {
+    if (agentId) {
+      setPrompt(agents?.find(a => a?.id === agentId)?.config?.llm?.prompt);
+    }
+  }, [agentId, agents, setPrompt]);
   return (
     <>
       <Text style={styles.label}>Prompt</Text>
       <View style={styles.container}>
         <TextInput
-          aria-disabled={
-            agentConnectionState === 'AGENT_CONNECTED' ? true : false
-          }
-          style={[
-            styles.input,
-            agentConnectionState === 'AGENT_CONNECTED' ? {opacity: 0.4} : {},
-          ]}
+          aria-disabled={true}
+          style={[styles.input, {opacity: 0.4}]}
           value={prompt}
           onChangeText={setPrompt}
           placeholder="Customize Prompt"
@@ -24,11 +57,127 @@ const UserPrompt = () => {
           multiline={true}
         />
       </View>
+      <TouchableOpacity
+        style={[
+          styles.promptBtnContainer,
+          agentConnectionState === 'AGENT_CONNECTED'
+            ? styles.promptBtnContainerDisabled
+            : {},
+        ]}
+        onPress={() => setModalOpen(true)}>
+        <Text style={styles.promptBtnText}>Customize Prompt</Text>
+      </TouchableOpacity>
+      <PromptModal
+        modalVisible={isModalOpen}
+        setModalVisible={setModalOpen}
+        showCloseIcon={true}
+        title={'Customize Prompt'}
+        cancelable={false}
+        contentContainerStyle={modalStyles.mContainer}>
+        <View style={modalStyles.mbody}>
+          <View style={[styles.container, {flex: 3}]}>
+            <TextInput
+              style={[styles.input]}
+              value={localPrompt}
+              onChangeText={setLocalPrompt}
+              placeholder="Customize Prompt"
+              numberOfLines={45}
+              multiline={true}
+            />
+          </View>
+          <View style={styles.infoTextContainer}>
+            <Text style={styles.infoText}>
+              Fine-tune your AI agent’s behavior by editing its prompt.
+            </Text>
+          </View>
+          <View
+            style={[
+              isDesktop ? styles.btnContainer : styles.btnContainerMobile,
+              isMobileUA() ? {flex: 1} : {flex: 0.5},
+            ]}>
+            <View style={isDesktop && {flex: 1}}>
+              <TertiaryButton
+                containerStyle={{
+                  width: '100%',
+                  height: 48,
+                  paddingVertical: 12,
+                  paddingHorizontal: 12,
+                  borderRadius: ThemeConfig.BorderRadius.medium,
+                }}
+                textStyle={styles.btnText}
+                text={'CANCEL'}
+                onPress={() => {
+                  setLocalPrompt(prompt);
+                  setModalOpen(false);
+                }}
+              />
+            </View>
+            <Spacer
+              size={isDesktop ? 40 : 20}
+              horizontal={isDesktop ? true : false}
+            />
+            <View style={isDesktop && {flex: 1}}>
+              <PrimaryButton
+                containerStyle={{
+                  minWidth: 'auto',
+                  width: '100%',
+                  borderRadius: ThemeConfig.BorderRadius.medium,
+                  height: 48,
+                  backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+                  paddingVertical: 12,
+                  paddingHorizontal: 12,
+                }}
+                textStyle={styles.btnText}
+                text={'UPDATE'}
+                onPress={() => {
+                  setPrompt(localPrompt);
+                  setModalOpen(false);
+                }}
+              />
+            </View>
+          </View>
+        </View>
+      </PromptModal>
     </>
   );
 };
 
 const styles = StyleSheet.create({
+  infoTextContainer: {
+    padding: 8,
+  },
+  infoText: {
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 12,
+    lineHeight: 12,
+  },
+  promptBtnContainer: {
+    padding: 8,
+  },
+  promptBtnContainerDisabled: {
+    opacity: 0.4,
+  },
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  promptBtnText: {
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 14,
+    lineHeight: 14,
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
   container: {
     flex: 1,
     justifyContent: 'center',
@@ -61,4 +210,158 @@ const styles = StyleSheet.create({
   },
 });
 
+interface PromptModalProps extends ModalProps {
+  title?: string;
+  subtitle?: string;
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  showCloseIcon?: boolean;
+  children: React.ReactNode;
+  contentContainerStyle?: ViewStyle;
+  containerStyle?: ViewStyle;
+  cancelable?: boolean;
+}
+const PromptModal = (props: PromptModalProps) => {
+  const {
+    title,
+    modalVisible,
+    setModalVisible,
+    children,
+    cancelable = false,
+  } = props;
+
+  const isDesktop = useIsDesktop()('popup');
+
+  return (
+    <Modal
+      animationType="none"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => {
+        setModalVisible(false);
+      }}>
+      <View
+        style={[modalStyles.centeredView, isDesktop && {alignItems: 'center'}]}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            cancelable && setModalVisible(false);
+          }}>
+          <View style={modalStyles.backDrop} />
+        </TouchableWithoutFeedback>
+        <View style={[modalStyles.modalView, props?.contentContainerStyle]}>
+          <View style={modalStyles.header}>
+            <Text style={modalStyles.title}>{title}</Text>
+            <View>
+              <IconButton
+                hoverEffect={true}
+                hoverEffectStyle={{
+                  backgroundColor: $config.ICON_BG_COLOR,
+                  borderRadius: 20,
+                }}
+                iconProps={{
+                  iconType: 'plain',
+                  iconContainerStyle: {
+                    padding: isMobileUA() ? 0 : 5,
+                  },
+                  name: 'close',
+                  tintColor: $config.SECONDARY_ACTION_COLOR,
+                }}
+                onPress={() => {
+                  setModalVisible(false);
+                }}
+              />
+            </View>
+          </View>
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const modalStyles = StyleSheet.create({
+  mContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    flexShrink: 0,
+    // width: 620,
+    width: '100%',
+    maxWidth: 680,
+    minWidth: 340,
+    height: 620,
+    maxHeight: 620,
+    borderRadius: 4,
+    zIndex: 2,
+  },
+  mHeader: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    height: 60,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    alignItems: 'center',
+    gap: 20,
+    flexShrink: 0,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+  },
+  mbody: {
+    width: '100%',
+    flex: 1,
+    padding: 10,
+    justifyContent: 'space-around',
+  },
+  centeredView: {
+    flex: 1,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  modalView: {
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.large,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5,
+    maxWidth: 650,
+  },
+  backDrop: {
+    zIndex: 1,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60%'],
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    width: '100%',
+  },
+  title: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.high,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.xLarge,
+    lineHeight: 32,
+    fontWeight: '500',
+    alignSelf: 'center',
+  },
+});
+
 export default UserPrompt;

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