diff --git a/demo/next-env.d.ts b/demo/next-env.d.ts
index 4f11a03d..40c3d680 100644
--- a/demo/next-env.d.ts
+++ b/demo/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/demo/package.json b/demo/package.json
index e8e63ef2..caa99567 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -6,16 +6,18 @@
     "node": ">=20"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "proto": "pbjs -t json-module -w commonjs -o src/protobuf/SttMessage.js src/protobuf/SttMessage.proto"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.3.7",
+    "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
@@ -24,22 +26,23 @@
     "@reduxjs/toolkit": "^2.2.3",
     "agora-rtc-sdk-ng": "^4.21.0",
     "agora-rtm": "^2.2.0",
-    "antd": "^5.21.4",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.453.0",
-    "next": "14.2.4",
+    "next": "^15.0.2",
     "next-themes": "^0.3.0",
     "protobufjs": "^7.2.5",
     "react": "^18",
     "react-colorful": "^5.6.1",
     "react-dom": "^18",
+    "react-hook-form": "^7.53.1",
     "react-redux": "^9.1.0",
     "redux": "^5.0.1",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@minko-fe/postcss-pxtoviewport": "^1.3.2",
@@ -50,7 +53,7 @@
     "@types/react-redux": "^7.1.22",
     "autoprefixer": "^10.4.20",
     "eslint": "^8",
-    "eslint-config-next": "14.2.4",
+    "eslint-config-next": "^15.0.2",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
diff --git a/demo/src/app/home/page.tsx b/demo/src/app/home/page.tsx
index 9599af16..2d51c29e 100644
--- a/demo/src/app/home/page.tsx
+++ b/demo/src/app/home/page.tsx
@@ -8,7 +8,6 @@ import Action from "@/components/Layout/Action"
 // import RTCCard from "@/components/Dynamic/RTCCard"
 // import ChatCard from "@/components/Chat/ChatCard"
 import { cn } from "@/lib/utils"
-import FormModal from "@/components/settings"
 
 const DynamicRTCCard = dynamic(() => import("@/components/Dynamic/RTCCard"), {
   ssr: false,
@@ -46,7 +45,6 @@ export default function Home() {
             )}
           />
         </div>
-        <FormModal />
       </div>
     </>
   )
diff --git a/demo/src/app/index.module.scss b/demo/src/app/index.module.css
similarity index 60%
rename from demo/src/app/index.module.scss
rename to demo/src/app/index.module.css
index d55e6d9a..408f2d7b 100644
--- a/demo/src/app/index.module.scss
+++ b/demo/src/app/index.module.css
@@ -1,20 +1,4 @@
-@function multiple-box-shadow($n, $width, $height) {
-  $value: "#{random() * $width} #{random() * $height} #FFF";
-
-  @for $i from 2 through $n {
-    $value: "#{$value}, #{random() * $width} #{random() * $height} #FFF";
-  }
-
-  @return unquote($value);
-}
-
 @media (max-width: 1400px) {
-  $width: 1500px;
-  $height: 1500px;
-  $shadows-small: multiple-box-shadow(700, $width, $height);
-  $shadows-medium: multiple-box-shadow(200, $width, $height);
-  $shadows-big: multiple-box-shadow(100, $width, $height);
-
   .login {
     position: absolute;
     left: 0;
@@ -31,14 +15,18 @@
     width: 1px;
     height: 1px;
     background: transparent;
-    box-shadow: $shadows-small;
+    box-shadow:
+      145px 234px #fff,
+      876px 543px #fff;
     animation: animStar 50s linear infinite;
   }
 
   .starts2 {
     width: 2px;
     height: 2px;
-    box-shadow: $shadows-medium;
+    box-shadow:
+      445px 234px #fff,
+      276px 943px #fff;
     animation: animStar 100s linear infinite;
   }
 
@@ -46,18 +34,14 @@
     width: 3px;
     height: 3px;
     background: transparent;
-    box-shadow: $shadows-big;
+    box-shadow:
+      745px 834px #fff,
+      176px 243px #fff;
     animation: animStar 150s linear infinite;
   }
 }
 
 @media (min-width: 1400px) {
-  $width: 150vw;
-  $height: 150vh;
-  $shadows-small: multiple-box-shadow(700, $width, $height);
-  $shadows-medium: multiple-box-shadow(200, $width, $height);
-  $shadows-big: multiple-box-shadow(100, $width, $height);
-
   .login {
     position: absolute;
     left: 0;
@@ -74,14 +58,18 @@
     width: 1px;
     height: 1px;
     background: transparent;
-    box-shadow: $shadows-small;
+    box-shadow:
+      45vw 34vh #fff,
+      76vw 43vh #fff;
     animation: animStar 50s linear infinite;
   }
 
   .starts2 {
     width: 2px;
     height: 2px;
-    box-shadow: $shadows-medium;
+    box-shadow:
+      145vw 134vh #fff,
+      76vw 143vh #fff;
     animation: animStar 100s linear infinite;
   }
 
@@ -89,7 +77,9 @@
     width: 3px;
     height: 3px;
     background: transparent;
-    box-shadow: $shadows-big;
+    box-shadow:
+      45vw 134vh #fff,
+      176vw 43vh #fff;
     animation: animStar 150s linear infinite;
   }
 }
diff --git a/demo/src/app/layout.tsx b/demo/src/app/layout.tsx
index 122b68b6..c9fec642 100644
--- a/demo/src/app/layout.tsx
+++ b/demo/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import { ConfigProvider } from "antd"
 import { StoreProvider } from "@/store"
 import type { Metadata, Viewport } from "next"
 import "./global.css"
@@ -31,7 +30,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className="dark">
-        <ConfigProvider
+        {/* <ConfigProvider
           theme={{
             components: {
               Select: {
@@ -39,9 +38,9 @@ export default function RootLayout({
               },
             },
           }}
-        >
-          <StoreProvider>{children}</StoreProvider>
-        </ConfigProvider>
+        > */}
+        <StoreProvider>{children}</StoreProvider>
+        {/* </ConfigProvider> */}
         <Toaster />
       </body>
     </html>
diff --git a/demo/src/app/page.tsx b/demo/src/app/page.tsx
index 771958bf..1fcb2f08 100644
--- a/demo/src/app/page.tsx
+++ b/demo/src/app/page.tsx
@@ -1,8 +1,7 @@
-import LoginCard from "@/components/loginCard"
-import styles from "./index.module.scss"
+import LoginCard from "@/components/Card/Login"
+import styles from "./index.module.css"
 
 export default function Login() {
-
   return (
     <main className={styles.login}>
       <div className={styles.starts} />
@@ -10,5 +9,5 @@ export default function Login() {
       <div className={styles.starts3} />
       <LoginCard />
     </main>
-  );
+  )
 }
diff --git a/demo/src/common/hooks.ts b/demo/src/common/hooks.ts
index 9759fa29..8bb87c53 100644
--- a/demo/src/common/hooks.ts
+++ b/demo/src/common/hooks.ts
@@ -5,9 +5,6 @@ import { normalizeFrequencies } from "./utils"
 import { useState, useEffect, useMemo, useRef } from "react"
 import type { AppDispatch, AppStore, RootState } from "../store"
 import { useDispatch, useSelector, useStore } from "react-redux"
-import { Grid } from "antd"
-
-const { useBreakpoint } = Grid;
 
 export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
 export const useAppSelector = useSelector.withTypes<RootState>()
@@ -17,60 +14,60 @@ export const useMultibandTrackVolume = (
   track?: IMicrophoneAudioTrack | MediaStreamTrack,
   bands: number = 5,
   loPass: number = 100,
-  hiPass: number = 600
+  hiPass: number = 600,
 ) => {
-  const [frequencyBands, setFrequencyBands] = useState<Float32Array[]>([]);
+  const [frequencyBands, setFrequencyBands] = useState<Float32Array[]>([])
 
   useEffect(() => {
     if (!track) {
       return setFrequencyBands(new Array(bands).fill(new Float32Array(0)))
     }
 
-    const ctx = new AudioContext();
-    let finTrack = track instanceof MediaStreamTrack ? track : track.getMediaStreamTrack()
-    const mediaStream = new MediaStream([finTrack]);
-    const source = ctx.createMediaStreamSource(mediaStream);
-    const analyser = ctx.createAnalyser();
+    const ctx = new AudioContext()
+    let finTrack =
+      track instanceof MediaStreamTrack ? track : track.getMediaStreamTrack()
+    const mediaStream = new MediaStream([finTrack])
+    const source = ctx.createMediaStreamSource(mediaStream)
+    const analyser = ctx.createAnalyser()
     analyser.fftSize = 2048
 
-    source.connect(analyser);
+    source.connect(analyser)
 
-    const bufferLength = analyser.frequencyBinCount;
-    const dataArray = new Float32Array(bufferLength);
+    const bufferLength = analyser.frequencyBinCount
+    const dataArray = new Float32Array(bufferLength)
 
     const updateVolume = () => {
-      analyser.getFloatFrequencyData(dataArray);
-      let frequencies: Float32Array = new Float32Array(dataArray.length);
+      analyser.getFloatFrequencyData(dataArray)
+      let frequencies: Float32Array = new Float32Array(dataArray.length)
       for (let i = 0; i < dataArray.length; i++) {
-        frequencies[i] = dataArray[i];
+        frequencies[i] = dataArray[i]
       }
-      frequencies = frequencies.slice(loPass, hiPass);
+      frequencies = frequencies.slice(loPass, hiPass)
 
-      const normalizedFrequencies = normalizeFrequencies(frequencies);
-      const chunkSize = Math.ceil(normalizedFrequencies.length / bands);
-      const chunks: Float32Array[] = [];
+      const normalizedFrequencies = normalizeFrequencies(frequencies)
+      const chunkSize = Math.ceil(normalizedFrequencies.length / bands)
+      const chunks: Float32Array[] = []
       for (let i = 0; i < bands; i++) {
         chunks.push(
-          normalizedFrequencies.slice(i * chunkSize, (i + 1) * chunkSize)
-        );
+          normalizedFrequencies.slice(i * chunkSize, (i + 1) * chunkSize),
+        )
       }
 
-      setFrequencyBands(chunks);
-    };
+      setFrequencyBands(chunks)
+    }
 
-    const interval = setInterval(updateVolume, 10);
+    const interval = setInterval(updateVolume, 10)
 
     return () => {
-      source.disconnect();
-      clearInterval(interval);
-    };
-  }, [track, loPass, hiPass, bands]);
+      source.disconnect()
+      clearInterval(interval)
+    }
+  }, [track, loPass, hiPass, bands])
 
-  return frequencyBands;
-};
+  return frequencyBands
+}
 
 export const useAutoScroll = (ref: React.RefObject<HTMLElement | null>) => {
-
   const callback: MutationCallback = (mutationList, observer) => {
     mutationList.forEach((mutation) => {
       switch (mutation.type) {
@@ -78,54 +75,52 @@ export const useAutoScroll = (ref: React.RefObject<HTMLElement | null>) => {
           if (!ref.current) {
             return
           }
-          ref.current.scrollTop = ref.current.scrollHeight;
-          break;
+          ref.current.scrollTop = ref.current.scrollHeight
+          break
       }
     })
   }
 
   useEffect(() => {
     if (!ref.current) {
-      return;
+      return
     }
-    const observer = new MutationObserver(callback);
+    const observer = new MutationObserver(callback)
     observer.observe(ref.current, {
       childList: true,
-      subtree: true
-    });
+      subtree: true,
+    })
 
     return () => {
-      observer.disconnect();
-    };
-  }, [ref]);
+      observer.disconnect()
+    }
+  }, [ref])
 }
 
-export const useSmallScreen = () => {
-  const screens = useBreakpoint();
+// export const useSmallScreen = () => {
+//   const screens = useBreakpoint();
 
-  const xs = useMemo(() => {
-    return !screens.sm && screens.xs
-  }, [screens])
+//   const xs = useMemo(() => {
+//     return !screens.sm && screens.xs
+//   }, [screens])
 
-  const sm = useMemo(() => {
-    return !screens.md && screens.sm
-  }, [screens])
+//   const sm = useMemo(() => {
+//     return !screens.md && screens.sm
+//   }, [screens])
 
-  return {
-    xs,
-    sm,
-    isSmallScreen: xs || sm
-  }
-}
+//   return {
+//     xs,
+//     sm,
+//     isSmallScreen: xs || sm
+//   }
+// }
 
 export const usePrevious = (value: any) => {
-  const ref = useRef();
+  const ref = useRef()
 
   useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  return ref.current;
-};
-
+    ref.current = value
+  }, [value])
 
+  return ref.current
+}
diff --git a/demo/src/components/Agent/Camera.tsx b/demo/src/components/Agent/Camera.tsx
index 436a0135..68ead80b 100644
--- a/demo/src/components/Agent/Camera.tsx
+++ b/demo/src/components/Agent/Camera.tsx
@@ -5,7 +5,7 @@ import * as React from "react"
 import { CamIconByStatus } from "@/components/Icon"
 import AgoraRTC, { ICameraVideoTrack } from "agora-rtc-sdk-ng"
 // import { LocalStreamPlayer } from "../streamPlayer"
