feat: #3110 add voice control

2025-08-31 03:09:04 +08:00 · 2023-11-14 03:42:23 +08:00
290 changed files with 1553 additions and 16559 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,97 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Node.js dependencies
-/node_modules
-/jspm_packages
-
-# TypeScript v1 declaration files
-typings
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.test
-
-# local env files
-.env*.local
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-
-
-# Vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# Temporary folders
-tmp
-temp
-
-# IDE and editor directories
-.idea
-.vscode
-*.swp
-*.swo
-*~
-
-# OS generated files
-.DS_Store
-Thumbs.db
-
-# secret key
-*.key
-*.key.pub
--- a/.env.template
+++ b/.env.template
@@ -2,22 +2,12 @@
 # Your openai api key. (required)
 OPENAI_API_KEY=sk-xxxx

-# Access password, separated by comma. (optional)
+# Access passsword, separated by comma. (optional)
 CODE=your-password

 # You can start service behind a proxy
 PROXY_URL=http://localhost:7890

-# (optional)
-# Default: Empty
-# Googel Gemini Pro API key, set if you want to use Google Gemini Pro API.
-GOOGLE_API_KEY=
-
-# (optional)
-# Default: https://generativelanguage.googleapis.com/
-# Googel Gemini Pro API url without pathname, set if you want to customize Google Gemini Pro API url.
-GOOGLE_URL=
-
 # Override openai api request base url. (optional)
 # Default: https://api.openai.com
 # Examples: http://your-openai-proxy.com
@@ -46,18 +36,3 @@ ENABLE_BALANCE_QUERY=
 # Default: Empty
 # If you want to disable parse settings from url, set this value to 1.
 DISABLE_FAST_LINK=
-
-
-# anthropic claude Api Key.(optional)
-ANTHROPIC_API_KEY=
-
-### anthropic claude Api version. (optional)
-ANTHROPIC_API_VERSION=
-
-
-
-### anthropic claude Api url (optional)
-ANTHROPIC_URL=
-
-### (optional)
-WHITE_WEBDEV_ENDPOINTS=
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,12 +1,4 @@
 {
  "extends": "next/core-web-vitals",
-  "plugins": [
-    "prettier"
-  ],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "legacyDecorators": true
-    }
-  },
-  "ignorePatterns": ["globals.css"]
+  "plugins": ["prettier"]
 }
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,43 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[Bug] "
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Deployment**
+- [ ] Docker
+- [ ] Vercel
+- [ ] Server
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional Logs**
+Add any logs about the problem here.
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -1,146 +0,0 @@
-name: Bug report
-description: Create a report to help us improve
-title: "[Bug] "
-labels: ["bug"]
-
-body:
-  - type: markdown
-    attributes:
-      value: "## Describe the bug"
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: "Bug Description"
-      description: "A clear and concise description of what the bug is."
-      placeholder: "Explain the bug..."
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: "## To Reproduce"
-  - type: textarea
-    id: steps-to-reproduce
-    attributes:
-      label: "Steps to Reproduce"
-      description: "Steps to reproduce the behavior:"
-      placeholder: |
-        1. Go to '...'
-        2. Click on '....'
-        3. Scroll down to '....'
-        4. See error
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: "## Expected behavior"
-  - type: textarea
-    id: expected-behavior
-    attributes:
-      label: "Expected Behavior"
-      description: "A clear and concise description of what you expected to happen."
-      placeholder: "Describe what you expected to happen..."
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: "## Screenshots"
-  - type: textarea
-    id: screenshots
-    attributes:
-      label: "Screenshots"
-      description: "If applicable, add screenshots to help explain your problem."
-      placeholder: "Paste your screenshots here or write 'N/A' if not applicable..."
-    validations:
-      required: false
-
-  - type: markdown
-    attributes:
-      value: "## Deployment"
-  - type: checkboxes
-    id: deployment
-    attributes:
-      label: "Deployment Method"
-      description: "Please select the deployment method you are using."
-      options:
-        - label: "Docker"
-        - label: "Vercel"
-        - label: "Server"
-
-  - type: markdown
-    attributes:
-      value: "## Desktop (please complete the following information):"
-  - type: input
-    id: desktop-os
-    attributes:
-      label: "Desktop OS"
-      description: "Your desktop operating system."
-      placeholder: "e.g., Windows 10"
-    validations:
-      required: false
-  - type: input
-    id: desktop-browser
-    attributes:
-      label: "Desktop Browser"
-      description: "Your desktop browser."
-      placeholder: "e.g., Chrome, Safari"
-    validations:
-      required: false
-  - type: input
-    id: desktop-version
-    attributes:
-      label: "Desktop Browser Version"
-      description: "Version of your desktop browser."
-      placeholder: "e.g., 89.0"
-    validations:
-      required: false
-
-  - type: markdown
-    attributes:
-      value: "## Smartphone (please complete the following information):"
-  - type: input
-    id: smartphone-device
-    attributes:
-      label: "Smartphone Device"
-      description: "Your smartphone device."
-      placeholder: "e.g., iPhone X"
-    validations:
-      required: false
-  - type: input
-    id: smartphone-os
-    attributes:
-      label: "Smartphone OS"
-      description: "Your smartphone operating system."
-      placeholder: "e.g., iOS 14.4"
-    validations:
-      required: false
-  - type: input
-    id: smartphone-browser
-    attributes:
-      label: "Smartphone Browser"
-      description: "Your smartphone browser."
-      placeholder: "e.g., Safari"
-    validations:
-      required: false
-  - type: input
-    id: smartphone-version
-    attributes:
-      label: "Smartphone Browser Version"
-      description: "Version of your smartphone browser."
-      placeholder: "e.g., 14"
-    validations:
-      required: false
-
-  - type: markdown
-    attributes:
-      value: "## Additional Logs"
-  - type: textarea
-    id: additional-logs
-    attributes:
-      label: "Additional Logs"
-      description: "Add any logs about the problem here."
-      placeholder: "Paste any relevant logs here..."
-    validations:
-      required: false
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[Feature] "
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -1,53 +0,0 @@
-name: Feature request
-description: Suggest an idea for this project
-title: "[Feature Request]: "
-labels: ["enhancement"]
-
-body:
-  - type: markdown
-    attributes:
-      value: "## Is your feature request related to a problem? Please describe."
-  - type: textarea
-    id: problem-description
-    attributes:
-      label: Problem Description
-      description: "A clear and concise description of what the problem is. Example: I'm always frustrated when [...]"
-      placeholder: "Explain the problem you are facing..."
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: "## Describe the solution you'd like"
-  - type: textarea
-    id: desired-solution
-    attributes:
-      label: Solution Description
-      description: A clear and concise description of what you want to happen.
-      placeholder: "Describe the solution you'd like..."
-    validations:
-      required: true
-
-  - type: markdown
-    attributes:
-      value: "## Describe alternatives you've considered"
-  - type: textarea
-    id: alternatives-considered
-    attributes:
-      label: Alternatives Considered
-      description: A clear and concise description of any alternative solutions or features you've considered.
-      placeholder: "Describe any alternative solutions or features you've considered..."
-    validations:
-      required: false
-
-  - type: markdown
-    attributes:
-      value: "## Additional context"
-  - type: textarea
-    id: additional-context
-    attributes:
-      label: Additional Context
-      description: Add any other context or screenshots about the feature request here.
-      placeholder: "Add any other context or screenshots about the feature request here..."
-    validations:
-      required: false
--- a/.github/ISSUE_TEMPLATE/功能建议.md
+++ b/.github/ISSUE_TEMPLATE/功能建议.md
@@ -0,0 +1,24 @@
+---
+name: 功能建议
+about: 请告诉我们你的灵光一闪
+title: "[Feature] "
+labels: ''
+assignees: ''
+
+---
+
+> 为了提高交流效率，我们设立了官方 QQ 群和 QQ 频道，如果你在使用或者搭建过程中遇到了任何问题，请先第一时间加群或者频道咨询解决，除非是可以稳定复现的 Bug 或者较为有创意的功能建议，否则请不要随意往 Issue 区发送低质无意义帖子。
+
+> [点击加入官方群聊](https://github.com/Yidadaa/ChatGPT-Next-Web/discussions/1724)
+
+**这个功能与现有的问题有关吗？**
+如果有关，请在此列出链接或者描述问题。
+
+**你想要什么功能或者有什么建议？**
+尽管告诉我们。
+
+**有没有可以参考的同类竞品？**
+可以给出参考产品的链接或者截图。
+
+**其他信息**
+可以说说你的其他考虑。
--- a/.github/ISSUE_TEMPLATE/反馈问题.md
+++ b/.github/ISSUE_TEMPLATE/反馈问题.md
@@ -0,0 +1,36 @@
+---
+name: 反馈问题
+about: 请告诉我们你遇到的问题
+title: "[Bug] "
+labels: ''
+assignees: ''
+
+---
+
+> 为了提高交流效率，我们设立了官方 QQ 群和 QQ 频道，如果你在使用或者搭建过程中遇到了任何问题，请先第一时间加群或者频道咨询解决，除非是可以稳定复现的 Bug 或者较为有创意的功能建议，否则请不要随意往 Issue 区发送低质无意义帖子。
+
+> [点击加入官方群聊](https://github.com/Yidadaa/ChatGPT-Next-Web/discussions/1724)
+
+**反馈须知**
+
+⚠️ 注意：不遵循此模板的任何帖子都会被立即关闭，如果没有提供下方的信息，我们无法定位你的问题。
+
+请在下方中括号内输入 x 来表示你已经知晓相关内容。
+- [ ] 我确认已经在 [常见问题](https://github.com/Yidadaa/ChatGPT-Next-Web/blob/main/docs/faq-cn.md) 中搜索了此次反馈的问题，没有找到解答；
+- [ ] 我确认已经在 [Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) 列表（包括已经 Close 的）中搜索了此次反馈的问题，没有找到解答。
+- [ ] 我确认已经在 [Vercel 使用教程](https://github.com/Yidadaa/ChatGPT-Next-Web/blob/main/docs/vercel-cn.md) 中搜索了此次反馈的问题，没有找到解答。
+
+**描述问题**
+请在此描述你遇到了什么问题。
+
+**如何复现**
+请告诉我们你是通过什么操作触发的该问题。
+
+**截图**
+请在此提供控制台截图、屏幕截图或者服务端的 log 截图。
+
+**一些必要的信息**
+ - 系统：[比如 windows 10/ macos 12/ linux / android 11 / ios 16]
+ - 浏览器： [比如 chrome, safari]
+ - 版本： [填写设置页面的版本号]
+ - 部署方式：[比如 vercel、docker 或者服务器部署]
--- a/.github/workflows/app.yml
+++ b/.github/workflows/app.yml
@@ -18,7 +18,7 @@ jobs:
      - name: setup node
        uses: actions/setup-node@v3
        with:
-          node-version: 18
+          node-version: 16
      - name: get version
        run: echo "PACKAGE_VERSION=$(node -p "require('./src-tauri/tauri.conf.json').package.version")" >> $GITHUB_ENV
      - name: create release
@@ -43,9 +43,12 @@ jobs:
          - os: ubuntu-latest
            arch: x86_64
            rust_target: x86_64-unknown-linux-gnu
+          - os: macos-latest
+            arch: x86_64
+            rust_target: x86_64-apple-darwin
          - os: macos-latest
            arch: aarch64
-            rust_target: x86_64-apple-darwin,aarch64-apple-darwin
+            rust_target: aarch64-apple-darwin
          - os: windows-latest
            arch: x86_64
            rust_target: x86_64-pc-windows-msvc
@@ -56,15 +59,14 @@ jobs:
      - name: setup node
        uses: actions/setup-node@v3
        with:
-          node-version: 18
-          cache: 'yarn'
+          node-version: 16
      - name: install Rust stable
        uses: dtolnay/rust-toolchain@stable
        with:
          targets: ${{ matrix.config.rust_target }}
      - uses: Swatinem/rust-cache@v2
        with:
-          key: ${{ matrix.config.os }}
+          key: ${{ matrix.config.rust_target }}
      - name: install dependencies (ubuntu only)
        if: matrix.config.os == 'ubuntu-latest'
        run: |
@@ -77,15 +79,8 @@ jobs:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
-          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
-          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
-          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
        with:
          releaseId: ${{ needs.create-release.outputs.release_id }}
-          args: ${{ matrix.config.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}

  publish-release:
    permissions:
--- a/.github/workflows/deploy_preview.yml
+++ b/.github/workflows/deploy_preview.yml
@@ -1,84 +0,0 @@
-name: VercelPreviewDeployment
-
-on:
-  pull_request_target:
-    types:
-      - opened
-      - synchronize
-      - reopened
-
-env:
-  VERCEL_TEAM: ${{ secrets.VERCEL_TEAM }}
-  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-  VERCEL_PR_DOMAIN_SUFFIX: ${{ secrets.VERCEL_PR_DOMAIN_SUFFIX }}
-
-permissions:
-  contents: read
-  statuses: write
-  pull-requests: write
-
-jobs:
-  deploy-preview:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-
-      - name: Extract branch name
-        shell: bash
-        run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> "$GITHUB_OUTPUT"
-        id: extract_branch
-
-      - name: Hash branch name
-        uses: pplanel/hash-calculator-action@v1.3.1
-        id: hash_branch
-        with:
-          input: ${{ steps.extract_branch.outputs.branch }}
-          method: MD5
-
-      - name: Set Environment Variables
-        id: set_env
-        if: github.event_name == 'pull_request_target'
-        run: |
-          echo "VERCEL_ALIAS_DOMAIN=${{ github.event.pull_request.number }}-${{ github.workflow }}.${VERCEL_PR_DOMAIN_SUFFIX}" >> $GITHUB_OUTPUT
-
-      - name: Install Vercel CLI
-        run: npm install --global vercel@latest
-
-      - name: Cache dependencies
-        uses: actions/cache@v2
-        id: cache-npm
-        with:
-          path: ~/.npm
-          key: npm-${{ hashFiles('package-lock.json') }}
-          restore-keys: npm-
-
-      - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=preview --token=${VERCEL_TOKEN}
-
-      - name: Deploy Project Artifacts to Vercel
-        id: vercel
-        env:
-          META_TAG: ${{ steps.hash_branch.outputs.digest }}-${{ github.run_number }}-${{ github.run_attempt}}
-        run: |
-          set -e
-          vercel pull --yes --environment=preview --token=${VERCEL_TOKEN}
-          vercel build --token=${VERCEL_TOKEN}
-          vercel deploy --prebuilt --archive=tgz --token=${VERCEL_TOKEN} --meta base_hash=${{ env.META_TAG }}
-
-          DEFAULT_URL=$(vercel ls --token=${VERCEL_TOKEN} --meta base_hash=${{ env.META_TAG }})
-          ALIAS_URL=$(vercel alias set ${DEFAULT_URL} ${{ steps.set_env.outputs.VERCEL_ALIAS_DOMAIN }} --token=${VERCEL_TOKEN} --scope ${VERCEL_TEAM}| awk '{print $3}')
-
-          echo "New preview URL: ${DEFAULT_URL}"
-          echo "New alias URL: ${ALIAS_URL}"
-          echo "VERCEL_URL=${ALIAS_URL}" >> "$GITHUB_OUTPUT"
-
-      - uses: mshick/add-pr-comment@v2
-        with:
-          message: |
-            Your build has completed!
-
-            [Preview deployment](${{ steps.vercel.outputs.VERCEL_URL }})
--- a/.github/workflows/remove_deploy_preview.yml
+++ b/.github/workflows/remove_deploy_preview.yml
@@ -1,40 +0,0 @@
-name: Removedeploypreview
-
-permissions:
-  contents: read
-  statuses: write
-  pull-requests: write
-
-env:
-  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-
-on:
-  pull_request_target:
-    types:
-      - closed
-
-jobs:
-  delete-deployments:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Extract branch name
-        shell: bash
-        run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
-        id: extract_branch
-
-      - name: Hash branch name
-        uses: pplanel/hash-calculator-action@v1.3.1
-        id: hash_branch
-        with:
-          input: ${{ steps.extract_branch.outputs.branch }}
-          method: MD5
-
-      - name: Call the delete-deployment-preview.sh script
-        env:
-          META_TAG: ${{ steps.hash_branch.outputs.digest }}
-        run: |
-          bash ./scripts/delete-deployment-preview.sh
--- a/.github/workflows/sync.yml
+++ b/.github/workflows/sync.yml
@@ -24,7 +24,7 @@ jobs:
        id: sync
        uses: aormsby/Fork-Sync-With-Upstream-action@v3.4
        with:
-          upstream_sync_repo: ChatGPTNextWeb/ChatGPT-Next-Web
+          upstream_sync_repo: Yidadaa/ChatGPT-Next-Web
          upstream_sync_branch: main
          target_sync_branch: main
          target_repo_token: ${{ secrets.GITHUB_TOKEN }} # automatically generated, no need to set
--- a/36
+++ b/36
@@ -16,7 +16,6 @@ FROM base AS builder
 RUN apk update && apk add --no-cache git

 ENV OPENAI_API_KEY=""
-ENV GOOGLE_API_KEY=""
 ENV CODE=""

 WORKDIR /app
@@ -32,7 +31,6 @@ RUN apk add proxychains-ng

 ENV PROXY_URL=""
 ENV OPENAI_API_KEY=""
-ENV GOOGLE_API_KEY=""
 ENV CODE=""

 COPY --from=builder /app/public ./public
@@ -43,22 +41,22 @@ COPY --from=builder /app/.next/server ./.next/server
 EXPOSE 3000

 CMD if [ -n "$PROXY_URL" ]; then \
-    export HOSTNAME="127.0.0.1"; \
-    protocol=$(echo $PROXY_URL | cut -d: -f1); \
-    host=$(echo $PROXY_URL | cut -d/ -f3 | cut -d: -f1); \
-    port=$(echo $PROXY_URL | cut -d: -f3); \
-    conf=/etc/proxychains.conf; \
-    echo "strict_chain" > $conf; \
-    echo "proxy_dns" >> $conf; \
-    echo "remote_dns_subnet 224" >> $conf; \
-    echo "tcp_read_time_out 15000" >> $conf; \
-    echo "tcp_connect_time_out 8000" >> $conf; \
-    echo "localnet 127.0.0.0/255.0.0.0" >> $conf; \
-    echo "localnet ::1/128" >> $conf; \
-    echo "[ProxyList]" >> $conf; \
-    echo "$protocol $host $port" >> $conf; \
-    cat /etc/proxychains.conf; \
-    proxychains -f $conf node server.js; \
+        export HOSTNAME="127.0.0.1"; \
+        protocol=$(echo $PROXY_URL | cut -d: -f1); \
+        host=$(echo $PROXY_URL | cut -d/ -f3 | cut -d: -f1); \
+        port=$(echo $PROXY_URL | cut -d: -f3); \
+        conf=/etc/proxychains.conf; \
+        echo "strict_chain" > $conf; \
+        echo "proxy_dns" >> $conf; \
+        echo "remote_dns_subnet 224" >> $conf; \
+        echo "tcp_read_time_out 15000" >> $conf; \
+        echo "tcp_connect_time_out 8000" >> $conf; \
+        echo "localnet 127.0.0.0/255.0.0.0" >> $conf; \
+        echo "localnet ::1/128" >> $conf; \
+        echo "[ProxyList]" >> $conf; \
+        echo "$protocol $host $port" >> $conf; \
+        cat /etc/proxychains.conf; \
+        proxychains -f $conf node server.js; \
    else \
-    node server.js; \
+        node server.js; \
    fi
--- a/README.md
+++ b/README.md
@@ -1,22 +1,22 @@
 <div align="center">
-<img src="./docs/images/head-cover.png" alt="icon"/>
+<img src="./docs/images/icon.svg" alt="icon"/>

-<h1 align="center">NextChat (ChatGPT Next Web)</h1>
+<h1 align="center">ChatGPT Next Web</h1>

 English / [简体中文](./README_CN.md)

-One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4 & Gemini Pro support.
+One-Click to get well-designed cross-platform ChatGPT web UI.

-一键免费部署你的跨平台私人 ChatGPT 应用, 支持 GPT3, GPT4 & Gemini Pro 模型。
+一键免费部署你的跨平台私人 ChatGPT 应用。

 [![Web][Web-image]][web-url]
 [![Windows][Windows-image]][download-url]
 [![MacOS][MacOS-image]][download-url]
 [![Linux][Linux-image]][download-url]

-[Web App](https://app.nextchat.dev/) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Discord](https://discord.gg/YCkeafCafC) / [Twitter](https://twitter.com/NextChatDev)
+[Web App](https://chatgpt.nextweb.fun/) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Discord](https://discord.gg/YCkeafCafC) / [Twitter](https://twitter.com/mortiest_ricky) / [Buy Me a Coffee](https://www.buymeacoffee.com/yidadaa)

-[网页版](https://app.nextchat.dev/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues)
+[网页版](https://chatgpt.nextweb.fun/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [QQ 群](https://github.com/Yidadaa/ChatGPT-Next-Web/discussions/1724) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg)

 [web-url]: https://chatgpt.nextweb.fun
 [download-url]: https://github.com/Yidadaa/ChatGPT-Next-Web/releases
@@ -25,9 +25,7 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4
 [MacOS-image]: https://img.shields.io/badge/-MacOS-black?logo=apple
 [Linux-image]: https://img.shields.io/badge/-Linux-333?logo=ubuntu

-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChatGPTNextWeb%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=nextchat&repository-name=NextChat)
-
-[![Deploy on Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/ZBUEFA)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)

 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)

@@ -39,8 +37,8 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4

 - **Deploy for free with one-click** on Vercel in under 1 minute
 - Compact client (~5MB) on Linux/Windows/MacOS, [download it now](https://github.com/Yidadaa/ChatGPT-Next-Web/releases)
- Fully compatible with self-deployed LLMs, recommended for use with [RWKV-Runner](https://github.com/josStorer/RWKV-Runner) or [LocalAI](https://github.com/go-skynet/LocalAI)
- Privacy first, all data is stored locally in the browser
+- Fully compatible with self-deployed llms, recommended for use with [RWKV-Runner](https://github.com/josStorer/RWKV-Runner) or [LocalAI](https://github.com/go-skynet/LocalAI)
+- Privacy first, all data stored locally in the browser
 - Markdown support: LaTex, mermaid, code highlight, etc.
 - Responsive design, dark mode and PWA
 - Fast first screen loading speed (~100kb), support streaming response
@@ -61,11 +59,10 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4

 ## What's New

- 🚀 v2.10.1 support Google Gemini Pro model.
- 🚀 v2.9.11 you can use azure endpoint now.
- 🚀 v2.8 now we have a client that runs across all platforms!
- 🚀 v2.7 let's share conversations as image, or share to ShareGPT!
 - 🚀 v2.0 is released, now you can create prompt templates, turn your ideas into reality! Read this: [ChatGPT Prompt Engineering Tips: Zero, One and Few Shot Prompting](https://www.allabtai.com/prompt-engineering-tips-zero-one-and-few-shot-prompting/).
+- 🚀 v2.7 let's share conversations as image, or share to ShareGPT!
+- 🚀 v2.8 now we have a client that runs across all platforms!
+- 🚀 v2.9.11 you can use azure endpoint now.

 ## 主要功能

@@ -78,7 +75,7 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4
 - 预制角色功能（面具），方便地创建、分享和调试你的个性化对话
 - 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts)
 - 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
- 多国语言支持：English, 简体中文, 繁体中文, 日本語, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština, 한국어, Indonesia
+- 多国语言支持：English, 简体中文, 繁体中文, 日本語, Español, Italiano, Türkçe, Deutsch, Tiếng Việt, Русский, Čeština
 - 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问

 ## 开发计划
@@ -164,7 +161,7 @@ Access password, separated by comma.

 ### `OPENAI_API_KEY` (required)

-Your openai api key, join multiple api keys with comma.
+Your openai api key.

 ### `BASE_URL` (optional)

@@ -192,26 +189,6 @@ Azure Api Key.

 Azure Api Version, find it at [Azure Documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions).

-### `GOOGLE_API_KEY` (optional)
-
-Google Gemini Pro Api Key.
-
-### `GOOGLE_URL` (optional)
-
-Google Gemini Pro Api Url.
-
-### `ANTHROPIC_API_KEY` (optional)
-
-anthropic claude Api Key.
-
-### `ANTHROPIC_API_VERSION` (optional)
-
-anthropic claude Api version.
-
-### `ANTHROPIC_URL` (optional)
-
-anthropic claude Api Url.
-
 ### `HIDE_USER_API_KEY` (optional)

 > Default: Empty
@@ -228,7 +205,7 @@ If you do not want users to use GPT-4, set this value to 1.

 > Default: Empty

-If you do want users to query balance, set this value to 1.
+If you do want users to query balance, set this value to 1, or you should set it to 0.

 ### `DISABLE_FAST_LINK` (optional)

@@ -239,18 +216,9 @@ If you want to disable parse settings from url, set this to 1.
 ### `CUSTOM_MODELS` (optional)

 > Default: Empty
-> Example: `+llama,+claude-2,-gpt-3.5-turbo,gpt-4-1106-preview=gpt-4-turbo` means add `llama, claude-2` to model list, and remove `gpt-3.5-turbo` from list, and display `gpt-4-1106-preview` as `gpt-4-turbo`.
+> Example: `+llama,+claude-2,-gpt-3.5-turbo,gpt-4-1106-preview:gpt-4-turbo` means add `llama, claude-2` to model list, and remove `gpt-3.5-turbo` from list, and display `gpt-4-1106-preview` as `gpt-4-turbo`.

-To control custom models, use `+` to add a custom model, use `-` to hide a model, use `name=displayName` to customize model name, separated by comma.
-
-User `-all` to disable all default models, `+all` to enable all default models.
-
-### `WHITE_WEBDEV_ENDPOINTS` (可选)
-
-You can use this option if you want to increase the number of webdav service addresses you are allowed to access, as required by the format：
- Each address must be a complete endpoint 
-> `https://xxxx/yyy`
- Multiple addresses are connected by ', '
+To control custom models, use `+` to add a custom model, use `-` to hide a model, use `name:displayName` to customize model name, separated by comma.

 ## Requirements

@@ -376,15 +344,10 @@ If you want to add a new translation, read this [document](./docs/translation.md
 [@piksonGit](https://github.com/piksonGit)
 [@ouyangzhiping](https://github.com/ouyangzhiping)
 [@wenjiavv](https://github.com/wenjiavv)
-[@LeXwDeX](https://github.com/LeXwDeX)
-[@Licoy](https://github.com/Licoy)
-[@shangmin2009](https://github.com/shangmin2009)

-### Contributors
+### Contributor

-<a href="https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=ChatGPTNextWeb/ChatGPT-Next-Web" />
-</a>
+[Contributors](https://github.com/Yidadaa/ChatGPT-Next-Web/graphs/contributors)

 ## LICENSE

--- a/README_CN.md
+++ b/README_CN.md
@@ -1,16 +1,14 @@
 <div align="center">
 <img src="./docs/images/icon.svg" alt="预览"/>

-<h1 align="center">NextChat</h1>
+<h1 align="center">ChatGPT Next Web</h1>

-一键免费部署你的私人 ChatGPT 网页应用，支持 GPT3, GPT4 & Gemini Pro 模型。
+一键免费部署你的私人 ChatGPT 网页应用。

-[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N)
+[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N) / [QQ 群](https://user-images.githubusercontent.com/16968934/228190818-7dd00845-e9b9-4363-97e5-44c507ac76da.jpeg) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg) / [Donate](#捐赠-donate-usdt)

 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)

-[![Deploy on Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/ZBUEFA)
-
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)

 ![主界面](./docs/images/cover.png)
@@ -21,7 +19,7 @@

 1. 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys);
 2. 点击右侧按钮开始部署：
-   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&env=GOOGLE_API_KEY&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key 和[页面访问密码](#配置页面访问密码) CODE；
+   [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key 和[页面访问密码](#配置页面访问密码) CODE；
 3. 部署完毕后，即可开始使用；
 4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。

@@ -70,7 +68,7 @@ code1,code2,code3

 ### `OPENAI_API_KEY` （必填项）

-OpanAI 密钥，你在 openai 账户页面申请的 api key，使用英文逗号隔开多个 key，这样可以随机轮询这些 key。
+OpanAI 密钥，你在 openai 账户页面申请的 api key。

 ### `CODE` （可选）

@@ -106,26 +104,6 @@ Azure 密钥。

 Azure Api 版本，你可以在这里找到：[Azure 文档](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions)。

-### `GOOGLE_API_KEY` (optional)
-
-Google Gemini Pro 密钥.
-
-### `GOOGLE_URL` (optional)
-
-Google Gemini Pro Api Url.
-
-### `ANTHROPIC_API_KEY` (optional)
-
-anthropic claude Api Key.
-
-### `ANTHROPIC_API_VERSION` (optional)
-
-anthropic claude Api version.
-
-### `ANTHROPIC_URL` (optional)
-
-anthropic claude Api Url.
-
 ### `HIDE_USER_API_KEY` （可选）

 如果你不想让用户自行填入 API Key，将此环境变量设置为 1 即可。
@@ -142,19 +120,11 @@ anthropic claude Api Url.

 如果你想禁用从链接解析预制设置，将此环境变量设置为 1 即可。

-### `WHITE_WEBDEV_ENDPOINTS` (可选)
-
-如果你想增加允许访问的webdav服务地址，可以使用该选项，格式要求：
- 每一个地址必须是一个完整的 endpoint
-> `https://xxxx/xxx`
- 多个地址以`,`相连
-
 ### `CUSTOM_MODELS` （可选）

-> 示例：`+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-1106-preview=gpt-4-turbo` 表示增加 `qwen-7b-chat` 和 `glm-6b` 到模型列表，而从列表中删除 `gpt-3.5-turbo`，并将 `gpt-4-1106-preview` 模型名字展示为 `gpt-4-turbo`。
-> 如果你想先禁用所有模型，再启用指定模型，可以使用 `-all,+gpt-3.5-turbo`，则表示仅启用 `gpt-3.5-turbo`
+> 示例：`+qwen-7b-chat,+glm-6b,-gpt-3.5-turbo,gpt-4-1106-preview:gpt-4-turbo` 表示增加 `qwen-7b-chat` 和 `glm-6b` 到模型列表，而从列表中删除 `gpt-3.5-turbo`，并将 `gpt-4-1106-preview` 模型名字展示为 `gpt-4-turbo`。

-用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。
+用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名:展示名` 来自定义模型的展示名，用英文逗号隔开。

 ## 开发

@@ -168,7 +138,7 @@ anthropic claude Api Url.
 OPENAI_API_KEY=<your api key here>

 # 中国大陆用户，可以使用本项目自带的代理进行开发，你也可以自由选择其他代理地址
-BASE_URL=https://b.nextweb.fun/api/proxy
+BASE_URL=https://a.nextweb.fun/api/proxy
 ```

 ### 本地开发
--- a/app/api/anthropic/[...path]/route.ts
+++ b/app/api/anthropic/[...path]/route.ts
@@ -1,189 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  ANTHROPIC_BASE_URL,
-  Anthropic,
-  ApiPath,
-  DEFAULT_MODELS,
-  ModelProvider,
-} from "@/app/constant";
-import { prettyObject } from "@/app/utils/format";
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "../../auth";
-import { collectModelTable } from "@/app/utils/model";
-
-const ALLOWD_PATH = new Set([Anthropic.ChatPath, Anthropic.ChatPath1]);
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Anthropic Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const subpath = params.path.join("/");
-
-  if (!ALLOWD_PATH.has(subpath)) {
-    console.log("[Anthropic Route] forbidden path ", subpath);
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + subpath,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  const authResult = auth(req, ModelProvider.Claude);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[Anthropic] ", e);
-    return NextResponse.json(prettyObject(e));
-  }
-}
-
-export const GET = handle;
-export const POST = handle;
-
-export const runtime = "edge";
-export const preferredRegion = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
-
-const serverConfig = getServerSideConfig();
-
-async function request(req: NextRequest) {
-  const controller = new AbortController();
-
-  let authHeaderName = "x-api-key";
-  let authValue =
-    req.headers.get(authHeaderName) ||
-    req.headers.get("Authorization")?.replaceAll("Bearer ", "").trim() ||
-    serverConfig.anthropicApiKey ||
-    "";
-
-  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.Anthropic, "");
-
-  let baseUrl =
-    serverConfig.anthropicUrl || serverConfig.baseUrl || ANTHROPIC_BASE_URL;
-
-  if (!baseUrl.startsWith("http")) {
-    baseUrl = `https://${baseUrl}`;
-  }
-
-  if (baseUrl.endsWith("/")) {
-    baseUrl = baseUrl.slice(0, -1);
-  }
-
-  console.log("[Proxy] ", path);
-  console.log("[Base Url]", baseUrl);
-
-  const timeoutId = setTimeout(
-    () => {
-      controller.abort();
-    },
-    10 * 60 * 1000,
-  );
-
-  const fetchUrl = `${baseUrl}${path}`;
-
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": "application/json",
-      "Cache-Control": "no-store",
-      [authHeaderName]: authValue,
-      "anthropic-version":
-        req.headers.get("anthropic-version") ||
-        serverConfig.anthropicApiVersion ||
-        Anthropic.Vision,
-    },
-    method: req.method,
-    body: req.body,
-    redirect: "manual",
-    // @ts-ignore
-    duplex: "half",
-    signal: controller.signal,
-  };
-
-  // #1815 try to refuse some request to some models
-  if (serverConfig.customModels && req.body) {
-    try {
-      const modelTable = collectModelTable(
-        DEFAULT_MODELS,
-        serverConfig.customModels,
-      );
-      const clonedBody = await req.text();
-      fetchOptions.body = clonedBody;
-
-      const jsonBody = JSON.parse(clonedBody) as { model?: string };
-
-      // not undefined and is false
-      if (modelTable[jsonBody?.model ?? ""].available === false) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[Anthropic] filter`, e);
-    }
-  }
-  console.log("[Anthropic request]", fetchOptions.headers, req.method);
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-
-    console.log(
-      "[Anthropic response]",
-      res.status,
-      "   ",
-      res.headers,
-      res.url,
-    );
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}
--- a/app/api/auth.ts
+++ b/app/api/auth.ts
@@ -1,7 +1,7 @@
 import { NextRequest } from "next/server";
 import { getServerSideConfig } from "../config/server";
 import md5 from "spark-md5";
-import { ACCESS_CODE_PREFIX, ModelProvider } from "../constant";
+import { ACCESS_CODE_PREFIX } from "../constant";

 function getIP(req: NextRequest) {
  let ip = req.ip ?? req.headers.get("x-real-ip");
@@ -16,15 +16,15 @@ function getIP(req: NextRequest) {

 function parseApiKey(bearToken: string) {
  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-  const isApiKey = !token.startsWith(ACCESS_CODE_PREFIX);
+  const isOpenAiKey = !token.startsWith(ACCESS_CODE_PREFIX);

  return {
-    accessCode: isApiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length),
-    apiKey: isApiKey ? token : "",
+    accessCode: isOpenAiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length),
+    apiKey: isOpenAiKey ? token : "",
  };
 }

-export function auth(req: NextRequest, modelProvider: ModelProvider) {
+export function auth(req: NextRequest) {
  const authToken = req.headers.get("Authorization") ?? "";

  // check if it is openai api key or user token
@@ -46,45 +46,18 @@ export function auth(req: NextRequest, modelProvider: ModelProvider) {
    };
  }

-  if (serverConfig.hideUserApiKey && !!apiKey) {
-    return {
-      error: true,
-      msg: "you are not allowed to access with your own api key",
-    };
-  }
-
  // if user does not provide an api key, inject system api key
  if (!apiKey) {
-    const serverConfig = getServerSideConfig();
+    const serverApiKey = serverConfig.isAzure
+      ? serverConfig.azureApiKey
+      : serverConfig.apiKey;

-    // const systemApiKey =
-    //   modelProvider === ModelProvider.GeminiPro
-    //     ? serverConfig.googleApiKey
-    //     : serverConfig.isAzure
-    //     ? serverConfig.azureApiKey
-    //     : serverConfig.apiKey;
-
-    let systemApiKey: string | undefined;
-
-    switch (modelProvider) {
-      case ModelProvider.GeminiPro:
-        systemApiKey = serverConfig.googleApiKey;
-        break;
-      case ModelProvider.Claude:
-        systemApiKey = serverConfig.anthropicApiKey;
-        break;
-      case ModelProvider.GPT:
-      default:
-        if (serverConfig.isAzure) {
-          systemApiKey = serverConfig.azureApiKey;
-        } else {
-          systemApiKey = serverConfig.apiKey;
-        }
-    }
-
-    if (systemApiKey) {
+    if (serverApiKey) {
      console.log("[Auth] use system api key");
-      req.headers.set("Authorization", `Bearer ${systemApiKey}`);
+      req.headers.set(
+        "Authorization",
+        `${serverConfig.isAzure ? "" : "Bearer "}${serverApiKey}`,
+      );
    } else {
      console.log("[Auth] admin did not provide an api key");
    }
--- a/app/api/common.ts
+++ b/app/api/common.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getServerSideConfig } from "../config/server";
-import { DEFAULT_MODELS, OPENAI_BASE_URL, GEMINI_BASE_URL } from "../constant";
+import { DEFAULT_MODELS, OPENAI_BASE_URL } from "../constant";
 import { collectModelTable } from "../utils/model";
 import { makeAzurePath } from "../azure";

@@ -9,21 +9,8 @@ const serverConfig = getServerSideConfig();
 export async function requestOpenai(req: NextRequest) {
  const controller = new AbortController();

-  var authValue,
-    authHeaderName = "";
-  if (serverConfig.isAzure) {
-    authValue =
-      req.headers
-        .get("Authorization")
-        ?.trim()
-        .replaceAll("Bearer ", "")
-        .trim() ?? "";
-
-    authHeaderName = "api-key";
-  } else {
-    authValue = req.headers.get("Authorization") ?? "";
-    authHeaderName = "Authorization";
-  }
+  const authValue = req.headers.get("Authorization") ?? "";
+  const authHeaderName = serverConfig.isAzure ? "api-key" : "Authorization";

  let path = `${req.nextUrl.pathname}${req.nextUrl.search}`.replaceAll(
    "/api/openai/",
@@ -43,6 +30,7 @@ export async function requestOpenai(req: NextRequest) {

  console.log("[Proxy] ", path);
  console.log("[Base Url]", baseUrl);
+  console.log("[Org ID]", serverConfig.openaiOrgId);

  const timeoutId = setTimeout(
    () => {
@@ -112,37 +100,12 @@ export async function requestOpenai(req: NextRequest) {
  try {
    const res = await fetch(fetchUrl, fetchOptions);

-  // Extract the OpenAI-Organization header from the response
-  const openaiOrganizationHeader = res.headers.get("OpenAI-Organization");
-
-  // Check if serverConfig.openaiOrgId is defined and not an empty string
-  if (serverConfig.openaiOrgId && serverConfig.openaiOrgId.trim() !== "") {
-    // If openaiOrganizationHeader is present, log it; otherwise, log that the header is not present
-    console.log("[Org ID]", openaiOrganizationHeader);
-  } else {
-    console.log("[Org ID] is not set up.");
-  }
-
    // to prevent browser prompt for credentials
    const newHeaders = new Headers(res.headers);
    newHeaders.delete("www-authenticate");
    // to disable nginx buffering
    newHeaders.set("X-Accel-Buffering", "no");

-
-    // Conditionally delete the OpenAI-Organization header from the response if [Org ID] is undefined or empty (not setup in ENV)
-    // Also, this is to prevent the header from being sent to the client
-    if (!serverConfig.openaiOrgId || serverConfig.openaiOrgId.trim() === "") {
-      newHeaders.delete("OpenAI-Organization");
-    }
-
-    // The latest version of the OpenAI API forced the content-encoding to be "br" in json response
-    // So if the streaming is disabled, we need to remove the content-encoding header
-    // Because Vercel uses gzip to compress the response, if we don't remove the content-encoding header
-    // The browser will try to decode the response with brotli and fail
-    newHeaders.delete("content-encoding");
-
-
    return new Response(res.body, {
      status: res.status,
      statusText: res.statusText,
--- a/app/api/config/route.ts
+++ b/app/api/config/route.ts
@@ -13,7 +13,6 @@ const DANGER_CONFIG = {
  hideBalanceQuery: serverConfig.hideBalanceQuery,
  disableFastLink: serverConfig.disableFastLink,
  customModels: serverConfig.customModels,
-  defaultModel: serverConfig.defaultModel,
 };

 declare global {
--- a/app/api/cors/[...path]/route.ts
+++ b/app/api/cors/[...path]/route.ts
@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const [protocol, ...subpath] = params.path;
+  const targetUrl = `${protocol}://${subpath.join("/")}`;
+
+  const method = req.headers.get("method") ?? undefined;
+  const shouldNotHaveBody = ["get", "head"].includes(
+    method?.toLowerCase() ?? "",
+  );
+
+  const fetchOptions: RequestInit = {
+    headers: {
+      authorization: req.headers.get("authorization") ?? "",
+    },
+    body: shouldNotHaveBody ? null : req.body,
+    method,
+    // @ts-ignore
+    duplex: "half",
+  };
+
+  const fetchResult = await fetch(targetUrl, fetchOptions);
+
+  console.log("[Any Proxy]", targetUrl, {
+    status: fetchResult.status,
+    statusText: fetchResult.statusText,
+  });
+
+  return fetchResult;
+}
+
+export const POST = handle;
+export const GET = handle;
+export const OPTIONS = handle;
+
+export const runtime = "nodejs";
--- a/app/api/google/[...path]/route.ts
+++ b/app/api/google/[...path]/route.ts
@@ -1,116 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { auth } from "../../auth";
-import { getServerSideConfig } from "@/app/config/server";
-import { GEMINI_BASE_URL, Google, ModelProvider } from "@/app/constant";
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[Google Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const controller = new AbortController();
-
-  const serverConfig = getServerSideConfig();
-
-  let baseUrl = serverConfig.googleUrl || GEMINI_BASE_URL;
-
-  if (!baseUrl.startsWith("http")) {
-    baseUrl = `https://${baseUrl}`;
-  }
-
-  if (baseUrl.endsWith("/")) {
-    baseUrl = baseUrl.slice(0, -1);
-  }
-
-  let path = `${req.nextUrl.pathname}`.replaceAll("/api/google/", "");
-
-  console.log("[Proxy] ", path);
-  console.log("[Base Url]", baseUrl);
-
-  const timeoutId = setTimeout(
-    () => {
-      controller.abort();
-    },
-    10 * 60 * 1000,
-  );
-
-  const authResult = auth(req, ModelProvider.GeminiPro);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  const bearToken = req.headers.get("Authorization") ?? "";
-  const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-
-  const key = token ? token : serverConfig.googleApiKey;
-
-  if (!key) {
-    return NextResponse.json(
-      {
-        error: true,
-        message: `missing GOOGLE_API_KEY in server env vars`,
-      },
-      {
-        status: 401,
-      },
-    );
-  }
-
-  const fetchUrl = `${baseUrl}/${path}?key=${key}`;
-  const fetchOptions: RequestInit = {
-    headers: {
-      "Content-Type": "application/json",
-      "Cache-Control": "no-store",
-    },
-    method: req.method,
-    body: req.body,
-    // to fix #2485: https://stackoverflow.com/questions/55920957/cloudflare-worker-typeerror-one-time-use-body
-    redirect: "manual",
-    // @ts-ignore
-    duplex: "half",
-    signal: controller.signal,
-  };
-
-  try {
-    const res = await fetch(fetchUrl, fetchOptions);
-    // to prevent browser prompt for credentials
-    const newHeaders = new Headers(res.headers);
-    newHeaders.delete("www-authenticate");
-    // to disable nginx buffering
-    newHeaders.set("X-Accel-Buffering", "no");
-
-    return new Response(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers: newHeaders,
-    });
-  } finally {
-    clearTimeout(timeoutId);
-  }
-}
-
-export const GET = handle;
-export const POST = handle;
-
-export const runtime = "edge";
-export const preferredRegion = [
-  "bom1",
-  "cle1",
-  "cpt1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
--- a/app/api/openai/[...path]/route.ts
+++ b/app/api/openai/[...path]/route.ts
@@ -1,6 +1,6 @@
 import { type OpenAIListModelResponse } from "@/app/client/platforms/openai";
 import { getServerSideConfig } from "@/app/config/server";
-import { ModelProvider, OpenaiPath } from "@/app/constant";
+import { OpenaiPath } from "@/app/constant";
 import { prettyObject } from "@/app/utils/format";
 import { NextRequest, NextResponse } from "next/server";
 import { auth } from "../../auth";
@@ -45,7 +45,7 @@ async function handle(
    );
  }

-  const authResult = auth(req, ModelProvider.GPT);
+  const authResult = auth(req);
  if (authResult.error) {
    return NextResponse.json(authResult, {
      status: 401,
@@ -75,22 +75,3 @@ export const GET = handle;
 export const POST = handle;

 export const runtime = "edge";
-export const preferredRegion = [
-  "arn1",
-  "bom1",
-  "cdg1",
-  "cle1",
-  "cpt1",
-  "dub1",
-  "fra1",
-  "gru1",
-  "hnd1",
-  "iad1",
-  "icn1",
-  "kix1",
-  "lhr1",
-  "pdx1",
-  "sfo1",
-  "sin1",
-  "syd1",
-];
--- a/app/api/upstash/[action]/[...key]/route.ts
+++ b/app/api/upstash/[action]/[...key]/route.ts
@@ -1,73 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { action: string; key: string[] } },
-) {
-  const requestUrl = new URL(req.url);
-  const endpoint = requestUrl.searchParams.get("endpoint");
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-  const [...key] = params.key;
-  // only allow to request to *.upstash.io
-  if (!endpoint || !new URL(endpoint).hostname.endsWith(".upstash.io")) {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + params.key.join("/"),
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  // only allow upstash get and set method
-  if (params.action !== "get" && params.action !== "set") {
-    console.log("[Upstash Route] forbidden action ", params.action);
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + params.action,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  const targetUrl = `${endpoint}/${params.action}/${params.key.join("/")}`;
-
-  const method = req.method;
-  const shouldNotHaveBody = ["get", "head"].includes(
-    method?.toLowerCase() ?? "",
-  );
-
-  const fetchOptions: RequestInit = {
-    headers: {
-      authorization: req.headers.get("authorization") ?? "",
-    },
-    body: shouldNotHaveBody ? null : req.body,
-    method,
-    // @ts-ignore
-    duplex: "half",
-  };
-
-  console.log("[Upstash Proxy]", targetUrl, fetchOptions);
-  const fetchResult = await fetch(targetUrl, fetchOptions);
-
-  console.log("[Any Proxy]", targetUrl, {
-    status: fetchResult.status,
-    statusText: fetchResult.statusText,
-  });
-
-  return fetchResult;
-}
-
-export const POST = handle;
-export const GET = handle;
-export const OPTIONS = handle;
-
-export const runtime = "edge";
--- a/app/api/webdav/[...path]/route.ts
+++ b/app/api/webdav/[...path]/route.ts
@@ -1,142 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { STORAGE_KEY, internalWhiteWebDavEndpoints } from "../../../constant";
-import { getServerSideConfig } from "@/app/config/server";
-
-const config = getServerSideConfig();
-
-const mergedWhiteWebDavEndpoints = [
-  ...internalWhiteWebDavEndpoints,
-  ...config.whiteWebDevEndpoints,
-].filter((domain) => Boolean(domain.trim()));
-
-async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-  const folder = STORAGE_KEY;
-  const fileName = `${folder}/backup.json`;
-
-  const requestUrl = new URL(req.url);
-  let endpoint = requestUrl.searchParams.get("endpoint");
-
-  // Validate the endpoint to prevent potential SSRF attacks
-  if (
-    !mergedWhiteWebDavEndpoints.some((white) => endpoint?.startsWith(white))
-  ) {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "Invalid endpoint",
-      },
-      {
-        status: 400,
-      },
-    );
-  }
-
-  if (!endpoint?.endsWith("/")) {
-    endpoint += "/";
-  }
-
-  const endpointPath = params.path.join("/");
-  const targetPath = `${endpoint}${endpointPath}`;
-
-  // only allow MKCOL, GET, PUT
-  if (req.method !== "MKCOL" && req.method !== "GET" && req.method !== "PUT") {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + targetPath,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  // for MKCOL request, only allow request ${folder}
-  if (req.method === "MKCOL" && !targetPath.endsWith(folder)) {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + targetPath,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  // for GET request, only allow request ending with fileName
-  if (req.method === "GET" && !targetPath.endsWith(fileName)) {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + targetPath,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  //   for PUT request, only allow request ending with fileName
-  if (req.method === "PUT" && !targetPath.endsWith(fileName)) {
-    return NextResponse.json(
-      {
-        error: true,
-        msg: "you are not allowed to request " + targetPath,
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  const targetUrl = targetPath;
-
-  const method = req.method;
-  const shouldNotHaveBody = ["get", "head"].includes(
-    method?.toLowerCase() ?? "",
-  );
-
-  const fetchOptions: RequestInit = {
-    headers: {
-      authorization: req.headers.get("authorization") ?? "",
-    },
-    body: shouldNotHaveBody ? null : req.body,
-    redirect: "manual",
-    method,
-    // @ts-ignore
-    duplex: "half",
-  };
-
-  let fetchResult;
-
-  try {
-    fetchResult = await fetch(targetUrl, fetchOptions);
-  } finally {
-    console.log(
-      "[Any Proxy]",
-      targetUrl,
-      {
-        method: req.method,
-      },
-      {
-        status: fetchResult?.status,
-        statusText: fetchResult?.statusText,
-      },
-    );
-  }
-
-  return fetchResult;
-}
-
-export const PUT = handle;
-export const GET = handle;
-export const OPTIONS = handle;
-
-export const runtime = "edge";
--- a/app/client/api.ts
+++ b/app/client/api.ts
@@ -1,31 +1,17 @@
 import { getClientConfig } from "../config/client";
-import {
-  ACCESS_CODE_PREFIX,
-  Azure,
-  ModelProvider,
-  ServiceProvider,
-} from "../constant";
-import { ChatMessage, ModelType, useAccessStore, useChatStore } from "../store";
+import { ACCESS_CODE_PREFIX, Azure, ServiceProvider } from "../constant";
+import { ChatMessage, ModelType, useAccessStore } from "../store";
 import { ChatGPTApi } from "./platforms/openai";
-import { GeminiProApi } from "./platforms/google";
-import { ClaudeApi } from "./platforms/anthropic";
+
 export const ROLES = ["system", "user", "assistant"] as const;
 export type MessageRole = (typeof ROLES)[number];

 export const Models = ["gpt-3.5-turbo", "gpt-4"] as const;
 export type ChatModel = ModelType;

-export interface MultimodalContent {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-}
-
 export interface RequestMessage {
  role: MessageRole;
-  content: string | MultimodalContent[];
+  content: string;
 }

 export interface LLMConfig {
@@ -55,19 +41,13 @@ export interface LLMUsage {
 export interface LLMModel {
  name: string;
  available: boolean;
-  provider: LLMModelProvider;
-}
-
-export interface LLMModelProvider {
-  id: string;
-  providerName: string;
-  providerType: string;
 }

 export abstract class LLMApi {
  abstract chat(options: ChatOptions): Promise<void>;
  abstract usage(): Promise<LLMUsage>;
  abstract models(): Promise<LLMModel[]>;
+  abstract speech(input: string): Promise<ArrayBuffer>;
 }

 type ProviderName = "openai" | "azure" | "claude" | "palm";
@@ -94,17 +74,8 @@ interface ChatProvider {
 export class ClientApi {
  public llm: LLMApi;

-  constructor(provider: ModelProvider = ModelProvider.GPT) {
-    switch (provider) {
-      case ModelProvider.GeminiPro:
-        this.llm = new GeminiProApi();
-        break;
-      case ModelProvider.Claude:
-        this.llm = new ClaudeApi();
-        break;
-      default:
-        this.llm = new ChatGPTApi();
-    }
+  constructor() {
+    this.llm = new ChatGPTApi();
  }

  config() {}
@@ -123,7 +94,7 @@ export class ClientApi {
        {
          from: "human",
          value:
-            "Share from [NextChat]: https://github.com/Yidadaa/ChatGPT-Next-Web",
+            "Share from [ChatGPT Next Web]: https://github.com/Yidadaa/ChatGPT-Next-Web",
        },
      ]);
    // 敬告二开开发者们，为了开源大模型的发展，请不要修改上述消息，此消息用于后续数据清洗使用
@@ -153,38 +124,32 @@ export class ClientApi {
  }
 }

+export const api = new ClientApi();
+
 export function getHeaders() {
  const accessStore = useAccessStore.getState();
  const headers: Record<string, string> = {
    "Content-Type": "application/json",
-    Accept: "application/json",
+    "x-requested-with": "XMLHttpRequest",
  };
-  const modelConfig = useChatStore.getState().currentSession().mask.modelConfig;
-  const isGoogle = modelConfig.model.startsWith("gemini");
+
  const isAzure = accessStore.provider === ServiceProvider.Azure;
  const authHeader = isAzure ? "api-key" : "Authorization";
-  const apiKey = isGoogle
-    ? accessStore.googleApiKey
-    : isAzure
-    ? accessStore.azureApiKey
-    : accessStore.openaiApiKey;
-  const clientConfig = getClientConfig();
+  const apiKey = isAzure ? accessStore.azureApiKey : accessStore.openaiApiKey;
+
  const makeBearer = (s: string) => `${isAzure ? "" : "Bearer "}${s.trim()}`;
  const validString = (x: string) => x && x.length > 0;

-  // when using google api in app, not set auth header
-  if (!(isGoogle && clientConfig?.isApp)) {
-    // use user's api key first
-    if (validString(apiKey)) {
-      headers[authHeader] = makeBearer(apiKey);
-    } else if (
-      accessStore.enabledAccessControl() &&
-      validString(accessStore.accessCode)
-    ) {
-      headers[authHeader] = makeBearer(
-        ACCESS_CODE_PREFIX + accessStore.accessCode,
-      );
-    }
+  // use user's api key first
+  if (validString(apiKey)) {
+    headers[authHeader] = makeBearer(apiKey);
+  } else if (
+    accessStore.enabledAccessControl() &&
+    validString(accessStore.accessCode)
+  ) {
+    headers[authHeader] = makeBearer(
+      ACCESS_CODE_PREFIX + accessStore.accessCode,
+    );
  }

  return headers;
--- a/app/client/platforms/anthropic.ts
+++ b/app/client/platforms/anthropic.ts
@@ -1,408 +0,0 @@
-import { ACCESS_CODE_PREFIX, Anthropic, ApiPath } from "@/app/constant";
-import { ChatOptions, LLMApi, MultimodalContent } from "../api";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-import { getClientConfig } from "@/app/config/client";
-import { DEFAULT_API_HOST } from "@/app/constant";
-import { RequestMessage } from "@/app/typing";
-import {
-  EventStreamContentType,
-  fetchEventSource,
-} from "@fortaine/fetch-event-source";
-
-import Locale from "../../locales";
-import { prettyObject } from "@/app/utils/format";
-import { getMessageTextContent, isVisionModel } from "@/app/utils";
-
-export type MultiBlockContent = {
-  type: "image" | "text";
-  source?: {
-    type: string;
-    media_type: string;
-    data: string;
-  };
-  text?: string;
-};
-
-export type AnthropicMessage = {
-  role: (typeof ClaudeMapper)[keyof typeof ClaudeMapper];
-  content: string | MultiBlockContent[];
-};
-
-export interface AnthropicChatRequest {
-  model: string; // The model that will complete your prompt.
-  messages: AnthropicMessage[]; // The prompt that you want Claude to complete.
-  max_tokens: number; // The maximum number of tokens to generate before stopping.
-  stop_sequences?: string[]; // Sequences that will cause the model to stop generating completion text.
-  temperature?: number; // Amount of randomness injected into the response.
-  top_p?: number; // Use nucleus sampling.
-  top_k?: number; // Only sample from the top K options for each subsequent token.
-  metadata?: object; // An object describing metadata about the request.
-  stream?: boolean; // Whether to incrementally stream the response using server-sent events.
-}
-
-export interface ChatRequest {
-  model: string; // The model that will complete your prompt.
-  prompt: string; // The prompt that you want Claude to complete.
-  max_tokens_to_sample: number; // The maximum number of tokens to generate before stopping.
-  stop_sequences?: string[]; // Sequences that will cause the model to stop generating completion text.
-  temperature?: number; // Amount of randomness injected into the response.
-  top_p?: number; // Use nucleus sampling.
-  top_k?: number; // Only sample from the top K options for each subsequent token.
-  metadata?: object; // An object describing metadata about the request.
-  stream?: boolean; // Whether to incrementally stream the response using server-sent events.
-}
-
-export interface ChatResponse {
-  completion: string;
-  stop_reason: "stop_sequence" | "max_tokens";
-  model: string;
-}
-
-export type ChatStreamResponse = ChatResponse & {
-  stop?: string;
-  log_id: string;
-};
-
-const ClaudeMapper = {
-  assistant: "assistant",
-  user: "user",
-  system: "user",
-} as const;
-
-const keys = ["claude-2, claude-instant-1"];
-
-export class ClaudeApi implements LLMApi {
-  extractMessage(res: any) {
-    console.log("[Response] claude response: ", res);
-
-    return res?.content?.[0]?.text;
-  }
-  async chat(options: ChatOptions): Promise<void> {
-    const visionModel = isVisionModel(options.config.model);
-
-    const accessStore = useAccessStore.getState();
-
-    const shouldStream = !!options.config.stream;
-
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-
-    const messages = [...options.messages];
-
-    const keys = ["system", "user"];
-
-    // roles must alternate between "user" and "assistant" in claude, so add a fake assistant message between two user messages
-    for (let i = 0; i < messages.length - 1; i++) {
-      const message = messages[i];
-      const nextMessage = messages[i + 1];
-
-      if (keys.includes(message.role) && keys.includes(nextMessage.role)) {
-        messages[i] = [
-          message,
-          {
-            role: "assistant",
-            content: ";",
-          },
-        ] as any;
-      }
-    }
-
-    const prompt = messages
-      .flat()
-      .filter((v) => {
-        if (!v.content) return false;
-        if (typeof v.content === "string" && !v.content.trim()) return false;
-        return true;
-      })
-      .map((v) => {
-        const { role, content } = v;
-        const insideRole = ClaudeMapper[role] ?? "user";
-
-        if (!visionModel || typeof content === "string") {
-          return {
-            role: insideRole,
-            content: getMessageTextContent(v),
-          };
-        }
-        return {
-          role: insideRole,
-          content: content
-            .filter((v) => v.image_url || v.text)
-            .map(({ type, text, image_url }) => {
-              if (type === "text") {
-                return {
-                  type,
-                  text: text!,
-                };
-              }
-              const { url = "" } = image_url || {};
-              const colonIndex = url.indexOf(":");
-              const semicolonIndex = url.indexOf(";");
-              const comma = url.indexOf(",");
-
-              const mimeType = url.slice(colonIndex + 1, semicolonIndex);
-              const encodeType = url.slice(semicolonIndex + 1, comma);
-              const data = url.slice(comma + 1);
-
-              return {
-                type: "image" as const,
-                source: {
-                  type: encodeType,
-                  media_type: mimeType,
-                  data,
-                },
-              };
-            }),
-        };
-      });
-
-    const requestBody: AnthropicChatRequest = {
-      messages: prompt,
-      stream: shouldStream,
-
-      model: modelConfig.model,
-      max_tokens: modelConfig.max_tokens,
-      temperature: modelConfig.temperature,
-      top_p: modelConfig.top_p,
-      // top_k: modelConfig.top_k,
-      top_k: 5,
-    };
-
-    const path = this.path(Anthropic.ChatPath);
-
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    const payload = {
-      method: "POST",
-      body: JSON.stringify(requestBody),
-      signal: controller.signal,
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        "x-api-key": accessStore.anthropicApiKey,
-        "anthropic-version": accessStore.anthropicApiVersion,
-        Authorization: getAuthKey(accessStore.anthropicApiKey),
-      },
-    };
-
-    if (shouldStream) {
-      try {
-        const context = {
-          text: "",
-          finished: false,
-        };
-
-        const finish = () => {
-          if (!context.finished) {
-            options.onFinish(context.text);
-            context.finished = true;
-          }
-        };
-
-        controller.signal.onabort = finish;
-        fetchEventSource(path, {
-          ...payload,
-          async onopen(res) {
-            const contentType = res.headers.get("content-type");
-            console.log("response content type: ", contentType);
-
-            if (contentType?.startsWith("text/plain")) {
-              context.text = await res.clone().text();
-              return finish();
-            }
-
-            if (
-              !res.ok ||
-              !res.headers
-                .get("content-type")
-                ?.startsWith(EventStreamContentType) ||
-              res.status !== 200
-            ) {
-              const responseTexts = [context.text];
-              let extraInfo = await res.clone().text();
-              try {
-                const resJson = await res.clone().json();
-                extraInfo = prettyObject(resJson);
-              } catch {}
-
-              if (res.status === 401) {
-                responseTexts.push(Locale.Error.Unauthorized);
-              }
-
-              if (extraInfo) {
-                responseTexts.push(extraInfo);
-              }
-
-              context.text = responseTexts.join("\n\n");
-
-              return finish();
-            }
-          },
-          onmessage(msg) {
-            let chunkJson:
-              | undefined
-              | {
-                  type: "content_block_delta" | "content_block_stop";
-                  delta?: {
-                    type: "text_delta";
-                    text: string;
-                  };
-                  index: number;
-                };
-            try {
-              chunkJson = JSON.parse(msg.data);
-            } catch (e) {
-              console.error("[Response] parse error", msg.data);
-            }
-
-            if (!chunkJson || chunkJson.type === "content_block_stop") {
-              return finish();
-            }
-
-            const { delta } = chunkJson;
-            if (delta?.text) {
-              context.text += delta.text;
-              options.onUpdate?.(context.text, delta.text);
-            }
-          },
-          onclose() {
-            finish();
-          },
-          onerror(e) {
-            options.onError?.(e);
-            throw e;
-          },
-          openWhenHidden: true,
-        });
-      } catch (e) {
-        console.error("failed to chat", e);
-        options.onError?.(e as Error);
-      }
-    } else {
-      try {
-        controller.signal.onabort = () => options.onFinish("");
-
-        const res = await fetch(path, payload);
-        const resJson = await res.json();
-
-        const message = this.extractMessage(resJson);
-        options.onFinish(message);
-      } catch (e) {
-        console.error("failed to chat", e);
-        options.onError?.(e as Error);
-      }
-    }
-  }
-  async usage() {
-    return {
-      used: 0,
-      total: 0,
-    };
-  }
-  async models() {
-    // const provider = {
-    //   id: "anthropic",
-    //   providerName: "Anthropic",
-    //   providerType: "anthropic",
-    // };
-
-    return [
-      // {
-      //   name: "claude-instant-1.2",
-      //   available: true,
-      //   provider,
-      // },
-      // {
-      //   name: "claude-2.0",
-      //   available: true,
-      //   provider,
-      // },
-      // {
-      //   name: "claude-2.1",
-      //   available: true,
-      //   provider,
-      // },
-      // {
-      //   name: "claude-3-opus-20240229",
-      //   available: true,
-      //   provider,
-      // },
-      // {
-      //   name: "claude-3-sonnet-20240229",
-      //   available: true,
-      //   provider,
-      // },
-      // {
-      //   name: "claude-3-haiku-20240307",
-      //   available: true,
-      //   provider,
-      // },
-    ];
-  }
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl: string = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.anthropicUrl;
-    }
-
-    // if endpoint is empty, use default endpoint
-    if (baseUrl.trim().length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-
-      baseUrl = isApp
-        ? DEFAULT_API_HOST + "/api/proxy/anthropic"
-        : ApiPath.Anthropic;
-    }
-
-    if (!baseUrl.startsWith("http") && !baseUrl.startsWith("/api")) {
-      baseUrl = "https://" + baseUrl;
-    }
-
-    baseUrl = trimEnd(baseUrl, "/");
-
-    return `${baseUrl}/${path}`;
-  }
-}
-
-function trimEnd(s: string, end = " ") {
-  if (end.length === 0) return s;
-
-  while (s.endsWith(end)) {
-    s = s.slice(0, -end.length);
-  }
-
-  return s;
-}
-
-function bearer(value: string) {
-  return `Bearer ${value.trim()}`;
-}
-
-function getAuthKey(apiKey = "") {
-  const accessStore = useAccessStore.getState();
-  const isApp = !!getClientConfig()?.isApp;
-  let authKey = "";
-
-  if (apiKey) {
-    // use user's api key first
-    authKey = bearer(apiKey);
-  } else if (
-    accessStore.enabledAccessControl() &&
-    !isApp &&
-    !!accessStore.accessCode
-  ) {
-    // or use access code
-    authKey = bearer(ACCESS_CODE_PREFIX + accessStore.accessCode);
-  }
-
-  return authKey;
-}
--- a/app/client/platforms/google.ts
+++ b/app/client/platforms/google.ts
@@ -1,284 +0,0 @@
-import { Google, REQUEST_TIMEOUT_MS } from "@/app/constant";
-import { ChatOptions, getHeaders, LLMApi, LLMModel, LLMUsage } from "../api";
-import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";
-import { getClientConfig } from "@/app/config/client";
-import { DEFAULT_API_HOST } from "@/app/constant";
-import {
-  getMessageTextContent,
-  getMessageImages,
-  isVisionModel,
-} from "@/app/utils";
-
-export class GeminiProApi implements LLMApi {
-  extractMessage(res: any) {
-    console.log("[Response] gemini-pro response: ", res);
-
-    return (
-      res?.candidates?.at(0)?.content?.parts.at(0)?.text ||
-      res?.error?.message ||
-      ""
-    );
-  }
-  async chat(options: ChatOptions): Promise<void> {
-    // const apiClient = this;
-    const visionModel = isVisionModel(options.config.model);
-    let multimodal = false;
-    const messages = options.messages.map((v) => {
-      let parts: any[] = [{ text: getMessageTextContent(v) }];
-      if (visionModel) {
-        const images = getMessageImages(v);
-        if (images.length > 0) {
-          multimodal = true;
-          parts = parts.concat(
-            images.map((image) => {
-              const imageType = image.split(";")[0].split(":")[1];
-              const imageData = image.split(",")[1];
-              return {
-                inline_data: {
-                  mime_type: imageType,
-                  data: imageData,
-                },
-              };
-            }),
-          );
-        }
-      }
-      return {
-        role: v.role.replace("assistant", "model").replace("system", "user"),
-        parts: parts,
-      };
-    });
-
-    // google requires that role in neighboring messages must not be the same
-    for (let i = 0; i < messages.length - 1; ) {
-      // Check if current and next item both have the role "model"
-      if (messages[i].role === messages[i + 1].role) {
-        // Concatenate the 'parts' of the current and next item
-        messages[i].parts = messages[i].parts.concat(messages[i + 1].parts);
-        // Remove the next item
-        messages.splice(i + 1, 1);
-      } else {
-        // Move to the next item
-        i++;
-      }
-    }
-    // if (visionModel && messages.length > 1) {
-    //   options.onError?.(new Error("Multiturn chat is not enabled for models/gemini-pro-vision"));
-    // }
-    const modelConfig = {
-      ...useAppConfig.getState().modelConfig,
-      ...useChatStore.getState().currentSession().mask.modelConfig,
-      ...{
-        model: options.config.model,
-      },
-    };
-    const requestPayload = {
-      contents: messages,
-      generationConfig: {
-        // stopSequences: [
-        //   "Title"
-        // ],
-        temperature: modelConfig.temperature,
-        maxOutputTokens: modelConfig.max_tokens,
-        topP: modelConfig.top_p,
-        // "topK": modelConfig.top_k,
-      },
-      safetySettings: [
-        {
-          category: "HARM_CATEGORY_HARASSMENT",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-        {
-          category: "HARM_CATEGORY_HATE_SPEECH",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-        {
-          category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-        {
-          category: "HARM_CATEGORY_DANGEROUS_CONTENT",
-          threshold: "BLOCK_ONLY_HIGH",
-        },
-      ],
-    };
-
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.googleUrl;
-    }
-
-    const isApp = !!getClientConfig()?.isApp;
-
-    let shouldStream = !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-    try {
-      let googleChatPath = visionModel
-        ? Google.VisionChatPath(modelConfig.model)
-        : Google.ChatPath(modelConfig.model);
-      let chatPath = this.path(googleChatPath);
-
-      // let baseUrl = accessStore.googleUrl;
-
-      if (!baseUrl) {
-        baseUrl = isApp
-          ? DEFAULT_API_HOST + "/api/proxy/google/" + googleChatPath
-          : chatPath;
-      }
-
-      if (isApp) {
-        baseUrl += `?key=${accessStore.googleApiKey}`;
-      }
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // make a fetch request
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        REQUEST_TIMEOUT_MS,
-      );
-      if (shouldStream) {
-        let responseText = "";
-        let remainText = "";
-        let finished = false;
-
-        let existingTexts: string[] = [];
-        const finish = () => {
-          finished = true;
-          options.onFinish(existingTexts.join(""));
-        };
-
-        // animate response to make it looks smooth
-        function animateResponseText() {
-          if (finished || controller.signal.aborted) {
-            responseText += remainText;
-            finish();
-            return;
-          }
-
-          if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-            const fetchText = remainText.slice(0, fetchCount);
-            responseText += fetchText;
-            remainText = remainText.slice(fetchCount);
-            options.onUpdate?.(responseText, fetchText);
-          }
-
-          requestAnimationFrame(animateResponseText);
-        }
-
-        // start animaion
-        animateResponseText();
-
-        fetch(
-          baseUrl.replace("generateContent", "streamGenerateContent"),
-          chatPayload,
-        )
-          .then((response) => {
-            const reader = response?.body?.getReader();
-            const decoder = new TextDecoder();
-            let partialData = "";
-
-            return reader?.read().then(function processText({
-              done,
-              value,
-            }): Promise<any> {
-              if (done) {
-                if (response.status !== 200) {
-                  try {
-                    let data = JSON.parse(ensureProperEnding(partialData));
-                    if (data && data[0].error) {
-                      options.onError?.(new Error(data[0].error.message));
-                    } else {
-                      options.onError?.(new Error("Request failed"));
-                    }
-                  } catch (_) {
-                    options.onError?.(new Error("Request failed"));
-                  }
-                }
-
-                console.log("Stream complete");
-                // options.onFinish(responseText + remainText);
-                finished = true;
-                return Promise.resolve();
-              }
-
-              partialData += decoder.decode(value, { stream: true });
-
-              try {
-                let data = JSON.parse(ensureProperEnding(partialData));
-
-                const textArray = data.reduce(
-                  (acc: string[], item: { candidates: any[] }) => {
-                    const texts = item.candidates.map((candidate) =>
-                      candidate.content.parts
-                        .map((part: { text: any }) => part.text)
-                        .join(""),
-                    );
-                    return acc.concat(texts);
-                  },
-                  [],
-                );
-
-                if (textArray.length > existingTexts.length) {
-                  const deltaArray = textArray.slice(existingTexts.length);
-                  existingTexts = textArray;
-                  remainText += deltaArray.join("");
-                }
-              } catch (error) {
-                // console.log("[Response Animation] error: ", error,partialData);
-                // skip error message when parsing json
-              }
-
-              return reader.read().then(processText);
-            });
-          })
-          .catch((error) => {
-            console.error("Error:", error);
-          });
-      } else {
-        const res = await fetch(baseUrl, chatPayload);
-        clearTimeout(requestTimeoutId);
-        const resJson = await res.json();
-        if (resJson?.promptFeedback?.blockReason) {
-          // being blocked
-          options.onError?.(
-            new Error(
-              "Message is being blocked for reason: " +
-                resJson.promptFeedback.blockReason,
-            ),
-          );
-        }
-        const message = this.extractMessage(resJson);
-        options.onFinish(message);
-      }
-    } catch (e) {
-      console.log("[Request] failed to make a chat request", e);
-      options.onError?.(e as Error);
-    }
-  }
-  usage(): Promise<LLMUsage> {
-    throw new Error("Method not implemented.");
-  }
-  async models(): Promise<LLMModel[]> {
-    return [];
-  }
-  path(path: string): string {
-    return "/api/google/" + path;
-  }
-}
-
-function ensureProperEnding(str: string) {
-  if (str.startsWith("[") && !str.endsWith("]")) {
-    return str + "]";
-  }
-  return str;
-}
--- a/app/client/platforms/openai.ts
+++ b/app/client/platforms/openai.ts
@@ -1,4 +1,3 @@
-"use client";
 import {
  ApiPath,
  DEFAULT_API_HOST,
@@ -9,14 +8,7 @@ import {
 } from "@/app/constant";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";

-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  LLMUsage,
-  MultimodalContent,
-} from "../api";
+import { ChatOptions, getHeaders, LLMApi, LLMModel, LLMUsage } from "../api";
 import Locale from "../../locales";
 import {
  EventStreamContentType,
@@ -25,11 +17,6 @@ import {
 import { prettyObject } from "@/app/utils/format";
 import { getClientConfig } from "@/app/config/client";
 import { makeAzurePath } from "@/app/azure";
-import {
-  getMessageTextContent,
-  getMessageImages,
-  isVisionModel,
-} from "@/app/utils";

 export interface OpenAIListModelResponse {
  object: string;
@@ -40,49 +27,25 @@ export interface OpenAIListModelResponse {
  }>;
 }

-interface RequestPayload {
-  messages: {
-    role: "system" | "user" | "assistant";
-    content: string | MultimodalContent[];
-  }[];
-  stream?: boolean;
-  model: string;
-  temperature: number;
-  presence_penalty: number;
-  frequency_penalty: number;
-  top_p: number;
-  max_tokens?: number;
-}
-
 export class ChatGPTApi implements LLMApi {
  private disableListModels = true;

  path(path: string): string {
    const accessStore = useAccessStore.getState();

-    let baseUrl = "";
+    const isAzure = accessStore.provider === ServiceProvider.Azure;

-    if (accessStore.useCustomConfig) {
-      const isAzure = accessStore.provider === ServiceProvider.Azure;
-
-      if (isAzure && !accessStore.isValidAzure()) {
-        throw Error(
-          "incomplete azure config, please check it in your settings page",
-        );
-      }
-
-      if (isAzure) {
-        path = makeAzurePath(path, accessStore.azureApiVersion);
-      }
-
-      baseUrl = isAzure ? accessStore.azureUrl : accessStore.openaiUrl;
+    if (isAzure && !accessStore.isValidAzure()) {
+      throw Error(
+        "incomplete azure config, please check it in your settings page",
+      );
    }

+    let baseUrl = isAzure ? accessStore.azureUrl : accessStore.openaiUrl;
+
    if (baseUrl.length === 0) {
      const isApp = !!getClientConfig()?.isApp;
-      baseUrl = isApp
-        ? DEFAULT_API_HOST + "/proxy" + ApiPath.OpenAI
-        : ApiPath.OpenAI;
+      baseUrl = isApp ? DEFAULT_API_HOST : ApiPath.OpenAI;
    }

    if (baseUrl.endsWith("/")) {
@@ -92,7 +55,9 @@ export class ChatGPTApi implements LLMApi {
      baseUrl = "https://" + baseUrl;
    }

-    console.log("[Proxy Endpoint] ", baseUrl, path);
+    if (isAzure) {
+      path = makeAzurePath(path, accessStore.azureApiVersion);
+    }

    return [baseUrl, path].join("/");
  }
@@ -102,10 +67,9 @@ export class ChatGPTApi implements LLMApi {
  }

  async chat(options: ChatOptions) {
-    const visionModel = isVisionModel(options.config.model);
    const messages = options.messages.map((v) => ({
      role: v.role,
-      content: visionModel ? v.content : getMessageTextContent(v),
+      content: v.content,
    }));

    const modelConfig = {
@@ -116,7 +80,7 @@ export class ChatGPTApi implements LLMApi {
      },
    };

-    const requestPayload: RequestPayload = {
+    const requestPayload = {
      messages,
      stream: options.config.stream,
      model: modelConfig.model,
@@ -128,11 +92,6 @@ export class ChatGPTApi implements LLMApi {
      // Please do not ask me why not send max_tokens, no reason, this param is just shit, I dont want to explain anymore.
    };

-    // add max_tokens to vision model
-    if (visionModel) {
-      requestPayload["max_tokens"] = Math.max(modelConfig.max_tokens, 4000);
-    }
-
    console.log("[Request] openai payload: ", requestPayload);

    const shouldStream = !!options.config.stream;
@@ -156,38 +115,12 @@ export class ChatGPTApi implements LLMApi {

      if (shouldStream) {
        let responseText = "";
-        let remainText = "";
        let finished = false;

-        // animate response to make it looks smooth
-        function animateResponseText() {
-          if (finished || controller.signal.aborted) {
-            responseText += remainText;
-            console.log("[Response Animation] finished");
-            if (responseText?.length === 0) {
-              options.onError?.(new Error("empty response from server"));
-            }
-            return;
-          }
-
-          if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
-            const fetchText = remainText.slice(0, fetchCount);
-            responseText += fetchText;
-            remainText = remainText.slice(fetchCount);
-            options.onUpdate?.(responseText, fetchText);
-          }
-
-          requestAnimationFrame(animateResponseText);
-        }
-
-        // start animaion
-        animateResponseText();
-
        const finish = () => {
          if (!finished) {
+            options.onFinish(responseText);
            finished = true;
-            options.onFinish(responseText + remainText);
          }
        };

@@ -241,31 +174,20 @@ export class ChatGPTApi implements LLMApi {
            }
            const text = msg.data;
            try {
-              const json = JSON.parse(text);
-              const choices = json.choices as Array<{
-                delta: { content: string };
-              }>;
-              const delta = choices[0]?.delta?.content;
-              const textmoderation = json?.prompt_filter_results;
-
+              const json = JSON.parse(text) as {
+                choices: Array<{
+                  delta: {
+                    content: string;
+                  };
+                }>;
+              };
+              const delta = json.choices[0]?.delta?.content;
              if (delta) {
-                remainText += delta;
-              }
-
-              if (
-                textmoderation &&
-                textmoderation.length > 0 &&
-                ServiceProvider.Azure
-              ) {
-                const contentFilterResults =
-                  textmoderation[0]?.content_filter_results;
-                console.log(
-                  `[${ServiceProvider.Azure}] [Text Moderation] flagged categories result:`,
-                  contentFilterResults,
-                );
+                responseText += delta;
+                options.onUpdate?.(responseText, delta);
              }
            } catch (e) {
-              console.error("[Request] parse error", text, msg);
+              console.error("[Request] parse error", text);
            }
          },
          onclose() {
@@ -379,12 +301,30 @@ export class ChatGPTApi implements LLMApi {
    return chatModels.map((m) => ({
      name: m.id,
      available: true,
-      provider: {
-        id: "openai",
-        providerName: "OpenAI",
-        providerType: "openai",
-      },
    }));
  }
+
+  public cache: Record<string, ArrayBuffer> = {};
+
+  async speech(input: string): Promise<ArrayBuffer> {
+    if (this.cache[input]) return this.cache[input].slice(0);
+
+    const res = await fetch(this.path(OpenaiPath.Speech), {
+      method: "POST",
+      headers: {
+        ...getHeaders(),
+      },
+      body: JSON.stringify({
+        model: "tts-1",
+        input: input,
+        voice: "onyx",
+      }),
+    });
+
+    const arrayBuffer = await res.arrayBuffer();
+    this.cache[input] = arrayBuffer.slice(0);
+    return arrayBuffer;
+  }
 }
+
 export { OpenaiPath };
--- a/app/components/ActionsBar/index.tsx
+++ b/app/components/ActionsBar/index.tsx
@@ -1,123 +0,0 @@
-import { isValidElement } from "react";
-
-type IconMap = {
-  active?: JSX.Element;
-  inactive?: JSX.Element;
-  mobileActive?: JSX.Element;
-  mobileInactive?: JSX.Element;
-};
-interface Action {
-  id: string;
-  title?: string;
-  icons: JSX.Element | IconMap;
-  className?: string;
-  onClick?: () => void;
-  activeClassName?: string;
-}
-
-type Groups = {
-  normal: string[][];
-  mobile: string[][];
-};
-
-export interface ActionsBarProps {
-  actionsShema: Action[];
-  onSelect?: (id: string) => void;
-  selected?: string;
-  groups: string[][] | Groups;
-  className?: string;
-  inMobile?: boolean;
-}
-
-export default function ActionsBar(props: ActionsBarProps) {
-  const { actionsShema, onSelect, selected, groups, className, inMobile } =
-    props;
-
-  const handlerClick =
-    (action: Action) => (e: { preventDefault: () => void }) => {
-      e.preventDefault();
-      if (action.onClick) {
-        action.onClick();
-      }
-      if (selected !== action.id) {
-        onSelect?.(action.id);
-      }
-    };
-
-  const internalGroup = Array.isArray(groups)
-    ? groups
-    : inMobile
-    ? groups.mobile
-    : groups.normal;
-
-  const content = internalGroup.reduce((res, group, ind, arr) => {
-    res.push(
-      ...group.map((i) => {
-        const action = actionsShema.find((a) => a.id === i);
-        if (!action) {
-          return <></>;
-        }
-
-        const { icons } = action;
-        let activeIcon, inactiveIcon, mobileActiveIcon, mobileInactiveIcon;
-
-        if (isValidElement(icons)) {
-          activeIcon = icons;
-          inactiveIcon = icons;
-          mobileActiveIcon = icons;
-          mobileInactiveIcon = icons;
-        } else {
-          activeIcon = (icons as IconMap).active;
-          inactiveIcon = (icons as IconMap).inactive;
-          mobileActiveIcon = (icons as IconMap).mobileActive;
-          mobileInactiveIcon = (icons as IconMap).mobileInactive;
-        }
-
-        if (inMobile) {
-          return (
-            <div
-              key={action.id}
-              className={` cursor-pointer shrink-1 grow-0 basis-[${
-                (100 - 1) / arr.length
-              }%] flex flex-col items-center justify-around gap-0.5 py-1.5
-                        ${
-                          selected === action.id
-                            ? "text-text-sidebar-tab-mobile-active"
-                            : "text-text-sidebar-tab-mobile-inactive"
-                        }
-                    `}
-              onClick={handlerClick(action)}
-            >
-              {selected === action.id ? mobileActiveIcon : mobileInactiveIcon}
-              <div className="  leading-3 text-sm-mobile-tab h-3 font-common w-[100%]">
-                {action.title || " "}
-              </div>
-            </div>
-          );
-        }
-
-        return (
-          <div
-            key={action.id}
-            className={`cursor-pointer p-3 ${
-              selected === action.id
-                ? `!bg-actions-bar-btn-default ${action.activeClassName}`
-                : "bg-transparent"
-            } rounded-md items-center ${
-              action.className
-            } transition duration-300 ease-in-out`}
-            onClick={handlerClick(action)}
-          >
-            {selected === action.id ? activeIcon : inactiveIcon}
-          </div>
-        );
-      }),
-    );
-    if (ind < arr.length - 1) {
-      res.push(<div key={String(ind)} className=" flex-1"></div>);
-    }
-    return res;
-  }, [] as JSX.Element[]);
-
-  return <div className={`flex items-center ${className} `}>{content}</div>;
-}
--- a/app/components/Btn/index.tsx
+++ b/app/components/Btn/index.tsx
@@ -1,78 +0,0 @@
-import * as React from "react";
-
-export type ButtonType = "primary" | "danger" | null;
-
-export interface BtnProps {
-  onClick?: () => void;
-  icon?: JSX.Element;
-  prefixIcon?: JSX.Element;
-  type?: ButtonType;
-  text?: React.ReactNode;
-  bordered?: boolean;
-  shadow?: boolean;
-  className?: string;
-  title?: string;
-  disabled?: boolean;
-  tabIndex?: number;
-  autoFocus?: boolean;
-}
-
-export default function Btn(props: BtnProps) {
-  const {
-    onClick,
-    icon,
-    type,
-    text,
-    className,
-    title,
-    disabled,
-    tabIndex,
-    autoFocus,
-    prefixIcon,
-  } = props;
-
-  let btnClassName;
-
-  switch (type) {
-    case "primary":
-      btnClassName = `${
-        disabled
-          ? "bg-primary-btn-disabled dark:opacity-30 dark:text-primary-btn-disabled-dark"
-          : "bg-primary-btn shadow-btn"
-      } text-text-btn-primary `;
-      break;
-    case "danger":
-      btnClassName = `bg-danger-btn text-text-btn-danger hover:bg-hovered-danger-btn`;
-      break;
-    default:
-      btnClassName = `bg-default-btn text-text-btn-default hover:bg-hovered-btn`;
-  }
-
-  return (
-    <button
-      className={`
-        ${className ?? ""} 
-        py-2 px-3 flex items-center justify-center gap-1 rounded-action-btn transition-all duration-300 select-none
-        ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
-        ${btnClassName} 
-        follow-parent-svg
-      `}
-      onClick={onClick}
-      title={title}
-      disabled={disabled}
-      role="button"
-      tabIndex={tabIndex}
-      autoFocus={autoFocus}
-    >
-      {prefixIcon && (
-        <div className={`flex items-center justify-center`}>{prefixIcon}</div>
-      )}
-      {text && (
-        <div className={`font-common text-sm-title leading-4 line-clamp-1`}>
-          {text}
-        </div>
-      )}
-      {icon && <div className={`flex items-center justify-center`}>{icon}</div>}
-    </button>
-  );
-}
--- a/app/components/Card/index.tsx
+++ b/app/components/Card/index.tsx
@@ -1,32 +0,0 @@
-import { ReactNode } from "react";
-
-export interface CardProps {
-  className?: string;
-  children?: ReactNode;
-  title?: ReactNode;
-}
-
-export default function Card(props: CardProps) {
-  const { className, children, title } = props;
-
-  return (
-    <>
-      {title && (
-        <div
-          className={`
-            capitalize !font-semibold text-sm-mobile font-weight-setting-card-title text-text-card-title
-            mb-3
-
-            ml-3
-            md:ml-4  
-          `}
-        >
-          {title}
-        </div>
-      )}
-      <div className={`px-4 py-1 rounded-lg bg-card ${className}`}>
-        {children}
-      </div>
-    </>
-  );
-}
--- a/app/components/GlobalLoading/index.tsx
+++ b/app/components/GlobalLoading/index.tsx
@@ -1,18 +0,0 @@
-import BotIcon from "@/app/icons/bot.svg";
-import LoadingIcon from "@/app/icons/three-dots.svg";
-
-export default function GloablLoading({
-  noLogo,
-}: {
-  noLogo?: boolean;
-  useSkeleton?: boolean;
-}) {
-  return (
-    <div
-      className={`flex flex-col justify-center items-center w-[100%] h-[100%]`}
-    >
-      {!noLogo && <BotIcon />}
-      <LoadingIcon />
-    </div>
-  );
-}
--- a/app/components/HoverPopover/index.tsx
+++ b/app/components/HoverPopover/index.tsx
@@ -1,39 +0,0 @@
-import * as HoverCard from "@radix-ui/react-hover-card";
-import { ComponentProps } from "react";
-
-export interface PopoverProps {
-  content?: JSX.Element | string;
-  children?: JSX.Element;
-  arrowClassName?: string;
-  popoverClassName?: string;
-  noArrow?: boolean;
-  align?: ComponentProps<typeof HoverCard.Content>["align"];
-  openDelay?: number;
-}
-
-export default function HoverPopover(props: PopoverProps) {
-  const {
-    content,
-    children,
-    arrowClassName,
-    popoverClassName,
-    noArrow = false,
-    align,
-    openDelay = 300,
-  } = props;
-  return (
-    <HoverCard.Root openDelay={openDelay}>
-      <HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
-      <HoverCard.Portal>
-        <HoverCard.Content
-          className={`${popoverClassName}`}
-          sideOffset={5}
-          align={align}
-        >
-          {content}
-          {!noArrow && <HoverCard.Arrow className={`${arrowClassName}`} />}
-        </HoverCard.Content>
-      </HoverCard.Portal>
-    </HoverCard.Root>
-  );
-}
--- a/app/components/Imgs/index.tsx
+++ b/app/components/Imgs/index.tsx
@@ -1,42 +0,0 @@
-import { CSSProperties } from "react";
-import { getMessageImages } from "@/app/utils";
-import { RequestMessage } from "@/app/client/api";
-
-interface ImgsProps {
-  message: RequestMessage;
-}
-
-export default function Imgs(props: ImgsProps) {
-  const { message } = props;
-  const imgSrcs = getMessageImages(message);
-
-  if (imgSrcs.length < 1) {
-    return <></>;
-  }
-
-  const imgVars = {
-    "--imgs-width": `calc(var(--max-message-width) - ${
-      imgSrcs.length - 1
-    }*0.25rem)`,
-    "--img-width": `calc(var(--imgs-width)/ ${imgSrcs.length})`,
-  };
-
-  return (
-    <div
-      className={`w-[100%] mt-[0.625rem] flex gap-1`}
-      style={imgVars as CSSProperties}
-    >
-      {imgSrcs.map((image, index) => {
-        return (
-          <div
-            key={index}
-            className="flex-1 min-w-[var(--img-width)] pb-[var(--img-width)] object-cover bg-cover bg-no-repeat bg-center box-border rounded-chat-img"
-            style={{
-              backgroundImage: `url(${image})`,
-            }}
-          />
-        );
-      })}
-    </div>
-  );
-}
--- a/app/components/Input/index.tsx
+++ b/app/components/Input/index.tsx
@@ -1,88 +0,0 @@
-import PasswordVisible from "@/app/icons/passwordVisible.svg";
-import PasswordInvisible from "@/app/icons/passwordInvisible.svg";
-import {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  useContext,
-  useLayoutEffect,
-  useState,
-} from "react";
-import List, { ListContext } from "@/app/components/List";
-
-export interface CommonInputProps
-  extends Omit<
-    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-    "onChange" | "type" | "value"
-  > {
-  className?: string;
-}
-
-export interface NumberInputProps {
-  onChange?: (v: number) => void;
-  type?: "number";
-  value?: number;
-}
-
-export interface TextInputProps {
-  onChange?: (v: string) => void;
-  type?: "text" | "password";
-  value?: string;
-}
-
-export interface InputProps {
-  onChange?: ((v: string) => void) | ((v: number) => void);
-  type?: "text" | "password" | "number";
-  value?: string | number;
-}
-
-export default function Input(
-  props: CommonInputProps & NumberInputProps,
-): JSX.Element;
-export default function Input(
-  props: CommonInputProps & TextInputProps,
-): JSX.Element;
-export default function Input(props: CommonInputProps & InputProps) {
-  const { value, type = "text", onChange, className, ...rest } = props;
-  const [show, setShow] = useState(false);
-
-  const { inputClassName } = useContext(ListContext);
-
-  const internalType = (show && "text") || type;
-
-  const { update, handleValidate } = useContext(List.ListContext);
-
-  useLayoutEffect(() => {
-    update?.({ type: "input" });
-  }, []);
-
-  useLayoutEffect(() => {
-    handleValidate?.(value);
-  }, [value]);
-
-  return (
-    <div
-      className={` group/input w-[100%] rounded-chat-input bg-input transition-colors duration-300 ease-in-out flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}
-    >
-      <input
-        {...rest}
-        className=" overflow-hidden text-text-input text-sm-title leading-input outline-none flex-1 group-hover/input:bg-input-input-ele-hover"
-        type={internalType}
-        value={value}
-        onChange={(e) => {
-          if (type === "number") {
-            const v = e.currentTarget.valueAsNumber;
-            (onChange as NumberInputProps["onChange"])?.(v);
-          } else {
-            const v = e.currentTarget.value;
-            (onChange as TextInputProps["onChange"])?.(v);
-          }
-        }}
-      />
-      {type == "password" && (
-        <div className=" cursor-pointer" onClick={() => setShow((pre) => !pre)}>
-          {show ? <PasswordVisible /> : <PasswordInvisible />}
-        </div>
-      )}
-    </div>
-  );
-}
--- a/app/components/List/index.tsx
+++ b/app/components/List/index.tsx
@@ -1,157 +0,0 @@
-import {
-  ReactNode,
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-} from "react";
-
-interface WidgetStyle {
-  selectClassName?: string;
-  inputClassName?: string;
-  rangeClassName?: string;
-  switchClassName?: string;
-  inputNextLine?: boolean;
-  rangeNextLine?: boolean;
-}
-
-interface ChildrenMeta {
-  type?: "unknown" | "input" | "range";
-  error?: string;
-}
-
-export interface ListProps {
-  className?: string;
-  children?: ReactNode;
-  id?: string;
-  isMobileScreen?: boolean;
-  widgetStyle?: WidgetStyle;
-}
-
-type Error =
-  | {
-      error: true;
-      message: string;
-    }
-  | {
-      error: false;
-    };
-
-export interface ListItemProps {
-  title: string;
-  subTitle?: string;
-  children?: JSX.Element | JSX.Element[];
-  className?: string;
-  onClick?: () => void;
-  nextline?: boolean;
-  validator?: (v: any) => Error | Promise<Error>;
-}
-
-export const ListContext = createContext<
-  {
-    isMobileScreen?: boolean;
-    update?: (m: ChildrenMeta) => void;
-    handleValidate?: (v: any) => void;
-  } & WidgetStyle
->({ isMobileScreen: false });
-
-export function ListItem(props: ListItemProps) {
-  const {
-    className = "",
-    onClick,
-    title,
-    subTitle,
-    children,
-    nextline,
-    validator,
-  } = props;
-
-  const context = useContext(ListContext);
-
-  const [childrenMeta, setMeta] = useState<ChildrenMeta>({});
-
-  const { inputNextLine, rangeNextLine } = context;
-
-  const { type, error } = childrenMeta;
-
-  let internalNextLine;
-
-  switch (type) {
-    case "input":
-      internalNextLine = !!(nextline || inputNextLine);
-      break;
-    case "range":
-      internalNextLine = !!(nextline || rangeNextLine);
-      break;
-    default:
-      internalNextLine = false;
-  }
-
-  const update = useCallback((m: ChildrenMeta) => {
-    setMeta((pre) => ({ ...pre, ...m }));
-  }, []);
-
-  const handleValidate = useCallback((v: any) => {
-    const insideValidator = validator || (() => {});
-
-    Promise.resolve(insideValidator(v)).then((result) => {
-      if (result && result.error) {
-        return update({
-          error: result.message,
-        });
-      }
-      update({
-        error: undefined,
-      });
-    });
-  }, []);
-
-  return (
-    <div
-      className={`relative after:h-[0.5px] after:bottom-0 after:w-[100%] after:left-0 after:absolute last:after:hidden after:bg-list-item-divider ${
-        internalNextLine ? "" : "flex gap-3"
-      } justify-between items-center px-0 py-2 md:py-3 ${className}`}
-      onClick={onClick}
-    >
-      <div className={`flex-1 flex flex-col justify-start gap-1`}>
-        <div className=" font-common text-sm-mobile font-weight-[500] line-clamp-1 text-text-list-title">
-          {title}
-        </div>
-        {subTitle && (
-          <div className={` text-sm text-text-list-subtitle`}>{subTitle}</div>
-        )}
-      </div>
-      <ListContext.Provider value={{ ...context, update, handleValidate }}>
-        <div
-          className={`${
-            internalNextLine ? "mt-[0.625rem]" : "max-w-[70%]"
-          } flex flex-col items-center justify-center`}
-        >
-          <div>{children}</div>
-          {!!error && (
-            <div className="text-text-btn-danger text-sm-mobile-tab mt-[0.3125rem] flex items-start w-[100%]">
-              <div className="">{error}</div>
-            </div>
-          )}
-        </div>
-      </ListContext.Provider>
-    </div>
-  );
-}
-
-function List(props: ListProps) {
-  const { className, children, id, widgetStyle } = props;
-  const { isMobileScreen } = useContext(ListContext);
-  return (
-    <ListContext.Provider value={{ isMobileScreen, ...widgetStyle }}>
-      <div className={`flex flex-col w-[100%] ${className}`} id={id}>
-        {children}
-      </div>
-    </ListContext.Provider>
-  );
-}
-
-List.ListItem = ListItem;
-List.ListContext = ListContext;
-
-export default List;
--- a/app/components/Loading/index.tsx
+++ b/app/components/Loading/index.tsx
@@ -1,35 +0,0 @@
-import BotIcon from "@/app/icons/bot.svg";
-import LoadingIcon from "@/app/icons/three-dots.svg";
-
-import { getCSSVar } from "@/app/utils";
-
-export default function Loading({
-  noLogo,
-  useSkeleton = true,
-}: {
-  noLogo?: boolean;
-  useSkeleton?: boolean;
-}) {
-  let theme;
-  if (typeof window !== "undefined") {
-    theme = getCSSVar("--default-container-bg");
-  }
-
-  return (
-    <div
-      className={`
-        flex flex-col justify-center items-center w-[100%] 
-        h-[100%]
-        md:my-2.5
-        md:ml-1
-        md:mr-2.5
-        md:rounded-md
-        md:h-[calc(100%-1.25rem)]
-        `}
-      style={{ background: useSkeleton ? theme : "" }}
-    >
-      {!noLogo && <BotIcon />}
-      <LoadingIcon />
-    </div>
-  );
-}
--- a/app/components/MenuLayout/index.tsx
+++ b/app/components/MenuLayout/index.tsx
@@ -1,115 +0,0 @@
-import {
-  DEFAULT_SIDEBAR_WIDTH,
-  MAX_SIDEBAR_WIDTH,
-  MIN_SIDEBAR_WIDTH,
-  Path,
-} from "@/app/constant";
-import useDrag from "@/app/hooks/useDrag";
-import useMobileScreen from "@/app/hooks/useMobileScreen";
-import { updateGlobalCSSVars } from "@/app/utils/client";
-import { ComponentType, useRef, useState } from "react";
-import { useAppConfig } from "@/app/store/config";
-
-export interface MenuWrapperInspectProps {
-  setExternalProps?: (v: Record<string, any>) => void;
-  setShowPanel?: (v: boolean) => void;
-  showPanel?: boolean;
-  [k: string]: any;
-}
-
-export default function MenuLayout<
-  ListComponentProps extends MenuWrapperInspectProps,
-  PanelComponentProps extends MenuWrapperInspectProps,
->(
-  ListComponent: ComponentType<ListComponentProps>,
-  PanelComponent: ComponentType<PanelComponentProps>,
-) {
-  return function MenuHood(props: ListComponentProps & PanelComponentProps) {
-    const [showPanel, setShowPanel] = useState(false);
-    const [externalProps, setExternalProps] = useState({});
-    const config = useAppConfig();
-
-    const isMobileScreen = useMobileScreen();
-
-    const startDragWidth = useRef(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
-    // drag side bar
-    const { onDragStart } = useDrag({
-      customToggle: () => {
-        config.update((config) => {
-          config.sidebarWidth = DEFAULT_SIDEBAR_WIDTH;
-        });
-      },
-      customDragMove: (nextWidth: number) => {
-        const { menuWidth } = updateGlobalCSSVars(nextWidth);
-
-        document.documentElement.style.setProperty(
-          "--menu-width",
-          `${menuWidth}px`,
-        );
-        config.update((config) => {
-          config.sidebarWidth = nextWidth;
-        });
-      },
-      customLimit: (x: number) =>
-        Math.max(
-          MIN_SIDEBAR_WIDTH,
-          Math.min(MAX_SIDEBAR_WIDTH, startDragWidth.current + x),
-        ),
-    });
-
-    return (
-      <div
-        className={`
-          w-[100%] relative bg-center
-          max-md:h-[100%]
-          md:flex md:my-2.5
-        `}
-      >
-        <div
-          className={`
-            flex flex-col px-6 
-            h-[100%] 
-            max-md:w-[100%] max-md:px-4 max-md:pb-4 max-md:flex-1
-            md:relative md:basis-sidebar  md:pb-6  md:rounded-md md:bg-menu
-          `}
-        >
-          <ListComponent
-            {...props}
-            setShowPanel={setShowPanel}
-            setExternalProps={setExternalProps}
-            showPanel={showPanel}
-          />
-        </div>
-        {!isMobileScreen && (
-          <div
-            className={`group/menu-dragger cursor-col-resize w-[0.25rem]  flex items-center justify-center`}
-            onPointerDown={(e) => {
-              startDragWidth.current = config.sidebarWidth;
-              onDragStart(e as any);
-            }}
-          >
-            <div className="w-[2px] opacity-0 group-hover/menu-dragger:opacity-100 bg-menu-dragger h-[100%] rounded-[2px]">
-              &nbsp;
-            </div>
-          </div>
-        )}
-        <div
-          className={`
-          md:flex-1 md:h-[100%] md:w-page
-          max-md:transition-all max-md:duration-300 max-md:absolute max-md:top-0 max-md:max-h-[100vh] max-md:w-[100%] ${
-            showPanel ? "max-md:left-0" : "max-md:left-[101%]"
-          } max-md:z-10
-        `}
-        >
-          <PanelComponent
-            {...props}
-            {...externalProps}
-            setShowPanel={setShowPanel}
-            setExternalProps={setExternalProps}
-            showPanel={showPanel}
-          />
-        </div>
-      </div>
-    );
-  };
-}
--- a/app/components/Modal/index.tsx
+++ b/app/components/Modal/index.tsx
@@ -1,352 +0,0 @@
-import React, { useLayoutEffect, useState } from "react";
-import { createRoot } from "react-dom/client";
-import * as AlertDialog from "@radix-ui/react-alert-dialog";
-import Btn, { BtnProps } from "@/app/components/Btn";
-
-import Warning from "@/app/icons/warning.svg";
-import Close from "@/app/icons/closeIcon.svg";
-
-export interface ModalProps {
-  onOk?: () => void;
-  onCancel?: () => void;
-  okText?: string;
-  cancelText?: string;
-  okBtnProps?: BtnProps;
-  cancelBtnProps?: BtnProps;
-  content?:
-    | React.ReactNode
-    | ((handlers: { close: () => void }) => JSX.Element);
-  title?: React.ReactNode;
-  visible?: boolean;
-  noFooter?: boolean;
-  noHeader?: boolean;
-  isMobile?: boolean;
-  closeble?: boolean;
-  type?: "modal" | "bottom-drawer";
-  headerBordered?: boolean;
-  modelClassName?: string;
-  onOpen?: (v: boolean) => void;
-  maskCloseble?: boolean;
-}
-
-export interface WarnProps
-  extends Omit<
-    ModalProps,
-    | "closeble"
-    | "isMobile"
-    | "noHeader"
-    | "noFooter"
-    | "onOk"
-    | "okBtnProps"
-    | "cancelBtnProps"
-    | "content"
-  > {
-  onOk?: () => Promise<void> | void;
-  content?: React.ReactNode;
-}
-
-export interface TriggerProps
-  extends Omit<ModalProps, "visible" | "onOk" | "onCancel"> {
-  children: JSX.Element;
-  className?: string;
-}
-
-const baseZIndex = 150;
-
-const Modal = (props: ModalProps) => {
-  const {
-    onOk,
-    onCancel,
-    okText,
-    cancelText,
-    content,
-    title,
-    visible,
-    noFooter,
-    noHeader,
-    closeble = true,
-    okBtnProps,
-    cancelBtnProps,
-    type = "modal",
-    headerBordered,
-    modelClassName,
-    onOpen,
-    maskCloseble = true,
-  } = props;
-
-  const [open, setOpen] = useState(!!visible);
-
-  const mergeOpen = visible ?? open;
-
-  const handleClose = () => {
-    setOpen(false);
-    onCancel?.();
-  };
-
-  const handleOk = () => {
-    setOpen(false);
-    onOk?.();
-  };
-
-  useLayoutEffect(() => {
-    onOpen?.(mergeOpen);
-  }, [mergeOpen]);
-
-  let layoutClassName = "";
-  let panelClassName = "";
-  let titleClassName = "";
-  let footerClassName = "";
-
-  switch (type) {
-    case "bottom-drawer":
-      layoutClassName = "fixed inset-0 flex flex-col w-[100%] bottom-0";
-      panelClassName =
-        "rounded-t-chat-model-select overflow-y-auto overflow-x-hidden";
-      titleClassName = "px-4 py-3";
-      footerClassName = "absolute w-[100%]";
-      break;
-    case "modal":
-    default:
-      layoutClassName =
-        "fixed inset-0 flex flex-col item-start top-0 left-[50vw] translate-x-[-50%] max-sm:w-modal-modal-type-mobile";
-      panelClassName = "rounded-lg px-6 sm:w-modal-modal-type";
-      titleClassName = "py-6 max-sm:pb-3";
-      footerClassName = "py-6";
-  }
-  const btnCommonClass = "px-4 py-2.5 rounded-md max-sm:flex-1";
-  const { className: okBtnClass } = okBtnProps || {};
-  const { className: cancelBtnClass } = cancelBtnProps || {};
-
-  return (
-    <AlertDialog.Root open={mergeOpen} onOpenChange={setOpen}>
-      <AlertDialog.Portal>
-        <AlertDialog.Overlay
-          className="bg-modal-mask fixed inset-0 animate-mask "
-          style={{ zIndex: baseZIndex - 1 }}
-          onClick={() => {
-            if (maskCloseble) {
-              handleClose();
-            }
-          }}
-        />
-        <AlertDialog.Content
-          className={`
-            ${layoutClassName}
-          `}
-          style={{ zIndex: baseZIndex - 1 }}
-        >
-          <div
-            className="flex-1"
-            onClick={() => {
-              if (maskCloseble) {
-                handleClose();
-              }
-            }}
-          >
-            &nbsp;
-          </div>
-          <div
-            className={`flex flex-col flex-0      
-              bg-moda-panel text-modal-panel    
-              ${modelClassName}
-              ${panelClassName}
-            `}
-          >
-            {!noHeader && (
-              <AlertDialog.Title
-                className={`
-                      flex items-center justify-between gap-3 font-common
-                      md:text-chat-header-title md:font-bold md:leading-5 
-                      ${
-                        headerBordered
-                          ? " border-b border-modal-header-bottom"
-                          : ""
-                      }
-                      ${titleClassName}
-                  `}
-              >
-                <div className="flex gap-3 justify-start flex-1 items-center text-text-modal-title text-chat-header-title">
-                  {title}
-                </div>
-                {closeble && (
-                  <div
-                    className="items-center"
-                    onClick={() => {
-                      handleClose();
-                    }}
-                  >
-                    <Close />
-                  </div>
-                )}
-              </AlertDialog.Title>
-            )}
-            <div className="flex-1 overflow-hidden text-text-modal-content text-sm-title">
-              {typeof content === "function"
-                ? content({
-                    close: () => {
-                      handleClose();
-                    },
-                  })
-                : content}
-            </div>
-            {!noFooter && (
-              <div
-                className={`
-                  flex gap-3 sm:justify-end max-sm:justify-between
-                  ${footerClassName}
-                  `}
-              >
-                <AlertDialog.Cancel asChild>
-                  <Btn
-                    {...cancelBtnProps}
-                    onClick={() => handleClose()}
-                    text={cancelText}
-                    className={`${btnCommonClass} ${cancelBtnClass}`}
-                  />
-                </AlertDialog.Cancel>
-                <AlertDialog.Action asChild>
-                  <Btn
-                    {...okBtnProps}
-                    onClick={handleOk}
-                    text={okText}
-                    className={`${btnCommonClass} ${okBtnClass}`}
-                  />
-                </AlertDialog.Action>
-              </div>
-            )}
-          </div>
-          {type === "modal" && (
-            <div
-              className="flex-1"
-              onClick={() => {
-                if (maskCloseble) {
-                  handleClose();
-                }
-              }}
-            >
-              &nbsp;
-            </div>
-          )}
-        </AlertDialog.Content>
-      </AlertDialog.Portal>
-    </AlertDialog.Root>
-  );
-};
-
-export const Warn = ({
-  title,
-  onOk,
-  visible,
-  content,
-  ...props
-}: WarnProps) => {
-  const [internalVisible, setVisible] = useState(visible);
-
-  return (
-    <Modal
-      {...props}
-      title={
-        <>
-          <Warning />
-          {title}
-        </>
-      }
-      content={
-        <AlertDialog.Description
-          className={`
-                    font-common font-normal
-                    md:text-sm-title md:leading-[158%]
-                `}
-        >
-          {content}
-        </AlertDialog.Description>
-      }
-      closeble={false}
-      onOk={() => {
-        const toDo = onOk?.();
-        if (toDo instanceof Promise) {
-          toDo.then(() => {
-            setVisible(false);
-          });
-        } else {
-          setVisible(false);
-        }
-      }}
-      visible={internalVisible}
-      okBtnProps={{
-        className: `bg-delete-chat-ok-btn text-text-delete-chat-ok-btn `,
-      }}
-      cancelBtnProps={{
-        className: `bg-delete-chat-cancel-btn  border border-delete-chat-cancel-btn text-text-delete-chat-cancel-btn`,
-      }}
-    />
-  );
-};
-
-const div = document.createElement("div");
-div.id = "confirm-root";
-div.style.height = "0px";
-document.body.appendChild(div);
-
-Modal.warn = (props: Omit<WarnProps, "visible" | "onCancel" | "onOk">) => {
-  const root = createRoot(div);
-  const closeModal = () => {
-    root.unmount();
-  };
-
-  return new Promise<boolean>((resolve) => {
-    root.render(
-      <Warn
-        {...props}
-        visible={true}
-        onCancel={() => {
-          closeModal();
-          resolve(false);
-        }}
-        onOk={() => {
-          closeModal();
-          resolve(true);
-        }}
-      />,
-    );
-  });
-};
-
-export const Trigger = (props: TriggerProps) => {
-  const { children, className, content, ...rest } = props;
-
-  const [internalVisible, setVisible] = useState(false);
-
-  return (
-    <>
-      <div
-        className={className}
-        onClick={() => {
-          setVisible(true);
-        }}
-      >
-        {children}
-      </div>
-      <Modal
-        {...rest}
-        visible={internalVisible}
-        onCancel={() => {
-          setVisible(false);
-        }}
-        content={
-          typeof content === "function"
-            ? content({
-                close: () => {
-                  setVisible(false);
-                },
-              })
-            : content
-        }
-      />
-    </>
-  );
-};
-
-Modal.Trigger = Trigger;
-
-export default Modal;
--- a/app/components/Popover/index.tsx
+++ b/app/components/Popover/index.tsx
@@ -1,352 +0,0 @@
-import useRelativePosition from "@/app/hooks/useRelativePosition";
-import {
-  RefObject,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { createPortal } from "react-dom";
-
-const ArrowIcon = ({ sibling }: { sibling: RefObject<HTMLDivElement> }) => {
-  const [color, setColor] = useState<string>("");
-  useEffect(() => {
-    if (sibling.current) {
-      const { backgroundColor } = window.getComputedStyle(sibling.current);
-      setColor(backgroundColor);
-    }
-  }, []);
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="6"
-      viewBox="0 0 16 6"
-      fill="none"
-    >
-      <path
-        d="M16 0H0C1.28058 0 2.50871 0.508709 3.41421 1.41421L6.91 4.91C7.51199 5.51199 8.48801 5.51199 9.09 4.91L12.5858 1.41421C13.4913 0.508708 14.7194 0 16 0Z"
-        fill={color}
-      />
-    </svg>
-  );
-};
-
-const baseZIndex = 100;
-const popoverRootName = "popoverRoot";
-let popoverRoot = document.querySelector(
-  `#${popoverRootName}`,
-) as HTMLDivElement;
-if (!popoverRoot) {
-  popoverRoot = document.createElement("div");
-  document.body.appendChild(popoverRoot);
-  popoverRoot.style.height = "0px";
-  popoverRoot.style.width = "100%";
-  popoverRoot.style.position = "fixed";
-  popoverRoot.style.bottom = "0";
-  popoverRoot.style.zIndex = "10000";
-  popoverRoot.id = "popover-root";
-}
-
-export interface PopoverProps {
-  content?: JSX.Element | string;
-  children?: JSX.Element;
-  show?: boolean;
-  onShow?: (v: boolean) => void;
-  className?: string;
-  popoverClassName?: string;
-  trigger?: "hover" | "click";
-  placement?: "t" | "lt" | "rt" | "lb" | "rb" | "b" | "l" | "r";
-  noArrow?: boolean;
-  delayClose?: number;
-  useGlobalRoot?: boolean;
-  getPopoverPanelRef?: (ref: RefObject<HTMLDivElement>) => void;
-}
-
-export default function Popover(props: PopoverProps) {
-  const {
-    content,
-    children,
-    show,
-    onShow,
-    className,
-    popoverClassName,
-    trigger = "hover",
-    placement = "t",
-    noArrow = false,
-    delayClose = 0,
-    useGlobalRoot,
-    getPopoverPanelRef,
-  } = props;
-
-  const [internalShow, setShow] = useState(false);
-  const { position, getRelativePosition } = useRelativePosition({
-    delay: 0,
-  });
-
-  const popoverCommonClass = `absolute p-2 box-border`;
-
-  const mergedShow = show ?? internalShow;
-
-  const { arrowClassName, placementStyle, placementClassName } = useMemo(() => {
-    const arrowCommonClassName = `${
-      noArrow ? "hidden" : ""
-    } absolute z-10 left-[50%] translate-x-[calc(-50%)]`;
-
-    let defaultTopPlacement = true; // when users dont config 't' or 'b'
-
-    const {
-      distanceToBottomBoundary = 0,
-      distanceToLeftBoundary = 0,
-      distanceToRightBoundary = -10000,
-      distanceToTopBoundary = 0,
-      targetH = 0,
-      targetW = 0,
-    } = position?.poi || {};
-
-    if (distanceToBottomBoundary > distanceToTopBoundary) {
-      defaultTopPlacement = false;
-    }
-
-    const placements = {
-      lt: {
-        placementStyle: {
-          bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
-          left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`,
-        },
-        arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
-        placementClassName: "bottom-[calc(100%+0.5rem)] left-[calc(-2%)]",
-      },
-      lb: {
-        placementStyle: {
-          top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
-          left: `calc(${distanceToLeftBoundary}px - ${targetW * 0.02}px)`,
-        },
-        arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)]  pt-[0.5rem]`,
-        placementClassName: "top-[calc(100%+0.5rem)] left-[calc(-2%)]",
-      },
-      rt: {
-        placementStyle: {
-          bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
-          right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`,
-        },
-        arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
-        placementClassName: "bottom-[calc(100%+0.5rem)] right-[calc(-2%)]",
-      },
-      rb: {
-        placementStyle: {
-          top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
-          right: `calc(${distanceToRightBoundary}px - ${targetW * 0.02}px)`,
-        },
-        arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
-        placementClassName: "top-[calc(100%+0.5rem)] right-[calc(-2%)]",
-      },
-      t: {
-        placementStyle: {
-          bottom: `calc(${distanceToBottomBoundary + targetH}px + 0.5rem)`,
-          left: `calc(${distanceToLeftBoundary + targetW / 2}px`,
-          transform: "translateX(-50%)",
-        },
-        arrowClassName: `${arrowCommonClassName} bottom-[calc(100%+0.5rem)] translate-y-[calc(100%)] pb-[0.5rem]`,
-        placementClassName:
-          "bottom-[calc(100%+0.5rem)] left-[50%] translate-x-[calc(-50%)]",
-      },
-      b: {
-        placementStyle: {
-          top: `calc(-${distanceToBottomBoundary}px + 0.5rem)`,
-          left: `calc(${distanceToLeftBoundary + targetW / 2}px`,
-          transform: "translateX(-50%)",
-        },
-        arrowClassName: `${arrowCommonClassName} top-[calc(100%+0.5rem)] translate-y-[calc(-100%)] pt-[0.5rem]`,
-        placementClassName:
-          "top-[calc(100%+0.5rem)] left-[50%]  translate-x-[calc(-50%)]",
-      },
-    };
-
-    const getStyle = () => {
-      if (["l", "r"].includes(placement)) {
-        return placements[
-          `${placement}${defaultTopPlacement ? "t" : "b"}` as
-            | "lt"
-            | "lb"
-            | "rb"
-            | "rt"
-        ];
-      }
-      return placements[placement as Exclude<typeof placement, "l" | "r">];
-    };
-
-    return getStyle();
-  }, [Object.values(position?.poi || {})]);
-
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const closeTimer = useRef<number>(0);
-
-  useLayoutEffect(() => {
-    getPopoverPanelRef?.(popoverRef);
-    onShow?.(internalShow);
-  }, [internalShow]);
-
-  if (trigger === "click") {
-    const handleOpen = (e: { currentTarget: any }) => {
-      clearTimeout(closeTimer.current);
-      setShow(true);
-      getRelativePosition(e.currentTarget, "");
-      window.document.documentElement.style.overflow = "hidden";
-    };
-    const handleClose = () => {
-      if (delayClose) {
-        closeTimer.current = window.setTimeout(() => {
-          setShow(false);
-        }, delayClose);
-      } else {
-        setShow(false);
-      }
-      window.document.documentElement.style.overflow = "auto";
-    };
-
-    return (
-      <div
-        className={`relative ${className}`}
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          if (!mergedShow) {
-            handleOpen(e);
-          } else {
-            handleClose();
-          }
-        }}
-      >
-        {children}
-        {mergedShow && (
-          <>
-            {!noArrow && (
-              <div className={`${arrowClassName}`}>
-                <ArrowIcon sibling={popoverRef} />
-              </div>
-            )}
-            {createPortal(
-              <div
-                className={`${popoverCommonClass} ${popoverClassName} cursor-pointer overflow-auto`}
-                style={{ zIndex: baseZIndex + 1, ...placementStyle }}
-                ref={popoverRef}
-              >
-                {content}
-              </div>,
-              popoverRoot,
-            )}
-            {createPortal(
-              <div
-                className=" fixed w-[100vw] h-[100vh] right-0 bottom-0"
-                style={{ zIndex: baseZIndex }}
-                onClick={(e) => {
-                  e.preventDefault();
-                  handleClose();
-                }}
-              >
-                &nbsp;
-              </div>,
-              popoverRoot,
-            )}
-          </>
-        )}
-      </div>
-    );
-  }
-
-  if (useGlobalRoot) {
-    return (
-      <div
-        className={`relative ${className}`}
-        onPointerEnter={(e) => {
-          e.preventDefault();
-          clearTimeout(closeTimer.current);
-          onShow?.(true);
-          setShow(true);
-          getRelativePosition(e.currentTarget, "");
-          window.document.documentElement.style.overflow = "hidden";
-        }}
-        onPointerLeave={(e) => {
-          e.preventDefault();
-          if (delayClose) {
-            closeTimer.current = window.setTimeout(() => {
-              onShow?.(false);
-              setShow(false);
-            }, delayClose);
-          } else {
-            onShow?.(false);
-            setShow(false);
-          }
-          window.document.documentElement.style.overflow = "auto";
-        }}
-      >
-        {children}
-        {mergedShow && (
-          <>
-            <div
-              className={`${
-                noArrow ? "opacity-0" : ""
-              } bg-inherit ${arrowClassName}`}
-              style={{ zIndex: baseZIndex + 1 }}
-            >
-              <ArrowIcon sibling={popoverRef} />
-            </div>
-            {createPortal(
-              <div
-                className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
-                style={{ zIndex: baseZIndex + 1, ...placementStyle }}
-                ref={popoverRef}
-              >
-                {content}
-              </div>,
-              popoverRoot,
-            )}
-          </>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`group/popover relative ${className}`}
-      onPointerEnter={(e) => {
-        getRelativePosition(e.currentTarget, "");
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-    >
-      {children}
-      <div
-        className={`
-          hidden group-hover/popover:block 
-          ${noArrow ? "opacity-0" : ""} 
-          bg-inherit 
-          ${arrowClassName}
-        `}
-        style={{ zIndex: baseZIndex + 1 }}
-      >
-        <ArrowIcon sibling={popoverRef} />
-      </div>
-      <div
-        className={`
-          hidden group-hover/popover:block whitespace-nowrap 
-          ${popoverCommonClass} 
-          ${placementClassName} 
-          ${popoverClassName}
-        `}
-        ref={popoverRef}
-        style={{ zIndex: baseZIndex + 1 }}
-      >
-        {content}
-      </div>
-    </div>
-  );
-}
--- a/app/components/Screen/index.tsx
+++ b/app/components/Screen/index.tsx
@@ -1,71 +0,0 @@
-import { useLocation } from "react-router-dom";
-import { useMemo, ReactNode } from "react";
-import { Path, SIDEBAR_ID, SlotID } from "@/app/constant";
-import { getLang } from "@/app/locales";
-
-import useMobileScreen from "@/app/hooks/useMobileScreen";
-import { isIOS } from "@/app/utils";
-import useListenWinResize from "@/app/hooks/useListenWinResize";
-
-interface ScreenProps {
-  children: ReactNode;
-  noAuth: ReactNode;
-  sidebar: ReactNode;
-}
-
-export default function Screen(props: ScreenProps) {
-  const location = useLocation();
-  const isAuth = location.pathname === Path.Auth;
-
-  const isMobileScreen = useMobileScreen();
-  const isIOSMobile = useMemo(
-    () => isIOS() && isMobileScreen,
-    [isMobileScreen],
-  );
-
-  useListenWinResize();
-
-  return (
-    <div
-      className={`
-         flex h-[100%] w-[100%] bg-center
-        max-md:relative  max-md:flex-col-reverse  max-md:bg-global-mobile
-        md:overflow-hidden md:bg-global
-      `}
-      style={{
-        direction: getLang() === "ar" ? "rtl" : "ltr",
-      }}
-    >
-      {isAuth ? (
-        props.noAuth
-      ) : (
-        <>
-          <div
-            className={`
-              max-md:absolute max-md:w-[100%] max-md:bottom-0 max-md:z-10
-              md:flex-0 md:overflow-hidden
-            `}
-            id={SIDEBAR_ID}
-          >
-            {props.sidebar}
-          </div>
-
-          <div
-            className={`
-              h-[100%]
-              max-md:w-[100%] 
-              md:flex-1 md:min-w-0 md:overflow-hidden md:flex
-            `}
-            id={SlotID.AppBody}
-            style={{
-              // #3016 disable transition on ios mobile screen
-              transition: isIOSMobile ? "none" : undefined,
-            }}
-          >
-            {props.children}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
--- a/app/components/Search/index.module.scss
+++ b/app/components/Search/index.module.scss
@@ -1,24 +0,0 @@
-.search {
-    display: flex;
-    max-width: 460px;
-    height: 50px;
-    padding: 16px;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-
-    border-radius: 16px;
-    border: 1px solid var(--Light-Text-Black, #18182A);
-    background: var(--light-opacity-white-70, rgba(255, 255, 255, 0.70));
-    box-shadow: 0px 8px 40px 0px rgba(60, 68, 255, 0.12);
-
-    .icon {
-        height: 20px;
-        width: 20px;
-        flex: 0 0;
-    }
-    .input {
-        height: 18px;
-        flex: 1 1;
-    } 
-}
--- a/app/components/Search/index.tsx
+++ b/app/components/Search/index.tsx
@@ -1,30 +0,0 @@
-import styles from "./index.module.scss";
-import SearchIcon from "@/app/icons/search.svg";
-
-export interface SearchProps {
-  value?: string;
-  onSearch?: (v: string) => void;
-  placeholder?: string;
-}
-
-const Search = (props: SearchProps) => {
-  const { placeholder = "", value, onSearch } = props;
-  return (
-    <div className={styles["search"]}>
-      <div className={styles["icon"]}>
-        <SearchIcon />
-      </div>
-      <input
-        className={styles["input"]}
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => {
-          e.preventDefault();
-          onSearch?.(e.target.value);
-        }}
-      />
-    </div>
-  );
-};
-
-export default Search;
--- a/app/components/Select/index.tsx
+++ b/app/components/Select/index.tsx
@@ -1,118 +0,0 @@
-import SelectIcon from "@/app/icons/downArrowIcon.svg";
-import Popover from "@/app/components/Popover";
-import React, { useContext, useMemo, useRef } from "react";
-import useRelativePosition, {
-  Orientation,
-} from "@/app/hooks/useRelativePosition";
-import List from "@/app/components/List";
-
-import Selected from "@/app/icons/selectedIcon.svg";
-
-export type Option<Value> = {
-  value: Value;
-  label: string;
-  icon?: React.ReactNode;
-};
-
-export interface SearchProps<Value> {
-  value?: string;
-  onSelect?: (v: Value) => void;
-  options?: Option<Value>[];
-  inMobile?: boolean;
-}
-
-const Select = <Value extends number | string>(props: SearchProps<Value>) => {
-  const { value, onSelect, options = [], inMobile } = props;
-
-  const { isMobileScreen, selectClassName } = useContext(List.ListContext);
-
-  const optionsRef = useRef<Option<Value>[]>([]);
-  optionsRef.current = options;
-  const selectedOption = useMemo(
-    () => optionsRef.current.find((o) => o.value === value),
-    [value],
-  );
-
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  const { position, getRelativePosition } = useRelativePosition({
-    delay: 0,
-  });
-
-  let headerH = 100;
-  let baseH = position?.poi.distanceToBottomBoundary || 0;
-  if (isMobileScreen) {
-    headerH = 60;
-  }
-  if (position?.poi.relativePosition[1] === Orientation.bottom) {
-    baseH = position?.poi.distanceToTopBoundary;
-  }
-
-  const maxHeight = `${baseH - headerH}px`;
-
-  const content = (
-    <div
-      className={` flex flex-col gap-1 overflow-y-auto overflow-x-hidden`}
-      style={{ maxHeight }}
-    >
-      {options?.map((o) => (
-        <div
-          key={o.value}
-          className={`
-            flex items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered cursor-pointer
-          `}
-          onClick={() => {
-            onSelect?.(o.value);
-          }}
-        >
-          <div className="flex gap-2 flex-1 follow-parent-svg text-text-select-option">
-            {!!o.icon && <div className="flex items-center">{o.icon}</div>}
-            <div className={`flex-1 text-text-select-option`}>{o.label}</div>
-          </div>
-          <div
-            className={
-              selectedOption?.value === o.value ? "opacity-100" : "opacity-0"
-            }
-          >
-            <Selected />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-
-  return (
-    <Popover
-      content={content}
-      trigger="click"
-      noArrow
-      placement={
-        position?.poi.relativePosition[1] !== Orientation.bottom ? "rb" : "rt"
-      }
-      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-select-popover-panel"
-      onShow={(e) => {
-        getRelativePosition(contentRef.current!, "");
-      }}
-      className={selectClassName}
-    >
-      <div
-        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-common text-sm-title  cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
-        ref={contentRef}
-      >
-        <div
-          className={`flex items-center gap-2 flex-1 follow-parent-svg text-text-select`}
-        >
-          {!!selectedOption?.icon && (
-            <div className={``}>{selectedOption?.icon}</div>
-          )}
-          <div className={`flex-1`}>{selectedOption?.label}</div>
-        </div>
-        <div className={``}>
-          <SelectIcon />
-        </div>
-      </div>
-    </Popover>
-  );
-};
-
-export default Select;
--- a/app/components/SlideRange/index.tsx
+++ b/app/components/SlideRange/index.tsx
@@ -1,99 +0,0 @@
-import { useContext, useEffect, useRef } from "react";
-import { ListContext } from "@/app/components/List";
-import { useResizeObserver } from "usehooks-ts";
-
-interface SlideRangeProps {
-  className?: string;
-  description?: string;
-  range?: {
-    start?: number;
-    stroke?: number;
-  };
-  onSlide?: (v: number) => void;
-  value?: number;
-  step?: number;
-}
-
-const margin = 15;
-
-export default function SlideRange(props: SlideRangeProps) {
-  const {
-    className = "",
-    description = "",
-    range = {},
-    value,
-    onSlide,
-    step,
-  } = props;
-  const { start = 0, stroke = 1 } = range;
-
-  const { rangeClassName, update } = useContext(ListContext);
-
-  const slideRef = useRef<HTMLDivElement>(null);
-
-  useResizeObserver({
-    ref: slideRef,
-    onResize: () => {
-      setProperty(value);
-    },
-  });
-
-  const transformToWidth = (x: number = start) => {
-    const abs = x - start;
-    const maxWidth = (slideRef.current?.clientWidth || 1) - margin * 2;
-    const result = (abs / stroke) * maxWidth;
-    return result;
-  };
-
-  const setProperty = (value?: number) => {
-    const initWidth = transformToWidth(value);
-    slideRef.current?.style.setProperty(
-      "--slide-value-size",
-      `${initWidth + margin}px`,
-    );
-  };
-
-  useEffect(() => {
-    update?.({ type: "range" });
-  }, []);
-
-  return (
-    <div
-      className={`flex flex-col justify-center items-end gap-1 w-[100%] ${className} ${rangeClassName}`}
-    >
-      {!!description && (
-        <div className=" text-common text-sm ">{description}</div>
-      )}
-      <div
-        className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide cursor-pointer"
-        ref={slideRef}
-      >
-        <div className="cursor-pointer absolute  marker:top-0 h-[100%] w-[var(--slide-value-size)]  bg-slider-slided-travel rounded-slide">
-          &nbsp;
-        </div>
-        <div
-          className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%]  h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block hover:bg-slider-block-hover text-text-slider-block"
-          // onPointerDown={onPointerDown}
-        >
-          {value}
-        </div>
-        <input
-          type="range"
-          className="w-[100%] h-[100%] opacity-0 cursor-pointer"
-          value={value}
-          min={start}
-          max={start + stroke}
-          step={step}
-          onChange={(e) => {
-            setProperty(e.target.valueAsNumber);
-            onSlide?.(e.target.valueAsNumber);
-          }}
-          style={{
-            marginLeft: margin,
-            marginRight: margin,
-          }}
-        />
-      </div>
-    </div>
-  );
-}
--- a/app/components/Switch/index.tsx
+++ b/app/components/Switch/index.tsx
@@ -1,33 +0,0 @@
-import * as RadixSwitch from "@radix-ui/react-switch";
-import { useContext } from "react";
-import List from "../List";
-
-interface SwitchProps {
-  value: boolean;
-  onChange: (v: boolean) => void;
-}
-
-export default function Switch(props: SwitchProps) {
-  const { value, onChange } = props;
-
-  const { switchClassName = "" } = useContext(List.ListContext);
-  return (
-    <RadixSwitch.Root
-      checked={value}
-      onCheckedChange={onChange}
-      className={` 
-        cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md transition-colors duration-300 ease-in-out
-        ${switchClassName} 
-        ${
-          value
-            ? "bg-switch-checked justify-end"
-            : "bg-switch-unchecked justify-start"
-        }
-      `}
-    >
-      <RadixSwitch.Thumb
-        className={` bg-switch-btn block w-4 h-4 drop-shadow-sm rounded-md`}
-      />
-    </RadixSwitch.Root>
-  );
-}
--- a/app/components/ThumbnailImg/index.tsx
+++ b/app/components/ThumbnailImg/index.tsx
@@ -1,27 +0,0 @@
-import ImgDeleteIcon from "@/app/icons/imgDeleteIcon.svg";
-
-export interface ThumbnailProps {
-  image: string;
-  deleteImage: () => void;
-}
-
-export default function Thumbnail(props: ThumbnailProps) {
-  const { image, deleteImage } = props;
-  return (
-    <div
-      className={` h-thumbnail w-thumbnail cursor-default border border-thumbnail rounded-action-btn flex-0 bg-cover bg-center`}
-      style={{ backgroundImage: `url("${image}")` }}
-    >
-      <div
-        className={` w-[100%] h-[100%] opacity-0 transition-all duration-200 rounded-action-btn hover:opacity-100 hover:bg-thumbnail-mask`}
-      >
-        <div
-          className={`cursor-pointer flex items-center justify-center float-right`}
-          onClick={deleteImage}
-        >
-          <ImgDeleteIcon />
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/app/components/auth.module.scss
+++ b/app/components/auth.module.scss
@@ -6,8 +6,6 @@
  width: 100%;
  flex-direction: column;

-  background-color: var(--white);
-
  .auth-logo {
    transform: scale(1.4);
  }
@@ -35,18 +33,4 @@
      margin-bottom: 10px;
    }
  }
-  input[type="number"],
-  input[type="text"],
-  input[type="password"] {
-    appearance: none;
-    border-radius: 10px;
-    border: var(--border-in-light);
-    min-height: 36px;
-    box-sizing: border-box;
-    background: var(--white);
-    color: var(--black);
-    padding: 0 10px;
-    max-width: 50%;
-    font-family: inherit;
-  }
 }
--- a/app/components/auth.tsx
+++ b/app/components/auth.tsx
@@ -64,17 +64,6 @@ export function AuthPage() {
              );
            }}
          />
-          <input
-            className={styles["auth-input"]}
-            type="password"
-            placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}
-            value={accessStore.googleApiKey}
-            onChange={(e) => {
-              accessStore.update(
-                (access) => (access.googleApiKey = e.currentTarget.value),
-              );
-            }}
-          />
        </>
      ) : null}

--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -12,7 +12,7 @@ import {
 import { useChatStore } from "../store";

 import Locale from "../locales";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { Path } from "../constant";
 import { MaskAvatar } from "./mask";
 import { Mask } from "../store/mask";
@@ -40,16 +40,12 @@ export function ChatItem(props: {
      });
    }
  }, [props.selected]);
-
-  const { pathname: currentPath } = useLocation();
  return (
    <Draggable draggableId={`${props.id}`} index={props.index}>
      {(provided) => (
        <div
          className={`${styles["chat-item"]} ${
-            props.selected &&
-            (currentPath === Path.Chat || currentPath === Path.Home) &&
-            styles["chat-item-selected"]
+            props.selected && styles["chat-item-selected"]
          }`}
          onClick={props.onClick}
          ref={(ele) => {
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -1,47 +1,5 @@
@import "../styles/animation.scss";

-.attach-images {
-  position: absolute;
-  left: 30px;
-  bottom: 32px;
-  display: flex;
-}
-
-.attach-image {
-  cursor: default;
-  width: 64px;
-  height: 64px;
-  border: rgba($color: #888, $alpha: 0.2) 1px solid;
-  border-radius: 5px;
-  margin-right: 10px;
-  background-size: cover;
-  background-position: center;
-  background-color: var(--white);
-
-  .attach-image-mask {
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: all ease 0.2s;
-  }
-
-  .attach-image-mask:hover {
-    opacity: 1;
-  }
-
-  .delete-image {
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px;
-    float: right;
-    background-color: var(--white);
-  }
-}
-
 .chat-input-actions {
  display: flex;
  flex-wrap: wrap;
@@ -231,10 +189,12 @@

  animation: slide-in ease 0.3s;

-  $linear: linear-gradient(to right,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 1),
-      rgba(0, 0, 0, 0));
+  $linear: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 1),
+    rgba(0, 0, 0, 0)
+  );
  mask-image: $linear;

  @mixin show {
@@ -367,7 +327,7 @@
  }
 }

-.chat-message-user>.chat-message-container {
+.chat-message-user > .chat-message-container {
  align-items: flex-end;
 }

@@ -389,7 +349,6 @@
      padding: 7px;
    }
  }
-
  /* Specific styles for iOS devices */
  @media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
    @supports (-webkit-touch-callout: none) {
@@ -422,64 +381,6 @@
  transition: all ease 0.3s;
 }

-.chat-message-item-image {
-  width: 100%;
-  margin-top: 10px;
-}
-
-.chat-message-item-images {
-  width: 100%;
-  display: grid;
-  justify-content: left;
-  grid-gap: 10px;
-  grid-template-columns: repeat(var(--image-count), auto);
-  margin-top: 10px;
-}
-
-.chat-message-item-image-multi {
-  object-fit: cover;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.chat-message-item-image,
-.chat-message-item-image-multi {
-  box-sizing: border-box;
-  border-radius: 10px;
-  border: rgba($color: #888, $alpha: 0.2) 1px solid;
-}
-
-
-@media only screen and (max-width: 600px) {
-  $calc-image-width: calc(100vw/3*2/var(--image-count));
-
-  .chat-message-item-image-multi {
-    width: $calc-image-width;
-    height: $calc-image-width;
-  }
-  
-  .chat-message-item-image {
-    max-width: calc(100vw/3*2);
-  }
-}
-
-@media screen and (min-width: 600px) {
-  $max-image-width: calc(calc(1200px - var(--sidebar-width))/3*2/var(--image-count));
-  $image-width: calc(calc(var(--window-width) - var(--sidebar-width))/3*2/var(--image-count));
-
-  .chat-message-item-image-multi {
-    width: $image-width;
-    height: $image-width;
-    max-width: $max-image-width;
-    max-height: $max-image-width;
-  }
-
-  .chat-message-item-image {
-    max-width: calc(calc(1200px - var(--sidebar-width))/3*2);
-  }
-}
-
 .chat-message-action-date {
  font-size: 12px;
  opacity: 0.2;
@@ -494,7 +395,7 @@
  z-index: 1;
 }

-.chat-message-user>.chat-message-container>.chat-message-item {
+.chat-message-user > .chat-message-container > .chat-message-item {
  background-color: var(--second);

  &:hover {
@@ -559,7 +460,6 @@

      @include single-line();
    }
-
    .hint-content {
      font-size: 12px;

@@ -574,26 +474,15 @@
 }

 .chat-input-panel-inner {
-  cursor: text;
  display: flex;
  flex: 1;
-  border-radius: 10px;
-  border: var(--border-in-light);
-}
-
-.chat-input-panel-inner-attach {
-  padding-bottom: 80px;
-}
-
-.chat-input-panel-inner:has(.chat-input:focus) {
-  border: 1px solid var(--primary);
 }

 .chat-input {
  height: 100%;
  width: 100%;
  border-radius: 10px;
-  border: none;
+  border: var(--border-in-light);
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
  background-color: var(--white);
  color: var(--black);
@@ -605,7 +494,9 @@
  min-height: 68px;
 }

-.chat-input:focus {}
+.chat-input:focus {
+  border: 1px solid var(--primary);
+}

 .chat-input-send {
  background-color: var(--primary);
@@ -624,4 +515,4 @@
  .chat-input-send {
    bottom: 30px;
  }
-}
+}
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -6,7 +6,6 @@ import React, {
  useMemo,
  useCallback,
  Fragment,
-  RefObject,
 } from "react";

 import SendWhiteIcon from "../icons/send-white.svg";
@@ -16,7 +15,6 @@ import ExportIcon from "../icons/share.svg";
 import ReturnIcon from "../icons/return.svg";
 import CopyIcon from "../icons/copy.svg";
 import LoadingIcon from "../icons/three-dots.svg";
-import LoadingButtonIcon from "../icons/loading.svg";
 import PromptIcon from "../icons/prompt.svg";
 import MaskIcon from "../icons/mask.svg";
 import MaxIcon from "../icons/max.svg";
@@ -29,7 +27,6 @@ import PinIcon from "../icons/pin.svg";
 import EditIcon from "../icons/rename.svg";
 import ConfirmIcon from "../icons/confirm.svg";
 import CancelIcon from "../icons/cancel.svg";
-import ImageIcon from "../icons/image.svg";

 import LightIcon from "../icons/light.svg";
 import DarkIcon from "../icons/dark.svg";
@@ -56,10 +53,6 @@ import {
  selectOrCopy,
  autoGrowTextArea,
  useMobileScreen,
-  getMessageTextContent,
-  getMessageImages,
-  isVisionModel,
-  compressImage,
 } from "../utils";

 import dynamic from "next/dynamic";
@@ -96,7 +89,7 @@ import { prettyObject } from "../utils/format";
 import { ExportMessageModal } from "./exporter";
 import { getClientConfig } from "../config/client";
 import { useAllModels } from "../utils/hooks";
-import { MultimodalContent } from "../client/api";
+import { VoicePage } from "./voice/voice";

 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  loading: () => <LoadingIcon />,
@@ -219,8 +212,6 @@ function useSubmitHandler() {
  }, []);

  const shouldSubmit = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // Fix Chinese input method "Enter" on Safari
-    if (e.keyCode == 229) return false;
    if (e.key !== "Enter") return false;
    if (e.key === "Enter" && (e.nativeEvent.isComposing || isComposing.current))
      return false;
@@ -385,13 +376,11 @@ function ChatAction(props: {
  );
 }

-function useScrollToBottom(
-  scrollRef: RefObject<HTMLDivElement>,
-  detach: boolean = false,
-) {
+function useScrollToBottom() {
  // for auto-scroll
-
+  const scrollRef = useRef<HTMLDivElement>(null);
  const [autoScroll, setAutoScroll] = useState(true);
+
  function scrollDomToBottom() {
    const dom = scrollRef.current;
    if (dom) {
@@ -404,7 +393,7 @@ function useScrollToBottom(

  // auto scroll
  useEffect(() => {
-    if (autoScroll && !detach) {
+    if (autoScroll) {
      scrollDomToBottom();
    }
  });
@@ -418,14 +407,10 @@ function useScrollToBottom(
 }

 export function ChatActions(props: {
-  uploadImage: () => void;
-  setAttachImages: (images: string[]) => void;
-  setUploading: (uploading: boolean) => void;
  showPromptModal: () => void;
  scrollToBottom: () => void;
  showPromptHints: () => void;
  hitBottom: boolean;
-  uploading: boolean;
 }) {
  const config = useAppConfig();
  const navigate = useNavigate();
@@ -448,45 +433,25 @@ export function ChatActions(props: {
  // switch model
  const currentModel = chatStore.currentSession().mask.modelConfig.model;
  const allModels = useAllModels();
-  const models = useMemo(() => {
-    const filteredModels = allModels.filter((m) => m.available);
-    const defaultModel = filteredModels.find((m) => m.isDefault);
-
-    if (defaultModel) {
-      const arr = [
-        defaultModel,
-        ...filteredModels.filter((m) => m !== defaultModel),
-      ];
-      return arr;
-    } else {
-      return filteredModels;
-    }
-  }, [allModels]);
+  const models = useMemo(
+    () => allModels.filter((m) => m.available),
+    [allModels],
+  );
  const [showModelSelector, setShowModelSelector] = useState(false);
-  const [showUploadImage, setShowUploadImage] = useState(false);

  useEffect(() => {
-    const show = isVisionModel(currentModel);
-    setShowUploadImage(show);
-    if (!show) {
-      props.setAttachImages([]);
-      props.setUploading(false);
-    }
-
    // if current model is not available
    // switch to first available model
    const isUnavaliableModel = !models.some((m) => m.name === currentModel);
    if (isUnavaliableModel && models.length > 0) {
-      // show next model to default model if exist
-      let nextModel: ModelType = (
-        models.find((model) => model.isDefault) || models[0]
-      ).name;
+      const nextModel = models[0].name as ModelType;
      chatStore.updateCurrentSession(
        (session) => (session.mask.modelConfig.model = nextModel),
      );
      showToast(nextModel);
    }
-  }, [chatStore, currentModel, models]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentModel, models]);

  return (
    <div className={styles["chat-input-actions"]}>
@@ -512,13 +477,6 @@ export function ChatActions(props: {
        />
      )}

-      {showUploadImage && (
-        <ChatAction
-          onClick={props.uploadImage}
-          text={Locale.Chat.InputActions.UploadImage}
-          icon={props.uploading ? <LoadingButtonIcon /> : <ImageIcon />}
-        />
-      )}
      <ChatAction
        onClick={nextTheme}
        text={Locale.Chat.InputActions.Theme[theme]}
@@ -654,14 +612,6 @@ export function EditMessageModal(props: { onClose: () => void }) {
  );
 }

-export function DeleteImageButton(props: { deleteImage: () => void }) {
-  return (
-    <div className={styles["delete-image"]} onClick={props.deleteImage}>
-      <DeleteIcon />
-    </div>
-  );
-}
-
 function _Chat() {
  type RenderMessage = ChatMessage & { preview?: boolean };

@@ -676,22 +626,10 @@ function _Chat() {
  const [userInput, setUserInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const { submitKey, shouldSubmit } = useSubmitHandler();
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const isScrolledToBottom = scrollRef?.current
-    ? Math.abs(
-        scrollRef.current.scrollHeight -
-          (scrollRef.current.scrollTop + scrollRef.current.clientHeight),
-      ) <= 1
-    : false;
-  const { setAutoScroll, scrollDomToBottom } = useScrollToBottom(
-    scrollRef,
-    isScrolledToBottom,
-  );
+  const { scrollRef, setAutoScroll, scrollDomToBottom } = useScrollToBottom();
  const [hitBottom, setHitBottom] = useState(true);
  const isMobileScreen = useMobileScreen();
  const navigate = useNavigate();
-  const [attachImages, setAttachImages] = useState<string[]>([]);
-  const [uploading, setUploading] = useState(false);

  // prompt hints
  const promptStore = usePromptStore();
@@ -769,10 +707,7 @@ function _Chat() {
      return;
    }
    setIsLoading(true);
-    chatStore
-      .onUserInput(userInput, attachImages)
-      .then(() => setIsLoading(false));
-    setAttachImages([]);
+    chatStore.onUserInput(userInput).then(() => setIsLoading(false));
    localStorage.setItem(LAST_INPUT_KEY, userInput);
    setUserInput("");
    setPromptHints([]);
@@ -850,9 +785,9 @@ function _Chat() {
  };
  const onRightClick = (e: any, message: ChatMessage) => {
    // copy to clipboard
-    if (selectOrCopy(e.currentTarget, getMessageTextContent(message))) {
+    if (selectOrCopy(e.currentTarget, message.content)) {
      if (userInput.length === 0) {
-        setUserInput(getMessageTextContent(message));
+        setUserInput(message.content);
      }

      e.preventDefault();
@@ -920,9 +855,7 @@ function _Chat() {

    // resend the message
    setIsLoading(true);
-    const textContent = getMessageTextContent(userMessage);
-    const images = getMessageImages(userMessage);
-    chatStore.onUserInput(textContent, images).then(() => setIsLoading(false));
+    chatStore.onUserInput(userMessage.content).then(() => setIsLoading(false));
    inputRef.current?.focus();
  };

@@ -1031,6 +964,7 @@ function _Chat() {
    setHitBottom(isHitBottom);
    setAutoScroll(isHitBottom);
  };
+
  function scrollToBottom() {
    setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
    scrollDomToBottom();
@@ -1116,93 +1050,7 @@ function _Chat() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  const handlePaste = useCallback(
-    async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
-      const currentModel = chatStore.currentSession().mask.modelConfig.model;
-      if (!isVisionModel(currentModel)) {
-        return;
-      }
-      const items = (event.clipboardData || window.clipboardData).items;
-      for (const item of items) {
-        if (item.kind === "file" && item.type.startsWith("image/")) {
-          event.preventDefault();
-          const file = item.getAsFile();
-          if (file) {
-            const images: string[] = [];
-            images.push(...attachImages);
-            images.push(
-              ...(await new Promise<string[]>((res, rej) => {
-                setUploading(true);
-                const imagesData: string[] = [];
-                compressImage(file, 256 * 1024)
-                  .then((dataUrl) => {
-                    imagesData.push(dataUrl);
-                    setUploading(false);
-                    res(imagesData);
-                  })
-                  .catch((e) => {
-                    setUploading(false);
-                    rej(e);
-                  });
-              })),
-            );
-            const imagesLength = images.length;
-
-            if (imagesLength > 3) {
-              images.splice(3, imagesLength - 3);
-            }
-            setAttachImages(images);
-          }
-        }
-      }
-    },
-    [attachImages, chatStore],
-  );
-
-  async function uploadImage() {
-    const images: string[] = [];
-    images.push(...attachImages);
-
-    images.push(
-      ...(await new Promise<string[]>((res, rej) => {
-        const fileInput = document.createElement("input");
-        fileInput.type = "file";
-        fileInput.accept =
-          "image/png, image/jpeg, image/webp, image/heic, image/heif";
-        fileInput.multiple = true;
-        fileInput.onchange = (event: any) => {
-          setUploading(true);
-          const files = event.target.files;
-          const imagesData: string[] = [];
-          for (let i = 0; i < files.length; i++) {
-            const file = event.target.files[i];
-            compressImage(file, 256 * 1024)
-              .then((dataUrl) => {
-                imagesData.push(dataUrl);
-                if (
-                  imagesData.length === 3 ||
-                  imagesData.length === files.length
-                ) {
-                  setUploading(false);
-                  res(imagesData);
-                }
-              })
-              .catch((e) => {
-                setUploading(false);
-                rej(e);
-              });
-          }
-        };
-        fileInput.click();
-      })),
-    );
-
-    const imagesLength = images.length;
-    if (imagesLength > 3) {
-      images.splice(3, imagesLength - 3);
-    }
-    setAttachImages(images);
-  }
+  return <VoicePage />;

  return (
    <div className={styles.chat} key={session.id}>
@@ -1310,29 +1158,15 @@ function _Chat() {
                          onClick={async () => {
                            const newMessage = await showPrompt(
                              Locale.Chat.Actions.Edit,
-                              getMessageTextContent(message),
+                              message.content,
                              10,
                            );
-                            let newContent: string | MultimodalContent[] =
-                              newMessage;
-                            const images = getMessageImages(message);
-                            if (images.length > 0) {
-                              newContent = [{ type: "text", text: newMessage }];
-                              for (let i = 0; i < images.length; i++) {
-                                newContent.push({
-                                  type: "image_url",
-                                  image_url: {
-                                    url: images[i],
-                                  },
-                                });
-                              }
-                            }
                            chatStore.updateCurrentSession((session) => {
                              const m = session.mask.context
                                .concat(session.messages)
                                .find((m) => m.id === message.id);
                              if (m) {
-                                m.content = newContent;
+                                m.content = newMessage;
                              }
                            });
                          }}
@@ -1387,11 +1221,7 @@ function _Chat() {
                              <ChatAction
                                text={Locale.Chat.Actions.Copy}
                                icon={<CopyIcon />}
-                                onClick={() =>
-                                  copyToClipboard(
-                                    getMessageTextContent(message),
-                                  )
-                                }
+                                onClick={() => copyToClipboard(message.content)}
                              />
                            </>
                          )}
@@ -1406,7 +1236,7 @@ function _Chat() {
                  )}
                  <div className={styles["chat-message-item"]}>
                    <Markdown
-                      content={getMessageTextContent(message)}
+                      content={message.content}
                      loading={
                        (message.preview || message.streaming) &&
                        message.content.length === 0 &&
@@ -1415,42 +1245,12 @@ function _Chat() {
                      onContextMenu={(e) => onRightClick(e, message)}
                      onDoubleClickCapture={() => {
                        if (!isMobileScreen) return;
-                        setUserInput(getMessageTextContent(message));
+                        setUserInput(message.content);
                      }}
                      fontSize={fontSize}
                      parentRef={scrollRef}
                      defaultShow={i >= messages.length - 6}
                    />
-                    {getMessageImages(message).length == 1 && (
-                      <img
-                        className={styles["chat-message-item-image"]}
-                        src={getMessageImages(message)[0]}
-                        alt=""
-                      />
-                    )}
-                    {getMessageImages(message).length > 1 && (
-                      <div
-                        className={styles["chat-message-item-images"]}
-                        style={
-                          {
-                            "--image-count": getMessageImages(message).length,
-                          } as React.CSSProperties
-                        }
-                      >
-                        {getMessageImages(message).map((image, index) => {
-                          return (
-                            <img
-                              className={
-                                styles["chat-message-item-image-multi"]
-                              }
-                              key={index}
-                              src={image}
-                              alt=""
-                            />
-                          );
-                        })}
-                      </div>
-                    )}
                  </div>

                  <div className={styles["chat-message-action-date"]}>
@@ -1470,13 +1270,9 @@ function _Chat() {
        <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />

        <ChatActions
-          uploadImage={uploadImage}
-          setAttachImages={setAttachImages}
-          setUploading={setUploading}
          showPromptModal={() => setShowPromptModal(true)}
          scrollToBottom={scrollToBottom}
          hitBottom={hitBottom}
-          uploading={uploading}
          showPromptHints={() => {
            // Click again to close
            if (promptHints.length > 0) {
@@ -1489,16 +1285,8 @@ function _Chat() {
            onSearch("");
          }}
        />
-        <label
-          className={`${styles["chat-input-panel-inner"]} ${
-            attachImages.length != 0
-              ? styles["chat-input-panel-inner-attach"]
-              : ""
-          }`}
-          htmlFor="chat-input"
-        >
+        <div className={styles["chat-input-panel-inner"]}>
          <textarea
-            id="chat-input"
            ref={inputRef}
            className={styles["chat-input"]}
            placeholder={Locale.Chat.Input(submitKey)}
@@ -1507,36 +1295,12 @@ function _Chat() {
            onKeyDown={onInputKeyDown}
            onFocus={scrollToBottom}
            onClick={scrollToBottom}
-            onPaste={handlePaste}
            rows={inputRows}
            autoFocus={autoFocus}
            style={{
              fontSize: config.fontSize,
            }}
          />
-          {attachImages.length != 0 && (
-            <div className={styles["attach-images"]}>
-              {attachImages.map((image, index) => {
-                return (
-                  <div
-                    key={index}
-                    className={styles["attach-image"]}
-                    style={{ backgroundImage: `url("${image}")` }}
-                  >
-                    <div className={styles["attach-image-mask"]}>
-                      <DeleteImageButton
-                        deleteImage={() => {
-                          setAttachImages(
-                            attachImages.filter((_, i) => i !== index),
-                          );
-                        }}
-                      />
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
          <IconButton
            icon={<SendWhiteIcon />}
            text={Locale.Chat.Send}
@@ -1544,7 +1308,7 @@ function _Chat() {
            type="primary"
            onClick={() => doSubmit(userInput)}
          />
-        </label>
+        </div>
      </div>

      {showExport && (
--- a/app/components/emoji.tsx
+++ b/app/components/emoji.tsx
@@ -10,10 +10,7 @@ import BotIcon from "../icons/bot.svg";
 import BlackBotIcon from "../icons/black-bot.svg";

 export function getEmojiUrl(unified: string, style: EmojiStyle) {
-  // Whoever owns this Content Delivery Network (CDN), I am using your CDN to serve emojis
-  // Old CDN broken, so I had to switch to this one
-  // Author: https://github.com/H0llyW00dzZ
-  return `https://fastly.jsdelivr.net/npm/emoji-datasource-apple/img/${style}/64/${unified}.png`;
+  return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
 }

 export function AvatarPicker(props: {
@@ -21,7 +18,6 @@ export function AvatarPicker(props: {
 }) {
  return (
    <EmojiPicker
-      width={"100%"}
      lazyLoadEmojis
      theme={EmojiTheme.AUTO}
      getEmojiUrl={getEmojiUrl}
--- a/app/components/exporter.module.scss
+++ b/app/components/exporter.module.scss
@@ -2,9 +2,6 @@
  &-body {
    margin-top: 20px;
  }
-  div:not(.no-dark) > svg {
-    filter: invert(0.5);
-  }
 }

 .export-content {
@@ -97,7 +94,6 @@

  button {
    flex-grow: 1;
-
    &:not(:last-child) {
      margin-right: 10px;
    }
@@ -194,59 +190,6 @@
        pre {
          overflow: hidden;
        }
-
-        .message-image {
-          width: 100%;
-          margin-top: 10px;
-        }
-
-        .message-images {
-          display: grid;
-          justify-content: left;
-          grid-gap: 10px;
-          grid-template-columns: repeat(var(--image-count), auto);
-          margin-top: 10px;
-        }
-
-        @media screen and (max-width: 600px) {
-          $image-width: calc(calc(100vw/2)/var(--image-count));
-
-          .message-image-multi {
-            width: $image-width;
-            height: $image-width;
-          }
-
-          .message-image {
-            max-width: calc(100vw/3*2);
-          }
-        }
-
-        @media screen and (min-width: 600px) {
-          $max-image-width: calc(900px/3*2/var(--image-count));
-          $image-width: calc(80vw/3*2/var(--image-count));
-
-          .message-image-multi {
-            width: $image-width;
-            height: $image-width;
-            max-width: $max-image-width;
-            max-height: $max-image-width;
-          }
-
-          .message-image {
-            max-width: calc(100vw/3*2);
-          }
-        }
-
-        .message-image-multi {
-          object-fit: cover;
-        }
-
-        .message-image,
-        .message-image-multi {
-          box-sizing: border-box;
-          border-radius: 10px;
-          border: rgba($color: #888, $alpha: 0.2) 1px solid;
-        }
      }

      &-assistant {
@@ -270,5 +213,6 @@
    }
  }

-  .default-theme {}
-}
+  .default-theme {
+  }
+}
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -12,12 +12,7 @@ import {
  showToast,
 } from "./ui-lib";
 import { IconButton } from "./button";
-import {
-  copyToClipboard,
-  downloadAs,
-  getMessageImages,
-  useMobileScreen,
-} from "../utils";
+import { copyToClipboard, downloadAs, useMobileScreen } from "../utils";

 import CopyIcon from "../icons/copy.svg";
 import LoadingIcon from "../icons/three-dots.svg";
@@ -34,13 +29,10 @@ import NextImage from "next/image";

 import { toBlob, toPng } from "html-to-image";
 import { DEFAULT_MASK_AVATAR } from "../store/mask";
-
+import { api } from "../client/api";
 import { prettyObject } from "../utils/format";
-import { EXPORT_MESSAGE_CLASS_NAME, ModelProvider } from "../constant";
+import { EXPORT_MESSAGE_CLASS_NAME } from "../constant";
 import { getClientConfig } from "../config/client";
-import { ClientApi } from "../client/api";
-import { getMessageTextContent } from "../utils";
-import { identifyDefaultClaudeModel } from "../utils/checkers";

 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  loading: () => <LoadingIcon />,
@@ -294,7 +286,7 @@ export function RenderExport(props: {
          id={`${m.role}:${i}`}
          className={EXPORT_MESSAGE_CLASS_NAME}
        >
-          <Markdown content={getMessageTextContent(m)} defaultShow />
+          <Markdown content={m.content} defaultShow />
        </div>
      ))}
    </div>
@@ -309,19 +301,10 @@ export function PreviewActions(props: {
 }) {
  const [loading, setLoading] = useState(false);
  const [shouldExport, setShouldExport] = useState(false);
-  const config = useAppConfig();
+
  const onRenderMsgs = (msgs: ChatMessage[]) => {
    setShouldExport(false);

-    var api: ClientApi;
-    if (config.modelConfig.model.startsWith("gemini")) {
-      api = new ClientApi(ModelProvider.GeminiPro);
-    } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
-      api = new ClientApi(ModelProvider.Claude);
-    } else {
-      api = new ClientApi(ModelProvider.GPT);
-    }
-
    api
      .share(msgs)
      .then((res) => {
@@ -547,7 +530,7 @@ export function ImagePreviewer(props: {
          </div>

          <div>
-            <div className={styles["main-title"]}>NextChat</div>
+            <div className={styles["main-title"]}>ChatGPT Next Web</div>
            <div className={styles["sub-title"]}>
              github.com/Yidadaa/ChatGPT-Next-Web
            </div>
@@ -589,37 +572,10 @@ export function ImagePreviewer(props: {

              <div className={styles["body"]}>
                <Markdown
-                  content={getMessageTextContent(m)}
+                  content={m.content}
                  fontSize={config.fontSize}
                  defaultShow
                />
-                {getMessageImages(m).length == 1 && (
-                  <img
-                    key={i}
-                    src={getMessageImages(m)[0]}
-                    alt="message"
-                    className={styles["message-image"]}
-                  />
-                )}
-                {getMessageImages(m).length > 1 && (
-                  <div
-                    className={styles["message-images"]}
-                    style={
-                      {
-                        "--image-count": getMessageImages(m).length,
-                      } as React.CSSProperties
-                    }
-                  >
-                    {getMessageImages(m).map((src, i) => (
-                      <img
-                        key={i}
-                        src={src}
-                        alt="message"
-                        className={styles["message-image-multi"]}
-                      />
-                    ))}
-                  </div>
-                )}
              </div>
            </div>
          );
@@ -638,10 +594,8 @@ export function MarkdownPreviewer(props: {
    props.messages
      .map((m) => {
        return m.role === "user"
-          ? `## ${Locale.Export.MessageFromYou}:\n${getMessageTextContent(m)}`
-          : `## ${Locale.Export.MessageFromChatGPT}:\n${getMessageTextContent(
-              m,
-            ).trim()}`;
+          ? `## ${Locale.Export.MessageFromYou}:\n${m.content}`
+          : `## ${Locale.Export.MessageFromChatGPT}:\n${m.content.trim()}`;
      })
      .join("\n\n");

--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -2,6 +2,8 @@

 require("../polyfill");

+import "regenerator-runtime/runtime";
+
 import { useState, useEffect } from "react";

 import styles from "./home.module.scss";
@@ -12,7 +14,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import { getCSSVar, useMobileScreen } from "../utils";

 import dynamic from "next/dynamic";
-import { ModelProvider, Path, SlotID } from "../constant";
+import { Path, SlotID } from "../constant";
 import { ErrorBoundary } from "./error";

 import { getISOLang, getLang } from "../locales";
@@ -27,9 +29,8 @@ import { SideBar } from "./sidebar";
 import { useAppConfig } from "../store/config";
 import { AuthPage } from "./auth";
 import { getClientConfig } from "../config/client";
-import { ClientApi } from "../client/api";
+import { api } from "../client/api";
 import { useAccessStore } from "../store";
-import { identifyDefaultClaudeModel } from "../utils/checkers";

 export function Loading(props: { noLogo?: boolean }) {
  return (
@@ -171,14 +172,6 @@ function Screen() {
 export function useLoadData() {
  const config = useAppConfig();

-  var api: ClientApi;
-  if (config.modelConfig.model.startsWith("gemini")) {
-    api = new ClientApi(ModelProvider.GeminiPro);
-  } else if (identifyDefaultClaudeModel(config.modelConfig.model)) {
-    api = new ClientApi(ModelProvider.Claude);
-  } else {
-    api = new ClientApi(ModelProvider.GPT);
-  }
  useEffect(() => {
    (async () => {
      const models = await api.llm.models();
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -116,28 +116,11 @@ function escapeDollarNumber(text: string) {
  return escapedText;
 }

-function escapeBrackets(text: string) {
-  const pattern =
-    /(```[\s\S]*?```|`.*?`)|\\\[([\s\S]*?[^\\])\\\]|\\\((.*?)\\\)/g;
-  return text.replace(
-    pattern,
-    (match, codeBlock, squareBracket, roundBracket) => {
-      if (codeBlock) {
-        return codeBlock;
-      } else if (squareBracket) {
-        return `$$${squareBracket}$$`;
-      } else if (roundBracket) {
-        return `$${roundBracket}$`;
-      }
-      return match;
-    },
-  );
-}
-
 function _MarkDownContent(props: { content: string }) {
-  const escapedContent = useMemo(() => {
-    return escapeBrackets(escapeDollarNumber(props.content));
-  }, [props.content]);
+  const escapedContent = useMemo(
+    () => escapeDollarNumber(props.content),
+    [props.content],
+  );

  return (
    <ReactMarkdown
@@ -177,14 +160,13 @@ export function Markdown(
    fontSize?: number;
    parentRef?: RefObject<HTMLDivElement>;
    defaultShow?: boolean;
-    className?: string;
  } & React.DOMAttributes<HTMLDivElement>,
 ) {
  const mdRef = useRef<HTMLDivElement>(null);

  return (
    <div
-      className={`markdown-body ${props.className}`}
+      className="markdown-body"
      style={{
        fontSize: `${props.fontSize ?? 14}px`,
      }}
--- a/app/components/mask.module.scss
+++ b/app/components/mask.module.scss
@@ -4,10 +4,6 @@
  display: flex;
  flex-direction: column;

-  div:not(.no-dark) > svg {
-    filter: invert(0.5);
-  }
-
  .mask-page-body {
    padding: 20px;
    overflow-y: auto;
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -1,4 +1,5 @@
 import { IconButton } from "./button";
+import { ErrorBoundary } from "./error";

 import styles from "./mask.module.scss";

@@ -21,7 +22,7 @@ import {
  useAppConfig,
  useChatStore,
 } from "../store";
-import { MultimodalContent, ROLES } from "../client/api";
+import { ROLES } from "../client/api";
 import {
  Input,
  List,
@@ -37,12 +38,7 @@ import { useNavigate } from "react-router-dom";

 import chatStyle from "./chat.module.scss";
 import { useEffect, useState } from "react";
-import {
-  copyToClipboard,
-  downloadAs,
-  getMessageImages,
-  readFromFile,
-} from "../utils";
+import { copyToClipboard, downloadAs, readFromFile } from "../utils";
 import { Updater } from "../typing";
 import { ModelConfigList } from "./model-config";
 import { FileName, Path } from "../constant";
@@ -54,8 +50,6 @@ import {
  Draggable,
  OnDragEndResponder,
 } from "@hello-pangea/dnd";
-import { getMessageTextContent } from "../utils";
-import useMobileScreen from "@/app/hooks/useMobileScreen";

 // drag and drop helper function
 function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {
@@ -250,7 +244,7 @@ function ContextPromptItem(props: {
        </>
      )}
      <Input
-        value={getMessageTextContent(props.prompt)}
+        value={props.prompt.content}
        type="text"
        className={chatStyle["context-content"]}
        rows={focusingInput ? 5 : 1}
@@ -295,18 +289,7 @@ export function ContextPrompts(props: {
  };

  const updateContextPrompt = (i: number, prompt: ChatMessage) => {
-    props.updateContext((context) => {
-      const images = getMessageImages(context[i]);
-      context[i] = prompt;
-      if (images.length > 0) {
-        const text = getMessageTextContent(context[i]);
-        const newContext: MultimodalContent[] = [{ type: "text", text }];
-        for (const img of images) {
-          newContext.push({ type: "image_url", image_url: { url: img } });
-        }
-        context[i].content = newContext;
-      }
-    });
+    props.updateContext((context) => (context[i] = prompt));
  };

  const onDragEnd: OnDragEndResponder = (result) => {
@@ -398,22 +381,13 @@ export function ContextPrompts(props: {
  );
 }

-export function MaskPage(props: { className?: string }) {
+export function MaskPage() {
  const navigate = useNavigate();

  const maskStore = useMaskStore();
  const chatStore = useChatStore();

-  const [filterLang, setFilterLang] = useState<Lang | undefined>(
-    () => localStorage.getItem("Mask-language") as Lang | undefined,
-  );
-  useEffect(() => {
-    if (filterLang) {
-      localStorage.setItem("Mask-language", filterLang);
-    } else {
-      localStorage.removeItem("Mask-language");
-    }
-  }, [filterLang]);
+  const [filterLang, setFilterLang] = useState<Lang>();

  const allMasks = maskStore
    .getAll()
@@ -466,13 +440,8 @@ export function MaskPage(props: { className?: string }) {
  };

  return (
-    <>
-      <div
-        className={`
-          ${styles["mask-page"]} 
-          ${props.className}
-          `}
-      >
+    <ErrorBoundary>
+      <div className={styles["mask-page"]}>
        <div className="window-header">
          <div className="window-header-title">
            <div className="window-header-main-title">
@@ -650,6 +619,6 @@ export function MaskPage(props: { className?: string }) {
          </Modal>
        </div>
      )}
-    </>
+    </ErrorBoundary>
  );
 }
--- a/app/components/message-selector.tsx
+++ b/app/components/message-selector.tsx
@@ -7,7 +7,6 @@ import { MaskAvatar } from "./mask";
 import Locale from "../locales";

 import styles from "./message-selector.module.scss";
-import { getMessageTextContent } from "../utils";

 function useShiftRange() {
  const [startIndex, setStartIndex] = useState<number>();
@@ -104,9 +103,7 @@ export function MessageSelector(props: {
    const searchResults = new Set<string>();
    if (text.length > 0) {
      messages.forEach((m) =>
-        getMessageTextContent(m).includes(text)
-          ? searchResults.add(m.id!)
-          : null,
+        m.content.includes(text) ? searchResults.add(m.id!) : null,
      );
    }
    setSearchIds(searchResults);
@@ -222,12 +219,12 @@ export function MessageSelector(props: {
                  {new Date(m.date).toLocaleString()}
                </div>
                <div className={`${styles["content"]} one-line`}>
-                  {getMessageTextContent(m)}
+                  {m.content}
                </div>
              </div>

              <div className={styles["checkbox"]}>
-                <input type="checkbox" checked={isSelected} readOnly></input>
+                <input type="checkbox" checked={isSelected}></input>
              </div>
            </div>
          );
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -29,7 +29,7 @@ export function ModelConfigList(props: {
            .filter((v) => v.available)
            .map((v, i) => (
              <option value={v.name} key={i}>
-                {v.displayName}({v.provider?.providerName})
+                {v.displayName}
              </option>
            ))}
        </Select>
@@ -91,84 +91,79 @@ export function ModelConfigList(props: {
          }
        ></input>
      </ListItem>
+      <ListItem
+        title={Locale.Settings.PresencePenalty.Title}
+        subTitle={Locale.Settings.PresencePenalty.SubTitle}
+      >
+        <InputRange
+          value={props.modelConfig.presence_penalty?.toFixed(1)}
+          min="-2"
+          max="2"
+          step="0.1"
+          onChange={(e) => {
+            props.updateConfig(
+              (config) =>
+                (config.presence_penalty =
+                  ModalConfigValidator.presence_penalty(
+                    e.currentTarget.valueAsNumber,
+                  )),
+            );
+          }}
+        ></InputRange>
+      </ListItem>

-      {props.modelConfig.model.startsWith("gemini") ? null : (
-        <>
-          <ListItem
-            title={Locale.Settings.PresencePenalty.Title}
-            subTitle={Locale.Settings.PresencePenalty.SubTitle}
-          >
-            <InputRange
-              value={props.modelConfig.presence_penalty?.toFixed(1)}
-              min="-2"
-              max="2"
-              step="0.1"
-              onChange={(e) => {
-                props.updateConfig(
-                  (config) =>
-                    (config.presence_penalty =
-                      ModalConfigValidator.presence_penalty(
-                        e.currentTarget.valueAsNumber,
-                      )),
-                );
-              }}
-            ></InputRange>
-          </ListItem>
+      <ListItem
+        title={Locale.Settings.FrequencyPenalty.Title}
+        subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
+      >
+        <InputRange
+          value={props.modelConfig.frequency_penalty?.toFixed(1)}
+          min="-2"
+          max="2"
+          step="0.1"
+          onChange={(e) => {
+            props.updateConfig(
+              (config) =>
+                (config.frequency_penalty =
+                  ModalConfigValidator.frequency_penalty(
+                    e.currentTarget.valueAsNumber,
+                  )),
+            );
+          }}
+        ></InputRange>
+      </ListItem>

-          <ListItem
-            title={Locale.Settings.FrequencyPenalty.Title}
-            subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
-          >
-            <InputRange
-              value={props.modelConfig.frequency_penalty?.toFixed(1)}
-              min="-2"
-              max="2"
-              step="0.1"
-              onChange={(e) => {
-                props.updateConfig(
-                  (config) =>
-                    (config.frequency_penalty =
-                      ModalConfigValidator.frequency_penalty(
-                        e.currentTarget.valueAsNumber,
-                      )),
-                );
-              }}
-            ></InputRange>
-          </ListItem>
+      <ListItem
+        title={Locale.Settings.InjectSystemPrompts.Title}
+        subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
+      >
+        <input
+          type="checkbox"
+          checked={props.modelConfig.enableInjectSystemPrompts}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) =>
+                (config.enableInjectSystemPrompts = e.currentTarget.checked),
+            )
+          }
+        ></input>
+      </ListItem>

-          <ListItem
-            title={Locale.Settings.InjectSystemPrompts.Title}
-            subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
-          >
-            <input
-              type="checkbox"
-              checked={props.modelConfig.enableInjectSystemPrompts}
-              onChange={(e) =>
-                props.updateConfig(
-                  (config) =>
-                    (config.enableInjectSystemPrompts =
-                      e.currentTarget.checked),
-                )
-              }
-            ></input>
-          </ListItem>
+      <ListItem
+        title={Locale.Settings.InputTemplate.Title}
+        subTitle={Locale.Settings.InputTemplate.SubTitle}
+      >
+        <input
+          type="text"
+          value={props.modelConfig.template}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) => (config.template = e.currentTarget.value),
+            )
+          }
+        ></input>
+      </ListItem>

-          <ListItem
-            title={Locale.Settings.InputTemplate.Title}
-            subTitle={Locale.Settings.InputTemplate.SubTitle}
-          >
-            <input
-              type="text"
-              value={props.modelConfig.template}
-              onChange={(e) =>
-                props.updateConfig(
-                  (config) => (config.template = e.currentTarget.value),
-                )
-              }
-            ></input>
-          </ListItem>
-        </>
-      )}
      <ListItem
        title={Locale.Settings.HistoryCount.Title}
        subTitle={Locale.Settings.HistoryCount.SubTitle}
--- a/app/components/new-chat.module.scss
+++ b/app/components/new-chat.module.scss
@@ -8,10 +8,6 @@
  justify-content: center;
  flex-direction: column;

-  div:not(.no-dark) > svg {
-    filter: invert(0.5);
-  }
-
  .mask-header {
    display: flex;
    justify-content: space-between;
--- a/app/components/new-chat.tsx
+++ b/app/components/new-chat.tsx
@@ -16,7 +16,6 @@ import { MaskAvatar } from "./mask";
 import { useCommand } from "../command";
 import { showConfirm } from "./ui-lib";
 import { BUILTIN_MASK_STORE } from "../masks";
-import useMobileScreen from "@/app/hooks/useMobileScreen";

 function MaskItem(props: { mask: Mask; onClick?: () => void }) {
  return (
@@ -72,7 +71,7 @@ function useMaskGroup(masks: Mask[]) {
  return groups;
 }

-export function NewChat(props: { className?: string }) {
+export function NewChat() {
  const chatStore = useChatStore();
  const maskStore = useMaskStore();

@@ -111,15 +110,8 @@ export function NewChat(props: { className?: string }) {
    }
  }, [groups]);

-  const isMobileScreen = useMobileScreen();
-
  return (
-    <div
-      className={`
-      ${styles["new-chat"]}
-      ${props.className}
-      `}
-    >
+    <div className={styles["new-chat"]}>
      <div className={styles["mask-header"]}>
        <IconButton
          icon={<LeftIcon />}
--- a/app/components/settings.module.scss
+++ b/app/components/settings.module.scss
@@ -5,8 +5,6 @@

 .avatar {
  cursor: pointer;
-  position: relative;
-  z-index: 1;
 }

 .edit-prompt-modal {
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -51,9 +51,7 @@ import Locale, {
 import { copyToClipboard } from "../utils";
 import Link from "next/link";
 import {
-  Anthropic,
  Azure,
-  Google,
  OPENAI_BASE_URL,
  Path,
  RELEASE_URL,
@@ -269,7 +267,7 @@ function CheckButton() {
  const syncStore = useSyncStore();

  const couldCheck = useMemo(() => {
-    return syncStore.cloudSync();
+    return syncStore.coundSync();
  }, [syncStore]);

  const [checkState, setCheckState] = useState<
@@ -473,7 +471,7 @@ function SyncItems() {
  const promptStore = usePromptStore();
  const maskStore = useMaskStore();
  const couldSync = useMemo(() => {
-    return syncStore.cloudSync();
+    return syncStore.coundSync();
  }, [syncStore]);

  const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
@@ -585,7 +583,6 @@ export function Settings() {
  const accessStore = useAccessStore();
  const shouldHideBalanceQuery = useMemo(() => {
    const isOpenAiUrl = accessStore.openaiUrl.includes(OPENAI_BASE_URL);
-
    return (
      accessStore.hideBalanceQuery ||
      isOpenAiUrl ||
@@ -638,12 +635,6 @@ export function Settings() {
        navigate(Path.Home);
      }
    };
-    if (clientConfig?.isApp) {
-      // Force to set custom endpoint to true if it's app
-      accessStore.update((state) => {
-        state.useCustomConfig = true;
-      });
-    }
    document.addEventListener("keydown", keydownEvent);
    return () => {
      document.removeEventListener("keydown", keydownEvent);
@@ -694,9 +685,7 @@ export function Settings() {
            >
              <div
                className={styles.avatar}
-                onClick={() => {
-                  setShowEmojiPicker(!showEmojiPicker);
-                }}
+                onClick={() => setShowEmojiPicker(true)}
              >
                <Avatar avatar={config.avatar} />
              </div>
@@ -920,26 +909,21 @@ export function Settings() {

          {!accessStore.hideUserApiKey && (
            <>
-              {
-                // Conditionally render the following ListItem based on clientConfig.isApp
-                !clientConfig?.isApp && ( // only show if isApp is false
-                  <ListItem
-                    title={Locale.Settings.Access.CustomEndpoint.Title}
-                    subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle}
-                  >
-                    <input
-                      type="checkbox"
-                      checked={accessStore.useCustomConfig}
-                      onChange={(e) =>
-                        accessStore.update(
-                          (access) =>
-                            (access.useCustomConfig = e.currentTarget.checked),
-                        )
-                      }
-                    ></input>
-                  </ListItem>
-                )
-              }
+              <ListItem
+                title={Locale.Settings.Access.CustomEndpoint.Title}
+                subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle}
+              >
+                <input
+                  type="checkbox"
+                  checked={accessStore.useCustomConfig}
+                  onChange={(e) =>
+                    accessStore.update(
+                      (access) =>
+                        (access.useCustomConfig = e.currentTarget.checked),
+                    )
+                  }
+                ></input>
+              </ListItem>
              {accessStore.useCustomConfig && (
                <>
                  <ListItem
@@ -964,7 +948,7 @@ export function Settings() {
                    </Select>
                  </ListItem>

-                  {accessStore.provider === ServiceProvider.OpenAI && (
+                  {accessStore.provider === "OpenAI" ? (
                    <>
                      <ListItem
                        title={Locale.Settings.Access.OpenAI.Endpoint.Title}
@@ -1003,8 +987,7 @@ export function Settings() {
                        />
                      </ListItem>
                    </>
-                  )}
-                  {accessStore.provider === ServiceProvider.Azure && (
+                  ) : (
                    <>
                      <ListItem
                        title={Locale.Settings.Access.Azure.Endpoint.Title}
@@ -1064,135 +1047,12 @@ export function Settings() {
                      </ListItem>
                    </>
                  )}
-                  {accessStore.provider === ServiceProvider.Google && (
-                    <>
-                      <ListItem
-                        title={Locale.Settings.Access.Google.Endpoint.Title}
-                        subTitle={
-                          Locale.Settings.Access.Google.Endpoint.SubTitle +
-                          Google.ExampleEndpoint
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.googleUrl}
-                          placeholder={Google.ExampleEndpoint}
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.googleUrl = e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Google.ApiKey.Title}
-                        subTitle={Locale.Settings.Access.Google.ApiKey.SubTitle}
-                      >
-                        <PasswordInput
-                          value={accessStore.googleApiKey}
-                          type="text"
-                          placeholder={
-                            Locale.Settings.Access.Google.ApiKey.Placeholder
-                          }
-                          onChange={(e) => {
-                            accessStore.update(
-                              (access) =>
-                                (access.googleApiKey = e.currentTarget.value),
-                            );
-                          }}
-                        />
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Google.ApiVersion.Title}
-                        subTitle={
-                          Locale.Settings.Access.Google.ApiVersion.SubTitle
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.googleApiVersion}
-                          placeholder="2023-08-01-preview"
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.googleApiVersion =
-                                  e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                    </>
-                  )}
-                  {accessStore.provider === ServiceProvider.Anthropic && (
-                    <>
-                      <ListItem
-                        title={Locale.Settings.Access.Anthropic.Endpoint.Title}
-                        subTitle={
-                          Locale.Settings.Access.Anthropic.Endpoint.SubTitle +
-                          Anthropic.ExampleEndpoint
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.anthropicUrl}
-                          placeholder={Anthropic.ExampleEndpoint}
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.anthropicUrl = e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Anthropic.ApiKey.Title}
-                        subTitle={
-                          Locale.Settings.Access.Anthropic.ApiKey.SubTitle
-                        }
-                      >
-                        <PasswordInput
-                          value={accessStore.anthropicApiKey}
-                          type="text"
-                          placeholder={
-                            Locale.Settings.Access.Anthropic.ApiKey.Placeholder
-                          }
-                          onChange={(e) => {
-                            accessStore.update(
-                              (access) =>
-                                (access.anthropicApiKey =
-                                  e.currentTarget.value),
-                            );
-                          }}
-                        />
-                      </ListItem>
-                      <ListItem
-                        title={Locale.Settings.Access.Anthropic.ApiVerion.Title}
-                        subTitle={
-                          Locale.Settings.Access.Anthropic.ApiVerion.SubTitle
-                        }
-                      >
-                        <input
-                          type="text"
-                          value={accessStore.anthropicApiVersion}
-                          placeholder={Anthropic.Vision}
-                          onChange={(e) =>
-                            accessStore.update(
-                              (access) =>
-                                (access.anthropicApiVersion =
-                                  e.currentTarget.value),
-                            )
-                          }
-                        ></input>
-                      </ListItem>
-                    </>
-                  )}
                </>
              )}
            </>
          )}

-          {!shouldHideBalanceQuery && !clientConfig?.isApp ? (
+          {!shouldHideBalanceQuery ? (
            <ListItem
              title={Locale.Settings.Usage.Title}
              subTitle={
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -155,7 +155,7 @@ export function SideBar(props: { className?: string }) {
    >
      <div className={styles["sidebar-header"]} data-tauri-drag-region>
        <div className={styles["sidebar-title"]} data-tauri-drag-region>
-          NextChat
+          ChatGPT Next
        </div>
        <div className={styles["sidebar-sub-title"]}>
          Build your own AI assistant.
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -14,24 +14,17 @@

 .popover-content {
  position: absolute;
-  width: 350px;
  animation: slide-in 0.3s ease;
  right: 0;
  top: calc(100% + 10px);
 }
-@media screen and (max-width: 600px) {
-  .popover-content {
-    width: auto;
-  }
-}
+
 .popover-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(5px);
 }

 .list-item {
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -26,10 +26,10 @@ export function Popover(props: {
    <div className={styles.popover}>
      {props.children}
      {props.open && (
-        <div className={styles["popover-mask"]} onClick={props.onClose}></div>
-      )}
-      {props.open && (
-        <div className={styles["popover-content"]}>{props.content}</div>
+        <div className={styles["popover-content"]}>
+          <div className={styles["popover-mask"]} onClick={props.onClose}></div>
+          {props.content}
+        </div>
      )}
    </div>
  );
@@ -101,7 +101,6 @@ interface ModalProps {
  defaultMax?: boolean;
  footer?: React.ReactNode;
  onClose?: () => void;
-  className?: string;
 }
 export function Modal(props: ModalProps) {
  useEffect(() => {
@@ -123,14 +122,14 @@ export function Modal(props: ModalProps) {

  return (
    <div
-      className={`${styles["modal-container"]} ${
-        isMax && styles["modal-container-max"]
-      } ${props.className ?? ""}`}
+      className={
+        styles["modal-container"] + ` ${isMax && styles["modal-container-max"]}`
+      }
    >
-      <div className={`${styles["modal-header"]} new-header follow-parent-svg`}>
-        <div className={`${styles["modal-title"]}`}>{props.title}</div>
+      <div className={styles["modal-header"]}>
+        <div className={styles["modal-title"]}>{props.title}</div>

-        <div className={`${styles["modal-header-actions"]}`}>
+        <div className={styles["modal-header-actions"]}>
          <div
            className={styles["modal-header-action"]}
            onClick={() => setMax(!isMax)}
@@ -148,11 +147,11 @@ export function Modal(props: ModalProps) {

      <div className={styles["modal-content"]}>{props.children}</div>

-      <div className={`${styles["modal-footer"]} new-footer`}>
+      <div className={styles["modal-footer"]}>
        {props.footer}
        <div className={styles["modal-actions"]}>
          {props.actions?.map((action, i) => (
-            <div key={i} className={`${styles["modal-action"]} new-btn`}>
+            <div key={i} className={styles["modal-action"]}>
              {action}
            </div>
          ))}
--- a/app/components/voice/voice.module.scss
+++ b/app/components/voice/voice.module.scss
@@ -0,0 +1,55 @@
+.voice-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba($color: #000000, $alpha: 0.9);
+  color: white;
+  backdrop-filter: blur(10px);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .top,
+  .bottom {
+    flex: 1;
+    padding: 20px;
+    font-size: 1.5em;
+    color: rgba($color: #fff, $alpha: 0.6);
+    overflow: auto;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .active {
+    background-color: rgba($color: #00ff00, $alpha: 0.2);
+  }
+
+  .top.active {
+    background-color: white;
+
+    &::after {
+      content: "☁️";
+      color: black;
+    }
+  }
+
+  .top:hover {
+    background-color: black;
+  }
+
+  .top {
+  }
+
+  .center {
+    height: 2px;
+    background-color: white;
+    opacity: 0.2;
+    width: 100%;
+  }
+
+  .bottom {
+  }
+}
--- a/app/components/voice/voice.tsx
+++ b/app/components/voice/voice.tsx
@@ -0,0 +1,117 @@
+import { useChatStore } from "@/app/store";
+import style from "./voice.module.scss";
+import { useEffect, useMemo, useRef, useState } from "react";
+import SpeechRecognition, {
+  useSpeechRecognition,
+} from "react-speech-recognition";
+import { IconButton } from "../button";
+import { api } from "@/app/client/api";
+
+function findLast<T>(array: T[], predictor: (_: T) => boolean) {
+  for (let i = array.length - 1; i >= 0; i -= 1) {
+    if (predictor(array[i])) {
+      return array[i];
+    }
+  }
+
+  return null;
+}
+
+export function VoicePage() {
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+  const lastAssistantMessage = useMemo(
+    () => findLast(session.messages, (m) => m.role === "assistant"),
+    [session.messages],
+  );
+  const lastUserMessage = useMemo(
+    () => findLast(session.messages, (m) => m.role === "user"),
+    [session.messages],
+  );
+  const speech = useSpeechRecognition({
+    clearTranscriptOnListen: true,
+  });
+
+  if (!speech.browserSupportsSpeechRecognition) {
+    throw Error("your browser does not support speech recognition api");
+  }
+
+  function startVoice() {
+    SpeechRecognition.startListening({
+      language: "zh-CN",
+    });
+    sourceNodeRef.current?.stop();
+  }
+
+  function stopVoice() {
+    SpeechRecognition.stopListening();
+  }
+
+  useEffect(() => {
+    if (!speech.listening) {
+      if (
+        speech.finalTranscript.length > 0 &&
+        speech.finalTranscript !== lastUserMessage?.content
+      ) {
+        chatStore.onUserInput(speech.finalTranscript);
+      }
+    }
+  }, [speech.listening]);
+
+  const [loadingTTS, setLoadingTTS] = useState(false);
+  const sourceNodeRef = useRef<AudioBufferSourceNode>();
+
+  function speak() {
+    const content = lastAssistantMessage?.content;
+    if (!content) return;
+    setLoadingTTS(true);
+    api.llm.speech(content).then(async (arrayBuffer) => {
+      const audioContext = new (window.AudioContext ||
+        (window as any).webkitAudioContext)();
+      const source = audioContext.createBufferSource();
+      try {
+        sourceNodeRef.current?.stop();
+      } catch {}
+      sourceNodeRef.current = source;
+      // 设置音频源的 buffer 属性
+      source.buffer = await audioContext.decodeAudioData(arrayBuffer);
+      // 连接到默认的输出设备（通常是扬声器）
+      source.connect(audioContext.destination);
+      // 开始播放
+      setLoadingTTS(false);
+      source.start(0);
+    });
+  }
+
+  const lastStream = useRef(false);
+  useEffect(() => {
+    if (
+      lastAssistantMessage?.streaming !== lastStream.current &&
+      lastStream.current
+    ) {
+      speak();
+    }
+    lastStream.current = !!lastAssistantMessage?.streaming;
+  }, [lastAssistantMessage?.streaming]);
+
+  return (
+    <div className={style["voice-page"]}>
+      <div className={style["top"] + ` ${style["active"]}`} onClick={speak}>
+        {lastAssistantMessage?.content}
+      </div>
+      <div className={style["center"]}></div>
+      <div
+        className={style["bottom"] + ` ${speech.listening && style["active"]}`}
+        onClick={() => {
+          if (speech.listening) {
+            stopVoice();
+          } else {
+            startVoice();
+          }
+        }}
+      >
+        {speech.transcript || lastUserMessage?.content}
+      </div>
+    </div>
+  );
+}
--- a/app/config/server.ts
+++ b/app/config/server.ts
@@ -21,19 +21,11 @@ declare global {
      ENABLE_BALANCE_QUERY?: string; // allow user to query balance or not
      DISABLE_FAST_LINK?: string; // disallow parse settings from url or not
      CUSTOM_MODELS?: string; // to control custom models
-      DEFAULT_MODEL?: string; // to cnntrol default model in every new chat window

      // azure only
      AZURE_URL?: string; // https://{azure-url}/openai/deployments/{deploy-name}
      AZURE_API_KEY?: string;
      AZURE_API_VERSION?: string;
-
-      // google only
-      GOOGLE_API_KEY?: string;
-      GOOGLE_URL?: string;
-
-      // google tag manager
-      GTM_ID?: string;
    }
  }
 }
@@ -60,35 +52,19 @@ export const getServerSideConfig = () => {

  const disableGPT4 = !!process.env.DISABLE_GPT4;
  let customModels = process.env.CUSTOM_MODELS ?? "";
-  let defaultModel = process.env.DEFAULT_MODEL ?? "";

  if (disableGPT4) {
    if (customModels) customModels += ",";
    customModels += DEFAULT_MODELS.filter((m) => m.name.startsWith("gpt-4"))
      .map((m) => "-" + m.name)
      .join(",");
-    if (defaultModel.startsWith("gpt-4")) defaultModel = "";
  }

  const isAzure = !!process.env.AZURE_URL;
-  const isGoogle = !!process.env.GOOGLE_API_KEY;
-  const isAnthropic = !!process.env.ANTHROPIC_API_KEY;
-
-  const apiKeyEnvVar = process.env.OPENAI_API_KEY ?? "";
-  const apiKeys = apiKeyEnvVar.split(",").map((v) => v.trim());
-  const randomIndex = Math.floor(Math.random() * apiKeys.length);
-  const apiKey = apiKeys[randomIndex];
-  console.log(
-    `[Server Config] using ${randomIndex + 1} of ${apiKeys.length} api key`,
-  );
-
-  const whiteWebDevEndpoints = (process.env.WHITE_WEBDEV_ENDPOINTS ?? "").split(
-    ",",
-  );

  return {
    baseUrl: process.env.BASE_URL,
-    apiKey,
+    apiKey: process.env.OPENAI_API_KEY,
    openaiOrgId: process.env.OPENAI_ORG_ID,

    isAzure,
@@ -96,17 +72,6 @@ export const getServerSideConfig = () => {
    azureApiKey: process.env.AZURE_API_KEY,
    azureApiVersion: process.env.AZURE_API_VERSION,

-    isGoogle,
-    googleApiKey: process.env.GOOGLE_API_KEY,
-    googleUrl: process.env.GOOGLE_URL,
-
-    isAnthropic,
-    anthropicApiKey: process.env.ANTHROPIC_API_KEY,
-    anthropicApiVersion: process.env.ANTHROPIC_API_VERSION,
-    anthropicUrl: process.env.ANTHROPIC_URL,
-
-    gtmId: process.env.GTM_ID,
-
    needCode: ACCESS_CODES.size > 0,
    code: process.env.CODE,
    codes: ACCESS_CODES,
@@ -119,7 +84,5 @@ export const getServerSideConfig = () => {
    hideBalanceQuery: !process.env.ENABLE_BALANCE_QUERY,
    disableFastLink: !!process.env.DISABLE_FAST_LINK,
    customModels,
-    defaultModel,
-    whiteWebDevEndpoints,
  };
 };
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -1,3 +1,6 @@
+import { GPTText } from "./utils/prompts/gpt-text";
+import { GPTVoice } from "./utils/prompts/gpt-voice";
+
 export const OWNER = "Yidadaa";
 export const REPO = "ChatGPT-Next-Web";
 export const REPO_URL = `https://github.com/${OWNER}/${REPO}`;
@@ -8,11 +11,9 @@ export const FETCH_COMMIT_URL = `https://api.github.com/repos/${OWNER}/${REPO}/c
 export const FETCH_TAG_URL = `https://api.github.com/repos/${OWNER}/${REPO}/tags?per_page=1`;
 export const RUNTIME_CONFIG_DOM = "danger-runtime-config";

-export const DEFAULT_API_HOST = "https://api.nextchat.dev";
+export const DEFAULT_CORS_HOST = "https://a.nextweb.fun";
+export const DEFAULT_API_HOST = `${DEFAULT_CORS_HOST}/api/proxy`;
 export const OPENAI_BASE_URL = "https://api.openai.com";
-export const ANTHROPIC_BASE_URL = "https://api.anthropic.com";
-
-export const GEMINI_BASE_URL = "https://generativelanguage.googleapis.com/";

 export enum Path {
  Home = "/",
@@ -24,9 +25,8 @@ export enum Path {
 }

 export enum ApiPath {
-  Cors = "",
+  Cors = "/api/cors",
  OpenAI = "/api/openai",
-  Anthropic = "/api/anthropic",
 }

 export enum SlotID {
@@ -49,17 +49,10 @@ export enum StoreKey {
  Sync = "sync",
 }

-export const NARROW_SIDEBAR_WIDTH = 100;
-
-export const DEFAULT_SIDEBAR_WIDTH = 340;
-export const MAX_SIDEBAR_WIDTH = 440;
+export const DEFAULT_SIDEBAR_WIDTH = 300;
+export const MAX_SIDEBAR_WIDTH = 500;
 export const MIN_SIDEBAR_WIDTH = 230;
-
-export const WINDOW_WIDTH_SM = 480;
-export const WINDOW_WIDTH_MD = 768;
-export const WINDOW_WIDTH_LG = 1120;
-export const WINDOW_WIDTH_XL = 1440;
-export const WINDOW_WIDTH_2XL = 1980;
+export const NARROW_SIDEBAR_WIDTH = 100;

 export const ACCESS_CODE_PREFIX = "nk-";

@@ -75,155 +68,90 @@ export const EXPORT_MESSAGE_CLASS_NAME = "export-markdown";
 export enum ServiceProvider {
  OpenAI = "OpenAI",
  Azure = "Azure",
-  Google = "Google",
-  Anthropic = "Anthropic",
 }

-export enum ModelProvider {
-  GPT = "GPT",
-  GeminiPro = "GeminiPro",
-  Claude = "Claude",
-}
-
-export const Anthropic = {
-  ChatPath: "v1/messages",
-  ChatPath1: "v1/complete",
-  ExampleEndpoint: "https://api.anthropic.com",
-  Vision: "2023-06-01",
-};
-
 export const OpenaiPath = {
  ChatPath: "v1/chat/completions",
  UsagePath: "dashboard/billing/usage",
  SubsPath: "dashboard/billing/subscription",
  ListModelPath: "v1/models",
+  Speech: "v1/audio/speech",
 };

 export const Azure = {
  ExampleEndpoint: "https://{resource-url}/openai/deployments/{deploy-id}",
 };

-export const Google = {
-  ExampleEndpoint: "https://generativelanguage.googleapis.com/",
-  ChatPath: (modelName: string) => `v1beta/models/${modelName}:generateContent`,
-  VisionChatPath: (modelName: string) => `v1beta/models/${modelName}:generateContent`,
-};
-
 export const DEFAULT_INPUT_TEMPLATE = `{{input}}`; // input / time / model / lang
-// export const DEFAULT_SYSTEM_TEMPLATE = `
-// You are ChatGPT, a large language model trained by {{ServiceProvider}}.
-// Knowledge cutoff: {{cutoff}}
-// Current model: {{model}}
-// Current time: {{time}}
-// Latex inline: $x^2$
-// Latex block: $$e=mc^2$$
-// `;
-export const DEFAULT_SYSTEM_TEMPLATE = `
-You are ChatGPT, a large language model trained by {{ServiceProvider}}.
-Knowledge cutoff: {{cutoff}}
-Current model: {{model}}
-Current time: {{time}}
-Latex inline: \\(x^2\\) 
-Latex block: $$e=mc^2$$
-`;
+// export const DEFAULT_SYSTEM_TEMPLATE = GPTText;
+export const DEFAULT_SYSTEM_TEMPLATE = GPTVoice;

 export const SUMMARIZE_MODEL = "gpt-3.5-turbo";
-export const GEMINI_SUMMARIZE_MODEL = "gemini-pro";

 export const KnowledgeCutOffDate: Record<string, string> = {
  default: "2021-09",
-  "gpt-4-turbo": "2023-12",
-  "gpt-4-turbo-2024-04-09": "2023-12",
-  "gpt-4-turbo-preview": "2023-12",
  "gpt-4-1106-preview": "2023-04",
-  "gpt-4-0125-preview": "2023-12",
  "gpt-4-vision-preview": "2023-04",
-  // After improvements,
-  // it's now easier to add "KnowledgeCutOffDate" instead of stupid hardcoding it, as was done previously.
-  "gemini-pro": "2023-12",
-  "gemini-pro-vision": "2023-12",
 };

-const openaiModels = [
-  "gpt-3.5-turbo",
-  "gpt-3.5-turbo-0301",
-  "gpt-3.5-turbo-0613",
-  "gpt-3.5-turbo-1106",
-  "gpt-3.5-turbo-0125",
-  "gpt-3.5-turbo-16k",
-  "gpt-3.5-turbo-16k-0613",
-  "gpt-4",
-  "gpt-4-0314",
-  "gpt-4-0613",
-  "gpt-4-1106-preview",
-  "gpt-4-0125-preview",
-  "gpt-4-32k",
-  "gpt-4-32k-0314",
-  "gpt-4-32k-0613",
-  "gpt-4-turbo",
-  "gpt-4-turbo-preview",
-  "gpt-4-vision-preview",
-  "gpt-4-turbo-2024-04-09",
-];
-
-const googleModels = [
-  "gemini-1.0-pro",
-  "gemini-1.5-pro-latest",
-  "gemini-pro-vision",
-];
-
-const anthropicModels = [
-  "claude-instant-1.2",
-  "claude-2.0",
-  "claude-2.1",
-  "claude-3-sonnet-20240229",
-  "claude-3-opus-20240229",
-  "claude-3-haiku-20240307",
-];
-
 export const DEFAULT_MODELS = [
-  ...openaiModels.map((name) => ({
-    name,
+  {
+    name: "gpt-4",
    available: true,
-    provider: {
-      id: "openai",
-      providerName: "OpenAI",
-      providerType: "openai",
-    },
-  })),
-  ...googleModels.map((name) => ({
-    name,
+  },
+  {
+    name: "gpt-4-0314",
    available: true,
-    provider: {
-      id: "google",
-      providerName: "Google",
-      providerType: "google",
-    },
-  })),
-  ...anthropicModels.map((name) => ({
-    name,
+  },
+  {
+    name: "gpt-4-0613",
    available: true,
-    provider: {
-      id: "anthropic",
-      providerName: "Anthropic",
-      providerType: "anthropic",
-    },
-  })),
+  },
+  {
+    name: "gpt-4-32k",
+    available: true,
+  },
+  {
+    name: "gpt-4-32k-0314",
+    available: true,
+  },
+  {
+    name: "gpt-4-32k-0613",
+    available: true,
+  },
+  {
+    name: "gpt-4-1106-preview",
+    available: true,
+  },
+  {
+    name: "gpt-4-vision-preview",
+    available: true,
+  },
+  {
+    name: "gpt-3.5-turbo",
+    available: true,
+  },
+  {
+    name: "gpt-3.5-turbo-0301",
+    available: true,
+  },
+  {
+    name: "gpt-3.5-turbo-0613",
+    available: true,
+  },
+  {
+    name: "gpt-3.5-turbo-1106",
+    available: true,
+  },
+  {
+    name: "gpt-3.5-turbo-16k",
+    available: true,
+  },
+  {
+    name: "gpt-3.5-turbo-16k-0613",
+    available: true,
+  },
 ] as const;

 export const CHAT_PAGE_SIZE = 15;
 export const MAX_RENDER_MSG_COUNT = 45;
-
-// some famous webdav endpoints
-export const internalWhiteWebDavEndpoints = [
-  "https://dav.jianguoyun.com/dav/",
-  "https://dav.dropdav.com/",
-  "https://dav.box.com/dav",
-  "https://nanao.teracloud.jp/dav/",
-  "https://webdav.4shared.com/",
-  "https://dav.idrivesync.com",
-  "https://webdav.yandex.com",
-  "https://app.koofr.net/dav/Koofr",
-];
-
-export const SIDEBAR_ID = "sidebar";
--- a/app/containers/Chat/ChatPanel.tsx
+++ b/app/containers/Chat/ChatPanel.tsx
@@ -1,301 +0,0 @@
-import React, { useState, useRef, useEffect, useMemo } from "react";
-import {
-  useChatStore,
-  BOT_HELLO,
-  createMessage,
-  useAccessStore,
-  useAppConfig,
-  ModelType,
-} from "@/app/store";
-import Locale from "@/app/locales";
-import { Selector, showConfirm, showToast } from "@/app/components/ui-lib";
-import {
-  CHAT_PAGE_SIZE,
-  REQUEST_TIMEOUT_MS,
-  UNFINISHED_INPUT,
-} from "@/app/constant";
-import { useCommand } from "@/app/command";
-import { prettyObject } from "@/app/utils/format";
-import { ExportMessageModal } from "@/app/components/exporter";
-
-import PromptToast from "./components/PromptToast";
-import { EditMessageModal } from "./components/EditMessageModal";
-import ChatHeader from "./components/ChatHeader";
-import ChatInputPanel, {
-  ChatInputPanelInstance,
-} from "./components/ChatInputPanel";
-import ChatMessagePanel, { RenderMessage } from "./components/ChatMessagePanel";
-import { useAllModels } from "@/app/utils/hooks";
-import useRows from "@/app/hooks/useRows";
-import SessionConfigModel from "./components/SessionConfigModal";
-import useScrollToBottom from "@/app/hooks/useScrollToBottom";
-
-function _Chat() {
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-  const config = useAppConfig();
-
-  const { isMobileScreen } = config;
-
-  const [showExport, setShowExport] = useState(false);
-
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [userInput, setUserInput] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const chatInputPanelRef = useRef<ChatInputPanelInstance | null>(null);
-
-  const [hitBottom, setHitBottom] = useState(true);
-
-  const [attachImages, setAttachImages] = useState<string[]>([]);
-
-  // auto grow input
-  const { measure, inputRows } = useRows({
-    inputRef,
-  });
-
-  const { setAutoScroll, scrollDomToBottom } = useScrollToBottom(scrollRef);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(measure, [userInput]);
-
-  useEffect(() => {
-    chatStore.updateCurrentSession((session) => {
-      const stopTiming = Date.now() - REQUEST_TIMEOUT_MS;
-      session.messages.forEach((m) => {
-        // check if should stop all stale messages
-        if (m.isError || new Date(m.date).getTime() < stopTiming) {
-          if (m.streaming) {
-            m.streaming = false;
-          }
-
-          if (m.content.length === 0) {
-            m.isError = true;
-            m.content = prettyObject({
-              error: true,
-              message: "empty response",
-            });
-          }
-        }
-      });
-
-      // auto sync mask config from global config
-      if (session.mask.syncGlobalConfig) {
-        console.log("[Mask] syncing from global, name = ", session.mask.name);
-        session.mask.modelConfig = { ...config.modelConfig };
-      }
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const context: RenderMessage[] = useMemo(() => {
-    return session.mask.hideContext ? [] : session.mask.context.slice();
-  }, [session.mask.context, session.mask.hideContext]);
-  const accessStore = useAccessStore();
-
-  if (
-    context.length === 0 &&
-    session.messages.at(0)?.content !== BOT_HELLO.content
-  ) {
-    const copiedHello = Object.assign({}, BOT_HELLO);
-    if (!accessStore.isAuthorized()) {
-      copiedHello.content = Locale.Error.Unauthorized;
-    }
-    context.push(copiedHello);
-  }
-
-  // preview messages
-  const renderMessages = useMemo(() => {
-    return context
-      .concat(session.messages as RenderMessage[])
-      .concat(
-        isLoading
-          ? [
-              {
-                ...createMessage({
-                  role: "assistant",
-                  content: "……",
-                }),
-                preview: true,
-              },
-            ]
-          : [],
-      )
-      .concat(
-        userInput.length > 0 && config.sendPreviewBubble
-          ? [
-              {
-                ...createMessage(
-                  {
-                    role: "user",
-                    content: userInput,
-                  },
-                  {
-                    customId: "typing",
-                  },
-                ),
-                preview: true,
-              },
-            ]
-          : [],
-      );
-  }, [
-    config.sendPreviewBubble,
-    context,
-    isLoading,
-    session.messages,
-    userInput,
-  ]);
-
-  const [msgRenderIndex, _setMsgRenderIndex] = useState(
-    Math.max(0, renderMessages.length - CHAT_PAGE_SIZE),
-  );
-
-  const [showPromptModal, setShowPromptModal] = useState(false);
-
-  useCommand({
-    fill: setUserInput,
-    submit: (text) => {
-      chatInputPanelRef.current?.doSubmit(text);
-    },
-    code: (text) => {
-      if (accessStore.disableFastLink) return;
-      console.log("[Command] got code from url: ", text);
-      showConfirm(Locale.URLCommand.Code + `code = ${text}`).then((res) => {
-        if (res) {
-          accessStore.update((access) => (access.accessCode = text));
-        }
-      });
-    },
-    settings: (text) => {
-      if (accessStore.disableFastLink) return;
-
-      try {
-        const payload = JSON.parse(text) as {
-          key?: string;
-          url?: string;
-        };
-
-        console.log("[Command] got settings from url: ", payload);
-
-        if (payload.key || payload.url) {
-          showConfirm(
-            Locale.URLCommand.Settings +
-              `\n${JSON.stringify(payload, null, 4)}`,
-          ).then((res) => {
-            if (!res) return;
-            if (payload.key) {
-              accessStore.update(
-                (access) => (access.openaiApiKey = payload.key!),
-              );
-            }
-            if (payload.url) {
-              accessStore.update((access) => (access.openaiUrl = payload.url!));
-            }
-          });
-        }
-      } catch {
-        console.error("[Command] failed to get settings from url: ", text);
-      }
-    },
-  });
-
-  // edit / insert message modal
-  const [isEditingMessage, setIsEditingMessage] = useState(false);
-
-  // remember unfinished input
-  useEffect(() => {
-    // try to load from local storage
-    const key = UNFINISHED_INPUT(session.id);
-    const mayBeUnfinishedInput = localStorage.getItem(key);
-    if (mayBeUnfinishedInput && userInput.length === 0) {
-      setUserInput(mayBeUnfinishedInput);
-      localStorage.removeItem(key);
-    }
-
-    const dom = inputRef.current;
-    return () => {
-      localStorage.setItem(key, dom?.value ?? "");
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const chatinputPanelProps = {
-    inputRef,
-    isMobileScreen,
-    renderMessages,
-    attachImages,
-    userInput,
-    hitBottom,
-    inputRows,
-    setAttachImages,
-    setUserInput,
-    setIsLoading,
-    showChatSetting: setShowPromptModal,
-    _setMsgRenderIndex,
-    scrollDomToBottom,
-    setAutoScroll,
-  };
-
-  const chatMessagePanelProps = {
-    scrollRef,
-    inputRef,
-    isMobileScreen,
-    msgRenderIndex,
-    userInput,
-    context,
-    renderMessages,
-    setAutoScroll,
-    setMsgRenderIndex: chatInputPanelRef.current?.setMsgRenderIndex,
-    setHitBottom,
-    setUserInput,
-    setIsLoading,
-    setShowPromptModal,
-    scrollDomToBottom,
-  };
-
-  return (
-    <div
-      className={`
-        relative flex flex-col overflow-hidden bg-chat-panel
-        max-md:absolute max-md:h-[100vh] max-md:w-[100%]
-        md:h-[100%] md:mr-2.5 md:rounded-md
-        `}
-      key={session.id}
-    >
-      <ChatHeader
-        setIsEditingMessage={setIsEditingMessage}
-        setShowExport={setShowExport}
-        isMobileScreen={isMobileScreen}
-      />
-
-      <ChatMessagePanel {...chatMessagePanelProps} />
-
-      <ChatInputPanel ref={chatInputPanelRef} {...chatinputPanelProps} />
-
-      {showExport && (
-        <ExportMessageModal onClose={() => setShowExport(false)} />
-      )}
-
-      {isEditingMessage && (
-        <EditMessageModal
-          onClose={() => {
-            setIsEditingMessage(false);
-          }}
-        />
-      )}
-
-      <PromptToast showToast={!hitBottom} setShowModal={setShowPromptModal} />
-
-      {showPromptModal && (
-        <SessionConfigModel onClose={() => setShowPromptModal(false)} />
-      )}
-    </div>
-  );
-}
-
-export default function Chat() {
-  const chatStore = useChatStore();
-  const sessionIndex = chatStore.currentSessionIndex;
-  return <_Chat key={sessionIndex}></_Chat>;
-}
--- a/app/containers/Chat/components/ChatActions.tsx
+++ b/app/containers/Chat/components/ChatActions.tsx
@@ -1,277 +0,0 @@
-import { useNavigate } from "react-router-dom";
-
-import { ModelType, Theme, useAppConfig } from "@/app/store/config";
-import { useChatStore } from "@/app/store/chat";
-import { ChatControllerPool } from "@/app/client/controller";
-import { useAllModels } from "@/app/utils/hooks";
-import { useEffect, useMemo, useState } from "react";
-import { isVisionModel } from "@/app/utils";
-import { showToast } from "@/app/components/ui-lib";
-import Locale from "@/app/locales";
-import { Path } from "@/app/constant";
-
-import BottomIcon from "@/app/icons/bottom.svg";
-import StopIcon from "@/app/icons/pause.svg";
-import LoadingButtonIcon from "@/app/icons/loading.svg";
-import PromptIcon from "@/app/icons/comandIcon.svg";
-import MaskIcon from "@/app/icons/maskIcon.svg";
-import BreakIcon from "@/app/icons/eraserIcon.svg";
-import SettingsIcon from "@/app/icons/configIcon.svg";
-import ImageIcon from "@/app/icons/uploadImgIcon.svg";
-import AddCircleIcon from "@/app/icons/addCircle.svg";
-
-import Popover from "@/app/components/Popover";
-import ModelSelect from "./ModelSelect";
-
-export interface Action {
-  onClick?: () => void;
-  text: string;
-  isShow: boolean;
-  render?: (key: string) => JSX.Element;
-  icon?: JSX.Element;
-  placement: "left" | "right";
-  className?: string;
-}
-
-export function ChatActions(props: {
-  uploadImage: () => void;
-  setAttachImages: (images: string[]) => void;
-  setUploading: (uploading: boolean) => void;
-  showChatSetting: () => void;
-  scrollToBottom: () => void;
-  showPromptHints: () => void;
-  hitBottom: boolean;
-  uploading: boolean;
-  isMobileScreen: boolean;
-  className?: string;
-}) {
-  const config = useAppConfig();
-  const navigate = useNavigate();
-  const chatStore = useChatStore();
-
-  // switch themes
-  const theme = config.theme;
-  function nextTheme() {
-    const themes = [Theme.Auto, Theme.Light, Theme.Dark];
-    const themeIndex = themes.indexOf(theme);
-    const nextIndex = (themeIndex + 1) % themes.length;
-    const nextTheme = themes[nextIndex];
-    config.update((config) => (config.theme = nextTheme));
-  }
-
-  // stop all responses
-  const couldStop = ChatControllerPool.hasPending();
-  const stopAll = () => ChatControllerPool.stopAll();
-
-  // switch model
-  const currentModel = chatStore.currentSession().mask.modelConfig.model;
-  const allModels = useAllModels();
-  const models = useMemo(
-    () => allModels.filter((m) => m.available),
-    [allModels],
-  );
-  const [showUploadImage, setShowUploadImage] = useState(false);
-
-  useEffect(() => {
-    const show = isVisionModel(currentModel);
-    setShowUploadImage(show);
-    if (!show) {
-      props.setAttachImages([]);
-      props.setUploading(false);
-    }
-
-    // if current model is not available
-    // switch to first available model
-    const isUnavaliableModel = !models.some((m) => m.name === currentModel);
-    if (isUnavaliableModel && models.length > 0) {
-      const nextModel = models[0].name as ModelType;
-      chatStore.updateCurrentSession(
-        (session) => (session.mask.modelConfig.model = nextModel),
-      );
-      showToast(nextModel);
-    }
-  }, [chatStore, currentModel, models]);
-
-  const actions: Action[] = [
-    {
-      onClick: stopAll,
-      text: Locale.Chat.InputActions.Stop,
-      isShow: couldStop,
-      icon: <StopIcon />,
-      placement: "left",
-    },
-    {
-      text: currentModel,
-      isShow: !props.isMobileScreen,
-      render: (key: string) => <ModelSelect key={key} />,
-      placement: "left",
-    },
-    {
-      onClick: props.scrollToBottom,
-      text: Locale.Chat.InputActions.ToBottom,
-      isShow: !props.hitBottom,
-      icon: <BottomIcon />,
-      placement: "left",
-    },
-    {
-      onClick: props.uploadImage,
-      text: Locale.Chat.InputActions.UploadImage,
-      isShow: showUploadImage,
-      icon: props.uploading ? <LoadingButtonIcon /> : <ImageIcon />,
-      placement: "left",
-    },
-    // {
-    //   onClick: nextTheme,
-    //   text: Locale.Chat.InputActions.Theme[theme],
-    //   isShow: true,
-    //   icon: (
-    //     <>
-    //       {theme === Theme.Auto ? (
-    //         <AutoIcon />
-    //       ) : theme === Theme.Light ? (
-    //         <LightIcon />
-    //       ) : theme === Theme.Dark ? (
-    //         <DarkIcon />
-    //       ) : null}
-    //     </>
-    //   ),
-    //   placement: "left",
-    // },
-    {
-      onClick: props.showPromptHints,
-      text: Locale.Chat.InputActions.Prompt,
-      isShow: true,
-      icon: <PromptIcon />,
-      placement: "left",
-    },
-    {
-      onClick: () => {
-        navigate(Path.Masks);
-      },
-      text: Locale.Chat.InputActions.Masks,
-      isShow: true,
-      icon: <MaskIcon />,
-      placement: "left",
-    },
-    {
-      onClick: () => {
-        chatStore.updateCurrentSession((session) => {
-          if (session.clearContextIndex === session.messages.length) {
-            session.clearContextIndex = undefined;
-          } else {
-            session.clearContextIndex = session.messages.length;
-            session.memoryPrompt = ""; // will clear memory
-          }
-        });
-      },
-      text: Locale.Chat.InputActions.Clear,
-      isShow: true,
-      icon: <BreakIcon />,
-      placement: "right",
-    },
-    {
-      onClick: props.showChatSetting,
-      text: Locale.Chat.InputActions.Settings,
-      isShow: true,
-      icon: <SettingsIcon />,
-      placement: "right",
-    },
-  ];
-
-  if (props.isMobileScreen) {
-    const content = (
-      <div className="w-[100%]">
-        {actions
-          .filter((v) => v.isShow && v.icon)
-          .map((act) => {
-            return (
-              <div
-                key={act.text}
-                className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer follow-parent-svg default-icon-color`}
-                onClick={act.onClick}
-              >
-                {act.icon}
-                <div className="flex-1 font-common text-actions-popover-menu-item">
-                  {act.text}
-                </div>
-              </div>
-            );
-          })}
-      </div>
-    );
-    return (
-      <Popover
-        content={content}
-        trigger="click"
-        placement="rt"
-        noArrow
-        popoverClassName="border border-chat-actions-popover-mobile rounded-md shadow-chat-actions-popover-mobile w-actions-popover bg-chat-actions-popover-panel-mobile "
-        className=" cursor-pointer follow-parent-svg default-icon-color"
-      >
-        <AddCircleIcon />
-      </Popover>
-    );
-  }
-
-  const popoverClassName = `bg-chat-actions-btn-popover px-3 py-2.5 text-text-chat-actions-btn-popover text-sm-title rounded-md`;
-
-  return (
-    <div className={`flex gap-2 item-center ${props.className}`}>
-      {actions
-        .filter((v) => v.placement === "left" && v.isShow)
-        .map((act, ind) => {
-          if (act.render) {
-            return (
-              <div className={`${act.className ?? ""}`} key={act.text}>
-                {act.render(act.text)}
-              </div>
-            );
-          }
-          return (
-            <Popover
-              key={act.text}
-              content={act.text}
-              popoverClassName={`${popoverClassName}`}
-              placement={ind ? "t" : "lt"}
-              className={`${act.className ?? ""}`}
-            >
-              <div
-                className={` 
-                  cursor-pointer h-[32px] w-[32px] flex items-center justify-center transition duration-300 ease-in-out 
-                  hover:bg-chat-actions-btn-hovered hover:rounded-action-btn
-                  follow-parent-svg default-icon-color
-                `}
-                onClick={act.onClick}
-              >
-                {act.icon}
-              </div>
-            </Popover>
-          );
-        })}
-      <div className="flex-1"></div>
-      {actions
-        .filter((v) => v.placement === "right" && v.isShow)
-        .map((act, ind, arr) => {
-          return (
-            <Popover
-              key={act.text}
-              content={act.text}
-              popoverClassName={`${popoverClassName}`}
-              placement={ind === arr.length - 1 ? "rt" : "t"}
-            >
-              <div
-                className={`
-                  cursor-pointer h-[32px] w-[32px] flex items-center transition duration-300 ease-in-out justify-center 
-                  hover:bg-chat-actions-btn-hovered hover:rounded-action-btn
-                  follow-parent-svg default-icon-color
-                `}
-                onClick={act.onClick}
-              >
-                {act.icon}
-              </div>
-            </Popover>
-          );
-        })}
-    </div>
-  );
-}
--- a/app/containers/Chat/components/ChatHeader.tsx
+++ b/app/containers/Chat/components/ChatHeader.tsx
@@ -1,91 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import Locale from "@/app/locales";
-import { Path } from "@/app/constant";
-import { DEFAULT_TOPIC, useChatStore } from "@/app/store/chat";
-
-import LogIcon from "@/app/icons/logIcon.svg";
-import GobackIcon from "@/app/icons/goback.svg";
-import ShareIcon from "@/app/icons/shareIcon.svg";
-import ModelSelect from "./ModelSelect";
-
-export interface ChatHeaderProps {
-  isMobileScreen: boolean;
-  setIsEditingMessage: (v: boolean) => void;
-  setShowExport: (v: boolean) => void;
-}
-
-export default function ChatHeader(props: ChatHeaderProps) {
-  const { isMobileScreen, setIsEditingMessage, setShowExport } = props;
-
-  const navigate = useNavigate();
-
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-
-  return (
-    <div
-      className={`
-        absolute w-[100%] backdrop-blur-[30px] z-20 flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap 
-        sm:border-b sm:border-chat-header-bottom 
-        max-md:h-menu-title-mobile
-      `}
-      data-tauri-drag-region
-    >
-      <div
-        className={`absolute z-[-1] top-0 left-0 w-[100%] h-[100%] opacity-85 backdrop-blur-[20px]  sm:bg-chat-panel-header-mask bg-chat-panel-header-mobile flex flex-0 justify-between items-center  gap-chat-header-gap`}
-      >
-        {" "}
-      </div>
-
-      {isMobileScreen ? (
-        <div
-          className=" cursor-pointer follow-parent-svg default-icon-color"
-          onClick={() => navigate(Path.Home)}
-        >
-          <GobackIcon />
-        </div>
-      ) : (
-        <LogIcon />
-      )}
-
-      <div
-        className={`
-        flex-1 
-        max-md:flex max-md:flex-col max-md:items-center max-md:justify-center max-md:gap-0.5 max-md:text
-        md:mr-4
-      `}
-      >
-        <div
-          className={`
-            line-clamp-1 cursor-pointer text-text-chat-header-title text-chat-header-title font-common 
-            max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5
-          `}
-          onClickCapture={() => setIsEditingMessage(true)}
-        >
-          {!session.topic ? DEFAULT_TOPIC : session.topic}
-        </div>
-        <div
-          className={`
-            text-text-chat-header-subtitle text-sm 
-            max-md:text-sm-mobile-tab max-md:leading-4
-          `}
-        >
-          {isMobileScreen ? (
-            <ModelSelect />
-          ) : (
-            Locale.Chat.SubTitle(session.messages.length)
-          )}
-        </div>
-      </div>
-
-      <div
-        className=" cursor-pointer hover:bg-hovered-btn p-1.5 rounded-action-btn follow-parent-svg default-icon-color"
-        onClick={() => {
-          setShowExport(true);
-        }}
-      >
-        <ShareIcon />
-      </div>
-    </div>
-  );
-}
--- a/app/containers/Chat/components/ChatInputPanel.tsx
+++ b/app/containers/Chat/components/ChatInputPanel.tsx
@@ -1,322 +0,0 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useDebouncedCallback } from "use-debounce";
-import useUploadImage from "@/app/hooks/useUploadImage";
-import Locale from "@/app/locales";
-
-import useSubmitHandler from "@/app/hooks/useSubmitHandler";
-import { CHAT_PAGE_SIZE, LAST_INPUT_KEY, Path } from "@/app/constant";
-import { ChatCommandPrefix, useChatCommand } from "@/app/command";
-import { useChatStore } from "@/app/store/chat";
-import { usePromptStore } from "@/app/store/prompt";
-import { useAppConfig } from "@/app/store/config";
-import usePaste from "@/app/hooks/usePaste";
-
-import { ChatActions } from "./ChatActions";
-import PromptHints, { RenderPompt } from "./PromptHint";
-
-// import CEIcon from "@/app/icons/command&enterIcon.svg";
-// import EnterIcon from "@/app/icons/enterIcon.svg";
-import SendIcon from "@/app/icons/sendIcon.svg";
-
-import Btn from "@/app/components/Btn";
-import Thumbnail from "@/app/components/ThumbnailImg";
-
-export interface ChatInputPanelProps {
-  inputRef: React.RefObject<HTMLTextAreaElement>;
-  isMobileScreen: boolean;
-  renderMessages: any[];
-  attachImages: string[];
-  userInput: string;
-  hitBottom: boolean;
-  inputRows: number;
-  setAttachImages: (imgs: string[]) => void;
-  setUserInput: (v: string) => void;
-  setIsLoading: (value: boolean) => void;
-  showChatSetting: (value: boolean) => void;
-  _setMsgRenderIndex: (value: number) => void;
-  setAutoScroll: (value: boolean) => void;
-  scrollDomToBottom: () => void;
-}
-
-export interface ChatInputPanelInstance {
-  setUploading: (v: boolean) => void;
-  doSubmit: (userInput: string) => void;
-  setMsgRenderIndex: (v: number) => void;
-}
-
-// only search prompts when user input is short
-const SEARCH_TEXT_LIMIT = 30;
-
-export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
-  function ChatInputPanel(props, ref) {
-    const {
-      attachImages,
-      inputRef,
-      setAttachImages,
-      userInput,
-      isMobileScreen,
-      setUserInput,
-      setIsLoading,
-      showChatSetting,
-      renderMessages,
-      _setMsgRenderIndex,
-      hitBottom,
-      inputRows,
-      setAutoScroll,
-      scrollDomToBottom,
-    } = props;
-
-    const [uploading, setUploading] = useState(false);
-    const [promptHints, setPromptHints] = useState<RenderPompt[]>([]);
-
-    const chatStore = useChatStore();
-    const navigate = useNavigate();
-    const config = useAppConfig();
-
-    const { uploadImage } = useUploadImage(attachImages, {
-      emitImages: setAttachImages,
-      setUploading,
-    });
-    const { submitKey, shouldSubmit } = useSubmitHandler();
-
-    const autoFocus = !isMobileScreen; // wont auto focus on mobile screen
-
-    // chat commands shortcuts
-    const chatCommands = useChatCommand({
-      new: () => chatStore.newSession(),
-      newm: () => navigate(Path.NewChat),
-      prev: () => chatStore.nextSession(-1),
-      next: () => chatStore.nextSession(1),
-      clear: () =>
-        chatStore.updateCurrentSession(
-          (session) => (session.clearContextIndex = session.messages.length),
-        ),
-      del: () => chatStore.deleteSession(chatStore.currentSessionIndex),
-    });
-
-    // prompt hints
-    const promptStore = usePromptStore();
-    const onSearch = useDebouncedCallback(
-      (text: string) => {
-        const matchedPrompts = promptStore.search(text);
-        setPromptHints(matchedPrompts);
-      },
-      100,
-      { leading: true, trailing: true },
-    );
-
-    // check if should send message
-    const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      // if ArrowUp and no userInput, fill with last input
-      if (
-        e.key === "ArrowUp" &&
-        userInput.length <= 0 &&
-        !(e.metaKey || e.altKey || e.ctrlKey)
-      ) {
-        setUserInput(localStorage.getItem(LAST_INPUT_KEY) ?? "");
-        e.preventDefault();
-        return;
-      }
-      if (shouldSubmit(e) && promptHints.length === 0) {
-        doSubmit(userInput);
-        e.preventDefault();
-      }
-    };
-
-    const onPromptSelect = (prompt: RenderPompt) => {
-      setTimeout(() => {
-        setPromptHints([]);
-
-        const matchedChatCommand = chatCommands.match(prompt.content);
-        if (matchedChatCommand.matched) {
-          // if user is selecting a chat command, just trigger it
-          matchedChatCommand.invoke();
-          setUserInput("");
-        } else {
-          // or fill the prompt
-          setUserInput(prompt.content);
-        }
-        inputRef.current?.focus();
-      }, 30);
-    };
-
-    const doSubmit = (userInput: string) => {
-      if (userInput.trim() === "") return;
-      const matchCommand = chatCommands.match(userInput);
-      if (matchCommand.matched) {
-        setUserInput("");
-        setPromptHints([]);
-        matchCommand.invoke();
-        return;
-      }
-      setIsLoading(true);
-      chatStore
-        .onUserInput(userInput, attachImages)
-        .then(() => setIsLoading(false));
-      setAttachImages([]);
-      localStorage.setItem(LAST_INPUT_KEY, userInput);
-      setUserInput("");
-      setPromptHints([]);
-      if (!isMobileScreen) inputRef.current?.focus();
-      setAutoScroll(true);
-    };
-
-    useImperativeHandle(ref, () => ({
-      setUploading,
-      doSubmit,
-      setMsgRenderIndex,
-    }));
-
-    function scrollToBottom() {
-      setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
-      scrollDomToBottom();
-    }
-
-    const onInput = (text: string) => {
-      setUserInput(text);
-      const n = text.trim().length;
-
-      // clear search results
-      if (n === 0) {
-        setPromptHints([]);
-      } else if (text.startsWith(ChatCommandPrefix)) {
-        setPromptHints(chatCommands.search(text));
-      } else if (!config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
-        // check if need to trigger auto completion
-        if (text.startsWith("/")) {
-          let searchText = text.slice(1);
-          onSearch(searchText);
-        }
-      }
-    };
-
-    function setMsgRenderIndex(newIndex: number) {
-      newIndex = Math.min(renderMessages.length - CHAT_PAGE_SIZE, newIndex);
-      newIndex = Math.max(0, newIndex);
-      _setMsgRenderIndex(newIndex);
-    }
-
-    const { handlePaste } = usePaste(attachImages, {
-      emitImages: setAttachImages,
-      setUploading,
-    });
-
-    return (
-      <div
-        className={`
-        relative w-[100%] box-border 
-        max-md:rounded-tl-md max-md:rounded-tr-md
-        md:border-t md:border-chat-input-top
-      `}
-      >
-        <PromptHints
-          prompts={promptHints}
-          onPromptSelect={onPromptSelect}
-          className=" border-chat-input-top"
-        />
-
-        <div
-          className={`
-            flex
-            max-md:flex-row-reverse max-md:items-center max-md:gap-2 max-md:p-3
-            md:flex-col md:px-5 md:pb-5
-          `}
-        >
-          <ChatActions
-            uploadImage={uploadImage}
-            setAttachImages={setAttachImages}
-            setUploading={setUploading}
-            showChatSetting={() => showChatSetting(true)}
-            scrollToBottom={scrollToBottom}
-            hitBottom={hitBottom}
-            uploading={uploading}
-            showPromptHints={() => {
-              // Click again to close
-              if (promptHints.length > 0) {
-                setPromptHints([]);
-                return;
-              }
-
-              inputRef.current?.focus();
-              setUserInput("/");
-              onSearch("");
-            }}
-            className={`
-              md:py-2.5
-            `}
-            isMobileScreen={isMobileScreen}
-          />
-          <label
-            className={`
-              cursor-text flex flex-col bg-chat-panel-input-hood border border-chat-input-hood 
-              focus-within:border-chat-input-hood-focus sm:focus-within:shadow-chat-input-hood-focus-shadow 
-              rounded-chat-input p-3 gap-3 max-md:flex-1
-              md:rounded-md md:p-4 md:gap-4
-            `}
-            htmlFor="chat-input"
-          >
-            {attachImages.length != 0 && (
-              <div className={`flex gap-2`}>
-                {attachImages.map((image, index) => {
-                  return (
-                    <Thumbnail
-                      key={index}
-                      deleteImage={() => {
-                        setAttachImages(
-                          attachImages.filter((_, i) => i !== index),
-                        );
-                      }}
-                      image={image}
-                    />
-                  );
-                })}
-              </div>
-            )}
-            <textarea
-              id="chat-input"
-              ref={inputRef}
-              className={`
-                leading-[19px] flex-1 focus:outline-none focus:shadow-none focus:border-none resize-none bg-inherit text-text-input
-                max-md:h-chat-input-mobile
-                md:min-h-chat-input
-              `}
-              placeholder={
-                isMobileScreen
-                  ? Locale.Chat.Input(submitKey, isMobileScreen)
-                  : undefined
-              }
-              onInput={(e) => onInput(e.currentTarget.value)}
-              value={userInput}
-              onKeyDown={onInputKeyDown}
-              onFocus={scrollToBottom}
-              onClick={scrollToBottom}
-              onPaste={handlePaste}
-              rows={inputRows}
-              autoFocus={autoFocus}
-              style={{
-                fontSize: config.fontSize,
-              }}
-            />
-            {!isMobileScreen && (
-              <div className="flex items-center justify-center text-sm gap-3">
-                <div className="flex-1">&nbsp;</div>
-                <div className="text-text-chat-input-placeholder font-common line-clamp-1">
-                  {Locale.Chat.Input(submitKey)}
-                </div>
-                <Btn
-                  className="min-w-[77px]"
-                  icon={<SendIcon />}
-                  text={Locale.Chat.Send}
-                  disabled={!userInput.length}
-                  type="primary"
-                  onClick={() => doSubmit(userInput)}
-                />
-              </div>
-            )}
-          </label>
-        </div>
-      </div>
-    );
-  },
-);
--- a/app/containers/Chat/components/ChatMessagePanel.tsx
+++ b/app/containers/Chat/components/ChatMessagePanel.tsx
@@ -1,246 +0,0 @@
-import { Fragment, useMemo } from "react";
-import { ChatMessage, useChatStore } from "@/app/store/chat";
-import { CHAT_PAGE_SIZE } from "@/app/constant";
-import Locale from "@/app/locales";
-
-import { getMessageTextContent, selectOrCopy } from "@/app/utils";
-
-import LoadingIcon from "@/app/icons/three-dots.svg";
-
-import { Avatar } from "@/app/components/emoji";
-import { MaskAvatar } from "@/app/components/mask";
-import { useAppConfig } from "@/app/store/config";
-import ClearContextDivider from "./ClearContextDivider";
-import dynamic from "next/dynamic";
-import useRelativePosition, {
-  Orientation,
-} from "@/app/hooks/useRelativePosition";
-import MessageActions, { RenderMessage } from "./MessageActions";
-import Imgs from "@/app/components/Imgs";
-
-export type { RenderMessage };
-
-export interface ChatMessagePanelProps {
-  scrollRef: React.RefObject<HTMLDivElement>;
-  inputRef: React.RefObject<HTMLTextAreaElement>;
-  isMobileScreen: boolean;
-  msgRenderIndex: number;
-  userInput: string;
-  context: any[];
-  renderMessages: RenderMessage[];
-  scrollDomToBottom: () => void;
-  setAutoScroll?: (value: boolean) => void;
-  setMsgRenderIndex?: (newIndex: number) => void;
-  setHitBottom?: (value: boolean) => void;
-  setUserInput?: (v: string) => void;
-  setIsLoading?: (value: boolean) => void;
-  setShowPromptModal?: (value: boolean) => void;
-}
-
-let MarkdownLoadedCallback: () => void;
-
-const Markdown = dynamic(
-  async () => {
-    const bundle = await import("@/app/components/markdown");
-
-    if (MarkdownLoadedCallback) {
-      MarkdownLoadedCallback();
-    }
-    return bundle.Markdown;
-  },
-  {
-    loading: () => <LoadingIcon />,
-  },
-);
-
-export default function ChatMessagePanel(props: ChatMessagePanelProps) {
-  const {
-    scrollRef,
-    inputRef,
-    setAutoScroll,
-    setMsgRenderIndex,
-    isMobileScreen,
-    msgRenderIndex,
-    setHitBottom,
-    setUserInput,
-    userInput,
-    context,
-    renderMessages,
-    setIsLoading,
-    setShowPromptModal,
-    scrollDomToBottom,
-  } = props;
-
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-  const config = useAppConfig();
-  const fontSize = config.fontSize;
-
-  const { position, getRelativePosition } = useRelativePosition({
-    containerRef: scrollRef,
-    delay: 0,
-    offsetDistance: 20,
-  });
-
-  // clear context index = context length + index in messages
-  const clearContextIndex =
-    (session.clearContextIndex ?? -1) >= 0
-      ? session.clearContextIndex! + context.length - msgRenderIndex
-      : -1;
-
-  if (!MarkdownLoadedCallback) {
-    MarkdownLoadedCallback = () => {
-      window.setTimeout(scrollDomToBottom, 100);
-    };
-  }
-
-  const messages = useMemo(() => {
-    const endRenderIndex = Math.min(
-      msgRenderIndex + 3 * CHAT_PAGE_SIZE,
-      renderMessages.length,
-    );
-    return renderMessages.slice(msgRenderIndex, endRenderIndex);
-  }, [msgRenderIndex, renderMessages]);
-
-  const onChatBodyScroll = (e: HTMLElement) => {
-    const bottomHeight = e.scrollTop + e.clientHeight;
-    const edgeThreshold = e.clientHeight;
-
-    const isTouchTopEdge = e.scrollTop <= edgeThreshold;
-    const isTouchBottomEdge = bottomHeight >= e.scrollHeight - edgeThreshold;
-    const isHitBottom =
-      bottomHeight >= e.scrollHeight - (isMobileScreen ? 4 : 10);
-
-    const prevPageMsgIndex = msgRenderIndex - CHAT_PAGE_SIZE;
-    const nextPageMsgIndex = msgRenderIndex + CHAT_PAGE_SIZE;
-
-    if (isTouchTopEdge && !isTouchBottomEdge) {
-      setMsgRenderIndex?.(prevPageMsgIndex);
-    } else if (isTouchBottomEdge) {
-      setMsgRenderIndex?.(nextPageMsgIndex);
-    }
-
-    setHitBottom?.(isHitBottom);
-    setAutoScroll?.(isHitBottom);
-  };
-
-  const onRightClick = (e: any, message: ChatMessage) => {
-    // copy to clipboard
-    if (selectOrCopy(e.currentTarget, getMessageTextContent(message))) {
-      if (userInput.length === 0) {
-        setUserInput?.(getMessageTextContent(message));
-      }
-
-      e.preventDefault();
-    }
-  };
-
-  return (
-    <div
-      className={`pt-[80px] relative flex-1 overscroll-y-none overflow-y-auto overflow-x-hidden px-3 pb-6 md:bg-chat-panel-message bg-chat-panel-message-mobile`}
-      ref={scrollRef}
-      onScroll={(e) => onChatBodyScroll(e.currentTarget)}
-      onMouseDown={() => inputRef.current?.blur()}
-      onTouchStart={() => {
-        inputRef.current?.blur();
-        setAutoScroll?.(false);
-      }}
-    >
-      {messages.map((message, i) => {
-        const isUser = message.role === "user";
-        const isContext = i < context.length;
-
-        const shouldShowClearContextDivider = i === clearContextIndex - 1;
-
-        const actionsBarPosition =
-          position?.id === message.id &&
-          position?.poi.overlapPositions[Orientation.bottom]
-            ? "bottom-[calc(100%-0.25rem)]"
-            : "top-[calc(100%-0.25rem)]";
-
-        return (
-          <Fragment key={message.id}>
-            <div
-              className={`flex mt-6 gap-2 ${isUser ? "flex-row-reverse" : ""}`}
-            >
-              <div className={`relative flex-0`}>
-                {isUser ? (
-                  <Avatar avatar={config.avatar} />
-                ) : (
-                  <>
-                    {["system"].includes(message.role) ? (
-                      <Avatar avatar="2699-fe0f" />
-                    ) : (
-                      <MaskAvatar
-                        avatar={session.mask.avatar}
-                        model={message.model || session.mask.modelConfig.model}
-                      />
-                    )}
-                  </>
-                )}
-              </div>
-              <div
-                className={`group relative flex ${
-                  isUser ? "flex-row-reverse" : ""
-                }`}
-              >
-                <div
-                  className={` pointer-events-none  text-text-chat-message-date text-right font-common whitespace-nowrap transition-all duration-500 text-sm absolute z-1 ${
-                    isUser ? "right-0" : "left-0"
-                  } bottom-[100%] hidden group-hover:block`}
-                >
-                  {isContext
-                    ? Locale.Chat.IsContext
-                    : message.date.toLocaleString()}
-                </div>
-                <div
-                  className={`transition-all duration-300 select-text break-words font-common text-sm-title ${
-                    isUser
-                      ? "rounded-user-message bg-chat-panel-message-user"
-                      : "rounded-bot-message bg-chat-panel-message-bot"
-                  } box-border peer py-2 px-3`}
-                  onPointerMoveCapture={(e) =>
-                    getRelativePosition(e.currentTarget, message.id)
-                  }
-                >
-                  <Markdown
-                    content={getMessageTextContent(message)}
-                    loading={
-                      (message.preview || message.streaming) &&
-                      message.content.length === 0 &&
-                      !isUser
-                    }
-                    onContextMenu={(e) => onRightClick(e, message)}
-                    onDoubleClickCapture={() => {
-                      if (!isMobileScreen) return;
-                      setUserInput?.(getMessageTextContent(message));
-                    }}
-                    fontSize={fontSize}
-                    parentRef={scrollRef}
-                    defaultShow={i >= messages.length - 6}
-                    className={`leading-6 max-w-message-width ${
-                      isUser
-                        ? " text-text-chat-message-markdown-user"
-                        : "text-text-chat-message-markdown-bot"
-                    }`}
-                  />
-                  <Imgs message={message} />
-                </div>
-                <MessageActions
-                  className={actionsBarPosition}
-                  message={message}
-                  inputRef={inputRef}
-                  isUser={isUser}
-                  isContext={isContext}
-                  setIsLoading={setIsLoading}
-                  setShowPromptModal={setShowPromptModal}
-                />
-              </div>
-            </div>
-            {shouldShowClearContextDivider && <ClearContextDivider />}
-          </Fragment>
-        );
-      })}
-    </div>
-  );
-}
--- a/app/containers/Chat/components/ClearContextDivider.tsx
+++ b/app/containers/Chat/components/ClearContextDivider.tsx
@@ -1,46 +0,0 @@
-import { useChatStore } from "@/app/store/chat";
-import Locale from "@/app/locales";
-import { useAppConfig } from "@/app/store";
-
-export default function ClearContextDivider() {
-  const chatStore = useChatStore();
-  const { isMobileScreen } = useAppConfig();
-
-  return (
-    <div
-      className={`mt-6 mb-8 flex items-center justify-center gap-2.5 max-md:cursor-pointer`}
-      onClick={() => {
-        if (!isMobileScreen) {
-          return;
-        }
-        chatStore.updateCurrentSession(
-          (session) => (session.clearContextIndex = undefined),
-        );
-      }}
-    >
-      <div className="bg-chat-panel-message-clear-divider h-[1px] w-10"> </div>
-      <div className="flex items-center justify-between gap-1 text-sm">
-        <div className={`text-text-chat-panel-message-clear`}>
-          {Locale.Context.Clear}
-        </div>
-        <div
-          className={`
-          text-text-chat-panel-message-clear-revert  underline font-common 
-          md:cursor-pointer
-          `}
-          onClick={() => {
-            if (isMobileScreen) {
-              return;
-            }
-            chatStore.updateCurrentSession(
-              (session) => (session.clearContextIndex = undefined),
-            );
-          }}
-        >
-          {Locale.Context.Revert}
-        </div>
-      </div>
-      <div className="bg-chat-panel-message-clear-divider h-[1px] w-10"> </div>
-    </div>
-  );
-}
--- a/app/containers/Chat/components/EditMessageModal.tsx
+++ b/app/containers/Chat/components/EditMessageModal.tsx
@@ -1,75 +0,0 @@
-import { useState } from "react";
-import { useChatStore } from "@/app/store/chat";
-import { List, ListItem, Modal } from "@/app/components/ui-lib";
-
-import Locale from "@/app/locales";
-import { IconButton } from "@/app/components/button";
-import { ContextPrompts } from "@/app/components/mask";
-
-import CancelIcon from "@/app/icons/cancel.svg";
-import ConfirmIcon from "@/app/icons/confirm.svg";
-import Input from "@/app/components/Input";
-
-export function EditMessageModal(props: { onClose: () => void }) {
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-  const [messages, setMessages] = useState(session.messages.slice());
-
-  return (
-    <div className="modal-mask">
-      <Modal
-        title={Locale.Chat.EditMessage.Title}
-        onClose={props.onClose}
-        actions={[
-          <IconButton
-            text={Locale.UI.Cancel}
-            icon={<CancelIcon />}
-            key="cancel"
-            onClick={() => {
-              props.onClose();
-            }}
-          />,
-          <IconButton
-            type="primary"
-            text={Locale.UI.Confirm}
-            icon={<ConfirmIcon />}
-            key="ok"
-            onClick={() => {
-              chatStore.updateCurrentSession(
-                (session) => (session.messages = messages),
-              );
-              props.onClose();
-            }}
-          />,
-        ]}
-        // className="!bg-modal-mask"
-      >
-        <List>
-          <ListItem
-            title={Locale.Chat.EditMessage.Topic.Title}
-            subTitle={Locale.Chat.EditMessage.Topic.SubTitle}
-          >
-            <Input
-              type="text"
-              value={session.topic}
-              onChange={(e) =>
-                chatStore.updateCurrentSession(
-                  (session) => (session.topic = e || ""),
-                )
-              }
-              className=" text-center"
-            ></Input>
-          </ListItem>
-        </List>
-        <ContextPrompts
-          context={messages}
-          updateContext={(updater) => {
-            const newMessages = messages.slice();
-            updater(newMessages);
-            setMessages(newMessages);
-          }}
-        />
-      </Modal>
-    </div>
-  );
-}
--- a/app/containers/Chat/components/MessageActions.tsx
+++ b/app/containers/Chat/components/MessageActions.tsx
@@ -1,295 +0,0 @@
-import Locale from "@/app/locales";
-
-import StopIcon from "@/app/icons/pause.svg";
-import DeleteRequestIcon from "@/app/icons/deleteRequestIcon.svg";
-import RetryRequestIcon from "@/app/icons/retryRequestIcon.svg";
-import CopyRequestIcon from "@/app/icons/copyRequestIcon.svg";
-import EditRequestIcon from "@/app/icons/editRequestIcon.svg";
-import PinRequestIcon from "@/app/icons/pinRequestIcon.svg";
-import { showPrompt, showToast } from "@/app/components/ui-lib";
-import {
-  copyToClipboard,
-  getMessageImages,
-  getMessageTextContent,
-} from "@/app/utils";
-import { MultimodalContent } from "@/app/client/api";
-import { ChatMessage, useChatStore } from "@/app/store/chat";
-import ActionsBar from "@/app/components/ActionsBar";
-import { ChatControllerPool } from "@/app/client/controller";
-import { RefObject } from "react";
-
-export type RenderMessage = ChatMessage & { preview?: boolean };
-
-export interface MessageActionsProps {
-  message: RenderMessage;
-  isUser: boolean;
-  isContext: boolean;
-  showActions?: boolean;
-  inputRef: RefObject<HTMLTextAreaElement>;
-  className?: string;
-  setIsLoading?: (value: boolean) => void;
-  setShowPromptModal?: (value: boolean) => void;
-}
-
-const genActionsShema = (
-  message: RenderMessage,
-  {
-    onEdit,
-    onCopy,
-    onPinMessage,
-    onDelete,
-    onResend,
-    onUserStop,
-  }: Record<
-    | "onEdit"
-    | "onCopy"
-    | "onPinMessage"
-    | "onDelete"
-    | "onResend"
-    | "onUserStop",
-    (message: RenderMessage) => void
-  >,
-) => {
-  const className =
-    " !p-1 hover:bg-chat-message-actions-btn-hovered !rounded-actions-bar-btn ";
-  return [
-    {
-      id: "Edit",
-      icons: <EditRequestIcon />,
-      title: "Edit",
-      className,
-      onClick: () => onEdit(message),
-    },
-    {
-      id: Locale.Chat.Actions.Copy,
-      icons: <CopyRequestIcon />,
-      title: Locale.Chat.Actions.Copy,
-      className,
-      onClick: () => onCopy(message),
-    },
-    {
-      id: Locale.Chat.Actions.Pin,
-      icons: <PinRequestIcon />,
-      title: Locale.Chat.Actions.Pin,
-      className,
-      onClick: () => onPinMessage(message),
-    },
-    {
-      id: Locale.Chat.Actions.Delete,
-      icons: <DeleteRequestIcon />,
-      title: Locale.Chat.Actions.Delete,
-      className,
-      onClick: () => onDelete(message),
-    },
-    {
-      id: Locale.Chat.Actions.Retry,
-      icons: <RetryRequestIcon />,
-      title: Locale.Chat.Actions.Retry,
-      className,
-      onClick: () => onResend(message),
-    },
-    {
-      id: Locale.Chat.Actions.Stop,
-      icons: <StopIcon />,
-      title: Locale.Chat.Actions.Stop,
-      className,
-      onClick: () => onUserStop(message),
-    },
-  ];
-};
-
-enum GroupType {
-  "streaming" = "streaming",
-  "isContext" = "isContext",
-  "normal" = "normal",
-}
-
-const groupsTypes = {
-  [GroupType.streaming]: [[Locale.Chat.Actions.Stop]],
-  [GroupType.isContext]: [["Edit"]],
-  [GroupType.normal]: [
-    [
-      Locale.Chat.Actions.Retry,
-      "Edit",
-      Locale.Chat.Actions.Copy,
-      Locale.Chat.Actions.Pin,
-      Locale.Chat.Actions.Delete,
-    ],
-  ],
-};
-
-export default function MessageActions(props: MessageActionsProps) {
-  const {
-    className,
-    message,
-    isUser,
-    isContext,
-    showActions = true,
-    setIsLoading,
-    inputRef,
-    setShowPromptModal,
-  } = props;
-
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-
-  const deleteMessage = (msgId?: string) => {
-    chatStore.updateCurrentSession(
-      (session) =>
-        (session.messages = session.messages.filter((m) => m.id !== msgId)),
-    );
-  };
-
-  const onDelete = (message: ChatMessage) => {
-    deleteMessage(message.id);
-  };
-
-  const onResend = (message: ChatMessage) => {
-    // when it is resending a message
-    // 1. for a user's message, find the next bot response
-    // 2. for a bot's message, find the last user's input
-    // 3. delete original user input and bot's message
-    // 4. resend the user's input
-
-    const resendingIndex = session.messages.findIndex(
-      (m) => m.id === message.id,
-    );
-
-    if (resendingIndex < 0 || resendingIndex >= session.messages.length) {
-      console.error("[Chat] failed to find resending message", message);
-      return;
-    }
-
-    let userMessage: ChatMessage | undefined;
-    let botMessage: ChatMessage | undefined;
-
-    if (message.role === "assistant") {
-      // if it is resending a bot's message, find the user input for it
-      botMessage = message;
-      for (let i = resendingIndex; i >= 0; i -= 1) {
-        if (session.messages[i].role === "user") {
-          userMessage = session.messages[i];
-          break;
-        }
-      }
-    } else if (message.role === "user") {
-      // if it is resending a user's input, find the bot's response
-      userMessage = message;
-      for (let i = resendingIndex; i < session.messages.length; i += 1) {
-        if (session.messages[i].role === "assistant") {
-          botMessage = session.messages[i];
-          break;
-        }
-      }
-    }
-
-    if (userMessage === undefined) {
-      console.error("[Chat] failed to resend", message);
-      return;
-    }
-
-    // delete the original messages
-    deleteMessage(userMessage.id);
-    deleteMessage(botMessage?.id);
-
-    // resend the message
-    setIsLoading?.(true);
-    const textContent = getMessageTextContent(userMessage);
-    const images = getMessageImages(userMessage);
-    chatStore
-      .onUserInput(textContent, images)
-      .then(() => setIsLoading?.(false));
-    inputRef.current?.focus();
-  };
-
-  const onPinMessage = (message: ChatMessage) => {
-    chatStore.updateCurrentSession((session) =>
-      session.mask.context.push(message),
-    );
-
-    showToast(Locale.Chat.Actions.PinToastContent, {
-      text: Locale.Chat.Actions.PinToastAction,
-      onClick: () => {
-        setShowPromptModal?.(true);
-      },
-    });
-  };
-
-  // stop response
-  const onUserStop = (message: ChatMessage) => {
-    ChatControllerPool.stop(session.id, message.id);
-  };
-
-  const onEdit = async () => {
-    const newMessage = await showPrompt(
-      Locale.Chat.Actions.Edit,
-      getMessageTextContent(message),
-      10,
-    );
-    let newContent: string | MultimodalContent[] = newMessage;
-    const images = getMessageImages(message);
-    if (images.length > 0) {
-      newContent = [{ type: "text", text: newMessage }];
-      for (let i = 0; i < images.length; i++) {
-        newContent.push({
-          type: "image_url",
-          image_url: {
-            url: images[i],
-          },
-        });
-      }
-    }
-    chatStore.updateCurrentSession((session) => {
-      const m = session.mask.context
-        .concat(session.messages)
-        .find((m) => m.id === message.id);
-      if (m) {
-        m.content = newContent;
-      }
-    });
-  };
-
-  const onCopy = () => copyToClipboard(getMessageTextContent(message));
-
-  const groupsType = [
-    message.streaming && GroupType.streaming,
-    isContext && GroupType.isContext,
-    GroupType.normal,
-  ].find((i) => i) as GroupType;
-
-  return (
-    showActions && (
-      <div
-        className={`
-          absolute z-10 w-[100%]
-          ${isUser ? "right-0" : "left-0"} 
-          transition-all duration-300 
-          opacity-0
-          pointer-events-none
-          group-hover:opacity-100 
-          group-hover:pointer-events-auto
-          ${className}
-        `}
-      >
-        <ActionsBar
-          actionsShema={genActionsShema(message, {
-            onCopy,
-            onDelete,
-            onPinMessage,
-            onEdit,
-            onResend,
-            onUserStop,
-          })}
-          groups={groupsTypes[groupsType]}
-          className={`
-            float-right flex flex-row gap-1  p-1
-            bg-chat-message-actions 
-            rounded-md 
-            shadow-message-actions-bar 
-            dark:bg-none
-          `}
-        />
-      </div>
-    )
-  );
-}
--- a/app/containers/Chat/components/ModelSelect.tsx
+++ b/app/containers/Chat/components/ModelSelect.tsx
@@ -1,159 +0,0 @@
-import Popover from "@/app/components/Popover";
-import React, { useMemo, useRef } from "react";
-import useRelativePosition, {
-  Orientation,
-} from "@/app/hooks/useRelativePosition";
-import Locale from "@/app/locales";
-import { useChatStore } from "@/app/store/chat";
-import { useAllModels } from "@/app/utils/hooks";
-import { ModelType, useAppConfig } from "@/app/store/config";
-import { showToast } from "@/app/components/ui-lib";
-import BottomArrow from "@/app/icons/downArrowLgIcon.svg";
-import BottomArrowMobile from "@/app/icons/bottomArrow.svg";
-import Modal, { TriggerProps } from "@/app/components/Modal";
-
-import Selected from "@/app/icons/selectedIcon.svg";
-
-const ModelSelect = () => {
-  const config = useAppConfig();
-  const { isMobileScreen } = config;
-  const chatStore = useChatStore();
-  const currentModel = chatStore.currentSession().mask.modelConfig.model;
-  const allModels = useAllModels();
-  const models = useMemo(() => {
-    const filteredModels = allModels.filter((m) => m.available);
-    const defaultModel = filteredModels.find((m) => m.isDefault);
-
-    if (defaultModel) {
-      const arr = [
-        defaultModel,
-        ...filteredModels.filter((m) => m !== defaultModel),
-      ];
-      return arr;
-    } else {
-      return filteredModels;
-    }
-  }, [allModels]);
-
-  const rootRef = useRef<HTMLDivElement>(null);
-
-  const { position, getRelativePosition } = useRelativePosition({
-    delay: 0,
-  });
-
-  const contentRef = useMemo<{ current: HTMLDivElement | null }>(() => {
-    return {
-      current: null,
-    };
-  }, []);
-  const selectedItemRef = useRef<HTMLDivElement>(null);
-
-  const autoScrollToSelectedModal = () => {
-    window.setTimeout(() => {
-      const distanceToParent = selectedItemRef.current?.offsetTop || 0;
-      const childHeight = selectedItemRef.current?.offsetHeight || 0;
-      const parentHeight = contentRef.current?.offsetHeight || 0;
-      const distanceToParentCenter =
-        distanceToParent + childHeight / 2 - parentHeight / 2;
-
-      if (distanceToParentCenter > 0 && contentRef.current) {
-        contentRef.current.scrollTop = distanceToParentCenter;
-      }
-    });
-  };
-
-  const content: TriggerProps["content"] = ({ close }) => (
-    <div
-      className={`flex flex-col gap-1 overflow-x-hidden  relative text-sm-title`}
-    >
-      {models?.map((o) => (
-        <div
-          key={o.displayName}
-          className={`flex  items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered  cursor-pointer`}
-          onClick={() => {
-            close();
-            chatStore.updateCurrentSession((session) => {
-              session.mask.modelConfig.model = o.name as ModelType;
-              session.mask.syncGlobalConfig = false;
-            });
-            showToast(o.name);
-          }}
-          ref={currentModel === o.name ? selectedItemRef : undefined}
-        >
-          <div className={`flex-1 text-text-select`}>{o.name}</div>
-          <div
-            className={currentModel === o.name ? "opacity-100" : "opacity-0"}
-          >
-            <Selected />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-
-  if (isMobileScreen) {
-    return (
-      <Modal.Trigger
-        content={(e) => (
-          <div className="h-[100%]  overflow-y-auto" ref={contentRef}>
-            {content(e)}
-          </div>
-        )}
-        type="bottom-drawer"
-        onOpen={(e) => {
-          if (e) {
-            autoScrollToSelectedModal();
-            getRelativePosition(rootRef.current!, "");
-          }
-        }}
-        title={Locale.Chat.SelectModel}
-        headerBordered
-        noFooter
-        modelClassName="h-model-bottom-drawer"
-      >
-        <div
-          className="flex items-center gap-1 cursor-pointer text-text-modal-select"
-          ref={rootRef}
-        >
-          {currentModel}
-          <BottomArrowMobile />
-        </div>
-      </Modal.Trigger>
-    );
-  }
-
-  return (
-    <Popover
-      content={
-        <div className="max-h-chat-actions-select-model-popover overflow-y-auto">
-          {content({ close: () => {} })}
-        </div>
-      }
-      trigger="click"
-      noArrow
-      placement={
-        position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt"
-      }
-      popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover  bg-model-select-popover-panel w-[280px]"
-      onShow={(e) => {
-        if (e) {
-          autoScrollToSelectedModal();
-          getRelativePosition(rootRef.current!, "");
-        }
-      }}
-      getPopoverPanelRef={(ref) => (contentRef.current = ref.current)}
-    >
-      <div
-        className="flex items-center justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model hover:bg-chat-actions-select-model-hover"
-        ref={rootRef}
-      >
-        <div className="line-clamp-1 max-w-chat-actions-select-model text-sm-title text-text-modal-select">
-          {currentModel}
-        </div>
-        <BottomArrow />
-      </div>
-    </Popover>
-  );
-};
-
-export default ModelSelect;
--- a/app/containers/Chat/components/PromptHint.tsx
+++ b/app/containers/Chat/components/PromptHint.tsx
@@ -1,96 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Prompt } from "@/app/store/prompt";
-
-import styles from "../index.module.scss";
-import useShowPromptHint from "@/app/hooks/useShowPromptHint";
-
-export type RenderPompt = Pick<Prompt, "title" | "content">;
-
-export default function PromptHints(props: {
-  prompts: RenderPompt[];
-  onPromptSelect: (prompt: RenderPompt) => void;
-  className?: string;
-}) {
-  const noPrompts = props.prompts.length === 0;
-
-  const [selectIndex, setSelectIndex] = useState(0);
-
-  const selectedRef = useRef<HTMLDivElement>(null);
-
-  const { internalPrompts, notShowPrompt } = useShowPromptHint({ ...props });
-
-  useEffect(() => {
-    setSelectIndex(0);
-  }, [props.prompts.length]);
-
-  useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (noPrompts || e.metaKey || e.altKey || e.ctrlKey) {
-        return;
-      }
-      // arrow up / down to select prompt
-      const changeIndex = (delta: number) => {
-        e.stopPropagation();
-        e.preventDefault();
-        const nextIndex = Math.max(
-          0,
-          Math.min(props.prompts.length - 1, selectIndex + delta),
-        );
-        setSelectIndex(nextIndex);
-        selectedRef.current?.scrollIntoView({
-          block: "center",
-        });
-      };
-
-      if (e.key === "ArrowUp") {
-        changeIndex(1);
-      } else if (e.key === "ArrowDown") {
-        changeIndex(-1);
-      } else if (e.key === "Enter") {
-        const selectedPrompt = props.prompts.at(selectIndex);
-        if (selectedPrompt) {
-          props.onPromptSelect(selectedPrompt);
-        }
-      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-
-    return () => window.removeEventListener("keydown", onKeyDown);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.prompts.length, selectIndex]);
-
-  if (!internalPrompts.length) {
-    return null;
-  }
-
-  return (
-    <div
-      className={`
-        transition-all duration-300 shadow-prompt-hint-container rounded-none  flex flex-col-reverse overflow-x-hidden
-        ${
-          notShowPrompt
-            ? "max-h-[0vh] border-none"
-            : "border-b pt-2.5 max-h-[50vh]"
-        } 
-        ${props.className}
-      `}
-    >
-      {internalPrompts.map((prompt, i) => (
-        <div
-          ref={i === selectIndex ? selectedRef : null}
-          className={
-            styles["prompt-hint"] +
-            ` ${i === selectIndex ? styles["prompt-hint-selected"] : ""}`
-          }
-          key={prompt.title + i.toString()}
-          onClick={() => props.onPromptSelect(prompt)}
-          onMouseEnter={() => setSelectIndex(i)}
-        >
-          <div className={styles["hint-title"]}>{prompt.title}</div>
-          <div className={styles["hint-content"]}>{prompt.content}</div>
-        </div>
-      ))}
-    </div>
-  );
-}
--- a/app/containers/Chat/components/PromptToast.tsx
+++ b/app/containers/Chat/components/PromptToast.tsx
@@ -1,32 +0,0 @@
-import { useChatStore } from "@/app/store/chat";
-import Locale from "@/app/locales";
-
-import BrainIcon from "@/app/icons/brain.svg";
-
-import styles from "../index.module.scss";
-
-export default function PromptToast(props: {
-  showToast?: boolean;
-  setShowModal: (_: boolean) => void;
-}) {
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-  const context = session.mask.context;
-
-  return (
-    <div className={styles["prompt-toast"]} key="prompt-toast">
-      {props.showToast && (
-        <div
-          className={styles["prompt-toast-inner"] + " clickable"}
-          role="button"
-          onClick={() => props.setShowModal(true)}
-        >
-          <BrainIcon />
-          <span className={styles["prompt-toast-content"]}>
-            {Locale.Context.Toast(context.length)}
-          </span>
-        </div>
-      )}
-    </div>
-  );
-}
--- a/app/containers/Chat/components/SessionConfigModal.tsx
+++ b/app/containers/Chat/components/SessionConfigModal.tsx
@@ -1,77 +0,0 @@
-import { Modal, showConfirm } from "@/app/components/ui-lib";
-import { useChatStore } from "@/app/store/chat";
-import { useMaskStore } from "@/app/store/mask";
-import { useNavigate } from "react-router-dom";
-import Locale from "@/app/locales";
-import { IconButton } from "@/app/components/button";
-import { Path } from "@/app/constant";
-
-import ResetIcon from "@/app/icons/reload.svg";
-import CopyIcon from "@/app/icons/copy.svg";
-import MaskConfig from "@/app/containers/Settings/components/MaskConfig";
-import { ListItem } from "@/app/components/List";
-
-export default function SessionConfigModel(props: { onClose: () => void }) {
-  const chatStore = useChatStore();
-  const session = chatStore.currentSession();
-  const maskStore = useMaskStore();
-  const navigate = useNavigate();
-
-  return (
-    <div className="modal-mask">
-      <Modal
-        title={Locale.Context.Edit}
-        onClose={() => props.onClose()}
-        actions={[
-          <IconButton
-            key="reset"
-            icon={<ResetIcon />}
-            bordered
-            text={Locale.Chat.Config.Reset}
-            onClick={async () => {
-              if (await showConfirm(Locale.Memory.ResetConfirm)) {
-                chatStore.updateCurrentSession(
-                  (session) => (session.memoryPrompt = ""),
-                );
-              }
-            }}
-          />,
-          <IconButton
-            key="copy"
-            icon={<CopyIcon />}
-            bordered
-            text={Locale.Chat.Config.SaveAs}
-            onClick={() => {
-              navigate(Path.Masks);
-              setTimeout(() => {
-                maskStore.create(session.mask);
-              }, 500);
-            }}
-          />,
-        ]}
-        // className="!bg-modal-mask"
-      >
-        <MaskConfig
-          mask={session.mask}
-          updateMask={(updater) => {
-            const mask = { ...session.mask };
-            updater(mask);
-            chatStore.updateCurrentSession((session) => (session.mask = mask));
-          }}
-          shouldSyncFromGlobal
-          extraListItems={
-            session.mask.modelConfig.sendMemory ? (
-              <ListItem
-                className="copyable"
-                title={`${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`}
-                subTitle={session.memoryPrompt || Locale.Memory.EmptyContent}
-              ></ListItem>
-            ) : (
-              <></>
-            )
-          }
-        ></MaskConfig>
-      </Modal>
-    </div>
-  );
-}
--- a/app/containers/Chat/components/SessionItem.tsx
+++ b/app/containers/Chat/components/SessionItem.tsx
@@ -1,184 +0,0 @@
-import { Draggable } from "@hello-pangea/dnd";
-
-import Locale from "@/app/locales";
-import { useLocation } from "react-router-dom";
-import { Path } from "@/app/constant";
-import { Mask } from "@/app/store/mask";
-import { useRef, useEffect } from "react";
-
-import DeleteChatIcon from "@/app/icons/deleteChatIcon.svg";
-
-import { getTime } from "@/app/utils";
-import DeleteIcon from "@/app/icons/deleteIcon.svg";
-import LogIcon from "@/app/icons/logIcon.svg";
-
-import HoverPopover from "@/app/components/HoverPopover";
-import Popover from "@/app/components/Popover";
-
-export default function SessionItem(props: {
-  onClick?: () => void;
-  onDelete?: () => void;
-  title: string;
-  count: number;
-  time: string;
-  selected: boolean;
-  id: string;
-  index: number;
-  narrow?: boolean;
-  mask: Mask;
-  isMobileScreen: boolean;
-}) {
-  const draggableRef = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (props.selected && draggableRef.current) {
-      draggableRef.current?.scrollIntoView({
-        block: "center",
-      });
-    }
-  }, [props.selected]);
-
-  const { pathname: currentPath } = useLocation();
-
-  return (
-    <Draggable draggableId={`${props.id}`} index={props.index}>
-      {(provided) => (
-        <div
-          className={`
-              group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2 
-              border 
-              transition-colors duration-300 ease-in-out
-              bg-chat-menu-session-unselected-mobile border-chat-menu-session-unselected-mobile
-              md:bg-chat-menu-session-unselected md:border-chat-menu-session-unselected
-              ${
-                props.selected &&
-                (currentPath === Path.Chat || currentPath === Path.Home)
-                  ? `
-                    md:!bg-chat-menu-session-selected md:!border-chat-menu-session-selected
-                    !bg-chat-menu-session-selected-mobile !border-chat-menu-session-selected-mobile
-                    `
-                  : `md:hover:bg-chat-menu-session-hovered md:hover:chat-menu-session-hovered`
-              }
-            `}
-          onClick={props.onClick}
-          ref={(ele) => {
-            draggableRef.current = ele;
-            provided.innerRef(ele);
-          }}
-          {...provided.draggableProps}
-          {...provided.dragHandleProps}
-          title={`${props.title}\n${Locale.ChatItem.ChatItemCount(
-            props.count,
-          )}`}
-        >
-          <div className=" flex-shrink-0">
-            <LogIcon />
-          </div>
-          <div className="flex flex-col flex-1">
-            <div className={`flex justify-between items-center`}>
-              <div
-                className={` text-text-chat-menu-item-title text-sm-title line-clamp-1 flex-1`}
-              >
-                {props.title}
-              </div>
-              <div
-                className={`text-text-chat-menu-item-time text-sm group-hover/chat-menu-list:opacity-0 pl-3 hidden md:block`}
-              >
-                {getTime(props.time)}
-              </div>
-            </div>
-            <div className={`text-text-chat-menu-item-description text-sm`}>
-              {Locale.ChatItem.ChatItemCount(props.count)}
-            </div>
-          </div>
-          <div
-            className={`text-text-chat-menu-item-time text-sm pl-3 block md:hidden`}
-          >
-            {getTime(props.time)}
-          </div>
-          {props.isMobileScreen ? (
-            <Popover
-              content={
-                <div
-                  className={`
-                    flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer
-                    follow-parent-svg
-                    fill-none
-                    text-text-chat-menu-item-delete
-                `}
-                  onClickCapture={(e) => {
-                    props.onDelete?.();
-                  }}
-                >
-                  <DeleteChatIcon />
-                  <div className="flex-1 font-common text-actions-popover-menu-item ">
-                    {Locale.Chat.Actions.Delete}
-                  </div>
-                </div>
-              }
-              popoverClassName={`
-                    px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow 
-                `}
-              noArrow
-              placement="r"
-            >
-              <div
-                className={`
-                        cursor-pointer rounded-chat-img
-                        md:!absolute md:top-[50%] md:translate-y-[-50%] md:right-3 md:pointer-events-none md:opacity-0 
-                        md:group-hover/chat-menu-list:pointer-events-auto 
-                        md:group-hover/chat-menu-list:opacity-100
-                        md:hover:bg-select-hover 
-                        follow-parent-svg
-                        fill-none
-                        text-text-chat-menu-item-time
-                    `}
-              >
-                <DeleteIcon />
-              </div>
-            </Popover>
-          ) : (
-            <HoverPopover
-              content={
-                <div
-                  className={`
-                    flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer
-                    follow-parent-svg
-                    fill-none
-                    text-text-chat-menu-item-delete
-                `}
-                  onClickCapture={(e) => {
-                    props.onDelete?.();
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }}
-                >
-                  <DeleteChatIcon />
-                  <div className="flex-1 font-common text-actions-popover-menu-item text-text-chat-menu-item-delete">
-                    {Locale.Chat.Actions.Delete}
-                  </div>
-                </div>
-              }
-              popoverClassName={`
-                    px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow 
-                `}
-              noArrow
-              align="start"
-            >
-              <div
-                className={`
-                        cursor-pointer rounded-chat-img
-                        md:!absolute md:top-[50%] md:translate-y-[-50%] md:right-3 md:pointer-events-none md:opacity-0 
-                        md:group-hover/chat-menu-list:pointer-events-auto 
-                        md:group-hover/chat-menu-list:opacity-100
-                        md:hover:bg-select-hover 
-                    `}
-              >
-                <DeleteIcon />
-              </div>
-            </HoverPopover>
-          )}
-        </div>
-      )}
-    </Draggable>
-  );
-}
--- a/app/containers/Chat/index.module.scss
+++ b/app/containers/Chat/index.module.scss
@@ -1,609 +0,0 @@
-@import "~@/app/styles/animation.scss";
-
-.attach-images {
-  position: absolute;
-  left: 30px;
-  bottom: 32px;
-  display: flex;
-}
-
-.attach-image {
-  cursor: default;
-  width: 64px;
-  height: 64px;
-  border: rgba($color: #888, $alpha: 0.2) 1px solid;
-  border-radius: 5px;
-  margin-right: 10px;
-  background-size: cover;
-  background-position: center;
-  background-color: var(--white);
-
-  .attach-image-mask {
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: all ease 0.2s;
-  }
-
-  .attach-image-mask:hover {
-    opacity: 1;
-  }
-
-  .delete-image {
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px;
-    float: right;
-    background-color: var(--white);
-  }
-}
-
-.chat-input-actions {
-  display: flex;
-  flex-wrap: wrap;
-
-  .chat-input-action {
-    display: inline-flex;
-    border-radius: 20px;
-    font-size: 12px;
-    background-color: var(--white);
-    color: var(--black);
-    border: var(--border-in-light);
-    padding: 4px 10px;
-    animation: slide-in ease 0.3s;
-    box-shadow: var(--card-shadow);
-    transition: width ease 0.3s;
-    align-items: center;
-    height: 16px;
-    width: var(--icon-width);
-    overflow: hidden;
-
-    &:not(:last-child) {
-      margin-right: 5px;
-    }
-
-    .text {
-      white-space: nowrap;
-      padding-left: 5px;
-      opacity: 0;
-      transform: translateX(-5px);
-      transition: all ease 0.3s;
-      pointer-events: none;
-    }
-
-    &:hover {
-      --delay: 0.5s;
-      width: var(--full-width);
-      transition-delay: var(--delay);
-
-      .text {
-        transition-delay: var(--delay);
-        opacity: 1;
-        transform: translate(0);
-      }
-    }
-
-    .text,
-    .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-
-.prompt-toast {
-  position: absolute;
-  bottom: -50px;
-  z-index: 999;
-  display: flex;
-  justify-content: center;
-  width: calc(100% - 40px);
-
-  .prompt-toast-inner {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    background-color: var(--white);
-    color: var(--black);
-
-    border: var(--border-in-light);
-    box-shadow: var(--card-shadow);
-    padding: 10px 20px;
-    border-radius: 100px;
-
-    animation: slide-in-from-top ease 0.3s;
-
-    .prompt-toast-content {
-      margin-left: 10px;
-    }
-  }
-}
-
-.section-title {
-  font-size: 12px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .section-title-action {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.context-prompt {
-  .context-prompt-insert {
-    display: flex;
-    justify-content: center;
-    padding: 4px;
-    opacity: 0.2;
-    transition: all ease 0.3s;
-    background-color: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    border-radius: 4px;
-    margin-top: 4px;
-    margin-bottom: 4px;
-
-    &:hover {
-      opacity: 1;
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-  }
-
-  .context-prompt-row {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-
-    &:hover {
-      .context-drag {
-        opacity: 1;
-      }
-    }
-
-    .context-drag {
-      display: flex;
-      align-items: center;
-      opacity: 0.5;
-      transition: all ease 0.3s;
-    }
-
-    .context-role {
-      margin-right: 10px;
-    }
-
-    .context-content {
-      flex: 1;
-      max-width: 100%;
-      text-align: left;
-    }
-
-    .context-delete-button {
-      margin-left: 10px;
-    }
-  }
-
-  .context-prompt-button {
-    flex: 1;
-  }
-}
-
-.memory-prompt {
-  margin: 20px 0;
-
-  .memory-prompt-content {
-    background-color: var(--white);
-    color: var(--black);
-    border: var(--border-in-light);
-    border-radius: 10px;
-    padding: 10px;
-    font-size: 12px;
-    user-select: text;
-  }
-}
-
-.clear-context {
-  margin: 20px 0 0 0;
-  padding: 4px 0;
-
-  border-top: var(--border-in-light);
-  border-bottom: var(--border-in-light);
-  box-shadow: var(--card-shadow) inset;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  color: var(--black);
-  transition: all ease 0.3s;
-  cursor: pointer;
-  overflow: hidden;
-  position: relative;
-  font-size: 12px;
-
-  animation: slide-in ease 0.3s;
-
-  $linear: linear-gradient(to right,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 1),
-      rgba(0, 0, 0, 0));
-  mask-image: $linear;
-
-  @mixin show {
-    transform: translateY(0);
-    position: relative;
-    transition: all ease 0.3s;
-    opacity: 1;
-  }
-
-  @mixin hide {
-    transform: translateY(-50%);
-    position: absolute;
-    transition: all ease 0.1s;
-    opacity: 0;
-  }
-
-  &-tips {
-    @include show;
-    opacity: 0.5;
-  }
-
-  &-revert-btn {
-    color: var(--primary);
-    @include hide;
-  }
-
-  &:hover {
-    opacity: 1;
-    border-color: var(--primary);
-
-    .clear-context-tips {
-      @include hide;
-    }
-
-    .clear-context-revert-btn {
-      @include show;
-    }
-  }
-}
-
-.chat {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  // height: 100%;
-}
-
-.chat-body {
-  flex: 1;
-  overflow: auto;
-  overflow-x: hidden;
-  padding: 20px;
-  padding-bottom: 40px;
-  position: relative;
-  overscroll-behavior: none;
-}
-
-.chat-body-main-title {
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  .chat-body-title {
-    text-align: center;
-  }
-}
-
-.chat-message {
-  display: flex;
-  flex-direction: row;
-
-  &:last-child {
-    animation: slide-in ease 0.3s;
-  }
-}
-
-.chat-message-user {
-  display: flex;
-  flex-direction: row-reverse;
-
-  .chat-message-header {
-    flex-direction: row-reverse;
-  }
-}
-
-.chat-message-header {
-  margin-top: 20px;
-  display: flex;
-  align-items: center;
-
-  .chat-message-actions {
-    display: flex;
-    box-sizing: border-box;
-    font-size: 12px;
-    align-items: flex-end;
-    justify-content: space-between;
-    transition: all ease 0.3s;
-    transform: scale(0.9) translateY(5px);
-    margin: 0 10px;
-    opacity: 0;
-    pointer-events: none;
-
-    .chat-input-actions {
-      display: flex;
-      flex-wrap: nowrap;
-    }
-  }
-}
-
-.chat-message-container {
-  max-width: var(--message-max-width);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-
-  &:hover {
-    .chat-message-edit {
-      opacity: 0.9;
-    }
-
-    .chat-message-actions {
-      opacity: 1;
-      pointer-events: all;
-      transform: scale(1) translateY(0);
-    }
-  }
-}
-
-.chat-message-user>.chat-message-container {
-  align-items: flex-end;
-}
-
-.chat-message-avatar {
-  position: relative;
-
-  .chat-message-edit {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: all ease 0.3s;
-
-    button {
-      padding: 7px;
-    }
-  }
-
-  /* Specific styles for iOS devices */
-  @media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
-    @supports (-webkit-touch-callout: none) {
-      .chat-message-edit {
-        top: -8%;
-      }
-    }
-  }
-}
-
-.chat-message-status {
-  font-size: 12px;
-  color: #aaa;
-  line-height: 1.5;
-  margin-top: 5px;
-}
-
-.chat-message-item {
-  // box-sizing: border-box;
-  // max-width: 100%;
-  // margin-top: 10px;
-  // border-radius: 10px;
-  // background-color: rgba(0, 0, 0, 0.05);
-  // padding: 10px;
-  // font-size: 14px;
-  // user-select: text;
-  // word-break: break-word;
-  // border: var(--border-in-light);
-  // position: relative;
-  transition: all ease 0.3s;
-}
-
-.chat-message-item-image {
-  width: 100%;
-  margin-top: 10px;
-}
-
-.chat-message-item-images {
-  width: 100%;
-  display: grid;
-  justify-content: left;
-  grid-gap: 10px;
-  grid-template-columns: repeat(var(--image-count), auto);
-  margin-top: 10px;
-}
-
-.chat-message-item-image-multi {
-  object-fit: cover;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.chat-message-item-image,
-.chat-message-item-image-multi {
-  box-sizing: border-box;
-  border-radius: 10px;
-  border: rgba($color: #888, $alpha: 0.2) 1px solid;
-}
-
-
-@media only screen and (max-width: 600px) {
-  $calc-image-width: calc(100vw/3*2/var(--image-count));
-
-  .chat-message-item-image-multi {
-    width: $calc-image-width;
-    height: $calc-image-width;
-  }
-  
-  .chat-message-item-image {
-    max-width: calc(100vw/3*2);
-  }
-}
-
-@media screen and (min-width: 600px) {
-  $max-image-width: calc(calc(1200px - var(--sidebar-width))/3*2/var(--image-count));
-  $image-width: calc(calc(var(--window-width) - var(--sidebar-width))/3*2/var(--image-count));
-
-  .chat-message-item-image-multi {
-    width: $image-width;
-    height: $image-width;
-    max-width: $max-image-width;
-    max-height: $max-image-width;
-  }
-
-  .chat-message-item-image {
-    max-width: calc(calc(1200px - var(--sidebar-width))/3*2);
-  }
-}
-
-// .chat-message-action-date {
-//   // font-size: 12px;
-//   // opacity: 0.2;
-//   // white-space: nowrap;
-//   // transition: all ease 0.6s;
-//   // color: var(--black);
-//   // text-align: right;
-//   // width: 100%;
-//   // box-sizing: border-box;
-//   // padding-right: 10px;
-//   // pointer-events: none;
-//   // z-index: 1;
-// }
-
-.chat-message-user>.chat-message-container>.chat-message-item {
-  background-color: var(--second);
-
-  &:hover {
-    min-width: 0;
-  }
-}
-
-.chat-input-panel {
-  // position: relative;
-  // width: 100%;
-  // padding: 20px;
-  // padding-top: 10px;
-  // box-sizing: border-box;
-  // flex-direction: column;
-  // border-top: var(--border-in-light);
-  // box-shadow: var(--card-shadow);
-
-  .chat-input-actions {
-    .chat-input-action {
-      margin-bottom: 10px;
-    }
-  }
-}
-
-@mixin single-line {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.prompt-hint {
-  color:var(--btn-default-text);
-  padding: 6px 10px;
-  border: transparent 1px solid;
-  margin: 4px;
-  border-radius: 8px;
-
-  &:not(:last-child) {
-    margin-top: 0;
-  }
-
-  .hint-title {
-    font-size: 12px;
-    font-weight: bolder;
-
-    @include single-line();
-  }
-
-  .hint-content {
-    font-size: 12px;
-
-    @include single-line();
-  }
-
-  &-selected,
-  &:hover {
-    border-color: var(--primary);
-  }
-}
-
-// .chat-input-panel-inner {
-//   cursor: text;
-//   display: flex;
-//   flex: 1;
-//   border-radius: 10px;
-//   border: var(--border-in-light);
-// }
-
-.chat-input-panel-inner-attach {
-  padding-bottom: 80px;
-}
-
-.chat-input-panel-inner:has(.chat-input:focus) {
-  border: 1px solid var(--primary);
-}
-
-.chat-input {
-  height: 100%;
-  width: 100%;
-  border-radius: 10px;
-  border: none;
-  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
-  background-color: var(--white);
-  color: var(--black);
-  font-family: inherit;
-  padding: 10px 90px 10px 14px;
-  resize: none;
-  outline: none;
-  box-sizing: border-box;
-  min-height: 68px;
-}
-
-.chat-input:focus {}
-
-.chat-input-send {
-  background-color: var(--primary);
-  color: white;
-
-  position: absolute;
-  right: 30px;
-  bottom: 32px;
-}
-
-@media only screen and (max-width: 600px) {
-  .chat-input {
-    font-size: 16px;
-  }
-
-  .chat-input-send {
-    bottom: 30px;
-  }
-}
--- a/app/containers/Chat/index.tsx
+++ b/app/containers/Chat/index.tsx
@@ -1,146 +0,0 @@
-import {
-  DragDropContext,
-  Droppable,
-  OnDragEndResponder,
-} from "@hello-pangea/dnd";
-
-import { useAppConfig, useChatStore } from "@/app/store";
-
-import Locale from "@/app/locales";
-import { useLocation, useNavigate } from "react-router-dom";
-import { Path } from "@/app/constant";
-import { useEffect } from "react";
-
-import AddIcon from "@/app/icons/addIcon.svg";
-import NextChatTitle from "@/app/icons/nextchatTitle.svg";
-
-import MenuLayout from "@/app/components/MenuLayout";
-import Panel from "./ChatPanel";
-import Modal from "@/app/components/Modal";
-import SessionItem from "./components/SessionItem";
-
-export default MenuLayout(function SessionList(props) {
-  const { setShowPanel } = props;
-
-  const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
-    (state) => [
-      state.sessions,
-      state.currentSessionIndex,
-      state.selectSession,
-      state.moveSession,
-    ],
-  );
-  const navigate = useNavigate();
-  const config = useAppConfig();
-
-  const { isMobileScreen } = config;
-
-  const chatStore = useChatStore();
-  const { pathname: currentPath } = useLocation();
-
-  useEffect(() => {
-    setShowPanel?.(currentPath === Path.Chat);
-  }, [currentPath]);
-
-  const onDragEnd: OnDragEndResponder = (result) => {
-    const { destination, source } = result;
-    if (!destination) {
-      return;
-    }
-
-    if (
-      destination.droppableId === source.droppableId &&
-      destination.index === source.index
-    ) {
-      return;
-    }
-    moveSession(source.index, destination.index);
-  };
-
-  return (
-    <div
-      className={`
-      h-[100%] flex flex-col
-      md:px-0
-    `}
-    >
-      <div data-tauri-drag-region>
-        <div
-          className={`
-            flex items-center justify-between
-            py-6 max-md:box-content max-md:h-0
-            md:py-7
-          `}
-          data-tauri-drag-region
-        >
-          <div className="">
-            <NextChatTitle />
-          </div>
-          <div
-            className=" cursor-pointer"
-            onClick={() => {
-              if (config.dontShowMaskSplashScreen) {
-                chatStore.newSession();
-                navigate(Path.Chat);
-              } else {
-                navigate(Path.NewChat);
-              }
-            }}
-          >
-            <AddIcon />
-          </div>
-        </div>
-        <div
-          className={`pb-3 text-sm sm:text-sm-mobile text-text-chat-header-subtitle`}
-        >
-          Build your own AI assistant.
-        </div>
-      </div>
-
-      <div className={`flex-1 overflow-y-auto max-md:pb-chat-panel-mobile `}>
-        <DragDropContext onDragEnd={onDragEnd}>
-          <Droppable droppableId="chat-list">
-            {(provided) => (
-              <div
-                ref={provided.innerRef}
-                {...provided.droppableProps}
-                className={`w-[100%]`}
-              >
-                {sessions.map((item, i) => (
-                  <SessionItem
-                    title={item.topic}
-                    time={new Date(item.lastUpdate).toLocaleString()}
-                    count={item.messages.length}
-                    key={item.id}
-                    id={item.id}
-                    index={i}
-                    selected={i === selectedIndex}
-                    onClick={() => {
-                      navigate(Path.Chat);
-                      selectSession(i);
-                    }}
-                    onDelete={async () => {
-                      if (
-                        await Modal.warn({
-                          okText: Locale.ChatItem.DeleteOkBtn,
-                          cancelText: Locale.ChatItem.DeleteCancelBtn,
-                          title: Locale.ChatItem.DeleteTitle,
-                          content: Locale.ChatItem.DeleteContent,
-                        })
-                      ) {
-                        chatStore.deleteSession(i);
-                      }
-                    }}
-                    mask={item.mask}
-                    isMobileScreen={isMobileScreen}
-                  />
-                ))}
-                {provided.placeholder}
-              </div>
-            )}
-          </Droppable>
-        </DragDropContext>
-      </div>
-    </div>
-  );
-}, Panel);
--- a/app/containers/Settings/SettingPanel.tsx
+++ b/app/containers/Settings/SettingPanel.tsx
@@ -1,137 +0,0 @@
-import { useEffect, useMemo } from "react";
-import { useAccessStore, useAppConfig } from "@/app/store";
-import Locale from "@/app/locales";
-
-import { Path } from "@/app/constant";
-import List from "@/app/components/List";
-import { useNavigate } from "react-router-dom";
-import { getClientConfig } from "@/app/config/client";
-import Card from "@/app/components/Card";
-import SettingHeader from "./components/SettingHeader";
-import { MenuWrapperInspectProps } from "@/app/components/MenuLayout";
-import SyncItems from "./components/SyncItems";
-import DangerItems from "./components/DangerItems";
-import AppSetting from "./components/AppSetting";
-import MaskSetting from "./components/MaskSetting";
-import PromptSetting from "./components/PromptSetting";
-import ProviderSetting from "./components/ProviderSetting";
-import ModelConfigList from "./components/ModelSetting";
-
-export default function Settings(props: MenuWrapperInspectProps) {
-  const { setShowPanel, id } = props;
-
-  const navigate = useNavigate();
-  const accessStore = useAccessStore();
-  const config = useAppConfig();
-
-  const { isMobileScreen } = config;
-
-  useEffect(() => {
-    const keydownEvent = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        navigate(Path.Home);
-      }
-    };
-    if (clientConfig?.isApp) {
-      // Force to set custom endpoint to true if it's app
-      accessStore.update((state) => {
-        state.useCustomConfig = true;
-      });
-    }
-    document.addEventListener("keydown", keydownEvent);
-    return () => {
-      document.removeEventListener("keydown", keydownEvent);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const clientConfig = useMemo(() => getClientConfig(), []);
-
-  const cardClassName = "mb-6 md:mb-8 last:mb-0";
-
-  const itemMap = {
-    [Locale.Settings.GeneralSettings]: (
-      <>
-        <Card className={cardClassName} title={Locale.Settings.Basic.Title}>
-          <AppSetting />
-        </Card>
-
-        <Card className={cardClassName} title={Locale.Settings.Mask.Title}>
-          <MaskSetting />
-        </Card>
-        <Card className={cardClassName} title={Locale.Settings.Prompt.Title}>
-          <PromptSetting />
-        </Card>
-        <Card className={cardClassName} title={Locale.Settings.Provider.Title}>
-          <ProviderSetting />
-        </Card>
-
-        <Card className={cardClassName} title={Locale.Settings.Danger.Title}>
-          <DangerItems />
-        </Card>
-      </>
-    ),
-    [Locale.Settings.ModelSettings]: (
-      <Card className={cardClassName} title={Locale.Settings.Models.Title}>
-        <List
-          widgetStyle={{
-            // selectClassName: "min-w-select-mobile-lg",
-            selectClassName: "min-w-select-mobile md:min-w-select",
-            inputClassName: "md:min-w-select",
-            rangeClassName: "md:min-w-select",
-            rangeNextLine: isMobileScreen,
-          }}
-        >
-          <ModelConfigList
-            modelConfig={config.modelConfig}
-            updateConfig={(updater) => {
-              const modelConfig = { ...config.modelConfig };
-              updater(modelConfig);
-              config.update((config) => (config.modelConfig = modelConfig));
-            }}
-          />
-        </List>
-      </Card>
-    ),
-    [Locale.Settings.DataSettings]: (
-      <Card className={cardClassName} title={Locale.Settings.Sync.Title}>
-        <SyncItems />
-      </Card>
-    ),
-  };
-
-  return (
-    <div
-      className={`
-        flex flex-col overflow-hidden bg-settings-panel 
-        h-setting-panel-mobile
-        md:h-[100%] md:mr-2.5 md:rounded-md
-      `}
-    >
-      <SettingHeader
-        isMobileScreen={isMobileScreen}
-        goback={() => setShowPanel?.(false)}
-      />
-      <div
-        className={`
-          max-md:w-[100%]
-          px-4 py-5
-          md:px-6 md:py-8
-          flex items-start justify-center
-          overflow-y-auto
-        `}
-      >
-        <div
-          className={`
-            w-full
-            max-w-screen-md
-            !overflow-x-hidden 
-            overflow-y-auto
-          `}
-        >
-          {itemMap[id] || null}
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/app/containers/Settings/components/AppSetting.tsx
+++ b/app/containers/Settings/components/AppSetting.tsx
@@ -1,200 +0,0 @@
-import LoadingIcon from "@/app/icons/three-dots.svg";
-import ResetIcon from "@/app/icons/reload.svg";
-
-import styles from "../index.module.scss";
-
-import { useEffect, useState } from "react";
-import { Avatar, AvatarPicker } from "@/app/components/emoji";
-import { Popover } from "@/app/components/ui-lib";
-import Locale, {
-  ALL_LANG_OPTIONS,
-  AllLangs,
-  changeLang,
-  getLang,
-} from "@/app/locales";
-import Link from "next/link";
-import { IconButton } from "@/app/components/button";
-import { useUpdateStore } from "@/app/store/update";
-import {
-  SubmitKey,
-  Theme,
-  ThemeConfig,
-  useAppConfig,
-} from "@/app/store/config";
-import { getClientConfig } from "@/app/config/client";
-import { RELEASE_URL, UPDATE_URL } from "@/app/constant";
-import List, { ListItem } from "@/app/components/List";
-import Select from "@/app/components/Select";
-import SlideRange from "@/app/components/SlideRange";
-import Switch from "@/app/components/Switch";
-
-export interface AppSettingProps {}
-
-export default function AppSetting(props: AppSettingProps) {
-  const [checkingUpdate, setCheckingUpdate] = useState(false);
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-
-  const updateStore = useUpdateStore();
-  const config = useAppConfig();
-  const { update: updateConfig, isMobileScreen } = config;
-
-  const currentVersion = updateStore.formatVersion(updateStore.version);
-  const remoteId = updateStore.formatVersion(updateStore.remoteVersion);
-  const hasNewVersion = currentVersion !== remoteId;
-  const updateUrl = getClientConfig()?.isApp ? RELEASE_URL : UPDATE_URL;
-
-  function checkUpdate(force = false) {
-    setCheckingUpdate(true);
-    updateStore.getLatestVersion(force).then(() => {
-      setCheckingUpdate(false);
-    });
-
-    console.log("[Update] local version ", updateStore.version);
-    console.log("[Update] remote version ", updateStore.remoteVersion);
-  }
-
-  useEffect(() => {
-    // checks per minutes
-    checkUpdate();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <List
-      widgetStyle={{
-        selectClassName: "min-w-select-mobile md:min-w-select",
-        inputClassName: "md:min-w-select",
-        rangeClassName: "md:min-w-select",
-        rangeNextLine: isMobileScreen,
-      }}
-    >
-      <ListItem title={Locale.Settings.Avatar}>
-        <Popover
-          onClose={() => setShowEmojiPicker(false)}
-          content={
-            <AvatarPicker
-              onEmojiClick={(avatar: string) => {
-                updateConfig((config) => (config.avatar = avatar));
-                setShowEmojiPicker(false);
-              }}
-            />
-          }
-          open={showEmojiPicker}
-        >
-          <div
-            className={styles.avatar}
-            onClick={() => {
-              setShowEmojiPicker(!showEmojiPicker);
-            }}
-          >
-            <Avatar avatar={config.avatar} />
-          </div>
-        </Popover>
-      </ListItem>
-
-      <ListItem
-        title={Locale.Settings.Update.Version(currentVersion ?? "unknown")}
-        subTitle={
-          checkingUpdate
-            ? Locale.Settings.Update.IsChecking
-            : hasNewVersion
-            ? Locale.Settings.Update.FoundUpdate(remoteId ?? "ERROR")
-            : Locale.Settings.Update.IsLatest
-        }
-      >
-        {checkingUpdate ? (
-          <LoadingIcon />
-        ) : hasNewVersion ? (
-          <Link href={updateUrl} target="_blank" className="link">
-            {Locale.Settings.Update.GoToUpdate}
-          </Link>
-        ) : (
-          <IconButton
-            icon={<ResetIcon />}
-            text={Locale.Settings.Update.CheckUpdate}
-            onClick={() => checkUpdate(true)}
-          />
-        )}
-      </ListItem>
-
-      <ListItem title={Locale.Settings.SendKey}>
-        <Select
-          value={config.submitKey}
-          options={Object.values(SubmitKey).map((v) => ({
-            value: v,
-            label: v,
-          }))}
-          onSelect={(v) => {
-            updateConfig((config) => (config.submitKey = v));
-          }}
-        />
-      </ListItem>
-
-      <ListItem title={Locale.Settings.Theme}>
-        <Select
-          value={config.theme}
-          options={Object.entries(ThemeConfig).map(([k, t]) => ({
-            value: k as Theme,
-            label: t.title,
-            icon: <t.icon />,
-          }))}
-          onSelect={(e) => {
-            updateConfig((config) => (config.theme = e));
-          }}
-        />
-      </ListItem>
-
-      <ListItem title={Locale.Settings.Lang.Name}>
-        <Select
-          value={getLang()}
-          options={AllLangs.map((lang) => ({
-            value: lang,
-            label: ALL_LANG_OPTIONS[lang],
-          }))}
-          onSelect={(e) => {
-            changeLang(e);
-          }}
-        />
-      </ListItem>
-
-      <ListItem
-        title={Locale.Settings.FontSize.Title}
-        subTitle={Locale.Settings.FontSize.SubTitle}
-      >
-        <SlideRange
-          value={config.fontSize}
-          range={{
-            start: 12,
-            stroke: 28,
-          }}
-          step={1}
-          onSlide={(e) => updateConfig((config) => (config.fontSize = e))}
-        ></SlideRange>
-      </ListItem>
-
-      <ListItem
-        title={Locale.Settings.AutoGenerateTitle.Title}
-        subTitle={Locale.Settings.AutoGenerateTitle.SubTitle}
-      >
-        <Switch
-          value={config.enableAutoGenerateTitle}
-          onChange={(e) =>
-            updateConfig((config) => (config.enableAutoGenerateTitle = e))
-          }
-        />
-      </ListItem>
-
-      <ListItem
-        title={Locale.Settings.SendPreviewBubble.Title}
-        subTitle={Locale.Settings.SendPreviewBubble.SubTitle}
-      >
-        <Switch
-          value={config.sendPreviewBubble}
-          onChange={(e) =>
-            updateConfig((config) => (config.sendPreviewBubble = e))
-          }
-        />
-      </ListItem>
-    </List>
-  );
-}
--- a/app/containers/Settings/components/DangerItems.tsx
+++ b/app/containers/Settings/components/DangerItems.tsx
@@ -1,153 +0,0 @@
-import { IconButton } from "@/app/components/button";
-import { showConfirm } from "@/app/components/ui-lib";
-import { useChatStore } from "@/app/store/chat";
-import { useAppConfig } from "@/app/store/config";
-import Locale from "@/app/locales";
-import { useAccessStore } from "@/app/store/access";
-import { useEffect, useMemo, useState } from "react";
-import { getClientConfig } from "@/app/config/client";
-import { OPENAI_BASE_URL, ServiceProvider } from "@/app/constant";
-import { useUpdateStore } from "@/app/store/update";
-
-import ResetIcon from "@/app/icons/reload.svg";
-import List, { ListItem } from "@/app/components/List";
-import Input from "@/app/components/Input";
-import Btn from "@/app/components/Btn";
-
-export default function DangerItems() {
-  const chatStore = useChatStore();
-  const appConfig = useAppConfig();
-  const accessStore = useAccessStore();
-  const updateStore = useUpdateStore();
-  const { isMobileScreen } = appConfig;
-
-  const enabledAccessControl = useMemo(
-    () => accessStore.enabledAccessControl(),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  const clientConfig = useMemo(() => getClientConfig(), []);
-
-  const showAccessCode = enabledAccessControl && !clientConfig?.isApp;
-
-  const shouldHideBalanceQuery = useMemo(() => {
-    const isOpenAiUrl = accessStore.openaiUrl.includes(OPENAI_BASE_URL);
-    return (
-      accessStore.hideBalanceQuery ||
-      isOpenAiUrl ||
-      accessStore.provider === ServiceProvider.Azure
-    );
-  }, [
-    accessStore.hideBalanceQuery,
-    accessStore.openaiUrl,
-    accessStore.provider,
-  ]);
-
-  const [loadingUsage, setLoadingUsage] = useState(false);
-  const usage = {
-    used: updateStore.used,
-    subscription: updateStore.subscription,
-  };
-
-  function checkUsage(force = false) {
-    if (shouldHideBalanceQuery) {
-      return;
-    }
-
-    setLoadingUsage(true);
-    updateStore.updateUsage(force).finally(() => {
-      setLoadingUsage(false);
-    });
-  }
-
-  const showUsage = accessStore.isAuthorized();
-
-  useEffect(() => {
-    showUsage && checkUsage();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <List
-      widgetStyle={{
-        selectClassName: "min-w-select-mobile md:min-w-select",
-        inputClassName: "md:min-w-select",
-        rangeClassName: "md:min-w-select",
-        rangeNextLine: isMobileScreen,
-        inputNextLine: isMobileScreen,
-      }}
-    >
-      {showAccessCode && (
-        <ListItem
-          title={Locale.Settings.Access.AccessCode.Title}
-          subTitle={Locale.Settings.Access.AccessCode.SubTitle}
-        >
-          <Input
-            value={accessStore.accessCode}
-            type="password"
-            placeholder={Locale.Settings.Access.AccessCode.Placeholder}
-            onChange={(e) => {
-              accessStore.update((access) => (access.accessCode = e));
-            }}
-          />
-        </ListItem>
-      )}
-
-      {!shouldHideBalanceQuery && !clientConfig?.isApp ? (
-        <ListItem
-          title={Locale.Settings.Usage.Title}
-          subTitle={
-            showUsage
-              ? loadingUsage
-                ? Locale.Settings.Usage.IsChecking
-                : Locale.Settings.Usage.SubTitle(
-                    usage?.used ?? "[?]",
-                    usage?.subscription ?? "[?]",
-                  )
-              : Locale.Settings.Usage.NoAccess
-          }
-        >
-          {!showUsage || loadingUsage ? (
-            <div />
-          ) : (
-            <IconButton
-              icon={<ResetIcon />}
-              text={Locale.Settings.Usage.Check}
-              onClick={() => checkUsage(true)}
-            />
-          )}
-        </ListItem>
-      ) : null}
-
-      <ListItem
-        title={Locale.Settings.Danger.Reset.Title}
-        subTitle={Locale.Settings.Danger.Reset.SubTitle}
-      >
-        <Btn
-          text={Locale.Settings.Danger.Reset.Action}
-          onClick={async () => {
-            if (await showConfirm(Locale.Settings.Danger.Reset.Confirm)) {
-              appConfig.reset();
-            }
-          }}
-          type="danger"
-        />
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.Danger.Clear.Title}
-        subTitle={Locale.Settings.Danger.Clear.SubTitle}
-      >
-        <Btn
-          text={Locale.Settings.Danger.Clear.Action}
-          onClick={async () => {
-            if (await showConfirm(Locale.Settings.Danger.Clear.Confirm)) {
-              chatStore.clearAllData();
-            }
-          }}
-          type="danger"
-        />
-      </ListItem>
-    </List>
-  );
-}
--- a/app/containers/Settings/components/MaskConfig.tsx
+++ b/app/containers/Settings/components/MaskConfig.tsx
@@ -1,162 +0,0 @@
-import { useState } from "react";
-import List, { ListItem } from "@/app/components/List";
-import { ContextPrompts, MaskAvatar } from "@/app/components/mask";
-import { Path } from "@/app/constant";
-import { ModelConfig, useAppConfig } from "@/app/store/config";
-import { Mask } from "@/app/store/mask";
-import { Updater } from "@/app/typing";
-import { copyToClipboard } from "@/app/utils";
-import Locale from "@/app/locales";
-import { Popover, showConfirm } from "@/app/components/ui-lib";
-import { AvatarPicker } from "@/app/components/emoji";
-import ModelSetting from "@/app/containers/Settings/components/ModelSetting";
-import { IconButton } from "@/app/components/button";
-
-import CopyIcon from "@/app/icons/copy.svg";
-import Switch from "@/app/components/Switch";
-import Input from "@/app/components/Input";
-
-export default function MaskConfig(props: {
-  mask: Mask;
-  updateMask: Updater<Mask>;
-  extraListItems?: JSX.Element;
-  readonly?: boolean;
-  shouldSyncFromGlobal?: boolean;
-}) {
-  const [showPicker, setShowPicker] = useState(false);
-
-  const updateConfig = (updater: (config: ModelConfig) => void) => {
-    if (props.readonly) return;
-
-    const config = { ...props.mask.modelConfig };
-    updater(config);
-    props.updateMask((mask) => {
-      mask.modelConfig = config;
-      // if user changed current session mask, it will disable auto sync
-      mask.syncGlobalConfig = false;
-    });
-  };
-
-  const copyMaskLink = () => {
-    const maskLink = `${location.protocol}//${location.host}/#${Path.NewChat}?mask=${props.mask.id}`;
-    copyToClipboard(maskLink);
-  };
-
-  const globalConfig = useAppConfig();
-
-  const { isMobileScreen } = globalConfig;
-
-  return (
-    <>
-      <ContextPrompts
-        context={props.mask.context}
-        updateContext={(updater) => {
-          const context = props.mask.context.slice();
-          updater(context);
-          props.updateMask((mask) => (mask.context = context));
-        }}
-      />
-
-      <List
-        widgetStyle={{
-          rangeNextLine: isMobileScreen,
-        }}
-      >
-        <ListItem title={Locale.Mask.Config.Avatar}>
-          <Popover
-            content={
-              <AvatarPicker
-                onEmojiClick={(emoji) => {
-                  props.updateMask((mask) => (mask.avatar = emoji));
-                  setShowPicker(false);
-                }}
-              ></AvatarPicker>
-            }
-            open={showPicker}
-            onClose={() => setShowPicker(false)}
-          >
-            <div
-              onClick={() => setShowPicker(true)}
-              style={{ cursor: "pointer" }}
-            >
-              <MaskAvatar
-                avatar={props.mask.avatar}
-                model={props.mask.modelConfig.model}
-              />
-            </div>
-          </Popover>
-        </ListItem>
-        <ListItem title={Locale.Mask.Config.Name}>
-          <Input
-            type="text"
-            value={props.mask.name}
-            onChange={(e) =>
-              props.updateMask((mask) => {
-                mask.name = e;
-              })
-            }
-          ></Input>
-        </ListItem>
-        <ListItem
-          title={Locale.Mask.Config.HideContext.Title}
-          subTitle={Locale.Mask.Config.HideContext.SubTitle}
-        >
-          <Switch
-            value={!!props.mask.hideContext}
-            onChange={(e) => {
-              props.updateMask((mask) => {
-                mask.hideContext = e;
-              });
-            }}
-          ></Switch>
-        </ListItem>
-
-        {!props.shouldSyncFromGlobal ? (
-          <ListItem
-            title={Locale.Mask.Config.Share.Title}
-            subTitle={Locale.Mask.Config.Share.SubTitle}
-          >
-            <IconButton
-              icon={<CopyIcon />}
-              text={Locale.Mask.Config.Share.Action}
-              onClick={copyMaskLink}
-            />
-          </ListItem>
-        ) : null}
-
-        {props.shouldSyncFromGlobal ? (
-          <ListItem
-            title={Locale.Mask.Config.Sync.Title}
-            subTitle={Locale.Mask.Config.Sync.SubTitle}
-          >
-            <Switch
-              value={!!props.mask.syncGlobalConfig}
-              onChange={async (e) => {
-                const checked = e;
-                if (
-                  checked &&
-                  (await showConfirm(Locale.Mask.Config.Sync.Confirm))
-                ) {
-                  props.updateMask((mask) => {
-                    mask.syncGlobalConfig = checked;
-                    mask.modelConfig = { ...globalConfig.modelConfig };
-                  });
-                } else if (!checked) {
-                  props.updateMask((mask) => {
-                    mask.syncGlobalConfig = checked;
-                  });
-                }
-              }}
-            />
-          </ListItem>
-        ) : null}
-
-        <ModelSetting
-          modelConfig={{ ...props.mask.modelConfig }}
-          updateConfig={updateConfig}
-        />
-        {props.extraListItems}
-      </List>
-    </>
-  );
-}
--- a/app/containers/Settings/components/MaskSetting.tsx
+++ b/app/containers/Settings/components/MaskSetting.tsx
@@ -1,39 +0,0 @@
-import List, { ListItem } from "@/app/components/List";
-import Switch from "@/app/components/Switch";
-import Locale from "@/app/locales";
-import { useAppConfig } from "@/app/store/config";
-
-export interface MaskSettingProps {}
-
-export default function MaskSetting(props: MaskSettingProps) {
-  const config = useAppConfig();
-  const updateConfig = config.update;
-
-  return (
-    <List>
-      <ListItem
-        title={Locale.Settings.Mask.Splash.Title}
-        subTitle={Locale.Settings.Mask.Splash.SubTitle}
-      >
-        <Switch
-          value={!config.dontShowMaskSplashScreen}
-          onChange={(e) =>
-            updateConfig((config) => (config.dontShowMaskSplashScreen = !e))
-          }
-        />
-      </ListItem>
-
-      <ListItem
-        title={Locale.Settings.Mask.Builtin.Title}
-        subTitle={Locale.Settings.Mask.Builtin.SubTitle}
-      >
-        <Switch
-          value={config.hideBuiltinMasks}
-          onChange={(e) =>
-            updateConfig((config) => (config.hideBuiltinMasks = e))
-          }
-        />
-      </ListItem>
-    </List>
-  );
-}
--- a/app/containers/Settings/components/ModelSetting.tsx
+++ b/app/containers/Settings/components/ModelSetting.tsx
@@ -1,220 +0,0 @@
-import { ListItem } from "@/app/components/List";
-import {
-  ModalConfigValidator,
-  ModelConfig,
-  useAppConfig,
-} from "@/app/store/config";
-import { useAllModels } from "@/app/utils/hooks";
-import Locale from "@/app/locales";
-import Select from "@/app/components/Select";
-import SlideRange from "@/app/components/SlideRange";
-import Switch from "@/app/components/Switch";
-import Input from "@/app/components/Input";
-
-export default function ModelSetting(props: {
-  modelConfig: ModelConfig;
-  updateConfig: (updater: (config: ModelConfig) => void) => void;
-}) {
-  const allModels = useAllModels();
-  const { isMobileScreen } = useAppConfig();
-
-  return (
-    <>
-      <ListItem title={Locale.Settings.Model}>
-        <Select
-          value={props.modelConfig.model}
-          options={allModels
-            .filter((v) => v.available)
-            .map((v) => ({
-              value: v.name,
-              label: `${v.displayName}(${v.provider?.providerName})`,
-            }))}
-          onSelect={(e) => {
-            props.updateConfig(
-              (config) => (config.model = ModalConfigValidator.model(e)),
-            );
-          }}
-        />
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.Temperature.Title}
-        subTitle={Locale.Settings.Temperature.SubTitle}
-      >
-        <SlideRange
-          value={props.modelConfig.temperature}
-          range={{
-            start: 0,
-            stroke: 1,
-          }}
-          step={0.1}
-          onSlide={(e) => {
-            props.updateConfig(
-              (config) =>
-                (config.temperature = ModalConfigValidator.temperature(e)),
-            );
-          }}
-        ></SlideRange>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.TopP.Title}
-        subTitle={Locale.Settings.TopP.SubTitle}
-      >
-        <SlideRange
-          value={props.modelConfig.top_p ?? 1}
-          range={{
-            start: 0,
-            stroke: 1,
-          }}
-          step={0.1}
-          onSlide={(e) => {
-            props.updateConfig(
-              (config) => (config.top_p = ModalConfigValidator.top_p(e)),
-            );
-          }}
-        ></SlideRange>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.MaxTokens.Title}
-        subTitle={Locale.Settings.MaxTokens.SubTitle}
-      >
-        <Input
-          type="number"
-          min={1024}
-          max={512000}
-          value={props.modelConfig.max_tokens}
-          onChange={(e) =>
-            props.updateConfig(
-              (config) =>
-                (config.max_tokens = ModalConfigValidator.max_tokens(e)),
-            )
-          }
-        ></Input>
-      </ListItem>
-
-      {props.modelConfig.model.startsWith("gemini") ? null : (
-        <>
-          <ListItem
-            title={Locale.Settings.PresencePenalty.Title}
-            subTitle={Locale.Settings.PresencePenalty.SubTitle}
-          >
-            <SlideRange
-              value={props.modelConfig.presence_penalty}
-              range={{
-                start: -2,
-                stroke: 4,
-              }}
-              step={0.1}
-              onSlide={(e) => {
-                props.updateConfig(
-                  (config) =>
-                    (config.presence_penalty =
-                      ModalConfigValidator.presence_penalty(e)),
-                );
-              }}
-            ></SlideRange>
-          </ListItem>
-
-          <ListItem
-            title={Locale.Settings.FrequencyPenalty.Title}
-            subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
-          >
-            <SlideRange
-              value={props.modelConfig.frequency_penalty}
-              range={{
-                start: -2,
-                stroke: 4,
-              }}
-              step={0.1}
-              onSlide={(e) => {
-                props.updateConfig(
-                  (config) =>
-                    (config.frequency_penalty =
-                      ModalConfigValidator.frequency_penalty(e)),
-                );
-              }}
-            ></SlideRange>
-          </ListItem>
-
-          <ListItem
-            title={Locale.Settings.InjectSystemPrompts.Title}
-            subTitle={Locale.Settings.InjectSystemPrompts.SubTitle}
-          >
-            <Switch
-              value={props.modelConfig.enableInjectSystemPrompts}
-              onChange={(e) =>
-                props.updateConfig(
-                  (config) => (config.enableInjectSystemPrompts = e),
-                )
-              }
-            />
-          </ListItem>
-
-          <ListItem
-            title={Locale.Settings.InputTemplate.Title}
-            subTitle={Locale.Settings.InputTemplate.SubTitle}
-            nextline={isMobileScreen}
-            validator={(v: string) => {
-              if (!v.includes("{{input}}")) {
-                return {
-                  error: true,
-                  message: Locale.Settings.InputTemplate.Error,
-                };
-              }
-
-              return { error: false };
-            }}
-          >
-            <Input
-              type="text"
-              value={props.modelConfig.template}
-              onChange={(e = "") =>
-                props.updateConfig((config) => (config.template = e))
-              }
-            ></Input>
-          </ListItem>
-        </>
-      )}
-      <ListItem
-        title={Locale.Settings.HistoryCount.Title}
-        subTitle={Locale.Settings.HistoryCount.SubTitle}
-      >
-        <SlideRange
-          value={props.modelConfig.historyMessageCount}
-          range={{
-            start: 0,
-            stroke: 64,
-          }}
-          step={1}
-          onSlide={(e) => {
-            props.updateConfig((config) => (config.historyMessageCount = e));
-          }}
-        ></SlideRange>
-      </ListItem>
-
-      <ListItem
-        title={Locale.Settings.CompressThreshold.Title}
-        subTitle={Locale.Settings.CompressThreshold.SubTitle}
-      >
-        <Input
-          type="number"
-          min={500}
-          max={4000}
-          value={props.modelConfig.compressMessageLengthThreshold}
-          onChange={(e) =>
-            props.updateConfig(
-              (config) => (config.compressMessageLengthThreshold = e),
-            )
-          }
-        ></Input>
-      </ListItem>
-      <ListItem title={Locale.Memory.Title} subTitle={Locale.Memory.Send}>
-        <Switch
-          value={props.modelConfig.sendMemory}
-          onChange={(e) =>
-            props.updateConfig((config) => (config.sendMemory = e))
-          }
-        />
-      </ListItem>
-    </>
-  );
-}
--- a/app/containers/Settings/components/PromptSetting.tsx
+++ b/app/containers/Settings/components/PromptSetting.tsx
@@ -1,63 +0,0 @@
-import { useState } from "react";
-import UserPromptModal from "./UserPromptModal";
-import List, { ListItem } from "@/app/components/List";
-import Locale from "@/app/locales";
-import { useAppConfig } from "@/app/store/config";
-import { SearchService, usePromptStore } from "@/app/store/prompt";
-
-import Switch from "@/app/components/Switch";
-import Btn from "@/app/components/Btn";
-
-import EditIcon from "@/app/icons/editIcon.svg";
-
-export interface PromptSettingProps {}
-
-export default function PromptSetting(props: PromptSettingProps) {
-  const [shouldShowPromptModal, setShowPromptModal] = useState(false);
-
-  const config = useAppConfig();
-  const updateConfig = config.update;
-
-  const builtinCount = SearchService.count.builtin;
-
-  const promptStore = usePromptStore();
-  const customCount = promptStore.getUserPrompts().length ?? 0;
-
-  const textStyle = " !text-sm";
-
-  return (
-    <>
-      <List>
-        <ListItem
-          title={Locale.Settings.Prompt.Disable.Title}
-          subTitle={Locale.Settings.Prompt.Disable.SubTitle}
-        >
-          <Switch
-            value={config.disablePromptHint}
-            onChange={(e) =>
-              updateConfig((config) => (config.disablePromptHint = e))
-            }
-          />
-        </ListItem>
-
-        <ListItem
-          title={Locale.Settings.Prompt.List}
-          subTitle={Locale.Settings.Prompt.ListCount(builtinCount, customCount)}
-        >
-          <div className="flex gap-3">
-            <Btn
-              onClick={() => setShowPromptModal(true)}
-              text={
-                <span className={textStyle}>{Locale.Settings.Prompt.Edit}</span>
-              }
-              prefixIcon={config.isMobileScreen ? undefined : <EditIcon />}
-            ></Btn>
-          </div>
-        </ListItem>
-      </List>
-      {shouldShowPromptModal && (
-        <UserPromptModal onClose={() => setShowPromptModal(false)} />
-      )}
-    </>
-  );
-}
--- a/app/containers/Settings/components/ProviderSetting.tsx
+++ b/app/containers/Settings/components/ProviderSetting.tsx
@@ -1,283 +0,0 @@
-import { useMemo } from "react";
-import {
-  Anthropic,
-  Azure,
-  Google,
-  OPENAI_BASE_URL,
-  ServiceProvider,
-  SlotID,
-} from "@/app/constant";
-import Locale from "@/app/locales";
-import { useAccessStore } from "@/app/store/access";
-import { getClientConfig } from "@/app/config/client";
-import { useAppConfig } from "@/app/store/config";
-import List, { ListItem } from "@/app/components/List";
-import Select from "@/app/components/Select";
-import Switch from "@/app/components/Switch";
-import Input from "@/app/components/Input";
-
-export default function ProviderSetting() {
-  const accessStore = useAccessStore();
-  const config = useAppConfig();
-  const { isMobileScreen } = config;
-  const clientConfig = useMemo(() => getClientConfig(), []);
-
-  return (
-    <List
-      id={SlotID.CustomModel}
-      widgetStyle={{
-        selectClassName: "min-w-select-mobile md:min-w-select",
-        inputClassName: "md:min-w-select",
-        rangeClassName: "md:min-w-select",
-        inputNextLine: isMobileScreen,
-      }}
-    >
-      {!accessStore.hideUserApiKey && (
-        <>
-          {
-            // Conditionally render the following ListItem based on clientConfig.isApp
-            !clientConfig?.isApp && ( // only show if isApp is false
-              <ListItem
-                title={Locale.Settings.Access.CustomEndpoint.Title}
-                subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle}
-              >
-                <Switch
-                  value={accessStore.useCustomConfig}
-                  onChange={(e) =>
-                    accessStore.update((access) => (access.useCustomConfig = e))
-                  }
-                />
-              </ListItem>
-            )
-          }
-          {accessStore.useCustomConfig && (
-            <>
-              <ListItem
-                title={Locale.Settings.Access.Provider.Title}
-                subTitle={Locale.Settings.Access.Provider.SubTitle}
-              >
-                <Select
-                  value={accessStore.provider}
-                  onSelect={(e) => {
-                    accessStore.update((access) => (access.provider = e));
-                  }}
-                  options={Object.entries(ServiceProvider).map(([k, v]) => ({
-                    value: v,
-                    label: k,
-                  }))}
-                />
-              </ListItem>
-
-              {accessStore.provider === ServiceProvider.OpenAI && (
-                <>
-                  <ListItem
-                    title={Locale.Settings.Access.OpenAI.Endpoint.Title}
-                    subTitle={Locale.Settings.Access.OpenAI.Endpoint.SubTitle}
-                  >
-                    <Input
-                      type="text"
-                      value={accessStore.openaiUrl}
-                      placeholder={OPENAI_BASE_URL}
-                      onChange={(e = "") =>
-                        accessStore.update((access) => (access.openaiUrl = e))
-                      }
-                    ></Input>
-                  </ListItem>
-                  <ListItem
-                    title={Locale.Settings.Access.OpenAI.ApiKey.Title}
-                    subTitle={Locale.Settings.Access.OpenAI.ApiKey.SubTitle}
-                  >
-                    <Input
-                      value={accessStore.openaiApiKey}
-                      type="password"
-                      placeholder={
-                        Locale.Settings.Access.OpenAI.ApiKey.Placeholder
-                      }
-                      onChange={(e) => {
-                        accessStore.update(
-                          (access) => (access.openaiApiKey = e),
-                        );
-                      }}
-                    />
-                  </ListItem>
-                </>
-              )}
-              {accessStore.provider === ServiceProvider.Azure && (
-                <>
-                  <ListItem
-                    title={Locale.Settings.Access.Azure.Endpoint.Title}
-                    subTitle={
-                      Locale.Settings.Access.Azure.Endpoint.SubTitle +
-                      Azure.ExampleEndpoint
-                    }
-                  >
-                    <Input
-                      type="text"
-                      value={accessStore.azureUrl}
-                      placeholder={Azure.ExampleEndpoint}
-                      onChange={(e) =>
-                        accessStore.update((access) => (access.azureUrl = e))
-                      }
-                    ></Input>
-                  </ListItem>
-                  <ListItem
-                    title={Locale.Settings.Access.Azure.ApiKey.Title}
-                    subTitle={Locale.Settings.Access.Azure.ApiKey.SubTitle}
-                  >
-                    <Input
-                      value={accessStore.azureApiKey}
-                      type="password"
-                      placeholder={
-                        Locale.Settings.Access.Azure.ApiKey.Placeholder
-                      }
-                      onChange={(e) => {
-                        accessStore.update(
-                          (access) => (access.azureApiKey = e),
-                        );
-                      }}
-                    />
-                  </ListItem>
-                  <ListItem
-                    title={Locale.Settings.Access.Azure.ApiVerion.Title}
-                    subTitle={Locale.Settings.Access.Azure.ApiVerion.SubTitle}
-                  >
-                    <Input
-                      type="text"
-                      value={accessStore.azureApiVersion}
-                      placeholder="2023-08-01-preview"
-                      onChange={(e) =>
-                        accessStore.update(
-                          (access) => (access.azureApiVersion = e),
-                        )
-                      }
-                    ></Input>
-                  </ListItem>
-                </>
-              )}
-              {accessStore.provider === ServiceProvider.Google && (
-                <>
-                  <ListItem
-                    title={Locale.Settings.Access.Google.Endpoint.Title}
-                    subTitle={
-                      Locale.Settings.Access.Google.Endpoint.SubTitle +
-                      Google.ExampleEndpoint
-                    }
-                  >
-                    <Input
-                      type="text"
-                      value={accessStore.googleUrl}
-                      placeholder={Google.ExampleEndpoint}
-                      onChange={(e) =>
-                        accessStore.update((access) => (access.googleUrl = e))
-                      }
-                    ></Input>
-                  </ListItem>
-                  <ListItem
-                    title={Locale.Settings.Access.Google.ApiKey.Title}
-                    subTitle={Locale.Settings.Access.Google.ApiKey.SubTitle}
-                  >
-                    <Input
-                      value={accessStore.googleApiKey}
-                      type="password"
-                      placeholder={
-                        Locale.Settings.Access.Google.ApiKey.Placeholder
-                      }
-                      onChange={(e) => {
-                        accessStore.update(
-                          (access) => (access.googleApiKey = e),
-                        );
-                      }}
-                    />
-                  </ListItem>
-                  <ListItem
-                    title={Locale.Settings.Access.Google.ApiVersion.Title}
-                    subTitle={Locale.Settings.Access.Google.ApiVersion.SubTitle}
-                  >
-                    <Input
-                      type="text"
-                      value={accessStore.googleApiVersion}
-                      placeholder="2023-08-01-preview"
-                      onChange={(e) =>
-                        accessStore.update(
-                          (access) => (access.googleApiVersion = e),
-                        )
-                      }
-                    ></Input>
-                  </ListItem>
-                </>
-              )}
-              {accessStore.provider === ServiceProvider.Anthropic && (
-                <>
-                  <ListItem
-                    title={Locale.Settings.Access.Anthropic.Endpoint.Title}
-                    subTitle={
-                      Locale.Settings.Access.Anthropic.Endpoint.SubTitle +
-                      Anthropic.ExampleEndpoint
-                    }
-                  >
-                    <Input
-                      type="text"
-                      value={accessStore.anthropicUrl}
-                      placeholder={Anthropic.ExampleEndpoint}
-                      onChange={(e) =>
-                        accessStore.update(
-                          (access) => (access.anthropicUrl = e),
-                        )
-                      }
-                    ></Input>
-                  </ListItem>
-                  <ListItem
-                    title={Locale.Settings.Access.Anthropic.ApiKey.Title}
-                    subTitle={Locale.Settings.Access.Anthropic.ApiKey.SubTitle}
-                  >
-                    <Input
-                      value={accessStore.anthropicApiKey}
-                      type="password"
-                      placeholder={
-                        Locale.Settings.Access.Anthropic.ApiKey.Placeholder
-                      }
-                      onChange={(e) => {
-                        accessStore.update(
-                          (access) => (access.anthropicApiKey = e),
-                        );
-                      }}
-                    />
-                  </ListItem>
-                  <ListItem
-                    title={Locale.Settings.Access.Anthropic.ApiVerion.Title}
-                    subTitle={
-                      Locale.Settings.Access.Anthropic.ApiVerion.SubTitle
-                    }
-                  >
-                    <Input
-                      type="text"
-                      value={accessStore.anthropicApiVersion}
-                      placeholder={Anthropic.Vision}
-                      onChange={(e) =>
-                        accessStore.update(
-                          (access) => (access.anthropicApiVersion = e),
-                        )
-                      }
-                    ></Input>
-                  </ListItem>
-                </>
-              )}
-            </>
-          )}
-        </>
-      )}
-
-      <ListItem
-        title={Locale.Settings.Access.CustomModel.Title}
-        subTitle={Locale.Settings.Access.CustomModel.SubTitle}
-      >
-        <Input
-          type="text"
-          value={config.customModels}
-          placeholder="model1,model2,model3"
-          onChange={(e) => config.update((config) => (config.customModels = e))}
-        ></Input>
-      </ListItem>
-    </List>
-  );
-}
--- a/app/containers/Settings/components/SettingHeader.tsx
+++ b/app/containers/Settings/components/SettingHeader.tsx
@@ -1,47 +0,0 @@
-import Locale from "@/app/locales";
-import GobackIcon from "@/app/icons/goback.svg";
-
-export interface ChatHeaderProps {
-  isMobileScreen: boolean;
-  goback: () => void;
-}
-
-export default function SettingHeader(props: ChatHeaderProps) {
-  const { isMobileScreen, goback } = props;
-
-  return (
-    <div
-      className={`
-        relative flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b border-settings-header 
-        max-md:h-menu-title-mobile max-md:bg-settings-header-mobile
-      `}
-      data-tauri-drag-region
-    >
-      {isMobileScreen ? (
-        <div
-          className="absolute left-4 top-[50%] translate-y-[-50%] cursor-pointer"
-          onClick={() => goback()}
-        >
-          <GobackIcon />
-        </div>
-      ) : null}
-
-      <div
-        className={`
-        flex-1 
-        max-md:flex max-md:flex-col max-md:items-center max-md:justify-center max-md:gap-0.5 max-md:text
-        md:mr-4
-      `}
-      >
-        <div
-          className={`
-          line-clamp-1 cursor-pointer text-text-settings-panel-header-title text-chat-header-title font-common 
-          max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5 !font-medium
-          `}
-        >
-          {Locale.Settings.Title}
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/app/containers/Settings/components/SyncConfigModal.tsx
+++ b/app/containers/Settings/components/SyncConfigModal.tsx
@@ -1,199 +0,0 @@
-import { Modal } from "@/app/components/ui-lib";
-import { useSyncStore } from "@/app/store/sync";
-import Locale from "@/app/locales";
-import { IconButton } from "@/app/components/button";
-import { ProviderType } from "@/app/utils/cloud";
-import { STORAGE_KEY } from "@/app/constant";
-import { useMemo, useState } from "react";
-
-import ConnectionIcon from "@/app/icons/connection.svg";
-import CloudSuccessIcon from "@/app/icons/cloud-success.svg";
-import CloudFailIcon from "@/app/icons/cloud-fail.svg";
-import ConfirmIcon from "@/app/icons/confirm.svg";
-import LoadingIcon from "@/app/icons/three-dots.svg";
-import List, { ListItem } from "@/app/components/List";
-import Switch from "@/app/components/Switch";
-import Select from "@/app/components/Select";
-import Input from "@/app/components/Input";
-import { useAppConfig } from "@/app/store";
-
-function CheckButton() {
-  const syncStore = useSyncStore();
-
-  const couldCheck = useMemo(() => {
-    return syncStore.cloudSync();
-  }, [syncStore]);
-
-  const [checkState, setCheckState] = useState<
-    "none" | "checking" | "success" | "failed"
-  >("none");
-
-  async function check() {
-    setCheckState("checking");
-    const valid = await syncStore.check();
-    setCheckState(valid ? "success" : "failed");
-  }
-
-  if (!couldCheck) return null;
-
-  return (
-    <IconButton
-      text={Locale.Settings.Sync.Config.Modal.Check}
-      bordered
-      onClick={check}
-      icon={
-        checkState === "none" ? (
-          <ConnectionIcon />
-        ) : checkState === "checking" ? (
-          <LoadingIcon />
-        ) : checkState === "success" ? (
-          <CloudSuccessIcon />
-        ) : checkState === "failed" ? (
-          <CloudFailIcon />
-        ) : (
-          <ConnectionIcon />
-        )
-      }
-    ></IconButton>
-  );
-}
-
-export default function SyncConfigModal(props: { onClose?: () => void }) {
-  const syncStore = useSyncStore();
-  const config = useAppConfig();
-  const { isMobileScreen } = config;
-  return (
-    <div className="modal-mask">
-      <Modal
-        title={Locale.Settings.Sync.Config.Modal.Title}
-        onClose={() => props.onClose?.()}
-        actions={[
-          <CheckButton key="check" />,
-          <IconButton
-            key="confirm"
-            onClick={props.onClose}
-            icon={<ConfirmIcon />}
-            bordered
-            text={Locale.UI.Confirm}
-          />,
-        ]}
-        className="!bg-modal-mask active-new"
-      >
-        <List
-          widgetStyle={{
-            rangeNextLine: isMobileScreen,
-          }}
-        >
-          <ListItem
-            title={Locale.Settings.Sync.Config.SyncType.Title}
-            subTitle={Locale.Settings.Sync.Config.SyncType.SubTitle}
-          >
-            <Select
-              value={syncStore.provider}
-              options={Object.entries(ProviderType).map(([k, v]) => ({
-                value: v,
-                label: k,
-              }))}
-              onSelect={(v) => {
-                syncStore.update((config) => (config.provider = v));
-              }}
-            />
-          </ListItem>
-
-          <ListItem
-            title={Locale.Settings.Sync.Config.Proxy.Title}
-            subTitle={Locale.Settings.Sync.Config.Proxy.SubTitle}
-          >
-            <Switch
-              value={syncStore.useProxy}
-              onChange={(e) => {
-                syncStore.update((config) => (config.useProxy = e));
-              }}
-            />
-          </ListItem>
-          {syncStore.useProxy ? (
-            <ListItem
-              title={Locale.Settings.Sync.Config.ProxyUrl.Title}
-              subTitle={Locale.Settings.Sync.Config.ProxyUrl.SubTitle}
-            >
-              <Input
-                type="text"
-                value={syncStore.proxyUrl}
-                onChange={(e) => {
-                  syncStore.update((config) => (config.proxyUrl = e));
-                }}
-              ></Input>
-            </ListItem>
-          ) : null}
-
-          {syncStore.provider === ProviderType.WebDAV && (
-            <>
-              <ListItem title={Locale.Settings.Sync.Config.WebDav.Endpoint}>
-                <Input
-                  type="text"
-                  value={syncStore.webdav.endpoint}
-                  onChange={(e) => {
-                    syncStore.update((config) => (config.webdav.endpoint = e));
-                  }}
-                ></Input>
-              </ListItem>
-
-              <ListItem title={Locale.Settings.Sync.Config.WebDav.UserName}>
-                <Input
-                  type="text"
-                  value={syncStore.webdav.username}
-                  onChange={(e) => {
-                    syncStore.update((config) => (config.webdav.username = e));
-                  }}
-                ></Input>
-              </ListItem>
-              <ListItem title={Locale.Settings.Sync.Config.WebDav.Password}>
-                <Input
-                  value={syncStore.webdav.password}
-                  type="password"
-                  onChange={(e) => {
-                    syncStore.update((config) => (config.webdav.password = e));
-                  }}
-                ></Input>
-              </ListItem>
-            </>
-          )}
-
-          {syncStore.provider === ProviderType.UpStash && (
-            <>
-              <ListItem title={Locale.Settings.Sync.Config.UpStash.Endpoint}>
-                <Input
-                  type="text"
-                  value={syncStore.upstash.endpoint}
-                  onChange={(e) => {
-                    syncStore.update((config) => (config.upstash.endpoint = e));
-                  }}
-                ></Input>
-              </ListItem>
-
-              <ListItem title={Locale.Settings.Sync.Config.UpStash.UserName}>
-                <Input
-                  type="text"
-                  value={syncStore.upstash.username}
-                  placeholder={STORAGE_KEY}
-                  onChange={(e) => {
-                    syncStore.update((config) => (config.upstash.username = e));
-                  }}
-                ></Input>
-              </ListItem>
-              <ListItem title={Locale.Settings.Sync.Config.UpStash.Password}>
-                <Input
-                  value={syncStore.upstash.apiKey}
-                  type="password"
-                  onChange={(e) => {
-                    syncStore.update((config) => (config.upstash.apiKey = e));
-                  }}
-                ></Input>
-              </ListItem>
-            </>
-          )}
-        </List>
-      </Modal>
-    </div>
-  );
-}
--- a/app/containers/Settings/components/SyncItems.tsx
+++ b/app/containers/Settings/components/SyncItems.tsx
@@ -1,112 +0,0 @@
-import ConfigIcon from "@/app/icons/configIcon2.svg";
-import ExportIcon from "@/app/icons/exportIcon.svg";
-import ImportIcon from "@/app/icons/importIcon.svg";
-import SyncIcon from "@/app/icons/syncIcon.svg";
-
-import { showToast } from "@/app/components/ui-lib";
-import { useChatStore } from "@/app/store/chat";
-import { useMaskStore } from "@/app/store/mask";
-import { usePromptStore } from "@/app/store/prompt";
-import { useSyncStore } from "@/app/store/sync";
-import { useMemo, useState } from "react";
-import Locale from "@/app/locales";
-
-import SyncConfigModal from "./SyncConfigModal";
-import List, { ListItem } from "@/app/components/List";
-import Btn from "@/app/components/Btn";
-import { useAppConfig } from "@/app/store";
-
-export default function SyncItems() {
-  const syncStore = useSyncStore();
-  const chatStore = useChatStore();
-  const promptStore = usePromptStore();
-  const maskStore = useMaskStore();
-  const couldSync = useMemo(() => {
-    return syncStore.cloudSync();
-  }, [syncStore]);
-
-  const { isMobileScreen } = useAppConfig();
-
-  const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
-
-  const stateOverview = useMemo(() => {
-    const sessions = chatStore.sessions;
-    const messageCount = sessions.reduce((p, c) => p + c.messages.length, 0);
-
-    return {
-      chat: sessions.length,
-      message: messageCount,
-      prompt: Object.keys(promptStore.prompts).length,
-      mask: Object.keys(maskStore.masks).length,
-    };
-  }, [chatStore.sessions, maskStore.masks, promptStore.prompts]);
-
-  const textStyle = "!text-sm";
-  return (
-    <>
-      <List>
-        <ListItem
-          title={Locale.Settings.Sync.CloudState}
-          subTitle={
-            syncStore.lastProvider
-              ? `${new Date(syncStore.lastSyncTime).toLocaleString()} [${
-                  syncStore.lastProvider
-                }]`
-              : Locale.Settings.Sync.NotSyncYet
-          }
-        >
-          <div className="flex gap-3">
-            <Btn
-              onClick={() => {
-                setShowSyncConfigModal(true);
-              }}
-              text={<span className={textStyle}>{Locale.UI.Config}</span>}
-              prefixIcon={isMobileScreen ? undefined : <ConfigIcon />}
-            ></Btn>
-            {couldSync && (
-              <Btn
-                onClick={async () => {
-                  try {
-                    await syncStore.sync();
-                    showToast(Locale.Settings.Sync.Success);
-                  } catch (e) {
-                    showToast(Locale.Settings.Sync.Fail);
-                    console.error("[Sync]", e);
-                  }
-                }}
-                text={<span className={textStyle}>{Locale.UI.Sync}</span>}
-                prefixIcon={<SyncIcon />}
-              ></Btn>
-            )}
-          </div>
-        </ListItem>
-
-        <ListItem
-          title={Locale.Settings.Sync.LocalState}
-          subTitle={Locale.Settings.Sync.Overview(stateOverview)}
-        >
-          <div className="flex gap-3">
-            <Btn
-              onClick={() => {
-                syncStore.export();
-              }}
-              text={<span className={textStyle}>{Locale.UI.Export}</span>}
-              prefixIcon={<ExportIcon />}
-            ></Btn>
-            <Btn
-              onClick={async () => {
-                syncStore.import();
-              }}
-              text={<span className={textStyle}>{Locale.UI.Import}</span>}
-              prefixIcon={<ImportIcon />}
-            ></Btn>
-          </div>
-        </ListItem>
-      </List>
-
-      {showSyncConfigModal && (
-        <SyncConfigModal onClose={() => setShowSyncConfigModal(false)} />
-      )}
-    </>
-  );
-}
--- a/app/containers/Settings/components/UserPromptModal.tsx
+++ b/app/containers/Settings/components/UserPromptModal.tsx
@@ -1,169 +0,0 @@
-import { useEffect, useState } from "react";
-import { nanoid } from "nanoid";
-import { Prompt, SearchService, usePromptStore } from "@/app/store/prompt";
-import { Input as Textarea, Modal } from "@/app/components/ui-lib";
-import Locale from "@/app/locales";
-import { IconButton } from "@/app/components/button";
-
-import AddIcon from "@/app/icons/add.svg";
-import CopyIcon from "@/app/icons/copy.svg";
-import ClearIcon from "@/app/icons/clear.svg";
-import EditIcon from "@/app/icons/edit.svg";
-import EyeIcon from "@/app/icons/eye.svg";
-
-import styles from "../index.module.scss";
-import { copyToClipboard } from "@/app/utils";
-import Input from "@/app/components/Input";
-
-function EditPromptModal(props: { id: string; onClose: () => void }) {
-  const promptStore = usePromptStore();
-  const prompt = promptStore.get(props.id);
-
-  return prompt ? (
-    <div className="modal-mask">
-      <Modal
-        title={Locale.Settings.Prompt.EditModal.Title}
-        onClose={props.onClose}
-        actions={[
-          <IconButton
-            key=""
-            onClick={props.onClose}
-            text={Locale.UI.Confirm}
-            bordered
-          />,
-        ]}
-        // className="!bg-modal-mask"
-      >
-        <div className={styles["edit-prompt-modal"]}>
-          <Input
-            type="text"
-            value={prompt.title}
-            readOnly={!prompt.isUser}
-            className={styles["edit-prompt-title"]}
-            onChange={(e) =>
-              promptStore.updatePrompt(props.id, (prompt) => (prompt.title = e))
-            }
-          ></Input>
-          <Textarea
-            value={prompt.content}
-            readOnly={!prompt.isUser}
-            className={styles["edit-prompt-content"]}
-            rows={10}
-            onInput={(e) =>
-              promptStore.updatePrompt(
-                props.id,
-                (prompt) => (prompt.content = e.currentTarget.value),
-              )
-            }
-          ></Textarea>
-        </div>
-      </Modal>
-    </div>
-  ) : null;
-}
-
-export default function UserPromptModal(props: { onClose?: () => void }) {
-  const promptStore = usePromptStore();
-  const userPrompts = promptStore.getUserPrompts();
-  const builtinPrompts = SearchService.builtinPrompts;
-  const allPrompts = userPrompts.concat(builtinPrompts);
-  const [searchInput, setSearchInput] = useState("");
-  const [searchPrompts, setSearchPrompts] = useState<Prompt[]>([]);
-  const prompts = searchInput.length > 0 ? searchPrompts : allPrompts;
-
-  const [editingPromptId, setEditingPromptId] = useState<string>();
-
-  useEffect(() => {
-    if (searchInput.length > 0) {
-      const searchResult = SearchService.search(searchInput);
-      setSearchPrompts(searchResult);
-    } else {
-      setSearchPrompts([]);
-    }
-  }, [searchInput]);
-
-  return (
-    <div className="modal-mask">
-      <Modal
-        title={Locale.Settings.Prompt.Modal.Title}
-        onClose={() => props.onClose?.()}
-        actions={[
-          <IconButton
-            key="add"
-            onClick={() => {
-              const promptId = promptStore.add({
-                id: nanoid(),
-                createdAt: Date.now(),
-                title: "Empty Prompt",
-                content: "Empty Prompt Content",
-              });
-              setEditingPromptId(promptId);
-            }}
-            icon={<AddIcon />}
-            bordered
-            text={Locale.Settings.Prompt.Modal.Add}
-          />,
-        ]}
-        // className="!bg-modal-mask"
-      >
-        <div className={styles["user-prompt-modal"]}>
-          <Input
-            type="text"
-            className={styles["user-prompt-search"]}
-            placeholder={Locale.Settings.Prompt.Modal.Search}
-            value={searchInput}
-            onChange={(e) => setSearchInput(e)}
-          ></Input>
-
-          <div className={styles["user-prompt-list"]}>
-            {prompts.map((v, _) => (
-              <div className={styles["user-prompt-item"]} key={v.id ?? v.title}>
-                <div className={styles["user-prompt-header"]}>
-                  <div className={styles["user-prompt-title"]}>{v.title}</div>
-                  <div className={styles["user-prompt-content"] + " one-line"}>
-                    {v.content}
-                  </div>
-                </div>
-
-                <div className={styles["user-prompt-buttons"]}>
-                  {v.isUser && (
-                    <IconButton
-                      icon={<ClearIcon />}
-                      className={styles["user-prompt-button"]}
-                      onClick={() => promptStore.remove(v.id!)}
-                    />
-                  )}
-                  {v.isUser ? (
-                    <IconButton
-                      icon={<EditIcon />}
-                      className={styles["user-prompt-button"]}
-                      onClick={() => setEditingPromptId(v.id)}
-                    />
-                  ) : (
-                    <IconButton
-                      icon={<EyeIcon />}
-                      className={styles["user-prompt-button"]}
-                      onClick={() => setEditingPromptId(v.id)}
-                    />
-                  )}
-                  <IconButton
-                    icon={<CopyIcon />}
-                    className={styles["user-prompt-button"]}
-                    onClick={() => copyToClipboard(v.content)}
-                  />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </Modal>
-
-      {editingPromptId !== undefined && (
-        <EditPromptModal
-          id={editingPromptId!}
-          onClose={() => setEditingPromptId(undefined)}
-        />
-      )}
-    </div>
-  );
-}
--- a/Show More
+++ b/Show More