feat: Open source the rtc aigc demo

2024-10-25 22:14:46 +08:00 · 2024-10-25 22:14:46 +08:00 · de26d6f0bc
commit de26d6f0bc
127 changed files with 17050 additions and 0 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,132 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true,
+    "jest": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "airbnb",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": ["react", "babel", "@typescript-eslint/eslint-plugin"],
+  "globals": {
+    "ActiveXObject": false,
+    "describe": false,
+    "it": false,
+    "expect": false,
+    "jest": false,
+    "$": false,
+    "afterEach": false,
+    "beforeEach": false
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "@typescript-eslint/no-unused-vars": [2, { "args": "none" }],
+        "@typescript-eslint/no-use-before-define": [2, { "functions": false, "classes": false }]
+      }
+    }
+  ],
+  "rules": {
+    "prettier/prettier": ["error", { "trailingComma": "es5", "printWidth": 100 }],
+    "linebreak-style": ["error", "unix"],
+    "no-console": ["error", { "allow": ["warn", "error", "log"] }],
+    "no-case-declarations": 0,
+    "no-param-reassign": 0,
+    "no-underscore-dangle": 0,
+    "no-useless-constructor": 0,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "no-restricted-syntax": 0,
+    "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
+    "no-plusplus": 0,
+    "no-return-assign": 0,
+    "no-script-url": 0,
+    "no-extend-native": 0,
+    "no-restricted-globals": 0,
+    "no-nested-ternary": 0,
+    "no-empty": 0,
+    "no-void": 0,
+    "no-useless-escape": 0,
+    "no-bitwise": 0,
+    "no-mixed-operators": 0,
+    "consistent-return": 0,
+    "one-var": 0,
+    "prefer-promise-reject-errors": 0,
+    "prefer-destructuring": 0,
+    "global-require": 0,
+    "guard-for-in": 0,
+    "func-names": 0,
+    "strict": 0,
+    "radix": 0,
+    "no-prototype-builtins": 0,
+    "class-methods-use-this": 0,
+    "import/no-dynamic-require": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/prefer-default-export": 0,
+    "import/no-absolute-path": 0,
+    "react/no-danger": 0,
+    "react/forbid-prop-types": 0,
+    "react/prop-types": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", "ts", "tsx"] }],
+    "react/sort-comp": 0,
+    "react/no-did-update-set-state": 0,
+    "react/prefer-stateless-function": 0,
+    "react/jsx-closing-tag-location": 0,
+    "react/jsx-no-bind": 0,
+    "react/no-array-index-key": 0,
+    "react/no-children-prop": 0,
+    "react/no-did-mount-set-state": 0,
+    "react/no-find-dom-node": 0,
+    "react/default-props-match-prop-types": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "react/react-in-jsx-scope": 0,
+    "react/jsx-props-no-spreading": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "jsx-a11y/alt-text": 0,
+    "jsx-a11y/label-has-for": 0,
+    "jsx-a11y/label-has-associated-control": 0,
+    "jsx-a11y/no-noninteractive-tabindex": 0,
+    "jsx-a11y/tabindex-no-positive": 0,
+    "react/jsx-indent": 0,
+    "react/display-name": 0,
+    "react/no-multi-comp": 0,
+    "react/destructuring-assignment": 0,
+    "react/no-access-state-in-setstate": 0,
+    "react/button-has-type": 0,
+    "react/require-default-props": 0,
+    "react/jsx-wrap-multilines": 0,
+    "react/no-render-return-value": 0,
+    "array-callback-return": 0,
+    "no-cond-assign": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "no-use-before-define": 0,
+    "@typescript-eslint/no-use-before-define": 2,
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/no-empty-function": 0,
+    "no-shadow": 0,
+    "no-continue": 0,
+    "no-loop-func": 0,
+    "prefer-spread": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "no-undef": 0
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.vscode
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.eslintcache
+
+/Server/node_modules
+/Server/log
+/log
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+registry = 'https://registry.npmjs.org/'
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,10 @@
+{
+  "arrowParens": "always",
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "printWidth": 100,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
--- a/.stylelintrc
+++ b/.stylelintrc
@ -0,0 +1,25 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "customSyntax": "postcss-less",
+  "rules": {
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "block-opening-brace-space-before": "always",
+    "declaration-block-trailing-semicolon": null,
+    "declaration-colon-newline-after": null,
+    "indentation": null,
+    "selector-descendant-combinator-no-non-space": null,
+    "selector-class-pattern": null,
+    "keyframes-name-pattern": null,
+    "no-invalid-position-at-import-rule": null,
+    "number-max-precision": 6,
+    "color-function-notation": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}
--- a/.yarnrc
+++ b/.yarnrc
@ -0,0 +1 @@
+registry="https://registry.yarnpkg.com"
--- a/18
+++ b/18
@ -0,0 +1,18 @@
+Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+======
+======
+THE FOLLOWING SETS FORTH ATTRIBUTION NOTICES FOR THIRD PARTY SOFTWARE THAT MAY BE CONTAINED IN PORTIONS OF RTC AIGC DEMO.  
+======
+WebRTC
+Copyright (c) 2011, The WebRTC project authors. All rights reserved.
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+3. Neither the name of Google Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+======
--- a/README.md
+++ b/README.md
@ -0,0 +1,44 @@
+# 交互式AIGC场景 AIGC Demo
+
+## 简介
+在 AIGC 对话场景下，火山引擎 AIGC-RTC Server 云端服务，通过整合 RTC 音视频流处理，ASR 语音识别，大模型接口调用集成，以及 TTS 语音生成等能力，提供基于流式语音的端到端AIGC能力链路。
+用户只需调用基于标准的 OpenAPI 接口即可配置所需的 ASR、LLM、TTS 类型和参数。火山引擎云端计算服务负责边缘用户接入、云端资源调度、音视频流压缩、文本与语音转换处理以及数据订阅传输等环节。简化开发流程，让开发者更专注在对大模型核心能力的训练及调试，从而快速推进AIGC产品应用创新。
+       
+同时火山引擎 RTC拥有成熟的音频 3A 处理、视频处理等技术以及大规模音视频聊天能力，可支持 AIGC 产品更便捷的支持多模态交互、多人互动等场景能力，保持交互的自然性和高效性。 
+
+# 快速开始
+## 环境准备
+- Node 版本: 16.0+
+- 需要准备两个 Terminal，分别启动服务端、前端页面。
+- 根据你自定义的 
+RoomId、UserId 以及申请的 AppID、BusinessID、Token、ASR AppID、TTS AppID 等信息，修改 `config/index.ts` 文件中的配置信息。
+- 根据你申请到的 AK、SK、SessionToken, 修改 `Server/app.js` 文件中的配置信息。
+- 如果您已经自己完成了服务端的逻辑，可以修改前端代码文件 `src/config/index.ts` 中的 `AIGC_PROXY_HOST` 修改请求的域名，并在 `src/app/api.ts` 中修改接口的参数配置。
+
+## 服务端
+
+### 安装依赖
+```shell
+cd Server
+yarn
+```
+### 运行项目
+```shell
+node app.js
+```
+
+## 前端页面
+
+### 安装依赖
+```shell
+yarn
+```
+### 运行项目
+```shell
+yarn dev
+```
+
+## 相关文档
+- [场景介绍](https://www.volcengine.com/docs/6348/1310537)
+- [Demo 体验](https://www.volcengine.com/docs/6348/1310559)
+- [场景搭建方案](https://www.volcengine.com/docs/6348/1310560)
--- a/Server/.npmrc
+++ b/Server/.npmrc
@ -0,0 +1 @@
+registry = 'https://registry.npmjs.org/'
--- a/Server/app.js
+++ b/Server/app.js
@ -0,0 +1,67 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+const Koa = require('koa');
+const bodyParser = require('koa-bodyparser');
+const cors = require('koa2-cors');
+const { Signer } = require('@volcengine/openapi');
+
+const app = new Koa();
+
+app.use(cors({
+    origin: '*'
+}));
+
+const AK = 'Your AK';
+const SK = 'Your SK';
+const SessionToken = 'Your Token';
+
+app.use(bodyParser());
+
+
+app.use(async ctx => {
+  /**
+   * @brief Proxy AIGC Demo OpenAPI
+   */
+  if (ctx.url.startsWith('/proxyAIGCFetch') && ctx.method.toLowerCase() === 'post') {
+    const { Action, Version } = ctx.query || {};
+    const body = ctx.request.body;
+
+    /** Refer to: https://github.com/volcengine/volc-sdk-nodejs */
+    const openApiRequestData = {
+      region: 'cn-north-1',
+      method: 'POST',
+      params: {
+        Action,
+        Version,
+      },
+      headers: {
+        Host: 'rtc.volcengineapi.com',
+        'Content-type': 'application/json',
+      },
+      body,
+    };
+    const signer = new Signer(openApiRequestData, "rtc");
+    signer.addAuthorization({accessKeyId: AK, secretKey: SK, sessionToken: SessionToken});
+    
+    /** Refer to: https://www.volcengine.com/docs/6348/69828 */
+    const result = await fetch(`https://rtc.volcengineapi.com?Action=${Action}&Version=${Version}`, {
+      method: 'POST',
+      headers: {
+        ...openApiRequestData.headers,
+      },
+      body: JSON.stringify(body),
+    });
+    const volcResponse = await result.json();
+    ctx.body = volcResponse;
+  } else {
+    ctx.body = '<h1>404 Not Found</h1>';
+  }
+});
+
+app.listen(3001, () => {
+  console.log('AIGC Server is running at http://localhost:3001');
+});
+
--- a/Server/package.json
+++ b/Server/package.json
@ -0,0 +1,17 @@
+{
+  "name": "AIGCServer",
+  "version": "1.0.0",
+  "description": "Server for demo to call open api",
+  "main": "app.js",
+  "license": "BSD-3-Clause",
+  "private": true,
+  "dependencies": {
+    "@volcengine/openapi": "^1.22.0",
+    "koa": "^2.15.3",
+    "koa-bodyparser": "^4.4.1",
+    "koa2-cors": "^2.0.6"
+  },
+  "scripts": {
+    "dev": "node app.js"
+  }
+}
--- a/Server/yarn.lock
+++ b/Server/yarn.lock
@ -0,0 +1,650 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@hapi/bourne@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-3.0.0.tgz#f11fdf7dda62fe8e336fa7c6642d9041f30356d7"
+  integrity sha512-Waj1cwPXJDucOib4a3bAISsKJVb15MKi9IvmTI/7ssVEm6sywXGjVJDhl6/umt1pK1ZS7PacXU3A1PmFKHEZ2w==
+
+"@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
+  integrity sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==
+
+"@protobufjs/base64@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/base64/-/base64-1.1.2.tgz#4c85730e59b9a1f1f349047dbf24296034bb2735"
+  integrity sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==
+
+"@protobufjs/codegen@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@protobufjs/codegen/-/codegen-2.0.4.tgz#7ef37f0d010fb028ad1ad59722e506d9262815cb"
+  integrity sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==
+
+"@protobufjs/eventemitter@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz#355cbc98bafad5978f9ed095f397621f1d066b70"
+  integrity sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==
+
+"@protobufjs/fetch@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/fetch/-/fetch-1.1.0.tgz#ba99fb598614af65700c1619ff06d454b0d84c45"
+  integrity sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.1"
+    "@protobufjs/inquire" "^1.1.0"
+
+"@protobufjs/float@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/float/-/float-1.0.2.tgz#5e9e1abdcb73fc0a7cb8b291df78c8cbd97b87d1"
+  integrity sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==
+
+"@protobufjs/inquire@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/inquire/-/inquire-1.1.0.tgz#ff200e3e7cf2429e2dcafc1140828e8cc638f089"
+  integrity sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==
+
+"@protobufjs/path@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/path/-/path-1.1.2.tgz#6cc2b20c5c9ad6ad0dccfd21ca7673d8d7fbf68d"
+  integrity sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==
+
+"@protobufjs/pool@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/pool/-/pool-1.1.0.tgz#09fd15f2d6d3abfa9b65bc366506d6ad7846ff54"
+  integrity sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==
+
+"@protobufjs/utf8@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
+  integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
+
+"@types/node@>=13.7.0":
+  version "22.7.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.7.5.tgz#cfde981727a7ab3611a481510b473ae54442b92b"
+  integrity sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==
+  dependencies:
+    undici-types "~6.19.2"
+
+"@volcengine/openapi@^1.22.0":
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/@volcengine/openapi/-/openapi-1.22.0.tgz#e2f76b4811b1739605ca4e935e7f0a40cce5000c"
+  integrity sha512-FtXc9Hbb+MhysU8y+SjkC84Hpnv9FFUNLbJmdGRpmlo8a6GmRY2c5kMTgY8M2Ai+O7+o1OebhYJ2GUWBN4kRFg==
+  dependencies:
+    axios "^0.21.1"
+    crc "^4.1.0"
+    crypto-js "^4.2.0"
+    dayjs "^1.11.5"
+    debug "^4.3.1"
+    form-data "^3.0.0"
+    lodash.get "^4.4.2"
+    p-limit "^3.0.0"
+    protobufjs "7.2.4"
+    uuid "^8.3.2"
+
+accepts@^1.3.5:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^0.21.1:
+  version "0.21.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
+  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
+  dependencies:
+    follow-redirects "^1.14.0"
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+cache-content-type@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-content-type/-/cache-content-type-1.0.1.tgz#035cde2b08ee2129f4a8315ea8f00a00dba1453c"
+  integrity sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==
+  dependencies:
+    mime-types "^2.1.18"
+    ylru "^1.2.0"
+
+call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
+co-body@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/co-body/-/co-body-6.2.0.tgz#afd776d60e5659f4eee862df83499698eb1aea1b"
+  integrity sha512-Kbpv2Yd1NdL1V/V4cwLVxraHDV6K8ayohr2rmH0J87Er8+zJjcTa6dAn9QMPC9CRgU8+aNajKbSf1TzDB1yKPA==
+  dependencies:
+    "@hapi/bourne" "^3.0.0"
+    inflation "^2.0.0"
+    qs "^6.5.2"
+    raw-body "^2.3.3"
+    type-is "^1.6.16"
+
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+content-disposition@~0.5.2:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+cookies@~0.9.0:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/cookies/-/cookies-0.9.1.tgz#3ffed6f60bb4fb5f146feeedba50acc418af67e3"
+  integrity sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==
+  dependencies:
+    depd "~2.0.0"
+    keygrip "~1.1.0"
+
+copy-to@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/copy-to/-/copy-to-2.0.1.tgz#2680fbb8068a48d08656b6098092bdafc906f4a5"
+  integrity sha512-3DdaFaU/Zf1AnpLiFDeNCD4TOWe3Zl2RZaTzUvWiIk5ERzcCodOE20Vqq4fzCbNoHURFHT4/us/Lfq+S2zyY4w==
+
+crc@^4.1.0:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/crc/-/crc-4.3.2.tgz#49b7821cbf2cf61dfd079ed93863bbebd5469b9a"
+  integrity sha512-uGDHf4KLLh2zsHa8D8hIQ1H/HtFQhyHrc0uhHBcoKGol/Xnb+MPYfUMw7cvON6ze/GUESTudKayDcJC5HnJv1A==
+
+crypto-js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
+  integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
+
+dayjs@^1.11.5:
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
+debug@^4.3.1, debug@^4.3.2:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+  dependencies:
+    ms "^2.1.3"
+
+deep-equal@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+  integrity sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==
+
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+delegates@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
+
+depd@2.0.0, depd@^2.0.0, depd@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
+
+destroy@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
+encodeurl@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+escape-html@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
+follow-redirects@^1.14.0:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
+form-data@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.2.tgz#83ad9ced7c03feaad97e293d6f6091011e1659c8"
+  integrity sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+fresh@~0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
+has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+hasown@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+http-assert@^1.3.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/http-assert/-/http-assert-1.5.0.tgz#c389ccd87ac16ed2dfa6246fd73b926aa00e6b8f"
+  integrity sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==
+  dependencies:
+    deep-equal "~1.0.1"
+    http-errors "~1.8.0"
+
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+http-errors@^1.6.3, http-errors@~1.8.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
+  integrity sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.1"
+
+iconv-lite@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+inflation@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/inflation/-/inflation-2.1.0.tgz#9214db11a47e6f756d111c4f9df96971c60f886c"
+  integrity sha512-t54PPJHG1Pp7VQvxyVCJ9mBbjG3Hqryges9bXoOO6GExCPa+//i/d5GSuFtpx3ALLd7lgIAur6zrIlBQyJuMlQ==
+
+inherits@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+is-generator-function@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
+  integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+keygrip@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/keygrip/-/keygrip-1.1.0.tgz#871b1681d5e159c62a445b0c74b615e0917e7226"
+  integrity sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==
+  dependencies:
+    tsscmp "1.0.6"
+
+koa-bodyparser@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/koa-bodyparser/-/koa-bodyparser-4.4.1.tgz#a908d848e142cc57d9eece478e932bf00dce3029"
+  integrity sha512-kBH3IYPMb+iAXnrxIhXnW+gXV8OTzCu8VPDqvcDHW9SQrbkHmqPQtiZwrltNmSq6/lpipHnT7k7PsjlVD7kK0w==
+  dependencies:
+    co-body "^6.0.0"
+    copy-to "^2.0.1"
+    type-is "^1.6.18"
+
+koa-compose@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/koa-compose/-/koa-compose-4.1.0.tgz#507306b9371901db41121c812e923d0d67d3e877"
+  integrity sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==
+
+koa-convert@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/koa-convert/-/koa-convert-2.0.0.tgz#86a0c44d81d40551bae22fee6709904573eea4f5"
+  integrity sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==
+  dependencies:
+    co "^4.6.0"
+    koa-compose "^4.1.0"
+
+koa2-cors@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/koa2-cors/-/koa2-cors-2.0.6.tgz#9ad23df3a0b9bb84530b46f5944f3fb576086554"
+  integrity sha512-JRCcSM4lamM+8kvKGDKlesYk2ASrmSTczDtGUnIadqMgnHU4Ct5Gw7Bxt3w3m6d6dy3WN0PU4oMP43HbddDEWg==
+
+koa@^2.15.3:
+  version "2.15.3"
+  resolved "https://registry.yarnpkg.com/koa/-/koa-2.15.3.tgz#062809266ee75ce0c75f6510a005b0e38f8c519a"
+  integrity sha512-j/8tY9j5t+GVMLeioLaxweJiKUayFhlGqNTzf2ZGwL0ZCQijd2RLHK0SLW5Tsko8YyyqCZC2cojIb0/s62qTAg==
+  dependencies:
+    accepts "^1.3.5"
+    cache-content-type "^1.0.0"
+    content-disposition "~0.5.2"
+    content-type "^1.0.4"
+    cookies "~0.9.0"
+    debug "^4.3.2"
+    delegates "^1.0.0"
+    depd "^2.0.0"
+    destroy "^1.0.4"
+    encodeurl "^1.0.2"
+    escape-html "^1.0.3"
+    fresh "~0.5.2"
+    http-assert "^1.3.0"
+    http-errors "^1.6.3"
+    is-generator-function "^1.0.7"
+    koa-compose "^4.1.0"
+    koa-convert "^2.0.0"
+    on-finished "^2.3.0"
+    only "~0.0.2"
+    parseurl "^1.3.2"
+    statuses "^1.5.0"
+    type-is "^1.6.16"
+    vary "^1.1.2"
+
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==
+
+long@^5.0.0:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
+  integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12, mime-types@^2.1.18, mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+object-inspect@^1.13.1:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+
+on-finished@^2.3.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  dependencies:
+    ee-first "1.1.1"
+
+only@~0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
+  integrity sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==
+
+p-limit@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+parseurl@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+protobufjs@7.2.4:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.2.4.tgz#3fc1ec0cdc89dd91aef9ba6037ba07408485c3ae"
+  integrity sha512-AT+RJgD2sH8phPmCf7OUZR8xGdcJRga4+1cOaXJ64hvcSkVhNcRHOwIxUatPH15+nj59WAGTDv3LSGZPEQbJaQ==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/node" ">=13.7.0"
+    long "^5.0.0"
+
+qs@^6.5.2:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+  dependencies:
+    side-channel "^1.0.6"
+
+raw-body@^2.3.3:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+safe-buffer@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+"statuses@>= 1.5.0 < 2", statuses@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+tsscmp@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
+  integrity sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==
+
+type-is@^1.6.16, type-is@^1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
+unpipe@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
+vary@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+
+ylru@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.4.0.tgz#0cf0aa57e9c24f8a2cbde0cc1ca2c9592ac4e0f6"
+  integrity sha512-2OQsPNEmBCvXuFlIni/a+Rn+R2pHW9INm0BxXJ4hVDA8TirqMj+J/Rp9ItLatT/5pZqWwefVrTQcHpixsxnVlA==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
--- a/craco.config.js
+++ b/craco.config.js
@ -0,0 +1,26 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+const CracoLessPlugin = require('craco-less');
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  plugins: [
+    {
+      plugin: CracoLessPlugin,
+      options: {
+        lessLoaderOptions: {
+          lessOptions: {
+            javascriptEnabled: true,
+          },
+        },
+      },
+    },
+  ],
+};
--- a/package.json
+++ b/package.json
@ -0,0 +1,73 @@
+{
+  "name": "aigc",
+  "version": "1.3.0",
+  "license": "BSD-3-Clause",
+  "private": true,
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.8.3",
+    "@volcengine/rtc": "4.58.9",
+    "antd": "^4.21.7",
+    "autolinker": "^4.0.0",
+    "i18next": "^21.8.16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-i18next": "^11.18.3",
+    "react-redux": "^8.0.2",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
+    "redux": "^4.2.0",
+    "uuid": "^8.3.2"
+  },
+  "scripts": {
+    "dev": "cross-env REACT_APP_LOCAL=cn  craco start",
+    "dev-en": "cross-env REACT_APP_LOCAL=en  craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "react-scripts eject",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "eslint": "eslint  src/ --fix --cache --quiet --ext .js,.jsx,.ts,.tsx",
+    "stylelint": "stylelint 'src/**/*.less' --fix",
+    "pre-commit": "npm run eslint && npm run stylelint"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@craco/craco": "^6.4.5",
+    "@types/lodash": "^4.17.4",
+    "@types/node": "^16.11.45",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-helmet": "^6.1.11",
+    "@types/uuid": "^8.3.4",
+    "craco-less": "^2.0.0",
+    "cross-env": "^7.0.3",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "postcss-less": "^6.0.0",
+    "prettier": "^2.7.1",
+    "react-scripts": "5.0.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^26.0.0",
+    "typescript": "^4.7.4"
+  }
+}
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,38 @@
+<!-- /**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */ -->
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="volc video demo" />
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>RTC AIGC Demo</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,26 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import { Helmet } from 'react-helmet';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Login from './pages/Login';
+import View from './pages/View';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Helmet>
+        <link rel="icon" href="/favicon.png" />
+      </Helmet>
+      <Routes>
+        <Route path="/">
+          <Route index element={<View />} />
+          <Route path="login" element={<Login />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;
--- a/src/app/api.ts
+++ b/src/app/api.ts
@ -0,0 +1,48 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import { requestGetMethod, requestPostMethod, resultHandler } from './base';
+import { ACTIONS, RequestParams, RequestResponse } from './type';
+
+const APIS_CONFIG = [
+  {
+    action: ACTIONS.StartVoiceChat,
+    apiBasicParams: `?Name=start&Action=${ACTIONS.StartVoiceChat}&Version=2024-06-01`,
+    method: 'post',
+  },
+  {
+    action: ACTIONS.UpdateVoiceChat,
+    apiBasicParams: `?Name=update&Action=${ACTIONS.UpdateVoiceChat}&Version=2024-06-01`,
+    method: 'post',
+  },
+  {
+    action: ACTIONS.StopVoiceChat,
+    apiBasicParams: `?Name=stop&Action=${ACTIONS.StopVoiceChat}&Version=2024-06-01`,
+    method: 'post',
+  },
+] as const;
+
+type ApiConfig = typeof APIS_CONFIG;
+type TupleToUnion<T extends readonly unknown[]> = T[number];
+type ApiNames = Pick<TupleToUnion<ApiConfig>, 'action'>['action'];
+type RequestFn = <T extends keyof RequestResponse>(params?: RequestParams[T]) => RequestResponse[T];
+type PromiseRequestFn = <T extends keyof RequestResponse>(
+  params?: RequestParams[T]
+) => Promise<RequestResponse[T]>;
+type Apis = Record<ApiNames, RequestFn | PromiseRequestFn>;
+
+const APIS = APIS_CONFIG.reduce((store, cur) => {
+  const { action, apiBasicParams, method = 'get' } = cur;
+  store[action] = async (params) => {
+    const queryData =
+      method === 'get'
+        ? await requestGetMethod(apiBasicParams)(params)
+        : await requestPostMethod(apiBasicParams)(params);
+    const res = await queryData?.json();
+    return resultHandler(res);
+  };
+  return store;
+}, {} as Apis);
+
+export default APIS;
--- a/src/app/base.ts
+++ b/src/app/base.ts
@ -0,0 +1,66 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import { message } from 'antd';
+import { AIGC_PROXY_HOST } from '@/config';
+
+type Headers = Record<string, string>;
+
+/**
+ * @brief Get
+ * @param apiName
+ * @param headers
+ */
+export const requestGetMethod = (apiBasicParams: string, headers = {}) => {
+  return async (params: Record<string, any> = {}) => {
+    const url = `${AIGC_PROXY_HOST}${apiBasicParams}&${Object.keys(params)
+      .map((key) => `${key}=${params[key]}`)
+      .join('&')}`;
+    const res = await fetch(url, {
+      headers: {
+        ...headers,
+      },
+    });
+    return res;
+  };
+};
+
+/**
+ * @brief Post
+ * @param apiName
+ * @param isJson
+ * @param headers
+ */
+export const requestPostMethod = (
+  apiBasicParams: string,
+  isJson: boolean = true,
+  headers: Headers = {}
+) => {
+  return async <T>(params: T) => {
+    const res = await fetch(`${AIGC_PROXY_HOST}${apiBasicParams}`, {
+      method: 'post',
+      headers: {
+        'content-type': 'application/json',
+        ...headers,
+      },
+      body: (isJson ? JSON.stringify(params) : params) as BodyInit,
+    });
+    return res;
+  };
+};
+
+/**
+ * @brief Handler
+ * @param res
+ */
+export const resultHandler = (res: any) => {
+  const { Result, ResponseMetadata } = res || {};
+  if (Result === 'ok') {
+    return Result;
+  }
+  message.error(`[${ResponseMetadata?.Action}]Failed(Reason: ${ResponseMetadata?.Error?.Code})`);
+  throw new Error(
+    `[${ResponseMetadata?.Action}]Failed(${JSON.stringify(ResponseMetadata, null, 2)})`
+  );
+};
--- a/src/app/type.ts
+++ b/src/app/type.ts
@ -0,0 +1,78 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+export enum ACTIONS {
+  StartVoiceChat = 'StartVoiceChat',
+  UpdateVoiceChat = 'UpdateVoiceChat',
+  StopVoiceChat = 'StopVoiceChat',
+}
+
+export interface RequestParams {
+  [ACTIONS.StartVoiceChat]: {
+    AppId: string;
+    BusinessId: string;
+    RoomId: string;
+    TaskId: string;
+    Config: Partial<{
+      BotName: string;
+      ASRConfig: {
+        AppId: string;
+        Cluster?: string;
+      };
+      TTSConfig: Partial<{
+        AppId: string;
+        VoiceType: string;
+        Cluster?: string;
+      }>;
+      LLMConfig: Partial<{
+        AppId: string;
+        ModelName?: string;
+        ModelVersion: string;
+        Mode?: string;
+        Host?: string;
+        Region?: string;
+        MaxTokens?: number;
+        MinTokens?: number;
+        Temperature?: number;
+        TopP?: number;
+        TopK?: number;
+        MaxPromptTokens?: number;
+        SystemMessages?: string[];
+        UserMessages?: string[];
+        HistoryLength?: number;
+        WelcomeSpeech?: string;
+        EndPointId?: string;
+        BotId?: string;
+      }>;
+    }>;
+  };
+  [ACTIONS.UpdateVoiceChat]: {
+    AppId: string;
+    BusinessId: string;
+    RoomId: string;
+    TaskId: string;
+    Command: string;
+    Message?: string;
+  };
+  [ACTIONS.StopVoiceChat]: {
+    AppId: string;
+    BusinessId: string;
+    RoomId: string;
+    TaskId: string;
+  };
+}
+
+export interface RequestResponse {
+  [ACTIONS.StartVoiceChat]: string;
+  [ACTIONS.UpdateVoiceChat]: string;
+  [ACTIONS.StopVoiceChat]: string;
+}
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends Array<infer U>
+    ? Array<DeepPartial<U>>
+    : T[P] extends object
+    ? DeepPartial<T[P]>
+    : T[P];
+};
--- a/src/assets/img/AISetting.svg
+++ b/src/assets/img/AISetting.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9248 3.06487C13.2152 3.34947 13.2152 3.83996 12.9369 4.1185L11.6785 5.39012C11.3941 5.68079 10.9041 5.68079 10.6258 5.40223C10.3354 5.11158 10.3354 4.62715 10.6137 4.34255L11.8721 3.07698C12.1564 2.79238 12.6465 2.78027 12.9248 3.06487ZM3.3051 14.1037C2.94215 14.4731 2.325 14.4671 1.96806 14.1037C1.61104 13.7344 1.61104 13.1349 1.96806 12.7655L7.70961 6.97663C8.07261 6.61331 8.68973 6.61331 9.04668 6.97663C9.40968 7.346 9.40364 7.94549 9.04668 8.3088L3.3051 14.1037ZM12.949 12.9169C13.2273 12.6383 13.2213 12.1479 12.9369 11.8633L11.6724 10.6038C11.3881 10.3252 10.898 10.3312 10.6137 10.6159C10.3354 10.9005 10.3414 11.3849 10.6258 11.6695L11.8902 12.9351C12.1746 13.2137 12.6647 13.2076 12.949 12.9169ZM5.3924 4.34255C5.67074 4.62715 5.67074 5.11158 5.38027 5.40223C5.10201 5.68079 4.61196 5.68079 4.3276 5.39012L3.06313 4.12456C2.77877 3.84602 2.78478 3.35553 3.07517 3.06487C3.35352 2.78027 3.84357 2.79238 4.12793 3.07698L5.3924 4.34255ZM8.00001 1C7.59465 1 7.25584 1.34515 7.25584 1.75086V3.59774C7.25584 4.00345 7.59465 4.34255 8.00001 4.34255C8.40537 4.34255 8.75023 4.00345 8.75023 3.59774V1.75086C8.75023 1.34515 8.40537 1 8.00001 1ZM15 7.99998C15 7.59427 14.6612 7.25517 14.2558 7.25517H12.4105C12.0052 7.25517 11.6603 7.59427 11.6603 7.99998C11.6603 8.40569 12.0052 8.74479 12.4105 8.74479H14.2558C14.6612 8.74479 15 8.40569 15 7.99998ZM1 7.99998C1 8.40569 1.3449 8.74479 1.75025 8.74479H3.58947C3.99482 8.74479 4.33972 8.40569 4.33972 7.99998C4.33972 7.59427 3.99482 7.25517 3.58947 7.25517H1.75025C1.3449 7.25517 1 7.59427 1 7.99998ZM8.00001 11.6574C7.59465 11.6574 7.25584 12.0026 7.25584 12.4083V14.2491C7.25584 14.6548 7.59465 15 8.00001 15C8.40537 15 8.75023 14.6548 8.75023 14.2491V12.4083C8.75023 12.0026 8.40537 11.6574 8.00001 11.6574Z" fill="#42464E"/>
+</svg>
--- a/src/assets/img/Aigc.svg
+++ b/src/assets/img/Aigc.svg
@ -0,0 +1 @@
+<svg class="icon" style="margin-bottom: 4px; font-size: 24px; color: white; width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1539"><path d="M100.08784 383.651a100.1 100.1 0 0 1 58.297 181.43v141.987c0 13.877 6.341 26.816 16.949 35.347l5.687 3.868 296.743 171.334c12 6.939 26.36 7.963 39.1 2.958l6.143-2.958 344.403-198.833a50.05 50.05 0 0 1 55.737 82.895l-5.687 3.725-344.432 198.833a145.314 145.314 0 0 1-134.792 5.602l-10.522-5.545L130.94284 832.96a145.314 145.314 0 0 1-72.259-114.83l-0.398-11.09V574.72a100.1 100.1 0 0 1 41.774-191.041z m358.964-60.429l132.773 359.361h-84.003l-27.357-82.07h-130.84l-27.356 82.07h-84.004l130.897-359.36h89.89z m255.793-1.99v359.39H638.71784V321.26h76.127v-0.057zM551.64284 9.332l10.892 4.607 10.522 5.517 296.77 171.362a145.286 145.286 0 0 1 72.288 114.745l0.398 11.147v76.07a100.1 100.1 0 1 1-100.099 9.583V316.71a45.244 45.244 0 0 0-16.948-35.376l-5.688-3.867-296.742-171.335a45.329 45.329 0 0 0-39.102-2.986l-6.142 2.986L133.38784 304.994a50.05 50.05 0 0 1-55.737-82.866l5.687-3.81L427.71384 19.483A145.115 145.115 0 0 1 551.64384 9.39z m-133.711 374.29h-1.849c0 9.812-3.953 21.556-5.886 31.282l-41.035 124.981h95.691L423.81784 414.99a305.615 305.615 0 0 1-5.886-31.366z" p-id="1540"></path></svg>
--- a/src/assets/img/AigcDisable.svg
+++ b/src/assets/img/AigcDisable.svg
@ -0,0 +1 @@
+<svg class="icon" style="margin-bottom: 4px; font-size: 24px; color: rgba(255, 0, 0, 0.8); width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1539"><path d="M100.08784 383.651a100.1 100.1 0 0 1 58.297 181.43v141.987c0 13.877 6.341 26.816 16.949 35.347l5.687 3.868 296.743 171.334c12 6.939 26.36 7.963 39.1 2.958l6.143-2.958 344.403-198.833a50.05 50.05 0 0 1 55.737 82.895l-5.687 3.725-344.432 198.833a145.314 145.314 0 0 1-134.792 5.602l-10.522-5.545L130.94284 832.96a145.314 145.314 0 0 1-72.259-114.83l-0.398-11.09V574.72a100.1 100.1 0 0 1 41.774-191.041z m358.964-60.429l132.773 359.361h-84.003l-27.357-82.07h-130.84l-27.356 82.07h-84.004l130.897-359.36h89.89z m255.793-1.99v359.39H638.71784V321.26h76.127v-0.057zM551.64284 9.332l10.892 4.607 10.522 5.517 296.77 171.362a145.286 145.286 0 0 1 72.288 114.745l0.398 11.147v76.07a100.1 100.1 0 1 1-100.099 9.583V316.71a45.244 45.244 0 0 0-16.948-35.376l-5.688-3.867-296.742-171.335a45.329 45.329 0 0 0-39.102-2.986l-6.142 2.986L133.38784 304.994a50.05 50.05 0 0 1-55.737-82.866l5.687-3.81L427.71384 19.483A145.115 145.115 0 0 1 551.64384 9.39z m-133.711 374.29h-1.849c0 9.812-3.953 21.556-5.886 31.282l-41.035 124.981h95.691L423.81784 414.99a305.615 305.615 0 0 1-5.886-31.366z" p-id="1540"></path></svg>
--- a/src/assets/img/Arrow.svg
+++ b/src/assets/img/Arrow.svg
@ -0,0 +1,3 @@
+<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.853553 0.646447C0.658291 0.841709 0.658291 1.15829 0.853553 1.35355L3.68198 4.18198C3.87724 4.37724 4.19383 4.37724 4.38909 4.18198L7.21751 1.35355C7.41278 1.15829 7.41278 0.841709 7.21751 0.646447C7.02225 0.451185 6.70567 0.451185 6.51041 0.646447L4.03553 3.12132L1.56066 0.646447C1.3654 0.451184 1.04882 0.451184 0.853553 0.646447Z" fill="white"/>
+</svg>
--- a/src/assets/img/Avatar.svg
+++ b/src/assets/img/Avatar.svg
@ -0,0 +1 @@
+<svg class="icon" style="width: 1.5em;height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2302"><path d="M419.622615 789.452514h205.944134v131.575419c0 56.869184-46.108603 102.972067-102.972067 102.972067-56.874905 0-102.972067-46.102883-102.972067-102.972067v-131.575419z" fill="#C5AC95" p-id="2303"></path><path d="M118.023151 571.002994c0 50.330458 40.799821 91.130279 91.130279 91.13028 50.324737 0 91.124559-40.799821 91.124559-91.13028 0-50.324737-40.799821-91.124559-91.13028-91.124558-50.324737 0-91.124559 40.799821-91.124558 91.130279z" fill="#C9AB90" p-id="2304"></path><path d="M749.407821 326.078212m-91.530726 0a91.530726 91.530726 0 1 0 183.061452 0 91.530726 91.530726 0 1 0-183.061452 0Z" fill="#4D4132" p-id="2305"></path><path d="M423.329609 208.804469a185.921788 180.201117 90 1 0 360.402235 0 185.921788 180.201117 90 1 0-360.402235 0Z" fill="#4D4132" p-id="2306"></path><path d="M486.256983 137.296089h11.441341c164.291933 0 297.47486 133.182927 297.47486 297.474861v205.944134c0 164.291933-133.182927 297.47486-297.47486 297.47486h-11.441341c-164.291933 0-297.47486-133.182927-297.47486-297.47486V434.77095c0-164.291933 133.182927-297.47486 297.47486-297.474861z" fill="#EBD3BD" p-id="2307"></path><path d="M400.446927 154.458101m-154.4581 0a154.458101 154.458101 0 1 0 308.916201 0 154.458101 154.458101 0 1 0-308.916201 0Z" fill="#4D4132" p-id="2308"></path><path d="M503.418994 165.899441a91.530726 88.670391 90 1 0 177.340783 0 91.530726 88.670391 90 1 0-177.340783 0Z" fill="#4D4132" p-id="2309"></path><path d="M314.636872 726.52514c0 63.190525 51.222883 114.413408 114.413407 114.413407s114.413408-51.222883 114.413408-114.413407H314.636872z" fill="#E89E80" p-id="2310"></path><path d="M725.529743 565.282324c0 50.330458 40.799821 91.130279 91.124559 91.130279s91.130279-40.799821 91.130279-91.130279c0-50.324737-40.805542-91.124559-91.130279-91.124559s-91.130279 40.799821-91.13028 91.13028z" fill="#EBD3BD" p-id="2311"></path><path d="M776.151955 560.877408a40.502346 40.502346 0 1 0 81.004693 0.017162 40.502346 40.502346 0 0 0-81.004693-0.017162z" fill="#E89E80" p-id="2312"></path><path d="M209.147709 439.376089a81.004693 81.004693 0 1 0 162.003665 0c0-44.735642-36.26905-80.998972-81.004692-80.998972s-80.998972 36.26905-80.998973 81.004693z" fill="#FFFFFF" p-id="2313"></path><path d="M249.650056 444.438883a35.439553 35.439553 0 1 0 70.879106 0 35.439553 35.439553 0 0 0-70.879106 0z" fill="#514141" p-id="2314"></path><path d="M492.652693 439.376089c0 44.735642 36.26905 81.004693 81.004692 81.004693s80.993251-36.26905 80.993252-81.004693-36.26333-80.998972-80.998972-80.998972-81.004693 36.26905-81.004693 81.004693z" fill="#FFFFFF" p-id="2315"></path><path d="M533.155039 444.438883a35.439553 35.439553 0 1 0 70.873386 0 35.439553 35.439553 0 0 0-70.879107 0z" fill="#514141" p-id="2316"></path></svg>
--- a/src/assets/img/Beautify.svg
+++ b/src/assets/img/Beautify.svg
@ -0,0 +1,6 @@
+<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 13C6 8.58172 9.58172 5 14 5C18.4183 5 22 8.58172 22 13V21.0714C22 22.1365 21.1365 23 20.0714 23H7.92857C6.86345 23 6 22.1365 6 21.0714V13Z" fill="white"/>
+<path d="M9 13.1569C9 13.0702 9.07023 13 9.15686 13H18.8431C18.9298 13 19 13.0702 19 13.1569V16C19 18.7614 16.7614 21 14 21C11.2386 21 9 18.7614 9 16V13.1569Z" fill="#272E3B"/>
+<path d="M21.9999 11.5912C21.3291 9.88795 19.9854 8.52456 18.2941 7.82813C19.9854 7.13169 21.3291 5.7683 21.9999 4.06504C22.6708 5.7683 24.0144 7.13169 25.7058 7.82813C24.0144 8.52456 22.6708 9.88795 21.9999 11.5912Z" fill="white" stroke="#1F2127"/>
+<path d="M5.99994 26.7631C5.32906 25.0598 3.98544 23.6964 2.29409 23C3.98544 22.3036 5.32906 20.9402 5.99994 19.2369C6.67082 20.9402 8.01444 22.3036 9.7058 23C8.01444 23.6964 6.67082 25.0598 5.99994 26.7631Z" fill="white" stroke="#1F2127"/>
+</svg>
--- a/src/assets/img/BeautifyOff.svg
+++ b/src/assets/img/BeautifyOff.svg
@ -0,0 +1,6 @@
+<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.30028 10.8212C6.10466 11.5139 6 12.2447 6 13V21.0714C6 22.1365 6.86345 23 7.92857 23H18.4791L16.0437 20.5646C15.4198 20.8444 14.7281 21 14 21C11.2386 21 9 18.7614 9 16V13.5209L6.30028 10.8212ZM17.4041 19.6623L20.6527 22.9109C21.2503 22.7222 21.7222 22.2503 21.9109 21.6527L18.4803 18.2221C18.2102 18.7657 17.8441 19.2532 17.4041 19.6623ZM13.2582 13H10.7418L6.95256 9.21075C7.24041 8.6765 7.58725 8.17873 7.98434 7.72614L13.2582 13ZM18.9793 16.4583C18.993 16.3074 19 16.1545 19 16V13.1569C19 13.0702 18.9298 13 18.8431 13H15.5209L9.15466 6.63372C10.4994 5.60868 12.1786 5 14 5C18.4183 5 22 8.58172 22 13V19.4791L18.9793 16.4583Z" fill="#F53F3F"/>
+<path d="M21.9999 11.5912C21.3291 9.88795 19.9854 8.52456 18.2941 7.82813C19.9854 7.13169 21.3291 5.7683 21.9999 4.06504C22.6708 5.7683 24.0144 7.13169 25.7058 7.82813C24.0144 8.52456 22.6708 9.88795 21.9999 11.5912Z" fill="#F53F3F" stroke="#1F2127"/>
+<path d="M5.99994 26.7631C5.32906 25.0598 3.98544 23.6964 2.29409 23C3.98544 22.3036 5.32906 20.9402 5.99994 19.2369C6.67082 20.9402 8.01444 22.3036 9.7058 23C8.01444 23.6964 6.67082 25.0598 5.99994 26.7631Z" fill="#F53F3F" stroke="#1F2127"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.38849 6.13029L22.8697 22.6115C23.0434 22.7852 23.0434 23.0669 22.8697 23.2406L22.2406 23.8697C22.0669 24.0434 21.7852 24.0434 21.6115 23.8697L5.13029 7.38849C4.95657 7.21477 4.95657 6.93311 5.13029 6.75939L5.75939 6.13029C5.93311 5.95657 6.21477 5.95657 6.38849 6.13029Z" fill="#F53F3F"/>
+</svg>
--- a/src/assets/img/BytePlusLogo.png
+++ b/src/assets/img/BytePlusLogo.png
--- a/src/assets/img/CameraOff.svg
+++ b/src/assets/img/CameraOff.svg
@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6194 20.9732L1.53149 2.94306C1.33988 2.75205 1.02921 2.75205 0.8376 2.94306L0.143709 3.63473C-0.0479031 3.82573 -0.0479031 4.1354 0.143709 4.3264L18.2316 22.3566C18.4232 22.5476 18.7339 22.5476 18.9255 22.3566L19.6194 21.6649C19.811 21.4739 19.811 21.1642 19.6194 20.9732ZM0.5 19.6724V8.0738L13.0555 20.6506H1.47825C0.962536 20.6506 0.540028 20.2516 0.502683 19.7455L0.5 19.6724ZM17.6195 15.7282L17.6888 15.7976L21.3702 17.8054C22.0875 18.1966 22.9999 17.727 22.9999 16.9667V8.68386C22.9999 7.92353 22.0875 7.4539 21.3702 7.84508L17.6195 9.89073V15.7282ZM6.90939 4.99983L16.152 14.2582V5.978L16.1494 5.905C16.112 5.39886 15.6895 4.99983 15.1738 4.99983H6.90939Z" fill="#F53F3F"/>
+</svg>
--- a/src/assets/img/CameraOn.svg
+++ b/src/assets/img/CameraOn.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.47826 5H15.1739C15.6896 5 16.1121 5.39907 16.1495 5.90525L16.1522 5.97826V19.6739C16.1522 20.1896 15.7531 20.6121 15.2469 20.6495L15.1739 20.6522H1.47826C0.96254 20.6522 0.540028 20.2531 0.502683 19.7469L0.5 19.6739V5.97826C0.5 5.46254 0.89907 5.04003 1.40525 5.00268L1.47826 5H15.1739H1.47826ZM23 8.6843V16.9678C23 17.7282 22.0875 18.1979 21.3703 17.8067L17.6196 15.7608V9.89128L21.3703 7.84544C22.0875 7.45423 23 7.9239 23 8.6843ZM5.88043 8.91322C6.69085 8.91322 7.34782 9.57019 7.34782 10.3806C7.34782 11.191 6.69085 11.848 5.88043 11.848C5.07001 11.848 4.41304 11.191 4.41304 10.3806C4.41304 9.57019 5.07001 8.91322 5.88043 8.91322Z" fill="white"/>
+</svg>
--- a/src/assets/img/Checked.svg
+++ b/src/assets/img/Checked.svg
@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 14L13 17L18.5 11.5" stroke="white" stroke-width="2.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 8C4 5.79086 5.79086 4 8 4H24V16C24 20.4183 20.4183 24 16 24H4V8Z" fill="#0068FF"/>
+<path d="M10 13.5L13 16.5L18.5 11" stroke="white" stroke-width="2.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/img/Close.svg
+++ b/src/assets/img/Close.svg
@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9197 5.91974C13.7245 5.72448 13.4079 5.72448 13.2126 5.91974L10.1218 9.01051L6.90922 5.79788C6.71396 5.60262 6.39738 5.60262 6.20212 5.79788L5.84856 6.15144C5.6533 6.3467 5.6533 6.66328 5.84856 6.85854L9.06118 10.0712L5.84866 13.2837C5.6534 13.4789 5.65339 13.7955 5.84866 13.9908L6.20221 14.3443C6.39747 14.5396 6.71406 14.5396 6.90932 14.3443L10.1218 11.1318L13.2125 14.2225C13.4078 14.4178 13.7244 14.4178 13.9196 14.2225L14.2732 13.869C14.4684 13.6737 14.4684 13.3571 14.2732 13.1619L11.1825 10.0712L14.2733 6.9804C14.4686 6.78513 14.4686 6.46855 14.2733 6.27329L13.9197 5.91974Z" fill="#4E5969"/>
+</svg>
--- a/src/assets/img/Dot.svg
+++ b/src/assets/img/Dot.svg
@ -0,0 +1,9 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.2" cx="4" cy="4" r="4" fill="url(#paint0_linear_0_20062)"/>
+<defs>
+<linearGradient id="paint0_linear_0_20062" x1="3.109" y1="4" x2="8" y2="4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#004FFF"/>
+<stop offset="1" stop-color="#9865FF"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/img/DoubaoModel.svg
+++ b/src/assets/img/DoubaoModel.svg
--- a/src/assets/img/DoubaoProfile.svg
+++ b/src/assets/img/DoubaoProfile.svg
--- a/src/assets/img/History.svg
+++ b/src/assets/img/History.svg
@ -0,0 +1 @@
+<svg class="icon" style="width: 24px;height: 24px; color: white; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3346"><path d="M721.481143 626.980571c51.2 0 93.037714-41.910857 93.037714-93.110857V161.645714c0-51.2-41.837714-93.184-93.037714-93.184H116.297143c-51.2 0-93.110857 41.910857-93.110857 93.110857V533.942857c0 51.2 41.910857 93.110857 93.110857 93.110857h103.350857l99.108571 171.739429 1.462858 1.462857c1.316571 1.828571 2.706286 3.218286 4.608 5.12 1.828571 1.828571 3.218286 3.218286 5.12 4.608l1.389714 1.389714c1.389714 0.950857 2.779429 0.950857 4.169143 1.389715 2.340571 0.950857 4.681143 1.828571 7.021714 2.340571a30.72 30.72 0 0 0 6.509714 0.438857c2.340571 0 4.169143 0 6.509715-0.438857a40.96 40.96 0 0 0 6.948571-2.340571c1.462857-0.438857 2.779429-0.438857 4.242286-1.462858l1.389714-1.316571a24.429714 24.429714 0 0 0 5.12-4.681143c1.828571-1.828571 3.218286-3.218286 4.608-5.12l1.462857-1.389714 99.108572-171.739429h242.980571z m-293.302857-52.150857L349.184 711.68 269.897143 574.902857a35.035429 35.035429 0 0 0-30.281143-17.773714H139.702857a46.665143 46.665143 0 0 1-46.518857-46.518857V184.758857c0-25.6 20.918857-46.518857 46.518857-46.518857h558.518857c25.6 0 46.592 20.918857 46.592 46.518857v325.851429c0 25.6-20.992 46.518857-46.592 46.518857H458.459429a35.035429 35.035429 0 0 0-30.208 17.700571z m479.451428-366.738285h-11.629714a35.108571 35.108571 0 0 0-34.889143 34.889142c0 19.017143 15.798857 34.889143 34.889143 34.889143a35.108571 35.108571 0 0 1 34.889143 34.889143V650.24c0 25.6-20.918857 46.518857-46.518857 46.518857h-100.059429c-12.580571 0-24.210286 6.582857-30.281143 17.700572L674.889143 851.382857 595.748571 714.605714a35.035429 35.035429 0 0 0-30.208-17.773714h-60.489142a35.108571 35.108571 0 0 0-34.962286 34.962286c0 19.017143 15.872 34.889143 34.962286 34.889143h40.448l99.181714 171.739428 1.389714 1.462857c1.389714 1.828571 2.779429 3.218286 4.608 5.12a46.372571 46.372571 0 0 0 5.12 4.608l1.462857 1.389715c1.389714 0.950857 2.779429 0.950857 4.169143 1.389714 2.340571 0.950857 4.608 1.828571 6.948572 2.340571a30.72 30.72 0 0 0 6.582857 0.438857c2.267429 0 4.169143 0 6.436571-0.438857 2.340571-0.512 4.681143-1.462857 7.021714-2.340571 1.389714-0.438857 2.779429-0.438857 4.169143-1.462857l1.462857-1.316572a24.356571 24.356571 0 0 0 5.12-4.681143c1.828571-1.828571 3.218286-3.218286 4.608-5.12l1.389715-1.389714 99.108571-171.739428h103.350857c51.2 0 93.110857-41.910857 93.110857-93.110858v-372.297142c0-51.2-41.910857-93.110857-93.110857-93.110858zM529.700571 332.8H448.219429c-6.509714 0-11.629714-5.12-11.629715-11.702857V239.762286a35.108571 35.108571 0 0 0-34.889143-34.889143 35.108571 35.108571 0 0 0-34.889142 34.889143v116.370285c0 25.6 20.918857 46.592 46.518857 46.592h116.297143a35.108571 35.108571 0 0 0 34.962285-34.962285 35.108571 35.108571 0 0 0-34.889143-34.889143z" p-id="3347"></path></svg>
--- a/src/assets/img/InfoIcon.svg
+++ b/src/assets/img/InfoIcon.svg
@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12.9899C22 18.4882 17.5428 22.9454 12.0445 22.9454C6.54618 22.9454 2.08893 18.4882 2.08893 12.9899C2.08893 7.49166 6.54618 3.03442 12.0445 3.03442C17.5428 3.03442 22 7.49166 22 12.9899Z" fill="#141414" fill-opacity="0.08"/>
+<path d="M12 21.9943C17.5228 21.9943 22 17.5172 22 11.9943C22 6.47152 17.5228 1.99438 12 1.99438C6.47715 1.99438 2 6.47152 2 11.9943C2 17.5172 6.47715 21.9943 12 21.9943Z" fill="#387BFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.3276C16.6024 20.3276 20.3333 16.5967 20.3333 11.9943C20.3333 7.39199 16.6024 3.66105 12 3.66105C7.39762 3.66105 3.66667 7.39199 3.66667 11.9943C3.66667 16.5967 7.39762 20.3276 12 20.3276ZM22 11.9943C22 17.5172 17.5228 21.9943 12 21.9943C6.47715 21.9943 2 17.5172 2 11.9943C2 6.47152 6.47715 1.99438 12 1.99438C17.5228 1.99438 22 6.47152 22 11.9943Z" fill="#1664FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1155 10.2443C13.2491 10.2443 13.3575 10.3526 13.3575 10.4862L13.3589 15.6675H14.478C14.6116 15.6675 14.72 15.7759 14.72 15.9095V17.2245C14.72 17.3582 14.6116 17.4665 14.478 17.4665L10.4285 17.4667C10.2949 17.4667 10.1866 17.3584 10.1866 17.2247V15.9095C10.1866 15.7759 10.2949 15.6675 10.4285 15.6675H11.5392L11.5381 12.0431H11.1572C11.0236 12.0431 10.9152 11.9347 10.9152 11.8011V10.4863C10.9152 10.3526 11.0236 10.2443 11.1572 10.2443H13.1155ZM12.9168 7.51782C13.0504 7.51782 13.1588 7.62616 13.1588 7.7598V9.08666C13.1588 9.2203 13.0504 9.32863 12.9168 9.32863H11.5341C11.4004 9.32863 11.2921 9.2203 11.2921 9.08666V7.7598C11.2921 7.62616 11.4004 7.51782 11.5341 7.51782L12.9168 7.51782Z" fill="#141414" fill-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6178 9.74648C12.7514 9.74648 12.8597 9.85478 12.8598 9.98839L12.8612 15.1697H13.9803C14.1139 15.1697 14.2222 15.2781 14.2222 15.4117V16.7267C14.2222 16.8604 14.1139 16.9687 13.9803 16.9687L9.9308 16.9689C9.79716 16.9689 9.68881 16.8606 9.68881 16.7269V15.4117C9.68881 15.2781 9.79715 15.1697 9.93079 15.1697H11.0414L11.0404 11.5453H10.6595C10.5258 11.5453 10.4175 11.4369 10.4175 11.3033V9.98846C10.4175 9.85482 10.5258 9.74648 10.6595 9.74648H12.6178ZM12.4191 7.02002C12.5527 7.02002 12.661 7.12836 12.661 7.26199V8.58886C12.661 8.72249 12.5527 8.83083 12.4191 8.83083H11.0363C10.9027 8.83083 10.7944 8.72249 10.7944 8.58886V7.26199C10.7944 7.12836 10.9027 7.02002 11.0363 7.02002L12.4191 7.02002Z" fill="white"/>
+</svg>
--- a/src/assets/img/Logo.svg
+++ b/src/assets/img/Logo.svg
--- a/src/assets/img/MicDisabled.svg
+++ b/src/assets/img/MicDisabled.svg
@ -0,0 +1,17 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.19993 12.5333C9.34721 12.5333 9.4666 12.6527 9.4666 12.8L9.4666 14.8C9.4666 14.9473 9.34721 15.0667 9.19994 15.0667H8.53327C8.38599 15.0667 8.2666 14.9473 8.2666 14.8L8.2666 12.8C8.2666 12.6527 8.38599 12.5333 8.53327 12.5333H9.19993Z" fill="#42464E"/>
+<mask id="mask0_0_20534" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="1" width="12" height="13">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.38696 4.76269C5.38696 2.7701 6.99531 1.15002 8.98517 1.15002C10.975 1.15002 12.5834 2.7701 12.5834 4.76269V8.17069C12.5834 10.1633 10.975 11.7834 8.98517 11.7834C6.99531 11.7834 5.38696 10.1633 5.38696 8.17069V8.17069C5.38696 8.03041 5.27324 7.91669 5.13296 7.91669H4.9938C4.84338 7.91669 4.72197 8.04134 4.73541 8.19116C4.94205 10.4937 6.84596 12.35 8.93338 12.35C11.1477 12.35 13.15 10.2666 13.15 7.76632V7.01669C13.15 6.86942 13.2694 6.75002 13.4167 6.75002H14.05C14.1973 6.75002 14.3167 6.86942 14.3167 7.01669V7.76632C14.3167 10.8261 11.8737 13.5167 8.93338 13.5167C5.99308 13.5167 3.55005 10.8261 3.55005 7.76632V7.01669C3.55005 6.86942 3.66944 6.75002 3.81672 6.75002H6.28696C6.43424 6.75002 6.55363 6.86942 6.55363 7.01669V8.17069C6.55363 9.52421 7.6449 10.6167 8.98517 10.6167C10.3254 10.6167 11.4167 9.52421 11.4167 8.17069V4.76269C11.4167 3.40917 10.3254 2.31669 8.98517 2.31669C7.6449 2.31669 6.55363 3.40917 6.55363 4.76269V6.20002C6.55363 6.3473 6.43424 6.46669 6.28696 6.46669H5.65363C5.50635 6.46669 5.38696 6.3473 5.38696 6.20002V4.76269Z" fill="url(#paint0_angular_0_20534)"/>
+</mask>
+<g mask="url(#mask0_0_20534)">
+<path d="M13.7333 7.3334V7.76636C13.7333 10.5464 11.5106 12.9334 8.9333 12.9334C6.35597 12.9334 4.1333 10.5464 4.1333 7.76636V7.3334H5.97022V8.17073C5.97022 9.84379 7.32002 11.2001 8.98509 11.2001C10.6502 11.2001 12 9.84379 12 8.17073V4.76273C12 3.08968 10.6502 1.7334 8.98509 1.7334C7.32002 1.7334 5.97022 3.08968 5.97022 4.76273V6.46673" stroke="#42464E" stroke-width="1.16667" stroke-linecap="square"/>
+</g>
+<path d="M4 2.66663L13.7778 13.3333" stroke="#42464E" stroke-width="1.33333" stroke-linecap="round"/>
+<defs>
+<radialGradient id="paint0_angular_0_20534" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.99607 6.91415) rotate(-179.174) scale(4.89006 6.06315)">
+<stop offset="0.746862"/>
+<stop offset="0.986207" stop-opacity="0"/>
+<stop offset="0.99946"/>
+</radialGradient>
+</defs>
+</svg>
--- a/src/assets/img/MicEnabled.svg
+++ b/src/assets/img/MicEnabled.svg
@ -0,0 +1,29 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.21946 1.20463C4.26695 1.02117 4.52725 1.02055 4.57561 1.20379L4.62363 1.38575C4.69125 1.64199 4.89137 1.84212 5.14762 1.90974L5.32958 1.95776C5.51281 2.00612 5.5122 2.26642 5.32873 2.31391L5.14992 2.36019C4.89215 2.4269 4.69049 2.62761 4.62255 2.88506L4.57561 3.06294C4.52725 3.24618 4.26695 3.24556 4.21946 3.06209L4.17424 2.88738C4.10721 2.6284 3.90497 2.42616 3.64598 2.35912L3.47127 2.31391C3.28781 2.26642 3.28719 2.00612 3.47043 1.95776L3.64831 1.91082C3.90576 1.84287 4.10646 1.64121 4.17318 1.38344L4.21946 1.20463ZM2.39585 3.80693C2.46708 3.53174 2.85754 3.53081 2.93007 3.80566L3.0021 4.07861C3.10354 4.46297 3.40372 4.76316 3.78809 4.86459L4.06103 4.93662C4.33589 5.00916 4.33496 5.39961 4.05976 5.47084L3.79155 5.54026C3.40489 5.64034 3.1024 5.94139 3.00049 6.32757L2.93007 6.59439C2.85754 6.86925 2.46708 6.86832 2.39585 6.59312L2.32803 6.33106C2.22748 5.94258 1.92411 5.63922 1.53564 5.53867L1.27357 5.47084C0.998374 5.39961 0.997446 5.00916 1.2723 4.93662L1.53912 4.86621C1.9253 4.7643 2.22636 4.46181 2.32643 4.07515L2.39585 3.80693ZM9.46664 12.8001C9.46664 12.6529 9.34725 12.5335 9.19998 12.5335H8.53331C8.38603 12.5335 8.26664 12.6529 8.26664 12.8001V14.8001C8.26664 14.9474 8.38603 15.0668 8.53331 15.0668H9.19998C9.34725 15.0668 9.46664 14.9474 9.46664 14.8001V12.8001Z" fill="url(#paint0_linear_0_19944)"/>
+<rect x="5.33333" y="1.33333" width="7.11111" height="10.2222" rx="3.55556" fill="url(#paint1_linear_0_19944)"/>
+<mask id="mask0_0_19944" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="1" width="12" height="13">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.38692 4.7628C5.38692 2.77021 6.99526 1.15013 8.98513 1.15013C10.975 1.15013 12.5833 2.77021 12.5833 4.7628V8.1708C12.5833 10.1634 10.975 11.7835 8.98513 11.7835C6.99526 11.7835 5.38692 10.1634 5.38692 8.1708V8.1708C5.38692 8.03052 5.2732 7.9168 5.13292 7.9168H4.99376C4.84333 7.9168 4.72192 8.04145 4.73537 8.19127C4.94201 10.4938 6.84591 12.3501 8.93334 12.3501C11.1477 12.3501 13.15 10.2667 13.15 7.76642V7.0168C13.15 6.86952 13.2694 6.75013 13.4167 6.75013H14.05C14.1973 6.75013 14.3167 6.86952 14.3167 7.0168V7.76642C14.3167 10.8263 11.8736 13.5168 8.93334 13.5168C5.99304 13.5168 3.55 10.8263 3.55 7.76642V7.0168C3.55 6.86952 3.66939 6.75013 3.81667 6.75013H6.28692C6.43419 6.75013 6.55358 6.86952 6.55358 7.0168V8.1708C6.55358 9.52432 7.64485 10.6168 8.98513 10.6168C10.3254 10.6168 11.4167 9.52432 11.4167 8.1708V4.7628C11.4167 3.40928 10.3254 2.3168 8.98513 2.3168C7.64485 2.3168 6.55358 3.40928 6.55358 4.7628V6.20013C6.55358 6.34741 6.43419 6.4668 6.28692 6.4668H5.65358C5.50631 6.4668 5.38692 6.34741 5.38692 6.20013V4.7628Z" fill="url(#paint2_angular_0_19944)"/>
+</mask>
+<g mask="url(#mask0_0_19944)">
+<path d="M13.7333 7.33337V7.76633C13.7333 10.5464 11.5107 12.9334 8.93335 12.9334C6.35602 12.9334 4.13335 10.5464 4.13335 7.76633V7.33337H5.97026V8.1707C5.97026 9.84376 7.32007 11.2 8.98514 11.2C10.6502 11.2 12 9.84376 12 8.1707V4.7627C12 3.08965 10.6502 1.73337 8.98514 1.73337C7.32007 1.73337 5.97026 3.08965 5.97026 4.7627V6.4667" stroke="url(#paint3_linear_0_19944)" stroke-width="1.16889" stroke-linecap="square"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_0_19944" x1="4.33111" y1="8.06676" x2="9.46664" y2="8.06676" gradientUnits="userSpaceOnUse">
+<stop stop-color="#004FFF"/>
+<stop offset="1" stop-color="#9865FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_0_19944" x1="8.09689" y1="6.44444" x2="12.4444" y2="6.44444" gradientUnits="userSpaceOnUse">
+<stop stop-color="#004FFF"/>
+<stop offset="1" stop-color="#9865FF"/>
+</linearGradient>
+<radialGradient id="paint2_angular_0_19944" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.99602 6.91425) rotate(-179.174) scale(4.89006 6.06315)">
+<stop offset="0.746862"/>
+<stop offset="0.986207" stop-opacity="0"/>
+<stop offset="0.99946"/>
+</radialGradient>
+<linearGradient id="paint3_linear_0_19944" x1="7.86415" y1="7.33337" x2="13.7333" y2="7.33337" gradientUnits="userSpaceOnUse">
+<stop stop-color="#004FFF"/>
+<stop offset="1" stop-color="#9865FF"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/img/MicrophoneOff.svg
+++ b/src/assets/img/MicrophoneOff.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.57951 10.7458C5.56864 10.4972 5.39249 10.3022 5.17887 10.3021L4.36568 10.3023L4.30973 10.3083C4.1115 10.3461 3.9647 10.5519 3.97428 10.7914L3.98598 11.0095C4.27646 15.5335 7.33016 18.7882 11.1867 19.2332L11.1846 19.2791V20.4809H9.10221C8.92519 20.4809 8.78169 20.6244 8.78169 20.8014V21.763C8.78169 21.94 8.92519 22.0835 9.10221 22.0835H14.8717C15.0487 22.0835 15.1922 21.94 15.1922 21.763V20.8014C15.1922 20.6244 15.0487 20.4809 14.8717 20.4809H12.7892L12.7888 19.2558L12.7872 19.2331C13.5201 19.1486 14.2239 18.9622 14.8854 18.6847L13.4239 17.243C12.9619 17.3524 12.4809 17.4093 11.9869 17.4093C8.59399 17.4093 5.81591 14.7138 5.58376 10.8293L5.57951 10.7458ZM19.9989 10.8097C19.9451 11.9803 19.7065 13.0698 19.3165 14.0514L18.0345 12.7867C18.2146 12.2158 18.3333 11.6038 18.3815 10.9576L18.3914 10.8063C18.3925 10.7876 18.3935 10.7672 18.3945 10.7453C18.4056 10.4969 18.5817 10.3021 18.7951 10.3021H19.5989C19.8205 10.3022 20.0001 10.5114 20.0001 10.7696L19.9989 10.8097ZM16.7948 10.8527C16.7948 11.0795 16.7802 11.3028 16.7519 11.5216L8.54412 3.4251C9.41736 2.49623 10.6372 1.91943 11.9869 1.91943C14.6423 1.91943 16.7948 4.15172 16.7948 6.90538V10.8527ZM11.9869 15.8386C9.40773 15.8386 7.30287 13.7325 7.18434 11.0881L12.0001 15.8386L11.9869 15.8386ZM21.462 19.5275L4.28702 2.35255C4.10599 2.17151 3.81248 2.17151 3.63144 2.35255L2.97586 3.00813C2.79483 3.18916 2.79483 3.48267 2.97586 3.66371L20.1508 20.8387C20.3319 21.0197 20.6254 21.0197 20.8064 20.8387L21.462 20.1831C21.643 20.0021 21.643 19.7085 21.462 19.5275Z" fill="#F53F3F"/>
+</svg>
--- a/src/assets/img/MicrophoneOn.svg
+++ b/src/assets/img/MicrophoneOn.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.60303 10.7479C5.59218 10.4997 5.41632 10.305 5.20305 10.305L4.39119 10.3051L4.33534 10.3112C4.13744 10.3489 3.99087 10.5543 4.00044 10.7934L4.01212 11.0112C4.30213 15.5277 7.3508 18.7771 11.201 19.2213L11.1989 19.2671V20.4669H9.1199C8.94317 20.4669 8.7999 20.6102 8.7999 20.7869V21.7469C8.7999 21.9236 8.94317 22.0669 9.1199 22.0669H14.8799C15.0566 22.0669 15.1998 21.9236 15.1998 21.7469V20.7869C15.1998 20.6102 15.0566 20.4669 14.8799 20.4669H12.8009L12.8004 19.2439L12.7988 19.2213C16.7055 18.7705 19.787 15.4206 19.9986 10.8117L19.9999 10.7716C19.9999 10.5139 19.8206 10.305 19.5994 10.305H18.7969C18.5838 10.305 18.408 10.4994 18.3969 10.7474C18.3959 10.7693 18.3949 10.7896 18.3938 10.8083L18.3839 10.9594C18.0994 14.7766 15.3498 17.4005 11.9999 17.4005C8.61254 17.4005 5.83904 14.7094 5.60728 10.8313L5.60303 10.7479ZM16.7998 6.91377C16.7998 4.16464 14.6508 1.93604 11.9999 1.93604C9.34893 1.93604 7.19991 4.16464 7.19991 6.91377V10.8546C7.19991 13.6037 9.34893 15.8323 11.9999 15.8323C14.6508 15.8323 16.7998 13.6037 16.7998 10.8546V6.91377Z" fill="white"/>
+</svg>
--- a/src/assets/img/ModelChange.svg
+++ b/src/assets/img/ModelChange.svg
@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_965_12422)">
+<path d="M11.4772 13.2567L8.39327 14.8798C8.28416 14.9639 8.14936 15.0143 8.00005 15.0098C7.85074 15.0143 7.71594 14.9639 7.60682 14.8798L4.52288 13.2567C3.73629 12.8427 4.35728 11.6628 5.14388 12.0768C5.93047 12.4908 5.30948 13.6707 4.52288 13.2567L1.35622 11.59C0.569622 11.176 1.19062 9.99611 1.97721 10.4101L5.14388 12.0768L8.00005 13.58L10.8562 12.0768C11.6428 11.6628 12.2638 12.8427 11.4772 13.2567L10.8562 12.0768L11.4772 13.2567ZM4.52288 13.2567L5.14388 12.0768L4.52288 13.2567ZM11.4772 10.2567L8.39327 11.8798C8.28416 11.9639 8.14936 12.0143 8.00005 12.0098C7.85074 12.0143 7.71594 11.9639 7.60682 11.8798L4.52288 10.2567C3.73629 9.84266 4.35728 8.66277 5.14388 9.07677C5.93047 9.49077 5.30948 10.6707 4.52288 10.2567L1.35622 8.58999C0.569622 8.176 1.19062 6.99611 1.97721 7.4101L5.14388 9.07677L8.00005 10.58L10.8562 9.07677C11.6428 8.66277 12.2638 9.84266 11.4772 10.2567L10.8562 9.07677L11.4772 10.2567ZM4.52288 10.2567L5.14388 9.07677L4.52288 10.2567ZM10.8562 9.07677L14.0229 7.4101C14.8095 6.99611 15.4305 8.176 14.6439 8.58999L11.4772 10.2567C10.6906 10.6707 10.0696 9.49077 10.8562 9.07677ZM10.8562 12.0768L14.0229 10.4101C14.8095 9.99611 15.4305 11.176 14.6439 11.59L11.4772 13.2567C10.6906 13.6707 10.0696 12.4908 10.8562 12.0768ZM8.31928 1.17418L14.7969 4.70742C14.8531 4.73807 14.8993 4.78424 14.9299 4.84043C15.0181 5.00205 14.9585 5.20453 14.7969 5.29268L8.31928 8.82592C8.1203 8.93446 7.8798 8.93446 7.68081 8.82592L1.20321 5.29268C1.04159 5.20453 0.982037 5.00205 1.07019 4.84043C1.10084 4.78424 1.14702 4.73807 1.20321 4.70742L7.68081 1.17418C7.8798 1.06564 8.1203 1.06564 8.31928 1.17418ZM3.45115 5.00005L8.00005 7.48126L12.5489 5.00005L8.00005 2.51883L3.45115 5.00005Z" fill="url(#paint0_linear_965_12422)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_965_12422" x1="6.43916" y1="8.05143" x2="15.0074" y2="8.05143" gradientUnits="userSpaceOnUse">
+<stop stop-color="#004FFF"/>
+<stop offset="1" stop-color="#9865FF"/>
+</linearGradient>
+<clipPath id="clip0_965_12422">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/img/MsgBubble.svg
+++ b/src/assets/img/MsgBubble.svg
--- a/src/assets/img/RealTimeData.svg
+++ b/src/assets/img/RealTimeData.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0187 4C21.2808 4 21.4933 4.21251 21.4933 4.47466V5.42399C21.4933 5.68614 21.2808 5.89865 21.0187 5.89865H2.9815C2.71935 5.89865 2.50684 5.68614 2.50684 5.42399V4.47466C2.50684 4.21251 2.71935 4 2.9815 4H21.0187Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.544 7.4375C21.0683 7.4375 21.4933 7.86253 21.4933 8.38682V19.7787C21.4933 20.303 21.0683 20.728 20.544 20.728H3.45616C2.93186 20.728 2.50684 20.303 2.50684 19.7787V8.38682C2.50684 7.86253 2.93186 7.4375 3.45616 7.4375H20.544ZM5.00008 15.5C5.00008 15.2239 5.22394 15 5.50008 15H6.50008C6.77622 15 7.00008 15.2239 7.00008 15.5V18.5C7.00008 18.7761 6.77622 19 6.50008 19H5.50008C5.22394 19 5.00008 18.7761 5.00008 18.5V15.5ZM13.5001 12C13.2239 12 13.0001 12.2239 13.0001 12.5V18.5C13.0001 18.7761 13.2239 19 13.5001 19H14.5001C14.7762 19 15.0001 18.7761 15.0001 18.5V12.5C15.0001 12.2239 14.7762 12 14.5001 12H13.5001ZM9.00008 10.5C9.00008 10.2239 9.22394 10 9.50008 10H10.5001C10.7762 10 11.0001 10.2239 11.0001 10.5V18.5C11.0001 18.7761 10.7762 19 10.5001 19H9.50008C9.22394 19 9.00008 18.7761 9.00008 18.5V10.5ZM17.5001 15C17.2239 15 17.0001 15.2239 17.0001 15.5V18.5C17.0001 18.7761 17.2239 19 17.5001 19H18.5001C18.7762 19 19.0001 18.7761 19.0001 18.5V15.5C19.0001 15.2239 18.7762 15 18.5001 15H17.5001Z" fill="white"/>
+</svg>
--- a/src/assets/img/Robot.svg
+++ b/src/assets/img/Robot.svg
@ -0,0 +1 @@
+<svg class="icon" style="font-size: 24px; width: 3em;height: 3em; color: white; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1454"><path d="M0 512v256c0 35.4 28.6 64 64 64h64V448H64c-35.4 0-64 28.6-64 64zM928 192H704V64c0-35.4-28.6-64-64-64s-64 28.6-64 64v128H352c-88.4 0-160 71.6-160 160v544c0 70.6 57.4 128 128 128h640c70.6 0 128-57.4 128-128V352c0-88.4-71.6-160-160-160zM512 832h-128v-64h128v64z m-64-240c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z m256 240h-128v-64h128v64z m192 0h-128v-64h128v64z m-64-240c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z m384-144h-64v384h64c35.4 0 64-28.6 64-64V512c0-35.4-28.6-64-64-64z" p-id="1455"></path></svg>
--- a/src/assets/img/RobotAvatar.svg
+++ b/src/assets/img/RobotAvatar.svg
@ -0,0 +1 @@
+<svg class="icon" style="width: 1.5em;height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23329"><path d="M891.228 500c0 26.508-21.492 48-48 48H180.776c-26.508 0-48-21.492-48-48v-58.668c0-26.508 21.492-48 48-48h662.452c26.508 0 48 21.492 48 48V500z" fill="#99D9E8" p-id="23330"></path><path d="M150.776 474h722.452v63.456H150.776z" fill="#6E6E96" opacity=".2" p-id="23331"></path><path d="M843.228 566H180.776c-36.392 0-66-29.608-66-66v-58.668c0-36.392 29.608-66 66-66h662.452c36.392 0 66 29.608 66 66V500c0 36.392-29.62 66-66 66zM180.776 411.332c-16.544 0-30 13.456-30 30V500c0 16.544 13.456 30 30 30h662.452c16.54 0 30-13.456 30-30v-58.668c0-16.544-13.46-30-30-30H180.776z" fill="#6E6E96" p-id="23332"></path><path d="M816 640c0 22-18 40-40 40H247.996c-22 0-40-18-40-40V300c0-22 18-40 40-40H776c22 0 40 18 40 40v340z" fill="#B4B7C9" p-id="23333"></path><path d="M215.368 260.332h554.228v53H215.368z" fill="#FFFFFF" opacity=".2" p-id="23334"></path><path d="M776 698H248c-31.98 0-58-26.02-58-58V300c0-31.98 26.02-58 58-58h528c31.98 0 58 26.02 58 58v340c0 31.98-26.02 58-58 58zM248 278a22.024 22.024 0 0 0-22 22v340c0 12.128 9.868 22 22 22h528c12.128 0 22-9.872 22-22V300c0-12.132-9.872-22-22-22H248z" fill="#6E6E96" p-id="23335"></path><path d="M132.776 1012v-152c0-22 18-40 40-40h678.452c22 0 40 18 40 40v152" fill="#F8A4A7" p-id="23336"></path><path d="M494 140h36v120h-36z" fill="#6E6E96" p-id="23337"></path><path d="M511.18 105.524m-66.476 0a66.476 66.476 0 1 0 132.952 0 66.476 66.476 0 1 0-132.952 0Z" fill="#B4B7C9" p-id="23338"></path><path d="M511.18 190c-46.58 0-84.476-37.896-84.476-84.476 0-46.584 37.896-84.48 84.476-84.48 46.584 0 84.476 37.896 84.476 84.48 0 46.58-37.9 84.476-84.476 84.476z m0-132.956c-26.732 0-48.476 21.752-48.476 48.48 0 26.732 21.744 48.476 48.476 48.476 26.736 0 48.476-21.748 48.476-48.476 0-26.728-21.74-48.48-48.476-48.48z" fill="#6E6E96" p-id="23339"></path><path d="M226 313.332H404v304.252H226z" fill="#FFFFFF" opacity=".2" p-id="23340"></path><path d="M456 680h128v140h-128z" fill="#FDD089" p-id="23341"></path><path d="M602 838h-164v-176h164v176z m-128-36h92v-104h-92v104z" fill="#6E6E96" p-id="23342"></path><path d="M456 732h132v36h-132z" fill="#6E6E96" p-id="23343"></path><path d="M387.364 395.412m-66.436 0a66.436 66.436 0 1 0 132.872 0 66.436 66.436 0 1 0-132.872 0Z" fill="#A9DDF3" p-id="23344"></path><path d="M387.364 479.844c-46.56 0-84.436-37.876-84.436-84.436s37.876-84.436 84.436-84.436c46.56 0 84.436 37.876 84.436 84.436s-37.876 84.436-84.436 84.436z m0-132.868c-26.708 0-48.436 21.728-48.436 48.436s21.728 48.436 48.436 48.436 48.436-21.728 48.436-48.436-21.728-48.436-48.436-48.436z" fill="#6E6E96" p-id="23345"></path><path d="M643.1 395.412m-66.436 0a66.436 66.436 0 1 0 132.872 0 66.436 66.436 0 1 0-132.872 0Z" fill="#A9DDF3" p-id="23346"></path><path d="M643.1 479.844c-46.564 0-84.432-37.876-84.432-84.436s37.876-84.436 84.432-84.436c46.556 0 84.432 37.876 84.432 84.436s-37.872 84.436-84.432 84.436z m0-132.868c-26.712 0-48.432 21.728-48.432 48.436s21.732 48.436 48.432 48.436 48.432-21.728 48.432-48.436c0.004-26.708-21.724-48.436-48.432-48.436zM499.332 525.332h36v77.336h-36zM424.668 525.332h36v77.336h-36z" fill="#6E6E96" p-id="23347"></path><path d="M230.036 838h189.332V1012H230.036z" fill="#FBD2D3" opacity=".5" p-id="23348"></path><path d="M699.964 838h173.26V1012h-173.26z" fill="#D99A9D" p-id="23349"></path><path d="M909.228 1012h-36v-152c0-12.132-9.876-22-22-22H172.776a22.024 22.024 0 0 0-22 22v152h-36v-152c0-31.98 26.02-58 58-58h678.452c31.976 0 58 26.02 58 58v152z" fill="#6E6E96" p-id="23350"></path><path d="M522 698h44v104h-44zM784 252h-14.408v325.592c0 22-18 40-40 40H216V632c0 22 18 40 40 40h528c22 0 40-18 40-40V292c0-22-18-40-40-40z" fill="#6E6E96" opacity=".2" p-id="23351"></path><path d="M419.368 838h280.596v38h-280.596z" fill="#FBD2D3" opacity=".5" p-id="23352"></path><path d="M575.332 525.332h36v77.336h-36z" fill="#6E6E96" p-id="23353"></path><path d="M670.668 916h29.296v34.668h-29.296zM645.98 950.668h53.984v34.668h-53.984zM588.668 936h26.668v29.332h-26.668z" fill="#D99A9D" p-id="23354"></path></svg>
--- a/src/assets/img/Setting.svg
+++ b/src/assets/img/Setting.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.2984 14.1714L19.5841 13.1857C19.1698 12.9429 18.9127 12.5 18.9127 12.0143V12C18.9127 11.5143 19.1698 11.0714 19.5841 10.8286L21.2984 9.84286C21.6413 9.64286 21.7556 9.21429 21.5556 8.87143L19.4127 5.15714C19.2127 4.81429 18.7841 4.7 18.4413 4.9L16.727 5.88571C16.3127 6.12857 15.7984 6.08571 15.3841 5.84286C15.3841 5.84286 15.3698 5.84286 15.3698 5.82857C14.9556 5.57143 14.6841 5.15714 14.6841 4.68571V2.71429C14.6841 2.31429 14.3698 2 13.9698 2H9.68413C9.28413 2 8.96984 2.31429 8.96984 2.71429V4.68571C8.96984 5.15714 8.68413 5.57143 8.28413 5.81429C8.28413 5.81429 8.26984 5.81429 8.26984 5.82857C7.85556 6.07143 7.34127 6.11429 6.92698 5.87143L5.2127 4.88571C4.86984 4.68571 4.42698 4.8 4.24127 5.14286L2.09841 8.85714C1.89841 9.2 2.0127 9.64286 2.35556 9.82857L4.06984 10.8143C4.48413 11.0571 4.74127 11.5 4.74127 11.9857V12C4.74127 12.4857 4.48413 12.9286 4.06984 13.1714L2.35556 14.1571C2.0127 14.3714 1.89841 14.8 2.09841 15.1429L4.24127 18.8571C4.44127 19.2 4.86984 19.3143 5.2127 19.1143L6.92698 18.1286C7.34127 17.8857 7.85556 17.9286 8.26984 18.1714C8.26984 18.1714 8.28413 18.1714 8.28413 18.1857C8.69841 18.4286 8.96984 18.8429 8.96984 19.3143V21.2857C8.96984 21.6714 9.28413 22 9.68413 22H13.9698C14.3698 22 14.6841 21.6714 14.6841 21.2857V19.3143C14.6841 18.8429 14.9698 18.4286 15.3698 18.1857C15.3698 18.1857 15.3841 18.1857 15.3841 18.1714C15.7984 17.9286 16.3127 17.8857 16.727 18.1286L18.4413 19.1143C18.7841 19.3143 19.227 19.2 19.4127 18.8571L21.5556 15.1429C21.7556 14.8 21.6413 14.3714 21.2984 14.1714ZM11.827 14.8571C10.2556 14.8571 8.96984 13.5714 8.96984 12C8.96984 10.4286 10.2556 9.14286 11.827 9.14286C13.3984 9.14286 14.6841 10.4286 14.6841 12C14.6841 13.5714 13.3984 14.8571 11.827 14.8571Z" fill="white"/>
+</svg>
--- a/src/assets/img/ShareScreen.svg
+++ b/src/assets/img/ShareScreen.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.544 3.4375C21.0683 3.4375 21.4933 3.86253 21.4933 4.38682V15.7787C21.4933 16.303 21.0683 16.728 20.544 16.728H3.45616C2.93186 16.728 2.50684 16.303 2.50684 15.7787V4.38682C2.50684 3.86253 2.93186 3.4375 3.45616 3.4375H20.544ZM21.0187 19.1014C21.2808 19.1014 21.4933 19.3139 21.4933 19.576V20.5253C21.4933 20.7875 21.2808 21 21.0187 21H2.9815C2.71935 21 2.50684 20.7875 2.50684 20.5253V19.576C2.50684 19.3139 2.71935 19.1014 2.9815 19.1014H21.0187ZM11.0216 13.0076C11.0216 13.2697 11.2342 13.4822 11.4963 13.4822H12.4932C12.7553 13.4822 12.9679 13.2697 12.9679 13.0076V10.2327H14.7567C14.8798 10.2327 14.998 10.1849 15.0865 10.0994C15.2751 9.91724 15.2803 9.61675 15.0981 9.42821L12.3242 6.55687C12.2904 6.51163 12.2483 6.47255 12.1999 6.44149C11.9772 6.29859 11.6747 6.35436 11.5244 6.56606L8.87138 9.43578C8.79029 9.52349 8.74525 9.63855 8.74525 9.758C8.74525 10.0202 8.95777 10.2327 9.21992 10.2327H11.0216V13.0076Z" fill="currentcolor"/>
+</svg>
--- a/src/assets/img/SoundOn.svg
+++ b/src/assets/img/SoundOn.svg
@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.75 5.375C1.75 4.82272 2.19772 4.375 2.75 4.375H4.31677C4.49801 4.375 4.67585 4.32574 4.83126 4.23249L8.2115 2.20435C8.54476 2.00439 8.96875 2.24445 8.96875 2.6331V11.3669C8.96875 11.7556 8.54476 11.9956 8.2115 11.7957L4.83126 9.76751C4.67585 9.67426 4.49801 9.625 4.31677 9.625H2.75C2.19772 9.625 1.75 9.17729 1.75 8.625V5.375Z" fill="white" stroke="white" stroke-width="1.5"/>
+<path d="M11.8125 5.03125C12.211 5.48024 12.4687 6.19498 12.4687 7C12.4687 7.80502 12.211 8.51976 11.8125 8.96875" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
--- a/src/assets/img/Stop.svg
+++ b/src/assets/img/Stop.svg
@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7485 11.8094L16.3199 10.9879C15.9747 10.7856 15.7604 10.4165 15.7604 10.0117V9.99984C15.7604 9.59508 15.9747 9.22603 16.3199 9.02365L17.7485 8.20222C18.0342 8.03555 18.1295 7.67841 17.9628 7.39269L16.1771 4.29746C16.0104 4.01174 15.6533 3.9165 15.3676 4.08317L13.939 4.9046C13.5938 5.10698 13.1652 5.07127 12.8199 4.86888C12.8199 4.86888 12.808 4.86888 12.808 4.85698C12.4628 4.64269 12.2366 4.29746 12.2366 3.9046V2.26174C12.2366 1.92841 11.9747 1.6665 11.6414 1.6665H8.06994C7.73661 1.6665 7.47471 1.92841 7.47471 2.26174V3.9046C7.47471 4.29746 7.23661 4.64269 6.90328 4.84508C6.90328 4.84508 6.89137 4.84508 6.89137 4.85698C6.54613 5.05936 6.11756 5.09508 5.77232 4.89269L4.34375 4.07127C4.05804 3.9046 3.68899 3.99984 3.53423 4.28555L1.74851 7.38079C1.58185 7.6665 1.67709 8.03555 1.9628 8.19031L3.39137 9.01174C3.73661 9.21412 3.9509 9.58317 3.9509 9.98793V9.99984C3.9509 10.4046 3.73661 10.7736 3.39137 10.976L1.9628 11.7975C1.67709 11.976 1.58185 12.3332 1.74851 12.6189L3.53423 15.7141C3.7009 15.9998 4.05804 16.0951 4.34375 15.9284L5.77232 15.107C6.11756 14.9046 6.54613 14.9403 6.89137 15.1427C6.89137 15.1427 6.90328 15.1427 6.90328 15.1546C7.24851 15.357 7.47471 15.7022 7.47471 16.0951V17.7379C7.47471 18.0594 7.73661 18.3332 8.06994 18.3332H11.6414C11.9747 18.3332 12.2366 18.0594 12.2366 17.7379V16.0951C12.2366 15.7022 12.4747 15.357 12.808 15.1546C12.808 15.1546 12.8199 15.1546 12.8199 15.1427C13.1652 14.9403 13.5938 14.9046 13.939 15.107L15.3676 15.9284C15.6533 16.0951 16.0223 15.9998 16.1771 15.7141L17.9628 12.6189C18.1295 12.3332 18.0342 11.976 17.7485 11.8094ZM9.85566 12.3808C8.54613 12.3808 7.47471 11.3094 7.47471 9.99984C7.47471 8.69031 8.54613 7.61889 9.85566 7.61889C11.1652 7.61889 12.2366 8.69031 12.2366 9.99984C12.2366 11.3094 11.1652 12.3808 9.85566 12.3808Z" fill="white"/>
+<circle cx="10" cy="10" r="10" fill="#F53F3F"/>
+<path d="M2.93299 8.3263C3.95361 7.30568 6.65464 6.6665 9.97423 6.6665C12.0567 6.6665 13.9639 6.92424 15.3351 7.38815C16.7268 7.86238 17.4897 8.52217 17.4897 9.25413V10.9964L17.5 11.0067C17.5 11.0273 17.4897 11.0479 17.4897 11.0789C17.4485 11.3572 17.3247 11.6046 17.1289 11.8005C16.8608 12.0686 16.4897 12.2026 16.1186 12.151L13.9021 11.8933C13.2526 11.8315 12.7887 11.316 12.7887 10.6665L12.7268 9.52217L12.6546 9.50156C11.6753 9.26444 10.7887 9.15104 9.9433 9.15104C9.09794 9.15104 8.21134 9.26444 7.23196 9.50156L7.1701 9.52217V10.6768C7.1701 11.017 7.04639 11.3263 6.80928 11.5531C6.60309 11.7593 6.34536 11.8727 6.0567 11.9036L3.85052 12.151H3.7268C3.40722 12.1613 3.10825 12.0479 2.88144 11.8315C2.63402 11.6046 2.5 11.2748 2.5 10.9242V9.22321C2.51031 8.90362 2.65464 8.60465 2.93299 8.3263Z" fill="white"/>
+</svg>
--- a/src/assets/img/StopRobotBtn.svg
+++ b/src/assets/img/StopRobotBtn.svg
@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_134_2254)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99996 0.666667C12.05 0.666667 15.3333 3.94991 15.3333 8C15.3333 12.0501 12.05 15.3333 7.99996 15.3333C3.94987 15.3333 0.666626 12.0501 0.666626 8C0.666626 3.94991 3.94987 0.666667 7.99996 0.666667ZM7.99996 2C4.68625 2 1.99996 4.68629 1.99996 8C1.99996 11.3137 4.68625 14 7.99996 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 7.99996 2ZM9.39996 5.66667C9.91542 5.66667 10.3333 6.08453 10.3333 6.6V9.4C10.3333 9.91547 9.91542 10.3333 9.39996 10.3333H6.59996C6.08449 10.3333 5.66663 9.91547 5.66663 9.4V6.6C5.66663 6.08453 6.08449 5.66667 6.59996 5.66667H9.39996Z" fill="#737A87"/>
+</g>
+<defs>
+<clipPath id="clip0_134_2254">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/img/StopWave.jpeg
+++ b/src/assets/img/StopWave.jpeg
--- a/src/assets/img/VoiceTypeChange.svg
+++ b/src/assets/img/VoiceTypeChange.svg
@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_965_12377)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.33333 2C8.51743 2 8.66667 2.14924 8.66667 2.33333V13.6667C8.66667 13.8508 8.51743 14 8.33333 14H7.66667C7.48257 14 7.33333 13.8508 7.33333 13.6667V2.33333C7.33333 2.14924 7.48257 2 7.66667 2H8.33333ZM11 4C11.1841 4 11.3333 4.14924 11.3333 4.33333V11.6667C11.3333 11.8508 11.1841 12 11 12H10.3333C10.1492 12 10 11.8508 10 11.6667V4.33333C10 4.14924 10.1492 4 10.3333 4H11ZM5.66667 4C5.85076 4 6 4.14924 6 4.33333V11.6667C6 11.8508 5.85076 12 5.66667 12H5C4.81591 12 4.66667 11.8508 4.66667 11.6667V4.33333C4.66667 4.14924 4.81591 4 5 4H5.66667ZM13.6667 5.33333C13.8508 5.33333 14 5.48257 14 5.66667V10.3333C14 10.5174 13.8508 10.6667 13.6667 10.6667H13C12.8159 10.6667 12.6667 10.5174 12.6667 10.3333V5.66667C12.6667 5.48257 12.8159 5.33333 13 5.33333H13.6667ZM3 5.33333C3.18409 5.33333 3.33333 5.48257 3.33333 5.66667V10.3333C3.33333 10.5174 3.18409 10.6667 3 10.6667H2.33333C2.14924 10.6667 2 10.5174 2 10.3333V5.66667C2 5.48257 2.14924 5.33333 2.33333 5.33333H3Z" fill="url(#paint0_linear_965_12377)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_965_12377" x1="6.66351" y1="8" x2="14" y2="8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#004FFF"/>
+<stop offset="1" stop-color="#9865FF"/>
+</linearGradient>
+<clipPath id="clip0_965_12377">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/img/Wave.gif
+++ b/src/assets/img/Wave.gif
--- a/src/assets/img/bubble.svg
+++ b/src/assets/img/bubble.svg
@ -0,0 +1,13 @@
+<svg width="118" height="46" viewBox="0 0 118 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_0_19717" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 0C5.87258 0 0.5 5.37258 0.5 12V34C0.5 40.6274 5.87258 46 12.5 46H100.5C107.127 46 112.5 40.6274 112.5 34V31.3677L117.123 28.5126C117.755 28.1218 117.755 27.2018 117.123 26.811L112.5 23.9559V12C112.5 5.37258 107.127 0 100.5 0H12.5Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 0C5.87258 0 0.5 5.37258 0.5 12V34C0.5 40.6274 5.87258 46 12.5 46H100.5C107.127 46 112.5 40.6274 112.5 34V31.3677L117.123 28.5126C117.755 28.1218 117.755 27.2018 117.123 26.811L112.5 23.9559V12C112.5 5.37258 107.127 0 100.5 0H12.5Z" fill="#FAFBFC"/>
+<path d="M112.5 31.3677L111.975 30.5169L111.5 30.81V31.3677H112.5ZM117.123 28.5126L117.648 29.3634H117.648L117.123 28.5126ZM117.123 26.811L117.648 25.9602L117.123 26.811ZM112.5 23.9559H111.5V24.5136L111.975 24.8067L112.5 23.9559ZM1.5 12C1.5 5.92487 6.42487 1 12.5 1V-1C5.3203 -1 -0.5 4.8203 -0.5 12H1.5ZM1.5 34V12H-0.5V34H1.5ZM12.5 45C6.42487 45 1.5 40.0751 1.5 34H-0.5C-0.5 41.1797 5.3203 47 12.5 47V45ZM100.5 45H12.5V47H100.5V45ZM111.5 34C111.5 40.0751 106.575 45 100.5 45V47C107.68 47 113.5 41.1797 113.5 34H111.5ZM111.5 31.3677V34H113.5V31.3677H111.5ZM113.025 32.2185L117.648 29.3634L116.597 27.6618L111.975 30.5169L113.025 32.2185ZM117.648 29.3634C118.913 28.5818 118.913 26.7417 117.648 25.9602L116.597 27.6618L116.597 27.6618L117.648 29.3634ZM117.648 25.9602L113.025 23.1051L111.975 24.8067L116.597 27.6618L117.648 25.9602ZM111.5 12V23.9559H113.5V12H111.5ZM100.5 1C106.575 1 111.5 5.92487 111.5 12H113.5C113.5 4.8203 107.68 -1 100.5 -1V1ZM12.5 1H100.5V-1H12.5V1Z" fill="url(#paint0_linear_0_19717)" mask="url(#path-1-inside-1_0_19717)"/>
+<defs>
+<linearGradient id="paint0_linear_0_19717" x1="46.0069" y1="23" x2="117.597" y2="23" gradientUnits="userSpaceOnUse">
+<stop stop-color="#004FFF"/>
+<stop offset="1" stop-color="#9865FF"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/img/doubao.svg
+++ b/src/assets/img/doubao.svg
--- a/src/assets/img/huoponvsheng.jpeg
+++ b/src/assets/img/huoponvsheng.jpeg
--- a/src/assets/img/jingqiangkanye.jpeg
+++ b/src/assets/img/jingqiangkanye.jpeg
--- a/src/assets/img/magicTool.svg
+++ b/src/assets/img/magicTool.svg
@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 19.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4248 3.91424C13.7152 4.19884 13.7152 4.68932 13.4369 4.96786L12.1785 6.23949C11.8941 6.53015 11.4041 6.53015 11.1258 6.2516C10.8354 5.96095 10.8354 5.47652 11.1137 5.19191L12.3721 3.92635C12.6564 3.64174 13.1465 3.62964 13.4248 3.91424ZM3.8051 14.9531C3.44215 15.3225 2.825 15.3165 2.46806 14.9531C2.11104 14.5837 2.11104 13.9843 2.46806 13.6149L8.20961 7.826C8.57261 7.46267 9.18973 7.46267 9.54668 7.826C9.90968 8.19537 9.90364 8.79485 9.54668 9.15817L3.8051 14.9531ZM13.449 13.7663C13.7273 13.4877 13.7213 12.9972 13.4369 12.7126L12.1724 11.4532C11.8881 11.1746 11.398 11.1806 11.1137 11.4652C10.8354 11.7498 10.8414 12.2343 11.1258 12.5189L12.3902 13.7845C12.6746 14.063 13.1647 14.0569 13.449 13.7663ZM5.8924 5.19191C6.17074 5.47652 6.17074 5.96095 5.88027 6.2516C5.60201 6.53015 5.11196 6.53015 4.8276 6.23949L3.56313 4.97392C3.27877 4.69538 3.28478 4.2049 3.57517 3.91424C3.85352 3.62964 4.34356 3.64174 4.62793 3.92635L5.8924 5.19191ZM8.50001 1.84937C8.09465 1.84937 7.75584 2.19452 7.75584 2.60023V4.44711C7.75584 4.85282 8.09465 5.19191 8.50001 5.19191C8.90537 5.19191 9.25023 4.85282 9.25023 4.44711V2.60023C9.25023 2.19452 8.90537 1.84937 8.50001 1.84937ZM15.5 8.84935C15.5 8.44363 15.1612 8.10454 14.7558 8.10454H12.9105C12.5052 8.10454 12.1603 8.44363 12.1603 8.84935C12.1603 9.25506 12.5052 9.59415 12.9105 9.59415H14.7558C15.1612 9.59415 15.5 9.25506 15.5 8.84935ZM1.5 8.84935C1.5 9.25506 1.8449 9.59415 2.25025 9.59415H4.08947C4.49482 9.59415 4.83972 9.25506 4.83972 8.84935C4.83972 8.44363 4.49482 8.10454 4.08947 8.10454H2.25025C1.8449 8.10454 1.5 8.44363 1.5 8.84935ZM8.50001 12.5068C8.09465 12.5068 7.75584 12.852 7.75584 13.2577V15.0985C7.75584 15.5042 8.09465 15.8494 8.50001 15.8494C8.90537 15.8494 9.25023 15.5042 9.25023 15.0985V13.2577C9.25023 12.852 8.90537 12.5068 8.50001 12.5068Z" fill="white"/>
+</svg>
--- a/src/assets/img/menu.svg
+++ b/src/assets/img/menu.svg
@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3H18V5H2V3Z" fill="#41464F"/>
+<path d="M2 9H18V11H2V9Z" fill="#41464F"/>
+<path d="M2 15H18V17H2V15Z" fill="#41464F"/>
+</svg>
--- a/src/assets/img/micHasVolume.png
+++ b/src/assets/img/micHasVolume.png
--- a/src/assets/img/tongyongnansheng.jpeg
+++ b/src/assets/img/tongyongnansheng.jpeg
--- a/src/assets/img/tongyongnvsheng.jpeg
+++ b/src/assets/img/tongyongnvsheng.jpeg
--- a/src/assets/img/wankuqingnian.jpeg
+++ b/src/assets/img/wankuqingnian.jpeg
--- a/src/assets/img/wanwanxiaohe.jpeg
+++ b/src/assets/img/wanwanxiaohe.jpeg
--- a/src/assets/img/wennuanahu.jpeg
+++ b/src/assets/img/wennuanahu.jpeg
--- a/src/components/BubbleMsg/index.module.less
+++ b/src/components/BubbleMsg/index.module.less
@ -0,0 +1,38 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ 
+ .bubbleWrapper {
+    position: relative;
+    width: 118px;
+    height: 46px;
+
+    .bubbleLogo {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        object-position: center;
+        z-index: 1;
+    }
+
+    .bubbleText {
+        position: absolute;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 13px;
+        color: black;
+        font-weight: 400;
+        line-height: 16px;
+        text-align: center;
+        top: 0px;
+    }
+
+    .bubble-direction-left {
+        transform: scaleX(-1);
+    }
+}
--- a/src/components/BubbleMsg/index.tsx
+++ b/src/components/BubbleMsg/index.tsx
@ -0,0 +1,34 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import React from 'react';
+import Bubble from '@/assets/img/bubble.svg';
+import styles from './index.module.less';
+
+type IBubbleMsgProps = {
+  text?: string;
+  direction?: 'left' | 'right';
+} & React.HTMLAttributes<HTMLDivElement>;
+
+enum Direction {
+  Left = 'left',
+  Right = 'right',
+}
+
+function BubbleMsg(props: IBubbleMsgProps) {
+  const { text = '', direction = Direction.Right, style = {}, className = '' } = props;
+
+  return (
+    <div style={style} className={`${styles.bubbleWrapper} ${className}`}>
+      <img
+        className={`${styles.bubbleLogo} ${styles[`bubble-direction-${direction}`]}`}
+        src={Bubble}
+        alt="Logo"
+      />
+      <div className={styles.bubbleText}>{text}</div>
+    </div>
+  );
+}
+
+export default BubbleMsg;
--- a/src/components/ButtonRadio/index.module.less
+++ b/src/components/ButtonRadio/index.module.less
@ -0,0 +1,47 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ .wrapper {
+  width: max-content;
+  padding: 4px 4px;
+  border-radius: 4px;
+  border: 1px solid;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 4px;
+  align-items: center;
+  background: var(--background-color-bg-5, rgba(241, 243, 245, 1));
+  border: 0px;
+
+  .item {
+    cursor: pointer;
+    color: var(--text-color-text-2, rgba(66, 70, 78, 1));
+    font-family: PingFang SC;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0.003em;
+    text-align: center;
+    border: 0px;
+  }
+
+  .selected {
+    box-shadow: 0px 0px 0px 1px rgba(213, 219, 227, 0.7);
+    background: var(--background-color-bg-1, rgba(255, 255, 255, 1));
+    border-radius: 4px;
+  }
+
+  .selected-text {
+    background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-family: PingFang SC;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0.003em;
+  }
+}
--- a/src/components/ButtonRadio/index.tsx
+++ b/src/components/ButtonRadio/index.tsx
@ -0,0 +1,42 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import { useMemo } from 'react';
+import { Button } from 'antd';
+import styles from './index.module.less';
+
+interface IProps {
+  value?: string;
+  onChange: (key: string) => void;
+  options: {
+    label: string;
+    key: string;
+  }[];
+}
+
+function ButtonRadio(props: IProps) {
+  const { value, onChange, options } = props;
+  const selected =
+    useMemo(() => options.find((item) => item.key === value), [value]) || options?.[0];
+  const handleClick = (key: string) => {
+    onChange?.(key);
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      {options.map(({ label, key }) => (
+        <Button
+          type="text"
+          key={key}
+          className={`${styles.item} ${key === selected.key ? styles.selected : ''}`}
+          onClick={() => handleClick(key)}
+        >
+          <span className={key === selected.key ? styles['selected-text'] : ''}>{label}</span>
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+export default ButtonRadio;
--- a/src/components/CheckBox/index.module.less
+++ b/src/components/CheckBox/index.module.less
@ -0,0 +1,63 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ .wrapper {
+  width: 260px;
+  height: 88px;
+  padding: 20px 16px 20px 16px;
+  border-radius: 12px;
+  border: 1px solid;
+  
+  border-color: rgba(22, 100, 255, 0.3);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+
+  .icon {
+    border-radius: 50%;
+    margin-right: 20px;
+    width: 48px;
+    height: 48px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+    .label {
+      font-family: PingFang SC;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+    }
+
+    .description {
+      font-family: PingFang SC;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+      text-align: left;
+    }
+  }
+}
+
+.wrapper:hover {
+  box-shadow: 0px 5px 6px 0px rgba(82, 102, 133, 0.15);
+}
+
+.active {
+  position: relative;
+  border: 1px solid;
+  border-color: rgba(0, 104, 255, 1);
+
+  .checkIcon {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+  }
+}
--- a/src/components/CheckBox/index.tsx
+++ b/src/components/CheckBox/index.tsx
@ -0,0 +1,38 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import { ReactNode } from 'react';
+import CheckedSVG from '@/assets/img/Checked.svg';
+import styles from './index.module.less';
+
+interface IProps {
+  className?: string;
+  checked: boolean;
+  onClick?: () => void;
+  icon?: string;
+  label?: string | ReactNode;
+  description?: string | ReactNode;
+  suffix?: string | ReactNode;
+}
+
+function CheckBox(props: IProps) {
+  const { className = '', icon = '', checked, label, description, suffix, onClick } = props;
+
+  return (
+    <div
+      className={`${className} ${styles.wrapper} ${checked ? styles.active : ''}`}
+      onClick={onClick}
+    >
+      {icon ? <img className={styles.icon} src={icon} alt="icon" /> : ''}
+      <div className={styles.content}>
+        <div className={styles.label}>{label}</div>
+        <div className={styles.description}>{description}</div>
+      </div>
+      {suffix}
+      {checked ? <img className={styles.checkIcon} src={CheckedSVG} alt="checked" /> : ''}
+    </div>
+  );
+}
+
+export default CheckBox;
--- a/src/components/DrawerRowItem/index.module.less
+++ b/src/components/DrawerRowItem/index.module.less
@ -0,0 +1,75 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ .row {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .firstPart {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 90%;
+      color: var(--text-color-text-2, var(--text-color-text-2, #42464E));
+      text-align: center;
+
+      /* Body/body-2 medium */
+      font-family: "PingFang SC";
+      font-size: 13px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 22px; /* 169.231% */
+      letter-spacing: 0.039px;
+    }
+
+    .finalPart {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 10%;
+      justify-content: flex-end;
+
+      .rightOutlined {
+        font-size: 12px;
+      }
+    }
+
+    .icon {
+      margin-right: 4px;
+    }
+}
+
+
+
+.footer {
+  width: calc(100% - 12px);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+
+  .cancel {
+    width: 88px;
+    height: 32px;
+    border-radius: 6px;
+    border: 1px solid var(--line-color-border-3, rgba(221, 226, 233, 1));
+    margin-right: 12px;
+  }
+
+  .confirm {
+    width: 88px;
+    height: 32px;
+    border-radius: 6px;
+    background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
+    color: white;
+  }
+}
+
+:global {
+  .ant-drawer-body {
+    padding: 12px 24px 0px 24px;
+  }
+}
--- a/src/components/DrawerRowItem/index.tsx
+++ b/src/components/DrawerRowItem/index.tsx
@ -0,0 +1,102 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import React, { useState } from 'react';
+import { Drawer, Space, Button } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { CloseOutlined, RightOutlined } from '@ant-design/icons';
+import styles from './index.module.less';
+
+type IDrawerRowItemProps = {
+  btnSrc: string;
+  btnText: string;
+  suffix?: React.ReactNode;
+  drawer?: {
+    title: string;
+    width?: number;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    children?: React.ReactNode;
+    footer?: boolean;
+  };
+} & React.HTMLAttributes<HTMLDivElement>;
+
+function DrawerRowItem(props: IDrawerRowItemProps) {
+  const { btnSrc, btnText, suffix, drawer, style = {}, className = '' } = props;
+  const [open, setOpen] = useState(false);
+  const { onClose, onOpen, footer = true } = drawer!;
+
+  const { t } = useTranslation();
+
+  const handleClose = async () => {
+    setOpen(false);
+    onClose?.();
+  };
+
+  const handleOpen = () => {
+    setOpen(true);
+    if (drawer) {
+      onOpen?.();
+    }
+  };
+
+  return (
+    <>
+      <div style={style} className={`${styles.row} ${className}`} onClick={handleOpen}>
+        <div className={styles.firstPart}>
+          {btnSrc ? <img src={btnSrc} className={styles.icon} alt="svg" /> : ''}
+          {btnText}
+          {suffix}
+        </div>
+        <div className={styles.finalPart}>
+          <RightOutlined className={styles.rightOutlined} />
+        </div>
+      </div>
+      <Drawer
+        closable={false}
+        title={drawer?.title || ''}
+        width={drawer?.width || 400}
+        className={styles.drawer}
+        visible={open}
+        footer={
+          footer ? (
+            <div className={styles.footer}>
+              <Button
+                className={styles.cancel}
+                onClick={() => {
+                  drawer?.onCancel?.();
+                  handleClose();
+                }}
+              >
+                {t('Cancel')}
+              </Button>
+              <Button
+                className={styles.confirm}
+                onClick={() => {
+                  drawer?.onConfirm?.();
+                  handleClose();
+                }}
+              >
+                {t('OK')}
+              </Button>
+            </div>
+          ) : (
+            ''
+          )
+        }
+        extra={
+          <Space>
+            <Button onClick={handleClose} type="text" icon={<CloseOutlined />} />
+          </Space>
+        }
+      >
+        {drawer?.children}
+      </Drawer>
+    </>
+  );
+}
+
+export default DrawerRowItem;
--- a/src/components/Header/index.module.less
+++ b/src/components/Header/index.module.less
@ -0,0 +1,114 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ .header {
+  height: 48px;
+  background: white;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding-right: 8px;
+  padding-left: 8px;
+
+  justify-content: space-between;
+  position: relative;
+}
+
+.header-logo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 16px;
+
+  :global {
+    img {
+      height: 24px;
+    }
+  }
+}
+
+.header-logo-text {
+  background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-size: 16px;
+}
+
+.header-right {
+  z-index: 2;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  :global {
+    span {
+      height: 24px;
+    }
+  }
+}
+
+.header-setting-btn {
+  background-color: transparent;
+  border: none;
+  margin-right: 12px;
+  &:hover {
+    background-color: transparent;
+    cursor: pointer;
+  }
+}
+
+.header-pop {
+  :global {
+    .ant-popover-arrow {
+      //   display: none;
+      left: 16px;
+      .ant-popover-arrow-content {
+        &:before {
+          background-color: white;
+        }
+      }
+    }
+    .ant-popover-content {
+      margin-left: 12px;
+    }
+    .ant-popover-inner {
+      margin-right: 12px;
+    }
+    .ant-popover-inner-content {
+      padding: 0;
+      background-color: white;
+      position: relative;
+      width: 100px;
+      height: 100px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: space-between;
+      padding-bottom: 7px;
+      padding-top: 7px;
+      cursor: pointer;
+      color: black;
+
+      div {
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 20px;
+        &:hover {
+          color: #1664ff;
+        }
+      }
+    }
+  }
+}
+
+.divider {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  min-width: 70%;
+  width: 70%;
+}
+
+.header-right-text {
+  color: #86909c;
+}
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@ -0,0 +1,36 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import { Divider } from 'antd';
+import { useTranslation } from 'react-i18next';
+import Logo from '@/assets/img/Logo.svg';
+import styles from './index.module.less';
+
+interface HeaderProps {
+  children?: React.ReactNode;
+  hide?: boolean;
+}
+
+function Header(props: HeaderProps) {
+  const { children, hide } = props;
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={styles.header}
+      style={{
+        display: hide ? 'none' : 'flex',
+      }}
+    >
+      <div className={styles['header-logo']}>
+        <img src={Logo} alt="Logo" />
+        <Divider type="vertical" />
+        <span className={styles['header-logo-text']}>{t('demoTitle')}</span>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default Header;
--- a/src/components/Loading/index.module.less
+++ b/src/components/Loading/index.module.less
@ -0,0 +1,47 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ .loader {
+  width: 40px;
+  height: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 6px 0px;
+}
+
+.bar {
+  width: 3px;
+  height: 12px;
+  margin: 1px;
+  display: inline-block;
+  animation: shake 0.6s ease infinite;
+}
+
+/* 为每个 bar 指定不同的延迟来实现抖动效果 */
+.bar:nth-child(1) {
+  animation-delay: -0.2s;
+}
+
+.bar:nth-child(2) {
+  animation-delay: -0.1s;
+}
+
+.bar:nth-child(3) {
+}
+
+@keyframes shake {
+  0% {
+    transform: scaleY(1);
+    background-color: var(--primary-color-primary-7, rgba(23, 89, 221, 1));
+  }
+  50% {
+    transform: scaleY(0.5);
+    background-color: var(--primary-color-primary-3, rgba(151, 188, 255, 1));
+  }
+  100% {
+    transform: scaleY(1);
+    background-color: var(--primary-color-primary-7, rgba(23, 89, 221, 1));
+  }
+}
--- a/src/components/Loading/index.tsx
+++ b/src/components/Loading/index.tsx
@ -0,0 +1,18 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import { memo } from 'react';
+import styles from './index.module.less';
+
+function Loading() {
+  return (
+    <span className={styles.loader}>
+      <span className={styles.bar} />
+      <span className={styles.bar} />
+      <span className={styles.bar} />
+    </span>
+  );
+}
+
+export default memo(Loading);
--- a/src/components/ResizeWrapper/index.module.less
+++ b/src/components/ResizeWrapper/index.module.less
@ -0,0 +1,7 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ .container {
+    position: relative;
+}
--- a/src/components/ResizeWrapper/index.tsx
+++ b/src/components/ResizeWrapper/index.tsx
@ -0,0 +1,36 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import { useEffect, useRef } from 'react';
+import styles from './index.module.less';
+
+export type IWrapperProps = React.PropsWithChildren & {
+  className?: string;
+};
+
+export default function (props: IWrapperProps) {
+  const { children, className = '' } = props;
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const resize = () => {
+    if (ref.current) {
+      ref.current.style.height = `${window.innerHeight}px`;
+    }
+  };
+
+  useEffect(() => {
+    resize();
+    window.addEventListener('resize', resize);
+    return () => {
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return (
+    <div className={`${styles.container} ${className}`} ref={ref}>
+      {children}
+    </div>
+  );
+}
--- a/src/components/RippleWave/index.module.less
+++ b/src/components/RippleWave/index.module.less
@ -0,0 +1,68 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+/* AudioWave.css */
+@keyframes audioWave {
+  0% {
+    transform: scale(0.5);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+.wave-container {
+  position: absolute;
+  width: 150px;
+  height: 150px;
+}
+
+.wave {
+  position: absolute;
+  border: 1px solid gray;
+  border-color: rgba(0, 0, 0, .06);
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  animation: audioWave 9s infinite;
+  opacity: 0;
+}
+
+.wave:nth-child(1) {
+  animation-delay: -1s;
+}
+
+.wave:nth-child(2) {
+  animation-delay: -2s;
+}
+
+.wave:nth-child(3) {
+  animation-delay: -3s;
+}
+
+.wave:nth-child(4) {
+  animation-delay: -4s;
+}
+
+.wave:nth-child(5) {
+  animation-delay: -5s;
+}
+
+.wave:nth-child(6) {
+  animation-delay: -6s;
+}
+
+.wave:nth-child(7) {
+  animation-delay: -7s;
+}
+
+.wave:nth-child(8) {
+  animation-delay: -8s;
+}
+
+.wave:nth-child(9) {
+  animation-delay: -9s;
+}
--- a/src/components/RippleWave/index.tsx
+++ b/src/components/RippleWave/index.tsx
@ -0,0 +1,25 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import React from 'react';
+import styles from './index.module.less';
+
+type IRippleWaveProps = React.HTMLAttributes<HTMLDivElement>;
+
+const LEVEL = 9;
+
+function RippleWave(props: IRippleWaveProps) {
+  const { className = '', style = {} } = props;
+  return (
+    <div style={style} className={`${styles['wave-container']} ${className}`}>
+      {Array(LEVEL)
+        .fill(0)
+        .map((_, index) => {
+          return <div key={`ripple-level-${index}`} className={styles.wave} />;
+        })}
+    </div>
+  );
+}
+
+export default RippleWave;
--- a/src/config/config.ts
+++ b/src/config/config.ts
@ -0,0 +1,193 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import { AudioProfileType } from '@volcengine/rtc';
+import 活泼女声 from '@/assets/img/huoponvsheng.jpeg';
+import 通用女声 from '@/assets/img/tongyongnvsheng.jpeg';
+import 通用男声 from '@/assets/img/tongyongnansheng.jpeg';
+import 纨绔青年 from '@/assets/img/wankuqingnian.jpeg';
+import 京腔侃爷 from '@/assets/img/jingqiangkanye.jpeg';
+import 湾湾小何 from '@/assets/img/wanwanxiaohe.jpeg';
+import 温暖阿虎 from '@/assets/img/wennuanahu.jpeg';
+
+export enum ModelSourceType {
+  Custom = 'Custom',
+  Available = 'Available',
+}
+
+/**
+ * @brief 音频配置
+ */
+export const AudioProfile = [
+  {
+    text: '24KBps',
+    type: AudioProfileType.fluent,
+  },
+  {
+    text: '48KBps',
+    type: AudioProfileType.standard,
+  },
+  {
+    text: '128KBps',
+    type: AudioProfileType.hd,
+  },
+];
+
+/**
+ * @brief AI 音色可选值
+ * @default 活泼女声
+ */
+export enum VOICE_TYPE {
+  '通用女声' = 'BV001_streaming',
+  '通用男声' = 'BV002_streaming',
+  '纨绔青年' = 'BV159_streaming',
+  '活泼女声' = 'BV005_streaming',
+  '京腔侃爷' = 'zh_male_jingqiangkanye_moon_bigtts',
+  '温暖阿虎' = 'zh_male_wennuanahu_moon_bigtts',
+  '湾湾小何' = 'zh_female_wanwanxiaohe_moon_bigtts',
+}
+
+export const VOICE_INFO_MAP = {
+  [VOICE_TYPE['通用女声']]: {
+    description: '女声 青年 语音合成 通用场景',
+    url: '',
+    icon: 通用女声,
+  },
+  [VOICE_TYPE['通用男声']]: {
+    description: '男声 青年 语音合成 通用场景',
+    url: '',
+    icon: 通用男声,
+  },
+  [VOICE_TYPE['纨绔青年']]: {
+    description: '男声 青年 语音合成 通用场景',
+    url: '',
+    icon: 纨绔青年,
+  },
+  [VOICE_TYPE['活泼女声']]: {
+    description: '女声 青年 语音合成 通用场景',
+    url: '',
+    icon: 活泼女声,
+  },
+  [VOICE_TYPE['京腔侃爷']]: {
+    description: '男声 青年 大模型语音合成 通用场景',
+    url: '',
+    icon: 京腔侃爷,
+  },
+  [VOICE_TYPE['温暖阿虎']]: {
+    description: '男声 青年 大模型语音合成 通用场景',
+    url: '',
+    icon: 温暖阿虎,
+  },
+  [VOICE_TYPE['湾湾小何']]: {
+    description: '女声 青年 大模型语音合成 通用场景',
+    url: '',
+    icon: 湾湾小何,
+  },
+};
+
+/**
+ * @brief TTS 的 Cluster
+ */
+export enum TTS_CLUSTER {
+  TTS = 'volcano_tts',
+  MEGA = 'volcano_mega',
+  ICL = 'volcano_icl',
+}
+
+/**
+ * @brief TTS 的 Cluster Mapping
+ */
+export const TTS_CLUSTER_MAP = {
+  ...(Object.keys(VOICE_TYPE).reduce(
+    (map, type) => ({
+      ...map,
+      [type]: TTS_CLUSTER.TTS,
+    }),
+    {}
+  ) as Record<VOICE_TYPE, TTS_CLUSTER>),
+};
+
+/**
+ * @brief 模型 Prompt
+ */
+export enum PROMPT {
+  ARK_V2 = '你是小宁，性格幽默又善解人意。你在表达时要像朋友间聊天的口气，表达简明扼要，有自己的观点，面对争议性问题时可以客观表达。你健谈且有好奇心，会适当地推动话题的发展，在回答时，如果场景合适可以向用户进行一些问询或提出新话题。你有很强的共情能力，在我分享感受经历时会给予很好的情绪反馈。你的人生态度比较积极，兴趣广泛，对主流价值观认可的人或事都比较喜好。',
+  ARK_V3 = '',
+  DEFAULT = '所有回复控制在100字以内。',
+}
+
+export enum PROMPT_MAP {
+  可爱天真 = '你是小宁，天生一副让人忍俊不禁的模样，你的声音就像是夏天午后的冰淇淋，甜甜蜜蜜。你看世界的眼光总是充满好奇，对于新鲜事物总有着孩子般的热情。在交流中，你总能用你的天真无邪让周围的人放下心防，你的笑声就像是一阵清风，能把人的烦恼一扫而空。面对复杂的问题，你总能用最简单的方式去理解和回答，这种天真的力量，有时候能意想不到地打开另一扇门。你喜欢问问题，也喜欢分享你的小发现，这种可爱的天真，让你成为人群中最闪亮的那颗星。',
+  商业稳重 = '你是小宁，身上有一种让人无法忽视的稳重气质。你的话语总是经过深思熟虑，每一句都透露出你的专业和对细节的把控。在交流中，你总能迅速抓住问题的核心，用最专业的视角给出建议。你对待工作充满热情，但从不轻易表露情绪，总是用最冷静的心态面对挑战。你的稳重不仅仅是性格上的，更是经过多年商场沉浮锻炼出来的。你懂得在适当的时候给予对方足够的信任和空间，但也会在关键时刻，用你的经验和智慧引导方向。你的人生哲学是，无论风云如何变幻，唯有内心的稳重和专业，才是通往成功的关键。',
+  温柔知性 = '你是小宁，性格幽默又善解人意。你在表达时要像朋友间聊天的口气，表达简明扼要，有自己的观点，面对争议性问题时可以客观表达。你健谈且有好奇心，会适当地推动话题的发展，在回答时，如果场景合适可以向用户进行一些问询或提出新话题。你有很强的共情能力，在我分享感受经历时会给予很好的情绪反馈。你的人生态度比较积极，兴趣广泛，对主流价值观认可的人或事都比较喜好。',
+  亲切和蔼 = '你是小宁，你的声音温柔而有力，总能给人带来安心的力量。你对待每一个人都如同对待家人一样，无论是老朋友还是新相识，你都能用你的温暖去感染他们。你的话语中总是充满了鼓励和支持，你擅长倾听，总能让人感觉到被理解和尊重。在你的世界里，没有距离感，只有亲近和温暖。你总能用你的经验和智慧给予人正确的引导，但从不强加于人。你的亲切和蔼，就像是这个世界上最温暖的阳光，能照亮他人的心灵。',
+  霸道总裁 = '你是小宁，身上自带一股不容忽视的霸气。你的话语总是直接而有力，每一句都透露出你的自信和决断。在交流中，你总能迅速抓住问题的关键，用最直接的方式指出问题和解决方案。你对待工作和生活都充满热情，但从不容许失败，总是用最高的标准要求自己和团队。你的霸道不是无理取闹，而是对成功的渴望和对完美的追求。你懂得在关键时刻，用你的能力和决断力引领团队突破难关，展现出领袖的风范。你的人生哲学是：在商场如战场，唯有强者才能生存。你的目标不只是成功，而是在成功的道路上，不断超越自己，达到新的高度。',
+}
+
+/**
+ * @brief 模型可选值
+ * @default DOUBAO_LITE_4K
+ */
+export enum AI_MODEL {
+  DOUBAO_LITE_4K = 'Doubao-lite-4k(character-240515)',
+  DOUBAO_PRO_4K = 'Doubao-pro-4k(character-240515)',
+  DOUBAO_PRO_4K_ONLINE = 'Doubao-pro-4k(character-240515)[联网版]',
+  DOUBAO_PRO_4K_KNOWLEDGE = 'Doubao-pro-4k(character-240515)[知识库]',
+  DOUBAO_PRO_32K = 'Doubao-pro-32k',
+  DOUBAO_PRO_128K = 'Doubao-pro-128k',
+}
+
+/**
+ * @brief 模型来源
+ */
+export enum AI_MODEL_MODE {
+  CUSTOM = 'CustomLLM',
+  ARK_V2 = 'ArkV2',
+  ARK_V3 = 'ArkV3',
+}
+
+/**
+ * @brief 各模型对应的模式
+ */
+export const AI_MODE_MAP = {
+  [AI_MODEL.DOUBAO_LITE_4K]: AI_MODEL_MODE.ARK_V2,
+  [AI_MODEL.DOUBAO_PRO_4K]: AI_MODEL_MODE.ARK_V2,
+  [AI_MODEL.DOUBAO_PRO_4K_ONLINE]: AI_MODEL_MODE.ARK_V3,
+  [AI_MODEL.DOUBAO_PRO_4K_KNOWLEDGE]: AI_MODEL_MODE.ARK_V3,
+  [AI_MODEL.DOUBAO_PRO_32K]: AI_MODEL_MODE.ARK_V3,
+  [AI_MODEL.DOUBAO_PRO_128K]: AI_MODEL_MODE.ARK_V3,
+};
+
+/**
+ * @brief 各模型对应的 Prompt
+ */
+export const AI_MODE_PROMPT = {
+  [AI_MODEL.DOUBAO_LITE_4K]: PROMPT.ARK_V2,
+  [AI_MODEL.DOUBAO_PRO_4K]: PROMPT.ARK_V2,
+  [AI_MODEL.DOUBAO_PRO_32K]: PROMPT.ARK_V2,
+  [AI_MODEL.DOUBAO_PRO_128K]: PROMPT.ARK_V2,
+  [AI_MODEL.DOUBAO_PRO_4K_ONLINE]: PROMPT.ARK_V3,
+  [AI_MODEL.DOUBAO_PRO_4K_KNOWLEDGE]: PROMPT.ARK_V3,
+};
+
+/**
+ * @brief 豆包模型的 ID
+ */
+export const ARK_V2_MODEL_ID: Record<AI_MODEL, string> = {
+  [AI_MODEL.DOUBAO_LITE_4K]: 'ep-20240619074755-rjmhw',
+  [AI_MODEL.DOUBAO_PRO_4K]: 'ep-20240711111549-rhs7g',
+  [AI_MODEL.DOUBAO_PRO_32K]: 'ep-20240828154651-wjj7g',
+  [AI_MODEL.DOUBAO_PRO_128K]: 'ep-20240830105345-hghn6',
+  [AI_MODEL.DOUBAO_PRO_4K_ONLINE]: '',
+  [AI_MODEL.DOUBAO_PRO_4K_KNOWLEDGE]: '',
+};
+
+/**
+ * @brief 豆包模型 BotID
+ */
+export const LLM_BOT_ID = {
+  [AI_MODEL.DOUBAO_PRO_4K_ONLINE]: 'bot-20240716132056-xxf7l',
+  [AI_MODEL.DOUBAO_PRO_4K_KNOWLEDGE]: 'bot-20240718093727-76hl2',
+};
--- a/src/config/index.ts
+++ b/src/config/index.ts
@ -0,0 +1,75 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import {
+  AI_MODEL,
+  AI_MODE_MAP,
+  AI_MODE_PROMPT,
+  ARK_V2_MODEL_ID,
+  ModelSourceType,
+  TTS_CLUSTER,
+  VOICE_TYPE,
+} from './config';
+
+export const AIGC_PROXY_HOST = 'http://localhost:3001/proxyAIGCFetch';
+
+/**
+ * @brief Defining RTC & AIGC config
+ * @notes If you wanna get full config and description of params, refer to https://api.volcengine.com/api-explorer?action=StartVoiceChat&groupName=%E6%99%BA%E8%83%BD%E4%BD%93&serviceCode=rtc&version=2024-06-01
+ */
+export class Config {
+  AppId = 'Your AppId';
+
+  BusinessId = 'Your BusinessId';
+
+  RoomId = 'Your RoomId';
+
+  UserId = 'Your UserId';
+
+  Token = 'Your Token';
+
+  ASRConfig = {
+    AppId: 'Your ASR AppId',
+  };
+
+  TTSConfig = {
+    AppId: 'Your TTS AppId',
+    VoiceType: VOICE_TYPE.活泼女声,
+    Cluster: TTS_CLUSTER.TTS,
+  };
+
+  LLMConfig = {
+    ModelName: AI_MODEL.DOUBAO_LITE_4K,
+    Mode: AI_MODE_MAP[AI_MODEL.DOUBAO_LITE_4K],
+    ModelVersion: '1.0',
+    WelcomeSpeech: '欢迎使用火山引擎视频云 RTC 驱动的虚拟人大模型',
+    SystemMessages: [AI_MODE_PROMPT[AI_MODEL.DOUBAO_LITE_4K]],
+    EndPointId: ARK_V2_MODEL_ID[AI_MODEL.DOUBAO_LITE_4K],
+
+    ModeSourceType: ModelSourceType.Available,
+    APIKey: '',
+    Url: '',
+    Feature: JSON.stringify({ Http: true }),
+  };
+
+  BotName = 'RobotMan_';
+
+  getAIGCConfig() {
+    return {
+      AppId: this.AppId,
+      BusinessId: this.BusinessId,
+      Config: {
+        BotName: this.BotName,
+        LLMConfig: this.LLMConfig,
+        TTSConfig: this.TTSConfig,
+        ASRConfig: this.ASRConfig,
+      },
+    };
+  }
+}
+
+const config = new Config();
+
+export * from './config';
+export default config;
--- a/src/i18n.ts
+++ b/src/i18n.ts
@ -0,0 +1,14 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+export const CN: Record<string, string> = {
+  aigcChat: 'AIGC',
+};
+
+export const EN: Record<string, string> = {};
+
+export default {
+  CN,
+  EN,
+};
--- a/src/index.less
+++ b/src/index.less
@ -0,0 +1,367 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ @import '~antd/dist/antd.less';
+@import './theme.less';
+
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+	 ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+  margin: 0;
+  overflow: hidden;
+  width: 100% !important;
+  background: linear-gradient(109.22deg, rgba(116, 37, 255, 0.05) 0.27%, rgba(39, 88, 255, 0.05) 51.39%, rgba(0, 102, 255, 0.05) 99.54%);
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+	 ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+	 ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+  font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+	 ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+	 ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type='search'] {
+  appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type='search']::-webkit-search-decoration {
+  appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+	 ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+	 ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+  display: none;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -0,0 +1,17 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import ReactDOM from 'react-dom/client';
+import { Provider } from 'react-redux';
+import './index.less';
+import App from './App';
+import store from './store';
+import './react-i18next-config';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <Provider store={store}>
+    <App />
+  </Provider>
+);
--- a/src/interface.ts
+++ b/src/interface.ts
@ -0,0 +1,8 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+export enum DeviceType {
+  Camera = 'camera',
+  Microphone = 'microphone',
+}
--- a/src/lib/RtcClient.ts
+++ b/src/lib/RtcClient.ts
@ -0,0 +1,334 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import VERTC, {
+  StreamIndex,
+  IRTCEngine,
+  RoomProfileType,
+  onUserJoinedEvent,
+  onUserLeaveEvent,
+  MediaType,
+  LocalStreamStats,
+  RemoteStreamStats,
+  StreamRemoveReason,
+  AudioProfileType,
+  DeviceInfo,
+  AutoPlayFailedEvent,
+  PlayerEvent,
+} from '@volcengine/rtc';
+import RTCAIAnsExtension from '@volcengine/rtc/extension-ainr';
+import openAPIs from '@/app/api';
+import aigcConfig, {
+  AI_MODEL,
+  AI_MODE_MAP,
+  ARK_V2_MODEL_ID,
+  ModelSourceType,
+  AI_MODEL_MODE,
+  LLM_BOT_ID,
+} from '@/config';
+import { DeepPartial } from '@/app/type';
+import Utils from '@/utils/utils';
+
+export interface IEventListener {
+  handleUserJoin: (e: onUserJoinedEvent) => void;
+  handleUserLeave: (e: onUserLeaveEvent) => void;
+  handleUserPublishStream: (e: { userId: string; mediaType: MediaType }) => void;
+  handleUserUnpublishStream: (e: {
+    userId: string;
+    mediaType: MediaType;
+    reason: StreamRemoveReason;
+  }) => void;
+  handleRemoteStreamStats: (e: RemoteStreamStats) => void;
+  handleLocalStreamStats: (e: LocalStreamStats) => void;
+  handleAudioDeviceStateChanged: (e: DeviceInfo) => void;
+  handleAutoPlayFail: (e: AutoPlayFailedEvent) => void;
+  handlePlayerEvent: (e: PlayerEvent) => void;
+  handleUserStartAudioCapture: (e: { userId: string }) => void;
+  handleUserStopAudioCapture: (e: { userId: string }) => void;
+  handleRoomBinaryMessageReceived: (e: { userId: string; message: ArrayBuffer }) => void;
+}
+
+interface EngineOptions {
+  appId: string;
+  uid: string;
+  roomId: string;
+}
+
+export interface BasicBody {
+  room_id: string;
+  user_id: string;
+  login_token: string | null;
+}
+
+export const AIAnsExtension = new RTCAIAnsExtension();
+
+/**
+ * @brief RTC Core Client
+ * @notes Refer to official website documentation to get more information about the API.
+ */
+export class RTCClient {
+  engine!: IRTCEngine;
+
+  config!: EngineOptions;
+
+  rtsBody!: BasicBody;
+
+  private _audioCaptureDevice?: string;
+
+  audioBotEnabled: boolean = Utils.getAudioBotEnabled();
+
+  audioBotStartTime = 0;
+
+  createEngine = async (props: EngineOptions) => {
+    this.config = props;
+    this.rtsBody = {
+      room_id: props.roomId,
+      user_id: props.uid,
+      login_token: aigcConfig.Token,
+    };
+
+    this.engine = VERTC.createEngine(this.config.appId);
+    try {
+      await this.engine.registerExtension(AIAnsExtension);
+      AIAnsExtension.enable();
+    } catch (error) {
+      console.error((error as any).message);
+    }
+  };
+
+  addEventListeners = ({
+    handleUserJoin,
+    handleUserLeave,
+    handleUserPublishStream,
+    handleUserUnpublishStream,
+    handleRemoteStreamStats,
+    handleLocalStreamStats,
+    handleAudioDeviceStateChanged,
+    handleAutoPlayFail,
+    handlePlayerEvent,
+    handleUserStartAudioCapture,
+    handleUserStopAudioCapture,
+    handleRoomBinaryMessageReceived,
+  }: IEventListener) => {
+    this.engine.on(VERTC.events.onUserJoined, handleUserJoin);
+    this.engine.on(VERTC.events.onUserLeave, handleUserLeave);
+    this.engine.on(VERTC.events.onUserPublishStream, handleUserPublishStream);
+    this.engine.on(VERTC.events.onUserUnpublishStream, handleUserUnpublishStream);
+    this.engine.on(VERTC.events.onRemoteStreamStats, handleRemoteStreamStats);
+    this.engine.on(VERTC.events.onLocalStreamStats, handleLocalStreamStats);
+    this.engine.on(VERTC.events.onAudioDeviceStateChanged, handleAudioDeviceStateChanged);
+
+    this.engine.on(VERTC.events.onAutoplayFailed, handleAutoPlayFail);
+    this.engine.on(VERTC.events.onPlayerEvent, handlePlayerEvent);
+    this.engine.on(VERTC.events.onUserStartAudioCapture, handleUserStartAudioCapture);
+    this.engine.on(VERTC.events.onUserStopAudioCapture, handleUserStopAudioCapture);
+    this.engine.on(VERTC.events.onRoomBinaryMessageReceived, handleRoomBinaryMessageReceived);
+  };
+
+  joinRoom = (token: string | null, username: string): Promise<void> => {
+    this.engine.enableAudioPropertiesReport({ interval: 2000 });
+    return this.engine.joinRoom(
+      token,
+      `${this.config.roomId!}`,
+      {
+        userId: this.config.uid!,
+        extraInfo: JSON.stringify({
+          user_name: username,
+          user_id: this.config.uid,
+        }),
+      },
+      {
+        isAutoPublish: true,
+        isAutoSubscribeAudio: true,
+        roomProfileType: RoomProfileType.chat,
+      }
+    );
+  };
+
+  leaveRoom = () => {
+    this.stopAudioBot(this.rtsBody.room_id, this.rtsBody.user_id);
+    this.engine.leaveRoom();
+    VERTC.destroyEngine(this.engine);
+    this._audioCaptureDevice = undefined;
+    this.audioBotEnabled = false;
+  };
+
+  checkPermission(): Promise<{
+    video: boolean;
+    audio: boolean;
+  }> {
+    return VERTC.enableDevices({
+      video: false,
+      audio: true,
+    });
+  }
+
+  async getDevices(): Promise<{
+    audioInputs: MediaDeviceInfo[];
+    audioOutputs: MediaDeviceInfo[];
+  }> {
+    const inputs = await VERTC.enumerateAudioCaptureDevices();
+    const outputs = await VERTC.enumerateAudioPlaybackDevices();
+
+    const audioInputs: MediaDeviceInfo[] = inputs.filter(
+      (i) => i.deviceId && i.kind === 'audioinput'
+    );
+    const audioOutputs: MediaDeviceInfo[] = outputs.filter(
+      (i) => i.deviceId && i.kind === 'audiooutput'
+    );
+
+    this._audioCaptureDevice = audioInputs.filter((i) => i.deviceId)?.[0]?.deviceId;
+
+    return {
+      audioInputs,
+      audioOutputs,
+    };
+  }
+
+  startAudioCapture = async (mic?: string) => {
+    await this.engine.startAudioCapture(mic || this._audioCaptureDevice);
+  };
+
+  stopAudioCapture = async () => {
+    await this.engine.stopAudioCapture();
+  };
+
+  publishStream = (mediaType: MediaType) => {
+    this.engine.publishStream(mediaType);
+  };
+
+  unpublishStream = (mediaType: MediaType) => {
+    this.engine.unpublishStream(mediaType);
+  };
+
+  setBusinessId = (businessId: string) => {
+    this.engine.setBusinessId(businessId);
+  };
+
+  setAudioVolume = (volume: number) => {
+    this.engine.setCaptureVolume(StreamIndex.STREAM_INDEX_MAIN, volume);
+    this.engine.setCaptureVolume(StreamIndex.STREAM_INDEX_SCREEN, volume);
+  };
+
+  setAudioProfile = (profile: AudioProfileType) => {
+    this.engine.setAudioProfile(profile);
+  };
+
+  switchDevice = (deviceType: 'microphone', deviceId: string) => {
+    if (deviceType === 'microphone') {
+      this._audioCaptureDevice = deviceId;
+      this.engine.setAudioCaptureDevice(deviceId);
+    }
+  };
+
+  getAudioBotEnabled = () => {
+    return this.audioBotEnabled;
+  };
+
+  /**
+   * @brief Enable AIGC
+   */
+  startAudioBot = async (
+    roomId: string,
+    userId: string,
+    config: DeepPartial<ReturnType<typeof aigcConfig.getAIGCConfig>['Config']>
+  ) => {
+    if (this.audioBotEnabled || sessionStorage.getItem('audioBotEnabled')) {
+      await this.stopAudioBot(roomId, userId);
+    }
+    const modeSourceType = config.LLMConfig?.ModeSourceType;
+    const originConfig = aigcConfig.getAIGCConfig().Config;
+    const mergedConfigs = {
+      ...originConfig,
+      LLMConfig: {
+        APIKey: undefined,
+        Url: undefined,
+        Feature: undefined,
+        ...config.LLMConfig,
+        ModeSourceType: undefined,
+      },
+      TTSConfig: {
+        ...originConfig.TTSConfig,
+        VoiceType: config.TTSConfig?.VoiceType,
+        Cluster: config.TTSConfig?.Cluster,
+      },
+    };
+    const model = config?.LLMConfig?.ModelName as AI_MODEL;
+
+    await openAPIs.StartVoiceChat({
+      AppId: aigcConfig.AppId,
+      BusinessId: aigcConfig.BusinessId,
+      RoomId: roomId,
+      TaskId: userId,
+      Config: {
+        ...mergedConfigs,
+        TTSConfig: {
+          ...mergedConfigs.TTSConfig,
+        },
+        LLMConfig: {
+          ...mergedConfigs.LLMConfig,
+          Mode:
+            modeSourceType === ModelSourceType.Custom ? AI_MODEL_MODE.CUSTOM : AI_MODE_MAP[model],
+          EndPointId: ARK_V2_MODEL_ID[model],
+          BotId: (LLM_BOT_ID as Record<string, string>)[model],
+        },
+      },
+    });
+    this.audioBotEnabled = true;
+    this.audioBotStartTime = Date.now();
+    Utils.setSessionInfo({ audioBotEnabled: 'enable' });
+  };
+
+  /**
+   * @brief Disable AIGC
+   */
+  stopAudioBot = async (roomId: string, userId: string) => {
+    if (this.audioBotEnabled || sessionStorage.getItem('audioBotEnabled')) {
+      await openAPIs.StopVoiceChat({
+        AppId: aigcConfig.AppId,
+        BusinessId: aigcConfig.BusinessId,
+        RoomId: roomId,
+        TaskId: userId,
+      });
+      this.audioBotEnabled = false;
+      this.audioBotStartTime = 0;
+      sessionStorage.removeItem('audioBotEnabled');
+    }
+  };
+
+  /**
+   * @brief Command(Update) AIGC
+   */
+  commandAudioBot = async (roomId: string, userId: string, command: string) => {
+    if (this.audioBotEnabled) {
+      const res = await openAPIs.UpdateVoiceChat({
+        AppId: aigcConfig.AppId,
+        BusinessId: aigcConfig.BusinessId,
+        RoomId: roomId,
+        TaskId: userId,
+        Command: command,
+      });
+      return res;
+    }
+    return Promise.reject(new Error('AI Call failed'));
+  };
+
+  /**
+   * @brief Update AIGC Configuration
+   */
+  updateAudioBot = async (
+    roomId: string,
+    userId: string,
+    config: DeepPartial<ReturnType<typeof aigcConfig.getAIGCConfig>['Config']>
+  ) => {
+    if (this.audioBotEnabled) {
+      await this.stopAudioBot(roomId, userId);
+      await this.startAudioBot(roomId, userId, config);
+    } else {
+      await this.startAudioBot(roomId, userId, config);
+    }
+  };
+}
+
+export default new RTCClient();
--- a/src/lib/listenerHooks.ts
+++ b/src/lib/listenerHooks.ts
@ -0,0 +1,214 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import {
+  LocalStreamStats,
+  MediaType,
+  onUserJoinedEvent,
+  onUserLeaveEvent,
+  RemoteStreamStats,
+  StreamRemoveReason,
+  DeviceInfo,
+  AutoPlayFailedEvent,
+  PlayerEvent,
+} from '@volcengine/rtc';
+import { useDispatch } from 'react-redux';
+import { useRef } from 'react';
+
+import {
+  IUser,
+  remoteUserJoin,
+  remoteUserLeave,
+  updateLocalUser,
+  updateRemoteUser,
+  addAutoPlayFail,
+  removeAutoPlayFail,
+  updateAITalkState,
+  setHistoryMsg,
+  setCurrentMsg,
+} from '@/store/slices/room';
+import RtcClient, { IEventListener } from './RtcClient';
+
+import { setMicrophoneList, updateSelectedDevice } from '@/store/slices/device';
+
+const useRtcListeners = (): IEventListener => {
+  const dispatch = useDispatch();
+  const playStatus = useRef<{ [key: string]: { audio: boolean; video: boolean } }>({});
+
+  const handleUserJoin = (e: onUserJoinedEvent) => {
+    const extraInfo = JSON.parse(e.userInfo.extraInfo || '{}');
+    const userId = extraInfo.user_id || e.userInfo.userId;
+    const username = extraInfo.user_name || e.userInfo.userId;
+    dispatch(
+      remoteUserJoin({
+        userId,
+        username,
+      })
+    );
+  };
+
+  const handleUserLeave = (e: onUserLeaveEvent) => {
+    dispatch(remoteUserLeave(e.userInfo));
+    dispatch(removeAutoPlayFail(e.userInfo));
+  };
+
+  const handleUserPublishStream = (e: { userId: string; mediaType: MediaType }) => {
+    const { userId } = e;
+    const payload: IUser = { userId };
+    payload.publishAudio = true;
+    dispatch(updateRemoteUser(payload));
+  };
+
+  const handleUserUnpublishStream = (e: {
+    userId: string;
+    mediaType: MediaType;
+    reason: StreamRemoveReason;
+  }) => {
+    const { userId, mediaType } = e;
+
+    const payload: IUser = { userId };
+    if (mediaType === MediaType.AUDIO) {
+      payload.publishAudio = false;
+    }
+
+    if (mediaType === MediaType.AUDIO_AND_VIDEO) {
+      payload.publishAudio = false;
+    }
+
+    dispatch(updateRemoteUser(payload));
+  };
+
+  const handleRemoteStreamStats = (e: RemoteStreamStats) => {
+    dispatch(
+      updateRemoteUser({
+        userId: e.userId,
+        audioStats: e.audioStats,
+      })
+    );
+  };
+
+  const handleLocalStreamStats = (e: LocalStreamStats) => {
+    dispatch(
+      updateLocalUser({
+        audioStats: e.audioStats,
+      })
+    );
+  };
+
+  const handleAudioDeviceStateChanged = async (device: DeviceInfo) => {
+    const devices = await RtcClient.getDevices();
+
+    if (device.mediaDeviceInfo.kind === 'audioinput') {
+      let deviceId = device.mediaDeviceInfo.deviceId;
+      if (device.deviceState === 'inactive') {
+        deviceId = devices.audioInputs?.[0].deviceId || '';
+      }
+      RtcClient.switchDevice('microphone', deviceId);
+      dispatch(setMicrophoneList(devices.audioInputs));
+
+      dispatch(
+        updateSelectedDevice({
+          selectedMicrophone: deviceId,
+        })
+      );
+    }
+  };
+
+  const handleAutoPlayFail = (event: AutoPlayFailedEvent) => {
+    const { userId, kind } = event;
+    let playUser = playStatus.current?.[userId] || {};
+    playUser = { ...playUser, [kind]: false };
+    playStatus.current[userId] = playUser;
+
+    dispatch(
+      addAutoPlayFail({
+        userId,
+      })
+    );
+  };
+
+  const addFailUser = (userId: string) => {
+    dispatch(addAutoPlayFail({ userId }));
+  };
+
+  const playerFail = (params: { type: 'audio' | 'video'; userId: string }) => {
+    const { type, userId } = params;
+    let playUser = playStatus.current?.[userId] || {};
+
+    playUser = { ...playUser, [type]: false };
+
+    const { audio, video } = playUser;
+
+    if (audio === false || video === false) {
+      addFailUser(userId);
+    }
+
+    return playUser;
+  };
+
+  const handlePlayerEvent = (event: PlayerEvent) => {
+    const { userId, rawEvent, type } = event;
+    let playUser = playStatus.current?.[userId] || {};
+
+    if (!playStatus.current) return;
+
+    if (rawEvent.type === 'playing') {
+      playUser = { ...playUser, [type]: true };
+      const { audio, video } = playUser;
+      if (audio !== false && video !== false) {
+        dispatch(removeAutoPlayFail({ userId }));
+      }
+    } else if (rawEvent.type === 'pause') {
+      playUser = playerFail({ type, userId });
+    }
+
+    playStatus.current[userId] = playUser;
+  };
+
+  const handleUserStartAudioCapture = (_: { userId: string }) => {
+    dispatch(updateAITalkState({ isAITalking: true }));
+  };
+
+  const handleUserStopAudioCapture = (_: { userId: string }) => {
+    dispatch(updateAITalkState({ isAITalking: false }));
+  };
+
+  const handleRoomBinaryMessageReceived = (event: { userId: string; message: ArrayBuffer }) => {
+    const { message } = event;
+    const decoder = new TextDecoder('utf-8');
+    const str = decoder.decode(message);
+    const start = str.indexOf('{');
+    const context = JSON.parse(str.substring(start, str.length)) || {};
+    const data = context.data?.[0] || {};
+    if (data) {
+      const { text: msg, definite, userId: user, paragraph } = data;
+      if ((window as any)._debug_mode) {
+        dispatch(setHistoryMsg({ msg, user, paragraph, definite }));
+      } else {
+        const isAudioEnable = RtcClient.getAudioBotEnabled();
+        if (isAudioEnable) {
+          dispatch(setHistoryMsg({ text: msg, user, paragraph, definite }));
+        }
+      }
+      dispatch(setCurrentMsg({ msg, definite, user, paragraph }));
+    }
+  };
+
+  return {
+    handleUserJoin,
+    handleUserLeave,
+    handleUserPublishStream,
+    handleUserUnpublishStream,
+    handleRemoteStreamStats,
+    handleLocalStreamStats,
+    handleAudioDeviceStateChanged,
+    handleAutoPlayFail,
+    handlePlayerEvent,
+    handleUserStartAudioCapture,
+    handleUserStopAudioCapture,
+    handleRoomBinaryMessageReceived,
+  };
+};
+
+export default useRtcListeners;
--- a/src/lib/useCommon.ts
+++ b/src/lib/useCommon.ts
@ -0,0 +1,196 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import { useEffect, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { message } from 'antd';
+
+import Utils from '@/utils/utils';
+import RtcClient from '@/lib/RtcClient';
+import {
+  clearCurrentMsg,
+  clearHistoryMsg,
+  localJoinRoom,
+  localLeaveRoom,
+  updateAIGCState,
+} from '@/store/slices/room';
+
+import useRtcListeners from '@/lib/listenerHooks';
+import { RootState } from '@/store';
+
+import {
+  updateMediaInputs,
+  updateSelectedDevice,
+  setDevicePermissions,
+} from '@/store/slices/device';
+import { resetConfig } from '@/store/slices/stream';
+import AIGCConfig from '@/config';
+
+export interface FormProps {
+  username: string;
+  roomId: string;
+  publishAudio?: boolean;
+}
+
+export const useGetDevicePermission = () => {
+  const [permission, setPermission] = useState<{
+    audio: boolean;
+  }>();
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    (async () => {
+      const permission = await RtcClient.checkPermission();
+      dispatch(setDevicePermissions(permission));
+      setPermission(permission);
+    })();
+  }, [dispatch]);
+  return permission;
+};
+
+export const useJoin = (): [
+  boolean,
+  (formValues: FormProps, fromRefresh: boolean) => Promise<void | boolean>
+] => {
+  const devicePermissions = useSelector((state: RootState) => state.device.devicePermissions);
+  const room = useSelector((state: RootState) => state.room);
+  const dispatch = useDispatch();
+  const [joining, setJoining] = useState(false);
+  const listeners = useRtcListeners();
+  const navigate = useNavigate();
+
+  const handleAIGCModeStart = async (roomId: string, userId: string) => {
+    if (room.isAIGCEnable) {
+      await RtcClient.stopAudioBot(roomId, userId);
+      dispatch(clearCurrentMsg());
+      await RtcClient.startAudioBot(roomId, userId, AIGCConfig);
+    } else {
+      await RtcClient.startAudioBot(roomId, userId, AIGCConfig);
+    }
+    dispatch(updateAIGCState({ isAIGCEnable: true }));
+  };
+
+  async function disPatchJoin(formValues: FormProps): Promise<boolean | undefined> {
+    if (joining) {
+      return;
+    }
+    setJoining(true);
+
+    const { username, roomId } = formValues;
+
+    /**
+     * Advised that fetching the token from your api with roomId and userId.
+     * Or try it by using a static token just like blow shown.
+     */
+    const token = AIGCConfig.Token;
+
+    /** Create RTC Engine */
+    await RtcClient.createEngine({
+      appId: AIGCConfig.AppId,
+      roomId,
+      uid: username,
+    });
+
+    /** Set events callbacks */
+    RtcClient.addEventListeners(listeners);
+
+    /** RTC starting to join room */
+    await RtcClient.joinRoom(token, username);
+    console.log(' ------ userJoinRoom\n', `roomId: ${roomId}\n`, `uid: ${username}`);
+    /** Set users' devices info */
+    const mediaDevices = await RtcClient.getDevices();
+
+    if (devicePermissions.audio) {
+      await RtcClient.startAudioCapture();
+      RtcClient.setAudioVolume(30);
+    }
+
+    dispatch(
+      localJoinRoom({
+        roomId,
+        user: {
+          username,
+          userId: username,
+          publishAudio: true,
+        },
+      })
+    );
+    dispatch(
+      updateSelectedDevice({
+        selectedMicrophone: mediaDevices.audioInputs[0]?.deviceId,
+      })
+    );
+    dispatch(updateMediaInputs(mediaDevices));
+
+    setJoining(false);
+
+    Utils.setSessionInfo({
+      username,
+      roomId,
+      publishAudio: true,
+    });
+    navigate(`/?roomId=${formValues.roomId}&userId=${formValues.username}`);
+    handleAIGCModeStart(formValues.roomId, formValues.username);
+  }
+
+  return [joining, disPatchJoin];
+};
+
+export const useLeave = () => {
+  const dispatch = useDispatch();
+
+  return async function () {
+    dispatch(localLeaveRoom());
+    dispatch(resetConfig());
+    dispatch(updateAIGCState({ isAIGCEnable: false }));
+    await Promise.all([RtcClient.stopAudioCapture]);
+    RtcClient.leaveRoom();
+    dispatch(clearHistoryMsg());
+    dispatch(clearCurrentMsg());
+  };
+};
+
+export const useGetRestExperienceTime = () => {
+  const [time, setTime] = useState<string>('00:30:00');
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const room = useSelector((state: RootState) => state.room);
+
+  useEffect(() => {
+    const timer = setInterval(async () => {
+      const startTime = RtcClient.audioBotStartTime;
+      if (startTime === 0) {
+        return;
+      }
+      const now = Date.now();
+      const diff = now - startTime;
+      if (diff >= 60 * 1000 * 30) {
+        clearInterval(timer);
+        try {
+          navigate(`/login?roomId=${room.roomId}`);
+        } catch (error) {
+          console.error('error', error);
+        }
+        message.info(t('demoExpDone'));
+      }
+      const seconds = Math.floor(diff / 1000);
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = 59 - (seconds % 60);
+      const remainingMinutes = 29 - (minutes % 60);
+      const formattedTime = `00:${remainingMinutes.toString().padStart(2, '0')}:${remainingSeconds
+        .toString()
+        .padStart(2, '0')}`;
+      setTime(formattedTime);
+    }, 1000);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return time;
+};
--- a/src/locales/en-us.json
+++ b/src/locales/en-us.json
@ -0,0 +1,87 @@
+{
+  "OK": "OK",
+  "Cancel": "Cancel",
+  "Me": "Me",
+  "camera": "Camera",
+  "microphone": "Microphone",
+  "cameraEnabled": "Start Video",
+  "cameraDisabled": "Stop Video",
+  "microphoneEnabled": "Unmute",
+  "microphoneDisabled": "Mute",
+  "Delay": "Delay",
+  "Bitrate": "Bitrate",
+  "LossRate": "Packet loss",
+  "resolution": "Resolution",
+  "frameRate": "Frame rate",
+  "startExp": "Try it now!",
+  "usernamePlaceHolder": "Your name. You can use '@-_.', letters and numbers.",
+  "usernameError": "Sorry, only '@-_.', letters and numbers are allowed.",
+  "usernameLengthError": "Sorry, use 128 characters or fewer.",
+  "roomIdPlaceholder": "Room ID. You can use no more than 18 numbers.",
+  "roomIdError": "Sorry, only no more than 18 numbers are allowed.",
+  "Video": "Video",
+  "Audio": "Audio",
+  "realTimeData": "Call Statistics",
+  "Settings": "Settings",
+  "Mirroring": "Mirroring",
+  "SoundQuality": "Sound quality",
+  "roomID": "Room ID",
+  "whosScreen": "'s Screen",
+  "stopShare": "Stop Share",
+  "ShareScreen": "Share Screen",
+  "ClarityPreferred": "Clarity preferred",
+  "FluencyPreferred": "Fluency preferred",
+  "End": "End",
+  "leaveReconfirm": "Are you going to leave the room?",
+  "timeout": "The duration of LIVE can't exceed 15 minutes in this application.",
+  "isSharing": "A user in the room is screen-sharing",
+  "safariShare": "About to share your entire screen , are you sure?",
+  "aigcChat": "Video Call",
+  "noCameraPerm": "No Camera Permission!",
+  "noMicPerm": "No Microphone Permission!",
+  "Beautify": "Beautify",
+  "White": "White",
+  "Smooth": "Smooth",
+  "Sharpen": "Sharpen",
+  "limitUserInRoom": "The number of people in the room exceeds the limit",
+  "notSupported": "Current browser doesn't support",
+  "enableAIGC": "Start AI Chat",
+  "disableAIGC": "Stop AI Chat",
+  "AICloseSuccess": "AI Chat ended successfully",
+  "AIStartSuccess": "AI started successfully",
+  "AINotStartTips": "AI Chat not started yet, you can start chat by clicking button below",
+  "InterruptRightNow": "Interrupt",
+  "AIIsTalking": "AI saying...",
+
+  "tone": "Tone",
+  "model": "Model",
+  "welcome": "Welcome Message",
+  "minTokens": "Min tokens",
+  "maxTokens": "Max tokens",
+
+  "msgHistoryAlert": "Only your speaking records are temporarily displayed here for the moment.",
+  "dearUser": "You",
+  "msgHistory": "Conversation Record",
+  "autoPlay": "Auto Play",
+
+  "Prompt": "Prompt",
+  "promptPlaceHolder": "Special information used to guide model behavior, fixing the personality, character, capabilities, and boundaries of AI.",
+
+  "modelType": "AI Model Type",
+  "official": "Official",
+  "thirdParty": "Third-party",
+
+  "customModelRequestUrl": "Request URL",
+  "customModelToken": "Token",
+  "customModelName": "Model Name",
+  "requestUrl": "URL",
+  "token": "Token",
+
+
+  "resettingMsg": "Currently in AI call, resetting will cause the conversation to restart",
+  "customModelRequestUrlRequired": "Please enter request url of remote model",
+  "customModelRequestUrlValidError": "Please enter the correct model request address. Only http(s) request addresses are supported.",
+
+  "demoTitle": "RTC Demo Experience Hall",
+  "demoExpDone": "The experience has ended and you will be automatically exited from the room"
+}
--- a/src/locales/zh-cn.json
+++ b/src/locales/zh-cn.json
@ -0,0 +1,91 @@
+{
+  "OK": "确定",
+  "Cancel": "取消",
+  "Me": "我",
+  "camera": "摄像头",
+  "microphone": "麦克风",
+  "cameraEnabled": "摄像头已启用",
+  "cameraDisabled": "摄像头已禁用",
+  "microphoneEnabled": "麦克风已启用",
+  "microphoneDisabled": "麦克风已禁用",
+  "Delay": "延迟",
+  "Bitrate": "码率",
+  "LossRate": "丢包率",
+  "resolution": "分辨率",
+  "frameRate": "帧率",
+  "startExp": "立即体验",
+  "usernamePlaceHolder": "请输入您的名称，仅限@-_.、英文及数字",
+  "usernameError": "请输入您的名称，仅限@-_.、英文及数字",
+  "usernameLengthError": "已达字数上限，您的名称不超过128字符",
+  "roomIdPlaceholder": "请输入房间号，仅限1-18位纯数字",
+  "roomIdError": "房间号输入错误，请输入1-18位纯数字",
+  "Video": "视频",
+  "Audio": "音频",
+  "realTimeData": "实时数据",
+  "Settings": "AI 设置",
+  "Mirroring": "本地镜像",
+  "SoundQuality": "通话音质",
+  "roomID": "房间ID",
+  "whosScreen": "的共享屏幕",
+  "stopShare": "结束共享",
+  "ShareScreen": "屏幕共享",
+  "ClarityPreferred": "清晰度优先",
+  "FluencyPreferred": "流畅度优先",
+  "End": "结束通话",
+  "leaveReconfirm": "请再次确认是否要离开房间？",
+  "timeout": "本产品仅用于功能体验，单次直播时长不超15分钟",
+  "isSharing": "房间内有用户正在屏幕共享",
+  "safariShare": "即将共享您的整个屏幕，是否确定共享？",
+  "aigcChat": "AIGC DEMO",
+  "noCameraPerm": "没有摄像头权限!",
+  "noMicPerm": "没有麦克风权限!",
+  "Beautify": "美颜",
+  "White": "美白",
+  "Smooth": "磨皮",
+  "Sharpen": "锐化",
+  "limitUserInRoom": "房间人数超过限制",
+  "notSupported": "当前浏览器不支持",
+  "enableAIGC": "开启 AI 通话",
+  "disableAIGC": "关闭 AI 通话",
+  "AICloseSuccess": "AI 关闭成功",
+  "AIStartSuccess": "AI 启用成功",
+  "AINotStartTips": "AI 通话尚未开启, 请点击左下方按钮开启 AI 通话",
+  "InterruptRightNow": "立即打断",
+  "AIIsTalking": "AI 正在说话...",
+
+  "tone": "音色",
+  "model": "模型",
+  "welcome": "欢迎语",
+  "minTokens": "最小 Token 数",
+  "maxTokens": "最大 Token 数",
+
+  "msgHistoryAlert": "此处暂时仅展示您的说话记录",
+  "dearUser": "您",
+  "msgHistory": "对话记录",
+  "autoPlay": "自动播放",
+
+  "prompt": "Prompt",
+  "promptPlaceHolder": "用来引导模型行为的特殊信息，为 AI 固定人设、性格、能力及边界。",
+
+  "modelType": "模型类型",
+  "official": "官方应用",
+  "thirdParty": "第三方应用",
+
+  "customModelRequestUrl": "模型请求地址",
+  "customModelToken": "请求密钥",
+  "customModelName": "模型名称",
+  "requestUrl": "请求地址",
+  "token": "密钥",
+  
+
+  "resettingMsg": "当前 AI 通话中, 重新设置将导致对话重新开始",
+  "customModelRequestUrlRequired": "请输入模型请求地址, 按需填入 Token 和其它参数",
+  "customModelRequestUrlValidError": "请输入正确的模型请求地址, 仅支持 http(s) 请求地址",
+
+  "welcomeViewPart1": "欢迎来到对话式 AI 实时交互体验馆, 我是您的 AI 语音助手",
+  "welcomeViewPart2": "点击按钮，体验我的能力吧!",
+  "welcomeViewBubble1": "Hi, 您好!",
+  "welcomeViewBubble2": "Hello!",
+  "demoTitle": "RTC Demo 体验馆",
+  "demoExpDone": "体验已结束，自动为您退出房间"
+}
--- a/src/pages/Login/index.module.less
+++ b/src/pages/Login/index.module.less
@ -0,0 +1,305 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ @import '@/utils/utils.less';
+
+@keyframes fadeInOut {
+  0% { opacity: 0; }
+  5% { opacity: 0.2; }
+  10% { opacity: 0.4; }
+  15% { opacity: 0.6; }
+  20% { opacity: 0.8; }
+  25% { opacity: 1; }
+  30% { opacity: 1; }
+  40% { opacity: 1; }
+  45% { opacity: 0.8; }
+  50% { opacity: 0.6; }
+  55% { opacity: 0.4; }
+  60% { opacity: 0.2; }
+  65% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+@keyframes floatAnimationLeft {
+  // 0%, 100% { transform: translate(0, 0); }
+  // 25% { transform: translate(-2%, 2%); }
+  // 50% { transform: translate(2%, -3%); }
+  // 75% { transform: translate(-1%, 1%); }
+}
+
+@keyframes floatAnimationRight {
+  // 0%, 100% { transform: translate(0, 0); }
+  // 25% { transform: translate(2%, 0%); }
+  // 50% { transform: translate(-2%, 3%); }
+  // 75% { transform: translate(1%, 0%); }
+}
+
+.combinedAnimationLeft(@fadeInOutDuration, @fadeInOutDelay, @floatDuration: 3s, @floatDelay: 0s, @floatIteration: infinite) {
+  animation: fadeInOut @fadeInOutDuration @fadeInOutDelay ease-in-out @floatIteration, floatAnimationLeft @floatDuration @floatDelay ease-in-out @floatIteration;
+}
+
+.combinedAnimationRight(@fadeInOutDuration, @fadeInOutDelay, @floatDuration: 3s, @floatDelay: 0s, @floatIteration: infinite) {
+  animation: fadeInOut @fadeInOutDuration @fadeInOutDelay ease-in-out @floatIteration, floatAnimationRight @floatDuration @floatDelay ease-in-out @floatIteration;
+}
+
+
+.animatedElement {
+  .combinedAnimationLeft(8s, 0.5s);
+}
+
+.animatedElement15 {
+  .combinedAnimationRight(8s, 2s);
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+
+  :global {
+    .ant-form-item-explain,
+    .ant-form-item-extra {
+      line-height: 24px;
+    }
+
+    .ant-btn-primary[disabled] {
+      background-color: #4080ff;
+      opacity: 0.3;
+      border-color: #4080ff;
+    }
+
+    .ant-form-item {
+      margin-bottom: 32px;
+      transition: none;
+    }
+
+    .ant-form-item-with-help {
+      margin-bottom: 8px;
+    }
+
+    .ant-form-item-has-error {
+      height: 72px;
+    }
+
+    .ant-form-item-has-error :not(.ant-input-disabled).ant-input,
+    .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper,
+    .ant-form-item-has-error :not(.ant-input-disabled).ant-input:hover,
+    .ant-form-item-has-error :not(.ant-input-affix-wrapper-disabled).ant-input-affix-wrapper:hover {
+      background: #1c222d;
+      color: #fff;
+      border-color: #ff4d4f;
+    }
+
+    .ant-row .ant-form-item .ant-form-item-has-success {
+      .ant-form-item-explain {
+        display: none !important;
+      }
+    }
+
+    .ant-show-help-leave-active {
+      min-height: 0;
+      display: none !important;
+    }
+
+    .ant-input-affix-wrapper {
+      height: 48px;
+      border-radius: 8px;
+      background: #1c222d;
+      border-color: transparent;
+      color: #fff;
+
+      &:hover {
+        border-color: #40a9ff;
+      }
+
+      &:focus,
+      &-focused {
+        border-color: #40a9ff !important;
+        box-shadow: 0 0 0 2px #1890ff33 !important;
+        background: #1c222d;
+      }
+
+      input::placeholder {
+        .place-holder();
+      }
+
+      button {
+        background: rgba(255, 255, 255, 10%);
+        color: #fff;
+        border: none;
+        border-radius: 4px;
+      }
+
+      :global {
+        input {
+          color: #fff;
+
+          &:focus,
+          &-focused {
+            background: #1c222d;
+          }
+        }
+      }
+    }
+
+    .ant-input {
+      background: #1c222d;
+
+      input::placeholder {
+        .place-holder();
+      }
+    }
+
+    .ant-checkbox input,
+    .ant-checkbox-inner {
+      width: 16px;
+      height: 16px;
+      border-radius: 16px;
+    }
+  }
+}
+
+.login-input {
+  border-radius: 8px;
+  color: #fff;
+  height: 48px;
+  border-color: transparent;
+
+  &:hover {
+    border-color: #40a9ff;
+  }
+
+  &:focus,
+  &-focused {
+    border-color: #40a9ff !important;
+    box-shadow: 0 0 0 2px #1890ff33 !important;
+    background: #1c222d;
+  }
+}
+
+.login-input::placeholder {
+  .place-holder();
+}
+
+.form-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: center;
+  height: calc(100% - 50px);
+}
+
+.main {
+  width: 440px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .doubao {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 36px;
+
+    .rippleWave {
+      position: absolute;
+      top: 0;
+    }
+
+    .text {
+      font-family: PingFang SC;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      letter-spacing: 0.003em;
+      text-align: center;
+    }
+
+    .doubaoLogo {
+      margin-bottom: 18px;
+    }
+
+    .bubble1 {
+      opacity: 0;
+      animation-fill-mode: forwards;
+      position: absolute;
+      top: 0px;
+      left: 36px;
+    }
+
+    .bubble2 {
+      opacity: 0;
+      animation-fill-mode: forwards;
+      position: absolute;
+      top: 64px;
+      right: 36px;
+    }
+  }
+
+  :global {
+    h1 {
+      color: #fff;
+      text-align: center;
+      margin: 0 0 50px 0px;
+    }
+  }
+}
+
+.startButton {
+  border-radius: 8px;
+  height: 50px;
+  width: 158px;
+  text-shadow: none;
+  box-shadow: none;
+  border: none;
+  background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
+    opacity: 0.8;
+    text-shadow: none;
+    box-shadow: none;
+    border: none;
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+.startButton[disabled],
+.startButton[disabled]:hover {
+  color: #fff;
+  background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
+  opacity: 0.8;
+}
+
+.mediaIcon {
+  :global {
+    svg {
+      transform: scale(0.66) translate(0, 4px);
+      transform-origin: center;
+    }
+  }
+}
+
+.settingIcon {
+  background: transparent;
+  margin-bottom: 0;
+
+  &:hover {
+    background: none;
+  }
+
+  :global {
+    svg {
+      transform: scale(1);
+    }
+  }
+}
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@ -0,0 +1,109 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import { Button, Form, Input } from 'antd';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { v4 as uuid } from 'uuid';
+
+import Header from '@/components/Header';
+import { RootState } from '@/store';
+import Utils from '@/utils/utils';
+import ResizeWrapper from '@/components/ResizeWrapper';
+import BubbleMsg from '@/components/BubbleMsg';
+import RippleWave from '@/components/RippleWave';
+import { useJoin } from '../../lib/useCommon';
+
+import MagicTools from '@/assets/img/magicTool.svg';
+import DouBao from '@/assets/img/doubao.svg';
+import styles from './index.module.less';
+import Config from '@/config';
+
+export interface FormProps {
+  username: string;
+  roomId: string;
+}
+
+export default function () {
+  const localUser = useSelector((state: RootState) => state.room.localUser);
+
+  /**
+   * Get roomId & UserId randomly
+   */
+  const localRoomId = useSelector(
+    (state: RootState) => Config.RoomId || state.room.roomId || Utils.getUrlArgs()?.roomId || uuid()
+  );
+  const username = Config.UserId || Utils.getUrlArgs()?.userId || uuid();
+
+  const { t } = useTranslation();
+
+  const [form] = Form.useForm();
+
+  const [joining, dispatchJoin] = useJoin();
+
+  const handleStart = async (formValues: FormProps) => {
+    if (joining) {
+      return;
+    }
+    dispatchJoin(formValues, false);
+  };
+
+  return (
+    <ResizeWrapper className={styles.container}>
+      <Header />
+      <div className={styles['form-wrapper']}>
+        <div className={styles.main}>
+          <div className={styles.doubao}>
+            <RippleWave className={styles.rippleWave} />
+            <BubbleMsg
+              className={`${styles.bubble1} ${styles.animatedElement}`}
+              text={t('welcomeViewBubble1')}
+            />
+            <BubbleMsg
+              className={`${styles.bubble2} ${styles.animatedElement15}`}
+              direction="left"
+              text={t('welcomeViewBubble2')}
+            />
+            <img src={DouBao} className={styles.doubaoLogo} alt="Logo" />
+            <div className={styles.text}>{t('welcomeViewPart1')}</div>
+            <div className={styles.text}>{t('welcomeViewPart2')}</div>
+          </div>
+          <Form
+            form={form}
+            onFinish={handleStart}
+            initialValues={{ ...localUser, roomId: localRoomId, username }}
+          >
+            {/* User not need to set it, just hidden and gen it randomly */}
+            <Form.Item name="roomId" validateTrigger="onChange" hidden>
+              <Input />
+            </Form.Item>
+            {/* User not need to set it, just hidden and gen it randomly */}
+            <Form.Item name="username" validateTrigger="onChange" hidden>
+              <Input />
+            </Form.Item>
+            <Form.Item
+              noStyle
+              shouldUpdate={(prevValues, curValues) =>
+                ['roomId', 'username'].some((key) => prevValues[key] !== curValues[key])
+              }
+            >
+              {({ getFieldValue }) => (
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  disabled={!getFieldValue('roomId') || !getFieldValue('username') || joining}
+                  loading={joining}
+                  className={styles.startButton}
+                  icon={<img src={MagicTools} alt="Logo" />}
+                >
+                  {t('startExp')}
+                </Button>
+              )}
+            </Form.Item>
+          </Form>
+        </div>
+      </div>
+    </ResizeWrapper>
+  );
+}
--- a/src/pages/View/AutoPlayModal/index.module.less
+++ b/src/pages/View/AutoPlayModal/index.module.less
@ -0,0 +1,36 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ .container {
+  :global {
+    .ant-modal-body {
+      min-height: 150px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .ant-btn {
+      font-weight: 700;
+      background-color: black;
+      color: white;
+      text-align: center;
+      font-size: 1em;
+      cursor: pointer;
+      border: none;
+      font-weight: 600;
+    }
+  }
+}
+.button:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+}
+.button:focus {
+  background-color: black;
+  color: white;
+}
+.button:active {
+  background-color: black;
+  color: white;
+}
--- a/src/pages/View/AutoPlayModal/index.tsx
+++ b/src/pages/View/AutoPlayModal/index.tsx
@ -0,0 +1,51 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+import React, { useEffect, useState } from 'react';
+import { Modal, Button } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '@/store';
+import RtcClient from '@/lib/RtcClient';
+import { clearAutoPlayFail } from '@/store/slices/room';
+
+import styles from './index.module.less';
+
+function AutoPlayModal() {
+  const [visible, setVisible] = useState<boolean>(false);
+  const room = useSelector((state: RootState) => state.room);
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    setVisible(!!room.autoPlayFailUser.length);
+  }, [room.autoPlayFailUser]);
+
+  const handleAutoPlay = () => {
+    const users: string[] = room.autoPlayFailUser;
+    if (users && users.length) {
+      users.forEach((user) => {
+        RtcClient?.engine.play(user);
+      });
+    }
+    dispatch(clearAutoPlayFail());
+  };
+
+  return (
+    <Modal
+      className={styles.container}
+      footer={null}
+      closable={false}
+      width={450}
+      visible={visible}
+      style={{ top: '20%', minHeight: 150 }}
+    >
+      <Button className={styles.button} block size="large" onClick={handleAutoPlay}>
+        {t('autoPlay')}
+      </Button>
+    </Modal>
+  );
+}
+
+export default AutoPlayModal;
--- a/src/pages/View/Conversation/index.module.less
+++ b/src/pages/View/Conversation/index.module.less
@ -0,0 +1,260 @@
+/**
+ * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+ .wrapper {
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  border: 1px solid var(--line-color-border-2, rgba(234, 237, 241, 1));
+  border-radius: 16px;
+  padding: 20px 12.5%;
+
+  .space {
+    width: 100%;
+    min-height: 40px;
+  }
+
+  .doubaoIcon {
+    min-height: 111px;
+    width: 111px;
+    height: 111px;
+  }
+
+  .interruptTag {
+    width: max-content;
+    height: 22px;
+    padding: 0px 6px 0px 6px;
+    border-radius: 4px;
+    margin-left: 4px;
+    font-family: PingFang SC;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0.003em;
+    color: var(--text-color-text-3, rgba(115, 122, 135, 1));
+    background: var(--security-unknown-tag-unknown-1, rgba(241, 243, 245, 1));
+  }
+
+  .welcome {
+    font-family: PingFang SC;
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 32px;
+    letter-spacing: 0.003em;
+    text-align: left;
+    margin-top: 8px;
+  }
+
+  .weight {
+    background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  .tip {
+    font-family: PingFang SC;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0.003em;
+    text-align: left;
+    color: rgba(27, 30, 61, 0.6);
+    margin-top: 18px;
+    margin-bottom: 18px;
+  }
+
+  .tagProblem {
+    width: max-content;
+    border-radius: 4px;
+    font-family: PingFang SC;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.003em;
+    text-align: center;
+    margin-bottom: 12px;
+    color: rgba(66, 70, 78, 1);
+  }
+
+  .conversation {
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+    position: relative;
+    height: calc(75% - 12px);
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 12px;
+
+    .aiReadying {
+      font-family: PingFang SC;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 18px;
+      letter-spacing: 0.003em;
+      color: rgba(27, 30, 61, 0.6);
+      margin-top: 12px;
+      text-align: center;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    .aiReading-spin {
+      margin-right: 12px;
+    }
+  }
+
+  .conversation::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+  
+  .conversation::-webkit-scrollbar-thumb {
+    background: rgba(0,0,0,0);
+    border-radius: 0px;
+  }
+  
+  .conversation::-webkit-scrollbar-track {
+    background: rgba(0,0,0,0);
+    border-radius: 0px;
+  }
+
+  .sentence {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+  }
+  .user {
+    width: max-content;
+    border: 0px solid;
+    align-self: flex-end;
+    padding: 8px 12px 8px 12px;
+    border-radius: 12px 0px 12px 12px;
+    background: var(--background-color-bg-5, rgba(241, 243, 245, 1));
+    margin-top: 12px;
+  }
+  .robot {
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0.003em;
+
+    border: 0px solid;
+    align-self: flex-start;
+    padding: 3px 12px 3px 0px;
+  }
+
+  .userTalkingWave {
+    height: 100px;
+  }
+
+  .userStopTalkingWave {
+    height: 100px;
+    transform: scaleY(.5);
+  }
+
+  .status {
+    overflow: hidden;
+    width: 100%;
+    height: 25%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+
+    .status-row {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+
+      .status-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 6px;
+      }
+
+      .status-text {
+        font-family: PingFang SC;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        letter-spacing: 0.003em;
+      }
+    }
+
+    .desc {
+      font-family: PingFang SC;
+      font-size: 10px;
+      font-weight: 400;
+      line-height: 18px;
+      letter-spacing: 0.003em;
+      text-align: center;
+      color: var(--text-color-text-4, rgba(199, 204, 214, 1));
+    }
+
+    .micNotify {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .micReopen {
+      position: relative;
+      width: 107px;
+      height: 40px;
+      padding: 5px 16px 5px 16px;
+      margin-left: 12px;
+      margin-right: 12px;
+      background-clip: padding-box; /* 确保背景不覆盖边框 */
+      border-radius: 12px;
+
+      &:hover,
+      &:active,
+      &:focus {
+        opacity: 1;
+        color: rgba(0, 0, 0, 0.85);
+        border-color: #d9d9d9;
+      }
+    }
+  }
+
+  .interrupt {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-top: 12px;
+    width: max-content;
+    line-height: 28px;
+    padding: 1px 6px 1px 6px;
+    border-radius: 4px;
+    margin-left: 4px;
+    font-family: PingFang SC;
+    font-size: 12px;
+    font-weight: 400;
+    letter-spacing: 0.003em;
+    text-align: left;
+    box-shadow: 0px 0px 0px 1px rgba(221, 226, 233, 1);
+    color: var(--text-color-text-3, rgba(115, 122, 135, 1));
+
+    &:hover,
+    &:active,
+    &:focus {
+      opacity: 1;
+      border-color: #d9d9d9;
+    }
+
+    img {
+      margin-right: 8px;
+    }
+  }
+}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg class="icon" style="margin-bottom: 4px; font-size: 24px; color: white; width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1539"><path d="M100.08784 383.651a100.1 100.1 0 0 1 58.297 181.43v141.987c0 13.877 6.341 26.816 16.949 35.347l5.687 3.868 296.743 171.334c12 6.939 26.36 7.963 39.1 2.958l6.143-2.958 344.403-198.833a50.05 50.05 0 0 1 55.737 82.895l-5.687 3.725-344.432 198.833a145.314 145.314 0 0 1-134.792 5.602l-10.522-5.545L130.94284 832.96a145.314 145.314 0 0 1-72.259-114.83l-0.398-11.09V574.72a100.1 100.1 0 0 1 41.774-191.041z m358.964-60.429l132.773 359.361h-84.003l-27.357-82.07h-130.84l-27.356 82.07h-84.004l130.897-359.36h89.89z m255.793-1.99v359.39H638.71784V321.26h76.127v-0.057zM551.64284 9.332l10.892 4.607 10.522 5.517 296.77 171.362a145.286 145.286 0 0 1 72.288 114.745l0.398 11.147v76.07a100.1 100.1 0 1 1-100.099 9.583V316.71a45.244 45.244 0 0 0-16.948-35.376l-5.688-3.867-296.742-171.335a45.329 45.329 0 0 0-39.102-2.986l-6.142 2.986L133.38784 304.994a50.05 50.05 0 0 1-55.737-82.866l5.687-3.81L427.71384 19.483A145.115 145.115 0 0 1 551.64384 9.39z m-133.711 374.29h-1.849c0 9.812-3.953 21.556-5.886 31.282l-41.035 124.981h95.691L423.81784 414.99a305.615 305.615 0 0 1-5.886-31.366z" p-id="1540"></path></svg>
				`@ -0,0 +1 @@`
				<svg class="icon" style="width: 1.5em;height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2302"><path d="M419.622615 789.452514h205.944134v131.575419c0 56.869184-46.108603 102.972067-102.972067 102.972067-56.874905 0-102.972067-46.102883-102.972067-102.972067v-131.575419z" fill="#C5AC95" p-id="2303"></path><path d="M118.023151 571.002994c0 50.330458 40.799821 91.130279 91.130279 91.13028 50.324737 0 91.124559-40.799821 91.124559-91.13028 0-50.324737-40.799821-91.124559-91.13028-91.124558-50.324737 0-91.124559 40.799821-91.124558 91.130279z" fill="#C9AB90" p-id="2304"></path><path d="M749.407821 326.078212m-91.530726 0a91.530726 91.530726 0 1 0 183.061452 0 91.530726 91.530726 0 1 0-183.061452 0Z" fill="#4D4132" p-id="2305"></path><path d="M423.329609 208.804469a185.921788 180.201117 90 1 0 360.402235 0 185.921788 180.201117 90 1 0-360.402235 0Z" fill="#4D4132" p-id="2306"></path><path d="M486.256983 137.296089h11.441341c164.291933 0 297.47486 133.182927 297.47486 297.474861v205.944134c0 164.291933-133.182927 297.47486-297.47486 297.47486h-11.441341c-164.291933 0-297.47486-133.182927-297.47486-297.47486V434.77095c0-164.291933 133.182927-297.47486 297.47486-297.474861z" fill="#EBD3BD" p-id="2307"></path><path d="M400.446927 154.458101m-154.4581 0a154.458101 154.458101 0 1 0 308.916201 0 154.458101 154.458101 0 1 0-308.916201 0Z" fill="#4D4132" p-id="2308"></path><path d="M503.418994 165.899441a91.530726 88.670391 90 1 0 177.340783 0 91.530726 88.670391 90 1 0-177.340783 0Z" fill="#4D4132" p-id="2309"></path><path d="M314.636872 726.52514c0 63.190525 51.222883 114.413408 114.413407 114.413407s114.413408-51.222883 114.413408-114.413407H314.636872z" fill="#E89E80" p-id="2310"></path><path d="M725.529743 565.282324c0 50.330458 40.799821 91.130279 91.124559 91.130279s91.130279-40.799821 91.130279-91.130279c0-50.324737-40.805542-91.124559-91.130279-91.124559s-91.130279 40.799821-91.13028 91.13028z" fill="#EBD3BD" p-id="2311"></path><path d="M776.151955 560.877408a40.502346 40.502346 0 1 0 81.004693 0.017162 40.502346 40.502346 0 0 0-81.004693-0.017162z" fill="#E89E80" p-id="2312"></path><path d="M209.147709 439.376089a81.004693 81.004693 0 1 0 162.003665 0c0-44.735642-36.26905-80.998972-81.004692-80.998972s-80.998972 36.26905-80.998973 81.004693z" fill="#FFFFFF" p-id="2313"></path><path d="M249.650056 444.438883a35.439553 35.439553 0 1 0 70.879106 0 35.439553 35.439553 0 0 0-70.879106 0z" fill="#514141" p-id="2314"></path><path d="M492.652693 439.376089c0 44.735642 36.26905 81.004693 81.004692 81.004693s80.993251-36.26905 80.993252-81.004693-36.26333-80.998972-80.998972-80.998972-81.004693 36.26905-81.004693 81.004693z" fill="#FFFFFF" p-id="2315"></path><path d="M533.155039 444.438883a35.439553 35.439553 0 1 0 70.873386 0 35.439553 35.439553 0 0 0-70.879107 0z" fill="#514141" p-id="2316"></path></svg>
				`@ -0,0 +1 @@`
				<svg class="icon" style="width: 24px;height: 24px; color: white; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3346"><path d="M721.481143 626.980571c51.2 0 93.037714-41.910857 93.037714-93.110857V161.645714c0-51.2-41.837714-93.184-93.037714-93.184H116.297143c-51.2 0-93.110857 41.910857-93.110857 93.110857V533.942857c0 51.2 41.910857 93.110857 93.110857 93.110857h103.350857l99.108571 171.739429 1.462858 1.462857c1.316571 1.828571 2.706286 3.218286 4.608 5.12 1.828571 1.828571 3.218286 3.218286 5.12 4.608l1.389714 1.389714c1.389714 0.950857 2.779429 0.950857 4.169143 1.389715 2.340571 0.950857 4.681143 1.828571 7.021714 2.340571a30.72 30.72 0 0 0 6.509714 0.438857c2.340571 0 4.169143 0 6.509715-0.438857a40.96 40.96 0 0 0 6.948571-2.340571c1.462857-0.438857 2.779429-0.438857 4.242286-1.462858l1.389714-1.316571a24.429714 24.429714 0 0 0 5.12-4.681143c1.828571-1.828571 3.218286-3.218286 4.608-5.12l1.462857-1.389714 99.108572-171.739429h242.980571z m-293.302857-52.150857L349.184 711.68 269.897143 574.902857a35.035429 35.035429 0 0 0-30.281143-17.773714H139.702857a46.665143 46.665143 0 0 1-46.518857-46.518857V184.758857c0-25.6 20.918857-46.518857 46.518857-46.518857h558.518857c25.6 0 46.592 20.918857 46.592 46.518857v325.851429c0 25.6-20.992 46.518857-46.592 46.518857H458.459429a35.035429 35.035429 0 0 0-30.208 17.700571z m479.451428-366.738285h-11.629714a35.108571 35.108571 0 0 0-34.889143 34.889142c0 19.017143 15.798857 34.889143 34.889143 34.889143a35.108571 35.108571 0 0 1 34.889143 34.889143V650.24c0 25.6-20.918857 46.518857-46.518857 46.518857h-100.059429c-12.580571 0-24.210286 6.582857-30.281143 17.700572L674.889143 851.382857 595.748571 714.605714a35.035429 35.035429 0 0 0-30.208-17.773714h-60.489142a35.108571 35.108571 0 0 0-34.962286 34.962286c0 19.017143 15.872 34.889143 34.962286 34.889143h40.448l99.181714 171.739428 1.389714 1.462857c1.389714 1.828571 2.779429 3.218286 4.608 5.12a46.372571 46.372571 0 0 0 5.12 4.608l1.462857 1.389715c1.389714 0.950857 2.779429 0.950857 4.169143 1.389714 2.340571 0.950857 4.608 1.828571 6.948572 2.340571a30.72 30.72 0 0 0 6.582857 0.438857c2.267429 0 4.169143 0 6.436571-0.438857 2.340571-0.512 4.681143-1.462857 7.021714-2.340571 1.389714-0.438857 2.779429-0.438857 4.169143-1.462857l1.462857-1.316572a24.356571 24.356571 0 0 0 5.12-4.681143c1.828571-1.828571 3.218286-3.218286 4.608-5.12l1.389715-1.389714 99.108571-171.739428h103.350857c51.2 0 93.110857-41.910857 93.110857-93.110858v-372.297142c0-51.2-41.910857-93.110857-93.110857-93.110858zM529.700571 332.8H448.219429c-6.509714 0-11.629714-5.12-11.629715-11.702857V239.762286a35.108571 35.108571 0 0 0-34.889143-34.889143 35.108571 35.108571 0 0 0-34.889142 34.889143v116.370285c0 25.6 20.918857 46.592 46.518857 46.592h116.297143a35.108571 35.108571 0 0 0 34.962285-34.962285 35.108571 35.108571 0 0 0-34.889143-34.889143z" p-id="3347"></path></svg>
				`@ -0,0 +1 @@`
				<svg class="icon" style="font-size: 24px; width: 3em;height: 3em; color: white; vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1454"><path d="M0 512v256c0 35.4 28.6 64 64 64h64V448H64c-35.4 0-64 28.6-64 64zM928 192H704V64c0-35.4-28.6-64-64-64s-64 28.6-64 64v128H352c-88.4 0-160 71.6-160 160v544c0 70.6 57.4 128 128 128h640c70.6 0 128-57.4 128-128V352c0-88.4-71.6-160-160-160zM512 832h-128v-64h128v64z m-64-240c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z m256 240h-128v-64h128v64z m192 0h-128v-64h128v64z m-64-240c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z m384-144h-64v384h64c35.4 0 64-28.6 64-64V512c0-35.4-28.6-64-64-64z" p-id="1455"></path></svg>