From 6ad82a0330d8b81a91f202ec8ea1800121e596cf Mon Sep 17 00:00:00 2001
From: zhangqianze <zhangqianze@agora.io>
Date: Mon, 12 Aug 2024 02:34:38 +0800
Subject: [PATCH 1/2] feat: support query to specify graph

---
 playground/src/common/request.ts            | 6 ++++--
 playground/src/components/setting/index.tsx | 6 +++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/playground/src/common/request.ts b/playground/src/common/request.ts
index 0100cd99..38eb3358 100644
--- a/playground/src/common/request.ts
+++ b/playground/src/common/request.ts
@@ -6,6 +6,7 @@ interface StartRequestConfig {
   userId: number,
   language: string
   voiceType: string
+  graphName: string | null
 }
 
 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",
diff --git a/playground/src/components/setting/index.tsx b/playground/src/components/setting/index.tsx
index d48feb30..415b4f05 100644
--- a/playground/src/components/setting/index.tsx
+++ b/playground/src/components/setting/index.tsx
@@ -12,6 +12,7 @@ import StyleSelect from "./themeSelect"
 import { useEffect, useState } from "react"
 import { LoadingOutlined } from "@ant-design/icons"
 import styles from "./index.module.scss"
+import { useSearchParams } from "next/navigation"
 
 
 
@@ -25,6 +26,7 @@ const Setting = () => {
   const [lang, setLang] = useState("en-US")
   const [voice, setVoice] = useState("male")
   const [loading, setLoading] = useState(false)
+  const searchParams = useSearchParams()
 
   useEffect(() => {
     if (channel) {
@@ -51,11 +53,13 @@ const Setting = () => {
       message.success("Agent disconnected")
       stopPing()
     } else {
+      const graph_name = searchParams.get("graph_name");
       const res = await apiStartService({
         channel,
         userId,
         language: lang,
-        voiceType: voice
+        voiceType: voice,
+        graphName: graph_name,
       })
       const { code, msg } = res || {}
       if (code != 0) {

From 59d8d01b074b4dfad618e9e35f31a82c800e25b2 Mon Sep 17 00:00:00 2001
From: zhangqianze <zhangqianze@agora.io>
Date: Mon, 12 Aug 2024 02:46:05 +0800
Subject: [PATCH 2/2] fix: prevent using useSearchParams

---
 playground/src/components/setting/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/playground/src/components/setting/index.tsx b/playground/src/components/setting/index.tsx
index 415b4f05..b9328d47 100644
--- a/playground/src/components/setting/index.tsx
+++ b/playground/src/components/setting/index.tsx
@@ -12,7 +12,6 @@ import StyleSelect from "./themeSelect"
 import { useEffect, useState } from "react"
 import { LoadingOutlined } from "@ant-design/icons"
 import styles from "./index.module.scss"
-import { useSearchParams } from "next/navigation"
 
 
 
@@ -26,7 +25,6 @@ const Setting = () => {
   const [lang, setLang] = useState("en-US")
   const [voice, setVoice] = useState("male")
   const [loading, setLoading] = useState(false)
-  const searchParams = useSearchParams()
 
   useEffect(() => {
     if (channel) {
@@ -53,7 +51,8 @@ const Setting = () => {
       message.success("Agent disconnected")
       stopPing()
     } else {
-      const graph_name = searchParams.get("graph_name");
+      let params = new URLSearchParams(document.location.search);
+      let graph_name = params.get("graph_name");
       const res = await apiStartService({
         channel,
         userId,