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

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

@@ -0,0 +1,279 @@
+import React, {useEffect, useState, useContext} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {
+  useRoomInfo,
+  useCreateRoom,
+  useHistory,
+  Toast,
+  isWebInternal,
+  trimText,
+  useString,
+  Spacer,
+  useSetRoomInfo,
+  isSDK,
+  useStorageContext,
+  useErrorContext,
+  RoomInfoDefaultValue,
+} from 'customization-api';
+import {Redirect} from '../../components/Router';
+import ThemeConfig from '../../theme';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {AgoraLogo, AgoraOpenAILogo, OpenAILogo, CallIcon} from './icons';
+import {AgentContext} from './AgentControls/AgentContext';
+
+const CustomCreate = () => {
+  const {
+    data: {
+      roomId: {host},
+    },
+  } = useRoomInfo();
+  const {setGlobalErrorMessage} = useErrorContext();
+  const [loading, setLoading] = useState(false);
+  const [roomTitle, onChangeRoomTitle] = useState('');
+  const [roomCreated, setRoomCreated] = useState(false);
+  const createRoomFun = useCreateRoom();
+  const {setRoomInfo} = useSetRoomInfo();
+  const {setStore} = useStorageContext();
+  const loadingText = useString('loadingText')();
+  const history = useHistory();
+
+  const {agentAuthToken} = useContext(AgentContext);
+
+  useEffect(() => {
+    if (isWebInternal() && !isSDK) {
+      document.title = $config.APP_NAME;
+    }
+    console.log('[SDKEvents] Join listener registered');
+    return () => {};
+  }, []);
+
+  // set default room and username
+  useEffect(() => {
+    const generateChannelId = () => {
+      const characters =
+        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < 16; i++) {
+        result += characters.charAt(
+          Math.floor(Math.random() * characters.length),
+        );
+      }
+      return result;
+    };
+    setStore(prevState => {
+      return {
+        ...prevState,
+        displayName: 'You',
+      };
+    });
+    // set default meeting name
+    onChangeRoomTitle(generateChannelId);
+  }, []);
+
+  // useEffect( () => {
+  // // to check if user logged in quer param
+  // const queryParams = new URLSearchParams(window.location.search);
+  //   if (queryParams.get('auth') === 'success' && roomTitle != '') {
+  //     createRoomAndNavigateToShare(
+  //       roomTitle?.trim(),
+  //       false,
+  //       false
+  //     );
+  //     }
+  // },[roomTitle])
+
+  const createRoomAndNavigateToShare = async (
+    roomTitle: string,
+    enablePSTN: boolean,
+    isSeparateHostLink: boolean,
+  ) => {
+    if (roomTitle !== '') {
+      setLoading(true);
+      try {
+        setRoomInfo(RoomInfoDefaultValue);
+        //@ts-ignore
+        //isSeparateHostLink will be for internal usage since backend integration is not there
+        await createRoomFun(roomTitle, enablePSTN, isSeparateHostLink);
+
+        setLoading(false);
+        Toast.show({
+          leadingIconName: 'tick-fill',
+          type: 'success',
+          text1: 'You have joined channel ' + trimText(roomTitle),
+          text2: null,
+          visibilityTime: 3000,
+          primaryBtn: null,
+          secondaryBtn: null,
+          leadingIcon: null,
+        });
+        setRoomCreated(true);
+      } catch (error) {
+        setLoading(false);
+        setGlobalErrorMessage({
+          name: 'Unable to join channel',
+          message: error.message,
+        });
+      }
+    }
+  };
+  const showError = () => {
+    Toast.show({
+      leadingIconName: 'alert',
+      type: 'error',
+      text1: 'Backend endpoint not configured',
+      text2: 'Please configure backend endpoint config.json',
+      visibilityTime: 1000 * 10,
+      primaryBtn: null,
+      secondaryBtn: null,
+      leadingIcon: null,
+    });
+  };
+
+  return (
+    <>
+      {!roomCreated ? (
+        <View style={style.root}>
+          <View style={style.topLogoContainer}>
+            <View style={{paddingTop: 14}}>
+              <AgoraLogo />
+            </View>
+            <View>
+              <OpenAILogo />
+            </View>
+          </View>
+          <View
+            style={{
+              width: 490,
+              marginTop: 90,
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <View style={style.centerLogoContainer}>
+              <View style={{padding: 20}}>
+                <AgoraOpenAILogo />
+              </View>
+              <Text style={style.mainTextStyle}>Agora & Conversational AI</Text>
+              <Spacer size={20} />
+              <Text style={style.subTextStyle}>
+                AI Builder Conversational AI demo
+              </Text>
+            </View>
+            <Spacer size={20} />
+            <TouchableOpacity
+              disabled={loading || !roomTitle?.trim()}
+              style={style.btnContainer}
+              onPress={() => {
+                const queryParams = new URLSearchParams(window.location.search);
+                if (!$config.BACKEND_ENDPOINT) {
+                  showError();
+                } else {
+                  // handleSSOLogin()
+                  //history.push('/login')
+                  createRoomAndNavigateToShare(roomTitle?.trim(), false, false);
+                }
+              }}>
+              <CallIcon fill="#111111" />
+              <Text
+                style={{
+                  textAlign: 'center',
+                  fontSize: 18,
+                  fontStyle: 'normal',
+                  fontWeight: '600',
+                  lineHeight: 18,
+                }}>
+                {loading ? loadingText : 'Sign in to Join Call'}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      ) : (
+        <Redirect to={host} />
+      )}
+    </>
+  );
+};
+
+const style = StyleSheet.create({
+  root: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    padding: 20,
+    alignItems: 'center',
+    gap: 20,
+    backgroundColor: '#111',
+    borderRadius: 20,
+  },
+  mainMobile: {
+    paddingBottom: 80,
+    paddingTop: 66,
+    flex: 1,
+  },
+  mobileContainerStyle: {
+    backgroundColor: 'transparent',
+    flex: 1,
+    paddingBottom: 0,
+    paddingTop: 0,
+  },
+  btnContainer: {
+    width: '100%',
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    height: 56,
+    padding: 20,
+    justifyContent: 'center',
+    alignContent: 'center',
+    gap: 8,
+    borderRadius: 4,
+    backgroundColor: '#00C2FF',
+  },
+  separator: {
+    height: 1,
+  },
+  topLogoContainer: {
+    paddingVertical: 20,
+    paddingHorizontal: 32,
+    display: 'flex',
+    width: 'auto',
+    flexDirection: 'row',
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 20,
+    flexShrink: 0,
+    alignSelf: 'stretch',
+  },
+  centerLogoContainer: {
+    padding: 40,
+    display: 'flex',
+    paddingHorizontal: 8,
+    flexFirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+  },
+  mainTextStyle: {
+    color: '#FFF',
+    textAlign: 'center',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 40,
+    fontStyle: 'normal',
+    fontWeight: '600',
+    lineHeight: 40,
+    letterSpacing: 1,
+  },
+  subTextStyle: {
+    color: '#FFFFFF' + hexadecimalTransparency['70%'],
+    textAlign: 'center',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 18,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: 21.6,
+  },
+});
+
+export default CustomCreate;

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

