feat: support graph selection

docker-compose.yml

@@ -22,6 +22,16 @@ services:
         restart: always
         ports:
             - "3000:3000"
+
+    astra_playground_dev:
+        image: node:20-alpine
+        container_name: astra_playground_dev
+        restart: always
+        command: sh -c "cd /app/playground && npm i && npm run dev" #build && npm run start"
+        ports:
+        - "3002:3000"
+        volumes:
+        - ./:/app
     astra_graph_designer:
         image: agoraio/astra_graph_designer:0.3.0
         container_name: astra_graph_designer

playground/src/common/constant.ts

@@ -1,4 +1,4 @@
-import { IOptions, ColorItem, LanguageOptionItem, VoiceOptionItem } from "@/types"
+import { IOptions, ColorItem, LanguageOptionItem, VoiceOptionItem, GraphNameOptionItem, GraphOptionItem } from "@/types"
 
 export const REQUEST_URL = process.env.NEXT_PUBLIC_REQUEST_URL ?? ""
 export const GITHUB_URL = "https://github.com/rte-design/ASTRA.ai"
@@ -19,6 +19,20 @@ export const LANGUAGE_OPTIONS: LanguageOptionItem[] = [
     value: "zh-CN"
   }
 ]
+export const GRAPH_OPTIONS: GraphOptionItem[] = [
+  {
+    label: "Voice Agent - OpenAI LLM + Azure TTS",
+    value: "va.openai.azure"
+  },
+  {
+    label: "Voice Agent with Vision - OpenAI LLM + Azure TTS",
+    value: "camera.va.openai.azure"
+  },
+  {
+    label: "Voice Agent with Knowledge - RAG + Qwen LLM + Cosy TTS",
+    value: "va.qwen.rag"
+  },
+]
 export const VOICE_OPTIONS: VoiceOptionItem[] = [
   {
     label: "Male",

playground/src/common/request.ts

@@ -6,6 +6,7 @@ interface StartRequestConfig {
   userId: number,
   language: string
   voiceType: string
+  graphName: string
 }
 
 interface GenAgoraDataConfig {
@@ -34,14 +35,15 @@ export const apiGenAgoraData = async (config: GenAgoraDataConfig) => {
 
 export const apiStartService = async (config: StartRequestConfig): Promise<any> => {
   const url = `${REQUEST_URL}/start`
-  const { language, channel, userId, voiceType } = config
+  const { language, channel, userId, voiceType, graphName } = config
   const data = {
     request_id: genUUID(),
     agora_asr_language: language,
     channel_name: channel,
     openai_proxy_url: "",
     remote_stream_id: userId,
-    voice_type: voiceType
+    voice_type: voiceType,
+    graph_name: graphName,
   }
   let resp: any = await fetch(url, {
     method: "POST",

playground/src/platform/pc/chat/index.module.scss

@@ -20,6 +20,9 @@
 
     .left {
       flex: 1 1 auto;
+      display: flex;
+      align-items: center;
+      gap: 5px;
 
       .text {
         margin-left: 4px;
@@ -32,14 +35,17 @@
       }
 
       .languageSelect {
-        margin-left: 12px;
         width: 100px;
       }
     }
 
 
     .right {
+      display: flex;
+      align-items: center;
+      gap: 5px;
       flex: 0 0 230px;
+      justify-content: right;
     }
 
   }

playground/src/platform/pc/chat/index.tsx

@@ -5,8 +5,9 @@ import ChatItem from "./chatItem"
 import {
   genRandomChatList, useAppDispatch, useAutoScroll,
   LANGUAGE_OPTIONS, useAppSelector,
+  GRAPH_OPTIONS,
 } from "@/common"
-import { setLanguage } from "@/store/reducers/global"
+import { setGraphName, setLanguage } from "@/store/reducers/global"
 import { Select, } from 'antd';
 import PdfSelect from "@/components/pdfSelect"
 
@@ -19,6 +20,7 @@ const Chat = () => {
   const dispatch = useAppDispatch()
   const chatItems = useAppSelector(state => state.global.chatItems)
   const language = useAppSelector(state => state.global.language)
+  const graphName = useAppSelector(state => state.global.graphName)
   const agentConnected = useAppSelector(state => state.global.agentConnected)
 
   // const chatItems = genRandomChatList(10)
@@ -32,13 +34,19 @@ const Chat = () => {
     dispatch(setLanguage(val))
   }
 
-
+  const onGraphNameChange = (val: any) => {
+    dispatch(setGraphName(val))
+  }
 
 
   return <section className={styles.chat}>
     <div className={styles.header}>
       <span className={styles.left}>
-        <span className={styles.text}>Chat</span>
+        <span className={styles.text}>Agent Graph</span>
+        <Select className={styles.graphName}
+          disabled={agentConnected} options={GRAPH_OPTIONS}
+          value={graphName} onChange={onGraphNameChange}></Select>
+        <span className={styles.text}>Lang</span>
         <Select className={styles.languageSelect}
           disabled={agentConnected} options={LANGUAGE_OPTIONS}
           value={language} onChange={onLanguageChange}></Select>

playground/src/platform/pc/description/index.tsx

@@ -17,6 +17,7 @@ const Description = () => {
   const userId = useAppSelector(state => state.global.options.userId)
   const language = useAppSelector(state => state.global.language)
   const voiceType = useAppSelector(state => state.global.voiceType)
+  const graphName = useAppSelector(state => state.global.graphName)
   const [loading, setLoading] = useState(false)
 
   useEffect(() => {
@@ -48,7 +49,8 @@ const Description = () => {
         channel,
         userId,
         language,
-        voiceType
+        voiceType,
+        graphName
       })
       const { code, msg } = res || {}
       if (code != 0) {

playground/src/store/reducers/global.ts

@@ -9,7 +9,8 @@ export interface InitialState {
   themeColor: string,
   language: Language
   voiceType: VoiceType
-  chatItems: IChatItem[]
+  chatItems: IChatItem[],
+  graphName: string
 }
 
 const getInitialState = (): InitialState => {
@@ -20,7 +21,8 @@ const getInitialState = (): InitialState => {
     agentConnected: false,
     language: "en-US",
     voiceType: "female",
-    chatItems: []
+    chatItems: [],
+    graphName: "va.openai.azure"
   }
 }
 
@@ -82,6 +84,9 @@ export const globalSlice = createSlice({
     setLanguage: (state, action: PayloadAction<Language>) => {
       state.language = action.payload
     },
+    setGraphName: (state, action: PayloadAction<string>) => {
+      state.graphName = action.payload
+    },
     setVoiceType: (state, action: PayloadAction<VoiceType>) => {
       state.voiceType = action.payload
     },
@@ -94,7 +99,7 @@ export const globalSlice = createSlice({
 
 export const { reset, setOptions,
   setRoomConnected, setAgentConnected, setVoiceType,
-  addChatItem, setThemeColor, setLanguage } =
+  addChatItem, setThemeColor, setLanguage, setGraphName } =
   globalSlice.actions
 
 export default globalSlice.reducer

playground/src/types/index.ts

@@ -33,6 +33,10 @@ export interface ITextItem {
   isFinal: boolean
 }
 
+export interface GraphOptionItem {
+  label: string
+  value: string
+}
 
 export interface LanguageOptionItem {
   label: string