-import { useSmallScreen } from "@/common"
+// import { useSmallScreen } from "@/common"
 import {
   CommonDeviceWrapper,
   TDeviceSelectItem,
diff --git a/demo/src/components/loginCard/index.tsx b/demo/src/components/Card/Login.tsx
similarity index 100%
rename from demo/src/components/loginCard/index.tsx
rename to demo/src/components/Card/Login.tsx
diff --git a/demo/src/components/Chat/ChatCard.tsx b/demo/src/components/Chat/ChatCard.tsx
index 5f374096..cdf93d1e 100644
--- a/demo/src/components/Chat/ChatCard.tsx
+++ b/demo/src/components/Chat/ChatCard.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 import { LanguageSelect, GraphSelect } from "@/components/Chat/ChatCfgSelect"
-import PdfSelect from "@/components/pdfSelect"
+import PdfSelect from "@/components/Chat/PdfSelect"
 import { useAppDispatch, useAppSelector, isRagGraph } from "@/common"
 import { setRtmConnected, addChatItem } from "@/store/reducers/global"
 import MessageList from "@/components/Chat/MessageList"
diff --git a/demo/src/components/Chat/PdfSelect.tsx b/demo/src/components/Chat/PdfSelect.tsx
new file mode 100644
index 00000000..c9959351
--- /dev/null
+++ b/demo/src/components/Chat/PdfSelect.tsx
@@ -0,0 +1,191 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { FileTextIcon } from "lucide-react"
+
+import { OptionType, IPdfData } from "@/types"
+import {
+  apiGetDocumentList,
+  apiUpdateDocument,
+  useAppSelector,
+  genUUID,
+} from "@/common"
+import { toast } from "sonner"
+
+export default function PdfSelect() {
+  const options = useAppSelector((state) => state.global.options)
+  const { channel, userId } = options
+  const [pdfOptions, setPdfOptions] = React.useState<OptionType[]>([])
+  const [selectedPdf, setSelectedPdf] = React.useState<string>("")
+  const agentConnected = useAppSelector((state) => state.global.agentConnected)
+
+  React.useEffect(() => {
+    if (agentConnected) {
+      getPDFOptions()
+    }
+  }, [agentConnected])
+
+  const getPDFOptions = async () => {
+    const res = await apiGetDocumentList()
+    setPdfOptions(
+      res.data.map((item: any) => {
+        return {
+          value: item.collection,
+          label: item.file_name,
+        }
+      }),
+    )
+    setSelectedPdf("")
+  }
+
+  const onUploadSuccess = (data: IPdfData) => {
+    setPdfOptions([
+      ...pdfOptions,
+      {
+        value: data.collection,
+        label: data.fileName,
+      },
+    ])
+    setSelectedPdf(data.collection)
+  }
+
+  const onSelectPdf = async (val: string) => {
+    const item = pdfOptions.find((item) => item.value === val)
+    if (!item) {
+      //   return message.error("Please select a PDF file")
+      return
+    }
+    setSelectedPdf(val)
+    await apiUpdateDocument({
+      collection: val,
+      fileName: item.label,
+      channel,
+    })
+  }
+
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button variant="outline" size="sm" className="w-fit bg-transparent">
+            <FileTextIcon />
+            PDF
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Upload & Select PDF</DialogTitle>
+          </DialogHeader>
+          <UploadPdf onSuccess={onUploadSuccess} />
+          <div className="mt-4">
+            <Select
+              value={selectedPdf}
+              onValueChange={onSelectPdf}
+              disabled={!agentConnected}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select a PDF file" />
+              </SelectTrigger>
+              <SelectContent>
+                {pdfOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+export function UploadPdf({
+  onSuccess,
+}: {
+  onSuccess?: (data: IPdfData) => void
+}) {
+  const agentConnected = useAppSelector((state) => state.global.agentConnected)
+  const options = useAppSelector((state) => state.global.options)
+  const { channel, userId } = options
+  const [uploading, setUploading] = React.useState(false)
+
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!agentConnected) {
+      toast.error("Please connect to agent first")
+      return
+    }
+
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    setUploading(true)
+
+    const formData = new FormData()
+    formData.append("file", file)
+    formData.append("channel_name", channel)
+    formData.append("uid", String(userId))
+    formData.append("request_id", genUUID())
+
+    try {
+      const response = await fetch("/api/vector/document/upload", {
+        method: "POST",
+        body: formData,
+      })
+      const data = await response.json()
+
+      if (data.code === "0") {
+        toast.success(`Upload ${file.name} success`)
+        const { collection, file_name } = data.data
+        onSuccess?.({
+          fileName: file_name,
+          collection,
+        })
+      } else {
+        toast.info(data.msg)
+      }
+    } catch (err) {
+      toast.error(`Upload ${file.name} failed`)
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <div>
+      <Label htmlFor="pdf-upload" className="cursor-pointer">
+        <Input
+          id="pdf-upload"
+          type="file"
+          accept="application/pdf"
+          className="hidden"
+          onChange={handleUpload}
+          disabled={uploading}
+        />
+        <Button variant="outline" size="sm" disabled={uploading} asChild>
+          <span>{uploading ? "Uploading..." : "Upload PDF"}</span>
+        </Button>
+      </Label>
+    </div>
+  )
+}
diff --git a/demo/src/components/Dialog/Settings.tsx b/demo/src/components/Dialog/Settings.tsx
new file mode 100644
index 00000000..78c02249
--- /dev/null
+++ b/demo/src/components/Dialog/Settings.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Textarea } from "@/components/ui/textarea"
+import { SettingsIcon } from "lucide-react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { useAppDispatch, useAppSelector } from "@/common"
+import { setAgentSettings } from "@/store/reducers/global"
+
+const formSchema = z.object({
+  greeting: z.string(),
+  prompt: z.string(),
+})
+
+export default function SettingsDialog() {
+  const [open, setOpen] = React.useState(false)
+
+  const dispatch = useAppDispatch()
+  const agentSettings = useAppSelector((state) => state.global.agentSettings)
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      greeting: agentSettings.greeting,
+      prompt: agentSettings.prompt,
+    },
+  })
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log("Form Values:", values)
+    dispatch(setAgentSettings(values))
+    setOpen(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm" className="w-9">
+          <SettingsIcon />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Settings</DialogTitle>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="greeting"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Greeting</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Enter the greeting, leave it blank if you want to use default one."
+                      className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="prompt"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Prompt</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Enter the prompt, leave it blank if you want to use default one."
+                      className="resize-none"
+                      rows={4}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="submit">Save</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/demo/src/components/Layout/Action.tsx b/demo/src/components/Layout/Action.tsx
index 2d4fd743..6cad3176 100644
--- a/demo/src/components/Layout/Action.tsx
+++ b/demo/src/components/Layout/Action.tsx
@@ -16,6 +16,7 @@ import {
 import { toast } from "sonner"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { cn } from "@/lib/utils"
+import SettingsDialog from "@/components/Dialog/Settings"
 
 let intervalId: NodeJS.Timeout | null = null
 
@@ -139,16 +140,23 @@ export default function Action(props: { className?: string }) {
         </Tabs>
 
         {/* -- Action Button */}
-        <LoadingButton
-          onClick={onClickConnect}
-          variant={!agentConnected ? "default" : "destructive"}
-          size="sm"
-          className="ml-auto w-fit min-w-24"
-          loading={loading}
-          svgProps={{ className: "h-4 w-4 text-muted-foreground" }}
-        >
-          {loading ? "Connecting" : !agentConnected ? "Connect" : "Disconnect"}
-        </LoadingButton>
+        <div className="ml-auto flex items-center gap-2">
+          <SettingsDialog />
+          <LoadingButton
+            onClick={onClickConnect}
+            variant={!agentConnected ? "default" : "destructive"}
+            size="sm"
+            className="w-fit min-w-24"
+            loading={loading}
+            svgProps={{ className: "h-4 w-4 text-muted-foreground" }}
+          >
+            {loading
+              ? "Connecting"
+              : !agentConnected
+                ? "Connect"
+                : "Disconnect"}
+          </LoadingButton>
+        </div>
       </div>
     </>
   )
diff --git a/demo/src/components/Layout/Header.tsx b/demo/src/components/Layout/Header.tsx
index f535bf67..4ebe3ee6 100644
--- a/demo/src/components/Layout/Header.tsx
+++ b/demo/src/components/Layout/Header.tsx
@@ -14,8 +14,8 @@ export default function Header(props: { className?: string }) {
         )}
       >
         <div className="flex items-center space-x-2">
-          <LogoIcon className="hidden h-5 md:block" />
-          <SmallLogoIcon className="block h-4 md:hidden" />
+          {/* <LogoIcon className="hidden h-5 md:block" />
+          <SmallLogoIcon className="block h-4 md:hidden" /> */}
           <h1 className="text-sm font-bold md:text-xl">TEN Agent</h1>
         </div>
         <HeaderRoomInfo />
diff --git a/demo/src/components/customSelect/index.module.scss b/demo/src/components/customSelect/index.module.scss
deleted file mode 100644
index 0649e994..00000000
--- a/demo/src/components/customSelect/index.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.selectWrapper {
-  position: relative;
-
-  .prefixIconWrapper {
-    position: absolute;
-    z-index: 1;
-    width: 3rem;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  :global(.customSelect) {
-    width: 100%;
-
-    :global(.ant-select-selector) {
-      padding-left: calc(3rem - 8px) !important;
-    }
-  }
-
-}
diff --git a/demo/src/components/customSelect/index.tsx b/demo/src/components/customSelect/index.tsx
deleted file mode 100644
index 8dd1b188..00000000
--- a/demo/src/components/customSelect/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Select, SelectProps } from "antd"
-import styles from "./index.module.scss"
-
-type CustomSelectProps = SelectProps & {
-  prefixIcon?: React.ReactNode;
-}
-
-const CustomSelect = (props: CustomSelectProps) => {
-
-  const { prefixIcon, className, ...rest } = props;
-
-  return <div className={`${styles.selectWrapper} ${className}`}>
-    {prefixIcon && <div className={styles.prefixIconWrapper}>{prefixIcon}</div>}
-    <Select {...rest} rootClassName="customSelect"></Select>
-  </div>
-}
-
-
-export default CustomSelect
diff --git a/demo/src/components/loginCard/index.module.scss b/demo/src/components/loginCard/index.module.scss
deleted file mode 100644
index 10d807e1..00000000
--- a/demo/src/components/loginCard/index.module.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-.card {
-  position: absolute;
-  top: 45%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  width: 368px;
-  padding: 100px 24px 40px 24px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: 20px;
-  border: 1px solid #20272D;
-  background: linear-gradient(154deg, rgba(31, 69, 141, 0.16) 0%, rgba(31, 69, 141, 0.00) 30%), linear-gradient(153deg, rgba(31, 54, 97, 0.00) 53.75%, #1F458D 100%), rgba(15, 15, 17, 0.10);
-  box-shadow: 0px 3.999px 48.988px 0px rgba(0, 7, 72, 0.12);
-  backdrop-filter: blur(8.8px);
-
-  .top {
-    .github {
-      position: absolute;
-      right: 24px;
-      top: 24px;
-      display: flex;
-      padding: 4px 8px 4px 4px;
-      align-items: center;
-      gap: 4px;
-      border-radius: 100px;
-      border: 1px solid #2B2F36;
-      cursor: pointer;
-
-      .text {
-        color: var(--Grey-300, #EAECF0);
-        font-size: 12px;
-        line-height: 150%;
-      }
-    }
-  }
-
-  .content {
-
-    .title {
-      color: white;
-      font-weight: bold;
-      font-size: 25px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 10px;
-      .text {
-        color: var(--Grey-300, #EAECF0);
-        text-align: center;
-        font-size: 17px;
-        font-weight: 500;
-        margin-bottom: 30px;
-      }
-    }
-
-    .section {
-
-      input {
-        display: flex;
-        width: 320px;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 6px;
-        display: flex;
-        height: 38px;
-        padding: 12px 8px;
-        align-items: center;
-        gap: 8px;
-        align-self: stretch;
-        border-radius: 6px;
-        border: 1px solid #2B2F36;
-        box-shadow: 0px 4.282px 52.456px 0px rgba(0, 7, 72, 0.12);
-        backdrop-filter: blur(13px);
-        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.20);
-      }
-
-      .btn {
-        display: flex;
-        padding: 10px 18px;
-        justify-content: center;
-        align-items: center;
-        gap: 8px;
-        align-self: stretch;
-        border-radius: 8px;
-        background: var(--primary-500-base, #0888FF);
-        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-        cursor: pointer;
-
-        .btnText {
-          color: var(---white, #FFF);
-          font-size: 16px;
-          font-weight: 500;
-          line-height: 24px;
-        }
-
-        .btnLoadingBg {
-          background: var(--primary-500-base, #434343);
-        }
-      }
-
-      &.btnDisabled {
-        background-color: #808080; // Gray color
-        cursor: not-allowed;
-        opacity: 0.7; // Optional: reduces opacity to further indicate disabled state
-      }
-    }
-
-    .section+.section {
-      margin-top: 24px;
-    }
-
-    .version {
-      text-align: center;
-      margin-top: 32px;
-      color: var(--Grey-600, #667085);
-      line-height: 22px;
-    }
-
-  }
-  .success {
-    background: var(--primary-500-base, #434343);
-  }
-  
-  .dotting { 
-    display: inline-block; width: 10px; min-height: 2px;
-    padding-right: 2px;
-    border-left: 2px solid currentColor; border-right: 2px solid currentColor;
-    background-color: currentColor; background-clip: content-box;
-    box-sizing: border-box;
-    -webkit-animation: dot 1.5s infinite step-start both;
-    animation: dot 1.5s infinite step-start both;
-  }
-  .dotting::before { content: ''; }
-  :root .dotting { margin-left: 2px; padding-left: 2px; }
-  
-  @keyframes dot {
-  25% { border-color: transparent; background-color: transparent; }
-  50% { border-right-color: transparent; background-color: transparent; }
-  75% { border-right-color: transparent; }
-  }
-}
diff --git a/demo/src/components/pdfSelect/index.module.scss b/demo/src/components/pdfSelect/index.module.scss
deleted file mode 100644
index adb93280..00000000
--- a/demo/src/components/pdfSelect/index.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// .pdfSelect {
-  //   min-width: 200px;
-  //   max-width: 300px;
-  // }
-.dropdownRender {
-  display: flex;
-  justify-content: flex-end;
-}
diff --git a/demo/src/components/pdfSelect/index.tsx b/demo/src/components/pdfSelect/index.tsx
deleted file mode 100644
index f593bf1d..00000000
--- a/demo/src/components/pdfSelect/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { ReactElement, useState } from "react"
-import { PdfIcon } from "@/components/icons"
-import CustomSelect from "@/components/customSelect"
-import { Divider, message } from 'antd';
-import { useEffect } from 'react';
-import { apiGetDocumentList, apiUpdateDocument, useAppSelector } from "@/common"
-import PdfUpload from "./upload"
-import { OptionType, IPdfData } from "@/types"
-
-import styles from "./index.module.scss"
-
-const PdfSelect = () => {
-  const options = useAppSelector(state => state.global.options)
-  const { channel } = options
-  const [pdfOptions, setPdfOptions] = useState<OptionType[]>([])
-  const [selectedPdf, setSelectedPdf] = useState<string>('')
-  const agentConnected = useAppSelector(state => state.global.agentConnected)
-
-
-  useEffect(() => {
-    if(agentConnected) {
-      getPDFOptions()
-    } else {
-      setPdfOptions([{
-        value: '',
-        label: 'Please select a PDF file'
-      }])
-    }
-  }, [agentConnected])
-
-
-  const getPDFOptions = async () => {
-    const res = await apiGetDocumentList()
-    setPdfOptions([{
-      value: '',
-      label: 'Please select a PDF file'
-    }].concat(res.data.map((item: any) => {
-      return {
-        value: item.collection,
-        label: item.file_name
-      }
-    })))
-    setSelectedPdf('')
-  }
-
-  const onUploadSuccess = (data: IPdfData) => {
-    setPdfOptions([...pdfOptions, {
-      value: data.collection,
-      label: data.fileName
-    }])
-    setSelectedPdf(data.collection)
-  }
-
-  const pdfDropdownRender = (menu: ReactElement) => {
-    return <>
-      {menu}
-      <Divider style={{ margin: '8px 0', background: "#272A2F" }} />
-      <div className={styles.dropdownRender} >
-        <PdfUpload onSuccess={onUploadSuccess}></PdfUpload>
-      </div >
-    </>
-  }
-
-
-  const onSelectPdf = async (val: string) => {
-    const item = pdfOptions.find(item => item.value === val)
-    if (!item) {
-      return message.error("Please select a PDF file")
-    }
-    setSelectedPdf(val)
-    await apiUpdateDocument({
-      collection: val,
-      fileName: item.label,
-      channel
-    })
-  }
-
-
-  return <CustomSelect
-    prefixIcon={<PdfIcon></PdfIcon>}
-    onChange={onSelectPdf}
-    value={selectedPdf}
-    options={pdfOptions}
-    dropdownRender={pdfDropdownRender}
-    className={styles.pdfSelect} placeholder="Select a PDF file"></CustomSelect>
-}
-
-export default PdfSelect
diff --git a/demo/src/components/pdfSelect/upload/index.module.scss b/demo/src/components/pdfSelect/upload/index.module.scss
deleted file mode 100644
index fd559b5e..00000000
--- a/demo/src/components/pdfSelect/upload/index.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.btn {
-  color: var(--theme-color, #EAECF0);
-
-  &:hover {
-    color: var(--theme-color, #EAECF0) !important;
-  }
-}
diff --git a/demo/src/components/pdfSelect/upload/index.tsx b/demo/src/components/pdfSelect/upload/index.tsx
deleted file mode 100644
index 4eab9684..00000000
--- a/demo/src/components/pdfSelect/upload/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Select, Button, message, Upload, UploadProps } from "antd"
-import { useState } from "react"
-import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
-import { useAppSelector, genUUID } from "@/common"
-import { IPdfData } from "@/types"
-
-import styles from "./index.module.scss"
-
-interface PdfSelectProps {
-  onSuccess?: (data: IPdfData) => void
-}
-
-const PdfUpload = (props: PdfSelectProps) => {
-  const { onSuccess } = props
-  const agentConnected = useAppSelector(state => state.global.agentConnected)
-  const options = useAppSelector(state => state.global.options)
-  const { channel, userId } = options
-
-  const [uploading, setUploading] = useState(false)
-
-  const uploadProps: UploadProps = {
-    accept: "application/pdf",
-    maxCount: 1,
-    showUploadList: false,
-    // the request will be rewrite at middleware.tsx to send to $AGENT_SERVER_URL
-    action: `/api/vector/document/upload`,
-    data: {
-      channel_name: channel,
-      uid: String(userId),
-      request_id: genUUID()
-    },
-    onChange: (info) => {
-      const { file } = info
-      const { status, name } = file
-      if (status == "uploading") {
-        setUploading(true)
-      } else if (status == 'done') {
-        setUploading(false)
-        const { response } = file
-        if (response.code == "0") {
-          message.success(`Upload ${name} success`)
-          const { collection, file_name } = response.data
-          onSuccess && onSuccess({
-            fileName: file_name,
-            collection
-          })
-        } else {
-          message.error(response.msg)
-        }
-      } else if (status == 'error') {
-        setUploading(false)
-        message.error(`Upload ${name} failed`)
-      }
-    }
-  }
-
-  const onClickUploadPDF = (e: any) => {
-    if (!agentConnected) {
-      message.error("Please connect to agent first")
-      e.stopPropagation()
-    }
-  }
-
-
-  return <Upload {...uploadProps}>
-    <Button className={styles.btn} type="text"
-      icon={uploading ? <LoadingOutlined></LoadingOutlined> : <PlusOutlined />}
-      onClick={onClickUploadPDF}>
-      Upload PDF
-    </Button>
-  </Upload>
-}
-
-
-export default PdfUpload
diff --git a/demo/src/components/settings/index.tsx b/demo/src/components/settings/index.tsx
deleted file mode 100644
index 3c3e66b9..00000000
--- a/demo/src/components/settings/index.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useState } from 'react';
-import { Modal, Form, Input, Button, FloatButton, ConfigProvider, theme } from 'antd';
-import { SettingOutlined } from '@ant-design/icons';
-import { useAppDispatch, useAppSelector } from '@/common';
-import { setAgentSettings } from '@/store/reducers/global';
-
-interface FormValues {
-    greeting: string;
-    prompt: string;
-}
-
-const FormModal: React.FC = () => {
-    const [isModalVisible, setIsModalVisible] = useState(false);
-    const [form] = Form.useForm<FormValues>();
-    const dispatch = useAppDispatch();
-    const agentSettings = useAppSelector(state => state.global.agentSettings);
-
-    const showModal = () => {
-        form.setFieldsValue(agentSettings);
-        setIsModalVisible(true);
-    };
-
-    const handleOk = async () => {
-        try {
-            const values = await form.validateFields();
-            console.log('Form Values:', values);
-            // Handle the form submission logic here
-            dispatch(setAgentSettings(values));
-            setIsModalVisible(false);
-            form.resetFields();
-        } catch (errorInfo) {
-            console.log('Validate Failed:', errorInfo);
-        }
-    };
-
-    const handleCancel = () => {
-        setIsModalVisible(false);
-    };
-
-    return (
-        <>
-            <ConfigProvider
-                theme={
-                    {
-                        algorithm: theme.darkAlgorithm,
-                        components: {
-                            Modal: {
-                                contentBg: "#272A2F",
-                                headerBg: "#272A2F",
-                                footerBg: "#272A2F",
-                            }
-                        }
-                    }
-                }>
-                <FloatButton type="primary" icon={<SettingOutlined></SettingOutlined>} onClick={showModal}>
-                </FloatButton>
-                <Modal
-                    title="Settings"
-                    visible={isModalVisible}
-                    onOk={handleOk}
-                    onCancel={handleCancel}
-                    okText="OK"
-                    cancelText="Cancel"
-                >
-                    <Form
-                        form={form}
-                        layout="vertical"
-                        name="form_in_modal"
-                    >
-                        <Form.Item
-                            name="greeting"
-                            label="Greeting"
-                        >
-                            <Input.TextArea rows={2} placeholder="Enter the greeting, leave it blank if you want to use default one." />
-                        </Form.Item>
-
-                        <Form.Item
-                            name="prompt"
-                            label="Prompt"
-                        >
-                            <Input.TextArea rows={4} placeholder="Enter the prompt, leave it blank if you want to use default one." />
-                        </Form.Item>
-                    </Form>
-                </Modal>
-            </ConfigProvider>
-        </>
-    );
-};
-
-export default FormModal;
diff --git a/demo/src/components/ui/dialog.tsx b/demo/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..b5aaef74
--- /dev/null
+++ b/demo/src/components/ui/dialog.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cn } from "@/lib/utils"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/demo/src/components/ui/form.tsx b/demo/src/components/ui/form.tsx
new file mode 100644
index 00000000..b6daa654
--- /dev/null
+++ b/demo/src/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/demo/src/components/ui/label.tsx b/demo/src/components/ui/label.tsx
new file mode 100644
index 00000000..53418217
--- /dev/null
+++ b/demo/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/demo/src/components/ui/textarea.tsx b/demo/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..47308d3b
--- /dev/null
+++ b/demo/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/demo/src/platform/mobile/chat/chatItem/index.module.scss b/demo/src/platform/mobile/chat/chatItem/index.module.scss
deleted file mode 100644
index 27057120..00000000
--- a/demo/src/platform/mobile/chat/chatItem/index.module.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-.agentChatItem {
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-
-  .left {
-    flex: 0 0 auto;
-    display: flex;
-    width: 32px;
-    height: 32px;
-    padding: 10px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    border-radius: 200px;
-    background: var(--Grey-700, #475467);
-
-    .userName {
-      color: var(---white, #FFF);
-      text-align: center;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 150%;
-    }
-  }
-
-  .right {
-    margin-left: 12px;
-
-    .userName {
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 20px;
-      color: var(--theme-color, #667085) !important;
-    }
-
-
-    .agent {
-      color: var(--theme-color, #EAECF0) !important;
-    }
-
-  }
-}
-
-.userChatItem {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-end;
-
-  .userName {
-    text-align: right;
-    color: var(--Grey-600, #667085);
-    font-weight: 500;
-    line-height: 20px;
-  }
-
-
-
-}
-
-
-.chatItem {
-  .text {
-    margin-top: 6px;
-    color: #FFF;
-    display: flex;
-    padding: 8px 14px;
-    flex-direction: column;
-    justify-content: left;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 21px;
-    white-space: pre-wrap;
-    border-radius: 0px 8px 8px 8px;
-    border: 1px solid #272A2F;
-    background: #1E2024;
-    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-  }
-}
-
-.chatItem+.chatItem {
-  margin-top: 14px;
-}
diff --git a/demo/src/platform/mobile/chat/chatItem/index.tsx b/demo/src/platform/mobile/chat/chatItem/index.tsx
deleted file mode 100644
index bde3350c..00000000
--- a/demo/src/platform/mobile/chat/chatItem/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { IChatItem } from "@/types"
-import styles from "./index.module.scss"
-
-interface ChatItemProps {
-  data: IChatItem
-}
-
-
-const AgentChatItem = (props: ChatItemProps) => {
-  const { data } = props
-  const { text } = data
-
-
-  return <div className={`${styles.agentChatItem} ${styles.chatItem}`}>
-    <span className={styles.left}>
-      <span className={styles.userName}>Ag</span>
-    </span>
-    <span className={styles.right}>
-      <div className={`${styles.userName} ${styles.agent}`}>Agent</div>
-      <div className={`${styles.text} ${styles.agent}`}>
-        {text}
-      </div>
-    </span>
-  </div >
-}
-
-const UserChatItem = (props: ChatItemProps) => {
-  const { data } = props
-  const { text } = data
-
-  return <div className={`${styles.userChatItem} ${styles.chatItem} `}>
-    <div className={styles.userName}>You</div>
-    <div className={styles.text}>{text}</div>
-  </div>
-}
-
-
-const ChatItem = (props: ChatItemProps) => {
-  const { data } = props
-
-
-  return (
-    data.type === "agent" ? <AgentChatItem {...props} /> : <UserChatItem {...props} />
-  );
-
-
-}
-
-
-export default ChatItem
diff --git a/demo/src/platform/mobile/chat/index.module.scss b/demo/src/platform/mobile/chat/index.module.scss
deleted file mode 100644
index 8ded1f2c..00000000
--- a/demo/src/platform/mobile/chat/index.module.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-.chat {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-  background: #181A1D;
-  overflow: hidden;
-
-  .header {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    row-gap: 10px;
-    border-bottom: 1px solid #272A2F;
-    width: 100%;
-
-
-    .text {
-      margin-left: 4px;
-      color: var(--Grey-300, #EAECF0);
-      font-size: 14px;
-      font-weight: 600;
-      height: 40px;
-      line-height: 40px;
-      letter-spacing: 0.449px;
-    }
-
-    .languageSelect {
-      width: 100%;
-    }
-
-
-
-
-  }
-
-  .content {
-    margin-top: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-    align-self: stretch;
-    overflow-y: auto;
-
-
-    &::-webkit-scrollbar {
-      width: 6px
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: #6B6B6B;
-      border-radius: 4px;
-    }
-  }
-
-
-}
-
-
-.dropdownRender {
-  display: flex;
-  justify-content: flex-end;
-
-
-  .btn {
-    color: var(--theme-color, #EAECF0);
-
-    &:hover {
-      color: var(--theme-color, #EAECF0) !important;
-    }
-  }
-}
\ No newline at end of file
diff --git a/demo/src/platform/mobile/chat/index.tsx b/demo/src/platform/mobile/chat/index.tsx
deleted file mode 100644
index bb071d4e..00000000
--- a/demo/src/platform/mobile/chat/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { ReactElement, useEffect, useContext, useState } from "react"
-import ChatItem from "./chatItem"
-import { IChatItem } from "@/types"
-import { useAppDispatch, useAutoScroll, LANGUAGE_OPTIONS, useAppSelector, GRAPH_OPTIONS, isRagGraph } from "@/common"
-import { setGraphName, setLanguage } from "@/store/reducers/global"
-import { Select, } from 'antd';
-import { MenuContext } from "../menu/context"
-import PdfSelect from "@/components/pdfSelect"
-
-import styles from "./index.module.scss"
-
-
-const Chat = () => {
-  const chatItems = useAppSelector(state => state.global.chatItems)
-  const language = useAppSelector(state => state.global.language)
-  const agentConnected = useAppSelector(state => state.global.agentConnected)
-  const graphName = useAppSelector(state => state.global.graphName)
-  const dispatch = useAppDispatch()
-  // genRandomChatList
-  // const [chatItems, setChatItems] = useState<IChatItem[]>([])
-  const context = useContext(MenuContext);
-
-  if (!context) {
-    throw new Error("MenuContext is not found")
-  }
-
-  const { scrollToBottom } = context;
-
-
-  useEffect(() => {
-    scrollToBottom()
-  }, [chatItems, scrollToBottom])
-
-
-
-  const onLanguageChange = (val: any) => {
-    dispatch(setLanguage(val))
-  }
-
-  const onGraphNameChange = (val: any) => {
-    dispatch(setGraphName(val))
-  }
-
-
-  return <section className={styles.chat}>
-    <div className={styles.header}>
-      <Select className={styles.graphName}
-        disabled={agentConnected} options={GRAPH_OPTIONS}
-        value={graphName} onChange={onGraphNameChange}></Select>
-      <Select className={styles.languageSelect}
-        options={LANGUAGE_OPTIONS}
-        disabled={agentConnected}
-        value={language} onChange={onLanguageChange}></Select>
-      {isRagGraph(graphName) ? <PdfSelect></PdfSelect> : null}
-    </div>
-    <div className={`${styles.content}`} >
-      {chatItems.map((item, index) => {
-        return <ChatItem data={item} key={index} ></ChatItem>
-      })}
-    </div>
-  </section >
-}
-
-
-export default Chat
diff --git a/demo/src/platform/mobile/description/index.module.scss b/demo/src/platform/mobile/description/index.module.scss
deleted file mode 100644
index 7305f5a7..00000000
--- a/demo/src/platform/mobile/description/index.module.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.description {
-  position: relative;
-  display: flex;
-  padding: 12px 16px;
-  height: 60px;
-  align-items: center;
-  gap: 12px;
-  align-self: stretch;
-  border-bottom: 1px solid #272A2F;
-  background: #181A1D;
-  box-sizing: border-box;
-
-  .title {
-    color: var(--Grey-300, #EAECF0);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    flex: 1 1 auto;
-    /* 21px */
-    letter-spacing: 0.449px;
-  }
-
-  .text {
-    margin-left: 12px;
-    flex: 1 1 auto;
-    color: var(--Grey-600, #667085);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-  }
-
-
-  .btnConnect {
-    width: 150px;
-    display: flex;
-    padding: 8px 14px;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    align-self: stretch;
-    border-radius: 6px;
-    background: var(--theme-color, #0888FF);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-    cursor: pointer;
-    user-select: none;
-    caret-color: transparent;
-    box-sizing: border-box;
-
-    .btnText {
-      color: var(---White, #FFF);
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 20px;
-    }
-
-    .btnText.disconnect {
-      color: var(--Error-400-T, #E95C7B);
-    }
-
-    .loading {
-      margin-left: 4px;
-    }
-  }
-
-
-  .btnConnect.disconnect {
-    background: #181A1D;
-    border: 1px solid var(--Error-400-T, #E95C7B);
-  }
-
-}
diff --git a/demo/src/platform/mobile/description/index.tsx b/demo/src/platform/mobile/description/index.tsx
deleted file mode 100644
index 0241a768..00000000
--- a/demo/src/platform/mobile/description/index.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { setAgentConnected } from "@/store/reducers/global"
-import {
-  DESCRIPTION, useAppDispatch, useAppSelector, apiPing, genUUID,
-  apiStartService, apiStopService
-} from "@/common"
-import { message } from "antd"
-import { useEffect, useState } from "react"
-import { LoadingOutlined, } from "@ant-design/icons"
-import styles from "./index.module.scss"
-
-let intervalId: any
-
-const Description = () => {
-  const dispatch = useAppDispatch()
-  const agentConnected = useAppSelector(state => state.global.agentConnected)
-  const channel = useAppSelector(state => state.global.options.channel)
-  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 agentSettings = useAppSelector(state => state.global.agentSettings)
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    if (channel) {
-      checkAgentConnected()
-    }
-  }, [channel])
-
-
-  const checkAgentConnected = async () => {
-    const res: any = await apiPing(channel)
-    if (res?.code == 0) {
-      dispatch(setAgentConnected(true))
-    }
-  }
-
-  const onClickConnect = async () => {
-    if (loading) {
-      return
-    }
-    setLoading(true)
-    if (agentConnected) {
-      await apiStopService(channel)
-      dispatch(setAgentConnected(false))
-      message.success("Agent disconnected")
-      stopPing()
-    } else {
-      const res = await apiStartService({
-        channel,
-        userId,
-        graphName,
-        language,
-        voiceType,
-        greeting: agentSettings.greeting,
-        prompt: agentSettings.prompt
-      })
-      const { code, msg } = res || {}
-      if (code != 0) {
-        if (code == "10001") {
-          message.error("The number of users experiencing the program simultaneously has exceeded the limit. Please try again later.")
-        } else {
-          message.error(`code:${code},msg:${msg}`)
-        }
-        setLoading(false)
-        throw new Error(msg)
-      }
-      dispatch(setAgentConnected(true))
-      message.success("Agent connected")
-      startPing()
-    }
-    setLoading(false)
-  }
-
-  const startPing = () => {
-    if (intervalId) {
-      stopPing()
-    }
-    intervalId = setInterval(() => {
-      apiPing(channel)
-    }, 3000)
-  }
-
-  const stopPing = () => {
-    if (intervalId) {
-      clearInterval(intervalId)
-      intervalId = null
-    }
-  }
-
-  return <div className={styles.description}>
-    <span className={styles.title}>Description</span>
-    <span className={`${styles.btnConnect} ${agentConnected ? styles.disconnect : ''}`} onClick={onClickConnect}>
-      <span className={`${styles.btnText} ${agentConnected ? styles.disconnect : ''}`}>
-        {!agentConnected ? "Connect" : "Disconnect"}
-        {loading ? <LoadingOutlined className={styles.loading}></LoadingOutlined> : null}
-      </span>
-    </span>
-  </div>
-}
-
-
-export default Description
diff --git a/demo/src/platform/mobile/entry/index.module.scss b/demo/src/platform/mobile/entry/index.module.scss
deleted file mode 100644
index 41322c12..00000000
--- a/demo/src/platform/mobile/entry/index.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.entry {
-  position: relative;
-  height: 100%;
-  box-sizing: border-box;
-
-  .content {
-    position: relative;
-    padding: 16px;
-    box-sizing: border-box;
-
-
-    .body {
-      margin-top: 16px;
-      display: flex;
-      gap: 24px;
-    }
-  }
-}
diff --git a/demo/src/platform/mobile/entry/index.tsx b/demo/src/platform/mobile/entry/index.tsx
deleted file mode 100644
index 3b19cca7..00000000
--- a/demo/src/platform/mobile/entry/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Chat from "../chat"
-import Description from "../description"
-import Rtc from "../rtc"
-import Header from "../header"
-import Menu, { IMenuData } from "../menu"
-import styles from "./index.module.scss"
-import FormModal from "@/components/settings"
-
-
-const MenuData: IMenuData[] = [{
-  name: "Agent",
-  component: <Rtc></Rtc>,
-}, {
-  name: "Chat",
-  component: <Chat></Chat>,
-}]
-
-
-const MobileEntry = () => {
-
-  return <div className={styles.entry}>
-    <Header></Header>
-    <Description></Description>
-    <div className={styles.content}>
-      <Menu data={MenuData}></Menu>
-    </div>
-    <FormModal></FormModal>
-  </div>
-}
-
-
-export default MobileEntry
diff --git a/demo/src/platform/mobile/header/index.module.scss b/demo/src/platform/mobile/header/index.module.scss
deleted file mode 100644
index 707e4215..00000000
--- a/demo/src/platform/mobile/header/index.module.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.header {
-  display: flex;
-  width: 100%;
-  height: 48px;
-  padding: 16px;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #24262A;
-  background: #1E2024;
-  box-shadow: 0px 12px 16px -4px rgba(8, 15, 52, 0.06), 0px 4px 6px -2px rgba(8, 15, 52, 0.03);
-  box-sizing: border-box;
-  z-index: 999;
-
-  .logoWrapper {
-    display: flex;
-    align-items: center;
-
-    .text {
-      margin-left: 8px;
-      color: var(---white, #FFF);
-      text-align: right;
-      font-family: Inter;
-      font-size: 16px;
-      font-weight: 500;
-    }
-  }
-
-  .content {
-    padding-left: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    height: 48px;
-    flex: 1 1 auto;
-    color: var(--Grey-300, #EAECF0);
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 48px;
-    letter-spacing: 0.449px;
-    text-align: center;
-
-    .text {
-      margin-left: 4px;
-      font-size: 12px;
-    }
-  }
-
-  .links {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    span {
-      display: flex;
-    }
-  }
-}
diff --git a/demo/src/platform/mobile/header/index.tsx b/demo/src/platform/mobile/header/index.tsx
deleted file mode 100644
index 6e56a017..00000000
--- a/demo/src/platform/mobile/header/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client"
-
-import { useAppSelector, GITHUB_URL, useSmallScreen } from "@/common"
-import Network from "./network"
-import InfoPopover from "./infoPopover"
-import StylePopover from "./stylePopover"
-import { GithubIcon, LogoIcon, InfoIcon, ColorPickerIcon } from "@/components/icons"
-
-import styles from "./index.module.scss"
-
-const Header = () => {
-  const themeColor = useAppSelector(state => state.global.themeColor)
-  const options = useAppSelector(state => state.global.options)
-  const { channel } = options
-
-
-  const onClickGithub = () => {
-    if (typeof window !== "undefined") {
-      window.open(GITHUB_URL, "_blank")
-    }
-  }
-
-
-
-  return <div className={styles.header}>
-    <span className={styles.logoWrapper}>
-      <LogoIcon size="small"></LogoIcon>
-    </span>
-    <InfoPopover>
-      <span className={styles.content}>
-        <InfoIcon></InfoIcon>
-        <span className={styles.text}>{channel}</span>
-      </span>
-    </InfoPopover>
-    <div className={styles.links}>
-      <span onClick={onClickGithub} className={styles.githubWrapper}>
-        <GithubIcon></GithubIcon>
-      </span>
-      <StylePopover>
-        <ColorPickerIcon color={themeColor} ></ColorPickerIcon>
-      </StylePopover>
-      <Network></Network>
-    </div>
-  </div>
-}
-
-
-export default Header
diff --git a/demo/src/platform/mobile/header/infoPopover/index.module.scss b/demo/src/platform/mobile/header/infoPopover/index.module.scss
deleted file mode 100644
index cd3f72f8..00000000
--- a/demo/src/platform/mobile/header/infoPopover/index.module.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.info {
-  display: flex;
-  padding: 12px 16px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  align-self: stretch;
-
-  .title {
-    color: var(--Grey-300, #EAECF0);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: 0.449px;
-  }
-
-  .item {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .title {
-      color: var(--Grey-600, #667085);
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 150%;
-    }
-
-    .content {
-      color: var(--theme-color, #FFF);
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 150%;
-    }
-  }
-
-  .slider {
-    height: 1px;
-    width: 100%;
-    background-color: #0D0F12;
-  }
-}
diff --git a/demo/src/platform/mobile/header/infoPopover/index.tsx b/demo/src/platform/mobile/header/infoPopover/index.tsx
deleted file mode 100644
index cd451418..00000000
--- a/demo/src/platform/mobile/header/infoPopover/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useMemo } from "react"
-import { useAppSelector } from "@/common"
-import { Popover } from 'antd';
-
-
-import styles from "./index.module.scss"
-
-interface InfoPopoverProps {
-  children?: React.ReactNode
-}
-
-const InfoPopover = (props: InfoPopoverProps) => {
-  const { children } = props
-  const options = useAppSelector(state => state.global.options)
-  const { channel, userId } = options
-
-  const roomConnected = useAppSelector(state => state.global.roomConnected)
-  const agentConnected = useAppSelector(state => state.global.agentConnected)
-
-  const roomConnectedText = useMemo(() => {
-    return roomConnected ? "TRUE" : "FALSE"
-  }, [roomConnected])
-
-  const agentConnectedText = useMemo(() => {
-    return agentConnected ? "TRUE" : "FALSE"
-  }, [agentConnected])
-
-
-
-  const content = <section className={styles.info}>
-    <div className={styles.title}>INFO</div>
-    <div className={styles.item}>
-      <span className={styles.title}>Room</span>
-      <span className={styles.content}>{channel}</span>
-    </div>
-    <div className={styles.item}>
-      <span className={styles.title}>Participant</span>
-      <span className={styles.content}>{userId}</span>
-    </div>
-    <div className={styles.slider}></div>
-    <div className={styles.title}>STATUS</div>
-    <div className={styles.item}>
-      <div className={styles.title}>Room connected</div>
-      <div className={styles.content}>{roomConnectedText}</div>
-    </div>
-    <div className={styles.item}>
-      <div className={styles.title}>Agent connected</div>
-      <div className={styles.content}>{agentConnectedText}</div>
-    </div>
-  </section>
-
-
-  return <Popover content={content} arrow={false}>{children}</Popover>
-
-}
-
-export default InfoPopover
diff --git a/demo/src/platform/mobile/header/network/index.module.scss b/demo/src/platform/mobile/header/network/index.module.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/demo/src/platform/mobile/header/network/index.tsx b/demo/src/platform/mobile/header/network/index.tsx
deleted file mode 100644
index 92b4e33b..00000000
--- a/demo/src/platform/mobile/header/network/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import React from "react";
-import { rtcManager } from "@/manager"
-import { NetworkQuality } from "agora-rtc-sdk-ng"
-import { useEffect, useState } from "react"
-import { NetworkIcon } from "@/components/icons"
-
-interface NetworkProps {
-  style?: React.CSSProperties
-}
-
-const NetWork = (props: NetworkProps) => {
-  const { style } = props
-
-  const [networkQuality, setNetworkQuality] = useState<NetworkQuality>()
-
-  useEffect(() => {
-    rtcManager.on("networkQuality", onNetworkQuality)
-
-    return () => {
-      rtcManager.off("networkQuality", onNetworkQuality)
-    }
-  }, [])
-
-  const onNetworkQuality = (quality: NetworkQuality) => {
-    setNetworkQuality(quality)
-  }
-
-  return (
-    <span style={style}>
-      <NetworkIcon level={networkQuality?.uplinkNetworkQuality}></NetworkIcon>
-    </span>
-  )
-}
-
-export default NetWork
diff --git a/demo/src/platform/mobile/header/stylePopover/colorPicker/index.module.scss b/demo/src/platform/mobile/header/stylePopover/colorPicker/index.module.scss
deleted file mode 100644
index 405e7781..00000000
--- a/demo/src/platform/mobile/header/stylePopover/colorPicker/index.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.colorPicker {
-  height: 24px;
-  display: flex;
-  align-items: center;
-
-  :global(.react-colorful) {
-    width: 220px;
-    height: 8px;
-  }
-
-  :global(.react-colorful__saturation) {
-    display: none;
-  }
-
-  :global(.react-colorful__hue) {
-    border-radius: 8px !important;
-    height: 8px;
-  }
-
-  :global(.react-colorful__pointer) {
-    width: 24px;
-    height: 24px;
-  }
-}
diff --git a/demo/src/platform/mobile/header/stylePopover/colorPicker/index.tsx b/demo/src/platform/mobile/header/stylePopover/colorPicker/index.tsx
deleted file mode 100644
index 28163d77..00000000
--- a/demo/src/platform/mobile/header/stylePopover/colorPicker/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client"
-
-import { HexColorPicker } from "react-colorful";
-import { useAppSelector, useAppDispatch } from "@/common"
-import { setThemeColor } from "@/store/reducers/global"
-import styles from "./index.module.scss";
-
-const ColorPicker = () => {
-  const dispatch = useAppDispatch()
-  const themeColor = useAppSelector(state => state.global.themeColor)
-
-  const onColorChange = (color: string) => {
-    console.log(color);
-    dispatch(setThemeColor(color))
-  };
-
-  return <div className={styles.colorPicker}>
-    <HexColorPicker color={themeColor} onChange={onColorChange} />
-  </div>
-};
-
-export default ColorPicker;
diff --git a/demo/src/platform/mobile/header/stylePopover/index.module.scss b/demo/src/platform/mobile/header/stylePopover/index.module.scss
deleted file mode 100644
index defdcc12..00000000
--- a/demo/src/platform/mobile/header/stylePopover/index.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.info {
-  padding: 12px 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-  align-self: stretch;
-
-
-  .title {
-    color: var(--Grey-300, #EAECF0);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: 0.449px;
-  }
-
-  .color {
-    font-size: 0;
-    white-space: nowrap;
-
-    .item {
-      position: relative;
-      display: inline-block;
-      width: 28px;
-      height: 28px;
-      border-radius: 4px;
-      border: 2px solid transparent;
-      font-size: 0;
-      cursor: pointer;
-
-      .inner {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 18px;
-        height: 18px;
-        border-radius: 2px;
-        box-sizing: border-box;
-      }
-    }
-
-    .item+.item {
-      margin-left: 12px;
-    }
-
-  }
-
-
-}
diff --git a/demo/src/platform/mobile/header/stylePopover/index.tsx b/demo/src/platform/mobile/header/stylePopover/index.tsx
deleted file mode 100644
index f8508323..00000000
--- a/demo/src/platform/mobile/header/stylePopover/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useMemo } from "react"
-import { COLOR_LIST, useAppSelector, useAppDispatch } from "@/common"
-import { setThemeColor } from "@/store/reducers/global"
-import ColorPicker from "./colorPicker"
-import { Popover } from 'antd';
-
-
-import styles from "./index.module.scss"
-
-interface StylePopoverProps {
-  children?: React.ReactNode
-}
-
-const StylePopover = (props: StylePopoverProps) => {
-  const { children } = props
-  const dispatch = useAppDispatch()
-  const themeColor = useAppSelector(state => state.global.themeColor)
-
-
-  const onClickColor = (index: number) => {
-    const target = COLOR_LIST[index]
-    if (target.active !== themeColor) {
-      dispatch(setThemeColor(target.active))
-    }
-  }
-
-  const content = <section className={styles.info}>
-    <div className={styles.title}>STYLE</div>
-    <div className={styles.color}>
-      {
-        COLOR_LIST.map((item, index) => {
-          return <span
-            style={{
-              borderColor: item.active == themeColor ? item.active : "transparent",
-            }}
-            onClick={() => onClickColor(index)}
-            className={styles.item}
-            key={index}>
-            <span className={styles.inner} style={{
-              backgroundColor: item.active == themeColor ? item.active : item.default,
-            }}></span>
-          </span>
-        })
-      }
-    </div>
-    <ColorPicker></ColorPicker>
-  </section>
-
-
-  return <Popover content={content} arrow={false}>{children}</Popover>
-
-}
-
-export default StylePopover
diff --git a/demo/src/platform/mobile/menu/context.ts b/demo/src/platform/mobile/menu/context.ts
deleted file mode 100644
index 41c52911..00000000
--- a/demo/src/platform/mobile/menu/context.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createContext } from "react"
-
-export interface MenuContextType {
-  scrollToBottom: () => void;
-}
-
-export const MenuContext = createContext<MenuContextType>({
-  scrollToBottom: () => { }
-});
diff --git a/demo/src/platform/mobile/menu/index.module.scss b/demo/src/platform/mobile/menu/index.module.scss
deleted file mode 100644
index 58b1b3fe..00000000
--- a/demo/src/platform/mobile/menu/index.module.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.menu {
-  width: 100%;
-  border: 1px solid #272A2F;
-  border-radius: 4px;
-  background: #0F0F11;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  .header {
-    height: 40px;
-    overflow: hidden;
-    border-bottom: 1px solid #272A2F;
-    box-sizing: border-box;
-
-    .menuItem {
-      height: 40px;
-      padding: 0 16px;
-      color: var(--Grey-300, #EAECF0);
-      font-size: 14px;
-      font-weight: 600;
-      line-height: 40px;
-      letter-spacing: 0.449px;
-      display: inline-block;
-      color: #667085;
-      background: #181A1E;
-      cursor: pointer;
-      border-right: 1px solid #272A2F;
-      box-sizing: border-box;
-      overflow: hidden;
-      background: #0F0F11;
-    }
-
-    .active {
-      color: #EAECF0;
-      background: #181A1D;
-    }
-  }
-
-
-  .content {
-    position: relative;
-    background: #181A1D;
-    // header 48px
-    // description 60px
-    // paddingTop 16px 16px
-    // menu header 40px
-    height: calc(100vh - 48px - 60px - 32px - 40px - 2px);
-    overflow: hidden;
-    box-sizing: border-box;
-
-    .item {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      padding: 16px;
-      z-index: -1;
-      overflow: auto;
-      visibility: hidden;
-      box-sizing: border-box;
-    }
-
-    .active {
-      z-index: 1;
-      visibility: visible;
-    }
-  }
-}
diff --git a/demo/src/platform/mobile/menu/index.tsx b/demo/src/platform/mobile/menu/index.tsx
deleted file mode 100644
index 2e20de78..00000000
--- a/demo/src/platform/mobile/menu/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client"
-
-import { ReactElement, useEffect, useState, useRef, useMemo, useCallback } from "react"
-import { useAutoScroll } from "@/common"
-import { MenuContext } from "./context"
-import styles from "./index.module.scss"
-
-export interface IMenuData {
-  name: string,
-  component: ReactElement
-}
-
-export interface IMenuContentComponentPros {
-  scrollToBottom: () => void
-}
-
-interface MenuProps {
-  data: IMenuData[]
-}
-
-
-const Menu = (props: MenuProps) => {
-  const { data } = props
-  const [activeIndex, setActiveIndex] = useState(0)
-  const contentRefList = useRef<(HTMLDivElement | null)[]>([])
-
-  const onClickItem = (index: number) => {
-    setActiveIndex(index)
-  }
-
-  useEffect(() => {
-    scrollToTop()
-  }, [activeIndex])
-
-  const scrollToBottom = useCallback(() => {
-    const current = contentRefList.current?.[activeIndex]
-    if (current) {
-      current.scrollTop = current.scrollHeight
-    }
-  }, [contentRefList, activeIndex])
-
-  const scrollToTop = useCallback(() => {
-    const current = contentRefList.current?.[activeIndex]
-    if (current) {
-      current.scrollTop = 0
-    }
-  }, [contentRefList, activeIndex])
-
-
-  return <div className={styles.menu}>
-    <section className={styles.header}>
-      {data.map((item, index) => {
-        return <span
-          key={index}
-          className={`${styles.menuItem} ${index == activeIndex ? styles.active : ''}`}
-          onClick={() => onClickItem(index)}>{item.name}</span>
-      })}
-    </section>
-    <section className={styles.content} >
-      <MenuContext.Provider value={{ scrollToBottom }}>
-        {data.map((item, index) => {
-          return <div
-            key={index}
-            ref={el => {
-              contentRefList.current[index] = el;
-            }}
-            className={`${styles.item} ${index == activeIndex ? styles.active : ''}`}>
-            {item.component}
-          </div>
-        })}
-      </MenuContext.Provider>
-    </section>
-  </div >
-}
-
-export default Menu
diff --git a/demo/src/platform/mobile/rtc/agent/index.module.scss b/demo/src/platform/mobile/rtc/agent/index.module.scss
deleted file mode 100644
index fa3ae2ec..00000000
--- a/demo/src/platform/mobile/rtc/agent/index.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.agent {
-  position: relative;
-  display: flex;
-  height: 292px;
-  padding: 20px 16px;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  align-self: stretch;
-  background: linear-gradient(154deg, rgba(27, 66, 166, 0.16) 0%, rgba(27, 45, 140, 0.00) 18%), linear-gradient(153deg, rgba(23, 24, 28, 0.00) 53.75%, #11174E 100%), #0F0F11;
-  box-shadow: 0px 3.999px 48.988px 0px rgba(0, 7, 72, 0.12);
-  backdrop-filter: blur(7);
-  box-sizing: border-box;
-
-  .text {
-    margin-top: 50px;
-    color: var(--theme-color, #EAECF0);
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: 0.449px;
-  }
-
-  .view {
-    margin-top: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 56px;
-  }
-}
diff --git a/demo/src/platform/mobile/rtc/agent/index.tsx b/demo/src/platform/mobile/rtc/agent/index.tsx
deleted file mode 100644
index a7fd7944..00000000
--- a/demo/src/platform/mobile/rtc/agent/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client"
-
-import { useAppSelector, useMultibandTrackVolume } from "@/common"
-import AudioVisualizer from "../audioVisualizer"
-import { IMicrophoneAudioTrack } from 'agora-rtc-sdk-ng';
-import styles from "./index.module.scss"
-
-interface AgentProps {
-  audioTrack?: IMicrophoneAudioTrack
-}
-
-const Agent = (props: AgentProps) => {
-  const { audioTrack } = props
-
-  const subscribedVolumes = useMultibandTrackVolume(audioTrack, 12);
-
-  return <div className={styles.agent}>
-    <div className={styles.text}>Agent</div>
-    <div className={styles.view}>
-      <AudioVisualizer
-        type="agent"
-        frequencies={subscribedVolumes}
-        barWidth={6}
-        minBarHeight={6}
-        maxBarHeight={56}
-        borderRadius={2}
-        gap={6}></AudioVisualizer>
-    </div>
-  </div>
-
-}
-
-
-export default Agent;
diff --git a/demo/src/platform/mobile/rtc/audioVisualizer/index.module.scss b/demo/src/platform/mobile/rtc/audioVisualizer/index.module.scss
deleted file mode 100644
index ffdf7540..00000000
--- a/demo/src/platform/mobile/rtc/audioVisualizer/index.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.audioVisualizer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .item {
-  }
-
-  .agent {
-    background-color: var(--theme-color, #eaecf0);
-    box-shadow: 0 0 10px var(--theme-color, #eaecf0);
-  }
-
-  .user {
-    background-color: var(--Grey-300, #eaecf0);
-  }
-}
diff --git a/demo/src/platform/mobile/rtc/audioVisualizer/index.tsx b/demo/src/platform/mobile/rtc/audioVisualizer/index.tsx
deleted file mode 100644
index bc21f554..00000000
--- a/demo/src/platform/mobile/rtc/audioVisualizer/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import styles from "./index.module.scss"
-
-interface AudioVisualizerProps {
-  type: "agent" | "user";
-  frequencies: Float32Array[];
-  gap: number;
-  barWidth: number;
-  minBarHeight: number;
-  maxBarHeight: number
-  borderRadius: number;
-}
-
-
-const AudioVisualizer = (props: AudioVisualizerProps) => {
-  const { frequencies, gap, barWidth, minBarHeight, maxBarHeight, borderRadius, type } = props;
-
-  const summedFrequencies = frequencies.map((bandFrequencies) => {
-    const sum = bandFrequencies.reduce((a, b) => a + b, 0)
-    if (sum <= 0) {
-      return 0
-    }
-    return Math.sqrt(sum / bandFrequencies.length);
-  });
-
-  return <div className={styles.audioVisualizer} style={{
-    gap: `${gap}px`
-  }}>{
-      summedFrequencies.map((frequency, index) => {
-
-        const style = {
-          height: minBarHeight + frequency * (maxBarHeight - minBarHeight) + "px",
-          borderRadius: borderRadius + "px",
-          width: barWidth + "px",
-          transition:
-            "background-color 0.35s ease-out, transform 0.25s ease-out",
-          // transform: transform,
-        }
-
-        return <span key={index} className={`${styles.item} ${type == 'agent' ? styles.agent : styles.user}`} style={style}></span>
-      })
-    }</div>
-}
-
-
-export default AudioVisualizer;
diff --git a/demo/src/platform/mobile/rtc/camSection/camSelect/index.module.scss b/demo/src/platform/mobile/rtc/camSection/camSelect/index.module.scss
deleted file mode 100644
index 8ca5088b..00000000
--- a/demo/src/platform/mobile/rtc/camSection/camSelect/index.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.select {
-  flex: 0 0 200px;
-  width: 200px;
-}
diff --git a/demo/src/platform/mobile/rtc/camSection/camSelect/index.tsx b/demo/src/platform/mobile/rtc/camSection/camSelect/index.tsx
deleted file mode 100644
index 33a5e003..00000000
--- a/demo/src/platform/mobile/rtc/camSection/camSelect/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client"
-
-import AgoraRTC, { ICameraVideoTrack } from "agora-rtc-sdk-ng"
-import { useState, useEffect } from "react"
-import { Select } from "antd"
-
-import styles from "./index.module.scss"
-
-interface CamSelectProps {
-  videoTrack?: ICameraVideoTrack
-}
-
-interface SelectItem {
-  label: string
-  value: string
-  deviceId: string
-}
-
-const DEFAULT_ITEM: SelectItem = {
-  label: "Default",
-  value: "default",
-  deviceId: ""
-}
-
-const CamSelect = (props: CamSelectProps) => {
-  const { videoTrack } = props
-  const [items, setItems] = useState<SelectItem[]>([DEFAULT_ITEM]);
-  const [value, setValue] = useState("default");
-
-  useEffect(() => {
-    if (videoTrack) {
-      const label = videoTrack?.getTrackLabel();
-      setValue(label);
-      AgoraRTC.getCameras().then(arr => {
-        setItems(arr.map(item => ({
-          label: item.label,
-          value: item.label,
-          deviceId: item.deviceId
-        })));
-      });
-    }
-  }, [videoTrack]);
-
-  const onChange = async (value: string) => {
-    const target = items.find(item => item.value === value);
-    if (target) {
-      setValue(target.value);
-      if (videoTrack) {
-        await videoTrack.setDevice(target.deviceId);
-      }
-    }
-  }
-
-  return <Select className={styles.select} value={value} options={items} onChange={onChange}></Select>
-}
-
-export default CamSelect 
diff --git a/demo/src/platform/mobile/rtc/camSection/index.module.scss b/demo/src/platform/mobile/rtc/camSection/index.module.scss
deleted file mode 100644
index 76f4ad1e..00000000
--- a/demo/src/platform/mobile/rtc/camSection/index.module.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.camera {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-
-  .title {
-    margin-bottom: 10px;
-    color: var(--Grey-300, #EAECF0);
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 150%;
-    letter-spacing: 0.449px;
-  }
-
-  .select {
-    height: 32px;
-    display: flex;
-    width: 100%;
-    justify-content: flex-start;
-    align-items: center;
-
-    .iconWrapper {
-      flex: 0 0 auto;
-      margin-right: 12px;
-      display: flex;
-      width: 32px;
-      height: 32px;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-      border-radius: 6px;
-      border: 1px solid #2B2F36;
-      cursor: pointer;
-    }
-
-    .select {
-      flex: 0 0 auto;
-      width: 200px;
-    }
-  }
-
-  .view {
-    position: relative;
-    margin-top: 12px;
-    min-height: 210px;
-    height: 210px;
-    border-radius: 6px;
-    border: 1px solid #272A2F;
-    background: #1E2024;
-    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-  }
-}
diff --git a/demo/src/platform/mobile/rtc/camSection/index.tsx b/demo/src/platform/mobile/rtc/camSection/index.tsx
deleted file mode 100644
index 2bd0e8db..00000000
--- a/demo/src/platform/mobile/rtc/camSection/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client"
-
-import CamSelect from "./camSelect"
-import { CamIcon } from "@/components/icons"
-import styles from "./index.module.scss"
-import { ICameraVideoTrack } from 'agora-rtc-sdk-ng';
-import { LocalStreamPlayer } from "../streamPlayer"
-import { useState, useEffect, useMemo } from 'react';
-import { useSmallScreen } from "@/common"
-
-interface CamSectionProps {
-  videoTrack?: ICameraVideoTrack
-}
-
-const CamSection = (props: CamSectionProps) => {
-  const { videoTrack } = props
-  const [videoMute, setVideoMute] = useState(false)
-
-  useEffect(() => {
-    videoTrack?.setMuted(videoMute)
-  }, [videoTrack, videoMute])
-
-  const onClickMute = () => {
-    setVideoMute(!videoMute)
-  }
-
-  return <div className={styles.camera}>
-    <div className={styles.title}>CAMERA</div>
-    <div className={styles.select}>
-      <span className={styles.iconWrapper} onClick={onClickMute}>
-        <CamIcon active={!videoMute} width={20} height={20} viewBox="0 0 24 24"></CamIcon>
-      </span>
-      <CamSelect videoTrack={videoTrack}></CamSelect>
-    </div>
-    <div className={styles.view}>
-      <LocalStreamPlayer videoTrack={videoTrack}></LocalStreamPlayer>
-    </div>
-  </div>
-}
-
-
-export default CamSection;
diff --git a/demo/src/platform/mobile/rtc/index.module.scss b/demo/src/platform/mobile/rtc/index.module.scss
deleted file mode 100644
index ff7b7958..00000000
--- a/demo/src/platform/mobile/rtc/index.module.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.rtc {
-  flex: 0 0 420px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex-shrink: 0;
-  align-self: stretch;
-  border-radius: 8px;
-  border: 1px solid #272A2F;
-  background: #181A1D;
-  box-sizing: border-box;
-
-  .header {
-    display: flex;
-    height: 40px;
-    padding: 0px 16px;
-    align-items: center;
-    align-self: stretch;
-    border-bottom: 1px solid #272A2F;
-
-    .text {
-      flex: 1 1 auto;
-      font-weight: 600;
-      line-height: 150%;
-      letter-spacing: 0.449px;
-      color: var(--Grey-300, #EAECF0);
-    }
-
-    .voiceSelect {
-      flex: 0 0 120px;
-    }
-  }
-
-  .you {
-    display: flex;
-    padding: 24px 16px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 24px;
-    align-self: stretch;
-    border-top: 1px solid #272A2F;
-
-    .title {
-      color: var(--Grey-300, #EAECF0);
-      font-size: 24px;
-      font-weight: 600;
-      line-height: 150%;
-      letter-spacing: 0.449px;
-      text-align: center;
-    }
-
-
-  }
-}
diff --git a/demo/src/platform/mobile/rtc/index.tsx b/demo/src/platform/mobile/rtc/index.tsx
deleted file mode 100644
index 9adf3580..00000000
--- a/demo/src/platform/mobile/rtc/index.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client"
-
-import { ICameraVideoTrack, IMicrophoneAudioTrack } from "agora-rtc-sdk-ng"
-import { useAppSelector, useAppDispatch, VOICE_OPTIONS } from "@/common"
-import { ITextItem, EMessageType } from "@/types"
-import { rtcManager, IUserTracks, IRtcUser } from "@/manager"
-import { setRoomConnected, addChatItem, setVoiceType } from "@/store/reducers/global"
-import MicSection from "./micSection"
-import CamSection from "./camSection"
-import Agent from "./agent"
-import styles from "./index.module.scss"
-import { useRef, useEffect, useState, Fragment } from "react"
-import { VoiceIcon } from "@/components/icons"
-import CustomSelect from "@/components/customSelect"
-
-let hasInit = false
-
-const Rtc = () => {
-  const dispatch = useAppDispatch()
-  const options = useAppSelector(state => state.global.options)
-  const voiceType = useAppSelector(state => state.global.voiceType)
-  const agentConnected = useAppSelector(state => state.global.agentConnected)
-  const { userId, channel } = options
-  const [videoTrack, setVideoTrack] = useState<ICameraVideoTrack>()
-  const [audioTrack, setAudioTrack] = useState<IMicrophoneAudioTrack>()
-  const [remoteuser, setRemoteUser] = useState<IRtcUser>()
-
-  useEffect(() => {
-    if (!options.channel) {
-      return
-    }
-    if (hasInit) {
-      return
-    }
-
-    init()
-
-    return () => {
-      if (hasInit) {
-        destory()
-      }
-    }
-  }, [options.channel])
-
-
-  const init = async () => {
-    console.log("[test] init")
-    rtcManager.on("localTracksChanged", onLocalTracksChanged)
-    rtcManager.on("textChanged", onTextChanged)
-    rtcManager.on("remoteUserChanged", onRemoteUserChanged)
-    await rtcManager.createTracks()
-    await rtcManager.join({
-      channel,
-      userId
-    })
-    await rtcManager.publish()
-    dispatch(setRoomConnected(true))
-    hasInit = true
-  }
-
-  const destory = async () => {
-    console.log("[test] destory")
-    rtcManager.off("textChanged", onTextChanged)
-    rtcManager.off("localTracksChanged", onLocalTracksChanged)
-    rtcManager.off("remoteUserChanged", onRemoteUserChanged)
-    await rtcManager.destroy()
-    dispatch(setRoomConnected(false))
-    hasInit = false
-  }
-
-  const onRemoteUserChanged = (user: IRtcUser) => {
-    console.log("[test] onRemoteUserChanged", user)
-    setRemoteUser(user)
-  }
-
-  const onLocalTracksChanged = (tracks: IUserTracks) => {
-    console.log("[test] onLocalTracksChanged", tracks)
-    const { videoTrack, audioTrack } = tracks
-    if (videoTrack) {
-      setVideoTrack(videoTrack)
-    }
-    if (audioTrack) {
-      setAudioTrack(audioTrack)
-    }
-  }
-
-  const onTextChanged = (text: ITextItem) => {
-    if (text.dataType == "transcribe") {
-      const isAgent = Number(text.uid) != Number(userId)
-      dispatch(addChatItem({
-        userId: text.uid,
-        text: text.text,
-        type: isAgent ? EMessageType.AGENT : EMessageType.USER,
-        isFinal: text.isFinal,
-        time: text.time
-      }))
-    }
-  }
-
-  const onVoiceChange = (value: any) => {
-    dispatch(setVoiceType(value))
-  }
-
-
-  return <section className={styles.rtc}>
-    <div className={styles.header}>
-      <span className={styles.text}>Audio & Video</span>
-      <CustomSelect className={styles.voiceSelect}
-        value={voiceType}
-        disabled={agentConnected}
-        prefixIcon={<VoiceIcon></VoiceIcon>}
-        options={VOICE_OPTIONS} onChange={onVoiceChange}></CustomSelect>
-    </div>
-    {/* agent */}
-    <Agent audioTrack={remoteuser?.audioTrack}></Agent>
-    {/* you */}
-    <div className={styles.you}>
-      <div className={styles.title}>You</div>
-      {/* microphone */}
-      <MicSection audioTrack={audioTrack}></MicSection>
-      {/* camera */}
-      <CamSection videoTrack={videoTrack}></CamSection>
-    </div>
-  </section>
-}
-
-
-export default Rtc;
diff --git a/demo/src/platform/mobile/rtc/micSection/index.module.scss b/demo/src/platform/mobile/rtc/micSection/index.module.scss
deleted file mode 100644
index 60cc6fe1..00000000
--- a/demo/src/platform/mobile/rtc/micSection/index.module.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.microphone {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-
-  .title {
-    margin-bottom: 10px;
-    color: var(--Grey-300, #EAECF0);
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 150%;
-    letter-spacing: 0.449px;
-  }
-
-
-  .select {
-    height: 32px;
-    display: flex;
-    width: 100%;
-    justify-content: flex-start;
-    align-items: center;
-
-
-    .iconWrapper {
-      flex: 0 0 auto;
-      margin-right: 12px;
-      display: flex;
-      width: 32px;
-      height: 32px;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-      border-radius: 6px;
-      border: 1px solid #2B2F36;
-      cursor: pointer;
-    }
-
-
-  }
-
-  .view {
-    margin-top: 12px;
-    display: flex;
-    height: 120px;
-    padding: 24px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    align-self: stretch;
-    border-radius: 6px;
-    border: 1px solid #272A2F;
-    background: #1E2024;
-    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-  }
-}
diff --git a/demo/src/platform/mobile/rtc/micSection/index.tsx b/demo/src/platform/mobile/rtc/micSection/index.tsx
deleted file mode 100644
index 3c739159..00000000
--- a/demo/src/platform/mobile/rtc/micSection/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client"
-
-import { useEffect, useMemo, useState } from "react"
-import { useMultibandTrackVolume, useSmallScreen } from "@/common"
-import AudioVisualizer from "../audioVisualizer"
-import { MicIcon } from "@/components/icons"
-import styles from "./index.module.scss"
-import { IMicrophoneAudioTrack } from 'agora-rtc-sdk-ng';
-import MicSelect from "./micSelect";
-
-interface MicSectionProps {
-  audioTrack?: IMicrophoneAudioTrack
-}
-
-const MicSection = (props: MicSectionProps) => {
-  const { audioTrack } = props
-  const [audioMute, setAudioMute] = useState(false)
-  const [mediaStreamTrack, setMediaStreamTrack] = useState<MediaStreamTrack>()
-
-
-
-  useEffect(() => {
-    audioTrack?.on("track-updated", onAudioTrackupdated)
-    if (audioTrack) {
-      setMediaStreamTrack(audioTrack.getMediaStreamTrack())
-    }
-
-    return () => {
-      audioTrack?.off("track-updated", onAudioTrackupdated)
-    }
-  }, [audioTrack])
-
-  useEffect(() => {
-    audioTrack?.setMuted(audioMute)
-  }, [audioTrack, audioMute])
-
-  const subscribedVolumes = useMultibandTrackVolume(mediaStreamTrack, 20);
-
-  const onAudioTrackupdated = (track: MediaStreamTrack) => {
-    console.log("[test] audio track updated", track)
-    setMediaStreamTrack(track)
-  }
-
-  const onClickMute = () => {
-    setAudioMute(!audioMute)
-  }
-
-  return <div className={styles.microphone}>
-    <div className={styles.title}>MICROPHONE</div>
-    <div className={styles.select}>
-      <span className={styles.iconWrapper} onClick={onClickMute}>
-        <MicIcon active={!audioMute} width={20} height={20} viewBox="0 0 24 24"></MicIcon>
-      </span>
-      <MicSelect audioTrack={audioTrack}></MicSelect>
-    </div>
-    <div className={styles.view}>
-      <AudioVisualizer
-        type="user"
-        barWidth={4}
-        minBarHeight={2}
-        maxBarHeight={50}
-        frequencies={subscribedVolumes}
-        borderRadius={2}
-        gap={4}></AudioVisualizer>
-    </div>
-  </div>
-}
-
-
-export default MicSection;
diff --git a/demo/src/platform/mobile/rtc/micSection/micSelect/index.module.scss b/demo/src/platform/mobile/rtc/micSection/micSelect/index.module.scss
deleted file mode 100644
index 8ca5088b..00000000
--- a/demo/src/platform/mobile/rtc/micSection/micSelect/index.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.select {
-  flex: 0 0 200px;
-  width: 200px;
-}
diff --git a/demo/src/platform/mobile/rtc/micSection/micSelect/index.tsx b/demo/src/platform/mobile/rtc/micSection/micSelect/index.tsx
deleted file mode 100644
index efc842b5..00000000
--- a/demo/src/platform/mobile/rtc/micSection/micSelect/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client"
-
-import AgoraRTC from "agora-rtc-sdk-ng"
-import { useState, useEffect } from "react"
-import { Select } from "antd"
-import { IMicrophoneAudioTrack } from "agora-rtc-sdk-ng"
-
-import styles from "./index.module.scss"
-
-interface MicSelectProps {
-  audioTrack?: IMicrophoneAudioTrack
-}
-
-interface SelectItem {
-  label: string
-  value: string
-  deviceId: string
-}
-
-const DEFAULT_ITEM: SelectItem = {
-  label: "Default",
-  value: "default",
-  deviceId: ""
-}
-
-const MicSelect = (props: MicSelectProps) => {
-  const { audioTrack } = props
-  const [items, setItems] = useState<SelectItem[]>([DEFAULT_ITEM]);
-  const [value, setValue] = useState("default");
-
-  useEffect(() => {
-    if (audioTrack) {
-      const label = audioTrack?.getTrackLabel();
-      setValue(label);
-      AgoraRTC.getMicrophones().then(arr => {
-        setItems(arr.map(item => ({
-          label: item.label,
-          value: item.label,
-          deviceId: item.deviceId
-        })));
-      });
-    }
-  }, [audioTrack]);
-
-  const onChange = async (value: string) => {
-    const target = items.find(item => item.value === value);
-    if (target) {
-      setValue(target.value);
-      if (audioTrack) {
-        await audioTrack.setDevice(target.deviceId);
-      }
-    }
-  }
-
-  return <Select className={styles.select} value={value} options={items} onChange={onChange}></Select>
-}
-
-export default MicSelect 
diff --git a/demo/src/platform/mobile/rtc/streamPlayer/index.module.scss b/demo/src/platform/mobile/rtc/streamPlayer/index.module.scss
deleted file mode 100644
index b1c57c10..00000000
--- a/demo/src/platform/mobile/rtc/streamPlayer/index.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.streamPlayer {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
diff --git a/demo/src/platform/mobile/rtc/streamPlayer/index.tsx b/demo/src/platform/mobile/rtc/streamPlayer/index.tsx
deleted file mode 100644
index ba78e377..00000000
--- a/demo/src/platform/mobile/rtc/streamPlayer/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./localStreamPlayer"
diff --git a/demo/src/platform/mobile/rtc/streamPlayer/localStreamPlayer.tsx b/demo/src/platform/mobile/rtc/streamPlayer/localStreamPlayer.tsx
deleted file mode 100644
index e3e7f06a..00000000
--- a/demo/src/platform/mobile/rtc/streamPlayer/localStreamPlayer.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-import {
-  ICameraVideoTrack,
-  IMicrophoneAudioTrack,
-  IRemoteAudioTrack,
-  IRemoteVideoTrack,
-  VideoPlayerConfig,
-} from "agora-rtc-sdk-ng"
-import { useRef, useState, useLayoutEffect, forwardRef, useEffect, useMemo } from "react"
-
-import styles from "./index.module.scss"
-
-interface StreamPlayerProps {
-  videoTrack?: ICameraVideoTrack
-  audioTrack?: IMicrophoneAudioTrack
-  style?: React.CSSProperties
-  fit?: "cover" | "contain" | "fill"
-  onClick?: () => void
-  mute?: boolean
-}
-
-export const LocalStreamPlayer = forwardRef((props: StreamPlayerProps, ref) => {
-  const { videoTrack, audioTrack, mute = false, style = {}, fit = "cover", onClick = () => { } } = props
-  const vidDiv = useRef(null)
-
-  useLayoutEffect(() => {
-    const config = { fit } as VideoPlayerConfig
-    if (mute) {
-      videoTrack?.stop()
-    } else {
-      if (!videoTrack?.isPlaying) {
-        videoTrack?.play(vidDiv.current!, config)
-      }
-    }
-
-    return () => {
-      videoTrack?.stop()
-    }
-  }, [videoTrack, fit, mute])
-
-  // local audio track need not to be played
-  // useLayoutEffect(() => {}, [audioTrack, localAudioMute])
-
-  return <div className={styles.streamPlayer} style={style} ref={vidDiv} onClick={onClick}></div>
-})
diff --git a/demo/src/platform/pc/chat/chatItem/index.module.scss b/demo/src/platform/pc/chat/chatItem/index.module.scss
deleted file mode 100644
index f28ef7ee..00000000
--- a/demo/src/platform/pc/chat/chatItem/index.module.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-.agentChatItem {
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-
-  .left {
-    flex: 0 0 auto;
-    display: flex;
-    width: 32px;
-    height: 32px;
-    padding: 10px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    border-radius: 200px;
-    background: var(--Grey-700, #475467);
-
-    .userName {
-      color: var(---white, #FFF);
-      text-align: center;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 150%;
-    }
-  }
-
-  .right {
-    margin-left: 12px;
-    flex: 1 1 auto;
-
-    .userName {
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 20px;
-      color: var(--theme-color, #667085) !important;
-    }
-
-
-    .agent {
-      color: var(--theme-color, #EAECF0) !important;
-    }
-
-  }
-}
-
-.userChatItem {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-end;
-
-  .userName {
-    text-align: right;
-    color: var(--Grey-600, #667085);
-    font-weight: 500;
-    line-height: 20px;
-  }
-
-
-
-}
-
-
-.chatItem {
-  .text {
-    max-width: 80%;
-    width: fit-content;
-    margin-top: 6px;
-    color: #FFF;
-    display: flex;
-    padding: 8px 14px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 21px;
-    white-space: pre-wrap;
-    border-radius: 0px 8px 8px 8px;
-    border: 1px solid #272A2F;
-    background: #1E2024;
-    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-  }
-}
-
-.chatItem+.chatItem {
-  margin-top: 14px;
-}
diff --git a/demo/src/platform/pc/chat/chatItem/index.tsx b/demo/src/platform/pc/chat/chatItem/index.tsx
deleted file mode 100644
index 6364aaea..00000000
--- a/demo/src/platform/pc/chat/chatItem/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { IChatItem } from "@/types"
-import styles from "./index.module.scss"
-import { usePrevious } from "@/common"
-import { use, useEffect, useMemo, useState } from "react"
-
-interface ChatItemProps {
-  data: IChatItem
-}
-
-
-const AgentChatItem = (props: ChatItemProps) => {
-  const { data } = props
-  const { text } = data
-
-  return <div className={`${styles.agentChatItem} ${styles.chatItem}`}>
-    <span className={styles.left}>
-      <span className={styles.userName}>Ag</span>
-    </span>
-    <span className={styles.right}>
-      <div className={`${styles.userName} ${styles.agent}`}>Agent</div>
-      <div className={`${styles.text} ${styles.agent}`}>
-        {text}
-      </div>
-    </span>
-  </div >
-}
-
-const UserChatItem = (props: ChatItemProps) => {
-  const { data } = props
-  const { text } = data
-
-  return <div className={`${styles.userChatItem} ${styles.chatItem} `}>
-    <div className={styles.userName}>You</div>
-    <div className={styles.text}>{text}</div>
-  </div>
-}
-
-
-const ChatItem = (props: ChatItemProps) => {
-  const { data } = props
-
-
-  return (
-    data.type === "agent" ? <AgentChatItem {...props} /> : <UserChatItem {...props} />
-  );
-
-
-}
-
-
-export default ChatItem
diff --git a/demo/src/platform/pc/chat/index.module.scss b/demo/src/platform/pc/chat/index.module.scss
deleted file mode 100644
index 39c4956d..00000000
--- a/demo/src/platform/pc/chat/index.module.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.chat {
-  flex: 1 1 auto;
-  min-width: 500px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-  border-radius: 8px;
-  border: 1px solid #272A2F;
-  background: #181A1D;
-  overflow: hidden;
-
-  .header {
-    display: flex;
-    height: 42px;
-    padding: 0px 16px;
-    align-items: center;
-    align-self: stretch;
-    border-bottom: 1px solid #272A2F;
-
-    .left {
-      flex: 1 1 auto;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-
-      .text {
-        margin-left: 4px;
-        color: var(--Grey-300, #EAECF0);
-        font-size: 14px;
-        font-weight: 600;
-        height: 40px;
-        line-height: 40px;
-        letter-spacing: 0.449px;
-      }
-
-      .languageSelect {
-        width: 100px;
-      }
-    }
-
-
-    .right {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      flex: 0 0 230px;
-      justify-content: right;
-    }
-
-  }
-
-  .content {
-    display: flex;
-    padding: 12px 24px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-    flex: 1 0 500px;
-    align-self: stretch;
-    overflow-y: auto;
-
-
-    &::-webkit-scrollbar {
-      width: 6px
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: #6B6B6B;
-      border-radius: 4px;
-    }
-  }
-
-
-}
diff --git a/demo/src/platform/pc/chat/index.tsx b/demo/src/platform/pc/chat/index.tsx
deleted file mode 100644
index 64dea171..00000000
--- a/demo/src/platform/pc/chat/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client"
-
-import { ReactElement, useEffect, useRef, useState } from "react"
-import ChatItem from "./chatItem"
-import {
-  genRandomChatList, useAppDispatch, useAutoScroll,
-  LANGUAGE_OPTIONS, useAppSelector,
-  GRAPH_OPTIONS,
-  isRagGraph,
-} from "@/common"
-import { setGraphName, setLanguage } from "@/store/reducers/global"
-import { Select, } from 'antd';
-import PdfSelect from "@/components/pdfSelect"
-
-import styles from "./index.module.scss"
-
-
-
-
-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)
-  const chatRef = useRef(null)
-
-
-  useAutoScroll(chatRef)
-
-
-  const onLanguageChange = (val: any) => {
-    dispatch(setLanguage(val))
-  }
-
-  const onGraphNameChange = (val: any) => {
-    dispatch(setGraphName(val))
-  }
-
-
-  return <section className={styles.chat}>
-    <div className={styles.header}>
-      <span className={styles.left}>
-      </span>
-      <span className={styles.right}>
-        <Select className={styles.graphName}
-          disabled={agentConnected} options={GRAPH_OPTIONS}
-          value={graphName} onChange={onGraphNameChange}></Select>
-        <Select className={styles.languageSelect}
-          disabled={agentConnected} options={LANGUAGE_OPTIONS}
-          value={language} onChange={onLanguageChange}></Select>
-        {isRagGraph(graphName) ? <PdfSelect></PdfSelect> : null}
-      </span>
-    </div>
-    <div className={`${styles.content}`} ref={chatRef}>
-      {chatItems.map((item, index) => {
-        return <ChatItem data={item} key={index} ></ChatItem>
-      })}
-    </div>
-  </section >
-}
-
-
-export default Chat
diff --git a/demo/src/platform/pc/description/index.module.scss b/demo/src/platform/pc/description/index.module.scss
deleted file mode 100644
index acefae3a..00000000
--- a/demo/src/platform/pc/description/index.module.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-.description {
-  position: relative;
-  display: flex;
-  padding: 12px 16px;
-  align-items: center;
-  gap: 12px;
-  align-self: stretch;
-  border-radius: 8px;
-  border: 1px solid #272A2F;
-  background: #181A1D;
-
-  .title {
-    color: var(--Grey-300, #EAECF0);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    /* 21px */
-    letter-spacing: 0.449px;
-  }
-
-  .text {
-    margin-left: 12px;
-    flex: 1 1 auto;
-    color: var(--Grey-600, #667085);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-  }
-
-
-  .btnConnect {
-    width: 150px;
-    display: flex;
-    padding: 8px 14px;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    align-self: stretch;
-    border-radius: 6px;
-    background: var(--theme-color, #0888FF);
-    border: 1px solid var(--theme-color, #0888FF);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-    cursor: pointer;
-    user-select: none;
-    caret-color: transparent;
-    box-sizing: border-box;
-
-    &.btnSetting {
-      background: #181A1D;
-      border: 1px solid #272A2F;
-    }
-
-    .btnText {
-      width: 100px;
-      text-align: center;
-      color: var(---White, #FFF);
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 20px;
-    }
-
-    .btnText.disconnect {
-      color: var(--Error-400-T, #E95C7B);
-    }
-
-
-    .loading {
-      margin-left: 4px;
-    }
-  }
-
-
-  .btnConnect.disconnect {
-    background: #181A1D;
-    border: 1px solid var(--Error-400-T, #E95C7B);
-  }
-
-}
\ No newline at end of file
diff --git a/demo/src/platform/pc/description/index.tsx b/demo/src/platform/pc/description/index.tsx
deleted file mode 100644
index 6d9ec47b..00000000
--- a/demo/src/platform/pc/description/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { setAgentConnected } from "@/store/reducers/global"
-import {
-  DESCRIPTION, useAppDispatch, useAppSelector, apiPing, genUUID,
-  apiStartService, apiStopService
-} from "@/common"
-import { Select, Button, message, Upload } from "antd"
-import { useEffect, useState, MouseEventHandler } from "react"
-import { LoadingOutlined, SettingFilled } from "@ant-design/icons"
-import styles from "./index.module.scss"
-
-let intervalId: any
-
-const Description = () => {
-  const dispatch = useAppDispatch()
-  const agentConnected = useAppSelector(state => state.global.agentConnected)
-  const channel = useAppSelector(state => state.global.options.channel)
-  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 agentSettings = useAppSelector(state => state.global.agentSettings)
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    if (channel) {
-      checkAgentConnected()
-    }
-  }, [channel])
-
-
-  const checkAgentConnected = async () => {
-    const res: any = await apiPing(channel)
-    if (res?.code == 0) {
-      dispatch(setAgentConnected(true))
-    }
-  }
-
-  const onClickConnect = async () => {
-    if (loading) {
-      return
-    }
-    setLoading(true)
-    if (agentConnected) {
-      await apiStopService(channel)
-      dispatch(setAgentConnected(false))
-      message.success("Agent disconnected")
-      stopPing()
-    } else {
-      const res = await apiStartService({
-        channel,
-        userId,
-        graphName,
-        language,
-        voiceType,
-        greeting: agentSettings.greeting,
-        prompt: agentSettings.prompt
-      })
-      const { code, msg } = res || {}
-      if (code != 0) {
-        if (code == "10001") {
-          message.error("The number of users experiencing the program simultaneously has exceeded the limit. Please try again later.")
-        } else {
-          message.error(`code:${code},msg:${msg}`)
-        }
-        setLoading(false)
-        throw new Error(msg)
-      }
-      dispatch(setAgentConnected(true))
-      message.success("Agent connected")
-      startPing()
-    }
-    setLoading(false)
-  }
-
-  const startPing = () => {
-    if (intervalId) {
-      stopPing()
-    }
-    intervalId = setInterval(() => {
-      apiPing(channel)
-    }, 3000)
-  }
-
-  const stopPing = () => {
-    if (intervalId) {
-      clearInterval(intervalId)
-      intervalId = null
-    }
-  }
-
-  return <div className={styles.description}>
-    <span className={styles.title}>Description</span>
-    <span className={styles.text}>The World's First Multimodal AI Agent with the OpenAI Realtime API (Beta)</span>
-    <span className={`${styles.btnConnect} ${agentConnected ? styles.disconnect : ''}`} onClick={onClickConnect} onKeyUp={onClickConnect} onKeyDown={onClickConnect} onKeyPress={onClickConnect}>
-      <span className={`${styles.btnText} ${agentConnected ? styles.disconnect : ''}`}>
-        {!agentConnected ? "Connect" : "Disconnect"}
-        {loading ? <LoadingOutlined className={styles.loading} /> : null}
-      </span>
-    </span>
-  </div>
-}
-
-
-export default Description
diff --git a/demo/src/platform/pc/entry/index.module.scss b/demo/src/platform/pc/entry/index.module.scss
deleted file mode 100644
index 5f161d2c..00000000
--- a/demo/src/platform/pc/entry/index.module.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.entry {
-  position: relative;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-
-  .content {
-    position: relative;
-    padding: 16px;
-    box-sizing: border-box;
-    display: flex;
-    height: calc(100% - 64px);
-    flex-direction: column;
-
-    .body {
-      margin-top: 16px;
-      display: flex;
-      gap: 24px;
-      flex-grow: 1;
-      .chat {
-        display: flex;
-        flex-grow: 1;
-      }
-    }
-  }
-}
diff --git a/demo/src/platform/pc/entry/index.tsx b/demo/src/platform/pc/entry/index.tsx
deleted file mode 100644
index ad5a7875..00000000
--- a/demo/src/platform/pc/entry/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import Chat from "../chat"
-import Description from "../description"
-import Rtc from "../rtc"
-import Header from "../header"
-
-import styles from "./index.module.scss"
-import { FloatButton, Form } from "antd"
-import { SettingOutlined } from "@ant-design/icons"
-import FormModal from "@/components/settings"
-
-const PCEntry = () => {
-  return <div className={styles.entry}>
-    <Header></Header>
-    <div className={styles.content}>
-      <Description></Description>
-      <div className={styles.body}>
-        <div className={styles.rtc}>
-          <Rtc></Rtc>
-        </div>
-        <div className={styles.chat}>
-          <Chat></Chat>
-        </div>
-      </div>
-    </div>
-    <FormModal></FormModal>
-  </div>
-}
-
-
-export default PCEntry
diff --git a/demo/src/platform/pc/header/index.module.scss b/demo/src/platform/pc/header/index.module.scss
deleted file mode 100644
index 9e968a55..00000000
--- a/demo/src/platform/pc/header/index.module.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-.header {
-  display: flex;
-  width: 100%;
-  height: 48px;
-  padding: 24px;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #24262A;
-  background: #1E2024;
-  box-shadow: 0px 12px 16px -4px rgba(8, 15, 52, 0.06), 0px 4px 6px -2px rgba(8, 15, 52, 0.03);
-  box-sizing: border-box;
-  z-index: 999;
-  
-    .title {
-      color: white;
-      font-weight: bold;
-    }
-
-  .logoWrapper {
-    display: flex;
-    align-items: center;
-
-    .text {
-      margin-left: 8px;
-      color: var(---white, #FFF);
-      text-align: right;
-      font-family: Inter;
-      font-size: 16px;
-      font-weight: 500;
-    }
-  }
-
-  .content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 48px;
-    flex: 1 1 auto;
-    color: var(--Grey-300, #EAECF0);
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 48px;
-    letter-spacing: 0.449px;
-    text-align: center;
-
-    .text {
-      margin-left: 4px;
-    }
-  }
-
-  .links {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    span {
-      display: flex;
-    }
-  }
-  .githubWrapper {
-    cursor: pointer;
-  }
-}
diff --git a/demo/src/platform/pc/header/index.tsx b/demo/src/platform/pc/header/index.tsx
deleted file mode 100644
index 2490da85..00000000
--- a/demo/src/platform/pc/header/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client"
-
-import { useAppSelector, GITHUB_URL, useSmallScreen } from "@/common"
-import Network from "./network"
-import InfoPopover from "./infoPopover"
-import StylePopover from "./stylePopover"
-import { GithubIcon, LogoIcon, InfoIcon, ColorPickerIcon } from "@/components/icons"
-
-import styles from "./index.module.scss"
-
-const Header = () => {
-  const themeColor = useAppSelector(state => state.global.themeColor)
-  const options = useAppSelector(state => state.global.options)
-  const { channel } = options
-
-
-  const onClickGithub = () => {
-    if (typeof window !== "undefined") {
-      window.open(GITHUB_URL, "_blank")
-    }
-  }
-
-
-
-  return <div className={styles.header}>
-    <span className={styles.logoWrapper}>
-      {/* <LogoIcon></LogoIcon> */}
-      <span className={styles.title} >TEN Agent</span>
-    </span>
-    <InfoPopover>
-      <span className={styles.content}>
-        <InfoIcon></InfoIcon>
-        <span className={styles.text}>Channel Name: {channel}</span>
-      </span>
-    </InfoPopover>
-    <div className={styles.links}>
-      <span onClick={onClickGithub} className={styles.githubWrapper}>
-        <GithubIcon></GithubIcon>
-      </span>
-      <StylePopover>
-        <ColorPickerIcon color={themeColor} ></ColorPickerIcon>
-      </StylePopover>
-      <Network></Network>
-    </div>
-  </div>
-}
-
-
-export default Header
diff --git a/demo/src/platform/pc/header/infoPopover/index.module.scss b/demo/src/platform/pc/header/infoPopover/index.module.scss
deleted file mode 100644
index cd3f72f8..00000000
--- a/demo/src/platform/pc/header/infoPopover/index.module.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.info {
-  display: flex;
-  padding: 12px 16px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  align-self: stretch;
-
-  .title {
-    color: var(--Grey-300, #EAECF0);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: 0.449px;
-  }
-
-  .item {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .title {
-      color: var(--Grey-600, #667085);
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 150%;
-    }
-
-    .content {
-      color: var(--theme-color, #FFF);
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 150%;
-    }
-  }
-
-  .slider {
-    height: 1px;
-    width: 100%;
-    background-color: #0D0F12;
-  }
-}
diff --git a/demo/src/platform/pc/header/infoPopover/index.tsx b/demo/src/platform/pc/header/infoPopover/index.tsx
deleted file mode 100644
index cd451418..00000000
--- a/demo/src/platform/pc/header/infoPopover/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useMemo } from "react"
-import { useAppSelector } from "@/common"
-import { Popover } from 'antd';
-
-
-import styles from "./index.module.scss"
-
-interface InfoPopoverProps {
-  children?: React.ReactNode
-}
-
-const InfoPopover = (props: InfoPopoverProps) => {
-  const { children } = props
-  const options = useAppSelector(state => state.global.options)
-  const { channel, userId } = options
-
-  const roomConnected = useAppSelector(state => state.global.roomConnected)
-  const agentConnected = useAppSelector(state => state.global.agentConnected)
-
-  const roomConnectedText = useMemo(() => {
-    return roomConnected ? "TRUE" : "FALSE"
-  }, [roomConnected])
-
-  const agentConnectedText = useMemo(() => {
-    return agentConnected ? "TRUE" : "FALSE"
-  }, [agentConnected])
-
-
-
-  const content = <section className={styles.info}>
-    <div className={styles.title}>INFO</div>
-    <div className={styles.item}>
-      <span className={styles.title}>Room</span>
-      <span className={styles.content}>{channel}</span>
-    </div>
-    <div className={styles.item}>
-      <span className={styles.title}>Participant</span>
-      <span className={styles.content}>{userId}</span>
-    </div>
-    <div className={styles.slider}></div>
-    <div className={styles.title}>STATUS</div>
-    <div className={styles.item}>
-      <div className={styles.title}>Room connected</div>
-      <div className={styles.content}>{roomConnectedText}</div>
-    </div>
-    <div className={styles.item}>
-      <div className={styles.title}>Agent connected</div>
-      <div className={styles.content}>{agentConnectedText}</div>
-    </div>
-  </section>
-
-
-  return <Popover content={content} arrow={false}>{children}</Popover>
-
-}
-
-export default InfoPopover
diff --git a/demo/src/platform/pc/header/network/index.module.scss b/demo/src/platform/pc/header/network/index.module.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/demo/src/platform/pc/header/network/index.tsx b/demo/src/platform/pc/header/network/index.tsx
deleted file mode 100644
index 92b4e33b..00000000
--- a/demo/src/platform/pc/header/network/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import React from "react";
-import { rtcManager } from "@/manager"
-import { NetworkQuality } from "agora-rtc-sdk-ng"
-import { useEffect, useState } from "react"
-import { NetworkIcon } from "@/components/icons"
-
-interface NetworkProps {
-  style?: React.CSSProperties
-}
-
-const NetWork = (props: NetworkProps) => {
-  const { style } = props
-
-  const [networkQuality, setNetworkQuality] = useState<NetworkQuality>()
-
-  useEffect(() => {
-    rtcManager.on("networkQuality", onNetworkQuality)
-
-    return () => {
-      rtcManager.off("networkQuality", onNetworkQuality)
-    }
-  }, [])
-
-  const onNetworkQuality = (quality: NetworkQuality) => {
-    setNetworkQuality(quality)
-  }
-
-  return (
-    <span style={style}>
-      <NetworkIcon level={networkQuality?.uplinkNetworkQuality}></NetworkIcon>
-    </span>
-  )
-}
-
-export default NetWork
diff --git a/demo/src/platform/pc/header/stylePopover/colorPicker/index.module.scss b/demo/src/platform/pc/header/stylePopover/colorPicker/index.module.scss
deleted file mode 100644
index 405e7781..00000000
--- a/demo/src/platform/pc/header/stylePopover/colorPicker/index.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.colorPicker {
-  height: 24px;
-  display: flex;
-  align-items: center;
-
-  :global(.react-colorful) {
-    width: 220px;
-    height: 8px;
-  }
-
-  :global(.react-colorful__saturation) {
-    display: none;
-  }
-
-  :global(.react-colorful__hue) {
-    border-radius: 8px !important;
-    height: 8px;
-  }
-
-  :global(.react-colorful__pointer) {
-    width: 24px;
-    height: 24px;
-  }
-}
diff --git a/demo/src/platform/pc/header/stylePopover/colorPicker/index.tsx b/demo/src/platform/pc/header/stylePopover/colorPicker/index.tsx
deleted file mode 100644
index 28163d77..00000000
--- a/demo/src/platform/pc/header/stylePopover/colorPicker/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client"
-
-import { HexColorPicker } from "react-colorful";
-import { useAppSelector, useAppDispatch } from "@/common"
-import { setThemeColor } from "@/store/reducers/global"
-import styles from "./index.module.scss";
-
-const ColorPicker = () => {
-  const dispatch = useAppDispatch()
-  const themeColor = useAppSelector(state => state.global.themeColor)
-
-  const onColorChange = (color: string) => {
-    console.log(color);
-    dispatch(setThemeColor(color))
-  };
-
-  return <div className={styles.colorPicker}>
-    <HexColorPicker color={themeColor} onChange={onColorChange} />
-  </div>
-};
-
-export default ColorPicker;
diff --git a/demo/src/platform/pc/header/stylePopover/index.module.scss b/demo/src/platform/pc/header/stylePopover/index.module.scss
deleted file mode 100644
index 98c7f182..00000000
--- a/demo/src/platform/pc/header/stylePopover/index.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.info {
-  display: flex;
-  padding: 12px 16px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-  align-self: stretch;
-
-
-  .title {
-    color: var(--Grey-300, #EAECF0);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: 0.449px;
-  }
-
-  .color {
-    font-size: 0;
-    white-space: nowrap;
-
-    .item {
-      position: relative;
-      display: inline-block;
-      width: 28px;
-      height: 28px;
-      border-radius: 4px;
-      border: 2px solid transparent;
-      font-size: 0;
-      cursor: pointer;
-
-      .inner {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 18px;
-        height: 18px;
-        border-radius: 2px;
-        box-sizing: border-box;
-      }
-    }
-
-    .item+.item {
-      margin-left: 12px;
-    }
-
-  }
-
-
-}
diff --git a/demo/src/platform/pc/header/stylePopover/index.tsx b/demo/src/platform/pc/header/stylePopover/index.tsx
deleted file mode 100644
index f8508323..00000000
--- a/demo/src/platform/pc/header/stylePopover/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useMemo } from "react"
-import { COLOR_LIST, useAppSelector, useAppDispatch } from "@/common"
-import { setThemeColor } from "@/store/reducers/global"
-import ColorPicker from "./colorPicker"
-import { Popover } from 'antd';
-
-
-import styles from "./index.module.scss"
-
-interface StylePopoverProps {
-  children?: React.ReactNode
-}
-
-const StylePopover = (props: StylePopoverProps) => {
-  const { children } = props
-  const dispatch = useAppDispatch()
-  const themeColor = useAppSelector(state => state.global.themeColor)
-
-
-  const onClickColor = (index: number) => {
-    const target = COLOR_LIST[index]
-    if (target.active !== themeColor) {
-      dispatch(setThemeColor(target.active))
-    }
-  }
-
-  const content = <section className={styles.info}>
-    <div className={styles.title}>STYLE</div>
-    <div className={styles.color}>
-      {
-        COLOR_LIST.map((item, index) => {
-          return <span
-            style={{
-              borderColor: item.active == themeColor ? item.active : "transparent",
-            }}
-            onClick={() => onClickColor(index)}
-            className={styles.item}
-            key={index}>
-            <span className={styles.inner} style={{
-              backgroundColor: item.active == themeColor ? item.active : item.default,
-            }}></span>
-          </span>
-        })
-      }
-    </div>
-    <ColorPicker></ColorPicker>
-  </section>
-
-
-  return <Popover content={content} arrow={false}>{children}</Popover>
-
-}
-
-export default StylePopover
diff --git a/demo/src/platform/pc/rtc/agent/index.module.scss b/demo/src/platform/pc/rtc/agent/index.module.scss
deleted file mode 100644
index fa3ae2ec..00000000
--- a/demo/src/platform/pc/rtc/agent/index.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.agent {
-  position: relative;
-  display: flex;
-  height: 292px;
-  padding: 20px 16px;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  align-self: stretch;
-  background: linear-gradient(154deg, rgba(27, 66, 166, 0.16) 0%, rgba(27, 45, 140, 0.00) 18%), linear-gradient(153deg, rgba(23, 24, 28, 0.00) 53.75%, #11174E 100%), #0F0F11;
-  box-shadow: 0px 3.999px 48.988px 0px rgba(0, 7, 72, 0.12);
-  backdrop-filter: blur(7);
-  box-sizing: border-box;
-
-  .text {
-    margin-top: 50px;
-    color: var(--theme-color, #EAECF0);
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: 0.449px;
-  }
-
-  .view {
-    margin-top: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 56px;
-  }
-}
diff --git a/demo/src/platform/pc/rtc/agent/index.tsx b/demo/src/platform/pc/rtc/agent/index.tsx
deleted file mode 100644
index a7fd7944..00000000
--- a/demo/src/platform/pc/rtc/agent/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client"
-
-import { useAppSelector, useMultibandTrackVolume } from "@/common"
-import AudioVisualizer from "../audioVisualizer"
-import { IMicrophoneAudioTrack } from 'agora-rtc-sdk-ng';
-import styles from "./index.module.scss"
-
-interface AgentProps {
-  audioTrack?: IMicrophoneAudioTrack
-}
-
-const Agent = (props: AgentProps) => {
-  const { audioTrack } = props
-
-  const subscribedVolumes = useMultibandTrackVolume(audioTrack, 12);
-
-  return <div className={styles.agent}>
-    <div className={styles.text}>Agent</div>
-    <div className={styles.view}>
-      <AudioVisualizer
-        type="agent"
-        frequencies={subscribedVolumes}
-        barWidth={6}
-        minBarHeight={6}
-        maxBarHeight={56}
-        borderRadius={2}
-        gap={6}></AudioVisualizer>
-    </div>
-  </div>
-
-}
-
-
-export default Agent;
diff --git a/demo/src/platform/pc/rtc/audioVisualizer/index.module.scss b/demo/src/platform/pc/rtc/audioVisualizer/index.module.scss
deleted file mode 100644
index 1beae944..00000000
--- a/demo/src/platform/pc/rtc/audioVisualizer/index.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.audioVisualizer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-
-  .item {}
-
-  .agent {
-    background-color: var(--theme-color, #EAECF0);
-    box-shadow: 0 0 10px var(--theme-color, #EAECF0);
-  }
-
-  .user {
-    background-color: var(--Grey-300, #EAECF0);
-  }
-}
diff --git a/demo/src/platform/pc/rtc/audioVisualizer/index.tsx b/demo/src/platform/pc/rtc/audioVisualizer/index.tsx
deleted file mode 100644
index bc21f554..00000000
--- a/demo/src/platform/pc/rtc/audioVisualizer/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import styles from "./index.module.scss"
-
-interface AudioVisualizerProps {
-  type: "agent" | "user";
-  frequencies: Float32Array[];
-  gap: number;
-  barWidth: number;
-  minBarHeight: number;
-  maxBarHeight: number
-  borderRadius: number;
-}
-
-
-const AudioVisualizer = (props: AudioVisualizerProps) => {
-  const { frequencies, gap, barWidth, minBarHeight, maxBarHeight, borderRadius, type } = props;
-
-  const summedFrequencies = frequencies.map((bandFrequencies) => {
-    const sum = bandFrequencies.reduce((a, b) => a + b, 0)
-    if (sum <= 0) {
-      return 0
-    }
-    return Math.sqrt(sum / bandFrequencies.length);
-  });
-
-  return <div className={styles.audioVisualizer} style={{
-    gap: `${gap}px`
-  }}>{
-      summedFrequencies.map((frequency, index) => {
-
-        const style = {
-          height: minBarHeight + frequency * (maxBarHeight - minBarHeight) + "px",
-          borderRadius: borderRadius + "px",
-          width: barWidth + "px",
-          transition:
-            "background-color 0.35s ease-out, transform 0.25s ease-out",
-          // transform: transform,
-        }
-
-        return <span key={index} className={`${styles.item} ${type == 'agent' ? styles.agent : styles.user}`} style={style}></span>
-      })
-    }</div>
-}
-
-
-export default AudioVisualizer;
diff --git a/demo/src/platform/pc/rtc/camSection/camSelect/index.module.scss b/demo/src/platform/pc/rtc/camSection/camSelect/index.module.scss
deleted file mode 100644
index 8ca5088b..00000000
--- a/demo/src/platform/pc/rtc/camSection/camSelect/index.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.select {
-  flex: 0 0 200px;
-  width: 200px;
-}
diff --git a/demo/src/platform/pc/rtc/camSection/camSelect/index.tsx b/demo/src/platform/pc/rtc/camSection/camSelect/index.tsx
deleted file mode 100644
index 33a5e003..00000000
--- a/demo/src/platform/pc/rtc/camSection/camSelect/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client"
-
-import AgoraRTC, { ICameraVideoTrack } from "agora-rtc-sdk-ng"
-import { useState, useEffect } from "react"
-import { Select } from "antd"
-
-import styles from "./index.module.scss"
-
-interface CamSelectProps {
-  videoTrack?: ICameraVideoTrack
-}
-
-interface SelectItem {
-  label: string
-  value: string
-  deviceId: string
-}
-
-const DEFAULT_ITEM: SelectItem = {
-  label: "Default",
-  value: "default",
-  deviceId: ""
-}
-
-const CamSelect = (props: CamSelectProps) => {
-  const { videoTrack } = props
-  const [items, setItems] = useState<SelectItem[]>([DEFAULT_ITEM]);
-  const [value, setValue] = useState("default");
-
-  useEffect(() => {
-    if (videoTrack) {
-      const label = videoTrack?.getTrackLabel();
-      setValue(label);
-      AgoraRTC.getCameras().then(arr => {
-        setItems(arr.map(item => ({
-          label: item.label,
-          value: item.label,
-          deviceId: item.deviceId
-        })));
-      });
-    }
-  }, [videoTrack]);
-
-  const onChange = async (value: string) => {
-    const target = items.find(item => item.value === value);
-    if (target) {
-      setValue(target.value);
-      if (videoTrack) {
-        await videoTrack.setDevice(target.deviceId);
-      }
-    }
-  }
-
-  return <Select className={styles.select} value={value} options={items} onChange={onChange}></Select>
-}
-
-export default CamSelect 
diff --git a/demo/src/platform/pc/rtc/camSection/index.module.scss b/demo/src/platform/pc/rtc/camSection/index.module.scss
deleted file mode 100644
index 28b88e2e..00000000
--- a/demo/src/platform/pc/rtc/camSection/index.module.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.camera {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-
-  .select {
-    height: 32px;
-    display: flex;
-    width: 100%;
-    justify-content: flex-start;
-    align-items: center;
-
-    .text {
-      flex: 1 1 auto;
-      height: 32px;
-      line-height: 32px;
-      color: var(--Grey-300, #EAECF0);
-      font-weight: 500;
-      letter-spacing: 0.449px;
-    }
-
-    .iconWrapper {
-      flex: 0 0 auto;
-      margin-right: 12px;
-      display: flex;
-      width: 32px;
-      height: 32px;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-      border-radius: 6px;
-      border: 1px solid #2B2F36;
-      cursor: pointer;
-    }
-
-    .select {
-      flex: 0 0 auto;
-      width: 200px;
-    }
-  }
-
-  .view {
-    position: relative;
-    margin-top: 12px;
-    min-height: 210px;
-    height: 210px;
-    border-radius: 6px;
-    border: 1px solid #272A2F;
-    background: #1E2024;
-    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-  }
-}
diff --git a/demo/src/platform/pc/rtc/camSection/index.tsx b/demo/src/platform/pc/rtc/camSection/index.tsx
deleted file mode 100644
index 99e5392c..00000000
--- a/demo/src/platform/pc/rtc/camSection/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client"
-
-import CamSelect from "./camSelect"
-import { CamIcon } from "@/components/icons"
-import styles from "./index.module.scss"
-import { ICameraVideoTrack } from 'agora-rtc-sdk-ng';
-import { LocalStreamPlayer } from "../streamPlayer"
-import { useState, useEffect, useMemo } from 'react';
-import { useSmallScreen } from "@/common"
-
-interface CamSectionProps {
-  videoTrack?: ICameraVideoTrack
-}
-
-const CamSection = (props: CamSectionProps) => {
-  const { videoTrack } = props
-  const [videoMute, setVideoMute] = useState(false)
-  const { xs } = useSmallScreen()
-
-  const CamText = useMemo(() => {
-    return xs ? "CAM" : "CAMERA"
-  }, [xs])
-
-  useEffect(() => {
-    videoTrack?.setMuted(videoMute)
-  }, [videoTrack, videoMute])
-
-  const onClickMute = () => {
-    setVideoMute(!videoMute)
-  }
-
-  return <div className={styles.camera}>
-    <div className={styles.select}>
-      <span className={styles.text}>{CamText}</span>
-      <span className={styles.iconWrapper} onClick={onClickMute}>
-        <CamIcon active={!videoMute} width={20} height={20} viewBox="0 0 24 24"></CamIcon>
-      </span>
-      <CamSelect videoTrack={videoTrack}></CamSelect>
-    </div>
-    <div className={styles.view}>
-      <LocalStreamPlayer videoTrack={videoTrack}></LocalStreamPlayer>
-    </div>
-  </div>
-}
-
-
-export default CamSection;
diff --git a/demo/src/platform/pc/rtc/index.module.scss b/demo/src/platform/pc/rtc/index.module.scss
deleted file mode 100644
index b62025c5..00000000
--- a/demo/src/platform/pc/rtc/index.module.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.rtc {
-  flex: 0 0 420px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex-shrink: 0;
-  align-self: stretch;
-  border-radius: 8px;
-  border: 1px solid #272A2F;
-  background: #181A1D;
-  box-sizing: border-box;
-
-  .header {
-    display: flex;
-    height: 42px;
-    padding: 0px 16px;
-    align-items: center;
-    align-self: stretch;
-    border-bottom: 1px solid #272A2F;
-
-    .text {
-      flex: 1 1 auto;
-      font-weight: 600;
-      line-height: 150%;
-      letter-spacing: 0.449px;
-      color: var(--Grey-300, #EAECF0);
-    }
-
-    .voiceSelect {
-      flex: 0 0 120px;
-    }
-  }
-
-  .you {
-    display: flex;
-    padding: 24px 16px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 24px;
-    align-self: stretch;
-    border-top: 1px solid #272A2F;
-
-    .title {
-      color: var(--Grey-300, #EAECF0);
-      font-size: 24px;
-      font-weight: 600;
-      line-height: 150%;
-      letter-spacing: 0.449px;
-      text-align: center;
-    }
-
-
-  }
-}
diff --git a/demo/src/platform/pc/rtc/index.tsx b/demo/src/platform/pc/rtc/index.tsx
deleted file mode 100644
index a0429918..00000000
--- a/demo/src/platform/pc/rtc/index.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client"
-
-import { ICameraVideoTrack, IMicrophoneAudioTrack } from "agora-rtc-sdk-ng"
-import { useAppSelector, useAppDispatch, VOICE_OPTIONS } from "@/common"
-import { ITextItem, EMessageType } from "@/types"
-import { rtcManager, IUserTracks, IRtcUser } from "@/manager"
-import { setRoomConnected, addChatItem, setVoiceType } from "@/store/reducers/global"
-import MicSection from "./micSection"
-import CamSection from "./camSection"
-import Agent from "./agent"
-import styles from "./index.module.scss"
-import { useRef, useEffect, useState, Fragment } from "react"
-import { VoiceIcon } from "@/components/icons"
-import CustomSelect from "@/components/customSelect"
-
-let hasInit = false
-
-const Rtc = () => {
-  const dispatch = useAppDispatch()
-  const options = useAppSelector(state => state.global.options)
-  const voiceType = useAppSelector(state => state.global.voiceType)
-  const agentConnected = useAppSelector(state => state.global.agentConnected)
-  const { userId, channel } = options
-  const [videoTrack, setVideoTrack] = useState<ICameraVideoTrack>()
-  const [audioTrack, setAudioTrack] = useState<IMicrophoneAudioTrack>()
-  const [remoteuser, setRemoteUser] = useState<IRtcUser>()
-
-  useEffect(() => {
-    if (!options.channel) {
-      return
-    }
-    if (hasInit) {
-      return
-    }
-
-    init()
-
-    return () => {
-      if (hasInit) {
-        destory()
-      }
-    }
-  }, [options.channel])
-
-
-  const init = async () => {
-    console.log("[test] init")
-    rtcManager.on("localTracksChanged", onLocalTracksChanged)
-    rtcManager.on("textChanged", onTextChanged)
-    rtcManager.on("remoteUserChanged", onRemoteUserChanged)
-    await rtcManager.createTracks()
-    await rtcManager.join({
-      channel,
-      userId
-    })
-    await rtcManager.publish()
-    dispatch(setRoomConnected(true))
-    hasInit = true
-  }
-
-  const destory = async () => {
-    console.log("[test] destory")
-    rtcManager.off("textChanged", onTextChanged)
-    rtcManager.off("localTracksChanged", onLocalTracksChanged)
-    rtcManager.off("remoteUserChanged", onRemoteUserChanged)
-    await rtcManager.destroy()
-    dispatch(setRoomConnected(false))
-    hasInit = false
-  }
-
-  const onRemoteUserChanged = (user: IRtcUser) => {
-    console.log("[test] onRemoteUserChanged", user)
-    setRemoteUser(user)
-  }
-
-  const onLocalTracksChanged = (tracks: IUserTracks) => {
-    console.log("[test] onLocalTracksChanged", tracks)
-    const { videoTrack, audioTrack } = tracks
-    if (videoTrack) {
-      setVideoTrack(videoTrack)
-    }
-    if (audioTrack) {
-      setAudioTrack(audioTrack)
-    }
-  }
-
-  const onTextChanged = (text: ITextItem) => {
-    if (text.dataType == "transcribe") {
-      const isAgent = Number(text.uid) != Number(userId)
-      dispatch(addChatItem({
-        userId: text.uid,
-        text: text.text,
-        type: isAgent ? EMessageType.AGENT : EMessageType.USER,
-        isFinal: text.isFinal,
-        time: text.time
-      }))
-    }
-  }
-
-  const onVoiceChange = (value: any) => {
-    dispatch(setVoiceType(value))
-  }
-
-
-  return <section className={styles.rtc}>
-    <div className={styles.header}>
-      <span className={styles.text}>Audio & Video</span>
-      <CustomSelect className={styles.voiceSelect}
-        disabled={agentConnected}
-        value={voiceType}
-        prefixIcon={<VoiceIcon></VoiceIcon>}
-        options={VOICE_OPTIONS} onChange={onVoiceChange}></CustomSelect>
-    </div>
-    {/* agent */}
-    <Agent audioTrack={remoteuser?.audioTrack}></Agent>
-    {/* you */}
-    <div className={styles.you}>
-      <div className={styles.title}>You</div>
-      {/* microphone */}
-      <MicSection audioTrack={audioTrack}></MicSection>
-      {/* camera */}
-      <CamSection videoTrack={videoTrack}></CamSection>
-    </div>
-  </section>
-}
-
-
-export default Rtc;
diff --git a/demo/src/platform/pc/rtc/micSection/index.module.scss b/demo/src/platform/pc/rtc/micSection/index.module.scss
deleted file mode 100644
index 81fffd3d..00000000
--- a/demo/src/platform/pc/rtc/micSection/index.module.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.microphone {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-
-  .select {
-    height: 32px;
-    display: flex;
-    width: 100%;
-    justify-content: flex-start;
-    align-items: center;
-
-    .text {
-      flex: 1 1 auto;
-      height: 32px;
-      line-height: 32px;
-      color: var(--Grey-300, #EAECF0);
-      font-weight: 500;
-      letter-spacing: 0.449px;
-    }
-
-    .iconWrapper {
-      flex: 0 0 auto;
-      margin-right: 12px;
-      display: flex;
-      width: 32px;
-      height: 32px;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-      border-radius: 6px;
-      border: 1px solid #2B2F36;
-      cursor: pointer;
-    }
-
- 
-  }
-
-  .view {
-    margin-top: 12px;
-    display: flex;
-    height: 120px;
-    padding: 24px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    align-self: stretch;
-    border-radius: 6px;
-    border: 1px solid #272A2F;
-    background: #1E2024;
-    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-  }
-}
diff --git a/demo/src/platform/pc/rtc/micSection/index.tsx b/demo/src/platform/pc/rtc/micSection/index.tsx
deleted file mode 100644
index 6d97f3e2..00000000
--- a/demo/src/platform/pc/rtc/micSection/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client"
-
-import { useEffect, useMemo, useState } from "react"
-import { useMultibandTrackVolume, useSmallScreen } from "@/common"
-import AudioVisualizer from "../audioVisualizer"
-import { MicIcon } from "@/components/icons"
-import styles from "./index.module.scss"
-import { IMicrophoneAudioTrack } from 'agora-rtc-sdk-ng';
-import MicSelect from "./micSelect";
-
-interface MicSectionProps {
-  audioTrack?: IMicrophoneAudioTrack
-}
-
-const MicSection = (props: MicSectionProps) => {
-  const { audioTrack } = props
-  const [audioMute, setAudioMute] = useState(false)
-  const [mediaStreamTrack, setMediaStreamTrack] = useState<MediaStreamTrack>()
-  const { xs } = useSmallScreen()
-
-  const MicText = useMemo(() => {
-    return xs ? "MIC" : "MICROPHONE"
-  }, [xs])
-
-  useEffect(() => {
-    audioTrack?.on("track-updated", onAudioTrackupdated)
-    if (audioTrack) {
-      setMediaStreamTrack(audioTrack.getMediaStreamTrack())
-    }
-
-    return () => {
-      audioTrack?.off("track-updated", onAudioTrackupdated)
-    }
-  }, [audioTrack])
-
-  useEffect(() => {
-    audioTrack?.setMuted(audioMute)
-  }, [audioTrack, audioMute])
-
-  const subscribedVolumes = useMultibandTrackVolume(mediaStreamTrack, 20);
-
-  const onAudioTrackupdated = (track: MediaStreamTrack) => {
-    console.log("[test] audio track updated", track)
-    setMediaStreamTrack(track)
-  }
-
-  const onClickMute = () => {
-    setAudioMute(!audioMute)
-  }
-
-  return <div className={styles.microphone}>
-    <div className={styles.select}>
-      <span className={styles.text}>{MicText}</span>
-      <span className={styles.iconWrapper} onClick={onClickMute}>
-        <MicIcon active={!audioMute} width={20} height={20} viewBox="0 0 24 24"></MicIcon>
-      </span>
-      <MicSelect audioTrack={audioTrack}></MicSelect>
-    </div>
-    <div className={styles.view}>
-      <AudioVisualizer
-        type="user"
-        barWidth={4}
-        minBarHeight={2}
-        maxBarHeight={50}
-        frequencies={subscribedVolumes}
-        borderRadius={2}
-        gap={4}></AudioVisualizer>
-    </div>
-  </div>
-}
-
-
-export default MicSection;
diff --git a/demo/src/platform/pc/rtc/micSection/micSelect/index.module.scss b/demo/src/platform/pc/rtc/micSection/micSelect/index.module.scss
deleted file mode 100644
index 8ca5088b..00000000
--- a/demo/src/platform/pc/rtc/micSection/micSelect/index.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.select {
-  flex: 0 0 200px;
-  width: 200px;
-}
diff --git a/demo/src/platform/pc/rtc/micSection/micSelect/index.tsx b/demo/src/platform/pc/rtc/micSection/micSelect/index.tsx
deleted file mode 100644
index efc842b5..00000000
--- a/demo/src/platform/pc/rtc/micSection/micSelect/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client"
-
-import AgoraRTC from "agora-rtc-sdk-ng"
-import { useState, useEffect } from "react"
-import { Select } from "antd"
-import { IMicrophoneAudioTrack } from "agora-rtc-sdk-ng"
-
-import styles from "./index.module.scss"
-
-interface MicSelectProps {
-  audioTrack?: IMicrophoneAudioTrack
-}
-
-interface SelectItem {
-  label: string
-  value: string
-  deviceId: string
-}
-
-const DEFAULT_ITEM: SelectItem = {
-  label: "Default",
-  value: "default",
-  deviceId: ""
-}
-
-const MicSelect = (props: MicSelectProps) => {
-  const { audioTrack } = props
-  const [items, setItems] = useState<SelectItem[]>([DEFAULT_ITEM]);
-  const [value, setValue] = useState("default");
-
-  useEffect(() => {
-    if (audioTrack) {
-      const label = audioTrack?.getTrackLabel();
-      setValue(label);
-      AgoraRTC.getMicrophones().then(arr => {
-        setItems(arr.map(item => ({
-          label: item.label,
-          value: item.label,
-          deviceId: item.deviceId
-        })));
-      });
-    }
-  }, [audioTrack]);
-
-  const onChange = async (value: string) => {
-    const target = items.find(item => item.value === value);
-    if (target) {
-      setValue(target.value);
-      if (audioTrack) {
-        await audioTrack.setDevice(target.deviceId);
-      }
-    }
-  }
-
-  return <Select className={styles.select} value={value} options={items} onChange={onChange}></Select>
-}
-
-export default MicSelect 
diff --git a/demo/src/platform/pc/rtc/streamPlayer/index.module.scss b/demo/src/platform/pc/rtc/streamPlayer/index.module.scss
deleted file mode 100644
index b1c57c10..00000000
--- a/demo/src/platform/pc/rtc/streamPlayer/index.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.streamPlayer {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
diff --git a/demo/src/platform/pc/rtc/streamPlayer/index.tsx b/demo/src/platform/pc/rtc/streamPlayer/index.tsx
deleted file mode 100644
index ba78e377..00000000
--- a/demo/src/platform/pc/rtc/streamPlayer/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./localStreamPlayer"
diff --git a/demo/src/platform/pc/rtc/streamPlayer/localStreamPlayer.tsx b/demo/src/platform/pc/rtc/streamPlayer/localStreamPlayer.tsx
deleted file mode 100644
index e3e7f06a..00000000
--- a/demo/src/platform/pc/rtc/streamPlayer/localStreamPlayer.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-import {
-  ICameraVideoTrack,
-  IMicrophoneAudioTrack,
-  IRemoteAudioTrack,
-  IRemoteVideoTrack,
-  VideoPlayerConfig,
-} from "agora-rtc-sdk-ng"
-import { useRef, useState, useLayoutEffect, forwardRef, useEffect, useMemo } from "react"
-
-import styles from "./index.module.scss"
-
-interface StreamPlayerProps {
-  videoTrack?: ICameraVideoTrack
-  audioTrack?: IMicrophoneAudioTrack
-  style?: React.CSSProperties
-  fit?: "cover" | "contain" | "fill"
-  onClick?: () => void
-  mute?: boolean
-}
-
-export const LocalStreamPlayer = forwardRef((props: StreamPlayerProps, ref) => {
-  const { videoTrack, audioTrack, mute = false, style = {}, fit = "cover", onClick = () => { } } = props
-  const vidDiv = useRef(null)
-
-  useLayoutEffect(() => {
-    const config = { fit } as VideoPlayerConfig
-    if (mute) {
-      videoTrack?.stop()
-    } else {
-      if (!videoTrack?.isPlaying) {
-        videoTrack?.play(vidDiv.current!, config)
-      }
-    }
-
-    return () => {
-      videoTrack?.stop()
-    }
-  }, [videoTrack, fit, mute])
-
-  // local audio track need not to be played
-  // useLayoutEffect(() => {}, [audioTrack, localAudioMute])
-
-  return <div className={styles.streamPlayer} style={style} ref={vidDiv} onClick={onClick}></div>
-})
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
index 15dcdd38..fefd4a25 100644
--- a/demo/tsconfig.json
+++ b/demo/tsconfig.json
@@ -25,7 +25,8 @@
       "@/*": [
         "./src/*"
       ]
-    }
+    },
+    "target": "ES2017"
   },
   "include": [
     "svgr.d.ts",
diff --git a/demo/yarn.lock b/demo/yarn.lock
index 5812d6bd..de381dba 100644
--- a/demo/yarn.lock
+++ b/demo/yarn.lock
@@ -88,94 +88,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ant-design/colors@npm:^7.0.0, @ant-design/colors@npm:^7.1.0":
-  version: 7.1.0
-  resolution: "@ant-design/colors@npm:7.1.0"
-  dependencies:
-    "@ctrl/tinycolor": "npm:^3.6.1"
-  checksum: 10c0/057fa10e1d0e787235149ef66cfac8c0060b50a5de29bc40d8f3226672e5f4d7d713a8c3f48d21a54d790a0269340897ebf3575af762caa3c006eacf5f883fa9
-  languageName: node
-  linkType: hard
-
-"@ant-design/cssinjs-utils@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "@ant-design/cssinjs-utils@npm:1.1.1"
-  dependencies:
-    "@ant-design/cssinjs": "npm:^1.21.0"
-    "@babel/runtime": "npm:^7.23.2"
-    rc-util: "npm:^5.38.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/f620fd08aadd5cc56be297a1acc50a65d300a468f7784a3deb459e134603584415a89294f203fa41b7b70e0e02158f8ad7d111bc2d6689cf6dcc95743392a6c0
-  languageName: node
-  linkType: hard
-
-"@ant-design/cssinjs@npm:^1.21.0, @ant-design/cssinjs@npm:^1.21.1":
-  version: 1.21.1
-  resolution: "@ant-design/cssinjs@npm:1.21.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.1"
-    "@emotion/hash": "npm:^0.8.0"
-    "@emotion/unitless": "npm:^0.7.5"
-    classnames: "npm:^2.3.1"
-    csstype: "npm:^3.1.3"
-    rc-util: "npm:^5.35.0"
-    stylis: "npm:^4.3.3"
-  peerDependencies:
-    react: ">=16.0.0"
-    react-dom: ">=16.0.0"
-  checksum: 10c0/9dca7fa851ae59d084cfe6787937536a601e16e3b4f82f6a63a5eb4098d83b36a5b88a1ff9128a8d8cd2bd3336734e14248e427f0875c37cbf94a70fb0d29e50
-  languageName: node
-  linkType: hard
-
-"@ant-design/fast-color@npm:^2.0.6":
-  version: 2.0.6
-  resolution: "@ant-design/fast-color@npm:2.0.6"
-  dependencies:
-    "@babel/runtime": "npm:^7.24.7"
-  checksum: 10c0/8d30649bd8d4e56d5c48393fcf0ad5c24d1099ec4cbf88f55bd9f4489e61efc30087d301da384c4ed21f2d5597087c8ba27dfbcc7693915310c26d307f5a8276
-  languageName: node
-  linkType: hard
-
-"@ant-design/icons-svg@npm:^4.4.0":
-  version: 4.4.2
-  resolution: "@ant-design/icons-svg@npm:4.4.2"
-  checksum: 10c0/d08f051824599850efcd691a67b0ee602ee886f23fe04e77890b083a0343cde72560317e3909fd029f999df00aef7b57142c863326fff7293251d9162828079b
-  languageName: node
-  linkType: hard
-
-"@ant-design/icons@npm:^5.3.7, @ant-design/icons@npm:^5.5.1":
-  version: 5.5.1
-  resolution: "@ant-design/icons@npm:5.5.1"
-  dependencies:
-    "@ant-design/colors": "npm:^7.0.0"
-    "@ant-design/icons-svg": "npm:^4.4.0"
-    "@babel/runtime": "npm:^7.24.8"
-    classnames: "npm:^2.2.6"
-    rc-util: "npm:^5.31.1"
-  peerDependencies:
-    react: ">=16.0.0"
-    react-dom: ">=16.0.0"
-  checksum: 10c0/440493303138ffa595c87043bbd34cd777967a5481a55ea72b38caa1ecf24862d041c84212d064af644069046ca0a7dfb4205724dcea2d95a2723d5d7589b7a0
-  languageName: node
-  linkType: hard
-
-"@ant-design/react-slick@npm:~1.1.2":
-  version: 1.1.2
-  resolution: "@ant-design/react-slick@npm:1.1.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.4"
-    classnames: "npm:^2.2.5"
-    json2mq: "npm:^0.2.0"
-    resize-observer-polyfill: "npm:^1.5.1"
-    throttle-debounce: "npm:^5.0.0"
-  peerDependencies:
-    react: ">=16.9.0"
-  checksum: 10c0/4f758e28cf8418e9f1a9b03da3814b2342fcee8a4039cae2fe6f77c01e9c8b7ea78a7e10961128a5ccba4992f520e88cb72c4f7fa1bd22314ce628b0d9fb3f5c
-  languageName: node
-  linkType: hard
-
 "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.25.7":
   version: 7.25.7
   resolution: "@babel/code-frame@npm:7.25.7"
@@ -1364,7 +1276,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.6, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.24.7, @babel/runtime@npm:^7.24.8, @babel/runtime@npm:^7.25.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.25.7
   resolution: "@babel/runtime@npm:7.25.7"
   dependencies:
@@ -1410,24 +1322,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ctrl/tinycolor@npm:^3.6.1":
-  version: 3.6.1
-  resolution: "@ctrl/tinycolor@npm:3.6.1"
-  checksum: 10c0/444d81612cd8c5c802a3d1253df83d5f77d3db87f351861655683a4743990e6b38976bf2e4129591c5a258607b63574b3c7bed702cf6a0eb7912222edf4570e9
-  languageName: node
-  linkType: hard
-
-"@emotion/hash@npm:^0.8.0":
-  version: 0.8.0
-  resolution: "@emotion/hash@npm:0.8.0"
-  checksum: 10c0/706303d35d416217cd7eb0d36dbda4627bb8bdf4a32ea387e8dd99be11b8e0a998e10af21216e8a5fade518ad955ff06aa8890f20e694ce3a038ae7fc1000556
-  languageName: node
-  linkType: hard
-
-"@emotion/unitless@npm:^0.7.5":
-  version: 0.7.5
-  resolution: "@emotion/unitless@npm:0.7.5"
-  checksum: 10c0/4d0d94f53cb97b4481bbfa394953e1899a0b877644642ba9dd7247c27eb8c48e14e22aeb11411d7d9874685ad85dd5fb5b50eb78c6d8840eb56a84b92dcef2f4
+"@emnapi/runtime@npm:^1.2.0":
+  version: 1.3.1
+  resolution: "@emnapi/runtime@npm:1.3.1"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/060ffede50f1b619c15083312b80a9e62a5b0c87aa8c1b54854c49766c9d69f8d1d3d87bd963a647071263a320db41b25eaa50b74d6a80dcc763c23dbeaafd6c
   languageName: node
   linkType: hard
 
@@ -1442,6 +1342,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@eslint-community/eslint-utils@npm:^4.4.0":
+  version: 4.4.1
+  resolution: "@eslint-community/eslint-utils@npm:4.4.1"
+  dependencies:
+    eslint-visitor-keys: "npm:^3.4.3"
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  checksum: 10c0/2aa0ac2fc50ff3f234408b10900ed4f1a0b19352f21346ad4cc3d83a1271481bdda11097baa45d484dd564c895e0762a27a8240be7a256b3ad47129e96528252
+  languageName: node
+  linkType: hard
+
+"@eslint-community/regexpp@npm:^4.10.0":
+  version: 4.12.1
+  resolution: "@eslint-community/regexpp@npm:4.12.1"
+  checksum: 10c0/a03d98c246bcb9109aec2c08e4d10c8d010256538dcb3f56610191607214523d4fb1b00aa81df830b6dffb74c5fa0be03642513a289c567949d3e550ca11cdf6
+  languageName: node
+  linkType: hard
+
 "@eslint-community/regexpp@npm:^4.6.1":
   version: 4.11.1
   resolution: "@eslint-community/regexpp@npm:4.11.1"
@@ -1511,6 +1429,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@hookform/resolvers@npm:^3.9.1":
+  version: 3.9.1
+  resolution: "@hookform/resolvers@npm:3.9.1"
+  peerDependencies:
+    react-hook-form: ^7.0.0
+  checksum: 10c0/8a4056db3860b12ee30921ba352996104d6ae75ac45996d4c8b6df429e07ee73f5b87c82a22a15403789213f6f52f5fead1c2637b26ef624068b68d213362cd1
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.13.0":
   version: 0.13.0
   resolution: "@humanwhocodes/config-array@npm:0.13.0"
@@ -1536,6 +1463,181 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@img/sharp-darwin-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-darwin-arm64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-darwin-arm64":
+      optional: true
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-darwin-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-darwin-x64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-darwin-x64":
+      optional: true
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-darwin-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.4"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-darwin-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.4"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.4"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-arm@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@img/sharp-libvips-linux-arm@npm:1.0.5"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-s390x@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.4"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-x64@npm:1.0.4"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linuxmusl-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.4"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-arm64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-arm64":
+      optional: true
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-arm@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-arm@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-arm": "npm:1.0.5"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-arm":
+      optional: true
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-s390x@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-s390x@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-s390x":
+      optional: true
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-x64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-x64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-x64":
+      optional: true
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linuxmusl-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linuxmusl-arm64":
+      optional: true
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linuxmusl-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linuxmusl-x64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linuxmusl-x64":
+      optional: true
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-wasm32@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-wasm32@npm:0.33.5"
+  dependencies:
+    "@emnapi/runtime": "npm:^1.2.0"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@img/sharp-win32-ia32@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-win32-ia32@npm:0.33.5"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@img/sharp-win32-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-win32-x64@npm:0.33.5"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -1628,81 +1730,74 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/env@npm:14.2.4"
-  checksum: 10c0/cc284e3dd0666df04d8321645d8409c10cb8e325884c226abbb2e7bea20f0a4232f988216aa506a9d0457b46f28b594a61179d1e978c0ca22497cd8cab8196c7
+"@next/env@npm:15.0.2":
+  version: 15.0.2
+  resolution: "@next/env@npm:15.0.2"
+  checksum: 10c0/9c8eb08d6221ba2e2ccbfc887239aed83e62c18be7ff796b9b7c894e0be1a976a717e17eaf1be1fd61a919f7083112b2ffec5c0d071a4ac9b3881b439813a2e7
   languageName: node
   linkType: hard
 
-"@next/eslint-plugin-next@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/eslint-plugin-next@npm:14.2.4"
+"@next/eslint-plugin-next@npm:15.0.2":
+  version: 15.0.2
+  resolution: "@next/eslint-plugin-next@npm:15.0.2"
   dependencies:
-    glob: "npm:10.3.10"
-  checksum: 10c0/077584c9ee12a82940c64a5cc48295e919c74fc352a9bedf41a6b44f2f4e71aea2aa95826957de042a8649e058888d3b27ea7f9ca72e67798e89d14b62f733c1
+    fast-glob: "npm:3.3.1"
+  checksum: 10c0/0e14d11c6ce0b23bd01558d9831673cb31cef32d872a6c1a92392bb975269b2218b55112edd02f1ee31fc61dea8ac7834f4c6621c847c419f3ce524486b83b11
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/swc-darwin-arm64@npm:14.2.4"
+"@next/swc-darwin-arm64@npm:15.0.2":
+  version: 15.0.2
+  resolution: "@next/swc-darwin-arm64@npm:15.0.2"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/swc-darwin-x64@npm:14.2.4"
+"@next/swc-darwin-x64@npm:15.0.2":
+  version: 15.0.2
+  resolution: "@next/swc-darwin-x64@npm:15.0.2"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/swc-linux-arm64-gnu@npm:14.2.4"
+"@next/swc-linux-arm64-gnu@npm:15.0.2":
+  version: 15.0.2
+  resolution: "@next/swc-linux-arm64-gnu@npm:15.0.2"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/swc-linux-arm64-musl@npm:14.2.4"
+"@next/swc-linux-arm64-musl@npm:15.0.2":
+  version: 15.0.2
+  resolution: "@next/swc-linux-arm64-musl@npm:15.0.2"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/swc-linux-x64-gnu@npm:14.2.4"
+"@next/swc-linux-x64-gnu@npm:15.0.2":
+  version: 15.0.2
+  resolution: "@next/swc-linux-x64-gnu@npm:15.0.2"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/swc-linux-x64-musl@npm:14.2.4"
+"@next/swc-linux-x64-musl@npm:15.0.2":
+  version: 15.0.2
+  resolution: "@next/swc-linux-x64-musl@npm:15.0.2"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/swc-win32-arm64-msvc@npm:14.2.4"
+"@next/swc-win32-arm64-msvc@npm:15.0.2":
+  version: 15.0.2
+  resolution: "@next/swc-win32-arm64-msvc@npm:15.0.2"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/swc-win32-ia32-msvc@npm:14.2.4"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
-"@next/swc-win32-x64-msvc@npm:14.2.4":
-  version: 14.2.4
-  resolution: "@next/swc-win32-x64-msvc@npm:14.2.4"
+"@next/swc-win32-x64-msvc@npm:15.0.2":
+  version: 15.0.2
+  resolution: "@next/swc-win32-x64-msvc@npm:15.0.2"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -2093,6 +2188,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dialog@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@radix-ui/react-dialog@npm:1.1.2"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.0"
+    "@radix-ui/react-compose-refs": "npm:1.1.0"
+    "@radix-ui/react-context": "npm:1.1.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.1.1"
+    "@radix-ui/react-focus-guards": "npm:1.1.1"
+    "@radix-ui/react-focus-scope": "npm:1.1.0"
+    "@radix-ui/react-id": "npm:1.1.0"
+    "@radix-ui/react-portal": "npm:1.1.2"
+    "@radix-ui/react-presence": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.0.0"
+    "@radix-ui/react-slot": "npm:1.1.0"
+    "@radix-ui/react-use-controllable-state": "npm:1.1.0"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.6.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/61997c23605ff604ef1673480eea0b63cbe2e102d24e64b71431afa408bfdda26f879193c09254304eb17a8d623085a2e6c96b5c944658c02bd935f8cf0f9546
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-direction@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-direction@npm:1.1.0"
@@ -2187,6 +2314,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-label@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@radix-ui/react-label@npm:2.1.0"
+  dependencies:
+    "@radix-ui/react-primitive": "npm:2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/282d3b1b72ff14b431b3bb427d66d14253bbd30fad2437d8f4e7d5c0b6a41f6f7ed157460e02fb91b67b1c8cebc65f2c6fe1d3a32f4459d41238fc0fd4719875
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-popover@npm:^1.1.2":
   version: 1.1.2
   resolution: "@radix-ui/react-popover@npm:1.1.2"
@@ -2569,167 +2715,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rc-component/async-validator@npm:^5.0.3":
-  version: 5.0.4
-  resolution: "@rc-component/async-validator@npm:5.0.4"
-  dependencies:
-    "@babel/runtime": "npm:^7.24.4"
-  checksum: 10c0/e874f87e67228d897801360ef1dbd9f3677e10c57c4b4c708c67f9929f44d8c36ca70ff3967e3fc6ef20b87982c966b27695df44899ca50588240e07130fe2ba
-  languageName: node
-  linkType: hard
-
-"@rc-component/color-picker@npm:~2.0.1":
-  version: 2.0.1
-  resolution: "@rc-component/color-picker@npm:2.0.1"
+"@reduxjs/toolkit@npm:^2.2.3":
+  version: 2.3.0
+  resolution: "@reduxjs/toolkit@npm:2.3.0"
   dependencies:
-    "@ant-design/fast-color": "npm:^2.0.6"
-    "@babel/runtime": "npm:^7.23.6"
-    classnames: "npm:^2.2.6"
-    rc-util: "npm:^5.38.1"
+    immer: "npm:^10.0.3"
+    redux: "npm:^5.0.1"
+    redux-thunk: "npm:^3.1.0"
+    reselect: "npm:^5.1.0"
   peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/be0b851a609fdb360367f38765b568c52f935dde4e70f7b832146a921eb221ddd51735144a35ce36c55810f47f830078e271508920585e3ab789e47c4f824775
+    react: ^16.9.0 || ^17.0.0 || ^18
+    react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-redux:
+      optional: true
+  checksum: 10c0/414e90b706331385a2122fc79e33f90c59a9caf9a59419f1bfd7f5e594bc8e4987902fd1bccbc53eb96d22c65ec2981ff5581f3d2df3ecd381a630f391edfc3e
   languageName: node
   linkType: hard
 
-"@rc-component/context@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "@rc-component/context@npm:1.4.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    rc-util: "npm:^5.27.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/4da3773deca15107adccf6635c703663f5a9202c09d8877ee003ccf144de9991c5eefbca4458f31d95d234e57babf0f8f1926e0b887f8a503a43119a39a653aa
+"@rtsao/scc@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@rtsao/scc@npm:1.1.0"
+  checksum: 10c0/b5bcfb0d87f7d1c1c7c0f7693f53b07866ed9fec4c34a97a8c948fb9a7c0082e416ce4d3b60beb4f5e167cbe04cdeefbf6771320f3ede059b9ce91188c409a5b
   languageName: node
   linkType: hard
 
-"@rc-component/mini-decimal@npm:^1.0.1":
-  version: 1.1.0
-  resolution: "@rc-component/mini-decimal@npm:1.1.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.0"
-  checksum: 10c0/53a7ca71591bc03eba71ab844016df788e83c96c3c7c542710c3eeeae7f55340c88c4930d7a0b11ebe7f1cd9fc65cb5bc284f466fbe95589992dd9833edf6ddf
+"@rushstack/eslint-patch@npm:^1.10.3":
+  version: 1.10.4
+  resolution: "@rushstack/eslint-patch@npm:1.10.4"
+  checksum: 10c0/de312bd7a3cb0f313c9720029eb719d8762fe54946cce2d33ac142b1cbb5817c4a5a92518dfa476c26311602d37f5a8f7caa90a0c73e3d6a56f9a05d2799c172
   languageName: node
   linkType: hard
 
-"@rc-component/mutate-observer@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@rc-component/mutate-observer@npm:1.1.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.0"
-    classnames: "npm:^2.3.2"
-    rc-util: "npm:^5.24.4"
+"@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0":
+  version: 8.0.0
+  resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0"
   peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/90159acd831ed04b7d2d412354892fd042ad51e63bf17a9fcfa84f3b799e23479617fcc7404566a5b97e5b512b6097b87b8eb36e0c419d803692796a39186a2e
-  languageName: node
-  linkType: hard
-
-"@rc-component/portal@npm:^1.0.0-8, @rc-component/portal@npm:^1.0.0-9, @rc-component/portal@npm:^1.0.2, @rc-component/portal@npm:^1.1.0, @rc-component/portal@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "@rc-component/portal@npm:1.1.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.0"
-    classnames: "npm:^2.3.2"
-    rc-util: "npm:^5.24.4"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/3c0297356635d47f364be79de02bb16009f06b1ce82124c3e63da9a71b8e7d3ea2c147e4703ead9cae0f662435a21e9feb30d2edf7197108bc3dbf969f3ca51f
-  languageName: node
-  linkType: hard
-
-"@rc-component/qrcode@npm:~1.0.0":
-  version: 1.0.0
-  resolution: "@rc-component/qrcode@npm:1.0.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.24.7"
-    classnames: "npm:^2.3.2"
-    rc-util: "npm:^5.38.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/406dbe13e3b24ca20ef729d5456a329711ac9ca50f20604ff1e1fdbcb3a716408ad453cc083ec87d541096c85e2f512175f0b357075b40f71bea38e2a4f59cbd
-  languageName: node
-  linkType: hard
-
-"@rc-component/tour@npm:~1.15.1":
-  version: 1.15.1
-  resolution: "@rc-component/tour@npm:1.15.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.0"
-    "@rc-component/portal": "npm:^1.0.0-9"
-    "@rc-component/trigger": "npm:^2.0.0"
-    classnames: "npm:^2.3.2"
-    rc-util: "npm:^5.24.4"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/8324edb96bbca2838e9bdcca5ac02e615596593d0e79ee74ad2e7d3a4801975f205907170bb16f92303b22701bc730c34337cb10270281cea36659bac10193b5
-  languageName: node
-  linkType: hard
-
-"@rc-component/trigger@npm:^2.0.0, @rc-component/trigger@npm:^2.1.1, @rc-component/trigger@npm:^2.2.3":
-  version: 2.2.3
-  resolution: "@rc-component/trigger@npm:2.2.3"
-  dependencies:
-    "@babel/runtime": "npm:^7.23.2"
-    "@rc-component/portal": "npm:^1.1.0"
-    classnames: "npm:^2.3.2"
-    rc-motion: "npm:^2.0.0"
-    rc-resize-observer: "npm:^1.3.1"
-    rc-util: "npm:^5.38.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/f819e4de1a907997b11db2d4da87efbb93e6d16a9d280fc6d99f38c4726fefea15b32cd506efd7f0181639787f922a0d3d1779874769a8c592429318f56abd04
-  languageName: node
-  linkType: hard
-
-"@reduxjs/toolkit@npm:^2.2.3":
-  version: 2.3.0
-  resolution: "@reduxjs/toolkit@npm:2.3.0"
-  dependencies:
-    immer: "npm:^10.0.3"
-    redux: "npm:^5.0.1"
-    redux-thunk: "npm:^3.1.0"
-    reselect: "npm:^5.1.0"
-  peerDependencies:
-    react: ^16.9.0 || ^17.0.0 || ^18
-    react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
-  peerDependenciesMeta:
-    react:
-      optional: true
-    react-redux:
-      optional: true
-  checksum: 10c0/414e90b706331385a2122fc79e33f90c59a9caf9a59419f1bfd7f5e594bc8e4987902fd1bccbc53eb96d22c65ec2981ff5581f3d2df3ecd381a630f391edfc3e
-  languageName: node
-  linkType: hard
-
-"@rtsao/scc@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@rtsao/scc@npm:1.1.0"
-  checksum: 10c0/b5bcfb0d87f7d1c1c7c0f7693f53b07866ed9fec4c34a97a8c948fb9a7c0082e416ce4d3b60beb4f5e167cbe04cdeefbf6771320f3ede059b9ce91188c409a5b
-  languageName: node
-  linkType: hard
-
-"@rushstack/eslint-patch@npm:^1.3.3":
-  version: 1.10.4
-  resolution: "@rushstack/eslint-patch@npm:1.10.4"
-  checksum: 10c0/de312bd7a3cb0f313c9720029eb719d8762fe54946cce2d33ac142b1cbb5817c4a5a92518dfa476c26311602d37f5a8f7caa90a0c73e3d6a56f9a05d2799c172
-  languageName: node
-  linkType: hard
-
-"@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0":
-  version: 8.0.0
-  resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/a50bd0baa34faf16bcba712091f94c7f0e230431fe99a9dfc3401fa92823ad3f68495b86ab9bf9044b53839e8c416cfbb37eb3f246ff33f261e0fa9ee1779c5b
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/a50bd0baa34faf16bcba712091f94c7f0e230431fe99a9dfc3401fa92823ad3f68495b86ab9bf9044b53839e8c416cfbb37eb3f246ff33f261e0fa9ee1779c5b
   languageName: node
   linkType: hard
 
@@ -2880,20 +2905,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/counter@npm:^0.1.3":
+"@swc/counter@npm:0.1.3":
   version: 0.1.3
   resolution: "@swc/counter@npm:0.1.3"
   checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:0.5.5":
-  version: 0.5.5
-  resolution: "@swc/helpers@npm:0.5.5"
+"@swc/helpers@npm:0.5.13":
+  version: 0.5.13
+  resolution: "@swc/helpers@npm:0.5.13"
   dependencies:
-    "@swc/counter": "npm:^0.1.3"
     tslib: "npm:^2.4.0"
-  checksum: 10c0/21a9b9cfe7e00865f9c9f3eb4c1cc5b397143464f7abee76a2c5366e591e06b0155b5aac93fe8269ef8d548df253f6fd931e9ddfc0fd12efd405f90f45506e7d
+  checksum: 10c0/b9df578401fc62405da9a6c31e79e447a2fd90f68b25b1daee12f2caf2821991bb89106f0397bc1acb4c4d84a8ce079d04b60b65f534496952e3bf8c9a52f40f
   languageName: node
   linkType: hard
 
@@ -3024,67 +3048,119 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0":
-  version: 7.2.0
-  resolution: "@typescript-eslint/parser@npm:7.2.0"
+"@typescript-eslint/eslint-plugin@npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+  version: 8.13.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.13.0"
+  dependencies:
+    "@eslint-community/regexpp": "npm:^4.10.0"
+    "@typescript-eslint/scope-manager": "npm:8.13.0"
+    "@typescript-eslint/type-utils": "npm:8.13.0"
+    "@typescript-eslint/utils": "npm:8.13.0"
+    "@typescript-eslint/visitor-keys": "npm:8.13.0"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^5.3.1"
+    natural-compare: "npm:^1.4.0"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependencies:
+    "@typescript-eslint/parser": ^8.0.0 || ^8.0.0-alpha.0
+    eslint: ^8.57.0 || ^9.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/ee96515e9def17b0d1b8d568d4afcd21c5a8a1bc01bf2f30c4d1f396b41a2f49de3508f79c6231a137ca06943dd6933ac00032652190ab99a4e935ffef44df0b
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/parser@npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+  version: 8.13.0
+  resolution: "@typescript-eslint/parser@npm:8.13.0"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:7.2.0"
-    "@typescript-eslint/types": "npm:7.2.0"
-    "@typescript-eslint/typescript-estree": "npm:7.2.0"
-    "@typescript-eslint/visitor-keys": "npm:7.2.0"
+    "@typescript-eslint/scope-manager": "npm:8.13.0"
+    "@typescript-eslint/types": "npm:8.13.0"
+    "@typescript-eslint/typescript-estree": "npm:8.13.0"
+    "@typescript-eslint/visitor-keys": "npm:8.13.0"
     debug: "npm:^4.3.4"
   peerDependencies:
-    eslint: ^8.56.0
+    eslint: ^8.57.0 || ^9.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/11ce36c68212fdbf98fc6fd32ba0977d46b645fd669a3f4fdb8be2036225f86ad005b31a66f97097e90517c44c92cf9cc5fb1d6e9647ee2fa125c4af21cdb477
+  checksum: 10c0/fa04f6c417c0f72104e148f1d7ff53e04108d383550365a556fbfae5d2283484696235db522189e17bc49039946977078e324100cef991ca01f78704182624ad
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:7.2.0":
-  version: 7.2.0
-  resolution: "@typescript-eslint/scope-manager@npm:7.2.0"
+"@typescript-eslint/scope-manager@npm:8.13.0":
+  version: 8.13.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.13.0"
   dependencies:
-    "@typescript-eslint/types": "npm:7.2.0"
-    "@typescript-eslint/visitor-keys": "npm:7.2.0"
-  checksum: 10c0/4d088c127e6ba1a7de8567f70684779083be24b48746c3b4a86a0ec7062bca58693ee08482349ad6572a17ada8aa6f26b74d1c7139c8fcf7101fa09a572e0ea6
+    "@typescript-eslint/types": "npm:8.13.0"
+    "@typescript-eslint/visitor-keys": "npm:8.13.0"
+  checksum: 10c0/1924b3e740e244d98f8a99740b4196d23ae3263303b387c66db94e140455a3132e603a130f3f70fc71e37f4bda5d0c0c67224ae3911908b097ef3f972c136be4
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:7.2.0":
-  version: 7.2.0
-  resolution: "@typescript-eslint/types@npm:7.2.0"
-  checksum: 10c0/135aae061720185855bea61ea6cfd33f4801d2de57f65e50079bbdb505100f844632aa4e4bdeec9e9e79d29aaddad949178d0e918e41867da6ab4b1390820e33
+"@typescript-eslint/type-utils@npm:8.13.0":
+  version: 8.13.0
+  resolution: "@typescript-eslint/type-utils@npm:8.13.0"
+  dependencies:
+    "@typescript-eslint/typescript-estree": "npm:8.13.0"
+    "@typescript-eslint/utils": "npm:8.13.0"
+    debug: "npm:^4.3.4"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/65319084616f3aea3d9f8dfab30c9b0a70de7314b445805016fdf0d0e39fe073eef2813c3e16c3e1c6a40462ba8eecfdbb12ab1e8570c3407a1cccdb69d4bc8b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:7.2.0":
-  version: 7.2.0
-  resolution: "@typescript-eslint/typescript-estree@npm:7.2.0"
+"@typescript-eslint/types@npm:8.13.0":
+  version: 8.13.0
+  resolution: "@typescript-eslint/types@npm:8.13.0"
+  checksum: 10c0/bd3f88b738a92b2222f388bcf831357ef8940a763c2c2eb1947767e1051dd2f8bee387020e8cf4c2309e4142353961b659abc2885e30679109a0488b0bfefc23
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:8.13.0":
+  version: 8.13.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.13.0"
   dependencies:
-    "@typescript-eslint/types": "npm:7.2.0"
-    "@typescript-eslint/visitor-keys": "npm:7.2.0"
+    "@typescript-eslint/types": "npm:8.13.0"
+    "@typescript-eslint/visitor-keys": "npm:8.13.0"
     debug: "npm:^4.3.4"
-    globby: "npm:^11.1.0"
+    fast-glob: "npm:^3.3.2"
     is-glob: "npm:^4.0.3"
-    minimatch: "npm:9.0.3"
-    semver: "npm:^7.5.4"
-    ts-api-utils: "npm:^1.0.1"
+    minimatch: "npm:^9.0.4"
+    semver: "npm:^7.6.0"
+    ts-api-utils: "npm:^1.3.0"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/2730bb17730e6f3ca4061f00688a70386a808f5d174fdeb757c3cfa92c455373f69080df33237c1a8970e818af0cea0ae5a083970ed8ba493f3b04458c6f9271
+  checksum: 10c0/2d45bc5ed4ac352bea927167ac28ef23bd13b6ae352ff50e85cddfdc4b06518f1dd4ae5f2495e30d6f62d247987677a4e807065d55829ba28963908a821dc96d
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:7.2.0":
-  version: 7.2.0
-  resolution: "@typescript-eslint/visitor-keys@npm:7.2.0"
+"@typescript-eslint/utils@npm:8.13.0":
+  version: 8.13.0
+  resolution: "@typescript-eslint/utils@npm:8.13.0"
   dependencies:
-    "@typescript-eslint/types": "npm:7.2.0"
-    eslint-visitor-keys: "npm:^3.4.1"
-  checksum: 10c0/2d7467495b2b76f3edb1b3047e97076c2242e7eca6d50bbbdd88219f9ff754dbcb9334a0568fe0ceb4c562823980938bd278aa2ba53da6343e7d99a167924f24
+    "@eslint-community/eslint-utils": "npm:^4.4.0"
+    "@typescript-eslint/scope-manager": "npm:8.13.0"
+    "@typescript-eslint/types": "npm:8.13.0"
+    "@typescript-eslint/typescript-estree": "npm:8.13.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
+  checksum: 10c0/3fc5a7184a949df5f5b64f6af039a1d21ef7fe15f3d88a5d485ccbb535746d18514751143993a5aee287228151be3e326baf8f899a0a0a93368f6f20857ffa6d
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/visitor-keys@npm:8.13.0":
+  version: 8.13.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.13.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.13.0"
+    eslint-visitor-keys: "npm:^3.4.3"
+  checksum: 10c0/50b35f3cf673aaed940613f0007f7c4558a89ebef15c49824e65b6f084b700fbf01b01a4e701e24bbe651297a39678645e739acd255255f1603867a84bef0383
   languageName: node
   linkType: hard
 
@@ -3243,66 +3319,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"antd@npm:^5.21.4":
-  version: 5.21.4
-  resolution: "antd@npm:5.21.4"
-  dependencies:
-    "@ant-design/colors": "npm:^7.1.0"
-    "@ant-design/cssinjs": "npm:^1.21.1"
-    "@ant-design/cssinjs-utils": "npm:^1.1.1"
-    "@ant-design/icons": "npm:^5.5.1"
-    "@ant-design/react-slick": "npm:~1.1.2"
-    "@babel/runtime": "npm:^7.25.6"
-    "@ctrl/tinycolor": "npm:^3.6.1"
-    "@rc-component/color-picker": "npm:~2.0.1"
-    "@rc-component/mutate-observer": "npm:^1.1.0"
-    "@rc-component/qrcode": "npm:~1.0.0"
-    "@rc-component/tour": "npm:~1.15.1"
-    "@rc-component/trigger": "npm:^2.2.3"
-    classnames: "npm:^2.5.1"
-    copy-to-clipboard: "npm:^3.3.3"
-    dayjs: "npm:^1.11.11"
-    rc-cascader: "npm:~3.28.1"
-    rc-checkbox: "npm:~3.3.0"
-    rc-collapse: "npm:~3.8.0"
-    rc-dialog: "npm:~9.6.0"
-    rc-drawer: "npm:~7.2.0"
-    rc-dropdown: "npm:~4.2.0"
-    rc-field-form: "npm:~2.4.0"
-    rc-image: "npm:~7.11.0"
-    rc-input: "npm:~1.6.3"
-    rc-input-number: "npm:~9.2.0"
-    rc-mentions: "npm:~2.16.1"
-    rc-menu: "npm:~9.15.1"
-    rc-motion: "npm:^2.9.3"
-    rc-notification: "npm:~5.6.2"
-    rc-pagination: "npm:~4.3.0"
-    rc-picker: "npm:~4.6.15"
-    rc-progress: "npm:~4.0.0"
-    rc-rate: "npm:~2.13.0"
-    rc-resize-observer: "npm:^1.4.0"
-    rc-segmented: "npm:~2.5.0"
-    rc-select: "npm:~14.15.2"
-    rc-slider: "npm:~11.1.7"
-    rc-steps: "npm:~6.0.1"
-    rc-switch: "npm:~4.1.0"
-    rc-table: "npm:~7.47.5"
-    rc-tabs: "npm:~15.3.0"
-    rc-textarea: "npm:~1.8.2"
-    rc-tooltip: "npm:~6.2.1"
-    rc-tree: "npm:~5.9.0"
-    rc-tree-select: "npm:~5.23.0"
-    rc-upload: "npm:~4.8.1"
-    rc-util: "npm:^5.43.0"
-    scroll-into-view-if-needed: "npm:^3.1.0"
-    throttle-debounce: "npm:^5.0.2"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/0a3595a2a69d09b6001b0540de3b3e0048e6a9949dc0d8cfa2537d9e6d5109040e08f4fd38b0ae5685ef7356b8e3a0c1b84de49440df3aefcb1908a8387d75ce
-  languageName: node
-  linkType: hard
-
 "any-promise@npm:^1.0.0":
   version: 1.3.0
   resolution: "any-promise@npm:1.3.0"
@@ -3343,16 +3359,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:~5.1.3":
-  version: 5.1.3
-  resolution: "aria-query@npm:5.1.3"
-  dependencies:
-    deep-equal: "npm:^2.0.5"
-  checksum: 10c0/edcbc8044c4663d6f88f785e983e6784f98cb62b4ba1e9dd8d61b725d0203e4cfca38d676aee984c31f354103461102a3d583aa4fbe4fd0a89b679744f4e5faf
+"aria-query@npm:^5.3.2":
+  version: 5.3.2
+  resolution: "aria-query@npm:5.3.2"
+  checksum: 10c0/003c7e3e2cff5540bf7a7893775fc614de82b0c5dde8ae823d47b7a28a9d4da1f7ed85f340bdb93d5649caa927755f0e31ecc7ab63edfdfc00c8ef07e505e03e
   languageName: node
   linkType: hard
 
-"array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1":
+"array-buffer-byte-length@npm:^1.0.1":
   version: 1.0.1
   resolution: "array-buffer-byte-length@npm:1.0.1"
   dependencies:
@@ -3376,20 +3390,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-tree-filter@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "array-tree-filter@npm:2.1.0"
-  checksum: 10c0/6fd1677522b20d10fd918e446db40c3e313eac9ed77ca8a5ea45f43b69c40300655c69760c159fd2cd189985323231a5077858c59fa3ca9c6c2439635eb8557e
-  languageName: node
-  linkType: hard
-
-"array-union@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "array-union@npm:2.1.0"
-  checksum: 10c0/429897e68110374f39b771ec47a7161fc6a8fc33e196857c0a396dc75df0b5f65e4d046674db764330b6bb66b39ef48dd7c53b6a2ee75cfb0681e0c1a7033962
-  languageName: node
-  linkType: hard
-
 "array.prototype.findlast@npm:^1.2.5":
   version: 1.2.5
   resolution: "array.prototype.findlast@npm:1.2.5"
@@ -3787,13 +3787,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.3, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.3.2, classnames@npm:^2.5.1":
-  version: 2.5.1
-  resolution: "classnames@npm:2.5.1"
-  checksum: 10c0/afff4f77e62cea2d79c39962980bf316bacb0d7c49e13a21adaadb9221e1c6b9d3cdb829d8bb1b23c406f4e740507f37e1dcf506f7e3b7113d17c5bab787aa69
-  languageName: node
-  linkType: hard
-
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -3847,13 +3840,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: 10c0/a1a3f914156960902f46f7f56bc62effc6c94e84b2cae157a526b1c1f74b677a47ec602bf68a61abfa2b42d15b7c5651c6dbe72a43af720bc588dff885b10f95
   languageName: node
   linkType: hard
 
+"color-string@npm:^1.9.0":
+  version: 1.9.1
+  resolution: "color-string@npm:1.9.1"
+  dependencies:
+    color-name: "npm:^1.0.0"
+    simple-swizzle: "npm:^0.2.2"
+  checksum: 10c0/b0bfd74c03b1f837f543898b512f5ea353f71630ccdd0d66f83028d1f0924a7d4272deb278b9aef376cacf1289b522ac3fb175e99895283645a2dc3a33af2404
+  languageName: node
+  linkType: hard
+
+"color@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "color@npm:4.2.3"
+  dependencies:
+    color-convert: "npm:^2.0.1"
+    color-string: "npm:^1.9.0"
+  checksum: 10c0/7fbe7cfb811054c808349de19fb380252e5e34e61d7d168ec3353e9e9aacb1802674bddc657682e4e9730c2786592a4de6f8283e7e0d3870b829bb0b7b2f6118
+  languageName: node
+  linkType: hard
+
 "combined-stream@npm:^1.0.8":
   version: 1.0.8
   resolution: "combined-stream@npm:1.0.8"
@@ -3877,13 +3890,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compute-scroll-into-view@npm:^3.0.2":
-  version: 3.1.0
-  resolution: "compute-scroll-into-view@npm:3.1.0"
-  checksum: 10c0/bf305c4ece8e5c59ed3f7ed82b6dab5b7487ce26f56a693d903869964712870fccb08fe31d40edcbd600b03c99198f54d443acb315d674bd64fd344410c8672e
-  languageName: node
-  linkType: hard
-
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -3898,15 +3904,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-to-clipboard@npm:^3.3.3":
-  version: 3.3.3
-  resolution: "copy-to-clipboard@npm:3.3.3"
-  dependencies:
-    toggle-selection: "npm:^1.0.6"
-  checksum: 10c0/3ebf5e8ee00601f8c440b83ec08d838e8eabb068c1fae94a9cda6b42f288f7e1b552f3463635f419af44bf7675afc8d0390d30876cf5c2d5d35f86d9c56a3e5f
-  languageName: node
-  linkType: hard
-
 "core-js-compat@npm:^3.38.0, core-js-compat@npm:^3.38.1":
   version: 3.38.1
   resolution: "core-js-compat@npm:3.38.1"
@@ -4002,7 +3999,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2, csstype@npm:^3.1.3":
+"csstype@npm:^3.0.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
@@ -4049,13 +4046,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dayjs@npm:^1.11.11":
-  version: 1.11.13
-  resolution: "dayjs@npm:1.11.13"
-  checksum: 10c0/a3caf6ac8363c7dade9d1ee797848ddcf25c1ace68d9fe8678ecf8ba0675825430de5d793672ec87b24a69bf04a1544b176547b2539982275d5542a7955f35b7
-  languageName: node
-  linkType: hard
-
 "debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.5":
   version: 4.3.7
   resolution: "debug@npm:4.3.7"
@@ -4084,32 +4074,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-equal@npm:^2.0.5":
-  version: 2.2.3
-  resolution: "deep-equal@npm:2.2.3"
-  dependencies:
-    array-buffer-byte-length: "npm:^1.0.0"
-    call-bind: "npm:^1.0.5"
-    es-get-iterator: "npm:^1.1.3"
-    get-intrinsic: "npm:^1.2.2"
-    is-arguments: "npm:^1.1.1"
-    is-array-buffer: "npm:^3.0.2"
-    is-date-object: "npm:^1.0.5"
-    is-regex: "npm:^1.1.4"
-    is-shared-array-buffer: "npm:^1.0.2"
-    isarray: "npm:^2.0.5"
-    object-is: "npm:^1.1.5"
-    object-keys: "npm:^1.1.1"
-    object.assign: "npm:^4.1.4"
-    regexp.prototype.flags: "npm:^1.5.1"
-    side-channel: "npm:^1.0.4"
-    which-boxed-primitive: "npm:^1.0.2"
-    which-collection: "npm:^1.0.1"
-    which-typed-array: "npm:^1.1.13"
-  checksum: 10c0/a48244f90fa989f63ff5ef0cc6de1e4916b48ea0220a9c89a378561960814794a5800c600254482a2c8fd2e49d6c2e196131dc983976adb024c94a42dfe4949f
-  languageName: node
-  linkType: hard
-
 "deep-is@npm:^0.1.3, deep-is@npm:~0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -4176,6 +4140,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "detect-libc@npm:2.0.3"
+  checksum: 10c0/88095bda8f90220c95f162bf92cad70bd0e424913e655c20578600e35b91edc261af27531cf160a331e185c0ced93944bc7e09939143225f56312d7fd800fdb7
+  languageName: node
+  linkType: hard
+
 "detect-node-es@npm:^1.1.0":
   version: 1.1.0
   resolution: "detect-node-es@npm:1.1.0"
@@ -4190,15 +4161,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dir-glob@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "dir-glob@npm:3.0.1"
-  dependencies:
-    path-type: "npm:^4.0.0"
-  checksum: 10c0/dcac00920a4d503e38bb64001acb19df4efc14536ada475725e12f52c16777afdee4db827f55f13a908ee7efc0cb282e2e3dbaeeb98c0993dd93d1802d3bf00c
-  languageName: node
-  linkType: hard
-
 "dlv@npm:^1.1.3":
   version: 1.1.3
   resolution: "dlv@npm:1.1.3"
@@ -4419,26 +4381,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-get-iterator@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "es-get-iterator@npm:1.1.3"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.1.3"
-    has-symbols: "npm:^1.0.3"
-    is-arguments: "npm:^1.1.1"
-    is-map: "npm:^2.0.2"
-    is-set: "npm:^2.0.2"
-    is-string: "npm:^1.0.7"
-    isarray: "npm:^2.0.5"
-    stop-iteration-iterator: "npm:^1.0.0"
-  checksum: 10c0/ebd11effa79851ea75d7f079405f9d0dc185559fd65d986c6afea59a0ff2d46c2ed8675f19f03dce7429d7f6c14ff9aede8d121fbab78d75cfda6a263030bac0
-  languageName: node
-  linkType: hard
-
-"es-iterator-helpers@npm:^1.0.19":
-  version: 1.1.0
-  resolution: "es-iterator-helpers@npm:1.1.0"
+"es-iterator-helpers@npm:^1.1.0":
+  version: 1.2.0
+  resolution: "es-iterator-helpers@npm:1.2.0"
   dependencies:
     call-bind: "npm:^1.0.7"
     define-properties: "npm:^1.2.1"
@@ -4448,13 +4393,14 @@ __metadata:
     function-bind: "npm:^1.1.2"
     get-intrinsic: "npm:^1.2.4"
     globalthis: "npm:^1.0.4"
+    gopd: "npm:^1.0.1"
     has-property-descriptors: "npm:^1.0.2"
     has-proto: "npm:^1.0.3"
     has-symbols: "npm:^1.0.3"
     internal-slot: "npm:^1.0.7"
     iterator.prototype: "npm:^1.1.3"
     safe-array-concat: "npm:^1.1.2"
-  checksum: 10c0/84d6c240c7da6e62323b336cb1497781546dab16bebdbd879ccfdf588979712d3e941d41165b6c2ffce5a03a7b929d4e6131d3124d330da1a0e2bfa1da7cd99f
+  checksum: 10c0/2bd60580dfeae353f5b80445d2808da745e97eeacdb663a8c4d99a12046873830a06d377e9d5e88fe54eece7c94319a5ce5a01220e24d71394ceca8d3ef621d7
   languageName: node
   linkType: hard
 
@@ -4545,26 +4491,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-config-next@npm:14.2.4":
-  version: 14.2.4
-  resolution: "eslint-config-next@npm:14.2.4"
+"eslint-config-next@npm:^15.0.2":
+  version: 15.0.2
+  resolution: "eslint-config-next@npm:15.0.2"
   dependencies:
-    "@next/eslint-plugin-next": "npm:14.2.4"
-    "@rushstack/eslint-patch": "npm:^1.3.3"
-    "@typescript-eslint/parser": "npm:^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0"
+    "@next/eslint-plugin-next": "npm:15.0.2"
+    "@rushstack/eslint-patch": "npm:^1.10.3"
+    "@typescript-eslint/eslint-plugin": "npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+    "@typescript-eslint/parser": "npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
     eslint-import-resolver-node: "npm:^0.3.6"
     eslint-import-resolver-typescript: "npm:^3.5.2"
-    eslint-plugin-import: "npm:^2.28.1"
-    eslint-plugin-jsx-a11y: "npm:^6.7.1"
-    eslint-plugin-react: "npm:^7.33.2"
-    eslint-plugin-react-hooks: "npm:^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+    eslint-plugin-import: "npm:^2.31.0"
+    eslint-plugin-jsx-a11y: "npm:^6.10.0"
+    eslint-plugin-react: "npm:^7.35.0"
+    eslint-plugin-react-hooks: "npm:^5.0.0"
   peerDependencies:
-    eslint: ^7.23.0 || ^8.0.0
+    eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
     typescript: ">=3.3.1"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/c1bd52a2fc3e5d7094586117a230205ff20dd9acdc8d1f85abe89bc07e2b015bb39bfed87ef9d79af99a6fb2b9666538d8cce4f9f6402fc52ec0ffc329d11ce8
+  checksum: 10c0/02395f2d15853876d917b80a43d5bc187bb017bc741203d16557377b358ddeb5bd00e8c6503fba0b5e1cbb52da634a2d15a2f923c9e86d72c1182ce3940faff9
   languageName: node
   linkType: hard
 
@@ -4616,7 +4563,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-import@npm:^2.28.1":
+"eslint-plugin-import@npm:^2.31.0":
   version: 2.31.0
   resolution: "eslint-plugin-import@npm:2.31.0"
   dependencies:
@@ -4645,11 +4592,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-jsx-a11y@npm:^6.7.1":
-  version: 6.10.0
-  resolution: "eslint-plugin-jsx-a11y@npm:6.10.0"
+"eslint-plugin-jsx-a11y@npm:^6.10.0":
+  version: 6.10.2
+  resolution: "eslint-plugin-jsx-a11y@npm:6.10.2"
   dependencies:
-    aria-query: "npm:~5.1.3"
+    aria-query: "npm:^5.3.2"
     array-includes: "npm:^3.1.8"
     array.prototype.flatmap: "npm:^1.3.2"
     ast-types-flow: "npm:^0.0.8"
@@ -4657,39 +4604,38 @@ __metadata:
     axobject-query: "npm:^4.1.0"
     damerau-levenshtein: "npm:^1.0.8"
     emoji-regex: "npm:^9.2.2"
-    es-iterator-helpers: "npm:^1.0.19"
     hasown: "npm:^2.0.2"
     jsx-ast-utils: "npm:^3.3.5"
     language-tags: "npm:^1.0.9"
     minimatch: "npm:^3.1.2"
     object.fromentries: "npm:^2.0.8"
     safe-regex-test: "npm:^1.0.3"
-    string.prototype.includes: "npm:^2.0.0"
+    string.prototype.includes: "npm:^2.0.1"
   peerDependencies:
     eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
-  checksum: 10c0/9f8e29a3317fb6a82e2ecd333fe0fab3a69fff786d087eb65dc723d6e954473ab681d14a252d7cb2971f5e7f68816cb6f7731766558e1833a77bd73af1b5ab34
+  checksum: 10c0/d93354e03b0cf66f018d5c50964e074dffe4ddf1f9b535fa020d19c4ae45f89c1a16e9391ca61ac3b19f7042c751ac0d361a056a65cbd1de24718a53ff8daa6e
   languageName: node
   linkType: hard
 
-"eslint-plugin-react-hooks@npm:^4.5.0 || 5.0.0-canary-7118f5dd7-20230705":
-  version: 5.0.0-canary-7118f5dd7-20230705
-  resolution: "eslint-plugin-react-hooks@npm:5.0.0-canary-7118f5dd7-20230705"
+"eslint-plugin-react-hooks@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "eslint-plugin-react-hooks@npm:5.0.0"
   peerDependencies:
-    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-  checksum: 10c0/554c4e426bfeb126155510dcba8345391426af147ee629f1c56c9ef6af08340d11008213e4e15b0138830af2c4439d7158da2091987f7efb01aeab662c44b274
+    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+  checksum: 10c0/bcb74b421f32e4203a7100405b57aab85526be4461e5a1da01bc537969a30012d2ee209a2c2a6cac543833a27188ce1e6ad71e4628d0bb4a2e5365cad86c5002
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.33.2":
-  version: 7.37.1
-  resolution: "eslint-plugin-react@npm:7.37.1"
+"eslint-plugin-react@npm:^7.35.0":
+  version: 7.37.2
+  resolution: "eslint-plugin-react@npm:7.37.2"
   dependencies:
     array-includes: "npm:^3.1.8"
     array.prototype.findlast: "npm:^1.2.5"
     array.prototype.flatmap: "npm:^1.3.2"
     array.prototype.tosorted: "npm:^1.1.4"
     doctrine: "npm:^2.1.0"
-    es-iterator-helpers: "npm:^1.0.19"
+    es-iterator-helpers: "npm:^1.1.0"
     estraverse: "npm:^5.3.0"
     hasown: "npm:^2.0.2"
     jsx-ast-utils: "npm:^2.4.1 || ^3.0.0"
@@ -4704,7 +4650,7 @@ __metadata:
     string.prototype.repeat: "npm:^1.0.0"
   peerDependencies:
     eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
-  checksum: 10c0/13cf55666f16d2ca45b14aad1b0e14741d1817679c86d20aff0bc1e802439a8541f40a42c4c8e3486ffb710f1bcc2f3e56697f2b5f724306a7fca174e1ad6433
+  checksum: 10c0/01c498f263c201698bf653973760f86a07fa0cdec56c044f3eaa5ddaae71c64326015dfa5fde76ca8c5386ffe789fc79932624b614e13b6a1ad789fee3f7c491
   languageName: node
   linkType: hard
 
@@ -4847,7 +4793,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2":
+"fast-glob@npm:3.3.1":
+  version: 3.3.1
+  resolution: "fast-glob@npm:3.3.1"
+  dependencies:
+    "@nodelib/fs.stat": "npm:^2.0.2"
+    "@nodelib/fs.walk": "npm:^1.2.3"
+    glob-parent: "npm:^5.1.2"
+    merge2: "npm:^1.3.0"
+    micromatch: "npm:^4.0.4"
+  checksum: 10c0/b68431128fb6ce4b804c5f9622628426d990b66c75b21c0d16e3d80e2d1398bf33f7e1724e66a2e3f299285dcf5b8d745b122d0304e7dd66f5231081f33ec67c
+  languageName: node
+  linkType: hard
+
+"fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -5072,7 +5031,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
   version: 1.2.4
   resolution: "get-intrinsic@npm:1.2.4"
   dependencies:
@@ -5130,21 +5089,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:10.3.10":
-  version: 10.3.10
-  resolution: "glob@npm:10.3.10"
-  dependencies:
-    foreground-child: "npm:^3.1.0"
-    jackspeak: "npm:^2.3.5"
-    minimatch: "npm:^9.0.1"
-    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
-    path-scurry: "npm:^1.10.1"
-  bin:
-    glob: dist/esm/bin.mjs
-  checksum: 10c0/13d8a1feb7eac7945f8c8480e11cd4a44b24d26503d99a8d8ac8d5aefbf3e9802a2b6087318a829fad04cb4e829f25c5f4f1110c68966c498720dd261c7e344d
-  languageName: node
-  linkType: hard
-
 "glob@npm:^10.2.2, glob@npm:^10.3.10":
   version: 10.4.5
   resolution: "glob@npm:10.4.5"
@@ -5214,20 +5158,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^11.1.0":
-  version: 11.1.0
-  resolution: "globby@npm:11.1.0"
-  dependencies:
-    array-union: "npm:^2.1.0"
-    dir-glob: "npm:^3.0.1"
-    fast-glob: "npm:^3.2.9"
-    ignore: "npm:^5.2.0"
-    merge2: "npm:^1.4.1"
-    slash: "npm:^3.0.0"
-  checksum: 10c0/b39511b4afe4bd8a7aead3a27c4ade2b9968649abab0a6c28b1a90141b96ca68ca5db1302f7c7bd29eab66bf51e13916b8e0a3d0ac08f75e1e84a39b35691189
-  languageName: node
-  linkType: hard
-
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -5237,7 +5167,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.9, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.1.9, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@@ -5358,7 +5288,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.2.0":
+"ignore@npm:^5.2.0, ignore@npm:^5.3.1":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
   checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
@@ -5420,7 +5350,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.7":
+"internal-slot@npm:^1.0.7":
   version: 1.0.7
   resolution: "internal-slot@npm:1.0.7"
   dependencies:
@@ -5450,17 +5380,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arguments@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "is-arguments@npm:1.1.1"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10c0/5ff1f341ee4475350adfc14b2328b38962564b7c2076be2f5bac7bd9b61779efba99b9f844a7b82ba7654adccf8e8eb19d1bb0cc6d1c1a085e498f6793d4328f
-  languageName: node
-  linkType: hard
-
-"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.4":
+"is-array-buffer@npm:^3.0.4":
   version: 3.0.4
   resolution: "is-array-buffer@npm:3.0.4"
   dependencies:
@@ -5477,6 +5397,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-arrayish@npm:^0.3.1":
+  version: 0.3.2
+  resolution: "is-arrayish@npm:0.3.2"
+  checksum: 10c0/f59b43dc1d129edb6f0e282595e56477f98c40278a2acdc8b0a5c57097c9eff8fe55470493df5775478cf32a4dc8eaf6d3a749f07ceee5bc263a78b2434f6a54
+  languageName: node
+  linkType: hard
+
 "is-async-function@npm:^2.0.0":
   version: 2.0.0
   resolution: "is-async-function@npm:2.0.0"
@@ -5605,7 +5532,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.2, is-map@npm:^2.0.3":
+"is-map@npm:^2.0.3":
   version: 2.0.3
   resolution: "is-map@npm:2.0.3"
   checksum: 10c0/2c4d431b74e00fdda7162cd8e4b763d6f6f217edf97d4f8538b94b8702b150610e2c64961340015fe8df5b1fcee33ccd2e9b62619c4a8a3a155f8de6d6d355fc
@@ -5652,7 +5579,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-set@npm:^2.0.2, is-set@npm:^2.0.3":
+"is-set@npm:^2.0.3":
   version: 2.0.3
   resolution: "is-set@npm:2.0.3"
   checksum: 10c0/f73732e13f099b2dc879c2a12341cfc22ccaca8dd504e6edae26484bd5707a35d503fba5b4daad530a9b088ced1ae6c9d8200fd92e09b428fe14ea79ce8080b7
@@ -5755,19 +5682,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jackspeak@npm:^2.3.5":
-  version: 2.3.6
-  resolution: "jackspeak@npm:2.3.6"
-  dependencies:
-    "@isaacs/cliui": "npm:^8.0.2"
-    "@pkgjs/parseargs": "npm:^0.11.0"
-  dependenciesMeta:
-    "@pkgjs/parseargs":
-      optional: true
-  checksum: 10c0/f01d8f972d894cd7638bc338e9ef5ddb86f7b208ce177a36d718eac96ec86638a6efa17d0221b10073e64b45edc2ce15340db9380b1f5d5c5d000cbc517dc111
-  languageName: node
-  linkType: hard
-
 "jackspeak@npm:^3.1.2":
   version: 3.4.3
   resolution: "jackspeak@npm:3.4.3"
@@ -5886,15 +5800,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json2mq@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "json2mq@npm:0.2.0"
-  dependencies:
-    string-convert: "npm:^0.2.0"
-  checksum: 10c0/fc9e2f2306572522d3e61d246afdf70b56ca9ea32f4ad5924c30949867851ab59c926bd0ffc821ebb54d32f3e82e95225f3906eacdb3e54c1ad49acdadf7e0c7
-  languageName: node
-  linkType: hard
-
 "json5@npm:^1.0.2":
   version: 1.0.2
   resolution: "json5@npm:1.0.2"
@@ -6176,7 +6081,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"merge2@npm:^1.3.0, merge2@npm:^1.4.1":
+"merge2@npm:^1.3.0":
   version: 1.4.1
   resolution: "merge2@npm:1.4.1"
   checksum: 10c0/254a8a4605b58f450308fc474c82ac9a094848081bf4c06778200207820e5193726dc563a0d2c16468810516a5c97d9d3ea0ca6585d23c58ccfff2403e8dbbeb
@@ -6209,15 +6114,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:9.0.3":
-  version: 9.0.3
-  resolution: "minimatch@npm:9.0.3"
-  dependencies:
-    brace-expansion: "npm:^2.0.1"
-  checksum: 10c0/85f407dcd38ac3e180f425e86553911d101455ca3ad5544d6a7cec16286657e4f8a9aa6695803025c55e31e35a91a2252b5dc8e7d527211278b8b65b4dbd5eac
-  languageName: node
-  linkType: hard
-
 "minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -6236,7 +6132,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^9.0.1, minimatch@npm:^9.0.4":
+"minimatch@npm:^9.0.4":
   version: 9.0.5
   resolution: "minimatch@npm:9.0.5"
   dependencies:
@@ -6396,31 +6292,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:14.2.4":
-  version: 14.2.4
-  resolution: "next@npm:14.2.4"
+"next@npm:^15.0.2":
+  version: 15.0.2
+  resolution: "next@npm:15.0.2"
   dependencies:
-    "@next/env": "npm:14.2.4"
-    "@next/swc-darwin-arm64": "npm:14.2.4"
-    "@next/swc-darwin-x64": "npm:14.2.4"
-    "@next/swc-linux-arm64-gnu": "npm:14.2.4"
-    "@next/swc-linux-arm64-musl": "npm:14.2.4"
-    "@next/swc-linux-x64-gnu": "npm:14.2.4"
-    "@next/swc-linux-x64-musl": "npm:14.2.4"
-    "@next/swc-win32-arm64-msvc": "npm:14.2.4"
-    "@next/swc-win32-ia32-msvc": "npm:14.2.4"
-    "@next/swc-win32-x64-msvc": "npm:14.2.4"
-    "@swc/helpers": "npm:0.5.5"
+    "@next/env": "npm:15.0.2"
+    "@next/swc-darwin-arm64": "npm:15.0.2"
+    "@next/swc-darwin-x64": "npm:15.0.2"
+    "@next/swc-linux-arm64-gnu": "npm:15.0.2"
+    "@next/swc-linux-arm64-musl": "npm:15.0.2"
+    "@next/swc-linux-x64-gnu": "npm:15.0.2"
+    "@next/swc-linux-x64-musl": "npm:15.0.2"
+    "@next/swc-win32-arm64-msvc": "npm:15.0.2"
+    "@next/swc-win32-x64-msvc": "npm:15.0.2"
+    "@swc/counter": "npm:0.1.3"
+    "@swc/helpers": "npm:0.5.13"
     busboy: "npm:1.6.0"
     caniuse-lite: "npm:^1.0.30001579"
-    graceful-fs: "npm:^4.2.11"
     postcss: "npm:8.4.31"
-    styled-jsx: "npm:5.1.1"
+    sharp: "npm:^0.33.5"
+    styled-jsx: "npm:5.1.6"
   peerDependencies:
     "@opentelemetry/api": ^1.1.0
     "@playwright/test": ^1.41.2
-    react: ^18.2.0
-    react-dom: ^18.2.0
+    babel-plugin-react-compiler: "*"
+    react: ^18.2.0 || 19.0.0-rc-02c0e824-20241028
+    react-dom: ^18.2.0 || 19.0.0-rc-02c0e824-20241028
     sass: ^1.3.0
   dependenciesMeta:
     "@next/swc-darwin-arm64":
@@ -6437,20 +6334,22 @@ __metadata:
       optional: true
     "@next/swc-win32-arm64-msvc":
       optional: true
-    "@next/swc-win32-ia32-msvc":
-      optional: true
     "@next/swc-win32-x64-msvc":
       optional: true
+    sharp:
+      optional: true
   peerDependenciesMeta:
     "@opentelemetry/api":
       optional: true
     "@playwright/test":
       optional: true
+    babel-plugin-react-compiler:
+      optional: true
     sass:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: 10c0/630c2a197b57c1f29caf4672a0f8fb74dbb048e77e4513f567279467332212f3eebcb68279885f1d525d7aaebbb452f522b02c0b5cd3ca66f385341e4b4eac67
+  checksum: 10c0/3bfbecda05bbd537260d21466dc91c6cc53e25318eef22748164ad9a3bcb0ac662327c68b0a8d7322808fefeed306402b79e53c46fbec342de600fd9dd977549
   languageName: node
   linkType: hard
 
@@ -6562,16 +6461,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-is@npm:^1.1.5":
-  version: 1.1.6
-  resolution: "object-is@npm:1.1.6"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-  checksum: 10c0/506af444c4dce7f8e31f34fc549e2fb8152d6b9c4a30c6e62852badd7f520b579c679af433e7a072f9d78eb7808d230dc12e1cf58da9154dfbf8813099ea0fe0
-  languageName: node
-  linkType: hard
-
 "object-keys@npm:^1.1.1":
   version: 1.1.1
   resolution: "object-keys@npm:1.1.1"
@@ -6770,7 +6659,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-scurry@npm:^1.10.1, path-scurry@npm:^1.11.1":
+"path-scurry@npm:^1.11.1":
   version: 1.11.1
   resolution: "path-scurry@npm:1.11.1"
   dependencies:
@@ -7094,540 +6983,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-cascader@npm:~3.28.1":
-  version: 3.28.2
-  resolution: "rc-cascader@npm:3.28.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.12.5"
-    array-tree-filter: "npm:^2.1.0"
-    classnames: "npm:^2.3.1"
-    rc-select: "npm:~14.15.0"
-    rc-tree: "npm:~5.9.0"
-    rc-util: "npm:^5.37.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/0d2bf1710242b553a69c9391563113b66c3cb333f351f527b2df2445ceb0937039b0fbe458b9c12889139474e03b3070547f6c2bc9a12a03de3233597852f3cb
-  languageName: node
-  linkType: hard
-
-"rc-checkbox@npm:~3.3.0":
-  version: 3.3.0
-  resolution: "rc-checkbox@npm:3.3.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:^2.3.2"
-    rc-util: "npm:^5.25.2"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/90dc42115370f6578a798558e30b6248e73d52022dc685b17893f8de1b3dc0b88886258447270c555b7d963621f36b25dadbde9938ba3ea49ec01b24fb2a3555
-  languageName: node
-  linkType: hard
-
-"rc-collapse@npm:~3.8.0":
-  version: 3.8.0
-  resolution: "rc-collapse@npm:3.8.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:2.x"
-    rc-motion: "npm:^2.3.4"
-    rc-util: "npm:^5.27.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/c576a53b68e5df44a64939826de441a40ca3ec684672ddc5af4c228da87043668021a92044d507eb4c52357ce96daff3ce97c98d2f4c67eb0ceab4fec31551e6
-  languageName: node
-  linkType: hard
-
-"rc-dialog@npm:~9.6.0":
-  version: 9.6.0
-  resolution: "rc-dialog@npm:9.6.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    "@rc-component/portal": "npm:^1.0.0-8"
-    classnames: "npm:^2.2.6"
-    rc-motion: "npm:^2.3.0"
-    rc-util: "npm:^5.21.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/19e9acef746baa25c3167a961919123b0b457288188c18bc4d468ae31144bf750d6d6468dd3be43b376eba42ddda26fef1aac8ae9bd016f5d0428ffee0c615e7
-  languageName: node
-  linkType: hard
-
-"rc-drawer@npm:~7.2.0":
-  version: 7.2.0
-  resolution: "rc-drawer@npm:7.2.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.23.9"
-    "@rc-component/portal": "npm:^1.1.1"
-    classnames: "npm:^2.2.6"
-    rc-motion: "npm:^2.6.1"
-    rc-util: "npm:^5.38.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/d6814998983100193d6a521745324a94fa8d65cbb979b2764d1d48a78d6b6e22f9d078ebb68545b68a0cc38f062298d11ed3635e93d004a60415d384330a8573
-  languageName: node
-  linkType: hard
-
-"rc-dropdown@npm:~4.2.0":
-  version: 4.2.0
-  resolution: "rc-dropdown@npm:4.2.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.3"
-    "@rc-component/trigger": "npm:^2.0.0"
-    classnames: "npm:^2.2.6"
-    rc-util: "npm:^5.17.0"
-  peerDependencies:
-    react: ">=16.11.0"
-    react-dom: ">=16.11.0"
-  checksum: 10c0/e808172c922f4c3f8bf4fb4641834e34929df9e0af00981e5554d72852d2df016a85c5339119a61f740ea70da7e33c89ed95c11ee8b9c5538533072675287a3a
-  languageName: node
-  linkType: hard
-
-"rc-field-form@npm:~2.4.0":
-  version: 2.4.0
-  resolution: "rc-field-form@npm:2.4.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.0"
-    "@rc-component/async-validator": "npm:^5.0.3"
-    rc-util: "npm:^5.32.2"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/79365813fb0166c109e81e3bde2c979db26bb97dcc418f6170266f7d5f6f11d25c27938f857a695b6921a16cb43b805f1fd4e9fa73cb2a918618a08fef82fed7
-  languageName: node
-  linkType: hard
-
-"rc-image@npm:~7.11.0":
-  version: 7.11.0
-  resolution: "rc-image@npm:7.11.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.2"
-    "@rc-component/portal": "npm:^1.0.2"
-    classnames: "npm:^2.2.6"
-    rc-dialog: "npm:~9.6.0"
-    rc-motion: "npm:^2.6.2"
-    rc-util: "npm:^5.34.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/e0350bdfa531bbf4cdc23bb834fe46fee78f10739ef740ae3b880ea4e529674edb60074defcdb651d9b4aab305f0b971b08dd8739cf6409bb28dadcefca20808
-  languageName: node
-  linkType: hard
-
-"rc-input-number@npm:~9.2.0":
-  version: 9.2.0
-  resolution: "rc-input-number@npm:9.2.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    "@rc-component/mini-decimal": "npm:^1.0.1"
-    classnames: "npm:^2.2.5"
-    rc-input: "npm:~1.6.0"
-    rc-util: "npm:^5.40.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/6053fd1585f65f0a48d2e98bdf83000981b28c3581dc390d8ae9cb2c4c90a2c559bfe8bbb7f0a376eea0ab4dcfe83c758e0cf09023a2fdf2e49eecc5145c8f79
-  languageName: node
-  linkType: hard
-
-"rc-input@npm:~1.6.0, rc-input@npm:~1.6.3":
-  version: 1.6.3
-  resolution: "rc-input@npm:1.6.3"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.1"
-    classnames: "npm:^2.2.1"
-    rc-util: "npm:^5.18.1"
-  peerDependencies:
-    react: ">=16.0.0"
-    react-dom: ">=16.0.0"
-  checksum: 10c0/b18c2316eb64b6d02dcc33c18f1d57cc3759f620042446d012812dee4c94b61d3edd97303d309f8680a935eef627af6cda3bbdc3324a839ce27a72e07c1d6129
-  languageName: node
-  linkType: hard
-
-"rc-mentions@npm:~2.16.1":
-  version: 2.16.1
-  resolution: "rc-mentions@npm:2.16.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.22.5"
-    "@rc-component/trigger": "npm:^2.0.0"
-    classnames: "npm:^2.2.6"
-    rc-input: "npm:~1.6.0"
-    rc-menu: "npm:~9.15.1"
-    rc-textarea: "npm:~1.8.0"
-    rc-util: "npm:^5.34.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/8479b0abfebd004834001f973739a0e8baebb2a0f6b6c77ad5a9b11c1b4c6a2bc28b6a4641d618d80eb5ac16a4b4b349e0c39cf02be16c139d69711317344146
-  languageName: node
-  linkType: hard
-
-"rc-menu@npm:~9.15.1":
-  version: 9.15.1
-  resolution: "rc-menu@npm:9.15.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    "@rc-component/trigger": "npm:^2.0.0"
-    classnames: "npm:2.x"
-    rc-motion: "npm:^2.4.3"
-    rc-overflow: "npm:^1.3.1"
-    rc-util: "npm:^5.27.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/21b5ba6450eb9cfb1fb0d0475ee540bde2b3a1d67f042a84c8788a59547c75a3eb143dc7b52e3be9e96a5510d7bdd987c4714f48154a5c701229e63dbed6548b
-  languageName: node
-  linkType: hard
-
-"rc-motion@npm:^2.0.0, rc-motion@npm:^2.0.1, rc-motion@npm:^2.3.0, rc-motion@npm:^2.3.4, rc-motion@npm:^2.4.3, rc-motion@npm:^2.4.4, rc-motion@npm:^2.6.1, rc-motion@npm:^2.6.2, rc-motion@npm:^2.9.0, rc-motion@npm:^2.9.3":
-  version: 2.9.3
-  resolution: "rc-motion@npm:2.9.3"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.1"
-    classnames: "npm:^2.2.1"
-    rc-util: "npm:^5.43.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/d83981e8a4e4adf51c80174d7a2ff1461659b84522c70941e74e7b52450f7a4af49992606349d8a5a56237271b6cb38613137266a193501e8442934950ecf9df
-  languageName: node
-  linkType: hard
-
-"rc-notification@npm:~5.6.2":
-  version: 5.6.2
-  resolution: "rc-notification@npm:5.6.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:2.x"
-    rc-motion: "npm:^2.9.0"
-    rc-util: "npm:^5.20.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/ce4237ac23a04e6e07ec2610544938c64f08b3035360dccda6f17b6a6494f71fc8a588ae39542c5e06fa1ba96fc95084290a34b7f47f245ee8a23f944376d69c
-  languageName: node
-  linkType: hard
-
-"rc-overflow@npm:^1.3.1, rc-overflow@npm:^1.3.2":
-  version: 1.3.2
-  resolution: "rc-overflow@npm:1.3.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.1"
-    classnames: "npm:^2.2.1"
-    rc-resize-observer: "npm:^1.0.0"
-    rc-util: "npm:^5.37.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/1c3741760e21fdc5829ebc1affb2a54fd04bda3abc1c88542b6191845d3490ca255fc423f897f448af1c79311c7eda499ea977ca79bce55ebdaf75397573d125
-  languageName: node
-  linkType: hard
-
-"rc-pagination@npm:~4.3.0":
-  version: 4.3.0
-  resolution: "rc-pagination@npm:4.3.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:^2.3.2"
-    rc-util: "npm:^5.38.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/9642a0826b927fbeb8c3c4508bb5755302a4e2ac088c196cdcb028e64f93abfadeb89c2dc7a49761152a2698be22a0bbe5f2a17f28d247948a5a410de3dfcf0d
-  languageName: node
-  linkType: hard
-
-"rc-picker@npm:~4.6.15":
-  version: 4.6.15
-  resolution: "rc-picker@npm:4.6.15"
-  dependencies:
-    "@babel/runtime": "npm:^7.24.7"
-    "@rc-component/trigger": "npm:^2.0.0"
-    classnames: "npm:^2.2.1"
-    rc-overflow: "npm:^1.3.2"
-    rc-resize-observer: "npm:^1.4.0"
-    rc-util: "npm:^5.43.0"
-  peerDependencies:
-    date-fns: ">= 2.x"
-    dayjs: ">= 1.x"
-    luxon: ">= 3.x"
-    moment: ">= 2.x"
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  peerDependenciesMeta:
-    date-fns:
-      optional: true
-    dayjs:
-      optional: true
-    luxon:
-      optional: true
-    moment:
-      optional: true
-  checksum: 10c0/ade0ed6e0ebce771c9faa885a67ffd303cdca77e6d3c2329ceab13fc342ebd48d72c0579f0e6046f6528f721e052ea2c575a77af47f16fe09d83a5c64b71b3a0
-  languageName: node
-  linkType: hard
-
-"rc-progress@npm:~4.0.0":
-  version: 4.0.0
-  resolution: "rc-progress@npm:4.0.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:^2.2.6"
-    rc-util: "npm:^5.16.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/d3b47565470c5fec71a16f8d1939f1b1dd7d2dc9260893c6f70cafa84d9ee4231f3466be817db5fb9580932af46e34d52c74a710700ca9391b1901fa06c31f1e
-  languageName: node
-  linkType: hard
-
-"rc-rate@npm:~2.13.0":
-  version: 2.13.0
-  resolution: "rc-rate@npm:2.13.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:^2.2.5"
-    rc-util: "npm:^5.0.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/3e2c15ee41d20837e820b6a1b83bf83e74ecb36c1da05c9e32c22d864586e7a826c961ba8159468ac9c9ac2fcb03b91a812070a5eb8119e77c2248ef95d6febd
-  languageName: node
-  linkType: hard
-
-"rc-resize-observer@npm:^1.0.0, rc-resize-observer@npm:^1.1.0, rc-resize-observer@npm:^1.3.1, rc-resize-observer@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "rc-resize-observer@npm:1.4.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.20.7"
-    classnames: "npm:^2.2.1"
-    rc-util: "npm:^5.38.0"
-    resize-observer-polyfill: "npm:^1.5.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/50e03fa524e156477e5e083bc11e92b8d2c442b6a9a0caa111d9b9991174f9ac98175d50fba1721e55338472d5344610e30fce8531a65785b3d79c191173d351
-  languageName: node
-  linkType: hard
-
-"rc-segmented@npm:~2.5.0":
-  version: 2.5.0
-  resolution: "rc-segmented@npm:2.5.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.1"
-    classnames: "npm:^2.2.1"
-    rc-motion: "npm:^2.4.4"
-    rc-util: "npm:^5.17.0"
-  peerDependencies:
-    react: ">=16.0.0"
-    react-dom: ">=16.0.0"
-  checksum: 10c0/c0f760989fdff4cddfa66e4441f4ea219a452fd70a80b4b11e326b6d243584cb1b1a078078c7c62792c7468ad12fe5cfad8ecaf7affaac9bb42a580072e1658e
-  languageName: node
-  linkType: hard
-
-"rc-select@npm:~14.15.0, rc-select@npm:~14.15.2":
-  version: 14.15.2
-  resolution: "rc-select@npm:14.15.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    "@rc-component/trigger": "npm:^2.1.1"
-    classnames: "npm:2.x"
-    rc-motion: "npm:^2.0.1"
-    rc-overflow: "npm:^1.3.1"
-    rc-util: "npm:^5.16.1"
-    rc-virtual-list: "npm:^3.5.2"
-  peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: 10c0/00151da840002e30ee2b1f372c416e8370495524cf46e587eeb903fce2d1fd43167774a49cb7aed3e9816d2a200b46150c7d1fdcb1b17a21ca19d3a3cf930792
-  languageName: node
-  linkType: hard
-
-"rc-slider@npm:~11.1.7":
-  version: 11.1.7
-  resolution: "rc-slider@npm:11.1.7"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:^2.2.5"
-    rc-util: "npm:^5.36.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/ddb870a8f9982565c3ab4e7ece12a224c4d6f1983a0760d516561fa8963c2bc6d9e25bed6b87cad007b3d4962194398e1490231d0b5ab062262c0ea0ba734b85
-  languageName: node
-  linkType: hard
-
-"rc-steps@npm:~6.0.1":
-  version: 6.0.1
-  resolution: "rc-steps@npm:6.0.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.16.7"
-    classnames: "npm:^2.2.3"
-    rc-util: "npm:^5.16.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/0ba1051a469ae95916cafbb6d7fe76f94e6666181129d3012174d8cc25913c6afd691f551ee0dac48a4a86b59cb91699d6a44a1398dcafd661a8a519f70c95e1
-  languageName: node
-  linkType: hard
-
-"rc-switch@npm:~4.1.0":
-  version: 4.1.0
-  resolution: "rc-switch@npm:4.1.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.21.0"
-    classnames: "npm:^2.2.1"
-    rc-util: "npm:^5.30.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/5ce5b1cadea6e7cd38c0725456ea15c39748fefc39576f7c9288192e69b7f426c4ac7627e266369ece164f281ae08e14ab8f54d4d7858c8bd20707b296980743
-  languageName: node
-  linkType: hard
-
-"rc-table@npm:~7.47.5":
-  version: 7.47.5
-  resolution: "rc-table@npm:7.47.5"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    "@rc-component/context": "npm:^1.4.0"
-    classnames: "npm:^2.2.5"
-    rc-resize-observer: "npm:^1.1.0"
-    rc-util: "npm:^5.41.0"
-    rc-virtual-list: "npm:^3.14.2"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/11976a76715a7cade9687549049ed045c5f91f50c6cd8a1f37d27b51d235c5f694466fc80987cec4baca5c578bf269da4f44a5181467edfb87449bbadd0ff4fa
-  languageName: node
-  linkType: hard
-
-"rc-tabs@npm:~15.3.0":
-  version: 15.3.0
-  resolution: "rc-tabs@npm:15.3.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.2"
-    classnames: "npm:2.x"
-    rc-dropdown: "npm:~4.2.0"
-    rc-menu: "npm:~9.15.1"
-    rc-motion: "npm:^2.6.2"
-    rc-resize-observer: "npm:^1.0.0"
-    rc-util: "npm:^5.34.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/d26a885609fecd9fc85f35a8d6e4fd10147b0af4fe8d2a62e64cc736a07192970a61771eb0a4879baca44ded138f11d6611d3f6128414215f107d008a877cd15
-  languageName: node
-  linkType: hard
-
-"rc-textarea@npm:~1.8.0, rc-textarea@npm:~1.8.2":
-  version: 1.8.2
-  resolution: "rc-textarea@npm:1.8.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:^2.2.1"
-    rc-input: "npm:~1.6.0"
-    rc-resize-observer: "npm:^1.0.0"
-    rc-util: "npm:^5.27.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/bd547309735d3ec22a1cec930965ec8f5d861379c81de7616377e61cdbfe43e248291dfd45a477e2c84a42641b03c7a4c4ca3f9ef730ee47b3731b5b22aca170
-  languageName: node
-  linkType: hard
-
-"rc-tooltip@npm:~6.2.1":
-  version: 6.2.1
-  resolution: "rc-tooltip@npm:6.2.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.11.2"
-    "@rc-component/trigger": "npm:^2.0.0"
-    classnames: "npm:^2.3.1"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/879341bcb7c162faa51b187482947c4f7d67b223f3999cf4a0fc5f4ffd15030086cef05b32464203c6ea7d07fc9f68cca85d806bf65ffdb91a5e7a76e46c839d
-  languageName: node
-  linkType: hard
-
-"rc-tree-select@npm:~5.23.0":
-  version: 5.23.0
-  resolution: "rc-tree-select@npm:5.23.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:2.x"
-    rc-select: "npm:~14.15.0"
-    rc-tree: "npm:~5.9.0"
-    rc-util: "npm:^5.16.1"
-  peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: 10c0/6e054b168f0970686cd3afeefca3ec09138c6c81ea2243c059c446500220fceca1471d91db3231f7759a0f3e05014dcd0f80a5a78306c189b70896b3117a256c
-  languageName: node
-  linkType: hard
-
-"rc-tree@npm:~5.9.0":
-  version: 5.9.0
-  resolution: "rc-tree@npm:5.9.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.10.1"
-    classnames: "npm:2.x"
-    rc-motion: "npm:^2.0.1"
-    rc-util: "npm:^5.16.1"
-    rc-virtual-list: "npm:^3.5.1"
-  peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: 10c0/07cb1126910739060170be6348835bb39cfdf0ddf6fffbbfda2eca49cadee9233fd2031a0cabce07e4874df29ccdc1168b47695dec5e03ecfe502c0fa49712a9
-  languageName: node
-  linkType: hard
-
-"rc-upload@npm:~4.8.1":
-  version: 4.8.1
-  resolution: "rc-upload@npm:4.8.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.3"
-    classnames: "npm:^2.2.5"
-    rc-util: "npm:^5.2.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/27555e114c1705b88558312beeda4b8d3e74d192c09f5a41d161045cbe621d372973acaffff8b9c79ebfe495962e2bf96aedffc9fadc96b5e7c7b5cd1af98b99
-  languageName: node
-  linkType: hard
-
-"rc-util@npm:^5.0.1, rc-util@npm:^5.16.1, rc-util@npm:^5.17.0, rc-util@npm:^5.18.1, rc-util@npm:^5.2.0, rc-util@npm:^5.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.24.4, rc-util@npm:^5.25.2, rc-util@npm:^5.27.0, rc-util@npm:^5.30.0, rc-util@npm:^5.31.1, rc-util@npm:^5.32.2, rc-util@npm:^5.34.1, rc-util@npm:^5.35.0, rc-util@npm:^5.36.0, rc-util@npm:^5.37.0, rc-util@npm:^5.38.0, rc-util@npm:^5.38.1, rc-util@npm:^5.40.1, rc-util@npm:^5.41.0, rc-util@npm:^5.43.0":
-  version: 5.43.0
-  resolution: "rc-util@npm:5.43.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.18.3"
-    react-is: "npm:^18.2.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/39f7904c9851f2b0a2dace5ac578f42000498412d7da5ef2063fd547db91d158dcb376bcbacf49fb7790d2721727bd38ea3483294ef51eb6099a793b2e17e9db
-  languageName: node
-  linkType: hard
-
-"rc-virtual-list@npm:^3.14.2, rc-virtual-list@npm:^3.5.1, rc-virtual-list@npm:^3.5.2":
-  version: 3.14.8
-  resolution: "rc-virtual-list@npm:3.14.8"
-  dependencies:
-    "@babel/runtime": "npm:^7.20.0"
-    classnames: "npm:^2.2.6"
-    rc-resize-observer: "npm:^1.0.0"
-    rc-util: "npm:^5.36.0"
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 10c0/490ca61540b10b1225c1a45f8495b57cc18796f16120e7ad094d7c3ef056fb92ae1727c5d64bbcd6ee50b9a7153a0b52429eb1aaef0f507cf241651464da900c
-  languageName: node
-  linkType: hard
-
 "react-colorful@npm:^5.6.1":
   version: 5.6.1
   resolution: "react-colorful@npm:5.6.1"
@@ -7650,6 +7005,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hook-form@npm:^7.53.1":
+  version: 7.53.1
+  resolution: "react-hook-form@npm:7.53.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17 || ^18 || ^19
+  checksum: 10c0/dd2466359a633f873755b366d367d51ab17100566b687fb3b098f704232bc6ab1c79d29f879151e492880ca5eeac35e9425fbe5a309e2a55f7a4b5baf7826e8d
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -7657,13 +7021,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.2.0":
-  version: 18.3.1
-  resolution: "react-is@npm:18.3.1"
-  checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
-  languageName: node
-  linkType: hard
-
 "react-redux@npm:^9.1.0":
   version: 9.1.2
   resolution: "react-redux@npm:9.1.2"
@@ -7841,7 +7198,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.2":
+"regexp.prototype.flags@npm:^1.5.2":
   version: 1.5.3
   resolution: "regexp.prototype.flags@npm:1.5.3"
   dependencies:
@@ -7901,13 +7258,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resize-observer-polyfill@npm:^1.5.1":
-  version: 1.5.1
-  resolution: "resize-observer-polyfill@npm:1.5.1"
-  checksum: 10c0/5e882475067f0b97dc07e0f37c3e335ac5bc3520d463f777cec7e894bb273eddbfecb857ae668e6fb6881fd6f6bb7148246967172139302da50fa12ea3a15d95
-  languageName: node
-  linkType: hard
-
 "resolve-from@npm:^4.0.0":
   version: 4.0.0
   resolution: "resolve-from@npm:4.0.0"
@@ -8061,15 +7411,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scroll-into-view-if-needed@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "scroll-into-view-if-needed@npm:3.1.0"
-  dependencies:
-    compute-scroll-into-view: "npm:^3.0.2"
-  checksum: 10c0/1f46b090e1e04fcfdef1e384f6d7e615f9f84d4176faf4dbba7347cc0a6e491e5d578eaf4dbe9618dd3d8d38efafde58535b3e00f2a21ce4178c14be364850ff
-  languageName: node
-  linkType: hard
-
 "sdp@npm:^3.0.2":
   version: 3.2.0
   resolution: "sdp@npm:3.2.0"
@@ -8086,7 +7427,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.1.2, semver@npm:^7.3.5, semver@npm:^7.5.4, semver@npm:^7.6.3":
+"semver@npm:^7.1.2, semver@npm:^7.3.5, semver@npm:^7.6.0, semver@npm:^7.6.3":
   version: 7.6.3
   resolution: "semver@npm:7.6.3"
   bin:
@@ -8121,6 +7462,75 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sharp@npm:^0.33.5":
+  version: 0.33.5
+  resolution: "sharp@npm:0.33.5"
+  dependencies:
+    "@img/sharp-darwin-arm64": "npm:0.33.5"
+    "@img/sharp-darwin-x64": "npm:0.33.5"
+    "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
+    "@img/sharp-libvips-linux-arm": "npm:1.0.5"
+    "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
+    "@img/sharp-libvips-linux-x64": "npm:1.0.4"
+    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
+    "@img/sharp-linux-arm": "npm:0.33.5"
+    "@img/sharp-linux-arm64": "npm:0.33.5"
+    "@img/sharp-linux-s390x": "npm:0.33.5"
+    "@img/sharp-linux-x64": "npm:0.33.5"
+    "@img/sharp-linuxmusl-arm64": "npm:0.33.5"
+    "@img/sharp-linuxmusl-x64": "npm:0.33.5"
+    "@img/sharp-wasm32": "npm:0.33.5"
+    "@img/sharp-win32-ia32": "npm:0.33.5"
+    "@img/sharp-win32-x64": "npm:0.33.5"
+    color: "npm:^4.2.3"
+    detect-libc: "npm:^2.0.3"
+    semver: "npm:^7.6.3"
+  dependenciesMeta:
+    "@img/sharp-darwin-arm64":
+      optional: true
+    "@img/sharp-darwin-x64":
+      optional: true
+    "@img/sharp-libvips-darwin-arm64":
+      optional: true
+    "@img/sharp-libvips-darwin-x64":
+      optional: true
+    "@img/sharp-libvips-linux-arm":
+      optional: true
+    "@img/sharp-libvips-linux-arm64":
+      optional: true
+    "@img/sharp-libvips-linux-s390x":
+      optional: true
+    "@img/sharp-libvips-linux-x64":
+      optional: true
+    "@img/sharp-libvips-linuxmusl-arm64":
+      optional: true
+    "@img/sharp-libvips-linuxmusl-x64":
+      optional: true
+    "@img/sharp-linux-arm":
+      optional: true
+    "@img/sharp-linux-arm64":
+      optional: true
+    "@img/sharp-linux-s390x":
+      optional: true
+    "@img/sharp-linux-x64":
+      optional: true
+    "@img/sharp-linuxmusl-arm64":
+      optional: true
+    "@img/sharp-linuxmusl-x64":
+      optional: true
+    "@img/sharp-wasm32":
+      optional: true
+    "@img/sharp-win32-ia32":
+      optional: true
+    "@img/sharp-win32-x64":
+      optional: true
+  checksum: 10c0/6b81421ddfe6ee524d8d77e325c5e147fef22884e1c7b1656dfd89a88d7025894115da02d5f984261bf2e6daa16f98cadd1721c4ba408b4212b1d2a60f233484
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"
@@ -8156,10 +7566,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slash@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "slash@npm:3.0.0"
-  checksum: 10c0/e18488c6a42bdfd4ac5be85b2ced3ccd0224773baae6ad42cfbb9ec74fc07f9fa8396bd35ee638084ead7a2a0818eb5e7151111544d4731ce843019dab4be47b
+"simple-swizzle@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "simple-swizzle@npm:0.2.2"
+  dependencies:
+    is-arrayish: "npm:^0.3.1"
+  checksum: 10c0/df5e4662a8c750bdba69af4e8263c5d96fe4cd0f9fe4bdfa3cbdeb45d2e869dff640beaaeb1ef0e99db4d8d2ec92f85508c269f50c972174851bc1ae5bd64308
   languageName: node
   linkType: hard
 
@@ -8248,15 +7660,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stop-iteration-iterator@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "stop-iteration-iterator@npm:1.0.0"
-  dependencies:
-    internal-slot: "npm:^1.0.4"
-  checksum: 10c0/c4158d6188aac510d9e92925b58709207bd94699e9c31186a040c80932a687f84a51356b5895e6dc72710aad83addb9411c22171832c9ae0e6e11b7d61b0dfb9
-  languageName: node
-  linkType: hard
-
 "streamsearch@npm:^1.1.0":
   version: 1.1.0
   resolution: "streamsearch@npm:1.1.0"
@@ -8264,13 +7667,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-convert@npm:^0.2.0":
-  version: 0.2.1
-  resolution: "string-convert@npm:0.2.1"
-  checksum: 10c0/00673ed8a3106137395436537ace7d3672c91a3290da73466055daa0134331dc84bc58c54ba2d2ea40711adc5744426d3c8239dbfc30290438fa3e9ff65db528
-  languageName: node
-  linkType: hard
-
 "string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
@@ -8293,7 +7689,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.includes@npm:^2.0.0":
+"string.prototype.includes@npm:^2.0.1":
   version: 2.0.1
   resolution: "string.prototype.includes@npm:2.0.1"
   dependencies:
@@ -8400,26 +7796,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-jsx@npm:5.1.1":
-  version: 5.1.1
-  resolution: "styled-jsx@npm:5.1.1"
+"styled-jsx@npm:5.1.6":
+  version: 5.1.6
+  resolution: "styled-jsx@npm:5.1.6"
   dependencies:
     client-only: "npm:0.0.1"
   peerDependencies:
-    react: ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+    react: ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
   peerDependenciesMeta:
     "@babel/core":
       optional: true
     babel-plugin-macros:
       optional: true
-  checksum: 10c0/42655cdadfa5388f8a48bb282d6b450df7d7b8cf066ac37038bd0499d3c9f084815ebd9ff9dfa12a218fd4441338851db79603498d7557207009c1cf4d609835
-  languageName: node
-  linkType: hard
-
-"stylis@npm:^4.3.3":
-  version: 4.3.4
-  resolution: "stylis@npm:4.3.4"
-  checksum: 10c0/4899c2674cd2538e314257abd1ba7ea3c2176439659ddac6593c78192cfd4a06f814a0a4fc69bc7f8fcc6b997e13d383dd9b578b71074746a0fb86045a83e42d
+  checksum: 10c0/ace50e7ea5ae5ae6a3b65a50994c51fca6ae7df9c7ecfd0104c36be0b4b3a9c5c1a2374d16e2a11e256d0b20be6d47256d768ecb4f91ab390f60752a075780f5
   languageName: node
   linkType: hard
 
@@ -8564,10 +7953,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "ten_agent_demo@workspace:."
   dependencies:
-    "@ant-design/icons": "npm:^5.3.7"
+    "@hookform/resolvers": "npm:^3.9.1"
     "@minko-fe/postcss-pxtoviewport": "npm:^1.3.2"
     "@radix-ui/react-avatar": "npm:^1.1.1"
+    "@radix-ui/react-dialog": "npm:^1.1.2"
     "@radix-ui/react-icons": "npm:^1.3.0"
+    "@radix-ui/react-label": "npm:^2.1.0"
     "@radix-ui/react-popover": "npm:^1.1.2"
     "@radix-ui/react-select": "npm:^2.1.2"
     "@radix-ui/react-slot": "npm:^1.1.0"
@@ -8581,15 +7972,14 @@ __metadata:
     "@types/react-redux": "npm:^7.1.22"
     agora-rtc-sdk-ng: "npm:^4.21.0"
     agora-rtm: "npm:^2.2.0"
-    antd: "npm:^5.21.4"
     autoprefixer: "npm:^10.4.20"
     axios: "npm:^1.7.7"
     class-variance-authority: "npm:^0.7.0"
     clsx: "npm:^2.1.1"
     eslint: "npm:^8"
-    eslint-config-next: "npm:14.2.4"
+    eslint-config-next: "npm:^15.0.2"
     lucide-react: "npm:^0.453.0"
-    next: "npm:14.2.4"
+    next: "npm:^15.0.2"
     next-themes: "npm:^0.3.0"
     postcss: "npm:^8.4.47"
     prettier: "npm:^3.3.3"
@@ -8599,6 +7989,7 @@ __metadata:
     react: "npm:^18"
     react-colorful: "npm:^5.6.1"
     react-dom: "npm:^18"
+    react-hook-form: "npm:^7.53.1"
     react-redux: "npm:^9.1.0"
     redux: "npm:^5.0.1"
     sass: "npm:^1.77.5"
@@ -8607,6 +7998,7 @@ __metadata:
     tailwindcss: "npm:^3.4.14"
     tailwindcss-animate: "npm:^1.0.7"
     typescript: "npm:^5"
+    zod: "npm:^3.23.8"
   languageName: unknown
   linkType: soft
 
@@ -8635,13 +8027,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"throttle-debounce@npm:^5.0.0, throttle-debounce@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "throttle-debounce@npm:5.0.2"
-  checksum: 10c0/9a10ac51400b353562770721718486847adb5d7287c94a0c0d47df5326e8d47e5d92fcb74dac53d6734efb9344a2d46d68c7f996c2d0aedfd11446522e4bb356
-  languageName: node
-  linkType: hard
-
 "tmp@npm:^0.2.1":
   version: 0.2.3
   resolution: "tmp@npm:0.2.3"
@@ -8665,19 +8050,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"toggle-selection@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "toggle-selection@npm:1.0.6"
-  checksum: 10c0/f2cf1f2c70f374fd87b0cdc8007453ba9e981c4305a8bf4eac10a30e62ecdfd28bca7d18f8f15b15a506bf8a7bfb20dbe3539f0fcf2a2c8396c1a78d53e1f179
-  languageName: node
-  linkType: hard
-
-"ts-api-utils@npm:^1.0.1":
-  version: 1.3.0
-  resolution: "ts-api-utils@npm:1.3.0"
+"ts-api-utils@npm:^1.3.0":
+  version: 1.4.0
+  resolution: "ts-api-utils@npm:1.4.0"
   peerDependencies:
     typescript: ">=4.2.0"
-  checksum: 10c0/f54a0ba9ed56ce66baea90a3fa087a484002e807f28a8ccb2d070c75e76bde64bd0f6dce98b3802834156306050871b67eec325cb4e918015a360a3f0868c77c
+  checksum: 10c0/1b2bfa50ea52771d564bb143bb69010d25cda03ed573095fbac9b86f717012426443af6647e00e3db70fca60360482a30c1be7cf73c3521c321f6bf5e3594ea0
   languageName: node
   linkType: hard
 
@@ -9023,7 +8401,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-collection@npm:^1.0.1, which-collection@npm:^1.0.2":
+"which-collection@npm:^1.0.2":
   version: 1.0.2
   resolution: "which-collection@npm:1.0.2"
   dependencies:
@@ -9035,7 +8413,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15":
+"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15":
   version: 1.1.15
   resolution: "which-typed-array@npm:1.1.15"
   dependencies:
@@ -9142,3 +8520,10 @@ __metadata:
   checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
   languageName: node
   linkType: hard
+
+"zod@npm:^3.23.8":
+  version: 3.23.8
+  resolution: "zod@npm:3.23.8"
+  checksum: 10c0/8f14c87d6b1b53c944c25ce7a28616896319d95bc46a9660fe441adc0ed0a81253b02b5abdaeffedbeb23bdd25a0bf1c29d2c12dd919aef6447652dd295e3e69
+  languageName: node
+  linkType: hard
diff --git a/docker-compose.yml b/docker-compose.yml
index 059bce03..5570f881 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,65 +1,65 @@
 services:
-    ten_agent_dev:
-        image: ghcr.io/ten-framework/ten_agent_build:0.2.1
-        container_name: ten_agent_dev
-        platform: linux/amd64
-        tty: true
-        stdin_open: true
-        restart: always
-        command: "make run-gd-server"
-        ports:
-            - "${GRAPH_DESIGNER_SERVER_PORT}:${GRAPH_DESIGNER_SERVER_PORT}"
-            - "${SERVER_PORT}:${SERVER_PORT}"
-        volumes:
-            - ./:/app
-            - ${LOG_PATH}:${LOG_PATH}
-        working_dir: /app
-        env_file:
-            - .env
-        networks:
-            - ten_agent_network
-    ten_agent_playground:
-        image: ghcr.io/ten-framework/ten_agent_playground:0.5.0-67-g3c37e38
-        container_name: ten_agent_playground
-        restart: always
-        ports:
-            - "3000:3000"
-        networks:
-            - ten_agent_network
-        environment:
-            - AGENT_SERVER_URL=http://ten_agent_dev:8080
-            - TEN_DEV_SERVER_URL=http://ten_agent_dev:49483
-    ten_agent_demo:
-        image: ghcr.io/ten-framework/ten_agent_demo:0.5.0-75-gb45cbd2
-        container_name: ten_agent_demo
-        restart: always
-        ports:
-            - "3002:3000"
-        networks:
-            - ten_agent_network
-        environment:
-            - AGENT_SERVER_URL=http://ten_agent_dev:8080
+  ten_agent_dev:
+    image: ghcr.io/ten-framework/ten_agent_build:0.2.1
+    container_name: ten_agent_dev
+    platform: linux/amd64
+    tty: true
+    stdin_open: true
+    restart: always
+    command: "make run-gd-server"
+    ports:
+      - "${GRAPH_DESIGNER_SERVER_PORT}:${GRAPH_DESIGNER_SERVER_PORT}"
+      - "${SERVER_PORT}:${SERVER_PORT}"
+    volumes:
+      - ./:/app
+      - ${LOG_PATH}:${LOG_PATH}
+    working_dir: /app
+    env_file:
+      - .env
+    networks:
+      - ten_agent_network
+  ten_agent_playground:
+    image: ghcr.io/ten-framework/ten_agent_playground:0.5.0-67-g3c37e38
+    container_name: ten_agent_playground
+    restart: always
+    ports:
+      - "3000:3000"
+    networks:
+      - ten_agent_network
+    environment:
+      - AGENT_SERVER_URL=http://ten_agent_dev:8080
+      - TEN_DEV_SERVER_URL=http://ten_agent_dev:49483
+  ten_agent_demo:
+    image: ghcr.io/ten-framework/ten_agent_demo:0.5.0-91-g1fba458
+    container_name: ten_agent_demo
+    restart: always
+    ports:
+      - "3002:3000"
+    networks:
+      - ten_agent_network
+    environment:
+      - AGENT_SERVER_URL=http://ten_agent_dev:8080
 
-    # use this when you want to run the playground in local development mode
-    # ten_agent_playground_dev:
-    #     image: node:20-alpine
-    #     container_name: ten_agent_playground_dev
-    #     restart: always
-    #     command: sh -c "cd /app/playground && npm i && npm run dev" #build && npm run start"
-    #     ports:
-    #     - "3002:3000"
-    #     volumes:
-    #     - ./:/app
-    ten_graph_designer:
-        image: ghcr.io/ten-framework/ten_graph_designer:dde0ff1
-        container_name: ten_graph_designer
-        restart: always
-        ports:
-            - "3001:3000"
-        networks:
-            - ten_agent_network
-        environment:
-            - TEN_DEV_SERVER_URL=http://ten_agent_dev:49483
+  # use this when you want to run the playground in local development mode
+  # ten_agent_playground_dev:
+  #     image: node:20-alpine
+  #     container_name: ten_agent_playground_dev
+  #     restart: always
+  #     command: sh -c "cd /app/playground && npm i && npm run dev" #build && npm run start"
+  #     ports:
+  #     - "3002:3000"
+  #     volumes:
+  #     - ./:/app
+  ten_graph_designer:
+    image: ghcr.io/ten-framework/ten_graph_designer:dde0ff1
+    container_name: ten_graph_designer
+    restart: always
+    ports:
+      - "3001:3000"
+    networks:
+      - ten_agent_network
+    environment:
+      - TEN_DEV_SERVER_URL=http://ten_agent_dev:49483
 networks:
   ten_agent_network:
-    driver: bridge
\ No newline at end of file
+    driver: bridge