@@ -0,0 +1,265 @@
+import React, {useEffect, useState, useContext} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {
+  Redirect,
+  Toast,
+  useErrorContext,
+  isWebInternal,
+  trimText,
+  useString,
+  useCreateRoom,
+  RoomInfoDefaultValue,
+  useRoomInfo,
+  Card,
+  useSetRoomInfo,
+  isSDK,
+  useHistory,
+  useStorageContext,
+} from 'customization-api';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {AgoraLogo, AgoraOpenAILogo, OpenAILogo, CallIcon} from './icons';
+import {AgentContext} from './AgentControls/AgentContext';
+import ThemeConfig from '../../theme';
+
+const CustomCreateNative = () => {
+  const {
+    data: {
+      roomId: {host},
+    },
+  } = useRoomInfo();
+  const {setGlobalErrorMessage} = useErrorContext();
+  const [loading, setLoading] = useState(false);
+  const [roomTitle, onChangeRoomTitle] = useState('');
+  const [roomCreated, setRoomCreated] = useState(false);
+  const createRoomFun = useCreateRoom();
+  const {setRoomInfo} = useSetRoomInfo();
+  const {setStore} = useStorageContext();
+  const loadingText = useString('loadingText')();
+  const history = useHistory();
+  const {agentAuthToken} = useContext(AgentContext);
+
+  useEffect(() => {
+    if (isWebInternal() && !isSDK) {
+      document.title = $config.APP_NAME;
+    }
+    console.log('[SDKEvents] Join listener registered');
+    return () => {};
+  }, []);
+
+  // set default room and username
+  useEffect(() => {
+    const generateChannelId = () => {
+      const characters =
+        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < 16; i++) {
+        result += characters.charAt(
+          Math.floor(Math.random() * characters.length),
+        );
+      }
+      return result;
+    };
+    setStore(prevState => {
+      return {
+        ...prevState,
+        displayName: 'You',
+      };
+    });
+    // set default meeting name
+    onChangeRoomTitle(generateChannelId);
+  }, []);
+
+  useEffect(() => {
+    // to check if user logged in quer param
+    const queryParams = new URLSearchParams(window.location.search);
+    if (queryParams.get('auth') === 'success' && roomTitle != '') {
+      createRoomAndNavigateToShare(roomTitle?.trim(), false, false);
+    }
+  }, [roomTitle]);
+
+  const createRoomAndNavigateToShare = async (
+    roomTitle: string,
+    enablePSTN: boolean,
+    isSeparateHostLink: boolean,
+  ) => {
+    if (roomTitle !== '') {
+      setLoading(true);
+      try {
+        setRoomInfo(RoomInfoDefaultValue);
+        //@ts-ignore
+        //isSeparateHostLink will be for internal usage since backend integration is not there
+        await createRoomFun(roomTitle, enablePSTN, isSeparateHostLink);
+
+        setLoading(false);
+        Toast.show({
+          leadingIconName: 'tick-fill',
+          type: 'success',
+          text1: 'You have joined channel ' + trimText(roomTitle),
+          text2: null,
+          visibilityTime: 3000,
+          primaryBtn: null,
+          secondaryBtn: null,
+          leadingIcon: null,
+        });
+        setRoomCreated(true);
+      } catch (error) {
+        setLoading(false);
+
+        setGlobalErrorMessage({
+          name: 'Unable to join Channel',
+          message: error.message,
+        });
+      }
+    }
+  };
+  const showError = () => {
+    Toast.show({
+      leadingIconName: 'alert',
+      type: 'error',
+      text1: 'Backend endpoint not configured',
+      text2: 'Please configure backend endpoint config.json',
+      visibilityTime: 1000 * 10,
+      primaryBtn: null,
+      secondaryBtn: null,
+      leadingIcon: null,
+    });
+  };
+
+  return (
+    <>
+      {!roomCreated && !agentAuthToken && (
+        <View style={style.root}>
+          <View style={style.mainMobile}>
+            <Card cardContainerStyle={style.mobileContainerStyle}>
+              <View>
+                <View style={style.topLogoContainer}>
+                  <View style={{paddingTop: 14}}>
+                    <AgoraLogo />
+                  </View>
+                  <View>
+                    <OpenAILogo />
+                  </View>
+                </View>
+                <View style={style.centerLogoContainer}>
+                  <AgoraOpenAILogo />
+                  <Text style={style.mainTextStyle}>Agora & OpenAI</Text>
+                  <Text style={style.subTextStyle}>
+                    Agora Conversational AI demo built in partnership with
+                    OpenAI
+                  </Text>
+                </View>
+              </View>
+              <TouchableOpacity
+                disabled={loading || !roomTitle?.trim()}
+                style={style.btnContainer}
+                onPress={() => {
+                  const queryParams = new URLSearchParams(
+                    window.location.search,
+                  );
+                  if (!$config.BACKEND_ENDPOINT) {
+                    showError();
+                  } else {
+                    // handleSSOLogin()
+                    history.push('/login');
+                  }
+                }}>
+                <CallIcon fill="#111111" />
+                <Text
+                  style={{
+                    textAlign: 'center',
+                    fontSize: 18,
+                    fontStyle: 'normal',
+                    fontWeight: '600',
+                    lineHeight: 18,
+                  }}>
+                  {loading ? loadingText : 'Sign in to Join Call'}
+                </Text>
+              </TouchableOpacity>
+            </Card>
+          </View>
+        </View>
+      )}
+      {roomCreated && agentAuthToken && <Redirect to={host} />}
+    </>
+  );
+};
+
+const style = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  main: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  mainMobile: {
+    paddingBottom: 80,
+    paddingTop: 66,
+    flex: 1,
+  },
+  mobileContainerStyle: {
+    backgroundColor: 'transparent',
+    flex: 1,
+    paddingBottom: 0,
+    paddingTop: 0,
+  },
+  btnContainer: {
+    width: '100%',
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    height: 56,
+    padding: 20,
+    justifyContent: 'center',
+    alignContent: 'center',
+    gap: 8,
+    borderRadius: 4,
+    backgroundColor: '#00C2FF',
+  },
+  separator: {
+    height: 1,
+  },
+  topLogoContainer: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'row',
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 20,
+    flexShrink: 0,
+  },
+  centerLogoContainer: {
+    paddingTop: 135,
+    paddingBottom: 10,
+    display: 'flex',
+    paddingHorizontal: 8,
+    flexFirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 12,
+    alignSelf: 'stretch',
+  },
+  mainTextStyle: {
+    color: '#FFF',
+    textAlign: 'center',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 40,
+    fontStyle: 'normal',
+    fontWeight: '600',
+    lineHeight: 40,
+    letterSpacing: 1,
+  },
+  subTextStyle: {
+    color: '#FFFFFF' + hexadecimalTransparency['70%'],
+    textAlign: 'center',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 18,
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: 21.6,
+  },
+});
+
+export default CustomCreateNative;

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

@@ -0,0 +1,135 @@
+import {StyleSheet} from 'react-native';
+import React, {useContext} from 'react';
+import {useRtc} from 'customization-api';
+import {AgentContext} from './AgentControls/AgentContext';
+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 (
+    <div style={styles.container}>
+      <ChatScreen />
+    </div>
+  );
+};
+
+export default CustomSidePanel;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    display: 'flex',
+    height: '100%',
+  },
+});