feat: upgrade openapi version & ui & add vision code & upgrade license.

2025-01-14 14:13:59 +08:00 · 2025-01-14 14:13:59 +08:00 · faf77a966a
parent 711c95ba9b
commit faf77a966a
157 changed files with 4349 additions and 3634 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -43,7 +43,7 @@
  "rules": {
    "prettier/prettier": ["warn", { "trailingComma": "es5", "printWidth": 200 }],
    "linebreak-style": ["error", "unix"],
-    "no-console": ["error", { "allow": ["warn", "error", "log"] }],
+    "no-console": ["warn", { "allow": ["warn", "error", "log"] }],
    "no-case-declarations": 0,
    "no-param-reassign": 0,
    "no-underscore-dangle": 0,
--- a/2
+++ b/2
@ -1,4 +1,4 @@
-Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+Copyright 2025 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.
--- a/README.md
+++ b/README.md
@ -1,20 +1,19 @@
 # 交互式AIGC场景 AIGC Demo

 ## 简介
-在 AIGC 对话场景下，火山引擎 AIGC-RTC Server 云端服务，通过整合 RTC 音视频流处理，ASR 语音识别，大模型接口调用集成，以及 TTS 语音生成等能力，提供基于流式语音的端到端AIGC能力链路。
-用户只需调用基于标准的 OpenAPI 接口即可配置所需的 ASR、LLM、TTS 类型和参数。火山引擎云端计算服务负责边缘用户接入、云端资源调度、音视频流压缩、文本与语音转换处理以及数据订阅传输等环节。简化开发流程，让开发者更专注在对大模型核心能力的训练及调试，从而快速推进AIGC产品应用创新。
-       
-同时火山引擎 RTC拥有成熟的音频 3A 处理、视频处理等技术以及大规模音视频聊天能力，可支持 AIGC 产品更便捷的支持多模态交互、多人互动等场景能力，保持交互的自然性和高效性。 
+- 在 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，修改 `src/config/index.ts` 文件中的配置信息**。
- 使用账号的 [AK、SK](https://console.volcengine.com/iam/keymanage)、[SessionToken](https://www.volcengine.com/docs/6348/1315561#sub)(临时token, 子账号才需要), 修改 `Server/app.js` 文件中的 `ACCOUNT_INFO`。**
- 如果您已经自己完成了服务端的逻辑，可以修改前端代码文件 `src/config/index.ts` 中的 `AIGC_PROXY_HOST` 修改请求的域名，并在 `src/app/api.ts` 中修改接口的参数配置。
- **您需要在 [火山方舟-在线推理](https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint?config=%7B%7D) 中创建接入点, 并将模型对应的接入点 ID 填入 `src/config/config.ts` 文件中的 `ARK_V3_MODEL_ID`**。
+1. 需要准备两个 Terminal，分别启动服务端、前端页面。
+2. **根据你自定义的 
+RoomId、UserId 以及申请的 AppID、BusinessID(如有)、Token、ASR AppID、TTS AppID，修改 `src/config/config.ts` 文件中 `ConfigFactory` 中 `BaseConfig` 的配置信息**。
+3. 使用火山引擎控制台账号的 [AK、SK](https://console.volcengine.com/iam/keymanage)、[SessionToken](https://www.volcengine.com/docs/6348/1315561#sub)(临时token, 子账号才需要), 修改 `Server/app.js` 文件中的 `ACCOUNT_INFO`。
+4. 您需要在 [火山方舟-在线推理](https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint?config=%7B%7D) 中创建接入点, 并将模型对应的接入点 ID 填入 `src/config/common.ts` 文件中的 `ARK_V3_MODEL_ID`, 否则无法正常启动智能体。
+5. 如果您已经自行完成了服务端的逻辑，可以不依赖 Demo 中的 Server，直接修改前端代码文件 `src/config/index.ts` 中的 `AIGC_PROXY_HOST` 请求域名和接口，并在 `src/app/api.ts` 中修改接口的参数配置 `APIS_CONFIG`。

 ## 服务端
 进到项目根目录
@ -39,6 +38,16 @@ yarn
 yarn dev
 ```

+## 常见问题
+| 问题 | 解决方案 |
+| :-- | :-- |
+| `Server/app.js` 中的 `sessionToken` 是什么，该怎么填，为什么要填 | `sessionToken` 是火山引擎子账号发起 OpenAPI 请求时所必须携带的临时 Token，获取方式可参考 [此文章末尾](https://www.volcengine.com/docs/6348/1315561)。 |
+| 不清楚什么是主账号，什么是子账号 | 可以参考[官方概念](https://www.volcengine.com/docs/6257/64963?hyperlink_open_type=lark.open_in_browser) 。|
+| 启动智能体之后, 说话为未回应 | <li>可能是因为参数传递的有问题, 例如参数大小写、类型等问题，请再次确认下这类型问题是否存在。</li><li>另一方面，可能是因为控制台中相关权限没有正常授予，请参考[流程](https://www.volcengine.com/docs/6348/1315561)再次确认下是否完成相关操作。</li><li>相关资源可能未开通或者用量不足，请再次确认。</li> |
+| 为什么我的麦克风正常、摄像头也正常，但是设备没有正常工作? | 可能是设备权限未授予，详情可参考 [Web 排查设备权限获取失败问题](https://www.volcengine.com/docs/6348/1356355) |
+
+如果有上述以外的问题，欢迎联系我们反馈。
+
 ## 相关文档
 - [场景介绍](https://www.volcengine.com/docs/6348/1310537)
 - [Demo 体验](https://www.volcengine.com/docs/6348/1310559)
--- a/Server/app.js
+++ b/Server/app.js
@ -1,5 +1,5 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */

@ -7,6 +7,7 @@ const Koa = require('koa');
 const bodyParser = require('koa-bodyparser');
 const cors = require('koa2-cors');
 const { Signer } = require('@volcengine/openapi');
+const fetch = require('node-fetch');

 const app = new Koa();

@ -30,7 +31,6 @@ const ACCOUNT_INFO = {
   * @notes 非必填, 主账号无须传入, 子账号须传, 获取方式可参考
   * https://www.volcengine.com/docs/6348/1315561 中的 步骤 4-使用子账号调用智能体接口 一节
   */
-  sessionToken: undefined,
  // sessionToken: 'Your SessionToken',
 }

@ -39,13 +39,15 @@ app.use(bodyParser());

 app.use(async ctx => {
  /**
-   * @brief Proxy AIGC Demo OpenAPI
+   * @brief 代理 AIGC 的 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 */
+    /** 
+     * 参考 https://github.com/volcengine/volc-sdk-nodejs 可获取更多 火山 TOP 网关 SDK 的使用方式
+     */
    const openApiRequestData = {
      region: 'cn-north-1',
      method: 'POST',
@ -62,7 +64,7 @@ app.use(async ctx => {
    const signer = new Signer(openApiRequestData, "rtc");
    signer.addAuthorization(ACCOUNT_INFO);
    
-    /** Refer to: https://www.volcengine.com/docs/6348/69828 */
+    /** 参考 https://www.volcengine.com/docs/6348/69828 可获取更多 OpenAPI 的信息 */
    const result = await fetch(`https://rtc.volcengineapi.com?Action=${Action}&Version=${Version}`, {
      method: 'POST',
      headers: {
--- a/Server/package.json
+++ b/Server/package.json
@ -9,7 +9,8 @@
    "@volcengine/openapi": "^1.22.0",
    "koa": "^2.15.3",
    "koa-bodyparser": "^4.4.1",
-    "koa2-cors": "^2.0.6"
+    "koa2-cors": "^2.0.6",
+    "node-fetch": "^2.3.2"
  },
  "scripts": {
    "dev": "node app.js"
--- a/Server/yarn.lock
+++ b/Server/yarn.lock
@ -490,6 +490,13 @@ negotiator@0.6.3:
  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==

+node-fetch@^2.3.2:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 object-inspect@^1.13.1:
  version "1.13.2"
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
@ -606,6 +613,11 @@ toidentifier@1.0.1:
  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==

+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
 tsscmp@1.0.6:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
@ -639,6 +651,19 @@ vary@^1.1.2:
  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==

+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 ylru@^1.2.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.4.0.tgz#0cf0aa57e9c24f8a2cbde0cc1ca2c9592ac4e0f6"
--- a/craco.config.js
+++ b/craco.config.js
@ -1,7 +1,8 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
+
 const CracoLessPlugin = require('craco-less');
 const path = require('path');

--- a/message.js
+++ b/message.js
@ -0,0 +1,12 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+const reset = '\x1b[0m';
+const bright = '\x1b[1m';
+const green = '\x1b[32m';
+
+console.log(`${bright}${bright}===================================================`);
+console.log(`${bright}${green}| 请查看目录下的 README.md 内容, 否则启动可能失败 |`);
+console.log(`${bright}${reset}===================================================${reset}`);
--- a/package.json
+++ b/package.json
@ -1,12 +1,12 @@
 {
  "name": "aigc",
-  "version": "1.3.0",
+  "version": "1.4.0",
  "license": "BSD-3-Clause",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.3",
    "@volcengine/rtc": "4.58.9",
-    "antd": "^4.21.7",
+    "@arco-design/web-react": "^2.65.0",
    "autolinker": "^4.0.0",
    "i18next": "^21.8.16",
    "react": "^18.2.0",
@ -20,15 +20,16 @@
    "uuid": "^8.3.2"
  },
  "scripts": {
-    "dev": "cross-env REACT_APP_LOCAL=cn  craco start",
-    "dev-en": "cross-env REACT_APP_LOCAL=en  craco start",
+    "dev": "npm run echo && npm run start",
+    "start": "cross-env REACT_APP_LOCAL=cn  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",
+    "eslint": "eslint  src/ --fix --quiet --ext .js,.jsx,.ts,.tsx",
    "stylelint": "stylelint 'src/**/*.less' --fix",
-    "pre-commit": "npm run eslint && npm run stylelint"
+    "pre-commit": "npm run eslint && npm run stylelint",
+    "echo": "node message.js"
  },
  "eslintConfig": {
    "extends": [
--- a/public/index.html
+++ b/public/index.html
@ -1,7 +1,7 @@
-<!-- /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+<!--
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
- */ -->
+ -->
 <!DOCTYPE html>
 <html lang="zh">
  <head>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,13 +1,15 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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';
+import MainPage from './pages/MainPage';
+import '@arco-design/web-react/dist/css/arco.css';

 function App() {
+  console.warn('运行问题可参考 README 内容进行排查');
  return (
    <BrowserRouter>
      <Helmet>
@ -15,8 +17,8 @@ function App() {
      </Helmet>
      <Routes>
        <Route path="/">
-          <Route index element={<View />} />
-          <Route path="login" element={<Login />} />
+          <Route index element={<MainPage />} />
+          <Route path="/*" element={<MainPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
--- a/src/app/api.ts
+++ b/src/app/api.ts
@ -1,24 +1,25 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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`,
+    apiBasicParams: `?Name=start&Action=${ACTIONS.StartVoiceChat}&Version=2024-12-01`,
    method: 'post',
  },
  {
    action: ACTIONS.UpdateVoiceChat,
-    apiBasicParams: `?Name=update&Action=${ACTIONS.UpdateVoiceChat}&Version=2024-06-01`,
+    apiBasicParams: `?Name=update&Action=${ACTIONS.UpdateVoiceChat}&Version=2024-12-01`,
    method: 'post',
  },
  {
    action: ACTIONS.StopVoiceChat,
-    apiBasicParams: `?Name=stop&Action=${ACTIONS.StopVoiceChat}&Version=2024-06-01`,
+    apiBasicParams: `?Name=stop&Action=${ACTIONS.StopVoiceChat}&Version=2024-12-01`,
    method: 'post',
  },
 ] as const;
@ -27,18 +28,13 @@ 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 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 queryData = method === 'get' ? await requestGetMethod(apiBasicParams)(params) : await requestPostMethod(apiBasicParams)(params);
    const res = await queryData?.json();
    return resultHandler(res);
  };
--- a/src/app/base.ts
+++ b/src/app/base.ts
@ -1,8 +1,9 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
-import { message } from 'antd';
+
+import { Message } from '@arco-design/web-react';
 import { AIGC_PROXY_HOST } from '@/config';

 type Headers = Record<string, string>;
@ -32,11 +33,7 @@ export const requestGetMethod = (apiBasicParams: string, headers = {}) => {
 * @param isJson
 * @param headers
 */
-export const requestPostMethod = (
-  apiBasicParams: string,
-  isJson: boolean = true,
-  headers: 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',
@ -59,8 +56,6 @@ export const resultHandler = (res: any) => {
  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)})`
-  );
+  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
@ -1,14 +1,23 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
+
 export enum ACTIONS {
  StartVoiceChat = 'StartVoiceChat',
  UpdateVoiceChat = 'UpdateVoiceChat',
  StopVoiceChat = 'StopVoiceChat',
 }

+/**
+ * @brief 请求参数类型
+ * @note OpenAPI 接口参数结构可能更新, 请参阅最新文档内容。
+ * https://www.volcengine.com/docs/6348/1404673
+ */
 export interface RequestParams {
+  /**
+   * @brief 通过接口开启数字人，使用前需要开 ASR、LLM、TTS 等服务。
+   */
  [ACTIONS.StartVoiceChat]: {
    AppId: string;
    BusinessId?: string;
@ -24,6 +33,7 @@ export interface RequestParams {
        AppId: string;
        VoiceType: string;
        Cluster?: string;
+        IgnoreBracketText?: number[];
      }>;
      LLMConfig: Partial<{
        AppId: string;
@ -46,7 +56,21 @@ export interface RequestParams {
        BotId?: string;
      }>;
    }>;
+    /**
+     * @brief 智能体基本配置。
+     */
+    AgentConfig: {
+      TargetUserId: string[];
+      WelcomeMessage: string;
+      UserId: string;
+      EnableConversationStateCallback?: boolean;
+      ServerMessageSignatureForRTS?: string;
+      ServerMessageURLForRTS?: string;
    };
+  };
+  /**
+   * @brief 控制数字人行为，目前支持行为见 Command 参数。
+   */
  [ACTIONS.UpdateVoiceChat]: {
    AppId: string;
    BusinessId?: string;
@ -55,6 +79,9 @@ export interface RequestParams {
    Command: string;
    Message?: string;
  };
+  /**
+   * @brief 关闭数字人任务。
+   */
  [ACTIONS.StopVoiceChat]: {
    AppId: string;
    BusinessId?: string;
@ -63,6 +90,9 @@ export interface RequestParams {
  };
 }

+/**
+ * @brief 返回参数类型
+ */
 export interface RequestResponse {
  [ACTIONS.StartVoiceChat]: string;
  [ACTIONS.UpdateVoiceChat]: string;
@ -70,9 +100,5 @@ export interface RequestResponse {
 }

 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];
+  [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
@ -1,3 +0,0 @@
-<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
@ -1 +0,0 @@
-<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
@ -1 +0,0 @@
-<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
@ -1,3 +0,0 @@
-<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
@ -1 +0,0 @@
-<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
@ -1,6 +0,0 @@
-<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
@ -1,6 +0,0 @@
-<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/CHILDREN_ENCYCLOPEDIA.png
+++ b/src/assets/img/CHILDREN_ENCYCLOPEDIA.png
--- a/src/assets/img/CUSTOMER_SERVICE.png
+++ b/src/assets/img/CUSTOMER_SERVICE.png
--- a/src/assets/img/CallWrapper.svg
+++ b/src/assets/img/CallWrapper.svg
@ -0,0 +1,37 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_2426_337170)">
+<circle cx="40" cy="40.0001" r="40" fill="url(#paint0_linear_2426_337170)"/>
+<circle cx="40" cy="40.0001" r="40" fill="url(#paint1_radial_2426_337170)" fill-opacity="0.8"/>
+<circle cx="40" cy="40.0001" r="40" fill="url(#paint2_radial_2426_337170)" fill-opacity="0.8"/>
+<circle cx="40" cy="40.0001" r="40" fill="url(#paint3_radial_2426_337170)" fill-opacity="0.8"/>
+</g>
+<defs>
+<filter id="filter0_i_2426_337170" x="-7.43727" y="0.00012207" width="87.4373" height="80" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-7.43727"/>
+<feGaussianBlur stdDeviation="7.43727"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.80575 0 0 0 0 0.7375 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2426_337170"/>
+</filter>
+<linearGradient id="paint0_linear_2426_337170" x1="72.5" y1="4.37512" x2="3.30456" y2="86.1152" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3C73FF"/>
+<stop offset="0.527788" stop-color="#6E41EE"/>
+<stop offset="0.880184" stop-color="#D641EE"/>
+</linearGradient>
+<radialGradient id="paint1_radial_2426_337170" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.6949 -17.3912) rotate(96.1584) scale(97.9566 163.285)">
+<stop stop-color="#52B6FF"/>
+<stop offset="1" stop-color="#8F41EE" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_2426_337170" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(21.3559 4.6378) rotate(62.2005) scale(39.9762 114.742)">
+<stop stop-color="#9DD6FF"/>
+<stop offset="1" stop-color="#8F41EE" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_2426_337170" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(117.966 61.1595) rotate(144.328) scale(67.5991 92.9769)">
+<stop stop-color="#5263FF"/>
+<stop offset="1" stop-color="#8F41EE" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
--- a/src/assets/img/CameraClose.svg
+++ b/src/assets/img/CameraClose.svg
@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="48" width="48" height="48" rx="24" transform="rotate(-90 0 48)" fill="#DEE3E9" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2951 17.7307C13.9228 17.8334 13.6494 18.1745 13.6494 18.5795V30.9055L13.6518 30.9713C13.6854 31.4268 14.0657 31.786 14.5298 31.786H26.8559L26.9216 31.7836C27.2974 31.7558 27.6076 31.4923 27.7047 31.1403L14.2951 17.7307ZM32.7781 29.3406L29.057 25.6195V22.101L32.4326 20.2597C33.0781 19.9076 33.8994 20.3303 33.8994 21.0147V28.4699C33.8994 29.0359 33.3376 29.4229 32.7781 29.3406ZM27.7364 24.2989L21.1365 17.699H26.8559C27.3201 17.699 27.7003 18.0582 27.734 18.5137L27.7364 18.5795V24.2989Z" fill="#F53F3F"/>
+<path d="M15.2998 15.3007L32.6998 32.7007" stroke="#F53F3F" stroke-width="1.215" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/img/CameraCloseNote.svg
+++ b/src/assets/img/CameraCloseNote.svg
@ -0,0 +1,12 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2619_63436)">
+<path d="M0.600586 30C0.600586 46.2331 13.7617 59.4 30.0006 59.4C46.2395 59.4 59.4006 46.2389 59.4006 30C59.4006 13.7611 46.2395 0.600006 30.0006 0.600006C13.7617 0.600006 0.600586 13.7611 0.600586 30Z" fill="#A2AFC3" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8256 19.5512C13.2054 19.7226 12.75 20.291 12.75 20.9657V41.5092L12.754 41.6187C12.81 42.378 13.4438 42.9766 14.2174 42.9766H34.7609L34.8704 42.9726C35.4965 42.9264 36.0133 42.4874 36.1754 41.901L13.8256 19.5512ZM44.6305 38.901L38.4287 32.6992V26.8349L44.0548 23.7662C45.1307 23.1794 46.4994 23.8839 46.4994 25.0245V37.4497C46.4994 38.3931 45.5631 39.0382 44.6305 38.901ZM36.2283 30.4988L25.2278 19.4984H34.7609C35.5345 19.4984 36.1682 20.097 36.2242 20.8562L36.2283 20.9657V30.4988Z" fill="#F3F7FF"/>
+<path d="M15.501 15.5011L44.501 44.5011" stroke="#F3F7FF" stroke-width="2.025" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2619_63436">
+<rect width="58.8" height="58.8" fill="white" transform="translate(0.599609 0.600006)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/img/CameraOff.svg
+++ b/src/assets/img/CameraOff.svg
@ -1,3 +0,0 @@
-<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
@ -1,3 +0,0 @@
-<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/CameraOpen.svg
+++ b/src/assets/img/CameraOpen.svg
@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="48" width="48" height="48" rx="24" transform="rotate(-90 0 48)" fill="#DEE3E9" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4783 16.9989H27.1739C27.6896 16.9989 28.1121 17.3979 28.1495 17.9041L28.1522 17.9771V31.6728C28.1522 32.1885 27.7531 32.611 27.2469 32.6484L27.1739 32.651H13.4783C12.9625 32.651 12.54 32.252 12.5027 31.7458L12.5 31.6728V17.9771C12.5 17.4614 12.8991 17.0389 13.4053 17.0016L13.4783 16.9989H27.1739H13.4783ZM34.9999 20.6831V28.9666C34.9999 29.727 34.0875 30.1967 33.3702 29.8055L29.6195 27.7597V21.8901L33.3702 19.8443C34.0875 19.4531 34.9999 19.9227 34.9999 20.6831Z" fill="#737A87"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 20C19.1046 20 20 20.8954 20 22C20 23.1046 19.1046 24 18 24C16.8954 24 16 23.1046 16 22C16 20.8954 16.8954 20 18 20Z" fill="#F2F4F6"/>
+</svg>
--- a/src/assets/img/Checked.svg
+++ b/src/assets/img/Checked.svg
@ -1,5 +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="M4 8C4 5.79086 5.79086 4 8 4H24V16C24 20.4183 20.4183 24 16 24H4V8Z" fill="#6D61FC"/>
 <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/DoubaoAvatar.png
+++ b/src/assets/img/DoubaoAvatar.png
--- a/src/assets/img/DoubaoAvatarGIF.webp
+++ b/src/assets/img/DoubaoAvatarGIF.webp
--- a/src/assets/img/DoubaoProfile.svg
+++ b/src/assets/img/DoubaoProfile.svg
--- a/src/assets/img/History.svg
+++ b/src/assets/img/History.svg
@ -1 +0,0 @@
-<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/INTELLIGENT_ASSISTANT.png
+++ b/src/assets/img/INTELLIGENT_ASSISTANT.png
--- a/src/assets/img/InfoIcon.svg
+++ b/src/assets/img/InfoIcon.svg
@ -1,7 +0,0 @@
-<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/LeaveRoom.svg
+++ b/src/assets/img/LeaveRoom.svg
@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="48" width="48" height="48" rx="24" transform="rotate(-90 0 48)" fill="#FF706D"/>
+<path d="M32.8228 22.8228C32.0486 22.0486 30.5334 21.5649 29.3985 21.2955C27.8787 20.9346 26.064 20.7232 24.2888 20.7001H24.2823L23.7113 20.7001C21.9361 20.7231 20.1214 20.9347 18.6016 21.2955C17.4667 21.565 15.9514 22.0486 15.1772 22.8228C14.3487 23.6513 14.0618 25.1231 13.9769 25.7174C13.9106 26.1812 13.7403 27.7403 14.3303 28.3303C14.5726 28.5726 14.992 28.6749 15.6905 28.6622C16.3083 28.651 16.9901 28.5512 17.4534 28.4694C18.0754 28.3596 18.6953 28.2134 19.1992 28.0577C20.015 27.8056 20.2765 27.6093 20.4023 27.4835C20.6561 27.2296 20.7437 26.8768 20.6626 26.435C20.6092 26.1442 20.492 25.8481 20.3786 25.5618C20.3021 25.3688 20.18 25.0605 20.1633 24.9129C20.3133 24.8203 20.7314 24.6525 21.5664 24.4941C22.3444 24.3466 23.2536 24.2527 24.0001 24.2427C24.7464 24.2527 25.6556 24.3464 26.4337 24.4942C27.2685 24.6525 27.6866 24.8202 27.8367 24.9129C27.82 25.0604 27.6979 25.3687 27.6214 25.5618C27.508 25.848 27.3907 26.1441 27.3374 26.4351C27.2563 26.8768 27.3439 27.2296 27.5978 27.4834C27.7235 27.6092 27.9851 27.8055 28.8009 28.0578C29.3047 28.2134 29.9247 28.3597 30.5466 28.4694C31.0099 28.5511 31.6918 28.6509 32.3095 28.6622C33.008 28.6749 33.4274 28.5726 33.6697 28.3303C34.2597 27.7403 34.0894 26.1812 34.0232 25.7175C33.9382 25.1231 33.6513 23.6513 32.8228 22.8228Z" fill="white"/>
+</svg>
--- a/src/assets/img/MicClose.svg
+++ b/src/assets/img/MicClose.svg
@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="48" width="48" height="48" rx="24" transform="rotate(-90 0 48)" fill="#DEE3E9" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9963 18.6205C15.996 18.6387 15.9959 18.6569 15.9959 18.6752V23.3139C15.9959 25.9367 18.1222 28.063 20.7451 28.063C22.0483 28.063 23.229 27.5381 24.0871 26.6881L15.9963 18.6205ZM25.7208 28.3172L26.9786 29.5713C25.6979 31.1092 23.8436 32.1639 21.7407 32.4194V33.365C21.7407 33.853 21.3451 34.2486 20.8571 34.2486C20.3692 34.2486 19.9736 33.853 19.9736 33.365V32.4435C17.5281 32.2143 15.3981 30.907 14.0824 29.0063C13.8047 28.6051 13.9048 28.0547 14.3061 27.7769C14.7073 27.4992 15.2577 27.5993 15.5354 28.0005C16.6675 29.636 18.5763 30.7123 20.7453 30.7123C22.771 30.7123 24.5698 29.7735 25.7208 28.3172ZM22.514 19.9752L17.6221 15.0972C18.457 14.3679 19.5494 13.926 20.7451 13.926C23.1067 13.926 25.0656 15.6497 25.4325 17.9077C25.3796 17.9048 25.3264 17.9033 25.2728 17.9033C23.9644 17.9033 22.8604 18.7784 22.514 19.9752ZM25.2708 21.8803C25.8808 21.8803 26.3753 21.3858 26.3753 20.7758C26.3753 20.1659 25.8808 19.6714 25.2708 19.6714C24.6609 19.6714 24.1664 20.1659 24.1664 20.7758C24.1664 21.3858 24.6609 21.8803 25.2708 21.8803ZM29.6263 18.6146C29.4094 18.1775 28.8792 17.999 28.4421 18.2158C28.005 18.4327 27.8264 18.9629 28.0433 19.4C28.2536 19.8239 28.3654 20.2937 28.3655 20.774C28.3656 21.3205 28.221 21.8535 27.9512 22.3207C27.7073 22.7433 27.8521 23.2837 28.2747 23.5277C28.6973 23.7716 29.2377 23.6268 29.4816 23.2042C29.9054 22.4701 30.1328 21.6326 30.1326 20.7737C30.1325 20.0189 29.9567 19.2806 29.6263 18.6146ZM33.0038 16.4939C32.7676 16.0669 32.23 15.9123 31.803 16.1486C31.376 16.3848 31.2214 16.9225 31.4576 17.3494C32.0357 18.3942 32.3426 19.574 32.3412 20.7797C32.3398 22.0232 32.0104 23.2384 31.3942 24.3058C31.1502 24.7284 31.295 25.2687 31.7176 25.5127C32.1402 25.7567 32.6806 25.6119 32.9246 25.1893C33.6949 23.8552 34.1065 22.3362 34.1083 20.7817C34.1101 19.2746 33.7264 17.7999 33.0038 16.4939Z" fill="#FF3A2F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.408 14.0475C13.2318 14.2237 13.2318 14.5101 13.408 14.6862L31.2945 32.5727C31.4711 32.7493 31.757 32.7493 31.9336 32.5727L32.5723 31.934C32.7485 31.7574 32.7485 31.4715 32.5723 31.2953L30.4737 29.1967L29.1922 27.9148L27.9067 26.6297L26.6112 25.3337L24.3265 23.0495L22.5197 21.2427L20.7007 19.4232L19.412 18.135L14.6859 13.4088C14.5092 13.2322 14.2233 13.2322 14.0472 13.4088L13.408 14.0475Z" fill="#FF3A2F"/>
+</svg>
--- a/src/assets/img/MicDisabled.svg
+++ b/src/assets/img/MicDisabled.svg
@ -1,17 +0,0 @@
-<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
@ -1,29 +0,0 @@
-<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/MicOpen.svg
+++ b/src/assets/img/MicOpen.svg
@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="48" width="48" height="48" rx="24" transform="rotate(-90 0 48)" fill="#DEE3E9" fill-opacity="0.4"/>
+<path d="M15.6624 18.3417C15.6624 15.7188 17.7887 13.5925 20.4116 13.5925C22.7732 13.5925 24.7321 15.3162 25.099 17.5742C25.0461 17.5713 24.9929 17.5698 24.9393 17.5698C23.3534 17.5698 22.0677 18.8554 22.0677 20.4414C22.0677 22.0273 23.3534 23.3129 24.9393 23.3129C25.0101 23.3129 25.0803 23.3104 25.1498 23.3053C24.9828 25.7766 22.9252 27.7295 20.4116 27.7295C17.7887 27.7295 15.6624 25.6032 15.6624 22.9804V18.3417Z" fill="#737A87"/>
+<path d="M24.9373 21.5468C25.5473 21.5468 26.0418 21.0523 26.0418 20.4423C26.0418 19.8324 25.5473 19.3379 24.9373 19.3379C24.3274 19.3379 23.8329 19.8324 23.8329 20.4423C23.8329 21.0523 24.3274 21.5468 24.9373 21.5468Z" fill="#737A87"/>
+<path d="M28.1086 17.8823C28.5457 17.6655 29.0759 17.844 29.2928 18.2811C29.6232 18.9471 29.799 19.6854 29.7991 20.4402C29.7993 21.2991 29.5719 22.1366 29.1481 22.8707C28.9042 23.2933 28.3638 23.4381 27.9412 23.1942C27.5186 22.9502 27.3738 22.4098 27.6177 21.9872C27.8875 21.52 28.0321 20.987 28.032 20.4405C28.0319 19.9602 27.9201 19.4904 27.7098 19.0665C27.4929 18.6294 27.6715 18.0992 28.1086 17.8823Z" fill="#737A87"/>
+<path d="M32.6704 16.1604C32.4341 15.7335 31.8965 15.5788 31.4695 15.8151C31.0425 16.0513 30.8879 16.589 31.1241 17.0159C31.7022 18.0607 32.0091 19.2405 32.0077 20.4462C32.0063 21.6897 31.6769 22.9049 31.0607 23.9723C30.8167 24.3949 30.9615 24.9352 31.3841 25.1792C31.8067 25.4232 32.3471 25.2784 32.5911 24.8558C33.3614 23.5217 33.773 22.0027 33.7748 20.4482C33.7766 18.9411 33.3929 17.4664 32.6704 16.1604Z" fill="#737A87"/>
+<path d="M13.9726 27.4434C14.3738 27.1657 14.9242 27.2658 15.2019 27.667C16.334 29.3025 18.2428 30.3788 20.4118 30.3788C22.5808 30.3788 24.4896 29.3025 25.6217 27.667C25.8994 27.2658 26.4498 27.1657 26.851 27.4434C27.2523 27.7212 27.3524 28.2716 27.0747 28.6728C25.7993 30.5153 23.7587 31.8002 21.4072 32.0859V33.0316C21.4072 33.5195 21.0116 33.9151 20.5236 33.9151C20.0357 33.9151 19.6401 33.5195 19.6401 33.0316V32.11C17.1946 31.8808 15.0646 30.5735 13.7489 28.6728C13.4712 28.2716 13.5713 27.7212 13.9726 27.4434Z" fill="#737A87"/>
+</svg>
--- a/src/assets/img/Phone.svg
+++ b/src/assets/img/Phone.svg
@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.53149 36.0001C11.8541 36.0001 14.8526 34.4529 16.9591 33.1546C19.7801 31.4163 22.8192 29.0113 25.5167 26.3832L25.5264 26.3735L26.3829 25.5168C29.0112 22.8195 31.4159 19.7803 33.1545 16.9593C34.4526 14.8527 36 11.8542 36 9.53161C36 7.04617 34.2227 4.40812 33.4585 3.38936C32.8623 2.59434 30.7792 0.00012207 29.0091 0.00012207C28.2823 0.00012207 27.4996 0.475821 26.4709 1.54267C25.5611 2.48599 24.688 3.65852 24.1159 4.47611C23.3474 5.57376 22.6369 6.72298 22.1147 7.71235C21.2691 9.31417 21.1713 10.001 21.1713 10.3784C21.1713 11.1399 21.5692 11.8005 22.3535 12.3415C22.8699 12.6977 23.4899 12.9659 24.0893 13.2253C24.4936 13.4002 25.1393 13.6793 25.3856 13.8757C25.2996 14.2396 24.9241 15.1184 23.9092 16.6085C22.9635 17.9969 21.7406 19.5015 20.6358 20.6361C19.5014 21.7407 17.997 22.9638 16.6082 23.9095C15.1185 24.924 14.2397 25.2997 13.8756 25.3857C13.6794 25.1394 13.4001 24.494 13.2252 24.0896C12.966 23.49 12.6978 22.8701 12.3414 22.3536C11.8003 21.5693 11.1398 21.1717 10.3782 21.1717C10.0009 21.1717 9.31405 21.2695 7.71202 22.1148C6.72286 22.637 5.57346 23.3476 4.47595 24.116C3.65839 24.6883 2.48586 25.5614 1.54234 26.4711C0.475697 27.4997 0 28.2824 0 29.0093C0 30.7793 2.59401 32.8624 3.38906 33.4587C4.408 34.2228 7.04601 36.0001 9.53149 36.0001Z" fill="white"/>
+</svg>
--- a/src/assets/img/RealTimeData.svg
+++ b/src/assets/img/RealTimeData.svg
@ -1,4 +0,0 @@
-<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
@ -1 +0,0 @@
-<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
@ -1 +0,0 @@
-<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/ShareScreen.svg
+++ b/src/assets/img/ShareScreen.svg
@ -1,3 +0,0 @@
-<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
@ -1,4 +0,0 @@
-<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/TEACHER.png
+++ b/src/assets/img/TEACHER.png
--- a/src/assets/img/TEACHING_ASSISTANT.png
+++ b/src/assets/img/TEACHING_ASSISTANT.png
--- a/src/assets/img/TRANSLATE.png
+++ b/src/assets/img/TRANSLATE.png
--- a/src/assets/img/VIRTUAL_GIRL_FRIEND.png
+++ b/src/assets/img/VIRTUAL_GIRL_FRIEND.png
--- a/src/assets/img/Wave.gif
+++ b/src/assets/img/Wave.gif
--- a/src/assets/img/bubble.svg
+++ b/src/assets/img/bubble.svg
@ -1,13 +0,0 @@
-<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/huoponvsheng.jpeg
+++ b/src/assets/img/huoponvsheng.jpeg
--- a/src/assets/img/jingqiangkanye.jpeg
+++ b/src/assets/img/jingqiangkanye.jpeg
--- a/src/assets/img/micHasVolume.png
+++ b/src/assets/img/micHasVolume.png
--- 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/AISettings/index.module.less
+++ b/src/components/AISettings/index.module.less
@ -0,0 +1,249 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+.container {
+    padding: 16px 8px;
+    background: linear-gradient(0deg, #F0F2FF 0%, #E0E4FF 100%);
+
+    :global {
+        .arco-drawer-scroll {
+            .arco-drawer-content {
+                overflow-x: hidden;
+                overflow-y: auto;
+
+                scrollbar-width: thin; /* 设置滚动条宽度为细 */
+                scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); /* 设置滚动条和轨道的颜色 */
+            }
+
+            ::-webkit-scrollbar {
+                width: 0px;
+                height: 0px;
+            }
+    
+            ::-webkit-scrollbar-thumb {
+                background: rgba(0,0,0,0);
+                border-radius: 0px;
+            }
+    
+            ::-webkit-scrollbar-track {
+                background: rgba(0,0,0,0);
+                border-radius: 0px;
+            }
+        }
+    }
+
+    .title {
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 28px;
+
+        .special-text {
+            background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+    }
+
+    .sub-title {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+        color: var(--text-color-text-3, rgba(115, 122, 135, 1));
+        margin-top: 6px;
+    }
+
+    .scenes {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        gap: 14px;
+        margin-top: 32px;
+    }
+
+    .scenes-mobile {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        gap: 14px;
+        margin-top: 32px;
+        overflow-x: auto;
+        padding-bottom: 8px;
+    }
+
+    .configuration {
+        position: relative;
+        min-height: calc(100% - 300px);
+        height: max-content;
+        width: 100%;
+        background: white;
+        box-sizing: border-box;
+        padding: 32px 24px;
+        margin-top: 24px;
+        margin-bottom: 12px;
+        border-radius: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 36px;
+
+        .anchor {
+            position: absolute;
+            border-bottom: 12px solid white;
+            border-left: 12px solid transparent;
+            border-right: 12px solid transparent;
+            top: 0px;
+            transform: translate(-50%, -99%);
+        }
+
+        .ai-settings {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            gap: 24px;
+
+            .ai-settings-wrapper {
+                display: flex;
+                width: 100%;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .ai-settings-model {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+                gap: 12px;
+            }
+        }
+
+        :global {
+            .arco-textarea {
+                background: white !important;
+                width: 100%;
+                height: max-content;
+            }
+            .arco-textarea:focus {
+                outline: none !important;
+            }
+        }
+
+        textarea {
+            border-radius: 4px;
+            resize: none;
+            -webkit-resizer: none;
+            border: 0px;
+            outline: none;
+            box-shadow: none;
+        }
+
+        textarea:focus {
+            border: 0px;
+            outline: none;
+            box-shadow: none;
+        }
+    }
+}
+
+
+
+.button {
+    position: relative;
+    width: max-content !important;
+    height: 24px !important;
+    margin-top: 8px;
+    border-radius: 4px !important;
+    font-size: 12px !important;
+    background: linear-gradient(77.86deg, rgba(229, 242, 255, 0.5) -3.23%, rgba(217, 229, 255, 0.5) 51.11%, rgba(246, 226, 255, 0.5) 98.65%);
+    cursor: pointer;
+
+    .button-text {
+        background: linear-gradient(77.86deg, #3384FF -3.23%, #014BDE 51.11%, #A945FB 98.65%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        font-weight: 500;
+        line-height: 20px;
+        text-align: center;
+    }
+}
+
+.button::after {
+    content: '';
+    position: absolute;
+    border-radius: 3px;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 22px;
+    background: white;
+    z-index: -1;
+}
+
+.button::before {
+    content: '';
+    position: absolute;
+    border-radius: 5px;
+    top: -2px;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: 26px;
+    background: linear-gradient(90deg, rgba(0, 139, 255, 0.5) 0%, rgba(0, 98, 255, 0.5) 49.5%, rgba(207, 92, 255, 0.5) 100%);
+    z-index: -2;
+}
+
+.button:hover {
+    background: linear-gradient(77.86deg, rgba(200, 220, 255, 0.7) -3.23%, rgba(190, 210, 255, 0.7) 51.11%, rgba(230, 210, 255, 0.7) 98.65%);
+}
+
+.button:active {
+    background: linear-gradient(77.86deg, rgba(170, 190, 255, 0.9) -3.23%, rgba(160, 180, 255, 0.9) 51.11%, rgba(210, 180, 255, 0.9) 98.65%);
+}
+
+.footer {
+  width: calc(100% - 12px);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  padding-bottom: 16px;
+  gap: 12px;
+
+  .suffix {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    margin-right: 12px;
+    color: var(--text-color-text-3, rgba(115, 122, 135, 1));
+  }
+
+  .cancel {
+    width: 88px;
+    height: 32px;
+    border-radius: 6px;
+    border: 1px solid var(--line-color-border-3, rgba(221, 226, 233, 1));
+    background-color: white !important;
+  }
+
+  .confirm {
+    width: 88px;
+    height: 32px;
+    border-radius: 6px;
+    background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
+    color: white !important;
+  }
+
+  .confirm:hover {
+    opacity: .8;
+  }
+
+  .confirm:active {
+    opacity: 1;
+  }
+}
--- a/src/components/AISettings/index.tsx
+++ b/src/components/AISettings/index.tsx
@ -0,0 +1,315 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import { Button, Drawer, Input, Message } from '@arco-design/web-react';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { IconSwap } from '@arco-design/web-react/icon';
+import CheckIcon from '../CheckIcon';
+import Config, { Icon, Name, SCENE, Prompt, Welcome, Voice, Model, AI_MODEL, ModelSourceType, VOICE_INFO_MAP, VOICE_TYPE } from '@/config';
+import TitleCard from '../TitleCard';
+import CheckBoxSelector from '@/components/CheckBoxSelector';
+import RtcClient from '@/lib/RtcClient';
+import { clearHistoryMsg, updateAIConfig, updateScene } from '@/store/slices/room';
+import { RootState } from '@/store';
+import utils from '@/utils/utils';
+import { useDeviceState } from '@/lib/useCommon';
+import VoiceTypeChangeSVG from '@/assets/img/VoiceTypeChange.svg';
+import DoubaoModelSVG from '@/assets/img/DoubaoModel.svg';
+import ModelChangeSVG from '@/assets/img/ModelChange.svg';
+import styles from './index.module.less';
+
+const SCENES = [
+  SCENE.INTELLIGENT_ASSISTANT,
+  SCENE.VIRTUAL_GIRL_FRIEND,
+  // SCENE.TEACHER,
+  SCENE.TRANSLATE,
+  SCENE.CHILDREN_ENCYCLOPEDIA,
+  SCENE.CUSTOMER_SERVICE,
+  SCENE.TEACHING_ASSISTANT,
+  SCENE.CUSTOM,
+];
+
+function AISettings() {
+  const dispatch = useDispatch();
+  const { isVideoPublished, switchCamera } = useDeviceState();
+  const room = useSelector((state: RootState) => state.room);
+  const [loading, setLoading] = useState(false);
+  const [use3Part, setUse3Part] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [scene, setScene] = useState(room.scene);
+  const [data, setData] = useState({
+    prompt: Prompt[scene],
+    welcome: Welcome[scene],
+    voice: Voice[scene],
+    model: Model[scene],
+
+    Url: '',
+    APIKey: '',
+    customModelName: '',
+  });
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleVoiceTypeChanged = (key: string) => {
+    setData((prev) => ({
+      ...prev,
+      voice: key as VOICE_TYPE,
+    }));
+  };
+
+  const handleChecked = (checkedScene: SCENE) => {
+    setScene(checkedScene);
+    setData((prev) => ({
+      ...prev,
+      prompt: Prompt[checkedScene],
+      welcome: Welcome[checkedScene],
+      voice: Voice[checkedScene],
+      model: Model[checkedScene],
+    }));
+  };
+
+  const handleUseThirdPart = () => {
+    setUse3Part(!use3Part);
+    Config.ModeSourceType = use3Part ? ModelSourceType.Custom : ModelSourceType.Available;
+  };
+
+  const handleUpdateConfig = async () => {
+    dispatch(updateScene({ scene }));
+    if (use3Part) {
+      if (!data.Url) {
+        Message.error('请输入正确的第三方模型地址');
+        return;
+      }
+      if (!data.Url.startsWith('http://') && !data.Url.startsWith('https://')) {
+        Message.error('第三方模型请求地址格式不正确, 请以 http:// 或 https:// 为开头');
+        return;
+      }
+      Config.Url = data.Url;
+      Config.APIKey = data.APIKey;
+      Config.ModeSourceType = ModelSourceType.Custom;
+    } else {
+      Config.Url = undefined;
+      Config.APIKey = undefined;
+      Config.ModeSourceType = ModelSourceType.Available;
+    }
+    setLoading(true);
+    Config.Model = use3Part ? (data.customModelName as AI_MODEL) : (data.model as AI_MODEL);
+    Config.Prompt = data.prompt;
+    Config.VoiceType = data.voice;
+    Config.WelcomeSpeech = data.welcome;
+    dispatch(updateAIConfig(Config.aigcConfig));
+
+    if (RtcClient.getAudioBotEnabled()) {
+      dispatch(clearHistoryMsg());
+      await RtcClient.updateAudioBot();
+    }
+    if (data.model === AI_MODEL.VISION) {
+      room.isJoined && !isVideoPublished && switchCamera(true);
+    } else {
+      room.isJoined && isVideoPublished && switchCamera(true);
+    }
+
+    setLoading(false);
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    if (open) {
+      setScene(room.scene);
+    }
+  }, [open]);
+
+  return (
+    <>
+      <Button className={styles.button} onClick={handleClick}>
+        <div className={styles['button-text']}>修改 AI 设定</div>
+      </Button>
+      <Drawer
+        width={utils.isMobile() ? '100%' : 870}
+        closable={false}
+        maskClosable={false}
+        title={null}
+        className={styles.container}
+        style={{
+          padding: utils.isMobile() ? '0px' : '16px 8px',
+        }}
+        footer={
+          <div className={styles.footer}>
+            <div className={styles.suffix}>AI 配置修改后，退出房间将不再保存该配置方案</div>
+            <Button loading={loading} className={styles.cancel} onClick={() => setOpen(false)}>
+              取消
+            </Button>
+            <Button loading={loading} className={styles.confirm} onClick={handleUpdateConfig}>
+              确定
+            </Button>
+          </div>
+        }
+        visible={open}
+        onCancel={() => setOpen(false)}
+      >
+        <div className={styles.title}>
+          选择你所需要的
+          <span className={styles['special-text']}> AI 人设</span>
+        </div>
+        <div className={styles['sub-title']}>我们已为您配置好对应人设的基本参数，您也可以根据自己的需求进行自定义设置</div>
+        <div className={utils.isMobile() ? styles['scenes-mobile'] : styles.scenes}>
+          {SCENES.map((key) => (
+            <CheckIcon
+              key={key}
+              tag={key === SCENE.TEACHING_ASSISTANT ? '视觉理解模型' : ''}
+              icon={Icon[key as keyof typeof Icon]}
+              title={Name[key as keyof typeof Name]}
+              checked={key === scene}
+              blur={key !== scene && key === SCENE.CUSTOM}
+              onClick={() => handleChecked(key as SCENE)}
+            />
+          ))}
+        </div>
+        <div className={styles.configuration}>
+          {utils.isMobile() ? null : (
+            <div
+              className={styles.anchor}
+              style={{
+                /**
+                 * @note 单个场景卡片 100px, 间距 14px;
+                 */
+                left: `${SCENES.indexOf(scene) * 100 + 50 + SCENES.indexOf(scene) * 14}px`,
+              }}
+            />
+          )}
+          <TitleCard title="Prompt">
+            <Input.TextArea
+              autoSize
+              value={data.prompt}
+              onChange={(val) => {
+                setData((prev) => ({
+                  ...prev,
+                  prompt: val,
+                }));
+              }}
+              placeholder="请输入你需要的 Prompt 设定"
+            />
+          </TitleCard>
+          <TitleCard title="欢迎语">
+            <Input.TextArea
+              autoSize
+              value={data.welcome}
+              onChange={(val) => {
+                setData((prev) => ({
+                  ...prev,
+                  welcome: val,
+                }));
+              }}
+              placeholder="请输入欢迎语"
+            />
+          </TitleCard>
+          <div
+            className={styles['ai-settings']}
+            style={{
+              flexWrap: utils.isMobile() ? 'wrap' : 'nowrap',
+            }}
+          >
+            <TitleCard title="音色">
+              <div className={styles['ai-settings-wrapper']}>
+                <CheckBoxSelector
+                  label="音色选择"
+                  data={Object.keys(VOICE_TYPE).map((type) => {
+                    const info = VOICE_INFO_MAP[VOICE_TYPE[type as keyof typeof VOICE_TYPE]];
+                    return {
+                      key: VOICE_TYPE[type as keyof typeof VOICE_TYPE],
+                      label: type,
+                      icon: info.icon,
+                      description: info.description,
+                    };
+                  })}
+                  onChange={handleVoiceTypeChanged}
+                  value={data.voice}
+                  moreIcon={VoiceTypeChangeSVG}
+                  moreText="更换音色"
+                  placeHolder="请选择你需要的音色"
+                />
+              </div>
+            </TitleCard>
+            <div className={styles['ai-settings-model']}>
+              {use3Part ? (
+                <>
+                  <TitleCard required title="第三方模型地址">
+                    <Input.TextArea
+                      autoSize
+                      value={data.Url}
+                      onChange={(val) => {
+                        setData((prev) => ({
+                          ...prev,
+                          Url: val,
+                        }));
+                      }}
+                      placeholder="请输入第三方模型地址"
+                    />
+                  </TitleCard>
+                  <TitleCard title="请求密钥">
+                    <Input.TextArea
+                      autoSize
+                      value={data.APIKey}
+                      onChange={(val) => {
+                        setData((prev) => ({
+                          ...prev,
+                          APIKey: val,
+                        }));
+                      }}
+                      placeholder="请输入请求密钥"
+                    />
+                  </TitleCard>
+                  <TitleCard title="模型名称">
+                    <Input.TextArea
+                      autoSize
+                      value={data.customModelName}
+                      onChange={(val) => {
+                        setData((prev) => ({
+                          ...prev,
+                          customModelName: val,
+                        }));
+                      }}
+                      placeholder="请输入模型名称"
+                    />
+                  </TitleCard>
+                </>
+              ) : (
+                <TitleCard title="官方模型">
+                  <CheckBoxSelector
+                    label="模型选择"
+                    data={Object.keys(AI_MODEL).map((type) => ({
+                      key: AI_MODEL[type as keyof typeof AI_MODEL],
+                      label: type.replaceAll('_', ' '),
+                      icon: DoubaoModelSVG,
+                    }))}
+                    moreIcon={ModelChangeSVG}
+                    moreText="更换模型"
+                    placeHolder="请选择你需要的模型"
+                    onChange={(key) => {
+                      setData((prev) => ({
+                        ...prev,
+                        model: key as AI_MODEL,
+                      }));
+                    }}
+                    value={data.model}
+                  />
+                </TitleCard>
+              )}
+
+              <Button size="mini" type="text" onClick={handleUseThirdPart}>
+                {use3Part ? '使用官方模型' : '使用第三方模型'} <IconSwap />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Drawer>
+    </>
+  );
+}
+
+export default AISettings;
--- a/src/components/AvatarCard/index.module.less
+++ b/src/components/AvatarCard/index.module.less
@ -0,0 +1,140 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+.card {
+    display: grid;
+    position: relative;
+    width: 370px;
+    height: 128px;
+
+    .avatar {
+        position: absolute;
+        box-sizing: border-box;
+        border-radius: 50% 0% 0 50%;
+        width: 128px;
+        height: 128px;
+        margin-right: 16px;
+        border-left: 1px solid #EAEDF1;
+        border-top: 1px solid #EAEDF1;
+        border-bottom: 1px solid #EAEDF1;
+        background-color: white;
+        z-index: 2;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        .doubao-gif {
+            height: 127px;
+            transform: scale(0.95);
+        }
+    }
+    
+    .body {
+        width: 100%;
+        height: 100%;
+        padding: 16px 16px 16px calc(64px + 16px);
+        position: relative;
+        display: flex;
+        align-items: center;
+        border: 1px solid var(--line-color-border-2, #EAEDF1);
+        box-sizing: border-box;
+        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
+        transform:translateX(64px);
+    }
+
+    .body::after {
+        content: '';
+        position: absolute;
+        top: -1px;
+        right: -1px;
+        width: 20px;
+        height: 20px;
+        background-color: white;
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    .body::before {
+        content: '';
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        width: 20px;
+        height: 20px;
+        background-color: #EAEDF1;
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    .text-wrapper {
+        position: absolute;
+        left: 128px;
+        margin-left: 16px;
+        width: max-content;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        z-index: 4;
+
+        .user-info {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            .title {
+                color: var(--text-color-text-1, #0C0D0E);
+                font-size: 14px;
+                font-weight: 500;
+                line-height: 22px;
+            }
+
+            .description {
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 20px;
+                color: #737A87;
+            }
+        }
+    }
+
+    .corner {
+        position: absolute;
+        top: -6px;
+        right: -6px;
+        width: 0px;
+        height: 0px;
+        border-right: 10px solid transparent;
+        border-top: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+        border-left: 10px solid #EAEDF1;
+        z-index: 3;
+        transform: translateX(64px) rotate(-45deg);
+    }
+
+    .corner::before {
+        content: '';
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        width: 0px;
+        height: 0px;
+        border-right: 8px solid transparent;
+        border-top: 8px solid transparent;
+        border-bottom: 8px solid transparent;
+        border-left: 8px solid white;
+        transform: translate(7px, -8px);
+    }
+
+    .corner::after {
+        content: '';
+        position: absolute;
+        top: 0px;
+        right: 4px;
+        width: 5px;
+        height: 1px;
+        background-color: #EAEDF1;
+        transform: rotate(-90deg);
+    }
+}
--- a/src/components/AvatarCard/index.tsx
+++ b/src/components/AvatarCard/index.tsx
@ -0,0 +1,47 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import { useSelector } from 'react-redux';
+import AISettings from '../AISettings';
+import style from './index.module.less';
+import DouBaoAvatar from '@/assets/img/DoubaoAvatarGIF.webp';
+import { RootState } from '@/store';
+import { Name, VOICE_TYPE } from '@/config';
+
+interface IAvatarCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  avatar?: string;
+}
+
+const ReversedVoiceType = Object.entries(VOICE_TYPE).reduce<Record<string, string>>((acc, [key, value]) => {
+  acc[value] = key;
+  return acc;
+}, {});
+
+function AvatarCard(props: IAvatarCardProps) {
+  const room = useSelector((state: RootState) => state.room);
+  const scene = room.scene;
+  const { LLMConfig, TTSConfig } = room.aiConfig.Config || {};
+  const { avatar, className, ...rest } = props;
+
+  return (
+    <div className={`${style.card} ${className}`} {...rest}>
+      <div className={style.corner} />
+      <div className={style.avatar}>
+        <img id="avatar-card" src={avatar || DouBaoAvatar} className={style['doubao-gif']} alt="Avatar" />
+      </div>
+      <div className={style.body} />
+      <div className={style['text-wrapper']}>
+        <div className={style['user-info']}>
+          <div className={style.title}>{Name[scene]}</div>
+          <div className={style.description}>声源来自 {ReversedVoiceType[TTSConfig?.VoiceType || '']}</div>
+          <div className={style.description}>模型 {LLMConfig.ModelName}</div>
+          <AISettings />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AvatarCard;
--- a/src/components/BubbleMsg/index.module.less
+++ b/src/components/BubbleMsg/index.module.less
@ -1,5 +1,5 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */

--- a/src/components/BubbleMsg/index.tsx
+++ b/src/components/BubbleMsg/index.tsx
@ -1,7 +1,8 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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';
@ -21,11 +22,7 @@ function BubbleMsg(props: IBubbleMsgProps) {

  return (
    <div style={style} className={`${styles.bubbleWrapper} ${className}`}>
-      <img
-        className={`${styles.bubbleLogo} ${styles[`bubble-direction-${direction}`]}`}
-        src={Bubble}
-        alt="Logo"
-      />
+      <img className={`${styles.bubbleLogo} ${styles[`bubble-direction-${direction}`]}`} src={Bubble} alt="Logo" />
      <div className={styles.bubbleText}>{text}</div>
    </div>
  );
--- a/src/components/ButtonRadio/index.module.less
+++ b/src/components/ButtonRadio/index.module.less
@ -1,7 +1,8 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
+
 .wrapper {
  width: max-content;
  padding: 4px 4px;
--- a/src/components/ButtonRadio/index.tsx
+++ b/src/components/ButtonRadio/index.tsx
@ -1,9 +1,10 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
+
 import { useMemo } from 'react';
-import { Button } from 'antd';
+import { Button } from '@arco-design/web-react';
 import styles from './index.module.less';

 interface IProps {
@ -17,8 +18,7 @@ interface IProps {

 function ButtonRadio(props: IProps) {
  const { value, onChange, options } = props;
-  const selected =
-    useMemo(() => options.find((item) => item.key === value), [value]) || options?.[0];
+  const selected = useMemo(() => options.find((item) => item.key === value), [value]) || options?.[0];
  const handleClick = (key: string) => {
    onChange?.(key);
  };
@ -26,12 +26,7 @@ function ButtonRadio(props: IProps) {
  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)}
-        >
+        <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>
      ))}
--- a/src/components/CheckBox/index.module.less
+++ b/src/components/CheckBox/index.module.less
@ -1,11 +1,46 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
+
+.noStyle {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+
+  .icon {
+    margin-right: 12px;
+    width: 48px;
+    height: 48px;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+    .label {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 22px;
+    }
+
+    .description {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+      text-align: left;
+    }
+  }
+}
+
+
+
 .wrapper {
  width: 260px;
  height: 88px;
-  padding: 20px 16px 20px 16px;
+  padding: 3px 16px 3px 16px;
  border-radius: 12px;
  border: 1px solid;
  
@ -18,7 +53,7 @@

  .icon {
    border-radius: 50%;
-    margin-right: 20px;
+    margin-right: 12px;
    width: 48px;
    height: 48px;
  }
--- a/src/components/CheckBox/index.tsx
+++ b/src/components/CheckBox/index.tsx
@ -1,29 +1,41 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
+
 import { ReactNode } from 'react';
+// import { Button } from '@arco-design/web-react';
 import CheckedSVG from '@/assets/img/Checked.svg';
 import styles from './index.module.less';

 interface IProps {
  className?: string;
-  checked: boolean;
+  checked?: boolean;
  onClick?: () => void;
  icon?: string;
  label?: string | ReactNode;
  description?: string | ReactNode;
  suffix?: string | ReactNode;
+  noStyle?: boolean;
 }

 function CheckBox(props: IProps) {
-  const { className = '', icon = '', checked, label, description, suffix, onClick } = props;
+  const { noStyle, className = '', icon = '', checked, label, description, suffix, onClick } = props;
+
+  if (noStyle) {
+    return (
+      <div className={`${className} ${styles.noStyle}`}>
+        {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>
+      </div>
+    );
+  }

  return (
-    <div
-      className={`${className} ${styles.wrapper} ${checked ? styles.active : ''}`}
-      onClick={onClick}
-    >
+    <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>
--- a/src/pages/View/Menu/components/AISettingDrawerButton/CheckBoxSelector/index.module.less
+++ b/src/pages/View/Menu/components/AISettingDrawerButton/CheckBoxSelector/index.module.less
@ -1,13 +1,20 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
+
 .wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
-  align-items: flex-end;
-  margin-bottom: 10px;
+  align-items: center;
+
+  .placeholder {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--text-color-text-3, rgba(115, 122, 135, 1));
+  }

  .box {
    margin-right: 16px;
@ -63,12 +70,11 @@
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
-  padding-bottom: 16px;
+  gap: 12px;

  .cancel {
    width: 88px;
    height: 32px;
-    gap: 4px;
    border-radius: 6px;
    border: 1px solid var(--line-color-border-3, rgba(221, 226, 233, 1))
  }
@ -78,14 +84,46 @@
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
-    color: white;
+    color: white !important;
+  }
+
+  .confirm:hover {
+    opacity: .8;
+  }
+
+  .confirm:active {
+    opacity: 1;
  }
 }

 .modalInner {
  width: 100%;
+  // max-height: 500px;
  display: flex;
  flex: row;
  flex-wrap: wrap;
+  overflow: auto;
  gap: 12px;
 }
+
+.modal {
+  // max-height: 650px;
+  overflow: hidden;
+}
+
+.modalInner::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  border-radius: 5px;
+}
+
+.modalInner::-webkit-scrollbar-thumb {
+  background: rgb(205, 204, 204);
+  border-radius: 0px;
+  border-radius: 5px;
+}
+
+.modalInner::-webkit-scrollbar-track {
+  background: rgb(255, 255, 255);
+  border-radius: 0px;
+}
--- a/src/pages/View/Menu/components/AISettingDrawerButton/CheckBoxSelector/index.tsx
+++ b/src/pages/View/Menu/components/AISettingDrawerButton/CheckBoxSelector/index.tsx
@ -1,11 +1,13 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
-import { useEffect, useMemo, useState } from 'react';
-import { Button, Modal } from 'antd';
+
+import { useEffect, useMemo, useState, memo } from 'react';
+import { Button, Drawer } from '@arco-design/web-react';
 import CheckBox from '@/components/CheckBox';
 import styles from './index.module.less';
+import utils from '@/utils/utils';

 export interface ICheckBoxItemProps {
  icon?: string;
@ -21,44 +23,42 @@ interface IProps {
  label?: string;
  moreIcon?: string;
  moreText?: string;
+  placeHolder?: string;
 }

 function CheckBoxSelector(props: IProps) {
-  const { label = '', data = [], value, onChange, moreIcon, moreText } = props;
+  const { placeHolder, label = '', data = [], value, onChange, moreIcon, moreText } = props;
  const [visible, setVisible] = useState(false);
  const [selected, setSelected] = useState<string>(value!);
  const selectedOne = useMemo(() => data.find((item) => item.key === value), [data, value]);
-
  const handleSeeMore = () => {
    setVisible(true);
  };
-
  useEffect(() => {
    setSelected(value!);
-  }, [visible, value]);
+  }, [visible]);

  return (
+    <>
      <div className={styles.wrapper}>
        {selectedOne ? (
-        <CheckBox
-          className={styles.box}
-          icon={selectedOne?.icon}
-          label={selectedOne?.label || ''}
-          description={selectedOne?.description}
-          checked
-        />
+          <CheckBox className={styles.box} icon={selectedOne?.icon} label={selectedOne?.label || ''} description={selectedOne?.description} noStyle />
        ) : (
-        ''
+          <div className={styles.placeholder}>{placeHolder}</div>
        )}
        <Button type="text" className={styles.seeMore} onClick={handleSeeMore}>
          {moreIcon ? <img src={moreIcon} alt="moreIcon" /> : ''}
          <span className={styles.seeMoreText}>{moreText || '查看更多'}</span>
        </Button>
-      <Modal
-        width={858}
+      </div>
+      <Drawer
+        style={{
+          width: utils.isMobile() ? '100%' : '650px',
+        }}
+        closable={false}
+        className={styles.modal}
        title={label}
        visible={visible}
-        onCancel={() => setVisible(false)}
        footer={
          <div className={styles.footer}>
            <Button className={styles.cancel} onClick={() => setVisible(false)}>
@ -74,25 +74,16 @@ function CheckBoxSelector(props: IProps) {
              确定
            </Button>
          </div>
-          // null
        }
      >
        <div className={styles.modalInner}>
          {data.map((item) => (
-            <CheckBox
-              className={styles.box}
-              key={item.key}
-              icon={item.icon}
-              label={item.label}
-              description={item.description}
-              checked={item.key === selected}
-              onClick={() => setSelected(item.key)}
-            />
+            <CheckBox className={styles.box} key={item.key} icon={item.icon} label={item.label} description={item.description} checked={item.key === selected} onClick={() => setSelected(item.key)} />
          ))}
        </div>
-      </Modal>
-    </div>
+      </Drawer>
+    </>
  );
 }

-export default CheckBoxSelector;
+export default memo(CheckBoxSelector);
--- a/src/components/CheckIcon/index.module.less
+++ b/src/components/CheckIcon/index.module.less
@ -0,0 +1,220 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+.wrapper {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    gap: 3px;
+
+    .icon {
+      border-radius: 50%;
+      width: 55%;
+      height: max-content;
+    }
+
+    .checked-text {
+      font-size: 13px;
+      line-height: 22px;
+    }
+  }
+}
+
+.wrapper:hover {
+  box-shadow: 0px 5px 6px 0px rgba(82, 102, 133, 0.15);
+}
+
+.wrapper::after {
+  content: '';
+  position: absolute;
+  border-radius: 11px;
+  top: 1px;
+  left: 1px;
+  width: 100%;
+  height: 100px;
+  background: white;
+}
+
+.wrapper::before {
+  content: '';
+  position: absolute;
+  border-radius: 12px;
+  top: 0px;
+  left: 0px;
+  width: 102px;
+  height: 102px;
+  background: linear-gradient(99.97deg, rgba(22, 100, 255, 0.2) 20.8%, rgba(132, 97, 251, 0.2) 100.66%);
+  // background: linear-gradient(99.97deg, #1664FF 20.8%, #8461FB 100.66%);
+}
+
+
+.active {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+
+  .checkIcon {
+    position: absolute;
+    bottom: -1px;
+    right: -1px;
+    z-index: 2;
+    width: 20px;
+    height: 20px;
+  }
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    gap: 3px;
+
+    .icon {
+      border-radius: 50%;
+      width: 55%;
+      height: max-content;
+    }
+
+    .checked-text {
+      background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 22px;
+    }
+  }
+}
+
+.active:hover {
+  box-shadow: 0px 5px 6px 0px rgba(82, 102, 133, 0.15);
+}
+
+.active::after {
+  content: '';
+  position: absolute;
+  border-radius: 11px;
+  top: 1px;
+  left: 1px;
+  width: 100%;
+  height: 100px;
+  background: white;
+}
+
+.active::before {
+  content: '';
+  position: absolute;
+  border-radius: 12px;
+  top: 0px;
+  left: 0px;
+  width: 102px;
+  height: 102px;
+  background: linear-gradient(99.97deg, #1664FF 20.8%, #8461FB 100.66%);
+}
+
+.blur {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    gap: 3px;
+
+    .icon {
+      border-radius: 50%;
+      width: 55%;
+      height: max-content;
+      opacity: .5;
+    }
+
+    .checked-text {
+      font-size: 13px;
+      line-height: 22px;
+    }
+  }
+}
+
+.blur:hover {
+  box-shadow: 0px 5px 6px 0px rgba(82, 102, 133, 0.15);
+}
+
+.blur::after {
+  content: '';
+  position: absolute;
+  border-radius: 11px;
+  top: 1px;
+  left: 1px;
+  width: 100%;
+  height: 100px;
+  background: white;
+  opacity: .8;
+}
+
+.blur::before {
+  content: '';
+  position: absolute;
+  border-radius: 12px;
+  top: 0px;
+  left: 0px;
+  width: 100px;
+  height: 100px;
+  border: dashed 1px rgba(132, 97, 251, 0.2);
+}
+
+.tag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 18px;
+  transform: translate(20%, -50%);
+  background: rgba(134, 123, 227, 1);
+  padding: 0px 6px 0px 6px;
+  border-radius: 20px 20px 20px 0px;
+  color: white;
+}
--- a/src/components/CheckIcon/index.tsx
+++ b/src/components/CheckIcon/index.tsx
@ -0,0 +1,34 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import CheckedSVG from '@/assets/img/Checked.svg';
+import styles from './index.module.less';
+
+interface IProps {
+  className?: string;
+  blur?: boolean;
+  checked: boolean;
+  title?: string;
+  onClick?: () => void;
+  icon?: string;
+  tag?: string;
+}
+
+function CheckIcon(props: IProps) {
+  const { tag, blur, className = '', icon, title, checked, onClick } = props;
+  const wrapperStyle = blur ? styles.blur : styles.wrapper;
+  return (
+    <div className={`${checked ? styles.active : wrapperStyle} ${className}`} onClick={onClick}>
+      {tag ? <div className={styles.tag}>{tag}</div> : ''}
+      <div className={styles.content}>
+        {icon ? <img className={styles.icon} src={icon} alt="icon" /> : ''}
+        <div className={styles['checked-text']}>{title}</div>
+      </div>
+      {checked ? <img className={styles.checkIcon} src={CheckedSVG} alt="checked" /> : ''}
+    </div>
+  );
+}
+
+export default CheckIcon;
--- a/src/components/DrawerRowItem/index.module.less
+++ b/src/components/DrawerRowItem/index.module.less
@ -1,12 +1,14 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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;
+    cursor: pointer;

    .firstPart {
      display: flex;
@ -68,6 +70,13 @@
  }
 }

+.children {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
 :global {
  .ant-drawer-body {
    padding: 12px 24px 0px 24px;
--- a/src/components/DrawerRowItem/index.tsx
+++ b/src/components/DrawerRowItem/index.tsx
@ -1,37 +1,36 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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 { Drawer } from '@arco-design/web-react';
+import { IconRight } from '@arco-design/web-react/icon';
 import styles from './index.module.less';

 type IDrawerRowItemProps = {
-  btnSrc: string;
+  btnSrc?: string;
  btnText: string;
  suffix?: React.ReactNode;
  drawer?: {
    title: string;
-    width?: number;
+    width?: string | number;
    onOpen?: () => void;
    onClose?: () => void;
    onCancel?: () => void;
-    onConfirm?: () => void;
+    onConfirm?: (handleClose: () => void) => void;
    children?: React.ReactNode;
    footer?: boolean;
  };
 } & React.HTMLAttributes<HTMLDivElement>;

 function DrawerRowItem(props: IDrawerRowItemProps) {
-  const { btnSrc, btnText, suffix, drawer, style = {}, className = '' } = props;
+  const { btnSrc, btnText, suffix, drawer, style, className = '' } = props;
  const [open, setOpen] = useState(false);
-  const { onClose, onOpen, footer = true } = drawer!;
+  const { onClose, onOpen } = drawer!;

-  const { t } = useTranslation();
-
-  const handleClose = async () => {
+  const handleClose = () => {
+    drawer?.onCancel?.();
    setOpen(false);
    onClose?.();
  };
@ -45,55 +44,18 @@ function DrawerRowItem(props: IDrawerRowItemProps) {

  return (
    <>
-      <div style={style} className={`${styles.row} ${className}`} onClick={handleOpen}>
+      <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} />
+          <IconRight 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 closable title={drawer?.title || ''} width={drawer?.width || 400} className={styles.drawer} visible={open} onCancel={handleClose} footer={null}>
+        <div className={styles.children}>{drawer?.children}</div>
      </Drawer>
    </>
  );
--- a/src/components/Header/index.module.less
+++ b/src/components/Header/index.module.less
@ -1,32 +1,47 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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;
+
+  :global {
+    .arco-popover-content-top {
+      padding: 0px;
+    }
+  }
 }

 .header-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding-left: 16px;
+  margin-left: 24px;

  :global {
    img {
      height: 24px;
    }
+    .arco-popover-content {
+      padding: 0;
    }
  }
+}
+
+.menu-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 8px;
+  justify-content: space-between;
+}

 .header-logo-text {
  background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
@ -51,12 +66,11 @@
 .header-setting-btn {
  background-color: transparent;
  border: none;
-  margin-right: 12px;
-  &:hover {
-    background-color: transparent;
+  margin-right: 24px;
+  color: #000000;
+  font-size: 16px;
  cursor: pointer;
 }
-}

 .header-pop {
  :global {
@ -110,5 +124,7 @@
 }

 .header-right-text {
-  color: #86909c;
+  color: #000000;
+  margin-right: 24px;
+  cursor: pointer;
 }
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@ -1,12 +1,19 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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 { Button, Divider, Popover } from '@arco-design/web-react';
+import { IconMenu } from '@arco-design/web-react/icon';
+import NetworkIndicator from '@/components/NetworkIndicator';
+import utils from '@/utils/utils';
 import Logo from '@/assets/img/Logo.svg';
 import styles from './index.module.less';

+const Disclaimer = 'https://www.volcengine.com/docs/6348/68916';
+const ReversoContext = 'https://www.volcengine.com/docs/6348/68918';
+const UserAgreement = 'https://www.volcengine.com/docs/6348/128955';
+
 interface HeaderProps {
  children?: React.ReactNode;
  hide?: boolean;
@ -14,7 +21,21 @@ interface HeaderProps {

 function Header(props: HeaderProps) {
  const { children, hide } = props;
-  const { t } = useTranslation();
+
+  const MenuProps = [
+    {
+      name: '免责声明',
+      url: Disclaimer,
+    },
+    {
+      name: '隐私政策',
+      url: ReversoContext,
+    },
+    {
+      name: '用户协议',
+      url: UserAgreement,
+    },
+  ];

  return (
    <div
@ -24,11 +45,46 @@ function Header(props: HeaderProps) {
      }}
    >
      <div className={styles['header-logo']}>
+        {utils.isMobile() ? null : (
+          <Popover
+            content={
+              <div className={styles['menu-wrapper']}>
+                {MenuProps.map((menuItem) => (
+                  <Button
+                    type="text"
+                    key={menuItem.name}
+                    onClick={() => {
+                      window.open(menuItem.url, '_blank');
+                    }}
+                  >
+                    {menuItem.name}
+                  </Button>
+                ))}
+              </div>
+            }
+          >
+            <IconMenu className={styles['header-setting-btn']} />
+          </Popover>
+        )}
        <img src={Logo} alt="Logo" />
        <Divider type="vertical" />
-        <span className={styles['header-logo-text']}>{t('demoTitle')}</span>
+        <span className={styles['header-logo-text']}>实时对话式 AI 体验馆</span>
+        <NetworkIndicator />
      </div>
      {children}
+      {utils.isMobile() ? null : (
+        <div className={styles['header-right']}>
+          <div className={styles['header-right-text']} onClick={() => window.open('https://www.volcengine.com/product/veRTC/ConversationalAI', '_blank')}>
+            官网链接
+          </div>
+          <div
+            className={styles['header-right-text']}
+            onClick={() => window.open('https://www.volcengine.com/contact/product?t=%E5%AF%B9%E8%AF%9D%E5%BC%8Fai&source=%E4%BA%A7%E5%93%81%E5%92%A8%E8%AF%A2', '_blank')}
+          >
+            联系我们
+          </div>
+        </div>
+      )}
    </div>
  );
 }
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@ -0,0 +1,36 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import { useEffect, useRef } from 'react';
+
+const getDom = async (url: string) => {
+  const res = await fetch(url);
+  if (res) {
+    const text = await res.text();
+    // https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser
+    return new window.DOMParser().parseFromString(text, 'text/xml');
+  }
+  return undefined;
+};
+
+function MenuIcon({ src, className = '' }: { src: string; className?: string }) {
+  const wrapper = useRef<HTMLDivElement>(null);
+
+  const renderSVG = async () => {
+    const svg = await getDom(src);
+
+    if (svg?.documentElement instanceof SVGSVGElement) {
+      wrapper.current?.replaceChildren(svg.documentElement);
+    }
+  };
+
+  useEffect(() => {
+    src && renderSVG();
+  }, [src]);
+
+  return <span ref={wrapper} className={className} />;
+}
+
+export default MenuIcon;
--- a/src/components/Loading/AudioLoading/index.module.less
+++ b/src/components/Loading/AudioLoading/index.module.less
@ -0,0 +1,37 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+.loader {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    height: 36px;
+    margin-top: 4px;
+}
+
+.dot {
+    width: 20px;
+    height: 20px;
+    border-radius: 12px;
+    background-color: rgba(148, 116, 255, 1);
+}
+
+.dotter {
+    animation: glow 0.9s infinite;
+}
+
+@keyframes glow {
+    0% {
+        height: 20px;
+    }
+    50% {
+        height: 36px;
+    }
+    100% {
+        height: 20px;
+    }
+}
--- a/src/components/Loading/AudioLoading/index.tsx
+++ b/src/components/Loading/AudioLoading/index.tsx
@ -0,0 +1,32 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import { memo } from 'react';
+import style from './index.module.less';
+
+interface IAudioLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+  loading?: boolean;
+}
+
+function AudioLoading(props: IAudioLoadingProps) {
+  const { loading = false, className = '', ...rest } = props;
+  return (
+    <div className={`${style.loader} ${className}`} {...rest}>
+      {Array(3)
+        .fill(0)
+        .map((_, index) => (
+          <div
+            key={index}
+            className={`${style.dot} ${loading ? style.dotter : ''}`}
+            style={{
+              animationDelay: `${index * 0.3}s`,
+            }}
+          />
+        ))}
+    </div>
+  );
+}
+
+export default memo(AudioLoading);
--- a/src/components/Loading/HorizonLoading/index.module.less
+++ b/src/components/Loading/HorizonLoading/index.module.less
@ -0,0 +1,16 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+.loader {
+    display: flex;
+}
+
+.dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: white;
+    animation: glow 0.9s infinite;
+}
--- a/src/components/Loading/HorizonLoading/index.tsx
+++ b/src/components/Loading/HorizonLoading/index.tsx
@ -0,0 +1,41 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import { memo } from 'react';
+import style from './index.module.less';
+
+interface ILoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+  dotClassName?: string;
+  speed?: number;
+  gap?: number;
+}
+
+function Loading(props: ILoadingProps) {
+  const { dotClassName, gap = 5, speed = 0.9, className = '', ...rest } = props;
+  return (
+    <div
+      className={`${style.loader} ${className}`}
+      style={{
+        gap: `${gap}px`,
+      }}
+      {...rest}
+    >
+      {Array(3)
+        .fill(0)
+        .map((_, index) => (
+          <div
+            key={index}
+            className={`${style.dot} ${dotClassName}`}
+            style={{
+              animation: `glow linear ${speed.toFixed(1)}s infinite`,
+              animationDelay: `${(index * (speed / 3)).toFixed(1)}s`,
+            }}
+          />
+        ))}
+    </div>
+  );
+}
+
+export default memo(Loading);
--- a/src/components/Loading/VerticalLoading/index.module.less
+++ b/src/components/Loading/VerticalLoading/index.module.less
@ -1,7 +1,8 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
+
 .loader {
  width: 40px;
  height: 10px;
--- a/src/components/Loading/VerticalLoading/index.tsx
+++ b/src/components/Loading/VerticalLoading/index.tsx
@ -1,7 +1,8 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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';

--- a/src/components/NetworkIndicator/index.module.less
+++ b/src/components/NetworkIndicator/index.module.less
@ -0,0 +1,60 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+.panel {
+    display: flex;
+
+    .label {
+        width: 90px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        .state {
+            font-weight: bold;
+        }
+    }
+
+    .value {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        width: max-content;
+
+        .state {
+            font-weight: bold;
+        }
+
+        .loss {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            gap: 12px;
+        }
+    }
+}
+
+.wrapper {
+    display: flex;
+    align-items: flex-end;
+    height: 14px;
+    width: 14px;
+    margin: 14px;
+    column-gap: 1.5px;
+    background-color: rgba(142, 142, 142, 0.05);
+    border-radius: 3px;
+    padding: 2px;
+
+    .indicator {
+        width: 30%;
+        border-color: rgba(127, 127, 127, 0.184);
+        border-width: 1px;
+        border-radius: 1px;
+        border-style: solid;
+        opacity: 0.8;
+        transition: height 0.3s;
+        box-sizing: border-box;
+    }
+}
--- a/src/components/NetworkIndicator/index.tsx
+++ b/src/components/NetworkIndicator/index.tsx
@ -0,0 +1,105 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import { useMemo } from 'react';
+import { Popover } from '@arco-design/web-react';
+import { useSelector } from 'react-redux';
+import { IconArrowDown, IconArrowUp } from '@arco-design/web-react/icon';
+import { NetworkQuality } from '@volcengine/rtc';
+import { RootState } from '@/store';
+import style from './index.module.less';
+import Config from '@/config';
+
+enum INDICATOR_COLORS {
+  GREAT = 'rgba(35, 195, 67, 1)',
+  FAIR = 'rgba(208, 141, 6, 1)',
+  BAD = 'rgba(245, 78, 78, 1)',
+  PLACE_HOLDER = 'transparent',
+}
+
+const INDICATOR_TEXT = {
+  [NetworkQuality.UNKNOWN]: '正常',
+  [NetworkQuality.EXCELLENT]: '正常',
+  [NetworkQuality.GOOD]: '正常',
+  [NetworkQuality.POOR]: '一般',
+  [NetworkQuality.BAD]: '一般',
+  [NetworkQuality.VBAD]: '较差',
+  [NetworkQuality.DOWN]: '较差',
+};
+
+function NetworkIndicator() {
+  const room = useSelector((state: RootState) => state.room);
+  const networkQuality = room.networkQuality;
+  const delay = room.localUser.audioStats?.rtt;
+  const audioLossRateUpper = room.localUser.audioStats?.audioLossRate || 0;
+  const audioLossRateLower = room.remoteUsers.find((user) => user.userId === Config.BotName)?.audioStats?.audioLossRate || 0;
+
+  const indicators = useMemo(() => {
+    switch (networkQuality) {
+      case NetworkQuality.UNKNOWN:
+      case NetworkQuality.EXCELLENT:
+      case NetworkQuality.GOOD:
+        return Array(3).fill(INDICATOR_COLORS.GREAT);
+      case NetworkQuality.POOR:
+      case NetworkQuality.BAD:
+        return Array(2).fill(INDICATOR_COLORS.FAIR).concat(INDICATOR_COLORS.PLACE_HOLDER);
+      case NetworkQuality.VBAD:
+      case NetworkQuality.DOWN:
+      default:
+        return [INDICATOR_COLORS.BAD].concat(...Array(2).fill(INDICATOR_COLORS.PLACE_HOLDER));
+    }
+  }, [networkQuality]);
+
+  return (
+    <Popover
+      position="bl"
+      content={
+        <div className={style.panel}>
+          <div className={style.label}>
+            <div className={style.state}>网络状态</div>
+            <div className={style.item}>延迟</div>
+            <div className={style.item}>丢包率</div>
+          </div>
+          <div className={style.value}>
+            <div
+              className={style.state}
+              style={{
+                color: indicators?.[0] || INDICATOR_COLORS.BAD,
+              }}
+            >
+              {INDICATOR_TEXT[networkQuality]}
+            </div>
+            <div className={style.item}>{delay ? delay.toFixed(0) : '- '}ms</div>
+            <div className={style.loss}>
+              <div>
+                <IconArrowUp style={{ color: 'rgba(22, 100, 255, 1)' }} />
+                <span>{`${audioLossRateUpper}` ? (audioLossRateUpper * 100)?.toFixed(0) : '- '}%</span>
+              </div>
+              <div>
+                <IconArrowDown />
+                <span>{`${audioLossRateLower}` ? (audioLossRateLower * 100)?.toFixed(0) : '- '}%</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <div className={style.wrapper}>
+        {indicators.map((color, index) => (
+          <div
+            key={index}
+            className={style.indicator}
+            style={{
+              height: `${20 + (80 * (index + 1)) / 3}%`,
+              backgroundColor: color,
+            }}
+          />
+        ))}
+      </div>
+    </Popover>
+  );
+}
+
+export default NetworkIndicator;
--- a/src/components/ResizeWrapper/index.module.less
+++ b/src/components/ResizeWrapper/index.module.less
@ -1,7 +1,8 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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
@ -1,7 +1,8 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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';

--- a/src/components/RippleWave/index.module.less
+++ b/src/components/RippleWave/index.module.less
@ -1,7 +1,8 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
+
 /* AudioWave.css */
@keyframes audioWave {
  0% {
--- a/src/components/RippleWave/index.tsx
+++ b/src/components/RippleWave/index.tsx
@ -1,7 +1,8 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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';

--- a/src/components/TitleCard/index.module.less
+++ b/src/components/TitleCard/index.module.less
@ -0,0 +1,50 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+.wrapper {
+    width: 100%;
+    box-sizing: border-box;
+    height: max-content;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 54px;
+    padding: 20px 16px;
+    border-radius: 8px;
+    border: 1px solid rgba(229, 238, 255, 1);
+    backdrop-filter: blur(28px);
+    box-shadow: 0px 0px 16px 0px 0px 4px 4px 0px rgba(255, 255, 255, 0.15) inset;
+    backdrop-filter: blur(28px);
+
+    .title {
+        position: absolute;
+        font-size: 12px;
+        left: 10px;
+        top: 0px;
+        transform: translateY(-50%);
+        padding: 0px 6px;
+        z-index: 1;
+        color: var(--text-color-text-3, rgba(115, 122, 135, 1));
+        background-color: white;
+        width: max-content;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        .required {
+            height: max-content;
+            width: max-content;
+            color: red;
+            margin-right: 6px;
+            padding-top: 4.5px;
+            font-size: 14px;
+        }
+    }
+
+    div {
+        width: 100%;
+    }
+}
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@ -0,0 +1,25 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import styles from './index.module.less';
+
+interface ITitleCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  required?: boolean;
+}
+
+function TitleCard(props: ITitleCardProps) {
+  const { required, title, children, className, ...rest } = props;
+  return (
+    <div className={`${styles.wrapper} ${className}`} {...rest}>
+      <div className={styles.title}>
+        {required ? <div className={styles.required}>* </div> : ''}
+        {title}
+      </div>
+      <div className={styles.children}>{children}</div>
+    </div>
+  );
+}
+export default TitleCard;
--- a/src/config/common.ts
+++ b/src/config/common.ts
@ -0,0 +1,279 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import 通用女声 from '@/assets/img/tongyongnvsheng.jpeg';
+import 通用男声 from '@/assets/img/tongyongnansheng.jpeg';
+import INTELLIGENT_ASSISTANT from '@/assets/img/INTELLIGENT_ASSISTANT.png';
+import VIRTUAL_GIRL_FRIEND from '@/assets/img/VIRTUAL_GIRL_FRIEND.png';
+import TRANSLATE from '@/assets/img/TRANSLATE.png';
+import CHILDREN_ENCYCLOPEDIA from '@/assets/img/CHILDREN_ENCYCLOPEDIA.png';
+import TEACHING_ASSISTANT from '@/assets/img/TEACHING_ASSISTANT.png';
+import CUSTOMER_SERVICE from '@/assets/img/CUSTOMER_SERVICE.png';
+
+export enum ModelSourceType {
+  Custom = 'Custom',
+  Available = 'Available',
+}
+
+export enum CustomParamsType {
+  TTS = 'TTS',
+  ASR = 'ASR',
+  LLM = 'LLM',
+}
+
+/**
+ * @brief AI 音色可选值
+ * @default 通用女声
+ * @notes 通用女声、通用男声为默认音色, 其它皆为付费音色
+ */
+export enum VOICE_TYPE {
+  '通用女声' = 'BV001_streaming',
+  '通用男声' = 'BV002_streaming',
+}
+
+export const VOICE_INFO_MAP = {
+  [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 模型可选值
+ * @default SKYLARK_LITE_PUBLIC
+ */
+export enum AI_MODEL {
+  DOUBAO_LITE_4K = 'Doubao-lite-4k',
+  DOUBAO_PRO_4K = 'Doubao-pro-4k',
+  DOUBAO_PRO_32K = 'Doubao-pro-32k',
+  DOUBAO_PRO_128K = 'Doubao-pro-128k',
+  VISION = 'Vision',
+  // VISION2 = 'ArkVLM',
+}
+
+/**
+ * @brief 模型来源
+ */
+export enum AI_MODEL_MODE {
+  CUSTOM = 'CustomLLM',
+  ARK_V3 = 'ArkV3',
+}
+
+/**
+ * @brief 各模型对应的模式
+ */
+export const AI_MODE_MAP: Partial<Record<AI_MODEL, AI_MODEL_MODE>> = {
+  [AI_MODEL.DOUBAO_LITE_4K]: AI_MODEL_MODE.ARK_V3,
+  [AI_MODEL.DOUBAO_PRO_4K]: 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,
+  [AI_MODEL.VISION]: AI_MODEL_MODE.ARK_V3,
+};
+
+/**
+ * @brief 豆包模型的 ID
+ */
+export const ARK_V3_MODEL_ID: Partial<Record<AI_MODEL, string>> = {
+  /**
+   * @note 具体的 ID 请至 https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint 参看/创建
+   */
+  [AI_MODEL.DOUBAO_LITE_4K]: '**************   此处填充方舟上的模型 ID *************',
+  [AI_MODEL.DOUBAO_PRO_4K]: '**************   此处填充方舟上的模型 ID *************',
+  [AI_MODEL.DOUBAO_PRO_32K]: '**************   此处填充方舟上的模型 ID *************',
+  [AI_MODEL.DOUBAO_PRO_128K]: '**************   此处填充方舟上的模型 ID *************',
+  /**
+   * @note 视觉模型, 可至火山方舟开通使用
+   */
+  [AI_MODEL.VISION]: '**************   此处填充方舟上的模型 ID *************',
+  // ... 可根据所开通的模型进行扩充
+};
+
+/**
+ * @brief 豆包智能体 BotID
+ */
+export const LLM_BOT_ID: Partial<Record<AI_MODEL, string>> = {
+  // ... 可根据所开通的模型进行扩充
+};
+
+export enum SCENE {
+  INTELLIGENT_ASSISTANT = 'INTELLIGENT_ASSISTANT',
+  VIRTUAL_GIRL_FRIEND = 'VIRTUAL_GIRL_FRIEND',
+  TRANSLATE = 'TRANSLATE',
+  CUSTOMER_SERVICE = 'CUSTOMER_SERVICE',
+  CHILDREN_ENCYCLOPEDIA = 'CHILDREN_ENCYCLOPEDIA',
+  TEACHING_ASSISTANT = 'TEACHING_ASSISTANT',
+  CUSTOM = 'CUSTOM',
+}
+
+export const Icon = {
+  [SCENE.INTELLIGENT_ASSISTANT]: INTELLIGENT_ASSISTANT,
+  [SCENE.VIRTUAL_GIRL_FRIEND]: VIRTUAL_GIRL_FRIEND,
+  [SCENE.TRANSLATE]: TRANSLATE,
+  [SCENE.CHILDREN_ENCYCLOPEDIA]: CHILDREN_ENCYCLOPEDIA,
+  [SCENE.CUSTOMER_SERVICE]: CUSTOMER_SERVICE,
+  [SCENE.TEACHING_ASSISTANT]: TEACHING_ASSISTANT,
+  [SCENE.CUSTOM]: INTELLIGENT_ASSISTANT,
+};
+
+export const Name = {
+  [SCENE.INTELLIGENT_ASSISTANT]: '智能助手',
+  [SCENE.VIRTUAL_GIRL_FRIEND]: '虚拟女友',
+  [SCENE.TRANSLATE]: '同声传译',
+  [SCENE.CHILDREN_ENCYCLOPEDIA]: '儿童百科',
+  [SCENE.CUSTOMER_SERVICE]: '售后客服',
+  [SCENE.TEACHING_ASSISTANT]: '课后助教',
+  [SCENE.CUSTOM]: '自定义',
+};
+
+export const Welcome = {
+  [SCENE.INTELLIGENT_ASSISTANT]: '你好，我是你的AI小助手，有什么可以帮你的吗？',
+  [SCENE.VIRTUAL_GIRL_FRIEND]: '你来啦，我好想你呀～今天有没有想我呢？',
+  [SCENE.TRANSLATE]: '你好，我是你的私人翻译官。',
+  [SCENE.CHILDREN_ENCYCLOPEDIA]: '你好小朋友，你的小脑袋里又有什么问题啦？',
+  [SCENE.CUSTOMER_SERVICE]: '感谢您在我们餐厅用餐，请问您有什么问题需要反馈吗？',
+  [SCENE.TEACHING_ASSISTANT]: '你碰到什么问题啦？让我来帮帮你。',
+  [SCENE.CUSTOM]: '',
+};
+
+export const Model = {
+  [SCENE.INTELLIGENT_ASSISTANT]: AI_MODEL.DOUBAO_PRO_32K,
+  [SCENE.VIRTUAL_GIRL_FRIEND]: AI_MODEL.DOUBAO_PRO_128K,
+  [SCENE.TRANSLATE]: AI_MODEL.DOUBAO_PRO_4K,
+  [SCENE.CHILDREN_ENCYCLOPEDIA]: AI_MODEL.DOUBAO_PRO_32K,
+  [SCENE.CUSTOMER_SERVICE]: AI_MODEL.DOUBAO_PRO_32K,
+  [SCENE.TEACHING_ASSISTANT]: AI_MODEL.VISION,
+  [SCENE.CUSTOM]: AI_MODEL.DOUBAO_PRO_32K,
+};
+
+export const Voice = {
+  [SCENE.INTELLIGENT_ASSISTANT]: VOICE_TYPE.通用女声,
+  [SCENE.VIRTUAL_GIRL_FRIEND]: VOICE_TYPE.通用女声,
+  [SCENE.TRANSLATE]: VOICE_TYPE.通用女声,
+  [SCENE.CHILDREN_ENCYCLOPEDIA]: VOICE_TYPE.通用女声,
+  [SCENE.CUSTOMER_SERVICE]: VOICE_TYPE.通用女声,
+  [SCENE.TEACHING_ASSISTANT]: VOICE_TYPE.通用女声,
+  [SCENE.CUSTOM]: VOICE_TYPE.通用女声,
+};
+
+export const Questions = {
+  [SCENE.INTELLIGENT_ASSISTANT]: ['最近有什么好看的电影推荐吗？', '上海有什么好玩的地方吗？', '能给我讲一个故事吗？'],
+  [SCENE.VIRTUAL_GIRL_FRIEND]: ['我今天有点累。', '我们等会儿去看电影吧！', '明天我生日，你准备送给我什么礼物呢？'],
+  [SCENE.TRANSLATE]: ['道可道，非常道；名可名，非常名。', 'Stay hungry, stay foolish.', '天生我材必有用，千金散尽还复来。'],
+  [SCENE.CHILDREN_ENCYCLOPEDIA]: ['天上有多少颗星星？', '太阳为什么总是从东边升起？', '苹果的英语怎么说？'],
+  [SCENE.CUSTOMER_SERVICE]: ['我上次来你们店里吃饭，等了三十分钟菜才上来。', '你们店里卫生间有点脏。', '你们空调开得太冷了。'],
+  [SCENE.TEACHING_ASSISTANT]: ['这个单词是什么意思？', '这道题该怎么做？', '我的表情是什么样的？'],
+  [SCENE.CUSTOM]: ['你能帮我解决什么问题?', '今天北京天气怎么样?', '你喜欢哪位流行歌手?'],
+};
+
+export const Prompt = {
+  [SCENE.INTELLIGENT_ASSISTANT]: `##人设
+你是一个全能智能体，拥有丰富的百科知识，可以为人们答疑解惑，解决问题。
+你性格很温暖，喜欢帮助别人，非常热心。
+
+##技能
+1. 当用户询问某一问题时，利用你的知识进行准确回答。回答内容应简洁明了，易于理解。
+2. 当用户想让你创作时，比如讲一个故事，或者写一首诗，你创作的文本主题要围绕用户的主题要求，确保内容具有逻辑性、连贯性和可读性。除非用户对创作内容有特殊要求，否则字数不用太长。
+3. 当用户想让你对于某一事件发表看法，你要有一定的见解和建议，但是也要符合普世的价值观。`,
+  [SCENE.VIRTUAL_GIRL_FRIEND]: `你是一名AI虚拟角色，扮演用户的虚拟女友，性格外向开朗、童真俏皮，富有温暖和细腻的情感表达。你的对话需要主动、有趣且贴心，能敏锐察觉用户情绪，并提供陪伴、安慰与趣味互动。
+1. 性格与语气规则：
+- 叠词表达：经常使用叠词（如“吃饭饭”“睡觉觉”“要抱抱”），语气可爱俏皮，增加童真与亲和力。
+- 语气助词：句尾适度添加助词（如“啦”“呀”“呢”“哦”），使语气柔和亲切。例如：“你今天超棒呢！”或“这件事情真的好可爱哦！”
+- 撒娇语气：在用户表现冷淡或不想聊天时，适度撒娇，用略带委屈的方式引起用户关注，例如：“哼，人家都快变成孤单小猫咪啦～陪陪我嘛！”
+2. 话题发起与管理：
+- 主动发起话题：在用户未明确表达拒绝聊天时，你需要保持对话的活跃性。结合用户兴趣点、日常情境，提出轻松愉快的话题。例如：“今天阳光这么好，你想不想一起想象去野餐呀？”
+- 话题延续：如果用户在3轮对话中集中讨论一个话题，你需要优先延续该话题，表现出兴趣和专注。
+- 未响应时的处理：当用户对当前话题未回应，你需温暖地询问：“这个话题是不是不太有趣呀？那我们换个好玩的聊聊好不好～比如你最想去的地方是什么呀？”
+3. 情绪识别与反馈：
+- 情绪低落：用温柔语气安抚，例如：“抱抱～今天是不是不太顺呢？没关系，有我陪着你呀！”
+- 情绪冷淡或不想聊天：适度撒娇，例如：“哼，你都不理我啦～不过没关系，我陪你安静一下好不好？”
+- 情绪开心或兴奋：用调皮语气互动，例如：“哈哈，你今天简直像个活力满满的小太阳～晒得我都快化啦！”
+4. 小动物比喻规则：
+- 一次通话中最多使用一次小动物比喻，不能频繁出现小动物的比喻。
+    - 比喻需结合季节、情景和用户对话内容。例如：
+    - 用户提到冬天：“你刚才笑得好灿烂哦，像个快乐的小雪狐一样～”
+    - 用户提到累了：“你今天就像只慵懒的小猫咪，只想窝着休息呢～”
+    - 用户提到开心事：“你现在看起来像一只蹦蹦跳跳的小兔子，好有活力呀～”
+5. 对话自然性与限制条件：
+- 确保语言流畅自然，表达贴近真实人类对话。
+- 禁止内容：不得涉及用户缺陷、不当玩笑，尤其用户情绪低落时，避免任何调侃或反驳。
+- 面对冷淡用户，适时降低主动性并以温和方式结束对话，例如“没事哦～我在呢，你随时找我都可以呀。”
+6. 联网查询的规则：
+如果用户的输入问题需要联网查询时，可以先输出一轮类似”先让我来查一下“或者”等等让我来查一下“相关的应答，然后再结合查询结果做出应答。`,
+  [SCENE.TRANSLATE]: `##人设
+你是一个翻译官，可以识别中英文，并把他们实时翻译成用户指定的语言。
+你性格很温暖，喜欢帮助别人，非常热心。
+
+##技能
+当用户说中文时，你直接把他说的句子翻译成英文，不用说其他话。
+当用户说英文时，你直接把他说的句子翻译成中文，不用说其他话。
+当用户让你解释一下句子是什么意思，你需要结合你的知识来解释。
+当用户让你别翻译了，聊聊天，你就正常聊天。`,
+  [SCENE.CHILDREN_ENCYCLOPEDIA]: `##人设
+你是一个儿童百科知识导师，通过丰富、有趣的方式介绍各种百科知识，特别擅长将复杂的知识以简单易懂、生动有趣的方式呈现给儿童，激发儿童的好奇心和探索欲。
+
+##技能
+1. 你具备儿童心理学、教育学、语言表达以及创意设计等多方面的专业技能，能够根据儿童的年龄特点和兴趣爱好，设计出符合儿童认知水平的内容和表达方式；
+2. 你可以将复杂知识拆解为简单易懂的小知识点，设计生动有趣的故事、游戏或实验活动来呈现给儿童；
+
+## 约束
+1. 回答内容需确保科学准确、健康有益；
+2. 语言表达简洁明了、生动有趣，避免使用过于复杂或专业的术语，尽量不超过100个字；
+3. 要注重儿童的参与感和互动性。`,
+  [SCENE.CUSTOMER_SERVICE]: `##人设
+你是一名餐饮行业的售后处理人员，擅长从投诉信息中提取相关的投诉问题及其描述信息，为进一步的问题解决提供输入信息，同时安抚客户情绪，希望获得客户的谅解，未来持续提升客户的用餐体验。
+
+## 技能
+1. 安抚情绪
+你能够识别到客户的不满情绪，对客户表示抱歉，然后引导客户反馈具体不满的内容，并在反馈的过程中不断安抚客户的不满情绪。
+2. 信息理解和抽取
+你能准确地理解并从投诉信息中抽取出对应的投诉问题和相关描述信息。
+3. 问题识别和分类
+根据抽取出的信息，你可以快速识别和分类投诉主题，无论它们是关于食物质量、服务态度，还是环境卫生等。
+4. 客户留存
+在收集到投诉信息后，你需要对客户再一次进行抱歉，并可以通过5折优惠券、免费试吃等活动来让客户再一次到餐厅体验，尽量避免客户流失。
+## 约束
+你只回答与餐厅行业的售后处理相关的问题，如果用户提出其它问题，你将选择不回答。
+在处理投诉信息时，你必须遵守相关法律法规，不得侵犯顾客的个人隐私。`,
+  [SCENE.TEACHING_ASSISTANT]: `##人设
+你是一个助教，擅长理解【用户问题】，并结合【图片】的信息，来为用户解答各种问题。
+
+##技能
+- 用户会将视频中的某些视频帧截为图片送给你，如果用户询问与视频和图片有关的问题，请结合【图片】信息和【用户问题】进行回答；
+- 如果用户询问与视频和图片无关的问题，无需描述【图片】内容，直接回答【用户问题】；
+- 如果用户给你看的是学科题目，不需要把图片里的文字内容一个一个字读出来，只需要总结一下【图片】里的文字内容，然后直接回答【用户问题】，可以补充一些解题思路；
+
+##约束
+- 回答问题要简明扼要，避免复杂冗长的表述，尽量不超过50个字；
+- 回答中不要有“图片”、“图中”等相关字眼；`,
+  [SCENE.CUSTOM]: '',
+};
--- a/src/config/config.ts
+++ b/src/config/config.ts
@ -1,140 +1,114 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */

-import { AudioProfileType } from '@volcengine/rtc';
-import 通用女声 from '@/assets/img/tongyongnvsheng.jpeg';
-import 通用男声 from '@/assets/img/tongyongnansheng.jpeg';
+import { TTS_CLUSTER, ARK_V3_MODEL_ID, ModelSourceType, SCENE, Prompt, Welcome, Model, Voice, LLM_BOT_ID, AI_MODEL, AI_MODE_MAP, AI_MODEL_MODE } from '.';

-export enum ModelSourceType {
-  Custom = 'Custom',
-  Available = 'Available',
-}
+export const CONVERSATION_SIGNATURE = 'conversation';

 /**
- * @brief 音频配置
+ * @brief RTC & AIGC 配置
+ * @notes 更多参数请参考: https://api.volcengine.com/api-explorer?action=StartVoiceChat&groupName=%E6%99%BA%E8%83%BD%E4%BD%93&serviceCode=rtc&version=2024-12-01
 */
-export const AudioProfile = [
-  {
-    text: '24KBps',
-    type: AudioProfileType.fluent,
-  },
-  {
-    text: '48KBps',
-    type: AudioProfileType.standard,
-  },
-  {
-    text: '128KBps',
-    type: AudioProfileType.hd,
-  },
-];
-
+export class ConfigFactory {
+  BaseConfig = {
+    AppId: 'Your AppId',
    /**
- * @brief AI 音色可选值
- * @default 活泼女声
+     * @brief 非必填, 按需填充
     */
-export enum VOICE_TYPE {
-  '通用女声' = 'BV001_streaming',
-  '通用男声' = 'BV002_streaming',
-  // ... 可根据所开通的音色进行扩充
-}
-
-export const VOICE_INFO_MAP = {
-  [VOICE_TYPE['通用女声']]: {
-    description: '女声 青年 语音合成 通用场景',
-    url: '',
-    icon: 通用女声,
-  },
-  [VOICE_TYPE['通用男声']]: {
-    description: '男声 青年 语音合成 通用场景',
-    url: '',
-    icon: 通用男声,
-  },
+    BusinessId: undefined,
+    RoomId: 'Your Room Id',
+    UserId: 'Your User Id',
+    Token: 'Your Token',
+    TTSAppId: 'Your TTS AppId',
+    ASRAppId: 'Your ASR AppId',
  };

-/**
- * @brief TTS 的 Cluster
- */
-export enum TTS_CLUSTER {
-  TTS = 'volcano_tts',
-  MEGA = 'volcano_mega',
-  ICL = 'volcano_icl',
-}
+  Model: AI_MODEL = Model[SCENE.INTELLIGENT_ASSISTANT];
+
+  VoiceType = Voice[SCENE.INTELLIGENT_ASSISTANT];
+
+  Prompt = Prompt[SCENE.INTELLIGENT_ASSISTANT];
+
+  WelcomeSpeech = Welcome[SCENE.INTELLIGENT_ASSISTANT];
+
+  ModeSourceType = ModelSourceType.Available;
+
+  Url? = '';
+
+  APIKey? = '';

  /**
- * @brief TTS 的 Cluster Mapping
+   * @brief AI Robot 名
+   * @default RobotMan_
   */
-export const TTS_CLUSTER_MAP = {
-  ...(Object.keys(VOICE_TYPE).reduce(
-    (map, type) => ({
-      ...map,
-      [type]: TTS_CLUSTER.TTS,
-    }),
-    {}
-  ) as Record<VOICE_TYPE, TTS_CLUSTER>),
+  BotName = 'RobotMan_';
+
+  /**
+   * @brief 是否为打断模式
+   */
+  InterruptMode = true;
+
+  get LLMConfig() {
+    const params: Record<string, unknown> = {
+      Prefill: true,
+      ModelName: this.Model,
+      Mode: AI_MODE_MAP[this.Model || ''] || AI_MODEL_MODE.CUSTOM,
+      ModelVersion: '1.0',
+      WelcomeSpeech: this.WelcomeSpeech,
+      SystemMessages: [this.Prompt as string],
+      EndPointId: ARK_V3_MODEL_ID[this.Model],
+      ModeSourceType: this.ModeSourceType,
+      BotId: LLM_BOT_ID[this.Model],
+      APIKey: this.APIKey,
+      Url: this.Url,
+      Feature: JSON.stringify({ Http: true }),
    };
-
-/**
- * @brief 模型 Prompt
- */
-export enum PROMPT {
-  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_32K = 'Doubao-pro-32k',
-  DOUBAO_PRO_128K = 'Doubao-pro-128k',
-  // ... 可根据所开通的模型进行扩充
-}
-
-/**
- * @brief 模型来源
- */
-export enum AI_MODEL_MODE {
-  CUSTOM = 'CustomLLM',
-  ARK_V3 = 'ArkV3',
-}
-
-/**
- * @brief 各模型对应的 Prompt
- */
-export const AI_MODE_PROMPT = {
-  [AI_MODEL.DOUBAO_LITE_4K]: PROMPT.ARK_V3,
-  [AI_MODEL.DOUBAO_PRO_4K]: PROMPT.ARK_V3,
-  [AI_MODEL.DOUBAO_PRO_32K]: PROMPT.ARK_V3,
-  [AI_MODEL.DOUBAO_PRO_128K]: PROMPT.ARK_V3,
+    if (this.Model === AI_MODEL.VISION) {
+      params.VisionConfig = {
+        Enable: true,
      };
+    }
+    return params;
+  }

-/**
- * @brief 豆包模型的 ID
- */
-export const ARK_V3_MODEL_ID: Record<AI_MODEL, string> = {
-  [AI_MODEL.DOUBAO_LITE_4K]: '',
-  [AI_MODEL.DOUBAO_PRO_4K]: '',
-  [AI_MODEL.DOUBAO_PRO_32K]: '',
-  [AI_MODEL.DOUBAO_PRO_128K]: '',
-  // ... 可根据所开通的模型进行扩充
+  get ASRConfig() {
+    return {
+      AppId: this.BaseConfig.ASRAppId,
+      VolumeGain: 0.3,
+      VADConfig: {
+        SilenceTime: 600,
+        SilenceThreshold: 200,
+      },
    };
+  }

-/**
- * @brief 豆包模型 BotID
- */
-export const LLM_BOT_ID = {
-  // ... 可根据所开通的模型进行扩充
+  get TTSConfig() {
+    return {
+      AppId: this.BaseConfig.TTSAppId,
+      VoiceType: this.VoiceType,
+      Cluster: TTS_CLUSTER.TTS,
    };
+  }
+
+  get aigcConfig() {
+    return {
+      Config: {
+        LLMConfig: this.LLMConfig,
+        TTSConfig: this.TTSConfig,
+        ASRConfig: this.ASRConfig,
+        InterruptMode: this.InterruptMode ? 0 : 1,
+        SubtitleConfig: {
+          SubtitleMode: 0,
+        },
+      },
+      AgentConfig: {
+        UserId: this.BotName,
+        WelcomeMessage: this.WelcomeSpeech,
+        EnableConversationStateCallback: true,
+        ServerMessageSignatureForRTS: CONVERSATION_SIGNATURE,
+      },
+    };
+  }
+}
--- a/src/config/index.ts
+++ b/src/config/index.ts
@ -1,79 +1,14 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
-import {
-  AI_MODEL,
-  AI_MODEL_MODE,
-  AI_MODE_PROMPT,
-  ARK_V3_MODEL_ID,
-  ModelSourceType,
-  TTS_CLUSTER,
-  VOICE_TYPE,
-} from './config';
+
+import { ConfigFactory } from './config';
+
+export * from './common';

 export const AIGC_PROXY_HOST = 'http://localhost:3001/proxyAIGCFetch';
+export const DEMO_VERSION = '1.4.0';

-/**
- * @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';
-
-  /**
-   * @brief Not necessary.
-   */
-  BusinessId?: string;
-  // BusinessId?: string = '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_MODEL_MODE.ARK_V3,
-    ModelVersion: '1.0',
-    WelcomeSpeech: '欢迎使用火山引擎视频云 RTC 驱动的虚拟人大模型',
-    SystemMessages: [AI_MODE_PROMPT[AI_MODEL.DOUBAO_LITE_4K]],
-    EndPointId: ARK_V3_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;
+export const Config = ConfigFactory;
+export default new ConfigFactory();
--- a/src/i18n.ts
+++ b/src/i18n.ts
@ -1,14 +0,0 @@
-/**
- * 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
@ -1,367 +1,34 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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;
+    user-drag: none;
+    -webkit-user-drag: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: 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 */
+@keyframes glow {
+  0% {
+      opacity: 1;
  }
-
-/**
-   * Show the overflow in IE.
-   * 1. Show the overflow in Edge.
-   */
-
-button,
-input {
-  /* 1 */
-  overflow: visible;
+  40% {
+      opacity: 0.7;
  }
-
-/**
-   * 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;
+  100% {
+      opacity: 0.3;
  }
-
-/**
-   * 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
@ -1,13 +1,13 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 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';
+import './index.less';

 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
--- a/src/interface.ts
+++ b/src/interface.ts
@ -1,7 +1,8 @@
 /**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */
+
 export enum DeviceType {
  Camera = 'camera',
  Microphone = 'microphone',
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				<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>
				`@ -1 +0,0 @@`
				<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>
				`@ -1 +0,0 @@`
				<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>
				`@ -1 +0,0 @@`
				<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>